@flightlesslabs/dodo-ui 0.9.0 → 0.10.0

package/dist/stories/components/Info/Calendar/Events/Events.stories.svelte

@@ -0,0 +1,117 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Calendar from '../Calendar.svelte';
+import { storyCalendarArgTypes } from '../Calendar.stories.svelte';
+import getMoment from '../../../../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: Calendar,
+    tags: ['autodocs'],
+    argTypes: storyCalendarArgTypes,
+});
+let value = $state(getMoment().toDate());
+</script>
+
+<Story name="Select" asChild>
+  <Calendar
+    {value}
+    onselect={(val) => {
+      value = val;
+    }}
+  />
+</Story>
+
+<Story
+  name="MonthSelectorClick"
+  args={{
+    value,
+    onMonthSelectorClick: (option: CalendarMonthOption, e: ButtonClickEvent) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', option, target);
+    },
+  }}
+/>
+
+<Story
+  name="YearSelectorClick"
+  args={{
+    value,
+    onYearSelectorClick: (selectedYear: string, e: ButtonClickEvent) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', selectedYear, target);
+    },
+  }}
+/>
+
+<Story
+  name="CalendarNavigationNextClick"
+  args={{
+    value,
+    onCalendarNavigationNextClick: (e: ButtonClickEvent) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', target);
+    },
+  }}
+/>
+
+<Story
+  name="CalendarNavigationPrevClick"
+  args={{
+    value,
+    onCalendarNavigationPrevClick: (e: ButtonClickEvent) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', target);
+    },
+  }}
+/>
+
+<Story
+  name="SelectMonth"
+  args={{
+    value,
+    onselectMonth: (val: CalendarMonthNames, e: ButtonClickEvent) => {
+      const target = e.target as HTMLButtonElement;
+      console.log(val, target);
+    },
+  }}
+/>
+
+<Story
+  name="CancelMonthSelection"
+  args={{
+    value,
+    oncancelMonth: (e: ButtonClickEvent) => {
+      const target = e.target as HTMLButtonElement;
+      console.log(target);
+    },
+  }}
+/>
+
+<Story
+  name="SelectYear"
+  args={{
+    value,
+    onselectYear: (val: string, e: ButtonClickEvent) => {
+      const target = e.target as HTMLButtonElement;
+      console.log(val, target);
+    },
+  }}
+/>
+
+<Story
+  name="CancelYearSelection"
+  args={{
+    value,
+    oncancelYear: (e: ButtonClickEvent) => {
+      const target = e.target as HTMLButtonElement;
+      console.log(target);
+    },
+  }}
+/>

package/dist/stories/components/Info/Calendar/Events/Events.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Events: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Events = InstanceType<typeof Events>;
+export default Events;

package/dist/stories/components/Info/Calendar/FilterDates/FilterDates.stories.svelte

@@ -0,0 +1,67 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Calendar from '../Calendar.svelte';
+import { storyCalendarArgTypes } from '../Calendar.stories.svelte';
+import getMoment from '../../../../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: Calendar,
+    tags: ['autodocs'],
+    argTypes: storyCalendarArgTypes,
+});
+let value = $state(getMoment('01-02-2025', 'DD-MM-YYYY').toDate());
+</script>
+
+<Story
+  name="Default"
+  args={{
+    value,
+  }}
+/>
+
+<Story
+  name="MinDate"
+  args={{
+    value,
+    minDate: getMoment('06-02-2025', 'DD-MM-YYYY').toDate(),
+  }}
+/>
+
+<Story
+  name="MaxDate"
+  args={{
+    value,
+    maxDate: getMoment('10-02-2025', 'DD-MM-YYYY').toDate(),
+  }}
+/>
+
+<Story
+  name="ExcludeDates"
+  args={{
+    value,
+    excludeDates: [
+      getMoment('10-02-2025', 'DD-MM-YYYY').toDate(),
+      getMoment('15-02-2025', 'DD-MM-YYYY').toDate(),
+      getMoment('20-02-2025', 'DD-MM-YYYY').toDate(),
+    ],
+  }}
+/>
+
+<Story
+  name="IncludeDates"
+  args={{
+    value,
+    includeDates: [
+      getMoment('10-02-2025', 'DD-MM-YYYY').toDate(),
+      getMoment('15-02-2025', 'DD-MM-YYYY').toDate(),
+      getMoment('20-02-2025', 'DD-MM-YYYY').toDate(),
+    ],
+  }}
+/>
+
+<Story
+  name="DisabledMonths"
+  args={{
+    value,
+    disabledMonths: ['jan', 'feb', 'mar'],
+  }}
+/>

package/dist/stories/components/Info/Calendar/FilterDates/FilterDates.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FilterDates: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FilterDates = InstanceType<typeof FilterDates>;
+export default FilterDates;

package/dist/stories/components/Info/Calendar/Size/Size.stories.svelte

@@ -0,0 +1,20 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Calendar from '../Calendar.svelte';
+  import { storyCalendarArgTypes } from '../Calendar.stories.svelte';
+  import getMoment from '../../../../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: Calendar,
+    tags: ['autodocs'],
+    argTypes: storyCalendarArgTypes,
+    args: {
+      value: getMoment().toDate(),
+    },
+  });
+</script>
+
+<Story name="Normal" />
+<Story name="Small" args={{ size: 'small' }} />
+<Story name="Large" args={{ size: 'large' }} />

package/dist/stories/components/Info/Calendar/Size/Size.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Size;
+type Size = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Size: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarControls.stories.svelte

@@ -0,0 +1,31 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarControls from './CalendarControls.svelte';
+import getMoment from '../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+import { componentColorArray } from '../../../../../../types/colors.js';
+import { componentSizeArray } from '../../../../../../types/size.js';
+export const storyCalendarControlsArgTypes = {
+    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: CalendarControls,
+    tags: ['autodocs'],
+    argTypes: storyCalendarControlsArgTypes,
+});
+let value = $state(getMoment().toDate());
+</script>
+
+<!-- Default CalendarControls -->
+<Story
+  name="Default"
+  args={{
+    value,
+  }}
+/>

package/dist/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarControls.stories.svelte.d.ts

@@ -0,0 +1,21 @@
+import CalendarControls from './CalendarControls.svelte';
+import type { StoryBookArgTypes } from '../../../../../../storybook-types.js';
+export declare const storyCalendarControlsArgTypes: StoryBookArgTypes;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CalendarControls: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CalendarControls = InstanceType<typeof CalendarControls>;
+export default CalendarControls;

package/dist/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarControls.svelte

@@ -0,0 +1,143 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import CalendarMonthSelector from './CalendarMonthSelector/CalendarMonthSelector.svelte';
+import CalendarYearSelector, {} from './CalendarYearSelector/CalendarYearSelector.svelte';
+import { CalendarNavigation, getMoment } from '../../../../../../index.js';
+let { class: className = '', ref = $bindable(), 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, } = $props();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customCalendarControlsTyped = customCalendarControlsInternal;
+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>.dodo-ui-CalendarControls {
+  display: flex;
+  align-items: center;
+  margin-bottom: calc(var(--dodo-ui-space) * 2);
+}
+.dodo-ui-CalendarControls:empty {
+  display: none;
+}
+.dodo-ui-CalendarControls h3 {
+  font-weight: 400;
+  margin: 0;
+  letter-spacing: 0.3px;
+  font-family: inherit;
+  color: var(--dodo-color-neutral-800);
+  text-align: center;
+}
+.dodo-ui-CalendarControls.size--normal {
+  margin-bottom: calc(var(--dodo-ui-space-large) * 2);
+}
+.dodo-ui-CalendarControls.size--normal .periodControls {
+  margin: 0 calc(var(--dodo-ui-space) / 2 * -1);
+}
+.dodo-ui-CalendarControls.size--normal .periodControls :global(.dodo-ui-Button) {
+  margin: 0 calc(var(--dodo-ui-space) / 2);
+}
+.dodo-ui-CalendarControls.size--normal h3 {
+  font-size: 1rem;
+  margin: 0 calc(var(--dodo-ui-space) / 2);
+}
+.dodo-ui-CalendarControls.size--small {
+  margin-bottom: calc(var(--dodo-ui-space) * 2);
+}
+.dodo-ui-CalendarControls.size--small .periodControls {
+  margin: 0 calc(var(--dodo-ui-space-small) / 2 * -1);
+}
+.dodo-ui-CalendarControls.size--small .periodControls :global(.dodo-ui-Button) {
+  margin: 0 calc(var(--dodo-ui-space-small) / 2);
+}
+.dodo-ui-CalendarControls.size--small h3 {
+  font-size: 0.9rem;
+  margin: 0 calc(var(--dodo-ui-space-small) / 2);
+}
+.dodo-ui-CalendarControls.size--large {
+  margin-bottom: calc(var(--dodo-ui-space) * 3);
+}
+.dodo-ui-CalendarControls.size--large .periodControls {
+  margin: 0 calc(var(--dodo-ui-space-large) / 2 * -1);
+}
+.dodo-ui-CalendarControls.size--large .periodControls :global(.dodo-ui-Button) {
+  margin: 0 calc(var(--dodo-ui-space-large) / 2);
+}
+.dodo-ui-CalendarControls.size--large h3 {
+  font-size: 1.1rem;
+  margin: 0 calc(var(--dodo-ui-space-large) / 2);
+}
+.dodo-ui-CalendarControls .periodControls {
+  display: flex;
+  align-items: center;
+}
+.dodo-ui-CalendarControls .periodControls:empty {
+  display: none;
+}
+.dodo-ui-CalendarControls .navigationControls {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
+.dodo-ui-CalendarControls .navigationControls:empty {
+  display: none;
+}</style>

package/dist/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarControls.svelte.d.ts

@@ -0,0 +1,72 @@
+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;
+}
+import type { ComponentColor } from '../../../../../../types/colors.js';
+import type { ComponentSize } from '../../../../../../types/size.js';
+import type { Snippet } from 'svelte';
+import type { CalendarMonthOption, CalendarMonthSelectorProps } from './CalendarMonthSelector/CalendarMonthSelector.svelte';
+import type { ButtonClickEvent } from '../../../../Form/Button/Button.svelte';
+import { type CalendarYearSelectorProps } from './CalendarYearSelector/CalendarYearSelector.svelte';
+import type { MouseEventHandler } from 'svelte/elements';
+declare const CalendarControls: import("svelte").Component<CalendarControlsProps, {}, "ref">;
+type CalendarControls = ReturnType<typeof CalendarControls>;
+export default CalendarControls;

package/dist/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/CalendarMonthSelector.stories.svelte

@@ -0,0 +1,53 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import CalendarMonthSelector from './CalendarMonthSelector.svelte';
+import getMoment from '../../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+import { componentColorArray } from '../../../../../../../types/colors.js';
+import { componentSizeArray } from '../../../../../../../types/size.js';
+import { componentRoundnessArray } from '../../../../../../../types/roundness.js';
+export const storyCalendarMonthSelectorArgTypes = {
+    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: CalendarMonthSelector,
+    tags: ['autodocs'],
+    argTypes: storyCalendarMonthSelectorArgTypes,
+});
+let value = $state(getMoment().toDate());
+</script>
+
+<!-- Default CalendarMonthSelector -->
+<Story
+  name="Default"
+  args={{
+    value,
+  }}
+/>
+
+<!-- Override month -->
+<Story
+  name="ActiveMonth"
+  args={{
+    value,
+    activeMonth: getMoment().add(2, 'months').toDate(),
+  }}
+/>
+
+<Story
+  name="Disabled"
+  args={{
+    value,
+    disabled: true,
+  }}
+/>

package/dist/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/CalendarMonthSelector.stories.svelte.d.ts

@@ -0,0 +1,21 @@
+import CalendarMonthSelector from './CalendarMonthSelector.svelte';
+import type { StoryBookArgTypes } from '../../../../../../../storybook-types.js';
+export declare const storyCalendarMonthSelectorArgTypes: StoryBookArgTypes;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CalendarMonthSelector: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CalendarMonthSelector = InstanceType<typeof CalendarMonthSelector>;
+export default CalendarMonthSelector;