Web: Components: init storybook 6

package.json

@@ -12,7 +12,8 @@
   "scripts": {
     "wipe": "rimraf node_modules yarn.lock web/**/node_modules products/**/node_modules",
     "build": "yarn workspaces run build",
-    "start": "concurrently \"wsrun --parallel start\""
+    "start": "concurrently \"wsrun --parallel start\"",
+    "sb-components": "yarn workspace @appserver/components storybook"
   },
   "devDependencies": {
     "lerna": "^3.22.1",

packages/asc-web-components/.storybook/main.js

@@ -0,0 +1,16 @@
+module.exports = {
+  stories: [
+    "../backdrop/*.stories.mdx",
+    "../backdrop/*.stories.@(js|jsx|ts|tsx)",
+    //"../button/*.stories.mdx",
+    "../button/*.stories.@(js|jsx|ts|tsx)",
+    //"../stories/*.stories.mdx",
+    //"../stories/*.stories.@(js|jsx|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-docs",
+    "@storybook/addon-essentials",
+    "@storybook/addon-actions",
+  ],
+};

packages/asc-web-components/.storybook/preview.js

@@ -0,0 +1,17 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: { expanded: true },
+};
+
+export const globalTypes = {
+  theme: {
+    name: "Theme",
+    description: "Global theme for components",
+    defaultValue: "light",
+    toolbar: {
+      icon: "circlehollow",
+      // array of plain string values or MenuItem shape (see below)
+      items: ["light", "dark"],
+    },
+  },
+};

packages/asc-web-components/package.json

@@ -4,6 +4,16 @@
   "private": true,
   "scripts": {
     "build": "echo 'skip it'",
-    "start": "echo 'skip it'"
+    "start": "echo 'skip it'",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^6.1.20",
+    "@storybook/addon-docs": "^6.1.20",
+    "@storybook/addon-essentials": "^6.1.20",
+    "@storybook/addon-links": "^6.1.20",
+    "@storybook/react": "^6.1.20",
+    "react-values": "^0.3.3"
   }
 }