docs: add missing docs for migration

WTTJ · Jul 27, 2023 · 3b28b15 · 3b28b15
1 parent da31f03
commit 3b28b15
Show file tree

Hide file tree

Showing 33 changed files with 344 additions and 258 deletions.
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/pages/components/accordion.mdx b/docs/pages/components/accordion.mdx
@@ -23,16 +23,16 @@ Built with [Ariakit](https://ariakit.org/components/disclosure) for a better acc
 
 ```jsx
 function () {
-  const store = useAccordion()
-  const store2 = useAccordion()
+  const accordion = useAccordion()
+  const accordion2 = useAccordion()
 
   return (
     <>
-      <Accordion store={store} title="Accordion title">
+      <Accordion store={accordion} title="Accordion title">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
       </Accordion>
       <Accordion
-        store={store2}
+        store={accordion2}
         mt="md"
         title={
           <Box display="flex" alignItems="center">
@@ -57,10 +57,10 @@ Add `defaultOpen` options on `useAccordion` to open at start the accordion
 
 ```jsx
 function () {
-  const store = useAccordion({ defaultOpen: true })
+  const accordion = useAccordion({ defaultOpen: true })
 
   return (
-    <Accordion store={store} title="Accordion title">
+    <Accordion store={accordion} title="Accordion title">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
       labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
       nisi ut aliquip ex ea commodo consequat.
@@ -77,10 +77,10 @@ Note that the custom icon's size property will be set to small
 
 ```jsx
 function () {
-  const store = useAccordion()
+  const accordion = useAccordion()
 
   return (
-    <Accordion store={store} title="Accordion title" icon={<PlayIcon />}>
+    <Accordion store={accordion} title="Accordion title" icon={<PlayIcon />}>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
       labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
       nisi ut aliquip ex ea commodo consequat.
@@ -89,6 +89,19 @@ function () {
 }
 ```
 
+## useAccordion
+
+We use `useDisclosureStore` from [Ariakit Disclosure](https://ariakit.org/reference/use-disclosure-store) for the state of the accordion with the `animated` flag set to `true` by default.
+
+Pass options to `useAccordion`:
+
+- `defaultOpen`: e.g. `const accordion = useAccordion({ defaultOpen: true })`
+
+And the hook returns (among other things):
+
+- `useState('open')`: whether the accordion is currently open
+- `hide`: a function to hide the accordion
+
 ## Properties
 
 <props propTypes={props.propTypes.Accordion} />

diff --git a/docs/pages/components/drawer.mdx b/docs/pages/components/drawer.mdx
@@ -234,14 +234,19 @@ function StylingDrawer() {
 }
 ```
 
-## useDrawerState
+## useDrawer
 
 We use `useDialogStore` from [Ariakit Dialog](https://ariakit.org/reference/use-dialog-store) for the state of the drawer with the `animated` flag set to `true` by default.
 
-Pass options to `useDrawer` :
+Pass options to `useDrawer`:
 
 - `defaultOpen`: e.g. `const drawer = useDrawer({ defaultOpen: true })`
 
+And the hook returns (among other things):
+
+- `useState('open')`: whether the drawer is currently open
+- `hide`: a function to hide the drawer
+
 ## Properties
 
 ### Drawer

diff --git a/docs/pages/components/dropdown-menu.mdx b/docs/pages/components/dropdown-menu.mdx
@@ -132,6 +132,19 @@ function() {
 }
 ```
 
+## useDropdownMenu
+
+We use `useMenuStore` from [Ariakit Menu](https://ariakit.org/reference/use-menu-store) for the state of the dropdown menu with the `animated` flag set to `true` by default.
+
+Pass options to `useDropdownMenu`:
+
+- `defaultOpen`: e.g. `const dropdownMenu = useDropdownMenu({ defaultOpen: true })`
+
+And the hook returns (among other things):
+
+- `useState('open')`: whether the dropdown menu is currently open
+- `hide`: a function to hide the dropdown menu
+
 ## Properties
 
 <props propTypes={props.propTypes.DropdownMenu} />

diff --git a/docs/pages/components/emoji-picker.mdx b/docs/pages/components/emoji-picker.mdx
@@ -17,7 +17,7 @@ import {
 
 ## About
 
-EmojiPicker is a form element that extends [Popover](https://www.welcome-ui.com/components/popover) and [react-window](https://github.com/bvaughn/react-window) to efficiently render large list of images.
+EmojiPicker is a form element that extends [Popover](popover) and [react-window](https://github.com/bvaughn/react-window) to efficiently render large list of images.
 
 It takes `value` & `onChange` props, its value being an emoji wrapped with colon, using the same pattern as Slack. The data is from [emoji-data](https://github.com/iamcal/emoji-data).
 
@@ -27,16 +27,16 @@ The most basic emoji picker needs `useEmojiPicker()`, `<EmojiPicker.Trigger />`
 
 ```jsx
 function Default() {
-  const store = useEmojiPicker()
+  const emojiPicker = useEmojiPicker()
   const [emoji, setEmoji] = React.useState()
 
   return (
     <>
-      <EmojiPicker.Trigger as={Button} store={store}>
+      <EmojiPicker.Trigger as={Button} store={emojiPicker}>
         {emoji ? <Emoji emoji={emoji} /> : 'Open Emoji Picker'}
       </EmojiPicker.Trigger>
 
-      <EmojiPicker onChange={setEmoji} value={emoji} store={store} />
+      <EmojiPicker onChange={setEmoji} value={emoji} store={emojiPicker} />
     </>
   )
 }
@@ -48,16 +48,16 @@ function Default() {
 
 ```jsx
 function Default() {
-  const store = useEmojiPicker()
+  const emojiPicker = useEmojiPicker()
   const [emoji, setEmoji] = React.useState(':dog:')
 
   return (
     <>
-      <EmojiPicker.Trigger as={Button} store={store}>
+      <EmojiPicker.Trigger as={Button} store={emojiPicker}>
         {emoji ? <Emoji emoji={emoji} /> : 'Open Emoji Picker'}
       </EmojiPicker.Trigger>
 
-      <EmojiPicker onChange={setEmoji} value={emoji} store={store} />
+      <EmojiPicker onChange={setEmoji} value={emoji} store={emojiPicker} />
     </>
   )
 }
@@ -69,23 +69,23 @@ function Default() {
 
 ```jsx
 function Tabs() {
-  const store = useEmojiPicker()
+  const emojiPicker = useEmojiPicker()
   const [emoji, setEmoji] = React.useState()
   const defaultTabStore = {
     defaultSelectedId: 'Second tab',
   }
 
   return (
     <>
-      <EmojiPicker.Trigger as={Button} store={store}>
+      <EmojiPicker.Trigger as={Button} store={emojiPicker}>
         {emoji ? <Emoji emoji={emoji} /> : 'Open Emoji Picker'}
       </EmojiPicker.Trigger>
 
       <EmojiPicker
         onChange={setEmoji}
         value={emoji}
         defaultTabStore={defaultTabStore}
-        store={store}
+        store={emojiPicker}
       >
         <EmojiPicker.Tab name="First tab">
           <Box display="flex" alignItems="center" justifyContent="center">
@@ -122,7 +122,7 @@ All the field, with the expection of `url`, will be used for the search.
 
 ```jsx
 function Custom() {
-  const store = useEmojiPicker()
+  const emojiPicker = useEmojiPicker()
   const [emoji, setEmoji] = React.useState()
 
   const emojis = [
@@ -141,15 +141,15 @@ function Custom() {
 
   return (
     <>
-      <EmojiPicker.Trigger as={Button} store={store}>
+      <EmojiPicker.Trigger as={Button} store={emojiPicker}>
         {currentEmoji ? (
           <Emoji emoji={currentEmoji.url || currentEmoji.alias} />
         ) : (
           'Open Emoji Picker'
         )}
       </EmojiPicker.Trigger>
 
-      <EmojiPicker onChange={setEmoji} store={store}>
+      <EmojiPicker onChange={setEmoji} store={emojiPicker}>
         <EmojiPicker.Tab name="Custom">
           <EmojiPicker.List emojis={emojis} />
         </EmojiPicker.Tab>
@@ -165,16 +165,16 @@ When using `<EmojiPicker />` witjout children, it will automatically add `<Emoji
 
 ```jsx
 function BasicList() {
-  const store = useEmojiPicker()
+  const emojiPicker = useEmojiPicker()
   const [emoji, setEmoji] = React.useState()
 
   return (
     <>
-      <EmojiPicker.Trigger as={Button} store={store}>
+      <EmojiPicker.Trigger as={Button} store={emojiPicker}>
         {emoji ? <Emoji emoji={emoji} /> : 'Open Emoji Picker'}
       </EmojiPicker.Trigger>
 
-      <EmojiPicker onChange={setEmoji} store={store}>
+      <EmojiPicker onChange={setEmoji} store={emojiPicker}>
         <EmojiPicker.Tab name="Basic">
           <EmojiPicker.BasicList />
         </EmojiPicker.Tab>
@@ -191,7 +191,7 @@ function BasicList() {
               value={emoji}
               onChange={e => setEmoji(e.target.value)}
             />
-            <Button onClick={store.hide}>Close emoji picker</Button>
+            <Button onClick={emojiPicker.hide}>Close emoji picker</Button>
           </Box>
         </EmojiPicker.Tab>
       </EmojiPicker>
@@ -206,16 +206,16 @@ You can set some props on `<EmojiPicker />` & `<EmojiPicker.List />` to change s
 
 ```jsx
 function BasicList() {
-  const store = useEmojiPicker()
+  const emojiPicker = useEmojiPicker()
   const [emoji, setEmoji] = React.useState()
 
   return (
     <>
-      <EmojiPicker.Trigger as={Button} store={store}>
+      <EmojiPicker.Trigger as={Button} store={emojiPicker}>
         {emoji ? <Emoji emoji={emoji} /> : "Ouvrir l'Emoji Picker"}
       </EmojiPicker.Trigger>
 
-      <EmojiPicker onChange={setEmoji} store={store} emptyList="Pas d'emojis">
+      <EmojiPicker onChange={setEmoji} store={emojiPicker} emptyList="Pas d'emojis">
         <EmojiPicker.Tab name="Basique">
           <EmojiPicker.BasicList inputSearchPlaceholder="Chercher un emoji" />
         </EmojiPicker.Tab>
@@ -225,6 +225,14 @@ function BasicList() {
 }
 ```
 
+## useEmojiPicker
+
+We use `usePopover` from [Popover](popover).
+
+Pass options to `useEmojiPicker` :
+
+- `defaultOpen`: e.g. `const emojiPicker = useEmojiPicker({ defaultOpen: true })`
+
 ## Properties
 
 ### EmojiPicker

diff --git a/docs/pages/components/modal.mdx b/docs/pages/components/modal.mdx
@@ -344,15 +344,15 @@ function() {
 
 We use `useDialogStore` from [Ariakit Dialog](https://ariakit.org/reference/use-dialog-store) for the state of the modal.
 
-Pass options to `useModal` :
+Pass options to `useModal`:
 
 - `defaultOpen`: e.g. `const modal = useModal({ defaultOpen: true })`
 - `onClose`: e.g. `const modal = useModal({ onClose: () => console.log('closing the modal') })`
 
 And the hook returns (among other things):
 
-- `visible` : whether the modal is currently visible
-- `hide` : a function to hide the modal
+- `useState('open')`: whether the modal is currently open
+- `hide`: a function to hide the modal
 
 ## Properties