Feat/storybook

.gitignore

@@ -50,3 +50,12 @@
 
 # Artifacts
 .DS_Store
+
+!.storybook
+
+!API_CONVENTIONS.md
+!CONTRIBUTING.md
+!CODE_OF_CONDUCT.md
+!SUPPORT.md
+!SECURITY.md
+!FUNDING.yml

.storybook/locales/cn.json

@@ -0,0 +1,28 @@
+{
+  "docs": {
+    "home": {
+      "title": "Cresh UI",
+      "subtitle": "现代 Vue 3 组件库"
+    },
+    "getting_started": {
+      "title": "开始使用",
+      "description": "了解如何在您的项目中安装和使用 Cresh UI"
+    },
+    "components": {
+      "title": "组件",
+      "description": "探索所有可用组件"
+    },
+    "theme": {
+      "title": "设计系统",
+      "description": "颜色、排版和设计令牌"
+    },
+    "language_setup": {
+      "title": "国际化 (i18n)",
+      "description": "多语言支持和安装指南"
+    },
+    "i18n_stories": {
+      "title": "i18n 展示",
+      "description": "语言切换器的交互式演示"
+    }
+  }
+}

.storybook/locales/de.json

@@ -0,0 +1,28 @@
+{
+  "docs": {
+    "home": {
+      "title": "Cresh UI",
+      "subtitle": "Moderne Vue 3 Komponentenbibliothek"
+    },
+    "getting_started": {
+      "title": "Erste Schritte",
+      "description": "Erfahren Sie, wie Sie Cresh UI in Ihrem Projekt installieren und verwenden"
+    },
+    "components": {
+      "title": "Komponenten",
+      "description": "Erkunden Sie alle verfügbaren Komponenten"
+    },
+    "theme": {
+      "title": "Designsystem",
+      "description": "Farben, Typographie und Design-Tokens"
+    },
+    "language_setup": {
+      "title": "Internationalisierung (i18n)",
+      "description": "Mehrsprachiger Support und Installationsanleitung"
+    },
+    "i18n_stories": {
+      "title": "i18n Präsentation",
+      "description": "Interaktive Demonstration des Sprachumschalters"
+    }
+  }
+}

.storybook/locales/en.json

@@ -0,0 +1,28 @@
+{
+  "docs": {
+    "home": {
+      "title": "Cresh UI",
+      "subtitle": "Modern Vue 3 Component Library"
+    },
+    "getting_started": {
+      "title": "Getting Started",
+      "description": "Learn how to install and use Cresh UI in your project"
+    },
+    "components": {
+      "title": "Components",
+      "description": "Explore all available components"
+    },
+    "theme": {
+      "title": "Design System",
+      "description": "Colors, typography, and design tokens"
+    },
+    "language_setup": {
+      "title": "Internationalization (i18n)",
+      "description": "Multi-language support and setup guide"
+    },
+    "i18n_stories": {
+      "title": "i18n Showcase",
+      "description": "Interactive language switcher demonstration"
+    }
+  }
+}

.storybook/locales/es.json

@@ -0,0 +1,28 @@
+{
+  "docs": {
+    "home": {
+      "title": "Cresh UI",
+      "subtitle": "Biblioteca moderna de componentes Vue 3"
+    },
+    "getting_started": {
+      "title": "Primeros pasos",
+      "description": "Aprenda a instalar y usar Cresh UI en su proyecto"
+    },
+    "components": {
+      "title": "Componentes",
+      "description": "Explore todos los componentes disponibles"
+    },
+    "theme": {
+      "title": "Sistema de diseño",
+      "description": "Colores, tipografía y tokens de diseño"
+    },
+    "language_setup": {
+      "title": "Internacionalización (i18n)",
+      "description": "Soporte multilingüe y guía de instalación"
+    },
+    "i18n_stories": {
+      "title": "Demostración i18n",
+      "description": "Demostración interactiva del selector de idiomas"
+    }
+  }
+}

.storybook/locales/fr.json

@@ -0,0 +1,28 @@
+{
+  "docs": {
+    "home": {
+      "title": "Cresh UI",
+      "subtitle": "Bibliothèque de composants Vue 3 moderne"
+    },
+    "getting_started": {
+      "title": "Commencer",
+      "description": "Apprenez à installer et utiliser Cresh UI dans votre projet"
+    },
+    "components": {
+      "title": "Composants",
+      "description": "Découvrez tous les composants disponibles"
+    },
+    "theme": {
+      "title": "Système de design",
+      "description": "Couleurs, typographie et tokens de design"
+    },
+    "language_setup": {
+      "title": "Internationalisation (i18n)",
+      "description": "Guide d'installation et support multilingue"
+    },
+    "i18n_stories": {
+      "title": "Démonstration i18n",
+      "description": "Démonstration interactive du sélecteur de langue"
+    }
+  }
+}

.storybook/locales/it.json

@@ -0,0 +1,28 @@
+{
+  "docs": {
+    "home": {
+      "title": "Cresh UI",
+      "subtitle": "Moderna libreria di componenti Vue 3"
+    },
+    "getting_started": {
+      "title": "Iniziare",
+      "description": "Scopri come installare e utilizzare Cresh UI nel tuo progetto"
+    },
+    "components": {
+      "title": "Componenti",
+      "description": "Esplora tutti i componenti disponibili"
+    },
+    "theme": {
+      "title": "Sistema di design",
+      "description": "Colori, tipografia e token di design"
+    },
+    "language_setup": {
+      "title": "Internazionalizzazione (i18n)",
+      "description": "Supporto multilingue e guida all'installazione"
+    },
+    "i18n_stories": {
+      "title": "Dimostrazioni i18n",
+      "description": "Dimostrazione interattiva del selettore di lingua"
+    }
+  }
+}

.storybook/main.ts

@@ -0,0 +1,43 @@
+import type { StorybookConfig } from '@storybook/vue3-vite'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(ts|tsx|js|jsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-docs'],
+
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {
+      vueDocgenOptions: {
+        alias: {
+          '@': new URL('../src', import.meta.url).pathname,
+        },
+      },
+    },
+  },
+
+  viteFinal: async config => ({
+    ...config,
+    css: {
+      preprocessorOptions: {
+        scss: {
+          loadPaths: [path.resolve(__dirname, '../src/styles/preprocessor')],
+          additionalData: `
+              @import "fonts";
+              @import "break-points";
+              @import "computeds";
+              @import "utils";
+              @import "default-colors";
+            `,
+          quietDeps: true,
+          silenceDeprecations: ['legacy-js-api', 'import'],
+        },
+      },
+    },
+  }),
+}
+
+export default config