@svadmin/ui 0.11.2 → 0.13.0

package/src/components/stories/BarChart.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import BarChart from '../charts/BarChart.svelte';
+
+const meta = {
+  title: 'Charts/BarChart',
+  component: BarChart,
+  tags: ['autodocs'],
+  argTypes: {
+    height: { control: { type: 'number', min: 100, max: 500 } },
+    showValues: { control: 'boolean' },
+  },
+} satisfies Meta<BarChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    data: [
+      { label: 'Jan', value: 120 },
+      { label: 'Feb', value: 180 },
+      { label: 'Mar', value: 95 },
+      { label: 'Apr', value: 210 },
+      { label: 'May', value: 165 },
+      { label: 'Jun', value: 245 },
+    ],
+    height: 200,
+    showValues: true,
+  },
+};
+
+export const CustomColors: Story = {
+  args: {
+    data: [
+      { label: 'Users', value: 1200, color: '#6366f1' },
+      { label: 'Orders', value: 850, color: '#f59e0b' },
+      { label: 'Revenue', value: 2100, color: '#10b981' },
+      { label: 'Returns', value: 120, color: '#ef4444' },
+    ],
+    height: 250,
+    showValues: true,
+  },
+};

package/src/components/stories/LineChart.stories.ts

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import LineChart from '../charts/LineChart.svelte';
+
+const meta = {
+  title: 'Charts/LineChart',
+  component: LineChart,
+  tags: ['autodocs'],
+  argTypes: {
+    height: { control: { type: 'number', min: 100, max: 500 } },
+    showDots: { control: 'boolean' },
+    fill: { control: 'boolean' },
+  },
+} satisfies Meta<LineChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    data: [
+      { label: 'Mon', value: 120 },
+      { label: 'Tue', value: 180 },
+      { label: 'Wed', value: 150 },
+      { label: 'Thu', value: 210 },
+      { label: 'Fri', value: 190 },
+      { label: 'Sat', value: 250 },
+      { label: 'Sun', value: 220 },
+    ],
+    height: 200,
+    showDots: true,
+    fill: true,
+  },
+};
+
+export const NoFill: Story = {
+  args: {
+    data: [
+      { label: 'Q1', value: 3200 },
+      { label: 'Q2', value: 4100 },
+      { label: 'Q3', value: 3800 },
+      { label: 'Q4', value: 5200 },
+    ],
+    height: 250,
+    showDots: true,
+    fill: false,
+    color: '#10b981',
+  },
+};

package/src/components/stories/PieChart.stories.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import PieChart from '../charts/PieChart.svelte';
+
+const meta = {
+  title: 'Charts/PieChart',
+  component: PieChart,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: { type: 'number', min: 100, max: 400 } },
+    donut: { control: { type: 'number', min: 0, max: 0.8, step: 0.1 } },
+  },
+} satisfies Meta<PieChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Donut: Story = {
+  args: {
+    data: [
+      { label: 'Desktop', value: 580, color: '#6366f1' },
+      { label: 'Mobile', value: 320, color: '#f59e0b' },
+      { label: 'Tablet', value: 100, color: '#10b981' },
+    ],
+    size: 200,
+    donut: 0.6,
+  },
+};
+
+export const Pie: Story = {
+  args: {
+    data: [
+      { label: 'Chrome', value: 64, color: '#4285f4' },
+      { label: 'Safari', value: 19, color: '#5ac8fa' },
+      { label: 'Firefox', value: 10, color: '#ff7139' },
+      { label: 'Edge', value: 4, color: '#0078d7' },
+      { label: 'Other', value: 3, color: '#a0a0a0' },
+    ],
+    size: 220,
+    donut: 0,
+  },
+};

package/src/index.ts

@@ -54,6 +54,14 @@ export { default as CopilotPanel } from "./components/CopilotPanel.svelte";
 export { default as InsightCard } from "./components/InsightCard.svelte";
 export { default as AnomalyBadge } from "./components/AnomalyBadge.svelte";
 export { default as VoiceInput } from "./components/VoiceInput.svelte";
+export { default as AnimatedCounter } from "./components/AnimatedCounter.svelte";
+export { default as KeyboardShortcuts } from "./components/KeyboardShortcuts.svelte";
+export { default as InlineEdit } from "./components/InlineEdit.svelte";
+export { default as VirtualTable } from "./components/VirtualTable.svelte";
+export { default as DraggableHeader } from "./components/DraggableHeader.svelte";
+
+// Dashboard Charts (zero-dependency SVG)
+export { BarChart, LineChart, PieChart } from './components/charts/index.js';
 // Field display components
 export { default as NumberField } from './components/fields/NumberField.svelte';
 export { default as DateField } from './components/fields/DateField.svelte';