@fibery/ui-kit 1.5.0 → 1.7.1

package/index.ts

@@ -1,2 +1 @@
 export * from "./src/designSystem";
-export {Button} from "./src/Button";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.5.0",
+  "version": "1.7.1",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -22,25 +22,28 @@
     "src/error-alert.tsx",
     "src/Pallete.ts",
     "src/tooltip.tsx",
-    "src/antd/ant-tooltip.tsx",
-    "src/BackButton.tsx"
+    "src/Button"
   ],
   "license": "UNLICENSED",
   "scripts": {
     "test": "TZ=Europe/Minsk jest",
-    "test:ci": "yarn test --coverage --reporters=default --reporters=jest-junit",
+    "test:ci": "yarn test --reporters=default --reporters=jest-junit",
+    "test:coverage": "yarn test --coverage --coverageDirectory=${JEST_COVERAGE_RESULT_DIR:-$(pwd)}/coverage/ui-kit --reporters=default --reporters=jest-junit",
     "lint": "eslint .",
     "generate-icons": "node scripts/generate-icons.mjs"
   },
   "dependencies": {
-    "@fibery/helpers": "1.0.2",
-    "@fibery/react": "1.0.0",
+    "@fibery/helpers": "workspace:*",
+    "@fibery/react": "workspace:*",
     "@linaria/core": "3.0.0-beta.15",
     "@linaria/react": "3.0.0-beta.15",
-    "@popperjs/core": "2.9.3",
+    "@popperjs/core": "2.11.6",
     "@radix-ui/react-collapsible": "1.0.1",
-    "@radix-ui/react-dropdown-menu": "2.0.1",
-    "antd": "4.18.8",
+    "@radix-ui/react-context-menu": "2.1.1",
+    "@radix-ui/react-dropdown-menu": "2.0.3-rc.7",
+    "@radix-ui/react-tooltip": "1.0.3",
+    "@types/ua-parser-js": "0.7.36",
+    "antd": "4.24.7",
     "chroma-js": "2.1.2",
     "chrono-node": "^2.4.1",
     "classnames": "2.3.1",
@@ -51,41 +54,52 @@
     "invariant": "2.2.4",
     "lodash": "4.17.21",
     "md5": "2.2.1",
-    "moment": "2.20.1",
+    "moment": "2.29.4",
     "prop-types": "15.7.2",
-    "rc-input-number": "^7.3.4",
-    "rc-menu": "9.3.2",
-    "rc-progress": "3.2.4",
+    "rc-input-number": "7.3.11",
+    "rc-menu": "9.8.1",
+    "rc-progress": "3.4.1",
     "react-color": "2.13.8",
-    "react-day-picker": "8.1.3",
-    "react-popper": "2.2.5",
+    "react-day-picker": "8.1.4",
+    "react-popper": "2.3.0",
     "react-select": "5.3.2",
     "react-select-country-list": "2.2.1",
     "react-windowed-select": "5.0.0",
-    "screenfull": "6.0.1"
+    "screenfull": "6.0.1",
+    "ua-parser-js": "0.7.24"
   },
   "peerDependencies": {
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@fibery/babel-preset": "7.2.0",
-    "@fibery/eslint-config": "8.2.0",
-    "@fibery/text-editor": "1.0.0",
+    "@babel/core": "7.20.5",
+    "@babel/runtime": "7.20.6",
+    "@fibery/babel-preset": "workspace:*",
+    "@fibery/eslint-config": "workspace:*",
     "@linaria/babel-preset": "3.0.0-beta.15",
+    "@testing-library/dom": "8.19.1",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "13.4.0",
+    "@testing-library/user-event": "13.5.0",
     "@types/chroma-js": "2.1.3",
     "@types/color-hash": "1.0.2",
     "@types/emoji-mart": "3.0.8",
+    "@types/invariant": "2.2.34",
+    "@types/lodash": "4.14.172",
+    "@types/prop-types": "15.7.5",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
     "csstype": "3.0.8",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.6",
     "fs-extra": "10.0.0",
     "glob": "7.1.7",
     "jest": "27.5.1",
     "jest-junit": "13.0.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "svg-parser": "2.0.4",
     "svgo": "2.8.0",
-    "typescript": "4.7.4",
+    "typescript": "5.0.3",
     "unist-util-reduce": "0.2.2"
   },
   "jest": {

package/src/Button/AddButton.tsx

@@ -0,0 +1,13 @@
+import {forwardRef} from "react";
+import AddIcon from "../icons/react/Add";
+import {Button, ButtonProps} from "./button";
+
+type Props = {
+  disableReason?: string;
+} & ButtonProps;
+
+export const AddButton = forwardRef<HTMLButtonElement, Props>(
+  ({disableReason = "", Icon = AddIcon, ...rest}, forwardedRef) => {
+    return <Button ref={forwardedRef} borderless Icon={Icon} title={disableReason} {...rest} />;
+  }
+);

package/src/{BackButton.tsx → Button/BackButton.tsx}

@@ -1,12 +1,11 @@
-import {Button} from "@fibery/ui-kit";
-import BackIcon from "./icons/react/Back";
-import {Size} from "@fibery/ui-kit/src/Button";
+import {ButtonSize, Button} from "./button";
+import BackIcon from "../icons/react/Back";
 
 type Props = {
   disabled?: boolean;
   pending?: boolean;
   onClick: () => unknown;
-  size?: Size;
+  size?: ButtonSize;
   color?: string;
 };
 

package/src/Button/button-base.tsx

@@ -0,0 +1,190 @@
+import {styled} from "@linaria/react";
+import {ComponentPropsWithoutRef, forwardRef} from "react";
+import {border, colors, fontWeight, getDarkenColor, getOpacities, opacity, ThemeColors} from "../designSystem";
+import {useTheme} from "../ThemeProvider";
+
+export const getMainColor = ({color, dangerous, theme}: {color?: string; dangerous?: boolean; theme: ThemeColors}) => {
+  if (color) {
+    return color;
+  }
+  if (dangerous) {
+    return theme.danger;
+  }
+  if (!theme) {
+    return colors.primary;
+  }
+  return theme.buttonColor;
+};
+
+const getBorderColor = ({
+  mainColor,
+  borderless,
+  primary,
+}: {
+  mainColor: string;
+  borderless?: boolean;
+  primary?: boolean;
+}) => {
+  if (borderless) {
+    return colors.transparent;
+  }
+  if (primary) {
+    return mainColor;
+  }
+  return getOpacities(mainColor).opacity15;
+};
+
+const getHoverBorderColor = ({
+  mainColor,
+  borderless,
+  primary,
+  hoverBgColor,
+}: {
+  mainColor: string;
+  borderless?: boolean;
+  primary?: boolean;
+  hoverBgColor: string;
+}) => {
+  if (borderless) {
+    return colors.transparent;
+  }
+  if (primary) {
+    return hoverBgColor;
+  }
+  return mainColor;
+};
+
+export const getTextColor = ({
+  mainColor,
+  primary,
+  theme,
+}: {
+  mainColor: string;
+  primary?: boolean;
+  theme: ThemeColors;
+}) => {
+  if (primary) {
+    return theme.buttonPrimaryTextColor;
+  }
+  return mainColor;
+};
+
+const getBgColor = ({mainColor, primary}: {mainColor: string; primary?: boolean}) => {
+  if (primary) {
+    return mainColor;
+  }
+  return colors.transparent;
+};
+
+const getHoverBgColor = ({
+  mainColor,
+  borderless,
+  primary,
+}: {
+  mainColor: string;
+  primary?: boolean;
+  borderless?: boolean;
+}) => {
+  if (primary) {
+    return getDarkenColor(mainColor);
+  }
+  if (borderless) {
+    return getOpacities(mainColor).opacity15;
+  }
+  return colors.transparent;
+};
+
+export const buttonBorderWidth = 1;
+
+type StyledProps = {
+  textColor: string;
+  bgColor: string;
+  borderColor: string;
+  hoverBgColor: string;
+  hoverBorderColor: string;
+  borderWidth: number;
+};
+
+const StyledButtonBase = styled.button<StyledProps>`
+  display: block;
+  box-sizing: border-box;
+  font-weight: ${fontWeight.bold};
+  margin: 0;
+  border-radius: ${border.radius6}px;
+  border: 0;
+  border-width: ${({borderWidth}) => `${borderWidth}px`};
+  border-style: solid;
+  padding: 0;
+  cursor: pointer;
+  transition: all 150ms ease-out;
+  color: ${({textColor}) => textColor};
+  background-color: ${({bgColor}) => bgColor};
+  border-color: ${({borderColor}) => borderColor};
+
+  &:disabled {
+    cursor: default;
+    opacity: ${opacity.opacity40};
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    box-shadow: ${({borderColor}) => `0 0 0 3px ${getOpacities(borderColor).opacity25}`};
+    background-color: ${({hoverBgColor}) => hoverBgColor};
+    border-color: ${({hoverBorderColor}) => hoverBorderColor};
+  }
+
+  &:hover:not(:disabled) {
+    background-color: ${({hoverBgColor}) => hoverBgColor};
+    border-color: ${({hoverBorderColor}) => hoverBorderColor};
+  }
+`;
+
+export type ButtonBaseProps = {
+  dataId?: string;
+  color?: string;
+  primary?: boolean;
+  dangerous?: boolean;
+  borderless?: boolean;
+} & ComponentPropsWithoutRef<"button">;
+export const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(function ButtonBase(
+  {primary, color, borderless, dangerous, className, type = "button", dataId, ...buttonProps},
+  ref
+) {
+  const theme = useTheme();
+
+  const mainColor = getMainColor({color, dangerous, theme});
+  const textColor = getTextColor({mainColor, primary, theme});
+  const bgColor = getBgColor({mainColor, primary});
+  const hoverBgColor = getHoverBgColor({mainColor, borderless, primary});
+  const borderColor = getBorderColor({mainColor, borderless, primary});
+  const hoverBorderColor = getHoverBorderColor({
+    mainColor,
+    borderless,
+    primary,
+    hoverBgColor,
+  });
+  const borderWidth = borderless ? 0 : buttonBorderWidth;
+
+  const styledProps: StyledProps = {
+    bgColor,
+    borderColor,
+    hoverBgColor,
+    hoverBorderColor,
+    textColor,
+    borderWidth,
+  };
+
+  return (
+    <StyledButtonBase
+      ref={ref}
+      type={type}
+      className={className}
+      data-testid={dataId}
+      {...styledProps}
+      {...buttonProps}
+    />
+  );
+});

package/src/Button/button-group.tsx

@@ -0,0 +1,76 @@
+import {Children, cloneElement, CSSProperties, ReactElement} from "react";
+import {css, cx} from "@linaria/core";
+import {border} from "../designSystem";
+
+const ordersInRowGroup = {
+  first: css`
+    ${{
+      display: "inline-flex",
+      borderRadius: `${border.radius6}px 0 0 ${border.radius6}px`,
+      marginRight: -1,
+    }}
+  `,
+  middle: css`
+    ${{
+      display: "inline-flex",
+      borderRadius: border.radius0,
+      marginRight: -1,
+    }}
+  `,
+  last: css`
+    ${{
+      display: "inline-flex",
+      borderRadius: `0 ${border.radius6}px ${border.radius6}px 0`,
+    }}
+  `,
+};
+
+const ordersInColumnGroup = {
+  first: css`
+    ${{
+      display: "inline-flex",
+      borderRadius: `${border.radius6}px ${border.radius6}px 0 0 `,
+      marginBottom: -1,
+    }}
+  `,
+  middle: css`
+    ${{
+      display: "inline-flex",
+      borderRadius: border.radius0,
+      marginBottom: -1,
+    }}
+  `,
+  last: css`
+    ${{
+      display: "inline-flex",
+      borderRadius: `0 0 ${border.radius6}px ${border.radius6}px`,
+    }}
+  `,
+};
+
+export interface ButtonGroupProps {
+  direction: CSSProperties["flexDirection"];
+  children: ReactElement[];
+}
+
+export function ButtonGroup({direction, children}: ButtonGroupProps) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "flex-start",
+        flexDirection: direction,
+      }}
+    >
+      {Children.map(children, (child, index) => {
+        const inGroup = index === 0 ? "first" : index === children.length - 1 ? "last" : "middle";
+        return cloneElement(child, {
+          className: cx(
+            child.props.className,
+            direction === "row" ? ordersInRowGroup[inGroup] : ordersInColumnGroup[inGroup]
+          ),
+        });
+      })}
+    </div>
+  );
+}

package/src/Button/button.tsx

@@ -0,0 +1,242 @@
+import {hasNonEmptyChild} from "@fibery/react/src/has-non-empty-child";
+import {css} from "@linaria/core";
+import {styled} from "@linaria/react";
+import cx from "classnames";
+import _ from "lodash";
+import React, {forwardRef} from "react";
+import {ButtonBase, ButtonBaseProps, buttonBorderWidth, getMainColor, getTextColor} from "./button-base";
+import {border, colors, getOpacities, opacity, space, textStyles} from "../designSystem";
+import MoreIcon from "../icons/react/More";
+import MoreCompactIcon from "../icons/react/MoreCompact";
+import {IconBaseProps} from "../icons/types";
+import {Item} from "../Item";
+import {Spinner} from "../loaders";
+import {useTheme} from "../ThemeProvider";
+
+type PositionInGroup = "first" | "middle" | "last";
+
+export const ButtonSize = {
+  superSmall: ":button-size/super-small",
+  small: ":button-size/small",
+  normal: ":button-size/normal",
+  big: ":button-size/big",
+} as const;
+export type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];
+
+const FontSizes = {
+  ":button-size/super-small": 10,
+  ":button-size/small": 12,
+  ":button-size/normal": 14,
+  ":button-size/big": 16,
+} as const;
+
+const HorizontalPaddings = {
+  ":button-size/super-small": 4,
+  ":button-size/small": 8,
+  ":button-size/normal": 12,
+  ":button-size/big": 16,
+} as const;
+
+const IconSizes = {
+  ":button-size/super-small": 16,
+  ":button-size/small": 18,
+  ":button-size/normal": 20,
+  ":button-size/big": 22,
+};
+
+type StyledProps = {
+  buttonSize: ButtonSize;
+  borderless?: boolean;
+  buttonWidth?: number | string;
+  buttonHeight?: number | string;
+};
+
+const getFontSize = ({buttonSize}: StyledProps) => FontSizes[buttonSize];
+const getButtonMinSize = ({buttonSize}: StyledProps) => FontSizes[buttonSize] * 2;
+const getHorizontalPadding = ({buttonSize, borderless}: StyledProps) =>
+  borderless ? HorizontalPaddings[buttonSize] : HorizontalPaddings[buttonSize] - buttonBorderWidth;
+
+const StyledButton = styled(ButtonBase)<StyledProps>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  vertical-align: middle;
+  position: relative;
+
+  width: ${({buttonWidth = "auto"}) => (typeof buttonWidth === "string" ? buttonWidth : `${buttonWidth}px`)};
+  height: ${({buttonHeight = "auto"}) => (typeof buttonHeight === "string" ? buttonHeight : `${buttonHeight}px`)};
+
+  font-size: ${getFontSize}px;
+  min-height: ${getButtonMinSize}px;
+  min-width: ${getButtonMinSize}px;
+  padding-left: ${getHorizontalPadding}px;
+  padding-right: ${getHorizontalPadding}px;
+`;
+export const buttonClassName = StyledButton;
+
+// TODO: should be a different component, e.g. ButtonGroup
+const ordersInGroup = {
+  first: css`
+    ${{
+      display: "inline-flex",
+      borderRadius: `${border.radius6}px 0 0 ${border.radius6}px`,
+      marginRight: -1,
+    }}
+  `,
+  middle: css`
+    ${{
+      display: "inline-flex",
+      borderRadius: border.radius0,
+      marginRight: -1,
+    }}
+  `,
+  last: css`
+    ${{
+      display: "inline-flex",
+      borderRadius: `0 ${border.radius6}px ${border.radius6}px 0`,
+    }}
+  `,
+};
+
+const getSpinnerColor = ({mainColor, primary}: {mainColor: string; primary?: boolean}) => {
+  if (primary) {
+    return colors.inversedTextColor;
+  }
+  return mainColor;
+};
+
+const getIconMagicConstants = _.memoize((size: ButtonSize) => {
+  const iconSize = IconSizes[size];
+
+  const leftContainerSize = 8;
+  const leftContainerMarginRight = iconSize - leftContainerSize;
+
+  return {iconSize, leftContainerSize, leftContainerMarginRight};
+});
+
+const shortcutStyle = css`
+  ${{
+    ...textStyles.small,
+    color: "currentColor",
+    borderRadius: border.radius4,
+    paddingLeft: space.xs,
+    paddingRight: space.xs,
+    paddingBottom: space.xxs,
+    marginRight: -space.xs,
+    marginLeft: space.xxs,
+    opacity: opacity.opacity80,
+    display: "inline-block",
+  }}
+`;
+
+const leftContainerMarginRightVar = "--fibery-button-left-container-margin-right";
+
+const leftContainerClassName = css`
+  margin-right: var(${leftContainerMarginRightVar});
+`;
+
+export type ButtonProps = ButtonBaseProps & {
+  size?: ButtonSize;
+  pending?: boolean;
+  Icon?: ((props: IconBaseProps) => JSX.Element) | null;
+  inGroup?: PositionInGroup;
+  shortcut?: string;
+  noOverflow?: boolean;
+  width?: string | number;
+  height?: string | number;
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    disabled,
+    pending,
+    Icon,
+    inGroup,
+    shortcut,
+    noOverflow = true,
+    width,
+    height,
+    size = ":button-size/normal",
+    className,
+    children,
+    ...baseProps
+  },
+  forwardedRef
+) {
+  const theme = useTheme();
+  const mainColor = getMainColor({color: baseProps.color, dangerous: baseProps.dangerous, theme});
+  const textColor = getTextColor({mainColor, primary: baseProps.primary, theme});
+  const spinnerBgColor = getOpacities(textColor).opacity25;
+  const spinnerColor = getSpinnerColor({mainColor, primary: baseProps.primary});
+
+  const {iconSize, leftContainerSize, leftContainerMarginRight} = getIconMagicConstants(size);
+
+  const leftContainer = pending ? (
+    <Spinner backgroundColor={spinnerBgColor} color={spinnerColor} size={iconSize} containerSize={leftContainerSize} />
+  ) : Icon ? (
+    <Icon color={textColor} iconSize={iconSize} containerSize={leftContainerSize} />
+  ) : null;
+
+  const styleVariable: StyledProps = {
+    buttonHeight: height,
+    buttonWidth: width,
+    buttonSize: size,
+    borderless: baseProps.borderless,
+  };
+
+  const isDisabled = disabled || pending;
+
+  return (
+    <StyledButton
+      {...styleVariable}
+      ref={forwardedRef}
+      onClick={!isDisabled && baseProps.onClick ? baseProps.onClick : _.noop}
+      disabled={isDisabled}
+      className={cx(className, inGroup && ordersInGroup[inGroup])}
+      {...baseProps}
+    >
+      <Item
+        leftContainer={leftContainer}
+        style={
+          {
+            [leftContainerMarginRightVar]: `${leftContainerMarginRight}px`,
+          } as React.CSSProperties
+        }
+        containerClassName={cx({[leftContainerClassName]: leftContainer && hasNonEmptyChild(children)})}
+        rightContainer={shortcut && <span className={cx(shortcutStyle)}>{shortcut}</span>}
+        noOverflow={noOverflow}
+      >
+        {children}
+      </Item>
+    </StyledButton>
+  );
+});
+
+// TODO can be inlined
+export function ActionsButton({
+  onClick,
+  label = ``,
+  disabled,
+}: {
+  onClick: ButtonProps["onClick"];
+  label?: string;
+  disabled?: boolean;
+}) {
+  return <Button Icon={MoreIcon} onClick={onClick} borderless aria-label={label} disabled={disabled} />;
+}
+
+export const ActionsButtonCompact = forwardRef<HTMLButtonElement, ButtonProps & {inverted?: boolean}>(
+  ({inverted, ...rest}, ref) => {
+    const theme = useTheme();
+    return (
+      <Button
+        ref={ref}
+        size={":button-size/small"}
+        Icon={MoreCompactIcon}
+        color={inverted ? colors.inversedTextColor : theme.buttonColor}
+        borderless
+        {...rest}
+      />
+    );
+  }
+);

package/src/Button/icon-button-with-tooltip.tsx

@@ -0,0 +1,15 @@
+import {forwardRef} from "react";
+import {Tooltip, TooltipProps} from "../tooltip";
+import {IconButton, IconButtonProps} from "./icon-button";
+
+type IconButtonTooltipProps = Pick<TooltipProps, "title" | "description" | "content" | "side">;
+
+export const IconButtonWithTooltip = forwardRef<HTMLButtonElement, IconButtonTooltipProps & IconButtonProps>(
+  function IconButtonWithTooltip({title, description, content, side, ...props}, ref) {
+    return (
+      <Tooltip title={title} description={description} content={content} side={side}>
+        <IconButton ref={ref} {...props} />
+      </Tooltip>
+    );
+  }
+);