tharaday 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.gitignore +30 -0
- package/.prettierrc.json +10 -0
- package/.storybook/main.ts +8 -0
- package/.storybook/preview.ts +50 -0
- package/.versionrc.json +6 -0
- package/README.md +73 -0
- package/dist/components/Accordion/Accordion.d.ts +2 -0
- package/dist/components/Accordion/Accordion.stories.d.ts +14 -0
- package/dist/components/Accordion/Accordion.types.d.ts +18 -0
- package/dist/components/Avatar/Avatar.d.ts +2 -0
- package/dist/components/Avatar/Avatar.stories.d.ts +14 -0
- package/dist/components/Avatar/Avatar.types.d.ts +10 -0
- package/dist/components/Badge/Badge.d.ts +2 -0
- package/dist/components/Badge/Badge.stories.d.ts +33 -0
- package/dist/components/Badge/Badge.types.d.ts +9 -0
- package/dist/components/Box/Box.d.ts +2 -0
- package/dist/components/Box/Box.stories.d.ts +38 -0
- package/dist/components/Box/Box.types.d.ts +49 -0
- package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +3 -0
- package/dist/components/Breadcrumbs/Breadcrumbs.stories.d.ts +13 -0
- package/dist/components/Breadcrumbs/Breadcrumbs.types.d.ts +11 -0
- package/dist/components/Button/Button.d.ts +2 -0
- package/dist/components/Button/Button.stories.d.ts +22 -0
- package/dist/components/Button/Button.types.d.ts +12 -0
- package/dist/components/Card/Card.d.ts +5 -0
- package/dist/components/Card/Card.stories.d.ts +27 -0
- package/dist/components/Card/Card.types.d.ts +15 -0
- package/dist/components/Checkbox/Checkbox.d.ts +2 -0
- package/dist/components/Checkbox/Checkbox.stories.d.ts +17 -0
- package/dist/components/Checkbox/Checkbox.types.d.ts +6 -0
- package/dist/components/Dropdown/Dropdown.d.ts +2 -0
- package/dist/components/Dropdown/Dropdown.stories.d.ts +12 -0
- package/dist/components/Dropdown/Dropdown.types.d.ts +24 -0
- package/dist/components/Header/Header.d.ts +2 -0
- package/dist/components/Header/Header.stories.d.ts +18 -0
- package/dist/components/Header/Header.types.d.ts +14 -0
- package/dist/components/Input/Input.d.ts +2 -0
- package/dist/components/Input/Input.stories.d.ts +29 -0
- package/dist/components/Input/Input.types.d.ts +8 -0
- package/dist/components/Loader/Loader.d.ts +2 -0
- package/dist/components/Loader/Loader.stories.d.ts +25 -0
- package/dist/components/Loader/Loader.types.d.ts +8 -0
- package/dist/components/Modal/Modal.d.ts +2 -0
- package/dist/components/Modal/Modal.stories.d.ts +22 -0
- package/dist/components/Modal/Modal.types.d.ts +12 -0
- package/dist/components/NavBar/NavBar.d.ts +6 -0
- package/dist/components/NavBar/NavBar.stories.d.ts +8 -0
- package/dist/components/NavBar/NavBar.types.d.ts +34 -0
- package/dist/components/Notification/Notification.d.ts +2 -0
- package/dist/components/Notification/Notification.stories.d.ts +26 -0
- package/dist/components/Notification/Notification.types.d.ts +8 -0
- package/dist/components/Pagination/Pagination.d.ts +2 -0
- package/dist/components/Pagination/Pagination.stories.d.ts +21 -0
- package/dist/components/Pagination/Pagination.types.d.ts +34 -0
- package/dist/components/ProgressBar/ProgressBar.d.ts +2 -0
- package/dist/components/ProgressBar/ProgressBar.stories.d.ts +32 -0
- package/dist/components/ProgressBar/ProgressBar.types.d.ts +12 -0
- package/dist/components/RadioButton/RadioButton.d.ts +2 -0
- package/dist/components/RadioButton/RadioButton.stories.d.ts +30 -0
- package/dist/components/RadioButton/RadioButton.types.d.ts +8 -0
- package/dist/components/Select/Select.d.ts +2 -0
- package/dist/components/Select/Select.stories.d.ts +29 -0
- package/dist/components/Select/Select.types.d.ts +15 -0
- package/dist/components/Skeleton/Skeleton.d.ts +2 -0
- package/dist/components/Skeleton/Skeleton.stories.d.ts +15 -0
- package/dist/components/Skeleton/Skeleton.types.d.ts +8 -0
- package/dist/components/Stepper/Step.d.ts +2 -0
- package/dist/components/Stepper/Step.types.d.ts +17 -0
- package/dist/components/Stepper/Stepper.d.ts +2 -0
- package/dist/components/Stepper/Stepper.stories.d.ts +15 -0
- package/dist/components/Stepper/Stepper.types.d.ts +13 -0
- package/dist/components/Stepper/stepper.utils.d.ts +3 -0
- package/dist/components/Switch/Switch.d.ts +2 -0
- package/dist/components/Switch/Switch.stories.d.ts +16 -0
- package/dist/components/Switch/Switch.types.d.ts +5 -0
- package/dist/components/Table/Table.d.ts +8 -0
- package/dist/components/Table/Table.stories.d.ts +27 -0
- package/dist/components/Table/Table.types.d.ts +17 -0
- package/dist/components/Tabs/Tabs.d.ts +2 -0
- package/dist/components/Tabs/Tabs.stories.d.ts +14 -0
- package/dist/components/Tabs/Tabs.types.d.ts +16 -0
- package/dist/components/Text/Text.d.ts +2 -0
- package/dist/components/Text/Text.stories.d.ts +35 -0
- package/dist/components/Text/Text.types.d.ts +21 -0
- package/dist/components/Textarea/Textarea.d.ts +2 -0
- package/dist/components/Textarea/Textarea.stories.d.ts +29 -0
- package/dist/components/Textarea/Textarea.types.d.ts +9 -0
- package/dist/components/Tooltip/Tooltip.d.ts +2 -0
- package/dist/components/Tooltip/Tooltip.stories.d.ts +10 -0
- package/dist/components/Tooltip/Tooltip.types.d.ts +12 -0
- package/dist/ds.css +1 -0
- package/dist/ds.js +1930 -0
- package/dist/ds.umd.cjs +1 -0
- package/dist/index.d.ts +63 -0
- package/dist/layouts/AppLayout/AppLayout.d.ts +8 -0
- package/dist/layouts/AppLayout/AppLayout.stories.d.ts +19 -0
- package/dist/layouts/AppLayout/AppLayout.types.d.ts +50 -0
- package/dist/layouts/AuthLayout/AuthLayout.d.ts +2 -0
- package/dist/layouts/AuthLayout/AuthLayout.stories.d.ts +12 -0
- package/dist/layouts/AuthLayout/AuthLayout.types.d.ts +7 -0
- package/dist/layouts/DashboardLayout/DashboardLayout.d.ts +2 -0
- package/dist/layouts/DashboardLayout/DashboardLayout.stories.d.ts +17 -0
- package/dist/layouts/DashboardLayout/DashboardLayout.types.d.ts +15 -0
- package/dist/layouts/SettingsLayout/SettingsLayout.d.ts +2 -0
- package/dist/layouts/SettingsLayout/SettingsLayout.stories.d.ts +17 -0
- package/dist/layouts/SettingsLayout/SettingsLayout.types.d.ts +14 -0
- package/eslint.config.js +45 -0
- package/package.json +100 -0
- package/src/components/Accordion/Accordion.module.css +158 -0
- package/src/components/Accordion/Accordion.stories.tsx +133 -0
- package/src/components/Accordion/Accordion.tsx +68 -0
- package/src/components/Accordion/Accordion.types.ts +21 -0
- package/src/components/Avatar/Avatar.module.css +58 -0
- package/src/components/Avatar/Avatar.stories.tsx +41 -0
- package/src/components/Avatar/Avatar.tsx +64 -0
- package/src/components/Avatar/Avatar.types.ts +12 -0
- package/src/components/Badge/Badge.module.css +98 -0
- package/src/components/Badge/Badge.stories.tsx +108 -0
- package/src/components/Badge/Badge.tsx +22 -0
- package/src/components/Badge/Badge.types.ts +11 -0
- package/src/components/Box/Box.module.css +638 -0
- package/src/components/Box/Box.stories.tsx +109 -0
- package/src/components/Box/Box.tsx +95 -0
- package/src/components/Box/Box.types.ts +65 -0
- package/src/components/Breadcrumbs/Breadcrumbs.module.css +41 -0
- package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx +40 -0
- package/src/components/Breadcrumbs/Breadcrumbs.tsx +54 -0
- package/src/components/Breadcrumbs/Breadcrumbs.types.ts +13 -0
- package/src/components/Button/Button.module.css +247 -0
- package/src/components/Button/Button.stories.tsx +93 -0
- package/src/components/Button/Button.tsx +31 -0
- package/src/components/Button/Button.types.ts +14 -0
- package/src/components/Card/Card.module.css +112 -0
- package/src/components/Card/Card.stories.tsx +86 -0
- package/src/components/Card/Card.tsx +70 -0
- package/src/components/Card/Card.types.ts +20 -0
- package/src/components/Checkbox/Checkbox.module.css +88 -0
- package/src/components/Checkbox/Checkbox.stories.tsx +65 -0
- package/src/components/Checkbox/Checkbox.tsx +57 -0
- package/src/components/Checkbox/Checkbox.types.ts +7 -0
- package/src/components/Dropdown/Dropdown.module.css +140 -0
- package/src/components/Dropdown/Dropdown.stories.tsx +86 -0
- package/src/components/Dropdown/Dropdown.tsx +251 -0
- package/src/components/Dropdown/Dropdown.types.ts +27 -0
- package/src/components/Header/Header.module.css +38 -0
- package/src/components/Header/Header.stories.tsx +53 -0
- package/src/components/Header/Header.tsx +49 -0
- package/src/components/Header/Header.types.ts +15 -0
- package/src/components/Input/Input.module.css +87 -0
- package/src/components/Input/Input.stories.tsx +101 -0
- package/src/components/Input/Input.tsx +41 -0
- package/src/components/Input/Input.types.ts +10 -0
- package/src/components/Loader/Loader.module.css +49 -0
- package/src/components/Loader/Loader.stories.tsx +75 -0
- package/src/components/Loader/Loader.tsx +15 -0
- package/src/components/Loader/Loader.types.ts +9 -0
- package/src/components/Modal/Modal.module.css +88 -0
- package/src/components/Modal/Modal.stories.tsx +94 -0
- package/src/components/Modal/Modal.tsx +115 -0
- package/src/components/Modal/Modal.types.ts +13 -0
- package/src/components/NavBar/NavBar.module.css +77 -0
- package/src/components/NavBar/NavBar.stories.tsx +55 -0
- package/src/components/NavBar/NavBar.tsx +50 -0
- package/src/components/NavBar/NavBar.types.ts +36 -0
- package/src/components/Notification/Notification.module.css +72 -0
- package/src/components/Notification/Notification.stories.tsx +81 -0
- package/src/components/Notification/Notification.tsx +34 -0
- package/src/components/Notification/Notification.types.ts +10 -0
- package/src/components/Pagination/Pagination.module.css +31 -0
- package/src/components/Pagination/Pagination.stories.tsx +128 -0
- package/src/components/Pagination/Pagination.tsx +245 -0
- package/src/components/Pagination/Pagination.types.ts +37 -0
- package/src/components/ProgressBar/ProgressBar.module.css +67 -0
- package/src/components/ProgressBar/ProgressBar.stories.tsx +91 -0
- package/src/components/ProgressBar/ProgressBar.tsx +49 -0
- package/src/components/ProgressBar/ProgressBar.types.ts +13 -0
- package/src/components/RadioButton/RadioButton.module.css +162 -0
- package/src/components/RadioButton/RadioButton.stories.tsx +114 -0
- package/src/components/RadioButton/RadioButton.tsx +43 -0
- package/src/components/RadioButton/RadioButton.types.ts +10 -0
- package/src/components/Select/Select.module.css +88 -0
- package/src/components/Select/Select.stories.tsx +99 -0
- package/src/components/Select/Select.tsx +51 -0
- package/src/components/Select/Select.types.ts +18 -0
- package/src/components/Skeleton/Skeleton.module.css +71 -0
- package/src/components/Skeleton/Skeleton.stories.tsx +54 -0
- package/src/components/Skeleton/Skeleton.tsx +32 -0
- package/src/components/Skeleton/Skeleton.types.ts +10 -0
- package/src/components/Stepper/Step.module.css +162 -0
- package/src/components/Stepper/Step.tsx +62 -0
- package/src/components/Stepper/Step.types.ts +19 -0
- package/src/components/Stepper/Stepper.module.css +39 -0
- package/src/components/Stepper/Stepper.stories.tsx +88 -0
- package/src/components/Stepper/Stepper.tsx +47 -0
- package/src/components/Stepper/Stepper.types.ts +16 -0
- package/src/components/Stepper/stepper.utils.ts +41 -0
- package/src/components/Switch/Switch.module.css +74 -0
- package/src/components/Switch/Switch.stories.tsx +56 -0
- package/src/components/Switch/Switch.tsx +36 -0
- package/src/components/Switch/Switch.types.ts +6 -0
- package/src/components/Table/Table.module.css +78 -0
- package/src/components/Table/Table.stories.tsx +124 -0
- package/src/components/Table/Table.tsx +75 -0
- package/src/components/Table/Table.types.ts +29 -0
- package/src/components/Tabs/Tabs.module.css +74 -0
- package/src/components/Tabs/Tabs.stories.tsx +48 -0
- package/src/components/Tabs/Tabs.tsx +113 -0
- package/src/components/Tabs/Tabs.types.ts +18 -0
- package/src/components/Text/Text.module.css +126 -0
- package/src/components/Text/Text.stories.tsx +128 -0
- package/src/components/Text/Text.tsx +50 -0
- package/src/components/Text/Text.types.ts +43 -0
- package/src/components/Textarea/Textarea.module.css +82 -0
- package/src/components/Textarea/Textarea.stories.tsx +99 -0
- package/src/components/Textarea/Textarea.tsx +43 -0
- package/src/components/Textarea/Textarea.types.ts +11 -0
- package/src/components/Tooltip/Tooltip.module.css +125 -0
- package/src/components/Tooltip/Tooltip.stories.tsx +68 -0
- package/src/components/Tooltip/Tooltip.tsx +87 -0
- package/src/components/Tooltip/Tooltip.types.ts +14 -0
- package/src/index.ts +132 -0
- package/src/layouts/AppLayout/AppLayout.module.css +17 -0
- package/src/layouts/AppLayout/AppLayout.stories.tsx +124 -0
- package/src/layouts/AppLayout/AppLayout.tsx +46 -0
- package/src/layouts/AppLayout/AppLayout.types.ts +50 -0
- package/src/layouts/AuthLayout/AuthLayout.module.css +49 -0
- package/src/layouts/AuthLayout/AuthLayout.stories.tsx +109 -0
- package/src/layouts/AuthLayout/AuthLayout.tsx +27 -0
- package/src/layouts/AuthLayout/AuthLayout.types.tsx +8 -0
- package/src/layouts/DashboardLayout/DashboardLayout.module.css +37 -0
- package/src/layouts/DashboardLayout/DashboardLayout.stories.tsx +144 -0
- package/src/layouts/DashboardLayout/DashboardLayout.tsx +41 -0
- package/src/layouts/DashboardLayout/DashboardLayout.types.tsx +14 -0
- package/src/layouts/SettingsLayout/SettingsLayout.module.css +39 -0
- package/src/layouts/SettingsLayout/SettingsLayout.stories.tsx +103 -0
- package/src/layouts/SettingsLayout/SettingsLayout.tsx +37 -0
- package/src/layouts/SettingsLayout/SettingsLayout.types.tsx +13 -0
- package/src/styles/ds.css +12 -0
- package/src/styles/semantic.css +56 -0
- package/src/styles/themes/dark.css +58 -0
- package/src/styles/themes/light.css +58 -0
- package/src/styles/themes/retro.css +58 -0
- package/src/styles/tokens.css +138 -0
- package/tsconfig.app.json +28 -0
- package/tsconfig.json +7 -0
- package/tsconfig.node.json +26 -0
- package/vite.config.ts +33 -0
package/.gitignore
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
# Logs
|
|
2
|
+
logs
|
|
3
|
+
*.log
|
|
4
|
+
npm-debug.log*
|
|
5
|
+
yarn-debug.log*
|
|
6
|
+
yarn-error.log*
|
|
7
|
+
pnpm-debug.log*
|
|
8
|
+
lerna-debug.log*
|
|
9
|
+
|
|
10
|
+
.env
|
|
11
|
+
.env.local
|
|
12
|
+
.env.*.local
|
|
13
|
+
|
|
14
|
+
node_modules
|
|
15
|
+
dist
|
|
16
|
+
|
|
17
|
+
# Editor directories and files
|
|
18
|
+
.vscode
|
|
19
|
+
!.vscode/extensions.json
|
|
20
|
+
.idea
|
|
21
|
+
.DS_Store
|
|
22
|
+
*.suo
|
|
23
|
+
*.ntvs*
|
|
24
|
+
*.njsproj
|
|
25
|
+
*.sln
|
|
26
|
+
*.sw?
|
|
27
|
+
|
|
28
|
+
*storybook.log
|
|
29
|
+
storybook-static
|
|
30
|
+
coverage
|
package/.prettierrc.json
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import type { Preview } from '@storybook/react-vite';
|
|
2
|
+
|
|
3
|
+
// Design system styles (foundation -> theme refs -> semantics)
|
|
4
|
+
import '../src/styles/ds.css';
|
|
5
|
+
|
|
6
|
+
const preview: Preview = {
|
|
7
|
+
parameters: {
|
|
8
|
+
a11y: {
|
|
9
|
+
disable: false,
|
|
10
|
+
},
|
|
11
|
+
controls: {
|
|
12
|
+
matchers: {
|
|
13
|
+
color: /(background|color)$/i,
|
|
14
|
+
date: /Date$/i,
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
|
|
19
|
+
globalTypes: {
|
|
20
|
+
theme: {
|
|
21
|
+
name: 'Theme',
|
|
22
|
+
defaultValue: 'light',
|
|
23
|
+
toolbar: {
|
|
24
|
+
icon: 'mirror',
|
|
25
|
+
items: [
|
|
26
|
+
{ value: 'light', title: 'Light' },
|
|
27
|
+
{ value: 'dark', title: 'Dark' },
|
|
28
|
+
{ value: 'retro', title: 'Retro' },
|
|
29
|
+
],
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
|
|
34
|
+
decorators: [
|
|
35
|
+
(Story, context) => {
|
|
36
|
+
const theme = context.globals.theme as 'light' | 'dark' | 'retro';
|
|
37
|
+
const root = document.documentElement;
|
|
38
|
+
|
|
39
|
+
if (theme === 'light') {
|
|
40
|
+
delete root.dataset.theme;
|
|
41
|
+
} else {
|
|
42
|
+
root.dataset.theme = theme;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
return Story();
|
|
46
|
+
},
|
|
47
|
+
],
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
export default preview;
|
package/.versionrc.json
ADDED
package/README.md
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
# Tharaday Design System
|
|
2
|
+
|
|
3
|
+
Welcome to the Tharaday design system! This project was created to help you build and maintain a consistent UI library.
|
|
4
|
+
|
|
5
|
+
## Quick Start
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install
|
|
9
|
+
npm run storybook
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
Storybook is available at http://localhost:6006.
|
|
13
|
+
|
|
14
|
+
## Use in an app
|
|
15
|
+
|
|
16
|
+
Import the styles once at your app root and use the components.
|
|
17
|
+
|
|
18
|
+
```tsx
|
|
19
|
+
import 'tharaday/styles.css';
|
|
20
|
+
|
|
21
|
+
import { Button } from 'tharaday';
|
|
22
|
+
|
|
23
|
+
export function Example() {
|
|
24
|
+
return <Button>Click me</Button>;
|
|
25
|
+
}
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Docs
|
|
29
|
+
|
|
30
|
+
- `docs/GETTING_STARTED.md` for setup and dev workflows
|
|
31
|
+
- `docs/CUSTOMIZATION.md` for components, tokens, and theming
|
|
32
|
+
- `docs/TOKENS_AND_THEMES.md` for token structure and theme mapping
|
|
33
|
+
- `docs/PUBLISHING.md` for build and release
|
|
34
|
+
|
|
35
|
+
## Project Structure
|
|
36
|
+
|
|
37
|
+
- `src/components/` - Your React components. Each component has its own folder with:
|
|
38
|
+
- `.tsx` - Implementation
|
|
39
|
+
- `.module.css` - Scoped styles
|
|
40
|
+
- `.stories.tsx` - Storybook stories
|
|
41
|
+
- `.types.ts` - TypeScript definitions
|
|
42
|
+
- `src/layouts/` - App-level layout components (shells, page scaffolding)
|
|
43
|
+
- `src/styles/` - Global styles and design tokens:
|
|
44
|
+
- `tokens.css` - Core design tokens (colors, spacing, etc.)
|
|
45
|
+
- `semantic.css` - Semantic tokens mapping tokens to usage
|
|
46
|
+
- `themes/` - Light and dark theme definitions
|
|
47
|
+
- `.storybook/` - Storybook configuration
|
|
48
|
+
|
|
49
|
+
## Styling
|
|
50
|
+
|
|
51
|
+
The Tharaday design system uses CSS Modules and CSS Variables for styling.
|
|
52
|
+
|
|
53
|
+
## Available Scripts
|
|
54
|
+
|
|
55
|
+
- `npm run build` - Build the Tharaday design system for production (outputs to `dist/`)
|
|
56
|
+
- `npm run build-storybook` - Build static Storybook site
|
|
57
|
+
- `npm run storybook` - Start Storybook
|
|
58
|
+
- `npm run lint` - Run ESLint
|
|
59
|
+
- `npm run lint:fix` - Run ESLint with auto-fix
|
|
60
|
+
- `npm run format` - Check formatting with Prettier
|
|
61
|
+
- `npm run format:fix` - Format code with Prettier
|
|
62
|
+
- `npm run release` - Bump version, update changelog, and tag a release
|
|
63
|
+
- `npm run release:alpha` - Create an alpha prerelease tag
|
|
64
|
+
- `npm run release:beta` - Create a beta prerelease tag
|
|
65
|
+
- `npm run release:patch` - Release a patch version
|
|
66
|
+
- `npm run release:minor` - Release a minor version
|
|
67
|
+
- `npm run release:major` - Release a major version
|
|
68
|
+
- `npm run publish:npm` - Publish to npmjs (bypasses local .npmrc)
|
|
69
|
+
|
|
70
|
+
## Git Hooks
|
|
71
|
+
|
|
72
|
+
Husky runs on install and enforces a pre-commit hook that runs `npm run lint` and
|
|
73
|
+
`npm run format`. Use `npm run format:fix` to resolve formatting issues locally.
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Accordion } from './Accordion.tsx';
|
|
3
|
+
declare const meta: Meta<typeof Accordion>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Accordion>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Ghost: Story;
|
|
8
|
+
export declare const Bordered: Story;
|
|
9
|
+
export declare const Separated: Story;
|
|
10
|
+
export declare const Small: Story;
|
|
11
|
+
export declare const Large: Story;
|
|
12
|
+
export declare const AllowMultiple: Story;
|
|
13
|
+
export declare const DefaultExpanded: Story;
|
|
14
|
+
export declare const ComplexContent: Story;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface AccordionItem {
|
|
3
|
+
id: string;
|
|
4
|
+
title: ReactNode;
|
|
5
|
+
content: ReactNode;
|
|
6
|
+
isDisabled?: boolean;
|
|
7
|
+
}
|
|
8
|
+
export type AccordionVariant = 'default' | 'ghost' | 'separated' | 'bordered';
|
|
9
|
+
export type AccordionSize = 'sm' | 'md' | 'lg';
|
|
10
|
+
export interface AccordionProps {
|
|
11
|
+
items: AccordionItem[];
|
|
12
|
+
allowMultiple?: boolean;
|
|
13
|
+
defaultExpanded?: string[];
|
|
14
|
+
variant?: AccordionVariant;
|
|
15
|
+
size?: AccordionSize;
|
|
16
|
+
className?: string;
|
|
17
|
+
id?: string;
|
|
18
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: ({ src, alt, name, size, fallback, className, ...props }: import('./Avatar.types.ts').AvatarProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
tags: string[];
|
|
6
|
+
parameters: {
|
|
7
|
+
layout: string;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
export default meta;
|
|
11
|
+
type Story = StoryObj<typeof meta>;
|
|
12
|
+
export declare const Default: Story;
|
|
13
|
+
export declare const WithImage: Story;
|
|
14
|
+
export declare const Sizes: Story;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
3
|
+
export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
src?: string;
|
|
5
|
+
alt?: string;
|
|
6
|
+
name?: string;
|
|
7
|
+
size?: AvatarSize;
|
|
8
|
+
fallback?: string;
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: ({ variant, size, intent, className, children, ...props }: import('./Badge.types.ts').BadgeProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
tags: string[];
|
|
6
|
+
parameters: {
|
|
7
|
+
layout: string;
|
|
8
|
+
};
|
|
9
|
+
argTypes: {
|
|
10
|
+
intent: {
|
|
11
|
+
control: "select";
|
|
12
|
+
options: string[];
|
|
13
|
+
};
|
|
14
|
+
variant: {
|
|
15
|
+
control: "select";
|
|
16
|
+
options: string[];
|
|
17
|
+
};
|
|
18
|
+
size: {
|
|
19
|
+
control: "select";
|
|
20
|
+
options: string[];
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
export default meta;
|
|
25
|
+
type Story = StoryObj<typeof meta>;
|
|
26
|
+
export declare const Solid: Story;
|
|
27
|
+
export declare const Subtle: Story;
|
|
28
|
+
export declare const Outline: Story;
|
|
29
|
+
export declare const Success: Story;
|
|
30
|
+
export declare const Warning: Story;
|
|
31
|
+
export declare const Danger: Story;
|
|
32
|
+
export declare const Info: Story;
|
|
33
|
+
export declare const All: Story;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export type BadgeVariant = 'solid' | 'subtle' | 'outline';
|
|
3
|
+
export type BadgeSize = 'sm' | 'md' | 'lg';
|
|
4
|
+
export type BadgeIntent = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
|
|
5
|
+
export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
6
|
+
variant?: BadgeVariant;
|
|
7
|
+
size?: BadgeSize;
|
|
8
|
+
intent?: BadgeIntent;
|
|
9
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { BoxProps } from './Box.types.ts';
|
|
2
|
+
export declare const Box: ({ children, as: Component, display, padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight, m, mx, my, mt, mb, ml, mr, gap, flexDirection, alignItems, justifyContent, flexWrap, flexGrow, flexShrink, flex, fullWidth, textAlign, width, height, gridTemplateColumns, backgroundColor, border, borderBottom, borderColor, borderRadius, className, style, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: ({ children, as: Component, display, padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight, m, mx, my, mt, mb, ml, mr, gap, flexDirection, alignItems, justifyContent, flexWrap, flexGrow, flexShrink, flex, fullWidth, textAlign, width, height, gridTemplateColumns, backgroundColor, border, borderBottom, borderColor, borderRadius, className, style, ...props }: import('./Box.types.ts').BoxProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
tags: string[];
|
|
6
|
+
argTypes: {
|
|
7
|
+
display: {
|
|
8
|
+
control: "select";
|
|
9
|
+
options: string[];
|
|
10
|
+
};
|
|
11
|
+
padding: {
|
|
12
|
+
control: "select";
|
|
13
|
+
options: number[];
|
|
14
|
+
};
|
|
15
|
+
gap: {
|
|
16
|
+
control: "select";
|
|
17
|
+
options: number[];
|
|
18
|
+
};
|
|
19
|
+
flexDirection: {
|
|
20
|
+
control: "select";
|
|
21
|
+
options: string[];
|
|
22
|
+
};
|
|
23
|
+
alignItems: {
|
|
24
|
+
control: "select";
|
|
25
|
+
options: string[];
|
|
26
|
+
};
|
|
27
|
+
justifyContent: {
|
|
28
|
+
control: "select";
|
|
29
|
+
options: string[];
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
export default meta;
|
|
34
|
+
type Story = StoryObj<typeof meta>;
|
|
35
|
+
export declare const Default: Story;
|
|
36
|
+
export declare const FlexRow: Story;
|
|
37
|
+
export declare const FlexColumn: Story;
|
|
38
|
+
export declare const CustomElement: Story;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { HTMLAttributes, ReactNode, ElementType } from 'react';
|
|
2
|
+
export type BoxPadding = 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 14;
|
|
3
|
+
export type BoxMargin = 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 14;
|
|
4
|
+
export type BoxGap = 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 14;
|
|
5
|
+
export type BoxDisplay = 'block' | 'flex' | 'inline-flex' | 'grid' | 'inline-block' | 'none';
|
|
6
|
+
export type BoxFlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
|
|
7
|
+
export type BoxAlignItems = 'stretch' | 'flex-start' | 'center' | 'flex-end' | 'baseline';
|
|
8
|
+
export type BoxJustifyContent = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
|
|
9
|
+
export type BoxBackgroundColor = 'none' | 'main' | 'subtle' | 'info-subtle' | 'success-subtle' | 'warning-subtle' | 'danger-subtle';
|
|
10
|
+
export type BoxBorderColor = 'main' | 'subtle' | 'danger' | 'warning' | 'success' | 'info';
|
|
11
|
+
export type BoxBorderRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full';
|
|
12
|
+
export interface BoxProps extends HTMLAttributes<HTMLElement> {
|
|
13
|
+
children?: ReactNode;
|
|
14
|
+
as?: ElementType;
|
|
15
|
+
display?: BoxDisplay;
|
|
16
|
+
padding?: BoxPadding;
|
|
17
|
+
paddingX?: BoxPadding;
|
|
18
|
+
paddingY?: BoxPadding;
|
|
19
|
+
paddingTop?: BoxPadding;
|
|
20
|
+
paddingBottom?: BoxPadding;
|
|
21
|
+
paddingLeft?: BoxPadding;
|
|
22
|
+
paddingRight?: BoxPadding;
|
|
23
|
+
m?: BoxMargin;
|
|
24
|
+
mx?: BoxMargin;
|
|
25
|
+
my?: BoxMargin;
|
|
26
|
+
mt?: BoxMargin;
|
|
27
|
+
mb?: BoxMargin;
|
|
28
|
+
ml?: BoxMargin;
|
|
29
|
+
mr?: BoxMargin;
|
|
30
|
+
gap?: BoxGap;
|
|
31
|
+
flexDirection?: BoxFlexDirection;
|
|
32
|
+
alignItems?: BoxAlignItems;
|
|
33
|
+
justifyContent?: BoxJustifyContent;
|
|
34
|
+
className?: string;
|
|
35
|
+
flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
|
|
36
|
+
flexGrow?: number | string;
|
|
37
|
+
flexShrink?: number | string;
|
|
38
|
+
flex?: number | string;
|
|
39
|
+
fullWidth?: boolean;
|
|
40
|
+
textAlign?: 'left' | 'center' | 'right' | 'justify';
|
|
41
|
+
width?: string | number;
|
|
42
|
+
height?: string | number;
|
|
43
|
+
gridTemplateColumns?: string;
|
|
44
|
+
backgroundColor?: BoxBackgroundColor;
|
|
45
|
+
border?: boolean;
|
|
46
|
+
borderBottom?: boolean;
|
|
47
|
+
borderColor?: BoxBorderColor;
|
|
48
|
+
borderRadius?: BoxBorderRadius;
|
|
49
|
+
}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { BreadcrumbsProps, BreadcrumbItemProps } from './Breadcrumbs.types.ts';
|
|
2
|
+
export declare const BreadcrumbItem: ({ href, isCurrent, children, className, ...props }: BreadcrumbItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare const Breadcrumbs: ({ children, separator, className, ...props }: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: ({ children, separator, className, ...props }: import('./Breadcrumbs.types.ts').BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
tags: string[];
|
|
6
|
+
parameters: {
|
|
7
|
+
layout: string;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
export default meta;
|
|
11
|
+
type Story = StoryObj<typeof meta>;
|
|
12
|
+
export declare const Default: Story;
|
|
13
|
+
export declare const CustomSeparator: Story;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode, AnchorHTMLAttributes, HTMLAttributes } from 'react';
|
|
2
|
+
export interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
|
|
3
|
+
children?: ReactNode;
|
|
4
|
+
separator?: ReactNode;
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
export interface BreadcrumbItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
8
|
+
href?: string;
|
|
9
|
+
isCurrent?: boolean;
|
|
10
|
+
children: ReactNode;
|
|
11
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: ({ size, variant, intent, fullWidth, className, children, ...props }: import('./Button.types.ts').ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
parameters: {
|
|
6
|
+
layout: string;
|
|
7
|
+
};
|
|
8
|
+
tags: string[];
|
|
9
|
+
args: {
|
|
10
|
+
onClick: import('@vitest/spy').Mock<(...args: any[]) => any>;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
export default meta;
|
|
14
|
+
type Story = StoryObj<typeof meta>;
|
|
15
|
+
export declare const Solid: Story;
|
|
16
|
+
export declare const Subtle: Story;
|
|
17
|
+
export declare const Outline: Story;
|
|
18
|
+
export declare const ExtraSmall: Story;
|
|
19
|
+
export declare const Small: Story;
|
|
20
|
+
export declare const Large: Story;
|
|
21
|
+
export declare const ExtraLarge: Story;
|
|
22
|
+
export declare const All: Story;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ButtonHTMLAttributes } from 'react';
|
|
2
|
+
export type ButtonVariant = 'solid' | 'subtle' | 'outline';
|
|
3
|
+
export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
4
|
+
export type ButtonIntent = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
|
|
5
|
+
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
6
|
+
variant?: ButtonVariant;
|
|
7
|
+
size?: ButtonSize;
|
|
8
|
+
intent?: ButtonIntent;
|
|
9
|
+
isLoading?: boolean;
|
|
10
|
+
fullWidth?: boolean;
|
|
11
|
+
className?: string;
|
|
12
|
+
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { CardProps, CardHeaderProps, CardContentProps, CardFooterProps } from './Card.types.ts';
|
|
2
|
+
export declare const Card: ({ padding, shadow, bordered, borderColor, backgroundColor, className, children, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare const CardHeader: ({ title, subtitle, className, children, ...props }: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export declare const CardContent: ({ className, children, ...props }: CardContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export declare const CardFooter: ({ className, children, ...props }: CardFooterProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: ({ padding, shadow, bordered, borderColor, backgroundColor, className, children, ...props }: import('./Card.types.ts').CardProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
tags: string[];
|
|
6
|
+
parameters: {
|
|
7
|
+
layout: string;
|
|
8
|
+
};
|
|
9
|
+
argTypes: {
|
|
10
|
+
padding: {
|
|
11
|
+
control: "select";
|
|
12
|
+
options: string[];
|
|
13
|
+
};
|
|
14
|
+
shadow: {
|
|
15
|
+
control: "select";
|
|
16
|
+
options: string[];
|
|
17
|
+
};
|
|
18
|
+
bordered: {
|
|
19
|
+
control: "boolean";
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
export default meta;
|
|
24
|
+
type Story = StoryObj<typeof meta>;
|
|
25
|
+
export declare const Default: Story;
|
|
26
|
+
export declare const Simple: Story;
|
|
27
|
+
export declare const BackgroundColor: Story;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import { BoxBackgroundColor, BoxBorderColor } from '../Box/Box.types.ts';
|
|
3
|
+
export interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
padding?: 'none' | 'sm' | 'md' | 'lg';
|
|
5
|
+
shadow?: 'none' | 'sm' | 'md';
|
|
6
|
+
bordered?: boolean;
|
|
7
|
+
borderColor?: BoxBorderColor;
|
|
8
|
+
backgroundColor?: BoxBackgroundColor;
|
|
9
|
+
}
|
|
10
|
+
export interface CardHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
11
|
+
title?: ReactNode;
|
|
12
|
+
subtitle?: ReactNode;
|
|
13
|
+
}
|
|
14
|
+
export type CardContentProps = HTMLAttributes<HTMLDivElement>;
|
|
15
|
+
export type CardFooterProps = HTMLAttributes<HTMLDivElement>;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: ({ label, error, helperText, className, disabled, id, ...props }: import('./Checkbox.types.ts').CheckboxProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
tags: string[];
|
|
6
|
+
parameters: {
|
|
7
|
+
layout: string;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
export default meta;
|
|
11
|
+
type Story = StoryObj<typeof meta>;
|
|
12
|
+
export declare const Default: Story;
|
|
13
|
+
export declare const Checked: Story;
|
|
14
|
+
export declare const WithHelperText: Story;
|
|
15
|
+
export declare const Error: Story;
|
|
16
|
+
export declare const Disabled: Story;
|
|
17
|
+
export declare const All: Story;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Dropdown } from './Dropdown.tsx';
|
|
3
|
+
declare const meta: Meta<typeof Dropdown>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Dropdown>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const WithLabel: Story;
|
|
8
|
+
export declare const WithValue: Story;
|
|
9
|
+
export declare const Error: Story;
|
|
10
|
+
export declare const Disabled: Story;
|
|
11
|
+
export declare const Sizes: Story;
|
|
12
|
+
export declare const FullWidth: Story;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export type DropdownSize = 'sm' | 'md' | 'lg';
|
|
3
|
+
export interface DropdownOption {
|
|
4
|
+
value: string | number;
|
|
5
|
+
label: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
icon?: ReactNode;
|
|
8
|
+
description?: string;
|
|
9
|
+
}
|
|
10
|
+
export interface DropdownProps {
|
|
11
|
+
options: DropdownOption[];
|
|
12
|
+
value?: string | number;
|
|
13
|
+
defaultValue?: string | number;
|
|
14
|
+
onChange?: (value: string | number) => void;
|
|
15
|
+
placeholder?: string;
|
|
16
|
+
label?: string;
|
|
17
|
+
helperText?: string;
|
|
18
|
+
error?: boolean;
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
size?: DropdownSize;
|
|
21
|
+
className?: string;
|
|
22
|
+
id?: string;
|
|
23
|
+
fullWidth?: boolean;
|
|
24
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: ({ id, logo, title, user, onLogin, onLogout, onCreateAccount, }: import('./Header.types.ts').HeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
tags: string[];
|
|
6
|
+
parameters: {
|
|
7
|
+
layout: string;
|
|
8
|
+
};
|
|
9
|
+
args: {
|
|
10
|
+
onLogin: import('@vitest/spy').Mock<(...args: any[]) => any>;
|
|
11
|
+
onLogout: import('@vitest/spy').Mock<(...args: any[]) => any>;
|
|
12
|
+
onCreateAccount: import('@vitest/spy').Mock<(...args: any[]) => any>;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
export default meta;
|
|
16
|
+
type Story = StoryObj<typeof meta>;
|
|
17
|
+
export declare const LoggedIn: Story;
|
|
18
|
+
export declare const LoggedOut: Story;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
type User = {
|
|
3
|
+
name: string;
|
|
4
|
+
};
|
|
5
|
+
export interface HeaderProps {
|
|
6
|
+
id?: string;
|
|
7
|
+
logo?: ReactNode;
|
|
8
|
+
title?: string;
|
|
9
|
+
user?: User;
|
|
10
|
+
onLogin?: () => void;
|
|
11
|
+
onLogout?: () => void;
|
|
12
|
+
onCreateAccount?: () => void;
|
|
13
|
+
}
|
|
14
|
+
export {};
|