@flightlesslabs/dodo-ui 0.4.0 → 0.6.0

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

@@ -1,5 +1,4 @@
 <script lang="ts" module>
-  export type TextInputRoundness = ComponentRoundness | false;
   export type TextInputType = 'text' | 'tel' | 'email' | 'password' | 'url' | 'number';
 
   export type TextInputFocusEvent = FocusEvent & {
@@ -12,6 +11,8 @@
 </script>
 
 <script lang="ts">
+  import InputEnclosure from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
+
   import type { ComponentRoundness, ComponentSize } from '$lib/types.js';
   import type { Snippet } from 'svelte';
   import type {
@@ -29,7 +30,7 @@
     /** How large should the button be? */
     size?: ComponentSize;
     /** How round should the border radius be? */
-    roundness?: TextInputRoundness;
+    roundness?: ComponentRoundness | false;
     /** Add a border around the button. Default True */
     outline?: boolean;
     /** Input value */
@@ -119,61 +120,29 @@
   class:focused
   class={['dodo-ui-TextInput', `size--${size}`, `roundness--${roundness}`, className].join(' ')}
 >
-  {#if before}
-    <span class="content--before">
-      {@render before()}
-    </span>
-  {/if}
-  <input
-    {type}
-    {name}
-    {id}
-    {disabled}
-    {oninput}
-    {onchange}
-    onfocus={onfocusMod}
-    onblur={onblurMod}
-    {onpaste}
-    {oncopy}
-    {oncut}
-    {placeholder}
-    {readonly}
-    bind:value
-    bind:this={ref}
-  />
-  {#if after}
-    <span class="content--after">
-      {@render after()}
-    </span>
-  {/if}
+  <InputEnclosure {outline} {disabled} {error} {focused} {size} {roundness} {before} {after}>
+    <input
+      {type}
+      {name}
+      {id}
+      {disabled}
+      {oninput}
+      {onchange}
+      onfocus={onfocusMod}
+      onblur={onblurMod}
+      {onpaste}
+      {oncopy}
+      {oncut}
+      {placeholder}
+      {readonly}
+      bind:value
+      bind:this={ref}
+    />
+  </InputEnclosure>
 </div>
 
 <style lang="scss">
-  :global(:root) {
-    --dodo-ui-TextInput-border-color: var(--dodo-color-default-500);
-    --dodo-ui-TextInput-focus-border-color: var(--dodo-color-primary-500);
-    --dodo-ui-TextInput-error-border-color: var(--dodo-color-danger-500);
-
-    --dodo-ui-TextInput-disabled-color: var(--dodo-color-default-400);
-    --dodo-ui-TextInput-disabled-bg: var(--dodo-color-default-200);
-  }
-
-  :global(.dodo-theme--dark) {
-    --dodo-ui-TextInput-border-color: var(--dodo-color-default-600);
-    --dodo-ui-TextInput-focus-border-color: var(--dodo-color-primary-600);
-    --dodo-ui-TextInput-error-border-color: var(--dodo-color-danger-600);
-
-    --dodo-ui-TextInput-disabled-bg: var(--dodo-color-default-100);
-    --dodo-ui-TextInput-disabled-color: var(--dodo-color-default-500);
-  }
-
   .dodo-ui-TextInput {
-    display: flex;
-    overflow: hidden;
-    color: var(--dodo-color-default-800);
-    transition: all 150ms;
-    border: 0;
-
     input {
       flex: 1;
       border: 0;
@@ -185,116 +154,26 @@
       letter-spacing: 0.3px;
     }
 
-    &.outline {
-      border-style: solid;
-      border-width: var(--dodo-ui-element-border-width);
-      border-color: var(--dodo-ui-TextInput-border-color);
-    }
-
-    &.focused {
-      border-color: var(--dodo-ui-TextInput-focus-border-color);
-    }
-
-    &.error {
-      border-color: var(--dodo-ui-TextInput-error-border-color);
-    }
-
-    &.disabled {
-      cursor: initial;
-      background-color: var(--dodo-ui-TextInput-disabled-bg);
-      color: var(--dodo-ui-TextInput-disabled-color);
-      border-color: var(--dodo-ui-TextInput-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;
-          }
-        }
       }
 
       &--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;
-          }
-        }
       }
 
       &--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;
-          }
-        }
-      }
-    }
-
-    &.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);
       }
     }
   }

package/src/lib/stories/components/Layout/Paper/Paper.stories.svelte

@@ -0,0 +1,36 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Paper from './Paper.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+
+  export const storyPaperArgTypes: StoryBookArgTypes = {
+    roundness: {
+      control: { type: 'select' },
+      options: [false, '1x', '2x', '3x', 'full'],
+    },
+    shadow: {
+      control: { type: 'select' },
+      options: [false, '1x', '2x', '3x', '4x', '5x', '6x', '7x'],
+    },
+  };
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Paper,
+    tags: ['autodocs'],
+    argTypes: storyPaperArgTypes,
+  });
+</script>
+
+<!-- ⚠️ Test Paper: Do not use! -->
+<Story
+  name="Test Paper"
+  args={{
+    _unsafeChildrenStringForTesting: 'Hola!',
+  }}
+/>
+
+<!-- Paper with default style -->
+<Story name="Default">
+  <Paper>Hola!</Paper>
+</Story>

package/src/lib/stories/components/Layout/Paper/Paper.svelte

@@ -0,0 +1,91 @@
+<script lang="ts" module>
+  export type PaperRoundness = ComponentRoundness | false | ComponentRoundnessFull;
+  export type PaperShadow = false | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x';
+</script>
+
+<script lang="ts">
+  import type { ComponentRoundness, ComponentRoundnessFull } from '$lib/types.js';
+  import type { Snippet } from 'svelte';
+
+  interface PaperProps {
+    /** Paper contents goes here */
+    children?: Snippet;
+    /** Paper ref */
+    ref?: HTMLDivElement;
+    /** How round should the border radius be? */
+    roundness?: PaperRoundness;
+    /** Shadow elevation */
+    shadow?: PaperShadow;
+    /** Custom css class*/
+    class?: string;
+    /** Id */
+    id?: string;
+    /** Test: ⚠️ Unsafe Children String. Do Not use*/
+    _unsafeChildrenStringForTesting?: string;
+  }
+
+  let {
+    children,
+    roundness = '1x',
+    shadow = '1x',
+    id,
+    class: className = '',
+    _unsafeChildrenStringForTesting,
+    ref = $bindable<HTMLDivElement>(),
+  }: PaperProps = $props();
+</script>
+
+<div
+  class={[
+    'dodo-ui-Paper',
+    `roundness--${roundness}`,
+    `${shadow ? `shadow--${shadow} dodo-shadow-${shadow}` : `shadow--${shadow}`}`,
+    className,
+  ].join(' ')}
+  {id}
+  bind:this={ref}
+>
+  {#if children}
+    {@render children()}
+  {:else if _unsafeChildrenStringForTesting}
+    {_unsafeChildrenStringForTesting}
+  {/if}
+</div>
+
+<style lang="scss">
+  :global(:root) {
+    --dodo-ui-Paper-bg: var(--dodo-color-white);
+  }
+
+  :global(.dodo-theme--dark) {
+    --dodo-ui-Paper-bg: var(--dodo-color-default-100);
+  }
+
+  .dodo-ui-Paper {
+    outline: none;
+    transition: all 150ms;
+    font-family: inherit;
+    color: inherit;
+
+    background-color: var(--dodo-ui-Paper-bg);
+    overflow: hidden;
+
+    &.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);
+      }
+
+      &--full {
+        border-radius: 50%;
+      }
+    }
+  }
+</style>

package/src/lib/stories/components/Layout/Paper/Roundness/Roundness.stories.svelte

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

package/src/lib/stories/components/Layout/Paper/Shadow/Shadow.stories.svelte

@@ -0,0 +1,42 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Paper from '../Paper.svelte';
+  import { storyPaperArgTypes } from '../Paper.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Paper,
+    tags: ['autodocs'],
+    argTypes: storyPaperArgTypes,
+  });
+</script>
+
+<Story name="Shadow 1x">
+  <Paper>Hola!</Paper>
+</Story>
+
+<Story name="Shadow 2x" args={{ shadow: '2x' }}><Paper shadow="2x">Hola!</Paper></Story>
+
+<Story name="Shadow 3x" args={{ shadow: '3x' }}>
+  <Paper shadow="3x">Hola!</Paper>
+</Story>
+
+<Story name="Shadow 4x" args={{ shadow: '4x' }}>
+  <Paper shadow="4x">Hola!</Paper>
+</Story>
+
+<Story name="Shadow 5x" args={{ shadow: '5x' }}>
+  <Paper shadow="5x">Hola!</Paper>
+</Story>
+
+<Story name="Shadow 6x" args={{ shadow: '6x' }}>
+  <Paper shadow="6x">Hola!</Paper>
+</Story>
+
+<Story name="Shadow 7x" args={{ shadow: '7x' }}>
+  <Paper shadow="7x">Hola!</Paper>
+</Story>
+
+<Story name="Shadow False" args={{ shadow: false }}>
+  <Paper shadow={false}>Hola!</Paper>
+</Story>

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

@@ -0,0 +1,38 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import InputEnclosure from './InputEnclosure.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+
+  export const storyInputEnclosureArgTypes: StoryBookArgTypes = {
+    roundness: {
+      control: { type: 'select' },
+      options: [false, '1x', '2x', '3x'],
+    },
+    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: 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">
+  <InputEnclosure>
+    <input type="text" style="flex: 1; border: 0;" placeholder="Enter name" />
+  </InputEnclosure>
+</Story>

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

@@ -0,0 +1,198 @@
+<script lang="ts">
+  import type { ComponentRoundness, ComponentSize } from '$lib/types.js';
+  import type { Snippet } from 'svelte';
+
+  interface InputEnclosureProps {
+    /** InputEnclosure contents goes here */
+    children?: Snippet;
+    /** InputEnclosure ref */
+    ref?: HTMLDivElement;
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** How round should the border radius be? */
+    roundness?: ComponentRoundness | false;
+    /** Add a border around the button. Default True */
+    outline?: boolean;
+    /** disabled state */
+    disabled?: boolean;
+    /** is there any associated Error ? */
+    error?: boolean;
+    /** is focused */
+    focused?: boolean;
+    /** Icon before button content */
+    before?: Snippet;
+    /** Icon after button content */
+    after?: Snippet;
+    /** Custom css class*/
+    class?: string;
+  }
+
+  let {
+    size = 'normal',
+    roundness = '1x',
+    outline = true,
+    class: className = '',
+    disabled = false,
+    before,
+    after,
+    error = false,
+    focused = false,
+    children,
+    ref = $bindable<HTMLDivElement>(),
+  }: InputEnclosureProps = $props();
+</script>
+
+<div
+  class:outline
+  class:disabled
+  class:error
+  class:focused
+  class={['dodo-ui-InputEnclosure', `size--${size}`, `roundness--${roundness}`, className].join(
+    ' ',
+  )}
+  bind:this={ref}
+>
+  {#if before}
+    <span class="content--before">
+      {@render before()}
+    </span>
+  {/if}
+
+  {#if children}
+    {@render children()}
+  {/if}
+  {#if after}
+    <span class="content--after">
+      {@render after()}
+    </span>
+  {/if}
+</div>
+
+<style lang="scss">
+  :global(:root) {
+    --dodo-ui-InputEnclosure-border-color: var(--dodo-color-default-500);
+    --dodo-ui-InputEnclosure-focus-border-color: var(--dodo-color-primary-500);
+    --dodo-ui-InputEnclosure-error-border-color: var(--dodo-color-danger-500);
+
+    --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-default-400);
+    --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-default-200);
+  }
+
+  :global(.dodo-theme--dark) {
+    --dodo-ui-InputEnclosure-border-color: var(--dodo-color-default-600);
+    --dodo-ui-InputEnclosure-focus-border-color: var(--dodo-color-primary-600);
+    --dodo-ui-InputEnclosure-error-border-color: var(--dodo-color-danger-600);
+
+    --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-default-100);
+    --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-default-500);
+  }
+
+  .dodo-ui-InputEnclosure {
+    display: flex;
+    overflow: hidden;
+    color: var(--dodo-color-default-800);
+    transition: all 150ms;
+    border: 0;
+
+    &.outline {
+      border-style: solid;
+      border-width: var(--dodo-ui-element-border-width);
+      border-color: var(--dodo-ui-InputEnclosure-border-color);
+    }
+
+    &.focused {
+      border-color: var(--dodo-ui-InputEnclosure-focus-border-color);
+    }
+
+    &.error {
+      border-color: var(--dodo-ui-InputEnclosure-error-border-color);
+    }
+
+    &.disabled {
+      cursor: initial;
+      background-color: var(--dodo-ui-InputEnclosure-disabled-bg);
+      color: var(--dodo-ui-InputEnclosure-disabled-color);
+      border-color: var(--dodo-ui-InputEnclosure-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);
+
+        .content {
+          &--before {
+            margin-left: 12px;
+            margin-right: -4px;
+          }
+
+          &--after {
+            margin-right: 12px;
+            margin-left: -4px;
+          }
+        }
+      }
+
+      &--small {
+        height: var(--dodo-ui-element-height-small);
+
+        .content {
+          &--before {
+            margin-left: 8px;
+            margin-right: -2px;
+          }
+
+          &--after {
+            margin-right: 8px;
+            margin-left: -2px;
+          }
+        }
+      }
+
+      &--large {
+        height: var(--dodo-ui-element-height-large);
+
+        .content {
+          &--before {
+            margin-left: 14px;
+            margin-right: -4px;
+          }
+
+          &--after {
+            margin-right: 14px;
+            margin-left: -4px;
+          }
+        }
+      }
+    }
+
+    &.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);
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,20 @@
+<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 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/developer tools/components/InputEnclosure/Size/Size.stories.svelte

@@ -0,0 +1,16 @@
+<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="Normal" />
+<Story name="Small" args={{ size: 'small' }} />
+<Story name="Large" args={{ size: 'large' }} />