@flightlesslabs/dodo-ui 0.11.1 → 0.12.0

package/src/lib/stories/components/Form/DatePicker/Events/Events.stories.svelte

@@ -1,147 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import DatePicker from '../DatePicker.svelte';
-  import { storyDatePickerArgTypes } from '../DatePicker.stories.svelte';
-  import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
-  import type { ButtonClickEvent } from '$lib/stories/components/Form/Button/Button.svelte';
-  import type {
-    CalendarMonthOption,
-    CalendarMonthNames,
-  } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/CalendarMonthSelector.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: DatePicker,
-    tags: ['autodocs'],
-    argTypes: storyDatePickerArgTypes,
-    parameters: {
-      docs: {
-        story: {
-          height: '400px',
-          inline: false,
-        },
-      },
-    },
-  });
-
-  let value = $state(getMoment().toDate());
-</script>
-
-<Story name="Select" asChild>
-  <DatePicker
-    {value}
-    onselect={(val) => {
-      value = val;
-    }}
-  />
-</Story>
-
-<Story name="MonthSelectorClick" asChild>
-  <DatePicker
-    {value}
-    onMonthSelectorClick={(option: CalendarMonthOption, e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-
-      alert('Button Clicked');
-      console.log('Button Clicked', option, target);
-    }}
-  />
-</Story>
-
-<Story name="YearSelectorClick" asChild>
-  <DatePicker
-    {value}
-    onYearSelectorClick={(selectedYear: string, e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-
-      alert('Button Clicked');
-      console.log('Button Clicked', selectedYear, target);
-    }}
-  />
-</Story>
-
-<Story name="CalendarNavigationNextClick" asChild>
-  <DatePicker
-    {value}
-    onCalendarNavigationNextClick={(e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-
-      alert('Button Clicked');
-      console.log('Button Clicked', target);
-    }}
-  />
-</Story>
-
-<Story name="CalendarNavigationPrevClick" asChild>
-  <DatePicker
-    {value}
-    onCalendarNavigationPrevClick={(e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-
-      alert('Button Clicked');
-      console.log('Button Clicked', target);
-    }}
-  />
-</Story>
-
-<Story name="SelectMonth" asChild>
-  <DatePicker
-    {value}
-    onselectMonth={(val: CalendarMonthNames, e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-      console.log(val, target);
-    }}
-  />
-</Story>
-
-<Story name="CancelMonthSelection" asChild>
-  <DatePicker
-    {value}
-    oncancelMonth={(e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-      console.log(target);
-    }}
-  />
-</Story>
-
-<Story name="SelectYear" asChild>
-  <DatePicker
-    {value}
-    onselectYear={(val: string, e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-      console.log(val, target);
-    }}
-  />
-</Story>
-
-<Story name="CancelYearSelection" asChild>
-  <DatePicker
-    {value}
-    oncancelYear={(e: ButtonClickEvent) => {
-      const target = e.target as HTMLButtonElement;
-      console.log(target);
-    }}
-  />
-</Story>
-
-<Story name="Input" asChild>
-  <DatePicker
-    {value}
-    oninput={(e: Event) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('Input Event', target.value);
-    }}
-  />
-</Story>
-
-<Story name="Change" asChild>
-  <DatePicker
-    {value}
-    onchange={(e: Event) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onChange Event', target.value);
-    }}
-  />
-</Story>

package/src/lib/stories/components/Form/DatePicker/FilterDates/FilterDates.stories.svelte

@@ -1,61 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import DatePicker from '../DatePicker.svelte';
-  import { storyDatePickerArgTypes } from '../DatePicker.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: DatePicker,
-    tags: ['autodocs'],
-    argTypes: storyDatePickerArgTypes,
-    parameters: {
-      docs: {
-        story: {
-          height: '400px',
-          inline: false,
-        },
-      },
-    },
-  });
-
-  let value = $state(getMoment('01-02-2025', 'DD-MM-YYYY').toDate());
-</script>
-
-<Story name="Default" asChild>
-  <DatePicker {value} />
-</Story>
-
-<Story name="MinDate" asChild>
-  <DatePicker {value} minDate={getMoment('06-02-2025', 'DD-MM-YYYY').toDate()} />
-</Story>
-
-<Story name="MaxDate" asChild>
-  <DatePicker {value} maxDate={getMoment('10-02-2025', 'DD-MM-YYYY').toDate()} />
-</Story>
-
-<Story name="ExcludeDates" asChild>
-  <DatePicker
-    {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>
-
-<Story name="IncludeDates" asChild>
-  <DatePicker
-    {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>
-
-<Story name="DisabledMonths" asChild>
-  <DatePicker {value} disabledMonths={['jan', 'feb', 'mar']} />
-</Story>

package/src/lib/stories/components/Form/DatePicker/Positions/AutoPosition/AutoPosition.stories.svelte

@@ -1,46 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { storyDatePickerArgTypes } from '../../DatePicker.stories.svelte';
-  import DatePicker from '../../DatePicker.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: DatePicker,
-    tags: ['autodocs'],
-    argTypes: storyDatePickerArgTypes,
-    parameters: {
-      docs: {
-        story: {
-          height: '200px',
-          inline: false,
-        },
-      },
-    },
-  });
-
-  let value = $state<Date | undefined>(new Date());
-</script>
-
-<Story name="PositionAutoAdjust" asChild>
-  <DatePicker {value} onselect={(val: Date) => (value = val)} />
-</Story>
-
-<!-- Positions will not auto adjust if you use `lockPoistions` -->
-<Story name="LockPoistions" asChild>
-  <DatePicker
-    {value}
-    onselect={(val: Date) => (value = val)}
-    popupPositionY="top"
-    lockPoistions={true}
-  />
-</Story>
-
-<!-- you can also adjust `popperHeightForVerticalPosition` to achive the same -->
-<Story name="HeightForVerticalPosition" asChild>
-  <DatePicker
-    {value}
-    onselect={(val: Date) => (value = val)}
-    popupPositionY="top"
-    popperHeightForVerticalPosition={3}
-  />
-</Story>

package/src/lib/stories/components/Form/DatePicker/Positions/Positions.stories.svelte

@@ -1,57 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { storyDatePickerArgTypes } from '../DatePicker.stories.svelte';
-  import DatePicker from '../DatePicker.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: DatePicker,
-    tags: ['autodocs'],
-    argTypes: storyDatePickerArgTypes,
-    parameters: {
-      layout: 'centered',
-      docs: {
-        story: {
-          height: '400px',
-          inline: false,
-        },
-      },
-    },
-  });
-
-  let value = $state<Date | undefined>(new Date());
-</script>
-
-<Story name="BottomLeft" asChild>
-  <DatePicker {value} onselect={(val: Date) => (value = val)} />
-</Story>
-
-<Story name="BottomCenter" asChild>
-  <DatePicker {value} onselect={(val: Date) => (value = val)} popupPositionX="center" />
-</Story>
-
-<Story name="BottomRight" asChild>
-  <DatePicker {value} onselect={(val: Date) => (value = val)} popupPositionX="right" />
-</Story>
-
-<Story name="TopLeft" asChild>
-  <DatePicker {value} onselect={(val: Date) => (value = val)} popupPositionY="top" />
-</Story>
-
-<Story name="TopCenter" asChild>
-  <DatePicker
-    {value}
-    onselect={(val: Date) => (value = val)}
-    popupPositionY="top"
-    popupPositionX="center"
-  />
-</Story>
-
-<Story name="TopRight" asChild>
-  <DatePicker
-    {value}
-    onselect={(val: Date) => (value = val)}
-    popupPositionY="top"
-    popupPositionX="right"
-  />
-</Story>

package/src/lib/stories/components/Form/DatePicker/Roundness/Roundness.stories.svelte

@@ -1,38 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import DatePicker from '../DatePicker.svelte';
-  import { storyDatePickerArgTypes } from '../DatePicker.stories.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: DatePicker,
-    tags: ['autodocs'],
-    argTypes: storyDatePickerArgTypes,
-    parameters: {
-      docs: {
-        story: {
-          height: '400px',
-          inline: false,
-        },
-      },
-    },
-  });
-
-  let value = $state<Date | undefined>(new Date());
-</script>
-
-<Story name="Roundness 1" asChild>
-  <DatePicker {value} />
-</Story>
-
-<Story name="Roundness 2" asChild>
-  <DatePicker {value} roundness={2} />
-</Story>
-
-<Story name="Roundness 3" asChild>
-  <DatePicker {value} roundness={3} />
-</Story>
-
-<Story name="Roundness 0" asChild>
-  <DatePicker {value} roundness={0} />
-</Story>

package/src/lib/stories/components/Form/DatePicker/Size/Size.stories.svelte

@@ -1,41 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import DatePicker from '../DatePicker.svelte';
-  import { storyDatePickerArgTypes } from '../DatePicker.stories.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: DatePicker,
-    tags: ['autodocs'],
-    argTypes: storyDatePickerArgTypes,
-    parameters: {
-      docs: {
-        story: {
-          height: '400px',
-          inline: false,
-        },
-      },
-    },
-  });
-
-  let value = $state<Date | undefined>(new Date());
-</script>
-
-<Story name="Normal" asChild>
-  <DatePicker {value} onselect={(val: Date) => (value = val)} />
-</Story>
-<Story name="Small" asChild>
-  <DatePicker {value} onselect={(val: Date) => (value = val)} size="small" />
-</Story>
-<Story name="Large" asChild>
-  <DatePicker {value} onselect={(val: Date) => (value = val)} size="large" />
-</Story>
-<Story name="SmallCalendar" asChild>
-  <DatePicker
-    {value}
-    onselect={(val: Date) => (value = val)}
-    calendarProps={{
-      size: 'small',
-    }}
-  />
-</Story>

package/src/lib/stories/components/Form/DatePicker/WithIcon/WithIcon.stories.svelte

@@ -1,41 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import DatePicker from '../DatePicker.svelte';
-  import { storyDatePickerArgTypes } from '../DatePicker.stories.svelte';
-  import Icon from '@iconify/svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: DatePicker,
-    tags: ['autodocs'],
-    argTypes: storyDatePickerArgTypes,
-    parameters: {
-      docs: {
-        story: {
-          height: '400px',
-          inline: false,
-        },
-      },
-    },
-  });
-
-  let value = $state<Date | undefined>(new Date());
-</script>
-
-<!-- DatePicker icon in front. -->
-<Story name="Icon Before" asChild>
-  <DatePicker {value}>
-    {#snippet before()}
-      <Icon icon="material-symbols:content-copy" />
-    {/snippet}
-  </DatePicker>
-</Story>
-
-<!-- DatePicker icon in front. -->
-<Story name="Icon After" asChild>
-  <DatePicker {value}>
-    {#snippet after()}
-      <Icon icon="material-symbols:download-2" />
-    {/snippet}
-  </DatePicker>
-</Story>

package/src/lib/stories/components/Form/FormControl/FormControl.stories.svelte

@@ -1,28 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import FormControl from './FormControl.svelte';
-  import TextInput from '../TextInput/TextInput.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: FormControl,
-    tags: ['autodocs'],
-  });
-</script>
-
-<Story name="Default" args={{ label: 'Hello there' }} />
-
-<Story name="Example TextInput" args={{ label: 'Whats your first name?', for: 'first-name-01' }}>
-  <TextInput placeholder="First name" id="first-name-01" />
-</Story>
-
-<Story
-  name="ErrorMessage"
-  args={{
-    label: 'Whats your first name?',
-    for: 'first-name-02',
-    errorMessage: 'This is an error message',
-  }}
->
-  <TextInput value="John Smith" id="first-name-02" error />
-</Story>

package/src/lib/stories/components/Form/Label/Label.stories.svelte

@@ -1,13 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Label from './Label.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: Label,
-    tags: ['autodocs'],
-  });
-</script>
-
-<!-- Label with default style -->
-<Story name="Default">This is a form label</Story>

package/src/lib/stories/components/Form/Message/Color/Color.stories.svelte

@@ -1,36 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Message from '../Message.svelte';
-  import { storyMessageArgTypes } from '../Message.stories.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: Message,
-    tags: ['autodocs'],
-    argTypes: storyMessageArgTypes,
-  });
-</script>
-
-<Story name="Primary" args={{ color: 'primary' }}>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit
-</Story>
-
-<Story name="Secondary" args={{ color: 'secondary' }}>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit
-</Story>
-
-<Story name="Neutral" args={{ color: 'neutral' }}>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit
-</Story>
-
-<Story name="Safe" args={{ color: 'safe' }}>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit
-</Story>
-
-<Story name="Warning" args={{ color: 'warning' }}>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit
-</Story>
-
-<Story name="Danger" args={{ color: 'danger' }}>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit
-</Story>

package/src/lib/stories/components/Form/Message/Message.stories.svelte

@@ -1,27 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Message from './Message.svelte';
-  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
-  import { componentColorArray } from '$lib/types/colors.js';
-  import { componentSizeArray } from '$lib/types/size.js';
-
-  export const storyMessageArgTypes: StoryBookArgTypes = {
-    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: Message,
-    tags: ['autodocs'],
-    argTypes: storyMessageArgTypes,
-  });
-</script>
-
-<Story name="Primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Story>

package/src/lib/stories/components/Form/Message/Size/Size.stories.svelte

@@ -1,22 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Message from '../Message.svelte';
-  import { storyMessageArgTypes } from '../Message.stories.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: Message,
-    tags: ['autodocs'],
-    argTypes: storyMessageArgTypes,
-  });
-</script>
-
-<Story name="Normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Story>
-
-<Story name="Small" args={{ size: 'small' }}>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit
-</Story>
-
-<Story name="Large" args={{ size: 'large' }}>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit
-</Story>