feat: wip DynamicZoneBlock opened icon, state, FormDynamicZone onToggle

Smile-SA · Aug 21, 2024 · 617f8e0 · 617f8e0
1 parent ddb325b
commit 617f8e0
Show file tree

Hide file tree

Showing 10 changed files with 262 additions and 74 deletions.
diff --git a/packages/haring-react/src/Components/ActionBar/ActionBar.tsx b/packages/haring-react/src/Components/ActionBar/ActionBar.tsx
@@ -21,7 +21,9 @@ export function ActionBar<Data extends Record<string, unknown>>(
       `${selectedElements} file(s) selected`,
     ...actionRowOverflowProps
   } = props;
-  const numberOfSelectedElements = selectedElements.length;
+  const numberOfSelectedElements = Array.isArray(selectedElements)
+    ? selectedElements.length
+    : [selectedElements].length;
 
   return (
     <div className={`${classes.actionBar} actionBarRef`}>

diff --git a/packages/haring-react/src/Components/ActionList/ActionList.stories.tsx b/packages/haring-react/src/Components/ActionList/ActionList.stories.tsx
@@ -1,4 +1,4 @@
-import type { IActionListAction } from './ActionList';
+import type { IThumbnail } from '../../types';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { ActionList as Cmp } from './ActionList';
@@ -16,19 +16,17 @@ const meta = {
       type: { name: 'number' },
     },
   },
-  component: Cmp,
+  component: Cmp<IThumbnail>,
   tags: ['autodocs'],
   title: '3-custom/Components/ActionList',
-} satisfies Meta<typeof Cmp>;
+} satisfies Meta<typeof Cmp<IThumbnail>>;
 
 export default meta;
 type IStory = StoryObj<typeof meta>;
 
 export const ActionList: IStory = {
   args: {
-    actions: actionRowOverflowActionsMock as IActionListAction<
-      Record<string, unknown>
-    >[],
+    actions: actionRowOverflowActionsMock,
     maxVisibleActions: 2,
     selectedElements: actionRowOverflowSelectedMock,
   },

diff --git a/packages/haring-react/src/Components/ActionList/ActionList.tsx b/packages/haring-react/src/Components/ActionList/ActionList.tsx
@@ -29,7 +29,7 @@ const defaultTooltipProps = {
 };
 
 export type IActionListAction<Data extends Record<string, unknown>> = IAction<
-  Data[]
+  Data | Data[]
 >;
 
 export interface IActionListProps<Data extends Record<string, unknown>>
@@ -41,7 +41,7 @@ export interface IActionListProps<Data extends Record<string, unknown>>
   maxVisibleActions?: number;
   modalProps?: Omit<ModalProps, 'title'>;
   overflowMenuLabel?: string;
-  selectedElements: Data[];
+  selectedElements: Data | Data[];
 }
 
 export function ActionList<Data extends Record<string, unknown>>(
@@ -85,7 +85,7 @@ export function ActionList<Data extends Record<string, unknown>>(
     clearConfirmAction();
   }
 
-  function handleModalButton(onAction?: (item: Data[]) => void): void {
+  function handleModalButton(onAction?: (item: Data | Data[]) => void): void {
     onAction?.(selectedElements);
     handleClose();
   }

diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZone.mock.tsx b/packages/haring-react/src/Form/DynamicZone/DynamicZone.mock.tsx
@@ -0,0 +1,85 @@
+import type { IDynamicZoneBlockReference } from './DynamicZoneBlock/DynamicZoneBlock';
+import type { IActionListAction } from '../../Components/ActionList/ActionList';
+import type { IBaseBlock, IBaseBlockButton } from '../../types';
+
+import {
+  Alien,
+  ArrowDown,
+  ArrowUp,
+  Leaf,
+  Trash,
+  TreasureChest,
+} from '@phosphor-icons/react';
+import { action } from '@storybook/addon-actions';
+
+const dynamicZoneBlockActionsMock: IActionListAction<IDynamicZoneBlockReference>[] =
+  [
+    {
+      color: 'white',
+      icon: <ArrowUp size={16} />,
+      id: 'move-up',
+      label: 'Move Up',
+      onAction: action('Move block up'),
+    },
+    {
+      color: 'white',
+      icon: <ArrowDown size={16} />,
+      id: 'move-down',
+      label: 'Move Down',
+      onAction: action('Move block down'),
+    },
+    {
+      color: 'white',
+      icon: <Trash size={16} />,
+      id: 'delete',
+      label: 'Delete',
+      onAction: action('Delete block'),
+    },
+  ];
+
+export const dynamicZoneBlocks: IBaseBlock[] = [
+  {
+    blockActions: dynamicZoneBlockActionsMock,
+    blockHeader: (
+      <>
+        <Alien />
+        First
+      </>
+    ),
+    id: '1',
+    opened: false,
+    value: 'initial',
+  },
+  {
+    blockActions: dynamicZoneBlockActionsMock,
+    blockFooter: 'footer',
+    blockHeader: (
+      <>
+        <Leaf />
+        Second
+      </>
+    ),
+    id: '2',
+    opened: true,
+    value: 'initial',
+  },
+  {
+    blockActions: dynamicZoneBlockActionsMock,
+    blockFooter: 'footer',
+    blockHeader: (
+      <>
+        <TreasureChest />
+        Third
+      </>
+    ),
+    id: '3',
+    opened: false,
+    value: 'initial',
+  },
+];
+
+export const dynamicZoneButtons: IBaseBlockButton[] = [
+  { id: 'default', label: 'Default', leftSection: <Alien /> },
+  { id: 'other', label: 'Other', leftSection: <Leaf /> },
+  { id: 'stuff', label: 'Stuff', leftSection: <TreasureChest /> },
+];
diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZone.module.css b/packages/haring-react/src/Form/DynamicZone/DynamicZone.module.css
@@ -7,4 +7,6 @@
 }
 
 .buttonsContainer {
+  /* WIP */
+  border: 1px dashed red;
 }
diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZone.stories.tsx b/packages/haring-react/src/Form/DynamicZone/DynamicZone.stories.tsx
@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import { DynamicZone as Cmp } from './DynamicZone';
+import { dynamicZoneBlocks, dynamicZoneButtons } from './DynamicZone.mock';
 
 const meta = {
   component: Cmp,
@@ -15,13 +16,18 @@ type IStory = StoryObj<typeof meta>;
 
 export const DynamicZone: IStory = {
   args: {
-    blockOptions: ['default'],
-    blocks: [
-      { id: '1', opened: false, type: 'default', value: 'initial' },
-      { id: '2', opened: true, type: 'default', value: 'initial' },
-      { id: '3', opened: false, type: 'default', value: 'initial' },
-    ],
-    onAppendBlock: action('onAppendBlock, type'),
+    blockOptions: dynamicZoneButtons,
+    blocks: dynamicZoneBlocks,
+    internalBlockCardProps: {
+      headerCardSectionProps: {
+        bg: 'cadetblue',
+        c: 'white',
+      },
+      toggleComponentProps: {
+        actionIconProps: { color: 'white', variant: 'subtle' },
+      },
+    },
+    onAppendBlock: action('onAppendBlock, id'),
     onRenderBlockContent: (_b, index) => <input key={index} />,
     onToggleBlock: action('onToggleBlock'),
   },

diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx b/packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx
@@ -1,8 +1,7 @@
-import type { IBaseBlock } from '../../types';
+import type { IDynamicZoneBlockInternalComponentProps } from './DynamicZoneBlock/DynamicZoneBlock';
+import type { IBaseBlock, IBaseBlockButton } from '../../types';
 import type {
-  ButtonProps,
   CardProps,
-  CardSectionProps,
   ContainerProps,
   GroupProps,
   StackProps,
@@ -15,15 +14,13 @@ import classes from './DynamicZone.module.css';
 import { DynamicZoneBlock } from './DynamicZoneBlock/DynamicZoneBlock';
 
 export interface IDynamicZoneProps<Block extends IBaseBlock> {
-  blockCardProps?: {
-    cardProps?: CardProps;
-    cardSectionProps?: CardSectionProps;
-  };
-  blockOptions: string[];
+  blockCardProps?: CardProps;
+  blockOptions: IBaseBlockButton[];
   blocks: Block[];
   blocksStackProps?: StackProps;
-  buttonProps?: ButtonProps;
+  bottomContainerProps?: ContainerProps;
   buttonsGroupProps?: GroupProps;
+  internalBlockCardProps?: IDynamicZoneBlockInternalComponentProps;
   onAppendBlock: (blockType: string) => void;
   onRenderBlockContent: (block: Block, index: number) => ReactElement;
   onToggleBlock: (block: Block, index: number, opened: boolean) => void;
@@ -36,10 +33,11 @@ export function DynamicZone<Block extends IBaseBlock>(
   const {
     blockCardProps,
     blockOptions,
+    blocks,
     blocksStackProps,
-    buttonProps,
+    bottomContainerProps,
     buttonsGroupProps,
-    blocks,
+    internalBlockCardProps,
     onAppendBlock,
     onRenderBlockContent,
     onToggleBlock,
@@ -54,38 +52,48 @@ export function DynamicZone<Block extends IBaseBlock>(
     <Container
       className={classes.container}
       fluid
-      p="sm"
+      p={0}
       {...rootContainerProps}
     >
       <Stack className={classes.blocksContainer} gap="sm" {...blocksStackProps}>
         {blocks.map((block, index) => (
           <DynamicZoneBlock
-            cardSectionProps={blockCardProps?.cardSectionProps}
-            {...blockCardProps?.cardProps}
+            {...blockCardProps}
             key={block.id}
+            actions={block.blockActions}
+            footerChildren={block.blockFooter}
+            headerChildren={block.blockHeader}
+            internalComponentProps={internalBlockCardProps}
             onToggle={(opened) => onToggleBlock(block, index, opened)}
             opened={block.opened}
+            reference={{ id: block.id, index }}
           >
             {onRenderBlockContent(block, index)}
           </DynamicZoneBlock>
         ))}
       </Stack>
-      <Group
+      <Container
         className={classes.buttonsContainer}
+        fluid
         mt="lg"
-        {...buttonsGroupProps}
+        {...bottomContainerProps}
       >
-        {blockOptions.map((blockType) => (
-          <Button
-            type="button"
-            {...buttonProps}
-            key={`button-${blockType}`}
-            onClick={() => onAddBlock(blockType)}
-          >
-            {blockType}
-          </Button>
-        ))}
-      </Group>
+        <Group {...buttonsGroupProps}>
+          {blockOptions.map((button) => (
+            <Button
+              radius="md"
+              size="md"
+              type="button"
+              variant="default"
+              {...button}
+              key={`button-${button.id}`}
+              onClick={() => onAddBlock(button.id)}
+            >
+              {button.label}
+            </Button>
+          ))}
+        </Group>
+      </Container>
     </Container>
   );
 }
diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZoneBlock/DynamicZoneBlock.module.css b/packages/haring-react/src/Form/DynamicZone/DynamicZoneBlock/DynamicZoneBlock.module.css
@@ -1,11 +1,4 @@
-.container {
-}
-
 .header {
   cursor: pointer;
   user-select: none;
-
-  &:hover {
-    filter: contrast(40%);
-  }
 }