@flightlesslabs/dodo-ui 0.12.1 → 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 (188) 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/dist/stories/components/Form/RangeSlider/RangeSlider.svelte +32 -19
  6. package/{src/lib/stories/components/Form/RangeSlider → dist/stories/components/Form/Toggle}/Color/Color.stories.svelte +4 -4
  7. package/dist/stories/components/Form/Toggle/Color/Color.stories.svelte.d.ts +26 -0
  8. package/dist/stories/components/Form/Toggle/Events/Events.stories.svelte +35 -0
  9. package/dist/stories/components/Form/Toggle/Events/Events.stories.svelte.d.ts +18 -0
  10. package/{src/lib/stories/components/Form/NumericInput → dist/stories/components/Form/Toggle}/Roundness/Roundness.stories.svelte +8 -6
  11. package/dist/stories/components/Form/Toggle/Roundness/Roundness.stories.svelte.d.ts +26 -0
  12. package/{src/lib/stories/components/Form/RangeSlider → dist/stories/components/Form/Toggle}/Size/Size.stories.svelte +4 -4
  13. package/dist/stories/components/Form/Toggle/Size/Size.stories.svelte.d.ts +26 -0
  14. package/dist/stories/components/Form/Toggle/Toggle.stories.svelte +37 -0
  15. package/dist/stories/components/Form/Toggle/Toggle.stories.svelte.d.ts +21 -0
  16. package/dist/stories/components/Form/Toggle/Toggle.svelte +369 -0
  17. package/dist/stories/components/Form/Toggle/Toggle.svelte.d.ts +34 -0
  18. package/dist/stories/components/Form/Toggle/utils/scss/mixins.scss +81 -0
  19. package/package.json +42 -40
  20. package/src/lib/index.ts +4 -0
  21. package/src/lib/stories/components/Form/Button/Button.svelte +2 -2
  22. package/src/lib/stories/components/Form/RangeSlider/RangeSlider.svelte +33 -22
  23. package/src/lib/stories/components/Form/Toggle/Toggle.svelte +262 -0
  24. package/src/lib/stories/components/Form/Toggle/utils/scss/mixins.scss +81 -0
  25. package/src/lib/stories/Home.mdx +0 -59
  26. package/src/lib/stories/assets/dark-theme-toggle.png +0 -0
  27. package/src/lib/stories/components/Form/Button/Button.stories.svelte +0 -61
  28. package/src/lib/stories/components/Form/Button/Color/Color.stories.svelte +0 -43
  29. package/src/lib/stories/components/Form/Button/Events/Events.stories.svelte +0 -36
  30. package/src/lib/stories/components/Form/Button/IconButton/IconButton.stories.svelte +0 -43
  31. package/src/lib/stories/components/Form/Button/Roundness/Roundness.stories.svelte +0 -23
  32. package/src/lib/stories/components/Form/Button/Size/Size.stories.svelte +0 -16
  33. package/src/lib/stories/components/Form/Button/Variant/Variant.stories.svelte +0 -18
  34. package/src/lib/stories/components/Form/DatePicker/Color/Color.stories.svelte +0 -47
  35. package/src/lib/stories/components/Form/DatePicker/Controls/Controls.stories.svelte +0 -58
  36. package/src/lib/stories/components/Form/DatePicker/Customize/Customize.stories.svelte +0 -167
  37. package/src/lib/stories/components/Form/DatePicker/DatePicker.stories.svelte +0 -107
  38. package/src/lib/stories/components/Form/DatePicker/Events/Events.stories.svelte +0 -147
  39. package/src/lib/stories/components/Form/DatePicker/FilterDates/FilterDates.stories.svelte +0 -61
  40. package/src/lib/stories/components/Form/DatePicker/Positions/AutoPosition/AutoPosition.stories.svelte +0 -46
  41. package/src/lib/stories/components/Form/DatePicker/Positions/Positions.stories.svelte +0 -57
  42. package/src/lib/stories/components/Form/DatePicker/Roundness/Roundness.stories.svelte +0 -38
  43. package/src/lib/stories/components/Form/DatePicker/Size/Size.stories.svelte +0 -41
  44. package/src/lib/stories/components/Form/DatePicker/WithIcon/WithIcon.stories.svelte +0 -41
  45. package/src/lib/stories/components/Form/FormControl/FormControl.stories.svelte +0 -28
  46. package/src/lib/stories/components/Form/Label/Label.stories.svelte +0 -13
  47. package/src/lib/stories/components/Form/Message/Color/Color.stories.svelte +0 -36
  48. package/src/lib/stories/components/Form/Message/Message.stories.svelte +0 -27
  49. package/src/lib/stories/components/Form/Message/Size/Size.stories.svelte +0 -22
  50. package/src/lib/stories/components/Form/NumericInput/Events/Events.stories.svelte +0 -134
  51. package/src/lib/stories/components/Form/NumericInput/NumericInput.stories.svelte +0 -84
  52. package/src/lib/stories/components/Form/NumericInput/Size/Size.stories.svelte +0 -16
  53. package/src/lib/stories/components/Form/NumericInput/Validation/Validation.stories.svelte +0 -87
  54. package/src/lib/stories/components/Form/NumericInput/WithIcon/WithIcon.stories.svelte +0 -31
  55. package/src/lib/stories/components/Form/PasswordInput/Events/Events.stories.svelte +0 -132
  56. package/src/lib/stories/components/Form/PasswordInput/PasswordInput.stories.svelte +0 -58
  57. package/src/lib/stories/components/Form/PasswordInput/Roundness/Roundness.stories.svelte +0 -20
  58. package/src/lib/stories/components/Form/PasswordInput/Size/Size.stories.svelte +0 -16
  59. package/src/lib/stories/components/Form/PasswordInput/WithIcon/WithIcon.stories.svelte +0 -31
  60. package/src/lib/stories/components/Form/RangeSlider/Events/Events.stories.svelte +0 -63
  61. package/src/lib/stories/components/Form/RangeSlider/RangeSlider.stories.svelte +0 -69
  62. package/src/lib/stories/components/Form/RangeSlider/Roundness/Roundness.stories.svelte +0 -30
  63. package/src/lib/stories/components/Form/RangeSlider/WithIcon/WithIcon.stories.svelte +0 -33
  64. package/src/lib/stories/components/Form/Select/Customize/Customize.stories.svelte +0 -139
  65. package/src/lib/stories/components/Form/Select/DropDownArrow/DropDownArrow.stories.svelte +0 -63
  66. package/src/lib/stories/components/Form/Select/Events/Events.stories.svelte +0 -174
  67. package/src/lib/stories/components/Form/Select/Options/OptionFormat.mdx +0 -40
  68. package/src/lib/stories/components/Form/Select/Positions/AutoPosition/AutoPosition.stories.svelte +0 -58
  69. package/src/lib/stories/components/Form/Select/Positions/Positions.stories.svelte +0 -87
  70. package/src/lib/stories/components/Form/Select/Roundness/Roundness.stories.svelte +0 -32
  71. package/src/lib/stories/components/Form/Select/Select.stories.svelte +0 -125
  72. package/src/lib/stories/components/Form/Select/Size/Size.stories.svelte +0 -28
  73. package/src/lib/stories/components/Form/Select/WithIcon/WithIcon.stories.svelte +0 -43
  74. package/src/lib/stories/components/Form/TextInput/Events/Events.stories.svelte +0 -125
  75. package/src/lib/stories/components/Form/TextInput/Roundness/Roundness.stories.svelte +0 -21
  76. package/src/lib/stories/components/Form/TextInput/Size/Size.stories.svelte +0 -17
  77. package/src/lib/stories/components/Form/TextInput/TextInput.stories.svelte +0 -43
  78. package/src/lib/stories/components/Form/TextInput/WithIcon/WithIcon.stories.svelte +0 -47
  79. package/src/lib/stories/components/Info/Calendar/Calendar.stories.svelte +0 -121
  80. package/src/lib/stories/components/Info/Calendar/Color/Color.stories.svelte +0 -23
  81. package/src/lib/stories/components/Info/Calendar/Controls/Controls.stories.svelte +0 -26
  82. package/src/lib/stories/components/Info/Calendar/Customize/Customize.stories.svelte +0 -160
  83. package/src/lib/stories/components/Info/Calendar/Events/Events.stories.svelte +0 -122
  84. package/src/lib/stories/components/Info/Calendar/FilterDates/FilterDates.stories.svelte +0 -70
  85. package/src/lib/stories/components/Info/Calendar/Size/Size.stories.svelte +0 -20
  86. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarControls.stories.svelte +0 -36
  87. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/CalendarMonthSelector.stories.svelte +0 -58
  88. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Color/Color.stories.svelte +0 -23
  89. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Customize/Customize.stories.svelte +0 -30
  90. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Events/Events.stories.svelte +0 -25
  91. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/NameTypes/NameTypes.stories.svelte +0 -25
  92. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Roundness/Roundness.stories.svelte +0 -26
  93. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Size/Size.stories.svelte +0 -20
  94. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/CalendarNavigation.stories.svelte +0 -36
  95. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Color/Color.stories.svelte +0 -19
  96. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Customize/Customize.stories.svelte +0 -33
  97. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Events/Events.stories.svelte +0 -37
  98. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Size/Size.stories.svelte +0 -16
  99. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/CalendarYearSelector.stories.svelte +0 -58
  100. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Color/Color.stories.svelte +0 -23
  101. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Customize/Customize.stories.svelte +0 -30
  102. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Events/Events.stories.svelte +0 -25
  103. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Roundness/Roundness.stories.svelte +0 -26
  104. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Size/Size.stories.svelte +0 -20
  105. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Color/Color.stories.svelte +0 -23
  106. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Controls/Controls.stories.svelte +0 -21
  107. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Customize/Customize.stories.svelte +0 -69
  108. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Events/Events.stories.svelte +0 -61
  109. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Size/Size.stories.svelte +0 -20
  110. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/CalendarDateChip.stories.svelte +0 -75
  111. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Color/Color.stories.svelte +0 -41
  112. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Customize/Customize.stories.svelte +0 -45
  113. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Events/Events.stories.svelte +0 -28
  114. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Roundness/Roundness.stories.svelte +0 -31
  115. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Size/Size.stories.svelte +0 -24
  116. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/SpecialChips/SpecialChips.stories.svelte +0 -96
  117. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.stories.svelte +0 -104
  118. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/CalendarWeek.stories.svelte +0 -38
  119. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/Customize/Customize.stories.svelte +0 -32
  120. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/NameTypes/NameTypes.stories.svelte +0 -28
  121. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/Size/Size.stories.svelte +0 -16
  122. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Color/Color.stories.svelte +0 -23
  123. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Customize/Customize.stories.svelte +0 -68
  124. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Events/Events.stories.svelte +0 -24
  125. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Size/Size.stories.svelte +0 -20
  126. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/CalendarMonthChip.stories.svelte +0 -40
  127. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Color/Color.stories.svelte +0 -29
  128. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Customize/Customize.stories.svelte +0 -33
  129. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Events/Events.stories.svelte +0 -23
  130. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Roundness/Roundness.stories.svelte +0 -26
  131. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Size/Size.stories.svelte +0 -19
  132. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthList.stories.svelte +0 -45
  133. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Color/Color.stories.svelte +0 -22
  134. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Customize/Customize.stories.svelte +0 -36
  135. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Events/Events.stories.svelte +0 -33
  136. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Size/Size.stories.svelte +0 -19
  137. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/CalendarYearChip.stories.svelte +0 -41
  138. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Color/Color.stories.svelte +0 -30
  139. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Customize/Customize.stories.svelte +0 -33
  140. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Events/Events.stories.svelte +0 -24
  141. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Roundness/Roundness.stories.svelte +0 -27
  142. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Size/Size.stories.svelte +0 -20
  143. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearList.stories.svelte +0 -39
  144. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Color/Color.stories.svelte +0 -23
  145. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Customize/Customize.stories.svelte +0 -36
  146. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Events/Events.stories.svelte +0 -24
  147. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Size/Size.stories.svelte +0 -20
  148. package/src/lib/stories/components/Info/Calendar/utils/createDateOfMonth/index.mdx +0 -121
  149. package/src/lib/stories/components/Info/Calendar/utils/getDatesOfMonth/index.mdx +0 -37
  150. package/src/lib/stories/components/Layout/Menu/DynamicMenu/Customize/Customize.stories.svelte +0 -30
  151. package/src/lib/stories/components/Layout/Menu/DynamicMenu/DynamicMenu.stories.svelte +0 -56
  152. package/src/lib/stories/components/Layout/Menu/DynamicMenu/Events/Events.stories.svelte +0 -48
  153. package/src/lib/stories/components/Layout/Menu/DynamicMenu/KeybaordNavigation/KeybaordNavigation.stories.svelte +0 -29
  154. package/src/lib/stories/components/Layout/Menu/DynamicMenu/Options/OptionFormat.mdx +0 -72
  155. package/src/lib/stories/components/Layout/Menu/Menu.stories.svelte +0 -69
  156. package/src/lib/stories/components/Layout/Menu/MenuItem/MenuItem.stories.svelte +0 -34
  157. package/src/lib/stories/components/Layout/Menu/MenuItem/Size/Size.stories.svelte +0 -16
  158. package/src/lib/stories/components/Layout/Menu/MenuItem/Type/Type.stories.svelte +0 -21
  159. package/src/lib/stories/components/Layout/Menu/Size/Size.stories.svelte +0 -37
  160. package/src/lib/stories/components/Layout/Paper/Color/Color.stories.svelte +0 -63
  161. package/src/lib/stories/components/Layout/Paper/Paper.stories.svelte +0 -50
  162. package/src/lib/stories/components/Layout/Paper/Roundness/Roundness.stories.svelte +0 -25
  163. package/src/lib/stories/components/Layout/Paper/Shadow/Shadow.stories.svelte +0 -24
  164. package/src/lib/stories/components/Layout/Separator/Color/Color.stories.svelte +0 -19
  165. package/src/lib/stories/components/Layout/Separator/Separator.stories.svelte +0 -30
  166. package/src/lib/stories/developer tools/Intro.mdx +0 -9
  167. package/src/lib/stories/developer tools/components/DynamicInput/DynamicInput.stories.svelte +0 -53
  168. package/src/lib/stories/developer tools/components/DynamicInput/Events/Events.stories.svelte +0 -121
  169. package/src/lib/stories/developer tools/components/DynamicInput/Size/Size.stories.svelte +0 -17
  170. package/src/lib/stories/developer tools/components/InputEnclosure/InputEnclosure.stories.svelte +0 -38
  171. package/src/lib/stories/developer tools/components/InputEnclosure/Roundness/Roundness.stories.svelte +0 -20
  172. package/src/lib/stories/developer tools/components/InputEnclosure/Size/Size.stories.svelte +0 -16
  173. package/src/lib/stories/developer tools/components/InputEnclosure/WithIcon/WithIcon.stories.svelte +0 -47
  174. package/src/lib/stories/developer tools/components/Popper/Popper.stories.svelte +0 -140
  175. package/src/lib/stories/developer tools/components/Popper/PopperPopup/PopperPopup.stories.svelte +0 -64
  176. package/src/lib/stories/developer tools/components/Popper/Positions/AutoPosition/AutoPosition.stories.svelte +0 -92
  177. package/src/lib/stories/developer tools/components/Popper/Positions/Positions.stories.svelte +0 -114
  178. package/src/lib/stories/developer tools/components/UtilityButton/Size/Size.stories.svelte +0 -25
  179. package/src/lib/stories/developer tools/components/UtilityButton/UtilityButton.stories.svelte +0 -30
  180. package/src/lib/stories/developer tools/directives/clickOutside/index.mdx +0 -25
  181. package/src/lib/stories/developer tools/helpers/Numbers/cleanNumericString/index.mdx +0 -20
  182. package/src/lib/stories/developer tools/helpers/Numbers/isValidNumberValue/index.mdx +0 -71
  183. package/src/lib/stories/developer tools/helpers/Time/getMoment/index.mdx +0 -45
  184. package/src/lib/stories/developer tools/helpers/logger/index.mdx +0 -63
  185. package/src/lib/stories/developer tools/philosophy/Colors/Colors.mdx +0 -43
  186. package/src/lib/stories/developer tools/philosophy/Colors/Colors.stories.svelte +0 -22
  187. package/src/lib/stories/developer tools/philosophy/Colors/Opacity.stories.svelte +0 -11
  188. package/src/lib/stories/developer tools/philosophy/Themes.mdx +0 -23
@@ -1,28 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarWeek from '../CalendarWeek.svelte';
4
- import { storyCalendarWeekArgTypes } from '../CalendarWeek.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: CalendarWeek,
9
- tags: ['autodocs'],
10
- argTypes: storyCalendarWeekArgTypes,
11
- });
12
- </script>
13
-
14
- <Story name="Default" />
15
-
16
- <Story
17
- name="SingleLetter"
18
- args={{
19
- nameType: 'abr1',
20
- }}
21
- />
22
-
23
- <Story
24
- name="ThreeLetters"
25
- args={{
26
- nameType: 'abr3',
27
- }}
28
- />
@@ -1,16 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarWeek from '../CalendarWeek.svelte';
4
- import { storyCalendarWeekArgTypes } from '../CalendarWeek.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: CalendarWeek,
9
- tags: ['autodocs'],
10
- argTypes: storyCalendarWeekArgTypes,
11
- });
12
- </script>
13
-
14
- <Story name="Normal" />
15
- <Story name="Small" args={{ size: 'small' }} />
16
- <Story name="Large" args={{ size: 'large' }} />
@@ -1,23 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarDatesChart from '../CalendarDatesChart.svelte';
4
- import { storyCalendarDatesChartArgTypes } from '../CalendarDatesChart.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: CalendarDatesChart,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarDatesChartArgTypes,
12
- args: {
13
- value: getMoment().toDate(),
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,68 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarDatesChart from '../CalendarDatesChart.svelte';
4
- import { storyCalendarDatesChartArgTypes } from '../CalendarDatesChart.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: CalendarDatesChart,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarDatesChartArgTypes,
12
- args: {
13
- value: getMoment().toDate(),
14
- },
15
- });
16
- </script>
17
-
18
- <Story name="Default" />
19
-
20
- <Story
21
- name="WeekNameSingleLetter"
22
- args={{
23
- weekDayNameType: 'abr1',
24
- }}
25
- />
26
-
27
- <Story
28
- name="WeekNameThreeLetters"
29
- args={{
30
- weekDayNameType: 'abr3',
31
- }}
32
- />
33
-
34
- <Story name="customCalendarDateChipContent" asChild>
35
- <CalendarDatesChart value={getMoment().toDate()}>
36
- {#snippet customCalendarDateChipContent(dayOfMonth)}
37
- 🗓️{Number(getMoment(dayOfMonth.date).format('D'))}
38
- {/snippet}
39
- </CalendarDatesChart>
40
- </Story>
41
-
42
- <Story name="customCalendarDateChip" asChild>
43
- <CalendarDatesChart value={getMoment().toDate()}>
44
- {#snippet customCalendarDateChip(dayOfMonth)}
45
- <Button size="small" variant="text" outline>
46
- {Number(getMoment(dayOfMonth.date).format('D'))}
47
- </Button>
48
- {/snippet}
49
- </CalendarDatesChart>
50
- </Story>
51
-
52
- <Story name="customCalendarWeekContent" asChild>
53
- <CalendarDatesChart value={getMoment().toDate()}>
54
- {#snippet customCalendarWeekContent(option)}
55
- ☀️{option.abr1}
56
- {/snippet}
57
- </CalendarDatesChart>
58
- </Story>
59
-
60
- <Story name="customCalendarWeek" asChild>
61
- <CalendarDatesChart value={getMoment().toDate()}>
62
- {#snippet customCalendarWeek(option)}
63
- <li style="color: blue; display: block;">
64
- {option.abr3}
65
- </li>
66
- {/snippet}
67
- </CalendarDatesChart>
68
- </Story>
@@ -1,24 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarDatesChart from '../CalendarDatesChart.svelte';
4
- import { storyCalendarDatesChartArgTypes } from '../CalendarDatesChart.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: CalendarDatesChart,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarDatesChartArgTypes,
12
- });
13
-
14
- let value = $state(getMoment().toDate());
15
- </script>
16
-
17
- <Story name="Select" asChild>
18
- <CalendarDatesChart
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 CalendarDatesChart from '../CalendarDatesChart.svelte';
4
- import { storyCalendarDatesChartArgTypes } from '../CalendarDatesChart.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: CalendarDatesChart,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarDatesChartArgTypes,
12
- args: {
13
- value: getMoment().toDate(),
14
- },
15
- });
16
- </script>
17
-
18
- <Story name="Normal" />
19
- <Story name="Small" args={{ size: 'small' }} />
20
- <Story name="Large" args={{ size: 'large' }} />
@@ -1,40 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarMonthChip from './CalendarMonthChip.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
-
9
- export const storyCalendarMonthChipArgTypes: StoryBookArgTypes = {
10
- color: {
11
- control: { type: 'select' },
12
- options: componentColorArray,
13
- },
14
- size: {
15
- control: { type: 'select' },
16
- options: componentSizeArray,
17
- },
18
- roundness: {
19
- control: { type: 'select' },
20
- options: componentRoundnessArray,
21
- },
22
- };
23
-
24
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
25
- const { Story } = defineMeta({
26
- component: CalendarMonthChip,
27
- tags: ['autodocs'],
28
- argTypes: storyCalendarMonthChipArgTypes,
29
- args: {
30
- value: 'jan',
31
- },
32
- });
33
- </script>
34
-
35
- <!-- Default CalendarMonthChip -->
36
- <Story name="Default" />
37
-
38
- <Story name="Selected" args={{ selected: true }} />
39
-
40
- <Story name="Disabled" args={{ disabled: true }} />
@@ -1,29 +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="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' }} />
23
-
24
- <Story name="Primary Selected" args={{ color: 'primary', selected: true }} />
25
- <Story name="Secondary Selected" args={{ color: 'secondary', selected: true }} />
26
- <Story name="Neutral Selected" args={{ color: 'neutral', selected: true }} />
27
- <Story name="Safe Selected" args={{ color: 'safe', selected: true }} />
28
- <Story name="Warning Selected" args={{ color: 'warning', selected: true }} />
29
- <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 CalendarMonthChip from '../CalendarMonthChip.svelte';
4
- import { storyCalendarMonthChipArgTypes } from '../CalendarMonthChip.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: CalendarMonthChip,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarMonthChipArgTypes,
12
- });
13
- </script>
14
-
15
- <!-- Custom Content -->
16
- <Story name="customCalendarMonthChipContent" asChild>
17
- <CalendarMonthChip value="jan">
18
- {#snippet customCalendarMonthChipContent(val)}
19
- 🗓️{val}
20
- {/snippet}
21
- </CalendarMonthChip>
22
- </Story>
23
-
24
- <!-- Custom Chip -->
25
- <Story name="customCalendarMonthChip" asChild>
26
- <CalendarMonthChip value="jan">
27
- {#snippet customCalendarMonthChip(val)}
28
- <Button size="small" variant="text" outline>
29
- {val}
30
- </Button>
31
- {/snippet}
32
- </CalendarMonthChip>
33
- </Story>
@@ -1,23 +0,0 @@
1
- <script module lang="ts">
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
- });
12
- </script>
13
-
14
- <Story name="Select" asChild>
15
- <CalendarMonthChip
16
- value="jan"
17
- onselect={(value, e) => {
18
- const target = e.target as HTMLButtonElement;
19
- alert(`CalendarMonthChip Select, ${value}`);
20
- console.log('CalendarMonthChip Select', value, target);
21
- }}
22
- />
23
- </Story>
@@ -1,26 +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
- <!-- Hover to see the result -->
18
- <Story name="Roundness 1" />
19
-
20
- <Story name="Roundness 2" args={{ roundness: 2 }} />
21
-
22
- <Story name="Roundness 3" args={{ roundness: 3 }} />
23
-
24
- <Story name="Roundness 0" args={{ roundness: 0 }} />
25
-
26
- <Story name="Roundness Full" args={{ roundness: 'full', compact: true }} />
@@ -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>