chore(stories): eslint/tsconfig migration

Migrate Storybook package to eslint flat config + composite tsconfig.
2026-06-07 16:30:05 +07:00
parent 09272dffeb
commit 23a2795523
18 changed files with 687 additions and 0 deletions
@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/vue3-vite';
+
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.stories.ts'],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y',
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+  docs: {
+    defaultName: 'Docs',
+  },
+  typescript: {
+    check: false,
+  },
+};
+
+export default config;
@@ -0,0 +1,110 @@
+.sb-dialog-trigger,
+.sb-dialog-close,
+.sb-toggle {
+  font: inherit;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  border: 1px solid #888;
+  background: #fff;
+  cursor: pointer;
+}
+
+.sb-toggle[aria-pressed='true'] { background: #222; color: #fff; }
+.sb-toggle[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+
+.sb-dialog-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); }
+
+.sb-dialog-content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #fff;
+  padding: 1.5rem;
+  border-radius: 8px;
+  min-width: 320px;
+  max-width: 90vw;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  display: grid;
+  gap: 0.75rem;
+}
+
+.sb-dialog-title { margin: 0; font-size: 1.125rem; font-weight: 600; }
+.sb-dialog-desc { margin: 0; color: #555; }
+
+.sb-switch {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  padding: 0;
+  border-radius: 999px;
+  border: 1px solid #888;
+  background: #ddd;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.sb-switch[aria-checked='true'] { background: #10b981; border-color: #10b981; }
+.sb-switch-thumb {
+  display: block;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  transform: translateX(2px);
+  transition: transform 0.15s;
+}
+.sb-switch[aria-checked='true'] .sb-switch-thumb { transform: translateX(22px); }
+
+.sb-progress {
+  position: relative;
+  width: 240px;
+  height: 8px;
+  background: #eee;
+  border-radius: 999px;
+  overflow: hidden;
+}
+.sb-progress-ind { height: 100%; background: #3b82f6; transition: width 0.2s; }
+.sb-progress[data-state='indeterminate'] .sb-progress-ind {
+  animation: sb-progress-indeterminate 1.2s ease-in-out infinite;
+  background: linear-gradient(90deg, transparent, #3b82f6, transparent);
+}
+@keyframes sb-progress-indeterminate {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(100%); }
+}
+
+.sb-collapsible { font-family: system-ui; max-width: 320px; }
+.sb-collapsible-trigger {
+  font: inherit;
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  border: 1px solid #888;
+  background: #fff;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+}
+.sb-collapsible-content {
+  padding: 0.5rem 0.75rem;
+  border: 1px dashed #bbb;
+  border-top: none;
+  border-radius: 0 0 6px 6px;
+}
+
+.sb-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  overflow: hidden;
+  background: #e5e7eb;
+  font-family: system-ui;
+  font-weight: 600;
+  color: #374151;
+  vertical-align: middle;
+}
+.sb-avatar-img { width: 100%; height: 100%; object-fit: cover; }
+.sb-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
@@ -0,0 +1,19 @@
+import type { Preview } from '@storybook/vue3-vite';
+import './preview-styles.css';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    a11y: {
+      test: 'todo',
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default preview;