@flightlesslabs/dodo-ui 0.9.1 → 0.10.0

package/src/lib/stories/developer tools/components/DynamicInput/Events/Events.stories.svelte

@@ -1,121 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { storyDynamicInputArgTypes } from '../DynamicInput.stories.svelte';
-  import DynamicInput, {
-    type DynamicInputFocusEvent,
-    type DynamicInputKeyboardEvent,
-  } from '../DynamicInput.svelte';
-  import type { TextInputClipboardEvent } from '$lib/stories/components/Form/TextInput/TextInput.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: DynamicInput,
-    tags: ['autodocs'],
-    argTypes: storyDynamicInputArgTypes,
-    args: { value: 'Hello world!' },
-  });
-</script>
-
-<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: DynamicInputFocusEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onfocus Event', target);
-    },
-  }}
-/>
-
-<Story
-  name="Blur"
-  args={{
-    onblur: (e: DynamicInputFocusEvent) => {
-      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: DynamicInputKeyboardEvent) => {
-      console.log('onkeydown Event', e.key);
-    },
-  }}
-/>
-
-<Story
-  name="KeyPress"
-  args={{
-    onkeypress: (e: DynamicInputKeyboardEvent) => {
-      console.log('onkeypress Event', e.key);
-    },
-  }}
-/>
-
-<Story
-  name="KeyUp"
-  args={{
-    onkeyup: (e: DynamicInputKeyboardEvent) => {
-      console.log('onkeyup Event', e.key);
-    },
-  }}
-/>

package/src/lib/stories/developer tools/components/InputEnclosure/InputEnclosure.stories.svelte

@@ -1,38 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import InputEnclosure from './InputEnclosure.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 storyInputEnclosureArgTypes: 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: InputEnclosure,
-    tags: ['autodocs'],
-    argTypes: storyInputEnclosureArgTypes,
-  });
-</script>
-
-<!-- An ensloure for Form Inputs [TextInput](?path=/docs/components-form-textinput--docs) -->
-<Story name="Default" />
-
-<Story name="Focused" args={{ focused: true }} />
-
-<Story name="Error" args={{ error: true }} />
-
-<Story name="Disabled" args={{ disabled: true }} />
-
-<Story name="Input example">
-  <input type="text" style="flex: 1; border: 0;" placeholder="Enter name" />
-</Story>

package/src/lib/stories/developer tools/components/InputEnclosure/Roundness/Roundness.stories.svelte

@@ -1,20 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import InputEnclosure from '../InputEnclosure.svelte';
-  import { storyInputEnclosureArgTypes } from '../InputEnclosure.stories.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: InputEnclosure,
-    tags: ['autodocs'],
-    argTypes: storyInputEnclosureArgTypes,
-  });
-</script>
-
-<Story name="Roundness 1" />
-
-<Story name="Roundness 2" args={{ roundness: 2 }} />
-
-<Story name="Roundness 3" args={{ roundness: 3 }} />
-
-<Story name="Roundness 0" args={{ roundness: 0 }} />

package/src/lib/stories/developer tools/components/InputEnclosure/WithIcon/WithIcon.stories.svelte

@@ -1,47 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import InputEnclosure from '../InputEnclosure.svelte';
-  import { storyInputEnclosureArgTypes } from '../InputEnclosure.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: InputEnclosure,
-    tags: ['autodocs'],
-    argTypes: storyInputEnclosureArgTypes,
-  });
-</script>
-
-<!-- InputEnclosure icon in front. -->
-<Story name="Icon Before" asChild>
-  <InputEnclosure>
-    {#snippet before()}
-      <Icon icon="material-symbols:content-copy" />
-    {/snippet}
-  </InputEnclosure>
-</Story>
-
-<!-- InputEnclosure icon in front. -->
-<Story name="Icon After" asChild>
-  <InputEnclosure>
-    {#snippet after()}
-      <Icon icon="material-symbols:download-2" />
-    {/snippet}
-  </InputEnclosure>
-</Story>
-
-<Story name="Small" args={{ size: 'small' }} asChild>
-  <InputEnclosure size="small">
-    {#snippet before()}
-      <Icon icon="material-symbols:content-copy" />
-    {/snippet}
-  </InputEnclosure>
-</Story>
-
-<Story name="Large" args={{ size: 'large' }} asChild>
-  <InputEnclosure size="large">
-    {#snippet before()}
-      <Icon icon="material-symbols:content-copy" />
-    {/snippet}
-  </InputEnclosure>
-</Story>

package/src/lib/stories/developer tools/components/Popper/Popper.stories.svelte

@@ -1,124 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
-  import { Menu, MenuItem, Popper } from '$lib/index.js';
-  import Button from '$lib/stories/components/Form/Button/Button.svelte';
-  import { positionXArray, positionYArray } from '$lib/types/position.js';
-
-  export const storyPopperArgTypes: StoryBookArgTypes = {
-    popupPositionX: {
-      control: { type: 'select' },
-      options: positionXArray,
-    },
-    popupPositionY: {
-      control: { type: 'select' },
-      options: positionYArray,
-    },
-  };
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: Popper,
-    tags: ['autodocs'],
-    argTypes: storyPopperArgTypes,
-    parameters: {
-      docs: {
-        story: {
-          height: '200px',
-          inline: false,
-        },
-      },
-    },
-  });
-
-  let open = $state(false);
-</script>
-
-<Story name="Default" args={{ open, onClickOutside: () => (open = false) }} asChild>
-  <Popper {open} onClickOutside={() => (open = false)}>
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<Story name="MenuOpen" args={{ open: true }} asChild>
-  <Popper open>
-    Hello! how are you doing?
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<Story
-  name="CustomPaperProps"
-  args={{
-    open: true,
-    paperProps: {
-      color: 'primary',
-    },
-  }}
-  asChild
->
-  <Popper
-    open
-    paperProps={{
-      color: 'primary',
-    }}
-  >
-    Hello! how are you doing?
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<Story name="FullWidth" asChild>
-  <Popper {open} fullWidth onClickOutside={() => (open = false)}>
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<Story
-  name="CustomPopup"
-  args={{
-    open,
-    onClickOutside: () => (open = false),
-  }}
-  asChild
->
-  <Popper {open} onClickOutside={() => (open = false)}>
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-
-    {#snippet customPopup(popperLocation)}
-      {#if open}
-        <Menu>
-          <MenuItem>{popperLocation?.height}</MenuItem>
-          <MenuItem>{popperLocation?.width}</MenuItem>
-        </Menu>
-      {/if}
-    {/snippet}
-  </Popper>
-</Story>

package/src/lib/stories/developer tools/components/Popper/PopperPopup/PopperPopup.stories.svelte

@@ -1,64 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
-  import { Menu, MenuItem, PopperPopup } from '$lib/index.js';
-  import { positionXArray, positionYArray } from '$lib/types/position.js';
-
-  export const storyPopperPopupArgTypes: StoryBookArgTypes = {
-    popupPositionX: {
-      control: { type: 'select' },
-      options: positionXArray,
-    },
-    popupPositionY: {
-      control: { type: 'select' },
-      options: positionYArray,
-    },
-  };
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: PopperPopup,
-    tags: ['autodocs'],
-    argTypes: storyPopperPopupArgTypes,
-    parameters: {
-      docs: {
-        story: {
-          height: '200px',
-          inline: false,
-        },
-      },
-    },
-  });
-</script>
-
-<Story name="Default" asChild>
-  <PopperPopup>
-    <Menu>
-      <MenuItem>One</MenuItem>
-      <MenuItem>Two</MenuItem>
-      <MenuItem>Three</MenuItem>
-    </Menu>
-  </PopperPopup>
-</Story>
-
-<Story
-  name="CustomPaperProps"
-  args={{
-    paperProps: {
-      color: 'primary',
-    },
-  }}
-  asChild
->
-  <PopperPopup
-    paperProps={{
-      color: 'primary',
-    }}
-  >
-    <Menu>
-      <MenuItem>One</MenuItem>
-      <MenuItem>Two</MenuItem>
-      <MenuItem>Three</MenuItem>
-    </Menu>
-  </PopperPopup>
-</Story>

package/src/lib/stories/developer tools/components/Popper/Positions/AutoPosition/AutoPosition.stories.svelte

@@ -1,92 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { Menu, MenuItem, Popper } from '$lib/index.js';
-  import Button from '$lib/stories/components/Form/Button/Button.svelte';
-  import { storyPopperArgTypes } from '../../Popper.stories.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: Popper,
-    tags: ['autodocs'],
-    argTypes: storyPopperArgTypes,
-    parameters: {
-      docs: {
-        story: {
-          height: '200px',
-          inline: false,
-        },
-      },
-    },
-  });
-
-  let open = $state(false);
-</script>
-
-<!-- Positions will auto adjust depending on the space on top and bottom -->
-<Story
-  name="PositionAutoAdjust"
-  args={{ open, onClickOutside: () => (open = false), popupPositionY: 'top' }}
-  asChild
->
-  <Popper {open} onClickOutside={() => (open = false)} popupPositionY="top">
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<!-- Positions will not auto adjust if you use `lockPoistions` -->
-<Story
-  name="LockPoistions"
-  args={{
-    open,
-    onClickOutside: () => (open = false),
-    popupPositionY: 'top',
-    lockPoistions: true,
-  }}
-  asChild
->
-  <Popper {open} lockPoistions onClickOutside={() => (open = false)} popupPositionY="top">
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<!-- you can also adjust `popperHeightForVerticalPosition` to achive the same -->
-<Story
-  name="HeightForVerticalPosition"
-  args={{
-    open,
-    onClickOutside: () => (open = false),
-    popupPositionY: 'top',
-    popperHeightForVerticalPosition: 3,
-  }}
-  asChild
->
-  <Popper
-    {open}
-    onClickOutside={() => (open = false)}
-    popupPositionY="top"
-    popperHeightForVerticalPosition={3}
-  >
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>

package/src/lib/stories/developer tools/components/Popper/Positions/Positions.stories.svelte

@@ -1,114 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { Menu, MenuItem, Popper } from '$lib/index.js';
-  import Button from '$lib/stories/components/Form/Button/Button.svelte';
-  import { storyPopperArgTypes } from '../Popper.stories.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: Popper,
-    tags: ['autodocs'],
-    argTypes: storyPopperArgTypes,
-    parameters: {
-      layout: 'centered',
-      docs: {
-        story: {
-          height: '400px',
-          inline: false,
-        },
-      },
-    },
-  });
-
-  let open = $state(false);
-</script>
-
-<Story name="BottomLeft" asChild>
-  <Popper {open} onClickOutside={() => (open = false)} popupWidth="100px">
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<Story name="BottomCenter" asChild>
-  <Popper {open} popupPositionX="center" onClickOutside={() => (open = false)} popupWidth="100px">
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<Story name="BottomRight" asChild>
-  <Popper {open} popupPositionX="right" onClickOutside={() => (open = false)} popupWidth="100px">
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<Story name="TopLeft" asChild>
-  <Popper {open} popupPositionY="top" onClickOutside={() => (open = false)} popupWidth="100px">
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<Story name="TopCenter" asChild>
-  <Popper
-    {open}
-    popupPositionY="top"
-    popupPositionX="center"
-    onClickOutside={() => (open = false)}
-    popupWidth="100px"
-  >
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<Story name="TopRight" asChild>
-  <Popper
-    {open}
-    popupPositionY="top"
-    popupPositionX="right"
-    onClickOutside={() => (open = false)}
-    popupWidth="100px"
-  >
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>

package/src/lib/stories/developer tools/components/UtilityButton/Size/Size.stories.svelte

@@ -1,25 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import UtilityButton from '../UtilityButton.svelte';
-  import { storyUtilityButtonArgTypes } from '../UtilityButton.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: UtilityButton,
-    tags: ['autodocs'],
-    argTypes: storyUtilityButtonArgTypes,
-  });
-</script>
-
-<Story name="Normal">
-  <Icon icon="mdi:eye" width="24" height="24" />
-</Story>
-
-<Story name="Small" args={{ size: 'small' }}>
-  <Icon icon="mdi:eye" width="24" height="24" />
-</Story>
-
-<Story name="Large" args={{ size: 'large' }}>
-  <Icon icon="mdi:eye" width="24" height="24" />
-</Story>

package/src/lib/stories/developer tools/components/UtilityButton/UtilityButton.stories.svelte

@@ -1,30 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import UtilityButton from './UtilityButton.svelte';
-  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
-  import Icon from '@iconify/svelte';
-  import { componentSizeArray } from '$lib/types/size.js';
-
-  export const storyUtilityButtonArgTypes: StoryBookArgTypes = {
-    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: UtilityButton,
-    tags: ['autodocs'],
-    argTypes: storyUtilityButtonArgTypes,
-  });
-</script>
-
-<!-- Button with default style -->
-<Story name="Default">
-  <Icon icon="mdi:eye" width="24" height="24" />
-</Story>
-
-<Story name="Disabled" args={{ disabled: true }}>
-  <Icon icon="mdi:eye" width="24" height="24" />
-</Story>