@flightlesslabs/dodo-ui 0.13.0 → 0.14.0

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>

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

@@ -1,134 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { storyNumericInputArgTypes } from '../NumericInput.stories.svelte';
-  import NumericInput from '../NumericInput.svelte';
-  import type {
-    TextInputFocusEvent,
-    TextInputClipboardEvent,
-    TextInputKeyboardEvent,
-  } from '../../TextInput/TextInput.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: NumericInput,
-    tags: ['autodocs'],
-    argTypes: storyNumericInputArgTypes,
-  });
-
-  let value = $state<undefined | number>(0);
-</script>
-
-<!-- Use this event to get filtered numeric value -->
-<Story
-  name="NumericValueChange"
-  args={{
-    value,
-    onValueChange: (val: number | undefined) => {
-      value = val;
-    },
-  }}
-/>
-
-<Story
-  name="Input"
-  args={{
-    oninput: (e: Event) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('Input Event', target.value);
-    },
-  }}
-/>
-
-<Story
-  name="Change"
-  args={{
-    onchange: (e: Event) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onChange Event', target.value);
-    },
-  }}
-/>
-
-<Story
-  name="Focus"
-  args={{
-    onfocus: (e: TextInputFocusEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onfocus Event', target);
-    },
-  }}
-/>
-
-<Story
-  name="Blur"
-  args={{
-    onblur: (e: TextInputFocusEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onblur Event', target);
-    },
-  }}
-/>
-
-<Story
-  name="Copy"
-  args={{
-    oncopy: (e: TextInputClipboardEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('oncopy Event', target);
-    },
-  }}
-/>
-
-<Story
-  name="Cut"
-  args={{
-    oncut: (e: TextInputClipboardEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('oncut Event', target);
-    },
-  }}
-/>
-
-<Story
-  name="Paste"
-  args={{
-    onpaste: (e: TextInputClipboardEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onpaste Event', target);
-    },
-  }}
-/>
-
-<Story
-  name="KeyDown"
-  args={{
-    onkeydown: (e: TextInputKeyboardEvent) => {
-      console.log('onkeydown Event', e.key);
-    },
-  }}
-/>
-
-<Story
-  name="KeyPress"
-  args={{
-    onkeypress: (e: TextInputKeyboardEvent) => {
-      console.log('onkeypress Event', e.key);
-    },
-  }}
-/>
-
-<Story
-  name="KeyUp"
-  args={{
-    onkeyup: (e: TextInputKeyboardEvent) => {
-      console.log('onkeyup Event', e.key);
-    },
-  }}
-/>

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

@@ -1,84 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import NumericInput from './NumericInput.svelte';
-  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
-  import { componentRoundnessArray } from '$lib/types/roundness.js';
-  import { componentSizeArray } from '$lib/types/size.js';
-
-  export const storyNumericInputArgTypes: StoryBookArgTypes = {
-    roundness: {
-      control: { type: 'select' },
-      options: componentRoundnessArray,
-    },
-    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: NumericInput,
-    tags: ['autodocs'],
-    argTypes: storyNumericInputArgTypes,
-  });
-
-  let value = $state<undefined | number>(0);
-</script>
-
-<!-- NumericInput with default style -->
-<Story
-  name="Default"
-  args={{
-    value,
-    onValueChange: (val) => {
-      value = val;
-    },
-  }}
-/>
-
-<Story name="Placeholder" args={{ value: undefined, placeholder: 'Type something...' }} />
-
-<Story
-  name="No Outline"
-  args={{
-    outline: false,
-    value,
-    onValueChange: (val) => {
-      value = val;
-    },
-  }}
-/>
-
-<Story
-  name="Error"
-  args={{
-    error: true,
-    value,
-    onValueChange: (val) => {
-      value = val;
-    },
-  }}
-/>
-
-<Story
-  name="Disabled"
-  args={{
-    disabled: true,
-    value,
-    onValueChange: (val) => {
-      value = val;
-    },
-  }}
-/>
-
-<Story
-  name="Read only"
-  args={{
-    readonly: true,
-    value,
-    onValueChange: (val) => {
-      value = val;
-    },
-  }}
-/>

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

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