@fibery/ui-kit 1.35.0 → 1.36.0

package/src/antd/Tabs.js

@@ -0,0 +1,58 @@
+import Tabs from "antd/lib/tabs";
+import {forwardRef} from "react";
+import {css, cx} from "@linaria/core";
+import "antd/lib/tabs/style/css";
+import {wrapWith} from "./utils";
+import {textStyles, space, themeVars} from "../design-system";
+
+export const tabsStyles = css`
+  ${{
+    width: "100%",
+    "& .ant-tabs-bar": {
+      margin: 0,
+    },
+    "& .ant-tabs-nav-wrap": {
+      marginBottom: 1,
+      marginLeft: space.s12,
+      marginRight: space.s12,
+    },
+    "& .ant-tabs": {
+      overflow: "visible",
+    },
+    "& .ant-tabs-ink-bar": {
+      backgroundColor: themeVars.primary,
+      height: 2,
+    },
+    "& .ant-tabs-nav": {
+      margin: 0,
+      width: "100%",
+    },
+    "& .ant-tabs-tab, & .ant-tabs-tab:hover, & .ant-tabs-tab-btn:active, & .ant-tabs-tabpane, & .ant-tabs-tab-active .ant-tabs-tab-btn":
+      {
+        ...textStyles.regular,
+        textShadow: "none",
+      },
+    "& .ant-tabs-tab": {
+      padding: "12px 12px",
+      margin: `0 ${space.s8}px 0 0`,
+    },
+    "& .ant-tabs-tab + .ant-tabs-tab": {
+      margin: `0 ${space.s8}px 0 0`,
+    },
+    ".ant-tabs-top > .ant-tabs-nav::before": {
+      borderBottom: `1px solid ${themeVars.filterGroupBorder}`,
+    },
+  }}
+`;
+
+function getWrapper() {
+  return forwardRef(function TabWrapper({children, className}, ref) {
+    return (
+      <div className={cx(className, tabsStyles)} ref={ref}>
+        {children}
+      </div>
+    );
+  });
+}
+
+export const AntTabs = wrapWith(getWrapper(tabsStyles), Tabs);

package/src/antd/ant-modal.tsx

@@ -0,0 +1,11 @@
+import Modal from "antd/lib/modal";
+import {ModalProps} from "antd/lib/modal/Modal";
+import "antd/lib/modal/style/css";
+import {createInlineTheme} from "../design-system";
+import {useTheme} from "../theme-provider";
+
+export function AntModal({bodyStyle = {}, className, ...restProps}: ModalProps) {
+  const theme = useTheme();
+  const inlineTheme = createInlineTheme(theme);
+  return <Modal bodyStyle={{...bodyStyle, ...inlineTheme}} className={className} {...restProps} />;
+}

package/src/antd/ant-upload.tsx

@@ -0,0 +1,73 @@
+import Upload, {UploadProps} from "antd/lib/upload";
+import {ComponentPropsWithoutRef, forwardRef, FunctionComponent, PropsWithChildren} from "react";
+import {css, cx} from "@linaria/core";
+import "antd/lib/upload/style/css";
+
+import {border, space, themeVars, transition} from "../design-system";
+import {wrapWith} from "./utils";
+import {UploadFile} from "antd/lib/upload/interface";
+
+function getWrapper(wrapperClassName: string) {
+  return forwardRef<HTMLDivElement, ComponentPropsWithoutRef<"div">>(function UploadWrapper(
+    {className, ...props},
+    ref: React.ForwardedRef<HTMLDivElement>
+  ) {
+    return <div className={cx(className, wrapperClassName)} ref={ref} {...props} />;
+  });
+}
+
+export const antUploadStyle = css`
+  ${{
+    display: "flex",
+    alignItems: "stretch",
+    alignContent: "stretch",
+    "& > span": {
+      display: "flex",
+      flex: 1,
+      alignItems: "stretch",
+      alignContent: "stretch",
+    },
+    "& .ant-upload.ant-upload-drag, .ant-upload.ant-upload-select-picture-card": {
+      border: `1px dashed ${themeVars.separator}`,
+      position: "relative",
+      backgroundColor: themeVars.transparent,
+      borderRadius: border.radius6,
+      transition: `border-color ${transition}`,
+      margin: 0,
+      flex: 1,
+      alignSelf: "stretch",
+      display: "flex",
+      alignItems: "center",
+      alignContent: "center",
+      width: "auto",
+      height: "auto",
+      "&.ant-upload-disabled": {
+        cursor: "not-allowed",
+        "&:hover": {
+          border: `1px dashed ${themeVars.separator}`,
+        },
+      },
+      "& > .ant-upload": {
+        display: "flex",
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "stretch",
+        alignContent: "stretch",
+        padding: space.s8,
+      },
+      "&.ant-upload-drag-hover": {
+        border: `1px dashed ${themeVars.primary}`,
+        transition: "none",
+      },
+      "&:hover": {
+        border: `1px dashed ${themeVars.primary}`,
+        transition: "none",
+      },
+    },
+  }}
+`;
+
+export const AntUpload = wrapWith(getWrapper(antUploadStyle), Upload) as FunctionComponent<
+  PropsWithChildren<UploadProps>
+>;
+export type {UploadFile};

package/src/antd/auto-width-transparent-textarea.tsx

@@ -0,0 +1,56 @@
+import TextArea from "antd/lib/input/TextArea";
+import {TransparentInputWrapper} from "./input";
+import {forwardRef, useRef} from "react";
+import {css, cx} from "@linaria/core";
+import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
+
+type AutoWidthTransparentTextAreaProps = React.ComponentPropsWithoutRef<typeof TextArea> & {
+  wrapperClassName?: string;
+  bypassedRef?: React.ForwardedRef<React.ElementRef<typeof TextArea>>;
+};
+
+const wrapper = css`
+  display: inline-grid;
+
+  /* TODO: can be replaced with field-sizing: content;  once we get better browser support */
+  &::after {
+    content: attr(data-value);
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    visibility: hidden;
+    display: block;
+    grid-area: 1 / 1;
+    min-width: 0;
+
+    /* height auto-size is managed by antd */
+    height: 1px;
+  }
+`;
+const textArea = css`
+  grid-area: 1 / 1;
+`;
+
+export const AutoWidthTransparentTextArea = forwardRef<HTMLDivElement, AutoWidthTransparentTextAreaProps>(
+  function AutoWidthTransparentTextArea({onChange, style, className, wrapperClassName, ...props}, ref) {
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const composedRef = useComposedRefs(ref, wrapperRef);
+
+    const handleChange: React.ChangeEventHandler<HTMLTextAreaElement> = (e) => {
+      if (wrapperRef.current) {
+        wrapperRef.current.dataset.value = e.target.value;
+      }
+
+      onChange?.(e);
+    };
+
+    return (
+      <TransparentInputWrapper
+        className={cx(wrapper, wrapperClassName)}
+        data-value={props.value || props.placeholder}
+        ref={composedRef}
+      >
+        <TextArea className={cx(textArea, className)} style={style} onChange={handleChange} cols={1} {...props} />
+      </TransparentInputWrapper>
+    );
+  }
+);

package/src/antd/get-wrapper.tsx

@@ -0,0 +1,11 @@
+import {cx} from "@linaria/core";
+import {forwardRef} from "react";
+
+export function getWrapper(wrapperClassName: string) {
+  return forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<"div">>(function InputWrapper(
+    {className, ...props},
+    ref
+  ) {
+    return <div ref={ref} className={cx(className, wrapperClassName)} {...props} />;
+  });
+}

package/src/antd/index.tsx

@@ -0,0 +1,4 @@
+import {StyledInput, StyledTextArea} from "./input";
+
+export const AntInput = StyledInput;
+export const AntTextArea = StyledTextArea;

package/src/antd/input-number.tsx

@@ -0,0 +1,51 @@
+import InputNumber from "antd/lib/input-number";
+import "antd/lib/input-number/style/css";
+import {css} from "@linaria/core";
+import {textStyles, themeVars} from "../design-system";
+import {getWrapper} from "./get-wrapper";
+import {wrapWith} from "./utils";
+import {inputOverrides} from "./styles";
+
+const inputNumberStyles = css`
+  ${{
+    "& .ant-input-number": {
+      height: "auto",
+      border: "none",
+      ...textStyles.regular,
+      backgroundColor: themeVars.transparent,
+    },
+    "& .ant-input-number-handler-wrap": {
+      top: 1,
+      bottom: 1,
+      right: 1,
+      height: "auto",
+      backgroundColor: themeVars.transparent,
+      background: themeVars.transparent,
+    },
+    "& .ant-input-number-focused": {boxShadow: "none"},
+    "& .ant-input-number-handler-down": {borderTop: `1px solid ${themeVars.separatorColor} !important`},
+    "& .ant-input-number-input:hover": inputOverrides.hover,
+    "& .ant-input-number-input:focus, & .ant-input-number-input:active, & .ant-input-number-focused .ant-input-number-input":
+      inputOverrides.focus,
+    "& .ant-input-number-input": inputOverrides.main,
+    "& .ant-input-number-disabled": {backgroundColor: themeVars.transparent},
+    "& .ant-input-number-disabled .ant-input-number-input": inputOverrides.disabled,
+    "& .ant-input-number-handler-up-inner, &  .ant-input-number-handler-down-inner": {
+      color: themeVars.iconColor,
+    },
+    "& .ant-input-number-handler": {
+      color: themeVars.iconColor,
+      borderLeft: `1px solid ${themeVars.separatorColor}`,
+      "&:active": {
+        backgroundColor: themeVars.transparent,
+      },
+      "&:hover": {
+        "& .ant-input-number-handler-up-inner, &  .ant-input-number-handler-down-inner": {
+          color: themeVars.textColor,
+        },
+      },
+    },
+  }}
+`;
+
+export const AntInputNumber = wrapWith(getWrapper(inputNumberStyles), InputNumber);

package/src/antd/input.tsx

@@ -0,0 +1,56 @@
+import {getWrapper} from "./get-wrapper";
+import Input from "antd/lib/input";
+import "antd/lib/input/style/css";
+import {css} from "@linaria/core";
+import {opacity, textStyles, themeVars} from "../design-system";
+
+import {inputStyles} from "./styles";
+import {wrapWith} from "./utils";
+
+const TextArea = Input.TextArea;
+
+export const transparentInputStyle = css`
+  ${{
+    "& input, & textarea, & .ant-input-affix-wrapper": {
+      padding: 0,
+      border: "none",
+      width: "100%",
+      resize: "none",
+      borderRadius: 0,
+      backgroundColor: themeVars.transparent,
+      transition: "none",
+      ...textStyles.regular,
+      ...textStyles.numeric.tabularOff,
+    },
+    "& textarea.ant-input": {
+      fontVariant: "inherit",
+    },
+    "& input.ant-input-disabled, & textarea.ant-input-disabled": {
+      WebkitTextFillColor: "currentColor",
+      opacity: opacity.opacity40,
+      backgroundColor: themeVars.transparent,
+      cursor: "default",
+    },
+    "& input:focus, & textarea:focus, & .ant-input-affix-wrapper-focused": {
+      boxShadow: "none",
+    },
+    "& input::placeholder, & textarea::placeholder": {
+      color: themeVars.inputPlaceholderTextColor,
+    },
+  }}
+`;
+
+const InputWrapper = getWrapper(inputStyles);
+
+export const StyledInput = wrapWith(InputWrapper, Input);
+
+export const StyledTextArea = wrapWith(InputWrapper, TextArea);
+
+export const TransparentInputWrapper = getWrapper(transparentInputStyle);
+export const StyledTransparentInput = wrapWith(TransparentInputWrapper, Input);
+
+export type TextAreaRef = React.ElementRef<typeof TextArea>;
+export const AntTransparentTextArea = wrapWith(TransparentInputWrapper, TextArea);
+
+export type InputRef = React.ElementRef<typeof Input>;
+export const AntTransparentInput = StyledTransparentInput;

package/src/antd/utils.tsx

@@ -0,0 +1,43 @@
+import {ElementType, forwardRef, useCallback, useRef} from "react";
+
+export const createBodyNode = (className: string) => {
+  const node = document.createElement("div");
+  node.className = className;
+  document.body.appendChild(node);
+  return node;
+};
+
+export const removeBodyNode = (node: Node) => {
+  document.body.removeChild(node);
+};
+
+export const wrapWith = <C extends React.ElementType>(
+  WrapperComponent: ElementType,
+  Component: C
+): React.FC<
+  React.ComponentPropsWithoutRef<C> & {bypassedRef?: React.ForwardedRef<React.ElementRef<C>>; wrapClassName?: string}
+> => {
+  return function WrapWith({bypassedRef, className, wrapClassName, ...props}) {
+    return (
+      <WrapperComponent className={wrapClassName}>
+        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        <Component ref={bypassedRef} className={className} {...(props as any)} />
+      </WrapperComponent>
+    );
+  };
+};
+
+export const wrapWithPopupContainer = <C extends React.ElementType>(Wrapper: ElementType, WrappedComponent: C) => {
+  return forwardRef(function ProvidePopupContainerGetter(props, forwardedRef) {
+    const wrapperRef = useRef();
+    const getPopupContainer = useCallback(() => {
+      return wrapperRef.current;
+    }, []);
+    return (
+      <Wrapper ref={wrapperRef}>
+        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        <WrappedComponent ref={forwardedRef} getPopupContainer={getPopupContainer} {...(props as any)} />
+      </Wrapper>
+    );
+  });
+};

package/src/app-icon-with-fallback.tsx

@@ -0,0 +1,147 @@
+import {css} from "@linaria/core";
+import _ from "lodash";
+import {FC, Suspense, lazy} from "react";
+import {a11yColor} from "./a11y-color";
+import {AppIconWrapper} from "./app-icon-wrapper";
+import {getAppIconBackgroundColor, getOpacities, getThemeValue, iconSize, layout} from "./design-system";
+import {Icon} from "./icons/Icon";
+import {useTheme} from "./theme-provider";
+
+type AppIcon = {
+  name: string;
+  short_names: string[];
+  customCategory: string;
+  text: string;
+  emoticons: string[];
+  keywords: string[];
+  imageUrl: string;
+  file: string;
+};
+
+export const IconLoader: FC<{containerSize?: number}> = ({containerSize = iconSize}) => {
+  return (
+    <div
+      style={{
+        width: containerSize,
+        height: containerSize,
+      }}
+    />
+  );
+};
+
+export function getImageUrl(emoji: AppIcon) {
+  if (emoji.file) {
+    // svg use does not support CORS so we can't use CDN here
+    return `/images/app-icons/${emoji.file}#${emoji.file.replace(".svg", "")}`;
+  }
+  return null;
+}
+
+interface UglyExternalIconImplProps {
+  color?: string | null;
+  name: string;
+  iconSize?: number;
+  containerSize?: number;
+  appIconsLookup: Record<string, AppIcon>;
+}
+
+const UglyExternalIconImpl: FC<UglyExternalIconImplProps> = ({
+  color,
+  iconSize = 16,
+  name,
+  containerSize,
+  appIconsLookup,
+}) => {
+  const icon = appIconsLookup[name] || appIconsLookup["question-circle"];
+
+  const imageUrl = getImageUrl(icon);
+
+  return imageUrl ? (
+    <Icon
+      viewBox="0 0 24 24"
+      className={css`
+        ${{
+          "& *[stroke]": {
+            stroke: "currentColor",
+            strokeWidth: 3,
+          },
+          "& *": {
+            fill: "currentColor",
+          },
+          "& *[fill='none']": {
+            fill: "none",
+          },
+        }}
+      `}
+      containerSize={containerSize}
+      iconSize={iconSize}
+      color={color}
+    >
+      <use href={imageUrl} />
+    </Icon>
+  ) : (
+    <IconLoader containerSize={containerSize} />
+  );
+};
+
+type UglyExternalIconProps = Omit<UglyExternalIconImplProps, "appIconsLookup">;
+
+const UglyExternalIcon = lazy(async () => {
+  const appIcons = await import("./appIcons.json");
+  const appIconsLookup = _.fromPairs(
+    appIcons.default.flatMap((appIcon) => appIcon.short_names.map((shortName) => [shortName, appIcon]))
+  );
+
+  return {
+    default: function UglyExternalIcon(props: UglyExternalIconProps) {
+      return <UglyExternalIconImpl appIconsLookup={appIconsLookup} {...props} />;
+    },
+  };
+});
+
+export interface AppIconWithFallbackProps {
+  name: string;
+  color?: string | null;
+  iconSize?: number;
+  containerSize?: number;
+}
+
+export const AppIconWithFallback: FC<AppIconWithFallbackProps> = ({containerSize, name, color, iconSize}) => {
+  return (
+    <Suspense fallback={<IconLoader containerSize={containerSize} />}>
+      <UglyExternalIcon containerSize={containerSize} color={color} name={name} iconSize={iconSize} />
+    </Suspense>
+  );
+};
+
+interface AppIconProps {
+  icon: string;
+  color: string;
+  iconSize?: number;
+  isSelected?: boolean;
+  containerSize?: number;
+}
+
+export const AppIcon: FC<AppIconProps> = ({
+  icon,
+  iconSize = 18,
+  color,
+  isSelected,
+  containerSize = layout.newMenuIconSize,
+}) => {
+  const theme = useTheme();
+
+  const iconColor = getThemeValue(theme.mode, {
+    dark: a11yColor(getOpacities(color).opacity95, theme.menuBg, 5),
+    light: a11yColor(getOpacities(color).opacity95, theme.whiteColor, 3),
+    light2: a11yColor(getOpacities(color).opacity95, theme.menuBg, 5),
+  });
+
+  const bgColor = getAppIconBackgroundColor(theme.mode, color);
+
+  return (
+    <AppIconWrapper color={bgColor as string} borderless={isSelected} containerSize={containerSize}>
+      <AppIconWithFallback name={icon} color={iconColor as string} containerSize={containerSize} iconSize={iconSize} />
+    </AppIconWrapper>
+  );
+};

package/src/app-icon-wrapper.tsx

@@ -0,0 +1,44 @@
+import {css} from "@linaria/core";
+import cn from "classnames";
+import {ReactNode} from "react";
+import {border, getThemeValue, layout} from "./design-system";
+import {useTheme} from "./theme-provider";
+
+export const appIconSize = layout.newMenuIconSize;
+
+const appIconContainerStyle = css`
+  border-radius: ${border.radius4}px;
+`;
+
+const appIconGradientStyle = css`
+  ${{
+    backgroundImage: "linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0))",
+  }}
+`;
+
+export const AppIconWrapper = ({
+  children,
+  color,
+  borderless,
+  containerSize = layout.newMenuIconSize,
+}: {
+  children?: ReactNode;
+  color: string;
+  borderless?: boolean;
+  containerSize?: number;
+}) => {
+  const theme = useTheme();
+
+  return (
+    <div
+      style={{backgroundColor: borderless ? "transparent" : color, width: containerSize, height: containerSize}}
+      className={cn(
+        appIconContainerStyle,
+        !borderless &&
+          getThemeValue(theme.mode, {light2: appIconGradientStyle, dark: appIconGradientStyle, light: null})
+      )}
+    >
+      {children}
+    </div>
+  );
+};

package/src/app-icon.tsx

@@ -0,0 +1,52 @@
+import {css} from "@linaria/core";
+import cx from "classnames";
+import {FC} from "react";
+import {a11yColor} from "./a11y-color";
+import {AppIconWithFallback} from "./app-icon-with-fallback";
+import {border, getAppIconBackgroundColor, getOpacities, getThemeValue} from "./design-system";
+import {useTheme} from "./theme-provider";
+
+interface AppIconProps {
+  color: string;
+  icon: string;
+  iconSize?: number;
+  containerSize?: number;
+  className?: string;
+}
+
+export const AppIcon: FC<AppIconProps> = ({color, icon, containerSize = 54, iconSize = 36, className}) => {
+  const theme = useTheme();
+  const iconColor = getThemeValue(theme.mode, {
+    dark: a11yColor(getOpacities(color).opacity95, theme.menuBg, 5),
+    light: a11yColor(getOpacities(color).opacity95, theme.whiteColor, 3),
+    light2: a11yColor(getOpacities(color).opacity95, theme.menuBg, 5),
+  });
+
+  const bgColor = getAppIconBackgroundColor(theme.mode, color);
+
+  const appIconGradientStyle = getThemeValue(theme.mode, {
+    dark: "linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0))",
+    light: "none",
+    light2: "linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0))",
+  });
+
+  return (
+    <div
+      className={cx(
+        css`
+          display: flex;
+          border-radius: ${border.radius4}px;
+        `,
+        className
+      )}
+      style={{
+        backgroundColor: bgColor,
+        backgroundImage: appIconGradientStyle,
+        width: containerSize,
+        height: containerSize,
+      }}
+    >
+      <AppIconWithFallback containerSize={containerSize} color={iconColor as string} name={icon} iconSize={iconSize} />
+    </div>
+  );
+};

package/src/app-mode.tsx

@@ -0,0 +1,52 @@
+import {createContext, useState, useLayoutEffect, useContext} from "react";
+import {getMediaQueryList, subscribeOnChange} from "./media-query-utils";
+
+export const appModes = {
+  l: 3,
+  xl: 4,
+} as const;
+export type AppMode = 3 | 4;
+const lSize = 1024;
+export const lQuery = `(max-width: ${lSize}px)`;
+
+const mediaQueryList = getMediaQueryList(lQuery);
+function getMode(mql: MediaQueryList | MediaQueryListEvent): AppMode {
+  return mql.matches ? appModes.l : appModes.xl;
+}
+
+export function getCurrentAppMode(): AppMode {
+  return getMode(getMediaQueryList(lQuery));
+}
+
+const initialMode = getMode(mediaQueryList);
+
+const appModeContext = createContext<AppMode>(initialMode);
+
+export function useAppMode(): AppMode {
+  return useContext(appModeContext);
+}
+
+export function AppModeProvider({children}: {children: React.ReactNode}): JSX.Element {
+  const [mode, setMode] = useState<AppMode>(initialMode);
+  useLayoutEffect(() => {
+    if (initialMode < appModes.xl) {
+      document.body.classList.add("small-mode");
+    }
+
+    const listener = (evt: MediaQueryListEvent) => {
+      const mode = getMode(evt);
+      setMode(mode);
+      if (mode < appModes.xl) {
+        document.body.classList.add("small-mode");
+      } else {
+        document.body.classList.remove("small-mode");
+      }
+    };
+    const unsubscribe = subscribeOnChange(mediaQueryList, listener);
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+  return <appModeContext.Provider value={mode}>{children}</appModeContext.Provider>;
+}