feat: Added theming and a11y to storybook

.storybook/main.ts

@@ -1,18 +1,20 @@
-import type { StorybookConfig } from "@storybook/react-vite";
+import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   stories: [
-    "../stories/**/*.mdx",
-    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
-    "../packages/ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+    '../stories/**/*.mdx',
+    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../packages/ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)'
   ],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+    '@storybook/addon-themes',
   ],
   framework: {
-    name: "@storybook/react-vite",
+    name: '@storybook/react-vite',
     options: {},
   },
 };

.storybook/preview.ts

@@ -1,4 +1,5 @@
-import type { Preview } from "@storybook/react";
+import type { Preview } from '@storybook/react';
+import { withThemeByClassName } from '@storybook/addon-themes';
 import '../global.css';
 
 const preview: Preview = {
@@ -12,4 +13,14 @@ const preview: Preview = {
   },
 };
 
+export const decorators = [
+  withThemeByClassName({
+    themes: {
+      light: 'light',
+      dark: 'dark',
+    },
+    defaultTheme: 'light',
+  }),
+];
+
 export default preview;

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "bradlc.vscode-tailwindcss"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,72 @@
+{
+    "editor.tabSize": 2,
+    "editor.insertSpaces": true,
+    "editor.detectIndentation": false,
+    "editor.formatOnSave": false,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit"
+    },
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.quickSuggestions": {
+      "strings": "on",
+    },
+    "javascript.updateImportsOnFileMove.enabled": "never",
+    "eslint.enable": true,
+    "eslint.run": "onSave",
+    "eslint.validate": [
+      "javascript",
+      "javascriptreact",
+      "typescript",
+      "typescriptreact"
+    ],
+    "files.eol": "\n",
+    "files.associations": {
+      "*.ejs": "html",
+      "*.ejs.t": "html",
+      "*.css": "tailwindcss"
+    },
+    "files.exclude": {
+      "**/.git": true,
+      "**/.svn": true,
+      "**/.hg": true,
+      "**/CVS": true,
+      "**/.DS_Store": true,
+      "**/node_modules": true,
+      "**/wwwroot": true
+    },
+    "search.exclude": {
+      "**/.git": true,
+      "**/.yarn": true,
+      "**/node_modules": true,
+      "**/bower_components": true,
+      "**/*.code-search": true,
+      "**/.dist": true,
+      "**/.types": true,
+      "**/.out": true,
+      "**/.pkg": true,
+      "**/.srv": true,
+      "**/.web": true,
+      "**/dist": true,
+      "**/types": true,
+      "**/out": true,
+      "**/pkg": true,
+      "**/srv": true,
+      "**/.angular": true,
+      "**/.vscode": true,
+      "**/*.lock": true,
+      "**/*lock.yaml": true,
+      "**/package-lock.json": true,
+      "**/*.tsbuildinfo": true,
+      "**/*.schema.json": true,
+      "**/.pnp.*": true
+    },
+    "html.format.unformatted": "wbr,%",
+    "debug.internalConsoleOptions": "neverOpen",
+    "npm.packageManager": "pnpm",
+    "[typescriptreact]": {
+      "editor.defaultFormatter": "vscode.typescript-language-features",
+    },
+    "[jsonc]": {
+      "editor.defaultFormatter": "vscode.json-language-features"
+    },
+  }

package.json

@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "description": "do-ob workspace for mild components",
+  "packageManager": "[email protected]",
   "type": "module",
   "exports": {
     ".": "./packages/ui/src/index.ts"
@@ -17,14 +18,16 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "@do-ob/eslint-config": "^2.1.2",
+    "@do-ob/eslint-config": "^2.3.0",
     "@do-ob/ts-config": "^2.0.0",
     "@do-ob/vite-lib-config": "^3.0.1",
     "@heroicons/react": "^2.1.3",
     "@nextui-org/react": "^2.4.1",
+    "@storybook/addon-a11y": "^8.1.6",
     "@storybook/addon-essentials": "^8.1.6",
     "@storybook/addon-interactions": "^8.1.6",
     "@storybook/addon-links": "^8.1.6",
+    "@storybook/addon-themes": "^8.1.6",
     "@storybook/blocks": "^8.1.6",
     "@storybook/react": "^8.1.6",
     "@storybook/react-vite": "^8.1.6",
@@ -35,8 +38,6 @@
     "@vitejs/plugin-react": "^4.3.0",
     "autoprefixer": "^10.4.19",
     "eslint": "^9.2.0",
-    "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-tailwindcss": "^3.17.0",
     "framer-motion": "^11.2.10",
     "postcss": "^8.4.38",
     "react": "18.3.1",

packages/ui/src/Navigation/Navigation.stories.tsx

@@ -11,4 +11,4 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {};

packages/ui/src/Navigation/Navigation.tsx

@@ -1,13 +1,13 @@
 import { Navbar, NavbarContent, NavbarBrand } from '@nextui-org/react';
 
 export function Navigation() {
-    return (
-        <Navbar className=''>
-            <NavbarContent>
-                <NavbarBrand>NextUI</NavbarBrand>
-            </NavbarContent>
-        </Navbar>
-    );
+  return (
+    <Navbar className="">
+      <NavbarContent>
+        <NavbarBrand>NextUI</NavbarBrand>
+      </NavbarContent>
+    </Navbar>
+  );
 }
 
 export default Navigation;