feat: migrate Accordion

Signed-off-by: Théo Mesnil <[email protected]>

packages/Accordion/package.json

@@ -49,7 +49,7 @@
     "@welcome-ui/icons": "^5.0.0-alpha.40",
     "@welcome-ui/system": "^5.0.0-alpha.40",
     "react-animate-height": "^3.1.1",
-    "reakit": "^1.3.11"
+    "@ariakit/react": "^0.2.10"
   },
   "peerDependencies": {
     "@xstyled/styled-components": "^3.7.3",

packages/Accordion/src/index.tsx

@@ -1,5 +1,5 @@
 import React, { cloneElement } from 'react'
-import { useDisclosureState } from 'reakit'
+import * as Ariakit from '@ariakit/react'
 import AnimateHeight from 'react-animate-height'
 import { RightIcon } from '@welcome-ui/icons'
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
@@ -9,32 +9,26 @@ import * as S from './styles'
 export interface AccordionOptions {
   title: string | JSX.Element
   icon?: JSX.Element
-  /**
-   * @deprecated
-   * will be replace by open on ariakit (reakit v2)
-   **/
-  visible?: boolean
   /**
    * Open the hidden content on load
    */
-  open?: boolean
+  open?: Ariakit.DisclosureStoreProps['open']
 }
 
 export type AccordionProps = CreateWuiProps<'div', AccordionOptions>
 
 export const Accordion = forwardRef<'div', AccordionProps>(
-  ({ children, icon = <RightIcon />, title, visible = false, open = false, ...rest }, ref) => {
-    const disclosure = useDisclosureState({ visible: open || visible, animated: true })
-    const isVisible = disclosure.visible
+  ({ children, icon = <RightIcon />, title, open = false, ...rest }, ref) => {
+    const disclosureStore = Ariakit.useDisclosureStore({ defaultOpen: open, animated: true })
+    const isOpen = disclosureStore.useState().open
 
     return (
       <S.Accordion ref={ref} {...rest}>
-        <S.Disclosure {...disclosure}>
-          {title}
-          <S.Icon visible={isVisible}>{cloneElement(icon, { size: 'sm' })}</S.Icon>
+        <S.Disclosure store={disclosureStore}>
+          {title}2<S.Icon isOpen={isOpen}>{cloneElement(icon, { size: 'sm' })}</S.Icon>
         </S.Disclosure>
-        <S.Content {...disclosure}>
-          <AnimateHeight animateOpacity duration={200} height={isVisible ? 'auto' : 0}>
+        <S.Content isOpen={isOpen} store={disclosureStore}>
+          <AnimateHeight animateOpacity duration={200} height={isOpen ? 'auto' : 0}>
             {children}
           </AnimateHeight>
         </S.Content>

packages/Accordion/src/styles.ts

@@ -1,5 +1,5 @@
 import styled, { css, system, th } from '@xstyled/styled-components'
-import { DisclosureContent, Disclosure as ReakitDisclosure } from 'reakit'
+import * as Ariakit from '@ariakit/react'
 import { Box } from '@welcome-ui/box'
 
 export const Accordion = styled.div`
@@ -12,11 +12,11 @@ export const Accordion = styled.div`
   }
 `
 
-export const Icon = styled(Box)<{ visible: boolean }>(
-  ({ visible }) => css`
+export const Icon = styled(Box)<{ isOpen: Ariakit.DisclosureStoreState['open'] }>(
+  ({ isOpen }) => css`
     flex-shrink: 0;
     ${th('accordions.icon')};
-    transform: ${visible ? 'rotate3d(0, 0, 1, 90deg)' : 'rotate3d(0)'};
+    transform: ${isOpen ? 'rotate3d(0, 0, 1, 90deg)' : 'rotate3d(0)'};
     transition: medium;
     width: 24;
     height: 24;
@@ -30,7 +30,7 @@ export const Icon = styled(Box)<{ visible: boolean }>(
   `
 )
 
-export const Disclosure = styled(ReakitDisclosure)`
+export const Disclosure = styled(Ariakit.Disclosure)`
   ${th('accordions.title')};
   width: 100%;
   padding: ${th('accordions.padding')};
@@ -57,13 +57,13 @@ export const Disclosure = styled(ReakitDisclosure)`
   }
 `
 
-export const Content = styled(DisclosureContent)(
-  ({ visible }) => css`
+export const Content = styled(Ariakit.DisclosureContent)(
+  ({ isOpen }: { isOpen: Ariakit.DisclosureStoreState['open'] }) => css`
     ${th('accordions.content')};
     padding-inline: ${th('accordions.padding')};
     color: dark-700;
 
-    ${visible &&
+    ${isOpen &&
     css`
       padding-bottom: ${th('accordions.padding')};
     `}