@fibery/ui-kit 1.5.0 → 1.7.1

package/src/Button.js

@@ -1,360 +0,0 @@
-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 theme.danger;
-  }
-  if (!theme) {
-    return colors.primary;
-  }
-  return theme.buttonColor;
-};
-
-const getBorderColor = ({mainColor, borderless, primary}) => {
-  if (borderless) {
-    return colors.transparent;
-  }
-  if (primary) {
-    return mainColor;
-  }
-  return getOpacities(mainColor).opacity15;
-};
-
-const getHoverBorderColor = ({mainColor, borderless, primary, hoverBgColor}) => {
-  if (borderless) {
-    return colors.transparent;
-  }
-  if (primary) {
-    return hoverBgColor;
-  }
-  return mainColor;
-};
-
-const getTextColor = ({mainColor, primary, theme}) => {
-  if (primary) {
-    return theme.buttonPrimaryTextColor;
-  }
-  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 colors.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,
-      noOverflow = true,
-      ...rest
-    },
-    forwardedRef
-  ) => {
-    const theme = useTheme();
-    const mainColor = getMainColor({color, dangerous, theme});
-    const textColor = getTextColor({mainColor, primary, theme});
-    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={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 const ActionsButtonCompact = forwardRef(({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/antd/ant-tooltip.tsx

@@ -1,5 +0,0 @@
-import Tooltip, {TooltipPlacement} from "antd/lib/tooltip";
-import "antd/lib/tooltip/style/css";
-
-export type {TooltipPlacement};
-export {Tooltip as AntTooltip};

package/src/icons/IconAsBackground.tsx

@@ -1,15 +0,0 @@
-import ReactDOMServer from "react-dom/server";
-import {iconSize as defaultIconSize} from "../designSystem";
-import {generateIconFromAst} from "./generateIconFromAst";
-import {IconDefinition} from "./types";
-
-export function getBackgroundImage({color, icon}: {color: string; icon: IconDefinition}): string {
-  const svg = generateIconFromAst(icon.icon.children[0], `svg-${icon.name}`, {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: defaultIconSize,
-    height: defaultIconSize,
-    viewBox: "0 0 20 20",
-    fill: encodeURIComponent(color),
-  });
-  return svg ? `url('data:image/svg+xml;utf8,${ReactDOMServer.renderToStaticMarkup(svg)}')` : ``;
-}