@janbox/storefront-ui 1.0.13 → 1.0.14

package/dist/utils/index.js

@@ -1,198 +1,171 @@
-import { Children, isValidElement, Fragment } from "react";
-import { isUndefined, mergeWith, omit, get } from "lodash-es";
-import { getSmallerScreens, screens } from "../theme/screens.js";
-import { getColorVar } from "../theme/palette.js";
-import { ensureArray, ensureBoolean, formatNumber, getDecimalDigits, getEnumValues, matchSearch, normalizeSearchText, omitEmpty, parseNumber, parseSvgString } from "./common.js";
-import { cn } from "./stylesheet.js";
-import { ArrayParamParser, BooleanParamParser, DateParamParser, EnumParamParser, NumberParamParser, StringParamParser, simplifyQueryParams } from "./query-params.js";
-const getColorShadesByVariant = (variant) => {
-  switch (variant) {
-    case "primary":
-      return {
-        main: getColorVar("primary.600"),
-        contrastText: getColorVar("white"),
-        dark: getColorVar("primary.700"),
-        light: getColorVar("primary.100"),
-        placeholder: getColorVar("primary.400"),
-        disabledSurface: getColorVar("primary.300"),
-        disabledText: getColorVar("primary.500"),
-        ariaDisabledSurface: getColorVar("primary.300"),
-        ariaDisabledText: getColorVar("primary.300")
-      };
-    case "secondary":
-      return {
-        main: getColorVar("secondary.600"),
-        contrastText: getColorVar("white"),
-        dark: getColorVar("secondary.700"),
-        light: getColorVar("secondary.100"),
-        placeholder: getColorVar("secondary.400"),
-        disabledSurface: getColorVar("secondary.300"),
-        disabledText: getColorVar("secondary.500"),
-        ariaDisabledSurface: getColorVar("secondary.300"),
-        ariaDisabledText: getColorVar("secondary.300")
-      };
-    case "green":
-      return {
-        main: getColorVar("green.600"),
-        contrastText: getColorVar("white"),
-        dark: getColorVar("green.700"),
-        light: getColorVar("green.100"),
-        placeholder: getColorVar("green.400"),
-        disabledSurface: getColorVar("green.300"),
-        disabledText: getColorVar("green.500"),
-        ariaDisabledSurface: getColorVar("green.300"),
-        ariaDisabledText: getColorVar("green.300")
-      };
-    case "orange":
-      return {
-        main: getColorVar("orange.600"),
-        contrastText: getColorVar("white"),
-        dark: getColorVar("orange.700"),
-        light: getColorVar("orange.100"),
-        placeholder: getColorVar("orange.400"),
-        disabledSurface: getColorVar("orange.300"),
-        disabledText: getColorVar("orange.500"),
-        ariaDisabledSurface: getColorVar("orange.300"),
-        ariaDisabledText: getColorVar("orange.300")
-      };
-    case "red":
-      return {
-        main: getColorVar("red.600"),
-        contrastText: getColorVar("white"),
-        dark: getColorVar("red.700"),
-        light: getColorVar("red.100"),
-        placeholder: getColorVar("red.400"),
-        disabledSurface: getColorVar("red.300"),
-        disabledText: getColorVar("red.500"),
-        ariaDisabledSurface: getColorVar("red.300"),
-        ariaDisabledText: getColorVar("red.300")
-      };
-    case "blue":
-      return {
-        main: getColorVar("blue.600"),
-        contrastText: getColorVar("white"),
-        dark: getColorVar("blue.700"),
-        light: getColorVar("blue.100"),
-        placeholder: getColorVar("blue.400"),
-        disabledSurface: getColorVar("blue.300"),
-        disabledText: getColorVar("blue.500"),
-        ariaDisabledSurface: getColorVar("blue.300"),
-        ariaDisabledText: getColorVar("blue.300")
-      };
-    case "neutral":
-      return {
-        main: getColorVar("neutral.600"),
-        contrastText: getColorVar("white"),
-        dark: getColorVar("neutral.700"),
-        light: getColorVar("neutral.100"),
-        placeholder: getColorVar("neutral.400"),
-        disabledSurface: getColorVar("neutral.300"),
-        disabledText: getColorVar("neutral.500"),
-        ariaDisabledSurface: getColorVar("neutral.300"),
-        ariaDisabledText: getColorVar("neutral.300")
-      };
-    default:
-      return {};
-  }
+import { Children, Fragment, isValidElement } from 'react';
+import { mergeWith, omit, isUndefined, get } from 'lodash-es';
+import { getColorVar, screens, getSmallerScreens } from '../theme';
+export * from './common';
+export * from './stylesheet';
+export * from './query-params';
+export const getColorShadesByVariant = (variant) => {
+    switch (variant) {
+        case 'primary':
+            return {
+                main: getColorVar('primary.600'),
+                contrastText: getColorVar('white'),
+                dark: getColorVar('primary.700'),
+                light: getColorVar('primary.100'),
+                placeholder: getColorVar('primary.400'),
+                disabledSurface: getColorVar('primary.300'),
+                disabledText: getColorVar('primary.500'),
+                ariaDisabledSurface: getColorVar('primary.300'),
+                ariaDisabledText: getColorVar('primary.300'),
+            };
+        case 'secondary':
+            return {
+                main: getColorVar('secondary.600'),
+                contrastText: getColorVar('white'),
+                dark: getColorVar('secondary.700'),
+                light: getColorVar('secondary.100'),
+                placeholder: getColorVar('secondary.400'),
+                disabledSurface: getColorVar('secondary.300'),
+                disabledText: getColorVar('secondary.500'),
+                ariaDisabledSurface: getColorVar('secondary.300'),
+                ariaDisabledText: getColorVar('secondary.300'),
+            };
+        case 'green':
+            return {
+                main: getColorVar('green.600'),
+                contrastText: getColorVar('white'),
+                dark: getColorVar('green.700'),
+                light: getColorVar('green.100'),
+                placeholder: getColorVar('green.400'),
+                disabledSurface: getColorVar('green.300'),
+                disabledText: getColorVar('green.500'),
+                ariaDisabledSurface: getColorVar('green.300'),
+                ariaDisabledText: getColorVar('green.300'),
+            };
+        case 'orange':
+            return {
+                main: getColorVar('orange.600'),
+                contrastText: getColorVar('white'),
+                dark: getColorVar('orange.700'),
+                light: getColorVar('orange.100'),
+                placeholder: getColorVar('orange.400'),
+                disabledSurface: getColorVar('orange.300'),
+                disabledText: getColorVar('orange.500'),
+                ariaDisabledSurface: getColorVar('orange.300'),
+                ariaDisabledText: getColorVar('orange.300'),
+            };
+        case 'red':
+            return {
+                main: getColorVar('red.600'),
+                contrastText: getColorVar('white'),
+                dark: getColorVar('red.700'),
+                light: getColorVar('red.100'),
+                placeholder: getColorVar('red.400'),
+                disabledSurface: getColorVar('red.300'),
+                disabledText: getColorVar('red.500'),
+                ariaDisabledSurface: getColorVar('red.300'),
+                ariaDisabledText: getColorVar('red.300'),
+            };
+        case 'blue':
+            return {
+                main: getColorVar('blue.600'),
+                contrastText: getColorVar('white'),
+                dark: getColorVar('blue.700'),
+                light: getColorVar('blue.100'),
+                placeholder: getColorVar('blue.400'),
+                disabledSurface: getColorVar('blue.300'),
+                disabledText: getColorVar('blue.500'),
+                ariaDisabledSurface: getColorVar('blue.300'),
+                ariaDisabledText: getColorVar('blue.300'),
+            };
+        case 'neutral':
+            return {
+                main: getColorVar('neutral.600'),
+                contrastText: getColorVar('white'),
+                dark: getColorVar('neutral.700'),
+                light: getColorVar('neutral.100'),
+                placeholder: getColorVar('neutral.400'),
+                disabledSurface: getColorVar('neutral.300'),
+                disabledText: getColorVar('neutral.500'),
+                ariaDisabledSurface: getColorVar('neutral.300'),
+                ariaDisabledText: getColorVar('neutral.300'),
+            };
+        default:
+            return {};
+    }
 };
-const mergeComponentProps = (...args) => {
-  const source = {};
-  while (args.length) {
-    const next = args.shift();
-    if (next) {
-      const extended = typeof next === "function" ? next(source) : next;
-      mergeWith(source, extended, (_, srcValue) => {
-        if (isValidElement(srcValue)) {
-          return srcValue;
+export const mergeComponentProps = (...args) => {
+    const source = {};
+    while (args.length) {
+        const next = args.shift();
+        if (next) {
+            const extended = typeof next === 'function' ? next(source) : next;
+            mergeWith(source, extended, (_, srcValue) => {
+                if (isValidElement(srcValue)) {
+                    return srcValue;
+                }
+            });
         }
-      });
     }
-  }
-  return source;
-};
-const omitResponsiveProps = (props) => {
-  return omit(props, screens);
+    return source;
 };
-const flattenChildren = (children) => {
-  return Children.toArray(children).reduce((acc, child) => {
-    if (isValidElement(child)) {
-      if (child.type === Fragment) {
-        return [...acc, ...flattenChildren(child.props.children)];
-      }
-      return [...acc, child];
-    }
-    return acc;
-  }, []);
+export const omitResponsiveProps = (props) => {
+    return omit(props, screens);
 };
-const getSizeVariantState = (size) => {
-  switch (size) {
-    case "xs":
-      return {
-        iconSize: 20,
-        inputSize: 24,
-        inputPaddingX: 8,
-        textVariant: "xs"
-      };
-    case "sm":
-      return {
-        iconSize: 20,
-        inputSize: 32,
-        inputPaddingX: 12,
-        textVariant: "sm"
-      };
-    case "md":
-      return {
-        iconSize: 24,
-        inputSize: 40,
-        inputPaddingX: 12,
-        textVariant: "sm"
-      };
-    case "lg":
-      return {
-        iconSize: 24,
-        inputSize: 48,
-        inputPaddingX: 16,
-        textVariant: "base"
-      };
-    default:
-      return {};
-  }
+export const flattenChildren = (children) => {
+    return Children.toArray(children).reduce((acc, child) => {
+        if (isValidElement(child)) {
+            if (child.type === Fragment) {
+                return [...acc, ...flattenChildren(child.props.children)];
+            }
+            return [...acc, child];
+        }
+        return acc;
+    }, []);
 };
-const getResponsiveProp = (record, field, screen, options) => {
-  const condition = (options == null ? void 0 : options.condition) ?? ((value) => !isUndefined(value));
-  const getByScreen = (bp) => get(record == null ? void 0 : record[bp], field);
-  const currentVal = getByScreen(screen);
-  if (condition(currentVal)) {
-    return currentVal;
-  }
-  const smallerScreen = getSmallerScreens(screen).find((bp) => {
-    return condition(getByScreen(bp));
-  });
-  return getByScreen(smallerScreen ?? screen);
+export const getSizeVariantState = (size) => {
+    switch (size) {
+        case 'xs':
+            return {
+                iconSize: 20,
+                inputSize: 24,
+                inputPaddingX: 8,
+                textVariant: 'xs',
+            };
+        case 'sm':
+            return {
+                iconSize: 20,
+                inputSize: 32,
+                inputPaddingX: 12,
+                textVariant: 'sm',
+            };
+        case 'md':
+            return {
+                iconSize: 24,
+                inputSize: 40,
+                inputPaddingX: 12,
+                textVariant: 'sm',
+            };
+        case 'lg':
+            return {
+                iconSize: 24,
+                inputSize: 48,
+                inputPaddingX: 16,
+                textVariant: 'base',
+            };
+        default:
+            return {};
+    }
 };
-export {
-  ArrayParamParser,
-  BooleanParamParser,
-  DateParamParser,
-  EnumParamParser,
-  NumberParamParser,
-  StringParamParser,
-  cn,
-  ensureArray,
-  ensureBoolean,
-  flattenChildren,
-  formatNumber,
-  getColorShadesByVariant,
-  getDecimalDigits,
-  getEnumValues,
-  getResponsiveProp,
-  getSizeVariantState,
-  matchSearch,
-  mergeComponentProps,
-  normalizeSearchText,
-  omitEmpty,
-  omitResponsiveProps,
-  parseNumber,
-  parseSvgString,
-  simplifyQueryParams
+export const getResponsiveProp = (record, field, screen, options) => {
+    const condition = options?.condition ?? ((value) => !isUndefined(value));
+    const getByScreen = (bp) => get(record?.[bp], field);
+    const currentVal = getByScreen(screen);
+    if (condition(currentVal)) {
+        return currentVal;
+    }
+    const smallerScreen = getSmallerScreens(screen).find((bp) => {
+        return condition(getByScreen(bp));
+    });
+    return getByScreen(smallerScreen ?? screen);
 };

package/dist/utils/query-params.d.ts

@@ -32,4 +32,3 @@ export declare class EnumParamParser<T extends Dict<string | number>> extends Qu
 }
 export declare const simplifyQueryParams: <T extends object>(params: T) => Dict<string>;
 export {};
-//# sourceMappingURL=query-params.d.ts.map

package/dist/utils/query-params.js

@@ -1,130 +1,120 @@
-import { flatten } from "flat";
-import { isNil, trim, isString, isNumber, isDate, isBoolean, isArray, isPlainObject } from "lodash-es";
-import { getEnumValues } from "./common.js";
+import { flatten } from 'flat';
+import { isArray, isBoolean, isDate, isNil, isNumber, isPlainObject, isString, trim } from 'lodash-es';
+import { getEnumValues } from './common';
 class QueryParamParser {
-  constructor(value) {
-    this.value = value;
-  }
-  parse() {
-    return this.parser(this.value);
-  }
-}
-class DateParamParser extends QueryParamParser {
-  parser(value) {
-    if (isNil(value)) {
-      return void 0;
+    constructor(value) {
+        this.value = value;
     }
-    const timestamp = parseInt(value, 10);
-    if (isNaN(timestamp)) {
-      return void 0;
+    parse() {
+        return this.parser(this.value);
     }
-    const date = new Date(timestamp);
-    return isNaN(date.getTime()) ? void 0 : date;
-  }
-}
-class StringParamParser extends QueryParamParser {
-  parser(value) {
-    return value ?? void 0;
-  }
 }
-class NumberParamParser extends QueryParamParser {
-  constructor(value, options) {
-    super(value);
-    this.options = options ?? {};
-  }
-  parser(value) {
-    if (isNil(value)) {
-      return void 0;
-    }
-    const parsedValue = parseFloat(value);
-    if (isNaN(parsedValue)) {
-      return void 0;
+export class DateParamParser extends QueryParamParser {
+    parser(value) {
+        if (isNil(value)) {
+            return undefined;
+        }
+        const timestamp = parseInt(value, 10);
+        if (isNaN(timestamp)) {
+            return undefined;
+        }
+        const date = new Date(timestamp);
+        return isNaN(date.getTime()) ? undefined : date;
     }
-    const fractionDigits = this.options.fractionDigits ?? 0;
-    if (fractionDigits === false) {
-      return parsedValue;
-    }
-    if (fractionDigits === 0) {
-      return Math.trunc(parsedValue);
-    }
-    return parseFloat(parsedValue.toFixed(fractionDigits));
-  }
 }
-class ArrayParamParser extends QueryParamParser {
-  parser(value) {
-    if (isNil(value)) {
-      return void 0;
+export class StringParamParser extends QueryParamParser {
+    parser(value) {
+        return value ?? undefined;
     }
-    const parsedValue = value.split(",").map(trim).filter(Boolean);
-    return parsedValue.length ? parsedValue : void 0;
-  }
 }
-class BooleanParamParser extends QueryParamParser {
-  parser(value) {
-    if (isNil(value)) {
-      return void 0;
+export class NumberParamParser extends QueryParamParser {
+    constructor(value, options) {
+        super(value);
+        this.options = options ?? {};
     }
-    return value === "true";
-  }
-}
-class EnumParamParser extends QueryParamParser {
-  constructor(value, enumValue) {
-    super(value);
-    this.enumValue = enumValue ?? {};
-  }
-  parser(value) {
-    const arrayValue = new ArrayParamParser(value).parse();
-    if (!(arrayValue == null ? void 0 : arrayValue.length)) {
-      return void 0;
+    parser(value) {
+        if (isNil(value)) {
+            return undefined;
+        }
+        const parsedValue = parseFloat(value);
+        if (isNaN(parsedValue)) {
+            return undefined;
+        }
+        const fractionDigits = this.options.fractionDigits ?? 0;
+        if (fractionDigits === false) {
+            return parsedValue;
+        }
+        if (fractionDigits === 0) {
+            return Math.trunc(parsedValue);
+        }
+        return parseFloat(parsedValue.toFixed(fractionDigits));
     }
-    const enumValues = getEnumValues(this.enumValue);
-    return enumValues.filter((enumValue) => arrayValue.includes(enumValue.toString()));
-  }
 }
-const simplifyQueryParams = (params) => {
-  let result = {};
-  Object.entries(params).forEach(([key, val]) => {
-    if (isNil(val)) return;
-    if (isString(val)) {
-      result[key] = val;
-      return;
+export class ArrayParamParser extends QueryParamParser {
+    parser(value) {
+        if (isNil(value)) {
+            return undefined;
+        }
+        const parsedValue = value.split(',').map(trim).filter(Boolean);
+        return parsedValue.length ? parsedValue : undefined;
     }
-    if (isNumber(val)) {
-      result[key] = val.toString();
-      return;
-    }
-    if (isDate(val)) {
-      result[key] = val.getTime().toString();
-      return;
-    }
-    if (isBoolean(val)) {
-      result[key] = val.toString();
-      return;
+}
+export class BooleanParamParser extends QueryParamParser {
+    parser(value) {
+        if (isNil(value)) {
+            return undefined;
+        }
+        return value === 'true';
     }
-    if (isArray(val)) {
-      result[key] = val.join(",");
-      return;
+}
+export class EnumParamParser extends QueryParamParser {
+    constructor(value, enumValue) {
+        super(value);
+        this.enumValue = enumValue ?? {};
     }
-    if (isPlainObject(val)) {
-      result = {
-        ...result,
-        ...simplifyQueryParams(
-          flatten({
-            [key]: val
-          })
-        )
-      };
-      return;
+    parser(value) {
+        const arrayValue = new ArrayParamParser(value).parse();
+        if (!arrayValue?.length) {
+            return undefined;
+        }
+        const enumValues = getEnumValues(this.enumValue);
+        return enumValues.filter((enumValue) => arrayValue.includes(enumValue.toString()));
     }
-  });
-  return result;
-};
-export {
-  ArrayParamParser,
-  BooleanParamParser,
-  DateParamParser,
-  EnumParamParser,
-  NumberParamParser,
-  StringParamParser,
-  simplifyQueryParams
+}
+export const simplifyQueryParams = (params) => {
+    let result = {};
+    Object.entries(params).forEach(([key, val]) => {
+        if (isNil(val))
+            return;
+        if (isString(val)) {
+            result[key] = val;
+            return;
+        }
+        if (isNumber(val)) {
+            result[key] = val.toString();
+            return;
+        }
+        if (isDate(val)) {
+            result[key] = val.getTime().toString();
+            return;
+        }
+        if (isBoolean(val)) {
+            result[key] = val.toString();
+            return;
+        }
+        if (isArray(val)) {
+            result[key] = val.join(',');
+            return;
+        }
+        if (isPlainObject(val)) {
+            result = {
+                ...result,
+                ...simplifyQueryParams(flatten({
+                    [key]: val,
+                })),
+            };
+            return;
+        }
+    });
+    return result;
 };

package/dist/utils/stylesheet.d.ts

@@ -1,3 +1,2 @@
 import { ClassValue } from 'clsx';
 export declare const cn: (...classes: ClassValue[]) => string;
-//# sourceMappingURL=stylesheet.d.ts.map

package/dist/utils/stylesheet.js

@@ -1,5 +1,2 @@
-import { clsx } from "clsx";
-const cn = (...classes) => clsx(...classes);
-export {
-  cn
-};
+import { clsx } from 'clsx';
+export const cn = (...classes) => clsx(...classes);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-ui",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [
@@ -43,8 +43,7 @@
       "types": "./dist/components/index.d.ts",
       "default": "./dist/components/index.js"
     },
-    "./locales/*": "./dist/locales/*",
-    "./style.css": "./dist/style.css"
+    "./locales/*": "./dist/locales/*"
   },
   "files": [
     "dist"
@@ -103,6 +102,8 @@
     "prettier": "^3.8.1",
     "sass-embedded": "^1.97.3",
     "storybook": "^10.2.14",
+    "tsc-alias": "^1.8.16",
+    "tsx": "^4.21.0",
     "type-fest": "^5.2.0",
     "typescript": "5.5.4",
     "typescript-eslint": "^8.57.2",
@@ -112,8 +113,8 @@
     "vite-tsconfig-paths": "^6.1.1"
   },
   "scripts": {
-    "build": "vite build",
-    "dev": "vite build --watch",
+    "build": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json && tsx scripts/copy-assets.ts",
+    "dev": "tsc -p tsconfig.build.json --watch",
     "type-check": "tsc --noEmit",
     "lint": "eslint src/",
     "storybook": "storybook dev -p 6006",