1 files changed, 48 insertions, 0 deletions
diff --git a/packages/components/.storybook/main.js b/packages/components/.storybook/main.js
new file mode 100644
index 000000000..100eb977e
--- /dev/null
+++ b/packages/components/.storybook/main.js
@@ -0,0 +1,48 @@
+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) {
+    return dirname(require.resolve(join(value, 'package.json')));
+}
+
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: [
+        getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
+        getAbsolutePath('@storybook/addon-onboarding'),
+        getAbsolutePath('@storybook/addon-essentials'),
+        getAbsolutePath('@chromatic-com/storybook'),
+        getAbsolutePath('@storybook/addon-interactions'),
+        getAbsolutePath('@storybook/addon-styling-webpack'),
+    ],
+    framework: {
+        name: getAbsolutePath('@storybook/react-webpack5'),
+        options: {},
+    },
+    webpackFinal: async config => {
+        config.module.rules.push({
+            test: /\.scss$/,
+            use: [
+                'style-loader',
+                {
+                    loader: 'css-loader',
+                    options: {
+                        importLoaders: 1,
+                    },
+                },
+                {
+                    loader: 'sass-loader',
+                    options: {
+                        implementation: require('sass'),
+                    },
+                },
+            ],
+        });
+        return config;
+    },
+};
+export default config;