@fibery/ui-kit 1.0.0

package/index.ts

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

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@fibery/ui-kit",
+  "version": "1.0.0",
+  "main": "index.ts",
+  "private": false,
+  "files": [
+    "src/Button.d.ts",
+    "src/Button.js",
+    "src/designSystem.ts",
+    "src/create-inline-theme.ts",
+    "src/FormFieldLoader.js",
+    "src/ThemeProvider.tsx",
+    "src/Item.tsx",
+    "src/Loaders.d.ts",
+    "src/Loaders.js",
+    "src/loading-sausage.tsx",
+    "src/icons/**/*.ts*",
+    "src/Select"
+  ],
+  "license": "UNLICENSED",
+  "scripts": {
+    "test": "TZ=Europe/Minsk jest",
+    "test:ci": "yarn test --coverage --reporters=default --reporters=jest-junit",
+    "lint": "eslint .",
+    "generate-icons": "node scripts/generate-icons.mjs"
+  },
+  "dependencies": {
+    "@fibery/helpers": "1.0.0",
+    "@fibery/react": "1.0.0",
+    "@linaria/core": "3.0.0-beta.15",
+    "@linaria/react": "3.0.0-beta.15",
+    "@popperjs/core": "2.9.3",
+    "@radix-ui/react-dropdown-menu": "0.1.1",
+    "antd": "4.18.8",
+    "chroma-js": "2.1.2",
+    "classnames": "2.3.1",
+    "color-hash": "1.0.3",
+    "d3-shape": "1.3.7",
+    "emoji-mart": "3.0.1",
+    "lodash": "4.17.21",
+    "md5": "2.2.1",
+    "moment": "2.20.1",
+    "prop-types": "15.7.2",
+    "rc-menu": "9.3.2",
+    "rc-progress": "3.2.4",
+    "react-color": "2.13.8",
+    "react-day-picker": "7.4.8",
+    "react-popper": "2.2.5",
+    "react-select": "3.0.8",
+    "react-select-country-list": "2.2.1",
+    "react-windowed-select": "2.0.5",
+    "screenfull": "6.0.1"
+  },
+  "peerDependencies": {
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0"
+  },
+  "devDependencies": {
+    "@fibery/babel-preset": "7.2.0",
+    "@fibery/eslint-config": "7.1.0",
+    "@fibery/text-editor": "1.0.0",
+    "@linaria/babel-preset": "3.0.0-beta.15",
+    "@types/chroma-js": "2.1.3",
+    "@types/color-hash": "1.0.2",
+    "@types/emoji-mart": "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",
+    "svg-parser": "2.0.4",
+    "svgo": "2.8.0",
+    "unist-util-reduce": "0.2.2"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "coveragePathIgnorePatterns": [
+      "/node_modules/"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!src/**/*.d.ts"
+    ],
+    "coverageReporters": [
+      "text",
+      "cobertura"
+    ],
+    "moduleNameMapper": {
+      "\\.(css)$": "<rootDir>/src/__mocks__/styleMock.js",
+      "createInlineTheme\\.js$": "<rootDir>/src/__mocks__/createInlineTheme.js"
+    },
+    "transform": {
+      "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
+    },
+    "setupFilesAfterEnv": [
+      "<rootDir>/config/jest/testFrameworkSetup.js"
+    ]
+  }
+}

package/src/Button.d.ts

@@ -0,0 +1,24 @@
+import type {ComponentPropsWithRef, FunctionComponent} from "react";
+import {IconBaseProps} from "./icons/types";
+type Size = ":button-size/super-small" | ":button-size/small" | ":button-size/normal" | ":button-size/big";
+type Props = {
+  size?: Size;
+  borderless?: boolean;
+  Icon?: ((props: IconBaseProps) => JSX.Element) | null;
+  color?: string;
+  primary?: boolean;
+  pending?: boolean;
+  width?: string | number;
+  height?: string | number;
+} & Omit<ComponentPropsWithRef<"button">, "size" | "width" | "height">;
+
+export const Button: FunctionComponent<Props>;
+export const buttonClassName: string;
+
+export const ActionsButton: FunctionComponent<{
+  inverted?: boolean;
+  label?: string;
+  color?: string;
+  onClick?: Props["onClick"];
+}>;
+export const ActionsButtonCompact: FunctionComponent<{inverted?: boolean; onClick?: Props["onClick"]}>;

package/src/Button.js

@@ -0,0 +1,361 @@
+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 PropTypes from "prop-types";
+import {forwardRef} from "react";
+import {border, colors, fontWeight, getDarkenColor, getOpacities, opacity, textStyles, themeVars} from "./designSystem";
+import MoreIcon from "./icons/react/More";
+import MoreCompactIcon from "./icons/react/MoreCompact";
+import {Item} from "./Item";
+import {Spinner} from "./Loaders";
+import {useTheme} from "./ThemeProvider";
+
+const baseSize = 14;
+
+const fontSizes = {
+  ":button-size/super-small": baseSize - 4,
+  ":button-size/small": baseSize - 2,
+  ":button-size/normal": baseSize,
+  ":button-size/big": baseSize + 2,
+};
+
+const sizeShifts = {
+  ":button-size/super-small": -2,
+  ":button-size/small": -1,
+  ":button-size/normal": 0,
+  ":button-size/big": 1,
+};
+
+const buttonBorderWidth = 1;
+
+const staticButtonStyle = css`
+  ${{
+    boxSizing: "border-box",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    verticalAlign: "middle",
+    fontWeight: fontWeight.bold,
+    lineHeight: 1,
+    margin: 0,
+    borderRadius: border.radius6,
+    borderWidth: buttonBorderWidth,
+    borderStyle: "solid",
+    outline: "none",
+    position: "relative",
+  }}
+`;
+
+const ordersInGroup = {
+  first: css`
+    &.${staticButtonStyle} {
+      ${{
+        display: "inline-flex",
+        borderRadius: `${border.radius6}px 0 0 ${border.radius6}px`,
+        marginRight: -1,
+      }}
+    }
+  `,
+  middle: css`
+    &.${staticButtonStyle} {
+      ${{
+        display: "inline-flex",
+        borderRadius: border.radius0,
+        marginRight: -1,
+      }}
+    }
+  `,
+  last: css`
+    &.${staticButtonStyle} {
+      ${{
+        display: "inline-flex",
+        borderRadius: `0 ${border.radius6}px ${border.radius6}px 0`,
+      }}
+    }
+  `,
+};
+
+const getMainColor = ({color, dangerous, theme}) => {
+  if (color) {
+    return color;
+  }
+  if (dangerous) {
+    return colors.danger;
+  }
+  if (!theme) {
+    return colors.primary;
+  }
+  if (theme.mode === "old") {
+    return theme.primary;
+  }
+  return theme.iconColor;
+};
+
+const getBorderColor = ({mainColor, borderless, primary}) => {
+  if (borderless) {
+    return colors.transparent;
+  }
+  if (primary) {
+    return mainColor;
+  }
+  return getOpacities(mainColor).notSoThin;
+};
+
+const getHoverBorderColor = ({mainColor, borderless, primary, hoverBgColor}) => {
+  if (borderless) {
+    return colors.transparent;
+  }
+  if (primary) {
+    return hoverBgColor;
+  }
+  return mainColor;
+};
+
+const getTextColor = ({mainColor, primary}) => {
+  if (primary) {
+    return colors.inversedTextColor;
+  }
+  return mainColor;
+};
+
+const getBgColor = ({mainColor, primary}) => {
+  if (primary) {
+    return mainColor;
+  }
+  return colors.transparent;
+};
+
+const getHoverBgColor = ({mainColor, borderless, primary}) => {
+  if (primary) {
+    return getDarkenColor(mainColor);
+  }
+  if (borderless) {
+    return getOpacities(mainColor).opacity15;
+  }
+  return colors.transparent;
+};
+
+const getSpinnerColor = ({mainColor, primary}) => {
+  if (primary) {
+    return themeVars.inversedTextColor;
+  }
+  return mainColor;
+};
+
+const getButtonMagicConstants = _.memoize((size) => {
+  const sizeShift = sizeShifts[size];
+
+  const fontSize = fontSizes[size];
+  const minSize = fontSize * 2;
+  const horizontalPadding = baseSize - 2 + sizeShift * 4;
+
+  return {fontSize, minSize, horizontalPadding};
+});
+
+const getIconMagicConstants = _.memoize((size) => {
+  const sizeShift = sizeShifts[size];
+
+  const iconSize = baseSize + 2 + sizeShift * 2;
+  const leftContainerSize = 8;
+  const leftContainerMarginRight = iconSize - leftContainerSize;
+
+  return {iconSize, leftContainerSize, leftContainerMarginRight};
+});
+
+const StyledButton = styled.button`
+  font-size: ${({buttonSize}) => getButtonMagicConstants(buttonSize).fontSize}px;
+  min-height: ${({buttonSize}) => getButtonMagicConstants(buttonSize).minSize}px;
+  min-width: ${({buttonSize}) => getButtonMagicConstants(buttonSize).minSize}px;
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: ${({buttonSize}) => getButtonMagicConstants(buttonSize).horizontalPadding}px;
+  padding-right: ${({buttonSize}) => getButtonMagicConstants(buttonSize).horizontalPadding}px;
+  opacity: ${({disabled}) => (disabled ? opacity.regular : 1)};
+  width: ${({buttonWidth = "auto"}) => (typeof buttonWidth === "string" ? buttonWidth : `${buttonWidth}px`)};
+  height: ${({buttonHeight = "auto"}) => (typeof buttonHeight === "string" ? buttonHeight : `${buttonHeight}px`)};
+  color: ${({textColor}) => textColor};
+  background-color: ${({bgColor}) => bgColor};
+  border-color: ${({borderColor}) => borderColor};
+  cursor: ${({clickable}) => (clickable ? "pointer" : "default")};
+  transition: all 150ms ease-out;
+
+  &:focus {
+    box-shadow: ${({borderColor, activeStyle}) =>
+      activeStyle ? `0 0 0 3px ${getOpacities(borderColor).light}` : "none"};
+    background-color: ${({hoverBgColor}) => hoverBgColor};
+    border-color: ${({hoverBorderColor}) => hoverBorderColor};
+    transition: all 150ms ease-out;
+  }
+
+  &:focus:not(:focus-visible) {
+    box-shadow: none;
+    background-color: ${({bgColor}) => bgColor};
+    border-color: ${({borderColor}) => borderColor};
+    transition: none;
+  }
+
+  &:focus-visible {
+    box-shadow: ${({borderColor, activeStyle}) =>
+      activeStyle ? `0 0 0 3px ${getOpacities(borderColor).light}` : "none"};
+    background-color: ${({hoverBgColor}) => hoverBgColor};
+    border-color: ${({hoverBorderColor}) => hoverBorderColor};
+    transition: all 150ms ease-out;
+  }
+
+  &:hover,
+  &:focus:hover:not(:focus-visible) {
+    background-color: ${({hoverBgColor}) => hoverBgColor};
+    border-color: ${({hoverBorderColor}) => hoverBorderColor};
+    transition: all 150ms ease-out;
+  }
+`;
+
+export const buttonClassName = StyledButton;
+
+const shortcutStyle = css`
+  ${{
+    ...textStyles.small,
+    color: themeVars.whiteColor,
+    border: "solid 1px",
+    borderRadius: border.radius4,
+    paddingLeft: 4,
+    paddingRight: 4,
+    marginLeft: 4,
+    opacity: 0.7,
+  }}
+`;
+
+const leftContainerMarginRightVar = "--fibery-button-left-container-margin-right";
+
+const leftContainerClassName = css`
+  margin-right: var(${leftContainerMarginRightVar});
+`;
+
+export const Button = forwardRef(
+  (
+    {
+      children,
+      color,
+      dangerous,
+      borderless,
+      primary,
+      pending,
+      icon,
+      Icon,
+      size = ":button-size/normal",
+      type = "button",
+      disabled,
+      width,
+      height,
+      inGroup,
+      onClick,
+      className,
+      shortcut,
+      ...rest
+    },
+    forwardedRef
+  ) => {
+    const theme = useTheme();
+    const mainColor = getMainColor({color, dangerous, theme});
+    const textColor = getTextColor({mainColor, primary});
+    const spinnerBgColor = getOpacities(textColor).light;
+    const spinnerColor = getSpinnerColor({mainColor, primary});
+    const bgColor = getBgColor({mainColor, primary});
+    const hoverBgColor = getHoverBgColor({mainColor, borderless, primary});
+    const borderColor = getBorderColor({mainColor, borderless, primary});
+    const hoverBorderColor = getHoverBorderColor({
+      mainColor,
+      borderless,
+      primary,
+      hoverBgColor,
+    });
+    if (icon) {
+      // eslint-disable-next-line no-console
+      console.warn("'icon' props doesn't support anymore. Please use 'Icon' prop with explicit Icon Component");
+    }
+    const {iconSize, leftContainerSize, leftContainerMarginRight} = getIconMagicConstants(size);
+
+    const leftContainer = pending ? (
+      <Spinner
+        backgroundColor={spinnerBgColor}
+        color={spinnerColor}
+        size={iconSize}
+        containerSize={leftContainerSize}
+      />
+    ) : Icon ? (
+      <Icon color={textColor} size={iconSize} containerSize={leftContainerSize} />
+    ) : null;
+    const styleVariable = {
+      buttonSize: size,
+      disabled,
+      pending,
+      buttonWidth: width,
+      buttonHeight: height,
+      textColor,
+      clickable: !disabled && !pending,
+      hoverBgColor: !disabled && !pending ? hoverBgColor : bgColor,
+      hoverBorderColor: !disabled && !pending ? hoverBorderColor : borderColor,
+      borderColor,
+      bgColor,
+    };
+
+    return (
+      <StyledButton
+        {...styleVariable}
+        ref={forwardedRef}
+        type={type}
+        onClick={!disabled && !pending && onClick ? onClick : _.noop}
+        disabled={disabled}
+        className={cx(className, staticButtonStyle, ordersInGroup[inGroup])}
+        {...rest}
+      >
+        <Item
+          leftContainer={leftContainer}
+          style={{
+            [leftContainerMarginRightVar]: `${leftContainerMarginRight}px`,
+          }}
+          containerClassName={cx({[leftContainerClassName]: leftContainer && hasNonEmptyChild(children)})}
+          rightContainer={shortcut && <span className={cx(shortcutStyle)}>{shortcut}</span>}
+          noOverflow
+        >
+          {children}
+        </Item>
+      </StyledButton>
+    );
+  }
+);
+
+Button.propTypes = {
+  size: PropTypes.oneOf(Object.keys(fontSizes)),
+  type: PropTypes.string,
+  primary: PropTypes.bool,
+  dangerous: PropTypes.bool,
+  disabled: PropTypes.bool,
+  pending: PropTypes.bool,
+  borderless: PropTypes.bool,
+  icon: PropTypes.string,
+  color: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  onClick: PropTypes.func,
+  inGroup: PropTypes.oneOf(Object.keys(ordersInGroup)),
+};
+
+// TODO can be inlined
+export function ActionsButton({onClick, label = ``, disabled}) {
+  return <Button Icon={MoreIcon} onClick={onClick} borderless aria-label={label} disabled={disabled} />;
+}
+
+export function ActionsButtonCompact({inverted, onClick}) {
+  const theme = useTheme();
+  return (
+    <Button
+      size={":button-size/small"}
+      Icon={MoreCompactIcon}
+      onClick={onClick}
+      color={inverted ? colors.inversedTextColor : theme.primary}
+      borderless
+    />
+  );
+}

package/src/FormFieldLoader.js

@@ -0,0 +1,30 @@
+import {PureComponent} from "react";
+import {css} from "@linaria/core";
+import * as PropTypes from "prop-types";
+import cn from "classnames";
+import {space, border, themeVars} from "./designSystem";
+
+const loaderStyle = css`
+  border-radius: ${border.radius6}px;
+  padding-top: ${space.m}px;
+  padding-bottom: ${space.m}px;
+  padding-left: ${space.l}px;
+  padding-right: 0;
+  box-sizing: border-box;
+  border: none;
+  color: ${themeVars.accentTextColor};
+  box-shadow: ${themeVars.inputBorderColor};
+  background-color: ${themeVars.inputBgColor};
+`;
+
+export class FormFieldLoader extends PureComponent {
+  render() {
+    const {additionClassname, children} = this.props;
+    return <div className={cn(loaderStyle, additionClassname)}>{children}</div>;
+  }
+}
+
+FormFieldLoader.propTypes = {
+  additionClassname: PropTypes.string,
+  children: PropTypes.node,
+};

package/src/Item.tsx

@@ -0,0 +1,127 @@
+import {css} from "@linaria/core";
+import cx from "classnames";
+import {forwardRef, ReactNode, MouseEvent, CSSProperties} from "react";
+import {themeVars} from "./designSystem";
+
+const getGridStyle = ({
+  multiline,
+  leftContainer,
+  children,
+  rightContainer,
+  onItemClick,
+  inline,
+}: {
+  multiline?: boolean;
+  leftContainer?: ReactNode;
+  children?: ReactNode;
+  rightContainer?: ReactNode;
+  onItemClick?: (event: MouseEvent<HTMLDivElement>) => unknown;
+  inline?: boolean;
+}) => ({
+  display: inline ? "inline-grid" : "grid",
+  gridTemplateColumns: [leftContainer ? "auto" : null, children ? "1fr" : null, rightContainer ? "auto" : null]
+    .filter((container) => container !== null)
+    .join(" "),
+  alignItems: multiline ? "start" : "center",
+  ...(onItemClick ? {cursor: "pointer"} : null),
+});
+
+const hoverClass = css`
+  &:hover {
+    background-color: ${themeVars.opacity.thin};
+  }
+`;
+
+const singleLineTextStyleNoOverflow: CSSProperties = {
+  whiteSpace: "nowrap",
+};
+
+const singleLineTextStyle: CSSProperties = {
+  ...singleLineTextStyleNoOverflow,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+};
+
+type Props = {
+  children: ReactNode;
+  className?: string;
+  leftContainer?: ReactNode;
+  rightContainer?: ReactNode;
+  textClassName?: string;
+  itemClassName?: string;
+  containerClassName?: string;
+  multiline?: boolean;
+  inline?: boolean;
+  noOverflow?: boolean;
+  hoverable?: boolean;
+  title?: string;
+  dataId?: string;
+  onItemClick?: (event: MouseEvent<HTMLDivElement>) => unknown;
+  onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => unknown;
+  onMouseLeave?: (event: MouseEvent<HTMLDivElement>) => unknown;
+  onMouseDown?: (event: MouseEvent<HTMLDivElement>) => unknown;
+  style?: CSSProperties;
+};
+
+/**
+ * @deprecated The component should not be used. Just use css for desired layout `display: flex` or `display: grid; grid-auto-flow:column`
+ */
+export const Item = forwardRef<HTMLDivElement, Props>(function Item(
+  {
+    className,
+    leftContainer,
+    rightContainer,
+    children,
+    multiline,
+    textClassName,
+    itemClassName,
+    containerClassName,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseDown,
+    onItemClick,
+    inline,
+    noOverflow,
+    hoverable,
+    title,
+    dataId,
+    style = {},
+  },
+  ref
+) {
+  return (
+    <div
+      data-testid={dataId}
+      data-id={dataId}
+      ref={ref}
+      onMouseDown={onMouseDown}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onClick={onItemClick}
+      className={cx(className, {[hoverClass]: hoverable}, itemClassName)}
+      style={{
+        ...style,
+        ...getGridStyle({
+          multiline,
+          leftContainer,
+          children,
+          rightContainer,
+          onItemClick,
+          inline,
+        }),
+      }}
+      title={title}
+    >
+      {leftContainer && <div className={cx(containerClassName)}>{leftContainer}</div>}
+      {children ? (
+        <div
+          className={cx(textClassName)}
+          style={multiline ? {} : noOverflow ? singleLineTextStyleNoOverflow : singleLineTextStyle}
+        >
+          {children}
+        </div>
+      ) : null}
+      {rightContainer && <div className={cx(containerClassName)}>{rightContainer}</div>}
+    </div>
+  );
+});

package/src/Loaders.d.ts

@@ -0,0 +1,16 @@
+export const LoadingPage: () => JSX.Element;
+export const LoadingTreeMenuItem: (props: {
+  color?: string;
+  Icon: () => JSX.Element;
+  level: number;
+  children?: JSX.Element;
+}) => JSX.Element;
+export const SidebarLoadingPage: () => JSX.Element;
+
+export const Spinner: (props: {
+  size?: number;
+  containerSize?: number;
+  width?: number;
+  color?: string;
+  backgroundColor?: string;
+}) => JSX.Element;