@flightlesslabs/dodo-ui 0.7.2 → 0.9.0

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

@@ -0,0 +1,286 @@
+<script lang="ts" module>
+  import type { ComponentRoundness } from '$lib/types/roundness.js';
+  import type { ComponentSize } from '$lib/types/size.js';
+
+  import { type Snippet } from 'svelte';
+  import type {
+    ChangeEventHandler,
+    ClipboardEventHandler,
+    FocusEventHandler,
+    FormEventHandler,
+    KeyboardEventHandler,
+  } from 'svelte/elements';
+
+  export interface NumericInputProps {
+    /** min */
+    min?: number;
+    /** max */
+    max?: number;
+    /** Allow Negative Values */
+    allowNegativeValues?: boolean;
+    /** Decimal Places */
+    decimalPlaces?: number;
+    /** Log number validations */
+    log?: boolean;
+    /** Input ref */
+    ref?: HTMLInputElement;
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** How round should the border radius be? */
+    roundness?: ComponentRoundness;
+    /** Add a border around the button. Default True */
+    outline?: boolean;
+    /** Input value */
+    value?: number;
+    /** How round should the border radius be? */
+    placeholder?: string;
+    /** disabled state */
+    disabled?: boolean;
+    /** Read only ? */
+    readonly?: boolean;
+    /** is there any associated Error ? */
+    error?: boolean;
+    /** Name */
+    name?: string;
+    /** Id */
+    id?: string;
+    /** Icon before button content */
+    before?: Snippet;
+    /** Icon after button content */
+    after?: Snippet;
+    /** Custom css class*/
+    class?: string;
+    /** on Numeric Value Change */
+    onValueChange?: (value: number | undefined) => void;
+    /** oninput event handler */
+    oninput?: FormEventHandler<HTMLInputElement>;
+    /** onchange event handler */
+    onchange?: ChangeEventHandler<HTMLInputElement>;
+    /** onblur event handler */
+    onblur?: FocusEventHandler<HTMLInputElement>;
+    /** onfocus event handler */
+    onfocus?: FocusEventHandler<HTMLInputElement>;
+    /** onpaste event handler */
+    onpaste?: ClipboardEventHandler<HTMLInputElement>;
+    /** oncopy event handler */
+    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>
+
+<script lang="ts">
+  import InputEnclosure from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
+  import DynamicInput, {
+    type DynamicInputFocusEvent,
+    type DynamicInputKeyboardEvent,
+  } from '$lib/stories/developer tools/components/DynamicInput/DynamicInput.svelte';
+  import type { TextInputFocusEvent, TextInputKeyboardEvent } from '../TextInput/TextInput.svelte';
+  import isValidNumberValue from '$lib/stories/developer tools/helpers/Numbers/isValidNumberValue/isValidNumberValue.js';
+
+  let {
+    size = 'normal',
+    roundness = 1,
+    outline = true,
+    name,
+    id,
+    class: className = '',
+    disabled = false,
+    oninput,
+    onchange,
+    onblur,
+    onfocus,
+    onpaste,
+    oncopy,
+    oncut,
+    onkeydown,
+    onkeypress,
+    onkeyup,
+    before,
+    after,
+    error = false,
+    value: valueRaw,
+    placeholder,
+    ref = $bindable<HTMLInputElement>(),
+    readonly = false,
+    decimalPlaces = 0,
+    allowNegativeValues = false,
+    min,
+    max,
+    log = false,
+    onValueChange,
+  }: NumericInputProps = $props();
+
+  let value = $state<string>('');
+  let cachedValue = $state<string>('');
+
+  let focused: boolean = $state(false);
+
+  function onfocusMod(e: DynamicInputFocusEvent) {
+    const eTyped = e as TextInputFocusEvent;
+
+    if (onfocus) {
+      onfocus(eTyped);
+    }
+  }
+
+  function onblurMod(e: DynamicInputFocusEvent) {
+    const eTyped = e as TextInputFocusEvent;
+
+    const isValidWithoutMinMax = isValidNumberValue(`${value}`, {
+      decimalPlaces,
+      allowNegativeValues,
+      log,
+    });
+
+    const isValid = isValidNumberValue(`${value}`, {
+      decimalPlaces,
+      allowNegativeValues,
+      log,
+      min,
+      max,
+    });
+
+    if (isValid) {
+      if (onValueChange) {
+        onValueChange(Number(value));
+      }
+
+      value = `${Number(value)}`;
+      cachedValue = `${Number(value)}`;
+    } else if (isValidWithoutMinMax) {
+      if (min && Number(value) < min) {
+        if (onValueChange) {
+          onValueChange(min);
+        }
+
+        value = `${min}`;
+        cachedValue = `${min}`;
+      } else if (max && Number(value) > max) {
+        if (onValueChange) {
+          onValueChange(max);
+        }
+
+        value = `${max}`;
+        cachedValue = `${max}`;
+      }
+    } else if (value.trim() === '') {
+      if (onValueChange) {
+        onValueChange(undefined);
+      }
+
+      value = '';
+      cachedValue = '';
+    } else if (valueRaw || valueRaw === 0) {
+      if (onValueChange) {
+        onValueChange(valueRaw);
+      }
+
+      value = `${valueRaw}`;
+      cachedValue = `${valueRaw}`;
+    } else {
+      if (onValueChange) {
+        onValueChange(undefined);
+      }
+
+      value = '';
+      cachedValue = '';
+    }
+
+    if (onblur) {
+      onblur(eTyped);
+    }
+  }
+
+  function onkeydownMod(e: DynamicInputKeyboardEvent) {
+    if (onkeydown) {
+      onkeydown(e as TextInputKeyboardEvent);
+    }
+
+    if (e.ctrlKey && e.key.toLocaleLowerCase() === 'c') {
+      return;
+    } else if (e.ctrlKey && e.key.toLocaleLowerCase() === 'v') {
+      return;
+    } else if (e.ctrlKey && e.key.toLocaleLowerCase() === 'x') {
+      return;
+    }
+
+    const valueToCheck = `${value}${e.key.length === 1 ? e.key : ''}`;
+
+    const isValid = isValidNumberValue(valueToCheck, {
+      decimalPlaces,
+      allowNegativeValues,
+      log,
+      strict: false,
+    });
+
+    if (!isValid) {
+      e.preventDefault();
+      value = cachedValue;
+    } else {
+      cachedValue = valueToCheck;
+    }
+  }
+
+  $effect(() => {
+    let updatedValue = '';
+
+    const isValid = isValidNumberValue(`${valueRaw}`, {
+      decimalPlaces,
+      allowNegativeValues,
+      min,
+      max,
+      log,
+    });
+
+    if (valueRaw === undefined) {
+      updatedValue = '';
+    } else if (!isValid) {
+      updatedValue = '';
+    } else {
+      updatedValue = `${valueRaw}`;
+    }
+
+    value = updatedValue;
+    cachedValue = updatedValue;
+  });
+</script>
+
+<div
+  class:outline
+  class:disabled
+  class:error
+  class:focused
+  class={['dodo-ui-NumericInput', `size--${size}`, `roundness--${roundness}`, className].join(' ')}
+>
+  <InputEnclosure {outline} {disabled} {error} {focused} {size} {roundness} {before} {after}>
+    <DynamicInput
+      type="text"
+      {name}
+      {id}
+      {disabled}
+      bind:ref
+      bind:focused
+      {oninput}
+      {onchange}
+      onfocus={onfocusMod}
+      onblur={onblurMod}
+      {onpaste}
+      {oncopy}
+      {oncut}
+      onkeydown={onkeydownMod}
+      onkeypress={onkeypress ? (e) => onkeypress(e as TextInputKeyboardEvent) : undefined}
+      onkeyup={onkeyup ? (e) => onkeyup(e as TextInputKeyboardEvent) : undefined}
+      {placeholder}
+      {readonly}
+      variant="input"
+      bind:value
+    />
+  </InputEnclosure>
+</div>

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

@@ -0,0 +1,87 @@
+<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,
+  }}
+/>

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

@@ -0,0 +1,132 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { storyPasswordInputArgTypes } from '../PasswordInput.stories.svelte';
+  import PasswordInput, { type PasswordInputToggleEvent } from '../PasswordInput.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: PasswordInput,
+    tags: ['autodocs'],
+    argTypes: storyPasswordInputArgTypes,
+  });
+</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="Toggle"
+  args={{
+    ontoggle: (e: PasswordInputToggleEvent) => {
+      const target = e.event.target as HTMLButtonElement;
+
+      console.log('ontoggle Event', e, target);
+    },
+  }}
+/>
+
+<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/PasswordInput/PasswordInput.stories.svelte

@@ -0,0 +1,59 @@
+<script module lang="ts">
+  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';
+  import { componentRoundnessArray } from '$lib/types/roundness.js';
+  import { componentSizeArray } from '$lib/types/size.js';
+
+  export const storyPasswordInputArgTypes: 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: PasswordInput,
+    tags: ['autodocs'],
+    argTypes: storyPasswordInputArgTypes,
+    args: { value: 'Hello world!' },
+  });
+</script>
+
+<!-- PasswordInput 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 }} />
+
+<!-- Disable password toggle -->
+<Story name="No toggle" args={{ passwordToggle: false }} />
+
+<!-- Show Password by default -->
+<Story name="Show Password" args={{ passwordToggleState: true }} />
+
+<Story name="Read only" args={{ readonly: true }} />
+
+<!-- Show Password by default -->
+<Story name="Custom toggle icon" asChild>
+  <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

@@ -7,6 +7,7 @@
     ClipboardEventHandler,
     FocusEventHandler,
     FormEventHandler,
+    KeyboardEventHandler,
   } from 'svelte/elements';
 
   export type PasswordInputToggleEvent = {
@@ -65,6 +66,12 @@
     oncut?: ClipboardEventHandler<HTMLInputElement>;
     /** ontoggle event handler */
     ontoggle?: (e: PasswordInputToggleEvent) => void;
+    /** onkeydown event handler */
+    onkeydown?: KeyboardEventHandler<HTMLInputElement>;
+    /** onkeypress event handler */
+    onkeypress?: KeyboardEventHandler<HTMLInputElement>;
+    /** onkeyup event handler */
+    onkeyup?: KeyboardEventHandler<HTMLInputElement>;
   }
 </script>
 
@@ -72,7 +79,7 @@
   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';
-  import type { TextInputFocusEvent } from '../TextInput/TextInput.svelte';
+  import type { TextInputFocusEvent, TextInputKeyboardEvent } from '../TextInput/TextInput.svelte';
   import { DynamicInput, type DynamicInputFocusEvent } from '$lib/index.js';
 
   let {
@@ -90,6 +97,9 @@
     onpaste,
     oncopy,
     oncut,
+    onkeydown,
+    onkeypress,
+    onkeyup,
     before,
     after,
     customPasswordToggleIcon,
@@ -111,7 +121,6 @@
 
   function onfocusMod(e: DynamicInputFocusEvent) {
     const eTyped = e as TextInputFocusEvent;
-    focused = true;
 
     if (onfocus) {
       onfocus(eTyped);
@@ -120,7 +129,6 @@
 
   function onblurMod(e: DynamicInputFocusEvent) {
     const eTyped = e as TextInputFocusEvent;
-    focused = false;
 
     if (onblur) {
       onblur(eTyped);
@@ -156,6 +164,7 @@
       {id}
       {disabled}
       bind:ref
+      bind:focused
       {oninput}
       {onchange}
       onfocus={onfocusMod}
@@ -163,6 +172,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/PasswordInput/Roundness/Roundness.stories.svelte

@@ -0,0 +1,20 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import PasswordInput from '../PasswordInput.svelte';
+  import { storyPasswordInputArgTypes } from '../PasswordInput.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: PasswordInput,
+    tags: ['autodocs'],
+    argTypes: storyPasswordInputArgTypes,
+  });
+</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/components/Form/PasswordInput/Size/Size.stories.svelte

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

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

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