refactor(@air/zephyr): upgrade radix packages

AirLabsTeam · Nov 3, 2022 · 66d4f6d · 66d4f6d · vercel · Nov 3, 2022
1 parent f15b9c3
commit 66d4f6d
Show file tree

Hide file tree

Showing 18 changed files with 354 additions and 488 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,6 +1,7 @@
 import { ThemeProvider } from 'styled-components';
 
 import { theme } from '../packages/zephyr/src/theme';
+import { TooltipProvider } from '../packages/zephyr/src/Tooltip';
 
 export const parameters = {
   actions: { argTypesRegex: '^on.*' },
@@ -12,9 +13,11 @@ export const parameters = {
 };
 
 const ThemeWrapper = (Story) => (
-  <ThemeProvider theme={theme}>
-    <Story />
-  </ThemeProvider>
+  <TooltipProvider>
+    <ThemeProvider theme={theme}>
+      <Story />
+    </ThemeProvider>
+  </TooltipProvider>
 );
 
 export const decorators = [ThemeWrapper];
diff --git a/packages/zephyr/package.json b/packages/zephyr/package.json
@@ -33,8 +33,8 @@
     "url": "https://github.com/AirLabsTeam/web-core/issues"
   },
   "scripts": {
-    "start": "tsdx watch --verbose --noClean --tsconfig tsconfig.build.json",
-    "build": "tsdx build --tsconfig tsconfig.build.json",
+    "start": "tsdx watch --verbose --noClean --tsconfig tsconfig.json",
+    "build": "tsdx build --tsconfig tsconfig.json",
     "test": "tsdx test --passWithNoTests",
     "lint": "tsdx lint"
   },
@@ -58,16 +58,17 @@
     "yup": "^0.32.9"
   },
   "dependencies": {
-    "@radix-ui/react-dropdown-menu": "^0.1.4",
-    "@radix-ui/react-slot": "^0.0.4",
-    "@radix-ui/react-tooltip": "^0.1.6",
+    "@radix-ui/popper": "^0.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.0.1",
+    "@radix-ui/react-slot": "^1.0.1",
+    "@radix-ui/react-tooltip": "^1.0.2",
+    "@radix-ui/react-visually-hidden": "^1.0.1",
     "@reach/alert-dialog": "^0.11.2",
     "@reach/auto-id": "^0.11.2",
     "@reach/dialog": "^0.11.2",
     "@reach/menu-button": "^0.11.2",
     "@reach/rect": "^0.11.2",
     "@reach/utils": "0.11.2",
-    "@reach/visually-hidden": "^0.11.1",
     "classnames": "^2.2.6",
     "react-contexify": "^5.0.0",
     "react-use": "^15.3.4"

diff --git a/packages/zephyr/src/ActionSheet/components/ActionSheetHeader.tsx b/packages/zephyr/src/ActionSheet/components/ActionSheetHeader.tsx
@@ -1,5 +1,5 @@
 import { Close as CloseIcon } from '@air/icons';
-import VisuallyHidden from '@reach/visually-hidden';
+import { VisuallyHidden } from '../../VisuallyHidden';
 
 import { Box } from '../../Box';
 import { IconButton } from '../../IconButton';

diff --git a/packages/zephyr/src/Button.tsx b/packages/zephyr/src/Button.tsx
@@ -2,10 +2,10 @@ import { transitions } from 'polished';
 import { forwardRefWithAs, PropsWithAs } from '@reach/utils';
 import { variant as styledSystemVariant } from 'styled-system';
 import { useReducedMotion } from 'framer-motion';
-import VisuallyHidden from '@reach/visually-hidden';
 import classNames from 'classnames';
 import { Ref } from 'react';
 import styled, { keyframes, useTheme } from 'styled-components';
+import { VisuallyHidden } from './VisuallyHidden';
 import { Box, BoxStylingProps } from './Box';
 import { ButtonVariantName } from './theme/variants/button';
 import { LeftRight, SVGComponent } from './shared';

diff --git a/packages/zephyr/src/Forms/Checkbox.tsx b/packages/zephyr/src/Forms/Checkbox.tsx
@@ -1,7 +1,7 @@
 import { Check } from '@air/icons';
 import { useId } from '@reach/auto-id';
-import VisuallyHidden from '@reach/visually-hidden';
 
+import { VisuallyHidden } from '../VisuallyHidden';
 import { SVGComponent } from '../shared';
 import { Box, BoxProps } from '../Box';
 import { Label } from './Label';

diff --git a/packages/zephyr/src/Forms/Input.tsx b/packages/zephyr/src/Forms/Input.tsx
@@ -1,12 +1,12 @@
 import { ReactNode, ChangeEvent, MutableRefObject, useMemo } from 'react';
 import { useField } from 'formik';
-import VisuallyHidden from '@reach/visually-hidden';
 import { variant as styledSystemVariant } from 'styled-system';
 import { useTheme } from 'styled-components';
 import { LeftRight } from '../shared';
 import { Box, BoxStylingProps } from '../Box';
 import { Text } from '../Text';
 import { FieldVariantName, TXProp } from '../theme';
+import { VisuallyHidden } from '../VisuallyHidden';
 import { Label } from './Label';
 import { Error } from './Error';
 

diff --git a/packages/zephyr/src/Forms/Label.tsx b/packages/zephyr/src/Forms/Label.tsx
@@ -1,4 +1,4 @@
-import VisuallyHidden from '@reach/visually-hidden';
+import { VisuallyHidden } from '../VisuallyHidden';
 import { BoxProps } from '../Box';
 import { Text } from '../Text';
 import { TextVariantName } from '../theme/variants/text';

diff --git a/packages/zephyr/src/Forms/Toggle/Toggle.tsx b/packages/zephyr/src/Forms/Toggle/Toggle.tsx
@@ -1,9 +1,9 @@
 import { useId } from '@reach/auto-id';
-import VisuallyHidden from '@reach/visually-hidden';
 
 import { TXProp } from '../../theme';
 import { Box, BoxProps } from '../../Box';
 import { Label } from '../Label';
+import { VisuallyHidden } from '../../VisuallyHidden';
 
 export interface ToggleProps {
   ['data-testid']?: string;

diff --git a/packages/zephyr/src/IconButton.tsx b/packages/zephyr/src/IconButton.tsx
@@ -1,9 +1,9 @@
 import { forwardRefWithAs } from '@reach/utils';
-import VisuallyHidden from '@reach/visually-hidden';
 import { variant as styledSystemVariant } from 'styled-system';
 import { Ref } from 'react';
 import { useTheme } from 'styled-components';
 import { Tooltip, TooltipProps } from '../src/Tooltip';
+import { VisuallyHidden } from './VisuallyHidden';
 import { Box } from './Box';
 import { Button, ButtonProps, NonSemanticButtonProps } from './Button';
 import { SVGComponent } from './shared';

diff --git a/packages/zephyr/src/Modals/AnnouncementModal.tsx b/packages/zephyr/src/Modals/AnnouncementModal.tsx
@@ -1,9 +1,9 @@
 import { forwardRef, useRef, MutableRefObject } from 'react';
-import VisuallyHidden from '@reach/visually-hidden';
 import { isString } from 'lodash';
 import { Box, BoxProps } from '../Box';
 import { Button, ButtonProps } from '../Button';
 import { Text } from '../Text';
+import { VisuallyHidden } from '../VisuallyHidden';
 import { Modal, ModalProps } from './Modal';
 
 export const ANNOUNCEMENT_MODAL_CTA = 'ANNOUNCEMENT_MODAL_CTA';

diff --git a/packages/zephyr/src/Modals/Modal.tsx b/packages/zephyr/src/Modals/Modal.tsx
@@ -31,7 +31,7 @@ export interface ModalProps
   /**
    * This will be used to go into further detail regarding the modal. Optional, but required if leveraging an
    * alert modal. If you want the description invisible, please render the node within
-   * [@reach/visually-hidden](https://reach.tech/visually-hidden).
+   * [@radix-ui/react-visually-hidden](https://reach.tech/visually-hidden).
    *
    * - Example: `<VisuallyHidden>This action is permanent, are you sure?</VisuallyHidden>`
    *

diff --git a/packages/zephyr/src/RadixMenu/components/RadixMenuItem.tsx b/packages/zephyr/src/RadixMenu/components/RadixMenuItem.tsx
@@ -1,6 +1,6 @@
 import { ReactNode, memo, useCallback, useMemo } from 'react';
 import { rgba } from 'polished';
-import { Item, Root, Content, TriggerItem } from '@radix-ui/react-dropdown-menu';
+import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
 import { ChevronRight } from '@air/icons';
 import { useTheme } from 'styled-components';
 
@@ -259,13 +259,13 @@ export const RadixMenuItem = memo(
     if (!!subOptions && subOptions.length) {
       return (
         <Box tx={menuItemStyle}>
-          <Root>
+          <RadixDropdownMenu.Sub>
             {hasDividerTop && <RadixMenuItemDivider isTop />}
-            <TriggerItem className="radix-menu-item" disabled={disabled}>
+            <RadixDropdownMenu.SubTrigger className="radix-menu-item" disabled={disabled}>
               {menuItemContent}
-            </TriggerItem>
+            </RadixDropdownMenu.SubTrigger>
             {hasDividerBottom && <RadixMenuItemDivider />}
-            <Content>
+            <RadixDropdownMenu.SubContent>
               <Box
                 tx={{
                   display: 'flex',
@@ -295,24 +295,24 @@ export const RadixMenuItem = memo(
                   />
                 ))}
               </Box>
-            </Content>
-          </Root>
+            </RadixDropdownMenu.SubContent>
+          </RadixDropdownMenu.Sub>
         </Box>
       );
     }
 
     return (
       <Box tx={menuItemStyle} {...renderProps}>
         {hasDividerTop && <RadixMenuItemDivider variant={variant} isTop />}
-        <Item
+        <RadixDropdownMenu.Item
           data-testid={testId ?? id}
           id={id}
           className="radix-menu-item"
           disabled={disabled}
           onSelect={onClick ?? onSelect}
         >
           {menuItemContent}
-        </Item>
+        </RadixDropdownMenu.Item>
         {hasDividerBottom && <RadixMenuItemDivider variant={variant} />}
       </Box>
     );

diff --git a/packages/zephyr/src/Tooltip.tsx b/packages/zephyr/src/Tooltip.tsx
@@ -137,7 +137,6 @@ export const Tooltip = ({
   avoidCollisions,
   baseZIndex = 10,
   children,
-  collisionTolerance,
   label,
   manualControlProps,
   side,
@@ -155,59 +154,62 @@ export const Tooltip = ({
        *  */}
       <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
 
-      <RadixTooltip.Content
-        side={side}
-        sideOffset={sideOffset}
-        align={align}
-        alignOffset={alignOffset}
-        collisionTolerance={collisionTolerance}
-        avoidCollisions={avoidCollisions}
-      >
-        <Box
-          aria-label={ariaLabel}
-          data-testid={testID}
-          tx={{
-            bg: 'black',
-            color: 'white',
-            px: 10,
-            py: 5,
-            minHeight: 36,
-            borderColor: 'transparent',
-            borderWidth: 2,
-            borderStyle: 'solid',
-            borderRadius: 4,
-            zIndex: baseZIndex + 1,
-            ...(containerStyles as any),
-          }}
+      <RadixTooltip.Portal>
+        <RadixTooltip.Content
+          side={side}
+          sideOffset={sideOffset}
+          align={align}
+          alignOffset={alignOffset}
+          avoidCollisions={avoidCollisions}
         >
-          <Text
-            variant="text-ui-14"
+          <Box
+            aria-label={ariaLabel}
+            data-testid={testID}
             tx={{
-              color: 'currentColor',
-              fontWeight: 'medium',
-              ...(textContentStyles as any),
+              bg: 'black',
+              color: 'white',
+              px: 10,
+              py: 5,
+              minHeight: 36,
+              borderColor: 'transparent',
+              borderWidth: 2,
+              borderStyle: 'solid',
+              borderRadius: 4,
+              zIndex: baseZIndex + 1,
+              ...(containerStyles as any),
             }}
           >
-            {label}
-          </Text>
-
-          {withArrow && (
-            <RadixTooltip.Arrow width={10} height={7} offset={arrowOffset}>
-              <Box
-                tx={{
-                  zIndex: baseZIndex + 1,
-                  strokeLinejoin: 'round',
-                  strokeLinecap: 'round',
-                  stroke: 'black',
-                  strokeWidth: 1,
-                  ...triangleOffsetMapping['base'][side],
-                  ...(arrowStyles as any),
-                }}
-              />
-            </RadixTooltip.Arrow>
-          )}
-        </Box>
-      </RadixTooltip.Content>
+            <Text
+              variant="text-ui-14"
+              tx={{
+                color: 'currentColor',
+                fontWeight: 'medium',
+                ...(textContentStyles as any),
+              }}
+            >
+              {label}
+            </Text>
+
+            {withArrow && (
+              <RadixTooltip.Arrow width={10} height={7} offset={arrowOffset}>
+                <Box
+                  tx={{
+                    zIndex: baseZIndex + 1,
+                    strokeLinejoin: 'round',
+                    strokeLinecap: 'round',
+                    stroke: 'black',
+                    strokeWidth: 1,
+                    ...triangleOffsetMapping['base'][side],
+                    ...(arrowStyles as any),
+                  }}
+                />
+              </RadixTooltip.Arrow>
+            )}
+          </Box>
+        </RadixTooltip.Content>
+      </RadixTooltip.Portal>
     </RadixTooltip.Root>
   );
 };
+
+export const TooltipProvider = RadixTooltip.Provider;
diff --git a/packages/zephyr/src/VisuallyHidden.tsx b/packages/zephyr/src/VisuallyHidden.tsx
@@ -0,0 +1,3 @@
+import * as RadixVisuallyHidden from '@radix-ui/react-visually-hidden';
+
+export const VisuallyHidden = RadixVisuallyHidden.Root;
diff --git a/packages/zephyr/stories/forms/Input.stories.tsx b/packages/zephyr/stories/forms/Input.stories.tsx
@@ -4,13 +4,13 @@ import { Formik, Form } from 'formik';
 import { number, object, string } from 'yup';
 import { StoryFnReactReturnType } from '@storybook/react/dist/ts3.9/client/preview/types';
 import { Caution, Search, EyeClosed, Eye } from '@air/icons';
-import VisuallyHidden from '@reach/visually-hidden';
 import { capitalize, noop } from 'lodash';
 import { Box } from '../../src/Box';
 import { Button } from '../../src/Button';
 import { Text } from '../../src/Text';
 import { Input, InputProps } from '../../src/Forms/Input';
 import { FieldVariantName, field } from '../../src/theme/variants/field';
+import { VisuallyHidden } from '../../src/VisuallyHidden';
 
 const variants = Object.keys(field) as FieldVariantName[];
 

diff --git a/packages/zephyr/stories/menus/abstractions/RadixDropdownMenu.stories.tsx b/packages/zephyr/stories/menus/abstractions/RadixDropdownMenu.stories.tsx
@@ -369,7 +369,6 @@ withSubOptions.args = {
           leftAdornment: <Box as={AddMemberIcon} tx={{ display: 'block', width: 16 }} />,
           label: 'Add members',
           description: 'Invite members or guests to collaborate on this board',
-          hasDividerBottom: true,
           onSelect: () => {},
         },
       ],

diff --git a/packages/zephyr/tsconfig.build.json → packages/zephyr/tsconfig.json b/packages/zephyr/tsconfig.build.json → packages/zephyr/tsconfig.json
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import * as RadixVisuallyHidden from '@radix-ui/react-visually-hidden';

		export const VisuallyHidden = RadixVisuallyHidden.Root;