@fibery/ui-kit 3.0.0 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @fibery/ui-kit
 
+## 4.1.0
+
+### Minor Changes
+
+- fb2ba1d: Add `isRecord`, `noop`, `identity`, `truthy` to `_.ts` in `@fibery/helpers`; drop `lodash` from `@fibery/ui-kit` dependencies.
+
+### Patch Changes
+
+- Updated dependencies [fb2ba1d]
+  - @fibery/helpers@3.1.0
+  - @fibery/react@1.5.4
+
+## 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/esfint.config.mjs

@@ -13,21 +13,4 @@ export default [
       "unicorn/filename-case": "off",
     },
   },
-  {
-    files: ["src/design-system/**/*"],
-    rules: {
-      "no-restricted-imports": [
-        "error",
-        {
-          patterns: [
-            {group: ["@fibery/ui-kit/*"]},
-            {
-              group: ["lodash", "lodash/*", "lodash-es", "lodash-es/*"],
-              message: "lodash is not allowed in design-system",
-            },
-          ],
-        },
-      ],
-    },
-  },
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "3.0.0",
+  "version": "4.1.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",
@@ -34,15 +33,22 @@
     "d3-shape": "1.3.7",
     "date-fns": "2.29.2",
     "invariant": "2.2.4",
-    "lodash": "4.17.21",
     "lru-cache": "11.2.2",
     "md5": "2.2.1",
     "moment": "2.29.4",
+    "node-types-local": "npm:@types/node@^24",
     "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",
@@ -54,8 +60,8 @@
     "tabbable": "5.2.1",
     "virtua": "0.48.8",
     "@fibery/emoji-data": "2.7.3",
-    "@fibery/helpers": "3.0.0",
-    "@fibery/react": "1.5.3"
+    "@fibery/helpers": "3.1.0",
+    "@fibery/react": "1.5.4"
   },
   "devDependencies": {
     "@babel/core": "7.28.5",
@@ -68,7 +74,6 @@
     "@types/culori": "4.0.1",
     "@types/history": "4.7.11",
     "@types/invariant": "2.2.34",
-    "@types/lodash": "4.14.172",
     "@types/prop-types": "15.7.5",
     "@types/react": "18.3.12",
     "@types/react-color": "2.13.5",
@@ -76,7 +81,7 @@
     "@typescript/native-preview": "beta",
     "csstype": "3.0.8",
     "fs-extra": "10.0.0",
-    "glob": "7.1.7",
+    "glob": "13.0.6",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "svg-parser": "2.0.4",
@@ -94,7 +99,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/scripts/generate-icons.mjs

@@ -1,15 +1,29 @@
 import {readFile} from "fs/promises";
-import path from "path";
-import {fileURLToPath} from "url";
-import {promisify} from "util";
+import path from "node:path";
+import {fileURLToPath} from "node:url";
 
 import fs from "fs-extra";
-import glob from "glob";
-import _ from "lodash";
+import {glob} from "glob";
 import {parse} from "svg-parser";
 import svgo from "svgo";
 import {recursiveReduce} from "unist-util-reduce";
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const WORD_RE = /[A-Z]+(?![a-z])|[A-Z]?[a-z]+|\d+/g;
+const words = (s) => String(s).match(WORD_RE) ?? [];
+const cap = (w) => w[0].toUpperCase() + w.slice(1).toLowerCase();
+const pascalCase = (s) => words(s).map(cap).join("");
+const camelCase = (s) =>
+  words(s)
+    .map((w, i) => (i ? cap(w) : w.toLowerCase()))
+    .join("");
+const kebabCase = (s) =>
+  words(s)
+    .map((w) => w.toLowerCase())
+    .join("-");
+
 const svgoConfig = (prefix) => ({
   plugins: [
     {
@@ -24,55 +38,55 @@ const svgoConfig = (prefix) => ({
   ],
 });
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-const preludeTemplate = `/**
+const preludeTemplate = ({source, generator}) => `/**
  * This file was automatically generated. Do not edit manually.
- * <% if (source) { %>
- * @see import("<%= source %>")<% } %>
- * @see import("<%= generator %>")
+ * ${
+   source
+     ? `
+ * @see import("${source}")`
+     : ""
+ }
+ * @see import("${generator}")
  */
 `;
 
-const render = _.template(
-  `${preludeTemplate}
+const render = ({source, generator, svgIdentifier, svgIdentifierPath}) =>
+  `${preludeTemplate({source, generator})}
 import {forwardRef} from "react";
-import <%= svgIdentifier %>Svg from "../ast/<%= svgIdentifierPath %>";
+import ${svgIdentifier}Svg from "../ast/${svgIdentifierPath}";
 import {Icon} from "../icon";
 import type {IconBaseProps} from "../types";
 
-const <%= svgIdentifier %> = forwardRef<SVGSVGElement, IconBaseProps>(function <%= svgIdentifier %>(
+const ${svgIdentifier} = forwardRef<SVGSVGElement, IconBaseProps>(function ${svgIdentifier}(
   props: IconBaseProps,
   ref: React.Ref<SVGSVGElement>
-) {return <Icon {...props} className={props.className} ref={ref} icon={<%= svgIdentifier %>Svg} />});
+) {return <Icon {...props} className={props.className} ref={ref} icon={${svgIdentifier}Svg} />});
 
-export default <%= svgIdentifier %>;
-`.trim()
-);
+export default ${svgIdentifier};
+`.trim();
 
-const defTemplate = _.template(`${preludeTemplate}
+const defTemplate = ({source, generator, identifier, content}) => `${preludeTemplate({source, generator})}
 import type {IconDefinition} from "../types";
 
-const <%= identifier %>: IconDefinition = <%= content %>;
+const ${identifier}: IconDefinition = ${content};
 
-export default <%= identifier %>;
-`);
+export default ${identifier};
+`;
 
 const iconsDir = path.join(__dirname, "../src/icons");
 const iconsSvgPathDir = path.join(iconsDir, "./svg");
 const iconsReactPathDir = path.join(iconsDir, "./react");
 const iconsAstPathDir = path.join(iconsDir, "./ast");
 const pattern = "**/*.svg";
-const icons = await promisify(glob)(pattern, {cwd: iconsSvgPathDir});
+const icons = await glob(pattern, {cwd: iconsSvgPathDir});
 
 await fs.remove(iconsReactPathDir);
 await fs.remove(iconsAstPathDir);
 
 const generator = path.relative(iconsReactPathDir, __filename);
-let barrelExportContent = _.template(preludeTemplate)({source: null, generator: generator}) + "\n";
+let barrelExportContent = preludeTemplate({source: null, generator: generator}) + "\n";
 for (const icon of icons) {
-  const name = _.upperFirst(_.camelCase(icon.replace("/", "-").replace(".svg", "")));
+  const name = pascalCase(icon.replace("/", "-").replace(".svg", ""));
   const resultFileName = icon.replaceAll("/", "-").replace(".svg", "");
   const iconPath = path.join(iconsSvgPathDir, icon);
   const source = path.relative(iconsReactPathDir, iconPath);
@@ -97,17 +111,17 @@ for (const icon of icons) {
                   value.split(";").forEach((styleItem) => {
                     const [styleKey, styleValue] = styleItem.split(":").map((s) => s.trim());
                     if (styleKey && styleValue) {
-                      style[_.camelCase(styleKey)] = styleValue;
+                      style[camelCase(styleKey)] = styleValue;
                     }
                   });
-                  return [_.camelCase(key), style];
+                  return [camelCase(key), style];
                 }
-                return [_.camelCase(key), value];
+                return [camelCase(key), value];
               })
             ),
           };
         }),
-        name: _.kebabCase(name),
+        name: kebabCase(name),
       }),
     })
   );
@@ -126,16 +140,3 @@ for (const icon of icons) {
 }
 await fs.outputFile(path.join(iconsReactPathDir, `./index.tsx`), barrelExportContent);
 await fs.outputFile(path.join(iconsAstPathDir, `./index.tsx`), barrelExportContent);
-
-// import {getSvg, iconNames} from "../Icon";
-//
-// it.skip("generate", async () => {
-//   console.log(iconNames);
-//   for (const iconName of iconNames) {
-//     await fs.outputFile(
-//       path.join(__dirname, "./icons", iconName.replace(":icon", "svg") + ".svg"),
-//       `<?xml version="1.0" standalone="no"?>\n` + getSvg({name: iconName})
-//     );
-//   }
-//   expect(true).toEqual(true);
-// });

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

@@ -1,7 +1,7 @@
+import {noop} from "@fibery/helpers/src/_";
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
 import {css, cx} from "@linaria/core";
-import noop from "lodash/noop";
 import type {FunctionComponent, ReactNode} from "react";
 import {memo, useId} from "react";
 
@@ -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/actions-menu/context-actions-menu.tsx

@@ -1,6 +1,6 @@
+import {noop} from "@fibery/helpers/src/_";
 import {preventDefault} from "@fibery/react/src/prevent-default";
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
-import noop from "lodash/noop";
 import {useState} from "react";
 
 import * as ContextMenu from "../context-menu";

package/src/animated-height-container.tsx

@@ -1,6 +1,6 @@
+import {noop} from "@fibery/helpers/src/_";
 import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 import {useSize} from "@fibery/react/src/use-size";
-import noop from "lodash/noop";
 import type {ComponentProps} from "react";
 import React, {forwardRef, useEffect, useRef, useState} from "react";
 

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-content {
+  :where(&) .ant-modal-mask {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    height: 100%;
+    background-color: ${themeVars.modalBg};
+  }
+
+  :where(&) .ant-modal-wrap {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    overflow: auto;
+    outline: 0;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :where(&) .ant-modal {
+    position: relative;
+    top: 100px;
+    margin: 0 auto;
+    padding-bottom: 24px;
+    pointer-events: none;
+  }
+
+  :where(&) .ant-modal-centered {
+    text-align: center;
+  }
+
+  :where(&) .ant-modal-centered::before {
+    display: inline-block;
+    width: 0;
+    height: 100%;
+    vertical-align: middle;
+    content: "";
+  }
+
+  :where(&) .ant-modal-centered .ant-modal {
+    top: 0;
+    display: inline-block;
+    padding-bottom: 0;
+    text-align: left;
+    vertical-align: middle;
+  }
+
+  :where(&) .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 {
+  :where(&) .ant-modal-body {
     padding: ${space.s20}px;
   }
+
+  :where(&) .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;
+  }
+
+  :where(&) .ant-fade-enter,
+  :where(&) .ant-fade-appear {
+    opacity: 0;
+  }
+
+  :where(&) .ant-fade-enter-active,
+  :where(&) .ant-fade-appear-active {
+    opacity: 1;
+    transition: opacity ${transitions.normal};
+  }
+
+  :where(&) .ant-fade-leave {
+    opacity: 1;
+  }
+
+  :where(&) .ant-fade-leave-active {
+    opacity: 0;
+    transition: opacity ${transitions.normal};
+  }
+
+  :where(&) .ant-zoom-enter,
+  :where(&) .ant-zoom-appear {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+
+  :where(&) .ant-zoom-enter-active,
+  :where(&) .ant-zoom-appear-active {
+    opacity: 1;
+    transform: scale(1);
+    transition:
+      opacity ${transitions.normal},
+      transform ${transitions.normal};
+  }
+
+  :where(&) .ant-zoom-leave {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  :where(&) .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}
+    />
   );
 }