@fibery/ui-kit 2.0.1 → 2.1.1

package/src/number-input/edit-unit-styles.ts

@@ -2,14 +2,14 @@ import {css} from "@linaria/core";
 import {themeVars} from "../design-system";
 
 export const invalidInputStyle = {
-  boxShadow: `0 0 0 1px ${themeVars.warning} inset`,
+  boxShadow: `${themeVars.inputBorderWarningColor} inset`,
 
   "&:hover": {
-    boxShadow: `0 0 0 1px ${themeVars.warning} inset`,
+    boxShadow: `${themeVars.inputBorderWarningColor} inset`,
   },
 
   "&:focus": {
-    boxShadow: `0 0 0 1px ${themeVars.warning} inset`,
+    boxShadow: `${themeVars.inputBorderWarningColor} inset`,
   },
 };
 

package/src/number-input/utils.ts

@@ -53,8 +53,8 @@ export const parseValue = (value: Value, numberFormat: NumberFormat, numberPreci
     return numberFormat === "Percent" ? divideByHundred(value) : value;
   };
 
-  const toString = (value: number | null) => {
-    return value === null ? value : String(value);
+  const toString = (value: string | number | null | undefined) => {
+    return value === null || value === undefined ? null : String(value);
   };
 
   return toString(internalizeNumber(parse(value)));

package/src/online-users.tsx

@@ -2,14 +2,15 @@ import {css, cx} from "@linaria/core";
 import take from "lodash/take";
 import {useEffect, useRef, useState} from "react";
 import {AvatarImage} from "./avatar";
-import {getObjectColorMemoized, space, themeVars, tooltipDelay} from "./design-system";
+import {border, getObjectColorMemoized, space, themeVars, tooltipDelay} from "./design-system";
+import {useTheme} from "./theme-provider";
 import {Popover} from "./popover";
 import {Tooltip} from "./tooltip";
 
 const offset = [0, space.s6] as [number, number];
 
 export const avatarClassName = css`
-  border-radius: 100%;
+  border-radius: ${border.radiusFull};
   background-color: ${themeVars.actionMenuBg};
   position: relative;
   border-color: transparent;
@@ -53,9 +54,9 @@ const moreParticipantsClassName = css`
   height: 24px;
   color: ${themeVars.textColor};
   background-color: ${themeVars.badgeBgColor};
-  border: 1px solid ${themeVars.commentBubbleBg};
+  border: ${themeVars.borderSolidCommentBubble};
   margin-left: -${space.s6}px;
-  border-radius: 50%;
+  border-radius: ${border.radiusFull};
   position: relative;
 `;
 
@@ -74,6 +75,7 @@ export function OnlineUsers({
     callBack?: () => void | null;
   }>;
 }) {
+  const theme = useTheme();
   const [triggerElement, setTriggerElement] = useState<HTMLButtonElement | null>(null);
   const [hover, setHover] = useState(false);
   const timeoutId = useRef<number>();
@@ -152,7 +154,7 @@ export function OnlineUsers({
           ({avatarUrl, hasAccess, name, callBack, isFollowed}, index) => {
             const tooltipDescription = callBack ? "Click to follow" : "";
             const tooltipTitle = hasAccess ? name : "Private User";
-            const userBorderColor = getObjectColorMemoized(name);
+            const userBorderColor = theme.fns.deneutralize(getObjectColorMemoized(name));
             return (
               <div key={index} className={cx(userClassName, userClassNameHover)}>
                 <Tooltip
@@ -164,9 +166,7 @@ export function OnlineUsers({
                   <div
                     className={avatarClassName}
                     style={{
-                      border: isFollowed
-                        ? `1px solid ${themeVars.commentBubbleBg}`
-                        : `1px solid ${themeVars.commentBubbleBg}`,
+                      border: themeVars.borderSolidCommentBubble,
                       outline: isFollowed ? `2px solid ${userBorderColor}` : `0px solid ${themeVars.commentBubbleBg}`,
                     }}
                     onClick={() => {

package/src/open-popover-tracker.tsx

@@ -0,0 +1,73 @@
+import {createContext} from "@fibery/react/src/create-context";
+import {ReactNode, useCallback, useEffect, useId, useMemo, useState} from "react";
+
+type ContextValue = {
+  openPopovers: Set<string>;
+  setOpenPopovers: (value: Set<string> | ((prev: Set<string>) => Set<string>)) => void;
+};
+
+const [Provider, useContext] = createContext<ContextValue>("OpenPopoverTrackerContext", {
+  openPopovers: new Set(),
+  setOpenPopovers: () => {},
+});
+
+export const OpenPopoverTrackerProvider = ({children}: {children: ReactNode}) => {
+  const [openPopovers, setOpenPopovers] = useState<Set<string>>(new Set());
+
+  const value = useMemo(() => {
+    return {
+      openPopovers,
+      setOpenPopovers,
+    };
+  }, [openPopovers, setOpenPopovers]);
+
+  return <Provider value={value}>{children}</Provider>;
+};
+
+export const useOpenPopoverTracker = () => {
+  const {openPopovers, setOpenPopovers} = useContext();
+
+  const popoverId = useId();
+
+  const cleanup = useCallback(() => {
+    setOpenPopovers((prev) => {
+      if (!prev.has(popoverId)) {
+        return prev;
+      }
+      const next = new Set<string>(prev);
+      next.delete(popoverId);
+      return next;
+    });
+  }, [popoverId, setOpenPopovers]);
+
+  useEffect(() => {
+    return () => {
+      cleanup();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      setOpenPopovers((prev) => {
+        if (open) {
+          const next = new Set<string>(prev);
+          next.add(popoverId);
+          return next;
+        } else if (prev.has(popoverId)) {
+          const next = new Set<string>(prev);
+          next.delete(popoverId);
+          return next;
+        } else {
+          return prev;
+        }
+      });
+    },
+    [popoverId, setOpenPopovers]
+  );
+
+  return {
+    hasOpenPopover: openPopovers.size > 0,
+    onOpenChange,
+  };
+};

package/src/palette-generator.test.ts

@@ -1,17 +1,18 @@
-import {getAlpha, OKLCH, parse, to} from "./color-utils";
-import {type ColorScale, makeDefaultPalette, makeThematicPalette} from "./palette-generator";
+import {getAlpha, oklchFrom} from "./color-utils";
+import {makeThematicPalette, selectPalette} from "./palette-generator";
 import {zeroBasedFromOneBased} from "./scale-generator";
+import type {ColorScale} from "./design-system/types";
 
 function roundToThreeDigits(number: number) {
   return Math.round(number * 1000) / 1000;
 }
 
 function getOklch(color: string): {l: number; c: number; h: number} {
-  const oklch = to(parse(color), OKLCH);
+  const oklch = oklchFrom(color)!;
   return {
-    l: roundToThreeDigits(100 * (oklch.coords[0] ?? 0)),
-    c: oklch.coords[1] ?? 0,
-    h: oklch.coords[2] ?? 0,
+    l: roundToThreeDigits(100 * (oklch.l ?? 0)),
+    c: oklch.c ?? 0,
+    h: oklch.h ?? 0,
   };
 }
 
@@ -26,177 +27,175 @@ function extractChromaNormalized(scale: ColorScale): number[] {
 }
 
 describe("palette-generator", () => {
+  const palette = selectPalette();
   describe("extract curves from default palette", () => {
     it("extracts YELLOW curves", () => {
-      const palette = makeDefaultPalette();
       expect(extractLightness(palette.yellow)).toMatchInlineSnapshot(`
         [
-          99.15,
-          98.666,
-          98.103,
-          97.119,
-          95.34,
-          92.061,
-          86.841,
-          81.273,
-          88.224,
-          85.516,
-          54.771,
-          28.162,
+          99.045,
+          98.732,
+          98.022,
+          96.973,
+          95.329,
+          92.067,
+          86.923,
+          81.33,
+          88.234,
+          85.486,
+          54.685,
+          28.215,
         ]
       `);
       expect(extractChromaNormalized(palette.yellow)).toMatchInlineSnapshot(`
         [
-          0.04,
-          0.16,
-          0.299,
-          0.419,
-          0.539,
-          0.621,
-          0.692,
-          0.911,
+          0.036,
+          0.165,
+          0.311,
+          0.439,
+          0.562,
+          0.647,
+          0.722,
+          0.923,
           1,
-          0.962,
-          0.624,
-          0.231,
+          0.969,
+          0.62,
+          0.241,
         ]
       `);
       expect(extractLightness(palette.yellowDark)).toMatchInlineSnapshot(`
         [
-          18.975,
-          22.715,
-          25.994,
-          27.672,
-          31.467,
-          35.323,
-          40.577,
+          19.025,
+          22.663,
+          25.911,
+          27.619,
+          31.603,
+          35.465,
+          40.659,
           48.421,
-          88.224,
-          93.814,
-          82.593,
-          97.801,
+          88.234,
+          93.164,
+          82.621,
+          97.627,
         ]
       `);
       expect(extractChromaNormalized(palette.yellowDark)).toMatchInlineSnapshot(`
         [
-          0.213,
-          0.255,
-          0.291,
-          0.31,
-          0.353,
-          0.398,
-          0.444,
-          0.546,
+          0.216,
+          0.256,
+          0.294,
+          0.313,
+          0.358,
+          0.402,
+          0.462,
+          0.548,
           1,
-          0.898,
-          0.926,
-          0.289,
+          0.932,
+          0.937,
+          0.298,
         ]
       `);
       // Extract hue from step 9 (primary yellow)
-      expect(getOklch(palette.yellow[9]).h).toMatchInlineSnapshot(`99.99954352835232`);
+      expect(getOklch(palette.yellow[9]).h).toMatchInlineSnapshot(`99.46939874406455`);
     });
 
     it("extracts SLATE curves", () => {
-      const palette = makeDefaultPalette();
       expect(extractLightness(palette.base)).toMatchInlineSnapshot(`
         [
-          99.241,
-          97.719,
-          96.955,
-          94.656,
-          93.115,
-          91.568,
-          89.235,
-          82.937,
-          69.959,
-          57.217,
-          48.318,
-          20.441,
+          99.107,
+          97.614,
+          97.015,
+          94.611,
+          93.1,
+          91.583,
+          89.143,
+          82.968,
+          69.926,
+          57.268,
+          48.193,
+          20.463,
         ]
       `);
       expect(extractLightness(palette.baseDark)).toMatchInlineSnapshot(`
         [
-          20.441,
-          22.667,
-          25.908,
-          28.012,
-          30.078,
+          20.463,
+          22.645,
+          26.032,
+          28.094,
+          30.118,
           32.109,
-          36.079,
-          43.714,
-          54.586,
-          59.818,
-          70.787,
-          94.656,
+          36.002,
+          43.86,
+          54.517,
+          59.649,
+          70.9,
+          94.611,
         ]
       `);
     });
 
     it("extracts INDIGO curves", () => {
-      const palette = makeDefaultPalette();
       expect(extractLightness(palette.accent)).toMatchInlineSnapshot(`
         [
-          99.069,
-          98.983,
-          96.966,
-          95.012,
-          92.145,
-          88.367,
-          82.757,
-          76.14,
-          58.48,
-          54.173,
-          49.642,
-          26.071,
+          99.087,
+          99.04,
+          96.971,
+          95.096,
+          92.071,
+          88.315,
+          82.769,
+          76.075,
+          58.528,
+          54.075,
+          49.731,
+          25.927,
         ]
       `);
       expect(extractChromaNormalized(palette.accent)).toMatchInlineSnapshot(`
         [
           0.018,
-          0.027,
-          0.08,
-          0.126,
-          0.19,
-          0.27,
-          0.384,
-          0.529,
-          0.934,
+          0.028,
+          0.078,
+          0.125,
+          0.188,
+          0.266,
+          0.382,
+          0.53,
+          0.923,
           1,
-          0.878,
+          0.871,
           0.44,
         ]
       `);
       expect(extractLightness(palette.accentDark)).toMatchInlineSnapshot(`
         [
-          20.512,
-          22.974,
-          27.284,
-          29.742,
-          32.452,
-          35.981,
-          41.256,
-          47.972,
-          57.658,
-          62.928,
-          76.225,
-          95.899,
+          20.482,
+          22.847,
+          27.295,
+          29.616,
+          32.447,
+          35.965,
+          41.195,
+          48.06,
+          57.653,
+          62.937,
+          76.313,
+          95.785,
         ]
       `);
       expect(extractChromaNormalized(palette.accentDark)).toMatchInlineSnapshot(`
         [
-          0.119,
-          0.226,
-          0.357,
-          0.444,
-          0.475,
-          0.517,
-          0.72,
-          0.952,
+          0.126,
+          0.23,
+          0.362,
+          0.453,
+          0.479,
+          0.516,
+          0.725,
+          0.951,
           1,
           0.921,
-          0.601,
-          0.111,
+          0.602,
+          0.112,
         ]
       `);
     });
@@ -204,7 +203,7 @@ describe("palette-generator", () => {
 
   describe("white/black scales", () => {
     it("generated neutral scales match default palette", () => {
-      const defaultPalette = makeDefaultPalette();
+      const defaultPalette = selectPalette();
       const generated = makeThematicPalette({
         baseHue: 0,
         baseChroma: 0,
@@ -214,34 +213,34 @@ describe("palette-generator", () => {
 
       expect(zeroBasedFromOneBased(generated.whiteA)).toMatchInlineSnapshot(`
         [
-          "rgba(255,255,255,0)",
-          "rgba(255,255,255,0.01)",
-          "rgba(255,255,255,0.03)",
-          "rgba(255,255,255,0.06)",
-          "rgba(255,255,255,0.09)",
-          "rgba(255,255,255,0.12)",
-          "rgba(255,255,255,0.18)",
-          "rgba(255,255,255,0.25)",
-          "rgba(255,255,255,0.39)",
-          "rgba(255,255,255,0.45)",
-          "rgba(255,255,255,0.59)",
-          "rgba(255,255,255,0.92)",
+          "rgba(255, 255, 255, 0)",
+          "rgba(255, 255, 255, 0.01)",
+          "rgba(255, 255, 255, 0.03)",
+          "rgba(255, 255, 255, 0.06)",
+          "rgba(255, 255, 255, 0.09)",
+          "rgba(255, 255, 255, 0.12)",
+          "rgba(255, 255, 255, 0.18)",
+          "rgba(255, 255, 255, 0.25)",
+          "rgba(255, 255, 255, 0.39)",
+          "rgba(255, 255, 255, 0.45)",
+          "rgba(255, 255, 255, 0.59)",
+          "rgba(255, 255, 255, 0.92)",
         ]
       `);
       expect(zeroBasedFromOneBased(generated.blackA)).toMatchInlineSnapshot(`
         [
-          "rgba(0,0,0,0.01)",
-          "rgba(0,0,0,0.03)",
-          "rgba(0,0,0,0.05)",
-          "rgba(0,0,0,0.07)",
-          "rgba(0,0,0,0.09)",
-          "rgba(0,0,0,0.11)",
-          "rgba(0,0,0,0.14)",
-          "rgba(0,0,0,0.22)",
-          "rgba(0,0,0,0.44)",
-          "rgba(0,0,0,0.48)",
-          "rgba(0,0,0,0.57)",
-          "rgba(0,0,0,0.91)",
+          "rgba(0, 0, 0, 0.01)",
+          "rgba(0, 0, 0, 0.03)",
+          "rgba(0, 0, 0, 0.05)",
+          "rgba(0, 0, 0, 0.07)",
+          "rgba(0, 0, 0, 0.09)",
+          "rgba(0, 0, 0, 0.11)",
+          "rgba(0, 0, 0, 0.14)",
+          "rgba(0, 0, 0, 0.22)",
+          "rgba(0, 0, 0, 0.44)",
+          "rgba(0, 0, 0, 0.48)",
+          "rgba(0, 0, 0, 0.57)",
+          "rgba(0, 0, 0, 0.91)",
         ]
       `);
 
@@ -280,7 +279,7 @@ describe("palette-generator", () => {
 
   describe("createPalette with default config", () => {
     it("should closely match default palette lightness", () => {
-      const defaultPalette = makeDefaultPalette();
+      const defaultPalette = selectPalette();
       const generatedPalette = makeThematicPalette({
         baseHue: 0,
         baseChroma: 0,