@flightlesslabs/dodo-ui 0.6.3 → 0.6.5

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

@@ -0,0 +1,21 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import TextInput from '../TextInput.svelte';
+  import { storyTextInputArgTypes } from '../TextInput.stories.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,
+    args: { value: 'Hello world!' },
+  });
+</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/TextInput/Size/Size.stories.svelte

@@ -0,0 +1,17 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import TextInput from '../TextInput.svelte';
+  import { storyTextInputArgTypes } from '../TextInput.stories.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,
+    args: { value: 'Hello world!' },
+  });
+</script>
+
+<Story name="Normal" />
+<Story name="Small" args={{ size: 'small' }} />
+<Story name="Large" args={{ size: 'large' }} />

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

@@ -0,0 +1,41 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import TextInput from './TextInput.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+
+  export const storyTextInputArgTypes: 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'],
+    },
+  };
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: TextInput,
+    tags: ['autodocs'],
+    argTypes: storyTextInputArgTypes,
+    args: { value: 'Hello world!' },
+  });
+</script>
+
+<!-- TextInput 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 }} />
+
+<Story name="Read only" args={{ readonly: true }} />

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/stories/components/Layout/Paper/Paper.stories.svelte

@@ -0,0 +1,41 @@
+<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>
+
+<!-- Paper with width and height -->
+<Story name="WidthAndHeight">
+  <Paper width="200px" height="200px">Hola!</Paper>
+</Story>

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/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/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/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' }} />

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

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

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/philosophy/Colors/Colors.mdx

@@ -0,0 +1,43 @@
+import { Meta, Story, Source } from '@storybook/blocks';
+import * as ColorsStories from './Colors.stories.svelte';
+import * as OpacityStories from './Opacity.stories.svelte';
+
+<Meta of={ColorsStories} />
+
+# Colors
+
+We are using an extensive color pallet identical to [Tailwind Css](https://tailwindcss.com/docs/colors) Colors. The colors are adjusted for dark and light themes.
+
+## Main Colors
+
+<Story of={ColorsStories.Main} />
+
+Neutral pallet
+
+<Story of={ColorsStories.ColorsNeutral} />
+
+Constant Colors
+
+<Story of={ColorsStories.ColorsConstant} />
+
+## Base Color
+
+<Story of={ColorsStories.ColorsBase} />
+
+Neutral pallet
+
+<Story of={ColorsStories.BaseColorsNeutral} />
+
+## Adjusting opacity
+
+Opacity can be adjusted using css `color-mix` function.
+
+<Source
+  dark
+  language="css"
+  code={`
+color-mix(in oklab, var(--dodo-color-primary-800) 10%, transparent)
+`}
+/>
+
+<Story of={OpacityStories.Main} meta={OpacityStories} />

package/src/lib/stories/philosophy/Colors/Colors.stories.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Colors from './Colors.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Colors,
+    args: {
+      swatchType: 'colors',
+    },
+  });
+</script>
+
+<Story name="Main" />
+
+<Story name="ColorsNeutral" args={{ swatchType: 'colors-neutral' }} />
+
+<Story name="ColorsConstant" args={{ swatchType: 'colors-constant' }} />
+
+<Story name="ColorsBase" args={{ swatchType: 'base-colors' }} />
+
+<Story name="BaseColorsNeutral" args={{ swatchType: 'base-colors-neutral' }} />

package/src/lib/stories/philosophy/Colors/Colors.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import Swatches from './Swatches/Swatches.svelte';
+  import { colorPalette, colorPaletteBase, colorPaletteNeutral } from './utils/color.js';
+
+  interface ColorsProps {
+    swatchType?:
+      | 'base-colors'
+      | 'base-colors-neutral'
+      | 'colors'
+      | 'colors-neutral'
+      | 'colors-constant';
+  }
+
+  const { swatchType }: ColorsProps = $props();
+</script>
+
+<div class="Colors">
+  {#if swatchType === 'base-colors'}
+    {#each colorPaletteBase as colorPaletteItem (colorPaletteItem)}
+      <Swatches colorPalette={colorPaletteItem} prefix="--dodo-color-base-" isColorPaletteValues />
+    {/each}
+  {:else if swatchType === 'base-colors-neutral'}
+    {#each colorPaletteNeutral as colorPaletteItem (colorPaletteItem)}
+      <Swatches colorPalette={colorPaletteItem} prefix="--dodo-color-base-" />
+    {/each}
+  {:else if swatchType === 'colors'}
+    {#each colorPalette as colorPaletteItem (colorPaletteItem)}
+      <Swatches colorPalette={colorPaletteItem} isColorPaletteValues />
+    {/each}
+  {:else if swatchType === 'colors-neutral'}
+    {#each colorPaletteNeutral as colorPaletteItem (colorPaletteItem)}
+      <Swatches colorPalette={colorPaletteItem} />
+    {/each}
+  {:else if swatchType === 'colors-constant'}
+    {#each colorPaletteNeutral as colorPaletteItem (colorPaletteItem)}
+      <Swatches colorPalette={colorPaletteItem} prefix="--dodo-color-constant-" />
+    {/each}
+  {/if}
+</div>
+
+<style lang="scss">
+  .Colors {
+    display: flex;
+    flex-direction: column;
+  }
+</style>

package/src/lib/stories/philosophy/Colors/Opacity.stories.svelte

@@ -0,0 +1,11 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Opacity from './Opacity.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Opacity,
+  });
+</script>
+
+<Story name="Main" />

package/src/lib/stories/philosophy/Colors/Opacity.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import Palette from './Swatches/Palette.svelte';
+</script>
+
+<div class="Opacity">
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 10%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 20%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 30%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 40%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 50%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 60%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 70%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 80%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 90%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 100%, transparent)" />
+</div>
+
+<style lang="scss">
+  .Opacity {
+    display: flex;
+    flex-wrap: wrap;
+  }
+</style>

package/src/lib/stories/philosophy/Colors/Swatches/Palette.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  interface PaletteProps {
+    backgroundColor: string;
+  }
+
+  const { backgroundColor }: PaletteProps = $props();
+
+  function onclick() {
+    navigator.clipboard.writeText(backgroundColor);
+  }
+</script>
+
+<!-- svelte-ignore a11y_consider_explicit_label -->
+<button
+  class="Palette"
+  style={`background-color: ${backgroundColor};`}
+  {onclick}
+  title="Click to copy value!"
+></button>
+
+<style lang="scss">
+  .Palette {
+    display: flex;
+    width: 60px;
+    height: 60px;
+    border-radius: 4px;
+    border: 1px solid;
+    border-color: color-mix(in oklab, var(--dodo-color-default-800) 20%, transparent);
+    background: transparent;
+    min-width: initial;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    outline: 0;
+    transition: all 100ms;
+
+    &:hover {
+      border-width: 2px;
+    }
+
+    &:active {
+      border-color: color-mix(in oklab, var(--dodo-color-primary-800) 80%, transparent);
+      border-width: 2px;
+    }
+  }
+</style>