@flightlesslabs/dodo-ui 0.11.0 → 0.11.1

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

@@ -0,0 +1,75 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarDateChip from './CalendarDateChip.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+  import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
+  import { componentRoundnessArray } from '$lib/types/roundness.js';
+  import { componentColorArray } from '$lib/types/colors.js';
+  import { componentSizeArray } from '$lib/types/size.js';
+
+  export const storyCalendarDateChipArgTypes: StoryBookArgTypes = {
+    color: {
+      control: { type: 'select' },
+      options: componentColorArray,
+    },
+    roundness: {
+      control: { type: 'select' },
+      options: componentRoundnessArray,
+    },
+    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: CalendarDateChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarDateChipArgTypes,
+    args: {
+      dayOfMonth: {
+        id: '1',
+        date: getMoment().toDate(),
+        isCurrentMonth: true,
+      },
+    },
+  });
+</script>
+
+<!-- Default CalendarDateChip -->
+<Story name="Default" />
+
+<Story name="Selected" args={{ selected: true }} />
+
+<Story
+  name="Disabled"
+  args={{
+    dayOfMonth: {
+      id: '1',
+      date: getMoment().toDate(),
+      isCurrentMonth: true,
+      disabled: true,
+    },
+  }}
+/>
+
+<!-- Today marker. Checkout more [Special Chips](?path=/docs/components-info-calendar-calendardateschart-calendardatechip-specialchips--docs) -->
+<Story
+  name="Today"
+  args={{
+    dayOfMonth: {
+      id: '1',
+      date: getMoment().toDate(),
+      isCurrentMonth: true,
+      today: true,
+    },
+  }}
+/>
+
+<Story
+  name="Weekend"
+  args={{
+    weekend: true,
+  }}
+/>

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

@@ -0,0 +1,41 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarDateChip from '../CalendarDateChip.svelte';
+  import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.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: CalendarDateChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarDateChipArgTypes,
+    args: {
+      dayOfMonth: {
+        id: '1',
+        date: getMoment().toDate(),
+        isCurrentMonth: true,
+      },
+    },
+  });
+</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 }} />
+
+<Story name="Primary Today" args={{ color: 'primary', today: true }} />
+<Story name="Secondary Today" args={{ color: 'secondary', today: true }} />
+<Story name="Neutral Today" args={{ color: 'neutral', today: true }} />
+<Story name="Safe Today" args={{ color: 'safe', today: true }} />
+<Story name="Warning Today" args={{ color: 'warning', today: true }} />
+<Story name="Danger Today" args={{ color: 'danger', today: true }} />

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

@@ -0,0 +1,45 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarDateChip from '../CalendarDateChip.svelte';
+  import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.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: CalendarDateChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarDateChipArgTypes,
+  });
+</script>
+
+<!-- Custom Content  -->
+<Story name="customCalendarDateChipContent" asChild>
+  <CalendarDateChip
+    dayOfMonth={{
+      id: '1',
+      date: getMoment().toDate(),
+      isCurrentMonth: true,
+    }}
+  >
+    {#snippet customCalendarDateChipContent(dayOfMonth)}
+      🗓️{Number(getMoment(dayOfMonth.date).format('D'))}
+    {/snippet}
+  </CalendarDateChip>
+</Story>
+
+<!-- Custom Chip  -->
+<Story name="customCalendarDateChip" asChild>
+  <CalendarDateChip
+    dayOfMonth={{
+      id: '1',
+      date: getMoment().toDate(),
+      isCurrentMonth: true,
+    }}
+  >
+    {#snippet customCalendarDateChip(dayOfMonth)}
+      <Button size="small" variant="text" outline>
+        {Number(getMoment(dayOfMonth.date).format('D'))}
+      </Button>
+    {/snippet}
+  </CalendarDateChip>
+</Story>

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

@@ -0,0 +1,28 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarDateChip from '../CalendarDateChip.svelte';
+  import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.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: CalendarDateChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarDateChipArgTypes,
+  });
+</script>
+
+<Story name="Select" asChild>
+  <CalendarDateChip
+    dayOfMonth={{
+      id: '1',
+      date: getMoment().toDate(),
+      isCurrentMonth: true,
+    }}
+    onselect={(value, dayOfMonth, e) => {
+      const target = e.target as HTMLButtonElement;
+      alert(`CalendarDateChip Select, ${getMoment(value).format('DD-MM-YYYY')}`);
+      console.log('CalendarDateChip Select', dayOfMonth, target);
+    }}
+  />
+</Story>

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

@@ -0,0 +1,31 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarDateChip from '../CalendarDateChip.svelte';
+  import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.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: CalendarDateChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarDateChipArgTypes,
+    args: {
+      dayOfMonth: {
+        id: '1',
+        date: getMoment().toDate(),
+        isCurrentMonth: true,
+      },
+    },
+  });
+</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/CalendarDatesChart/CalendarDateChip/Size/Size.stories.svelte

@@ -0,0 +1,24 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarDateChip from '../CalendarDateChip.svelte';
+  import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.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: CalendarDateChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarDateChipArgTypes,
+    args: {
+      dayOfMonth: {
+        id: '1',
+        date: getMoment().toDate(),
+        isCurrentMonth: true,
+      },
+    },
+  });
+</script>
+
+<Story name="Normal" />
+<Story name="Small" args={{ size: 'small' }} />
+<Story name="Large" args={{ size: 'large' }} />

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

@@ -0,0 +1,96 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarDateChip from '../CalendarDateChip.svelte';
+  import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.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: CalendarDateChip,
+    tags: ['autodocs'],
+    argTypes: storyCalendarDateChipArgTypes,
+    args: {
+      dayOfMonth: {
+        id: '1',
+        date: getMoment().toDate(),
+        isCurrentMonth: true,
+      },
+    },
+  });
+</script>
+
+<Story
+  name="Today"
+  args={{
+    dayOfMonth: {
+      id: '1',
+      date: getMoment().toDate(),
+      isCurrentMonth: true,
+      today: true,
+    },
+  }}
+/>
+
+<!-- Dont highlight today. Show it as a plain date -->
+<Story
+  name="HideToday"
+  args={{
+    showToday: false,
+    dayOfMonth: {
+      id: '1',
+      date: getMoment().toDate(),
+      isCurrentMonth: true,
+      today: true,
+    },
+  }}
+/>
+
+<Story
+  name="LastMonth"
+  args={{
+    dayOfMonth: {
+      id: '1',
+      date: getMoment().toDate(),
+      isLastMonth: true,
+      isCurrentMonth: false,
+    },
+  }}
+/>
+
+<Story
+  name="HideLastMonth"
+  args={{
+    showLastMonth: false,
+    dayOfMonth: {
+      id: '1',
+      date: getMoment().toDate(),
+      isLastMonth: true,
+      isCurrentMonth: false,
+    },
+  }}
+/>
+
+<Story
+  name="NextMonth"
+  args={{
+    dayOfMonth: {
+      id: '1',
+      date: getMoment().toDate(),
+      isNextMonth: true,
+      isCurrentMonth: false,
+    },
+  }}
+/>
+
+<Story
+  name="HideNextMonth"
+  args={{
+    showNextMonth: false,
+    dayOfMonth: {
+      id: '1',
+      date: getMoment().toDate(),
+      isNextMonth: true,
+      isCurrentMonth: false,
+    },
+  }}
+/>

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

@@ -0,0 +1,104 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarDatesChart from './CalendarDatesChart.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+  import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
+  import { componentColorArray } from '$lib/types/colors.js';
+  import { calendarWeekNamesArray } from './CalendarWeek/CalendarWeek.svelte';
+  import { componentSizeArray } from '$lib/types/size.js';
+  import type { DateOfMonth } from '../../utils/types.js';
+
+  export const storyCalendarDatesChartArgTypes: StoryBookArgTypes = {
+    startOfWeek: {
+      control: { type: 'select' },
+      options: calendarWeekNamesArray,
+    },
+    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: CalendarDatesChart,
+    tags: ['autodocs'],
+    argTypes: storyCalendarDatesChartArgTypes,
+    args: {
+      value: getMoment().toDate(),
+    },
+  });
+</script>
+
+<!-- Default CalendarDatesChart -->
+<Story name="Default" />
+
+<Story
+  name="StartOfWeek"
+  args={{
+    startOfWeek: 'mon',
+  }}
+/>
+
+<Story
+  name="ActiveMonth"
+  args={{
+    activeMonth: getMoment('01-02-2025', 'DD-MM-YYYY').toDate(),
+  }}
+/>
+
+<Story
+  name="WeekendDays"
+  args={{
+    weekendDays: ['sun'],
+  }}
+/>
+
+<Story
+  name="WeekHeadingColorOnly"
+  args={{
+    weekendDays: ['sun'],
+    weekendDaysColorDays: false,
+  }}
+/>
+
+<Story
+  name="HideSelected"
+  args={{
+    showSelected: false,
+  }}
+/>
+
+<Story
+  name="HideLastMonth"
+  args={{
+    value: getMoment('01-03-2025', 'DD-MM-YYYY').toDate(),
+    showLastMonth: false,
+  }}
+/>
+
+<Story
+  name="HideNextMonth"
+  args={{
+    value: getMoment('01-03-2025', 'DD-MM-YYYY').toDate(),
+    showNextMonth: false,
+  }}
+/>
+
+<Story
+  name="ManipulateDate"
+  args={{
+    manipulateDate: (dateToModify: DateOfMonth) => {
+      // Disable all Fridays
+      if (getMoment(dateToModify.date, undefined).day() === 5) {
+        dateToModify.disabled = true;
+      }
+
+      return dateToModify;
+    },
+  }}
+/>

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

@@ -0,0 +1,38 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarWeek from './CalendarWeek.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+  import { componentSizeArray } from '$lib/types/size.js';
+
+  export const storyCalendarWeekArgTypes: StoryBookArgTypes = {
+    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: CalendarWeek,
+    tags: ['autodocs'],
+    argTypes: storyCalendarWeekArgTypes,
+  });
+</script>
+
+<!-- Default CalendarWeek -->
+<Story name="Default" />
+
+<Story
+  name="StartOfWeek"
+  args={{
+    startOfWeek: 'fri',
+  }}
+/>
+
+<!-- Shows weekend days in red color -->
+<Story
+  name="WeekendDays"
+  args={{
+    weekendDays: ['sun'],
+  }}
+/>

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

@@ -0,0 +1,32 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarWeek from '../CalendarWeek.svelte';
+  import { storyCalendarWeekArgTypes } from '../CalendarWeek.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarWeek,
+    tags: ['autodocs'],
+    argTypes: storyCalendarWeekArgTypes,
+  });
+</script>
+
+<!-- Custom Content  -->
+<Story name="customCalendarWeekContent" asChild>
+  <CalendarWeek>
+    {#snippet customCalendarWeekContent(option)}
+      ☀️{option.abr1}
+    {/snippet}
+  </CalendarWeek>
+</Story>
+
+<!-- Custom Week  -->
+<Story name="customCalendarWeek" asChild>
+  <CalendarWeek>
+    {#snippet customCalendarWeek(option)}
+      <li style="color: blue; display: block;">
+        {option.abr3}
+      </li>
+    {/snippet}
+  </CalendarWeek>
+</Story>

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

@@ -0,0 +1,28 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarWeek from '../CalendarWeek.svelte';
+  import { storyCalendarWeekArgTypes } from '../CalendarWeek.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarWeek,
+    tags: ['autodocs'],
+    argTypes: storyCalendarWeekArgTypes,
+  });
+</script>
+
+<Story name="Default" />
+
+<Story
+  name="SingleLetter"
+  args={{
+    nameType: 'abr1',
+  }}
+/>
+
+<Story
+  name="ThreeLetters"
+  args={{
+    nameType: 'abr3',
+  }}
+/>

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

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

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

@@ -0,0 +1,23 @@
+<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="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/CalendarDatesChart/Customize/Customize.stories.svelte

@@ -0,0 +1,68 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarDatesChart from '../CalendarDatesChart.svelte';
+  import { storyCalendarDatesChartArgTypes } from '../CalendarDatesChart.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: CalendarDatesChart,
+    tags: ['autodocs'],
+    argTypes: storyCalendarDatesChartArgTypes,
+    args: {
+      value: getMoment().toDate(),
+    },
+  });
+</script>
+
+<Story name="Default" />
+
+<Story
+  name="WeekNameSingleLetter"
+  args={{
+    weekDayNameType: 'abr1',
+  }}
+/>
+
+<Story
+  name="WeekNameThreeLetters"
+  args={{
+    weekDayNameType: 'abr3',
+  }}
+/>
+
+<Story name="customCalendarDateChipContent" asChild>
+  <CalendarDatesChart value={getMoment().toDate()}>
+    {#snippet customCalendarDateChipContent(dayOfMonth)}
+      🗓️{Number(getMoment(dayOfMonth.date).format('D'))}
+    {/snippet}
+  </CalendarDatesChart>
+</Story>
+
+<Story name="customCalendarDateChip" asChild>
+  <CalendarDatesChart value={getMoment().toDate()}>
+    {#snippet customCalendarDateChip(dayOfMonth)}
+      <Button size="small" variant="text" outline>
+        {Number(getMoment(dayOfMonth.date).format('D'))}
+      </Button>
+    {/snippet}
+  </CalendarDatesChart>
+</Story>
+
+<Story name="customCalendarWeekContent" asChild>
+  <CalendarDatesChart value={getMoment().toDate()}>
+    {#snippet customCalendarWeekContent(option)}
+      ☀️{option.abr1}
+    {/snippet}
+  </CalendarDatesChart>
+</Story>
+
+<Story name="customCalendarWeek" asChild>
+  <CalendarDatesChart value={getMoment().toDate()}>
+    {#snippet customCalendarWeek(option)}
+      <li style="color: blue; display: block;">
+        {option.abr3}
+      </li>
+    {/snippet}
+  </CalendarDatesChart>
+</Story>

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

@@ -0,0 +1,24 @@
+<script module lang="ts">
+  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,
+  });
+
+  let value = $state(getMoment().toDate());
+</script>
+
+<Story name="Select" asChild>
+  <CalendarDatesChart
+    {value}
+    onselect={(val) => {
+      value = val;
+    }}
+  />
+</Story>