@flightlesslabs/dodo-ui 0.3.0 → 0.4.0

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

@@ -16,16 +16,19 @@
   } from 'svelte/elements';
   import type { TextInputFocusEvent, TextInputRoundness } from '../TextInput/TextInput.svelte';
   import Icon from '@iconify/svelte';
+  import UtilityButton from '$lib/stories/developer tools/components/UtilityButton/UtilityButton.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;
     /** Add a border around the button. Default True */
@@ -34,8 +37,10 @@
     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 +88,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;
@@ -152,18 +162,20 @@
     {oncut}
     {placeholder}
     bind:value
+    bind:this={ref}
+    {readonly}
   />
 
   {#if passwordToggle && !disabled}
-    <button class="passwordToggle" title="Toggle password" onclick={ontoggleMod} class:toggle>
-      {#if passwordToggleIcon}
-        {@render passwordToggleIcon()}
+    <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}
-    </button>
+    </UtilityButton>
   {/if}
 
   {#if after}
@@ -181,8 +193,6 @@
 
     --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) {
@@ -192,8 +202,6 @@
 
     --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 {
@@ -270,10 +278,6 @@
             margin-left: -4px;
           }
         }
-
-        .passwordToggle {
-          width: var(--dodo-ui-element-height-normal);
-        }
       }
 
       &--small {
@@ -294,10 +298,6 @@
             margin-left: -2px;
           }
         }
-
-        .passwordToggle {
-          width: var(--dodo-ui-element-height-small);
-        }
       }
 
       &--large {
@@ -318,10 +318,6 @@
             margin-left: -4px;
           }
         }
-
-        .passwordToggle {
-          width: var(--dodo-ui-element-height-large);
-        }
       }
     }
 
@@ -338,24 +334,5 @@
         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);
-      }
-    }
   }
 </style>

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

@@ -37,3 +37,5 @@
 <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

@@ -24,6 +24,8 @@
   interface TextInputProps {
     /** Input type? */
     type?: TextInputType;
+    /** Input ref */
+    ref?: HTMLInputElement;
     /** How large should the button be? */
     size?: ComponentSize;
     /** How round should the border radius be? */
@@ -34,8 +36,10 @@
     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 */
@@ -85,6 +89,8 @@
     error = false,
     value = $bindable<string>(),
     placeholder,
+    ref = $bindable<HTMLInputElement>(),
+    readonly = false,
   }: TextInputProps = $props();
 
   let focused: boolean = $state(false);
@@ -131,7 +137,9 @@
     {oncopy}
     {oncut}
     {placeholder}
+    {readonly}
     bind:value
+    bind:this={ref}
   />
   {#if after}
     <span class="content--after">

package/src/lib/stories/developer tools/Intro.mdx

@@ -0,0 +1,7 @@
+# Developer Tools
+
+A set of components and tools used internally in dodo-ui.
+
+## Explore More
+
+- [Utility Button](?path=/docs/developer-tools-components-utilitybutton--docs)

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

@@ -0,0 +1,27 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { fn } from '@storybook/test';
+  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,
+    args: {
+      onclick: fn(),
+    },
+  });
+</script>
+
+<Story name="Normal" args={{ disabled: false }}>
+  <UtilityButton><Icon icon="mdi:eye" width="24" height="24" /></UtilityButton>
+</Story>
+<Story name="Small" args={{ size: 'small' }}>
+  <UtilityButton size="small"><Icon icon="mdi:eye" width="22" height="22" /></UtilityButton>
+</Story>
+<Story name="Large" args={{ size: 'large' }}>
+  <UtilityButton size="large"><Icon icon="mdi:eye" width="28" height="28" /></UtilityButton>
+</Story>

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

@@ -0,0 +1,33 @@
+<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 { fn } from '@storybook/test';
+
+  export const storyUtilityButtonArgTypes: StoryBookArgTypes = {
+    size: {
+      control: { type: 'select' },
+      options: ['normal', 'small', 'large'],
+    },
+  };
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: UtilityButton,
+    tags: ['autodocs'],
+    argTypes: storyUtilityButtonArgTypes,
+    args: {
+      onclick: fn(),
+    },
+  });
+</script>
+
+<!-- Button with default style -->
+<Story name="Default">
+  <UtilityButton><Icon icon="mdi:eye" width="24" height="24" /></UtilityButton>
+</Story>
+
+<Story name="Disabled" args={{ disabled: true }}>
+  <UtilityButton disabled><Icon icon="mdi:eye" width="24" height="24" /></UtilityButton>
+</Story>

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

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import type { ComponentSize } from '$lib/types.js';
+  import type { Snippet } from 'svelte';
+  import type { MouseEventHandler } from 'svelte/elements';
+
+  interface UtilityButtonProps {
+    /** Button contents goes here*/
+    children?: Snippet;
+    /** Button ref */
+    ref?: HTMLButtonElement;
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** Button disabled state */
+    disabled?: boolean;
+    /** Name */
+    name?: string;
+    /** Id */
+    id?: string;
+    /** Title (for tooltip) */
+    title?: string;
+    /** Custom css class*/
+    class?: string;
+    /** The onclick event handler */
+    onclick?: MouseEventHandler<HTMLButtonElement>;
+  }
+
+  let {
+    children,
+    size = 'normal',
+    name,
+    id,
+    title,
+    class: className = '',
+    disabled = false,
+    onclick,
+    ref = $bindable<HTMLButtonElement>(),
+  }: UtilityButtonProps = $props();
+</script>
+
+<button
+  class={['dodo-ui-UtilityButton', `size--${size}`, className].join(' ')}
+  {name}
+  {id}
+  {title}
+  {disabled}
+  {onclick}
+  bind:this={ref}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</button>
+
+<style lang="scss">
+  :global(:root) {
+    --dodo-ui-UtilityButton-hover: var(--dodo-color-primary-600);
+    --dodo-ui-UtilityButton-active: var(--dodo-color-primary-600);
+
+    --dodo-ui-UtilityButton-disabled-color: var(--dodo-color-default-400);
+  }
+
+  :global(.dodo-theme--dark) {
+    --dodo-ui-UtilityButton-hover: var(--dodo-color-primary-600);
+    --dodo-ui-UtilityButton-active: var(--dodo-color-primary-600);
+
+    --dodo-ui-UtilityButton-disabled-color: var(--dodo-color-default-500);
+  }
+
+  .dodo-ui-UtilityButton {
+    cursor: pointer;
+    outline: none;
+    transition: all 150ms;
+    text-decoration: none;
+    margin: 0;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-family: inherit;
+    background-color: transparent;
+    border: 0;
+    outline: 0;
+    padding: 0;
+    color: var(--dodo-color-default-700);
+    border-radius: 50%;
+    font-family: inherit;
+
+    &:hover {
+      color: var(--dodo-ui-UtilityButton-hover);
+    }
+
+    &:active {
+      color: var(--dodo-ui-UtilityButton-active);
+    }
+
+    &.size {
+      &--normal {
+        height: var(--dodo-ui-element-height-normal);
+        width: var(--dodo-ui-element-height-normal);
+        font-size: 1rem;
+      }
+
+      &--small {
+        height: var(--dodo-ui-element-height-small);
+        width: var(--dodo-ui-element-height-small);
+        font-size: 0.9rem;
+      }
+
+      &--large {
+        height: var(--dodo-ui-element-height-large);
+        width: var(--dodo-ui-element-height-large);
+        font-size: 1.1rem;
+      }
+    }
+
+    &[disabled] {
+      cursor: initial;
+      color: var(--dodo-ui-UtilityButton-disabled-color);
+
+      &:hover {
+        color: var(--dodo-ui-UtilityButton-disabled-color);
+      }
+
+      &:active {
+        color: var(--dodo-ui-UtilityButton-disabled-color);
+      }
+    }
+  }
+</style>