@flightlesslabs/dodo-ui 0.19.0 → 0.20.0

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

@@ -1,236 +0,0 @@
-<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;
-    /** 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;
-
-    /** manipulate date callback */
-    manipulateDate?: (
-      dateToModify: DateOfMonth,
-      settings?: CreateDatesOfMonthSettings,
-    ) => DateOfMonth;
-  }
-</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 type { DateOfMonth } 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';
-  import { getDatesOfMonth } from '$lib/index.js';
-  import type { CreateDatesOfMonthSettings } from '../../utils/createDateOfMonth/createDateOfMonth.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,
-    manipulateDate,
-  }: CalendarDatesChartProps = $props();
-
-  let monthToPick = $state<Date | undefined>(undefined);
-
-  const daysGroup = $derived(
-    getDatesOfMonth(
-      monthToPick,
-      {
-        startOfWeek,
-        timezone,
-        utc,
-        today,
-        minDate,
-        maxDate,
-        excludeDates,
-        includeDates,
-      },
-      manipulateDate,
-    ) || [],
-  );
-
-  $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}
-            {...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

@@ -1,154 +0,0 @@
-<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

@@ -1,90 +0,0 @@
-<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>

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

@@ -1,217 +0,0 @@
-<script lang="ts" module>
-  export interface CalendarMonthChipProps {
-    /** CalendarDatesChart ref */
-    ref?: HTMLLIElement;
-    /** Custom css class */
-    class?: string;
-    /** How round should the border radius be? */
-    roundness?: ComponentRoundness;
-    /** What color to use? */
-    color?: ComponentColor;
-    /** Month value */
-    value: CalendarMonthNames;
-    /** Is Date Selected */
-    selected?: boolean;
-    /** onselect event handler */
-    onselect?: (value: CalendarMonthNames, e: ButtonClickEvent) => void;
-    /** Custom Calendar Chip Content */
-    customCalendarMonthChipContent?: (value: CalendarMonthNames) => Snippet;
-    /** Custom Calendar Chip Content */
-    customCalendarMonthChip?: (value: CalendarMonthNames) => Snippet;
-    /** How large should the Calendar Chip be? */
-    size?: ComponentSize;
-    /** Disabled */
-    disabled?: boolean;
-  }
-</script>
-
-<script lang="ts">
-  import type { ComponentColor } from '$lib/types/colors.js';
-
-  import type { ComponentRoundness } from '$lib/types/roundness.js';
-  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 { CalendarMonthNames } from '../../CalendarControls/CalendarMonthSelector/CalendarMonthSelector.svelte';
-
-  let {
-    class: className = '',
-    roundness = 2,
-    selected = false,
-    color = 'primary',
-    ref = $bindable<HTMLLIElement>(),
-    customCalendarMonthChipContent: customCalendarMonthChipContentInternal,
-    customCalendarMonthChip: customCalendarMonthChipInternal,
-    onselect,
-    size = 'normal',
-    value,
-    disabled = false,
-  }: CalendarMonthChipProps = $props();
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let customCalendarMonthChipContentTyped = customCalendarMonthChipContentInternal as any;
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let customCalendarMonthChipTyped = customCalendarMonthChipInternal as any;
-</script>
-
-{#snippet chipContent()}
-  {#if customCalendarMonthChipTyped}
-    {@render customCalendarMonthChipTyped(value)}
-  {:else}
-    <button class="chip" {disabled} onclick={onselect ? (e) => onselect(value, e) : undefined}>
-      {#if customCalendarMonthChipContentTyped}
-        {@render customCalendarMonthChipContentTyped(value)}
-      {:else}
-        {value}
-      {/if}
-    </button>
-  {/if}
-{/snippet}
-
-<li
-  class:disabled
-  class:selected
-  class={[
-    'dodo-ui-CalendarMonthChip',
-    `roundness--${roundness}`,
-    `color--${color}`,
-    `size--${size}`,
-    className,
-  ].join(' ')}
-  bind:this={ref}
->
-  {@render chipContent()}
-</li>
-
-<style lang="scss">
-  @use 'utils/scss/mixins.scss' as *;
-
-  :global(:root) {
-    --dodo-ui-CalendarMonthChip-disabled-bg: var(--dodo-color-neutral-50);
-    --dodo-ui-CalendarMonthChip-disabled-color: var(--dodo-color-neutral-400);
-
-    @include generate-dodo-ui-calendarMonthChip-colors(neutral);
-    @include generate-dodo-ui-calendarMonthChip-colors(primary);
-    @include generate-dodo-ui-calendarMonthChip-colors(secondary);
-    @include generate-dodo-ui-calendarMonthChip-colors(safe);
-    @include generate-dodo-ui-calendarMonthChip-colors(warning);
-    @include generate-dodo-ui-calendarMonthChip-colors(danger);
-  }
-
-  :global(.dodo-theme--dark) {
-    --dodo-ui-CalendarMonthChip-disabled-bg: var(--dodo-color-neutral-200);
-    --dodo-ui-CalendarMonthChip-disabled-color: var(--dodo-color-neutral-400);
-
-    @include generate-dodo-ui-calendarMonthChip-colors-dark(neutral);
-    @include generate-dodo-ui-calendarMonthChip-colors-dark(primary);
-    @include generate-dodo-ui-calendarMonthChip-colors-dark(secondary);
-    @include generate-dodo-ui-calendarMonthChip-colors-dark(safe);
-    @include generate-dodo-ui-calendarMonthChip-colors-dark(warning);
-    @include generate-dodo-ui-calendarMonthChip-colors-dark(danger);
-  }
-
-  .dodo-ui-CalendarMonthChip {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--dodo-color-neutral-800);
-    user-select: none;
-
-    &.roundness {
-      &--1 {
-        .chip {
-          border-radius: var(--dodo-ui-element-roundness-1);
-        }
-      }
-
-      &--2 {
-        .chip {
-          border-radius: var(--dodo-ui-element-roundness-2);
-        }
-      }
-
-      &--3 {
-        .chip {
-          border-radius: var(--dodo-ui-element-roundness-3);
-        }
-      }
-
-      &--full {
-        .chip {
-          border-radius: 50%;
-        }
-      }
-    }
-
-    &.size {
-      &--normal {
-        width: var(--dodo-ui-element-height-normal);
-        height: var(--dodo-ui-element-height-normal);
-        font-size: 1rem;
-      }
-
-      &--small {
-        width: var(--dodo-ui-element-height-small);
-        height: var(--dodo-ui-element-height-small);
-        font-size: 0.9rem;
-      }
-
-      &--large {
-        width: var(--dodo-ui-element-height-large);
-        height: var(--dodo-ui-element-height-large);
-        font-size: 1.1rem;
-      }
-    }
-
-    &.color {
-      @include generate-dodo-ui-calendarMonthChip-color(neutral);
-      @include generate-dodo-ui-calendarMonthChip-color(primary);
-      @include generate-dodo-ui-calendarMonthChip-color(secondary);
-      @include generate-dodo-ui-calendarMonthChip-color(safe);
-      @include generate-dodo-ui-calendarMonthChip-color(warning);
-      @include generate-dodo-ui-calendarMonthChip-color(danger);
-    }
-
-    .chip {
-      cursor: pointer;
-      outline: none;
-      letter-spacing: 0.3px;
-      transition: all 150ms;
-      text-decoration: none;
-      margin: 0;
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      font-family: inherit;
-      background-color: transparent;
-      transition: all 50ms;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      outline: 0;
-      border: 0;
-      color: inherit;
-      font-size: inherit;
-      text-transform: capitalize;
-
-      &[disabled] {
-        cursor: initial;
-        background-color: var(--dodo-ui-CalendarMonthChip-disabled-bg);
-        color: var(--dodo-ui-CalendarMonthChip-disabled-color);
-
-        &:hover {
-          background-color: var(--dodo-ui-CalendarMonthChip-disabled-bg);
-          color: var(--dodo-ui-CalendarMonthChip-disabled-color);
-        }
-
-        &:active {
-          background-color: var(--dodo-ui-CalendarMonthChip-disabled-bg);
-          color: var(--dodo-ui-CalendarMonthChip-disabled-color);
-        }
-      }
-    }
-  }
-</style>