@fibery/ui-kit 3.0.0 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @fibery/ui-kit
 
+## 4.0.0
+
+### Major Changes
+
+- 5025ffe: Inline antd dep monolith (tabs,input,select,autocomplete,upload) for -50kb gzipped impact
+
 ## 3.0.0
 
 ### Major Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
@@ -10,7 +10,7 @@
     "@radix-ui/react-collapsible": "1.1.0",
     "@radix-ui/react-context-menu": "2.2.1",
     "@radix-ui/react-dropdown-menu": "2.1.1",
-    "@radix-ui/react-focus-scope": "^1.1.8",
+    "@radix-ui/react-focus-scope": "1.1.8",
     "@radix-ui/react-navigation-menu": "1.2.1",
     "@radix-ui/react-slot": "1.2.4",
     "@radix-ui/react-toast": "1.2.2",
@@ -20,13 +20,12 @@
     "@tanstack/hotkeys": "0.7.1",
     "@tanstack/react-hotkeys": "0.9.1",
     "@types/apca-w3": "0.1.3",
-    "@types/d3-shape": "^3.1.6",
-    "@types/react-select-country-list": "^2.2.3",
-    "@types/setimmediate": "^1.0.4",
-    "antd": "4.24.7",
+    "@types/d3-shape": "3.1.6",
+    "@types/react-select-country-list": "2.2.3",
+    "@types/setimmediate": "1.0.4",
     "apca-w3": "0.1.9",
     "apcach": "github:antiflasher/apcach#54077b3",
-    "chrono-node": "^2.9.0",
+    "chrono-node": "2.9.0",
     "classnames": "2.3.1",
     "cmdk": "1.0.0",
     "color-hash": "1.0.3",
@@ -41,8 +40,15 @@
     "photoswipe": "5.4.4",
     "popper-max-size-modifier": "0.2.0",
     "prop-types": "15.7.2",
+    "rc-dialog": "9.0.4",
+    "rc-input": "0.1.4",
     "rc-input-number": "8.5.0",
+    "rc-input-number-v7": "npm:rc-input-number@7.3.11",
     "rc-progress": "3.4.1",
+    "rc-select": "14.1.18",
+    "rc-tabs": "12.5.10",
+    "rc-textarea": "0.4.7",
+    "rc-upload": "4.3.4",
     "react-color": "2.19.3",
     "react-day-picker": "8.10.1",
     "react-intersection-observer": "9.3.5",
@@ -94,7 +100,7 @@
     "test:ci": "../../scripts/test.sh --ci",
     "test:coverage": "../../scripts/test.sh --ci --coverage",
     "check": "../../scripts/check.sh",
-    "lint": "../../scripts/lint.sh",
+    "lint": "pnpm -w lint .",
     "generate-icons": "node scripts/generate-icons.mjs",
     "show-colors": "cd ../.. && SHOW_COLORS=1 ./node_modules/.bin/vitest run --project ui-kit --disable-console-intercept -t 'show all current colors'",
     "typecheck": "../../scripts/typecheck.sh"

package/src/actions-menu/actions-menu-item.tsx

@@ -79,6 +79,7 @@ const rowWithDescriptionCss = css`
 `;
 
 const rowContentCss = css`
+  min-width: 0;
   flex-grow: 1;
 `;
 

package/src/actions-menu/actions-menu.tsx

@@ -4,7 +4,6 @@ import {css, cx} from "@linaria/core";
 import {useEffect, useState} from "react";
 
 import * as DropdownMenu from "../dropdown-menu";
-import {useFeatures} from "../features";
 import * as ModalMenu from "../modal-menu";
 import {useOpenPopoverTracker} from "../open-popover-tracker";
 import {useIsPhone} from "../use-is-phone";
@@ -47,7 +46,6 @@ export const ActionsMenu = ({
   sticky,
   height,
 }: ActionsMenuProps): JSX.Element => {
-  const features = useFeatures<{enableMobileMenus: boolean}>();
   const [isOpen = false, setOpen] = useControllableState({value: open, onChange: onOpenChange});
   const isPhone = useIsPhone();
   const [confirmation, setConfirmation] = useState<ActionsMenuConfirmationProps | null>(null);
@@ -58,7 +56,7 @@ export const ActionsMenu = ({
     return () => onOpenPopoverChange(false);
   }, [isOpen, onOpenPopoverChange]);
 
-  const MenuPrimitive = isPhone && features.enableMobileMenus && supportsMobile ? ModalMenu : DropdownMenu;
+  const MenuPrimitive = isPhone && supportsMobile ? ModalMenu : DropdownMenu;
 
   return (
     <ActionsMenuContextProvider

package/src/antd/ant-modal.tsx

@@ -1,32 +1,181 @@
 import {css, cx} from "@linaria/core";
-import Modal from "antd/lib/modal";
-import "antd/lib/modal/style/css";
-import type {ModalProps} from "antd/lib/modal/Modal";
-import type {ReactNode} from "react";
+import Dialog from "rc-dialog";
+import type {IDialogPropTypes} from "rc-dialog/lib/IDialogPropTypes";
+import type {CSSProperties, MouseEvent as ReactMouseEvent, ReactNode} from "react";
 
-import {border, space, themeVars} from "../design-system";
+import {border, space, themeVars, transitions} from "../design-system";
+import CloseIcon from "../icons/react/close";
 import {ThemeProvider} from "../theme-provider";
 
+const defaultCloseIcon = <CloseIcon />;
+
 const modalCss = css`
+  & .ant-modal-mask {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    height: 100%;
+    background-color: ${themeVars.modalBg};
+  }
+
+  & .ant-modal-wrap {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    overflow: auto;
+    outline: 0;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  & .ant-modal {
+    position: relative;
+    top: 100px;
+    margin: 0 auto;
+    padding-bottom: 24px;
+    pointer-events: none;
+  }
+
+  & .ant-modal-centered {
+    text-align: center;
+  }
+
+  & .ant-modal-centered::before {
+    display: inline-block;
+    width: 0;
+    height: 100%;
+    vertical-align: middle;
+    content: "";
+  }
+
+  & .ant-modal-centered .ant-modal {
+    top: 0;
+    display: inline-block;
+    padding-bottom: 0;
+    text-align: left;
+    vertical-align: middle;
+  }
+
   & .ant-modal-content {
+    position: relative;
     box-shadow: ${themeVars.shadowPopup};
     margin-left: ${space.s6}px;
     margin-right: ${space.s6}px;
     background-color: ${themeVars.modalContentBg};
     border-radius: ${border.radius8}px;
+    pointer-events: auto;
   }
 
   & .ant-modal-body {
     padding: ${space.s20}px;
   }
+
+  & .ant-modal-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    padding: 0;
+    color: ${themeVars.iconColor};
+    background: transparent;
+    border: 0;
+    outline: 0;
+    cursor: pointer;
+  }
+
+  & .ant-fade-enter,
+  & .ant-fade-appear {
+    opacity: 0;
+  }
+
+  & .ant-fade-enter-active,
+  & .ant-fade-appear-active {
+    opacity: 1;
+    transition: opacity ${transitions.normal};
+  }
+
+  & .ant-fade-leave {
+    opacity: 1;
+  }
+
+  & .ant-fade-leave-active {
+    opacity: 0;
+    transition: opacity ${transitions.normal};
+  }
+
+  & .ant-zoom-enter,
+  & .ant-zoom-appear {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+
+  & .ant-zoom-enter-active,
+  & .ant-zoom-appear-active {
+    opacity: 1;
+    transform: scale(1);
+    transition:
+      opacity ${transitions.normal},
+      transform ${transitions.normal};
+  }
+
+  & .ant-zoom-leave {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  & .ant-zoom-leave-active {
+    opacity: 0;
+    transform: scale(0.96);
+    transition:
+      opacity ${transitions.normal},
+      transform ${transitions.normal};
+  }
 `;
 
 function renderWithTheme(node: ReactNode): ReactNode {
   return <ThemeProvider portal>{node}</ThemeProvider>;
 }
 
-export function AntModal({bodyStyle = {}, className, ...restProps}: ModalProps) {
+export type AntModalProps = Omit<IDialogPropTypes, "visible" | "onClose" | "prefixCls"> & {
+  open?: boolean;
+  onCancel?: (e: ReactMouseEvent<HTMLElement>) => void;
+  centered?: boolean;
+  bodyStyle?: CSSProperties;
+};
+
+export function AntModal({
+  open,
+  onCancel,
+  centered,
+  bodyStyle = {},
+  className,
+  wrapClassName,
+  rootClassName,
+  width = 520,
+  transitionName = "ant-zoom",
+  maskTransitionName = "ant-fade",
+  closeIcon = defaultCloseIcon,
+  ...restProps
+}: AntModalProps) {
   return (
-    <Modal bodyStyle={bodyStyle} className={cx(className, modalCss)} modalRender={renderWithTheme} {...restProps} />
+    <Dialog
+      prefixCls="ant-modal"
+      visible={open}
+      onClose={onCancel as IDialogPropTypes["onClose"]}
+      bodyStyle={bodyStyle}
+      className={className}
+      wrapClassName={cx(wrapClassName, centered && "ant-modal-centered")}
+      rootClassName={cx(rootClassName, modalCss)}
+      width={width}
+      transitionName={transitionName}
+      maskTransitionName={maskTransitionName}
+      closeIcon={closeIcon}
+      modalRender={renderWithTheme}
+      {...restProps}
+    />
   );
 }

package/src/antd/ant-upload.tsx

@@ -1,21 +1,56 @@
 import {css, cx} from "@linaria/core";
-import type {UploadProps} from "antd/lib/upload";
-import Upload from "antd/lib/upload";
-import type {UploadFile} from "antd/lib/upload/interface";
-import type {ComponentPropsWithoutRef, FunctionComponent, PropsWithChildren} from "react";
-import "antd/lib/upload/style/css";
-import {forwardRef} from "react";
-
-import {border, space, themeVars, transition} from "../design-system";
-import {wrapWith} from "./utils";
-
-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} />;
-  });
+import RcUpload from "rc-upload";
+import type {RcFile, UploadProps as RcUploadProps, UploadRequestOption} from "rc-upload/lib/interface";
+import type {ComponentPropsWithoutRef} from "react";
+import {forwardRef, useCallback, useRef, useState} from "react";
+
+import {border, space, textStyles, themeVars, transitions} from "../design-system";
+
+export type UploadFileStatus = "error" | "success" | "done" | "uploading" | "removed";
+
+export interface UploadFile<T = unknown> {
+  uid: string;
+  size?: number;
+  name: string;
+  lastModified?: number;
+  lastModifiedDate?: Date;
+  url?: string;
+  status?: UploadFileStatus;
+  percent?: number;
+  thumbUrl?: string;
+  originFileObj?: RcFile;
+  response?: T;
+  error?: unknown;
+  type?: string;
+  xhr?: T;
+}
+
+export interface UploadChangeParam<T = UploadFile> {
+  file: T;
+  fileList: T[];
+  event?: {percent: number};
+}
+
+function file2Obj(file: RcFile): UploadFile {
+  return {
+    uid: file.uid,
+    name: file.name,
+    size: file.size,
+    type: file.type,
+    lastModified: file.lastModified,
+    percent: 0,
+    originFileObj: file,
+  };
+}
+
+function upsertFile(file: UploadFile, list: UploadFile[]): UploadFile[] {
+  const index = list.findIndex((f) => f.uid === file.uid);
+  if (index === -1) {
+    return [...list, file];
+  }
+  const next = list.slice();
+  next[index] = file;
+  return next;
 }
 
 export const antUploadStyle = css`
@@ -29,12 +64,50 @@ export const antUploadStyle = css`
       alignItems: "stretch",
       alignContent: "stretch",
     },
-    "& .ant-upload:where(.ant-upload-drag), .ant-upload:where(.ant-upload-select-picture-card)": {
+    "& .ant-upload": {
+      boxSizing: "border-box",
+      margin: 0,
+      padding: 0,
+      ...textStyles.regular,
+      color: themeVars.textColor,
+      listStyle: "none",
+      outline: "none",
+    },
+    "& .ant-upload p": {
+      margin: 0,
+    },
+    "& .ant-upload-btn": {
+      display: "block",
+      width: "100%",
+      outline: "none",
+    },
+    "& .ant-upload input[type='file']": {
+      cursor: "pointer",
+    },
+    "& .ant-upload.ant-upload-disabled": {
+      color: themeVars.disabledTextColor,
+      cursor: "not-allowed",
+    },
+    "& .ant-upload.ant-upload-disabled input[type='file']": {
+      cursor: "not-allowed",
+    },
+    "& .ant-upload-select": {
+      display: "inline-flex",
+      alignItems: "stretch",
+      maxWidth: "100%",
+    },
+    "& .ant-upload-select > .ant-upload": {
+      display: "inline-flex",
+      alignItems: "center",
+      outline: "none",
+    },
+    "& .ant-upload:where(.ant-upload-drag), & .ant-upload:where(.ant-upload-select-picture-card)": {
       border: `1px dashed ${themeVars.colorAccentBgStrong}`,
       position: "relative",
       backgroundColor: themeVars.transparent,
       borderRadius: border.radius6,
-      transition: `border-color ${transition}`,
+      transition: `border-color ${transitions.faster}`,
+      cursor: "pointer",
       margin: 0,
       flex: 1,
       alignSelf: "stretch",
@@ -57,19 +130,204 @@ export const antUploadStyle = css`
         alignContent: "stretch",
         padding: space.s8,
       },
-      "&.ant-upload-drag-hover": {
-        border: `1px dashed ${themeVars.colorAccent}`,
+      "&.ant-upload-drag-hover:not(.ant-upload-disabled)": {
+        border: `1px dashed ${themeVars.colorAccentStrokeFocus}`,
         transition: "none",
       },
-      "&:hover": {
-        border: `1px dashed ${themeVars.colorAccent}`,
+      "&:not(.ant-upload-disabled):hover": {
+        border: `1px dashed ${themeVars.colorAccentStrokeHover}`,
         transition: "none",
       },
     },
+    "& .ant-upload.ant-upload-drag .ant-upload-btn": {
+      display: "table",
+      height: "100%",
+    },
+    "& .ant-upload.ant-upload-drag .ant-upload-drag-container": {
+      display: "table-cell",
+      verticalAlign: "middle",
+    },
+    "& .ant-upload-picture-card-wrapper": {
+      display: "inline-block",
+      width: "100%",
+    },
+    "& .ant-upload-picture-card-wrapper::before": {
+      display: "table",
+      content: "''",
+    },
+    "& .ant-upload-picture-card-wrapper::after": {
+      display: "table",
+      clear: "both",
+      content: "''",
+    },
   }}
 `;
 
-export const AntUpload = wrapWith(getWrapper(antUploadStyle), Upload) as FunctionComponent<
-  PropsWithChildren<UploadProps>
->;
-export type {UploadFile};
+export type AntUploadProps = Omit<
+  RcUploadProps,
+  "prefixCls" | "onStart" | "onSuccess" | "onError" | "onProgress" | "type" | "onChange" | "children"
+> & {
+  type?: "select" | "drag";
+  listType?: "text" | "picture" | "picture-card";
+  disabled?: boolean;
+  className?: string;
+  wrapClassName?: string;
+  children?: React.ReactNode;
+  onChange?: (info: UploadChangeParam) => void;
+};
+
+function Wrapper({className, ...props}: ComponentPropsWithoutRef<"div">) {
+  return <div className={cx(className, antUploadStyle)} {...props} />;
+}
+
+export const AntUpload = forwardRef<HTMLSpanElement, AntUploadProps>(function AntUpload(
+  {type = "select", listType = "text", disabled, className, wrapClassName, children, onChange, ...rcProps},
+  ref
+) {
+  const [fileList, setFileList] = useState<UploadFile[]>([]);
+  const fileListRef = useRef(fileList);
+  fileListRef.current = fileList;
+  const [dragState, setDragState] = useState<"drop" | "dragover" | "dragleave">("drop");
+
+  const emit = useCallback(
+    (file: UploadFile, nextList: UploadFile[], event?: {percent: number}) => {
+      fileListRef.current = nextList;
+      setFileList(nextList);
+      onChange?.({file, fileList: nextList, event});
+    },
+    [onChange]
+  );
+
+  const handleStart = useCallback(
+    (file: RcFile) => {
+      const obj = file2Obj(file);
+      obj.status = "uploading";
+      emit(obj, upsertFile(obj, fileListRef.current));
+    },
+    [emit]
+  );
+
+  const handleProgress = useCallback(
+    (event: {percent?: number}, file: RcFile) => {
+      const current = fileListRef.current.find((f) => f.uid === file.uid);
+      if (!current) {
+        return;
+      }
+      const next = {...current, status: "uploading" as UploadFileStatus, percent: event.percent};
+      emit(next, upsertFile(next, fileListRef.current), {percent: event.percent ?? 0});
+    },
+    [emit]
+  );
+
+  const handleSuccess = useCallback(
+    (response: unknown, file: RcFile, xhr?: XMLHttpRequest) => {
+      const current = fileListRef.current.find((f) => f.uid === file.uid);
+      if (!current) {
+        return;
+      }
+      let parsed = response;
+      if (typeof response === "string") {
+        try {
+          parsed = JSON.parse(response);
+        } catch {
+          /* ignore */
+        }
+      }
+      const next: UploadFile = {
+        ...current,
+        status: "done",
+        percent: 100,
+        response: parsed,
+        xhr,
+      };
+      emit(next, upsertFile(next, fileListRef.current));
+    },
+    [emit]
+  );
+
+  const handleError = useCallback(
+    (error: Error, response: unknown, file: RcFile) => {
+      const current = fileListRef.current.find((f) => f.uid === file.uid);
+      if (!current) {
+        return;
+      }
+      const next: UploadFile = {
+        ...current,
+        status: "error",
+        error,
+        response,
+      };
+      emit(next, upsertFile(next, fileListRef.current));
+    },
+    [emit]
+  );
+
+  const onFileDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    setDragState(e.type as typeof dragState);
+  }, []);
+
+  const rcUploadProps: RcUploadProps = {
+    ...rcProps,
+    prefixCls: "ant-upload",
+    disabled,
+    onStart: handleStart,
+    onProgress: handleProgress,
+    onSuccess: handleSuccess,
+    onError: handleError,
+  };
+
+  if (type === "drag") {
+    const hasUploading = fileList.some((f) => f.status === "uploading");
+    const dragCls = cx(
+      "ant-upload",
+      "ant-upload-drag",
+      hasUploading && "ant-upload-drag-uploading",
+      dragState === "dragover" && "ant-upload-drag-hover",
+      disabled && "ant-upload-disabled",
+      className
+    );
+    return (
+      <Wrapper className={wrapClassName}>
+        <span ref={ref}>
+          <div className={dragCls} onDrop={onFileDrop} onDragOver={onFileDrop} onDragLeave={onFileDrop}>
+            <RcUpload {...rcUploadProps} className="ant-upload-btn">
+              <div className="ant-upload-drag-container">{children}</div>
+            </RcUpload>
+          </div>
+        </span>
+      </Wrapper>
+    );
+  }
+
+  const buttonCls = cx(
+    "ant-upload",
+    "ant-upload-select",
+    `ant-upload-select-${listType}`,
+    disabled && "ant-upload-disabled"
+  );
+  const button = (
+    <div className={buttonCls}>
+      <RcUpload {...rcUploadProps}>{children}</RcUpload>
+    </div>
+  );
+
+  if (listType === "picture-card") {
+    return (
+      <Wrapper className={wrapClassName}>
+        <span ref={ref} className={cx("ant-upload-picture-card-wrapper", className)}>
+          {button}
+        </span>
+      </Wrapper>
+    );
+  }
+
+  return (
+    <Wrapper className={wrapClassName}>
+      <span ref={ref} className={className}>
+        {button}
+      </span>
+    </Wrapper>
+  );
+});
+
+export type {UploadRequestOption};