@fibery/ui-kit 1.35.0 → 1.36.0

package/src/type-badge.tsx

@@ -0,0 +1,315 @@
+import {css} from "@linaria/core";
+import cx from "classnames";
+import _ from "lodash";
+import {CSSProperties, forwardRef, memo, ReactNode} from "react";
+import {a11yColor} from "./a11y-color";
+import {
+  border,
+  colors,
+  fontWeight,
+  getDarkenColor,
+  getTextColor,
+  getThemeValue,
+  opacity,
+  space,
+  textStyles,
+  transition,
+} from "./design-system";
+import {useTheme} from "./theme-provider";
+import {Tooltip} from "./tooltip";
+
+const typeBadgeStaticStyle = {
+  display: "inline-grid",
+  ...textStyles.heading6,
+  fontSize: 11,
+  letterSpacing: 1.5,
+  lineHeight: 1.24,
+  outline: "none",
+  whiteSpace: "nowrap",
+  transition: `box-shadow ${transition}`,
+  opacity: 0.95,
+  borderWidth: 1,
+  borderStyle: "solid",
+};
+
+export const normalTypeBadgeStyleObject = {
+  ...typeBadgeStaticStyle,
+  paddingTop: 0,
+  paddingBottom: 0,
+  paddingLeft: space.s4,
+  paddingRight: space.s4,
+  borderRadius: border.radius4,
+};
+
+export const normalTypeBadgeStaticStyle = css`
+  ${normalTypeBadgeStyleObject}
+`;
+
+const bigTypeBadgeStaticStyle = css`
+  ${{
+    ...typeBadgeStaticStyle,
+    fontSize: 12,
+    lineHeight: 1,
+    fontWeight: fontWeight.medium,
+    letterSpacing: 2,
+    paddingTop: space.s4,
+    paddingBottom: space.s4,
+    paddingLeft: space.s6 + 2, //compensate letter spacing
+    paddingRight: space.s6,
+    borderRadius: border.radius6 - 1,
+  }}
+`;
+
+const compactTypeBadgeStaticStyle = css`
+  ${{
+    ...typeBadgeStaticStyle,
+    display: "grid",
+    lineHeight: 1.1,
+    paddingTop: 1,
+    paddingBottom: 1,
+    paddingLeft: space.s4 + 1,
+    paddingRight: space.s4,
+    borderRadius: border.radius4,
+  }}
+`;
+
+const abbrStaticStyle = {
+  paddingLeft: space.s2 + 1,
+  paddingRight: space.s2,
+  textAlign: "center",
+};
+
+const abbrCompactStyle = css`
+  ${{
+    ...abbrStaticStyle,
+    minWidth: 16,
+  }}
+`;
+
+const abbrVerticalCompactStyle = css`
+  padding-right: 1px;
+  padding-top: ${space.s2 + 1}px;
+  padding-bottom: ${space.s2}px;
+  padding-left: 1px;
+  writing-mode: vertical-lr;
+  text-align: center;
+  min-height: 16px;
+`;
+
+const colorProp = "--fibery-type-badge-color";
+const colorVar = `var(${colorProp})`;
+const colorDarkProp = "--fibery-type-badge-color-dark";
+const colorDarkVar = `var(${colorDarkProp})`;
+const colorBackgroundProp = "--fibery-type-badge-background-color";
+const colorBackgroundVar = `var(${colorBackgroundProp})`;
+const colorBorderProp = "--fibery-type-badge-border-color";
+const colorBorderVar = `var(${colorBorderProp})`;
+
+const typeBadgeStyle = css`
+  ${{
+    color: colorVar,
+    backgroundColor: colorBackgroundVar,
+    borderColor: colorBorderVar,
+  }}
+`;
+
+const selectedStyle = css`
+  box-shadow: 0 0 0 2px ${colorDarkVar};
+`;
+
+const clickableStyle = css`
+  cursor: pointer;
+`;
+const fadedStyle = css`
+  opacity: ${opacity.opacity25};
+`;
+
+export const makeDescription = (typeObject: {description?: string | null}): string | null => {
+  return typeObject.description || null;
+};
+
+export const makeAbbreviation = (title = "") =>
+  title
+    .split(" ")
+    .map((word) => word[0])
+    .join("");
+
+type TypeBadgeProps = {
+  color: string;
+  onMouseDown?: () => void;
+  onMouseEnter?: React.MouseEventHandler;
+  onMouseLeave?: React.MouseEventHandler;
+  onClick?: () => void;
+  children: ReactNode;
+  selected?: boolean;
+  abbr?: boolean;
+  compact?: boolean;
+  tooltip?: ReactNode;
+  faded?: boolean;
+  big?: boolean;
+  vertical?: boolean;
+  className?: string;
+  noTooltip?: boolean; // pass true to force disable tooltip for abbr
+};
+
+export const TypeBadge = memo(
+  forwardRef<HTMLDivElement | HTMLButtonElement, TypeBadgeProps>(function TypeBadge(
+    {
+      color,
+      onMouseDown,
+      onMouseEnter,
+      onMouseLeave,
+      onClick,
+      children,
+      selected,
+      abbr,
+      compact,
+      tooltip,
+      faded = false,
+      big = false,
+      vertical = false,
+      className,
+      noTooltip,
+    },
+    ref
+  ) {
+    const TagName = onClick ? "button" : "div";
+    const title =
+      _.isString(children) && abbr ? (
+        noTooltip ? (
+          makeAbbreviation(children)
+        ) : (
+          <Tooltip title={tooltip || children} side="bottom">
+            <span>{makeAbbreviation(children)}</span>
+          </Tooltip>
+        )
+      ) : (
+        children
+      );
+
+    const theme = useTheme();
+
+    const textBadgeColor = getThemeValue(theme.mode, {
+      dark: a11yColor(getTextColor(color), getDarkenColor(color), 12),
+      light: a11yColor(getTextColor(color), getDarkenColor(color), 12),
+      light2: a11yColor(getTextColor(color), getDarkenColor(color), 12),
+    });
+
+    const backgroundBadgeColor = getThemeValue(theme.mode, {
+      dark: getDarkenColor(color),
+      light: color,
+      light2: color,
+    });
+
+    const style = {
+      [colorProp]: color ? textBadgeColor : colors.inversedTextColor,
+      //[colorProp]: color ? getTextColor(color) : colors.inversedTextColor,
+      [colorBackgroundProp]: backgroundBadgeColor || colors.shades.opacity25,
+      //[colorBackgroundProp]: color || colors.shades.opacity25,
+      [colorBorderProp]: backgroundBadgeColor,
+      [colorDarkProp]: getDarkenColor(color),
+    } as CSSProperties;
+
+    return (
+      <TagName
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        ref={ref}
+        style={style}
+        className={cx(
+          typeBadgeStyle,
+          big ? bigTypeBadgeStaticStyle : compact ? compactTypeBadgeStaticStyle : normalTypeBadgeStaticStyle,
+          {
+            [abbrCompactStyle]: abbr && !vertical,
+            [abbrVerticalCompactStyle]: abbr && vertical,
+            [selectedStyle]: selected,
+            [clickableStyle]: onClick,
+            [fadedStyle]: faded,
+          },
+          className
+        )}
+        onMouseDown={onMouseDown}
+        onClick={onClick}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        {title}
+      </TagName>
+    );
+  })
+);
+
+type TypeObjectInfo = {
+  title: string;
+  pluralTitle?: string;
+  singularTitle?: string;
+  color: string;
+  description?: string | null;
+};
+
+const getTypeObjectTitleForm = (typeObject: TypeObjectInfo, form: "singular" | "plural") =>
+  form === "singular" ? typeObject.singularTitle : typeObject.pluralTitle;
+
+type TypeObjectBadgeParams = {
+  typeObject: TypeObjectInfo;
+  onMouseDown?: () => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  onClick?: () => void;
+  abbr?: boolean;
+  compact?: boolean;
+  vertical?: boolean;
+  form?: "singular" | "plural";
+  className?: string;
+  big?: boolean;
+  selected?: boolean;
+  faded?: boolean;
+  tooltip?: boolean;
+};
+
+export const TypeObjectBadge = forwardRef<HTMLDivElement | HTMLButtonElement, TypeObjectBadgeParams>(
+  (
+    {
+      typeObject,
+      onMouseDown,
+      onMouseEnter,
+      onMouseLeave,
+      onClick,
+      abbr,
+      compact,
+      vertical,
+      form,
+      className,
+      big,
+      selected,
+      faded,
+      tooltip = true,
+    },
+    ref
+  ) => {
+    const typeTitle = String(form ? getTypeObjectTitleForm(typeObject, form) : typeObject.title);
+    const caption = abbr ? makeAbbreviation(typeTitle) : typeTitle;
+
+    return (
+      <TypeBadge
+        ref={ref}
+        color={typeObject.color}
+        abbr={abbr}
+        compact={compact}
+        vertical={vertical}
+        className={className}
+        big={big}
+        selected={selected}
+        onClick={onClick}
+        onMouseDown={onMouseDown}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        faded={faded}
+      >
+        <Tooltip title={typeTitle} disabled={!tooltip} description={makeDescription(typeObject)} side="bottom">
+          <span>{caption}</span>
+        </Tooltip>
+      </TypeBadge>
+    );
+  }
+);

package/src/unit/as-string.tsx

@@ -0,0 +1 @@
+export const asString = (something: unknown) => (typeof something === "string" ? something : JSON.stringify(something));

package/src/unit/index.tsx

@@ -0,0 +1,55 @@
+import {CardSize} from "../card-container";
+import {themeVars} from "../design-system";
+import {UnitPrimitive} from "./primitive";
+import {UnitPrimitiveProps} from "./types";
+
+// Try not to use UnitPrimitive directly, rather define a pattern of usage, and create own unit with the pattern.
+
+export const BasicUnit = ({
+  renderAsDiv = false,
+  onKeyDown,
+  ...props
+}: UnitPrimitiveProps & {readOnly: boolean; size: CardSize}) => {
+  if (props.size === ":card-size/cell") {
+    const bgColor = props.bgColor || themeVars.transparent;
+    return (
+      <UnitPrimitive
+        onKeyDown={onKeyDown}
+        bgColor={bgColor}
+        border={false}
+        button={false}
+        header={false}
+        tooltip={false}
+        setMinWidth={false}
+        big
+        {...props}
+      />
+    );
+  }
+
+  const bgColor = props.bgColor || props.readOnly ? themeVars.inputDisabledBgColor : themeVars.transparent;
+  return (
+    <UnitPrimitive
+      bgColor={bgColor}
+      onKeyDown={onKeyDown}
+      border={!props.readOnly}
+      button={renderAsDiv === true ? false : !props.readOnly || Boolean(props.onClick)}
+      header={props.size === ":card-size/full"}
+      tooltip={props.tooltip ?? props.size !== ":card-size/full"}
+      clickable={!props.readOnly}
+      {...props}
+    />
+  );
+};
+
+export const CellUnit = (props: UnitPrimitiveProps) => {
+  return <UnitPrimitive big={true} tooltip={false} {...props} />;
+};
+
+export const OptionUnit = (props: UnitPrimitiveProps) => {
+  return <UnitPrimitive big={true} tooltip={false} {...props} />;
+};
+
+export const HistoryUnit = (props: UnitPrimitiveProps & {size: CardSize}) => {
+  return <UnitPrimitive big={props.size === ":card-size/cell"} bgColor={themeVars.unitBg} border={false} {...props} />;
+};

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

@@ -0,0 +1,13 @@
+import {css} from "@linaria/core";
+import {LoadingSausage, LoadingSausageProps} from "../loading-sausage";
+
+export const unitTextHeight = 8;
+export const LoadingUnitValue = (props: LoadingSausageProps) => (
+  <div
+    className={css`
+      display: inline-flex;
+    `}
+  >
+    <LoadingSausage {...props} height={unitTextHeight} />
+  </div>
+);

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

@@ -0,0 +1,9 @@
+import {LoadingUnitValue} from "./loading-unit-value";
+
+interface MaybeUnitValueProps {
+  value?: string;
+}
+
+export const MaybeUnitValue: React.FC<MaybeUnitValueProps> = ({value}) => {
+  return value === undefined ? <LoadingUnitValue minWidth={18} maxWidth={18} /> : <>{value}</>;
+};

package/src/unit/primitive.tsx

@@ -0,0 +1,167 @@
+import {css} from "@linaria/core";
+import cx from "classnames";
+import {ComponentProps} from "react";
+import {inputOverrides} from "../antd/styles";
+import {border, themeVars} from "../design-system";
+import {
+  basicUnitClassName,
+  bigSizeUnitClassName,
+  bigSizeUnitMinWidthClassName,
+  borderClassName,
+  clickableClassName,
+  fullUnitWrapperClassName,
+  invalidUnitClassName,
+  positionUnitClass,
+  regularSizeUnitClassName,
+  regularSizeUnitMinWidthClassName,
+  textEllipsisClassName,
+  unitDescriptionClassName,
+  unitTitleClassName,
+  unitTooltipTitleClassName,
+  unitWithTitleClassName,
+} from "./styles";
+import {UnitPrimitiveProps} from "./types";
+import {UnitButtonGroup} from "./unit-button-group";
+import {UnitContent} from "./unit-content";
+import {UnitWithTooltip} from "./unit-with-tooltip";
+
+const resetButtonStylesClassName = css`
+  all: unset;
+  background-color: ${themeVars.transparent};
+  --input-focus-border: ${inputOverrides.main["--input-focus-border"]};
+  --input-focus-shadow: ${inputOverrides.main["--input-focus-shadow"]};
+  border-radius: ${border.radius6}px;
+  &:focus {
+    outline: none;
+    ${inputOverrides.focus}
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+    box-shadow: none !important;
+  }
+
+  &:focus-visible {
+    outline: none;
+    ${inputOverrides.focus}
+  }
+`;
+
+const ButtonComponent = (props: ComponentProps<"button">) => {
+  return <button type={"button"} {...props} className={cx(props.className, resetButtonStylesClassName)} />;
+};
+
+const DivComponent = (props: ComponentProps<"div">) => <div {...props} />;
+
+export const UnitPrimitive = ({
+  // Markup
+  overflow = true,
+  inline = true,
+  button = false,
+  multiline = false,
+  // Content
+  children,
+  title,
+  description = null,
+  hint = null,
+  icons,
+  navButton,
+  // Appearance
+  big = false,
+  tooltip = true,
+  header = false,
+  border = true,
+  bgColor = themeVars.transparent,
+  shrinkable = true,
+  clickable = border,
+  setMinWidth = true,
+  // Callback
+  onClick,
+  onKeyDown,
+  invalid,
+  tooltipContent: tooltipChildren,
+}: UnitPrimitiveProps) => {
+  const cutTextInUnit = !multiline && overflow;
+  const unitWrapperStyle = {
+    backgroundColor: bgColor || themeVars.inputDisabledBgColor,
+  };
+
+  const unitWrapperClassName = cx(
+    basicUnitClassName,
+    big ? bigSizeUnitClassName : regularSizeUnitClassName,
+    setMinWidth && (big ? bigSizeUnitMinWidthClassName : regularSizeUnitMinWidthClassName),
+    border && borderClassName,
+    invalid && invalidUnitClassName,
+    clickable && clickableClassName
+  );
+
+  const UnitContentComponent = button ? ButtonComponent : DivComponent;
+
+  const content = (
+    <UnitButtonGroup
+      big={big}
+      inline={inline}
+      style={unitWrapperStyle}
+      className={unitWrapperClassName}
+      unitButton={
+        <UnitContentComponent onKeyDown={onKeyDown} onClick={onClick}>
+          <UnitContent
+            big={big}
+            icons={icons}
+            children={children}
+            contentClassName={cx({[textEllipsisClassName]: cutTextInUnit})}
+            shrinkable={shrinkable}
+          />
+        </UnitContentComponent>
+      }
+      navButton={navButton}
+    />
+  );
+
+  const contentWithTitle = header ? (
+    <div className={unitWithTitleClassName}>
+      <div className={unitTitleClassName}>{title}</div>
+      {content}
+    </div>
+  ) : (
+    content
+  );
+
+  if (tooltip) {
+    const tooltipContent = (
+      <UnitButtonGroup
+        big={big}
+        inline={inline}
+        style={unitWrapperStyle}
+        className={unitWrapperClassName}
+        unitButton={
+          <UnitContentComponent onClick={onClick}>
+            <UnitContent big={big} icons={icons}>
+              {tooltipChildren || children}
+            </UnitContent>
+          </UnitContentComponent>
+        }
+      />
+    );
+    const renderedDescription = (
+      <div>
+        {description && <div className={unitDescriptionClassName}>{description}</div>}
+        <div className={fullUnitWrapperClassName}>{tooltipContent}</div>
+        {hint}
+      </div>
+    );
+
+    return (
+      <div className={positionUnitClass}>
+        <UnitWithTooltip
+          title={<div className={unitTooltipTitleClassName}>{title}</div>}
+          description={renderedDescription}
+        >
+          {contentWithTitle}
+        </UnitWithTooltip>
+      </div>
+    );
+  } else {
+    return <div className={positionUnitClass}>{contentWithTitle}</div>;
+  }
+};

package/src/unit/required-indicator.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.6 11.4C8.6 11.7314 8.33136 12 8 12C7.66863 12 7.4 11.7314 7.4 11.4V9.44852L6.02009 10.8284C5.78578 11.0627 5.40587 11.0627 5.17157 10.8284C4.93725 10.5941 4.93725 10.2142 5.17157 9.9799L6.55147 8.6H4.6C4.26863 8.6 4 8.33136 4 8C4 7.66863 4.26863 7.4 4.6 7.4H6.55147L5.17157 6.0201C4.93725 5.78579 4.93725 5.40589 5.17157 5.17157C5.40587 4.93727 5.78578 4.93726 6.02009 5.17157L7.4 6.55148V4.6C7.4 4.26863 7.66863 4 8 4C8.33136 4 8.6 4.26863 8.6 4.6V6.55147L9.97989 5.17157C10.2142 4.93727 10.5941 4.93726 10.8284 5.17157C11.0627 5.40588 11.0627 5.78579 10.8284 6.0201L9.44852 7.4H11.4C11.7314 7.4 12 7.66863 12 8C12 8.33136 11.7314 8.6 11.4 8.6H9.44852L10.8284 9.9799C11.0627 10.2142 11.0627 10.5941 10.8284 10.8284C10.5941 11.0627 10.2142 11.0627 9.97989 10.8284L8.6 9.44853V11.4Z" fill="#4065DD"/>
+</svg>