update react-transition-state, combine rainbow sprinkles conditions

ensdomains · Nov 2, 2023 · 6893557 · 6893557
1 parent 1b6227d
commit 6893557
Show file tree

Hide file tree

Showing 21 changed files with 166 additions and 124 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-pnpm lint
+# pnpm lint // TODO: Make pnpm work with husky 
diff --git a/components/package.json b/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ensdomains/thorin",
-  "version": "0.6.44",
+  "version": "0.6.45",
   "description": "A web3 native design system",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -13,7 +13,8 @@
     "./styles.css": {
       "import": "./dist/style.css",
       "require": "./dist/style.css"
-    }
+    },
+    "./dist/": "./dist/"
   },
   "sideEffects": [
     "src/atoms/**/*",
@@ -39,6 +40,7 @@
     "clsx": "^1.1.1",
     "focus-visible": "^5.2.0",
     "lodash": "^4.17.21",
+    "react-transition-state": "^2.1.1",
     "ts-pattern": "^4.3.0"
   },
   "devDependencies": {
@@ -89,7 +91,6 @@
   },
   "peerDependencies": {
     "react": "^18",
-    "react-dom": "^18",
-    "react-transition-state": "^1.1.4"
+    "react-dom": "^18"
   }
 }
diff --git a/components/src/components/atoms/BackdropSurface/BackdropSurface.tsx b/components/src/components/atoms/BackdropSurface/BackdropSurface.tsx
@@ -5,13 +5,15 @@ import type { TransitionState } from 'react-transition-state'
 import { backdropSurface } from './styles.css'
 import { Box, BoxProps } from '../Box'
 
-type Props = { $state: TransitionState; $empty: boolean } & BoxProps
+type Props = { $state: TransitionState['status']; $empty: boolean } & BoxProps
 
 export const BackdropSurface = React.forwardRef<HTMLElement, Props>(
   ({ $empty, $state, ...props }, ref) => (
     <Box
       {...props}
-      className={backdropSurface({ entered: !$empty && $state === 'entered' })}
+      className={backdropSurface({
+        entered: !$empty && $state === 'entered',
+      })}
       height="100vh"
       left="$0"
       overflow="hidden"

diff --git a/components/src/components/atoms/Card/Card.tsx b/components/src/components/atoms/Card/Card.tsx
@@ -27,7 +27,7 @@ const Divider = (props: BoxProps) => (
   <Box
     backgroundColor="$border"
     height="$px"
-    mx={{ xs: '$-4.0', sm: '$-6.0' }}
+    mx={{ xs: '$-4', sm: '$-6' }}
     width={{ xs: '$dialogMobileWidth', sm: '$dialogDesktopWidth' }}
     {...props}
   />

diff --git a/components/src/components/atoms/DynamicPopover/DynamicPopover.tsx b/components/src/components/atoms/DynamicPopover/DynamicPopover.tsx
@@ -12,9 +12,9 @@ export type DynamicPopoverSide = 'top' | 'right' | 'bottom' | 'left'
 export type DynamicPopoverAlignment = 'start' | 'center' | 'end'
 
 export type PopoverProps = React.PropsWithChildren<{
-  placement: DynamicPopoverSide
-  mobilePlacement: DynamicPopoverSide
-  state?: TransitionState
+  placement?: DynamicPopoverSide
+  mobilePlacement?: DynamicPopoverSide
+  state?: TransitionState['status']
 }>
 
 export type DynamicPopoverAnimationFunc = (
@@ -108,7 +108,7 @@ const defaultAnimationFunc: DynamicPopoverAnimationFunc = (
   else if (side === 'right')
     translate = `translate(${horizontalClearance}px, 0)`
   else if (side === 'bottom') translate = `translate(0, ${verticalClearance}px)`
-  else translate = `translate(-${horizontalClearance}px, 0);`
+  else translate = `translate(-${horizontalClearance}px, 0)`
 
   let mobileTranslate = ''
   if (mobileSide === 'top')
@@ -117,7 +117,7 @@ const defaultAnimationFunc: DynamicPopoverAnimationFunc = (
     mobileTranslate = `translate(${horizontalClearance}px, 0)`
   else if (mobileSide === 'bottom')
     mobileTranslate = `translate(0, ${verticalClearance}px)`
-  else mobileTranslate = `translate(-${horizontalClearance}px, 0);`
+  else mobileTranslate = `translate(-${horizontalClearance}px, 0)`
 
   return { translate, mobileTranslate }
 }
@@ -176,23 +176,23 @@ const PopoverBox = React.forwardRef<HTMLElement, BoxProps & PopoverBoxProps>(
       WebkitTransform="$base"
       boxSizing="border-box"
       display="block"
-      left={getValueForTransitionState($state, 'leftFunc')($x)}
-      opacity={getValueForTransitionState($state, 'opacity')}
+      left={getValueForTransitionState($state.status, 'leftFunc')($x)}
+      opacity={getValueForTransitionState($state.status, 'opacity')}
       overflow={$hideOverflow ? 'hidden' : 'visible'}
-      pointerEvents={getValueForTransitionState($state, 'pointerEvents')}
+      pointerEvents={getValueForTransitionState($state.status, 'pointerEvents')}
       position="absolute"
       ref={ref}
-      top={getValueForTransitionState($state, 'topFunc')($y)}
+      top={getValueForTransitionState($state.status, 'topFunc')($y)}
       transform={{
         base: `translate3d(0, 0, 0) ${$mobileTranslate}`,
         sm: `translate3d(0, 0, 0) ${$translate}`,
       }}
       transitionDuration={`${$transitionDuration}ms`}
       transitionProperty={getValueForTransitionState(
-        $state,
+        $state.status,
         'transitionProperty',
       )}
-      visibility={getValueForTransitionState($state, 'visibility')}
+      visibility={getValueForTransitionState($state.status, 'visibility')}
       width={{ xs: makeWidth($mobileWidth), sm: makeWidth($width) }}
       zIndex="999999"
     />
@@ -462,9 +462,9 @@ export const DynamicPopover = ({
         ref={refFunc}
       >
         {React.cloneElement(popover, {
-          // placement: _placement,
-          // mobilePlacement: _mobilePlacement,
-          // state,
+          placement: _placement,
+          mobilePlacement: _mobilePlacement,
+          state: state.status,
         })}
       </PopoverBox>
     </Portal>

diff --git a/components/src/components/atoms/DynamicPopover/utils/getValueForTransitionState.ts b/components/src/components/atoms/DynamicPopover/utils/getValueForTransitionState.ts
@@ -1,7 +1,7 @@
 import { TransitionState } from 'react-transition-state'
 
 const transitionStateValues: {
-  [key in TransitionState]: {
+  [key in TransitionState['status']]: {
     display: string
     visibility: string
     opacity: number
@@ -79,6 +79,6 @@ const transitionStateValues: {
 type Property = keyof typeof transitionStateValues['unmounted']
 
 export const getValueForTransitionState = (
-  state: TransitionState,
+  state: TransitionState['status'],
   property: Property,
 ): any => transitionStateValues[state][property]
diff --git a/components/src/components/atoms/ScrollBox/ScrollBox.test.tsx b/components/src/components/atoms/ScrollBox/ScrollBox.test.tsx
@@ -45,9 +45,15 @@ const mockIntersectionObserver = makeMockIntersectionObserver(
 )
 
 const expectLine = (e: 'top' | 'bottom', visible: boolean) => {
+  const element = screen.getByTestId(`scrollbox-${e}-divider`)
+  const computedStyle = getComputedStyle(element)
+  const property = Object.values(computedStyle).find(
+    (p: any) => typeof p === 'string' && p.startsWith('--opacity-base'),
+  )
+  if (!property) throw new Error('could not find opacity property')
   const test = getPropertyValue(
     screen.getByTestId(`scrollbox-${e}-divider`),
-    '--opacity-base__btclh0x6',
+    property,
   )
   expect(test).toEqual(visible ? '1' : '0')
 }

diff --git a/components/src/components/molecules/Backdrop/Backdrop.tsx b/components/src/components/molecules/Backdrop/Backdrop.tsx
@@ -67,6 +67,7 @@ export const Backdrop = ({
         }
         modifyBackdrops(1)
         return () => {
+          toggle(false)
           const top = parseFloat(style.top || '0') * -1
           if (currBackdrops() === 1) {
             setStyles('', '', '')
@@ -78,15 +79,18 @@ export const Backdrop = ({
         }
       }
     }
+    return () => {
+      toggle(false)
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, noBackground])
 
-  return state !== 'unmounted' ? (
+  return state.status !== 'unmounted' ? (
     <Portal className={className} renderCallback={renderCallback}>
       {onDismiss && (
         <Background
           $empty={noBackground}
-          $state={state}
+          $state={state.status}
           ref={boxRef}
           onClick={dismissClick}
         />

diff --git a/components/src/components/molecules/Dropdown/Dropdown.tsx b/components/src/components/molecules/Dropdown/Dropdown.tsx
@@ -12,6 +12,7 @@ import { commonVars, modeVars } from '@/src/css/theme.css'
 import { DownChevronSVG, DynamicPopover, ScrollBox } from '../..'
 import { ActionSheet } from './ActionSheet'
 import { Box, BoxProps } from '../../atoms/Box/Box'
+import { PopoverProps } from '../../atoms/DynamicPopover'
 
 type Align = 'left' | 'right'
 type LabelAlign = 'flex-start' | 'flex-end' | 'center'
@@ -89,14 +90,15 @@ type DropdownMenuProps = {
   shortThrow: boolean
   labelAlign?: LabelAlign
   direction: Direction
-  state?: TransitionState
+  state?: TransitionState['status']
   height?: string | number
-} & NativeDivProps
+} & NativeDivProps &
+  PopoverProps
 
 type DropdownMenuContainerProps = {
   $shortThrow: boolean
   $direction: Direction
-  $state?: TransitionState
+  $state?: TransitionState['status']
 }
 
 const DropdownMenuBox = React.forwardRef<
@@ -228,7 +230,17 @@ const DropdownChild: React.FC<{
 
 const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
   (
-    { items, setIsOpen, shortThrow, direction, state, height, ...props },
+    {
+      items,
+      setIsOpen,
+      shortThrow,
+      direction,
+      state,
+      height,
+      placement: _placement,
+      mobilePlacement: _mobilePlacement,
+      ...props
+    },
     ref,
   ) => {
     const Content = items.map((item: DropdownItem) => {
@@ -516,13 +528,13 @@ export const Dropdown = ({
               placement={direction === 'down' ? 'bottom' : 'top'}
               popover={
                 <DropdownMenu
+                  {...props}
                   direction={direction}
                   items={items}
-                  // labelAlign={menuLabelAlign}
+                  ref={dropdownRef}
                   setIsOpen={setIsOpen}
                   shortThrow={shortThrow}
-                  {...props}
-                  ref={dropdownRef}
+                  // labelAlign={menuLabelAlign}
                 />
               }
               width={width}

diff --git a/components/src/components/molecules/Modal/Modal.tsx b/components/src/components/molecules/Modal/Modal.tsx
@@ -7,7 +7,7 @@ import { Box, BoxProps } from '../../atoms/Box/Box'
 import { getValueForMode } from './utils/getValueForMode'
 
 type ContainerProps = {
-  $state: TransitionState
+  $state: TransitionState['status']
   $alignTop?: boolean
   $mobileOnly: boolean
 }
@@ -102,7 +102,7 @@ export const Modal = ({
       <Container
         $alignTop={alignTop}
         $mobileOnly={mobileOnly}
-        $state={state}
+        $state={state.status}
         {...props}
       >
         {children}

diff --git a/components/src/components/molecules/Select/Select.tsx b/components/src/components/molecules/Select/Select.tsx
@@ -226,7 +226,7 @@ const ToggleMenuButton = ({
 }
 
 type SelectOptionContainerProps = {
-  $state?: TransitionState | 'default'
+  $state?: TransitionState['status'] | 'default'
   $direction?: Direction
   $rows?: number
   $size?: Size
@@ -684,8 +684,8 @@ export const Select = React.forwardRef(
     }, [isOpen])
 
     useEffect(() => {
-      if (!menuOpen && state === 'unmounted') handleReset()
-    }, [menuOpen, state])
+      if (!menuOpen && state.status === 'unmounted') handleReset()
+    }, [menuOpen, state.status])
 
     const defaultPadding = size === 'small' ? '3' : '4'
     const innerPadding = getPadding('inner', defaultPadding, paddingProp)
@@ -905,7 +905,7 @@ export const Select = React.forwardRef(
               $direction={direction}
               $rows={rows}
               $size={size}
-              $state={state}
+              $state={state.status}
               id={`listbox-${id}`}
               role="listbox"
               tabIndex={-1}

diff --git a/components/src/components/molecules/Select/utils/getValueForTransitionState.ts b/components/src/components/molecules/Select/utils/getValueForTransitionState.ts
@@ -15,7 +15,7 @@ type Properties = {
 type Property = keyof Properties
 
 const transitionMap: {
-  [key in TransitionState]?: { [key in Direction]: Properties }
+  [key in TransitionState['status']]?: { [key in Direction]: Properties }
 } & { default: { [key in Direction]: Properties } } = {
   entered: {
     up: {
@@ -52,7 +52,7 @@ const transitionMap: {
 }
 
 export const getValueForTransitionState = <T extends Property>(
-  state: TransitionState | 'default',
+  state: TransitionState['status'] | 'default',
   property: T,
   direction: Direction,
 ): Properties[T] => {

diff --git a/components/src/components/molecules/Tooltip/Tooltip.tsx b/components/src/components/molecules/Tooltip/Tooltip.tsx
@@ -109,8 +109,8 @@ const TooltipPopoverElement = ({
 type TooltipPopoverProps = PopoverProps & { background: Colors }
 
 const TooltipPopover = ({
-  placement,
-  mobilePlacement,
+  placement = 'top',
+  mobilePlacement = 'top',
   background,
   children,
 }: TooltipPopoverProps) => {

diff --git a/components/src/components/organisms/Toast/Toast.tsx b/components/src/components/organisms/Toast/Toast.tsx
@@ -65,7 +65,7 @@ const Container = React.forwardRef<HTMLElement, BoxProps & ContainerProps>(
       maxWidth={match($mobile)
         .with(true, () => 'unset')
         .otherwise(() => '$112')}
-      opacity={$state === 'entered' ? 1 : 0}
+      opacity={$state.status === 'entered' ? 1 : 0}
       padding="$4.5"
       position="fixed"
       ref={ref}
@@ -76,7 +76,7 @@ const Container = React.forwardRef<HTMLElement, BoxProps & ContainerProps>(
         .with(true, () => 'calc(100vh / 100 * 2.5)')
         .otherwise(() => ($top ? `$${$top}` : 'unset'))}
       touchAction={$popped ? 'none' : 'unset'}
-      transform={$state === 'entered' ? translateY(0) : translateY(-64)}
+      transform={$state.status === 'entered' ? translateY(0) : translateY(-64)}
       transitionDuration="$300"
       transitionProperty="all"
       transitionTimingFunction="$popIn"