@flightlesslabs/dodo-ui 0.12.0 → 0.12.1

package/package.json

@@ -1,19 +1,6 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.12.0",
-  "scripts": {
-    "build": "vite build && pnpm run prepack",
-    "preview": "vite preview",
-    "prepare": "svelte-kit sync || echo ''",
-    "prepack": "svelte-kit sync && svelte-package && publint",
-    "svelte-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "format": "prettier --write .",
-    "lint": "prettier --check . && eslint .",
-    "dev": "storybook dev -p 6006",
-    "build-storybook": "storybook build && touch ./storybook-static/.nojekyll",
-    "check": "pnpm run svelte-check && eslint . && pnpm run lint",
-    "check:fix": "pnpm run svelte-check && eslint . && pnpm run format"
-  },
+  "version": "0.12.1",
   "homepage": "https://flightlesslabs.github.io/dodo-ui",
   "repository": {
     "type": "git",
@@ -78,19 +65,30 @@
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.34.0",
     "vite": "^6.3.5",
-    "vitest": "^3.2.3"
+    "vitest": "^3.2.3",
+    "@storybook/addon-docs": "^9.0.10",
+    "@storybook/addon-vitest": "^9.0.10"
   },
   "keywords": [
     "svelte"
   ],
   "volta": {
     "node": "22.15.1",
-    "pnpm": "10.11.0"
+    "pnpm": "10.12.1"
   },
   "dependencies": {
     "@iconify/svelte": "^5.0.0",
-    "@storybook/addon-docs": "^9.0.10",
-    "@storybook/addon-vitest": "^9.0.10",
     "dayjs": "^1.11.13"
+  },
+  "scripts": {
+    "build": "vite build && pnpm run prepack",
+    "preview": "vite preview",
+    "svelte-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "dev": "storybook dev -p 6006",
+    "build-storybook": "storybook build && touch ./storybook-static/.nojekyll",
+    "check": "pnpm run svelte-check && eslint . && pnpm run lint",
+    "check:fix": "pnpm run svelte-check && eslint . && pnpm run format"
   }
-}
+}

package/src/lib/stories/Home.mdx

@@ -0,0 +1,59 @@
+import { Source } from '@storybook/addon-docs/blocks';
+import item from '../../../package.json?raw';
+
+<main style={{ textAlign: 'center' }}>
+
+<img src="dodo-circle-6.png" style={{ width: 200, height: 'auto' }} />
+
+# Dodo UI
+
+<h3 style={{ fontWeight: 500 }}>v{JSON.parse(item)?.version}</h3>
+
+<h3 style={{ fontWeight: 400 }}>An open-source, opinionated UI framework for Svelte.</h3>
+
+### [Github](https://github.com/flightlesslabs/dodo-ui) - [npm](https://www.npmjs.com/package/@flightlesslabs/dodo-ui)
+
+</main>
+
+<br />
+<br />
+
+## Install
+
+pnpm
+
+<Source
+  dark
+  language="bash"
+  code={`
+pnpm add @flightlesslabs/dodo-ui
+`}
+/>
+
+npm
+
+<Source
+  dark
+  language="bash"
+  code={`
+npm i @flightlesslabs/dodo-ui
+`}
+/>
+
+## Use it!
+
+Lets import [Button](?path=/docs/components-form-button--docs) component. Checkout documentation for [Button](?path=/docs/components-form-button--docs)
+
+<Source
+  dark
+  language="js"
+  code={`
+import { Button } '@flightlesslabs/dodo-ui';
+`}
+/>
+
+## Explore more
+
+- [Dark Theme](?path=/docs/developer-tools-philosophy-themes--docs#dark-theme)
+- [Colors](?path=/docs/developer-tools-philosophy-colors--docs)
+- [Adjust Color Opacity](?path=/docs/developer-tools-philosophy-colors--docs#adjusting-opacity)

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

@@ -0,0 +1,61 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button, { buttonTypeArray } from './Button.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+  import { componentRoundnessArray } from '$lib/types/roundness.js';
+  import { componentColorArray } from '$lib/types/colors.js';
+  import { componentWeightArray } from '$lib/types/weight.js';
+  import { componentSizeArray } from '$lib/types/size.js';
+
+  export const storyButtonArgTypes: StoryBookArgTypes = {
+    type: {
+      control: { type: 'select' },
+      options: buttonTypeArray,
+    },
+    color: {
+      control: { type: 'select' },
+      options: componentColorArray,
+    },
+    variant: {
+      control: { type: 'select' },
+      options: componentWeightArray,
+    },
+    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: Button,
+    tags: ['autodocs'],
+    argTypes: storyButtonArgTypes,
+  });
+</script>
+
+<!-- Button with default style -->
+<Story name="Primary">Click me!</Story>
+
+<!-- Button with border around it -->
+<Story name="Outline" args={{ outline: true, variant: 'text' }}>Click me!</Story>
+
+<Story name="Disabled" args={{ disabled: true }}>Click me!</Story>
+
+<!-- Form submit button -->
+<Story name="Sumbit Button" args={{ type: 'submit' }}>Submit Form</Story>
+
+<!-- Form submit button -->
+<Story name="Full width Button" args={{ fullWidth: true }}>Click me!</Story>
+
+<!-- Anchor Link styled like a Button -->
+<Story
+  name="Link Button"
+  args={{ href: 'https://www.w3schools.com/tags/tag_a.asp', target: '_blank' }}
+>
+  Link
+</Story>

package/src/lib/stories/components/Form/Button/Color/Color.stories.svelte

@@ -0,0 +1,43 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button from '../Button.svelte';
+  import { storyButtonArgTypes } from '../Button.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: storyButtonArgTypes,
+  });
+</script>
+
+<Story name="Primary">Click me!</Story>
+<Story name="Secondary" args={{ color: 'secondary' }}>Click me!</Story>
+<Story name="Neutral" args={{ color: 'neutral' }}>Click me!</Story>
+<Story name="Safe" args={{ color: 'safe' }}>Click me!</Story>
+<Story name="Warning" args={{ color: 'warning' }}>Click me!</Story>
+<Story name="Danger" args={{ color: 'danger' }}>Click me!</Story>
+
+<Story name="Primary Text" args={{ color: 'primary', variant: 'text' }}>Click me!</Story>
+<Story name="Secondary Text" args={{ color: 'secondary', variant: 'text' }}>Click me!</Story>
+<Story name="Neutral Text" args={{ color: 'neutral', variant: 'text' }}>Click me!</Story>
+<Story name="Safe Text" args={{ color: 'safe', variant: 'text' }}>Click me!</Story>
+<Story name="Warning Text" args={{ color: 'warning', variant: 'text' }}>Click me!</Story>
+<Story name="Danger Text" args={{ color: 'danger', variant: 'text' }}>Click me!</Story>
+
+<Story name="Primary Outline" args={{ variant: 'text', outline: true }}>Click me!</Story>
+<Story name="Secondary Outline" args={{ color: 'secondary', variant: 'text', outline: true }}>
+  Click me!
+</Story>
+<Story name="Neutral Outline" args={{ color: 'neutral', variant: 'text', outline: true }}>
+  Click me!
+</Story>
+<Story name="Safe Outline" args={{ color: 'safe', variant: 'text', outline: true }}>
+  Click me!
+</Story>
+<Story name="Warning Outline" args={{ color: 'warning', variant: 'text', outline: true }}>
+  Click me!
+</Story>
+<Story name="Danger Outline" args={{ color: 'danger', variant: 'text', outline: true }}>
+  Click me!
+</Story>

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

@@ -0,0 +1,36 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button from '../Button.svelte';
+  import { storyButtonArgTypes } from '../Button.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: storyButtonArgTypes,
+  });
+</script>
+
+<Story
+  name="Click"
+  args={{
+    onclick: (e: Event) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', target);
+    },
+  }}
+  asChild
+>
+  <Button
+    onclick={(e: Event) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', target);
+    }}
+  >
+    Click me!
+  </Button>
+</Story>

package/src/lib/stories/components/Form/Button/IconButton/IconButton.stories.svelte

@@ -0,0 +1,43 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button from '../Button.svelte';
+  import { storyButtonArgTypes } from '../Button.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: Button,
+    tags: ['autodocs'],
+    argTypes: storyButtonArgTypes,
+  });
+</script>
+
+<!-- Compact button with paddings stripped out and fixed size. We are using this icon library https://iconify.design/docs/icon-components/svelte/ -->
+<Story name="Icon Button" args={{ compact: true }}>
+  <Icon icon="material-symbols:app-badging" width="18" height="18" />
+</Story>
+
+<!-- Circualr Icon button. -->
+<Story name="Icon Button Circular" args={{ compact: true, roundness: 'full' }}>
+  <Icon icon="material-symbols:app-badging" width="18" height="18" />
+</Story>
+
+<!-- Button with an icon in front. -->
+<Story name="Icon Before" asChild>
+  <Button>
+    {#snippet before()}
+      <Icon icon="material-symbols:content-copy" />
+    {/snippet}
+    Copy
+  </Button>
+</Story>
+
+<!-- Button with an icon in front. -->
+<Story name="Icon After" asChild>
+  <Button>
+    {#snippet after()}
+      <Icon icon="material-symbols:download-2" />
+    {/snippet}
+    Download
+  </Button>
+</Story>

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

@@ -0,0 +1,23 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button from '../Button.svelte';
+  import { storyButtonArgTypes } from '../Button.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: storyButtonArgTypes,
+  });
+</script>
+
+<Story name="Roundness 1">Click me!</Story>
+
+<Story name="Roundness 2" args={{ roundness: 2 }}>Click me!</Story>
+
+<Story name="Roundness 3" args={{ roundness: 3 }}>Click me!</Story>
+
+<Story name="Roundness 0" args={{ roundness: 0 }}>Click me!</Story>
+
+<!-- Button with 50% roundness usefull for icon (Compact) buttons -->
+<Story name="Roundness Full" args={{ roundness: 'full', compact: true }}>C</Story>

package/src/lib/stories/components/Form/Button/Size/Size.stories.svelte

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

package/src/lib/stories/components/Form/Button/Variant/Variant.stories.svelte

@@ -0,0 +1,18 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button from '../Button.svelte';
+  import { storyButtonArgTypes } from '../Button.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: storyButtonArgTypes,
+  });
+</script>
+
+<Story name="Solid">Click me!</Story>
+
+<Story name="Text" args={{ variant: 'text' }}>Click me!</Story>
+
+<Story name="Text Outline" args={{ variant: 'text', outline: true }}>Click me!</Story>

package/src/lib/stories/components/Form/DatePicker/Color/Color.stories.svelte

@@ -0,0 +1,47 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
+  import DatePicker from '../DatePicker.svelte';
+  import { storyDatePickerArgTypes } from '../DatePicker.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: DatePicker,
+    tags: ['autodocs'],
+    argTypes: storyDatePickerArgTypes,
+    parameters: {
+      docs: {
+        story: {
+          height: '400px',
+          inline: false,
+        },
+      },
+    },
+  });
+
+  let value = $state(getMoment().toDate());
+</script>
+
+<Story name="Primary" asChild>
+  <DatePicker {value} />
+</Story>
+
+<Story name="Secondary" asChild>
+  <DatePicker {value} color="secondary" />
+</Story>
+
+<Story name="Neutral" asChild>
+  <DatePicker {value} color="neutral" />
+</Story>
+
+<Story name="Safe" asChild>
+  <DatePicker {value} color="safe" />
+</Story>
+
+<Story name="Warning" asChild>
+  <DatePicker {value} color="warning" />
+</Story>
+
+<Story name="Danger" asChild>
+  <DatePicker {value} color="danger" />
+</Story>

package/src/lib/stories/components/Form/DatePicker/Controls/Controls.stories.svelte

@@ -0,0 +1,58 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import DatePicker from '../DatePicker.svelte';
+  import { storyDatePickerArgTypes } from '../DatePicker.stories.svelte';
+  import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: DatePicker,
+    tags: ['autodocs'],
+    argTypes: storyDatePickerArgTypes,
+    args: {
+      value: getMoment().toDate(),
+    },
+    parameters: {
+      docs: {
+        story: {
+          height: '400px',
+          inline: false,
+        },
+      },
+    },
+  });
+
+  let value = $state(getMoment().toDate());
+</script>
+
+<Story name="Normal" asChild>
+  <DatePicker {value} />
+</Story>
+
+<Story name="HideCalendarMonthSelector" asChild>
+  <DatePicker {value} showCalendarMonthSelector={false} />
+</Story>
+
+<Story name="HideCalendarYearSelector" asChild>
+  <DatePicker {value} showCalendarYearSelector={false} />
+</Story>
+
+<Story name="HideCalendarNavigator" asChild>
+  <DatePicker {value} showCalendarNavigator={false} />
+</Story>
+
+<Story name="HideControlsMonthList" asChild>
+  <DatePicker {value} showControlsMonthList={false} />
+</Story>
+
+<Story name="HideControlsYearList" asChild>
+  <DatePicker {value} showControlsYearList={false} />
+</Story>
+
+<Story name="DisabledNavigationPrev" asChild>
+  <DatePicker {value} disabledCalendarNavigationPrev />
+</Story>
+
+<Story name="DisabledNavigationNext" asChild>
+  <DatePicker {value} disabledCalendarNavigationNext />
+</Story>

package/src/lib/stories/components/Form/DatePicker/Customize/Customize.stories.svelte

@@ -0,0 +1,167 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import DatePicker from '../DatePicker.svelte';
+  import { storyDatePickerArgTypes } from '../DatePicker.stories.svelte';
+  import { Button, getMoment } from '$lib/index.js';
+  import Icon from '@iconify/svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: DatePicker,
+    tags: ['autodocs'],
+    argTypes: storyDatePickerArgTypes,
+    parameters: {
+      docs: {
+        story: {
+          height: '400px',
+          inline: false,
+        },
+      },
+    },
+  });
+
+  let value = $state(getMoment().toDate());
+</script>
+
+<Story name="calendarDateChipProps" asChild>
+  <DatePicker
+    {value}
+    calendarDateChipProps={{
+      roundness: 'full',
+    }}
+  />
+</Story>
+
+<Story name="calendarMonthChipProps" asChild>
+  <DatePicker
+    {value}
+    calendarMonthChipProps={{
+      roundness: 2,
+    }}
+  />
+</Story>
+
+<Story name="customCalendarDateChipContent" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarDateChipContent(dayOfMonth)}
+      🗓️{Number(getMoment(dayOfMonth.date).format('D'))}
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="customCalendarDateChip" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarDateChip(dayOfMonth)}
+      <Button size="small" variant="text" outline>
+        {Number(getMoment(dayOfMonth.date).format('D'))}
+      </Button>
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="customCalendarWeekContent" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarWeekContent(option)}
+      ☀️{option.abr1}
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="customCalendarWeek" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarWeek(option)}
+      <li style="color: blue; display: block;">
+        {option.abr3}
+      </li>
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="customCalendarMonthSelectorContent" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarMonthSelectorContent(option)}
+      🗓️{option.abr3}
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="customCalendarMonthSelector" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarMonthSelector(option)}
+      <span style="color: blue; display: block;">
+        {option.abr3}
+      </span>
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="customCalendarYearSelectorContent" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarYearSelectorContent(selectedYear)}
+      🗓️{selectedYear}
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="customCalendarYearSelector" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarYearSelector(selectedYear)}
+      <span style="color: blue; display: block;">
+        {selectedYear}
+      </span>
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="customCalendarNavigationContent" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarNavigationPrevContent()}
+      <Icon icon="carbon:previous-filled" width="32" height="32" />
+    {/snippet}
+    {#snippet customCalendarNavigationNextContent()}
+      <Icon icon="carbon:next-outline" width="32" height="32" />
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="customCalendarNavigation" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarNavigation()}
+      <Button>Control</Button>
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="customCalendarMonthChipContent" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarMonthChipContent(val)}
+      🗓️{val}
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="customCalendarMonthChip" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet customCalendarMonthChip(val)}
+      <Button size="small" variant="text" outline>
+        {val}
+      </Button>
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="calendarTopContent" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet calendarTopContent(activeSection)}
+      Top Content: {activeSection}
+    {/snippet}
+  </DatePicker>
+</Story>
+
+<Story name="calendarBottomContent" asChild>
+  <DatePicker value={getMoment().toDate()}>
+    {#snippet calendarBottomContent(activeSection)}
+      Bottom Content: {activeSection}
+    {/snippet}
+  </DatePicker>
+</Story>