Update pnpm version & Add animations to accordion component with fram…

…er-motion
zyx7eam · Jun 18, 2024 · 81d4321 · 81d4321
1 parent 4da123c
commit 81d4321
Show file tree

Hide file tree

Showing 5 changed files with 4,957 additions and 3,868 deletions.
diff --git a/apps/web/src/app/examples/accordion/page.tsx b/apps/web/src/app/examples/accordion/page.tsx
@@ -16,7 +16,7 @@ let items = [
 
 const AccordionExample = () => {
   return (
-    <Accordion defaultExpandedKeys={['one']} multiple={false}>
+    <Accordion defaultExpandedKeys={['one']} multiple={true} iconPosition='end'>
       <AccordionItem key={'one'} title={'Test Text'} hasChildItems={false}>
         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam
         adipisci ut cumque assumenda blanditiis corrupti illo iste quis delectus

diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "turbo": "latest",
     "prettier-plugin-tailwindcss": "^0.4.1"
   },
-  "packageManager": "pnpm@8.6.10",
+  "packageManager": "pnpm@9.1.4",
   "dependencies": {
     "tailwindcss": "^3.3.5"
   }

diff --git a/packages/components/accordion/src/accordion-item.tsx b/packages/components/accordion/src/accordion-item.tsx
@@ -10,12 +10,21 @@ import { ChevronDownIcon } from 'lucide-react';
 
 import { mergeProps } from '@react-aria/utils';
 import { VariantProps, tv } from 'tailwind-variants';
-import { iconSizes } from './accordion';
+import { AnimationConfig, BodyTransitionType, iconSizes } from './accordion';
+
+import {
+  LazyMotion,
+  m,
+  domAnimation,
+  AnimatePresence,
+  MotionConfig,
+  Transition,
+} from 'framer-motion';
 
 const accordionItemVariants = tv({
   slots: {
     button: 'flex w-full bg-red-300 justify-between items-center',
-    body: 'bg-yellow-100',
+    body: 'bg-yellow-100 h-full',
     icon: '',
     text: 'text-inherit',
   },
@@ -63,6 +72,8 @@ type AccordionItemProps<T> = {
   state: TreeState<T>;
   multiple?: boolean;
   size?: keyof typeof iconSizes;
+  // animationConfig?: AnimationConfig;
+  animationConfig?: Transition;
 } & AccordionItemVariants;
 
 function AccordionItem<T>({
@@ -71,6 +82,7 @@ function AccordionItem<T>({
   multiple,
   size,
   iconPosition,
+  animationConfig,
 }: AccordionItemProps<T>) {
   let ref = useRef<HTMLButtonElement>(null);
   let { buttonProps, regionProps } = useAccordionItem(
@@ -89,26 +101,43 @@ function AccordionItem<T>({
   const { focusProps } = useFocus({ isDisabled });
 
   return (
-    <div>
+    <LazyMotion features={domAnimation} strict>
       <h3>
         <button
           {...mergeProps(buttonProps, focusProps)}
           className={button({ size, iconPosition })}
           ref={ref}
         >
           <span className={text({ iconPosition })}>{item.rendered}</span>
-          <span className={icon({ iconPosition })}>
+          <m.span
+            className={icon({ iconPosition })}
+            style={{ overflow: 'hidden' }}
+            initial={{ rotate: isExpanded ? 180 : 0 }}
+            animate={{ rotate: isExpanded ? 180 : 0 }}
+            exit={{ rotate: 0 }}
+          >
             <ChevronDownIcon size={iconSizes[size || 'md']} />
-          </span>
+          </m.span>
         </button>
       </h3>
 
-      {isExpanded && (
-        <div {...regionProps} className={body({ size })}>
-          {item.props.children}
-        </div>
-      )}
-    </div>
+      <AnimatePresence initial={isExpanded} presenceAffectsLayout>
+        <MotionConfig transition={animationConfig}>
+          <m.div
+            style={{ overflow: 'hidden', background: 'transparent' }}
+            initial={{ height: 'auto' }}
+            animate={{
+              height: isExpanded ? 'auto' : 0,
+            }}
+            exit={{ height: 0 }}
+          >
+            <div {...regionProps} className={body({ size })}>
+              {item.props.children}
+            </div>
+          </m.div>
+        </MotionConfig>
+      </AnimatePresence>
+    </LazyMotion>
   );
 }
 

diff --git a/packages/components/accordion/src/accordion.tsx b/packages/components/accordion/src/accordion.tsx
@@ -7,6 +7,7 @@ import { AriaAccordionProps } from '@react-types/accordion';
 import { tv } from 'tailwind-variants';
 import type { VariantProps } from 'tailwind-variants';
 import { Item } from '@react-stately/collections';
+import { Transition } from 'framer-motion';
 
 export const iconSizes = {
   sm: 14,
@@ -16,6 +17,21 @@ export const iconSizes = {
 
 export type IconSizeType = keyof typeof iconSizes;
 
+export type BodyTransitionType =
+  | 'inertia'
+  | 'spring'
+  | 'just'
+  | 'keyframes'
+  | 'tween';
+
+export type AnimationConfig = {
+  enabled?: boolean;
+  duration?: number;
+  easing?: string;
+  delay?: number;
+  bodyTransitionType?: BodyTransitionType;
+};
+
 const accordionVariants = tv({
   base: 'w-full bg-black',
   variants: {
@@ -45,6 +61,8 @@ export type AccordionProps<T extends object> = AriaAccordionProps<T> &
     multiple?: boolean;
     size?: IconSizeType;
     iconPosition?: 'start' | 'end';
+    // animationConfig?: AnimationConfig;
+    animationConfig?: Transition;
   };
 
 function Accordion<T extends object>(props: AccordionProps<T>) {
@@ -54,6 +72,7 @@ function Accordion<T extends object>(props: AccordionProps<T>) {
     multiple,
     size = 'md',
     iconPosition = 'end',
+    animationConfig = {},
     ...__restProps
   } = props;
 
@@ -81,6 +100,7 @@ function Accordion<T extends object>(props: AccordionProps<T>) {
           multiple={multiple}
           size={size}
           iconPosition={iconPosition}
+          animationConfig={animationConfig}
         />
       )),
     [state.collection],