@fibery/ui-kit 1.35.0 → 1.36.1

package/src/checkbox.tsx

@@ -0,0 +1,232 @@
+import {useTheme} from "./theme-provider";
+import {css} from "@linaria/core";
+import cx from "classnames";
+import {
+  ChangeEvent,
+  ComponentProps,
+  ComponentPropsWithoutRef,
+  CSSProperties,
+  FC,
+  memo,
+  ReactNode,
+  useEffect,
+  useRef,
+} from "react";
+import {colors, getDarkenColor, getOpacities, layout, space, textStyles, ThemeColors, themeVars} from "./design-system";
+import {smallHtmlStylesClass} from "./html-styles";
+
+const checkboxColor = `--fibery-checkbox-color`;
+const checkboxColorVar = `var(${checkboxColor})`;
+const focusColor = `--fibery-checkbox-focus-color`;
+const focusColorVar = `var(${focusColor})`;
+const hoverColor = `--fibery-checkbox-hover-color`;
+const hoverColorVar = `var(${hoverColor})`;
+const darkenColor = `--fibery-checkbox-darken-color`;
+const darkenColorVar = `var(${darkenColor})`;
+const borderColor = `--fibery-checkbox-border-color`;
+const borderColorVar = `var(${borderColor})`;
+
+const backgroundStyle = css`
+  display: inline-block;
+  position: absolute;
+  width: ${layout.checkboxSize}px;
+  height: ${layout.checkboxSize}px;
+  border-radius: ${space.s3}px;
+  transition: background-color 0.2s, box-shadow 0.2s;
+  box-shadow: 0 0 0 1.5px ${borderColorVar};
+  background-color: ${themeVars.panelBg};
+
+  .${smallHtmlStylesClass} & {
+    width: ${layout.checkboxSize - 2}px;
+    height: ${layout.checkboxSize - 2}px;
+  }
+`;
+
+const checkboxRootStyle = css`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: ${layout.checkboxSize}px;
+  height: ${layout.checkboxSize}px;
+
+  & input[type="checkbox"]:checked + .${backgroundStyle} {
+    background-color: ${checkboxColorVar};
+    box-shadow: 0 0 0 1.5px ${checkboxColorVar} !important;
+  }
+
+  & input[type="checkbox"]:indeterminate + .${backgroundStyle} {
+    background-color: ${checkboxColorVar};
+  }
+
+  &:hover input[type="checkbox"]:not(:disabled) + .${backgroundStyle} {
+    background-color: ${hoverColorVar};
+  }
+
+  &:hover input[type="checkbox"]:checked:not(:disabled) + .${backgroundStyle} {
+    background-color: ${darkenColorVar};
+    box-shadow: 0 0 0 1.5px ${darkenColorVar};
+  }
+
+  &:hover input[type="checkbox"]:checked:focus:not(:disabled) + .${backgroundStyle} {
+    background-color: ${darkenColorVar};
+    box-shadow: 0 0 0 1.5px ${darkenColorVar}, 0 0 0 4px ${focusColorVar};
+  }
+
+  & input[type="checkbox"]:focus + .${backgroundStyle} {
+    box-shadow: 0 0 0 1.5px ${checkboxColorVar}, 0 0 0 4px ${focusColorVar};
+  }
+
+  .${smallHtmlStylesClass} & {
+    width: ${layout.checkboxSize - 2}px;
+    height: ${layout.checkboxSize - 2}px;
+  }
+`;
+
+const disabledCheckboxStyle = css`
+  opacity: 0.3;
+`;
+
+const inputStyle = css`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  opacity: 0;
+  margin: 0;
+  padding: 0;
+  z-index: 1;
+`;
+
+const disabledInputStyle = css`
+  cursor: default;
+`;
+
+const checkmarkStyle = css`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  opacity: 0;
+  transition: transform 0.2s, opacity 0.2s;
+  pointer-events: none;
+  color: ${colors.inversedTextColor};
+  width: ${layout.checkboxSize}px;
+  height: ${layout.checkboxSize}px;
+
+  input[type="checkbox"]:checked ~ & {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+
+  .${smallHtmlStylesClass} & {
+    width: ${layout.checkboxSize - 2}px;
+    height: ${layout.checkboxSize - 2}px;
+  }
+`;
+
+type CheckboxComponentProps = ComponentProps<"input"> & {
+  color?: string;
+  theme: ThemeColors;
+};
+
+const CheckboxComponent = memo(
+  ({color, disabled, theme, checked, defaultChecked, className, ...rest}: CheckboxComponentProps) => {
+    const ref = useRef<HTMLInputElement>(null);
+
+    const indeterminate = checked === null;
+    const defaultIndeterminate = defaultChecked === null;
+    const cColor = color || theme.primaryBlue;
+    const fColor = getOpacities(cColor).opacity25;
+    const hColor = getOpacities(cColor).opacity10;
+    const dColor = getDarkenColor(cColor);
+    const bColor = themeVars.checkboxColor;
+
+    const style = {
+      [checkboxColor]: cColor,
+      [focusColor]: fColor,
+      [hoverColor]: hColor,
+      [darkenColor]: dColor,
+      [borderColor]: bColor,
+    } as CSSProperties;
+
+    useEffect(() => {
+      if (ref.current) {
+        ref.current.indeterminate = checked === null;
+      }
+    }, [checked]);
+
+    return (
+      <span style={style} className={cx(checkboxRootStyle, {[disabledCheckboxStyle]: disabled}, className)}>
+        <input
+          type="checkbox"
+          ref={ref}
+          className={cx(inputStyle, {[disabledInputStyle]: disabled})}
+          disabled={disabled}
+          checked={indeterminate ? true : checked}
+          defaultChecked={defaultIndeterminate ? true : defaultChecked}
+          {...rest}
+        />
+        <span className={backgroundStyle} />
+        <svg
+          viewBox="0 0 16 16"
+          className={checkmarkStyle}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          {indeterminate ? <line x1="4" y1="8" x2="12" y2="8" /> : <path d="M3 8.5L6.5 12L13 4" />}
+        </svg>
+      </span>
+    );
+  }
+);
+
+export const Checkbox: FC<Omit<ComponentPropsWithoutRef<typeof CheckboxComponent>, "theme">> = (props) => {
+  const theme = useTheme();
+  return <CheckboxComponent {...props} theme={theme} />;
+};
+
+const checkboxLabelWrapperStyle = css`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: ${space.s8}px;
+`;
+
+const checkboxLabelTextStyle = css`
+  ${textStyles.regular};
+  flex: 1;
+`;
+
+interface CheckboxWithTextProps {
+  checked?: boolean;
+  disabled?: boolean;
+  color?: string;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  onCheckboxToggleOn?: () => void;
+  onCheckboxToggleOff?: () => void;
+  children?: ReactNode;
+}
+
+export const CheckboxWithText: FC<CheckboxWithTextProps> = ({
+  checked,
+  disabled,
+  color,
+  onChange,
+  onCheckboxToggleOff,
+  onCheckboxToggleOn,
+  children,
+}) => (
+  <label className={checkboxLabelWrapperStyle}>
+    <Checkbox
+      disabled={disabled}
+      checked={checked}
+      onChange={onChange || (checked ? onCheckboxToggleOff : onCheckboxToggleOn)}
+      color={color}
+    />
+    <span className={checkboxLabelTextStyle}>{children}</span>
+  </label>
+);

package/src/collapsible/index.tsx

@@ -0,0 +1,43 @@
+import {styled} from "@linaria/react";
+import * as Collapsible from "@radix-ui/react-collapsible";
+
+export const CollapsibleRoot = Collapsible.Root;
+
+export const CollapsibleTrigger = Collapsible.Trigger;
+
+export const CollapsibleContent = styled(Collapsible.Content)`
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      height: 0;
+      overflow: hidden;
+    }
+    to {
+      opacity: 1;
+      height: var(--radix-collapsible-content-height, 0);
+      overflow: hidden;
+    }
+  }
+
+  @keyframes slideUp {
+    from {
+      opacity: 1;
+      height: var(--radix-collapsible-content-height, 0);
+      overflow: hidden;
+    }
+    to {
+      opacity: 0;
+      height: 0;
+      overflow: hidden;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    &[data-state="open"] {
+      animation: slideDown 200ms ease-out;
+    }
+    &[data-state="closed"] {
+      animation: slideUp 200ms ease-out;
+    }
+  }
+`;

package/src/collapsible-section.tsx

@@ -0,0 +1,69 @@
+import {css, cx} from "@linaria/core";
+import ArrowBottom from "./icons/react/ArrowBottom";
+import ArrowTop from "./icons/react/ArrowTop";
+import {ReactNode, useCallback} from "react";
+import {useControllableState} from "@fibery/react/src/use-controllable-state";
+
+const headerCss = css`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+type Props = {
+  label: ReactNode;
+  collapsible?: boolean;
+  collapsed?: boolean;
+  collapsedDefault?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  children: ReactNode;
+};
+
+export const CollapsibleSection = ({
+  label,
+  collapsible = true,
+  collapsed,
+  collapsedDefault = false,
+  onCollapsedChange,
+  children,
+}: Props) => {
+  const [isCollapsed, setIsCollapsed] = useControllableState({
+    value: collapsed,
+    defaultValue: collapsedDefault,
+    onChange: onCollapsedChange,
+  });
+
+  const arrow = isCollapsed ? <ArrowBottom /> : <ArrowTop />;
+
+  const onToggle = useCallback(() => setIsCollapsed(!isCollapsed), [isCollapsed, setIsCollapsed]);
+
+  const collapsibleHeader = (
+    <div
+      tabIndex={0}
+      className={cx(
+        headerCss,
+        css`
+          cursor: pointer;
+        `
+      )}
+      onClick={onToggle}
+      onKeyDown={(event) => {
+        if (event.key === " ") {
+          onToggle();
+        }
+      }}
+    >
+      {label}
+      {arrow}
+    </div>
+  );
+
+  const regularHeader = label && <div className={headerCss}>{label}</div>;
+
+  return (
+    <div>
+      {collapsible ? collapsibleHeader : regularHeader}
+      {collapsible && isCollapsed ? null : children}
+    </div>
+  );
+};

package/src/color-picker/ColorPickerOrLoader.js

@@ -0,0 +1,23 @@
+import {colors, border, space} from "../design-system";
+import {css} from "@linaria/core";
+import {lazy, Suspense} from "react";
+
+const colorPickerLoaderStyle = css`
+  ${{
+    backgroundColor: colors.inversedTextColor,
+    borderRadius: border.radius4,
+    boxShadow: "rgba(0, 0, 0, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.15) 0px 8px 16px",
+    padding: space.s12,
+  }}
+`;
+
+const LazyColorPicker = lazy(async () => {
+  const {ColorPicker} = await import("./index");
+  return {default: ColorPicker};
+});
+
+export const ColorPickerOrLoader = (props) => (
+  <Suspense fallback={<div className={colorPickerLoaderStyle}>Loading color picker component…</div>}>
+    <LazyColorPicker {...props} />
+  </Suspense>
+);

package/src/color-picker/SliderPointer.js

@@ -0,0 +1,14 @@
+import {css} from "@linaria/core";
+const sliderPointerStyle = css`
+  ${{
+    width: 10,
+    height: 10,
+    borderRadius: "50%",
+    border: "2px solid white",
+    transform: "translate(-7px, 1px)",
+    backgroundColor: "transparent",
+    boxShadow: "rgba(0, 0, 0, 0.37) 0px 1px 4px 0px",
+  }}
+`;
+
+export const SliderPointer = () => <div className={sliderPointerStyle} />;

package/src/color-picker/index.js

@@ -0,0 +1,118 @@
+import {css} from "@linaria/core";
+import {useState} from "react";
+import {ColorWrap, EditableInput, Hue, Saturation} from "react-color/lib/components/common";
+import {CollapsibleContent, CollapsibleRoot, CollapsibleTrigger} from "../collapsible";
+import {border, space, textStyles, themeVars} from "../design-system";
+import {SliderPointer} from "./SliderPointer";
+import {Swatch} from "./swatch";
+
+const pickerWrapperCss = css``;
+
+const colorSwatchContainerCss = css`
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+`;
+
+const saturationWrapperCss = css`
+  margin-top: ${space.s6}px;
+  position: relative;
+  height: 100px;
+`;
+
+const hueWrapperCss = css`
+  height: 12px;
+  position: relative;
+`;
+
+const hexInpuWrapperCss = css`
+  position: relative;
+  margin-top: ${space.s12}px;
+`;
+
+const SliderPicker = ColorWrap(({containerClassName, colors, getSwatchHoverColor, ...rest}) => {
+  const hasSelectedColor = Boolean(rest.color);
+
+  const idxSelectedColor = colors?.findIndex((color) => color.toLowerCase() === rest.hex.toLowerCase());
+
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const isCustomSwatchSelected = (idxSelectedColor === -1 && hasSelectedColor) || isExpanded;
+
+  return (
+    <CollapsibleRoot open={isCustomSwatchSelected} onOpenChange={setIsExpanded} className={pickerWrapperCss}>
+      {colors && (
+        <div className={containerClassName}>
+          {colors.map((color, idx) => (
+            <Swatch
+              key={color}
+              getHoverColor={getSwatchHoverColor}
+              onClick={() => {
+                setIsExpanded(false);
+                rest.onChange(color);
+              }}
+              color={color}
+              selected={!isCustomSwatchSelected && idxSelectedColor === idx}
+            />
+          ))}
+          <CollapsibleTrigger asChild>
+            <Swatch
+              custom
+              getHoverColor={getSwatchHoverColor}
+              onClick={() => setIsExpanded(!isExpanded)}
+              selected={isCustomSwatchSelected}
+              color={isCustomSwatchSelected ? rest.hex : undefined}
+            />
+          </CollapsibleTrigger>
+        </div>
+      )}
+
+      <CollapsibleContent>
+        <div className={saturationWrapperCss}>
+          <Saturation {...rest} pointer={SliderPointer} />
+        </div>
+        <div className={hueWrapperCss}>
+          <Hue {...rest} pointer={SliderPointer} />
+        </div>
+        <div className={hexInpuWrapperCss}>
+          <EditableInput
+            style={{
+              input: {
+                padding: `${space.s6}px ${space.s12}px`,
+                width: "100%",
+                border: "none",
+                borderRadius: border.radius6,
+                backgroundColor: themeVars.actionMenuBg,
+                boxShadow: themeVars.inputBorderColor,
+                outline: "none",
+                ...textStyles.regular,
+              },
+            }}
+            value={rest.hex}
+            onChange={rest.onChange}
+          />
+        </div>
+      </CollapsibleContent>
+    </CollapsibleRoot>
+  );
+});
+
+export const ColorPicker = ({
+  color,
+  getSwatchHoverColor,
+  colors,
+  onChangeComplete,
+  containerClassName = colorSwatchContainerCss,
+}) => {
+  const [optimisticColor, setOptimisticColor] = useState(color);
+
+  return (
+    <SliderPicker
+      containerClassName={containerClassName}
+      color={optimisticColor}
+      getSwatchHoverColor={getSwatchHoverColor}
+      colors={colors}
+      onChange={setOptimisticColor}
+      onChangeComplete={onChangeComplete}
+    />
+  );
+};

package/src/color-picker/swatch.tsx

@@ -0,0 +1,85 @@
+import {CSSProperties, css, cx} from "@linaria/core";
+import {forwardRef} from "react";
+import {IconButton, IconButtonProps} from "../button/icon-button";
+import {themeVars} from "../design-system";
+
+const swatchContainerCss = css`
+  &:hover:not(:disabled),
+  &:focus-visible {
+    background-color: var(--fibery-swatch-hover-color, ${themeVars.badgeBgColor});
+  }
+`;
+
+const swatchCss = css`
+  position: relative;
+  border-radius: 100%;
+  width: 20px;
+  height: 20px;
+  border: 1px solid ${themeVars.colorPickerSwatchBorder};
+  background-color: var(--swatch-color);
+`;
+
+const selectedCss = css`
+  &::after {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 16px;
+    height: 16px;
+    border-radius: 100%;
+    top: 1px;
+    left: 1px;
+    border: 1.5px solid ${themeVars.whiteColor};
+  }
+`;
+
+const customCss = css`
+  background: radial-gradient(50% 50% at 50% 50%, #ffffff 0%, transparent 100%),
+    conic-gradient(
+        from 0deg at 50% 50%,
+        #ff0000 0deg,
+        #ffa800 47.73deg,
+        #ffff00 79.56deg,
+        #00ff00 121.33deg,
+        #00ffff 180.99deg,
+        #0000ff 238.67deg,
+        #ff00ff 294.36deg,
+        #ff0000 360deg
+      )
+      border-box,
+    #c4c4c4;
+
+  &.${selectedCss} {
+    &::after {
+      background-color: var(--swatch-color);
+    }
+  }
+`;
+
+type SwatchProps = {
+  color: string;
+  getHoverColor?: (color: string) => string | undefined;
+  selected: boolean;
+  custom?: boolean;
+} & Omit<IconButtonProps, "size">;
+export const Swatch = forwardRef<HTMLButtonElement, SwatchProps>(
+  ({color, getHoverColor, selected, custom, className, ...rest}, ref) => {
+    return (
+      <IconButton
+        ref={ref}
+        size="large"
+        title={color}
+        style={
+          {
+            "--swatch-color": color,
+            "--fibery-swatch-hover-color": color ? getHoverColor?.(color) : undefined,
+          } as CSSProperties
+        }
+        className={cx(swatchContainerCss, className)}
+        {...rest}
+      >
+        <div className={cx(swatchCss, custom && customCss, selected && selectedCss)}></div>
+      </IconButton>
+    );
+  }
+);