@flightlesslabs/dodo-ui 0.12.1 → 0.14.0

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

@@ -1,140 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
-  import { Menu, MenuItem, Popper } from '$lib/index.js';
-  import Button from '$lib/stories/components/Form/Button/Button.svelte';
-  import { positionXArray, positionYArray } from '$lib/types/position.js';
-
-  export const storyPopperArgTypes: StoryBookArgTypes = {
-    popupPositionX: {
-      control: { type: 'select' },
-      options: positionXArray,
-    },
-    popupPositionY: {
-      control: { type: 'select' },
-      options: positionYArray,
-    },
-  };
-
-  // 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: {
-      docs: {
-        story: {
-          height: '200px',
-          inline: false,
-        },
-      },
-    },
-  });
-
-  let open = $state(false);
-</script>
-
-<Story name="Default" args={{ open, onClickOutside: () => (open = false) }} asChild>
-  <Popper {open} onClickOutside={() => (open = false)}>
-    <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="MenuOpen" args={{ open: true }} asChild>
-  <Popper open>
-    Hello! how are you doing?
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<Story
-  name="CustomPaperProps"
-  args={{
-    open: true,
-    paperProps: {
-      color: 'primary',
-    },
-  }}
-  asChild
->
-  <Popper
-    open
-    paperProps={{
-      color: 'primary',
-    }}
-  >
-    Hello! how are you doing?
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<!-- Expand the Popper to full width -->
-<Story name="FullWidth" asChild>
-  <Popper {open} fullWidth onClickOutside={() => (open = false)}>
-    <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>
-
-<!-- Expand the Popper to full width but not the popup -->
-<Story name="PopupFullWidthFalse" asChild>
-  <Popper {open} fullWidth popupFullWidth={false} onClickOutside={() => (open = false)}>
-    <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="CustomPopup"
-  args={{
-    open,
-    onClickOutside: () => (open = false),
-  }}
-  asChild
->
-  <Popper {open} onClickOutside={() => (open = false)}>
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-
-    {#snippet customPopup(popperLocation)}
-      {#if open}
-        <Menu>
-          <MenuItem>{popperLocation?.height}</MenuItem>
-          <MenuItem>{popperLocation?.width}</MenuItem>
-        </Menu>
-      {/if}
-    {/snippet}
-  </Popper>
-</Story>

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

@@ -1,64 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
-  import { Menu, MenuItem, PopperPopup } from '$lib/index.js';
-  import { positionXArray, positionYArray } from '$lib/types/position.js';
-
-  export const storyPopperPopupArgTypes: StoryBookArgTypes = {
-    popupPositionX: {
-      control: { type: 'select' },
-      options: positionXArray,
-    },
-    popupPositionY: {
-      control: { type: 'select' },
-      options: positionYArray,
-    },
-  };
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: PopperPopup,
-    tags: ['autodocs'],
-    argTypes: storyPopperPopupArgTypes,
-    parameters: {
-      docs: {
-        story: {
-          height: '200px',
-          inline: false,
-        },
-      },
-    },
-  });
-</script>
-
-<Story name="Default" asChild>
-  <PopperPopup>
-    <Menu>
-      <MenuItem>One</MenuItem>
-      <MenuItem>Two</MenuItem>
-      <MenuItem>Three</MenuItem>
-    </Menu>
-  </PopperPopup>
-</Story>
-
-<Story
-  name="CustomPaperProps"
-  args={{
-    paperProps: {
-      color: 'primary',
-    },
-  }}
-  asChild
->
-  <PopperPopup
-    paperProps={{
-      color: 'primary',
-    }}
-  >
-    <Menu>
-      <MenuItem>One</MenuItem>
-      <MenuItem>Two</MenuItem>
-      <MenuItem>Three</MenuItem>
-    </Menu>
-  </PopperPopup>
-</Story>

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

@@ -1,92 +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: {
-      docs: {
-        story: {
-          height: '200px',
-          inline: false,
-        },
-      },
-    },
-  });
-
-  let open = $state(false);
-</script>
-
-<!-- Positions will auto adjust depending on the space on top and bottom -->
-<Story
-  name="PositionAutoAdjust"
-  args={{ open, onClickOutside: () => (open = false), popupPositionY: 'top' }}
-  asChild
->
-  <Popper {open} onClickOutside={() => (open = false)} popupPositionY="top">
-    <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>
-
-<!-- Positions will not auto adjust if you use `lockPoistions` -->
-<Story
-  name="LockPoistions"
-  args={{
-    open,
-    onClickOutside: () => (open = false),
-    popupPositionY: 'top',
-    lockPoistions: true,
-  }}
-  asChild
->
-  <Popper {open} lockPoistions onClickOutside={() => (open = false)} popupPositionY="top">
-    <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>
-
-<!-- you can also adjust `popperHeightForVerticalPosition` to achive the same -->
-<Story
-  name="HeightForVerticalPosition"
-  args={{
-    open,
-    onClickOutside: () => (open = false),
-    popupPositionY: 'top',
-    popperHeightForVerticalPosition: 3,
-  }}
-  asChild
->
-  <Popper
-    {open}
-    onClickOutside={() => (open = false)}
-    popupPositionY="top"
-    popperHeightForVerticalPosition={3}
-  >
-    <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/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');
-`}
-/>