fix

.eslintrc.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.gitignore

@@ -1,4 +1,26 @@
-/node_modules
-.DS_Store
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.vercel
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  addons: [
+    "@storybook/addon-docs",
+    "storybook-dark-mode"
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    docsMode: true,
+  }
+};
+
+export default config;

.storybook/preview.css

@@ -0,0 +1,4 @@
+.sbdocs:not(#x) p {
+    font-size: 16px;
+    line-height: 28px;
+}

.storybook/preview.tsx

@@ -0,0 +1,21 @@
+import { DocsContainer } from "@storybook/blocks";
+import { Preview } from '@storybook/react';
+import { useDarkMode } from "storybook-dark-mode";
+import "./preview.css";
+import { themes } from './theme';
+
+const Container: typeof DocsContainer = (props) => {
+	const dark = useDarkMode();
+	const theme = dark ? themes.dark : themes.light
+	return <DocsContainer {...props} theme={theme} />;
+};
+
+const preview: Preview = {
+	parameters: {
+		docs: {
+			container: Container,
+		},
+	},
+};
+
+export default preview;

.storybook/theme.ts

@@ -0,0 +1,48 @@
+import { create } from "@storybook/theming";
+
+const common = {
+    // Highlight color
+    colorPrimary: "hsl(199, 89%, 48%)", // highlight-5
+    colorSecondary: "hsl(199, 89%, 48%)", // highlight-5
+    // Typography
+    fontBase: '"Inter var", sans-serif',
+    // Branding
+    brandTitle: "Moai UI kit",
+    brandUrl: "https://moai.thien.do",
+};
+
+const light = create({
+    ...common,
+    base: "light",
+    // UI
+    appBg: "hsl(235, 18%, 98%)", // gray-0
+    appContentBg: "hsl(0, 0%, 100%)", // white
+    appBorderColor: "hsl(216, 12%, 77%)", // gray-2
+    appBorderRadius: 2,
+    // Text colors
+    textColor: "hsl(216, 13%, 15%)", // gray-8
+    textMutedColor: "hsl(220, 09%, 46%)", // gray-4
+    // Toolbar default and active colors
+    barTextColor: "hsl(216, 13%, 15%)", // gray-8
+    barSelectedColor: "hsl(216, 13%, 15%)", // gray-8
+    barBg: "hsl(0, 0%, 100%)", // white
+});
+
+const dark = create({
+    ...common,
+    base: "dark",
+    // UI
+    appBg: "hsl(216, 13%, 15%)", // gray-8
+    appContentBg: "hsl(220, 13%, 18%)", // gray-7
+    appBorderColor: "hsl(220, 09%, 46%)", // gray-4
+    appBorderRadius: 2,
+    // Text colors
+    textColor: "hsl(235, 18%, 98%)", // gray-0
+    textMutedColor: "hsl(218, 11%, 65%)", // gray-3
+    // Toolbar default and active colors
+    barTextColor: "hsl(235, 18%, 98%)", // gray-0
+    barSelectedColor: "hsl(235, 18%, 98%)", // gray-0
+    barBg: "hsl(220, 13%, 18%)", // gray-7
+});
+
+export const themes = { light, dark };