@flightlesslabs/dodo-ui 0.21.0 โ 0.22.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/dist/Home.mdx +25 -36
- package/dist/components/Form/Button/Button.stories.svelte +33 -23
- package/dist/components/Form/Button/Button.svelte +0 -25
- package/dist/components/Form/Button/Button.svelte.d.ts +0 -16
- package/dist/components/Form/Checkbox/Checkbox.stories.svelte +25 -16
- package/dist/components/Form/Checkbox/Checkbox.svelte +0 -3
- package/dist/components/Form/DatePicker/DatePicker.stories.svelte +26 -2
- package/dist/components/Form/DatePicker/DatePickerPopup/DatePickerPopup.svelte +1 -1
- package/dist/components/Form/FormField/FormField.stories.svelte +15 -10
- package/dist/components/Form/FormField/FormField.svelte +0 -3
- package/dist/components/Form/InputEnclosure/InputEnclosure.stories.svelte +21 -7
- package/dist/components/Form/InputEnclosure/InputEnclosure.svelte +0 -21
- package/dist/components/Form/InputEnclosure/InputEnclosure.svelte.d.ts +0 -12
- package/dist/components/Form/Select/Select.stories.svelte +18 -3
- package/dist/components/Form/Select/Select.svelte +0 -6
- package/dist/components/Form/Select/Select.svelte.d.ts +0 -6
- package/dist/components/Form/Switch/Switch.stories.svelte +17 -8
- package/dist/components/Form/TextInput/TextInput.stories.svelte +19 -16
- package/dist/components/Form/TextInput/TextInput.svelte +0 -3
- package/dist/components/Form/UtilityButton/UtilityButton.stories.svelte +42 -33
- package/dist/components/Form/UtilityButton/UtilityButton.svelte +0 -36
- package/dist/components/Form/UtilityButton/UtilityButton.svelte.d.ts +0 -27
- package/dist/components/Info/Calendar/Calendar.scss +20 -10
- package/dist/components/Info/Calendar/Calendar.stories.svelte +22 -1
- package/dist/components/Layout/Card/Card.stories.svelte +17 -2
- package/dist/components/Layout/Card/Card.svelte +1 -1
- package/dist/components/Layout/Card/Card.svelte.d.ts +1 -1
- package/dist/components/Layout/Grid/Column/Column.scss +78 -0
- package/dist/components/Layout/Grid/Column/Column.stories.svelte +66 -0
- package/dist/components/Layout/Grid/Column/Column.stories.svelte.d.ts +22 -0
- package/dist/components/Layout/Grid/Column/Column.svelte +79 -0
- package/dist/components/Layout/Grid/Column/Column.svelte.d.ts +33 -0
- package/dist/components/Layout/Grid/Grid.scss +8 -0
- package/dist/components/Layout/Grid/Grid.stories.svelte +192 -0
- package/dist/components/Layout/Grid/Grid.stories.svelte.d.ts +22 -0
- package/dist/components/Layout/Grid/Grid.svelte +32 -0
- package/dist/components/Layout/Grid/Grid.svelte.d.ts +12 -0
- package/dist/components/Layout/Grid/Row/Row.scss +7 -0
- package/dist/components/Layout/Grid/Row/Row.stories.svelte +39 -0
- package/dist/components/Layout/Grid/Row/Row.stories.svelte.d.ts +22 -0
- package/dist/components/Layout/Grid/Row/Row.svelte +21 -0
- package/dist/components/Layout/Grid/Row/Row.svelte.d.ts +10 -0
- package/dist/components/Layout/Theme/Theme.stories.svelte +16 -2
- package/dist/components/Layout/Theme/ThemeSystem/index.mdx +8 -26
- package/dist/index.d.ts +6 -0
- package/dist/index.js +6 -0
- package/dist/styles/components.css +468 -6
- package/dist/styles/components.css.map +1 -1
- package/dist/styles/components.scss +3 -0
- package/dist/utils/time/date-creator/createDate/createDate.mdx +13 -38
- package/dist/utils/time/date-creator/createDateFactory/createDateFactory.mdx +11 -34
- package/dist/utils/time/timeout/timeout.mdx +19 -39
- package/package.json +1 -1
- package/src/lib/Home.mdx +25 -36
- package/src/lib/components/Form/Button/Button.stories.svelte +33 -23
- package/src/lib/components/Form/Button/Button.svelte +0 -25
- package/src/lib/components/Form/Checkbox/Checkbox.stories.svelte +25 -16
- package/src/lib/components/Form/Checkbox/Checkbox.svelte +0 -3
- package/src/lib/components/Form/DatePicker/DatePicker.stories.svelte +26 -2
- package/src/lib/components/Form/DatePicker/DatePickerPopup/DatePickerPopup.svelte +1 -1
- package/src/lib/components/Form/FormField/FormField.stories.svelte +15 -10
- package/src/lib/components/Form/FormField/FormField.svelte +0 -3
- package/src/lib/components/Form/InputEnclosure/InputEnclosure.stories.svelte +21 -7
- package/src/lib/components/Form/InputEnclosure/InputEnclosure.svelte +0 -21
- package/src/lib/components/Form/Select/Select.stories.svelte +18 -3
- package/src/lib/components/Form/Select/Select.svelte +0 -6
- package/src/lib/components/Form/Switch/Switch.stories.svelte +17 -8
- package/src/lib/components/Form/TextInput/TextInput.stories.svelte +19 -16
- package/src/lib/components/Form/TextInput/TextInput.svelte +0 -3
- package/src/lib/components/Form/UtilityButton/UtilityButton.stories.svelte +42 -33
- package/src/lib/components/Form/UtilityButton/UtilityButton.svelte +0 -36
- package/src/lib/components/Info/Calendar/Calendar.scss +20 -10
- package/src/lib/components/Info/Calendar/Calendar.stories.svelte +22 -1
- package/src/lib/components/Layout/Card/Card.stories.svelte +17 -2
- package/src/lib/components/Layout/Card/Card.svelte +1 -1
- package/src/lib/components/Layout/Grid/Column/Column.scss +78 -0
- package/src/lib/components/Layout/Grid/Column/Column.stories.svelte +66 -0
- package/src/lib/components/Layout/Grid/Column/Column.svelte +79 -0
- package/src/lib/components/Layout/Grid/Grid.scss +8 -0
- package/src/lib/components/Layout/Grid/Grid.stories.svelte +192 -0
- package/src/lib/components/Layout/Grid/Grid.svelte +32 -0
- package/src/lib/components/Layout/Grid/Row/Row.scss +7 -0
- package/src/lib/components/Layout/Grid/Row/Row.stories.svelte +39 -0
- package/src/lib/components/Layout/Grid/Row/Row.svelte +21 -0
- package/src/lib/components/Layout/Theme/Theme.stories.svelte +16 -2
- package/src/lib/components/Layout/Theme/ThemeSystem/index.mdx +8 -26
- package/src/lib/index.ts +17 -0
- package/src/lib/styles/components.scss +3 -0
- package/src/lib/utils/time/date-creator/createDate/createDate.mdx +13 -38
- package/src/lib/utils/time/date-creator/createDateFactory/createDateFactory.mdx +11 -34
- package/src/lib/utils/time/timeout/timeout.mdx +19 -39
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { Source } from '@storybook/addon-docs/blocks';
|
|
2
|
-
|
|
3
1
|
# createDate
|
|
4
2
|
|
|
5
3
|
A centralized date factory built on top of `dayjs`.
|
|
@@ -8,78 +6,55 @@ This utility ensures **consistent parsing, timezone handling, and validation** a
|
|
|
8
6
|
|
|
9
7
|
## ๐ฆ Import
|
|
10
8
|
|
|
11
|
-
|
|
12
|
-
dark
|
|
13
|
-
language="ts"
|
|
14
|
-
code={`
|
|
9
|
+
```ts
|
|
15
10
|
import { createDate } from '@flightlesslabs/dodo-ui';
|
|
16
|
-
|
|
17
|
-
/>
|
|
11
|
+
```
|
|
18
12
|
|
|
19
13
|
## ๐ Basic Usage
|
|
20
14
|
|
|
21
15
|
### Current Date
|
|
22
16
|
|
|
23
|
-
|
|
24
|
-
dark
|
|
25
|
-
language="ts"
|
|
26
|
-
code={`
|
|
17
|
+
```ts
|
|
27
18
|
const now = createDate();
|
|
28
19
|
console.log(now.format());
|
|
29
|
-
|
|
30
|
-
|
|
20
|
+
```
|
|
21
|
+
|
|
31
22
|
|
|
32
23
|
### Parse a Date
|
|
33
24
|
|
|
34
|
-
|
|
35
|
-
dark
|
|
36
|
-
language="ts"
|
|
37
|
-
code={`
|
|
25
|
+
```ts
|
|
38
26
|
const date = createDate("01-02-2025", "DD-MM-YYYY");
|
|
39
27
|
console.log(date.format());
|
|
40
|
-
|
|
41
|
-
/>
|
|
28
|
+
```
|
|
42
29
|
|
|
43
30
|
## ๐ Timezone & UTC
|
|
44
31
|
|
|
45
32
|
### UTC Mode
|
|
46
33
|
|
|
47
|
-
|
|
48
|
-
dark
|
|
49
|
-
language="ts"
|
|
50
|
-
code={`
|
|
34
|
+
```ts
|
|
51
35
|
const utcDate = createDate("2025-01-01T12:00:00Z", undefined, {
|
|
52
36
|
utc: true,
|
|
53
37
|
});
|
|
54
|
-
|
|
55
|
-
/>
|
|
38
|
+
```
|
|
56
39
|
|
|
57
40
|
### Timezone Conversion
|
|
58
41
|
|
|
59
|
-
|
|
60
|
-
dark
|
|
61
|
-
language="ts"
|
|
62
|
-
code={`
|
|
42
|
+
```ts
|
|
63
43
|
const indiaTime = createDate("01-01-2025", "DD-MM-YYYY", {
|
|
64
44
|
timezone: "Asia/Kolkata",
|
|
65
45
|
});
|
|
66
|
-
|
|
67
|
-
/>
|
|
46
|
+
```
|
|
68
47
|
|
|
69
48
|
## โ๏ธ Options
|
|
70
49
|
|
|
71
|
-
|
|
72
|
-
dark
|
|
73
|
-
language="ts"
|
|
74
|
-
code={`
|
|
50
|
+
```ts
|
|
75
51
|
interface CreateDateOptions {
|
|
76
52
|
timezone?: string;
|
|
77
53
|
utc?: boolean;
|
|
78
54
|
strict?: boolean;
|
|
79
55
|
throwOnInvalid?: boolean;
|
|
80
56
|
}
|
|
81
|
-
|
|
82
|
-
/>
|
|
57
|
+
```
|
|
83
58
|
|
|
84
59
|
## ๐ Behavior Priority
|
|
85
60
|
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { Source } from '@storybook/addon-docs/blocks';
|
|
2
|
-
|
|
3
1
|
# createDateFactory
|
|
4
2
|
|
|
5
3
|
A **factory function** that creates a `createDate` utility with an optional custom `dayjs` instance.
|
|
@@ -15,13 +13,9 @@ This allows advanced users to:
|
|
|
15
13
|
|
|
16
14
|
## ๐ฆ Import
|
|
17
15
|
|
|
18
|
-
|
|
19
|
-
dark
|
|
20
|
-
language="ts"
|
|
21
|
-
code={`
|
|
16
|
+
```ts
|
|
22
17
|
import { createDateFactory } from '@flightlesslabs/dodo-ui';
|
|
23
|
-
|
|
24
|
-
/>
|
|
18
|
+
```
|
|
25
19
|
|
|
26
20
|
---
|
|
27
21
|
|
|
@@ -29,18 +23,14 @@ import { createDateFactory } from '@flightlesslabs/dodo-ui';
|
|
|
29
23
|
|
|
30
24
|
### Default Factory
|
|
31
25
|
|
|
32
|
-
|
|
33
|
-
dark
|
|
34
|
-
language="ts"
|
|
35
|
-
code={`
|
|
26
|
+
```ts
|
|
36
27
|
import { createDateFactory } from '@flightlesslabs/dodo-ui';
|
|
37
28
|
|
|
38
29
|
const { createDate } = createDateFactory();
|
|
39
30
|
|
|
40
31
|
const now = createDate();
|
|
41
32
|
console.log(now.format());
|
|
42
|
-
|
|
43
|
-
/>
|
|
33
|
+
```
|
|
44
34
|
|
|
45
35
|
---
|
|
46
36
|
|
|
@@ -59,10 +49,7 @@ Instead of relying on global `dayjs.extend`, you can:
|
|
|
59
49
|
|
|
60
50
|
### Inject your own configured instance
|
|
61
51
|
|
|
62
|
-
|
|
63
|
-
dark
|
|
64
|
-
language="ts"
|
|
65
|
-
code={`
|
|
52
|
+
```ts
|
|
66
53
|
import dayjs from 'dayjs';
|
|
67
54
|
import utc from 'dayjs/plugin/utc';
|
|
68
55
|
import timezone from 'dayjs/plugin/timezone';
|
|
@@ -73,8 +60,7 @@ dayjs.extend(timezone);
|
|
|
73
60
|
const { createDate } = createDateFactory(dayjs);
|
|
74
61
|
|
|
75
62
|
const date = createDate("2025-01-01", "YYYY-MM-DD");
|
|
76
|
-
|
|
77
|
-
/>
|
|
63
|
+
```
|
|
78
64
|
|
|
79
65
|
---
|
|
80
66
|
|
|
@@ -99,29 +85,20 @@ The factory wraps your `dayjs` instance and preserves:
|
|
|
99
85
|
|
|
100
86
|
## ๐ฅ Returned API
|
|
101
87
|
|
|
102
|
-
|
|
103
|
-
dark
|
|
104
|
-
language="ts"
|
|
105
|
-
code={`
|
|
88
|
+
```ts
|
|
106
89
|
{
|
|
107
90
|
createDate: Function,
|
|
108
91
|
dayjs: DayjsInstance
|
|
109
92
|
}
|
|
110
|
-
|
|
111
|
-
/>
|
|
112
|
-
|
|
113
|
-
---
|
|
93
|
+
```
|
|
114
94
|
|
|
115
95
|
## ๐งช Example: Multiple Factories
|
|
116
96
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
language="ts"
|
|
120
|
-
code={`
|
|
97
|
+
|
|
98
|
+
```ts
|
|
121
99
|
const factoryA = createDateFactory(dayjsA);
|
|
122
100
|
const factoryB = createDateFactory(dayjsB);
|
|
123
101
|
|
|
124
102
|
factoryA.createDate("2025-01-01");
|
|
125
103
|
factoryB.createDate("2025-01-01");
|
|
126
|
-
|
|
127
|
-
/>
|
|
104
|
+
```
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { Source } from '@storybook/addon-docs/blocks';
|
|
2
|
-
|
|
3
1
|
# timeout
|
|
4
2
|
|
|
5
3
|
A simple utility to delay execution using Promises.
|
|
@@ -10,25 +8,19 @@ Useful for **pausing async workflows**, **simulating delays**, or **controlling
|
|
|
10
8
|
|
|
11
9
|
## ๐ฆ Import
|
|
12
10
|
|
|
13
|
-
|
|
14
|
-
dark
|
|
15
|
-
language="ts"
|
|
16
|
-
code={`
|
|
11
|
+
```ts
|
|
17
12
|
import { timeout } from '@flightlesslabs/dodo-ui';
|
|
18
|
-
|
|
19
|
-
/>
|
|
13
|
+
```
|
|
20
14
|
|
|
21
15
|
---
|
|
22
16
|
|
|
23
17
|
## ๐ Basic Usage
|
|
24
18
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
code={`
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
```ts
|
|
29
22
|
await timeout(1000); // waits 1 second
|
|
30
|
-
|
|
31
|
-
/>
|
|
23
|
+
```
|
|
32
24
|
|
|
33
25
|
---
|
|
34
26
|
|
|
@@ -36,30 +28,22 @@ await timeout(1000); // waits 1 second
|
|
|
36
28
|
|
|
37
29
|
You can optionally pass a value that will be returned after the delay.
|
|
38
30
|
|
|
39
|
-
|
|
40
|
-
dark
|
|
41
|
-
language="ts"
|
|
42
|
-
code={`
|
|
31
|
+
```ts
|
|
43
32
|
const result = await timeout(500, "done");
|
|
44
33
|
|
|
45
34
|
console.log(result); // "done"
|
|
46
|
-
|
|
47
|
-
/>
|
|
35
|
+
```
|
|
48
36
|
|
|
49
37
|
---
|
|
50
38
|
|
|
51
39
|
## โ๏ธ API
|
|
52
40
|
|
|
53
|
-
|
|
54
|
-
dark
|
|
55
|
-
language="ts"
|
|
56
|
-
code={`
|
|
41
|
+
```ts
|
|
57
42
|
function timeout<T = void>(
|
|
58
43
|
milliseconds: number,
|
|
59
44
|
value?: T
|
|
60
45
|
): Promise<T>
|
|
61
|
-
|
|
62
|
-
/>
|
|
46
|
+
```
|
|
63
47
|
|
|
64
48
|
---
|
|
65
49
|
|
|
@@ -81,13 +65,9 @@ function timeout<T = void>(
|
|
|
81
65
|
|
|
82
66
|
If a negative duration is provided, the promise will reject:
|
|
83
67
|
|
|
84
|
-
|
|
85
|
-
dark
|
|
86
|
-
language="ts"
|
|
87
|
-
code={`
|
|
68
|
+
```ts
|
|
88
69
|
await timeout(-1); // โ throws Error
|
|
89
|
-
|
|
90
|
-
/>
|
|
70
|
+
```
|
|
91
71
|
|
|
92
72
|
---
|
|
93
73
|
|
|
@@ -103,10 +83,7 @@ await timeout(-1); // โ throws Error
|
|
|
103
83
|
|
|
104
84
|
### Async Flow
|
|
105
85
|
|
|
106
|
-
|
|
107
|
-
dark
|
|
108
|
-
language="ts"
|
|
109
|
-
code={`
|
|
86
|
+
```ts
|
|
110
87
|
async function run() {
|
|
111
88
|
console.log("Start");
|
|
112
89
|
|
|
@@ -114,8 +91,7 @@ await timeout(1000);
|
|
|
114
91
|
|
|
115
92
|
console.log("End");
|
|
116
93
|
}
|
|
117
|
-
|
|
118
|
-
/>
|
|
94
|
+
```
|
|
119
95
|
|
|
120
96
|
---
|
|
121
97
|
|
|
@@ -131,4 +107,8 @@ console.log(data.success); // true
|
|
|
131
107
|
`}
|
|
132
108
|
/>
|
|
133
109
|
|
|
134
|
-
|
|
110
|
+
```ts
|
|
111
|
+
const data = await timeout(300, { success: true });
|
|
112
|
+
|
|
113
|
+
console.log(data.success); // true
|
|
114
|
+
```
|