@flightlesslabs/dodo-ui 0.19.1 → 0.21.0

package/src/lib/stories/developer tools/customize/AutoCustomize/Tool/Preview/Preview.svelte

@@ -1,227 +0,0 @@
-<script lang="ts">
-  import Button from '$lib/stories/components/Form/Button/Button.svelte';
-  import RangeSlider from '$lib/stories/components/Form/RangeSlider/RangeSlider.svelte';
-  import Column from '$lib/stories/components/Layout/Grid/Column/Column.svelte';
-  import Grid from '$lib/stories/components/Layout/Grid/Grid.svelte';
-  import Paper from '$lib/stories/components/Layout/Paper/Paper.svelte';
-  import {
-    colorPalette,
-    colorPaletteValues,
-  } from '$lib/stories/developer tools/philosophy/Colors/utils/color.js';
-  import {
-    useAutoCustomizeConfigStore,
-    type AutoCustomizeConfigDataColors,
-  } from '../stores/config.svelte.js';
-
-  let cssVariables = $state<string[]>([]);
-
-  $effect(() => {
-    const newCssvariables: string[] = [];
-
-    for (let index = 0; index < colorPalette.length; index++) {
-      const colorName = colorPalette[index];
-      const fieldName = `${colorName}` as keyof AutoCustomizeConfigDataColors;
-
-      const dataPoint =
-        useAutoCustomizeConfigStore.data.colors &&
-        useAutoCustomizeConfigStore.data.colors[fieldName]
-          ? useAutoCustomizeConfigStore.data.colors[fieldName]
-          : undefined;
-
-      if (dataPoint) {
-        for (let index = 0; index < colorPaletteValues.length; index++) {
-          const weight = colorPaletteValues[index];
-
-          newCssvariables.push(
-            `--dodo-color-${colorName}-${weight}: var(--dodo-color-base-${dataPoint}-${weight})`,
-          );
-        }
-
-        newCssvariables.push(
-          ...[
-            `--dodo-ui-Button-outline-${colorName}: var(--dodo-color-base-${dataPoint}-400)`,
-            `--dodo-ui-Button-text-${colorName}-bg: var(--dodo-color-base-${dataPoint}-100)`,
-            `--dodo-ui-Button-text-${colorName}-hover-bg: var(--dodo-color-base-${dataPoint}-200)`,
-            `--dodo-ui-Button-text-${colorName}-active-bg: var(--dodo-color-base-${dataPoint}-300)`,
-            `--dodo-ui-Button-solid-${colorName}-bg: var(--dodo-color-base-${dataPoint}-500)`,
-            `--dodo-ui-Button-solid-${colorName}-hover-bg: var(--dodo-color-base-${dataPoint}-600)`,
-            `--dodo-ui-Button-solid-${colorName}-active-bg: var(--dodo-color-base-${dataPoint}-700)`,
-            `--dodo-ui-RangeSlider-thumb-${colorName}-bg: var(--dodo-color-base-${dataPoint}-500)`,
-            `--dodo-ui-RangeSlider-thumb-${colorName}-hover-bg: var(--dodo-color-base-${dataPoint}-600)`,
-            `--dodo-ui-RangeSlider-thumb-${colorName}-active-bg: var(--dodo-color-base-${dataPoint}-700)`,
-            `--dodo-ui-RangeSlider-track-filled-${colorName}-bg: var(--dodo-color-base-${dataPoint}-500)`,
-          ],
-        );
-      }
-    }
-
-    if (useAutoCustomizeConfigStore.data.components?.roundness) {
-      const roundness = useAutoCustomizeConfigStore.data.components.roundness / 8;
-
-      newCssvariables.push(`--dodo-ui-element-roundness-1: ${0.4375 + roundness}em`);
-      newCssvariables.push(`--dodo-ui-element-roundness-2: ${0.8125 + roundness}em`);
-      newCssvariables.push(`--dodo-ui-element-roundness-3: ${1.9375 + roundness}em`);
-    }
-
-    if (useAutoCustomizeConfigStore.data.components?.elementHeight) {
-      const elementHeight = useAutoCustomizeConfigStore.data.components.elementHeight + 2;
-      const elementHeightTrack = useAutoCustomizeConfigStore.data.components.elementHeight / 2;
-
-      newCssvariables.push(`--dodo-ui-element-height-small: ${34 + elementHeight}px`);
-      newCssvariables.push(`--dodo-ui-element-height-normal: ${40 + elementHeight}px`);
-      newCssvariables.push(`--dodo-ui-element-height-large: ${50 + elementHeight}px`);
-
-      newCssvariables.push(`--dodo-ui-track-element-height-small: ${6 + elementHeightTrack}px`);
-      newCssvariables.push(`--dodo-ui-track-element-height-normal: ${8 + elementHeightTrack}px`);
-      newCssvariables.push(`--dodo-ui-track-element-height-large: ${10 + elementHeightTrack}px`);
-    }
-
-    if (useAutoCustomizeConfigStore.data.components?.borderWidth) {
-      const borderWidth = useAutoCustomizeConfigStore.data.components.borderWidth;
-
-      newCssvariables.push(`--dodo-ui-element-border-width: ${1 + borderWidth}px`);
-    }
-
-    if (useAutoCustomizeConfigStore.data.space) {
-      const space = useAutoCustomizeConfigStore.data.space;
-
-      newCssvariables.push(`--dodo-ui-space-small: ${6 + space}px`);
-      newCssvariables.push(`--dodo-ui-space: ${8 + space}px`);
-      newCssvariables.push(`--dodo-ui-space-large: ${10 + space}px`);
-    }
-
-    cssVariables = [...newCssvariables];
-  });
-</script>
-
-<div class="Preview" style={cssVariables.join(';')}>
-  <div class="section">
-    <div class="column">
-      <Button>Primary</Button>
-    </div>
-    <div class="column">
-      <Button color="secondary">Secondary</Button>
-    </div>
-    <div class="column">
-      <Button color="neutral">Neutral</Button>
-    </div>
-    <div class="column">
-      <Button color="safe">Safe</Button>
-    </div>
-    <div class="column">
-      <Button color="warning">Warning</Button>
-    </div>
-    <div class="column">
-      <Button color="danger">Danger</Button>
-    </div>
-  </div>
-
-  <div class="section">
-    <div class="column">
-      <Button variant="text" outline>Primary</Button>
-    </div>
-    <div class="column">
-      <Button variant="text" outline color="secondary">Secondary</Button>
-    </div>
-    <div class="column">
-      <Button variant="text" outline color="neutral">Neutral</Button>
-    </div>
-    <div class="column">
-      <Button variant="text" outline color="safe">Safe</Button>
-    </div>
-    <div class="column">
-      <Button variant="text" outline color="warning">Warning</Button>
-    </div>
-    <div class="column">
-      <Button variant="text" outline color="danger">Danger</Button>
-    </div>
-  </div>
-
-  <div class="section">
-    <div class="column">
-      <Paper shadow={1} width="150px" height="180px">
-        <div style="padding: var(--dodo-ui-space)">Hola!</div>
-      </Paper>
-    </div>
-    <div class="column">
-      <RangeSlider value={50} min={20} max={70} />
-    </div>
-  </div>
-
-  <div class="section">
-    <Grid class="GridSection">
-      <Column md={6}>
-        <Paper shadow={1}>
-          <div style="padding: var(--dodo-ui-space)">Hola!</div>
-        </Paper>
-      </Column>
-      <Column md={6}>
-        <Paper shadow={1}>
-          <div style="padding: var(--dodo-ui-space)">Hola!</div>
-        </Paper>
-      </Column>
-      <Column md={4}>
-        <Paper shadow={1}>
-          <div style="padding: var(--dodo-ui-space)">Hola!</div>
-        </Paper>
-      </Column>
-      <Column md={3}>
-        <Paper shadow={1}>
-          <div style="padding: var(--dodo-ui-space)">Hola!</div>
-        </Paper>
-      </Column>
-      <Column md={2}>
-        <Paper shadow={1}>
-          <div style="padding: var(--dodo-ui-space)">Hola!</div>
-        </Paper>
-      </Column>
-      <Column md={3}>
-        <Paper shadow={1}>
-          <div style="padding: var(--dodo-ui-space)">Hola!</div>
-        </Paper>
-      </Column>
-    </Grid>
-  </div>
-</div>
-
-<style lang="scss">
-  @use '../../../../../../styles/scss' as *;
-
-  :global(:root) {
-    --AutoCustomize-Preview-bgColor: var(--dodo-color-base-gray-100);
-  }
-
-  :global(.dodo-theme--dark) {
-    --AutoCustomize-Preview-bgColor: var(--dodo-color-base-gray-800);
-  }
-
-  .Preview {
-    background-color: var(--AutoCustomize-Preview-bgColor);
-    padding: calc(var(--dodo-ui-space) * 2);
-    border-radius: var(--dodo-ui-element-roundness-2);
-    width: 100%;
-
-    @media (min-width: $breakpoints-lg) {
-      flex: 1;
-      width: initial;
-      height: calc(100vh - 130px);
-      overflow: auto;
-    }
-
-    .section {
-      width: 100%;
-      margin: var(--dodo-ui-space) 0;
-      display: flex;
-      flex-wrap: wrap;
-    }
-
-    .column {
-      margin: 4px;
-      display: inline-flex;
-    }
-
-    :global(.GridSection) {
-      width: 100%;
-    }
-  }
-</style>

package/src/lib/stories/developer tools/customize/AutoCustomize/Tool/Tool.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-  import Config from './Config/Config.svelte';
-  import Preview from './Preview/Preview.svelte';
-</script>
-
-<div class="Tool">
-  <Config />
-  <Preview />
-</div>
-
-<style lang="scss">
-  .Tool {
-    display: flex;
-    flex-wrap: wrap;
-  }
-</style>

package/src/lib/stories/developer tools/customize/AutoCustomize/Tool/helpers/download-file.ts

@@ -1,11 +0,0 @@
-import { saveAs } from 'file-saver';
-
-export async function downloadFile(fileName: string, data: Blob) {
-  try {
-    saveAs(data, fileName);
-
-    return Promise.resolve();
-  } catch (e) {
-    return Promise.reject(e);
-  }
-}

package/src/lib/stories/developer tools/customize/AutoCustomize/Tool/stores/config.svelte.ts

@@ -1,107 +0,0 @@
-import { browser } from '$app/environment';
-
-const AUTO_CUSTOMIZE_TOOL_CONFIG = 'AUTO_CUSTOMIZE_TOOL_CONFIG';
-
-export type AutoCustomizeConfigDataColors = {
-  primary?: string;
-  secondary?: string;
-  neutral?: string;
-  safe?: string;
-  warning?: string;
-  danger?: string;
-};
-
-export type AutoCustomizeConfigDataComponents = {
-  roundness?: number;
-  elementHeight?: number;
-  borderWidth?: number;
-};
-
-export type AutoCustomizeConfigData = {
-  colors?: AutoCustomizeConfigDataColors;
-  components?: AutoCustomizeConfigDataComponents;
-  space?: number;
-};
-
-export const autoCustomizeConfigdefaultData: AutoCustomizeConfigData = {
-  colors: {
-    primary: 'violet',
-    secondary: 'blue',
-    neutral: 'gray',
-    safe: 'emerald',
-    warning: 'amber',
-    danger: 'red',
-  },
-  components: {
-    roundness: 0,
-    elementHeight: 0,
-    borderWidth: 0,
-  },
-  space: 0,
-};
-
-function getDefaultData() {
-  if (!browser) {
-    return autoCustomizeConfigdefaultData;
-  }
-
-  let values = JSON.parse(localStorage.getItem(AUTO_CUSTOMIZE_TOOL_CONFIG) || `{}`);
-
-  values = { ...autoCustomizeConfigdefaultData, ...values };
-
-  return values as AutoCustomizeConfigData;
-}
-
-function createAutoCustomizeConfigStore() {
-  let updatedAt: number = $state(Date.now());
-  let data: AutoCustomizeConfigData = $state(getDefaultData());
-
-  return {
-    get data() {
-      return data;
-    },
-    get updatedAt() {
-      return updatedAt;
-    },
-    updateData(newData: Partial<AutoCustomizeConfigData>) {
-      data = {
-        ...data,
-        ...newData,
-      };
-      updatedAt = Date.now();
-
-      if (browser) {
-        localStorage.setItem(AUTO_CUSTOMIZE_TOOL_CONFIG, JSON.stringify(newData));
-      }
-    },
-    updateDataColor(newData: Partial<AutoCustomizeConfigDataColors>) {
-      const colors = {
-        ...data.colors,
-        ...newData,
-      };
-
-      this.updateData({ colors });
-    },
-    updateDataComponents(newData: Partial<AutoCustomizeConfigDataComponents>) {
-      const components = {
-        ...data.components,
-        ...newData,
-      };
-
-      this.updateData({ components });
-    },
-    reset() {
-      data = autoCustomizeConfigdefaultData;
-      updatedAt = Date.now();
-
-      if (browser) {
-        localStorage.setItem(
-          AUTO_CUSTOMIZE_TOOL_CONFIG,
-          JSON.stringify(autoCustomizeConfigdefaultData),
-        );
-      }
-    },
-  };
-}
-
-export const useAutoCustomizeConfigStore = createAutoCustomizeConfigStore();

package/src/lib/stories/developer tools/directives/clickOutside/clickOutside.ts

@@ -1,17 +0,0 @@
-export function clickOutside(node: Element, callback: () => void) {
-  const handleClick = (event: MouseEvent) => {
-    const target = event.target as Node;
-
-    if (node && !node.contains(target) && !event.defaultPrevented) {
-      callback();
-    }
-  };
-
-  document.addEventListener('click', handleClick, true);
-
-  return {
-    destroy() {
-      document.removeEventListener('click', handleClick, true);
-    },
-  };
-}

package/src/lib/stories/developer tools/directives/drag/drag.ts

@@ -1,47 +0,0 @@
-export function drag(node: HTMLElement) {
-  let dragging = false;
-
-  function getX(e: MouseEvent | TouchEvent): number {
-    return 'touches' in e ? e.touches[0].clientX : e.clientX;
-  }
-
-  function handleStart(e: MouseEvent | TouchEvent) {
-    dragging = true;
-    const x = getX(e);
-    node.dispatchEvent(new CustomEvent('dragstart', { detail: { x } }));
-
-    window.addEventListener('mousemove', handleMove);
-    window.addEventListener('mouseup', handleEnd);
-    window.addEventListener('touchmove', handleMove);
-    window.addEventListener('touchend', handleEnd);
-  }
-
-  function handleMove(e: MouseEvent | TouchEvent) {
-    if (!dragging) return;
-    const x = getX(e);
-
-    node.dispatchEvent(new CustomEvent('dragging', { detail: { x } }));
-  }
-
-  function handleEnd(e: MouseEvent | TouchEvent) {
-    if (!dragging) return;
-    dragging = false;
-    const x = getX(e);
-    node.dispatchEvent(new CustomEvent('dragend', { detail: { x } }));
-
-    window.removeEventListener('mousemove', handleMove);
-    window.removeEventListener('mouseup', handleEnd);
-    window.removeEventListener('touchmove', handleMove);
-    window.removeEventListener('touchend', handleEnd);
-  }
-
-  node.addEventListener('mousedown', handleStart);
-  node.addEventListener('touchstart', handleStart, { passive: true });
-
-  return {
-    destroy() {
-      node.removeEventListener('mousedown', handleStart);
-      node.removeEventListener('touchstart', handleStart);
-    },
-  };
-}

package/src/lib/stories/developer tools/helpers/Numbers/cleanNumericString/cleanNumericString.ts

@@ -1,27 +0,0 @@
-/**
- * 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.
- *
- * @param {string} input - The input string to be cleaned.
- * @returns {string} - A string containing only digits and at most one decimal point.
- *
- * @example
- * cleanNumericString("abc123.45.67def"); // returns "123.4567"
- * cleanNumericString("a1b2c3");          // returns "123"
- * cleanNumericString("...12.3.4..5");    // returns "12.345"
- */
-export default function cleanNumericString(input: string): string {
-  // Remove all characters except digits and dots
-  const filtered = input.replace(/[^0-9.]/g, '');
-
-  // Split by dot to separate parts
-  const parts = filtered.split('.');
-
-  if (parts.length === 1) {
-    // No dot present, just digits
-    return parts[0];
-  } else {
-    // Keep only first dot, join the rest parts without dots
-    return parts[0] + '.' + parts.slice(1).join('');
-  }
-}

package/src/lib/stories/developer tools/helpers/Numbers/isValidNumberValue/isValidNumberValue.ts

@@ -1,156 +0,0 @@
-import createLogger from '../../logger/logger.js';
-
-export type IsValidNumberValueSettings = {
-  /**
-   * Minimum allowed numeric value (inclusive).
-   */
-  min?: number;
-
-  /**
-   * Maximum allowed numeric value (inclusive).
-   */
-  max?: number;
-
-  /**
-   * Whether negative numbers are allowed.
-   * Defaults to false.
-   */
-  allowNegativeValues?: boolean;
-
-  /**
-   * Maximum allowed decimal places.
-   * Defaults to 0 (no decimals allowed).
-   */
-  decimalPlaces?: number;
-
-  /**
-   * Whether to enable logging.
-   * Defaults to false.
-   */
-  log?: boolean;
-
-  /**
-   * Strict checking, Full text - keep it enabled, Partial text - keep it disabled
-   * Defaults to true.
-   */
-  strict?: boolean;
-};
-
-/**
- * Checks if the input string is a valid numeric string.
- * Allows integers, decimals, negative numbers, and scientific notation.
- *
- * @param str - Input string to validate.
- * @returns True if string is numeric, false otherwise.
- */
-function isNumericString(str: string): boolean {
-  if (typeof str !== 'string') return false;
-  const trimmed = str.trim();
-  if (trimmed === '') return false;
-  const num = Number(trimmed);
-  return !isNaN(num) && isFinite(num);
-}
-
-/**
- * Validates whether a string represents a valid number based on provided settings.
- *
- * @param value - The string to validate as a number.
- * @param settings - Optional validation settings.
- * @param settings.min - Minimum allowed value (inclusive).
- * @param settings.max - Maximum allowed value (inclusive).
- * @param settings.allowNegativeValues - Whether negative numbers are allowed.
- * @param settings.decimalPlaces - Maximum allowed decimal places.
- * @param settings.log - Whether to enable detailed logging.
- * @param settings.strict - Whether to enable Strict checking, Full text - keep it enabled, Partial text - keep it disabled
- *
- * @returns True if the value is a valid number according to the settings; otherwise false.
- *
- * @example
- * ```ts
- * isValidNumberValue("123.45", { decimalPlaces: 2, log: true });
- * isValidNumberValue("-50", { allowNegativeValues: true, min: -100 });
- * ```
- */
-export default function isValidNumberValue(
-  value: string,
-  settings?: IsValidNumberValueSettings,
-): boolean {
-  const allowNegativeValues = settings?.allowNegativeValues || false;
-  const decimalPlaces = settings?.decimalPlaces || 0;
-  const valueFormatted = value.trim();
-  const log = settings?.log || false;
-  const logger = createLogger({
-    label: 'isValidNumberValue',
-    show: log,
-  });
-  const min = settings?.min;
-  const max = settings?.max;
-  const strict = settings?.strict === false ? false : true;
-
-  logger.info(`Validating value: "${valueFormatted}"`);
-
-  if (strict && !isNumericString(valueFormatted)) {
-    logger.warn('Invalid input: strict checking is enaabled and the text failed the checks');
-    return false;
-  }
-
-  if (valueFormatted === '') {
-    logger.info('Valid input: Blank value');
-    return true;
-  }
-
-  if (allowNegativeValues && valueFormatted === '-') {
-    logger.info(`Valid input: Single '-' sign allowed as a negative placeholder.`);
-    return true;
-  }
-
-  if (!decimalPlaces && valueFormatted.includes('.')) {
-    logger.warn('Invalid input: Decimals not allowed');
-    return false;
-  }
-
-  const dotCount = (valueFormatted.match(/\./g) || []).length;
-
-  if (dotCount > 1) {
-    logger.warn('Invalid input: More than one decimal point detected.');
-    return false;
-  }
-
-  const parts = valueFormatted.split('.');
-
-  if (parts[1]?.length > decimalPlaces) {
-    logger.warn(
-      `Invalid input: Number has ${parts[1].length} decimal places, exceeding the allowed limit of ${decimalPlaces}.`,
-    );
-    return false;
-  }
-
-  if (!isNumericString(valueFormatted)) {
-    logger.warn('Invalid input: String is not a valid number.');
-    return false;
-  }
-
-  const numericValue = Number(valueFormatted);
-
-  if (!allowNegativeValues && numericValue < 0) {
-    logger.warn('Invalid input: Negative numbers are not allowed.');
-    return false;
-  }
-
-  if (min !== undefined && numericValue < min) {
-    logger.warn(
-      `Invalid input: Number ${numericValue} is less than the minimum allowed value of ${min}.`,
-    );
-    return false;
-  }
-
-  if (max !== undefined && numericValue > max) {
-    logger.warn(
-      `Invalid input: Number ${numericValue} exceeds the maximum allowed value of ${max}.`,
-    );
-    return false;
-  }
-
-  logger.info('Validation passed: Input is a valid number according to the provided settings.');
-  return true;
-}

package/src/lib/stories/developer tools/helpers/Time/getMoment/getMoment.ts

@@ -1,66 +0,0 @@
-import type { ConfigType, OptionType } from 'dayjs';
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc.js';
-import timezone from 'dayjs/plugin/timezone.js';
-import customParseFormat from 'dayjs/plugin/customParseFormat.js';
-
-type Dayjs = ReturnType<typeof dayjs>;
-
-dayjs.extend(utc);
-dayjs.extend(timezone);
-dayjs.extend(customParseFormat);
-
-/**
- * Acceptable input types for the `getMoment` function, compatible with dayjs.
- */
-export type GetMomentDate = ConfigType;
-
-/**
- * Optional formatting string used to parse the date.
- */
-export type GetMomentFormat = OptionType;
-
-/**
- * Settings to control how the moment is returned (UTC, timezone, or local).
- */
-export interface GetMomentSettings {
-  /**
-   * Timezone string (e.g., "America/New_York").
-   */
-  timezone?: string;
-
-  /**
-   * 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 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', 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 {
-  const timezone = settings?.timezone;
-  const utc = settings?.utc ?? false;
-
-  if (utc) {
-    return dayjs.utc(dayjs(date, format));
-  } else if (timezone) {
-    return dayjs.tz(dayjs(date, format), timezone);
-  } else {
-    return dayjs(date, format);
-  }
-}