test: fixed tests and lint

packages/haring-react-hook-form/src/Components/FormDynamicZone/FormDynamicZone.mock.tsx

@@ -0,0 +1,7 @@
+import { Alien, Leaf, TreasureChest } from '@phosphor-icons/react';
+
+export const blockOptionsMock = [
+  { id: 'default', label: 'Default', leftSection: <Alien /> },
+  { id: 'other', label: 'Other', leftSection: <Leaf /> },
+  { id: 'stuff', label: 'Stuff', leftSection: <TreasureChest /> },
+];

packages/haring-react-hook-form/src/Components/FormDynamicZone/FormDynamicZone.test.tsx

@@ -0,0 +1,22 @@
+import type { ReactElement } from 'react';
+
+import { renderWithProviders } from '@smile/haring-react-shared/test-utils';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import { FormDynamicZone } from './FormDynamicZone';
+
+describe('FormDynamicZone', () => {
+  it('matches snapshot', () => {
+    function TestWithProvider(): ReactElement {
+      const methods = useForm();
+      return (
+        <FormProvider {...methods}>
+          <FormDynamicZone dynamicZoneName="dynamicZoneTest" />
+        </FormProvider>
+      );
+    }
+
+    const { container } = renderWithProviders(<TestWithProvider />);
+    expect(container).toMatchSnapshot();
+  });
+});

packages/haring-react-hook-form/src/Components/FormDynamicZone/FormDynamicZone.tsx

@@ -5,6 +5,8 @@ import { Flex } from '@mantine/core';
 import { DynamicZone } from '@smile/haring-react';
 import { useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 
+import { blockOptionsMock } from './FormDynamicZone.mock';
+
 interface IFormBlock extends IBaseBlock {
   fieldName: string;
   value?: string;
@@ -68,7 +70,7 @@ export function FormDynamicZone(props: IFormDynamicZoneProps): ReactElement {
       <form onSubmit={handleSubmit(onSubmit)}>
         form container, {dynamicZoneName}: {JSON.stringify(watched)}
         <DynamicZone<IFormBlock>
-          blockOptions={['default']}
+          blockOptions={blockOptionsMock}
           blocks={fields as IFormBlock[]}
           onAppendBlock={onAppend}
           onRenderBlockContent={newBlock}

packages/haring-react/src/Form/DynamicZone/DynamicZone.stories.tsx

@@ -18,7 +18,7 @@ export const DynamicZone: IStory = {
   args: {
     blockOptions: dynamicZoneButtons,
     blocks: dynamicZoneBlocks,
-    buttonsGroupLabel: 'Ajouter un block',
+    buttonsText: 'Ajouter un block',
     internalBlockCardProps: {
       headerCardSectionProps: {
         bg: 'cadetblue',

packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx

@@ -5,6 +5,7 @@ import type {
   ContainerProps,
   GroupProps,
   StackProps,
+  TextProps,
 } from '@mantine/core';
 import type { ReactElement } from 'react';
 
@@ -19,8 +20,9 @@ export interface IDynamicZoneProps<Block extends IBaseBlock> {
   blocks: Block[];
   blocksStackProps?: StackProps;
   bottomContainerProps?: ContainerProps;
-  buttonsGroupLabel?: string;
   buttonsGroupProps?: GroupProps;
+  buttonsText?: string;
+  buttonsTextProps?: TextProps;
   internalBlockCardProps?: IDynamicZoneBlockInternalComponentProps;
   onAppendBlock: (blockType: string) => void;
   onRenderBlockContent: (block: Block, index: number) => ReactElement;
@@ -37,8 +39,9 @@ export function DynamicZone<Block extends IBaseBlock>(
     blocks,
     blocksStackProps,
     bottomContainerProps,
-    buttonsGroupLabel,
     buttonsGroupProps,
+    buttonsText,
+    buttonsTextProps,
     internalBlockCardProps,
     onAppendBlock,
     onRenderBlockContent,
@@ -76,26 +79,24 @@ export function DynamicZone<Block extends IBaseBlock>(
         p="sm"
         {...bottomContainerProps}
       >
-        <Container fluid p={0}>
-          <Text className={classes.buttonsLabel} fw="bold">
-            {buttonsGroupLabel}
-          </Text>
-          <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>
+        <Text className={classes.buttonsLabel} fw="bold" {...buttonsTextProps}>
+          {buttonsText}
+        </Text>
+        <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>
   );

packages/haring-react/src/Layouts/FoldableColumnLayout/__snapshots__/FoldableColumnLayout.test.tsx.snap

@@ -71,6 +71,7 @@ exports[`FoldableColumnLayout matches snapshot 1`] = `
                   aria-hidden="true"
                   class="m_9307d992 mantine-Switch-track"
                   data-label-position="right"
+                  data-without-labels="true"
                 >
                   <span
                     class="m_93039a1d mantine-Switch-thumb"