@fibery/ui-kit 1.40.4 → 1.42.0

package/src/create-inline-theme.ts

@@ -1,67 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-export const varPrefix = process.env.VAR_THEME_PREFIX || "fibery";
-
-export type ThemeStyles = Record<string, string>;
-
-export function createInlineTheme<T extends Record<string, unknown>>(
-  themes: T,
-  rejectKeys: Array<string>
-): ThemeStyles {
-  return Object.entries(themes).reduce<Record<string, string>>((inlineTheme, [key, value]) => {
-    if (key === "key") {
-      return inlineTheme;
-    }
-    if (key === "fns") {
-      return inlineTheme;
-    }
-    if (rejectKeys.includes(key)) {
-      return inlineTheme;
-    }
-
-    if (key === "opacity") {
-      Object.entries(themes.opacity as Record<string, string>).forEach(([opacityKey, opacityValue]) => {
-        inlineTheme[`--${varPrefix}-opacity-${opacityKey}`] = opacityValue;
-      }, "");
-
-      return inlineTheme;
-    }
-    if (key === "brandColors") {
-      Object.entries(themes.brandColors as Record<string, string>).forEach(([brandColorKey, brandColorValue]) => {
-        inlineTheme[`--${varPrefix}-brand-colors-${brandColorKey}`] = brandColorValue;
-      }, "");
-
-      return inlineTheme;
-    }
-    if (key === "shades") {
-      Object.entries(themes.shades as Record<string, string>).forEach(([shadeKey, shadeValue]) => {
-        inlineTheme[`--${varPrefix}-shades-${shadeKey}`] = shadeValue;
-      }, "");
-
-      return inlineTheme;
-    }
-    if (key === "lights") {
-      Object.entries(themes.lights as Record<string, string>).forEach(([lightKey, lightValue]) => {
-        inlineTheme[`--${varPrefix}-lights-${lightKey}`] = lightValue;
-      }, "");
-
-      return inlineTheme;
-    }
-    if (key === "separators") {
-      Object.entries(themes.separators as Record<string, string>).forEach(([separatorKey, separatorValue]) => {
-        inlineTheme[`--${varPrefix}-separator-${separatorKey}`] = separatorValue;
-      }, "");
-
-      return inlineTheme;
-    }
-    if (key === "inversedSeparators") {
-      Object.entries(themes.inversedSeparators as Record<string, string>).forEach(([separatorKey, separatorValue]) => {
-        inlineTheme[`--${varPrefix}-inversed-separators-${separatorKey}`] = separatorValue;
-      }, "");
-
-      return inlineTheme;
-    }
-    inlineTheme[`--${varPrefix}-color-${key}`] = value as string;
-    return inlineTheme;
-  }, {});
-}

package/src/number-input/index.js

@@ -1,191 +0,0 @@
-import _ from "lodash";
-import {bool, func, number, object, oneOf, oneOfType, string} from "prop-types";
-import {useCallback, useMemo, useState, useEffect} from "react";
-import {AntInputNumber} from "../antd/input-number";
-import {Tooltip} from "../tooltip";
-import {add, divideByHundred, multiplyByHundred, sub} from "./decimal";
-
-const isEmpty = (value) => _.isNil(value) || value === "";
-
-export const getStep = (numberFormat) => {
-  if (numberFormat === "Percent") {
-    return 0.01;
-  }
-  return 1;
-};
-
-export const formatValue = (value, isEditing, numberFormat, format) => {
-  const externalizeNumber = (numberFormat, value) => {
-    if (numberFormat === "Percent") {
-      return multiplyByHundred(value);
-    }
-    return value;
-  };
-
-  const externalizeValue = (value) => {
-    return isEditing ? externalizeNumber(numberFormat, value) : value;
-  };
-
-  const maybeFormat = (value) => {
-    return isEditing ? value : format(value);
-  };
-
-  if (isEmpty(value)) {
-    return value;
-  }
-  return _.flow([externalizeValue, maybeFormat])(value);
-};
-
-export const parseValue = (value, numberFormat, numberPrecision) => {
-  const parse = (value) => {
-    const parseInteger = (x) => {
-      const parsed = parseInt(x);
-      return isNaN(parsed) ? null : parsed;
-    };
-    const parseDecimal = (x) => {
-      const parsed = parseFloat(x);
-      return isNaN(parsed) ? null : parsed;
-    };
-
-    const parseStrategy = numberPrecision === 0 ? parseInteger : parseDecimal;
-    return parseStrategy(value);
-  };
-
-  const internalizeNumber = (value) => {
-    if (isEmpty(value)) {
-      return value;
-    }
-    if (numberFormat === "Percent") {
-      return divideByHundred(value);
-    }
-    return value;
-  };
-
-  const toString = (value) => {
-    return isEmpty(value) ? value : String(value);
-  };
-
-  if (isEmpty(value)) {
-    return null;
-  }
-  return _.flow([parse, internalizeNumber, toString])(value);
-};
-
-const propTypes = {
-  value: oneOfType([string, number]),
-  numberFormat: oneOf(["Number", "Money", "Percent"]),
-  numberPrecision: number,
-  decimalSeparator: string,
-  format: func,
-  onFocus: func,
-  onBlur: func,
-  onChange: func,
-  onKeyDown: func,
-  autoFocus: bool,
-  placeholder: string,
-  style: object,
-  disabled: bool,
-  showTooltip: bool,
-  controls: bool,
-};
-
-const defaultProps = {
-  format: _.identity,
-};
-
-export const InputNumber = (props) => {
-  const {value, numberFormat, numberPrecision, format, onFocus, onBlur, onChange, showTooltip = true, ...rest} = props;
-
-  const [isEditing, setIsEditing] = useState(false);
-  const [tooltipVisible, setTooltipVisible] = useState(false);
-  const handleFocus = useCallback(
-    (e) => {
-      if (onFocus) {
-        onFocus(e);
-      }
-      setIsEditing(true);
-    },
-    [onFocus, setIsEditing]
-  );
-
-  const handleBlur = useCallback(
-    (e) => {
-      if (onBlur) {
-        onBlur(e);
-      }
-      setIsEditing(false);
-    },
-    [onBlur, setIsEditing]
-  );
-
-  const handleChange = useCallback(
-    (value) => {
-      if (onChange) {
-        onChange(parseValue(value, numberFormat, numberPrecision));
-      }
-    },
-    [onChange, numberFormat, numberPrecision]
-  );
-
-  const handleStep = useCallback(
-    (newValue, {type}) => {
-      const step = getStep(numberFormat);
-
-      if (type === "up") {
-        onChange(add(value, step));
-      } else {
-        onChange(sub(value, step));
-      }
-    },
-    [value, numberFormat, onChange]
-  );
-
-  let formattedValue = useMemo(() => {
-    return formatValue(value, isEditing, numberFormat, format);
-  }, [value, isEditing, numberFormat, format]);
-
-  const onTooltipVisibleChange = useCallback(
-    (visible) => {
-      if (!showTooltip || isEditing || !formattedValue) {
-        return setTooltipVisible(false);
-      }
-      return setTooltipVisible(visible);
-    },
-    [isEditing, showTooltip, formattedValue]
-  );
-  useEffect(() => {
-    if (tooltipVisible && (!showTooltip || isEditing || !formattedValue)) {
-      setTooltipVisible(false);
-    }
-  }, [formattedValue, isEditing, showTooltip, tooltipVisible]);
-
-  return (
-    <Tooltip title={formattedValue} onVisibleChange={onTooltipVisibleChange} visible={tooltipVisible}>
-      <span>
-        <AntInputNumber
-          className={rest.className}
-          value={formattedValue}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          onStep={handleStep}
-          {...rest}
-        />
-      </span>
-    </Tooltip>
-  );
-};
-
-InputNumber.propTypes = propTypes;
-InputNumber.defaultProps = defaultProps;
-
-export const InputNumberField = (props) => {
-  const {input, ...rest} = props;
-  const {value, onBlur, ...inputRest} = input;
-
-  const handleBlur = useCallback(() => {
-    onBlur(isEmpty(value) ? null : value);
-  }, [onBlur, value]);
-
-  return <InputNumber value={value} onBlur={handleBlur} {...inputRest} {...rest} />;
-};

package/src/palette.ts

@@ -1,253 +0,0 @@
-import type {ColorScale} from "./palette-generator";
-import {throwError} from "./errors";
-
-const base = "hsl(0, 0%, 100%)";
-
-const slate = {
-  slateBase: base,
-  slate1: "hsl(206, 0%, 99%)",
-  slate2: "hsl(210, 0%, 97%)",
-  slate3: "hsl(209, 0%, 96%)",
-  slate4: "hsl(209, 0%, 93%)",
-  slate5: "hsl(208, 0%, 91%)",
-  slate6: "hsl(208, 0%, 89%)",
-  slate7: "hsl(207, 0%, 86%)",
-  slate8: "hsl(205, 0%, 78%)",
-  slate9: "hsl(205, 0%, 62%)",
-  slate10: "hsl(205, 0%, 47%)",
-  slate11: "hsl(204, 0%, 37%)",
-  slate12: "hsl(200, 0%, 9%)",
-} as const;
-
-/**
- * @deprecated use themeVars
- */
-export const slateDark = {
-  slateBase: "hsl(0, 0%, 5%)",
-  slate1: "hsl(200, 0%, 9%)",
-  slate2: "hsl(195, 0%, 11%)",
-  slate3: "hsl(197, 0%, 14%)",
-  slate4: "hsl(198, 0%, 16%)",
-  slate5: "hsl(199, 0%, 18%)",
-  slate6: "hsl(201, 0%, 20%)",
-  slate7: "hsl(203, 0%, 24%)",
-  slate8: "hsl(207, 0%, 32%)",
-  slate9: "hsl(206, 0%, 44%)",
-  slate10: "hsl(206, 0%, 50%)",
-  slate11: "hsl(206, 0%, 63%)",
-  slate12: "hsl(210, 0%, 93%)",
-} as const;
-
-/**
- * @deprecated use themeVars
- */
-export const teal = {
-  teal1: "hsl(165, 60%, 99%)",
-  teal2: "hsl(169, 65%, 97%)",
-  teal3: "hsl(169, 60%, 94%)",
-  teal4: "hsl(169, 53%, 90%)",
-  teal5: "hsl(170, 47%, 85%)",
-  teal6: "hsl(170, 43%, 78%)",
-  teal7: "hsl(170, 40%, 68%)",
-  teal8: "hsl(172, 42%, 52%)",
-  teal9: "hsl(173, 80%, 36%)",
-  teal10: "hsl(173, 83%, 33%)",
-  teal11: "hsl(174, 90%, 25%)",
-  teal12: "hsl(170, 50%, 13%)",
-} as const;
-
-/**
- * @deprecated use themeVars
- */
-export const tealDark = {
-  teal1: "hsl(168, 48%, 6%)",
-  teal2: "hsl(169, 78%, 7%)",
-  teal3: "hsl(170, 76%, 9%)",
-  teal4: "hsl(171, 76%, 11%)",
-  teal5: "hsl(171, 76%, 13%)",
-  teal6: "hsl(172, 76%, 15%)",
-  teal7: "hsl(172, 77%, 19%)",
-  teal8: "hsl(173, 80%, 24%)",
-  teal9: "hsl(173, 80%, 36%)",
-  teal10: "hsl(174, 84%, 38%)",
-  teal11: "hsl(174, 90%, 41%)",
-  teal12: "hsl(166, 73%, 93%)",
-} as const;
-
-/**
- * @deprecated use themeVars
- */
-export const indigo = {
-  indigo1: "hsl(220, 60%, 99%)",
-  indigo2: "hsl(220, 90%, 99%)",
-  indigo3: "hsl(220, 88%, 97%)",
-  indigo4: "hsl(220, 83%, 95%)",
-  indigo5: "hsl(220, 77%, 92%)",
-  indigo6: "hsl(220, 72%, 88%)",
-  indigo7: "hsl(220, 67%, 82%)",
-  indigo8: "hsl(220, 65%, 75%)",
-  indigo9: "hsl(220, 62%, 56%)",
-  indigo10: "hsl(220, 59%, 51%)",
-  indigo11: "hsl(220, 55%, 45%)",
-  indigo12: "hsl(220, 62%, 17%)",
-} as const;
-
-/**
- * @deprecated use themeVars
- */
-export const indigoDark = {
-  indigo1: "hsl(222, 24%, 10%)",
-  indigo2: "hsl(222, 36%, 13%)",
-  indigo3: "hsl(222, 43%, 18%)",
-  indigo4: "hsl(222, 47%, 21%)",
-  indigo5: "hsl(222, 45%, 24%)",
-  indigo6: "hsl(222, 43%, 28%)",
-  indigo7: "hsl(222, 50%, 35%)",
-  indigo8: "hsl(222, 55%, 44%)",
-  indigo9: "hsl(222, 60%, 56%)",
-  indigo10: "hsl(222, 65%, 62%)",
-  indigo11: "hsl(222, 70%, 76%)",
-  indigo12: "hsl(222, 83%, 96%)",
-} as const;
-
-/**
- * @deprecated use themeVars
- */
-export const red = {
-  red1: "hsl(359, 100%, 99%)",
-  red2: "hsl(359, 100%, 99%)",
-  red3: "hsl(360, 100%, 97%)",
-  red4: "hsl(360, 98%, 95%)",
-  red5: "hsl(360, 90%, 92%)",
-  red6: "hsl(360, 82%, 88%)",
-  red7: "hsl(359, 74%, 82%)",
-  red8: "hsl(359, 69%, 74%)",
-  red9: "hsl(358, 75%, 59%)",
-  red10: "hsl(358, 69%, 55%)",
-  red11: "hsl(358, 65%, 49%)",
-  red12: "hsl(354, 50%, 15%)",
-} as const;
-
-/**
- * @deprecated use themeVars
- */
-export const redDark = {
-  red1: "hsl(353, 23%, 10%)",
-  red2: "hsl(357, 34%, 12%)",
-  red3: "hsl(356, 43%, 16%)",
-  red4: "hsl(356, 48%, 19%)",
-  red5: "hsl(356, 51%, 22%)",
-  red6: "hsl(356, 55%, 26%)",
-  red7: "hsl(357, 60%, 32%)",
-  red8: "hsl(358, 65%, 40%)",
-  red9: "hsl(358, 75%, 59%)",
-  red10: "hsl(358, 85%, 64%)",
-  red11: "hsl(358, 100%, 70%)",
-  red12: "hsl(351, 89%, 96%)",
-} as const;
-
-export const yellow = {
-  yellow1: "hsl(60, 54%, 98%)",
-  yellow2: "hsl(52, 100%, 95%)",
-  yellow3: "hsl(55, 100%, 91%)",
-  yellow4: "hsl(54, 100%, 87%)",
-  yellow5: "hsl(52, 98%, 82%)",
-  yellow6: "hsl(50, 89%, 76%)",
-  yellow7: "hsl(47, 80%, 68%)",
-  yellow8: "hsl(48, 100%, 46%)",
-  yellow9: "hsl(53, 92%, 50%)",
-  yellow10: "hsl(50, 100%, 48%)",
-  yellow11: "hsl(42, 100%, 29%)",
-  yellow12: "hsl(40, 55%, 13%)",
-} as const;
-
-/**
- * @deprecated use themeVars
- */
-export const yellowDark = {
-  yellow1: "hsl(45, 100%, 5%)",
-  yellow2: "hsl(46, 100%, 7%)",
-  yellow3: "hsl(45, 100%, 9%)",
-  yellow4: "hsl(45, 100%, 10%)",
-  yellow5: "hsl(47, 100%, 12%)",
-  yellow6: "hsl(49, 100%, 14%)",
-  yellow7: "hsl(49, 90%, 18%)",
-  yellow8: "hsl(50, 100%, 22%)",
-  yellow9: "hsl(53, 92%, 50%)",
-  yellow10: "hsl(54, 100%, 68%)",
-  yellow11: "hsl(48, 100%, 47%)",
-  yellow12: "hsl(53, 100%, 91%)",
-} as const;
-
-/**
- * @deprecated use themeVars
- */
-export const blackA = {
-  blackA0: "#000000",
-  blackA1: "hsla(0, 0%, 0%, 0.01)",
-  blackA2: "hsla(0, 0%, 0%, 0.03)",
-  blackA3: "hsla(0, 0%, 0%, 0.05)",
-  blackA4: "hsla(0, 0%, 0%, 0.07)",
-  blackA5: "hsla(0, 0%, 0%, 0.09)",
-  blackA6: "hsla(0, 0%, 0%, 0.11)",
-  blackA7: "hsla(0, 0%, 0%, 0.14)",
-  blackA8: "hsla(0, 0%, 0%, 0.22)",
-  blackA9: "hsla(0, 0%, 0%, 0.44)",
-  blackA10: "hsla(0, 0%, 0%, 0.48)",
-  blackA11: "hsla(0, 0%, 0%, 0.57)",
-  blackA12: "hsla(0, 0%, 0%, 0.91)",
-} as const;
-
-/**
- * @deprecated use themeVars
- */
-export const whiteA = {
-  whiteA0: "#FFFFFF",
-  whiteA1: "hsla(0, 0%, 100%, 0)",
-  whiteA2: "hsla(0, 0%, 100%, 0.01)",
-  whiteA3: "hsla(0, 0%, 100%, 0.03)",
-  whiteA4: "hsla(0, 0%, 100%, 0.06)",
-  whiteA5: "hsla(0, 0%, 100%, 0.09)",
-  whiteA6: "hsla(0, 0%, 100%, 0.12)",
-  whiteA7: "hsla(0, 0%, 100%, 0.18)",
-  whiteA8: "hsla(0, 0%, 100%, 0.25)",
-  whiteA9: "hsla(0, 0%, 100%, 0.39)",
-  whiteA10: "hsla(0, 0%, 100%, 0.45)",
-  whiteA11: "hsla(0, 0%, 100%, 0.59)",
-  whiteA12: "hsla(0, 0%, 100%, 0.92)",
-} as const;
-
-/**
- * Converts a Radix color object ({prefix1, prefix2, ...}) to a ColorScale array.
- * Index 0 uses prefixBase if available, otherwise prefixStep1.
- */
-export function toColorScale<K extends string>(radixScale: Record<string, string>, prefix: K): ColorScale {
-  return [
-    radixScale[`${prefix}0`] ?? radixScale[`${prefix}Base`] ?? base,
-    radixScale[`${prefix}1`],
-    radixScale[`${prefix}2`],
-    radixScale[`${prefix}3`],
-    radixScale[`${prefix}4`],
-    radixScale[`${prefix}5`],
-    radixScale[`${prefix}6`],
-    radixScale[`${prefix}7`],
-    radixScale[`${prefix}8`],
-    radixScale[`${prefix}9`],
-    radixScale[`${prefix}10`],
-    radixScale[`${prefix}11`],
-    radixScale[`${prefix}12`],
-  ].map((x, i) => x ?? throwError(prefix + i)) as unknown as ColorScale;
-}
-
-export const whiteAScale = toColorScale(whiteA, "whiteA");
-export const blackAScale = toColorScale(blackA, "blackA");
-export const slateScale = toColorScale(slate, "slate");
-export const slateDarkScale = toColorScale(slateDark, "slate");
-export const indigoScale = toColorScale(indigo, "indigo");
-export const indigoDarkScale = toColorScale(indigoDark, "indigo");
-export const redScale = toColorScale(red, "red");
-export const redDarkScale = toColorScale(redDark, "red");
-export const tealScale = toColorScale(teal, "teal");
-export const tealDarkScale = toColorScale(tealDark, "teal");
-export const yellowScale = toColorScale(yellow, "yellow");
-export const yellowDarkScale = toColorScale(yellowDark, "yellow");