fix: fixed storybook

Author: dev-eranda

packages/react/.storybook/main.ts

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/addon-storysource"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-webpack5"),
+    options: {},
+  },
+};
+export default config;

packages/react/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

packages/react/package.json

@@ -10,39 +10,44 @@
     "@babel/preset-env": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
+    "@chromatic-com/storybook": "1.6.1",
     "@storybook/addon-essentials": "^8.1.11",
     "@storybook/addon-interactions": "^8.1.11",
     "@storybook/addon-links": "^8.1.11",
     "@storybook/addon-onboarding": "^8.1.11",
+    "@storybook/addon-storysource": "^8.1.11",
+    "@storybook/addon-webpack5-compiler-swc": "1.0.4",
     "@storybook/blocks": "^8.1.11",
     "@storybook/react": "^8.1.11",
-    "@storybook/react-vite": "^8.1.11",
+    "@storybook/react-webpack5": "^8.1.11",
     "@storybook/test": "^8.1.11",
     "@testing-library/jest-dom": "^5.11.1",
     "@testing-library/react": "^10.4.7",
     "@types/jest": "^26.0.7",
     "@types/react": "^16.9.43",
     "babel-loader": "^8.1.0",
-    "chromatic": "^11.5.5",
     "jest": "^26.1.0",
     "react": "^16.13.1",
     "rollup": "^2.22.1",
     "rollup-plugin-typescript2": "^0.27.1",
+    "storybook": "^8.1.11",
     "typescript": "^5.4.5"
   },
   "scripts": {
     "build": "rollup -c",
     "dev": "yarn build --watch",
     "test": "jest --verbose",
     "test:watch": "yarn test --watch",
-    "test:chromatic": "chromatic --project-token=\"$CHROMATIC_PROJECT_TOKEN\""
+    "test:chromatic": "chromatic --project-token=\"$CHROMATIC_PROJECT_TOKEN\"",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@storybook/addon-knobs": "^8.0.1",
-    "@test.ds.e/foundation": "^1.0.2"
+    "@test.ds.e/foundation": "^1.0.2",
+    "@test.ds.e/scss": "^1.0.2"
   },
   "gitHead": "ed66e502dd009938406950b3d81f0d16c41b51b7"
 }

packages/react/src/atoms/Color/Color.stories.tsx

@@ -1,19 +1,52 @@
 import React from 'react'
-import Color from './Color'
-import { text, select } from '@storybook/addon-knobs'
+import Color, { ColorProps } from './Color'
 
 import { Spacing } from '@test.ds.e/foundation'
 
 // css
-import '@ds.e/scss/lib/Utilities.css'
+import '@test.ds.e/scss/lib/Utilities.css'
 
 export default {
     title: 'Atoms|Color'
 }
 
-export const Common = () => <Color hexCode={text('HexCode', 'pink')} />
+export const Common = (args: React.JSX.IntrinsicAttributes & ColorProps & { children?: React.ReactNode }) => (
+    <Color {...args} />
+)
+Common.args = {
+    primary: true,
+    hexCode: 'pink'
+}
+
+export const CustomDimensions = (args: React.JSX.IntrinsicAttributes & ColorProps & { children?: React.ReactNode }) => (
+    <Color {...args} />
+)
+  
+CustomDimensions.args = {
+    primary: true,
+    hexCode: 'pink',
+    width: 'xxl',
+    height: 'xxl',
+    }
+
+CustomDimensions.argTypes = {
+    width: {
+        control: 'select',
+        options: Object.values(Spacing),
+    },
+    height: {
+        control: 'select',
+        options: Object.values(Spacing),
+        },
+    hexCode: {
+        control: 'color',
+    }
+}
+
+
+// export const Common = () => <Color hexCode={text('HexCode', 'pink')} />
 
-export const CustomDimensions = () => <Color
-hexCode={text('HexCode', 'pink')}
-width={select('Width', Object.values(Spacing), 'xxl')}
-height={select('Height', Object.values(Spacing), 'xxl')}  />
+// export const CustomDimensions = () => <Color
+// hexCode={text('HexCode', 'pink')}
+// width={select('Width', Object.values(Spacing), 'xxl')}
+// height={select('Height', Object.values(Spacing), 'xxl')}  />

packages/react/src/molecules/Select/Select.stories.tsx

@@ -3,7 +3,7 @@ import Select from './Select'
 // import { withA11Y } from '@storybook/addon-a11y'
 
 // css
-import '@ds.e/scss/lib/Select.css'
+import '@test.ds.e/scss/lib/Select.css'
 
 const options = [{
     label: 'Strict Black',