@flightlesslabs/dodo-ui 0.8.0 → 0.9.0

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

@@ -8,6 +8,7 @@
     ClipboardEventHandler,
     FocusEventHandler,
     FormEventHandler,
+    KeyboardEventHandler,
   } from 'svelte/elements';
 
   export type TextInputType = 'text' | 'tel' | 'email' | 'password' | 'url' | 'number';
@@ -33,6 +34,10 @@
     currentTarget: EventTarget & HTMLInputElement;
   };
 
+  export type TextInputKeyboardEvent = KeyboardEvent & {
+    currentTarget: EventTarget & HTMLInputElement;
+  };
+
   export interface TextInputProps {
     /** Input type? */
     type?: TextInputType;
@@ -78,6 +83,12 @@
     oncopy?: ClipboardEventHandler<HTMLInputElement>;
     /** oncut event handler */
     oncut?: ClipboardEventHandler<HTMLInputElement>;
+    /** onkeydown event handler */
+    onkeydown?: KeyboardEventHandler<HTMLInputElement>;
+    /** onkeypress event handler */
+    onkeypress?: KeyboardEventHandler<HTMLInputElement>;
+    /** onkeyup event handler */
+    onkeyup?: KeyboardEventHandler<HTMLInputElement>;
   }
 </script>
 
@@ -103,6 +114,9 @@
     onpaste,
     oncopy,
     oncut,
+    onkeydown,
+    onkeypress,
+    onkeyup,
     before,
     after,
     error = false,
@@ -116,8 +130,6 @@
 
   function onfocusMod(e: DynamicInputFocusEvent) {
     const eTyped = e as TextInputFocusEvent;
-    focused = true;
-
     if (onfocus) {
       onfocus(eTyped);
     }
@@ -125,7 +137,6 @@
 
   function onblurMod(e: DynamicInputFocusEvent) {
     const eTyped = e as TextInputFocusEvent;
-    focused = false;
 
     if (onblur) {
       onblur(eTyped);
@@ -147,6 +158,7 @@
       {id}
       {disabled}
       bind:ref
+      bind:focused
       {oninput}
       {onchange}
       onfocus={onfocusMod}
@@ -154,6 +166,9 @@
       {onpaste}
       {oncopy}
       {oncut}
+      onkeydown={onkeydown ? (e) => onkeydown(e as TextInputKeyboardEvent) : undefined}
+      onkeypress={onkeypress ? (e) => onkeypress(e as TextInputKeyboardEvent) : undefined}
+      onkeyup={onkeyup ? (e) => onkeyup(e as TextInputKeyboardEvent) : undefined}
       {placeholder}
       bind:value
       {readonly}

package/src/lib/stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte

@@ -152,7 +152,7 @@
       }
 
       return;
-    } else if (keyHit === 'Esc') {
+    } else if (keyHit === 'Escape') {
       if (onEsc) {
         onEsc(e, menuItemIndex);
       }

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

@@ -6,6 +6,7 @@
     ClipboardEventHandler,
     FocusEventHandler,
     FormEventHandler,
+    KeyboardEventHandler,
     MouseEventHandler,
   } from 'svelte/elements';
 
@@ -21,6 +22,10 @@
     currentTarget: EventTarget & (HTMLInputElement | HTMLButtonElement);
   };
 
+  export type DynamicInputKeyboardEvent = KeyboardEvent & {
+    currentTarget: EventTarget & (HTMLInputElement | HTMLButtonElement);
+  };
+
   export interface DynamicInputProps {
     /** How large should the button be? */
     size?: ComponentSize;
@@ -30,6 +35,8 @@
     ref?: HTMLInputElement | HTMLButtonElement;
     /** Input value */
     value?: string | number;
+    /** is focused, set focused */
+    focused?: boolean;
     /** variant */
     variant?: DynamicInputVariant;
     /** How round should the border radius be? */
@@ -64,6 +71,12 @@
     oncopy?: ClipboardEventHandler<HTMLInputElement>;
     /** oncut event handler */
     oncut?: ClipboardEventHandler<HTMLInputElement>;
+    /** onkeydown event handler */
+    onkeydown?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
+    /** onkeypress event handler */
+    onkeypress?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
+    /** onkeyup event handler */
+    onkeyup?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
     /** custom Content Formatting for variant button */
     customInputContent?: (value: string | number) => Snippet;
   }
@@ -83,7 +96,11 @@
     onpaste,
     oncopy,
     oncut,
+    onkeydown,
+    onkeypress,
+    onkeyup,
     value = $bindable<string | number>(),
+    focused = $bindable<boolean>(),
     placeholder,
     ref = $bindable<HTMLInputElement | HTMLButtonElement>(),
     readonly = false,
@@ -105,6 +122,22 @@
       onclick(e);
     }
   }
+
+  function onfocusMod(e: DynamicInputFocusEvent) {
+    focused = true;
+
+    if (onfocus) {
+      onfocus(e);
+    }
+  }
+
+  function onblurMod(e: DynamicInputFocusEvent) {
+    focused = false;
+
+    if (onblur) {
+      onblur(e);
+    }
+  }
 </script>
 
 {#if variant === 'button'}
@@ -119,8 +152,11 @@
     ].join(' ')}
     bind:this={ref}
     onclick={onclickMod}
-    {onfocus}
-    {onblur}
+    {onkeydown}
+    {onkeypress}
+    {onkeyup}
+    onfocus={onfocusMod}
+    onblur={onblurMod}
     {disabled}
   >
     {#if customInputContentTyped}
@@ -138,11 +174,14 @@
     {disabled}
     {oninput}
     {onchange}
-    {onfocus}
-    {onblur}
+    onfocus={onfocusMod}
+    onblur={onblurMod}
     {onpaste}
     {oncopy}
     {oncut}
+    {onkeydown}
+    {onkeypress}
+    {onkeyup}
     {placeholder}
     bind:value
     bind:this={ref}

package/src/lib/stories/developer tools/components/DynamicInput/Events/Events.stories.svelte

@@ -0,0 +1,121 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { storyDynamicInputArgTypes } from '../DynamicInput.stories.svelte';
+  import DynamicInput, {
+    type DynamicInputFocusEvent,
+    type DynamicInputKeyboardEvent,
+  } from '../DynamicInput.svelte';
+  import type { TextInputClipboardEvent } from '$lib/stories/components/Form/TextInput/TextInput.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: DynamicInput,
+    tags: ['autodocs'],
+    argTypes: storyDynamicInputArgTypes,
+    args: { value: 'Hello world!' },
+  });
+</script>
+
+<Story
+  name="Input"
+  args={{
+    oninput: (e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('Input Event', target.value);
+    },
+  }}
+/>
+
+<Story
+  name="Change"
+  args={{
+    onchange: (e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onChange Event', target.value);
+    },
+  }}
+/>
+
+<Story
+  name="Focus"
+  args={{
+    onfocus: (e: DynamicInputFocusEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onfocus Event', target);
+    },
+  }}
+/>
+
+<Story
+  name="Blur"
+  args={{
+    onblur: (e: DynamicInputFocusEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onblur Event', target);
+    },
+  }}
+/>
+
+<Story
+  name="Copy"
+  args={{
+    oncopy: (e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('oncopy Event', target);
+    },
+  }}
+/>
+
+<Story
+  name="Cut"
+  args={{
+    oncut: (e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('oncut Event', target);
+    },
+  }}
+/>
+
+<Story
+  name="Paste"
+  args={{
+    onpaste: (e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onpaste Event', target);
+    },
+  }}
+/>
+
+<Story
+  name="KeyDown"
+  args={{
+    onkeydown: (e: DynamicInputKeyboardEvent) => {
+      console.log('onkeydown Event', e.key);
+    },
+  }}
+/>
+
+<Story
+  name="KeyPress"
+  args={{
+    onkeypress: (e: DynamicInputKeyboardEvent) => {
+      console.log('onkeypress Event', e.key);
+    },
+  }}
+/>
+
+<Story
+  name="KeyUp"
+  args={{
+    onkeyup: (e: DynamicInputKeyboardEvent) => {
+      console.log('onkeyup Event', e.key);
+    },
+  }}
+/>

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

@@ -0,0 +1,27 @@
+/**
+ * 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/cleanNumericString/index.mdx

@@ -0,0 +1,20 @@
+import { Source } from '@storybook/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/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/Numbers/isValidNumberValue/isValidNumberValue.ts

@@ -0,0 +1,156 @@
+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/logger/index.mdx

@@ -0,0 +1,63 @@
+import { Source } from '@storybook/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/helpers/logger/logger.ts

@@ -0,0 +1,46 @@
+export type LogLevel = 'info' | 'warn' | 'error';
+
+export interface LoggerOptions {
+  /**
+   * Optional label to prefix log entries.
+   */
+  label?: string;
+
+  /**
+   * Whether to actually show logs.
+   * Defaults to true.
+   */
+  show?: boolean;
+}
+
+/**
+ * Formats the log message with timestamp, label, and level.
+ */
+export function formatPrefix(level: LogLevel, label?: string): string {
+  const timestamp = new Date().toISOString();
+  const labelPart = label ? `[${label}]` : '';
+  return `[${timestamp}] ${labelPart} [${level.toUpperCase()}]`;
+}
+
+/**
+ * Creates a logger that logs every call unless disabled by show=false.
+ */
+export default function createLogger(options: LoggerOptions = {}) {
+  const { label, show = true } = options;
+
+  function shouldLog() {
+    return show;
+  }
+
+  return {
+    info: (msg: unknown, ...optionalParams: unknown[]) => {
+      if (shouldLog()) console.info(formatPrefix('info', label), msg, ...optionalParams);
+    },
+    warn: (msg: unknown, ...optionalParams: unknown[]) => {
+      if (shouldLog()) console.warn(formatPrefix('warn', label), msg, ...optionalParams);
+    },
+    error: (msg: unknown, ...optionalParams: unknown[]) => {
+      if (shouldLog()) console.error(formatPrefix('error', label), msg, ...optionalParams);
+    },
+  };
+}