WTTJ · theo-mesnil · Aug 3, 2023 · Jun 21, 2023 · Jun 21, 2023 · Jun 21, 2023
diff --git a/.github/ISSUE_TEMPLATE/tech-feature-request.yml b/.github/ISSUE_TEMPLATE/tech-feature-request.yml
@@ -35,4 +35,4 @@ body:
     attributes:
       label: 'Implementation'
       description: 'If possible, describe how this feature could be implemented.'
-      placeholder: 'See [CONTRIBUTING.mdx](https://github.com/reakit/reakit/blob/master/CONTRIBUTING.mdx)'
+      placeholder: 'See [CONTRIBUTING.mdx](https://github.com/WTTJ/welcome-ui/blob/master/CONTRIBUTING.mdx)'
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 <img src="docs/public/illustration.png" width="300" />
 
-Welcome to the _Welcome UI library_ created by [Welcome to the jungle](https://www.welcometothejungle.com), a customizable design system with react • typescript • styled-components • styled-system and reakit.
+Welcome to the _Welcome UI library_ created by [Welcome to the jungle](https://www.welcometothejungle.com), a customizable design system with react • typescript • styled-components • styled-system and ariakit.
 
 Here you'll find all the core components you need to create a delightful webapp.
 

diff --git a/docs/components/GlobalStyle.js b/docs/components/GlobalStyle.js
@@ -14,6 +14,8 @@ export const GlobalStyle = createGlobalStyle`
   }
 
   .DocSearch {
+    transition: none !important;
+
     &-Button {
       margin: 0;
       width: 100%;

diff --git a/docs/components/Head.js b/docs/components/Head.js
@@ -25,13 +25,13 @@ export function Head() {
       <meta content="@wttj_fr" name="twitter:create" />
       <meta content="Welcome UI - Customizable design system with react" property="twitter:title" />
       <meta
-        content="Here you'll find all the core components you need to create a delightful webapp. Customizable design system from Welcome to the jungle with react, typescript, styled-components, reakit and a lot of love 💛"
+        content="Here you'll find all the core components you need to create a delightful webapp. Customizable design system from Welcome to the jungle with react, typescript, styled-components, ariakit and a lot of love 💛"
         property="twitter:description"
       />
       <meta content="https://www.welcome-ui.com" property="og:url" />
       <meta content="Welcome UI - Customizable design system with react" property="og:title" />
       <meta
-        content="Here you'll find all the core components you need to create a delightful webapp. Customizable design system from Welcome to the jungle with react, typescript, styled-components, reakit and a lot of love 💛"
+        content="Here you'll find all the core components you need to create a delightful webapp. Customizable design system from Welcome to the jungle with react, typescript, styled-components, ariakit and a lot of love 💛"
         property="og:description"
       />
       <meta content="https://www.welcome-ui.com/og-image.png" property="og:image" />

diff --git a/docs/components/Header/ThemeSelector.js b/docs/components/Header/ThemeSelector.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { DropdownMenu, useDropdownMenuState } from '@welcome-ui/dropdown-menu'
+import { DropdownMenu, useDropdownMenu } from '@welcome-ui/dropdown-menu'
 import { Box } from '@welcome-ui/box'
 import { CrescentMoonIcon, StarIcon, StarOutlineIcon, SunIcon } from '@welcome-ui/icons'
 import { Button } from '@welcome-ui/button'
@@ -9,12 +9,12 @@ import { useSetThemeContext, useThemeContext } from '../../context/theme'
 
 export const ThemeSelector = props => {
   const setTheme = useSetThemeContext()
-  const menuState = useDropdownMenuState({ gutter: 10 })
+  const dropdownMenu = useDropdownMenu()
   const theme = useThemeContext()
 
   const handleSetTheme = theme => {
     setTheme(theme)
-    menuState.hide()
+    dropdownMenu.hide()
   }
 
   const options = [
@@ -26,17 +26,23 @@ export const ThemeSelector = props => {
 
   return (
     <>
-      <DropdownMenu.Trigger as={Button} h={30} shape="circle" state={menuState} w={30} {...props}>
+      <DropdownMenu.Trigger
+        as={Button}
+        h={30}
+        shape="circle"
+        store={dropdownMenu}
+        w={30}
+        {...props}
+      >
         <SunIcon />
       </DropdownMenu.Trigger>
-      <DropdownMenu aria-label="Theme selector" state={menuState}>
+      <DropdownMenu aria-label="Theme selector" store={dropdownMenu}>
         {options?.map(({ icon: Icon, isBeta, label, value }) => (
           <DropdownMenu.Item
             color={theme === value ? 'dark-900' : undefined}
             fontWeight={theme === value ? 'bold' : undefined}
             key={value}
             onClick={() => handleSetTheme(value)}
-            state={menuState}
           >
             <Icon mr="md" size="sm" />
             <Box>{label}</Box>

diff --git a/docs/components/Header/index.js b/docs/components/Header/index.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { Box } from '@welcome-ui/box'
 import { InformationIcon, MenuIcon } from '@welcome-ui/icons'
 import NextLink from 'next/link'
-import { Drawer, useDrawerState } from '@welcome-ui/drawer'
-import { useModalState } from '@welcome-ui/modal'
+import { Drawer, useDrawer } from '@welcome-ui/drawer'
+import { useModal } from '@welcome-ui/modal'
 import { Button } from '@welcome-ui/button'
 import { CrossIcon } from '@welcome-ui/icons'
 import { DocSearch } from '@docsearch/react'
@@ -19,22 +19,16 @@ import * as S from './styles'
 import { NavBar } from './NavBar'
 
 export const Header = () => {
-  const mobileMenuDrawerState = useDrawerState()
-  const modalState = useModalState()
+  const mobileMenuDrawer = useDrawer()
+  const modal = useModal()
   const { pathname } = useRouter()
   const variants = {
     '/': 'gray',
   }
   const variant = variants[pathname]
-  const [hasBeenHydrated, setHasBeenHydrated] = useState(false)
-
-  // Workaround for hydration warning UI for Reakit dialog (fix in ariakit 2.0)
-  useEffect(() => {
-    setHasBeenHydrated(true)
-  }, [])
 
   function openThemeHelper() {
-    modalState.show()
+    modal.show()
   }
 
   return (
@@ -54,32 +48,42 @@ export const Header = () => {
             placeholder="Search the docs"
           />
         </Box>
-        <ThemeSelector ml="lg" />
-        <Button h={30} ml="xxs" onClick={openThemeHelper} shape="circle" variant="ghost" w={30}>
+        <ThemeSelector ml="lg" display={{ _: 'none', md: 'flex' }} />
+        <Button
+          h={30}
+          ml="xxs"
+          display={{ _: 'none', md: 'flex' }}
+          onClick={openThemeHelper}
+          shape="circle"
+          variant="ghost"
+          w={30}
+        >
           <InformationIcon color="light-900" />
         </Button>
       </Box>
       <NavBar display={{ xs: 'none', md: 'flex' }} />
-      {hasBeenHydrated && (
-        <>
-          <Drawer.Trigger
-            as={Button}
-            display={{ md: 'none' }}
-            shape="circle"
-            size="sm"
-            state={mobileMenuDrawerState}
-          >
-            {mobileMenuDrawerState.visible ? <CrossIcon /> : <MenuIcon />}
-          </Drawer.Trigger>
-          <Drawer.Backdrop backdropVisible={false} state={mobileMenuDrawerState}>
-            <S.MenuMobileDrawer aria-label="Menu backdrop" state={mobileMenuDrawerState}>
-              <NavBar drawerState={mobileMenuDrawerState} isMobileMenu mb="lg" />
-              <ComponentsList onClick={() => mobileMenuDrawerState.hide()} />
-            </S.MenuMobileDrawer>
-          </Drawer.Backdrop>
-        </>
-      )}
-      <ThemeHelper modalState={modalState} />
+      <>
+        <Drawer.Trigger
+          flexShrink={0}
+          as={Button}
+          display={{ md: 'none' }}
+          shape="circle"
+          size="sm"
+          store={mobileMenuDrawer}
+        >
+          {mobileMenuDrawer.open ? <CrossIcon /> : <MenuIcon />}
+        </Drawer.Trigger>
+        <S.MenuMobileDrawer
+          withBackdrop={false}
+          store={mobileMenuDrawer}
+          aria-label="Menu backdrop"
+          withCloseButton={false}
+        >
+          <NavBar drawerState={mobileMenuDrawer} isMobileMenu mb="lg" />
+          <ComponentsList onClick={() => mobileMenuDrawer.hide()} />
+        </S.MenuMobileDrawer>
+      </>
+      <ThemeHelper modalStore={modal} />
     </S.Header>
   )
 }
diff --git a/docs/components/Header/styles.js b/docs/components/Header/styles.js
@@ -44,7 +44,7 @@ export const Header = styled.header(
 )
 
 export const MenuMobileDrawer = styled(WUIDrawer)`
-  top: ${`calc(${headerHeight} - 1px)`} !important;
+  margin-top: ${`calc(${headerHeight} - 1px)`} !important;
   width: 100% !important;
   padding: lg;
 

diff --git a/docs/components/Homepage/Expectations.js b/docs/components/Homepage/Expectations.js
@@ -42,7 +42,7 @@ const expectations = [
     title: 'Accessibility',
     icon: UserIcon,
     description:
-      'We are trying to offer an accessible experience as much as we can, using Reakit for instance.',
+      'We are trying to offer an accessible experience as much as we can, using Ariakit for instance.',
   },
   {
     title: 'Typing',

diff --git a/docs/components/Mdx/Code/index.js b/docs/components/Mdx/Code/index.js
@@ -11,7 +11,7 @@ import { yupResolver } from '@hookform/resolvers/yup'
 import dynamic from 'next/dynamic'
 
 // Welcome UI
-import { Accordion } from '@welcome-ui/accordion'
+import * as Accordion from '@welcome-ui/accordion'
 import { Alert } from '@welcome-ui/alert'
 import { AspectRatio } from '@welcome-ui/aspect-ratio'
 import { Avatar } from '@welcome-ui/avatar'
@@ -121,7 +121,7 @@ export const Code = ({
     language,
     transformCode: () => transformCode(editorCode, row),
     scope: {
-      Accordion,
+      ...Accordion,
       Alert,
       AspectRatio,
       Avatar,

diff --git a/docs/components/Mdx/Code/styles.js b/docs/components/Mdx/Code/styles.js
@@ -19,6 +19,14 @@ export const LiveEditorContent = styled(ReactLiveEditor)(
     `}
     overflow-x: auto;
 
+    .inserted-sign {
+      color: sub-5 !important;
+    }
+
+    .deleted-sign {
+      color: danger-300 !important;
+    }
+
     textarea,
     pre {
       background-color: black !important;

diff --git a/docs/components/Mdx/InlineCode.js b/docs/components/Mdx/InlineCode.js
@@ -4,6 +4,6 @@ export const InlineCode = styled.code`
   background-color: transparent;
   font-family: inherit;
   font-size: inherit;
-  font-weight: bold;
-  color: sub-3;
+  font-weight: medium;
+  color: sub-2;
 `
diff --git a/docs/components/Mdx/Showcase/index.js b/docs/components/Mdx/Showcase/index.js
@@ -21,7 +21,7 @@ export function Showcase({
     <Box backgroundColor="nude-100" maxW="100% !important">
       <Box m="0 auto" maxW={970} px={{ md: 'md' }} py={{ xs: 'xxl', md: '4xl' }}>
         <H1 mb="0" pb="sm" pt="0">
-          {pageName || component}
+          {component?.split(',')?.[0]}
         </H1>
         {description && <Text variant="body1">{description}</Text>}
         <Box mt="4xl">

diff --git a/docs/components/ThemeHelper.js b/docs/components/ThemeHelper.js
@@ -1,30 +1,28 @@
 import { Box } from '@welcome-ui/box'
 import { Modal } from '@welcome-ui/modal'
-import { Tab, useTabState } from '@welcome-ui/tabs'
+import { Tab, useTab } from '@welcome-ui/tabs'
 import { Text } from '@welcome-ui/text'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 
 import { useThemeContext } from '../context/theme'
 
 import { ThemeConfiguration } from './ThemeConfiguration'
 
 const KEY_CODE_HELP = 'KeyI'
 
-export const ThemeHelper = ({ modalState }) => {
+export const ThemeHelper = ({ modalStore }) => {
   const currentTheme = useThemeContext()
-  const [hasBeenHydrated, setHasBeenHydrated] = useState(false)
-  const tabState = useTabState({ orientation: 'vertical' })
+  const tab = useTab({ orientation: 'vertical' })
 
   const categories = ['colors', 'space', 'screens', 'fontSizes', 'fontWeights']
   const [defaultTab] = categories
   const title = `${currentTheme.at(0).toUpperCase()}${currentTheme.slice(1)} Theme`
 
-  // Workaround for hydration warning UI for Reakit dialog (fix in ariakit 2.0)
   useEffect(() => {
-    setHasBeenHydrated(true)
-
     const onKeyboardEvent = event => {
-      if (event.metaKey && event.code === KEY_CODE_HELP) modal.show()
+      if (event.metaKey && event.code === KEY_CODE_HELP) {
+        modalStore.show()
+      }
     }
 
     window.addEventListener('keydown', onKeyboardEvent)
@@ -33,49 +31,47 @@ export const ThemeHelper = ({ modalState }) => {
   }, [])
 
   useEffect(() => {
-    tabState.select(defaultTab)
+    tab.select(defaultTab)
   }, [currentTheme])
 
   return (
     <>
-      {hasBeenHydrated && (
-        <Modal ariaLabel="theme configuration" state={modalState} title={title}>
-          <Modal.Content>
-            <Modal.Header subtitle="Documentation for the core theme entries" title={title} />
-            <Modal.Body mt="xl">
-              <Box display="flex">
-                <Tab.List aria-label="Tabs" mr="lg" state={tabState} w={200}>
-                  {categories.map(category => (
-                    <Tab id={category} key={category} state={tabState}>
-                      {category}
-                    </Tab>
-                  ))}
-                </Tab.List>
-
+      <Modal ariaLabel="theme configuration" store={modalStore} title={title}>
+        <Modal.Content store={modalStore}>
+          <Modal.Header subtitle="Documentation for the core theme entries" title={title} />
+          <Modal.Body mt="xl">
+            <Box display="flex">
+              <Tab.List aria-label="Tabs" mr="lg" store={tab} w={200}>
                 {categories.map(category => (
-                  <Tab.Panel key={category} state={tabState} tabId={category}>
-                    <Box
-                      columnGap={16}
-                      display="grid"
-                      gridTemplateColumns="1fr 1fr"
-                      mb="md"
-                      rowGap={8}
-                    >
-                      <Text mb="md" mt="0" variant="h5">
-                        Key
-                      </Text>
-                      <Text mb="md" mt="0" variant="h5">
-                        Value
-                      </Text>
-                      <ThemeConfiguration category={category} />
-                    </Box>
-                  </Tab.Panel>
+                  <Tab id={category} key={category} store={tab}>
+                    {category}
+                  </Tab>
                 ))}
-              </Box>
-            </Modal.Body>
-          </Modal.Content>
-        </Modal>
-      )}
+              </Tab.List>
+
+              {categories.map(category => (
+                <Tab.Panel key={category} store={tab} tabId={category}>
+                  <Box
+                    columnGap={16}
+                    display="grid"
+                    gridTemplateColumns="1fr 1fr"
+                    mb="md"
+                    rowGap={8}
+                  >
+                    <Text mb="md" mt="0" variant="h5">
+                      Key
+                    </Text>
+                    <Text mb="md" mt="0" variant="h5">
+                      Value
+                    </Text>
+                    <ThemeConfiguration category={category} />
+                  </Box>
+                </Tab.Panel>
+              ))}
+            </Box>
+          </Modal.Body>
+        </Modal.Content>
+      </Modal>
     </>
   )
 }
diff --git a/docs/package.json b/docs/package.json
@@ -14,7 +14,7 @@
   "keywords": [
     "design-system",
     "react",
-    "reakit",
+    "ariakit",
     "styled-components",
     "styled-system",
     "ui-library",