ars9
9916ef5aaf
- design token system (Atlantis, Kimberly, Powder Ash palette) - Button, Badge, Input, Select, Card, SidePanel, Breadcrumbs components - generic typed Table<T> component with loading/empty states - API data layer: typed fetch client for environments, keys, sessions, scenarios - Vite dev proxy targeting server on port 13000 - App shell with SidePanel nav and four entity pages (Environments, Keys, Sessions, Scenarios) - Storybook config with dark/light theme toggle and a11y addon
45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
import React from 'react'
|
|
import type { Preview } from '@storybook/react-vite'
|
|
import '../src/ui/tokens.css'
|
|
|
|
const preview: Preview = {
|
|
globalTypes: {
|
|
theme: {
|
|
name: 'Theme',
|
|
description: 'Color theme',
|
|
defaultValue: 'light',
|
|
toolbar: {
|
|
icon: 'circlehollow',
|
|
items: [
|
|
{ value: 'light', icon: 'sun', title: 'Light' },
|
|
{ value: 'dark', icon: 'moon', title: 'Dark' },
|
|
],
|
|
dynamicTitle: true,
|
|
},
|
|
},
|
|
},
|
|
decorators: [
|
|
(Story, context) => {
|
|
const theme = (context.globals['theme'] as string) ?? 'light'
|
|
document.documentElement.setAttribute('data-theme', theme)
|
|
return (
|
|
<div style={{ background: 'var(--color-bg)', minHeight: '100vh', padding: 0 }}>
|
|
<Story />
|
|
</div>
|
|
)
|
|
},
|
|
],
|
|
parameters: {
|
|
controls: {
|
|
matchers: {
|
|
color: /(background|color)$/i,
|
|
date: /Date$/i,
|
|
},
|
|
},
|
|
a11y: {
|
|
test: 'todo',
|
|
},
|
|
},
|
|
}
|
|
|
|
export default preview |