feat: wip animations

Smile-SA · Sep 25, 2024 · e6ff189 · e6ff189
1 parent 2004835
commit e6ff189
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx b/packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx
@@ -11,14 +11,15 @@ import type {
   StackProps,
   TextProps,
 } from '@mantine/core';
-import type { ReactElement } from 'react';
+import type { ReactElement, Ref } from 'react';
 
 import { Button, Container, Group, Stack, Text, Tooltip } from '@mantine/core';
 
 import classes from './DynamicZone.module.css';
 import { DynamicZoneBlock } from './DynamicZoneBlock/DynamicZoneBlock';
 
 export interface IDynamicZoneInternalComponentProps {
+  arrayRootRef?: Ref<HTMLDivElement>;
   blockCardProps?: CardProps;
   blocksStackProps?: StackProps;
   bottomContainerProps?: ContainerProps;
@@ -60,7 +61,11 @@ export function DynamicZone(props: IDynamicZoneProps): ReactElement {
 
   return (
     <Container fluid p={0} {...rootContainerProps}>
-      <Stack gap="sm" {...internalComponentProps?.blocksStackProps}>
+      <Stack
+        gap="sm"
+        {...internalComponentProps?.blocksStackProps}
+        ref={internalComponentProps?.arrayRootRef}
+      >
         {blocks.map((block, index) => (
           <DynamicZoneBlock
             {...internalComponentProps?.blockCardProps}

diff --git a/packages/storybook-pages/package.json b/packages/storybook-pages/package.json
@@ -30,6 +30,7 @@
     "embla-carousel-react": "^7.1.0",
     "react-hook-form": "^7.50.1",
     "@hookform/error-message": "^2.0.1",
+    "@formkit/auto-animate": "^0.8.2",
     "recharts": "^2.12.3"
   },
   "devDependencies": {

diff --git a/packages/storybook-pages/src/Form/ReactHookFormDynamicZone/ReactHookFormDynamicZone.tsx b/packages/storybook-pages/src/Form/ReactHookFormDynamicZone/ReactHookFormDynamicZone.tsx
@@ -8,6 +8,7 @@ import type {
 } from 'react-hook-form';
 import type { UseFormRegister } from 'react-hook-form/dist/types/form';
 
+import { useAutoAnimate } from '@formkit/auto-animate/react';
 import { ErrorMessage } from '@hookform/error-message';
 import { Box, Group, Stack } from '@mantine/core';
 import { Cube, Leaf } from '@phosphor-icons/react';
@@ -186,6 +187,8 @@ export function ReactHookFormDynamicZone(
     control,
     name: 'content',
   });
+  const [parent] = useAutoAnimate();
+
   const onValidSubmit: SubmitHandler<IFields> = (data) => onFormSubmit(data);
   const onInvalidSubmit: SubmitErrorHandler<IFields> = (errors) =>
     onFormErrors(errors);
@@ -206,6 +209,9 @@ export function ReactHookFormDynamicZone(
           <FormDynamicZone<IDynamicContents>
             availableBlocks={availableBlock(register, errors)}
             blocksArray={fields}
+            internalDynamicZoneProps={{
+              internalComponentProps: { arrayRootRef: parent },
+            }}
             onAppendUpdate={(newBlock: IDynamicContents) => append(newBlock)}
             onRemoveUpdate={(i: number) => remove(i)}
             onSwapUpdate={(i: number, ii: number) => swap(i, ii)}