@flightlesslabs/dodo-ui 0.9.1 → 0.10.0

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

@@ -0,0 +1,266 @@
+<script lang="ts" module>
+  import type { ButtonClickEvent } from '$lib/stories/components/Form/Button/Button.svelte';
+
+  export interface CalendarDatesChartProps {
+    /** CalendarDatesChart ref */
+    ref?: HTMLUListElement;
+    /** Custom css class */
+    class?: string;
+    /** Selcted date Value */
+    value?: Date;
+    /** Define active month to override month selected with value */
+    activeMonth?: Date;
+    /** Start Of Week */
+    startOfWeek?: CalendarWeekNames;
+    /** Timezone string (e.g., "America/New_York"). */
+    timezone?: string;
+    /** Whether to return the time in UTC. If true, overrides timezone. */
+    utc?: boolean;
+    /** calendarDateChipProps: CalendarDateChip component props */
+    calendarDateChipProps?: Partial<CalendarDateChipProps>;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** Show Today */
+    showToday?: boolean;
+    /** Show last month dates */
+    showLastMonth?: boolean;
+    /** Show next month dates */
+    showNextMonth?: boolean;
+    /** Show slected */
+    showSelected?: boolean;
+    /** Set today manually  */
+    today?: Date;
+    /** Minimum allowed date, rest of the dates will be disabled  */
+    minDate?: Date;
+    /** Maxium allowed date, rest of the dates will be disabled  */
+    maxDate?: Date;
+    /** Exclude Dates, these dates will be disabled */
+    excludeDates?: Date[];
+    /** Include Dates, rest of the dates will be disabled  */
+    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 */
+    customCalendarDateChip?: (dayOfMonth: DateOfMonth) => Snippet;
+    /** Custom Calendar Week Content */
+    customCalendarWeekContent?: (week: CalendarWeekOption) => Snippet;
+    /** Custom Calendar Week */
+    customCalendarWeek?: (week: CalendarWeekOption) => Snippet;
+    /** week day Name type */
+    weekDayNameType?: CalendarWeekDayNameType;
+    /** How large should the Component be? */
+    size?: ComponentSize;
+    /** Weekend days */
+    weekendDays?: CalendarWeekNames[];
+    /** Color Weekend days */
+    weekendDaysColorDays?: boolean;
+
+    /** Range value */
+    rangeValue?: [Date, Date];
+  }
+</script>
+
+<script lang="ts">
+  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 CalendarDateChip, {
+    type CalendarDateChipProps,
+  } from './CalendarDateChip/CalendarDateChip.svelte';
+  import CalendarWeek from './CalendarWeek/CalendarWeek.svelte';
+  import type {
+    CalendarWeekOption,
+    CalendarWeekDayNameType,
+    CalendarWeekNames,
+  } from './CalendarWeek/CalendarWeek.svelte';
+  import type { ComponentSize } from '$lib/types/size.js';
+
+  let {
+    class: className = '',
+    ref = $bindable<HTMLUListElement>(),
+    value,
+    startOfWeek,
+    timezone,
+    utc,
+    calendarDateChipProps,
+    color,
+    showToday,
+    showLastMonth,
+    showNextMonth,
+    showSelected = true,
+    activeMonth,
+    onselect,
+    customCalendarDateChipContent,
+    customCalendarDateChip,
+    today,
+    minDate,
+    maxDate,
+    excludeDates,
+    includeDates,
+    weekDayNameType,
+    customCalendarWeekContent,
+    customCalendarWeek,
+    size = 'normal',
+    weekendDays,
+    weekendDaysColorDays = true,
+    rangeValue,
+    onselectRange,
+  }: CalendarDatesChartProps = $props();
+
+  let monthToPick = $state<Date | undefined>(undefined);
+
+  const daysGroup = $derived(
+    getDatesOfMonth(monthToPick, {
+      startOfWeek,
+      timezone,
+      utc,
+      today,
+      minDate,
+      maxDate,
+      excludeDates,
+      includeDates,
+      rangeValue,
+    }) || [],
+  );
+
+  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;
+      return;
+    }
+
+    // Override active month if it's not same as value
+    if (
+      activeMonth &&
+      getMoment(activeMonth, undefined, { timezone, utc }).format('MMM YYYY') !==
+        getMoment(value, undefined, { timezone, utc }).format('MMM YYYY')
+    ) {
+      monthToPick = activeMonth;
+    } else {
+      monthToPick = value;
+    }
+  });
+</script>
+
+<ul class={['dodo-ui-CalendarDatesChart', `size--${size}`, className].join(' ')} bind:this={ref}>
+  <CalendarWeek
+    nameType={weekDayNameType}
+    {startOfWeek}
+    {customCalendarWeekContent}
+    {customCalendarWeek}
+    {size}
+    {weekendDays}
+  />
+
+  {#each daysGroup as group, index (index)}
+    <li class="daysRow">
+      <ul>
+        {#each group as day (day.id)}
+          <CalendarDateChip
+            dayOfMonth={day}
+            {color}
+            {showToday}
+            {showLastMonth}
+            {showNextMonth}
+            selected={showSelected &&
+            getMoment(value, undefined, { timezone, utc }).format('DD-MM-YYY') ===
+              getMoment(day.date, undefined, { timezone, utc }).format('DD-MM-YYY')
+              ? true
+              : false}
+            {onselect}
+            {customCalendarDateChip}
+            {customCalendarDateChipContent}
+            {size}
+            {timezone}
+            {utc}
+            weekend={weekendDaysColorDays &&
+            weekendDays?.includes(
+              getMoment(day.date, undefined, { timezone, utc })
+                .format('ddd')
+                .toLowerCase() as CalendarWeekNames,
+            )
+              ? true
+              : false}
+            showValueRange={rangeValue ? true : false}
+            rangeType={getRangeType(day, rangeValue)}
+            {onselectRange}
+            {...calendarDateChipProps}
+          />
+        {/each}
+      </ul>
+    </li>
+  {/each}
+</ul>
+
+<style lang="scss">
+  .dodo-ui-CalendarDatesChart {
+    display: inline-flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    user-select: none;
+
+    ul {
+      padding: 0;
+      display: flex;
+      margin: 0;
+    }
+
+    .daysRow {
+      display: block;
+      padding: 0;
+      margin: 0;
+    }
+
+    &.size {
+      &--normal {
+        min-width: calc(var(--dodo-ui-element-height-normal) * 7);
+      }
+
+      &--small {
+        min-width: calc(var(--dodo-ui-element-height-small) * 7);
+      }
+
+      &--large {
+        min-width: calc(var(--dodo-ui-element-height-large) * 7);
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,154 @@
+<script lang="ts" module>
+  export type CalendarWeekNames = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';
+
+  export const calendarWeekNamesArray: CalendarWeekNames[] = [
+    'sun',
+    'mon',
+    'tue',
+    'wed',
+    'thu',
+    'fri',
+    'sat',
+  ];
+
+  export type CalendarWeekOption = {
+    value: DAYS_OF_WEEK;
+    abr3: CalendarWeekNames;
+    abr1: string;
+    abr2: string;
+    fullName: string;
+  };
+
+  export const calendarWeekOptions: CalendarWeekOption[] = [
+    {
+      value: DAYS_OF_WEEK.SUN,
+      abr3: 'sun',
+      abr1: 's',
+      abr2: 'su',
+      fullName: 'sunday',
+    },
+    {
+      value: DAYS_OF_WEEK.MON,
+      abr3: 'mon',
+      abr1: 'm',
+      abr2: 'mo',
+      fullName: 'monday',
+    },
+    {
+      value: DAYS_OF_WEEK.TUE,
+      abr3: 'tue',
+      abr1: 't',
+      abr2: 'tu',
+      fullName: 'tuesday',
+    },
+    {
+      value: DAYS_OF_WEEK.WED,
+      abr3: 'wed',
+      abr1: 'w',
+      abr2: 'we',
+      fullName: 'wednesday',
+    },
+    {
+      value: DAYS_OF_WEEK.THU,
+      abr3: 'thu',
+      abr1: 't',
+      abr2: 'th',
+      fullName: 'thursday',
+    },
+    {
+      value: DAYS_OF_WEEK.FRI,
+      abr3: 'fri',
+      abr1: 'f',
+      abr2: 'fr',
+      fullName: 'friday',
+    },
+    {
+      value: DAYS_OF_WEEK.SAT,
+      abr3: 'sat',
+      abr1: 's',
+      abr2: 'sa',
+      fullName: 'saturday',
+    },
+  ];
+
+  export type CalendarWeekDayNameType = 'abr3' | 'abr1' | 'abr2';
+
+  export interface CalendarWeekProps {
+    /** CalendarDatesChart ref */
+    ref?: HTMLLIElement;
+    /** Custom css class */
+    class?: string;
+    /** Custom Calendar Week Content */
+    customCalendarWeekContent?: (option: CalendarWeekOption) => Snippet;
+    /** Custom Calendar Week */
+    customCalendarWeek?: (option: CalendarWeekOption) => Snippet;
+    /**  Day Name type */
+    nameType?: CalendarWeekDayNameType;
+    /** Start Of Week */
+    startOfWeek?: CalendarWeekNames;
+    /** How large should the component be? */
+    size?: ComponentSize;
+    /** Weekend days */
+    weekendDays?: CalendarWeekNames[];
+  }
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { DAYS_OF_WEEK } from '../../../utils/types.js';
+  import type { ComponentSize } from '$lib/types/size.js';
+  import WeekDay from './WeekDay.svelte';
+
+  let {
+    class: className = '',
+    ref = $bindable<HTMLLIElement>(),
+    customCalendarWeekContent,
+    customCalendarWeek: customCalendarWeekInternal,
+    nameType = 'abr2',
+    startOfWeek = 'sun',
+    size = 'normal',
+    weekendDays,
+  }: CalendarWeekProps = $props();
+
+  function getOrderedWeekOptions(startOfWeek: CalendarWeekNames) {
+    const selectedOption =
+      calendarWeekOptions.find((item) => item.abr3 === startOfWeek) || calendarWeekOptions[0];
+
+    return [
+      ...calendarWeekOptions.slice(selectedOption.value),
+      ...calendarWeekOptions.slice(0, selectedOption.value),
+    ];
+  }
+
+  const orderedCalendarWeekOptions = $derived(getOrderedWeekOptions(startOfWeek));
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customCalendarWeekTyped = customCalendarWeekInternal as any;
+</script>
+
+<li class={['dodo-ui-CalendarWeek', `size--${size}`, className].join(' ')} bind:this={ref}>
+  <ul>
+    {#each orderedCalendarWeekOptions as option (option.value)}
+      {#if customCalendarWeekTyped}
+        {@render customCalendarWeekTyped(option)}
+      {:else}
+        <WeekDay weekOption={option} {nameType} {weekendDays} {customCalendarWeekContent} {size} />
+      {/if}
+    {/each}
+  </ul>
+</li>
+
+<style lang="scss">
+  .dodo-ui-CalendarWeek {
+    display: block;
+    padding: 0;
+    margin: 0;
+    margin-bottom: 8px;
+
+    ul {
+      padding: 0;
+      display: flex;
+      margin: 0;
+    }
+  }
+</style>

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

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { ComponentSize } from '$lib/types/size.js';
+  import type {
+    CalendarWeekOption,
+    CalendarWeekNames,
+    CalendarWeekDayNameType,
+  } from './CalendarWeek.svelte';
+
+  interface WeekDayProps {
+    /** Custom css class */
+    class?: string;
+    /** Custom Calendar Week Content */
+    customCalendarWeekContent?: (option: CalendarWeekOption) => Snippet;
+    /**  Day Name type */
+    nameType?: CalendarWeekDayNameType;
+    /** weekOption */
+    weekOption: CalendarWeekOption;
+    /** How large should the component be? */
+    size?: ComponentSize;
+    /** Weekend days */
+    weekendDays?: CalendarWeekNames[];
+  }
+
+  let {
+    class: className = '',
+    customCalendarWeekContent: customCalendarWeekContentInternal,
+    nameType = 'abr2',
+    size = 'normal',
+    weekendDays,
+    weekOption,
+  }: WeekDayProps = $props();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customCalendarWeekContentTyped = customCalendarWeekContentInternal as any;
+
+  const weekend = weekendDays?.includes(weekOption.abr3) ? true : false;
+</script>
+
+{#snippet weekName(option: CalendarWeekOption)}
+  {#if nameType === 'abr3'}
+    {option.abr3}
+  {:else if nameType === 'abr1'}
+    {option.abr1}
+  {:else if nameType === 'abr2'}
+    {option.abr2}
+  {:else}
+    {option.abr2}
+  {/if}
+{/snippet}
+
+<li class:weekend class={['WeekDay', `size--${size}`, className].join(' ')}>
+  {#if customCalendarWeekContentTyped}
+    {@render customCalendarWeekContentTyped(weekOption)}
+  {:else}
+    {@render weekName(weekOption)}
+  {/if}
+</li>
+
+<style lang="scss">
+  .WeekDay {
+    display: inline-flex;
+    justify-content: center;
+    font-family: inherit;
+    color: inherit;
+    text-transform: capitalize;
+    color: var(--dodo-color-neutral-700);
+
+    &.size {
+      &--normal {
+        font-size: 0.8rem;
+        width: var(--dodo-ui-element-height-normal);
+      }
+
+      &--small {
+        font-size: 0.74rem;
+        width: var(--dodo-ui-element-height-small);
+      }
+
+      &--large {
+        font-size: 1rem;
+        width: var(--dodo-ui-element-height-large);
+      }
+    }
+
+    &.weekend {
+      color: var(--dodo-color-danger-600);
+    }
+  }
+</style>