@flightlesslabs/dodo-ui 0.10.3 → 0.11.1

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

@@ -0,0 +1,25 @@
+<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

@@ -0,0 +1,30 @@
+<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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,71 @@
+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/getMoment.ts

@@ -1,5 +1,5 @@
 import type { ConfigType, OptionType } from 'dayjs';
-import dayjs from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
 import utc from 'dayjs/plugin/utc.js';
 import timezone from 'dayjs/plugin/timezone.js';
 import customParseFormat from 'dayjs/plugin/customParseFormat.js';
@@ -15,14 +15,13 @@ export type GetMomentDate = ConfigType;
 
 /**
  * Optional formatting string used to parse the date.
- * Refer to dayjs customParseFormat plugin for supported formats.
  */
 export type GetMomentFormat = OptionType;
 
 /**
  * Settings to control how the moment is returned (UTC, timezone, or local).
  */
-export type GetMomentSettings = {
+export interface GetMomentSettings {
   /**
    * Timezone string (e.g., "America/New_York").
    */
@@ -32,28 +31,28 @@ export type GetMomentSettings = {
    * Whether to return the time in UTC. If true, overrides timezone.
    */
   utc?: boolean;
-};
+}
 
 /**
  * A wrapper around dayjs to return a moment-like object with optional formatting,
  * timezone, or UTC handling.
  *
- * @param {GetMomentDate} [date] - The input date, time, or string to be parsed.
- * @param {format} [format] - A custom format string for parsing the input date.
- * @param {GetMomentSettings} [settings] - Optional settings for format, timezone, and UTC.
- * @returns {dayjs.Dayjs} - A dayjs object in local, UTC, or specified timezone.
+ * @param date - The input date, time, or string to be parsed.
+ * @param format - A custom format string for parsing the input date.
+ * @param settings - Optional settings for timezone or UTC output.
+ * @returns A dayjs object in local, UTC, or specified timezone.
  *
  * @example
- * getMoment('2025-01-01T12:00:00Z', { utc: true }).format()
- * getMoment('01-01-2025', { format: 'DD-MM-YYYY', timezone: 'Asia/Kolkata' }).format()
+ * getMoment('2025-01-01T12:00:00Z', undefined, { utc: true }).format()
+ * getMoment('01-01-2025', 'DD-MM-YYYY', { timezone: 'Asia/Kolkata' }).format()
  */
 export default function getMoment(
   date?: GetMomentDate,
   format?: GetMomentFormat,
   settings?: GetMomentSettings,
-): dayjs.Dayjs {
+): Dayjs {
   const timezone = settings?.timezone;
-  const utc = settings?.utc ? true : false;
+  const utc = settings?.utc ?? false;
 
   if (utc) {
     return dayjs.utc(dayjs(date, format));

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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -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/developer tools/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/developer tools/philosophy/Themes.mdx

@@ -0,0 +1,23 @@
+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} />

package/dist/stories/components/Info/Calendar/utils/createDateOfMonth.d.ts

@@ -1,28 +0,0 @@
-import type { DateOfMonth } from './types.js';
-import type { CalendarWeekNames } from '../SubComponents/CalendarDatesChart/CalendarWeek/CalendarWeek.svelte';
-export interface CreateDatesOfMonthSettings {
-    /** Day considered as start of the week */
-    startOfWeek?: CalendarWeekNames;
-    /** Include leading days from the previous month */
-    showLastMonth?: boolean;
-    /** Include trailing days from the next month */
-    showNextMonth?: boolean;
-    /** Set today manually  */
-    today?: Date;
-    /** Minimum allowed date, rest of the dates will be disabled  */
-    minDate?: Date;
-    /** Maxium allowed date, rest of the dates will be disabled  */
-    maxDate?: Date;
-    /** Exclude Dates, these dates will be disabled */
-    excludeDates?: Date[];
-    /** Include Dates, rest of the dates will be disabled  */
-    includeDates?: Date[];
-    /** Optional IANA timezone */
-    timezone?: string;
-    /** Use UTC time */
-    utc?: boolean;
-    /** Range value */
-    rangeValue?: [Date, Date];
-}
-export type CreateDateOfMonthType = 'currentMonth' | 'nextMonth' | 'lastMonth';
-export default function createDateOfMonth(date?: Date, settings?: CreateDatesOfMonthSettings, monthType?: CreateDateOfMonthType): DateOfMonth;

package/dist/stories/components/Info/Calendar/utils/createDateOfMonth.js

@@ -1,87 +0,0 @@
-import getMoment from '../../../../developer tools/helpers/Time/getMoment/getMoment.js';
-function dateMoment(date, settings) {
-    return getMoment(date, undefined, {
-        timezone: settings?.timezone,
-        utc: settings?.utc,
-    });
-}
-function getIsToday(dayMoment, todayDate, todayManual) {
-    const dayDateFormat = dayMoment.format('DD-MM-YYYY');
-    let today = false;
-    if (todayManual && todayManual === dayDateFormat) {
-        today = true;
-    }
-    else if (todayDate === dayDateFormat) {
-        today = true;
-    }
-    return today;
-}
-function getIsDateDisabled(dayMoment, minDate, maxDate, excludeDates, includeDates) {
-    const dayDateFormat = dayMoment.format('DD-MM-YYYY');
-    let disabled = false;
-    if (minDate?.isValid() && dayMoment.isBefore(minDate)) {
-        disabled = true;
-    }
-    if (maxDate?.isValid() && dayMoment.isAfter(maxDate)) {
-        disabled = true;
-    }
-    if (excludeDates?.length && excludeDates.includes(dayDateFormat)) {
-        disabled = true;
-    }
-    if (includeDates?.length && !includeDates.includes(dayDateFormat)) {
-        disabled = true;
-    }
-    return disabled;
-}
-export default function createDateOfMonth(date, settings, monthType = 'currentMonth') {
-    const minDate = settings?.minDate ? dateMoment(settings.minDate, settings) : undefined;
-    const maxDate = settings?.maxDate ? dateMoment(settings.maxDate, settings) : undefined;
-    const excludeDates = settings?.excludeDates?.length
-        ? settings?.excludeDates.map((item) => dateMoment(item, settings).format('DD-MM-YYYY'))
-        : undefined;
-    const includeDates = settings?.includeDates?.length
-        ? settings?.includeDates.map((item) => dateMoment(item, settings).format('DD-MM-YYYY'))
-        : undefined;
-    const [range1, range2] = settings?.rangeValue || [];
-    const rangeStart = range1 ? dateMoment(range1, settings) : undefined;
-    const rangeEnd = range2 ? dateMoment(range2, settings) : undefined;
-    const todayDate = dateMoment(undefined, settings).format('DD-MM-YYYY');
-    const todayManual = settings?.today
-        ? dateMoment(settings?.today, settings).format('DD-MM-YYYY')
-        : undefined;
-    const dayMoment = dateMoment(date, settings);
-    const dayMomentDayFormatted = dayMoment.format('DD-MM-YYYY');
-    let isRangeStart = false;
-    let isRangeEnd = false;
-    let inRange = false;
-    if (rangeStart && rangeEnd) {
-        if (dayMomentDayFormatted === rangeStart.format('DD-MM-YYYY')) {
-            isRangeStart = true;
-        }
-        if (dayMomentDayFormatted === rangeEnd.format('DD-MM-YYYY')) {
-            isRangeEnd = true;
-        }
-        if (dayMoment.isAfter(rangeStart) && dayMoment.isBefore(rangeEnd)) {
-            inRange = true;
-        }
-    }
-    const dataToExport = {
-        id: `${dayMoment.valueOf()}`,
-        date: dayMoment.toDate(),
-        isCurrentMonth: true,
-        disabled: getIsDateDisabled(dayMoment, minDate, maxDate, excludeDates, includeDates),
-        today: getIsToday(dayMoment, todayDate, todayManual),
-        isRangeStart,
-        isRangeEnd,
-        inRange,
-    };
-    if (monthType === 'lastMonth') {
-        dataToExport.isLastMonth = true;
-        dataToExport.isCurrentMonth = false;
-    }
-    else if (monthType === 'nextMonth') {
-        dataToExport.isNextMonth = true;
-        dataToExport.isCurrentMonth = false;
-    }
-    return dataToExport;
-}

package/dist/stories/components/Info/Calendar/utils/getDatesOfMonth.d.ts

@@ -1,10 +0,0 @@
-import type { DateOfMonth } from './types.js';
-import { type CreateDatesOfMonthSettings } from './createDateOfMonth.js';
-/**
- * Generates a calendar grid of dates for a given month.
- *
- * @param {Date} date - The base date for the month to generate.
- * @param {GetDatesOfMonthSettings} [settings] - Optional settings for formatting and display.
- * @returns {(DateOfMonth[][] | null)} - A 2D array of DateOfMonth objects representing the calendar, or null if invalid.
- */
-export default function getDatesOfMonth(date?: Date, settings?: CreateDatesOfMonthSettings): DateOfMonth[][] | null;

package/dist/stories/components/Info/Calendar/utils/index.mdx

@@ -1,64 +0,0 @@
-import { Source } from '@storybook/addon-docs/blocks';
-
-# Utils
-
-## `getDatesOfMonth`
-
-`getDatesOfMonth(date, settings)` generates a calendar view of a given month with options to include dates from the previous and next month.
-
-### Usage
-
-<Source
-  dark
-  language="ts"
-  code={`
-import { getDatesOfMonth, getMoment} from '@flightlesslabs/dodo-ui';
-
-const dates = getDatesOfMonth(new Date(), {
-showLastMonth: false,
-showNextMonth: false,
-});
-
-// Or
-
-const dates2 = getDatesOfMonth(getMoment('01-02-2025', 'DD-MM-YYYY').toDate());
-
-`}
-/>
-
-## Types
-
-### `DateOfMonth`
-
-<Source
-  dark
-  language="ts"
-  code={`
- type DateOfMonth = {
-  id: string;
-  dayNumber: number;
-  date: Date;
-  isCurrentMonth?: boolean;
-  isLastMonth?: boolean;
-  isNextMonth?: boolean;
-};
-`}
-/>
-
-### Enum: `DAYS_OF_WEEK`
-
-<Source
-  dark
-  language="ts"
-  code={`
- const enum DAYS_OF_WEEK {
-  SUN,
-  MON,
-  TUE,
-  WED,
-  THU,
-  FRI,
-  SAT,
-}
-`}
-/>