From c0bed50945d3ff255ece492cdceca46f7884421b Mon Sep 17 00:00:00 2001 From: mezzet_deloitte Date: Mon, 10 Mar 2025 17:39:29 -0400 Subject: [PATCH 1/9] feat(client): create chip block --- .../block-defaults/chip-block/ChipBlock.tsx | 63 +++++++ .../block-defaults/chip-block/config.tsx | 165 ++++++++++++++++++ .../block-defaults/chip-block/index.ts | 2 + .../src/components/block-defaults/index.ts | 5 + .../block-settings/custom/ChipSettings.tsx | 141 +++++++++++++++ .../components/block-settings/custom/index.ts | 1 + .../components/designer/menu/default-menu.ts | 21 +++ 7 files changed, 398 insertions(+) create mode 100644 packages/client/src/components/block-defaults/chip-block/ChipBlock.tsx create mode 100644 packages/client/src/components/block-defaults/chip-block/config.tsx create mode 100644 packages/client/src/components/block-defaults/chip-block/index.ts create mode 100644 packages/client/src/components/block-settings/custom/ChipSettings.tsx diff --git a/packages/client/src/components/block-defaults/chip-block/ChipBlock.tsx b/packages/client/src/components/block-defaults/chip-block/ChipBlock.tsx new file mode 100644 index 0000000000..72bef3381f --- /dev/null +++ b/packages/client/src/components/block-defaults/chip-block/ChipBlock.tsx @@ -0,0 +1,63 @@ +/* eslint-disable react/jsx-no-undef */ +/* eslint-disable no-undef */ +import { useBlock } from '@/hooks'; +import { BlockDef, BlockComponent } from '@/stores'; +import { Chip, styled } from '@semoss/ui'; +import { observer } from 'mobx-react-lite'; +import { CSSProperties } from 'react'; + +export interface ChipBlockDef extends BlockDef<'chip'> { + widget: 'chip'; + data: { + type: string; + label: string; + variant?: 'filled'; + icon: JSX.Element; + size: 'small' | 'medium'; + style: CSSProperties; + color: 'primary' | 'default' | 'pink' | 'green' | 'purple'; + src: string; + title: string; + }; + slots: never; +} + +// eslint-disable-next-line no-unused-vars +const StyledLabel = styled('span', { + shouldForwardProp: (prop) => prop !== 'loading', +})<{ loading?: boolean }>(({ loading }) => ({ + visibility: loading ? 'hidden' : 'visible', +})); + +// const handleDelete = () => { +// console.log('fake deleted'); +// }; + +export const ChipBlock: BlockComponent = observer(({ id }) => { + const { attrs, data /* listeners */ } = useBlock(id); + + return ( +
+ { + // eslint-disable-next-line prettier/prettier + + } +
+ ); +}); diff --git a/packages/client/src/components/block-defaults/chip-block/config.tsx b/packages/client/src/components/block-defaults/chip-block/config.tsx new file mode 100644 index 0000000000..bbbac09100 --- /dev/null +++ b/packages/client/src/components/block-defaults/chip-block/config.tsx @@ -0,0 +1,165 @@ +/* eslint-disable react/jsx-no-undef */ +import { BlockConfig } from '@/stores'; +import { + buildDimensionsSection, + buildListener, +} from '../block-defaults.shared'; +import { ChipBlockDef, ChipBlock } from './ChipBlock'; +import { BLOCK_TYPE_DISPLAY } from '../block-defaults.constants'; +import { InputSettings, SelectInputSettings } from '../../block-settings'; +import { ChipSettings } from '../../block-settings/custom/ChipSettings'; +import { Face } from '@mui/icons-material'; + +export const config: BlockConfig = { + widget: 'chip', + type: BLOCK_TYPE_DISPLAY, + data: { + style: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + width: '100%', + height: '200px', + }, + color: 'primary', + size: 'small', + icon: , + type: 'chip', + variant: 'filled', + label: '', + src: '', + title: '', + }, + listeners: { + //onClick: [], + }, + slots: {}, + render: ChipBlock, + + contentMenu: [ + { + name: 'Select Chip', + children: [ + { + description: ' Chip Type', + render: ({ id }) => ( + + ), + }, + { + description: 'Label', + render: ({ id }) => ( + + ), + }, + ], + }, + { + name: 'on Click', + children: [...buildListener('onClick')], + }, + ], + styleMenu: [ + { + name: '', + children: [ + { + description: 'Variant', + render: ({ id }) => ( + + ), + }, + { + description: 'Color', + render: ({ id }) => ( + + ), + }, + { + description: 'Size', + render: ({ id }) => ( + + ), + }, + ], + }, + buildDimensionsSection(), + ], + icon: undefined, +}; diff --git a/packages/client/src/components/block-defaults/chip-block/index.ts b/packages/client/src/components/block-defaults/chip-block/index.ts new file mode 100644 index 0000000000..58b4c543af --- /dev/null +++ b/packages/client/src/components/block-defaults/chip-block/index.ts @@ -0,0 +1,2 @@ +export * from './config'; +export * from './ChipBlock'; diff --git a/packages/client/src/components/block-defaults/index.ts b/packages/client/src/components/block-defaults/index.ts index e14a76f337..f718288096 100644 --- a/packages/client/src/components/block-defaults/index.ts +++ b/packages/client/src/components/block-defaults/index.ts @@ -1,7 +1,9 @@ +/* eslint-disable no-unused-vars */ import { Registry } from '@/stores'; import { config as AudioBlockConfig, AudioBlockDef } from './audio-block'; import { config as BodyBlockConfig, BodyBlockDef } from './body-block'; import { config as ButtonBlockConfig, ButtonBlockDef } from './button-block'; +import { config as ChipBlockConfig, ChipBlockDef } from './chip-block'; import { config as QueryBlockConfig, QueryBlockDef } from './query-block'; import { config as LogsBlockConfig, LogsBlockDef } from './logs-block'; import { @@ -69,6 +71,7 @@ export type DefaultBlockDefinitions = | ButtonBlockDef | CheckboxBlockDef | ContainerBlockDef + | ChipBlockDef | DividerBlockDef | FooterBlockDef | FormBlockDef @@ -102,6 +105,7 @@ export const DefaultBlocks: Registry = { [AudioBlockConfig.widget]: AudioBlockConfig, [ButtonBlockConfig.widget]: ButtonBlockConfig, [CheckboxBlockConfig.widget]: CheckboxBlockConfig, + [ChipBlockConfig.widget]: ChipBlockConfig, [CompareLLMBlockConfig.widget]: CompareLLMBlockConfig, [ContainerBlockConfig.widget]: ContainerBlockConfig, [IframeBlockConfig.widget]: IframeBlockConfig, @@ -134,6 +138,7 @@ export { ButtonBlockConfig, ContainerBlockConfig, CheckboxBlockConfig, + ChipBlockConfig, IframeBlockConfig, ImageBlockConfig, InputBlockConfig, diff --git a/packages/client/src/components/block-settings/custom/ChipSettings.tsx b/packages/client/src/components/block-settings/custom/ChipSettings.tsx new file mode 100644 index 0000000000..5f3f772697 --- /dev/null +++ b/packages/client/src/components/block-settings/custom/ChipSettings.tsx @@ -0,0 +1,141 @@ +/* eslint-disable no-unused-vars */ +import { useEffect, useMemo, useRef, useState } from 'react'; +import { computed } from 'mobx'; +import { observer } from 'mobx-react-lite'; +import { Paths, PathValue } from '../../../types'; +import { useBlocks, useBlockSettings } from '../../../hooks'; +import { ActionMessages, Block, BlockDef } from '@/stores'; +import { getValueByPath } from '../../../utility'; +import { BaseSettingSection } from '../BaseSettingSection'; +import { Autocomplete, Chip, TextField } from '@mui/material'; + +interface ChipSettingsProps { + id: string; + path: Paths['data'], 4>; + label: string; + options: Array<{ value: string; display: string }>; + resizeOnSet?: boolean; +} + +const labelMap: { [key: string]: string } = {}; + +export const inputOptions = Object.keys(labelMap).map((key) => ({ + value: key, + display: key, +})); + +export const ChipSettings = observer( + ({ + id, + path, + label, + options, + resizeOnSet = false, + }: ChipSettingsProps) => { + const { data, setData } = useBlockSettings(id); + const { state } = useBlocks(); + + const [autocompleteOptions, setAutocompleteOptions] = useState< + Array + >([]); + + useEffect(() => { + setAutocompleteOptions(options.map((option) => option.value)); + }, [options]); + + // track the value + const [value, setValue] = useState(''); + + // track the ref to debounce the input + const timeoutRef = useRef>(null); + + // get the value of the input (wrapped in usememo because of path prop) + const computedValue = useMemo(() => { + return computed(() => { + if (!data) { + return ''; + } + + const v = getValueByPath(data, path); + if (typeof v === 'undefined') { + return ''; + } else if (typeof v === 'string') { + return v; + } + + return JSON.stringify(v); + }); + }, [data, path]).get(); + + // update the value whenever the computed one changes + useEffect(() => { + setValue(computedValue); + }, [computedValue]); + + /** + * Sync the data on change + */ + const onChange = (value: string) => { + // set the value + setValue(value); + + // clear out he old timeout + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + timeoutRef.current = null; + } + + timeoutRef.current = setTimeout(() => { + try { + // set the value + setData(path, value as PathValue); + if (resizeOnSet) { + // emit event to resize the block on the screen + state.dispatch({ + message: ActionMessages.DISPATCH_EVENT, + payload: { + name: 'blockResized', + }, + }); + } + } catch (e) { + console.log(e); + } + }, 300); + }; + + // const chipSelect = (key: string) => { + // const selected = options.map() + // }; + + return ( + + { + onChange(newValue); + }} + options={options.map((option) => option.value)} + renderOption={(props, option) => ( +
  • +
    + {} +
    +
    • + )} + renderInput={(params) => } + disablePortal + disableClearable + /> +     + ); + }, +); diff --git a/packages/client/src/components/block-settings/custom/index.ts b/packages/client/src/components/block-settings/custom/index.ts index 3c3123ba7a..78745f8e63 100644 --- a/packages/client/src/components/block-settings/custom/index.ts +++ b/packages/client/src/components/block-settings/custom/index.ts @@ -11,3 +11,4 @@ export { SelectInputValueSettings } from './SelectInputValueSettings'; export { GridSettings } from './grid'; export { QueryInputSettings } from './QueryInputSettings'; export { OptionsSettings } from './OptionsSettings'; +export { ChipSettings } from './ChipSettings'; diff --git a/packages/client/src/components/designer/menu/default-menu.ts b/packages/client/src/components/designer/menu/default-menu.ts index 29935aa375..b9542210cc 100644 --- a/packages/client/src/components/designer/menu/default-menu.ts +++ b/packages/client/src/components/designer/menu/default-menu.ts @@ -328,6 +328,27 @@ export const DEFAULT_MENU: DesignerMenuItem[] = [ slots: {} as BlockJSON['slots'], }, }, + { + section: SECTION_ELEMENT, + image: BLOCK_IMAGE, + name: 'Chip', + json: { + widget: 'chip', + data: { + style: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + width: '100%', + height: '200px', + }, + src: '', + title: '', + }, + listeners: {}, + slots: {} as BlockJSON['slots'], + }, + }, { section: SECTION_ELEMENT, image: BLOCK_PDF_VIEWER, From 99e0b6d63e311dc3f0acb852b48fb6fcda671664 Mon Sep 17 00:00:00 2001 From: mezzet_deloitte Date: Tue, 11 Mar 2025 15:56:52 -0400 Subject: [PATCH 2/9] resolve merge conflicts --- .../block-defaults/chip-block/ChipBlock.tsx | 53 +++++++------ .../block-defaults/chip-block/config.tsx | 78 ++++++++++++++----- .../block-settings/custom/ChipSettings.tsx | 32 ++++++-- 3 files changed, 113 insertions(+), 50 deletions(-) diff --git a/packages/client/src/components/block-defaults/chip-block/ChipBlock.tsx b/packages/client/src/components/block-defaults/chip-block/ChipBlock.tsx index 72bef3381f..36bb50eaef 100644 --- a/packages/client/src/components/block-defaults/chip-block/ChipBlock.tsx +++ b/packages/client/src/components/block-defaults/chip-block/ChipBlock.tsx @@ -2,7 +2,7 @@ /* eslint-disable no-undef */ import { useBlock } from '@/hooks'; import { BlockDef, BlockComponent } from '@/stores'; -import { Chip, styled } from '@semoss/ui'; +import { Chip, Stack } from '@semoss/ui'; import { observer } from 'mobx-react-lite'; import { CSSProperties } from 'react'; @@ -11,33 +11,39 @@ export interface ChipBlockDef extends BlockDef<'chip'> { data: { type: string; label: string; - variant?: 'filled'; - icon: JSX.Element; - size: 'small' | 'medium'; style: CSSProperties; - color: 'primary' | 'default' | 'pink' | 'green' | 'purple'; + //variant: 'filled' | 'outlined'; + disabled?: boolean; + icon?: React.ReactElement; + size: 'small' | 'medium'; + color: + | 'primary' + | 'default' + | 'pink' + | 'green' + | 'purple' + | 'indigo' + | 'turqoise' + | 'lcgreen' + | 'lcpink' + | 'lcpurple' + | 'lcindigo' + | 'lcprimary'; + clickable?: boolean; src: string; title: string; }; + listeners: { + onClick: true; + }; slots: never; } -// eslint-disable-next-line no-unused-vars -const StyledLabel = styled('span', { - shouldForwardProp: (prop) => prop !== 'loading', -})<{ loading?: boolean }>(({ loading }) => ({ - visibility: loading ? 'hidden' : 'visible', -})); - -// const handleDelete = () => { -// console.log('fake deleted'); -// }; - export const ChipBlock: BlockComponent = observer(({ id }) => { - const { attrs, data /* listeners */ } = useBlock(id); + const { attrs, data, listeners } = useBlock(id); return ( -
    { width: 'fit-content', paddingInline: '10px', }} + onClick={() => { + listeners.onClick(); + }} > { - // eslint-disable-next-line prettier/prettier } -
    + ); }); diff --git a/packages/client/src/components/block-defaults/chip-block/config.tsx b/packages/client/src/components/block-defaults/chip-block/config.tsx index bbbac09100..50d536cf44 100644 --- a/packages/client/src/components/block-defaults/chip-block/config.tsx +++ b/packages/client/src/components/block-defaults/chip-block/config.tsx @@ -4,34 +4,36 @@ import { buildDimensionsSection, buildListener, } from '../block-defaults.shared'; +import { CSSProperties } from 'react'; import { ChipBlockDef, ChipBlock } from './ChipBlock'; import { BLOCK_TYPE_DISPLAY } from '../block-defaults.constants'; -import { InputSettings, SelectInputSettings } from '../../block-settings'; +import { + InputSettings, + SelectInputSettings, + SwitchSettings, +} from '../../block-settings'; + import { ChipSettings } from '../../block-settings/custom/ChipSettings'; import { Face } from '@mui/icons-material'; +export const DefaultStyles: CSSProperties = {}; + export const config: BlockConfig = { widget: 'chip', type: BLOCK_TYPE_DISPLAY, data: { - style: { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - width: '100%', - height: '200px', - }, - color: 'primary', + style: DefaultStyles, + color: 'default', size: 'small', icon: , type: 'chip', - variant: 'filled', + //variant: 'filled', label: '', src: '', title: '', }, listeners: { - //onClick: [], + onClick: [], }, slots: {}, render: ChipBlock, @@ -49,20 +51,16 @@ export const config: BlockConfig = { path="type" options={[ { - value: 'Chip', + value: 'Chip', //default display: 'Chip', }, { - value: 'Click', - display: 'Click', + value: 'Delete', //onDelete={} + display: 'Deleteable Chip', }, { - value: 'Delete', - display: 'Delete', - }, - { - value: 'Link', - display: 'Link', + value: 'Link', //component = "a" href = " " clickable + display: 'Link Chip', }, ]} /> @@ -74,6 +72,16 @@ export const config: BlockConfig = { ), }, + { + description: 'clickable', + render: ({ id }) => ( + + ), + }, ], }, { @@ -133,6 +141,34 @@ export const config: BlockConfig = { value: 'purple', display: 'purple', }, + { + value: 'indigo', + display: 'indigo', + }, + { + value: 'turqoise', + display: 'turqoise', + }, + { + value: 'lcgreen', + display: 'lcgreen', + }, + { + value: 'lcpink', + display: 'lcpink', + }, + { + value: 'lcpurple', + display: 'lcpurple', + }, + { + value: 'lcindigo', + display: 'lcindigo', + }, + { + value: 'lcprimary', + display: 'lcprimary', + }, ]} /> ), @@ -140,7 +176,7 @@ export const config: BlockConfig = { { description: 'Size', render: ({ id }) => ( - { id: string; @@ -104,9 +105,11 @@ export const ChipSettings = observer( }, 300); }; - // const chipSelect = (key: string) => { - // const selected = options.map() - // }; + const [chipVisible, setChipVisible] = useState(true); + + const handleDelete = () => { + setChipVisible(false); + }; return ( @@ -120,15 +123,30 @@ export const ChipSettings = observer( options={options.map((option) => option.value)} renderOption={(props, option) => (
  • -
    - {} -
    + {(() => { + switch (option) { + case 'Chip': + return ; + case 'Delete': + return ( + + ); + // case 'Link': + // return ; + case 'outlined': + return ; + case 'filled': + return ; + } + })()} +
    • )} renderInput={(params) => } From ba49088e2ae37c21c0602f9d6fafcdb130a9a876 Mon Sep 17 00:00:00 2001 From: mezzet_deloitte Date: Thu, 20 Mar 2025 15:39:36 -0400 Subject: [PATCH 3/9] feat: (client) Create Chip Block --- .../block-defaults/chip-block/ChipBlock.tsx | 98 +++++++----- .../block-defaults/chip-block/config.tsx | 130 ++++++++-------- .../block-settings/custom/ChipSettings.tsx | 143 +++++++++++------- .../components/designer/menu/default-menu.ts | 2 +- 4 files changed, 223 insertions(+), 150 deletions(-) diff --git a/packages/client/src/components/block-defaults/chip-block/ChipBlock.tsx b/packages/client/src/components/block-defaults/chip-block/ChipBlock.tsx index 36bb50eaef..3f72a6aafc 100644 --- a/packages/client/src/components/block-defaults/chip-block/ChipBlock.tsx +++ b/packages/client/src/components/block-defaults/chip-block/ChipBlock.tsx @@ -1,9 +1,10 @@ -/* eslint-disable react/jsx-no-undef */ -/* eslint-disable no-undef */ import { useBlock } from '@/hooks'; import { BlockDef, BlockComponent } from '@/stores'; -import { Chip, Stack } from '@semoss/ui'; +import { Face } from '@mui/icons-material'; +import { Chip } from '@mui/material'; +import { Avatar } from '@semoss/ui'; import { observer } from 'mobx-react-lite'; +import React from 'react'; import { CSSProperties } from 'react'; export interface ChipBlockDef extends BlockDef<'chip'> { @@ -12,38 +13,76 @@ export interface ChipBlockDef extends BlockDef<'chip'> { type: string; label: string; style: CSSProperties; - //variant: 'filled' | 'outlined'; + variant: 'filled' | 'outlined'; disabled?: boolean; - icon?: React.ReactElement; + avatar?: React.ReactElement; size: 'small' | 'medium'; color: - | 'primary' | 'default' - | 'pink' - | 'green' - | 'purple' - | 'indigo' - | 'turqoise' - | 'lcgreen' - | 'lcpink' - | 'lcpurple' - | 'lcindigo' - | 'lcprimary'; + | 'primary' + | 'secondary' + | 'success' + | 'warning' + | 'error'; clickable?: boolean; + multiSelect?: boolean; + link?: string; + icon?: React.JSX.Element; src: string; title: string; }; - listeners: { - onClick: true; - }; slots: never; } export const ChipBlock: BlockComponent = observer(({ id }) => { - const { attrs, data, listeners } = useBlock(id); + const { attrs, data } = useBlock(id); + + const displayChip = (key): React.ReactNode => { + const avatar = data?.avatar || 'A'; + 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 ; + case 'Avatar': + return ( + + {avatar} + + } + /> + ); + case 'Icon': + return } />; + case 'Link': + return ( + + e.preventDefault()} + /> + + ); + default: + return ; + } + }; return ( - { alignItems: 'center', height: 'fit-content', width: 'fit-content', - paddingInline: '10px', - }} - onClick={() => { - listeners.onClick(); }} > - { - - } - + {data.type ? displayChip(data.type) : displayChip('default')} + ); }); diff --git a/packages/client/src/components/block-defaults/chip-block/config.tsx b/packages/client/src/components/block-defaults/chip-block/config.tsx index 50d536cf44..041e932f89 100644 --- a/packages/client/src/components/block-defaults/chip-block/config.tsx +++ b/packages/client/src/components/block-defaults/chip-block/config.tsx @@ -1,9 +1,5 @@ -/* eslint-disable react/jsx-no-undef */ import { BlockConfig } from '@/stores'; -import { - buildDimensionsSection, - buildListener, -} from '../block-defaults.shared'; +import { buildListener } from '../block-defaults.shared'; import { CSSProperties } from 'react'; import { ChipBlockDef, ChipBlock } from './ChipBlock'; import { BLOCK_TYPE_DISPLAY } from '../block-defaults.constants'; @@ -14,7 +10,8 @@ import { } from '../../block-settings'; import { ChipSettings } from '../../block-settings/custom/ChipSettings'; -import { Face } from '@mui/icons-material'; +import { CancelOutlined } from '@mui/icons-material'; +import { Avatar } from '@semoss/ui'; export const DefaultStyles: CSSProperties = {}; @@ -25,18 +22,19 @@ export const config: BlockConfig = { style: DefaultStyles, color: 'default', size: 'small', - icon: , - type: 'chip', - //variant: 'filled', + avatar: A, + type: 'Chip', + variant: 'filled', label: '', src: '', title: '', }, listeners: { - onClick: [], + //onClick: [], }, slots: {}, render: ChipBlock, + icon: CancelOutlined, contentMenu: [ { @@ -51,15 +49,19 @@ export const config: BlockConfig = { path="type" options={[ { - value: 'Chip', //default + value: 'Chip', display: 'Chip', }, { - value: 'Delete', //onDelete={} - display: 'Deleteable Chip', + value: 'Icon', + display: 'Icon Chip', + }, + { + value: 'Avatar', + display: 'Avatar Chip', }, { - value: 'Link', //component = "a" href = " " clickable + value: 'Link', display: 'Link Chip', }, ]} @@ -96,13 +98,13 @@ export const config: BlockConfig = { { description: 'Variant', render: ({ id }) => ( - = { label="Color" path="color" options={[ - { - value: 'primary', - display: 'primary', - }, { value: 'default', display: 'default', }, { - value: 'pink', - display: 'pink', - }, - { - value: 'green', - display: 'green', - }, - { - value: 'purple', - display: 'purple', - }, - { - value: 'indigo', - display: 'indigo', - }, - { - value: 'turqoise', - display: 'turqoise', - }, - { - value: 'lcgreen', - display: 'lcgreen', - }, - { - value: 'lcpink', - display: 'lcpink', - }, - { - value: 'lcpurple', - display: 'lcpurple', - }, - { - value: 'lcindigo', - display: 'lcindigo', + value: 'primary', + display: 'primary', }, { - value: 'lcprimary', - display: 'lcprimary', - }, + value: 'secondary', + display: 'secondary', + }, + { + value: 'success', + display: 'success', + }, + { + value: 'warning', + display: 'warning', + }, + { + value: 'error', + display: 'error', + }, + // { + // value: 'green', + // display: 'green', + // }, + // { + // value: 'pink', + // display: 'pink', + // }, + // { + // value: 'purple', + // display: 'purple', + // }, + // { + // value: 'indigo', + // display: 'indigo', + // }, + // { + // value: 'lcgreen', + // display: 'lcgreen', + // }, + // { + // value: 'lcpink', + // display: 'lcpink', + // }, + // { + // value: 'lcpurple', + // display: 'lcpurple', + // }, + // { + // value: 'lcindigo', + // display: 'lcindigo', + // }, + // { + // value: 'lcprimary', + // display: 'lcprimary', + // }, ]} /> ), @@ -195,7 +209,5 @@ export const config: BlockConfig = { }, ], }, - buildDimensionsSection(), ], - icon: undefined, }; diff --git a/packages/client/src/components/block-settings/custom/ChipSettings.tsx b/packages/client/src/components/block-settings/custom/ChipSettings.tsx index 3368cfe654..31d962c12a 100644 --- a/packages/client/src/components/block-settings/custom/ChipSettings.tsx +++ b/packages/client/src/components/block-settings/custom/ChipSettings.tsx @@ -1,5 +1,3 @@ -/* eslint-disable prettier/prettier */ -/* eslint-disable no-unused-vars */ import { useEffect, useMemo, useRef, useState } from 'react'; import { computed } from 'mobx'; import { observer } from 'mobx-react-lite'; @@ -9,22 +7,17 @@ import { ActionMessages, Block, BlockDef } from '@/stores'; import { getValueByPath } from '../../../utility'; import { BaseSettingSection } from '../BaseSettingSection'; import { Autocomplete, Chip, Stack, TextField } from '@mui/material'; +import { Avatar } from '@semoss/ui'; +import { Face } from '@mui/icons-material'; interface ChipSettingsProps { id: string; path: Paths['data'], 4>; label: string; - options: Array<{ value: string; display: string }>; + options?: Array<{ value: string; display: string }>; resizeOnSet?: boolean; } -const labelMap: { [key: string]: string } = {}; - -export const inputOptions = Object.keys(labelMap).map((key) => ({ - value: key, - display: key, -})); - export const ChipSettings = observer( ({ id, @@ -36,6 +29,7 @@ export const ChipSettings = observer( const { data, setData } = useBlockSettings(id); const { state } = useBlocks(); + // eslint-disable-next-line no-unused-vars const [autocompleteOptions, setAutocompleteOptions] = useState< Array >([]); @@ -105,55 +99,96 @@ export const ChipSettings = observer( }, 300); }; - const [chipVisible, setChipVisible] = useState(true); + const [ChipValue, setChipValue] = useState(''); + const [selectedChipType, setSelectedChipType] = useState(''); - const handleDelete = () => { - setChipVisible(false); + const handleChipChange = (chip, e) => { + setChipValue(e.target.value); + setData(chip.toLowerCase(), e.target.value); }; return ( - - { - onChange(newValue); - }} - options={options.map((option) => option.value)} - renderOption={(props, option) => ( -
  • - - {(() => { - switch (option) { - case 'Chip': - return ; - case 'Delete': - return ( - - ); - // case 'Link': - // return ; - case 'outlined': - return ; - case 'filled': - return ; + + + + { + onChange(newValue); + setSelectedChipType(newValue); + }} + options={options.map((option) => option.value)} + renderOption={(props, option) => ( +
  • + + {(() => { + switch (option) { + case 'Chip': + return ( + + ); + case 'Icon': + return ( + } + /> + ); + case 'Avatar': + return ( + + A + + } + /> + ); + case 'Link': + return ( + + ); + default: + return ( + + ); + } + })()} + +
    • + )} + renderInput={(params) => } + disablePortal + disableClearable + /> + {selectedChipType && + (selectedChipType === 'Avatar' || + selectedChipType === 'Link') && ( + + handleChipChange(selectedChipType, e) } - })()} - - - )} - renderInput={(params) => } - disablePortal - disableClearable - /> -     + size="small" + variant="outlined" + autoComplete="off" + placeholder={`${selectedChipType} value`} + sx={{ mt: 1 }} + /> + )} + +     + ); }, ); diff --git a/packages/client/src/components/designer/menu/default-menu.ts b/packages/client/src/components/designer/menu/default-menu.ts index b9542210cc..bd97168518 100644 --- a/packages/client/src/components/designer/menu/default-menu.ts +++ b/packages/client/src/components/designer/menu/default-menu.ts @@ -330,7 +330,7 @@ export const DEFAULT_MENU: DesignerMenuItem[] = [ }, { section: SECTION_ELEMENT, - image: BLOCK_IMAGE, + image: '', name: 'Chip', json: { widget: 'chip', From 3faa754406d19c7a14f94c2e2a94d45209389d25 Mon Sep 17 00:00:00 2001 From: Mezzet Date: Fri, 21 Mar 2025 10:25:06 -0400 Subject: [PATCH 4/9] Delete old chip-block directory --- .../block-defaults/chip-block/ChipBlock.tsx | 98 -------- .../block-defaults/chip-block/config.tsx | 213 ------------------ .../block-defaults/chip-block/index.ts | 2 - 3 files changed, 313 deletions(-) delete mode 100644 packages/client/src/components/block-defaults/chip-block/ChipBlock.tsx delete mode 100644 packages/client/src/components/block-defaults/chip-block/config.tsx delete mode 100644 packages/client/src/components/block-defaults/chip-block/index.ts diff --git a/packages/client/src/components/block-defaults/chip-block/ChipBlock.tsx b/packages/client/src/components/block-defaults/chip-block/ChipBlock.tsx deleted file mode 100644 index 3f72a6aafc..0000000000 --- a/packages/client/src/components/block-defaults/chip-block/ChipBlock.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { useBlock } from '@/hooks'; -import { BlockDef, BlockComponent } from '@/stores'; -import { Face } from '@mui/icons-material'; -import { Chip } from '@mui/material'; -import { Avatar } from '@semoss/ui'; -import { observer } from 'mobx-react-lite'; -import React from 'react'; -import { CSSProperties } from 'react'; - -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; - }; - slots: never; -} - -export const ChipBlock: BlockComponent = observer(({ id }) => { - const { attrs, data } = useBlock(id); - - const displayChip = (key): React.ReactNode => { - const avatar = data?.avatar || 'A'; - 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 ; - case 'Avatar': - return ( - - {avatar} - - } - /> - ); - case 'Icon': - return } />; - case 'Link': - return ( - - e.preventDefault()} - /> - - ); - default: - return ; - } - }; - - return ( -
    - {data.type ? displayChip(data.type) : displayChip('default')} -
    - ); -}); diff --git a/packages/client/src/components/block-defaults/chip-block/config.tsx b/packages/client/src/components/block-defaults/chip-block/config.tsx deleted file mode 100644 index 041e932f89..0000000000 --- a/packages/client/src/components/block-defaults/chip-block/config.tsx +++ /dev/null @@ -1,213 +0,0 @@ -import { BlockConfig } from '@/stores'; -import { buildListener } from '../block-defaults.shared'; -import { CSSProperties } from 'react'; -import { ChipBlockDef, ChipBlock } from './ChipBlock'; -import { BLOCK_TYPE_DISPLAY } from '../block-defaults.constants'; -import { - InputSettings, - SelectInputSettings, - SwitchSettings, -} from '../../block-settings'; - -import { ChipSettings } from '../../block-settings/custom/ChipSettings'; -import { CancelOutlined } from '@mui/icons-material'; -import { Avatar } from '@semoss/ui'; - -export const DefaultStyles: CSSProperties = {}; - -export const config: BlockConfig = { - widget: 'chip', - type: BLOCK_TYPE_DISPLAY, - data: { - style: DefaultStyles, - color: 'default', - size: 'small', - avatar: A, - type: 'Chip', - variant: 'filled', - label: '', - src: '', - title: '', - }, - listeners: { - //onClick: [], - }, - slots: {}, - render: ChipBlock, - icon: CancelOutlined, - - contentMenu: [ - { - name: 'Select Chip', - children: [ - { - description: ' Chip Type', - render: ({ id }) => ( - - ), - }, - { - description: 'Label', - render: ({ id }) => ( - - ), - }, - { - description: 'clickable', - render: ({ id }) => ( - - ), - }, - ], - }, - { - name: 'on Click', - children: [...buildListener('onClick')], - }, - ], - styleMenu: [ - { - name: '', - children: [ - { - description: 'Variant', - render: ({ id }) => ( - - ), - }, - { - description: 'Color', - render: ({ id }) => ( - - ), - }, - { - description: 'Size', - render: ({ id }) => ( - - ), - }, - ], - }, - ], -}; diff --git a/packages/client/src/components/block-defaults/chip-block/index.ts b/packages/client/src/components/block-defaults/chip-block/index.ts deleted file mode 100644 index 58b4c543af..0000000000 --- a/packages/client/src/components/block-defaults/chip-block/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './config'; -export * from './ChipBlock'; From 2349b8306d80815acff912032729a8e9d692d021 Mon Sep 17 00:00:00 2001 From: mezzet_deloitte Date: Fri, 21 Mar 2025 14:28:16 -0400 Subject: [PATCH 5/9] feat(client): create chip block --- .../block-defaults/chip-block/ChipBlock.tsx | 17 ++++++++--------- .../block-defaults/chip-block/config.tsx | 2 +- .../block-defaults/chip-block/index.ts | 4 ++-- .../src/components/block-defaults/index.ts | 3 +-- 4 files changed, 12 insertions(+), 14 deletions(-) diff --git a/libs/renderer/src/components/block-defaults/chip-block/ChipBlock.tsx b/libs/renderer/src/components/block-defaults/chip-block/ChipBlock.tsx index 8c0aa92bad..aca203e285 100644 --- a/libs/renderer/src/components/block-defaults/chip-block/ChipBlock.tsx +++ b/libs/renderer/src/components/block-defaults/chip-block/ChipBlock.tsx @@ -1,4 +1,4 @@ -import { useBlock } from "@/hooks"; +import { useBlock } from "../../../hooks"; import { BlockDef, BlockComponent } from "../../../store"; import { Face } from "@mui/icons-material"; import { Chip, styled } from "@mui/material"; @@ -32,13 +32,11 @@ export interface ChipBlockDef extends BlockDef<"chip"> { title: string; }; listeners: { - onClick: true; + // onClick: true; }; slots: never; } -//const theme = createTheme(); // Use default MUI theme - const StyledAvatar = styled(Avatar, { shouldForwardProp: (prop) => prop !== "chipColor", })<{ chipColor: string }>(({ chipColor, theme }) => { @@ -47,15 +45,16 @@ const StyledAvatar = styled(Avatar, { return { "&&": { backgroundColor: palette[chipColor]?.main || palette.grey[500], + color: palette[chipColor]?.contrastText, }, }; }); export const ChipBlock: BlockComponent = observer(({ id }) => { - const { attrs, data, listeners } = useBlock(id); + const { attrs, data /*listeners*/ } = useBlock(id); const displayChip = (key): React.ReactNode => { - const avatar = data?.avatar || "A"; + const avatar = data?.avatar; const link = data?.link || null; const chipProps = { @@ -106,9 +105,9 @@ export const ChipBlock: BlockComponent = observer(({ id }) => { height: "fit-content", width: "fit-content", }} - onClick={() => { - listeners.onClick(); - }} + // onClick={() => { + // listeners.onClick(); + // }} > {displayChip(data.type)} diff --git a/libs/renderer/src/components/block-defaults/chip-block/config.tsx b/libs/renderer/src/components/block-defaults/chip-block/config.tsx index aa54208635..7527e943af 100644 --- a/libs/renderer/src/components/block-defaults/chip-block/config.tsx +++ b/libs/renderer/src/components/block-defaults/chip-block/config.tsx @@ -26,7 +26,7 @@ export const config: BlockConfig = { title: "", }, listeners: { - onClick: [], + //onClick: [], }, slots: {}, render: ChipBlock, diff --git a/libs/renderer/src/components/block-defaults/chip-block/index.ts b/libs/renderer/src/components/block-defaults/chip-block/index.ts index a7860bc5d5..7807e82085 100644 --- a/libs/renderer/src/components/block-defaults/chip-block/index.ts +++ b/libs/renderer/src/components/block-defaults/chip-block/index.ts @@ -1,2 +1,2 @@ -export * from "../../chipBlock/config"; -export * from "../../chipBlock/ChipBlock"; +export * from "./config"; +export * from "./ChipBlock"; diff --git a/libs/renderer/src/components/block-defaults/index.ts b/libs/renderer/src/components/block-defaults/index.ts index 3be1cc54c5..2111dbf0a6 100644 --- a/libs/renderer/src/components/block-defaults/index.ts +++ b/libs/renderer/src/components/block-defaults/index.ts @@ -12,8 +12,7 @@ import { } from "./audio-input-block"; import { config as ButtonBlockConfig, ButtonBlockDef } from "./button-block"; -import { config as ChipBlockConfig } from "./chip-block/config"; -import { ChipBlockDef } from "./chip-block/ChipBlock"; +import { config as ChipBlockConfig, ChipBlockDef } from "./chip-block"; import { config as CheckboxBlockConfig, From 7261168bd22e38e552dc41627b103bfc9e028517 Mon Sep 17 00:00:00 2001 From: mezzet_deloitte Date: Mon, 24 Mar 2025 15:42:22 -0400 Subject: [PATCH 6/9] style(ui): change block render icon --- .../src/components/block-defaults/chip-block/config.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/renderer/src/components/block-defaults/chip-block/config.tsx b/libs/renderer/src/components/block-defaults/chip-block/config.tsx index 7527e943af..e2608a1c5f 100644 --- a/libs/renderer/src/components/block-defaults/chip-block/config.tsx +++ b/libs/renderer/src/components/block-defaults/chip-block/config.tsx @@ -6,7 +6,7 @@ import { BLOCK_TYPE_DISPLAY } from "../block-defaults.constants"; import { InputSettings, SelectInputSettings } from "../../block-settings"; import { ChipSettings } from "../../block-settings/custom/ChipSettings"; import { SwitchSettings } from "../../block-settings/shared/SwitchSettings"; -import { CancelOutlined } from "@mui/icons-material"; +import { LabelRounded } from "@mui/icons-material"; import { Avatar } from "@semoss/ui"; export const DefaultStyles: CSSProperties = {}; @@ -30,7 +30,7 @@ export const config: BlockConfig = { }, slots: {}, render: ChipBlock, - icon: CancelOutlined, + icon: LabelRounded, contentMenu: [ { From 183bcda9def75516797604e9381698d88cd270f0 Mon Sep 17 00:00:00 2001 From: mezzet_deloitte Date: Fri, 28 Mar 2025 17:03:50 -0400 Subject: [PATCH 7/9] feat(style): add chip block cover --- .../client/src/assets/blocks/Chip_Active.png | Bin 0 -> 3526 bytes packages/client/src/assets/blocks/Chip_Hover.png | Bin 0 -> 4270 bytes packages/client/src/assets/blocks/index.ts | 4 ++++ .../blocks-workspace/menus/default-menu.ts | 3 ++- 4 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 packages/client/src/assets/blocks/Chip_Active.png create mode 100644 packages/client/src/assets/blocks/Chip_Hover.png diff --git a/packages/client/src/assets/blocks/Chip_Active.png b/packages/client/src/assets/blocks/Chip_Active.png new file mode 100644 index 0000000000000000000000000000000000000000..a7ad5a7f4bea4a7796a544829e4162e1b3c26a9b GIT binary patch literal 3526 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 vBsZI)gJ7ly) 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 EKli*p=>Px# literal 0 HcmV?d00001 diff --git a/packages/client/src/assets/blocks/index.ts b/packages/client/src/assets/blocks/index.ts index fc1afd97ef..887a438b45 100644 --- a/packages/client/src/assets/blocks/index.ts +++ b/packages/client/src/assets/blocks/index.ts @@ -26,6 +26,10 @@ export { default as H6_ACTIVE } from './H6_Active.png'; export { default as H6_HOVER } from './H6_Hover.png'; export { default as HTML_ACTIVE } from './HTML_Active.png'; export { default as HTML_HOVER } from './HTML_Hover.png'; +// export { default as ICON_ACTIVE } from './Icon_Active.png'; +// export { default as ICON_HOVER } from './Icon_Hover.png'; +export { default as CHIP_ACTIVE } from './Chip_Active.png'; +export { default as CHIP_HOVER } from './Chip_Hover.png'; export { default as IFRAME_ACTIVE } from './Iframe_Active.png'; export { default as IFRAME_HOVER } from './Iframe_Hover.png'; export { default as IMAGE_ACTIVE } from './Image_Active.png'; diff --git a/packages/client/src/components/blocks-workspace/menus/default-menu.ts b/packages/client/src/components/blocks-workspace/menus/default-menu.ts index acca88370f..9b7245098a 100644 --- a/packages/client/src/components/blocks-workspace/menus/default-menu.ts +++ b/packages/client/src/components/blocks-workspace/menus/default-menu.ts @@ -879,7 +879,8 @@ export const DEFAULT_MENU: DesignerMenuItem[] = [ }, { section: SECTION_INPUT, - image: '', + activeImage: BLOCK_IMAGES['CHIP_ACTIVE'], + hoverImage: BLOCK_IMAGES['CHIP_HOVER'], name: 'Chip', json: { widget: 'chip', From 3f5fe51f2bef9a5e6ea49ab238a6122e984c2e01 Mon Sep 17 00:00:00 2001 From: Mezzet Date: Fri, 28 Mar 2025 17:07:03 -0400 Subject: [PATCH 8/9] Update index.ts --- packages/client/src/assets/blocks/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/client/src/assets/blocks/index.ts b/packages/client/src/assets/blocks/index.ts index 887a438b45..098408cbdd 100644 --- a/packages/client/src/assets/blocks/index.ts +++ b/packages/client/src/assets/blocks/index.ts @@ -26,8 +26,8 @@ export { default as H6_ACTIVE } from './H6_Active.png'; export { default as H6_HOVER } from './H6_Hover.png'; export { default as HTML_ACTIVE } from './HTML_Active.png'; export { default as HTML_HOVER } from './HTML_Hover.png'; -// export { default as ICON_ACTIVE } from './Icon_Active.png'; -// export { default as ICON_HOVER } from './Icon_Hover.png'; +export { default as ICON_ACTIVE } from './Icon_Active.png'; +export { default as ICON_HOVER } from './Icon_Hover.png'; export { default as CHIP_ACTIVE } from './Chip_Active.png'; export { default as CHIP_HOVER } from './Chip_Hover.png'; export { default as IFRAME_ACTIVE } from './Iframe_Active.png'; From bf201570d1f597749be482f040b74b0a788c3afd Mon Sep 17 00:00:00 2001 From: mezzet_deloitte Date: Mon, 31 Mar 2025 16:29:30 -0400 Subject: [PATCH 9/9] style(client): cleaning imports --- .../block-defaults/chip-block/ChipBlock.tsx | 15 ++++++++---- .../block-defaults/chip-block/config.tsx | 23 +++++++++++-------- .../block-settings/custom/ChipSettings.tsx | 11 ++++++--- 3 files changed, 31 insertions(+), 18 deletions(-) diff --git a/libs/renderer/src/components/block-defaults/chip-block/ChipBlock.tsx b/libs/renderer/src/components/block-defaults/chip-block/ChipBlock.tsx index f6892059bc..16e87944e5 100644 --- a/libs/renderer/src/components/block-defaults/chip-block/ChipBlock.tsx +++ b/libs/renderer/src/components/block-defaults/chip-block/ChipBlock.tsx @@ -1,11 +1,16 @@ -import { useBlock } from "../../../hooks"; -import { BlockDef, BlockComponent } from "../../../store"; +//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"; -import { observer } from "mobx-react-lite"; -import React from "react"; -import { CSSProperties } from "react"; + +//Modules internal to current package +import { useBlock } from "../../../hooks"; +import { BlockDef, BlockComponent } from "../../../store"; export interface ChipBlockDef extends BlockDef<"chip"> { widget: "chip"; diff --git a/libs/renderer/src/components/block-defaults/chip-block/config.tsx b/libs/renderer/src/components/block-defaults/chip-block/config.tsx index 30abc80d7d..66cf0a5b82 100644 --- a/libs/renderer/src/components/block-defaults/chip-block/config.tsx +++ b/libs/renderer/src/components/block-defaults/chip-block/config.tsx @@ -1,14 +1,19 @@ -import { BlockConfig } from "../../../store"; -import { buildListener, buildShowField } from "../block-defaults.shared"; +//React and Third Party Modules import { CSSProperties } from "react"; -import { ChipBlockDef, ChipBlock } from "./ChipBlock"; -import { BLOCK_TYPE_DISPLAY } from "../block-defaults.constants"; -import { InputSettings, SelectInputSettings } from "../../block-settings"; -import { ChipSettings } from "../../block-settings/custom/ChipSettings"; -import { SwitchSettings } from "../../block-settings/shared/SwitchSettings"; 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 = { @@ -36,9 +41,7 @@ export const config: BlockConfig = { contentMenu: [ { name: "General", - children: [ - ...buildShowField() - ] + children: [...buildShowField()], }, { name: "Select Chip", diff --git a/libs/renderer/src/components/block-settings/custom/ChipSettings.tsx b/libs/renderer/src/components/block-settings/custom/ChipSettings.tsx index f9d480685c..3da48dede7 100644 --- a/libs/renderer/src/components/block-settings/custom/ChipSettings.tsx +++ b/libs/renderer/src/components/block-settings/custom/ChipSettings.tsx @@ -1,14 +1,19 @@ +//React and Third Party Libraries import { useEffect, useMemo, useRef, useState } from "react"; import { computed } from "mobx"; import { observer } from "mobx-react-lite"; +import { Autocomplete, Chip, Stack, TextField } from "@mui/material"; +import { Face } from "@mui/icons-material"; + +//Internal Semoss libs +import { Avatar } from "@semoss/ui"; + +//Modules internal to current package import { Paths, PathValue } from "../../../types"; import { useBlocks, useBlockSettings } from "../../../hooks"; import { ActionMessages, Block, BlockDef } from "../../../store"; import { getValueByPath } from "../../../utility"; import { BaseSettingSection } from "../BaseSettingSection"; -import { Autocomplete, Chip, Stack, TextField } from "@mui/material"; -import { Avatar } from "@semoss/ui"; -import { Face } from "@mui/icons-material"; interface ChipSettingsProps { id: string;