@flightlesslabs/dodo-ui 0.7.2 → 0.9.0

package/dist/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/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,19 +1,6 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.7.2",
-  "scripts": {
-    "build": "vite build && pnpm run prepack",
-    "preview": "vite preview",
-    "prepare": "svelte-kit sync || echo ''",
-    "prepack": "svelte-kit sync && svelte-package && publint",
-    "svelte-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "format": "prettier --write .",
-    "lint": "prettier --check . && eslint .",
-    "dev": "storybook dev -p 6006",
-    "build-storybook": "storybook build && touch ./storybook-static/.nojekyll",
-    "check": "pnpm run svelte-check && eslint . && pnpm run lint",
-    "check:fix": "pnpm run svelte-check && eslint . && pnpm run format"
-  },
+  "version": "0.9.0",
   "homepage": "https://flightlesslabs.github.io/dodo-ui",
   "repository": {
     "type": "git",
@@ -70,7 +57,7 @@
     "eslint": "^9.27.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-svelte": "^3.9.0",
-    "globals": "^16.1.0",
+    "globals": "^16.2.0",
     "playwright": "^1.52.0",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.4.0",
@@ -78,7 +65,7 @@
     "sass": "^1.89.0",
     "storybook": "^8.6.14",
     "storybook-dark-mode": "^4.0.2",
-    "svelte": "^5.32.1",
+    "svelte": "^5.33.2",
     "svelte-check": "^4.2.1",
     "svelte-preprocess": "^6.0.3",
     "typescript": "^5.8.3",
@@ -95,5 +82,16 @@
   },
   "dependencies": {
     "@iconify/svelte": "^5.0.0"
+  },
+  "scripts": {
+    "build": "vite build && pnpm run prepack",
+    "preview": "vite preview",
+    "svelte-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "dev": "storybook dev -p 6006",
+    "build-storybook": "storybook build && touch ./storybook-static/.nojekyll",
+    "check": "pnpm run svelte-check && eslint . && pnpm run lint",
+    "check:fix": "pnpm run svelte-check && eslint . && pnpm run format"
   }
-}
+}

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';
 
@@ -79,6 +95,18 @@ export type { FormControlProps } from '$lib/stories/components/Form/FormControl/
 export { default as Message } from '$lib/stories/components/Form/Message/Message.svelte';
 export type { MessageProps } from '$lib/stories/components/Form/Message/Message.svelte';
 
+/** Form: Select */
+export { default as Select } from '$lib/stories/components/Form/Select/Select.svelte';
+export type {
+  SelectOption,
+  SelectDropdownArrowPosition,
+  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';
@@ -98,3 +126,8 @@ export type {
   MenuItemType,
   MenuItemProps,
 } from '$lib/stories/components/Layout/Menu/MenuItem/MenuItem.svelte';
+export { default as DynamicMenu } from '$lib/stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte';
+export type {
+  DynamicMenuItemOption,
+  DynamicMenuProps,
+} from '$lib/stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte';

package/src/lib/stories/Home.mdx

@@ -0,0 +1,59 @@
+import { Source } from '@storybook/blocks';
+import item from '../../../package.json?raw';
+
+<main style={{ textAlign: 'center' }}>
+
+<img src="dodo-circle-6.png" style={{ width: 200, height: 'auto' }} />
+
+# Dodo UI
+
+<h3 style={{ fontWeight: 500 }}>v{JSON.parse(item)?.version}</h3>
+
+<h3 style={{ fontWeight: 400 }}>An open-source, opinionated UI framework for Svelte.</h3>
+
+### [Github](https://github.com/flightlesslabs/dodo-ui) - [npm](https://www.npmjs.com/package/@flightlesslabs/dodo-ui)
+
+</main>
+
+<br />
+<br />
+
+## Install
+
+pnpm
+
+<Source
+  dark
+  language="bash"
+  code={`
+pnpm add @flightlesslabs/dodo-ui
+`}
+/>
+
+npm
+
+<Source
+  dark
+  language="bash"
+  code={`
+npm i @flightlesslabs/dodo-ui
+`}
+/>
+
+## Use it!
+
+Lets import [Button](?path=/docs/components-form-button--docs) component. Checkout documentation for [Button](?path=/docs/components-form-button--docs)
+
+<Source
+  dark
+  language="js"
+  code={`
+import { Button } '@flightlesslabs/dodo-ui';
+`}
+/>
+
+## Explore more
+
+- [Dark Theme](?path=/docs/developer-tools-philosophy-themes--docs#dark-theme)
+- [Colors](?path=/docs/developer-tools-philosophy-colors--docs)
+- [Adjust Color Opacity](?path=/docs/developer-tools-philosophy-colors--docs#adjusting-opacity)

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

@@ -0,0 +1,61 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button, { buttonTypeArray } from './Button.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+  import { componentRoundnessArray } from '$lib/types/roundness.js';
+  import { componentColorArray } from '$lib/types/colors.js';
+  import { componentWeightArray } from '$lib/types/weight.js';
+  import { componentSizeArray } from '$lib/types/size.js';
+
+  export const storyButtonArgTypes: StoryBookArgTypes = {
+    type: {
+      control: { type: 'select' },
+      options: buttonTypeArray,
+    },
+    color: {
+      control: { type: 'select' },
+      options: componentColorArray,
+    },
+    variant: {
+      control: { type: 'select' },
+      options: componentWeightArray,
+    },
+    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: Button,
+    tags: ['autodocs'],
+    argTypes: storyButtonArgTypes,
+  });
+</script>
+
+<!-- Button with default style -->
+<Story name="Primary">Click me!</Story>
+
+<!-- Button with border around it -->
+<Story name="Outline" args={{ outline: true, variant: 'text' }}>Click me!</Story>
+
+<Story name="Disabled" args={{ disabled: true }}>Click me!</Story>
+
+<!-- Form submit button -->
+<Story name="Sumbit Button" args={{ type: 'submit' }}>Submit Form</Story>
+
+<!-- Form submit button -->
+<Story name="Full width Button" args={{ fullWidth: true }}>Click me!</Story>
+
+<!-- Anchor Link styled like a Button -->
+<Story
+  name="Link Button"
+  args={{ href: 'https://www.w3schools.com/tags/tag_a.asp', target: '_blank' }}
+>
+  Link
+</Story>

package/src/lib/stories/components/Form/Button/Color/Color.stories.svelte

@@ -0,0 +1,43 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button from '../Button.svelte';
+  import { storyButtonArgTypes } from '../Button.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: storyButtonArgTypes,
+  });
+</script>
+
+<Story name="Primary">Click me!</Story>
+<Story name="Secondary" args={{ color: 'secondary' }}>Click me!</Story>
+<Story name="Neutral" args={{ color: 'neutral' }}>Click me!</Story>
+<Story name="Safe" args={{ color: 'safe' }}>Click me!</Story>
+<Story name="Warning" args={{ color: 'warning' }}>Click me!</Story>
+<Story name="Danger" args={{ color: 'danger' }}>Click me!</Story>
+
+<Story name="Primary Text" args={{ color: 'primary', variant: 'text' }}>Click me!</Story>
+<Story name="Secondary Text" args={{ color: 'secondary', variant: 'text' }}>Click me!</Story>
+<Story name="Neutral Text" args={{ color: 'neutral', variant: 'text' }}>Click me!</Story>
+<Story name="Safe Text" args={{ color: 'safe', variant: 'text' }}>Click me!</Story>
+<Story name="Warning Text" args={{ color: 'warning', variant: 'text' }}>Click me!</Story>
+<Story name="Danger Text" args={{ color: 'danger', variant: 'text' }}>Click me!</Story>
+
+<Story name="Primary Outline" args={{ variant: 'text', outline: true }}>Click me!</Story>
+<Story name="Secondary Outline" args={{ color: 'secondary', variant: 'text', outline: true }}>
+  Click me!
+</Story>
+<Story name="Neutral Outline" args={{ color: 'neutral', variant: 'text', outline: true }}>
+  Click me!
+</Story>
+<Story name="Safe Outline" args={{ color: 'safe', variant: 'text', outline: true }}>
+  Click me!
+</Story>
+<Story name="Warning Outline" args={{ color: 'warning', variant: 'text', outline: true }}>
+  Click me!
+</Story>
+<Story name="Danger Outline" args={{ color: 'danger', variant: 'text', outline: true }}>
+  Click me!
+</Story>