chore(*): rearrangedfolders ins torybook

.storybook/main.js

@@ -1,8 +1,11 @@
 import remarkGfm from "remark-gfm";
 module.exports = {
   stories: [
-    "../stories/frameworks/**/*.mdx",
-    "../stories/getting-started/**/*.mdx",
+    "../stories/style/**/*.@(mdx|stories.@(js|jsx|ts|tsx))",
+    "../stories/usage/**/*.@(mdx|stories.@(js|jsx|ts|tsx))",
+    "../stories/migration/**/*.@(mdx|stories.@(js|jsx|ts|tsx))",
+    "../stories/frameworks/**/*.@(mdx|stories.@(js|jsx|ts|tsx))",
+    "../stories/getting-started/**/*.@(mdx|stories.@(js|jsx|ts|tsx))",
     // "../stories/components/*.@(mdx|stories.@(js|jsx|ts|tsx))",
     "../stories/components/Accordion.@(mdx|stories.@(js|jsx|ts|tsx))",
     "../stories/components/Alert.@(mdx|stories.@(js|jsx|ts|tsx))",

.storybook/preview.ts

@@ -5,6 +5,7 @@ import customElements from "../custom-elements.json";
 import "../lib/index.js";
 import "../lib/themes/day.css";
 import "../lib/themes/night.css";
+import "../lib/css/sgds.css";
 import "./global.css";
 import sgdsTheme from "./sgdsTheme";
 
@@ -54,6 +55,7 @@ export const parameters = {
         "Migration",
         "Usage",
         "Frameworks",
+        ["Angular", "Vue", "React", "NextJS"],
         "Style",
         "Troubleshooting",
         "Components",

docs/FoundationalStyles.md

@@ -41,7 +41,7 @@ import "@govtechsg/sgds-web-component/css/sgds.css"
 @import "@govtechsg/sgds-web-component/css/sgds.css";
 ```
 
-### Cherry pick the styles
+<!-- ### Cherry pick the styles
 
 `css/sgds.css` contains all the stylings found in the folder `css`. You can also choose to cherry pick the styles you required. For example, `label.css`
 
@@ -51,9 +51,9 @@ import "@govtechsg/sgds-web-component/css/sgds.css"
 import "@govtechsg/sgds-web-component/themes/day.css"
 //optional: if you are doing night mode 
 import "@govtechsg/sgds-web-component/themes/night.css"
-import "@govtechsg/sgds-web-component/css/label.css"
+import "@govtechsg/sgds-web-component/css/label.css" -->
 
-```
+<!-- ```
 
 <strong>CSS imports</strong>
 
@@ -62,12 +62,4 @@ import "@govtechsg/sgds-web-component/css/label.css"
 /** optional: if you are doing night mode */
 @import "@govtechsg/sgds-web-component/themes/night.css";
 @import "@govtechsg/sgds-web-component/css/label.css";
-```
-
-## Source files
-
-<iframe
-  src='https://gist.github.com/clukhei/a31bfc0ea0c2b87d950b125f92835a76.pibb'
-  style="width: 100%; height: 1000px; border: 0;"
->
-</iframe>
+``` -->

docs/INSTALLATION.md

@@ -62,13 +62,13 @@ This method registers all SGDS elements up front in the Custom Elements Registry
 // load scoped custom element registry polyfill first (optional, depends on use case)
 <script src="https://cdn.jsdelivr.net/npm/@webcomponents/[email protected]"></script>
 // Load global css file
-<link href='https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@<version>/themes/day.css' rel='stylesheet' type='text/css' />
+<link href='https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.0.0-rc.0/themes/day.css' rel='stylesheet' type='text/css' />
 
 // it is recommended to load a particular version when using cdn e.g. https://cdn.jsdelivr.net/npm/@govtechsg/[email protected]
-<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@<version>"></script>
+<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.0.0-rc.0"></script>
 
 //or load a single component e.g. Masthead
-<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@<version>/components/Masthead/index.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.0.0-rc.0/components/Masthead/index.umd.js"></script>
 
 ```
 

docs/Imports.md

@@ -1,5 +1,9 @@
 # Imports
 
+## React users
+
+Are you a react user? If so, skip to the <a href="/docs/frameworks-react--docs" target="_self">react setup </a>
+
 ## Using the custom elements
 
 Once imported, the custom elements can be used throughout the project.
@@ -15,7 +19,7 @@ import "@govtechsg/sgds-web-component/components/Button";
 // <sgds-button>Hello World</sgds-button>
 ```
 
-## Using the component's class object
+## Typescript: Using the component's class object
 
 When writing with Typescript, you might be required to type the components in certain cases. Import the component class like so. 
 Each component's Class is exported via named exports, prefixed with `Sgds`.

docs/Introduction.md

@@ -6,13 +6,13 @@
 
 <div class="home-card-container mt-5">
     <sgds-card class="col intro">
-        <span slot="card-title">SGDS v3 <i class="bi bi-filetype-scss"></i></span>
+        <span slot="card-title">SGDS v3</span>
         <a slot="card-link" href="https://designsystem.tech.gov.sg/" target="_blank">Learn more</a>
-        <p slot="card-text">The components are shipped with SGDS v2 styles and can be used straight out of the box.</p>
+        <p slot="card-text">The component library for SGDS v3. New skins and dark theme introduced</p>
     </sgds-card>
      <sgds-card class="col intro">
         <span slot="card-title">About web components <i class="bi bi-puzzle"></i></span>
-        <a slot="card-link" href="https://custom-elements-everywhere.com/" target="_blank">Learn more</a>
+        <a slot="card-link" href="/docs/getting-started-about-sgds-web-components--docs" target="_blank">Learn more</a>
         <p slot="card-text">Unfamiliar with web components? Find out more about web components.</p>
     </sgds-card>
      <sgds-card class="col intro">
@@ -22,12 +22,12 @@
     </sgds-card>
      <sgds-card stretchedLink class="col intro">
         <span slot="card-title">Customisable with CSS <i class="bi bi-filetype-css"></i></span>
-        <a slot="card-link" href="/story/getting-started-usage-stylings--page" target="_self">Learn more</a>
-        <p slot="card-text">Components are customisable with cssparts, css custom variables and class-like properties.</p>
+        <a slot="card-link" href="/docs/style-theming--docs" target="_self">Learn more</a>
+        <p slot="card-text">Change up the default theme via CSS variables</p>
     </sgds-card>
      <sgds-card class="col intro">
         <span slot="card-title">Works with CDNs <i class="bi bi-truck"></i></span>
-        <a slot="card-link" href="/story/getting-started-installation--page" target="_self">Learn more</a>
+        <a slot="card-link" href="/docs/getting-started-installation--docs" target="_self">Learn more</a>
         <p slot="card-text">Besides whole library CDN, each component also has its own CDN.</p>
     </sgds-card>
 <sgds-card class="col intro">
@@ -42,6 +42,6 @@
 <sgds-card class="col intro">
         <span slot="card-title">Extendable <i class="bi bi-bricks"></i></span>
         <p slot="card-text">Our components are built with LitElement and are extendable. Use them as building blocks to create your complex component. </p>
-        <a slot="card-link" href="/story/getting-started-usage-extending-the-library--page" target="_self">Learn more</a>
+        <a slot="card-link" href="/docs/usage-extending-the-library--docs" target="_self">Learn more</a>
     </sgds-card>
 </div>

docs/Next.md

@@ -1,5 +1,7 @@
 # NextJs
 
+Pre-requisite: please read <a href="/docs/frameworks-react--docs" target="_self">documentation on React</a> prior to this.
+
 Web components are client components as they rely heavily on document and window API that is only present in the browser.
 
 

docs/React.md

@@ -69,28 +69,4 @@ function MyComponent() {
 
 export default MyComponent;
 
-```
-
-## Using web components - Importing the library 
-
-Follow [import instructions](/story/getting-started-imports--page)
-
-## Using web components - Typescript 
-
-For React Typescript users, you will often face this error : `Property 'sgds-masthead' does not exist on type 'JSX.IntrinsicElements'.`
-
-Solution: Typed the custom elements that you are using in your directory's types.d.ts file 
-
-```jsx
-//types.d.ts file
-import * as React from 'react'
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      "sgds-masthead": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-    }
-  }
-}
-```
-
+```

gulpfile.babel.js

@@ -3,6 +3,8 @@ const { src, dest, task } = require("gulp");
 const { getFolders } = require("./scripts/buildUtils.js");
 const fs = require("fs");
 const order = require("gulp-order");
+const replace = require("gulp-replace");
+const { version } = require("./package.json");
 
 exports.default = task("build-readme", () => {
   return src("docs/*.md")
@@ -45,3 +47,9 @@ exports.default = task("concat-storybook-mdx", done => {
     } else return done();
   });
 });
+
+exports.default = task("replace-version", () => {
+  return src("docs/INSTALLATION.md")
+    .pipe(replace(/<version>/g, version))
+    .pipe(dest("./docs"));
+});