@flightlesslabs/dodo-ui 0.9.0 → 0.10.0

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

@@ -0,0 +1,271 @@
+<script lang="ts" module>
+  export interface CalendarControlsProps {
+    /** CalendarControls ref */
+    ref?: HTMLDivElement;
+    /** Custom css class */
+    class?: string;
+    /** Selcted date Value */
+    value?: Date;
+    /** Define active month to override month selected with value */
+    activeMonth?: Date;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** Timezone string (e.g., "America/New_York"). */
+    timezone?: string;
+    /** Whether to return the time in UTC. If true, overrides timezone. */
+    utc?: boolean;
+    /** How large should the Component be? */
+    size?: ComponentSize;
+    /** Show Month Selector */
+    showCalendarMonthSelector?: boolean;
+    /** Show Year Selector */
+    showCalendarYearSelector?: boolean;
+    /** Show Navigator */
+    showCalendarNavigator?: boolean;
+    /** Custom Calendar Controls */
+    customCalendarControls?: () => Snippet;
+    /** Month Selector Props */
+    calendarMonthSelectorProps?: Partial<CalendarMonthSelectorProps>;
+    /** Custom MonthSelector */
+    customCalendarMonthSelector?: (option: CalendarMonthOption) => Snippet;
+    /** Custom MonthSelector Content */
+    customCalendarMonthSelectorContent?: (option: CalendarMonthOption) => Snippet;
+    /** Month Selector Click */
+    onMonthSelectorClick?: (option: CalendarMonthOption, e: ButtonClickEvent) => void;
+    /** Year Selector Props */
+    calendarYearSelectorProps?: Partial<CalendarYearSelectorProps>;
+    /** Custom YearSelector */
+    customCalendarYearSelector?: (selectedYear: string) => Snippet;
+    /** Custom YearSelector Content */
+    customCalendarYearSelectorContent?: (selectedYear: string) => Snippet;
+    /** Year Selector Click */
+    onYearSelectorClick?: (selectedYear: string, e: ButtonClickEvent) => void;
+
+    /** Calendar Navigation Props */
+    calendarNavigationProps?: Partial<CalendarYearSelectorProps>;
+    /** Navigation Next */
+    onCalendarNavigationNextClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Navigation Previous */
+    onCalendarNavigationPrevClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Custom YearSelector */
+    customCalendarNavigation?: () => Snippet;
+    /** Custom NavigationNext */
+    customCalendarNavigationNext?: () => Snippet;
+    /** Custom NavigationPrev */
+    customCalendarNavigationPrev?: () => Snippet;
+    /** Custom NavigationNext Content */
+    customCalendarNavigationNextContent?: () => Snippet;
+    /** Custom NavigationPrev Content */
+    customCalendarNavigationPrevContent?: () => Snippet;
+    /** Next disabled state */
+    disabledCalendarNavigationNext?: boolean;
+    /** Prev disabled state */
+    disabledCalendarNavigationPrev?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  import type { ComponentColor } from '$lib/types/colors.js';
+  import type { ComponentSize } from '$lib/types/size.js';
+  import type { Snippet } from 'svelte';
+  import type {
+    CalendarMonthOption,
+    CalendarMonthSelectorProps,
+  } from './CalendarMonthSelector/CalendarMonthSelector.svelte';
+  import CalendarMonthSelector from './CalendarMonthSelector/CalendarMonthSelector.svelte';
+  import type { ButtonClickEvent } from '$lib/stories/components/Form/Button/Button.svelte';
+  import CalendarYearSelector, {
+    type CalendarYearSelectorProps,
+  } from './CalendarYearSelector/CalendarYearSelector.svelte';
+  import type { MouseEventHandler } from 'svelte/elements';
+  import { CalendarNavigation, getMoment } from '$lib/index.js';
+
+  let {
+    class: className = '',
+    ref = $bindable<HTMLDivElement>(),
+    value,
+    timezone,
+    utc,
+    activeMonth,
+    size,
+    color,
+    customCalendarControls: customCalendarControlsInternal,
+    showCalendarMonthSelector = true,
+    showCalendarYearSelector = true,
+    showCalendarNavigator = true,
+    calendarMonthSelectorProps,
+    customCalendarMonthSelector,
+    customCalendarMonthSelectorContent,
+    onMonthSelectorClick,
+    calendarYearSelectorProps,
+    customCalendarYearSelector,
+    customCalendarYearSelectorContent,
+    onYearSelectorClick,
+    calendarNavigationProps,
+    customCalendarNavigation,
+    customCalendarNavigationNext,
+    customCalendarNavigationPrev,
+    customCalendarNavigationNextContent,
+    customCalendarNavigationPrevContent,
+    onCalendarNavigationNextClick,
+    onCalendarNavigationPrevClick,
+    disabledCalendarNavigationNext,
+    disabledCalendarNavigationPrev,
+  }: CalendarControlsProps = $props();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customCalendarControlsTyped = customCalendarControlsInternal as any;
+
+  const timeMoment = $derived(getMoment(activeMonth || value, undefined, { timezone, utc }));
+</script>
+
+<div class={['dodo-ui-CalendarControls', `size--${size}`, className].join(' ')} bind:this={ref}>
+  {#if customCalendarControlsTyped}
+    {@render customCalendarControlsTyped()}
+  {:else}
+    <div class="periodControls">
+      {#if showCalendarMonthSelector}
+        <CalendarMonthSelector
+          {value}
+          {timezone}
+          {utc}
+          {activeMonth}
+          {size}
+          {color}
+          {customCalendarMonthSelector}
+          {customCalendarMonthSelectorContent}
+          onclick={onMonthSelectorClick}
+          {...calendarMonthSelectorProps}
+        />
+      {:else}
+        <h3>{timeMoment.format('MMM')}</h3>
+      {/if}
+
+      {#if showCalendarYearSelector}
+        <CalendarYearSelector
+          {value}
+          {timezone}
+          {utc}
+          {activeMonth}
+          {size}
+          {color}
+          {customCalendarYearSelector}
+          {customCalendarYearSelectorContent}
+          onclick={onYearSelectorClick}
+          {...calendarYearSelectorProps}
+        />
+      {:else}
+        <h3>{timeMoment.format('YYYY')}</h3>
+      {/if}
+    </div>
+
+    {#if showCalendarNavigator}
+      <div class="navigationControls">
+        <CalendarNavigation
+          {size}
+          {color}
+          {customCalendarNavigationNext}
+          {customCalendarNavigationPrev}
+          {customCalendarNavigationNextContent}
+          {customCalendarNavigationPrevContent}
+          {onCalendarNavigationNextClick}
+          {onCalendarNavigationPrevClick}
+          {disabledCalendarNavigationNext}
+          {disabledCalendarNavigationPrev}
+          {customCalendarNavigation}
+          {...calendarNavigationProps}
+        />
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style lang="scss">
+  .dodo-ui-CalendarControls {
+    display: flex;
+    align-items: center;
+    margin-bottom: calc(var(--dodo-ui-space) * 2);
+
+    &:empty {
+      display: none;
+    }
+
+    h3 {
+      font-weight: 400;
+      margin: 0;
+      letter-spacing: 0.3px;
+      font-family: inherit;
+      color: var(--dodo-color-neutral-800);
+      text-align: center;
+    }
+
+    &.size {
+      &--normal {
+        margin-bottom: calc(var(--dodo-ui-space-large) * 2);
+
+        .periodControls {
+          margin: 0 calc(calc(var(--dodo-ui-space) / 2) * -1);
+          :global(.dodo-ui-Button) {
+            margin: 0 calc(var(--dodo-ui-space) / 2);
+          }
+        }
+
+        h3 {
+          font-size: 1rem;
+          margin: 0 calc(var(--dodo-ui-space) / 2);
+        }
+      }
+
+      &--small {
+        margin-bottom: calc(var(--dodo-ui-space) * 2);
+
+        .periodControls {
+          margin: 0 calc(calc(var(--dodo-ui-space-small) / 2) * -1);
+          :global(.dodo-ui-Button) {
+            margin: 0 calc(var(--dodo-ui-space-small) / 2);
+          }
+        }
+
+        h3 {
+          font-size: 0.9rem;
+          margin: 0 calc(var(--dodo-ui-space-small) / 2);
+        }
+      }
+
+      &--large {
+        margin-bottom: calc(var(--dodo-ui-space) * 3);
+
+        .periodControls {
+          margin: 0 calc(calc(var(--dodo-ui-space-large) / 2) * -1);
+          :global(.dodo-ui-Button) {
+            margin: 0 calc(var(--dodo-ui-space-large) / 2);
+          }
+        }
+
+        h3 {
+          font-size: 1.1rem;
+          margin: 0 calc(var(--dodo-ui-space-large) / 2);
+        }
+      }
+    }
+
+    .periodControls {
+      display: flex;
+      align-items: center;
+
+      &:empty {
+        display: none;
+      }
+    }
+
+    .navigationControls {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+
+      &:empty {
+        display: none;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,199 @@
+<script lang="ts" module>
+  import type { ComponentColor } from '$lib/types/colors.js';
+  import type { ComponentSize } from '$lib/types/size.js';
+
+  import type {
+    ButtonClickEvent,
+    ButtonProps,
+  } from '$lib/stories/components/Form/Button/Button.svelte';
+  import { MONTHS } from '../../../utils/types.js';
+  import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
+  import { Button, type ComponentRoundness } from '$lib/index.js';
+  import type { Snippet } from 'svelte';
+  import Icon from '@iconify/svelte';
+
+  export type CalendarMonthNames =
+    | 'jan'
+    | 'feb'
+    | 'mar'
+    | 'apr'
+    | 'may'
+    | 'jun'
+    | 'jul'
+    | 'aug'
+    | 'sep'
+    | 'oct'
+    | 'nov'
+    | 'dec';
+
+  export type CalendarMonthOption = {
+    value: MONTHS;
+    abr3: CalendarMonthNames;
+    fullName: string;
+  };
+
+  export const calendarMonthOptions: CalendarMonthOption[] = [
+    { value: MONTHS.JAN, abr3: 'jan', fullName: 'January' },
+    { value: MONTHS.FEB, abr3: 'feb', fullName: 'February' },
+    { value: MONTHS.MAR, abr3: 'mar', fullName: 'March' },
+    { value: MONTHS.APR, abr3: 'apr', fullName: 'April' },
+    { value: MONTHS.MAY, abr3: 'may', fullName: 'May' },
+    { value: MONTHS.JUN, abr3: 'jun', fullName: 'June' },
+    { value: MONTHS.JUL, abr3: 'jul', fullName: 'July' },
+    { value: MONTHS.AUG, abr3: 'aug', fullName: 'August' },
+    { value: MONTHS.SEP, abr3: 'sep', fullName: 'September' },
+    { value: MONTHS.OCT, abr3: 'oct', fullName: 'October' },
+    { value: MONTHS.NOV, abr3: 'nov', fullName: 'November' },
+    { value: MONTHS.DEC, abr3: 'dec', fullName: 'December' },
+  ];
+
+  export type calendarMonthNameType = 'abr3' | 'fullName';
+
+  export interface CalendarMonthSelectorProps {
+    /** CalendarMonthSelector ref */
+    ref?: HTMLDivElement;
+    /** Custom css class */
+    class?: string;
+    /** Selcted date Value */
+    value?: Date;
+    /** Define active month to override month selected with value */
+    activeMonth?: Date;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** Timezone string (e.g., "America/New_York"). */
+    timezone?: string;
+    /** Whether to return the time in UTC. If true, overrides timezone. */
+    utc?: boolean;
+    /** How large should the Component be? */
+    size?: ComponentSize;
+    /** buttonProps */
+    buttonProps?: Partial<ButtonProps>;
+    /**  month Name type */
+    nameType?: calendarMonthNameType;
+    /** The onclick event handler */
+    onclick?: (option: CalendarMonthOption, e: ButtonClickEvent) => void;
+    /** Custom MonthSelector */
+    customCalendarMonthSelector?: (option: CalendarMonthOption) => Snippet;
+    /** Custom MonthSelector Content */
+    customCalendarMonthSelectorContent?: (option: CalendarMonthOption) => Snippet;
+    /** Button disabled state */
+    disabled?: boolean;
+    /** How round should the border radius be? */
+    roundness?: ComponentRoundness;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    class: className = '',
+    ref = $bindable<HTMLDivElement>(),
+    value,
+    timezone,
+    utc,
+    activeMonth,
+    size,
+    color,
+    buttonProps,
+    nameType,
+    onclick,
+    disabled,
+    roundness = 2,
+    customCalendarMonthSelector: customCalendarMonthSelectorInternal,
+    customCalendarMonthSelectorContent: customCalendarMonthSelectorContentInternal,
+  }: CalendarMonthSelectorProps = $props();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customCalendarMonthSelectorTyped = customCalendarMonthSelectorInternal as any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customCalendarMonthSelectorContentTyped = customCalendarMonthSelectorContentInternal as any;
+
+  let selectedMonth = $derived<string | undefined>(
+    getMoment(activeMonth || value, undefined, {
+      timezone,
+      utc,
+    })
+      .format('MMM')
+      .toLocaleLowerCase(),
+  );
+
+  const monthDetails = $derived(
+    calendarMonthOptions.find((item) => item.abr3 === selectedMonth) || calendarMonthOptions[0],
+  );
+
+  function onClickMod(e: ButtonClickEvent) {
+    if (onclick) {
+      onclick(monthDetails, e);
+    }
+  }
+</script>
+
+{#snippet monthName(option: CalendarMonthOption)}
+  {#if customCalendarMonthSelectorContentTyped}
+    {@render customCalendarMonthSelectorContentTyped(option)}
+  {:else if nameType === 'abr3'}
+    {option.abr3}
+  {:else if nameType === 'fullName'}
+    {option.fullName}
+  {:else}
+    {option.abr3}
+  {/if}
+{/snippet}
+
+<div
+  class={['dodo-ui-CalendarMonthSelector', `size--${size}`, `color--${color}`, className].join(' ')}
+  bind:this={ref}
+>
+  <Button
+    name="month-selector"
+    variant="text"
+    {color}
+    {disabled}
+    {roundness}
+    onclick={onClickMod}
+    {size}
+    {...buttonProps}
+  >
+    {#if customCalendarMonthSelectorTyped}
+      {@render customCalendarMonthSelectorTyped(monthDetails)}
+    {:else}
+      {@render monthName(monthDetails)}
+    {/if}
+
+    {#snippet after()}
+      <Icon icon="material-symbols:arrow-drop-down-rounded" width="24" height="24" />
+    {/snippet}
+  </Button>
+</div>
+
+<style lang="scss">
+  .dodo-ui-CalendarMonthSelector {
+    :global(.dodo-ui-Button) {
+      text-transform: capitalize;
+    }
+
+    :global(.dodo-ui-Button .content--after) {
+      margin-left: auto;
+    }
+
+    &.size {
+      &--normal {
+        :global(.dodo-ui-Button) {
+          width: 80px;
+        }
+      }
+
+      &--small {
+        :global(.dodo-ui-Button) {
+          width: 70px;
+        }
+      }
+
+      &--large {
+        :global(.dodo-ui-Button) {
+          width: 100px;
+        }
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,128 @@
+<script lang="ts" module>
+  import type { ComponentColor } from '$lib/types/colors.js';
+  import type { ComponentSize } from '$lib/types/size.js';
+  import type { ButtonProps } from '$lib/stories/components/Form/Button/Button.svelte';
+  import type { Snippet } from 'svelte';
+  import type { MouseEventHandler } from 'svelte/elements';
+  import NavigationButton from './NavigationButton.svelte';
+  import Icon from '@iconify/svelte';
+
+  export interface CalendarNavigationProps {
+    /** CalendarNavigation ref */
+    ref?: HTMLDivElement;
+    /** Custom css class */
+    class?: string;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** How large should the Component be? */
+    size?: ComponentSize;
+    /** buttonProps */
+    buttonProps?: Partial<ButtonProps>;
+    /** Navigation Next */
+    onCalendarNavigationNextClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Navigation Previous */
+    onCalendarNavigationPrevClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Custom YearSelector */
+    customCalendarNavigation?: () => Snippet;
+    /** Custom NavigationNext */
+    customCalendarNavigationNext?: () => Snippet;
+    /** Custom NavigationPrev */
+    customCalendarNavigationPrev?: () => Snippet;
+    /** Custom NavigationNext Content */
+    customCalendarNavigationNextContent?: () => Snippet;
+    /** Custom NavigationPrev Content */
+    customCalendarNavigationPrevContent?: () => Snippet;
+    /** Next disabled state */
+    disabledCalendarNavigationNext?: boolean;
+    /** Prev disabled state */
+    disabledCalendarNavigationPrev?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    class: className = '',
+    ref = $bindable<HTMLDivElement>(),
+    size = 'normal',
+    color,
+    buttonProps,
+    onCalendarNavigationNextClick,
+    onCalendarNavigationPrevClick,
+    disabledCalendarNavigationNext,
+    disabledCalendarNavigationPrev,
+    customCalendarNavigation: customCalendarNavigationInternal,
+    customCalendarNavigationNext,
+    customCalendarNavigationPrev,
+    customCalendarNavigationNextContent,
+    customCalendarNavigationPrevContent,
+  }: CalendarNavigationProps = $props();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customCalendarNavigationTyped = customCalendarNavigationInternal as any;
+</script>
+
+<div
+  class={['dodo-ui-CalendarNavigation', `size--${size}`, `color--${color}`, className].join(' ')}
+  bind:this={ref}
+>
+  {#if customCalendarNavigationTyped}
+    {@render customCalendarNavigationTyped()}
+  {:else}
+    <NavigationButton
+      name="prev"
+      {size}
+      {color}
+      {buttonProps}
+      onclick={onCalendarNavigationPrevClick}
+      disabled={disabledCalendarNavigationPrev}
+      customNavigationButton={customCalendarNavigationPrev}
+      customNavigationButtonContent={customCalendarNavigationPrevContent}
+    >
+      <Icon icon="material-symbols:navigate-before" width="24" height="24" />
+    </NavigationButton>
+    <NavigationButton
+      name="next"
+      {size}
+      {color}
+      {buttonProps}
+      onclick={onCalendarNavigationNextClick}
+      disabled={disabledCalendarNavigationNext}
+      customNavigationButton={customCalendarNavigationNext}
+      customNavigationButtonContent={customCalendarNavigationNextContent}
+    >
+      <Icon icon="material-symbols:navigate-next" width="24" height="24" />
+    </NavigationButton>
+  {/if}
+</div>
+
+<style lang="scss">
+  .dodo-ui-CalendarNavigation {
+    display: flex;
+
+    &.size {
+      &--normal {
+        margin: 0 calc(calc(var(--dodo-ui-space) / 2) * -1);
+
+        :global(.NavigationButton) {
+          margin: 0 calc(var(--dodo-ui-space) / 2);
+        }
+      }
+
+      &--small {
+        margin: 0 calc(calc(var(--dodo-ui-space-small) / 2) * -1);
+
+        :global(.NavigationButton) {
+          margin: 0 calc(var(--dodo-ui-space-small) / 2);
+        }
+      }
+
+      &--large {
+        margin: calc(calc(var(--dodo-ui-space-large) / 2) * -1);
+
+        :global(.NavigationButton) {
+          margin: 0 calc(var(--dodo-ui-space-large) / 2);
+        }
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import Button, { type ButtonProps } from '$lib/stories/components/Form/Button/Button.svelte';
+  import type { ComponentColor } from '$lib/types/colors.js';
+  import type { ComponentSize } from '$lib/types/size.js';
+  import type { Snippet } from 'svelte';
+  import type { MouseEventHandler } from 'svelte/elements';
+
+  interface NavigationButtonProps {
+    /** Name */
+    name?: string;
+    /** Button contents goes here */
+    children?: Snippet;
+    /** NavigationButton ref */
+    ref?: HTMLDivElement;
+    /** Custom css class */
+    class?: string;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** How large should the Component be? */
+    size?: ComponentSize;
+    /** buttonProps */
+    buttonProps?: Partial<ButtonProps>;
+    /** onclick event */
+    onclick?: MouseEventHandler<HTMLButtonElement>;
+    /** Custom Navigation */
+    customNavigationButton?: () => Snippet;
+    /** Custom Navigation Content */
+    customNavigationButtonContent?: () => Snippet;
+    /** disabled state */
+    disabled?: boolean;
+  }
+
+  let {
+    class: className = '',
+    children,
+    name,
+    ref = $bindable<HTMLDivElement>(),
+    size,
+    color,
+    buttonProps,
+    onclick,
+    disabled,
+    customNavigationButton: customNavigationButtonInternal,
+    customNavigationButtonContent: customNavigationButtonContentInternal,
+  }: NavigationButtonProps = $props();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customNavigationButtonTyped = customNavigationButtonInternal as any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customNavigationButtonContentTyped = customNavigationButtonContentInternal as any;
+</script>
+
+<div
+  class={['NavigationButton', `size--${size}`, `color--${color}`, className].join(' ')}
+  bind:this={ref}
+>
+  {#if customNavigationButtonTyped}
+    {@render customNavigationButtonTyped()}
+  {:else}
+    <Button
+      {name}
+      variant="text"
+      {color}
+      {disabled}
+      roundness="full"
+      {onclick}
+      {size}
+      compact
+      {...buttonProps}
+    >
+      {#if customNavigationButtonContentTyped}
+        {@render customNavigationButtonContentTyped()}
+      {:else if children}
+        {@render children()}
+      {/if}
+    </Button>
+  {/if}
+</div>
+
+<style lang="scss">
+  .NavigationButton {
+    display: inline-flex;
+  }
+</style>