@flightlesslabs/dodo-ui-date 0.2.0 → 0.3.2
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/README.md +2 -0
- package/package.json +28 -33
- package/dist/components/Calendar/Calendar.stories.svelte +0 -136
- package/dist/components/Calendar/Calendar.stories.svelte.d.ts +0 -22
- package/dist/components/DatePicker/DatePicker.stories.svelte +0 -136
- package/dist/components/DatePicker/DatePicker.stories.svelte.d.ts +0 -22
- package/src/lib/components/Calendar/Calendar.stories.svelte +0 -136
- package/src/lib/components/DatePicker/DatePicker.stories.svelte +0 -136
package/README.md
CHANGED
package/package.json
CHANGED
|
@@ -1,22 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flightlesslabs/dodo-ui-date",
|
|
3
|
-
"version": "0.2
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
"scss": "pnpm scss:main",
|
|
7
|
-
"build": "vite build && pnpm run prepack",
|
|
8
|
-
"preview": "vite preview",
|
|
9
|
-
"prepare": "svelte-kit sync || echo ''",
|
|
10
|
-
"prepack": "svelte-kit sync && svelte-package && pnpm run scss && publint",
|
|
11
|
-
"svelte-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
12
|
-
"format": "prettier --write .",
|
|
13
|
-
"lint": "prettier --check . && eslint .",
|
|
14
|
-
"dev": "storybook dev -p 6006",
|
|
15
|
-
"build-storybook": "storybook build && touch ./storybook-static/.nojekyll",
|
|
16
|
-
"check": "pnpm run svelte-check && eslint . && pnpm run lint",
|
|
17
|
-
"check:fix": "pnpm run svelte-check && eslint . && pnpm run format",
|
|
18
|
-
"create:component": "node --experimental-strip-types scripts/create-component/create-component.ts",
|
|
19
|
-
"test": "vitest run"
|
|
3
|
+
"version": "0.3.2",
|
|
4
|
+
"publishConfig": {
|
|
5
|
+
"access": "public"
|
|
20
6
|
},
|
|
21
7
|
"homepage": "https://flightlesslabs.github.io/dodo-ui",
|
|
22
8
|
"repository": {
|
|
@@ -55,23 +41,23 @@
|
|
|
55
41
|
}
|
|
56
42
|
},
|
|
57
43
|
"peerDependencies": {
|
|
58
|
-
"@flightlesslabs/dodo-ui": "^0.
|
|
44
|
+
"@flightlesslabs/dodo-ui": "^0.24.0",
|
|
59
45
|
"@internationalized/date": "^3.0.0",
|
|
60
46
|
"bits-ui": "^2.0.0",
|
|
61
47
|
"svelte": "^5.0.0"
|
|
62
48
|
},
|
|
49
|
+
"dependencies": {
|
|
50
|
+
"@internationalized/date": "^3.12.0",
|
|
51
|
+
"bits-ui": "^2.17.2",
|
|
52
|
+
"svelte": "^5.55.2",
|
|
53
|
+
"@iconify/svelte": "^5.2.1",
|
|
54
|
+
"dayjs": "^1.11.20",
|
|
55
|
+
"esm-env": "^1.2.2",
|
|
56
|
+
"@flightlesslabs/dodo-ui": "0.24.0"
|
|
57
|
+
},
|
|
63
58
|
"devDependencies": {
|
|
64
|
-
"@chromatic-com/storybook": "^5.1.1",
|
|
65
59
|
"@eslint/compat": "^2.0.4",
|
|
66
60
|
"@eslint/js": "^10.0.1",
|
|
67
|
-
"@flightlesslabs/dodo-ui": "^0.22.2",
|
|
68
|
-
"@iconify/svelte": "^5.2.1",
|
|
69
|
-
"@internationalized/date": "^3.12.0",
|
|
70
|
-
"@storybook/addon-a11y": "^10.3.5",
|
|
71
|
-
"@storybook/addon-docs": "^10.3.5",
|
|
72
|
-
"@storybook/addon-svelte-csf": "^5.1.2",
|
|
73
|
-
"@storybook/addon-vitest": "^10.3.5",
|
|
74
|
-
"@storybook/sveltekit": "^10.3.5",
|
|
75
61
|
"@sveltejs/adapter-auto": "^7.0.1",
|
|
76
62
|
"@sveltejs/adapter-static": "^3.0.10",
|
|
77
63
|
"@sveltejs/kit": "^2.57.0",
|
|
@@ -85,8 +71,6 @@
|
|
|
85
71
|
"@vitest/browser": "^4.1.3",
|
|
86
72
|
"@vitest/browser-playwright": "^4.1.3",
|
|
87
73
|
"@vitest/coverage-v8": "^4.1.3",
|
|
88
|
-
"bits-ui": "^2.17.2",
|
|
89
|
-
"dayjs": "^1.11.20",
|
|
90
74
|
"eslint": "^10.2.0",
|
|
91
75
|
"eslint-config-prettier": "^10.1.8",
|
|
92
76
|
"eslint-plugin-storybook": "^10.3.5",
|
|
@@ -100,8 +84,6 @@
|
|
|
100
84
|
"prettier-plugin-svelte": "^3.5.1",
|
|
101
85
|
"publint": "^0.3.18",
|
|
102
86
|
"sass": "^1.99.0",
|
|
103
|
-
"storybook": "^10.3.5",
|
|
104
|
-
"svelte": "^5.55.2",
|
|
105
87
|
"svelte-check": "^4.4.6",
|
|
106
88
|
"typescript": "^6.0.2",
|
|
107
89
|
"typescript-eslint": "^8.58.1",
|
|
@@ -110,5 +92,18 @@
|
|
|
110
92
|
},
|
|
111
93
|
"keywords": [
|
|
112
94
|
"svelte"
|
|
113
|
-
]
|
|
114
|
-
|
|
95
|
+
],
|
|
96
|
+
"scripts": {
|
|
97
|
+
"scss:main": "sh -c \"mkdir -p dist/styles && sass src/lib/styles/main.scss dist/styles/main.css\"",
|
|
98
|
+
"scss": "pnpm scss:main",
|
|
99
|
+
"build": "vite build && pnpm run prepack",
|
|
100
|
+
"preview": "vite preview",
|
|
101
|
+
"svelte-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
102
|
+
"format": "prettier --write .",
|
|
103
|
+
"lint": "prettier --check . && eslint .",
|
|
104
|
+
"dev": "storybook dev -p 6006",
|
|
105
|
+
"check": "pnpm run svelte-check && eslint . && pnpm run lint",
|
|
106
|
+
"check:fix": "pnpm run svelte-check && eslint . && pnpm run format",
|
|
107
|
+
"create:component": "node --experimental-strip-types scripts/create-component/create-component.ts"
|
|
108
|
+
}
|
|
109
|
+
}
|
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
<script module lang="ts">
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import Calendar from './Calendar.svelte';
|
|
4
|
-
import type { CalendarProps } from './Calendar.svelte';
|
|
5
|
-
import type { ArgTypes } from 'storybook/internal/csf';
|
|
6
|
-
import { CalendarDate, type DateValue } from '@internationalized/date';
|
|
7
|
-
import {
|
|
8
|
-
cardColorOptions,
|
|
9
|
-
componentRoundnessOptions,
|
|
10
|
-
ComponentShadowOptions,
|
|
11
|
-
componentThemeColorsOptions,
|
|
12
|
-
componentVariantOptions,
|
|
13
|
-
Theme,
|
|
14
|
-
} from '@flightlesslabs/dodo-ui';
|
|
15
|
-
|
|
16
|
-
const description = `
|
|
17
|
-
a plug and play Calendar component based on bits-ui [calendar](https://bits-ui.com/docs/components/calendar).
|
|
18
|
-
|
|
19
|
-
\`\`\`ts
|
|
20
|
-
import { Calendar } from '@flightlesslabs/dodo-ui-date';
|
|
21
|
-
\`\`\`
|
|
22
|
-
`;
|
|
23
|
-
|
|
24
|
-
// ------------------------------
|
|
25
|
-
// Storybook ArgTypes
|
|
26
|
-
// ------------------------------
|
|
27
|
-
export const storyCalendarArgTypes: Partial<ArgTypes<CalendarProps>> = {
|
|
28
|
-
// ------------------------------
|
|
29
|
-
// Core
|
|
30
|
-
// ------------------------------
|
|
31
|
-
class: { table: { category: 'API', subcategory: 'Base' } },
|
|
32
|
-
value: {
|
|
33
|
-
control: { type: 'text' },
|
|
34
|
-
table: { category: 'API', subcategory: 'Base' },
|
|
35
|
-
},
|
|
36
|
-
|
|
37
|
-
// ------------------------------
|
|
38
|
-
// State
|
|
39
|
-
// ------------------------------
|
|
40
|
-
disabled: {
|
|
41
|
-
control: { type: 'boolean' },
|
|
42
|
-
description: 'Disabled state of the input',
|
|
43
|
-
table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
|
|
44
|
-
},
|
|
45
|
-
|
|
46
|
-
// ------------------------------
|
|
47
|
-
// Appearance
|
|
48
|
-
// ------------------------------
|
|
49
|
-
shadow: {
|
|
50
|
-
control: { type: 'select' },
|
|
51
|
-
options: ComponentShadowOptions,
|
|
52
|
-
description: 'Component Shadow',
|
|
53
|
-
table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: '1' } },
|
|
54
|
-
},
|
|
55
|
-
color: {
|
|
56
|
-
control: { type: 'select' },
|
|
57
|
-
options: cardColorOptions,
|
|
58
|
-
description: 'Color theme token',
|
|
59
|
-
table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'default' } },
|
|
60
|
-
},
|
|
61
|
-
variant: {
|
|
62
|
-
control: { type: 'select' },
|
|
63
|
-
options: componentVariantOptions,
|
|
64
|
-
description: 'Visual variant of the card',
|
|
65
|
-
table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'text' } },
|
|
66
|
-
},
|
|
67
|
-
roundness: {
|
|
68
|
-
control: { type: 'select' },
|
|
69
|
-
options: componentRoundnessOptions,
|
|
70
|
-
description: 'Border radius token',
|
|
71
|
-
table: { category: 'API', subcategory: 'Appearance' },
|
|
72
|
-
},
|
|
73
|
-
outline: {
|
|
74
|
-
control: { type: 'boolean' },
|
|
75
|
-
description: 'Render outlined style',
|
|
76
|
-
table: { category: 'API', subcategory: 'Appearance' },
|
|
77
|
-
},
|
|
78
|
-
active: {
|
|
79
|
-
control: { type: 'boolean' },
|
|
80
|
-
description: 'Add mouse hover and active effects',
|
|
81
|
-
table: { category: 'API', subcategory: 'Appearance' },
|
|
82
|
-
},
|
|
83
|
-
theme: {
|
|
84
|
-
control: { type: 'select' },
|
|
85
|
-
options: componentThemeColorsOptions,
|
|
86
|
-
description: 'Theme color',
|
|
87
|
-
table: { category: 'API', subcategory: 'Base', defaultValue: { summary: 'undefined' } },
|
|
88
|
-
},
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
// ------------------------------
|
|
92
|
-
// Storybook Meta
|
|
93
|
-
// ------------------------------
|
|
94
|
-
const { Story } = defineMeta({
|
|
95
|
-
component: Calendar,
|
|
96
|
-
tags: ['autodocs'],
|
|
97
|
-
argTypes: storyCalendarArgTypes,
|
|
98
|
-
parameters: {
|
|
99
|
-
docs: {
|
|
100
|
-
description: {
|
|
101
|
-
component: description,
|
|
102
|
-
},
|
|
103
|
-
},
|
|
104
|
-
},
|
|
105
|
-
});
|
|
106
|
-
|
|
107
|
-
let myValue = $state<DateValue>(new CalendarDate(2026, 4, 7));
|
|
108
|
-
</script>
|
|
109
|
-
|
|
110
|
-
<!-- ------------------------------ -->
|
|
111
|
-
<!-- Stories -->
|
|
112
|
-
<!-- ------------------------------ -->
|
|
113
|
-
|
|
114
|
-
<Story name="Default" />
|
|
115
|
-
|
|
116
|
-
<Story name="Controlled" asChild>
|
|
117
|
-
<Calendar bind:value={myValue} />
|
|
118
|
-
</Story>
|
|
119
|
-
|
|
120
|
-
<Story name="Starts On Sunday" args={{ weekStartsOn: 0 }} />
|
|
121
|
-
|
|
122
|
-
<Story name="Min Date" args={{ minValue: new CalendarDate(2026, 4, 7) }} />
|
|
123
|
-
|
|
124
|
-
<Story name="Max Date" args={{ maxValue: new CalendarDate(2026, 4, 7) }} />
|
|
125
|
-
|
|
126
|
-
<Story name="Light Theme" asChild>
|
|
127
|
-
<Theme type="light">
|
|
128
|
-
<Calendar />
|
|
129
|
-
</Theme>
|
|
130
|
-
</Story>
|
|
131
|
-
|
|
132
|
-
<Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
|
|
133
|
-
<Theme type="dark">
|
|
134
|
-
<Calendar />
|
|
135
|
-
</Theme>
|
|
136
|
-
</Story>
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import Calendar from './Calendar.svelte';
|
|
2
|
-
import type { CalendarProps } from './Calendar.svelte';
|
|
3
|
-
import type { ArgTypes } from 'storybook/internal/csf';
|
|
4
|
-
export declare const storyCalendarArgTypes: Partial<ArgTypes<CalendarProps>>;
|
|
5
|
-
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
6
|
-
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
7
|
-
$$bindings?: Bindings;
|
|
8
|
-
} & Exports;
|
|
9
|
-
(internal: unknown, props: {
|
|
10
|
-
$$events?: Events;
|
|
11
|
-
$$slots?: Slots;
|
|
12
|
-
}): Exports & {
|
|
13
|
-
$set?: any;
|
|
14
|
-
$on?: any;
|
|
15
|
-
};
|
|
16
|
-
z_$$bindings?: Bindings;
|
|
17
|
-
}
|
|
18
|
-
declare const Calendar: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
19
|
-
[evt: string]: CustomEvent<any>;
|
|
20
|
-
}, {}, {}, string>;
|
|
21
|
-
type Calendar = InstanceType<typeof Calendar>;
|
|
22
|
-
export default Calendar;
|
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
<script module lang="ts">
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import DatePicker from './DatePicker.svelte';
|
|
4
|
-
import type { DatePickerProps } from './DatePicker.svelte';
|
|
5
|
-
import type { ArgTypes } from 'storybook/internal/csf';
|
|
6
|
-
import { CalendarDate, type DateValue } from '@internationalized/date';
|
|
7
|
-
import { componentSizeOptions, componentRoundnessOptions, Theme } from '@flightlesslabs/dodo-ui';
|
|
8
|
-
|
|
9
|
-
const description = `
|
|
10
|
-
A sleek, plug and play Date Picker based on bits-ui [date-picker](https://bits-ui.com/docs/components/date-picker).
|
|
11
|
-
\`\`\`ts
|
|
12
|
-
import { DatePicker } from '@flightlesslabs/dodo-ui-date';
|
|
13
|
-
|
|
14
|
-
import { CalendarDate, type DateValue } from '@internationalized/date';
|
|
15
|
-
\`\`\`
|
|
16
|
-
`;
|
|
17
|
-
|
|
18
|
-
// ------------------------------
|
|
19
|
-
// Storybook ArgTypes
|
|
20
|
-
// ------------------------------
|
|
21
|
-
export const storyDatePickerArgTypes: Partial<ArgTypes<DatePickerProps>> = {
|
|
22
|
-
// ------------------------------
|
|
23
|
-
// Core
|
|
24
|
-
// ------------------------------
|
|
25
|
-
class: { table: { category: 'API', subcategory: 'Base' } },
|
|
26
|
-
value: {
|
|
27
|
-
control: { type: 'text' },
|
|
28
|
-
table: { category: 'API', subcategory: 'Base' },
|
|
29
|
-
},
|
|
30
|
-
dateFormat: {
|
|
31
|
-
control: { type: 'text' },
|
|
32
|
-
table: { category: 'API', subcategory: 'Base', defaultValue: { summary: 'dd/mm/yyyy' } },
|
|
33
|
-
},
|
|
34
|
-
|
|
35
|
-
// ------------------------------
|
|
36
|
-
// State
|
|
37
|
-
// ------------------------------
|
|
38
|
-
disabled: {
|
|
39
|
-
control: { type: 'boolean' },
|
|
40
|
-
description: 'Disabled state of the input',
|
|
41
|
-
table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
|
|
42
|
-
},
|
|
43
|
-
focused: {
|
|
44
|
-
control: { type: 'boolean' },
|
|
45
|
-
description: 'Force focused visual state',
|
|
46
|
-
table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
|
|
47
|
-
},
|
|
48
|
-
error: {
|
|
49
|
-
control: { type: 'boolean' },
|
|
50
|
-
description: 'Error visual state',
|
|
51
|
-
table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
|
|
52
|
-
},
|
|
53
|
-
|
|
54
|
-
// ------------------------------
|
|
55
|
-
// Appearance
|
|
56
|
-
// ------------------------------
|
|
57
|
-
size: {
|
|
58
|
-
control: { type: 'select' },
|
|
59
|
-
options: componentSizeOptions,
|
|
60
|
-
description: 'Visual size token',
|
|
61
|
-
table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'normal' } },
|
|
62
|
-
},
|
|
63
|
-
roundness: {
|
|
64
|
-
control: { type: 'select' },
|
|
65
|
-
options: componentRoundnessOptions,
|
|
66
|
-
description: 'Border radius token',
|
|
67
|
-
table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: '1' } },
|
|
68
|
-
},
|
|
69
|
-
outline: {
|
|
70
|
-
control: { type: 'boolean' },
|
|
71
|
-
description: 'Render outlined enclosure',
|
|
72
|
-
table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'true' } },
|
|
73
|
-
},
|
|
74
|
-
|
|
75
|
-
// ------------------------------
|
|
76
|
-
// Slots (Snippets)
|
|
77
|
-
// ------------------------------
|
|
78
|
-
before: {
|
|
79
|
-
table: { category: 'API', subcategory: 'Slots' },
|
|
80
|
-
description: 'Content rendered before the input',
|
|
81
|
-
},
|
|
82
|
-
after: {
|
|
83
|
-
table: { category: 'API', subcategory: 'Slots' },
|
|
84
|
-
description: 'Content rendered after the input',
|
|
85
|
-
},
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
// ------------------------------
|
|
89
|
-
// Storybook Meta
|
|
90
|
-
// ------------------------------
|
|
91
|
-
const { Story } = defineMeta({
|
|
92
|
-
component: DatePicker,
|
|
93
|
-
tags: ['autodocs'],
|
|
94
|
-
argTypes: storyDatePickerArgTypes,
|
|
95
|
-
parameters: {
|
|
96
|
-
docs: {
|
|
97
|
-
description: {
|
|
98
|
-
component: description,
|
|
99
|
-
},
|
|
100
|
-
story: { height: '420px' },
|
|
101
|
-
},
|
|
102
|
-
},
|
|
103
|
-
});
|
|
104
|
-
|
|
105
|
-
let myValue = $state<DateValue>(new CalendarDate(2026, 4, 7));
|
|
106
|
-
</script>
|
|
107
|
-
|
|
108
|
-
<!-- ------------------------------ -->
|
|
109
|
-
<!-- Stories -->
|
|
110
|
-
<!-- ------------------------------ -->
|
|
111
|
-
|
|
112
|
-
<Story name="Default" />
|
|
113
|
-
|
|
114
|
-
<Story name="Controlled" asChild>
|
|
115
|
-
<DatePicker bind:value={myValue} />
|
|
116
|
-
</Story>
|
|
117
|
-
|
|
118
|
-
<Story name="Starts On Sunday" args={{ weekStartsOn: 0 }} />
|
|
119
|
-
|
|
120
|
-
<Story name="Date Format" args={{ dateFormat: 'mm/dd/yyyy' }} />
|
|
121
|
-
|
|
122
|
-
<Story name="Min Date" args={{ minValue: new CalendarDate(2026, 4, 7) }} />
|
|
123
|
-
|
|
124
|
-
<Story name="Max Date" args={{ maxValue: new CalendarDate(2026, 4, 7) }} />
|
|
125
|
-
|
|
126
|
-
<Story name="Light Theme" asChild>
|
|
127
|
-
<Theme type="light">
|
|
128
|
-
<DatePicker />
|
|
129
|
-
</Theme>
|
|
130
|
-
</Story>
|
|
131
|
-
|
|
132
|
-
<Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
|
|
133
|
-
<Theme type="dark">
|
|
134
|
-
<DatePicker />
|
|
135
|
-
</Theme>
|
|
136
|
-
</Story>
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import DatePicker from './DatePicker.svelte';
|
|
2
|
-
import type { DatePickerProps } from './DatePicker.svelte';
|
|
3
|
-
import type { ArgTypes } from 'storybook/internal/csf';
|
|
4
|
-
export declare const storyDatePickerArgTypes: Partial<ArgTypes<DatePickerProps>>;
|
|
5
|
-
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
6
|
-
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
7
|
-
$$bindings?: Bindings;
|
|
8
|
-
} & Exports;
|
|
9
|
-
(internal: unknown, props: {
|
|
10
|
-
$$events?: Events;
|
|
11
|
-
$$slots?: Slots;
|
|
12
|
-
}): Exports & {
|
|
13
|
-
$set?: any;
|
|
14
|
-
$on?: any;
|
|
15
|
-
};
|
|
16
|
-
z_$$bindings?: Bindings;
|
|
17
|
-
}
|
|
18
|
-
declare const DatePicker: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
19
|
-
[evt: string]: CustomEvent<any>;
|
|
20
|
-
}, {}, {}, string>;
|
|
21
|
-
type DatePicker = InstanceType<typeof DatePicker>;
|
|
22
|
-
export default DatePicker;
|
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
<script module lang="ts">
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import Calendar from './Calendar.svelte';
|
|
4
|
-
import type { CalendarProps } from './Calendar.svelte';
|
|
5
|
-
import type { ArgTypes } from 'storybook/internal/csf';
|
|
6
|
-
import { CalendarDate, type DateValue } from '@internationalized/date';
|
|
7
|
-
import {
|
|
8
|
-
cardColorOptions,
|
|
9
|
-
componentRoundnessOptions,
|
|
10
|
-
ComponentShadowOptions,
|
|
11
|
-
componentThemeColorsOptions,
|
|
12
|
-
componentVariantOptions,
|
|
13
|
-
Theme,
|
|
14
|
-
} from '@flightlesslabs/dodo-ui';
|
|
15
|
-
|
|
16
|
-
const description = `
|
|
17
|
-
a plug and play Calendar component based on bits-ui [calendar](https://bits-ui.com/docs/components/calendar).
|
|
18
|
-
|
|
19
|
-
\`\`\`ts
|
|
20
|
-
import { Calendar } from '@flightlesslabs/dodo-ui-date';
|
|
21
|
-
\`\`\`
|
|
22
|
-
`;
|
|
23
|
-
|
|
24
|
-
// ------------------------------
|
|
25
|
-
// Storybook ArgTypes
|
|
26
|
-
// ------------------------------
|
|
27
|
-
export const storyCalendarArgTypes: Partial<ArgTypes<CalendarProps>> = {
|
|
28
|
-
// ------------------------------
|
|
29
|
-
// Core
|
|
30
|
-
// ------------------------------
|
|
31
|
-
class: { table: { category: 'API', subcategory: 'Base' } },
|
|
32
|
-
value: {
|
|
33
|
-
control: { type: 'text' },
|
|
34
|
-
table: { category: 'API', subcategory: 'Base' },
|
|
35
|
-
},
|
|
36
|
-
|
|
37
|
-
// ------------------------------
|
|
38
|
-
// State
|
|
39
|
-
// ------------------------------
|
|
40
|
-
disabled: {
|
|
41
|
-
control: { type: 'boolean' },
|
|
42
|
-
description: 'Disabled state of the input',
|
|
43
|
-
table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
|
|
44
|
-
},
|
|
45
|
-
|
|
46
|
-
// ------------------------------
|
|
47
|
-
// Appearance
|
|
48
|
-
// ------------------------------
|
|
49
|
-
shadow: {
|
|
50
|
-
control: { type: 'select' },
|
|
51
|
-
options: ComponentShadowOptions,
|
|
52
|
-
description: 'Component Shadow',
|
|
53
|
-
table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: '1' } },
|
|
54
|
-
},
|
|
55
|
-
color: {
|
|
56
|
-
control: { type: 'select' },
|
|
57
|
-
options: cardColorOptions,
|
|
58
|
-
description: 'Color theme token',
|
|
59
|
-
table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'default' } },
|
|
60
|
-
},
|
|
61
|
-
variant: {
|
|
62
|
-
control: { type: 'select' },
|
|
63
|
-
options: componentVariantOptions,
|
|
64
|
-
description: 'Visual variant of the card',
|
|
65
|
-
table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'text' } },
|
|
66
|
-
},
|
|
67
|
-
roundness: {
|
|
68
|
-
control: { type: 'select' },
|
|
69
|
-
options: componentRoundnessOptions,
|
|
70
|
-
description: 'Border radius token',
|
|
71
|
-
table: { category: 'API', subcategory: 'Appearance' },
|
|
72
|
-
},
|
|
73
|
-
outline: {
|
|
74
|
-
control: { type: 'boolean' },
|
|
75
|
-
description: 'Render outlined style',
|
|
76
|
-
table: { category: 'API', subcategory: 'Appearance' },
|
|
77
|
-
},
|
|
78
|
-
active: {
|
|
79
|
-
control: { type: 'boolean' },
|
|
80
|
-
description: 'Add mouse hover and active effects',
|
|
81
|
-
table: { category: 'API', subcategory: 'Appearance' },
|
|
82
|
-
},
|
|
83
|
-
theme: {
|
|
84
|
-
control: { type: 'select' },
|
|
85
|
-
options: componentThemeColorsOptions,
|
|
86
|
-
description: 'Theme color',
|
|
87
|
-
table: { category: 'API', subcategory: 'Base', defaultValue: { summary: 'undefined' } },
|
|
88
|
-
},
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
// ------------------------------
|
|
92
|
-
// Storybook Meta
|
|
93
|
-
// ------------------------------
|
|
94
|
-
const { Story } = defineMeta({
|
|
95
|
-
component: Calendar,
|
|
96
|
-
tags: ['autodocs'],
|
|
97
|
-
argTypes: storyCalendarArgTypes,
|
|
98
|
-
parameters: {
|
|
99
|
-
docs: {
|
|
100
|
-
description: {
|
|
101
|
-
component: description,
|
|
102
|
-
},
|
|
103
|
-
},
|
|
104
|
-
},
|
|
105
|
-
});
|
|
106
|
-
|
|
107
|
-
let myValue = $state<DateValue>(new CalendarDate(2026, 4, 7));
|
|
108
|
-
</script>
|
|
109
|
-
|
|
110
|
-
<!-- ------------------------------ -->
|
|
111
|
-
<!-- Stories -->
|
|
112
|
-
<!-- ------------------------------ -->
|
|
113
|
-
|
|
114
|
-
<Story name="Default" />
|
|
115
|
-
|
|
116
|
-
<Story name="Controlled" asChild>
|
|
117
|
-
<Calendar bind:value={myValue} />
|
|
118
|
-
</Story>
|
|
119
|
-
|
|
120
|
-
<Story name="Starts On Sunday" args={{ weekStartsOn: 0 }} />
|
|
121
|
-
|
|
122
|
-
<Story name="Min Date" args={{ minValue: new CalendarDate(2026, 4, 7) }} />
|
|
123
|
-
|
|
124
|
-
<Story name="Max Date" args={{ maxValue: new CalendarDate(2026, 4, 7) }} />
|
|
125
|
-
|
|
126
|
-
<Story name="Light Theme" asChild>
|
|
127
|
-
<Theme type="light">
|
|
128
|
-
<Calendar />
|
|
129
|
-
</Theme>
|
|
130
|
-
</Story>
|
|
131
|
-
|
|
132
|
-
<Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
|
|
133
|
-
<Theme type="dark">
|
|
134
|
-
<Calendar />
|
|
135
|
-
</Theme>
|
|
136
|
-
</Story>
|
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
<script module lang="ts">
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import DatePicker from './DatePicker.svelte';
|
|
4
|
-
import type { DatePickerProps } from './DatePicker.svelte';
|
|
5
|
-
import type { ArgTypes } from 'storybook/internal/csf';
|
|
6
|
-
import { CalendarDate, type DateValue } from '@internationalized/date';
|
|
7
|
-
import { componentSizeOptions, componentRoundnessOptions, Theme } from '@flightlesslabs/dodo-ui';
|
|
8
|
-
|
|
9
|
-
const description = `
|
|
10
|
-
A sleek, plug and play Date Picker based on bits-ui [date-picker](https://bits-ui.com/docs/components/date-picker).
|
|
11
|
-
\`\`\`ts
|
|
12
|
-
import { DatePicker } from '@flightlesslabs/dodo-ui-date';
|
|
13
|
-
|
|
14
|
-
import { CalendarDate, type DateValue } from '@internationalized/date';
|
|
15
|
-
\`\`\`
|
|
16
|
-
`;
|
|
17
|
-
|
|
18
|
-
// ------------------------------
|
|
19
|
-
// Storybook ArgTypes
|
|
20
|
-
// ------------------------------
|
|
21
|
-
export const storyDatePickerArgTypes: Partial<ArgTypes<DatePickerProps>> = {
|
|
22
|
-
// ------------------------------
|
|
23
|
-
// Core
|
|
24
|
-
// ------------------------------
|
|
25
|
-
class: { table: { category: 'API', subcategory: 'Base' } },
|
|
26
|
-
value: {
|
|
27
|
-
control: { type: 'text' },
|
|
28
|
-
table: { category: 'API', subcategory: 'Base' },
|
|
29
|
-
},
|
|
30
|
-
dateFormat: {
|
|
31
|
-
control: { type: 'text' },
|
|
32
|
-
table: { category: 'API', subcategory: 'Base', defaultValue: { summary: 'dd/mm/yyyy' } },
|
|
33
|
-
},
|
|
34
|
-
|
|
35
|
-
// ------------------------------
|
|
36
|
-
// State
|
|
37
|
-
// ------------------------------
|
|
38
|
-
disabled: {
|
|
39
|
-
control: { type: 'boolean' },
|
|
40
|
-
description: 'Disabled state of the input',
|
|
41
|
-
table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
|
|
42
|
-
},
|
|
43
|
-
focused: {
|
|
44
|
-
control: { type: 'boolean' },
|
|
45
|
-
description: 'Force focused visual state',
|
|
46
|
-
table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
|
|
47
|
-
},
|
|
48
|
-
error: {
|
|
49
|
-
control: { type: 'boolean' },
|
|
50
|
-
description: 'Error visual state',
|
|
51
|
-
table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
|
|
52
|
-
},
|
|
53
|
-
|
|
54
|
-
// ------------------------------
|
|
55
|
-
// Appearance
|
|
56
|
-
// ------------------------------
|
|
57
|
-
size: {
|
|
58
|
-
control: { type: 'select' },
|
|
59
|
-
options: componentSizeOptions,
|
|
60
|
-
description: 'Visual size token',
|
|
61
|
-
table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'normal' } },
|
|
62
|
-
},
|
|
63
|
-
roundness: {
|
|
64
|
-
control: { type: 'select' },
|
|
65
|
-
options: componentRoundnessOptions,
|
|
66
|
-
description: 'Border radius token',
|
|
67
|
-
table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: '1' } },
|
|
68
|
-
},
|
|
69
|
-
outline: {
|
|
70
|
-
control: { type: 'boolean' },
|
|
71
|
-
description: 'Render outlined enclosure',
|
|
72
|
-
table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'true' } },
|
|
73
|
-
},
|
|
74
|
-
|
|
75
|
-
// ------------------------------
|
|
76
|
-
// Slots (Snippets)
|
|
77
|
-
// ------------------------------
|
|
78
|
-
before: {
|
|
79
|
-
table: { category: 'API', subcategory: 'Slots' },
|
|
80
|
-
description: 'Content rendered before the input',
|
|
81
|
-
},
|
|
82
|
-
after: {
|
|
83
|
-
table: { category: 'API', subcategory: 'Slots' },
|
|
84
|
-
description: 'Content rendered after the input',
|
|
85
|
-
},
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
// ------------------------------
|
|
89
|
-
// Storybook Meta
|
|
90
|
-
// ------------------------------
|
|
91
|
-
const { Story } = defineMeta({
|
|
92
|
-
component: DatePicker,
|
|
93
|
-
tags: ['autodocs'],
|
|
94
|
-
argTypes: storyDatePickerArgTypes,
|
|
95
|
-
parameters: {
|
|
96
|
-
docs: {
|
|
97
|
-
description: {
|
|
98
|
-
component: description,
|
|
99
|
-
},
|
|
100
|
-
story: { height: '420px' },
|
|
101
|
-
},
|
|
102
|
-
},
|
|
103
|
-
});
|
|
104
|
-
|
|
105
|
-
let myValue = $state<DateValue>(new CalendarDate(2026, 4, 7));
|
|
106
|
-
</script>
|
|
107
|
-
|
|
108
|
-
<!-- ------------------------------ -->
|
|
109
|
-
<!-- Stories -->
|
|
110
|
-
<!-- ------------------------------ -->
|
|
111
|
-
|
|
112
|
-
<Story name="Default" />
|
|
113
|
-
|
|
114
|
-
<Story name="Controlled" asChild>
|
|
115
|
-
<DatePicker bind:value={myValue} />
|
|
116
|
-
</Story>
|
|
117
|
-
|
|
118
|
-
<Story name="Starts On Sunday" args={{ weekStartsOn: 0 }} />
|
|
119
|
-
|
|
120
|
-
<Story name="Date Format" args={{ dateFormat: 'mm/dd/yyyy' }} />
|
|
121
|
-
|
|
122
|
-
<Story name="Min Date" args={{ minValue: new CalendarDate(2026, 4, 7) }} />
|
|
123
|
-
|
|
124
|
-
<Story name="Max Date" args={{ maxValue: new CalendarDate(2026, 4, 7) }} />
|
|
125
|
-
|
|
126
|
-
<Story name="Light Theme" asChild>
|
|
127
|
-
<Theme type="light">
|
|
128
|
-
<DatePicker />
|
|
129
|
-
</Theme>
|
|
130
|
-
</Story>
|
|
131
|
-
|
|
132
|
-
<Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
|
|
133
|
-
<Theme type="dark">
|
|
134
|
-
<DatePicker />
|
|
135
|
-
</Theme>
|
|
136
|
-
</Story>
|