@flightlesslabs/dodo-ui 0.11.0 → 0.11.1

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Size/Size.stories.svelte

@@ -0,0 +1,20 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarDatesChart from '../CalendarDatesChart.svelte';
+  import { storyCalendarDatesChartArgTypes } from '../CalendarDatesChart.stories.svelte';
+  import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarDatesChart,
+    tags: ['autodocs'],
+    argTypes: storyCalendarDatesChartArgTypes,
+    args: {
+      value: getMoment().toDate(),
+    },
+  });
+</script>
+
+<Story name="Normal" />
+<Story name="Small" args={{ size: 'small' }} />
+<Story name="Large" args={{ size: 'large' }} />

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/CalendarMonthChip.stories.svelte

@@ -0,0 +1,40 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarMonthChip from './CalendarMonthChip.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+  import { componentColorArray } from '$lib/types/colors.js';
+  import { componentSizeArray } from '$lib/types/size.js';
+  import { componentRoundnessArray } from '$lib/types/roundness.js';
+
+  export const storyCalendarMonthChipArgTypes: StoryBookArgTypes = {
+    color: {
+      control: { type: 'select' },
+      options: componentColorArray,
+    },
+    size: {
+      control: { type: 'select' },
+      options: componentSizeArray,
+    },
+    roundness: {
+      control: { type: 'select' },
+      options: componentRoundnessArray,
+    },
+  };
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarMonthChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthChipArgTypes,
+    args: {
+      value: 'jan',
+    },
+  });
+</script>
+
+<!-- Default CalendarMonthChip -->
+<Story name="Default" />
+
+<Story name="Selected" args={{ selected: true }} />
+
+<Story name="Disabled" args={{ disabled: true }} />

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Color/Color.stories.svelte

@@ -0,0 +1,29 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarMonthChip from '../CalendarMonthChip.svelte';
+  import { storyCalendarMonthChipArgTypes } from '../CalendarMonthChip.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarMonthChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthChipArgTypes,
+    args: {
+      value: 'jan',
+    },
+  });
+</script>
+
+<Story name="Primary" />
+<Story name="Secondary" args={{ color: 'secondary' }} />
+<Story name="Neutral" args={{ color: 'neutral' }} />
+<Story name="Safe" args={{ color: 'safe' }} />
+<Story name="Warning" args={{ color: 'warning' }} />
+<Story name="Danger" args={{ color: 'danger' }} />
+
+<Story name="Primary Selected" args={{ color: 'primary', selected: true }} />
+<Story name="Secondary Selected" args={{ color: 'secondary', selected: true }} />
+<Story name="Neutral Selected" args={{ color: 'neutral', selected: true }} />
+<Story name="Safe Selected" args={{ color: 'safe', selected: true }} />
+<Story name="Warning Selected" args={{ color: 'warning', selected: true }} />
+<Story name="Danger Selected" args={{ color: 'danger', selected: true }} />

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Customize/Customize.stories.svelte

@@ -0,0 +1,33 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarMonthChip from '../CalendarMonthChip.svelte';
+  import { storyCalendarMonthChipArgTypes } from '../CalendarMonthChip.stories.svelte';
+  import { Button } from '$lib/index.js';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarMonthChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthChipArgTypes,
+  });
+</script>
+
+<!-- Custom Content  -->
+<Story name="customCalendarMonthChipContent" asChild>
+  <CalendarMonthChip value="jan">
+    {#snippet customCalendarMonthChipContent(val)}
+      🗓️{val}
+    {/snippet}
+  </CalendarMonthChip>
+</Story>
+
+<!-- Custom Chip  -->
+<Story name="customCalendarMonthChip" asChild>
+  <CalendarMonthChip value="jan">
+    {#snippet customCalendarMonthChip(val)}
+      <Button size="small" variant="text" outline>
+        {val}
+      </Button>
+    {/snippet}
+  </CalendarMonthChip>
+</Story>

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Events/Events.stories.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarMonthChip from '../CalendarMonthChip.svelte';
+  import { storyCalendarMonthChipArgTypes } from '../CalendarMonthChip.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarMonthChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthChipArgTypes,
+  });
+</script>
+
+<Story name="Select" asChild>
+  <CalendarMonthChip
+    value="jan"
+    onselect={(value, e) => {
+      const target = e.target as HTMLButtonElement;
+      alert(`CalendarMonthChip Select, ${value}`);
+      console.log('CalendarMonthChip Select', value, target);
+    }}
+  />
+</Story>

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Roundness/Roundness.stories.svelte

@@ -0,0 +1,26 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarMonthChip from '../CalendarMonthChip.svelte';
+  import { storyCalendarMonthChipArgTypes } from '../CalendarMonthChip.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarMonthChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthChipArgTypes,
+    args: {
+      value: 'jan',
+    },
+  });
+</script>
+
+<!-- Hover to see the result -->
+<Story name="Roundness 1" />
+
+<Story name="Roundness 2" args={{ roundness: 2 }} />
+
+<Story name="Roundness 3" args={{ roundness: 3 }} />
+
+<Story name="Roundness 0" args={{ roundness: 0 }} />
+
+<Story name="Roundness Full" args={{ roundness: 'full', compact: true }} />

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Size/Size.stories.svelte

@@ -0,0 +1,19 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarMonthChip from '../CalendarMonthChip.svelte';
+  import { storyCalendarMonthChipArgTypes } from '../CalendarMonthChip.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarMonthChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthChipArgTypes,
+    args: {
+      value: 'jan',
+    },
+  });
+</script>
+
+<Story name="Normal" />
+<Story name="Small" args={{ size: 'small' }} />
+<Story name="Large" args={{ size: 'large' }} />

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthList.stories.svelte

@@ -0,0 +1,45 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarMonthList from './CalendarMonthList.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+  import { componentColorArray } from '$lib/types/colors.js';
+  import { componentSizeArray } from '$lib/types/size.js';
+
+  export const storyCalendarMonthListArgTypes: StoryBookArgTypes = {
+    color: {
+      control: { type: 'select' },
+      options: componentColorArray,
+    },
+    size: {
+      control: { type: 'select' },
+      options: componentSizeArray,
+    },
+  };
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarMonthList,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthListArgTypes,
+    args: {
+      value: 'jan',
+    },
+  });
+</script>
+
+<!-- Default CalendarMonthList -->
+<Story name="Default" />
+
+<Story
+  name="DisabledMonths"
+  args={{
+    disabledMonths: ['feb', 'jul'],
+  }}
+/>
+
+<Story
+  name="HideControls"
+  args={{
+    showControls: false,
+  }}
+/>

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Color/Color.stories.svelte

@@ -0,0 +1,22 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarMonthList from '../CalendarMonthList.svelte';
+  import { storyCalendarMonthListArgTypes } from '../CalendarMonthList.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarMonthList,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthListArgTypes,
+    args: {
+      value: 'jan',
+    },
+  });
+</script>
+
+<Story name="Primary" />
+<Story name="Secondary" args={{ color: 'secondary' }} />
+<Story name="Neutral" args={{ color: 'neutral' }} />
+<Story name="Safe" args={{ color: 'safe' }} />
+<Story name="Warning" args={{ color: 'warning' }} />
+<Story name="Danger" args={{ color: 'danger' }} />

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Customize/Customize.stories.svelte

@@ -0,0 +1,36 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarMonthList from '../CalendarMonthList.svelte';
+  import { storyCalendarMonthListArgTypes } from '../CalendarMonthList.stories.svelte';
+  import { Button } from '$lib/index.js';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarMonthList,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthListArgTypes,
+    args: {
+      value: 'jan',
+    },
+  });
+</script>
+
+<Story name="Default" />
+
+<Story name="customCalendarMonthChipContent" asChild>
+  <CalendarMonthList value="jan">
+    {#snippet customCalendarMonthChipContent(val)}
+      🗓️{val}
+    {/snippet}
+  </CalendarMonthList>
+</Story>
+
+<Story name="customCalendarMonthChip" asChild>
+  <CalendarMonthList value="jan">
+    {#snippet customCalendarMonthChip(val)}
+      <Button size="small" variant="text" outline>
+        {val}
+      </Button>
+    {/snippet}
+  </CalendarMonthList>
+</Story>

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Events/Events.stories.svelte

@@ -0,0 +1,33 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarMonthList from '../CalendarMonthList.svelte';
+  import { storyCalendarMonthListArgTypes } from '../CalendarMonthList.stories.svelte';
+  import type { CalendarMonthNames } from '../../CalendarControls/CalendarMonthSelector/CalendarMonthSelector.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarMonthList,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthListArgTypes,
+  });
+
+  let value = $state<CalendarMonthNames>('jan');
+</script>
+
+<Story name="Select" asChild>
+  <CalendarMonthList
+    {value}
+    onselect={(val) => {
+      value = val;
+    }}
+  />
+</Story>
+
+<Story name="Cancel" asChild>
+  <CalendarMonthList
+    {value}
+    oncancel={() => {
+      console.log('oncancel');
+    }}
+  />
+</Story>

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Size/Size.stories.svelte

@@ -0,0 +1,19 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarMonthList from '../CalendarMonthList.svelte';
+  import { storyCalendarMonthListArgTypes } from '../CalendarMonthList.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarMonthList,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthListArgTypes,
+    args: {
+      value: 'jan',
+    },
+  });
+</script>
+
+<Story name="Normal" />
+<Story name="Small" args={{ size: 'small' }} />
+<Story name="Large" args={{ size: 'large' }} />

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/CalendarYearChip.stories.svelte

@@ -0,0 +1,41 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarYearChip from './CalendarYearChip.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+  import { componentColorArray } from '$lib/types/colors.js';
+  import { componentSizeArray } from '$lib/types/size.js';
+  import { componentRoundnessArray } from '$lib/types/roundness.js';
+  import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
+
+  export const storyCalendarYearChipArgTypes: StoryBookArgTypes = {
+    color: {
+      control: { type: 'select' },
+      options: componentColorArray,
+    },
+    size: {
+      control: { type: 'select' },
+      options: componentSizeArray,
+    },
+    roundness: {
+      control: { type: 'select' },
+      options: componentRoundnessArray,
+    },
+  };
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarYearChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarYearChipArgTypes,
+    args: {
+      value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
+    },
+  });
+</script>
+
+<!-- Default CalendarYearChip -->
+<Story name="Default" />
+
+<Story name="Selected" args={{ selected: true }} />
+
+<Story name="Disabled" args={{ disabled: true }} />

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Color/Color.stories.svelte

@@ -0,0 +1,30 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarYearChip from '../../CalendarYearChip/CalendarYearChip.svelte';
+  import { storyCalendarYearChipArgTypes } from '../../CalendarYearChip/CalendarYearChip.stories.svelte';
+  import { getMoment } from '$lib/index.js';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarYearChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarYearChipArgTypes,
+    args: {
+      value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
+    },
+  });
+</script>
+
+<Story name="Primary" />
+<Story name="Secondary" args={{ color: 'secondary' }} />
+<Story name="Neutral" args={{ color: 'neutral' }} />
+<Story name="Safe" args={{ color: 'safe' }} />
+<Story name="Warning" args={{ color: 'warning' }} />
+<Story name="Danger" args={{ color: 'danger' }} />
+
+<Story name="Primary Selected" args={{ color: 'primary', selected: true }} />
+<Story name="Secondary Selected" args={{ color: 'secondary', selected: true }} />
+<Story name="Neutral Selected" args={{ color: 'neutral', selected: true }} />
+<Story name="Safe Selected" args={{ color: 'safe', selected: true }} />
+<Story name="Warning Selected" args={{ color: 'warning', selected: true }} />
+<Story name="Danger Selected" args={{ color: 'danger', selected: true }} />

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Customize/Customize.stories.svelte

@@ -0,0 +1,33 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarYearChip from '../CalendarYearChip.svelte';
+  import { storyCalendarYearChipArgTypes } from '../CalendarYearChip.stories.svelte';
+  import { Button, getMoment } from '$lib/index.js';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarYearChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarYearChipArgTypes,
+  });
+</script>
+
+<!-- Custom Content  -->
+<Story name="customCalendarYearChipContent" asChild>
+  <CalendarYearChip value={getMoment(undefined, undefined, { utc: true }).format('YYYY')}>
+    {#snippet customCalendarYearChipContent(val)}
+      🗓️{val}
+    {/snippet}
+  </CalendarYearChip>
+</Story>
+
+<!-- Custom Chip  -->
+<Story name="customCalendarYearChip" asChild>
+  <CalendarYearChip value={getMoment(undefined, undefined, { utc: true }).format('YYYY')}>
+    {#snippet customCalendarYearChip(val)}
+      <Button size="small" variant="text" outline>
+        {val}
+      </Button>
+    {/snippet}
+  </CalendarYearChip>
+</Story>

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Events/Events.stories.svelte

@@ -0,0 +1,24 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarYearChip from '../CalendarYearChip.svelte';
+  import { storyCalendarYearChipArgTypes } from '../CalendarYearChip.stories.svelte';
+  import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarYearChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarYearChipArgTypes,
+  });
+</script>
+
+<Story name="Select" asChild>
+  <CalendarYearChip
+    value={getMoment(undefined, undefined, { utc: true }).format('YYYY')}
+    onselect={(value, e) => {
+      const target = e.target as HTMLButtonElement;
+      alert(`CalendarYearChip Select, ${value}`);
+      console.log('CalendarYearChip Select', value, target);
+    }}
+  />
+</Story>

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Roundness/Roundness.stories.svelte

@@ -0,0 +1,27 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarYearChip from '../CalendarYearChip.svelte';
+  import { storyCalendarYearChipArgTypes } from '../CalendarYearChip.stories.svelte';
+  import { getMoment } from '$lib/index.js';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarYearChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarYearChipArgTypes,
+    args: {
+      value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
+    },
+  });
+</script>
+
+<!-- Hover to see the result -->
+<Story name="Roundness 1" />
+
+<Story name="Roundness 2" args={{ roundness: 2 }} />
+
+<Story name="Roundness 3" args={{ roundness: 3 }} />
+
+<Story name="Roundness 0" args={{ roundness: 0 }} />
+
+<Story name="Roundness Full" args={{ roundness: 'full', compact: true }} />

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Size/Size.stories.svelte

@@ -0,0 +1,20 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarYearChip from '../CalendarYearChip.svelte';
+  import { storyCalendarYearChipArgTypes } from '../CalendarYearChip.stories.svelte';
+  import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarYearChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarYearChipArgTypes,
+    args: {
+      value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
+    },
+  });
+</script>
+
+<Story name="Normal" />
+<Story name="Small" args={{ size: 'small' }} />
+<Story name="Large" args={{ size: 'large' }} />

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearList.stories.svelte

@@ -0,0 +1,39 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarYearList from './CalendarYearList.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+  import { componentColorArray } from '$lib/types/colors.js';
+  import { componentSizeArray } from '$lib/types/size.js';
+  import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
+
+  export const storyCalendarYearListArgTypes: StoryBookArgTypes = {
+    color: {
+      control: { type: 'select' },
+      options: componentColorArray,
+    },
+    size: {
+      control: { type: 'select' },
+      options: componentSizeArray,
+    },
+  };
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarYearList,
+    tags: ['autodocs'],
+    argTypes: storyCalendarYearListArgTypes,
+    args: {
+      value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
+    },
+  });
+</script>
+
+<!-- Default CalendarYearList -->
+<Story name="Default" />
+
+<Story
+  name="HideControls"
+  args={{
+    showControls: false,
+  }}
+/>

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Color/Color.stories.svelte

@@ -0,0 +1,23 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarYearList from '../CalendarYearList.svelte';
+  import { storyCalendarYearListArgTypes } from '../CalendarYearList.stories.svelte';
+  import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarYearList,
+    tags: ['autodocs'],
+    argTypes: storyCalendarYearListArgTypes,
+    args: {
+      value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
+    },
+  });
+</script>
+
+<Story name="Primary" />
+<Story name="Secondary" args={{ color: 'secondary' }} />
+<Story name="Neutral" args={{ color: 'neutral' }} />
+<Story name="Safe" args={{ color: 'safe' }} />
+<Story name="Warning" args={{ color: 'warning' }} />
+<Story name="Danger" args={{ color: 'danger' }} />

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Customize/Customize.stories.svelte

@@ -0,0 +1,36 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarYearList from '../CalendarYearList.svelte';
+  import { storyCalendarYearListArgTypes } from '../CalendarYearList.stories.svelte';
+  import { Button, getMoment } from '$lib/index.js';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarYearList,
+    tags: ['autodocs'],
+    argTypes: storyCalendarYearListArgTypes,
+    args: {
+      value: getMoment(undefined, undefined, { utc: true }).format('YYYY'),
+    },
+  });
+</script>
+
+<Story name="Default" />
+
+<Story name="customCalendarYearChipContent" asChild>
+  <CalendarYearList value={getMoment(undefined, undefined, { utc: true }).format('YYYY')}>
+    {#snippet customCalendarYearChipContent(val)}
+      🗓️{val}
+    {/snippet}
+  </CalendarYearList>
+</Story>
+
+<Story name="customCalendarYearChip" asChild>
+  <CalendarYearList value={getMoment(undefined, undefined, { utc: true }).format('YYYY')}>
+    {#snippet customCalendarYearChip(val)}
+      <Button size="small" variant="text" outline>
+        {val}
+      </Button>
+    {/snippet}
+  </CalendarYearList>
+</Story>