599 chip block component

libs/renderer/src/components/block-defaults/chip-block/ChipBlock.tsx

@@ -0,0 +1,121 @@
+//React and Third Party Libraries
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { CSSProperties } from "react";
+import { Face } from "@mui/icons-material";
+import { Chip, styled } from "@mui/material";
+
+//Internal Semoss libs
+import { Avatar } from "@semoss/ui";
+
+//Modules internal to current package
+import { useBlock } from "../../../hooks";
+import { BlockDef, BlockComponent } from "../../../store";
+
+export interface ChipBlockDef extends BlockDef<"chip"> {
+    widget: "chip";
+    data: {
+        type: string;
+        label: string;
+        style: CSSProperties;
+        variant: "filled" | "outlined";
+        disabled?: boolean;
+        avatar?: React.ReactElement;
+        size: "small" | "medium";
+        color:
+            | "default"
+            | "primary"
+            | "secondary"
+            | "success"
+            | "warning"
+            | "error";
+        clickable?: boolean;
+        multiSelect?: boolean;
+        link?: string;
+        icon?: React.JSX.Element;
+        src: string;
+        title: string;
+        show: string;
+    };
+    listeners: {
+        // onClick: true;
+    };
+    slots: never;
+}
+
+const StyledAvatar = styled(Avatar, {
+    shouldForwardProp: (prop) => prop !== "chipColor",
+})<{ chipColor: string }>(({ chipColor, theme }) => {
+    const palette = theme.palette;
+
+    return {
+        "&&": {
+            backgroundColor: palette[chipColor]?.main || palette.grey[500],
+            color: palette[chipColor]?.contrastText,
+        },
+    };
+});
+
+export const ChipBlock: BlockComponent = observer(({ id }) => {
+    const { attrs, data /*listeners*/ } = useBlock<ChipBlockDef>(id);
+
+    const displayChip = (key): React.ReactNode => {
+        const avatar = data?.avatar;
+        const link = data?.link || null;
+
+        const chipProps = {
+            label: data.label ?? data.type ?? "Chip",
+            color: data.color,
+            size: data.size,
+            variant: data.variant,
+            clickable: data.clickable,
+        };
+
+        switch (key) {
+            case "Chip":
+                return <Chip {...chipProps} />;
+            case "Avatar":
+                return (
+                    <Chip
+                        {...chipProps}
+                        avatar={
+                            <StyledAvatar chipColor={data.color}>
+                                {avatar}
+                            </StyledAvatar>
+                        }
+                    />
+                );
+            case "Icon":
+                return <Chip {...chipProps} icon={<Face />} />;
+            case "Link":
+                return (
+                    <a href={link}>
+                        <Chip
+                            {...chipProps}
+                            onClick={(e) => e.preventDefault()}
+                        />
+                    </a>
+                );
+            default:
+                return <Chip {...chipProps} />;
+        }
+    };
+
+    return (
+        <div
+            {...attrs}
+            style={{
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                height: "fit-content",
+                width: "fit-content",
+            }}
+            // onClick={() => {
+            //     listeners.onClick();
+            // }}
+        >
+            {displayChip(data.type)}
+        </div>
+    );
+});

libs/renderer/src/components/block-defaults/chip-block/config.tsx

@@ -0,0 +1,183 @@
+//React and Third Party Modules
+import { CSSProperties } from "react";
+import { LabelRounded } from "@mui/icons-material";
+
+//Internal Semoss libs
+import { Avatar } from "@semoss/ui";
+
+//Modules internal to current package
+import { BlockConfig } from "../../../store";
+import { InputSettings, SelectInputSettings } from "../../block-settings";
+import { SwitchSettings } from "../../block-settings/shared/SwitchSettings";
+import { ChipSettings } from "../../block-settings/custom/ChipSettings";
+import { buildListener, buildShowField } from "../block-defaults.shared";
+import { BLOCK_TYPE_DISPLAY } from "../block-defaults.constants";
+import { ChipBlockDef, ChipBlock } from "./ChipBlock";
+
+export const DefaultStyles: CSSProperties = {};
+
+export const config: BlockConfig<ChipBlockDef> = {
+    widget: "chip",
+    type: BLOCK_TYPE_DISPLAY,
+    data: {
+        style: DefaultStyles,
+        color: "default",
+        size: "small",
+        avatar: <Avatar>A</Avatar>,
+        type: "Chip",
+        variant: "filled",
+        label: "",
+        src: "",
+        title: "",
+        show: "true",
+    },
+    listeners: {
+        //onClick: [],
+    },
+    slots: {},
+    render: ChipBlock,
+    icon: LabelRounded,
+
+    contentMenu: [
+        {
+            name: "General",
+            children: [...buildShowField()],
+        },
+        {
+            name: "Select Chip",
+            children: [
+                {
+                    description: " Chip Type",
+                    render: ({ id }) => (
+                        <ChipSettings
+                            id={id}
+                            label="Type"
+                            path="type"
+                            options={[
+                                {
+                                    value: "Chip",
+                                    display: "Chip",
+                                },
+                                {
+                                    value: "Icon",
+                                    display: "Icon Chip",
+                                },
+                                {
+                                    value: "Avatar",
+                                    display: "Avatar Chip",
+                                },
+                                {
+                                    value: "Link",
+                                    display: "Link Chip",
+                                },
+                            ]}
+                        />
+                    ),
+                },
+                {
+                    description: "Label",
+                    render: ({ id }) => (
+                        <InputSettings id={id} label="Label" path="label" />
+                    ),
+                },
+                {
+                    description: "clickable",
+                    render: ({ id }) => (
+                        <SwitchSettings
+                            id={id}
+                            label={"Clickable"}
+                            path={"clickable"}
+                        />
+                    ),
+                },
+            ],
+        },
+        {
+            name: "on Click",
+            children: [...buildListener("onClick")],
+        },
+    ],
+    styleMenu: [
+        {
+            name: "",
+            children: [
+                {
+                    description: "Variant",
+                    render: ({ id }) => (
+                        <SelectInputSettings
+                            id={id}
+                            label="Variant"
+                            path="variant"
+                            options={[
+                                {
+                                    value: "null",
+                                    display: "filled",
+                                },
+                                {
+                                    value: "outlined",
+                                    display: "outlined",
+                                },
+                            ]}
+                        />
+                    ),
+                },
+                {
+                    description: "Color",
+                    render: ({ id }) => (
+                        <SelectInputSettings
+                            id={id}
+                            label="Color"
+                            path="color"
+                            options={[
+                                {
+                                    value: "default",
+                                    display: "default",
+                                },
+                                {
+                                    value: "primary",
+                                    display: "primary",
+                                },
+                                {
+                                    value: "secondary",
+                                    display: "secondary",
+                                },
+                                {
+                                    value: "success",
+                                    display: "success",
+                                },
+                                {
+                                    value: "warning",
+                                    display: "warning",
+                                },
+                                {
+                                    value: "error",
+                                    display: "error",
+                                },
+                            ]}
+                        />
+                    ),
+                },
+                {
+                    description: "Size",
+                    render: ({ id }) => (
+                        <SelectInputSettings
+                            id={id}
+                            label="Size"
+                            path="size"
+                            options={[
+                                {
+                                    value: "small",
+                                    display: "small",
+                                },
+                                {
+                                    value: "medium",
+                                    display: "medium",
+                                },
+                            ]}
+                        />
+                    ),
+                },
+            ],
+        },
+    ],
+};

libs/renderer/src/components/block-defaults/chip-block/index.ts

@@ -0,0 +1,2 @@
+export * from "./config";
+export * from "./ChipBlock";

libs/renderer/src/components/block-defaults/index.ts

@@ -5,8 +5,6 @@ import {
     AccordionBlockDef,
 } from "./accordion-block";
 
-import { config as PopoverBlockConfig, PopoverBlockDef } from "./popover-block";
-
 import { config as AudioBlockConfig, AudioBlockDef } from "./audio-block";
 import {
     config as AudioInputBlockConfig,
@@ -19,6 +17,7 @@ import {
     config as CheckboxBlockConfig,
     CheckboxBlockDef,
 } from "./checkbox-block";
+import { config as ChipBlockConfig, ChipBlockDef } from "./chip-block";
 import {
     config as ContainerBlockConfig,
     ContainerBlockDef,
@@ -59,6 +58,7 @@ import {
     config as PDFViewerBlockConfig,
     PDFViewerBlockDef,
 } from "./pdfViewer-block";
+import { config as PopoverBlockConfig, PopoverBlockDef } from "./popover-block";
 import {
     config as ProgressBlockConfig,
     ProgressBlockDef,
@@ -104,6 +104,7 @@ export type DefaultBlockDefinitions =
     | AudioInputBlockDef
     | ButtonBlockDef
     | CheckboxBlockDef
+    | ChipBlockDef
     | ContainerBlockDef
     | DividerBlockDef
     | EchartVisualizationBlockDef
@@ -152,6 +153,7 @@ export const DefaultBlocks: Registry<DefaultBlockDefinitions> = {
     [AudioInputBlockConfig.widget]: AudioInputBlockConfig,
     [ButtonBlockConfig.widget]: ButtonBlockConfig,
     [CheckboxBlockConfig.widget]: CheckboxBlockConfig,
+    [ChipBlockConfig.widget]: ChipBlockConfig,
     [ContainerBlockConfig.widget]: ContainerBlockConfig,
     [DividerBlockConfig.widget]: DividerBlockConfig,
     [EchartVisualizationBlockConfig.widget]: EchartVisualizationBlockConfig,
@@ -193,6 +195,7 @@ export {
     AudioInputBlockConfig,
     ButtonBlockConfig,
     CheckboxBlockConfig,
+    ChipBlockConfig,
     ContainerBlockConfig,
     DividerBlockConfig,
     GridBlockConfig,