#HT-224: Icon node component

packages/console/src/nodes/Icon.tsx

@@ -0,0 +1,99 @@
+import type { ReactElement } from "react";
+
+import { FormGroup, Icon as MuiIcon } from "@mui/material";
+
+import { useNode } from "@craftjs/core";
+
+import PropertiesForm from "../screens/app-builder/panels/properties-editor/PropertiesForm";
+import type { CraftComponent, IconColor, IconFontSize } from "../types";
+
+interface Props {
+    color?: IconColor;
+    fontSize?: IconFontSize | string;
+}
+
+export const Icon: CraftComponent<Props> = (props: Props): ReactElement => {
+    const { color, fontSize } = props;
+
+    const {
+        connectors: { connect, drag },
+    } = useNode();
+
+    return (
+        <div ref={(ref) => connect(drag(ref as any))}>
+            <div ref={(ref) => connect(drag(ref as any))}>
+                <FormGroup>
+                    <MuiIcon color={color} fontSize={fontSize as any} />
+                </FormGroup>
+            </div>
+        </div>
+    );
+};
+
+const defaultProps: Props = {
+    color: "inherit",
+    fontSize: "24px",
+};
+
+Icon.craft = {
+    props: defaultProps,
+    related: {
+        settings: () => (
+            <PropertiesForm
+                groups={[
+                    {
+                        title: "General",
+                        fields: [
+                            {
+                                id: "fontSize",
+                                size: "small",
+                                help: " The size of the icon",
+                                type: "select",
+                                required: true,
+                                title: "Font Size",
+                                options: [
+                                    {
+                                        value: "inherit",
+                                        title: "determinate",
+                                    },
+                                    {
+                                        value: "large",
+                                        title: "large",
+                                    },
+                                    {
+                                        value: "medium",
+                                        title: "medium",
+                                    },
+                                    {
+                                        value: "small",
+                                        title: "small",
+                                    },
+                                ],
+                            },
+                            {
+                                id: "color",
+                                size: "small",
+                                help: "  The color of the Icon button.",
+                                type: "select",
+                                required: true,
+                                title: "Color",
+                                options: [
+                                    { value: "inherit", title: "Inherit" },
+                                    { value: "action", title: "Action" },
+                                    { value: "disabled", title: "Disabled" },
+                                    { value: "primary", title: "Primary" },
+                                    { value: "secondary", title: "Secondary" },
+                                    { value: "success", title: "Success" },
+                                    { value: "error", title: "Error" },
+                                    { value: "info", title: "Info" },
+                                    { value: "warning", title: "Warning" },
+                                ],
+                            },
+                        ],
+                    },
+                ]}
+                validationSchema={undefined}
+            />
+        ),
+    },
+};

packages/console/src/nodes/index.tsx

@@ -3,6 +3,7 @@ import { Card, CardBottom, CardTop } from "./Card";
 import { Checkbox } from "./Checkbox";
 import { Container } from "./Container";
 import FlexLayout from "./FlexLayout";
+import { Icon } from "./Icon";
 import { Select } from "./Select";
 import { Text } from "./Text";
 
@@ -16,6 +17,7 @@ export const nodeMappings = {
     FlexLayout,
     Select,
     Checkbox,
+    Icon,
 };
 
 export * from "./Text";
@@ -25,3 +27,4 @@ export * from "./Card";
 export { FlexLayout };
 export * from "./Select";
 export * from "./Checkbox";
+export * from "./Icon";

packages/console/src/screens/app-builder/navigation/Components.tsx

@@ -4,6 +4,7 @@ import { styled } from "@mui/material/styles";
 import {
     AddBoxOutlined,
     AddBoxTwoTone,
+    Apps,
     ArrowDropDownCircle,
     FormatShapes,
     TextFields,
@@ -17,6 +18,7 @@ import {
     Card,
     Checkbox,
     FlexLayout,
+    Icon,
     Select,
     Text,
 } from "../../../nodes";
@@ -97,6 +99,14 @@ const Components = () => {
                     Select
                 </ItemButton>
             </Grid>
+            <Grid item={true} xs={6}>
+                <ItemButton
+                    ref={(ref) => connectors.create(ref as any, <Icon />)}
+                    variant="contained">
+                    <Apps fontSize="large" />
+                    Icon
+                </ItemButton>
+            </Grid>
         </ContianerGrid>
     );
 };

packages/console/src/types/index.tsx

@@ -151,3 +151,7 @@ export interface IBuilderActionsContext {
     activeTab: string | null;
     setActiveTab: (activeTab: string) => void;
 }
+
+export type IconColor = Color | "action" | "disabled";
+
+export type IconFontSize = "inherit" | "large" | "medium" | "small";