no lucjk

packages/story/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["custom/react"],
+};

packages/story/.storybook/main.js

@@ -1,15 +1,65 @@
+var path = require("path");
+
 module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
+
   addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-styling-webpack",
+    "@storybook/addon-themes",
+    "@storybook/addon-a11y",
     {
-      name: "@storybook/addon-postcss",
+      name: "@storybook/addon-styling-webpack",
       options: {
-        postcssLoaderOptions: {
-          implementation: require("postcss"),
-        },
+        rules: [
+          {
+            test: /\.css$/,
+            sideEffects: true,
+            use: [
+              require.resolve("style-loader"),
+              {
+                loader: require.resolve("css-loader"),
+                options: {
+                  importLoaders: 1,
+                },
+              },
+              {
+                loader: require.resolve("postcss-loader"),
+                options: {
+                  implementation: require.resolve("postcss"),
+                },
+              },
+            ],
+          },
+        ],
       },
     },
-    "@storybook/addon-essentials",
   ],
-  framework: "@storybook/react",
+
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+
+  features: {
+    previewMdx2: true,
+  },
+
+  webpackFinal: async (config) => {
+    config.resolve.modules = [
+      ...(config.resolve.modules || []),
+      path.resolve(__dirname, "../src"),
+    ];
+
+    return config;
+  },
+
+  docs: {
+    autodocs: true,
+  },
 };

packages/story/.storybook/mosqueicuTheme.js

@@ -0,0 +1,23 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+	base: 'light',
+	brandTitle: 'Mosqueicu Storybook',
+	brandUrl:
+		'https://storybook.mosqueicu.so',
+	brandImage:
+		'images/mosqueicu-logo.svg',
+	brandTarget: '_self',
+	//
+	colorSecondary: '#3b82f6',
+
+	// UI
+	appBg: '#ffffff',
+	appContentBg: '#ffffff',
+	//   appBorderColor: '#585C6D',
+	appBorderRadius: 0,
+	//
+	barTextColor: '#9E9E9E',
+	barSelectedColor: '#3b82f6',
+	barBg: '#ffffff',
+});

packages/story/.storybook/preview.js

@@ -1,4 +1,5 @@
-import "tailwindcss/tailwind.css";
+import "../src/styles.css";
+import { withThemeByDataAttribute } from "@storybook/addon-themes";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -8,4 +9,28 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  backgrounds: {
+    default: "light",
+    values: [
+      {
+        name: "light",
+        value: "#ffffff",
+      },
+      {
+        name: "dark",
+        value: "#0f172a",
+      },
+    ],
+  },
 };
+
+export const decorators = [
+  withThemeByDataAttribute({
+    themes: {
+      light: "light",
+      dark: "dark",
+    },
+    defaultTheme: "light",
+    attributeName: "data-mode",
+  }),
+];

packages/story/babel.config.js

@@ -0,0 +1,4 @@
+/* eslint-disable no-undef */
+module.exports = {
+  presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+};