@fibery/ui-kit 2.1.0 → 2.1.1

package/src/theme-provider.tsx

@@ -13,7 +13,7 @@ import {
   useState,
 } from "react";
 import {Styles, stylesFromTheme, Theme, themeFromPalette} from "./design-system";
-import {selectPalette, ThemePalette} from "./palette-generator";
+import {selectPalette} from "./palette-generator";
 import {
   subscribeOnThemeMenuPreferenceChange,
   subscribeOnThemeModeChange,
@@ -24,6 +24,7 @@ import {
   useWarmPreference,
 } from "./theme-settings";
 import {css} from "@linaria/core";
+import type {ThemePalette} from "./design-system/types";
 
 const ThemePreferenceContext = createContext<ThemePreference | null>(null);
 
@@ -182,6 +183,7 @@ export function RootThemeProvider({
 }): JSX.Element {
   const [mode, setMode] = useState<ThemeMode>(initialThemeMode);
   useEffect(() => subscribeOnThemeModeChange(setMode), []);
+  const dark = mode === "dark";
 
   const [warm] = useWarmPreference();
   useEffect(() => chooseGlobalStyles(mode, warm), [mode, warm]);
@@ -199,8 +201,12 @@ export function RootThemeProvider({
     themes: [lightThemeColors, darkThemeColors],
     styles: [lightThemeStyles, darkThemeStyles],
   } = locateThemeBundle(warm);
-  const [cssThemeColors, cssThemeStyles] =
-    mode === "dark" ? [darkThemeColors, darkThemeStyles] : [lightThemeColors, lightThemeStyles];
+  const cssThemeColors = dark ? darkThemeColors : lightThemeColors;
+  let cssThemeStyles = dark ? darkThemeStyles : lightThemeStyles;
+  if (process.env.NODE_ENV === "development") {
+    // In dev build, we use empty styles as a reference to force all vars inline in top themeproviders — avoids stale Linaria/babel cache.
+    cssThemeStyles = {};
+  }
   res = <ThemeStylesContext.Provider value={cssThemeStyles}>{res}</ThemeStylesContext.Provider>;
   res = <RootThemeStylesContext.Provider value={cssThemeStyles}>{res}</RootThemeStylesContext.Provider>;
   res = <ThemeContext.Provider value={cssThemeColors}>{res}</ThemeContext.Provider>;

package/src/theme-styles.ts

@@ -5,7 +5,8 @@ import {neutralUserPalette} from "./palettes/neutral-user";
 import {ThemeMode} from "./theme-settings";
 import {defsFromPalette} from "./design-system/colors";
 import {themeFromDefs} from "./design-system/theme";
-import {ThemePalette} from "./palette-generator";
+
+import type {ThemePalette} from "./design-system/types";
 
 type Pair<T> = readonly [light: T, dark: T];
 

package/src/link-input/index.js

@@ -1,89 +0,0 @@
-import {css} from "@linaria/core";
-import {useCallback} from "react";
-import {AntTextAreaWithCustomReadState} from "./components/AntTextAreaWithCustomReadState";
-import {getURL} from "./utils";
-
-const urlLinkClassname = css`
-  word-break: break-word;
-  margin-right: 20px;
-`;
-
-export const UrlInputLink = ({value, children, ...rest}) => {
-  const normalizedUrl = getURL(value);
-  if (!normalizedUrl) {
-    return null;
-  }
-  return (
-    <a
-      draggable={false}
-      target="_blank"
-      className={urlLinkClassname}
-      rel="noopener noreferrer nofollow"
-      href={normalizedUrl}
-      {...rest}
-    >
-      {children}
-    </a>
-  );
-};
-
-export const UrlInput = (props) => {
-  const handleClick = useCallback((e) => e.stopPropagation(), []);
-
-  return (
-    <AntTextAreaWithCustomReadState
-      {...props}
-      renderReadState={() => (
-        <UrlInputLink value={props.value} onClick={handleClick}>
-          {props.value}
-        </UrlInputLink>
-      )}
-    />
-  );
-};
-
-export const PhoneInputLink = ({value, children, ...rest}) => {
-  return (
-    <a draggable={false} href={`tel:${value}`} {...rest}>
-      {children}
-    </a>
-  );
-};
-
-export const PhoneInput = (props) => {
-  const handleClick = useCallback((e) => e.stopPropagation(), []);
-
-  return (
-    <AntTextAreaWithCustomReadState
-      {...props}
-      renderReadState={() => (
-        <PhoneInputLink value={props.value} onClick={handleClick}>
-          {props.value}
-        </PhoneInputLink>
-      )}
-    />
-  );
-};
-
-export const EmailInputLink = ({value, children, ...rest}) => {
-  return (
-    <a draggable={false} href={`mailto:${value}`} {...rest}>
-      {children}
-    </a>
-  );
-};
-
-export const EmailInput = (props) => {
-  const handleClick = useCallback((e) => e.stopPropagation(), []);
-
-  return (
-    <AntTextAreaWithCustomReadState
-      {...props}
-      renderReadState={() => (
-        <EmailInputLink value={props.value} onClick={handleClick}>
-          {props.value}
-        </EmailInputLink>
-      )}
-    />
-  );
-};

package/src/number-input/decimal.js

@@ -1,61 +0,0 @@
-import flow from "lodash/flow";
-import isNil from "lodash/isNil";
-import trimEnd from "lodash/trimEnd";
-
-const isEmpty = (value) => isNil(value) || value === "";
-
-const getPrecision = (value) => {
-  if (isEmpty(value)) {
-    return 0;
-  }
-  const [, decimalPart = ""] = String(value).split(".");
-  return decimalPart.length;
-};
-
-const removeTrailingZeros = (value) => {
-  if (isEmpty(value)) {
-    return value;
-  }
-  const hasDecimalPart = value.indexOf(".") > 0;
-  return hasDecimalPart ? trimEnd(trimEnd(value, "0"), ".") : value;
-};
-
-export const add = flow([
-  (first, second) => {
-    const result = Number(first) + Number(second);
-    const maxPrecision = Math.max(getPrecision(first), getPrecision(second));
-    return result.toFixed(maxPrecision);
-  },
-  removeTrailingZeros,
-]);
-
-export const sub = flow([
-  (first, second) => {
-    return add(first, -second);
-  },
-  removeTrailingZeros,
-]);
-
-export const multiplyByHundred = flow([
-  (value) => {
-    if (isEmpty(value)) {
-      return value;
-    }
-    const result = value * 100;
-    const precision = Math.max(0, getPrecision(value) - 2);
-    return result.toFixed(precision);
-  },
-  removeTrailingZeros,
-]);
-
-export const divideByHundred = flow([
-  (value) => {
-    if (isEmpty(value)) {
-      return value;
-    }
-    const result = value / 100;
-    const precision = getPrecision(value) + 2;
-    return result.toFixed(precision);
-  },
-  removeTrailingZeros,
-]);