@flightlesslabs/dodo-ui 0.13.0 → 0.14.0

package/src/lib/stories/developer tools/components/Popper/Positions/Positions.stories.svelte

@@ -1,114 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { Menu, MenuItem, Popper } from '$lib/index.js';
-  import Button from '$lib/stories/components/Form/Button/Button.svelte';
-  import { storyPopperArgTypes } from '../Popper.stories.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: Popper,
-    tags: ['autodocs'],
-    argTypes: storyPopperArgTypes,
-    parameters: {
-      layout: 'centered',
-      docs: {
-        story: {
-          height: '400px',
-          inline: false,
-        },
-      },
-    },
-  });
-
-  let open = $state(false);
-</script>
-
-<Story name="BottomLeft" asChild>
-  <Popper {open} onClickOutside={() => (open = false)} popupWidth="100px">
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<Story name="BottomCenter" asChild>
-  <Popper {open} popupPositionX="center" onClickOutside={() => (open = false)} popupWidth="100px">
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<Story name="BottomRight" asChild>
-  <Popper {open} popupPositionX="right" onClickOutside={() => (open = false)} popupWidth="100px">
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<Story name="TopLeft" asChild>
-  <Popper {open} popupPositionY="top" onClickOutside={() => (open = false)} popupWidth="100px">
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<Story name="TopCenter" asChild>
-  <Popper
-    {open}
-    popupPositionY="top"
-    popupPositionX="center"
-    onClickOutside={() => (open = false)}
-    popupWidth="100px"
-  >
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<Story name="TopRight" asChild>
-  <Popper
-    {open}
-    popupPositionY="top"
-    popupPositionX="right"
-    onClickOutside={() => (open = false)}
-    popupWidth="100px"
-  >
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>

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

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

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

@@ -1,30 +0,0 @@
-<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 { componentSizeArray } from '$lib/types/size.js';
-
-  export const storyUtilityButtonArgTypes: StoryBookArgTypes = {
-    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: UtilityButton,
-    tags: ['autodocs'],
-    argTypes: storyUtilityButtonArgTypes,
-  });
-</script>
-
-<!-- Button with default style -->
-<Story name="Default">
-  <Icon icon="mdi:eye" width="24" height="24" />
-</Story>
-
-<Story name="Disabled" args={{ disabled: true }}>
-  <Icon icon="mdi:eye" width="24" height="24" />
-</Story>

package/src/lib/stories/developer tools/directives/clickOutside/index.mdx

@@ -1,25 +0,0 @@
-import { Source } from '@storybook/addon-docs/blocks';
-
-# Click Outside
-
-Event that fires after clicking outside the target component
-
-<Source
-  dark
-  language="js"
-  code={`
-import { clickOutside } '@flightlesslabs/dodo-ui';
-`}
-/>
-
-Attach it to a component
-
-<Source
-  dark
-  language="js"
-  code={`
-<div
-  use:clickOutside={onClickOutside}
-  ...
-`}
-/>

package/src/lib/stories/developer tools/helpers/Numbers/cleanNumericString/index.mdx

@@ -1,20 +0,0 @@
-import { Source } from '@storybook/addon-docs/blocks';
-
-# `cleanNumericString`
-
-Cleans the input string by removing all characters except numeric digits (0-9) and a single decimal point.
-Only the first decimal point is retained; all subsequent dots are removed.
-
----
-
-## Basic Usage
-
-<Source
-  dark
-  language="ts"
-  code={`
-import { cleanNumericString } from '@flightlesslabs/dodo-ui';
-
-const result = cleanNumericString("abc123.45.67def"); // result === "123.4567"
-`}
-/>

package/src/lib/stories/developer tools/helpers/Numbers/isValidNumberValue/index.mdx

@@ -1,71 +0,0 @@
-import { Source } from '@storybook/addon-docs/blocks';
-
-# `isValidNumberValue`
-
-Utility function to validate whether a string is a valid number based on customizable settings including minimum, maximum, decimal places, and allowance of negative numbers.
-
----
-
-## Basic Usage
-
-Validates a string as a number with default settings (no decimals allowed, no negatives allowed, strict checking):
-
-<Source
-  dark
-  language="ts"
-  code={`
-import { isValidNumberValue } from '@flightlesslabs/dodo-ui';
-
-const result = isValidNumberValue("123");
-console.log(result); // true
-`}
-/>
-
----
-
-## With Settings
-
-Customize validation rules:
-
-- `min` — minimum allowed value (inclusive)
-- `max` — maximum allowed value (inclusive)
-- `allowNegativeValues` — whether negatives are allowed
-- `decimalPlaces` — max decimal places allowed
-- `log` — enable detailed logging
-- `strict` — Strict checking, Full text - keep it enabled, Partial text - keep it disabled
-
-<Source
-  dark
-  language="ts"
-  code={`
-import { isValidNumberValue } from '@flightlesslabs/dodo-ui';
-
-const result1 = isValidNumberValue("123.456", { decimalPlaces: 3, log: true });
-const result2 = isValidNumberValue("-50", { allowNegativeValues: true, min: -100 });
-const result3 = isValidNumberValue("200", { max: 150 });
-
-const result4 = isValidNumberValue("-", { allowNegativeValues: true });
-const result5 = isValidNumberValue("-", { allowNegativeValues: true, strict: false });
-
-console.log(result1); // true
-console.log(result2); // true
-console.log(result3); // false (exceeds max)
-console.log(result4); // false (fails in strict check)
-console.log(result5); // true (pass in strict check)
-`}
-/>
-
----
-
-## Type Definition
-
-```ts
-export type IsValidNumberValueSettings = {
-  min?: number;
-  max?: number;
-  allowNegativeValues?: boolean;
-  decimalPlaces?: number;
-  log?: boolean;
-  strict?: boolean;
-};
-```

package/src/lib/stories/developer tools/helpers/Time/getMoment/index.mdx

@@ -1,45 +0,0 @@
-import { Source } from '@storybook/addon-docs/blocks';
-
-# `getMoment`
-
-A [Day.js](https://day.js.org/) wrapper that supports custom formats, UTC mode, and timezone conversion using `dayjs`, `utc`, `timezone`, and `customParseFormat` plugins.
-
----
-
-## Usage
-
-<Source
-  dark
-  language="ts"
-  code={`
-// Basic local time
-getMoment('2025-01-01T00:00:00Z').format();
-
-// UTC output
-getMoment('2025-01-01T00:00:00Z', undefined, { utc: true }).format();
-// → "2025-01-01T00:00:00Z"
-
-// With custom format + timezone
-getMoment('01-01-2025', 'DD-MM-YYYY', { timezone: 'Asia/Kolkata' }).format();
-// → "2025-01-01T00:00:00+05:30"
-`}
-/>
-
----
-
-## API
-
-<Source
-  dark
-  language="ts"
-  code={`
-getMoment(
-  date?: ConfigType,
-  format?: string,
-  settings?: {
-    utc?: boolean;
-    timezone?: string;
-  }
-): dayjs.Dayjs
-`}
-/>

package/src/lib/stories/developer tools/helpers/logger/index.mdx

@@ -1,63 +0,0 @@
-import { Source } from '@storybook/addon-docs/blocks';
-
-# Logger Utility
-
-A customizable logger function that supports:
-
-- Log levels (`info`, `warn`, `error`)
-- Optional labels
-- A `show` flag to toggle logging
-- Console output with timestamps
-
-## Import
-
-Import the logger creation function:
-
-<Source dark language="ts" code={`import { createLogger } from '@flightlesslabs/dodo-ui';`} />
-
-## Basic Usage
-
-Create a logger and log different types of messages:
-
-<Source
-  dark
-  language="ts"
-  code={`const logger = createLogger({
-  label: 'AuthService',
-});
-
-logger.info('User logged in');
-logger.warn('Token is about to expire');
-logger.error('Login failed', new Error('Invalid credentials'));
-`}
-/>
-
-## Disable Logging
-
-You can use the \`show\` flag to completely silence the logger (e.g., in production):
-
-<Source
-  dark
-  language="ts"
-  code={`const logger = createLogger({
-  show: false,
-});
-
-logger.info('This will not be logged');
-`}
-/>
-
-## Level Filtering
-
-The logger will only show messages **at or above** the configured `level`:
-
-<Source
-  dark
-  language="ts"
-  code={`const logger = createLogger();
-
-logger.info('This will NOT show');
-logger.warn('This WILL show');
-logger.error('This WILL show');
-`}
-/>

package/src/lib/stories/developer tools/philosophy/Colors/Colors.mdx

@@ -1,43 +0,0 @@
-import { Meta, Story, Source } from '@storybook/addon-docs/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} />
-
-Greyscale colors
-
-<Story of={ColorsStories.ColorsNeutral} />
-
-Constant Colors
-
-<Story of={ColorsStories.ColorsConstant} />
-
-## Base Color
-
-<Story of={ColorsStories.ColorsBase} />
-
-Greyscale colors
-
-<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/developer tools/philosophy/Colors/Colors.stories.svelte

@@ -1,22 +0,0 @@
-<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/developer tools/philosophy/Colors/Opacity.stories.svelte

@@ -1,11 +0,0 @@
-<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/developer tools/philosophy/Themes.mdx

@@ -1,23 +0,0 @@
-import { Source } from '@storybook/addon-docs/blocks';
-import darkThemeToggleImage from '$lib/stories/assets/dark-theme-toggle.png';
-
-# Themes
-
-## Dark theme
-
-dark theme can be activated by adding `.dodo-theme--dark` class on the top container.
-
-<Source
-  dark
-  language="html"
-  code={`
- <body class="dodo-theme--dark">
- ...
-`}
-/>
-
-## Toggle theme in documentation
-
-Use the moon icon to toogle theme in documentation mode
-
-<img src={darkThemeToggleImage} />