From 8fd4f0099e30e3bfcf811627211831c4a1feeabf Mon Sep 17 00:00:00 2001 From: Paulson Robert Date: Mon, 17 Feb 2025 14:29:03 +0530 Subject: [PATCH 1/2] feat(client): accordion block init --- .../accordion-block/AccordionBlock.tsx | 40 +++++++++++++++++++ .../block-defaults/accordion-block/config.tsx | 26 ++++++++++++ .../block-defaults/accordion-block/index.ts | 2 + .../src/components/block-defaults/index.ts | 9 ++++- .../components/designer/menu/default-menu.ts | 17 ++++++++ 5 files changed, 93 insertions(+), 1 deletion(-) create mode 100644 packages/client/src/components/block-defaults/accordion-block/AccordionBlock.tsx create mode 100644 packages/client/src/components/block-defaults/accordion-block/config.tsx create mode 100644 packages/client/src/components/block-defaults/accordion-block/index.ts diff --git a/packages/client/src/components/block-defaults/accordion-block/AccordionBlock.tsx b/packages/client/src/components/block-defaults/accordion-block/AccordionBlock.tsx new file mode 100644 index 0000000000..c3e9ead05f --- /dev/null +++ b/packages/client/src/components/block-defaults/accordion-block/AccordionBlock.tsx @@ -0,0 +1,40 @@ +import { CSSProperties } from 'react'; +import { observer } from 'mobx-react-lite'; +import { useBlock } from '@/hooks'; +import { BlockDef, BlockComponent } from '@/stores'; +import { Slot } from '@/components/blocks'; +import { Accordion } from '@semoss/ui'; + +export interface AccordionBlockDef extends BlockDef<'accordion'> { + widget: 'accordion'; + data: { + style: CSSProperties; + }; + slots: { + header: true; + content: true; + }; +} + +export const AccordionBlock: BlockComponent = observer(({ id }) => { + const { attrs, data, slots } = useBlock(id); + + return ( +
+ + + + + + + + +
+ ); +}); diff --git a/packages/client/src/components/block-defaults/accordion-block/config.tsx b/packages/client/src/components/block-defaults/accordion-block/config.tsx new file mode 100644 index 0000000000..e29a17b2b5 --- /dev/null +++ b/packages/client/src/components/block-defaults/accordion-block/config.tsx @@ -0,0 +1,26 @@ +import { BlockConfig } from '@/stores'; +import { Schema } from '@mui/icons-material'; +import { BLOCK_TYPE_LAYOUT } from '../block-defaults.constants'; +import { AccordionBlock, AccordionBlockDef } from './AccordionBlock'; + +export const config: BlockConfig = { + widget: 'accordion', + type: BLOCK_TYPE_LAYOUT, + data: { + style: { + display: 'flex', + flexDirection: 'column', + padding: '4px', + gap: '8px', + }, + }, + listeners: {}, + slots: { + header: [], + content: [], + }, + render: AccordionBlock, + icon: Schema, + contentMenu: [], + styleMenu: [], +}; diff --git a/packages/client/src/components/block-defaults/accordion-block/index.ts b/packages/client/src/components/block-defaults/accordion-block/index.ts new file mode 100644 index 0000000000..acae38082f --- /dev/null +++ b/packages/client/src/components/block-defaults/accordion-block/index.ts @@ -0,0 +1,2 @@ +export * from './config'; +export * from './AccordionBlock'; diff --git a/packages/client/src/components/block-defaults/index.ts b/packages/client/src/components/block-defaults/index.ts index e14a76f337..dee6d3a64d 100644 --- a/packages/client/src/components/block-defaults/index.ts +++ b/packages/client/src/components/block-defaults/index.ts @@ -61,6 +61,10 @@ import { PDFViewerBlockDef, } from './pdfViewer-block'; import { config as ThemeBlockConfig, ThemeBlockDef } from './theme-block'; +import { + config as AccordionBlockConfig, + AccordionBlockDef, +} from './accordion-block'; export type DefaultBlockDefinitions = | AudioBlockDef @@ -96,7 +100,8 @@ export type DefaultBlockDefinitions = | ModalBlockDef | RadioBlockDef | PDFViewerBlockDef - | ThemeBlockDef; + | ThemeBlockDef + | AccordionBlockDef; export const DefaultBlocks: Registry = { [AudioBlockConfig.widget]: AudioBlockConfig, @@ -127,6 +132,7 @@ export const DefaultBlocks: Registry = { [AudioInputBlockConfig.widget]: AudioInputBlockConfig, [PDFViewerBlockConfig.widget]: PDFViewerBlockConfig, [ThemeBlockConfig.widget]: ThemeBlockConfig, + [AccordionBlockConfig.widget]: AccordionBlockConfig, }; export { @@ -154,4 +160,5 @@ export { RadioBlockConfig, PDFViewerBlockConfig, ThemeBlockConfig, + AccordionBlockConfig, }; diff --git a/packages/client/src/components/designer/menu/default-menu.ts b/packages/client/src/components/designer/menu/default-menu.ts index 29935aa375..5f4e6a709f 100644 --- a/packages/client/src/components/designer/menu/default-menu.ts +++ b/packages/client/src/components/designer/menu/default-menu.ts @@ -32,6 +32,7 @@ import BLOCK_RADIO from '@/assets/img/BLOCK_RADIO.png'; import HTML_BLOCK from '@/assets/img/HTML_BLOCK_SM.png'; import BLOCK_MODAL from '@/assets/img/BLOCK_MODAL.png'; import BLOCK_THEME from '@/assets/img/BLOCK_THEME.png'; +import BLOCK_ACCORDION from '@/assets/img/BLOCK_MODAL.png'; const SECTION_ELEMENT = 'Element'; const SECTION_INPUT = 'Input'; @@ -170,6 +171,22 @@ export const DEFAULT_MENU: DesignerMenuItem[] = [ }, }, }, + { + section: SECTION_LAYOUT, + image: BLOCK_ACCORDION, + name: 'Accordion', + json: { + widget: 'accordion', + data: { + style: {}, + }, + listeners: {}, + slots: { + header: [], + content: [], + }, + }, + }, { section: SECTION_INPUT, image: BLOCK_INPUT, From e9c0b224f3dc6d460c9fa15d11c734674286fab7 Mon Sep 17 00:00:00 2001 From: Paulson Robert Date: Mon, 17 Feb 2025 14:36:04 +0530 Subject: [PATCH 2/2] feat(client): accordion block image --- .../client/src/assets/img/BLOCK_ACCORDION.png | Bin 0 -> 1422 bytes .../src/components/designer/menu/default-menu.ts | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 packages/client/src/assets/img/BLOCK_ACCORDION.png diff --git a/packages/client/src/assets/img/BLOCK_ACCORDION.png b/packages/client/src/assets/img/BLOCK_ACCORDION.png new file mode 100644 index 0000000000000000000000000000000000000000..c55ef9ec9b77cab926b63721e5443f399d0d58ad GIT binary patch literal 1422 zcmV;91#$X`P))W zX6HX^ch>H`yF1@6k=>acv&H%LoHJ+V?1_B;_4@iMCnqQJ^z1x;iN=EEEbCR0KCSH*#@tAsrnZ5;;6P{4OsqH-VsVJ3l{{ z$HzyB-rwI#O-+pup<;M`ewHXU*klkO2WU#7LgW!R6nlGnvcA6V``Y&Qw)sm09h%kE zRiW$@I22`NWwNreB1cC@G5c?CZ)Is|DXDWH6l-g1LfI*BC>k0XOfZg*k7M@R?Y6cy zXCFE(cXxN@@h5oQdkp^1@3>^nN52!ehlxORcX!Li#)b?J4?FvJc6Ow-wbcxQ0GbCJ zV+(L#U_eGjMtskSng@kFH8o|n@qBuES|%qaosgl)LhWMDH#9U9^ZsG+@bF+BD=I1^ zQ&Q?^Vt@mMW1A2(9jGaKdU~Ag{r!Cz8yl0w#YI!NC{%BglPvU85S)pL33EO?A|R=r zFIOQD3kwV8&xRutQVIn=y{Iuz@PI&IySKO3Y*$xT%goG-IS!xtzoVvRzh9G(47?9& zA)FWIXl!hh`uck3{lmZp0*~(JnUL}TMSp+4X&y#LM@=oz-rnxKW;>k-3z`%3Lw*CH zy1cxUxw$zBBfk*XeW*3l-ISyp3Vd==g`;Xmfw}t&=wD#p?Ch-5#~2?U|M7gbHUV!( zvb40+)C{)I5hg#?3YiK<%Ar8hfMB3TK*77OI?$B3B^r~!|075U7@7$0@#v(^&(E9J z(L|vJT3%i@L3F=wJ~}-;mCnx2Ump|1ug13#3KS3?-O%AglY%P4L`n@$rJZLr&9UJtV6wKDv zmSpssFx#IiW zV2u$@D0keSiCY?)o0}zKZ}C4nI}_ZmN#TPo1X>J?HR ze!q;U_Mm-1d&4is@*DaRr~thE3G*69G|7v73Q`yfQWy$SIHDO+9ML3&BbpQ!M>HuZ z9MKFpj%bpDBbpQl`xK-w6r?Z|q%ahun5z#iYfW6%nqqKSYl@4@T9d+Mtx4gs))W^* zK?>WAEQba9+>7q{u?z2|3qz6R@T>Z}ySs6Nfk1S1bxAt0`N(qkA$1fw3g62HBHin$ zF%&t#FBq8$1TYji!X1oE1_Icp$RRcu_Iai-6glQ!tjEgcgA|5>6fQwY4lY4S3YVZH z2bZ8Eg-cLULcIDQg`psYp&*5!Acd2G$lzokiowZ16c;B0k;2J9q;N72#l=vN!geFe zaWW7ooD4(?Cj*f$P6i@hoD4+1I2nk1aWWA77Yqd{oD4(`P6i@{lYz*=$v~uVG7u%i cs}EBC0At?=!JcFM6aWAK07*qoM6N<$f=141HUIzs literal 0 HcmV?d00001 diff --git a/packages/client/src/components/designer/menu/default-menu.ts b/packages/client/src/components/designer/menu/default-menu.ts index 5f4e6a709f..2cbacdfc0b 100644 --- a/packages/client/src/components/designer/menu/default-menu.ts +++ b/packages/client/src/components/designer/menu/default-menu.ts @@ -32,7 +32,7 @@ import BLOCK_RADIO from '@/assets/img/BLOCK_RADIO.png'; import HTML_BLOCK from '@/assets/img/HTML_BLOCK_SM.png'; import BLOCK_MODAL from '@/assets/img/BLOCK_MODAL.png'; import BLOCK_THEME from '@/assets/img/BLOCK_THEME.png'; -import BLOCK_ACCORDION from '@/assets/img/BLOCK_MODAL.png'; +import BLOCK_ACCORDION from '@/assets/img/BLOCK_ACCORDION.png'; const SECTION_ELEMENT = 'Element'; const SECTION_INPUT = 'Input';