chore(deps): bump Storybook version

- added: `.prettierrc` config (based off current style)
- added: `eslint-plugin-tailwind` enforce best practices and consistency
  (auto-format on save)

Author: pongstr

.eslintrc.cjs

@@ -6,11 +6,24 @@ module.exports = {
     "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",
     "plugin:storybook/recommended",
+    "plugin:tailwindcss/recommended",
   ],
   ignorePatterns: ["dist", ".eslintrc.cjs"],
   parser: "@typescript-eslint/parser",
   plugins: ["react-refresh"],
   rules: {
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        args: "all",
+        argsIgnorePattern: "^_",
+        caughtErrors: "all",
+        caughtErrorsIgnorePattern: "^_",
+        destructuredArrayIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        ignoreRestSiblings: true,
+      },
+    ],
     "react-refresh/only-export-components": [
       "warn",
       { allowConstantExport: true },

.gitignore

@@ -24,3 +24,4 @@ dist-ssr
 *.sw?
 
 *storybook.log
+storybook-static

.prettierrc

@@ -1 +1,4 @@
-{}
+{
+  "tabWidth": 2,
+  "semi": true,
+}

.storybook/main.ts

@@ -1,20 +1,16 @@
-import type { StorybookConfig } from "@storybook/react-vite";
+import type { StorybookConfig } from '@storybook/react-vite'
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    "@storybook/addon-onboarding",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
+    '@storybook/addon-onboarding',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
   ],
   framework: {
-    name: "@storybook/react-vite",
+    name: '@storybook/react-vite',
     options: {},
   },
-  docs: {
-    autodocs: "tag",
-  },
-};
-export default config;
+}
+export default config

.storybook/preview.ts

@@ -1,15 +1,45 @@
-import "../src/index.css";
-import type { Preview } from "@storybook/react";
+import '../src/index.css'
+
+import type { Preview } from '@storybook/react'
+import { themes } from '@storybook/theming'
+import { withThemeByClassName } from '@storybook/addon-themes'
 
 const preview: Preview = {
+  globalTypes: {
+    theme: {
+      description: 'Global theme for components',
+      toolbar: {
+        title: 'Theme',
+        icon: 'switchalt',
+        items: ['light', 'dark'],
+        dynamicTitle: true,
+      },
+    },
+  },
+  initialGlobals: {
+    theme: 'dark',
+  },
   parameters: {
+    docs: {
+      theme: themes.dark,
+    },
+
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
   },
-};
+  decorators: [
+    withThemeByClassName({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'dark',
+    }),
+  ],
+}
 
-export default preview;
+export default preview