refactor: remove transitions and react-transition-groups dependency

hashbite · Jan 17, 2025 · 6ecca94 · 6ecca94
1 parent 78a7e1f
commit 6ecca94
Show file tree

Hide file tree

Showing 12 changed files with 78 additions and 231 deletions.
diff --git a/packages/docs/docs/interface-default/interface.md b/packages/docs/docs/interface-default/interface.md
@@ -22,7 +22,6 @@ In addition to all the props supported by `ConsentManager`, `ConsentManagerDefau
 | `Button`                          | [`React.FC<ButtonProps>`](https://github.com/hashbite/consent-manager/blob/main/packages/interface-default/src/index.tsx#L37)                                      | Component for buttons.                                                      |
 | `Form`                            | [`React.FC<ConsentFormProps>` ](https://github.com/hashbite/consent-manager/blob/main/packages/interface-default/src/form.tsx)                                     | Component for the consent form.                                             |
 | `useDefaultButtonForIntroduction` | `boolean`                                                                                                                                                          | Determines if the default button style is used for the introduction screen. |
-| `slideDuration`                   | `number`                                                                                                                                                           | Duration of slide animations in milliseconds.                               |
 | `noActionDelay`                   | `number`                                                                                                                                                           | Delay before any action is taken (e.g., showing the form) in milliseconds.  |
 
 ## Example Usage

diff --git a/packages/interface-default/package.json b/packages/interface-default/package.json
@@ -51,8 +51,7 @@
     "activity-detector-ssr": "^3.0.0",
     "body-scroll-lock": "^3.1.5",
     "clsx": "^2.0.0",
-    "react-div-100vh": "^0.7.0",
-    "react-transition-group": "^4.4.5"
+    "react-div-100vh": "^0.7.0"
   },
   "peerDependencies": {
     "@consent-manager/core": "^2.0.0-next.3",
@@ -61,7 +60,6 @@
   },
   "devDependencies": {
     "@types/body-scroll-lock": "3.1.2",
-    "@types/react-transition-group": "4.4.12",
     "postcss": "8.5.1",
     "rollup-plugin-postcss": "4.0.2"
   }

diff --git a/packages/interface-default/src/animation-fade.module.css b/packages/interface-default/src/animation-fade.module.css
diff --git a/packages/interface-default/src/animation-slide-out.module.css b/packages/interface-default/src/animation-slide-out.module.css
diff --git a/packages/interface-default/src/animation-slide.module.css b/packages/interface-default/src/animation-slide.module.css
diff --git a/packages/interface-default/src/backdrop.tsx b/packages/interface-default/src/backdrop.tsx
@@ -1,39 +1,21 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import clsx from 'clsx'
-import { CSSTransition } from 'react-transition-group'
 
-import defaultAnimationStyles from './animation-fade.module.css'
 import defaultStyles from './index.module.css'
 import { Styles } from './index'
-import { ConsentManagerDefaultInterfaceContext } from './context'
 
 export interface BackdropProps {
-  fadeDuration: number
   styles?: Styles
   animationStyles?: Styles
 }
 
 export const Backdrop: React.FC<BackdropProps> = ({
-  fadeDuration,
   styles = defaultStyles,
-  animationStyles = defaultAnimationStyles,
 }) => {
-  const { formVisible } = useContext(ConsentManagerDefaultInterfaceContext)
   return (
-    <CSSTransition
-      in={formVisible}
-      timeout={fadeDuration}
-      classNames={animationStyles}
-      mountOnEnter
-      unmountOnExit
-    >
-      <div
-        id="backdrop"
-        className={clsx(styles.backdrop)}
-        style={{
-          transitionDuration: `${fadeDuration}ms`,
-        }}
-      />
-    </CSSTransition>
+    <div
+      id="backdrop"
+      className={clsx(styles.backdrop)}
+    />
   )
 }
diff --git a/packages/interface-default/src/index.module.css b/packages/interface-default/src/index.module.css
@@ -86,7 +86,6 @@ html[data-theme='dark'] {
   left: 0;
   top: auto;
   z-index: 9999;
-  transform: translateY(100%);
 }
 
 .wrapper a {
@@ -110,7 +109,7 @@ html[data-theme='dark'] {
 .slide {
   position: absolute;
   left: 0;
-  top: 0;
+  bottom: 0;
   width: 100%;
   will-change: transform;
   transition-property: transform;

diff --git a/packages/interface-default/src/index.tsx b/packages/interface-default/src/index.tsx
@@ -41,7 +41,6 @@ export interface ButtonProps {
 
 export interface ConsentManagerDefaultInterfaceDesignProps {
   useDefaultButtonForIntroduction?: boolean
-  slideDuration?: number
   noActionDelay?: number
   styles?: Styles
   animationStyles?: Styles

diff --git a/packages/interface-default/src/interface.tsx b/packages/interface-default/src/interface.tsx
@@ -8,7 +8,6 @@ import React, {
   useState,
 } from 'react'
 import clsx from 'clsx'
-import { CSSTransition } from 'react-transition-group'
 import { IoShieldCheckmark } from '@react-icons/all-files/io5/IoShieldCheckmark'
 import { IoClose } from '@react-icons/all-files/io5/IoClose'
 
@@ -26,7 +25,6 @@ import {
 
 import { Switch as DefaultSwitch } from './switch'
 import defaultStyles from './index.module.css'
-import defaultAnimationStyles from './animation-slide.module.css'
 import { Introduction } from './introduction'
 import { Backdrop } from './backdrop'
 import { ConsentManagerDefaultInterfaceContext } from './context'
@@ -40,23 +38,21 @@ const DefaultForm = React.lazy(
 
 export interface InterfaceProps
   extends DecisionsFormProps,
-    ConsentManagerDefaultInterfaceDesignProps {}
+  ConsentManagerDefaultInterfaceDesignProps { }
 
 export const Interface: React.FC<InterfaceProps> = ({
   integrations,
   initialValues,
   onSubmit,
   useDefaultButtonForIntroduction = true,
   noActionDelay = 4000,
-  slideDuration = 700,
   styles = defaultStyles,
   CloseIcon = IoClose,
   ToggleIcon = IoShieldCheckmark,
   ToggleButton = DefaultToggleButton,
   Switch = DefaultSwitch,
   Button = (props) => <button {...props} />,
   Form = DefaultForm,
-  animationStyles = defaultAnimationStyles,
 }) => {
   const DefaultButton = useDefaultButton(styles)
   const hasPendingDecisions = useConsentFormVisible()
@@ -133,29 +129,20 @@ export const Interface: React.FC<InterfaceProps> = ({
   }
 
   return (
-    <div className={clsx(styles.wrapper)} id="consent-control-ui">
-      {needsIntroduction && (
-        <Introduction
-          introductionFinished={introductionFinished}
-          slideDuration={slideDuration}
-          CloseIcon={CloseIcon}
-          Button={useDefaultButtonForIntroduction ? DefaultButton : Button}
-          noActionDelay={noActionDelay}
-        />
-      )}
-      <Backdrop fadeDuration={slideDuration} styles={styles} />
-      <CSSTransition
-        in={formVisible}
-        timeout={slideDuration}
-        classNames={animationStyles}
-        unmountOnExit
-        mountOnEnter
-      >
+    <>
+      <div className={clsx(styles.wrapper)} id="consent-control-ui">
+        {needsIntroduction && (
+          <Introduction
+            introductionFinished={introductionFinished}
+            CloseIcon={CloseIcon}
+            Button={useDefaultButtonForIntroduction ? DefaultButton : Button}
+            noActionDelay={noActionDelay}
+          />
+        )}
+        {formVisible && <Backdrop styles={styles} />}
         <div
+          hidden={!formVisible}
           className={clsx(styles.pane, styles.slide)}
-          style={{
-            transitionDuration: `${slideDuration}ms`,
-          }}
         >
           <section
             className={clsx(styles.form)}
@@ -180,12 +167,12 @@ export const Interface: React.FC<InterfaceProps> = ({
             )}
           </section>
         </div>
-      </CSSTransition>
-      <ToggleButton
-        ToggleIcon={ToggleIcon}
-        styles={styles}
-        toggleControlForm={toggleControlForm}
-      />
-    </div>
+        <ToggleButton
+          ToggleIcon={ToggleIcon}
+          styles={styles}
+          toggleControlForm={toggleControlForm}
+        />
+      </div >
+    </>
   )
 }