@flightlesslabs/dodo-ui 0.1.5 → 0.3.0

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

@@ -0,0 +1,293 @@
+<script lang="ts" module>
+  export type TextInputRoundness = ComponentRoundness | false;
+  export type TextInputType = 'text' | 'tel' | 'email' | 'password' | 'url' | 'number';
+
+  export type TextInputFocusEvent = FocusEvent & {
+    currentTarget: EventTarget & HTMLInputElement;
+  };
+
+  export type TextInputClipboardEvent = ClipboardEvent & {
+    currentTarget: EventTarget & HTMLInputElement;
+  };
+</script>
+
+<script lang="ts">
+  import type { ComponentRoundness, ComponentSize } from '$lib/types.js';
+  import type { Snippet } from 'svelte';
+  import type {
+    ChangeEventHandler,
+    ClipboardEventHandler,
+    FocusEventHandler,
+    FormEventHandler,
+  } from 'svelte/elements';
+
+  interface TextInputProps {
+    /** Input type? */
+    type?: TextInputType;
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** How round should the border radius be? */
+    roundness?: TextInputRoundness;
+    /** 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?: 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;
+    /** 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>;
+  }
+
+  let {
+    type = 'text',
+    size = 'normal',
+    roundness = '1x',
+    outline = true,
+    name,
+    id,
+    class: className = '',
+    disabled = false,
+    oninput,
+    onchange,
+    onblur,
+    onfocus,
+    onpaste,
+    oncopy,
+    oncut,
+    before,
+    after,
+    error = false,
+    value = $bindable<string>(),
+    placeholder,
+  }: TextInputProps = $props();
+
+  let focused: boolean = $state(false);
+
+  function onfocusMod(e: TextInputFocusEvent) {
+    focused = true;
+
+    if (onfocus) {
+      onfocus(e);
+    }
+  }
+
+  function onblurMod(e: TextInputFocusEvent) {
+    focused = false;
+
+    if (onblur) {
+      onblur(e);
+    }
+  }
+</script>
+
+<div
+  class:outline
+  class:disabled
+  class:error
+  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}
+    bind:value
+  />
+  {#if after}
+    <span class="content--after">
+      {@render after()}
+    </span>
+  {/if}
+</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;
+      outline: 0;
+      height: 100%;
+      background-color: transparent;
+      font-family: inherit;
+      color: inherit;
+      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);
+      }
+    }
+  }
+</style>

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">
+  <TextInput>
+    {#snippet before()}
+      <Icon icon="material-symbols:content-copy" />
+    {/snippet}
+  </TextInput>
+</Story>
+
+<!-- TextInput icon in front. -->
+<Story name="Icon After">
+  <TextInput>
+    {#snippet after()}
+      <Icon icon="material-symbols:download-2" />
+    {/snippet}
+  </TextInput>
+</Story>
+
+<Story name="Small" args={{ size: 'small' }}>
+  <TextInput size="small">
+    {#snippet before()}
+      <Icon icon="material-symbols:content-copy" />
+    {/snippet}
+  </TextInput>
+</Story>
+
+<Story name="Large" args={{ size: 'large' }}>
+  <TextInput size="large">
+    {#snippet before()}
+      <Icon icon="material-symbols:content-copy" />
+    {/snippet}
+  </TextInput>
+</Story>

package/src/lib/styles/_colors.css

@@ -1,9 +1,9 @@
 :root {
-  /* Base colors */
+  /* Neutral colors */
   --dodo-color-black: var(--dodo-color-base-black);
   --dodo-color-white: var(--dodo-color-base-white);
 
-  /* Base colors constants */
+  /* Constants colors */
   --dodo-color-constant-black: var(--dodo-color-base-black);
   --dodo-color-constant-white: var(--dodo-color-base-white);
 

package/src/lib/styles/_components.css

@@ -1,10 +1,11 @@
 :root {
-  --dodo-ui-element-height-normal: 40px;
   --dodo-ui-element-height-small: 34px;
-  --dodo-ui-element-height-large: 48px;
+  --dodo-ui-element-height-normal: 40px;
+  --dodo-ui-element-height-large: 50px;
+
+  --dodo-ui-element-roundness-1x: 7px;
+  --dodo-ui-element-roundness-2x: 13px;
+  --dodo-ui-element-roundness-3x: 31px;
 
-  --dodo-ui-element-roundness-base: 7px;
-  --dodo-ui-element-roundness-1: var(--dodo-ui-element-roundness-base);
-  --dodo-ui-element-roundness-2: calc(var(--dodo-ui-element-roundness-base) * 2);
-  --dodo-ui-element-roundness-3: calc(var(--dodo-ui-element-roundness-base) * 4);
+  --dodo-ui-element-border-width: 1px;
 }

package/src/lib/styles/_minimal-reset.css

@@ -0,0 +1,3 @@
+* {
+  box-sizing: border-box;
+}

package/src/lib/styles/global.css

@@ -1,3 +1,4 @@
+@import '_minimal-reset.css';
 @import '_colors-base.css';
 @import '_colors.css';
 @import '_breakpoint.css';

package/src/lib/types.ts

@@ -1,5 +1,5 @@
 /** Component Size */
 export type ComponentSize = 'normal' | 'small' | 'large';
 
-export type ComponentRoundness = 1 | 2 | 3;
+export type ComponentRoundness = '1x' | '2x' | '3x';
 export type ComponentRoundnessFull = 'full';

package/dist/stories/Getting Started.mdx

@@ -1,13 +0,0 @@
-import { Source } from '@storybook/blocks';
-
-# Getting Started
-
-## Install
-
-<Source dark language='bash' code={`
-// pnpm
-pnpm add @flightlesslabs/dodo-ui
-
-// npm
-npm i @flightlesslabs/dodo-ui
-`} />

package/dist/stories/components/Form/ExampleButton/ExampleButton.stories.svelte

@@ -1,30 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import ExampleButton from './ExampleButton.svelte';
-  import { fn } from '@storybook/test';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: ExampleButton,
-    tags: ['autodocs'],
-    argTypes: {
-      backgroundColor: { control: 'color' },
-      size: {
-        control: { type: 'select' },
-        options: ['small', 'medium', 'large'],
-      },
-    },
-    args: {
-      onClick: fn(),
-    },
-  });
-</script>
-
-<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
-<Story name="Primary" args={{ primary: true, label: 'Button' }} />
-
-<Story name="Secondary" args={{ label: 'Button' }} />
-
-<Story name="Large" args={{ size: 'large', label: 'Button' }} />
-
-<Story name="Small" args={{ size: 'small', label: 'Button' }} />

package/dist/stories/components/Form/ExampleButton/ExampleButton.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">import './button.css';
-const { primary = false, backgroundColor, size = 'medium', label, onClick } = $props();
-</script>
-
-<button
-  type="button"
-  class={['storybook-button', `storybook-button--${size}`].join(' ')}
-  class:storybook-button--primary={primary}
-  class:storybook-button--secondary={!primary}
-  style:background-color={backgroundColor}
-  onclick={onClick}
->
-  {label}
-</button>

package/dist/stories/components/Form/ExampleButton/ExampleButton.svelte.d.ts

@@ -1,16 +0,0 @@
-import './button.css';
-interface Props {
-    /** Is this the principal call to action on the page? */
-    primary?: boolean;
-    /** What background color to use */
-    backgroundColor?: string;
-    /** How large should the button be? */
-    size?: 'small' | 'medium' | 'large';
-    /** Button contents */
-    label: string;
-    /** The onclick event handler */
-    onClick?: () => void;
-}
-declare const ExampleButton: import("svelte").Component<Props, {}, "">;
-type ExampleButton = ReturnType<typeof ExampleButton>;
-export default ExampleButton;

package/dist/stories/components/Form/ExampleButton/button.css

@@ -1,30 +0,0 @@
-.storybook-button {
-  display: inline-block;
-  cursor: pointer;
-  border: 0;
-  border-radius: 3em;
-  font-weight: 700;
-  line-height: 1;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-.storybook-button--primary {
-  background-color: #555ab9;
-  color: white;
-}
-.storybook-button--secondary {
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-  background-color: transparent;
-  color: #333;
-}
-.storybook-button--small {
-  padding: 10px 16px;
-  font-size: 12px;
-}
-.storybook-button--medium {
-  padding: 11px 20px;
-  font-size: 14px;
-}
-.storybook-button--large {
-  padding: 12px 24px;
-  font-size: 16px;
-}

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

@@ -1,30 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import ExampleButton from './ExampleButton.svelte';
-  import { fn } from '@storybook/test';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: ExampleButton,
-    tags: ['autodocs'],
-    argTypes: {
-      backgroundColor: { control: 'color' },
-      size: {
-        control: { type: 'select' },
-        options: ['small', 'medium', 'large'],
-      },
-    },
-    args: {
-      onClick: fn(),
-    },
-  });
-</script>
-
-<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
-<Story name="Primary" args={{ primary: true, label: 'Button' }} />
-
-<Story name="Secondary" args={{ label: 'Button' }} />
-
-<Story name="Large" args={{ size: 'large', label: 'Button' }} />
-
-<Story name="Small" args={{ size: 'small', label: 'Button' }} />

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

@@ -1,29 +0,0 @@
-<script lang="ts">
-  import './button.css';
-
-  interface Props {
-    /** Is this the principal call to action on the page? */
-    primary?: boolean;
-    /** What background color to use */
-    backgroundColor?: string;
-    /** How large should the button be? */
-    size?: 'small' | 'medium' | 'large';
-    /** Button contents */
-    label: string;
-    /** The onclick event handler */
-    onClick?: () => void;
-  }
-
-  const { primary = false, backgroundColor, size = 'medium', label, onClick }: Props = $props();
-</script>
-
-<button
-  type="button"
-  class={['storybook-button', `storybook-button--${size}`].join(' ')}
-  class:storybook-button--primary={primary}
-  class:storybook-button--secondary={!primary}
-  style:background-color={backgroundColor}
-  onclick={onClick}
->
-  {label}
-</button>

package/src/lib/stories/components/Form/ExampleButton/button.css

@@ -1,30 +0,0 @@
-.storybook-button {
-  display: inline-block;
-  cursor: pointer;
-  border: 0;
-  border-radius: 3em;
-  font-weight: 700;
-  line-height: 1;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-.storybook-button--primary {
-  background-color: #555ab9;
-  color: white;
-}
-.storybook-button--secondary {
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-  background-color: transparent;
-  color: #333;
-}
-.storybook-button--small {
-  padding: 10px 16px;
-  font-size: 12px;
-}
-.storybook-button--medium {
-  padding: 11px 20px;
-  font-size: 14px;
-}
-.storybook-button--large {
-  padding: 12px 24px;
-  font-size: 16px;
-}