feat: Icon picker component (WIP)

packages/app-admin/package.json

@@ -16,6 +16,7 @@
     "@editorjs/editorjs": "^2.19.0",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
+    "@iconify/json": "^2.2.142",
     "@material-design-icons/svg": "^0.14.3",
     "@svgr/webpack": "^6.1.1",
     "@types/mime": "^2.0.3",
@@ -28,6 +29,7 @@
     "@webiny/lexical-editor": "0.0.0",
     "@webiny/plugins": "0.0.0",
     "@webiny/react-composition": "0.0.0",
+    "@webiny/react-properties": "0.0.0",
     "@webiny/react-router": "0.0.0",
     "@webiny/telemetry": "0.0.0",
     "@webiny/ui": "0.0.0",
@@ -44,15 +46,19 @@
     "emotion": "^10.0.17",
     "graphlib": "^2.1.7",
     "graphql": "^15.7.2",
+    "graphql-tag": "^2.12.6",
     "is-hotkey": "^0.1.3",
     "lodash": "^4.17.11",
     "mobx": "^6.9.0",
+    "mobx-react-lite": "^3.4.3",
     "prop-types": "^15.7.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-hotkeyz": "^1.0.4",
     "react-transition-group": "^4.3.0",
-    "store": "^2.0.12"
+    "react-virtualized": "^9.21.2",
+    "store": "^2.0.12",
+    "unicode-emoji-json": "^0.4.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.6",

packages/app-admin/src/base/Admin.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { App, Provider } from "@webiny/app";
+import { App } from "@webiny/app";
 import { WcpProvider } from "@webiny/app-wcp";
 import { ApolloClientFactory, createApolloProvider } from "./providers/ApolloProvider";
 import { Base } from "./Base";
@@ -8,6 +8,7 @@ import { createUiStateProvider } from "./providers/UiStateProvider";
 import { SearchProvider } from "./ui/Search";
 import { UserMenuProvider } from "./ui/UserMenu";
 import { NavigationProvider } from "./ui/Navigation";
+import { DefaultIcons, IconPickerConfigProvider } from "~/components/IconPicker/config";
 import { CircularProgress } from "@webiny/ui/Progress";
 import { ThemeProvider } from "@webiny/app-theme";
 
@@ -25,12 +26,17 @@ export const Admin = ({ children, createApolloClient }: AdminProps) => {
         <ApolloProvider>
             <ThemeProvider>
                 <WcpProvider loader={<CircularProgress label={"Loading..."} />}>
-                    <App>
-                        <Provider hoc={TelemetryProvider} />
-                        <Provider hoc={UiStateProvider} />
-                        <Provider hoc={SearchProvider} />
-                        <Provider hoc={UserMenuProvider} />
-                        <Provider hoc={NavigationProvider} />
+                    <App
+                        providers={[
+                            TelemetryProvider,
+                            UiStateProvider,
+                            SearchProvider,
+                            UserMenuProvider,
+                            NavigationProvider,
+                            IconPickerConfigProvider
+                        ]}
+                    >
+                        <DefaultIcons />
                         <Base />
                         {children}
                     </App>

packages/app-admin/src/base/ui/FileManager.tsx

@@ -12,6 +12,7 @@ export interface FileManagerOnChange<T> {
 export interface FileManagerFileItem {
     id: string;
     src: string;
+    name?: string;
     meta?: Array<FileManagerFileItemMetaItem>;
 }
 
@@ -94,7 +95,7 @@ export type FileManagerRendererProps = DistributiveOmit<FileManagerProps, "rende
 
 export const FileManagerRenderer = makeComposable<FileManagerRendererProps>("FileManagerRenderer");
 
-export const FileManager = ({ children, render, onChange, ...rest }: FileManagerProps) => {
+export const FileManager = ({ children, render, onChange, onClose, ...rest }: FileManagerProps) => {
     const containerRef = useRef<HTMLElement>(getPortalTarget());
     const [show, setShow] = useState(rest.show ?? false);
     const onChangeRef = useRef(onChange);
@@ -110,6 +111,14 @@ export const FileManager = ({ children, render, onChange, ...rest }: FileManager
         setShow(true);
     }, []);
 
+    const handleClose = useCallback(() => {
+        if (onClose) {
+            onClose();
+        }
+
+        setShow(false);
+    }, [onClose]);
+
     return (
         <>
             {show &&
@@ -119,7 +128,7 @@ export const FileManager = ({ children, render, onChange, ...rest }: FileManager
                      */
                     // @ts-expect-error
                     <FileManagerRenderer
-                        onClose={() => setShow(false)}
+                        onClose={handleClose}
                         onChange={
                             /* TODO: figure out how to create a conditional type based on the value of `rest.multiple` */
                             onChangeRef.current

packages/app-admin/src/components/IconPicker/IconPicker.styles.ts

@@ -0,0 +1,115 @@
+import { css } from "emotion";
+import styled from "@emotion/styled";
+
+export const IconPickerWrapper = styled.div`
+    .mdc-menu-surface {
+        overflow: visible !important;
+    }
+`;
+
+export const iconPickerLabel = css`
+    margin-bottom: 5px;
+    margin-left: 2px;
+`;
+
+export const IconPickerInput = styled.div`
+    background-color: ${props => props.theme.styles.colors.color5};
+    border-bottom: 1px solid ${props => props.theme.styles.colors.color3};
+    padding: 8px;
+    height: 32px;
+    width: fit-content;
+    cursor: pointer;
+    :hover {
+        border-bottom: 1px solid ${props => props.theme.styles.colors.color3};
+    }
+`;
+
+export const MenuHeader = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    text-transform: uppercase;
+    padding: 12px;
+    border-bottom: 1px solid ${props => props.theme.styles.colors.color5};
+    color: ${props => props.theme.styles.colors.color4};
+
+    & > svg {
+        cursor: pointer;
+        fill: ${props => props.theme.styles.colors.color4};
+    }
+`;
+
+export const MenuContent = styled.div`
+    position: relative;
+    width: 364px;
+    height: 524px;
+`;
+
+export const Row = styled.div`
+    display: flex;
+    align-items: center;
+`;
+
+export const Cell = styled.div<{ isActive: boolean }>`
+    cursor: pointer;
+    background-color: ${({ isActive, theme }) =>
+        isActive ? theme.styles.colors.color5 : theme.styles.colors.color6};
+
+    &:hover {
+        background: ${({ theme }) => theme.styles.colors.color5};
+    }
+
+    & > * {
+        padding: 4px;
+    }
+`;
+
+export const CategoryLabel = styled.div`
+    align-self: flex-end;
+    margin-bottom: 4px;
+    text-transform: uppercase;
+    ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph2")};
+    color: ${props => props.theme.styles.colors.color4};
+`;
+
+export const TabContentWrapper = styled.div`
+    width: 340px;
+    padding: 12px;
+`;
+
+export const ListWrapper = styled.div`
+    position: relative;
+`;
+
+export const NoResultsWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 400px;
+`;
+
+export const InputsWrapper = styled.div`
+    display: flex;
+    column-gap: 12px;
+    padding-bottom: 12px;
+    height: 40px;
+
+    [class$="color"] {
+        height: 24px;
+        width: 24px;
+        margin: 3px;
+        border-radius: 50%;
+    }
+
+    [class$="classNames"] {
+        display: none;
+    }
+
+    .webiny-ui-input {
+        height: 40px !important;
+    }
+`;
+
+export const placeholderIcon = css`
+    fill: #00000040;
+`;

packages/app-admin/src/components/IconPicker/IconPicker.tsx

@@ -0,0 +1,40 @@
+import React, { useMemo, useEffect } from "react";
+import { useIconPickerConfig } from "./config";
+import { iconRepositoryFactory } from "./IconRepositoryFactory";
+import { IconPickerPresenter } from "./IconPickerPresenter";
+import { IconPickerComponent, IconPickerProps } from "./IconPickerComponent";
+import { IconProvider, IconRenderer } from "./IconRenderer";
+import { IconPickerTab } from "./IconPickerTab";
+import { Icon } from "./types";
+
+const IconPicker = (props: IconPickerProps) => {
+    const { iconTypes, iconPackProviders } = useIconPickerConfig();
+    const repository = iconRepositoryFactory.getRepository(iconTypes, iconPackProviders);
+
+    const presenter = useMemo(() => {
+        return new IconPickerPresenter(repository);
+    }, [repository]);
+
+    useEffect(() => {
+        presenter.load(props.value);
+    }, [repository, props.value]);
+
+    return <IconPickerComponent presenter={presenter} {...props} />;
+};
+
+interface IconRendererWithProviderProps {
+    icon: Icon;
+}
+
+const IconRendererWithProvider = ({ icon }: IconRendererWithProviderProps) => {
+    return (
+        <IconProvider icon={icon}>
+            <IconRenderer />
+        </IconProvider>
+    );
+};
+
+IconPicker.Icon = IconRendererWithProvider;
+IconPicker.IconPickerTab = IconPickerTab;
+
+export { IconPicker };

packages/app-admin/src/components/IconPicker/IconPickerComponent.tsx

@@ -0,0 +1,119 @@
+import React, { useEffect } from "react";
+import { observer } from "mobx-react-lite";
+import isEqual from "lodash/isEqual";
+import { ReactComponent as CloseIcon } from "@material-design-icons/svg/outlined/close.svg";
+import { ReactComponent as SearchIcon } from "@material-design-icons/svg/outlined/search.svg";
+
+import { Menu } from "@webiny/ui/Menu";
+import { Tabs } from "@webiny/ui/Tabs";
+import { Typography } from "@webiny/ui/Typography";
+import { FormElementMessage } from "@webiny/ui/FormElementMessage";
+import { FormComponentProps } from "@webiny/ui/types";
+import { CircularProgress } from "@webiny/ui/Progress";
+
+import { IconPickerPresenter } from "./IconPickerPresenter";
+import { IconProvider, IconRenderer } from "./IconRenderer";
+import {
+    IconPickerWrapper,
+    iconPickerLabel,
+    IconPickerInput,
+    MenuContent,
+    MenuHeader,
+    placeholderIcon
+} from "./IconPicker.styles";
+import { IconPickerTabRenderer } from "./IconPickerTab";
+import { IconPickerPresenterProvider } from "./IconPickerPresenterProvider";
+import { IconTypeProvider } from "./config/IconType";
+
+export interface IconPickerProps extends FormComponentProps {
+    label?: string;
+    description?: string;
+}
+
+export interface IconPickerComponentProps extends IconPickerProps {
+    presenter: IconPickerPresenter;
+}
+
+export const IconPickerComponent = observer(
+    ({ presenter, label, description, ...props }: IconPickerComponentProps) => {
+        const { value, onChange } = props;
+        const { isValid: validationIsValid, message: validationMessage } = props.validation || {};
+        const { activeTab, isMenuOpened, isLoading, iconTypes, selectedIcon } = presenter.vm;
+
+        useEffect(() => {
+            if (onChange && selectedIcon && !isEqual(selectedIcon, value)) {
+                onChange(selectedIcon);
+            }
+        }, [selectedIcon]);
+
+        const setActiveTab = (index: number) => presenter.setActiveTab(index);
+
+        const openMenu = () => presenter.openMenu();
+        const closeMenu = () => presenter.closeMenu();
+
+        return (
+            <IconPickerPresenterProvider presenter={presenter}>
+                <IconPickerWrapper>
+                    {label && (
+                        <div className={iconPickerLabel}>
+                            <Typography use={"body1"}>{label}</Typography>
+                        </div>
+                    )}
+
+                    <Menu
+                        open={isMenuOpened}
+                        handle={
+                            <IconPickerInput>
+                                {selectedIcon ? (
+                                    <IconProvider icon={selectedIcon}>
+                                        <IconRenderer />
+                                    </IconProvider>
+                                ) : (
+                                    <SearchIcon
+                                        width={32}
+                                        height={32}
+                                        className={placeholderIcon}
+                                    />
+                                )}
+                            </IconPickerInput>
+                        }
+                        onClose={closeMenu}
+                        onOpen={openMenu}
+                    >
+                        {() => (
+                            <>
+                                <MenuHeader>
+                                    <Typography use={"body1"}>Select an icon</Typography>
+                                    <CloseIcon onClick={closeMenu} />
+                                </MenuHeader>
+                                <MenuContent>
+                                    {isLoading && <CircularProgress />}
+                                    <Tabs
+                                        value={activeTab}
+                                        onActivate={value => setActiveTab(value)}
+                                    >
+                                        {iconTypes.map(iconType => (
+                                            <IconTypeProvider
+                                                key={iconType.name}
+                                                type={iconType.name}
+                                            >
+                                                <IconPickerTabRenderer />
+                                            </IconTypeProvider>
+                                        ))}
+                                    </Tabs>
+                                </MenuContent>
+                            </>
+                        )}
+                    </Menu>
+
+                    {validationIsValid === false && (
+                        <FormElementMessage error>{validationMessage}</FormElementMessage>
+                    )}
+                    {validationIsValid !== false && description && (
+                        <FormElementMessage>{description}</FormElementMessage>
+                    )}
+                </IconPickerWrapper>
+            </IconPickerPresenterProvider>
+        );
+    }
+);