@flightlesslabs/dodo-ui 0.3.0 → 0.5.0

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

@@ -0,0 +1,92 @@
+<script lang="ts" module>
+  export type MessageColor = 'default' | 'primary' | 'safe' | 'warning' | 'danger' | 'info';
+</script>
+
+<script lang="ts">
+  import type { ComponentSize } from '$lib/types.js';
+
+  import type { Snippet } from 'svelte';
+
+  interface MessageProps {
+    /** Message contents goes here */
+    children?: Snippet;
+    /** Message ref */
+    ref?: HTMLDivElement;
+    /** What color to use? */
+    color?: MessageColor;
+    /** Message size */
+    size?: ComponentSize;
+    /** Custom css class*/
+    class?: string;
+    /** Test: ⚠️ Unsafe Children String. Do Not use*/
+    _unsafeChildrenStringForTesting?: string;
+  }
+
+  let {
+    children,
+    class: className = '',
+    color = 'default',
+    ref = $bindable<HTMLDivElement>(),
+    _unsafeChildrenStringForTesting,
+    size = 'normal',
+  }: MessageProps = $props();
+</script>
+
+<div
+  class={['dodo-ui-Message', `color--${color}`, `size--${size}`, className].join(' ')}
+  bind:this={ref}
+>
+  {#if children}
+    {@render children()}
+  {:else if _unsafeChildrenStringForTesting}
+    {_unsafeChildrenStringForTesting}
+  {/if}
+</div>
+
+<style lang="scss">
+  .dodo-ui-Message {
+    letter-spacing: 0.3px;
+    display: flex;
+    font-family: inherit;
+
+    &.size {
+      &--normal {
+        font-size: 1rem;
+      }
+
+      &--small {
+        font-size: 0.9rem;
+      }
+
+      &--large {
+        font-size: 1.1rem;
+      }
+    }
+
+    &.color {
+      &--default {
+        color: var(--dodo-color-default-800);
+      }
+
+      &--primary {
+        color: var(--dodo-color-primary-600);
+      }
+
+      &--safe {
+        color: var(--dodo-color-safe-600);
+      }
+
+      &--warning {
+        color: var(--dodo-color-warning-600);
+      }
+
+      &--danger {
+        color: var(--dodo-color-danger-600);
+      }
+
+      &--info {
+        color: var(--dodo-color-info-600);
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,24 @@
+<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">
+  <Message>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Small" args={{ size: 'small' }}>
+  <Message size="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Large" args={{ size: 'large' }}>
+  <Message size="large">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>

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

@@ -2,6 +2,7 @@
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import PasswordInput from './PasswordInput.svelte';
   import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+  import Icon from '@iconify/svelte';
 
   export const storyPasswordInputArgTypes: StoryBookArgTypes = {
     roundness: {
@@ -38,4 +39,19 @@
 <Story name="No toggle" args={{ passwordToggle: false }} />
 
 <!-- Show Password by default -->
-<Story name="Show Password" args={{ defaultPasswordToggleState: true }} />
+<Story name="Show Password" args={{ passwordToggleState: true }} />
+
+<Story name="Read only" args={{ readonly: true }} />
+
+<!-- Show Password by default -->
+<Story name="Custom toggle icon">
+  <PasswordInput value="Hello world!">
+    {#snippet customPasswordToggleIcon(toggle)}
+      {#if toggle}
+        <Icon icon="mingcute:eye-close-line" width="24" height="24" />
+      {:else}
+        <Icon icon="mingcute:eye-2-line" width="24" height="24" />
+      {/if}
+    {/snippet}
+  </PasswordInput>
+</Story>

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

@@ -6,7 +6,7 @@
 </script>
 
 <script lang="ts">
-  import type { ComponentSize } from '$lib/types.js';
+  import type { ComponentRoundness, ComponentSize } from '$lib/types.js';
   import type { Snippet } from 'svelte';
   import type {
     ChangeEventHandler,
@@ -14,28 +14,34 @@
     FocusEventHandler,
     FormEventHandler,
   } from 'svelte/elements';
-  import type { TextInputFocusEvent, TextInputRoundness } from '../TextInput/TextInput.svelte';
+  import type { TextInputFocusEvent } from '../TextInput/TextInput.svelte';
   import Icon from '@iconify/svelte';
+  import UtilityButton from '$lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte';
+  import InputEnclosure from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
 
   interface PasswordInputProps {
     /** How large should the button be? */
     size?: ComponentSize;
+    /** Input ref */
+    ref?: HTMLInputElement;
     /** Toggle Password */
     passwordToggle?: boolean;
     /** Default Password Toggle State */
-    defaultPasswordToggleState?: boolean;
+    passwordToggleState?: boolean;
     /** Toggle Password Icon */
-    passwordToggleIcon?: Snippet;
+    customPasswordToggleIcon?: (toggle: boolean) => Snippet;
     /** How round should the border radius be? */
-    roundness?: TextInputRoundness;
+    roundness?: ComponentRoundness | false;
     /** Add a border around the button. Default True */
     outline?: boolean;
     /** Input value */
     value?: string;
     /** How round should the border radius be? */
     placeholder?: string;
-    /** Button disabled state */
+    /** disabled state */
     disabled?: boolean;
+    /** Read only ? */
+    readonly?: boolean;
     /** is there any associated Error ? */
     error?: boolean;
     /** Name */
@@ -83,17 +89,22 @@
     oncut,
     before,
     after,
-    passwordToggleIcon,
+    customPasswordToggleIcon,
     error = false,
     passwordToggle = true,
-    defaultPasswordToggleState = false,
+    passwordToggleState = $bindable<boolean>(),
     value = $bindable<string>(),
     placeholder,
     ontoggle,
+    ref = $bindable<HTMLInputElement>(),
+    readonly = false,
   }: PasswordInputProps = $props();
 
   let focused: boolean = $state(false);
-  let toggle: boolean = $state(defaultPasswordToggleState);
+  let toggle: boolean = $state(passwordToggleState);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customPasswordToggleIconTyped = customPasswordToggleIcon as any;
 
   function onfocusMod(e: TextInputFocusEvent) {
     focused = true;
@@ -133,76 +144,41 @@
   class:toggle
   class={['dodo-ui-PasswordInput', `size--${size}`, `roundness--${roundness}`, className].join(' ')}
 >
-  {#if before}
-    <span class="content--before">
-      {@render before()}
-    </span>
-  {/if}
-  <input
-    type={passwordToggle && toggle ? 'text' : 'password'}
-    {name}
-    {id}
-    {disabled}
-    {oninput}
-    {onchange}
-    onfocus={onfocusMod}
-    onblur={onblurMod}
-    {onpaste}
-    {oncopy}
-    {oncut}
-    {placeholder}
-    bind:value
-  />
-
-  {#if passwordToggle && !disabled}
-    <button class="passwordToggle" title="Toggle password" onclick={ontoggleMod} class:toggle>
-      {#if passwordToggleIcon}
-        {@render passwordToggleIcon()}
-      {:else if toggle}
-        <Icon icon="mdi:eye-off" width="24" height="24" />
-      {:else}
-        <Icon icon="mdi:eye" width="24" height="24" />
-      {/if}
-    </button>
-  {/if}
-
-  {#if after}
-    <span class="content--after">
-      {@render after()}
-    </span>
-  {/if}
+  <InputEnclosure {outline} {disabled} {error} {focused} {size} {roundness} {before} {after}>
+    <input
+      type={passwordToggle && toggle ? 'text' : 'password'}
+      {name}
+      {id}
+      {disabled}
+      {oninput}
+      {onchange}
+      onfocus={onfocusMod}
+      onblur={onblurMod}
+      {onpaste}
+      {oncopy}
+      {oncut}
+      {placeholder}
+      bind:value
+      bind:this={ref}
+      {readonly}
+    />
+
+    {#if passwordToggle && !disabled}
+      <UtilityButton {size} title="Toggle password" class="passwordToggle" onclick={ontoggleMod}>
+        {#if customPasswordToggleIcon}
+          {@render customPasswordToggleIconTyped(toggle)}
+        {:else if toggle}
+          <Icon icon="mdi:eye-off" width="24" height="24" />
+        {:else}
+          <Icon icon="mdi:eye" width="24" height="24" />
+        {/if}
+      </UtilityButton>
+    {/if}
+  </InputEnclosure>
 </div>
 
 <style lang="scss">
-  :global(:root) {
-    --dodo-ui-PasswordInput-border-color: var(--dodo-color-default-500);
-    --dodo-ui-PasswordInput-focus-border-color: var(--dodo-color-primary-500);
-    --dodo-ui-PasswordInput-error-border-color: var(--dodo-color-danger-500);
-
-    --dodo-ui-PasswordInput-disabled-color: var(--dodo-color-default-400);
-    --dodo-ui-PasswordInput-disabled-bg: var(--dodo-color-default-200);
-
-    --dodo-ui-PasswordInput-ToggleButton-hover: var(--dodo-color-primary-700);
-  }
-
-  :global(.dodo-theme--dark) {
-    --dodo-ui-PasswordInput-border-color: var(--dodo-color-default-600);
-    --dodo-ui-PasswordInput-focus-border-color: var(--dodo-color-primary-600);
-    --dodo-ui-PasswordInput-error-border-color: var(--dodo-color-danger-600);
-
-    --dodo-ui-PasswordInput-disabled-bg: var(--dodo-color-default-100);
-    --dodo-ui-PasswordInput-disabled-color: var(--dodo-color-default-500);
-
-    --dodo-ui-PasswordInput-ToggleButton-hover: var(--dodo-color-primary-600);
-  }
-
   .dodo-ui-PasswordInput {
-    display: flex;
-    overflow: hidden;
-    color: var(--dodo-color-default-800);
-    transition: all 150ms;
-    border: 0;
-
     input {
       flex: 1;
       border: 0;
@@ -214,147 +190,26 @@
       letter-spacing: 0.3px;
     }
 
-    &.outline {
-      border-style: solid;
-      border-width: var(--dodo-ui-element-border-width);
-      border-color: var(--dodo-ui-PasswordInput-border-color);
-    }
-
-    &.focused {
-      border-color: var(--dodo-ui-PasswordInput-focus-border-color);
-    }
-
-    &.error {
-      border-color: var(--dodo-ui-PasswordInput-error-border-color);
-    }
-
-    &.disabled {
-      cursor: initial;
-      background-color: var(--dodo-ui-PasswordInput-disabled-bg);
-      color: var(--dodo-ui-PasswordInput-disabled-color);
-      border-color: var(--dodo-ui-PasswordInput-disabled-bg);
-    }
-
-    .content {
-      &--after,
-      &--before {
-        &:empty {
-          display: none;
-        }
-      }
-
-      &--after,
-      &--before {
-        display: inline-flex;
-        height: 100%;
-        align-items: center;
-      }
-    }
-
     &.size {
       &--normal {
-        height: var(--dodo-ui-element-height-normal);
         input {
           font-size: 1rem;
           padding: 0 12px;
         }
-
-        .content {
-          &--before {
-            margin-left: 12px;
-            margin-right: -4px;
-          }
-
-          &--after {
-            margin-right: 12px;
-            margin-left: -4px;
-          }
-        }
-
-        .passwordToggle {
-          width: var(--dodo-ui-element-height-normal);
-        }
       }
 
       &--small {
-        height: var(--dodo-ui-element-height-small);
         input {
           padding: 0 8px;
           font-size: 0.9rem;
         }
-
-        .content {
-          &--before {
-            margin-left: 8px;
-            margin-right: -2px;
-          }
-
-          &--after {
-            margin-right: 8px;
-            margin-left: -2px;
-          }
-        }
-
-        .passwordToggle {
-          width: var(--dodo-ui-element-height-small);
-        }
       }
 
       &--large {
-        height: var(--dodo-ui-element-height-large);
         input {
           font-size: 1.1rem;
           padding: 0 14px;
         }
-
-        .content {
-          &--before {
-            margin-left: 14px;
-            margin-right: -4px;
-          }
-
-          &--after {
-            margin-right: 14px;
-            margin-left: -4px;
-          }
-        }
-
-        .passwordToggle {
-          width: var(--dodo-ui-element-height-large);
-        }
-      }
-    }
-
-    &.roundness {
-      &--1x {
-        border-radius: var(--dodo-ui-element-roundness-1x);
-      }
-
-      &--2x {
-        border-radius: var(--dodo-ui-element-roundness-2x);
-      }
-
-      &--3x {
-        border-radius: var(--dodo-ui-element-roundness-3x);
-      }
-    }
-
-    .passwordToggle {
-      background-color: transparent;
-      outline: 0;
-      border: 0;
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      height: 100%;
-      cursor: pointer;
-      padding: 0;
-      margin-right: 4px;
-      color: var(--dodo-color-default-700);
-      transition: all 150ms;
-
-      &:hover {
-        color: var(--dodo-ui-PasswordInput-ToggleButton-hover);
       }
     }
   }

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

@@ -0,0 +1,79 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { type SimpleSelectFocusEvent } from '../SimpleSelect.svelte';
+  import SimpleSelect from '../SimpleSelect.svelte';
+  import {
+    storySimpleSelectArgTypes,
+    storySimpleSelectOptions,
+  } from '../SimpleSelect.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: SimpleSelect,
+    tags: ['autodocs'],
+    argTypes: storySimpleSelectArgTypes,
+    args: { options: storySimpleSelectOptions },
+  });
+</script>
+
+<Story
+  name="Change"
+  args={{
+    onchange: (e: Event) => {
+      const target = e.target as HTMLSelectElement;
+
+      console.log('onChange Event', target.value);
+    },
+  }}
+>
+  <SimpleSelect
+    onchange={(e: Event) => {
+      const target = e.target as HTMLSelectElement;
+
+      console.log('onchange Event', target.value);
+    }}
+    options={storySimpleSelectOptions}
+  />
+</Story>
+
+<!-- `e: SimpleSelectFocusEvent` -->
+<Story
+  name="Focus"
+  args={{
+    onfocus: (e: SimpleSelectFocusEvent) => {
+      const target = e.target as HTMLSelectElement;
+
+      console.log('onfocus Event', target);
+    },
+  }}
+>
+  <SimpleSelect
+    onfocus={(e: SimpleSelectFocusEvent) => {
+      const target = e.target as HTMLSelectElement;
+
+      console.log('onfocus Event', target);
+    }}
+    options={storySimpleSelectOptions}
+  />
+</Story>
+
+<!-- `e: SimpleSelectFocusEvent` -->
+<Story
+  name="Blur"
+  args={{
+    onblur: (e: SimpleSelectFocusEvent) => {
+      const target = e.target as HTMLSelectElement;
+
+      console.log('onblur Event', target);
+    },
+  }}
+>
+  <SimpleSelect
+    onblur={(e: SimpleSelectFocusEvent) => {
+      const target = e.target as HTMLSelectElement;
+
+      console.log('onblur Event', target);
+    }}
+    options={storySimpleSelectOptions}
+  />
+</Story>

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

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

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

@@ -0,0 +1,64 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { type SimpleSelectOption } from './SimpleSelect.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+  import SimpleSelect from './SimpleSelect.svelte';
+
+  export const storySimpleSelectArgTypes: StoryBookArgTypes = {
+    type: {
+      control: { type: 'select' },
+      options: ['text', 'tel', 'email', 'password', 'url', 'number'],
+    },
+    roundness: {
+      control: { type: 'select' },
+      options: [false, '1x', '2x', '3x'],
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['normal', 'small', 'large'],
+    },
+  };
+
+  export const storySimpleSelectOptions: SimpleSelectOption[] = [
+    {
+      value: 'volvo',
+      label: 'Volvo',
+    },
+    {
+      value: 'saab',
+      label: 'Saab',
+    },
+    {
+      value: 'mercedes',
+      label: 'Mercedes',
+    },
+    {
+      value: 'audi',
+      label: 'Audi',
+    },
+    {
+      value: 'opel',
+      label: 'Opel',
+      disabled: true,
+    },
+  ];
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: SimpleSelect,
+    tags: ['autodocs'],
+    argTypes: storySimpleSelectArgTypes,
+    args: { options: storySimpleSelectOptions },
+  });
+</script>
+
+<!-- SimpleSelect 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 }} />