@flightlesslabs/dodo-ui 0.9.0 → 0.10.0

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

@@ -1,61 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Button, { buttonTypeArray } from './Button.svelte';
-  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
-  import { componentRoundnessArray } from '$lib/types/roundness.js';
-  import { componentColorArray } from '$lib/types/colors.js';
-  import { componentWeightArray } from '$lib/types/weight.js';
-  import { componentSizeArray } from '$lib/types/size.js';
-
-  export const storyButtonArgTypes: StoryBookArgTypes = {
-    type: {
-      control: { type: 'select' },
-      options: buttonTypeArray,
-    },
-    color: {
-      control: { type: 'select' },
-      options: componentColorArray,
-    },
-    variant: {
-      control: { type: 'select' },
-      options: componentWeightArray,
-    },
-    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: Button,
-    tags: ['autodocs'],
-    argTypes: storyButtonArgTypes,
-  });
-</script>
-
-<!-- Button with default style -->
-<Story name="Primary">Click me!</Story>
-
-<!-- Button with border around it -->
-<Story name="Outline" args={{ outline: true, variant: 'text' }}>Click me!</Story>
-
-<Story name="Disabled" args={{ disabled: true }}>Click me!</Story>
-
-<!-- Form submit button -->
-<Story name="Sumbit Button" args={{ type: 'submit' }}>Submit Form</Story>
-
-<!-- Form submit button -->
-<Story name="Full width Button" args={{ fullWidth: true }}>Click me!</Story>
-
-<!-- Anchor Link styled like a Button -->
-<Story
-  name="Link Button"
-  args={{ href: 'https://www.w3schools.com/tags/tag_a.asp', target: '_blank' }}
->
-  Link
-</Story>

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

@@ -1,43 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Button from '../Button.svelte';
-  import { storyButtonArgTypes } from '../Button.stories.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: Button,
-    tags: ['autodocs'],
-    argTypes: storyButtonArgTypes,
-  });
-</script>
-
-<Story name="Primary">Click me!</Story>
-<Story name="Secondary" args={{ color: 'secondary' }}>Click me!</Story>
-<Story name="Neutral" args={{ color: 'neutral' }}>Click me!</Story>
-<Story name="Safe" args={{ color: 'safe' }}>Click me!</Story>
-<Story name="Warning" args={{ color: 'warning' }}>Click me!</Story>
-<Story name="Danger" args={{ color: 'danger' }}>Click me!</Story>
-
-<Story name="Primary Text" args={{ color: 'primary', variant: 'text' }}>Click me!</Story>
-<Story name="Secondary Text" args={{ color: 'secondary', variant: 'text' }}>Click me!</Story>
-<Story name="Neutral Text" args={{ color: 'neutral', variant: 'text' }}>Click me!</Story>
-<Story name="Safe Text" args={{ color: 'safe', variant: 'text' }}>Click me!</Story>
-<Story name="Warning Text" args={{ color: 'warning', variant: 'text' }}>Click me!</Story>
-<Story name="Danger Text" args={{ color: 'danger', variant: 'text' }}>Click me!</Story>
-
-<Story name="Primary Outline" args={{ variant: 'text', outline: true }}>Click me!</Story>
-<Story name="Secondary Outline" args={{ color: 'secondary', variant: 'text', outline: true }}>
-  Click me!
-</Story>
-<Story name="Neutral Outline" args={{ color: 'neutral', variant: 'text', outline: true }}>
-  Click me!
-</Story>
-<Story name="Safe Outline" args={{ color: 'safe', variant: 'text', outline: true }}>
-  Click me!
-</Story>
-<Story name="Warning Outline" args={{ color: 'warning', variant: 'text', outline: true }}>
-  Click me!
-</Story>
-<Story name="Danger Outline" args={{ color: 'danger', variant: 'text', outline: true }}>
-  Click me!
-</Story>

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

@@ -1,36 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Button from '../Button.svelte';
-  import { storyButtonArgTypes } from '../Button.stories.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: Button,
-    tags: ['autodocs'],
-    argTypes: storyButtonArgTypes,
-  });
-</script>
-
-<Story
-  name="Click"
-  args={{
-    onclick: (e: Event) => {
-      const target = e.target as HTMLButtonElement;
-
-      alert('Button Clicked');
-      console.log('Button Clicked', target);
-    },
-  }}
-  asChild
->
-  <Button
-    onclick={(e: Event) => {
-      const target = e.target as HTMLButtonElement;
-
-      alert('Button Clicked');
-      console.log('Button Clicked', target);
-    }}
-  >
-    Click me!
-  </Button>
-</Story>

package/src/lib/stories/components/Form/Button/IconButton/IconButton.stories.svelte

@@ -1,43 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Button from '../Button.svelte';
-  import { storyButtonArgTypes } from '../Button.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: Button,
-    tags: ['autodocs'],
-    argTypes: storyButtonArgTypes,
-  });
-</script>
-
-<!-- Compact button with paddings stripped out and fixed size. We are using this icon library https://iconify.design/docs/icon-components/svelte/ -->
-<Story name="Icon Button" args={{ compact: true }}>
-  <Icon icon="material-symbols:app-badging" width="18" height="18" />
-</Story>
-
-<!-- Circualr Icon button. -->
-<Story name="Icon Button Circular" args={{ compact: true, roundness: 'full' }}>
-  <Icon icon="material-symbols:app-badging" width="18" height="18" />
-</Story>
-
-<!-- Button with an icon in front. -->
-<Story name="Icon Before" asChild>
-  <Button>
-    {#snippet before()}
-      <Icon icon="material-symbols:content-copy" />
-    {/snippet}
-    Copy
-  </Button>
-</Story>
-
-<!-- Button with an icon in front. -->
-<Story name="Icon After" asChild>
-  <Button>
-    {#snippet after()}
-      <Icon icon="material-symbols:download-2" />
-    {/snippet}
-    Download
-  </Button>
-</Story>

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

@@ -1,23 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Button from '../Button.svelte';
-  import { storyButtonArgTypes } from '../Button.stories.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: Button,
-    tags: ['autodocs'],
-    argTypes: storyButtonArgTypes,
-  });
-</script>
-
-<Story name="Roundness 1">Click me!</Story>
-
-<Story name="Roundness 2" args={{ roundness: 2 }}>Click me!</Story>
-
-<Story name="Roundness 3" args={{ roundness: 3 }}>Click me!</Story>
-
-<Story name="Roundness 0" args={{ roundness: 0 }}>Click me!</Story>
-
-<!-- Button with 50% roundness usefull for icon (Compact) buttons -->
-<Story name="Roundness Full" args={{ roundness: 'full', compact: true }}>C</Story>

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

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

package/src/lib/stories/components/Form/Button/Variant/Variant.stories.svelte

@@ -1,18 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Button from '../Button.svelte';
-  import { storyButtonArgTypes } from '../Button.stories.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: Button,
-    tags: ['autodocs'],
-    argTypes: storyButtonArgTypes,
-  });
-</script>
-
-<Story name="Solid">Click me!</Story>
-
-<Story name="Text" args={{ variant: 'text' }}>Click me!</Story>
-
-<Story name="Text Outline" args={{ variant: 'text', outline: true }}>Click me!</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/Validation/Validation.stories.svelte

@@ -1,87 +0,0 @@
-<script module lang="ts">
-  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,
-  });
-
-  let value = $state<undefined | number>(0);
-</script>
-
-<!-- NumericInput with default style -->
-<Story
-  name="Default"
-  args={{
-    value,
-    onValueChange: (val) => {
-      value = val;
-    },
-  }}
-/>
-
-<!-- Min, In this case min is set to 25 -->
-<Story
-  name="Min"
-  args={{
-    value,
-    onValueChange: (val) => {
-      console.log(val);
-
-      value = val;
-    },
-    min: 25,
-  }}
-/>
-
-<!-- Max, In this case max is set to 25 -->
-<Story
-  name="Max"
-  args={{
-    value,
-    onValueChange: (val) => {
-      value = val;
-    },
-    max: 25,
-  }}
-/>
-
-<!-- Allow Negative values -->
-<Story
-  name="AllowNegativeValues"
-  args={{
-    value,
-    onValueChange: (val) => {
-      value = val;
-    },
-    allowNegativeValues: true,
-  }}
-/>
-
-<!-- Decimal Places -->
-<Story
-  name="DecimalPlaces"
-  args={{
-    value,
-    onValueChange: (val) => {
-      value = val;
-    },
-    decimalPlaces: 2,
-  }}
-/>
-
-<!-- Log validations, check console -->
-<Story
-  name="LogValidations"
-  args={{
-    value,
-    onValueChange: (val) => {
-      value = val;
-    },
-    log: true,
-  }}
-/>