@flightlesslabs/dodo-ui 0.10.3 → 0.11.1

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

@@ -0,0 +1,69 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarControls from '../CalendarControls.svelte';
+  import { storyCalendarControlsArgTypes } from '../CalendarControls.stories.svelte';
+  import { Button } from '$lib/index.js';
+  import Icon from '@iconify/svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarControls,
+    tags: ['autodocs'],
+    argTypes: storyCalendarControlsArgTypes,
+  });
+</script>
+
+<Story name="customCalendarMonthSelectorContent" asChild>
+  <CalendarControls>
+    {#snippet customCalendarMonthSelectorContent(option)}
+      🗓️{option.abr3}
+    {/snippet}
+  </CalendarControls>
+</Story>
+
+<Story name="customCalendarMonthSelector" asChild>
+  <CalendarControls>
+    {#snippet customCalendarMonthSelector(option)}
+      <span style="color: blue; display: block;">
+        {option.abr3}
+      </span>
+    {/snippet}
+  </CalendarControls>
+</Story>
+
+<Story name="customCalendarYearSelectorContent" asChild>
+  <CalendarControls>
+    {#snippet customCalendarYearSelectorContent(selectedYear)}
+      🗓️{selectedYear}
+    {/snippet}
+  </CalendarControls>
+</Story>
+
+<Story name="customCalendarYearSelector" asChild>
+  <CalendarControls>
+    {#snippet customCalendarYearSelector(selectedYear)}
+      <span style="color: blue; display: block;">
+        {selectedYear}
+      </span>
+    {/snippet}
+  </CalendarControls>
+</Story>
+
+<Story name="customCalendarNavigationContent" asChild>
+  <CalendarControls>
+    {#snippet customCalendarNavigationPrevContent()}
+      <Icon icon="carbon:previous-filled" width="32" height="32" />
+    {/snippet}
+    {#snippet customCalendarNavigationNextContent()}
+      <Icon icon="carbon:next-outline" width="32" height="32" />
+    {/snippet}
+  </CalendarControls>
+</Story>
+
+<Story name="customCalendarNavigation" asChild>
+  <CalendarControls>
+    {#snippet customCalendarNavigation()}
+      <Button>Control</Button>
+    {/snippet}
+  </CalendarControls>
+</Story>

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

@@ -0,0 +1,61 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarControls from '../CalendarControls.svelte';
+  import { storyCalendarControlsArgTypes } from '../CalendarControls.stories.svelte';
+  import type { ButtonClickEvent, CalendarMonthOption } from '$lib/index.js';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: CalendarControls,
+    tags: ['autodocs'],
+    argTypes: storyCalendarControlsArgTypes,
+  });
+</script>
+
+<Story
+  name="MonthSelectorClick"
+  args={{
+    onMonthSelectorClick: (option: CalendarMonthOption, e: ButtonClickEvent) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', option, target);
+    },
+  }}
+/>
+
+<Story
+  name="YearSelectorClick"
+  args={{
+    onYearSelectorClick: (selectedYear: string, e: ButtonClickEvent) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', selectedYear, target);
+    },
+  }}
+/>
+
+<Story
+  name="CalendarNavigationNextClick"
+  args={{
+    onCalendarNavigationNextClick: (e: ButtonClickEvent) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', target);
+    },
+  }}
+/>
+
+<Story
+  name="CalendarNavigationPrevClick"
+  args={{
+    onCalendarNavigationPrevClick: (e: ButtonClickEvent) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', target);
+    },
+  }}
+/>

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

@@ -0,0 +1,20 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CalendarControls from '../CalendarControls.svelte';
+  import { storyCalendarControlsArgTypes } from '../CalendarControls.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: CalendarControls,
+    tags: ['autodocs'],
+    argTypes: storyCalendarControlsArgTypes,
+    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/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/CalendarDateChip.svelte

@@ -20,13 +20,6 @@
     selected?: boolean;
     /** 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 Content */
@@ -39,11 +32,6 @@
     timezone?: string;
     /** Whether to return the time in UTC. If true, overrides timezone. */
     utc?: boolean;
-
-    /** Show Value Range */
-    showValueRange?: boolean;
-    /** Date Range Type */
-    rangeType?: DateRangeType;
   }
 </script>
 
@@ -55,7 +43,7 @@
   import type { Snippet } from 'svelte';
   import type { ButtonClickEvent } from '$lib/stories/components/Form/Button/Button.svelte';
   import type { ComponentSize } from '$lib/types/size.js';
-  import type { DateOfMonth, DateRangeType } from '../../../utils/types.js';
+  import type { DateOfMonth } from '../../../utils/types.js';
 
   let {
     class: className = '',
@@ -70,21 +58,15 @@
     customCalendarDateChipContent: customCalendarDateChipContentInternal,
     customCalendarDateChip: customCalendarDateChipInternal,
     onselect,
-    onselectRange,
     size = 'normal',
     weekend,
     timezone,
     utc,
-    showValueRange = false,
-    rangeType,
   }: CalendarDateChipProps = $props();
 
   const dayNumber = Number(getMoment(dayOfMonth.date, undefined, { timezone, utc }).format('D'));
   const disabled = dayOfMonth.disabled || false;
   const today = showToday && dayOfMonth.today ? true : false;
-  const isRangeStart = rangeType === 'start' || false;
-  const isRangeEnd = rangeType === 'end' || false;
-  const inRange = dayOfMonth.inRange || false;
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let customCalendarDateChipContentTyped = customCalendarDateChipContentInternal as any;
@@ -93,9 +75,7 @@
   let customCalendarDateChipTyped = customCalendarDateChipInternal as any;
 
   function onselectMod(e: ButtonClickEvent) {
-    if (showValueRange && onselectRange) {
-      onselectRange(dayOfMonth.date, rangeType || 'start', dayOfMonth, e);
-    } else if (onselect) {
+    if (onselect) {
       onselect(dayOfMonth.date, dayOfMonth, e);
     }
   }
@@ -121,9 +101,6 @@
   class:showNextMonth
   class:today
   class:selected
-  class:isRangeStart
-  class:isRangeEnd
-  class:inRange
   class:weekend
   class={[
     'dodo-ui-CalendarDateChip',

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/CalendarDateChip/utils/scss/mixins.scss

@@ -56,22 +56,6 @@
   --dodo-ui-CalendarDateChip-selected-#{$color-name}-active-bg: var(
     --dodo-color-#{$color-name}-100
   );
-
-  --dodo-ui-CalendarDateChip-isRangeStart-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
-  --dodo-ui-CalendarDateChip-isRangeStart-#{$color-name}-hover-bg: var(
-    --dodo-color-#{$color-name}-200
-  );
-  --dodo-ui-CalendarDateChip-isRangeStart-#{$color-name}-active-bg: var(
-    --dodo-color-#{$color-name}-100
-  );
-
-  --dodo-ui-CalendarDateChip-isRangeEnd-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
-  --dodo-ui-CalendarDateChip-isRangeEnd-#{$color-name}-hover-bg: var(
-    --dodo-color-#{$color-name}-200
-  );
-  --dodo-ui-CalendarDateChip-isRangeEnd-#{$color-name}-active-bg: var(
-    --dodo-color-#{$color-name}-100
-  );
 }
 
 /// Mixin: generate-dodo-ui-calendarDateChip-color
@@ -119,35 +103,5 @@
         }
       }
     }
-
-    &.isRangeStart {
-      .chip:not([disabled]) {
-        color: var(--dodo-color-constant-white);
-        background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-#{$theme}-bg);
-
-        &:hover {
-          background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-#{$theme}-hover-bg);
-        }
-
-        &:active {
-          background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-#{$theme}-active-bg);
-        }
-      }
-    }
-
-    &.isRangeEnd {
-      .chip:not([disabled]) {
-        color: var(--dodo-color-constant-white);
-        background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-#{$theme}-bg);
-
-        &:hover {
-          background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-#{$theme}-hover-bg);
-        }
-
-        &:active {
-          background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-#{$theme}-active-bg);
-        }
-      }
-    }
   }
 }