@flightlesslabs/dodo-ui 0.7.2 → 0.9.0

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

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

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

@@ -0,0 +1,43 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import TextInput, { textInputTypeArray } from './TextInput.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 storyTextInputArgTypes: StoryBookArgTypes = {
+    type: {
+      control: { type: 'select' },
+      options: textInputTypeArray,
+    },
+    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: TextInput,
+    tags: ['autodocs'],
+    argTypes: storyTextInputArgTypes,
+    args: { value: 'Hello world!' },
+  });
+</script>
+
+<!-- TextInput with default style -->
+<Story name="Default" />
+
+<Story name="Placeholder" args={{ value: '', placeholder: 'Type something...' }} />
+
+<Story name="No Outline" args={{ outline: false }} />
+
+<Story name="Error" args={{ error: true }} />
+
+<Story name="Disabled" args={{ disabled: true }} />
+
+<Story name="Read only" args={{ readonly: true }} />

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

@@ -8,6 +8,7 @@
     ClipboardEventHandler,
     FocusEventHandler,
     FormEventHandler,
+    KeyboardEventHandler,
   } from 'svelte/elements';
 
   export type TextInputType = 'text' | 'tel' | 'email' | 'password' | 'url' | 'number';
@@ -33,6 +34,10 @@
     currentTarget: EventTarget & HTMLInputElement;
   };
 
+  export type TextInputKeyboardEvent = KeyboardEvent & {
+    currentTarget: EventTarget & HTMLInputElement;
+  };
+
   export interface TextInputProps {
     /** Input type? */
     type?: TextInputType;
@@ -78,6 +83,12 @@
     oncopy?: ClipboardEventHandler<HTMLInputElement>;
     /** oncut event handler */
     oncut?: ClipboardEventHandler<HTMLInputElement>;
+    /** onkeydown event handler */
+    onkeydown?: KeyboardEventHandler<HTMLInputElement>;
+    /** onkeypress event handler */
+    onkeypress?: KeyboardEventHandler<HTMLInputElement>;
+    /** onkeyup event handler */
+    onkeyup?: KeyboardEventHandler<HTMLInputElement>;
   }
 </script>
 
@@ -103,6 +114,9 @@
     onpaste,
     oncopy,
     oncut,
+    onkeydown,
+    onkeypress,
+    onkeyup,
     before,
     after,
     error = false,
@@ -116,8 +130,6 @@
 
   function onfocusMod(e: DynamicInputFocusEvent) {
     const eTyped = e as TextInputFocusEvent;
-    focused = true;
-
     if (onfocus) {
       onfocus(eTyped);
     }
@@ -125,7 +137,6 @@
 
   function onblurMod(e: DynamicInputFocusEvent) {
     const eTyped = e as TextInputFocusEvent;
-    focused = false;
 
     if (onblur) {
       onblur(eTyped);
@@ -147,6 +158,7 @@
       {id}
       {disabled}
       bind:ref
+      bind:focused
       {oninput}
       {onchange}
       onfocus={onfocusMod}
@@ -154,6 +166,9 @@
       {onpaste}
       {oncopy}
       {oncut}
+      onkeydown={onkeydown ? (e) => onkeydown(e as TextInputKeyboardEvent) : undefined}
+      onkeypress={onkeypress ? (e) => onkeypress(e as TextInputKeyboardEvent) : undefined}
+      onkeyup={onkeyup ? (e) => onkeyup(e as TextInputKeyboardEvent) : undefined}
       {placeholder}
       bind:value
       {readonly}

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

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

package/src/lib/stories/components/Layout/Menu/DynamicMenu/Customize/Customize.stories.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import DynamicMenu from '../DynamicMenu.svelte';
+  import { dynamicMenuItemOptions, storyDynamicMenuArgTypes } from '../DynamicMenu.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: DynamicMenu,
+    tags: ['autodocs'],
+    argTypes: storyDynamicMenuArgTypes,
+  });
+</script>
+
+<!-- Custom Menu Item Content -->
+<Story name="CustomMenuItemContent" asChild>
+  <DynamicMenu options={dynamicMenuItemOptions}>
+    {#snippet customMenuItemContent(option, selectedOption)}
+      {selectedOption?.id === option.id ? '✅' : ''} {option.label} 💯💯💯
+    {/snippet}
+  </DynamicMenu>
+</Story>
+
+<!-- Custom Menu Item Placeholder Content -->
+<Story name="CustomPlaceholderMenuItemContent" asChild>
+  <DynamicMenu options={[]} showOptionsPlaceholder>
+    {#snippet customPlaceholderMenuItemContent()}
+      No dice 💯💯💯
+    {/snippet}
+  </DynamicMenu>
+</Story>

package/src/lib/stories/components/Layout/Menu/DynamicMenu/DynamicMenu.stories.svelte

@@ -0,0 +1,56 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import DynamicMenu, { type DynamicMenuItemOption } from './DynamicMenu.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+
+  export const storyDynamicMenuArgTypes: StoryBookArgTypes = {};
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: DynamicMenu,
+    tags: ['autodocs'],
+    argTypes: storyDynamicMenuArgTypes,
+  });
+
+  export const dynamicMenuItemOptions: DynamicMenuItemOption[] = [
+    {
+      id: '1',
+      label: 'One',
+    },
+    {
+      id: '2',
+      label: 'Two',
+    },
+    {
+      id: '3',
+      label: 'Three',
+    },
+    {
+      id: '4',
+      label: 'Four',
+    },
+    {
+      id: '5',
+      label: 'Five',
+    },
+    {
+      id: '6',
+      disabled: true,
+      label: 'Five',
+    },
+  ];
+</script>
+
+<!-- Default DynamicMenu -->
+<Story name="Default" args={{ options: dynamicMenuItemOptions }} />
+
+<!-- Selected Option -->
+<Story
+  name="SelectedOption"
+  args={{ options: dynamicMenuItemOptions, selectedOption: dynamicMenuItemOptions[1] }}
+/>
+
+<Story
+  name="ShowPlaceholder"
+  args={{ options: [], showOptionsPlaceholder: true, optionsPlaceholder: 'No content found.' }}
+/>

package/src/lib/stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte

@@ -0,0 +1,262 @@
+<script lang="ts" module>
+  import type { ComponentSize } from '$lib/types/size.js';
+  import type { MenuItemProps, MenuItemType } from '../MenuItem/MenuItem.svelte';
+
+  export type DynamicMenuItemOption<TMeta = unknown> = {
+    id: string;
+    /** label  */
+    label?: string;
+    /** Custom Metadata  */
+    meta?: TMeta;
+    /** Menu Item type */
+    type?: MenuItemType;
+    /** Menu Separator */
+    separator?: boolean;
+    /** How large should the Menu Items be? */
+    size?: ComponentSize;
+    /** The onclick event handler */
+    onclick?: MouseEventHandler<HTMLButtonElement>;
+    /**  disabled state */
+    disabled?: boolean;
+    /** link href */
+    href?: string;
+    /** Link button: download  */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    download?: any;
+    /** Link button: hreflang  */
+    hreflang?: string | undefined | null;
+    /** Link button: media  */
+    media?: string | undefined | null;
+    /** Link button: ping  */
+    ping?: string | undefined | null;
+    /** Link button: rel  */
+    rel?: string | undefined | null;
+    /** Link button: target  */
+    target?: ButtonLinkTarget;
+    /** Link button: Type  */
+    anchorMediaType?: string | undefined | null;
+    /** Link button: referrerpolicy  */
+    referrerpolicy?: ButtonLinkReferrerpolicy;
+  };
+
+  export interface DynamicMenuProps {
+    /** Menu ref */
+    ref?: HTMLUListElement;
+    /** Custom css class */
+    class?: string;
+    /** Menu Width */
+    width?: string;
+    /** Menu Height */
+    height?: string;
+    /** How large should the Menu Items be? */
+    size?: ComponentSize;
+    /** Menu Separator */
+    separator?: boolean;
+    /** Id */
+    id?: string;
+    /** Options */
+    options?: DynamicMenuItemOption[];
+    /** Selected Option */
+    selectedOption?: DynamicMenuItemOption;
+    /** Custom Menu Item Content */
+    customMenuItemContent?: (
+      option: DynamicMenuItemOption,
+      selectedOption?: DynamicMenuItemOption,
+    ) => Snippet;
+    /** Show Placeholder if no options */
+    showOptionsPlaceholder?: boolean;
+    /** placeholder Text if no options */
+    optionsPlaceholder?: string;
+    /** Custom Menu Item Placeholder Content */
+    customPlaceholderMenuItemContent?: () => Snippet;
+    /** MenuItem: Menu component props */
+    menuItemProps?: Partial<MenuItemProps>;
+    /** Enable Keyboard Navigation */
+    keyboardNavigation?: boolean;
+    /** Keyboard Navigation onEnter */
+    onEnter?: (e: KeyboardEvent, menuItemIndex: number) => void;
+    /** Keyboard Navigation onEsc */
+    onEsc?: (e: KeyboardEvent, menuItemIndex: number) => void;
+    /** On menu item click */
+    onclick?: (e: MouseEvent, option: DynamicMenuItemOption) => void;
+  }
+</script>
+
+<script lang="ts">
+  import Menu from '../Menu.svelte';
+  import type { MouseEventHandler } from 'svelte/elements';
+  import type {
+    ButtonLinkReferrerpolicy,
+    ButtonLinkTarget,
+  } from '$lib/stories/components/Form/Button/Button.svelte';
+  import { MenuItem } from '$lib/index.js';
+  import type { Snippet } from 'svelte';
+
+  let {
+    id,
+    class: className = '',
+    ref = $bindable<HTMLUListElement>(),
+    size,
+    separator,
+    width,
+    height,
+    options,
+    selectedOption,
+    customMenuItemContent,
+    customPlaceholderMenuItemContent,
+    menuItemProps,
+    keyboardNavigation = false,
+    onEnter,
+    onEsc,
+    onclick,
+    showOptionsPlaceholder = false,
+    optionsPlaceholder = 'No options found',
+  }: DynamicMenuProps = $props();
+
+  let menuItemIndex = $state(0);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customMenuItemContentTyped = customMenuItemContent as any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customPlaceholderMenuItemContentTyped = customPlaceholderMenuItemContent as any;
+
+  function onKeyboardNavigation(e: KeyboardEvent) {
+    let keyHit: string | undefined = undefined;
+
+    if (!ref) {
+      return;
+    }
+
+    switch (e.key) {
+      case 'ArrowDown':
+      case 'ArrowUp':
+        keyHit = e.key;
+        e.preventDefault();
+        break;
+      case 'Enter':
+      case 'Esc':
+        keyHit = e.key;
+        break;
+      default:
+        break;
+    }
+
+    if (!keyHit) {
+      return;
+    }
+
+    if (keyHit === 'Enter') {
+      if (onEnter) {
+        onEnter(e, menuItemIndex);
+      }
+
+      return;
+    } else if (keyHit === 'Escape') {
+      if (onEsc) {
+        onEsc(e, menuItemIndex);
+      }
+
+      return;
+    }
+
+    const listItems = ref.querySelectorAll(':scope > li.dodo-ui-MenuItem');
+
+    if (!listItems.length) {
+      return;
+    }
+
+    for (let index = 0; index < listItems.length; index++) {
+      const element = listItems[index];
+
+      element.classList.remove('hover');
+    }
+
+    let newMenuItemIndex = menuItemIndex;
+
+    if (keyHit === 'ArrowDown') {
+      if (listItems[newMenuItemIndex + 1]) {
+        newMenuItemIndex = newMenuItemIndex + 1;
+      } else {
+        newMenuItemIndex = 0;
+      }
+    } else if (keyHit === 'ArrowUp') {
+      if (listItems[newMenuItemIndex - 1]) {
+        newMenuItemIndex = newMenuItemIndex - 1;
+      } else {
+        newMenuItemIndex = listItems.length - 1;
+      }
+    }
+
+    const targetItem = listItems[newMenuItemIndex] as HTMLLIElement;
+
+    targetItem.classList.add('hover');
+
+    targetItem.focus();
+    targetItem.scrollIntoView({ block: 'nearest' });
+
+    menuItemIndex = newMenuItemIndex;
+  }
+
+  $effect(() => {
+    if (!keyboardNavigation) {
+      return;
+    }
+
+    const targetItem = ref.querySelector(':scope > li.dodo-ui-MenuItem.selected') as
+      | HTMLLIElement
+      | undefined;
+
+    if (targetItem) {
+      const selectedIndex = options?.findIndex((option) => option.id === selectedOption?.id);
+
+      if (selectedIndex !== undefined && selectedIndex >= 0) {
+        menuItemIndex = selectedIndex;
+      }
+
+      targetItem.focus();
+      targetItem.scrollIntoView({ block: 'nearest' });
+    }
+
+    window.addEventListener('keydown', onKeyboardNavigation);
+
+    return () => {
+      window.removeEventListener('keydown', onKeyboardNavigation);
+    };
+  });
+</script>
+
+<Menu
+  class={['dodo-ui-DynamicMenu', className].join(' ')}
+  {id}
+  {size}
+  {width}
+  {height}
+  {separator}
+  bind:ref
+>
+  {#if options?.length}
+    {#each options as option (option.id)}
+      <MenuItem
+        {...option}
+        selected={selectedOption?.id === option.id}
+        onclick={(e) => (onclick ? onclick(e, option) : undefined)}
+        {...menuItemProps}
+      >
+        {#if customMenuItemContentTyped}
+          {@render customMenuItemContentTyped(option, selectedOption)}
+        {:else}
+          {option.label || ''}
+        {/if}
+      </MenuItem>
+    {/each}
+  {:else if showOptionsPlaceholder}
+    <MenuItem type="text" disabled={true} {...menuItemProps}>
+      {#if customPlaceholderMenuItemContentTyped}
+        {@render customPlaceholderMenuItemContentTyped()}
+      {:else}
+        {optionsPlaceholder}
+      {/if}
+    </MenuItem>
+  {/if}
+</Menu>

package/src/lib/stories/components/Layout/Menu/DynamicMenu/Events/Events.stories.svelte

@@ -0,0 +1,48 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { dynamicMenuItemOptions, storyDynamicMenuArgTypes } from '../DynamicMenu.stories.svelte';
+  import DynamicMenu, { type DynamicMenuItemOption } from '../DynamicMenu.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: DynamicMenu,
+    tags: ['autodocs'],
+    argTypes: storyDynamicMenuArgTypes,
+  });
+</script>
+
+<!-- Menu Item onclick -->
+<Story name="onclick" asChild>
+  <DynamicMenu
+    keyboardNavigation
+    options={dynamicMenuItemOptions}
+    onclick={(e: MouseEvent, option: DynamicMenuItemOption) => {
+      e.preventDefault();
+      console.log(option);
+    }}
+  />
+</Story>
+
+<!-- KeyboardNavigation Event: onEnter  -->
+<Story name="onEnter" asChild>
+  <DynamicMenu
+    keyboardNavigation
+    options={dynamicMenuItemOptions}
+    onEnter={(e: KeyboardEvent, menuItemIndex: number) => {
+      e.preventDefault();
+      console.log(menuItemIndex);
+    }}
+  />
+</Story>
+
+<!-- KeyboardNavigation Event: onEsc  -->
+<Story name="onEsc" asChild>
+  <DynamicMenu
+    keyboardNavigation
+    options={dynamicMenuItemOptions}
+    onEsc={(e: KeyboardEvent, menuItemIndex: number) => {
+      e.preventDefault();
+      console.log(menuItemIndex);
+    }}
+  />
+</Story>

package/src/lib/stories/components/Layout/Menu/DynamicMenu/KeybaordNavigation/KeybaordNavigation.stories.svelte

@@ -0,0 +1,29 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import DynamicMenu from '../DynamicMenu.svelte';
+  import { dynamicMenuItemOptions, storyDynamicMenuArgTypes } from '../DynamicMenu.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: DynamicMenu,
+    tags: ['autodocs'],
+    argTypes: storyDynamicMenuArgTypes,
+  });
+</script>
+
+<!-- KeyboardNavigationOn -->
+<Story
+  name="KeyboardNavigationOn"
+  args={{
+    options: dynamicMenuItemOptions,
+    keyboardNavigation: true,
+    onEnter: (e: KeyboardEvent, menuItemIndex: number) => {
+      e.preventDefault();
+      console.log(menuItemIndex);
+    },
+    onEsc: (e: KeyboardEvent, menuItemIndex: number) => {
+      e.preventDefault();
+      console.log(menuItemIndex);
+    },
+  }}
+/>

package/src/lib/stories/components/Layout/Menu/DynamicMenu/Options/OptionFormat.mdx

@@ -0,0 +1,72 @@
+import { Source } from '@storybook/blocks';
+
+# Option Format
+
+## DynamicMenuItemOption
+
+<Source
+  dark
+  language="ts"
+  code={`
+type DynamicMenuItemOption<TMeta = unknown> = {
+    id: string;
+    /** label  */
+    label?: string;
+    /** Custom Metadata  */
+    meta?: TMeta;
+    /** Menu Item type */
+    type?: MenuItemType;
+    /** Menu Separator */
+    separator?: boolean;
+    /** How large should the Menu Items be? */
+    size?: ComponentSize;
+    /** The onclick event handler */
+    onclick?: MouseEventHandler<HTMLButtonElement>;
+    /**  disabled state */
+    disabled?: boolean;
+    /** link href */
+    href?: string;
+    /** Link button: download  */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    download?: any;
+    /** Link button: hreflang  */
+    hreflang?: string | undefined | null;
+    /** Link button: media  */
+    media?: string | undefined | null;
+    /** Link button: ping  */
+    ping?: string | undefined | null;
+    /** Link button: rel  */
+    rel?: string | undefined | null;
+    /** Link button: target  */
+    target?: ButtonLinkTarget;
+    /** Link button: Type  */
+    anchorMediaType?: string | undefined | null;
+    /** Link button: referrerpolicy  */
+    referrerpolicy?: ButtonLinkReferrerpolicy;
+  };
+`}
+/>
+
+## Example values
+
+<Source
+  dark
+  language="ts"
+  code={`
+const options: DynamicMenuItemOption[] = [
+   {
+    id: '1',
+    label: 'One',
+  },
+  {
+    id: '2',
+    label: 'Two',
+  },
+  {
+    id: '3',
+    label: 'Three',
+    disabled: true,
+  },
+];
+`}
+/>