@flightlesslabs/dodo-ui 0.10.3 → 0.11.1

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/CalendarDatesChart.svelte

@@ -40,13 +40,6 @@
     includeDates?: Date[];
     /** onselect event handler */
     onselect?: (value: Date, dayOfMonth: DateOfMonth, e: ButtonClickEvent) => void;
-    /** onselectRange event handler */
-    onselectRange?: (
-      value: Date,
-      type: DateRangeType,
-      dayOfMonth: DateOfMonth,
-      e: ButtonClickEvent,
-    ) => void;
     /** Custom Calendar Chip Content */
     customCalendarDateChipContent?: (dayOfMonth: DateOfMonth) => Snippet;
     /** Custom Calendar Chip */
@@ -64,8 +57,11 @@
     /** Color Weekend days */
     weekendDaysColorDays?: boolean;
 
-    /** Range value */
-    rangeValue?: [Date, Date];
+    /** manipulate date callback */
+    manipulateDate?: (
+      dateToModify: DateOfMonth,
+      settings?: CreateDatesOfMonthSettings,
+    ) => DateOfMonth;
   }
 </script>
 
@@ -73,8 +69,7 @@
   import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
   import type { ComponentColor } from '$lib/types/colors.js';
   import type { Snippet } from 'svelte';
-  import getDatesOfMonth from '../../utils/getDatesOfMonth.js';
-  import type { DateOfMonth, DateRangeType } from '../../utils/types.js';
+  import type { DateOfMonth } from '../../utils/types.js';
   import CalendarDateChip, {
     type CalendarDateChipProps,
   } from './CalendarDateChip/CalendarDateChip.svelte';
@@ -85,6 +80,8 @@
     CalendarWeekNames,
   } from './CalendarWeek/CalendarWeek.svelte';
   import type { ComponentSize } from '$lib/types/size.js';
+  import { getDatesOfMonth } from '$lib/index.js';
+  import type { CreateDatesOfMonthSettings } from '../../utils/createDateOfMonth/createDateOfMonth.js';
 
   let {
     class: className = '',
@@ -114,52 +111,28 @@
     size = 'normal',
     weekendDays,
     weekendDaysColorDays = true,
-    rangeValue,
-    onselectRange,
+    manipulateDate,
   }: CalendarDatesChartProps = $props();
 
   let monthToPick = $state<Date | undefined>(undefined);
 
   const daysGroup = $derived(
-    getDatesOfMonth(monthToPick, {
-      startOfWeek,
-      timezone,
-      utc,
-      today,
-      minDate,
-      maxDate,
-      excludeDates,
-      includeDates,
-      rangeValue,
-    }) || [],
+    getDatesOfMonth(
+      monthToPick,
+      {
+        startOfWeek,
+        timezone,
+        utc,
+        today,
+        minDate,
+        maxDate,
+        excludeDates,
+        includeDates,
+      },
+      manipulateDate,
+    ) || [],
   );
 
-  function getRangeType(day: DateOfMonth, rangeValue?: [Date, Date]): DateRangeType | undefined {
-    if (!rangeValue) {
-      return undefined;
-    }
-
-    const [range1, range2] = rangeValue;
-
-    if (!range1 || !range2) {
-      return undefined;
-    }
-
-    if (
-      getMoment(range1, undefined, { timezone, utc }).format('MMM YYYY') ===
-      getMoment(day.date, undefined, { timezone, utc }).format('DD-MM-YYY')
-    ) {
-      return 'start';
-    } else if (
-      getMoment(range2, undefined, { timezone, utc }).format('MMM YYYY') ===
-      getMoment(day.date, undefined, { timezone, utc }).format('DD-MM-YYY')
-    ) {
-      return 'end';
-    }
-
-    return undefined;
-  }
-
   $effect(() => {
     if (!value) {
       monthToPick = activeMonth;
@@ -218,9 +191,6 @@
             )
               ? true
               : false}
-            showValueRange={rangeValue ? true : false}
-            rangeType={getRangeType(day, rangeValue)}
-            {onselectRange}
             {...calendarDateChipProps}
           />
         {/each}

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>

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' }} />