Storybook Init

Author: Pigna

.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+

.gitignore

@@ -0,0 +1,40 @@
+# Dependencies
+node_modules
+
+# Build output
+dist
+dist-ssr
+storybook-static
+
+# Environment
+*.local
+.env
+.env.*
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# OS files
+Thumbs.db
+
+# Test coverage
+coverage
+
+*storybook.log

.npmrc

@@ -0,0 +1,2 @@
+@pigna:registry=https://npm.pkg.github.com
+

.prettierignore

@@ -0,0 +1,4 @@
+dist/**
+storybook-static/**
+node_modules/**
+

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "endOfLine": "lf"
+}
+

.storybook/main.ts

@@ -0,0 +1,9 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-a11y'],
+  framework: '@storybook/react-vite',
+};
+
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,46 @@
+import type { Preview } from '@storybook/react-vite';
+import '../src/styles/global.scss';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /date$/i,
+      },
+    },
+    a11y: {
+      test: 'error',
+    },
+    backgrounds: {
+      disable: true,
+    },
+  },
+  globalTypes: {
+    theme: {
+      description: 'Global theme for components',
+      toolbar: {
+        title: 'Theme',
+        icon: 'paintbrush',
+        items: [
+          { value: 'light', title: 'Light', icon: 'sun' },
+          { value: 'dark', title: 'Dark', icon: 'moon' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  initialGlobals: {
+    theme: 'light',
+  },
+  decorators: [
+    (Story, context) => {
+      const theme = context.globals.theme || 'light';
+      document.documentElement.setAttribute('data-theme', theme);
+      return <Story />;
+    },
+  ],
+};
+
+export default preview;
+

.stylelintrc.json

@@ -0,0 +1,16 @@
+{
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "selector-class-pattern": null,
+    "scss/dollar-variable-pattern": null,
+    "custom-property-pattern": null,
+    "custom-property-empty-line-before": null,
+    "declaration-empty-line-before": null,
+    "property-no-vendor-prefix": null,
+    "color-hex-length": null,
+    "value-keyword-case": ["lower", {
+      "camelCaseSvgKeywords": true,
+      "ignoreKeywords": ["Roboto", "Arial", "Consolas", "Helvetica"]
+    }]
+  }
+}