feat: migrate Tabs and EmojiPicker

Signed-off-by: Théo Mesnil <[email protected]>
WTTJ · Jun 28, 2023 · 2ec933b · 2ec933b
1 parent 9337f40
commit 2ec933b
Show file tree

Hide file tree

Showing 11 changed files with 157 additions and 160 deletions.
diff --git a/docs/components/ThemeHelper.js b/docs/components/ThemeHelper.js
@@ -1,6 +1,6 @@
 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'
 
@@ -13,7 +13,7 @@ const KEY_CODE_HELP = 'KeyI'
 export const ThemeHelper = ({ modalState }) => {
   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
@@ -33,7 +33,7 @@ export const ThemeHelper = ({ modalState }) => {
   }, [])
 
   useEffect(() => {
-    tabState.select(defaultTab)
+    tab.select(defaultTab)
   }, [currentTheme])
 
   return (
@@ -44,16 +44,16 @@ export const ThemeHelper = ({ modalState }) => {
             <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}>
+                <Tab.List aria-label="Tabs" mr="lg" store={tab} w={200}>
                   {categories.map(category => (
-                    <Tab id={category} key={category} state={tabState}>
+                    <Tab id={category} key={category} store={tab}>
                       {category}
                     </Tab>
                   ))}
                 </Tab.List>
 
                 {categories.map(category => (
-                  <Tab.Panel key={category} state={tabState} tabId={category}>
+                  <Tab.Panel key={category} store={tab} tabId={category}>
                     <Box
                       columnGap={16}
                       display="grid"

diff --git a/docs/pages/components/emoji-picker.mdx b/docs/pages/components/emoji-picker.mdx
@@ -65,14 +65,14 @@ function Default() {
 
 ## Tabs
 
-`<EmojiPicker />` can take multiple children that have to be instances of `<EmojiPicker.Tab />`. They have a `name` prop which will be used for the content of the tab, their children will be the wrapped in `< Tab.Panel />`. `<EmojiPicker />` also takes a `defaultTabState` prop that will be passed to `useTabState`, it can be useful to choose a default tab for instance.
+`<EmojiPicker />` can take multiple children that have to be instances of `<EmojiPicker.Tab />`. They have a `name` prop which will be used for the content of the tab, their children will be the wrapped in `< Tab.Panel />`. `<EmojiPicker />` also takes a `defaultTabStore` prop that will be passed to `useTab`, it can be useful to choose a default tab for instance.
 
 ```jsx
 function Tabs() {
   const store = useEmojiPicker()
   const [emoji, setEmoji] = React.useState()
-  const defaultTabState = {
-    selectedId: 'Second tab',
+  const defaultTabStore = {
+    defaultSelectedId: 'Second tab',
   }
 
   return (
@@ -84,7 +84,7 @@ function Tabs() {
       <EmojiPicker
         onChange={setEmoji}
         value={emoji}
-        defaultTabState={defaultTabState}
+        defaultTabStore={defaultTabStore}
         store={store}
       >
         <EmojiPicker.Tab name="First tab">