@flightlesslabs/dodo-ui 0.13.0 → 0.14.0

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.
Files changed (186) hide show
  1. package/dist/index.d.ts +3 -0
  2. package/dist/index.js +2 -0
  3. package/dist/stories/components/Form/Button/Button.svelte +1 -1
  4. package/dist/stories/components/Form/Button/Button.svelte.d.ts +1 -1
  5. package/{src/lib/stories/components/Form/RangeSlider → dist/stories/components/Form/Toggle}/Color/Color.stories.svelte +4 -4
  6. package/dist/stories/components/Form/Toggle/Color/Color.stories.svelte.d.ts +26 -0
  7. package/dist/stories/components/Form/Toggle/Events/Events.stories.svelte +35 -0
  8. package/dist/stories/components/Form/Toggle/Events/Events.stories.svelte.d.ts +18 -0
  9. package/{src/lib/stories/components/Form/NumericInput → dist/stories/components/Form/Toggle}/Roundness/Roundness.stories.svelte +8 -6
  10. package/dist/stories/components/Form/Toggle/Roundness/Roundness.stories.svelte.d.ts +26 -0
  11. package/{src/lib/stories/components/Form/RangeSlider → dist/stories/components/Form/Toggle}/Size/Size.stories.svelte +4 -4
  12. package/dist/stories/components/Form/Toggle/Size/Size.stories.svelte.d.ts +26 -0
  13. package/dist/stories/components/Form/Toggle/Toggle.stories.svelte +37 -0
  14. package/dist/stories/components/Form/Toggle/Toggle.stories.svelte.d.ts +21 -0
  15. package/dist/stories/components/Form/Toggle/Toggle.svelte +369 -0
  16. package/dist/stories/components/Form/Toggle/Toggle.svelte.d.ts +34 -0
  17. package/dist/stories/components/Form/Toggle/utils/scss/mixins.scss +81 -0
  18. package/package.json +15 -13
  19. package/src/lib/index.ts +4 -0
  20. package/src/lib/stories/components/Form/Button/Button.svelte +2 -2
  21. package/src/lib/stories/components/Form/Toggle/Toggle.svelte +262 -0
  22. package/src/lib/stories/components/Form/Toggle/utils/scss/mixins.scss +81 -0
  23. package/src/lib/stories/Home.mdx +0 -59
  24. package/src/lib/stories/assets/dark-theme-toggle.png +0 -0
  25. package/src/lib/stories/components/Form/Button/Button.stories.svelte +0 -61
  26. package/src/lib/stories/components/Form/Button/Color/Color.stories.svelte +0 -43
  27. package/src/lib/stories/components/Form/Button/Events/Events.stories.svelte +0 -36
  28. package/src/lib/stories/components/Form/Button/IconButton/IconButton.stories.svelte +0 -43
  29. package/src/lib/stories/components/Form/Button/Roundness/Roundness.stories.svelte +0 -23
  30. package/src/lib/stories/components/Form/Button/Size/Size.stories.svelte +0 -16
  31. package/src/lib/stories/components/Form/Button/Variant/Variant.stories.svelte +0 -18
  32. package/src/lib/stories/components/Form/DatePicker/Color/Color.stories.svelte +0 -47
  33. package/src/lib/stories/components/Form/DatePicker/Controls/Controls.stories.svelte +0 -58
  34. package/src/lib/stories/components/Form/DatePicker/Customize/Customize.stories.svelte +0 -167
  35. package/src/lib/stories/components/Form/DatePicker/DatePicker.stories.svelte +0 -107
  36. package/src/lib/stories/components/Form/DatePicker/Events/Events.stories.svelte +0 -147
  37. package/src/lib/stories/components/Form/DatePicker/FilterDates/FilterDates.stories.svelte +0 -61
  38. package/src/lib/stories/components/Form/DatePicker/Positions/AutoPosition/AutoPosition.stories.svelte +0 -46
  39. package/src/lib/stories/components/Form/DatePicker/Positions/Positions.stories.svelte +0 -57
  40. package/src/lib/stories/components/Form/DatePicker/Roundness/Roundness.stories.svelte +0 -38
  41. package/src/lib/stories/components/Form/DatePicker/Size/Size.stories.svelte +0 -41
  42. package/src/lib/stories/components/Form/DatePicker/WithIcon/WithIcon.stories.svelte +0 -41
  43. package/src/lib/stories/components/Form/FormControl/FormControl.stories.svelte +0 -28
  44. package/src/lib/stories/components/Form/Label/Label.stories.svelte +0 -13
  45. package/src/lib/stories/components/Form/Message/Color/Color.stories.svelte +0 -36
  46. package/src/lib/stories/components/Form/Message/Message.stories.svelte +0 -27
  47. package/src/lib/stories/components/Form/Message/Size/Size.stories.svelte +0 -22
  48. package/src/lib/stories/components/Form/NumericInput/Events/Events.stories.svelte +0 -134
  49. package/src/lib/stories/components/Form/NumericInput/NumericInput.stories.svelte +0 -84
  50. package/src/lib/stories/components/Form/NumericInput/Size/Size.stories.svelte +0 -16
  51. package/src/lib/stories/components/Form/NumericInput/Validation/Validation.stories.svelte +0 -87
  52. package/src/lib/stories/components/Form/NumericInput/WithIcon/WithIcon.stories.svelte +0 -31
  53. package/src/lib/stories/components/Form/PasswordInput/Events/Events.stories.svelte +0 -132
  54. package/src/lib/stories/components/Form/PasswordInput/PasswordInput.stories.svelte +0 -58
  55. package/src/lib/stories/components/Form/PasswordInput/Roundness/Roundness.stories.svelte +0 -20
  56. package/src/lib/stories/components/Form/PasswordInput/Size/Size.stories.svelte +0 -16
  57. package/src/lib/stories/components/Form/PasswordInput/WithIcon/WithIcon.stories.svelte +0 -31
  58. package/src/lib/stories/components/Form/RangeSlider/Events/Events.stories.svelte +0 -63
  59. package/src/lib/stories/components/Form/RangeSlider/RangeSlider.stories.svelte +0 -69
  60. package/src/lib/stories/components/Form/RangeSlider/Roundness/Roundness.stories.svelte +0 -30
  61. package/src/lib/stories/components/Form/RangeSlider/WithIcon/WithIcon.stories.svelte +0 -33
  62. package/src/lib/stories/components/Form/Select/Customize/Customize.stories.svelte +0 -139
  63. package/src/lib/stories/components/Form/Select/DropDownArrow/DropDownArrow.stories.svelte +0 -63
  64. package/src/lib/stories/components/Form/Select/Events/Events.stories.svelte +0 -174
  65. package/src/lib/stories/components/Form/Select/Options/OptionFormat.mdx +0 -40
  66. package/src/lib/stories/components/Form/Select/Positions/AutoPosition/AutoPosition.stories.svelte +0 -58
  67. package/src/lib/stories/components/Form/Select/Positions/Positions.stories.svelte +0 -87
  68. package/src/lib/stories/components/Form/Select/Roundness/Roundness.stories.svelte +0 -32
  69. package/src/lib/stories/components/Form/Select/Select.stories.svelte +0 -125
  70. package/src/lib/stories/components/Form/Select/Size/Size.stories.svelte +0 -28
  71. package/src/lib/stories/components/Form/Select/WithIcon/WithIcon.stories.svelte +0 -43
  72. package/src/lib/stories/components/Form/TextInput/Events/Events.stories.svelte +0 -125
  73. package/src/lib/stories/components/Form/TextInput/Roundness/Roundness.stories.svelte +0 -21
  74. package/src/lib/stories/components/Form/TextInput/Size/Size.stories.svelte +0 -17
  75. package/src/lib/stories/components/Form/TextInput/TextInput.stories.svelte +0 -43
  76. package/src/lib/stories/components/Form/TextInput/WithIcon/WithIcon.stories.svelte +0 -47
  77. package/src/lib/stories/components/Info/Calendar/Calendar.stories.svelte +0 -121
  78. package/src/lib/stories/components/Info/Calendar/Color/Color.stories.svelte +0 -23
  79. package/src/lib/stories/components/Info/Calendar/Controls/Controls.stories.svelte +0 -26
  80. package/src/lib/stories/components/Info/Calendar/Customize/Customize.stories.svelte +0 -160
  81. package/src/lib/stories/components/Info/Calendar/Events/Events.stories.svelte +0 -122
  82. package/src/lib/stories/components/Info/Calendar/FilterDates/FilterDates.stories.svelte +0 -70
  83. package/src/lib/stories/components/Info/Calendar/Size/Size.stories.svelte +0 -20
  84. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarControls.stories.svelte +0 -36
  85. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/CalendarMonthSelector.stories.svelte +0 -58
  86. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Color/Color.stories.svelte +0 -23
  87. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Customize/Customize.stories.svelte +0 -30
  88. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Events/Events.stories.svelte +0 -25
  89. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/NameTypes/NameTypes.stories.svelte +0 -25
  90. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Roundness/Roundness.stories.svelte +0 -26
  91. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Size/Size.stories.svelte +0 -20
  92. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/CalendarNavigation.stories.svelte +0 -36
  93. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Color/Color.stories.svelte +0 -19
  94. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Customize/Customize.stories.svelte +0 -33
  95. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Events/Events.stories.svelte +0 -37
  96. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Size/Size.stories.svelte +0 -16
  97. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/CalendarYearSelector.stories.svelte +0 -58
  98. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Color/Color.stories.svelte +0 -23
  99. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Customize/Customize.stories.svelte +0 -30
  100. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Events/Events.stories.svelte +0 -25
  101. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Roundness/Roundness.stories.svelte +0 -26
  102. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Size/Size.stories.svelte +0 -20
  103. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Color/Color.stories.svelte +0 -23
  104. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Controls/Controls.stories.svelte +0 -21
  105. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Customize/Customize.stories.svelte +0 -69
  106. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Events/Events.stories.svelte +0 -61
  107. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Size/Size.stories.svelte +0 -20
  108. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/CalendarDateChip.stories.svelte +0 -75
  109. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Color/Color.stories.svelte +0 -41
  110. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Customize/Customize.stories.svelte +0 -45
  111. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Events/Events.stories.svelte +0 -28
  112. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Roundness/Roundness.stories.svelte +0 -31
  113. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Size/Size.stories.svelte +0 -24
  114. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/SpecialChips/SpecialChips.stories.svelte +0 -96
  115. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.stories.svelte +0 -104
  116. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/CalendarWeek.stories.svelte +0 -38
  117. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/Customize/Customize.stories.svelte +0 -32
  118. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/NameTypes/NameTypes.stories.svelte +0 -28
  119. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/Size/Size.stories.svelte +0 -16
  120. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Color/Color.stories.svelte +0 -23
  121. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Customize/Customize.stories.svelte +0 -68
  122. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Events/Events.stories.svelte +0 -24
  123. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Size/Size.stories.svelte +0 -20
  124. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/CalendarMonthChip.stories.svelte +0 -40
  125. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Color/Color.stories.svelte +0 -29
  126. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Customize/Customize.stories.svelte +0 -33
  127. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Events/Events.stories.svelte +0 -23
  128. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Roundness/Roundness.stories.svelte +0 -26
  129. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Size/Size.stories.svelte +0 -19
  130. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthList.stories.svelte +0 -45
  131. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Color/Color.stories.svelte +0 -22
  132. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Customize/Customize.stories.svelte +0 -36
  133. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Events/Events.stories.svelte +0 -33
  134. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Size/Size.stories.svelte +0 -19
  135. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/CalendarYearChip.stories.svelte +0 -41
  136. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Color/Color.stories.svelte +0 -30
  137. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Customize/Customize.stories.svelte +0 -33
  138. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Events/Events.stories.svelte +0 -24
  139. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Roundness/Roundness.stories.svelte +0 -27
  140. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Size/Size.stories.svelte +0 -20
  141. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearList.stories.svelte +0 -39
  142. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Color/Color.stories.svelte +0 -23
  143. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Customize/Customize.stories.svelte +0 -36
  144. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Events/Events.stories.svelte +0 -24
  145. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Size/Size.stories.svelte +0 -20
  146. package/src/lib/stories/components/Info/Calendar/utils/createDateOfMonth/index.mdx +0 -121
  147. package/src/lib/stories/components/Info/Calendar/utils/getDatesOfMonth/index.mdx +0 -37
  148. package/src/lib/stories/components/Layout/Menu/DynamicMenu/Customize/Customize.stories.svelte +0 -30
  149. package/src/lib/stories/components/Layout/Menu/DynamicMenu/DynamicMenu.stories.svelte +0 -56
  150. package/src/lib/stories/components/Layout/Menu/DynamicMenu/Events/Events.stories.svelte +0 -48
  151. package/src/lib/stories/components/Layout/Menu/DynamicMenu/KeybaordNavigation/KeybaordNavigation.stories.svelte +0 -29
  152. package/src/lib/stories/components/Layout/Menu/DynamicMenu/Options/OptionFormat.mdx +0 -72
  153. package/src/lib/stories/components/Layout/Menu/Menu.stories.svelte +0 -69
  154. package/src/lib/stories/components/Layout/Menu/MenuItem/MenuItem.stories.svelte +0 -34
  155. package/src/lib/stories/components/Layout/Menu/MenuItem/Size/Size.stories.svelte +0 -16
  156. package/src/lib/stories/components/Layout/Menu/MenuItem/Type/Type.stories.svelte +0 -21
  157. package/src/lib/stories/components/Layout/Menu/Size/Size.stories.svelte +0 -37
  158. package/src/lib/stories/components/Layout/Paper/Color/Color.stories.svelte +0 -63
  159. package/src/lib/stories/components/Layout/Paper/Paper.stories.svelte +0 -50
  160. package/src/lib/stories/components/Layout/Paper/Roundness/Roundness.stories.svelte +0 -25
  161. package/src/lib/stories/components/Layout/Paper/Shadow/Shadow.stories.svelte +0 -24
  162. package/src/lib/stories/components/Layout/Separator/Color/Color.stories.svelte +0 -19
  163. package/src/lib/stories/components/Layout/Separator/Separator.stories.svelte +0 -30
  164. package/src/lib/stories/developer tools/Intro.mdx +0 -9
  165. package/src/lib/stories/developer tools/components/DynamicInput/DynamicInput.stories.svelte +0 -53
  166. package/src/lib/stories/developer tools/components/DynamicInput/Events/Events.stories.svelte +0 -121
  167. package/src/lib/stories/developer tools/components/DynamicInput/Size/Size.stories.svelte +0 -17
  168. package/src/lib/stories/developer tools/components/InputEnclosure/InputEnclosure.stories.svelte +0 -38
  169. package/src/lib/stories/developer tools/components/InputEnclosure/Roundness/Roundness.stories.svelte +0 -20
  170. package/src/lib/stories/developer tools/components/InputEnclosure/Size/Size.stories.svelte +0 -16
  171. package/src/lib/stories/developer tools/components/InputEnclosure/WithIcon/WithIcon.stories.svelte +0 -47
  172. package/src/lib/stories/developer tools/components/Popper/Popper.stories.svelte +0 -140
  173. package/src/lib/stories/developer tools/components/Popper/PopperPopup/PopperPopup.stories.svelte +0 -64
  174. package/src/lib/stories/developer tools/components/Popper/Positions/AutoPosition/AutoPosition.stories.svelte +0 -92
  175. package/src/lib/stories/developer tools/components/Popper/Positions/Positions.stories.svelte +0 -114
  176. package/src/lib/stories/developer tools/components/UtilityButton/Size/Size.stories.svelte +0 -25
  177. package/src/lib/stories/developer tools/components/UtilityButton/UtilityButton.stories.svelte +0 -30
  178. package/src/lib/stories/developer tools/directives/clickOutside/index.mdx +0 -25
  179. package/src/lib/stories/developer tools/helpers/Numbers/cleanNumericString/index.mdx +0 -20
  180. package/src/lib/stories/developer tools/helpers/Numbers/isValidNumberValue/index.mdx +0 -71
  181. package/src/lib/stories/developer tools/helpers/Time/getMoment/index.mdx +0 -45
  182. package/src/lib/stories/developer tools/helpers/logger/index.mdx +0 -63
  183. package/src/lib/stories/developer tools/philosophy/Colors/Colors.mdx +0 -43
  184. package/src/lib/stories/developer tools/philosophy/Colors/Colors.stories.svelte +0 -22
  185. package/src/lib/stories/developer tools/philosophy/Colors/Opacity.stories.svelte +0 -11
  186. package/src/lib/stories/developer tools/philosophy/Themes.mdx +0 -23
@@ -1,19 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarMonthChip from '../CalendarMonthChip.svelte';
4
- import { storyCalendarMonthChipArgTypes } from '../CalendarMonthChip.stories.svelte';
5
-
6
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
7
- const { Story } = defineMeta({
8
- component: CalendarMonthChip,
9
- tags: ['autodocs'],
10
- argTypes: storyCalendarMonthChipArgTypes,
11
- args: {
12
- value: 'jan',
13
- },
14
- });
15
- </script>
16
-
17
- <Story name="Normal" />
18
- <Story name="Small" args={{ size: 'small' }} />
19
- <Story name="Large" args={{ size: 'large' }} />
@@ -1,45 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarMonthList from './CalendarMonthList.svelte';
4
- import type { StoryBookArgTypes } from '$lib/storybook-types.js';
5
- import { componentColorArray } from '$lib/types/colors.js';
6
- import { componentSizeArray } from '$lib/types/size.js';
7
-
8
- export const storyCalendarMonthListArgTypes: StoryBookArgTypes = {
9
- color: {
10
- control: { type: 'select' },
11
- options: componentColorArray,
12
- },
13
- size: {
14
- control: { type: 'select' },
15
- options: componentSizeArray,
16
- },
17
- };
18
-
19
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
20
- const { Story } = defineMeta({
21
- component: CalendarMonthList,
22
- tags: ['autodocs'],
23
- argTypes: storyCalendarMonthListArgTypes,
24
- args: {
25
- value: 'jan',
26
- },
27
- });
28
- </script>
29
-
30
- <!-- Default CalendarMonthList -->
31
- <Story name="Default" />
32
-
33
- <Story
34
- name="DisabledMonths"
35
- args={{
36
- disabledMonths: ['feb', 'jul'],
37
- }}
38
- />
39
-
40
- <Story
41
- name="HideControls"
42
- args={{
43
- showControls: false,
44
- }}
45
- />
@@ -1,22 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarMonthList from '../CalendarMonthList.svelte';
4
- import { storyCalendarMonthListArgTypes } from '../CalendarMonthList.stories.svelte';
5
-
6
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
7
- const { Story } = defineMeta({
8
- component: CalendarMonthList,
9
- tags: ['autodocs'],
10
- argTypes: storyCalendarMonthListArgTypes,
11
- args: {
12
- value: 'jan',
13
- },
14
- });
15
- </script>
16
-
17
- <Story name="Primary" />
18
- <Story name="Secondary" args={{ color: 'secondary' }} />
19
- <Story name="Neutral" args={{ color: 'neutral' }} />
20
- <Story name="Safe" args={{ color: 'safe' }} />
21
- <Story name="Warning" args={{ color: 'warning' }} />
22
- <Story name="Danger" args={{ color: 'danger' }} />
@@ -1,36 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarMonthList from '../CalendarMonthList.svelte';
4
- import { storyCalendarMonthListArgTypes } from '../CalendarMonthList.stories.svelte';
5
- import { Button } from '$lib/index.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarMonthList,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarMonthListArgTypes,
12
- args: {
13
- value: 'jan',
14
- },
15
- });
16
- </script>
17
-
18
- <Story name="Default" />
19
-
20
- <Story name="customCalendarMonthChipContent" asChild>
21
- <CalendarMonthList value="jan">
22
- {#snippet customCalendarMonthChipContent(val)}
23
- 🗓️{val}
24
- {/snippet}
25
- </CalendarMonthList>
26
- </Story>
27
-
28
- <Story name="customCalendarMonthChip" asChild>
29
- <CalendarMonthList value="jan">
30
- {#snippet customCalendarMonthChip(val)}
31
- <Button size="small" variant="text" outline>
32
- {val}
33
- </Button>
34
- {/snippet}
35
- </CalendarMonthList>
36
- </Story>
@@ -1,33 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarMonthList from '../CalendarMonthList.svelte';
4
- import { storyCalendarMonthListArgTypes } from '../CalendarMonthList.stories.svelte';
5
- import type { CalendarMonthNames } from '../../CalendarControls/CalendarMonthSelector/CalendarMonthSelector.svelte';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarMonthList,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarMonthListArgTypes,
12
- });
13
-
14
- let value = $state<CalendarMonthNames>('jan');
15
- </script>
16
-
17
- <Story name="Select" asChild>
18
- <CalendarMonthList
19
- {value}
20
- onselect={(val) => {
21
- value = val;
22
- }}
23
- />
24
- </Story>
25
-
26
- <Story name="Cancel" asChild>
27
- <CalendarMonthList
28
- {value}
29
- oncancel={() => {
30
- console.log('oncancel');
31
- }}
32
- />
33
- </Story>
@@ -1,19 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarMonthList from '../CalendarMonthList.svelte';
4
- import { storyCalendarMonthListArgTypes } from '../CalendarMonthList.stories.svelte';
5
-
6
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
7
- const { Story } = defineMeta({
8
- component: CalendarMonthList,
9
- tags: ['autodocs'],
10
- argTypes: storyCalendarMonthListArgTypes,
11
- args: {
12
- value: 'jan',
13
- },
14
- });
15
- </script>
16
-
17
- <Story name="Normal" />
18
- <Story name="Small" args={{ size: 'small' }} />
19
- <Story name="Large" args={{ size: 'large' }} />
@@ -1,41 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearChip from './CalendarYearChip.svelte';
4
- import type { StoryBookArgTypes } from '$lib/storybook-types.js';
5
- import { componentColorArray } from '$lib/types/colors.js';
6
- import { componentSizeArray } from '$lib/types/size.js';
7
- import { componentRoundnessArray } from '$lib/types/roundness.js';
8
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
9
-
10
- export const storyCalendarYearChipArgTypes: StoryBookArgTypes = {
11
- color: {
12
- control: { type: 'select' },
13
- options: componentColorArray,
14
- },
15
- size: {
16
- control: { type: 'select' },
17
- options: componentSizeArray,
18
- },
19
- roundness: {
20
- control: { type: 'select' },
21
- options: componentRoundnessArray,
22
- },
23
- };
24
-
25
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
26
- const { Story } = defineMeta({
27
- component: CalendarYearChip,
28
- tags: ['autodocs'],
29
- argTypes: storyCalendarYearChipArgTypes,
30
- args: {
31
- value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
32
- },
33
- });
34
- </script>
35
-
36
- <!-- Default CalendarYearChip -->
37
- <Story name="Default" />
38
-
39
- <Story name="Selected" args={{ selected: true }} />
40
-
41
- <Story name="Disabled" args={{ disabled: true }} />
@@ -1,30 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearChip from '../../CalendarYearChip/CalendarYearChip.svelte';
4
- import { storyCalendarYearChipArgTypes } from '../../CalendarYearChip/CalendarYearChip.stories.svelte';
5
- import { getMoment } from '$lib/index.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarYearChip,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarYearChipArgTypes,
12
- args: {
13
- value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
14
- },
15
- });
16
- </script>
17
-
18
- <Story name="Primary" />
19
- <Story name="Secondary" args={{ color: 'secondary' }} />
20
- <Story name="Neutral" args={{ color: 'neutral' }} />
21
- <Story name="Safe" args={{ color: 'safe' }} />
22
- <Story name="Warning" args={{ color: 'warning' }} />
23
- <Story name="Danger" args={{ color: 'danger' }} />
24
-
25
- <Story name="Primary Selected" args={{ color: 'primary', selected: true }} />
26
- <Story name="Secondary Selected" args={{ color: 'secondary', selected: true }} />
27
- <Story name="Neutral Selected" args={{ color: 'neutral', selected: true }} />
28
- <Story name="Safe Selected" args={{ color: 'safe', selected: true }} />
29
- <Story name="Warning Selected" args={{ color: 'warning', selected: true }} />
30
- <Story name="Danger Selected" args={{ color: 'danger', selected: true }} />
@@ -1,33 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearChip from '../CalendarYearChip.svelte';
4
- import { storyCalendarYearChipArgTypes } from '../CalendarYearChip.stories.svelte';
5
- import { Button, getMoment } from '$lib/index.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarYearChip,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarYearChipArgTypes,
12
- });
13
- </script>
14
-
15
- <!-- Custom Content -->
16
- <Story name="customCalendarYearChipContent" asChild>
17
- <CalendarYearChip value={getMoment(undefined, undefined, { utc: true }).format('YYYY')}>
18
- {#snippet customCalendarYearChipContent(val)}
19
- 🗓️{val}
20
- {/snippet}
21
- </CalendarYearChip>
22
- </Story>
23
-
24
- <!-- Custom Chip -->
25
- <Story name="customCalendarYearChip" asChild>
26
- <CalendarYearChip value={getMoment(undefined, undefined, { utc: true }).format('YYYY')}>
27
- {#snippet customCalendarYearChip(val)}
28
- <Button size="small" variant="text" outline>
29
- {val}
30
- </Button>
31
- {/snippet}
32
- </CalendarYearChip>
33
- </Story>
@@ -1,24 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearChip from '../CalendarYearChip.svelte';
4
- import { storyCalendarYearChipArgTypes } from '../CalendarYearChip.stories.svelte';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarYearChip,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarYearChipArgTypes,
12
- });
13
- </script>
14
-
15
- <Story name="Select" asChild>
16
- <CalendarYearChip
17
- value={getMoment(undefined, undefined, { utc: true }).format('YYYY')}
18
- onselect={(value, e) => {
19
- const target = e.target as HTMLButtonElement;
20
- alert(`CalendarYearChip Select, ${value}`);
21
- console.log('CalendarYearChip Select', value, target);
22
- }}
23
- />
24
- </Story>
@@ -1,27 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearChip from '../CalendarYearChip.svelte';
4
- import { storyCalendarYearChipArgTypes } from '../CalendarYearChip.stories.svelte';
5
- import { getMoment } from '$lib/index.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarYearChip,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarYearChipArgTypes,
12
- args: {
13
- value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
14
- },
15
- });
16
- </script>
17
-
18
- <!-- Hover to see the result -->
19
- <Story name="Roundness 1" />
20
-
21
- <Story name="Roundness 2" args={{ roundness: 2 }} />
22
-
23
- <Story name="Roundness 3" args={{ roundness: 3 }} />
24
-
25
- <Story name="Roundness 0" args={{ roundness: 0 }} />
26
-
27
- <Story name="Roundness Full" args={{ roundness: 'full', compact: true }} />
@@ -1,20 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearChip from '../CalendarYearChip.svelte';
4
- import { storyCalendarYearChipArgTypes } from '../CalendarYearChip.stories.svelte';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarYearChip,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarYearChipArgTypes,
12
- args: {
13
- value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
14
- },
15
- });
16
- </script>
17
-
18
- <Story name="Normal" />
19
- <Story name="Small" args={{ size: 'small' }} />
20
- <Story name="Large" args={{ size: 'large' }} />
@@ -1,39 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearList from './CalendarYearList.svelte';
4
- import type { StoryBookArgTypes } from '$lib/storybook-types.js';
5
- import { componentColorArray } from '$lib/types/colors.js';
6
- import { componentSizeArray } from '$lib/types/size.js';
7
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
8
-
9
- export const storyCalendarYearListArgTypes: StoryBookArgTypes = {
10
- color: {
11
- control: { type: 'select' },
12
- options: componentColorArray,
13
- },
14
- size: {
15
- control: { type: 'select' },
16
- options: componentSizeArray,
17
- },
18
- };
19
-
20
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
21
- const { Story } = defineMeta({
22
- component: CalendarYearList,
23
- tags: ['autodocs'],
24
- argTypes: storyCalendarYearListArgTypes,
25
- args: {
26
- value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
27
- },
28
- });
29
- </script>
30
-
31
- <!-- Default CalendarYearList -->
32
- <Story name="Default" />
33
-
34
- <Story
35
- name="HideControls"
36
- args={{
37
- showControls: false,
38
- }}
39
- />
@@ -1,23 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearList from '../CalendarYearList.svelte';
4
- import { storyCalendarYearListArgTypes } from '../CalendarYearList.stories.svelte';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarYearList,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarYearListArgTypes,
12
- args: {
13
- value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
14
- },
15
- });
16
- </script>
17
-
18
- <Story name="Primary" />
19
- <Story name="Secondary" args={{ color: 'secondary' }} />
20
- <Story name="Neutral" args={{ color: 'neutral' }} />
21
- <Story name="Safe" args={{ color: 'safe' }} />
22
- <Story name="Warning" args={{ color: 'warning' }} />
23
- <Story name="Danger" args={{ color: 'danger' }} />
@@ -1,36 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearList from '../CalendarYearList.svelte';
4
- import { storyCalendarYearListArgTypes } from '../CalendarYearList.stories.svelte';
5
- import { Button, getMoment } from '$lib/index.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarYearList,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarYearListArgTypes,
12
- args: {
13
- value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
14
- },
15
- });
16
- </script>
17
-
18
- <Story name="Default" />
19
-
20
- <Story name="customCalendarYearChipContent" asChild>
21
- <CalendarYearList value={getMoment(undefined, undefined, { utc: true }).format('YYYY')}>
22
- {#snippet customCalendarYearChipContent(val)}
23
- 🗓️{val}
24
- {/snippet}
25
- </CalendarYearList>
26
- </Story>
27
-
28
- <Story name="customCalendarYearChip" asChild>
29
- <CalendarYearList value={getMoment(undefined, undefined, { utc: true }).format('YYYY')}>
30
- {#snippet customCalendarYearChip(val)}
31
- <Button size="small" variant="text" outline>
32
- {val}
33
- </Button>
34
- {/snippet}
35
- </CalendarYearList>
36
- </Story>
@@ -1,24 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearList from '../CalendarYearList.svelte';
4
- import { storyCalendarYearListArgTypes } from '../CalendarYearList.stories.svelte';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarYearList,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarYearListArgTypes,
12
- });
13
-
14
- let value = $state<string>(getMoment(undefined, undefined, { utc: true }).format('YYYY'));
15
- </script>
16
-
17
- <Story name="Select" asChild>
18
- <CalendarYearList
19
- {value}
20
- onselect={(val) => {
21
- value = val;
22
- }}
23
- />
24
- </Story>
@@ -1,20 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearList from '../CalendarYearList.svelte';
4
- import { storyCalendarYearListArgTypes } from '../CalendarYearList.stories.svelte';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarYearList,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarYearListArgTypes,
12
- args: {
13
- value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
14
- },
15
- });
16
- </script>
17
-
18
- <Story name="Normal" />
19
- <Story name="Small" args={{ size: 'small' }} />
20
- <Story name="Large" args={{ size: 'large' }} />
@@ -1,121 +0,0 @@
1
- import { Source } from '@storybook/addon-docs/blocks';
2
-
3
- # `createDateOfMonth`
4
-
5
- `createDateOfMonth(date, settings, monthType?, manipulateDate?)` creates a single `DateOfMonth` object representing one calendar cell. This is typically used internally by `getDatesOfMonth` but can be useful for custom logic.
6
-
7
- ## Usage
8
-
9
- <Source
10
- dark
11
- language="ts"
12
- code={`
13
- // Manual usage for one day
14
- import { createDateOfMonth } from '@flightlesslabs/dodo-ui';
15
-
16
- const date = new Date();
17
- const dateObj = createDateOfMonth(date, {
18
- minDate: new Date('2025-01-01'),
19
- timezone: 'UTC',
20
- }, 'currentMonth');
21
- `}
22
- />
23
-
24
- ---
25
-
26
- # Types
27
-
28
- ## `DateOfMonth`
29
-
30
- <Source
31
- dark
32
- language="ts"
33
- code={`
34
- // Represents a single calendar cell
35
- type DateOfMonth = {
36
- id: string;
37
- date: Date;
38
- isCurrentMonth: boolean;
39
- isLastMonth?: boolean;
40
- isNextMonth?: boolean;
41
- disabled?: boolean;
42
- today?: boolean;
43
- };
44
- `}
45
- />
46
-
47
- ## `CreateDatesOfMonthSettings`
48
-
49
- <Source
50
- dark
51
- language="ts"
52
- code={`
53
- // Configuration for calendar generation
54
- interface CreateDatesOfMonthSettings {
55
- startOfWeek?: 'SUN' | 'MON' | 'TUE' | 'WED' | 'THU' | 'FRI' | 'SAT';
56
- showLastMonth?: boolean;
57
- showNextMonth?: boolean;
58
- today?: Date;
59
- minDate?: Date;
60
- maxDate?: Date;
61
- excludeDates?: Date[];
62
- includeDates?: Date[];
63
- timezone?: string;
64
- utc?: boolean;
65
- }
66
- `}
67
- />
68
-
69
- ## `CreateDateOfMonthType`
70
-
71
- <Source
72
- dark
73
- language="ts"
74
- code={`
75
- // Indicates the month context of the date
76
- type CreateDateOfMonthType = 'currentMonth' | 'nextMonth' | 'lastMonth';
77
- `}
78
- />
79
-
80
- ## `DAYS_OF_WEEK` Enum
81
-
82
- <Source
83
- dark
84
- language="ts"
85
- code={`
86
- // Weekday constants (Sunday = 0)
87
- export const enum DAYS_OF_WEEK {
88
- SUN,
89
- MON,
90
- TUE,
91
- WED,
92
- THU,
93
- FRI,
94
- SAT,
95
- }
96
- `}
97
- />
98
-
99
- ## `MONTHS` Enum
100
-
101
- <Source
102
- dark
103
- language="ts"
104
- code={`
105
- // Month constants (January = 0)
106
- export const enum MONTHS {
107
- JAN,
108
- FEB,
109
- MAR,
110
- APR,
111
- MAY,
112
- JUN,
113
- JUL,
114
- AUG,
115
- SEP,
116
- OCT,
117
- NOV,
118
- DEC,
119
- }
120
- `}
121
- />
@@ -1,37 +0,0 @@
1
- import { Source } from '@storybook/addon-docs/blocks';
2
-
3
- # `getDatesOfMonth`
4
-
5
- `getDatesOfMonth(date, settings, manipulateDate)` generates a 2D array of weeks, each containing `DateOfMonth` objects. It supports options via `CreateDatesOfMonthSettings` and allows injecting custom logic per date.
6
-
7
- ## Usage
8
-
9
- <Source
10
- dark
11
- language="ts"
12
- code={`
13
- // Basic usage
14
- import { getDatesOfMonth, getMoment } from '@flightlesslabs/dodo-ui';
15
-
16
- const dates = getDatesOfMonth(new Date(), {
17
- showLastMonth: false,
18
- showNextMonth: false,
19
- });
20
-
21
- // Using a formatted date
22
- const dates2 = getDatesOfMonth(
23
- getMoment('01-02-2025', 'DD-MM-YYYY').toDate()
24
- );
25
-
26
- // With custom manipulation
27
- const dates3 = getDatesOfMonth(new Date(), {
28
- timezone: 'America/New_York',
29
- startOfWeek: 'MON',
30
- }, (date, settings) => {
31
- return {
32
- ...date,
33
- disabled: true,
34
- };
35
- });
36
- `}
37
- />