@fibery/ui-kit 1.35.0 → 1.36.0

package/src/date-picker/with-popup-control.tsx

@@ -0,0 +1,61 @@
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {css} from "@linaria/core";
+import {useCallback, useEffect, useRef, useState} from "react";
+import {ControlledDatePickerProps} from "./types";
+
+const noOutline = css`
+  outline: none;
+`;
+
+export const withPopupControl = <P extends object>(Component: React.ComponentType<P & ControlledDatePickerProps>) =>
+  function WithPopupControl(props: P) {
+    const [open, setOpen] = useState(false);
+    const timeoutIdRef = useRef<ReturnType<typeof setTimeout>>();
+
+    const onOpen = useCallback(() => {
+      timeoutIdRef.current = setTimeout(() => {
+        setOpen(true);
+      }, 0);
+    }, []);
+
+    const onClose = useCallback(() => {
+      timeoutIdRef.current = setTimeout(() => {
+        setOpen(false);
+        // Input needs to fire onBlur before unmounting
+      }, 0);
+    }, []);
+
+    useEffect(() => {
+      return () => {
+        if (timeoutIdRef.current) {
+          clearTimeout(timeoutIdRef.current);
+        }
+      };
+    }, []);
+
+    const onKeyDown = (event: React.KeyboardEvent) => {
+      const cmdKeyPressed = event.metaKey || event.ctrlKey;
+      if (event.key === "Enter" && cmdKeyPressed) {
+        event.preventDefault();
+      }
+      if (event.key === "Escape" && open) {
+        event.stopPropagation();
+        setOpen(false);
+      } else if (((event.key === "Enter" && !cmdKeyPressed) || event.key === " ") && !open) {
+        event.preventDefault();
+        setOpen(true);
+      }
+    };
+
+    return (
+      <div
+        onKeyDown={onKeyDown}
+        className={noOutline}
+        onClick={stopPropagation}
+        onMouseDown={stopPropagation}
+        onMouseUp={stopPropagation}
+      >
+        <Component {...props} open={open} onOpen={onOpen} onClose={onClose} />
+      </div>
+    );
+  };

package/src/day-select/day-select.tsx

@@ -0,0 +1,94 @@
+import {ChangeEvent} from "react";
+import {css} from "@linaria/core";
+import {colors, themeVars} from "../design-system";
+import {inputOverrides} from "../antd/styles";
+
+export type Props<T extends number> = {
+  value: Array<T>;
+  onChange: (v: Array<T>) => void;
+  days: Array<{key: string; title: string; value: T}>;
+  allowEmpty?: boolean;
+};
+
+const daySize = "28px";
+
+const checkboxInput = css`
+  position: absolute;
+  appearance: none;
+`;
+
+const checkbox = css`
+  position: absolute;
+  border-radius: 50%;
+  font-size: 14px;
+  width: ${daySize};
+  height: ${daySize};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${themeVars.accentTextColor};
+  background-color: ${themeVars.unitBg};
+  .${checkboxInput}:checked + & {
+    color: ${colors.inversedTextColor};
+    background-color: ${themeVars.primary};
+  }
+  .${checkboxInput}:focus-visible + & {
+    ${inputOverrides.focus}
+  }
+`;
+
+function Day<T extends number>({
+  value,
+  onChange,
+  checked,
+  title,
+}: {
+  value: T;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  checked: boolean;
+  title: string;
+}): JSX.Element {
+  return (
+    <label
+      className={css`
+        cursor: pointer;
+        position: relative;
+        width: ${daySize};
+        height: ${daySize};
+      `}
+    >
+      <input className={checkboxInput} onChange={onChange} checked={checked} type="checkbox" value={value} />
+      <div className={checkbox}>{title}</div>
+    </label>
+  );
+}
+
+export function DaySelect<T extends number>({value = [], onChange, days, allowEmpty = false}: Props<T>): JSX.Element {
+  return (
+    <div
+      className={css`
+        grid-template-columns: repeat(7, min-content);
+        gap: 4px;
+        display: grid;
+      `}
+    >
+      {days.map(({key, value: v, title}) => {
+        return (
+          <Day
+            checked={value.includes(v)}
+            onChange={({currentTarget: {checked}}) => {
+              if (checked) {
+                onChange(value.concat(v));
+              } else if (allowEmpty || value.length > 1) {
+                onChange(value.filter((val) => val !== v));
+              }
+            }}
+            key={key}
+            title={title}
+            value={v}
+          />
+        );
+      })}
+    </div>
+  );
+}

package/src/day-select/iso-week-day-select.tsx

@@ -0,0 +1,15 @@
+import _ from "lodash";
+import {DaySelect, Props} from "./day-select";
+import moment from "moment";
+
+const isoWeekDays = _.range(1, 8).map((day) => {
+  return {
+    key: String(day),
+    title: moment().isoWeekday(day).format("dd").charAt(0),
+    value: day,
+  };
+});
+
+export function IsoWeekdaySelect({value, onChange, allowEmpty}: Omit<Props<number>, "days">): JSX.Element {
+  return <DaySelect value={value} onChange={onChange} days={isoWeekDays} allowEmpty={allowEmpty} />;
+}

package/src/day-select/mount-day-select.tsx

@@ -0,0 +1,11 @@
+import {DaySelect, Props} from "./day-select";
+
+const days = Array.from({length: 28}).map((_, index) => {
+  const value = index + 1;
+  const key = String(value);
+  return {key: String(value), title: key, value};
+});
+
+export function MonthdaySelect({value = [], onChange}: Omit<Props<number>, "days">): JSX.Element {
+  return <DaySelect value={value} onChange={onChange} days={days} />;
+}

package/src/day-select/week-day-select.test.tsx

@@ -0,0 +1,48 @@
+import {getDays} from "./week-day-select";
+
+describe("getDays", () => {
+  it("monday", () => {
+    expect(getDays(0)).toEqual([
+      {key: "MO", title: "M", value: 0},
+      {key: "TU", title: "T", value: 1},
+      {key: "WE", title: "W", value: 2},
+      {key: "TH", title: "T", value: 3},
+      {key: "FR", title: "F", value: 4},
+      {key: "SA", title: "S", value: 5},
+      {key: "SU", title: "S", value: 6},
+    ]);
+  });
+  it("wednesday", () => {
+    expect(getDays(2)).toEqual([
+      {key: "WE", title: "W", value: 2},
+      {key: "TH", title: "T", value: 3},
+      {key: "FR", title: "F", value: 4},
+      {key: "SA", title: "S", value: 5},
+      {key: "SU", title: "S", value: 6},
+      {key: "MO", title: "M", value: 0},
+      {key: "TU", title: "T", value: 1},
+    ]);
+  });
+  it("saturday", () => {
+    expect(getDays(5)).toEqual([
+      {key: "SA", title: "S", value: 5},
+      {key: "SU", title: "S", value: 6},
+      {key: "MO", title: "M", value: 0},
+      {key: "TU", title: "T", value: 1},
+      {key: "WE", title: "W", value: 2},
+      {key: "TH", title: "T", value: 3},
+      {key: "FR", title: "F", value: 4},
+    ]);
+  });
+  it("sunday", () => {
+    expect(getDays(6)).toEqual([
+      {key: "SU", title: "S", value: 6},
+      {key: "MO", title: "M", value: 0},
+      {key: "TU", title: "T", value: 1},
+      {key: "WE", title: "W", value: 2},
+      {key: "TH", title: "T", value: 3},
+      {key: "FR", title: "F", value: 4},
+      {key: "SA", title: "S", value: 5},
+    ]);
+  });
+});

package/src/day-select/week-day-select.tsx

@@ -0,0 +1,42 @@
+import _ from "lodash";
+import {DaySelect, Props} from "./day-select";
+
+export enum Days {
+  MO = 0,
+  TU = 1,
+  WE = 2,
+  TH = 3,
+  FR = 4,
+  SA = 5,
+  SU = 6,
+}
+
+const WeekDayMap = {
+  MO: Days.MO,
+  TU: Days.TU,
+  WE: Days.WE,
+  TH: Days.TH,
+  FR: Days.FR,
+  SA: Days.SA,
+  SU: Days.SU,
+};
+
+export const getDays = _.memoize((firstDay) => {
+  const entries = Object.entries(WeekDayMap);
+  const firstDayIndex = entries.findIndex((entry) => entry[1] === firstDay);
+  const partA = entries.slice(firstDayIndex);
+  const partB = firstDayIndex === 0 ? [] : entries.slice(0, firstDayIndex);
+  const sortedArr = [...partA, ...partB];
+  return sortedArr.map(([key, v]) => {
+    return {key: key, title: key[0], value: v};
+  });
+});
+
+export function WeekdaySelect({
+  value = [],
+  onChange,
+  firstDay,
+}: Omit<Props<Days>, "days"> & {firstDay: number}): JSX.Element {
+  const days = getDays(firstDay);
+  return <DaySelect value={value} onChange={onChange} days={days} />;
+}

package/src/delayed.tsx

@@ -0,0 +1,26 @@
+import React, {useEffect, useState} from "react";
+
+export const defaultLoaderDelay = 1000;
+
+export const Delayed: React.FC<React.PropsWithChildren<{delayMs: number}>> = ({children, delayMs}) => {
+  const [isVisible, setVisible] = useState(delayMs === 0);
+
+  useEffect(() => {
+    if (!delayMs) {
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      return () => {};
+    }
+
+    const timeout = window.setTimeout(() => {
+      setVisible(true);
+    }, delayMs);
+
+    return () => {
+      window.clearTimeout(timeout);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33006
+  return isVisible ? (children as React.ReactElement) : null;
+};

package/src/design-system.test.ts

@@ -0,0 +1,24 @@
+import {getLightColors, getDarkColors, getLight2Colors} from "./design-system";
+
+function getKeys(colors: Record<string, string | Record<string, string>>) {
+  const keys = [];
+  for (const [key, value] of Object.entries(colors)) {
+    if (typeof value === "string") {
+      keys.push(key);
+    } else {
+      const nestedKeys: Record<string, string[]> = {[key]: []};
+      for (const [nestedKey] of Object.entries(value)) {
+        nestedKeys[key].push(nestedKey);
+      }
+      keys.push(nestedKeys);
+    }
+  }
+  return keys.sort();
+}
+it("dark and light color should have the same keys", () => {
+  const lKeys = getKeys(getLightColors());
+  const dKeys = getKeys(getDarkColors());
+  const l2Keys = getKeys(getLight2Colors());
+  expect(lKeys).toEqual(dKeys);
+  expect(l2Keys).toEqual(dKeys);
+});

package/src/design-system.ts

@@ -22,11 +22,11 @@ import {
 } from "./palette";
 import {ThemeMode} from "./theme-settings";
 
-export const typeSizes = [32, 24, 18, 16, 14, 12, 10, 8] as const;
+export const typeSizes = [30, 24, 18, 16, 14, 12, 10, 8] as const;
 
 export const fontWeight = {
-  light: 300,
-  regular: 400,
+  light: 310, // 300 basic, 310 experiment with a variable Inter
+  regular: 410, // 400 basic, 410 experiment with a variable Inter
   medium: 500,
   semibold: 600,
   bold: 700,
@@ -588,6 +588,9 @@ export const themeColors = {
   timelineDependencyHoverBgColor: [indigo.indigo8, indigoDark.indigo8],
   timelineDependencyOverlapBgColor: [red.red9, redDark.red9],
   timelineDependencyOverlapHoverBgColor: [red.red11, redDark.red11],
+  timelineCellBgColor: [slate.slate1, slateDark.slate1],
+  timelineCellWeekendBgColor: [slate.slate2, slateDark.slate2],
+  timelineCellTodayBgColor: [indigo.indigo2, indigoDark.indigo2],
 
   // #region buttons
   // solid
@@ -852,14 +855,15 @@ const colorsByTheme: Record<string, DesignColor> = {
 };
 
 export const getThemeColors: (themeColor: string, theme: ThemeMode) => ThemeColors = _.memoize(
-  (themeColor: string, theme: ThemeMode = getDefaultTheme()): ThemeColors => {
+  (_themeColor: string, theme: ThemeMode = getDefaultTheme()): ThemeColors => {
+    const cl = brandColors.blue;
     const colors = colorsByTheme[theme];
     return {
-      ...getTypeColors(themeColor, theme),
+      ...getTypeColors(cl, theme),
       ...colors,
     };
   },
-  (themeColor, theme) => themeColor + theme
+  (_themeColor, theme) => theme
 );
 
 export const getTextColor = _.memoize((color: string): string => {
@@ -995,9 +999,9 @@ export const layout = {
   viewSetupMinWidth: 380,
   inputHeight: 36, //TODO: merge input and item height?
   timelineToolbarHeight: 48,
-  timelineLineHeight: 48,
+  timelineLineHeight: 40,
   timelineGroupPadding: 0,
-  timelineItemHeightRatio: 36 / 48,
+  timelineItemHeightRatio: 32 / 40,
   timelineHeaderHeight: 48,
   calendarEventHeight: 30,
   calendarHeaderHeight: 30,
@@ -1077,7 +1081,7 @@ export const getObjectColorMemoized = _.memoize((name) => {
   return colorHash.hex(name);
 });
 
-export const themeVars = Object.keys(getThemeColors(brandColors.green, "light")).reduce((vars, key) => {
+export const themeVars = Object.keys(getThemeColors(brandColors.blue, "light")).reduce((vars, key) => {
   if (key === "opacity") {
     vars[key] = Object.fromEntries(
       Object.keys(opacity).map((opacityKey) => [opacityKey, `var(--${varPrefix}-opacity-${opacityKey})`])
@@ -1250,4 +1254,14 @@ export const textStyles = {
     border: `1px solid ${themeVars.active}`,
     borderRadius: border.radius6,
   },
+  numeric: {
+    tabularOn: {
+      fontVariantNumeric: "tabular-nums",
+      fontFeatureSettings: '"tnum" 1',
+    },
+    tabularOff: {
+      fontVariantNumeric: "normal",
+      fontFeatureSettings: '"tnum" 0',
+    },
+  },
 } as const;

package/src/dnd.tsx

@@ -0,0 +1,55 @@
+import {css, cx} from "@linaria/core";
+import {FC, HTMLAttributes, PropsWithChildren} from "react";
+import {border, space, themeVars} from "./design-system";
+import DragHandleIcon from "./icons/react/DragHandle";
+
+export const draggingStyle = {
+  backgroundColor: themeVars.actionMenuBg,
+  borderRadius: border.radius6,
+  boxShadow: themeVars.entityCardShadowHover,
+};
+
+const dragHandlerStyle = css`
+  ${{
+    paddingTop: space.s2,
+    paddingBottom: space.s2,
+    borderRadius: border.radius4,
+    display: "flex",
+    alignItems: "center",
+    "&:focus-visible": {outline: "none", backgroundColor: themeVars.opacity.opacity15},
+  }}
+`;
+
+export const DragHandler: FC<{disabled?: boolean; preserveOnHide?: boolean} & HTMLAttributes<HTMLDivElement>> = ({
+  disabled = false,
+  preserveOnHide = false,
+  className,
+  ...rest
+}) => {
+  return (
+    <div
+      style={{visibility: disabled ? "hidden" : "visible", width: disabled && !preserveOnHide ? "0" : "auto"}}
+      className={cx(dragHandlerStyle, className)}
+      {...rest}
+    >
+      <DragHandleIcon containerSize={16} color={themeVars.iconColor} />
+    </div>
+  );
+};
+const dragContainerStyle = css`
+  ${{
+    padding: space.s6,
+  }}
+`;
+
+export const DragContainer: FC<PropsWithChildren<{isDragging: boolean; className?: string}>> = ({
+  isDragging,
+  children,
+  className,
+}) => {
+  return (
+    <div className={cx(dragContainerStyle, className)} style={isDragging ? draggingStyle : undefined}>
+      {children}
+    </div>
+  );
+};

package/src/emoji.tsx

@@ -0,0 +1,30 @@
+import {styled} from "@linaria/react";
+import {themeVars} from "./design-system";
+
+type Props = {
+  symbol: string;
+  label?: string;
+  size?: number;
+  inline?: boolean;
+  onClick?: () => unknown;
+};
+
+const StyledEmoji = styled.span<{size: number; inline: boolean}>`
+  color: ${themeVars.warning};
+  font-size: ${(props) => props.size}em;
+  vertical-align: baseline;
+  line-height: ${(props) => (props.inline ? 1 : "auto")};
+  cursor: ${(props) => (props.onClick ? "pointer" : "inherit")};
+`;
+
+export const Emoji = ({symbol, label = "", size = 1.4, inline = true, onClick}: Props): JSX.Element => {
+  const ariaLabelProps = {
+    ...(label && {label: label}),
+    ...(!label && {"aria-hidden": true}),
+  };
+  return (
+    <StyledEmoji size={size} inline={inline} role="img" onClick={onClick} {...ariaLabelProps}>
+      {symbol}
+    </StyledEmoji>
+  );
+};

package/src/empty-state/empty-state-action.tsx

@@ -0,0 +1,3 @@
+import {Button} from "../button/button";
+
+export const EmptyStateAction = Button;

package/src/empty-state/empty-state-emoji.tsx

@@ -0,0 +1,20 @@
+import {css} from "@linaria/core";
+import {Emoji} from "../emoji-picker/emoji";
+
+const emptyStateEmojiCss = css`
+  font-size: 56px;
+  line-height: 70px;
+  letter-spacing: -1.12px;
+`;
+
+const emptyStateCompactEmojiCss = css`
+  font-size: 40px;
+  line-height: 50px;
+  letter-spacing: -0.8px;
+`;
+
+export const EmptyStateEmoji = ({emoji, compact}: {emoji: string; compact?: boolean}) => (
+  <div className={compact ? emptyStateCompactEmojiCss : emptyStateEmojiCss}>
+    <Emoji emoji={emoji} />
+  </div>
+);

package/src/empty-state/empty-state.tsx

@@ -0,0 +1,80 @@
+import {css, cx} from "@linaria/core";
+import {fontWeight, space, textStyles, themeVars} from "../design-system";
+
+const emptyStateCss = css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: ${space.s16}px;
+  padding: 0 ${space.s12}px ${space.s48}px ${space.s12}px;
+`;
+
+const stretchCss = css`
+  height: 100%;
+`;
+
+const contentCss = css`
+  display: flex;
+
+  /* Without it description can expand content bigger than parent is (e.g. ErrorPrinter for error stacks) */
+  max-width: 100%;
+
+  flex-direction: column;
+  align-items: center;
+  gap: ${space.s6}px;
+`;
+
+const headingCss = css`
+  ${textStyles.regular};
+  font-weight: ${fontWeight.semibold};
+  color: ${themeVars.textColor};
+  margin: 0;
+`;
+const descriptionCss = css`
+  ${textStyles.regular};
+  color: ${themeVars.accentTextColor};
+  margin: 0;
+
+  /* Without it description can expand content bigger than parent is (e.g. ErrorPrinter for error stacks) */
+  max-width: 100%;
+
+  &[data-compact] {
+    ${textStyles.small};
+    color: ${themeVars.accentTextColor};
+  }
+`;
+
+type EmptyStateProps = {
+  illustration: React.ReactNode;
+  heading: string;
+  description: React.ReactNode;
+  action?: React.ReactNode;
+
+  stretch?: boolean;
+  // TODO: better to use @container size query
+  compact?: boolean;
+};
+export const EmptyState: React.FC<EmptyStateProps> = ({
+  illustration,
+  heading,
+  description,
+  action,
+  stretch,
+  compact = false,
+}) => {
+  return (
+    <div className={cx(emptyStateCss, stretch && stretchCss)}>
+      <div className={contentCss}>
+        {illustration}
+        <h2 className={headingCss}>{heading}</h2>
+        <div data-compact={compact ? "" : undefined} className={descriptionCss}>
+          {description}
+        </div>
+      </div>
+
+      {action}
+    </div>
+  );
+};

package/src/empty-value.tsx

@@ -0,0 +1,21 @@
+import {css, cx} from "@linaria/core";
+import {FC, ReactNode} from "react";
+import {themeVars} from "./design-system";
+import {ellipsis} from "./styles-utils";
+
+interface EmptyValueProps {
+  children?: ReactNode;
+}
+
+export const EmptyValue: FC<EmptyValueProps> = ({children}) => (
+  <span
+    className={cx(
+      css`
+        color: ${themeVars.inputPlaceholderTextColor};
+      `,
+      ellipsis
+    )}
+  >
+    {children}
+  </span>
+);

package/src/errors.ts

@@ -0,0 +1,29 @@
+import {$TSFixMe} from "./tsfixme";
+
+export class MissingArgError extends Error {
+  constructor(arg: string) {
+    super(arg + " arg is missing");
+  }
+}
+
+export const throwError = (message: string): $TSFixMe => {
+  throw new Error(message);
+};
+
+export const throwMissingArgError = (arg: string): $TSFixMe => {
+  throw new MissingArgError(arg);
+};
+
+const stringify = (x: unknown) => {
+  if (x === undefined) {
+    return "undefined";
+  }
+  return JSON.stringify(x);
+};
+
+export const asError = (x: unknown) => {
+  if (x instanceof Error) {
+    return x;
+  }
+  return new Error(`non-error thrown: ${stringify(x)}`);
+};