@flightlesslabs/dodo-ui 0.8.0 → 0.9.0

package/dist/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/dist/stories/developer tools/helpers/Numbers/isValidNumberValue/isValidNumberValue.d.ts

@@ -0,0 +1,51 @@
+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;
+};
+/**
+ * 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;

package/dist/stories/developer tools/helpers/Numbers/isValidNumberValue/isValidNumberValue.js

@@ -0,0 +1,96 @@
+import createLogger from '../../logger/logger.js';
+/**
+ * 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) {
+    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, settings) {
+    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/dist/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/dist/stories/developer tools/helpers/logger/logger.d.ts

@@ -0,0 +1,24 @@
+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 declare function formatPrefix(level: LogLevel, label?: string): string;
+/**
+ * Creates a logger that logs every call unless disabled by show=false.
+ */
+export default function createLogger(options?: LoggerOptions): {
+    info: (msg: unknown, ...optionalParams: unknown[]) => void;
+    warn: (msg: unknown, ...optionalParams: unknown[]) => void;
+    error: (msg: unknown, ...optionalParams: unknown[]) => void;
+};

package/dist/stories/developer tools/helpers/logger/logger.js

@@ -0,0 +1,31 @@
+/**
+ * Formats the log message with timestamp, label, and level.
+ */
+export function formatPrefix(level, label) {
+    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 = {}) {
+    const { label, show = true } = options;
+    function shouldLog() {
+        return show;
+    }
+    return {
+        info: (msg, ...optionalParams) => {
+            if (shouldLog())
+                console.info(formatPrefix('info', label), msg, ...optionalParams);
+        },
+        warn: (msg, ...optionalParams) => {
+            if (shouldLog())
+                console.warn(formatPrefix('warn', label), msg, ...optionalParams);
+        },
+        error: (msg, ...optionalParams) => {
+            if (shouldLog())
+                console.error(formatPrefix('error', label), msg, ...optionalParams);
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "homepage": "https://flightlesslabs.github.io/dodo-ui",
   "repository": {
     "type": "git",

package/src/lib/index.ts

@@ -14,6 +14,20 @@ export type { ComponentWeight } from './types/weight.js';
 
 export type { PositionY, PositionX } from './types/position.js';
 
+/** developer tools: helpers: logger */
+export { default as createLogger } from '$lib/stories/developer tools/helpers/logger/logger.js';
+export type {
+  LogLevel,
+  LoggerOptions,
+} from '$lib/stories/developer tools/helpers/logger/logger.js';
+
+/** developer tools: helpers: Numbers: isValidNumberValue */
+export { default as isValidNumberValue } from '$lib/stories/developer tools/helpers/Numbers/isValidNumberValue/isValidNumberValue.js';
+export type { IsValidNumberValueSettings } from '$lib/stories/developer tools/helpers/Numbers/isValidNumberValue/isValidNumberValue.js';
+
+/** developer tools: helpers: Numbers: cleanNumericString */
+export { default as cleanNumericString } from '$lib/stories/developer tools/helpers/Numbers/cleanNumericString/cleanNumericString.js';
+
 /** developer tools: directives: clickOutside */
 export { clickOutside } from '$lib/stories/developer tools/directives/clickOutside/clickOutside.js';
 
@@ -32,6 +46,7 @@ export type {
   DynamicInputProps,
   DynamicInputClickEvent,
   DynamicInputFocusEvent,
+  DynamicInputKeyboardEvent,
 } from '$lib/stories/developer tools/components/DynamicInput/DynamicInput.svelte';
 
 /** developer tools: components: Popper */
@@ -57,6 +72,7 @@ export type {
   TextInputFocusEvent,
   TextInputClipboardEvent,
   TextInputInputEvent,
+  TextInputKeyboardEvent,
   TextInputProps,
 } from '$lib/stories/components/Form/TextInput/TextInput.svelte';
 
@@ -87,6 +103,10 @@ export type {
   SelectProps,
 } from '$lib/stories/components/Form/Select/Select.svelte';
 
+/** Form: NumericInput */
+export { default as NumericInput } from '$lib/stories/components/Form/NumericInput/NumericInput.svelte';
+export type { NumericInputProps } from '$lib/stories/components/Form/NumericInput/NumericInput.svelte';
+
 /** Layout: Paper */
 export { default as Paper } from '$lib/stories/components/Layout/Paper/Paper.svelte';
 export type { PaperColor, PaperProps } from '$lib/stories/components/Layout/Paper/Paper.svelte';

package/src/lib/stories/components/Form/NumericInput/Events/Events.stories.svelte

@@ -0,0 +1,134 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { storyNumericInputArgTypes } from '../NumericInput.stories.svelte';
+  import NumericInput from '../NumericInput.svelte';
+  import type {
+    TextInputFocusEvent,
+    TextInputClipboardEvent,
+    TextInputKeyboardEvent,
+  } from '../../TextInput/TextInput.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: NumericInput,
+    tags: ['autodocs'],
+    argTypes: storyNumericInputArgTypes,
+  });
+
+  let value = $state<undefined | number>(0);
+</script>
+
+<!-- Use this event to get filtered numeric value -->
+<Story
+  name="NumericValueChange"
+  args={{
+    value,
+    onValueChange: (val: number | undefined) => {
+      value = val;
+    },
+  }}
+/>
+
+<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: TextInputFocusEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onfocus Event', target);
+    },
+  }}
+/>
+
+<Story
+  name="Blur"
+  args={{
+    onblur: (e: TextInputFocusEvent) => {
+      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: TextInputKeyboardEvent) => {
+      console.log('onkeydown Event', e.key);
+    },
+  }}
+/>
+
+<Story
+  name="KeyPress"
+  args={{
+    onkeypress: (e: TextInputKeyboardEvent) => {
+      console.log('onkeypress Event', e.key);
+    },
+  }}
+/>
+
+<Story
+  name="KeyUp"
+  args={{
+    onkeyup: (e: TextInputKeyboardEvent) => {
+      console.log('onkeyup Event', e.key);
+    },
+  }}
+/>

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

@@ -0,0 +1,84 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import NumericInput from './NumericInput.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+  import { componentRoundnessArray } from '$lib/types/roundness.js';
+  import { componentSizeArray } from '$lib/types/size.js';
+
+  export const storyNumericInputArgTypes: StoryBookArgTypes = {
+    roundness: {
+      control: { type: 'select' },
+      options: componentRoundnessArray,
+    },
+    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: NumericInput,
+    tags: ['autodocs'],
+    argTypes: storyNumericInputArgTypes,
+  });
+
+  let value = $state<undefined | number>(0);
+</script>
+
+<!-- NumericInput with default style -->
+<Story
+  name="Default"
+  args={{
+    value,
+    onValueChange: (val) => {
+      value = val;
+    },
+  }}
+/>
+
+<Story name="Placeholder" args={{ value: undefined, placeholder: 'Type something...' }} />
+
+<Story
+  name="No Outline"
+  args={{
+    outline: false,
+    value,
+    onValueChange: (val) => {
+      value = val;
+    },
+  }}
+/>
+
+<Story
+  name="Error"
+  args={{
+    error: true,
+    value,
+    onValueChange: (val) => {
+      value = val;
+    },
+  }}
+/>
+
+<Story
+  name="Disabled"
+  args={{
+    disabled: true,
+    value,
+    onValueChange: (val) => {
+      value = val;
+    },
+  }}
+/>
+
+<Story
+  name="Read only"
+  args={{
+    readonly: true,
+    value,
+    onValueChange: (val) => {
+      value = val;
+    },
+  }}
+/>