feat: add IconPicker to app-page-builder and app-headless-cms

packages/admin-ui/package.json

@@ -55,7 +55,7 @@
     "@storybook/theming": "7.6.20",
     "@svgr/webpack": "^6.1.1",
     "@types/react": "18.2.79",
-    "@types/react-virtualized": "^9",
+    "@types/react-virtualized": "^9.22.0",
     "@webiny/cli": "0.0.0",
     "@webiny/project-utils": "0.0.0",
     "chalk": "^4.1.2",

packages/admin-ui/src/IconPicker/IconPicker.stories.tsx

@@ -1,10 +1,9 @@
 import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { IconPicker } from "~/IconPicker";
+import { IconDto, IconPicker } from "~/IconPicker";
 import { IconName, library } from "@fortawesome/fontawesome-svg-core";
 import { IconPrefix } from "@fortawesome/fontawesome-common-types";
 import { fas } from "@fortawesome/free-solid-svg-icons";
-import { IconDto } from "~/IconPicker/primitives/domains";
 
 const meta: Meta<typeof IconPicker> = {
     title: "Components/Form/IconPicker",

packages/admin-ui/src/IconPicker/IconPicker.tsx

@@ -35,4 +35,4 @@ const DecoratableIconPicker = ({
 };
 const IconPicker = makeDecoratable("IconPicker", DecoratableIconPicker);
 
-export { IconPicker };
+export { IconPicker, type IconPickerProps };

packages/admin-ui/src/IconPicker/primitives/domains/Icon.tsx → packages/admin-ui/src/IconPicker/domains/Icon.tsx

@@ -20,7 +20,7 @@ export class Icon {
         if (typeof value === "string" && value.includes("/")) {
             const values = value.split("/");
             return new Icon({
-                prefix: values[1],
+                prefix: values[0],
                 name: values[1]
             });
         } else {

packages/admin-ui/src/IconPicker/index.ts

@@ -1 +1,2 @@
 export * from "./IconPicker";
+export { IconDto } from "./domains";

packages/admin-ui/src/IconPicker/primitives/IconPickerPrimitive.stories.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { IconPickerPrimitive } from "./IconPickerPrimitive";
+import { IconDto } from "~/IconPicker";
 import { IconName, library } from "@fortawesome/fontawesome-svg-core";
 import { IconPrefix } from "@fortawesome/fontawesome-common-types";
 import { fas } from "@fortawesome/free-solid-svg-icons";
-import { IconDto } from "~/IconPicker/primitives/domains";
 
 const meta: Meta<typeof IconPickerPrimitive> = {
     title: "Components/Form Primitives/IconPicker",

packages/admin-ui/src/IconPicker/primitives/IconPickerPrimitive.tsx

@@ -3,14 +3,14 @@ import { inputVariants } from "~/Input";
 import { Popover } from "~/Popover";
 import { cn, cva, type VariantProps } from "~/utils";
 import { IconPickerGrid, IconPickerInput, IconPickerTrigger } from "./components";
-import { IconDto } from "./domains";
+import { IconDto } from "../domains";
 import { useIconPicker } from "./useIconPicker";
 
 const iconPickerVariants = cva("wby-cursor-pointer wby-text-neutral-strong", {
     variants: {
         size: {
             md: "wby-w-[64px]",
-            lg: "wby-w-[68px]",
+            lg: "wby-w-[64px]",
             xl: "wby-w-[76px]"
         },
         disabled: {

packages/admin-ui/src/IconPicker/primitives/components/IconPickerGrid.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 import { Grid, GridCellProps } from "react-virtualized";
 import { Text } from "~/Text";
 import { cn } from "~/utils";
-import { IconFormattedFontAwesome, IconFormatter } from "../domains";
+import { IconFormattedFontAwesome, IconFormatter } from "../../domains";
 import { IconPickerIcon } from "./IconPickerIcon";
 
 const COLUMN_COUNT = 5;

packages/admin-ui/src/IconPicker/primitives/components/IconPickerTrigger.tsx

@@ -4,7 +4,7 @@ import { Icon as IconComponent } from "~/Icon";
 import { inputVariants } from "~/Input";
 import type { VariantProps } from "~/utils";
 import { IconPickerIcon } from "./IconPickerIcon";
-import { Icon, IconFormatter } from "../domains";
+import { Icon, IconFormatter } from "../../domains";
 
 interface IconPickerTriggerProps {
     value?: string;
@@ -17,13 +17,11 @@ const IconPickerTrigger = ({ value, size }: IconPickerTriggerProps) => {
         return IconFormatter.formatFontAwesome(icon);
     }, [value]);
 
-    const iconSize = useMemo(() => (size === "lg" || size === "xl" ? "lg" : "md"), [size]);
-
     return (
         <div className={"wby-flex wby-items-center wby-gap-xs"}>
             <div>
                 <IconComponent
-                    size={iconSize}
+                    size={size === "xl" ? "lg" : "md"}
                     icon={<IconPickerIcon prefix={icon.prefix} name={icon.name} />}
                     label={`Selected icon`}
                 />

packages/admin-ui/src/IconPicker/primitives/presenters/IconPickerPresenter.ts

@@ -1,5 +1,5 @@
 import { makeAutoObservable } from "mobx";
-import { Icon, IconDto, IconFormattedFontAwesome, IconFormatter, ListCache } from "../domains";
+import { Icon, IconDto, IconFormattedFontAwesome, IconFormatter, ListCache } from "../../domains";
 
 interface IconPickerParams {
     icons: IconDto[];

packages/app-headless-cms-common/package.json

@@ -27,6 +27,7 @@
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.11.0",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/cli": "0.0.0",
     "@webiny/project-utils": "0.0.0",
     "babel-plugin-module-resolver": "^5.0.2",

packages/app-headless-cms-common/src/types/index.ts

@@ -17,6 +17,7 @@ import {
 import { CmsModel, CmsModelField } from "./model";
 import { CmsIdentity } from "~/types/shared";
 import type { SourceType } from "dnd-core";
+import { IconDto } from "@webiny/admin-ui";
 
 export type DragObjectWithType = {
     type: SourceType;
@@ -472,7 +473,7 @@ export interface CmsIcon {
 
 export interface CmsIconsPlugin extends Plugin {
     type: "cms-icons";
-    getIcons(): CmsIcon[];
+    getIcons(): IconDto[];
 }
 
 /**

packages/app-headless-cms-common/tsconfig.build.json

@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
   "references": [
+    { "path": "../admin-ui/tsconfig.build.json" },
     { "path": "../app-security/tsconfig.build.json" },
     { "path": "../form/tsconfig.build.json" },
     { "path": "../plugins/tsconfig.build.json" },

packages/app-headless-cms-common/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__"],
   "references": [
+    { "path": "../admin-ui" },
     { "path": "../app-security" },
     { "path": "../form" },
     { "path": "../plugins" },
@@ -14,6 +15,8 @@
     "paths": {
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
+      "@webiny/admin-ui/*": ["../admin-ui/src/*"],
+      "@webiny/admin-ui": ["../admin-ui/src"],
       "@webiny/app-security/*": ["../app-security/src/*"],
       "@webiny/app-security": ["../app-security/src"],
       "@webiny/form/*": ["../form/src/*"],

packages/app-headless-cms/package.json

@@ -27,6 +27,7 @@
     "@material-design-icons/svg": "^0.14.13",
     "@svgr/webpack": "^6.1.1",
     "@types/react": "18.2.79",
+    "@webiny/admin-ui": "0.0.0",
     "@webiny/app": "0.0.0",
     "@webiny/app-aco": "0.0.0",
     "@webiny/app-admin": "0.0.0",
@@ -74,7 +75,6 @@
     "react-dom": "18.2.0",
     "react-helmet": "^6.1.0",
     "react-hotkeyz": "^1.0.4",
-    "react-virtualized": "^9.22.5",
     "use-deep-compare-effect": "^1.8.1"
   },
   "devDependencies": {