@fibery/ui-kit 1.7.3 → 1.7.4

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.7.3",
+  "version": "1.7.4",
   "main": "index.ts",
   "private": false,
   "files": [
     "src/antd/styles.ts",
-    "src/Button.ts",
+    "src/Button.tsx",
     "src/designSystem.ts",
     "src/theme-styles.ts",
     "src/theme-settings.ts",
@@ -21,7 +21,8 @@
     "src/error-alert.tsx",
     "src/Pallete.ts",
     "src/tooltip.tsx",
-    "src/BackButton.tsx"
+    "src/BackButton.tsx",
+    "src/Button"
   ],
   "license": "UNLICENSED",
   "dependencies": {

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/Button/BackButton.tsx

@@ -0,0 +1,26 @@
+import {ButtonSize, Button} from "./button";
+import BackIcon from "../icons/react/Back";
+
+type Props = {
+  disabled?: boolean;
+  pending?: boolean;
+  onClick: () => unknown;
+  size?: ButtonSize;
+  color?: string;
+};
+
+export function BackButton({disabled, onClick, pending, size, color}: Props) {
+  return (
+    <Button
+      borderless
+      Icon={BackIcon}
+      disabled={disabled}
+      onClick={onClick}
+      pending={pending}
+      size={size}
+      color={color}
+    >
+      Back
+    </Button>
+  );
+}

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>
+    );
+  }
+);

package/src/Button/icon-button.tsx

@@ -0,0 +1,42 @@
+import {styled} from "@linaria/react";
+import {Children, cloneElement, forwardRef} from "react";
+import {ButtonBase, ButtonBaseProps} from "./button-base";
+import {IconProps} from "../icons/types";
+
+export type IconButtonSize = "super-small" | "small" | "normal" | "big";
+
+export type IconButtonProps = Omit<ButtonBaseProps, "borderless"> & {
+  size?: IconButtonSize;
+};
+
+const Paddings = {
+  "super-small": 0,
+  small: 2,
+  normal: 4,
+  big: 6,
+};
+
+type StyledProps = {
+  /** The size of the component. `super-small` is equivalent to the dense button styling */
+  size: IconButtonSize;
+};
+
+const getPadding = ({size}: StyledProps) => Paddings[size];
+
+const StyledIconButton = styled(ButtonBase)<StyledProps>`
+  padding: ${getPadding}px;
+`;
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
+  {size = "normal", children, className, ...rest},
+  ref
+) {
+  const iconNode = Children.only(children) as React.ReactElement<IconProps>;
+
+  return (
+    <StyledIconButton ref={ref} size={size} className={className} borderless {...rest}>
+      {/* maybe better to use css variables? */}
+      {cloneElement(iconNode, {color: iconNode.props.color || "inherit"})}
+    </StyledIconButton>
+  );
+});