@fibery/ui-kit 2.0.0 → 2.1.0

package/src/type-badge.tsx

@@ -8,7 +8,6 @@ import {
   fontWeight,
   getDarkenColor,
   getTextColor,
-  opacity,
   space,
   textStyles,
   themeVars,
@@ -120,10 +119,10 @@ const clickableStyle = css`
   cursor: pointer;
 `;
 const fadedStyle = css`
-  opacity: ${opacity.opacity25};
+  opacity: ${themeVars.opacity25};
 `;
 const noColorStyle = css`
-  opacity: ${opacity.opacity60};
+  opacity: ${themeVars.opacity60};
 `;
 
 export const makeDescription = (typeObject: {description?: string | null}): string | null => {
@@ -138,10 +137,10 @@ export const makeAbbreviation = (title = "") =>
 
 type TypeBadgeProps = {
   color: string | null;
-  onMouseDown?: () => void;
+  onMouseDown?: React.MouseEventHandler;
   onMouseEnter?: React.MouseEventHandler;
   onMouseLeave?: React.MouseEventHandler;
-  onClick?: () => void;
+  onClick?: React.MouseEventHandler;
   children: ReactNode;
   selected?: boolean;
   abbr?: boolean;
@@ -193,7 +192,7 @@ export const TypeBadge = memo(
 
     const theme = useTheme();
 
-    const baseColor = color || theme.iconColor;
+    const baseColor = theme.fns.deneutralize(color || theme.colors.iconColor);
 
     const textBadgeColor = a11yColor(getTextColor(baseColor), getDarkenColor(baseColor), 12);
 
@@ -205,8 +204,8 @@ export const TypeBadge = memo(
 
     const resultingStyle = {
       ...style,
-      [colorProp]: baseColor ? textBadgeColor : themeVars.inversedTextColor,
-      [colorBackgroundProp]: backgroundBadgeColor || themeVars.shades.opacity25,
+      [colorProp]: color ? textBadgeColor : themeVars.inversedTextColor,
+      [colorBackgroundProp]: backgroundBadgeColor || themeVars.colorPlaceholderSubtle,
       [colorBorderProp]: backgroundBadgeColor,
       [colorDarkProp]: getDarkenColor(baseColor),
     } as CSSProperties;
@@ -254,10 +253,10 @@ const getTypeObjectTitleForm = (typeObject: TypeObjectInfo, form: "singular" | "
 
 type TypeObjectBadgeParams = {
   typeObject: TypeObjectInfo;
-  onMouseDown?: () => void;
+  onMouseDown?: React.MouseEventHandler;
   onMouseEnter?: () => void;
   onMouseLeave?: () => void;
-  onClick?: () => void;
+  onClick?: React.MouseEventHandler;
   abbr?: boolean;
   compact?: boolean;
   vertical?: boolean;

package/src/unit/maybe-unit-value.tsx

@@ -1,7 +1,7 @@
 import {LoadingUnitValue} from "./loading-unit-value";
 
 type Props = {
-  value?: string;
+  value?: React.ReactNode;
 };
 
 export const MaybeUnitValue: React.FC<Props> = ({value}) => {

package/src/unit/types.ts

@@ -9,7 +9,7 @@ export type UnitPrimitiveProps = {
   renderAsDiv?: boolean;
   // Content
   children?: ReactNode;
-  title?: string;
+  title?: ReactNode;
   fieldIcon?: string;
   description?: ReactNode;
   icons?: React.ReactNodeArray;

package/src/workflow-progress-icon.tsx

@@ -53,7 +53,7 @@ export const WorkflowProgressIcon: FC<WorkflowProgressIcon> = ({
 };
 
 const getPath = memoize(
-  (index, total, size) => {
+  (index: number, total: number, size: number) => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore bad d3-shape typings
     return arc()

package/src/actions-menu/actions-menu-open-state-tracker.tsx

@@ -1,66 +0,0 @@
-import {createContext} from "@fibery/react/src/create-context";
-import {ReactNode, useCallback, useEffect, useId, useMemo, useState} from "react";
-
-type ContextValue = {
-  openMenus: Set<string>;
-  setOpenMenus: (value: Set<string>) => void;
-};
-
-const [Provider, useContext] = createContext<ContextValue>("ActionsMenuOpenStateTrackerContext", {
-  openMenus: new Set(),
-  setOpenMenus: () => {},
-});
-
-export const ActionsMenuOpenStateTrackerProvider = ({children}: {children: ReactNode}) => {
-  const [openMenus, setOpenMenus] = useState<Set<string>>(new Set());
-
-  const value = useMemo(() => {
-    return {
-      openMenus,
-      setOpenMenus,
-    };
-  }, [openMenus, setOpenMenus]);
-
-  return <Provider value={value}>{children}</Provider>;
-};
-
-export const useActionsMenuOpenStateTracker = () => {
-  const {openMenus, setOpenMenus} = useContext();
-
-  const menuId = useId();
-
-  const onAddMenu = useCallback(() => {
-    openMenus.add(menuId);
-    setOpenMenus(new Set(openMenus));
-  }, [menuId, openMenus, setOpenMenus]);
-
-  const onRemoveMenu = useCallback(() => {
-    if (openMenus.has(menuId)) {
-      openMenus.delete(menuId);
-      setOpenMenus(new Set(openMenus));
-    }
-  }, [menuId, openMenus, setOpenMenus]);
-
-  useEffect(() => {
-    return () => {
-      onRemoveMenu();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const onMenuOpenChange = useCallback(
-    (open: boolean) => {
-      if (open) {
-        onAddMenu();
-      } else {
-        onRemoveMenu();
-      }
-    },
-    [onAddMenu, onRemoveMenu]
-  );
-
-  return {
-    hasOpenMenu: openMenus.size > 0,
-    onMenuOpenChange,
-  };
-};

package/src/design-system/alpha.test.ts

@@ -1,59 +0,0 @@
-import {getOpacities, transparent} from "./alpha";
-
-describe("getOpacities", () => {
-  test("color maps to alphas", () => {
-    expect(getOpacities("#f00")).toMatchInlineSnapshot(`
-      {
-        "opacity0": "rgba(255,0,0,0)",
-        "opacity10": "rgba(255,0,0,0.1)",
-        "opacity100": "rgb(255,0,0)",
-        "opacity15": "rgba(255,0,0,0.15)",
-        "opacity20": "rgba(255,0,0,0.2)",
-        "opacity25": "rgba(255,0,0,0.25)",
-        "opacity30": "rgba(255,0,0,0.3)",
-        "opacity35": "rgba(255,0,0,0.35)",
-        "opacity40": "rgba(255,0,0,0.4)",
-        "opacity45": "rgba(255,0,0,0.45)",
-        "opacity5": "rgba(255,0,0,0.05)",
-        "opacity50": "rgba(255,0,0,0.5)",
-        "opacity55": "rgba(255,0,0,0.55)",
-        "opacity60": "rgba(255,0,0,0.6)",
-        "opacity65": "rgba(255,0,0,0.65)",
-        "opacity70": "rgba(255,0,0,0.7)",
-        "opacity75": "rgba(255,0,0,0.75)",
-        "opacity80": "rgba(255,0,0,0.8)",
-        "opacity85": "rgba(255,0,0,0.85)",
-        "opacity90": "rgba(255,0,0,0.9)",
-        "opacity95": "rgba(255,0,0,0.95)",
-      }
-    `);
-  });
-
-  test("transparent is identity map", () => {
-    expect(getOpacities(transparent)).toMatchInlineSnapshot(`
-      {
-        "opacity0": "rgba(255, 255, 255, 0)",
-        "opacity10": "rgba(255, 255, 255, 0)",
-        "opacity100": "rgba(255, 255, 255, 0)",
-        "opacity15": "rgba(255, 255, 255, 0)",
-        "opacity20": "rgba(255, 255, 255, 0)",
-        "opacity25": "rgba(255, 255, 255, 0)",
-        "opacity30": "rgba(255, 255, 255, 0)",
-        "opacity35": "rgba(255, 255, 255, 0)",
-        "opacity40": "rgba(255, 255, 255, 0)",
-        "opacity45": "rgba(255, 255, 255, 0)",
-        "opacity5": "rgba(255, 255, 255, 0)",
-        "opacity50": "rgba(255, 255, 255, 0)",
-        "opacity55": "rgba(255, 255, 255, 0)",
-        "opacity60": "rgba(255, 255, 255, 0)",
-        "opacity65": "rgba(255, 255, 255, 0)",
-        "opacity70": "rgba(255, 255, 255, 0)",
-        "opacity75": "rgba(255, 255, 255, 0)",
-        "opacity80": "rgba(255, 255, 255, 0)",
-        "opacity85": "rgba(255, 255, 255, 0)",
-        "opacity90": "rgba(255, 255, 255, 0)",
-        "opacity95": "rgba(255, 255, 255, 0)",
-      }
-    `);
-  });
-});

package/src/design-system.test.ts

@@ -1,47 +0,0 @@
-import * as exports from "./design-system";
-
-test("exports", () => {
-  expect(Object.keys(exports).toSorted()).toEqual(
-    [
-      "border",
-      "cardTypeColors",
-      "createInlineStyles",
-      "dateFormat",
-      "dateTimeFormat",
-      "dropCursorColor",
-      "duration",
-      "easing",
-      "fontFamily",
-      "fontSize",
-      "fontWeight",
-      "getDarkenColor",
-      "getEnumTextColor",
-      "getLinearGradient",
-      "getObjectColorMemoized",
-      "getOpacities",
-      "getTextColor",
-      "getThemeColors",
-      "iconSize",
-      "layout",
-      "layoutVars",
-      "lineHeight",
-      "listRowSurfaceFontSizeVar",
-      "menuItemHeightVar",
-      "minPanelWidth",
-      "opacity",
-      "shadows",
-      "sidebarMenuIconSizeVar",
-      "sidebarMenuItemHeightVar",
-      "space",
-      "spaceNestedTreeInterval",
-      "spaceNestedTreeLevel",
-      "textStyles",
-      "themeVars",
-      "timeFormat",
-      "tooltipDelay",
-      "transition",
-      "typeSizes",
-      "viewBoxSize",
-    ].toSorted()
-  );
-});

package/src/error-alert/error-alert-action.tsx

@@ -1,12 +0,0 @@
-import {ButtonProps, Button} from "../button/button";
-
-export const ErrorAlertAction = ({
-  size = "small",
-  variant = "outline",
-  color = "neutral",
-  className,
-  ...rest
-}: ButtonProps) => {
-  return <Button size={size} variant={variant} color={color} className={className} {...rest} />;
-};
-export type ErrorAlertActionElement = React.ReactElement<typeof ErrorAlertAction>;

package/src/error-alert/error-alert.tsx

@@ -1,71 +0,0 @@
-import {css} from "@linaria/core";
-import {IconButton} from "../button/icon-button";
-import {border, fontWeight, layout, space, textStyles, themeVars, typeSizes} from "../design-system";
-import CloseIcon from "../icons/react/Close";
-import WarningFilledIcon from "../icons/react/WarningTriangleFilled";
-import {useTheme} from "../theme-provider";
-import {ErrorAlertActionElement} from "./error-alert-action";
-
-const errorAlert = css`
-  background-color: ${themeVars.errorBgColor};
-  padding: ${space.s12}px;
-  min-height: ${layout.itemHeight}px;
-  border-radius: ${border.radius8}px;
-  display: flex;
-  gap: ${space.s8}px;
-  align-items: center;
-`;
-
-const infoStyle = css`
-  color: ${themeVars.textColor};
-  flex-grow: 1;
-
-  display: flex;
-  flex-direction: column;
-  gap: ${space.s4}px;
-  padding: 0 ${space.s4}px;
-  justify-content: center;
-  align-items: flex-start;
-`;
-
-const messageStyle = css`
-  ${{
-    ...textStyles.regular,
-    fontSize: typeSizes[5],
-    fontWeight: fontWeight.medium,
-    color: themeVars.errorTextColor,
-  }};
-`;
-
-const descriptionStyle = css`
-  ${{
-    ...textStyles.small,
-    color: themeVars.errorTextColor,
-  }};
-`;
-
-export type ErrorAlertProps = {
-  message: string;
-  description?: React.ReactNode;
-  onClose?: () => void;
-  action?: ErrorAlertActionElement;
-};
-export const ErrorAlert: React.FC<ErrorAlertProps> = ({message, description, action, onClose}: ErrorAlertProps) => {
-  const theme = useTheme();
-
-  return (
-    <div className={errorAlert}>
-      <WarningFilledIcon color={theme.errorButtonColor} iconSize={16} containerSize={16} />
-      <div className={infoStyle}>
-        <span className={messageStyle}>{message}</span>
-        {description ? <span className={descriptionStyle}>{description}</span> : null}
-      </div>
-      {action}
-      {onClose ? (
-        <IconButton size="small" onClick={onClose} aria-label="Hide error">
-          <CloseIcon />
-        </IconButton>
-      ) : null}
-    </div>
-  );
-};

package/src/file-item/use-register-in-image-gallery.tsx

@@ -1,70 +0,0 @@
-import {useCallback, useEffect, useState} from "react";
-import {useImagesGalleryMethods, useImagesGalleryRegistry} from "../images-gallery/images-gallery";
-import {FilePreviewActions} from "./file-preview-actions";
-import {PreviewData} from "./types";
-
-export function useRegisterInImageGallery({
-  preview,
-  name,
-  onDownloadClick,
-}: {
-  preview: PreviewData | null;
-  name: string;
-  onDownloadClick?: () => void;
-}) {
-  const [zoomed, setZoomed] = useState(false);
-  const imagesRegistry = useImagesGalleryRegistry();
-  const galleryMethods = useImagesGalleryMethods();
-
-  useEffect(() => {
-    if (!preview) {
-      return;
-    }
-
-    imagesRegistry.set(preview.originalSrc, {
-      type: preview.type,
-      src: preview.originalSrc,
-      label: name,
-      zoomed: false,
-      setZoomed,
-      actions: <FilePreviewActions url={preview.originalSrc} name={name} onDownloadClick={onDownloadClick} />,
-    });
-  }, [imagesRegistry, name, preview, onDownloadClick]);
-
-  useEffect(() => {
-    if (!preview) {
-      return undefined;
-    }
-
-    if (zoomed) {
-      galleryMethods.setActivated(true);
-    }
-    const imageData = imagesRegistry.get(preview.originalSrc);
-    if (imageData) {
-      imageData.zoomed = zoomed;
-    } else {
-      imagesRegistry.set(preview.originalSrc, {
-        type: preview.type,
-        src: preview.originalSrc,
-        label: name,
-        zoomed,
-        setZoomed,
-        actions: <FilePreviewActions url={preview.originalSrc} name={name} onDownloadClick={onDownloadClick} />,
-      });
-    }
-
-    return () => {
-      imagesRegistry.delete(preview.originalSrc);
-    };
-  }, [galleryMethods, zoomed, preview, imagesRegistry, name, onDownloadClick]);
-
-  const openGallery = useCallback(() => {
-    if (preview) {
-      setZoomed(true);
-    } else {
-      onDownloadClick?.();
-    }
-  }, [preview, onDownloadClick]);
-
-  return {openGallery};
-}