@fibery/ui-kit 4.0.0 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @fibery/ui-kit
 
+## 4.2.0
+
+### Minor Changes
+
+- eef68ad: Sync dark theme color tokens correction
+
+## 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

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": "4.0.0",
+  "version": "4.2.0",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
@@ -33,13 +33,12 @@
     "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",
@@ -60,8 +59,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",
@@ -74,20 +73,18 @@
     "@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",
     "@types/react-dom": "18.3.1",
-    "@typescript/native-preview": "beta",
+    "@typescript/native-preview": "7.0.0-dev.20260604.1",
     "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",
     "svgo": "2.8.0",
-    "typescript": "6.0.1-rc",
+    "typescript": "6.0.3",
     "unist-util-reduce": "0.2.2",
     "@fibery/babel-preset": "7.4.2"
   },

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";
 

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

@@ -10,7 +10,7 @@ import {ThemeProvider} from "../theme-provider";
 const defaultCloseIcon = <CloseIcon />;
 
 const modalCss = css`
-  & .ant-modal-mask {
+  :where(&) .ant-modal-mask {
     position: fixed;
     inset: 0;
     z-index: 1000;
@@ -18,7 +18,7 @@ const modalCss = css`
     background-color: ${themeVars.modalBg};
   }
 
-  & .ant-modal-wrap {
+  :where(&) .ant-modal-wrap {
     position: fixed;
     inset: 0;
     z-index: 1000;
@@ -27,7 +27,7 @@ const modalCss = css`
     -webkit-overflow-scrolling: touch;
   }
 
-  & .ant-modal {
+  :where(&) .ant-modal {
     position: relative;
     top: 100px;
     margin: 0 auto;
@@ -35,11 +35,11 @@ const modalCss = css`
     pointer-events: none;
   }
 
-  & .ant-modal-centered {
+  :where(&) .ant-modal-centered {
     text-align: center;
   }
 
-  & .ant-modal-centered::before {
+  :where(&) .ant-modal-centered::before {
     display: inline-block;
     width: 0;
     height: 100%;
@@ -47,7 +47,7 @@ const modalCss = css`
     content: "";
   }
 
-  & .ant-modal-centered .ant-modal {
+  :where(&) .ant-modal-centered .ant-modal {
     top: 0;
     display: inline-block;
     padding-bottom: 0;
@@ -55,7 +55,7 @@ const modalCss = css`
     vertical-align: middle;
   }
 
-  & .ant-modal-content {
+  :where(&) .ant-modal-content {
     position: relative;
     box-shadow: ${themeVars.shadowPopup};
     margin-left: ${space.s6}px;
@@ -65,11 +65,11 @@ const modalCss = css`
     pointer-events: auto;
   }
 
-  & .ant-modal-body {
+  :where(&) .ant-modal-body {
     padding: ${space.s20}px;
   }
 
-  & .ant-modal-close {
+  :where(&) .ant-modal-close {
     position: absolute;
     top: 0;
     right: 0;
@@ -87,34 +87,34 @@ const modalCss = css`
     cursor: pointer;
   }
 
-  & .ant-fade-enter,
-  & .ant-fade-appear {
+  :where(&) .ant-fade-enter,
+  :where(&) .ant-fade-appear {
     opacity: 0;
   }
 
-  & .ant-fade-enter-active,
-  & .ant-fade-appear-active {
+  :where(&) .ant-fade-enter-active,
+  :where(&) .ant-fade-appear-active {
     opacity: 1;
     transition: opacity ${transitions.normal};
   }
 
-  & .ant-fade-leave {
+  :where(&) .ant-fade-leave {
     opacity: 1;
   }
 
-  & .ant-fade-leave-active {
+  :where(&) .ant-fade-leave-active {
     opacity: 0;
     transition: opacity ${transitions.normal};
   }
 
-  & .ant-zoom-enter,
-  & .ant-zoom-appear {
+  :where(&) .ant-zoom-enter,
+  :where(&) .ant-zoom-appear {
     opacity: 0;
     transform: scale(0.96);
   }
 
-  & .ant-zoom-enter-active,
-  & .ant-zoom-appear-active {
+  :where(&) .ant-zoom-enter-active,
+  :where(&) .ant-zoom-appear-active {
     opacity: 1;
     transform: scale(1);
     transition:
@@ -122,12 +122,12 @@ const modalCss = css`
       transform ${transitions.normal};
   }
 
-  & .ant-zoom-leave {
+  :where(&) .ant-zoom-leave {
     opacity: 1;
     transform: scale(1);
   }
 
-  & .ant-zoom-leave-active {
+  :where(&) .ant-zoom-leave-active {
     opacity: 0;
     transform: scale(0.96);
     transition:

package/src/antd/ant-upload.tsx

@@ -64,7 +64,7 @@ export const antUploadStyle = css`
       alignItems: "stretch",
       alignContent: "stretch",
     },
-    "& .ant-upload": {
+    ":where(&) .ant-upload": {
       boxSizing: "border-box",
       margin: 0,
       padding: 0,
@@ -73,30 +73,30 @@ export const antUploadStyle = css`
       listStyle: "none",
       outline: "none",
     },
-    "& .ant-upload p": {
+    ":where(&) .ant-upload p": {
       margin: 0,
     },
-    "& .ant-upload-btn": {
+    ":where(&) .ant-upload-btn": {
       display: "block",
       width: "100%",
       outline: "none",
     },
-    "& .ant-upload input[type='file']": {
+    ":where(&) .ant-upload input[type='file']": {
       cursor: "pointer",
     },
-    "& .ant-upload.ant-upload-disabled": {
+    ":where(&) .ant-upload.ant-upload-disabled": {
       color: themeVars.disabledTextColor,
       cursor: "not-allowed",
     },
-    "& .ant-upload.ant-upload-disabled input[type='file']": {
+    ":where(&) .ant-upload.ant-upload-disabled input[type='file']": {
       cursor: "not-allowed",
     },
-    "& .ant-upload-select": {
+    ":where(&) .ant-upload-select": {
       display: "inline-flex",
       alignItems: "stretch",
       maxWidth: "100%",
     },
-    "& .ant-upload-select > .ant-upload": {
+    ":where(&) .ant-upload-select > .ant-upload": {
       display: "inline-flex",
       alignItems: "center",
       outline: "none",
@@ -139,23 +139,23 @@ export const antUploadStyle = css`
         transition: "none",
       },
     },
-    "& .ant-upload.ant-upload-drag .ant-upload-btn": {
+    ":where(&) .ant-upload.ant-upload-drag .ant-upload-btn": {
       display: "table",
       height: "100%",
     },
-    "& .ant-upload.ant-upload-drag .ant-upload-drag-container": {
+    ":where(&) .ant-upload.ant-upload-drag .ant-upload-drag-container": {
       display: "table-cell",
       verticalAlign: "middle",
     },
-    "& .ant-upload-picture-card-wrapper": {
+    ":where(&) .ant-upload-picture-card-wrapper": {
       display: "inline-block",
       width: "100%",
     },
-    "& .ant-upload-picture-card-wrapper::before": {
+    ":where(&) .ant-upload-picture-card-wrapper::before": {
       display: "table",
       content: "''",
     },
-    "& .ant-upload-picture-card-wrapper::after": {
+    ":where(&) .ant-upload-picture-card-wrapper::after": {
       display: "table",
       clear: "both",
       content: "''",

package/src/antd/auto-complete.tsx

@@ -13,14 +13,14 @@ import {wrapWithPopupContainer} from "./utils";
 const autoCompleteStyles = css`
   ${{
     position: "relative",
-    "& .ant-select": {
+    ":where(&) .ant-select": {
       ...textStyles.regular,
       boxSizing: "border-box",
       display: "inline-block",
       width: "100%",
       cursor: "text",
     },
-    "& .ant-select-selector": {
+    ":where(&) .ant-select-selector": {
       boxSizing: "border-box",
       display: "flex",
       alignItems: "center",
@@ -29,7 +29,7 @@ const autoCompleteStyles = css`
       position: "relative",
       backgroundColor: themeVars.transparent,
     },
-    "& .ant-select-selection-search": {
+    ":where(&) .ant-select-selection-search": {
       flex: 1,
       minWidth: 0,
     },
@@ -45,7 +45,7 @@ const autoCompleteStyles = css`
       appearance: "none",
       ...textStyles.regular,
     },
-    "& .ant-select-dropdown": {
+    ":where(&) .ant-select-dropdown": {
       boxSizing: "border-box",
       position: "absolute",
       zIndex: 1050,
@@ -55,16 +55,16 @@ const autoCompleteStyles = css`
       paddingTop: space.s8,
       paddingBottom: space.s8,
     },
-    "& .ant-select-dropdown-hidden": {
+    ":where(&) .ant-select-dropdown-hidden": {
       display: "none",
     },
-    "& .ant-select-item-empty": {
+    ":where(&) .ant-select-item-empty": {
       minHeight: 32,
       padding: "5px 12px",
       lineHeight: "22px",
       color: themeVars.colorTextListItemGeneralDisabled,
     },
-    "& .ant-select-item": {
+    ":where(&) .ant-select-item": {
       ...textStyles.regular,
       color: themeVars.textColor,
       minHeight: 32,
@@ -75,16 +75,16 @@ const autoCompleteStyles = css`
       cursor: "pointer",
       transition: `background-color ${transitions.slow}`,
     },
-    "& .ant-select-item-option-content": {
+    ":where(&) .ant-select-item-option-content": {
       flex: 1,
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap",
     },
-    "& .ant-select-item-option-state": {
+    ":where(&) .ant-select-item-option-state": {
       display: "none",
     },
-    "& .ant-select-item-option": {
+    ":where(&) .ant-select-item-option": {
       display: "flex",
       alignItems: "center",
       "&:hover": {