@fibery/ui-kit 1.35.0 → 1.36.0

package/src/box.tsx

@@ -0,0 +1,444 @@
+import {css} from "@linaria/core";
+import {styled} from "@linaria/react";
+import cx from "classnames";
+import {CSSProperties, forwardRef, HTMLProps, ReactNode, Ref, useCallback, useMemo, useState} from "react";
+import {border, getLinearGradient, getOpacities, space, textStyles, themeVars, transition} from "./design-system";
+import {useClickOutside} from "./popup/use-click-outside";
+
+export const getBg = (backgroundColors: string[]) => {
+  if (backgroundColors) {
+    return getLinearGradient(backgroundColors);
+  }
+  return themeVars.entityCardBgColor;
+};
+export const strokeContainer = css`
+  overflow: hidden;
+  transition: box-shadow ${transition};
+  padding: ${space.s4}px;
+  min-width: 100%;
+  min-height: 100%;
+  display: flex;
+  align-content: stretch;
+  position: relative;
+
+  &:after {
+    content: "";
+    position: absolute;
+    pointer-events: none;
+    opacity: 0.1;
+    inset: 0;
+  }
+`;
+const opacityContainerClass = css`
+  transition: opacity ${transition};
+  min-width: 100%;
+  min-height: 100%;
+`;
+
+type BoxRadius = {lt?: number | false; rt?: number | false; rb?: number | false; lb?: number | false};
+const getBorderRadius = (radius: BoxRadius | false) => {
+  return radius
+    ? `${radius.lt ? radius.lt + "px" : "0px"} ${radius.rt ? radius.rt + "px" : "0px"} ${
+        radius.rb ? radius.rb + "px" : "0px"
+      } ${radius.lb ? radius.lb + "px" : "0px"}`
+    : "none";
+};
+export const BoxRoot = styled.div<{radiusValue: BoxRadius | false}>`
+  display: block;
+  width: 100%;
+  transition: box-shadow ${transition}, background-color ${transition};
+  border-radius: ${({radiusValue}) => getBorderRadius(radiusValue)};
+  .${strokeContainer} {
+    box-shadow: ${themeVars.shadowStrokeEntityBoxDefault};
+    border-radius: ${({radiusValue}) => getBorderRadius(radiusValue)};
+  }
+  ${textStyles.regular};
+  background-color: ${themeVars.colorBgEntityBoxDefault};
+  box-shadow: ${themeVars.shadowEntityBoxDefault};
+  &.hover {
+    background-color: ${themeVars.colorBgEntityBoxDefaultHover};
+    box-shadow: ${themeVars.shadowEntityBoxDefaultHover};
+  }
+  &.focus {
+    background-color: ${themeVars.colorBgEntityBoxDefaultFocus};
+    .${strokeContainer} {
+      box-shadow: ${themeVars.shadowStrokeEntityBoxDefaultFocus};
+      &:after {
+        background-color: ${themeVars.colorOverlayEntityBoxDefaultFocus};
+      }
+    }
+    &.hover {
+      background-color: ${themeVars.colorBgEntityBoxDefaultFocusHover};
+      .${strokeContainer} {
+        box-shadow: ${themeVars.shadowStrokeEntityBoxDefaultFocusHover};
+        &:after {
+          background-color: ${themeVars.colorOverlayEntityBoxDefaultFocusHover};
+        }
+      }
+    }
+  }
+  &.drag,
+  &.drag.hover {
+    background-color: ${themeVars.colorBgEntityBoxDefaultHover};
+    box-shadow: ${themeVars.shadowEntityBoxDefaultDrag};
+    .${strokeContainer} {
+      .${opacityContainerClass} {
+        opacity: ${themeVars.opacityEntityBoxDefaultDrag};
+      }
+    }
+  }
+`;
+
+const inDisabledState = css`
+  background-color: ${themeVars.panelContentBg};
+  &.hover {
+    background-color: ${themeVars.panelContentBg};
+  }
+`;
+
+export const inSelectedState = css`
+  background-color: ${themeVars.colorBgEntityBoxSelected};
+  .${strokeContainer} {
+    box-shadow: ${themeVars.shadowStrokeEntityBoxSelected};
+  }
+  &.hover {
+    background-color: ${themeVars.colorBgEntityBoxSelectedHover};
+    .${strokeContainer} {
+      box-shadow: ${themeVars.shadowStrokeEntityBoxSelectedHover};
+    }
+  }
+  &.focus {
+    .${strokeContainer} {
+      box-shadow: ${themeVars.shadowStrokeEntityBoxSelected};
+    }
+    &.hover {
+      background-color: ${themeVars.colorBgEntityBoxSelectedHover};
+      .${strokeContainer} {
+        box-shadow: ${themeVars.shadowStrokeEntityBoxSelected};
+      }
+    }
+  }
+
+  &.drag,
+  &.drag.hover {
+    background-color: ${themeVars.colorBgEntityBoxSelectedHover};
+    .${strokeContainer} {
+      box-shadow: ${themeVars.shadowStrokeEntityBoxSelectedDrag};
+    }
+  }
+`;
+const inTransparent = css`
+  box-shadow: none;
+  color: ${themeVars.accentTextColor};
+
+  .${strokeContainer} {
+    box-shadow: none;
+    background: ${themeVars.panelContentBg};
+  }
+
+  &.hover {
+    box-shadow: none;
+
+    .${strokeContainer} {
+      background: ${themeVars.colorBgNotificationHover};
+      box-shadow: none;
+    }
+  }
+`;
+
+export const inDoneState = css`
+  .${strokeContainer} {
+    .${opacityContainerClass} {
+      opacity: ${themeVars.opacityEntityBoxDisabled};
+    }
+  }
+  &.hover {
+    .${strokeContainer} {
+      .${opacityContainerClass} {
+        opacity: ${themeVars.opacityEntityBoxDisabledHover};
+      }
+    }
+  }
+  &.focus {
+    .${strokeContainer} {
+      .${opacityContainerClass} {
+        opacity: ${themeVars.opacityEntityBoxDisabledFocus};
+      }
+    }
+  }
+  &.drag {
+    .${strokeContainer} {
+      .${opacityContainerClass} {
+        opacity: ${themeVars.opacityEntityBoxDisabledDrag};
+      }
+    }
+  }
+`;
+export const BoxStroke = strokeContainer;
+export const BoxOpacityContainer = opacityContainerClass;
+
+const colorCodingBackgroundCustomProperty = "--card-color-coding-card";
+const colorCodingShadowEntityBoxDefaultCustomProperty = "--card-color-coding-card-shadow";
+const colorCodingShadowStrokeEntityBoxDefaultCustomProperty = "--card-color-coding-card-stroke-shadow";
+const colorCodingShadowStrokeEntityBoxSelectedCustomProperty = "--card-color-coding-card-stroke-selected-shadow";
+const colorCodingFocusShadowStrokeEntityBoxDefaultCustomProperty = "--card-color-coding-card-focus-stroke-shadow";
+const colorCodingHoverFocusShadowStrokeEntityBoxDefaultCustomProperty =
+  "--card-color-coding-card-hover-focus-stroke-shadow";
+const colorCodingBackgroundHoverShadowCustomProperty = "--card-color-coding-hover-card-shadow";
+
+const colorCodingClassName = css`
+  &${BoxRoot} {
+    background-color: color-mix(
+      in srgb,
+      var(${colorCodingBackgroundCustomProperty}),
+      ${themeVars.colorBgEntityBoxDefault} 90%
+    );
+    box-shadow: var(${colorCodingShadowEntityBoxDefaultCustomProperty});
+
+    .${strokeContainer} {
+      box-shadow: var(${colorCodingShadowStrokeEntityBoxDefaultCustomProperty});
+    }
+  }
+
+  &${BoxRoot}.hover {
+    background-color: color-mix(
+      in srgb,
+      var(${colorCodingBackgroundCustomProperty}),
+      ${themeVars.colorBgEntityBoxDefaultHover} 90%
+    );
+    box-shadow: var(${colorCodingBackgroundHoverShadowCustomProperty});
+  }
+
+  &${BoxRoot}.focus {
+    background-color: color-mix(
+      in srgb,
+      var(${colorCodingBackgroundCustomProperty}),
+      ${themeVars.colorBgEntityBoxDefaultFocus} 90%
+    );
+
+    .${strokeContainer} {
+      box-shadow: ${themeVars.shadowStrokeEntityBoxDefaultFocus};
+    }
+  }
+
+  &${BoxRoot}.focus.hover {
+    background-color: color-mix(
+      in srgb,
+      var(${colorCodingBackgroundCustomProperty}),
+      ${themeVars.colorBgEntityBoxDefaultFocusHover} 90%
+    );
+
+    .${strokeContainer} {
+      box-shadow: ${themeVars.shadowStrokeEntityBoxDefaultFocusHover};
+    }
+  }
+
+  &${BoxRoot}.${inSelectedState}, &${BoxRoot}.${inSelectedState}.focus, &${BoxRoot}.${inSelectedState}.focus.hover {
+    .${strokeContainer} {
+      box-shadow: ${themeVars.shadowStrokeEntityBoxSelected};
+    }
+  }
+`;
+const emptyColorCodingStyle = {};
+
+export function getBoxBackgroundColors({backgroundColors}: {backgroundColors: string[] | null | undefined}) {
+  if (!backgroundColors || backgroundColors.length <= 1) {
+    return [];
+  }
+  const [, ...rest] = [...new Set(backgroundColors)];
+  return rest;
+}
+
+export function useBoxBackgroundColors({backgroundColors}: {backgroundColors: string[] | null | undefined}) {
+  return useMemo(() => {
+    return getBoxBackgroundColors({backgroundColors});
+  }, [backgroundColors]);
+}
+
+export function getBoxColorCoding({backgroundColors}: {backgroundColors: string[] | null | undefined}) {
+  if (!backgroundColors || !backgroundColors.length) {
+    return {
+      colorCodingClassName: "",
+      colorCodingStyle: emptyColorCodingStyle,
+    };
+  }
+  const colorCodingColor = backgroundColors?.[0];
+  const colorCodingStyle = colorCodingColor
+    ? ({
+        [colorCodingBackgroundCustomProperty]: colorCodingColor,
+        [colorCodingShadowEntityBoxDefaultCustomProperty]: `0px 2px 4px 0px ${
+          getOpacities(colorCodingColor).opacity10
+        }`,
+        [colorCodingShadowStrokeEntityBoxDefaultCustomProperty]: `0 0 0 1px ${
+          getOpacities(colorCodingColor).opacity30
+        }`,
+        [colorCodingBackgroundHoverShadowCustomProperty]: `0px 4px 8px 0px ${getOpacities(colorCodingColor).opacity10}`,
+        [colorCodingFocusShadowStrokeEntityBoxDefaultCustomProperty]: `0 0 0 2px ${
+          getOpacities(colorCodingColor).opacity40
+        }`,
+        [colorCodingHoverFocusShadowStrokeEntityBoxDefaultCustomProperty]: `0 0 0 2px ${
+          getOpacities(colorCodingColor).opacity60
+        }`,
+        [colorCodingShadowStrokeEntityBoxSelectedCustomProperty]: `0 0 0 1px ${
+          getOpacities(colorCodingColor).opacity60
+        }, 0 0 0 3px ${getOpacities(colorCodingColor).opacity40}`,
+      } as CSSProperties)
+    : {};
+  return {
+    colorCodingClassName,
+    colorCodingStyle,
+  };
+}
+
+const defaultRadius = {
+  lt: border.radius6,
+  rt: border.radius6,
+  rb: border.radius6,
+  lb: border.radius6,
+};
+type Props = HTMLProps<HTMLDivElement> & {
+  as?: React.ElementType;
+} & {
+  ref?: Ref<HTMLDivElement>;
+  /**
+   * Make it look selected
+   */
+  selected?: boolean;
+  /**
+   * Make it look done
+   */
+  done?: boolean;
+  /**
+   * Force it look focused or not
+   * Do not forget to make it hover if you make right click reaction
+   */
+  focused?: boolean;
+  /**
+   * Force it look hover or not
+   */
+  hovered?: boolean;
+  /**
+   * Make it look dragged
+   */
+  dragged?: boolean;
+  /**
+   * Make it look disabled
+   */
+  disabled?: boolean;
+  /**
+   * Make it looks transparent
+   */
+  transparent?: boolean;
+  onFocusedChange?: (focus: boolean) => void;
+  onHoveredChange?: (hover: boolean) => void;
+  radius?: BoxRadius | false;
+  children: ReactNode;
+  leftContainer?: JSX.Element;
+  rightContainer?: JSX.Element;
+  bypassedRef?: Ref<HTMLDivElement>;
+  allowOverflow?: boolean;
+};
+/**
+ * Fibery system card-like container with all mouse, focus and selected states support.
+ * States described at: https://www.figma.com/file/Qff2eEFvZhjpxSqeFD5n58/FI---UI-Projects?type=design&node-id=4085%3A30506&mode=design&t=UvkBPcZSg5hKi86D-1
+ */
+export const Box = forwardRef<HTMLDivElement, Props>((props, ref) => {
+  const {
+    selected,
+    done,
+    focused,
+    hovered,
+    disabled,
+    dragged,
+    radius,
+    children,
+    leftContainer,
+    rightContainer,
+    className,
+    onFocusedChange,
+    onHoveredChange,
+    transparent,
+    allowOverflow,
+    ...rest
+  } = props;
+  const radiusValue = radius ? {...defaultRadius, ...radius} : radius === false ? radius : defaultRadius;
+
+  const [isHovered, setIsHovered] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const onMouseEnterWrapped: React.MouseEventHandler<HTMLDivElement> = useCallback(
+    (...args) => {
+      rest.onMouseEnter && rest.onMouseEnter(...args);
+      setIsHovered(true);
+      onHoveredChange && onHoveredChange(true);
+    },
+    [onHoveredChange, rest]
+  );
+  const onMouseLeaveWrapped: React.MouseEventHandler<HTMLDivElement> = useCallback(
+    (...args) => {
+      rest.onMouseLeave && rest.onMouseLeave(...args);
+      setIsHovered(false);
+      onHoveredChange && onHoveredChange(false);
+    },
+    [onHoveredChange, rest]
+  );
+  const onFocusWrapped: React.FocusEventHandler<HTMLDivElement> = useCallback(
+    (...args) => {
+      rest.onFocus && rest.onFocus(...args);
+      setIsFocused(true);
+      onFocusedChange && onFocusedChange(true);
+    },
+    [onFocusedChange, rest]
+  );
+  const onBlurWrapped: React.FocusEventHandler<HTMLDivElement> = useCallback(
+    (...args) => {
+      rest.onBlur && rest.onBlur(...args);
+      setIsFocused(false);
+      onFocusedChange && onFocusedChange(false);
+    },
+    [onFocusedChange, rest]
+  );
+  const embeddedProps = {
+    ...rest,
+    radiusValue,
+    onMouseEnter: onMouseEnterWrapped,
+    onMouseLeave: onMouseLeaveWrapped,
+    onFocus: onFocusWrapped,
+    onBlur: onBlurWrapped,
+  };
+
+  const effectiveFocus = focused !== undefined ? focused : isFocused;
+  const effectiveHover = hovered !== undefined ? hovered : isHovered;
+  useClickOutside(() => {
+    setIsFocused(false);
+  });
+  return (
+    <BoxRoot
+      ref={ref}
+      className={cx(
+        className,
+        disabled && inDisabledState,
+        selected && inSelectedState,
+        done && inDoneState,
+        effectiveFocus && "focus",
+        effectiveHover && "hover",
+        dragged && "drag",
+        transparent && inTransparent
+      )}
+      {...embeddedProps}
+    >
+      <div
+        className={cx(
+          strokeContainer,
+          allowOverflow &&
+            css`
+              overflow: visible;
+            `
+        )}
+      >
+        {leftContainer && <div className={opacityContainerClass}>{leftContainer}</div>}
+        <div className={opacityContainerClass}>{children}</div>
+        {rightContainer && <div className={opacityContainerClass}>{rightContainer}</div>}
+      </div>
+    </BoxRoot>
+  );
+});

package/src/breakpoints.tsx

@@ -0,0 +1,59 @@
+import {useResizeObserver} from "@fibery/react/src/use-resize-observer";
+import {createContext, RefObject, useContext, useState} from "react";
+
+export type Breakpoints = "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "default";
+
+export type BreakpointsContextValue = Record<"activeBreakpoint", Breakpoints>;
+
+const breakpoints = {
+  sm: 768,
+  md: 1024,
+  lg: 1280,
+  xl: 1440,
+  xxl: 1536,
+  xxxl: 1920,
+};
+
+export function calculateBreakpoint(width: number): Breakpoints {
+  if (width < breakpoints.md) {
+    return "sm";
+  }
+  if (width >= breakpoints.md && width < breakpoints.lg) {
+    return "md";
+  }
+  if (width >= breakpoints.lg && width < breakpoints.xl) {
+    return "lg";
+  }
+  if (width >= breakpoints.xl && width < breakpoints.xxl) {
+    return "xl";
+  }
+  if (width >= breakpoints.xxl && width < breakpoints.xxxl) {
+    return "xxl";
+  }
+  return "xxxl";
+}
+
+export const BreakpointsContext = createContext<BreakpointsContextValue>({activeBreakpoint: "default"});
+
+type Props = {
+  children: JSX.Element;
+  value?: BreakpointsContextValue;
+};
+
+export function BreakpointsContextProvider({children, value = {activeBreakpoint: "default"}}: Props): JSX.Element {
+  return <BreakpointsContext.Provider value={value}>{children}</BreakpointsContext.Provider>;
+}
+
+export function useBreakpoints(): BreakpointsContextValue {
+  return useContext(BreakpointsContext);
+}
+
+export function useResponsiveBreakpoints(ref: RefObject<HTMLElement>): Breakpoints {
+  const [breakpoint, setBreakpoint] = useState("default" as Breakpoints);
+
+  useResizeObserver(ref, (entry) => {
+    setBreakpoint(calculateBreakpoint(entry.borderBoxSize[0].inlineSize));
+  });
+
+  return breakpoint;
+}