From 29dabf5c39d3d07922ab4982514d803a42f94e35 Mon Sep 17 00:00:00 2001
From: v1rtl <hi@v1rtl.site>
Date: Fri, 29 Nov 2024 17:39:20 +0200
Subject: [PATCH] random type/style fixes, introduce AsProp type

---
 components/src/components/atoms/Box/Box.tsx   |  9 ++++--
 .../src/components/atoms/Button/Button.tsx    |  8 +++---
 .../molecules/Dropdown/Dropdown.tsx           | 28 +++++++++----------
 .../molecules/Dropdown/styles.css.ts          | 15 +++++++++-
 .../src/components/molecules/Input/Input.tsx  | 14 ++++------
 .../components/molecules/Input/styles.css.ts  | 12 +++++---
 .../components/molecules/Profile/Profile.tsx  | 12 ++------
 .../molecules/Profile/styles.css.ts           | 13 ++++++++-
 .../RadioButtonGroup/RadioButtonGroup.tsx     |  5 ++--
 .../molecules/Textarea/Textarea.tsx           |  1 +
 .../src/components/organisms/Toast/Toast.tsx  |  8 +++---
 components/src/tokens/border.ts               |  1 +
 .../components/PaletteRow.tsx                 |  6 ++--
 docs/src/components/CodePreview.tsx           |  8 ++----
 14 files changed, 82 insertions(+), 58 deletions(-)

diff --git a/components/src/components/atoms/Box/Box.tsx b/components/src/components/atoms/Box/Box.tsx
index 8cc2fba2..0804d6b8 100644
--- a/components/src/components/atoms/Box/Box.tsx
+++ b/components/src/components/atoms/Box/Box.tsx
@@ -1,5 +1,6 @@
 import type {
-  AllHTMLAttributes, FC } from 'react'
+  AllHTMLAttributes, ComponentClass,
+  FunctionComponent } from 'react'
 import React, {
   forwardRef,
 } from 'react'
@@ -15,10 +16,12 @@ type HTMLProperties = Omit<
   'as' | 'width' | 'height' | 'color' | 'translate' | 'transform'
 >
 
+export type AsProp = string | FunctionComponent | ComponentClass
+
 export type BoxProps = Sprinkles &
-  HTMLProperties & { as?: string | FC }
+  HTMLProperties & { as?: AsProp }
 
-export const Box = forwardRef<HTMLElement, BoxProps >(
+export const Box = forwardRef<HTMLElement, BoxProps>(
   (
     { as = 'div', className, children, ...props },
     ref,
diff --git a/components/src/components/atoms/Button/Button.tsx b/components/src/components/atoms/Button/Button.tsx
index 25f106a2..8df7f751 100644
--- a/components/src/components/atoms/Button/Button.tsx
+++ b/components/src/components/atoms/Button/Button.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 
 import { P, match } from 'ts-pattern'
 
-import { scale, translateY } from '@/src/css/utils/common'
+import { scale } from '@/src/css/utils/common'
 
 import { removeNullishProps } from '@/src/utils/removeNullishProps'
 
@@ -12,7 +12,7 @@ import { getValueForSize } from './utils/getValueForSize'
 
 import type { ReactNodeNoStrings } from '../../../types'
 import { Spinner } from '../Spinner/Spinner'
-import type { BoxProps } from '../Box/Box'
+import type { AsProp, BoxProps } from '../Box/Box'
 import { Box } from '../Box/Box'
 import * as styles from './Button.css'
 import clsx from 'clsx'
@@ -31,7 +31,7 @@ type BaseProps = {
   /** If true, prevents user interaction with button. */
   disabled?: NativeButtonProps['disabled']
   /** Insert a ReactNode before the children */
-  prefix?: ReactNodeNoStrings
+  prefix?: AsProp
   /** Shows loading spinner inside button */
   loading?: boolean
   /** Constrains button to specific shape */
@@ -39,7 +39,7 @@ type BaseProps = {
   /** Sets dimensions and layout  */
   size?: Size
   /** Adds ReactNode after children */
-  suffix?: ReactNodeNoStrings
+  suffix?: AsProp
   /** The zIndex attribute for button element. */
   zIndex?: string
   /** If true, sets the style to indicate "on" state. Useful for toggles switches. */
diff --git a/components/src/components/molecules/Dropdown/Dropdown.tsx b/components/src/components/molecules/Dropdown/Dropdown.tsx
index 0931f53a..3f65dc35 100644
--- a/components/src/components/molecules/Dropdown/Dropdown.tsx
+++ b/components/src/components/molecules/Dropdown/Dropdown.tsx
@@ -10,17 +10,18 @@ import { breakpoints } from '@/src/tokens'
 
 import { modeVars } from '@/src/css/theme.css'
 
-import type { Color } from '@/src/interfaces/withColor'
+import type { Color } from '@/src/tokens/color'
 
 import { ActionSheet } from './ActionSheet'
-import type { BoxProps } from '../../atoms/Box/Box'
+import type { AsProp, BoxProps } from '../../atoms/Box/Box'
 import { Box } from '../../atoms/Box/Box'
 import type { PopoverProps } from '../../atoms/DynamicPopover/DynamicPopover'
 import { DynamicPopover } from '../../atoms/DynamicPopover/DynamicPopover'
 import { debounce } from '@/src/utils/debounce'
 import { DownChevronSVG } from '@/src/icons'
 import { ScrollBox } from '../../atoms/ScrollBox/ScrollBox'
-import { menu } from './styles.css'
+import * as styles from './styles.css'
+import { clsx } from 'clsx'
 
 type Align = 'left' | 'right'
 type LabelAlign = 'flex-start' | 'flex-end' | 'center'
@@ -30,7 +31,7 @@ export type DropdownItemObject = {
   label: string
   onClick?: (value?: string) => void
   wrapper?: (children: React.ReactNode, key: React.Key) => JSX.Element
-  icon?: React.ReactNode
+  icon?: AsProp
   value?: string
   color?: Color
   disabled?: boolean
@@ -89,12 +90,11 @@ type PropsWithoutIsOpen = {
   setIsOpen?: never
 }
 
-type NativeDivProps = React.HTMLAttributes<HTMLDivElement>
+type NativeDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'height' | 'width' | 'color'>
 
 type DropdownMenuProps = {
   items: DropdownItem[]
   setIsOpen: (isOpen: boolean) => void
-  width?: number | string
   shortThrow: boolean
   labelAlign?: LabelAlign
   direction: Direction
@@ -135,7 +135,7 @@ const DropdownMenuBox = React.forwardRef<
   return (
     <Box
       {...props}
-      className={menu({ transform: transformVariant })}
+      className={styles.menu({ transform: transformVariant })}
       backgroundColor="background"
       borderColor="border"
       borderRadius="2xLarge"
@@ -175,23 +175,23 @@ const DropdownMenuBox = React.forwardRef<
 
 interface MenuButtonProps {
   $color?: Colors
-  $icon?: React.ReactElement
+  $icon?: AsProp
   $showIndicator?: boolean | Colors
 }
 
 const MenuButton = React.forwardRef<HTMLElement, BoxProps & MenuButtonProps>(
-  ({ $color, $icon, $showIndicator, disabled, children, ...props }, ref) => (
+  ({ $color, $icon, $showIndicator, disabled, children, className, ...props }, ref) => (
     <Box
       {...props}
       alignItems="center"
       backgroundColor={{ base: 'backgroundPrimary', hover: 'greySurface' }}
       borderRadius="large"
       color={
-        disabled ? 'textTertiary' : $color ? $color : 'textPrimary'
+        disabled ? 'textDisabled' : $color ? $color : 'textPrimary'
       }
       cursor={disabled ? 'not-allowed' : 'pointer'}
       display="flex"
-      filter={{ base: 'brightness(1)', active: 'brightness(0.9)' }}
+      className={clsx(styles.menuButton, className)}
       fontWeight="normal"
       gap="2"
       height="12"
@@ -200,9 +200,7 @@ const MenuButton = React.forwardRef<HTMLElement, BoxProps & MenuButtonProps>(
       paddingRight={$showIndicator ? '6' : '3'}
       position="relative"
       ref={ref}
-      transform={{ base: 'translateY(0px)', active: 'translateY(0px)' }}
       transitionDuration={150}
-      // transitionProperty="color, transform, filter"
       transitionTimingFunction="ease-in-out"
       width="full"
     >
@@ -230,7 +228,7 @@ const MenuButton = React.forwardRef<HTMLElement, BoxProps & MenuButtonProps>(
           position="absolute"
           right="3"
           top="1/2"
-          transform="translateY(-50%)"
+          className={styles.menuButtonIndicator}
           wh="2"
         />
       )}
@@ -293,7 +291,7 @@ const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
         href,
       } = item as DropdownItemObject
 
-      const props: React.ComponentProps<any> = {
+      const props = {
         $color: color,
         $showIndicator: showIndicator,
         $icon: icon,
diff --git a/components/src/components/molecules/Dropdown/styles.css.ts b/components/src/components/molecules/Dropdown/styles.css.ts
index 38865441..40876485 100644
--- a/components/src/components/molecules/Dropdown/styles.css.ts
+++ b/components/src/components/molecules/Dropdown/styles.css.ts
@@ -1,7 +1,8 @@
-import { style, styleVariants } from '@vanilla-extract/css'
+import { style } from '@vanilla-extract/css'
 
 import { commonVars } from '@/src/css/theme.css'
 import { recipe } from '@vanilla-extract/recipes'
+import { brightness } from '@/src/css/utils/common'
 
 export const menu = recipe({
   base: {
@@ -28,6 +29,14 @@ export const menu = recipe({
   },
 })
 
+export const menuButton = style({
+  'filter': brightness(1),
+  'transitionProperty': 'color, transform, filter',
+  ':active': {
+    filter: brightness(0.9),
+  },
+})
+
 export const actionSheeItem = style({
   selectors: {
     '&:first-child': {
@@ -40,3 +49,7 @@ export const actionSheeItem = style({
     },
   },
 })
+
+export const menuButtonIndicator = style({
+  transform: 'translateY(-50%)',
+})
diff --git a/components/src/components/molecules/Input/Input.tsx b/components/src/components/molecules/Input/Input.tsx
index 24d3a9fa..fbedd9da 100644
--- a/components/src/components/molecules/Input/Input.tsx
+++ b/components/src/components/molecules/Input/Input.tsx
@@ -5,8 +5,6 @@ import { statusDot } from '@/src/css/recipes/statusDot.css'
 import { statusBorder } from '@/src/css/recipes/statusBorder.css'
 import { setNativeValue } from '@/src/utils/setNativeValue'
 
-import { scale } from '@/src/css/utils/common'
-
 import * as styles from './styles.css'
 
 import type { FieldBaseProps } from '../../atoms/Field/Field'
@@ -98,6 +96,8 @@ type BaseProps = Omit<FieldBaseProps, 'inline'> & {
   | 'onInput'
   | 'onKeyDown'
   | 'onWheel'
+  | 'height'
+  | 'color'
 >
 
 type WithTypeEmail = {
@@ -210,15 +210,13 @@ const ActionButton = ({
       color={{ base: 'greyPrimary', hover: 'greyBright' }}
       cursor="pointer"
       display="flex"
-      // flexBasis={getValueForSize($size, 'iconPadding')}
       flexGrow={0}
       flexShrink={0}
       justifyContent="flex-start"
-      // marginLeft={`calc(-1 * ${getValueForSize($size, 'iconPadding')})`}
       opacity="1"
-      // paddingRight={getValueForSize($size, 'outerPadding')}
-      transform={scale(1)}
-      transition="all 0.1s ease-in-out"
+      transitionDuration={100}
+      transitionProperty="all"
+      transitionTimingFunction="ease-in-out"
     >
       <Box
         as={Icon}
@@ -242,7 +240,7 @@ type InputComponentProps = {
   $iconWidth?: Space
 }
 
-const InputComponent = React.forwardRef<HTMLElement, BoxProps & InputComponentProps>(
+const InputComponent = React.forwardRef<HTMLInputElement, BoxProps & InputComponentProps>(
   (
     {
       $size,
diff --git a/components/src/components/molecules/Input/styles.css.ts b/components/src/components/molecules/Input/styles.css.ts
index c704f472..c0680b83 100644
--- a/components/src/components/molecules/Input/styles.css.ts
+++ b/components/src/components/molecules/Input/styles.css.ts
@@ -117,23 +117,27 @@ globalStyle(`${icon} svg`, {
   color: modeVars.color.greyPrimary,
 })
 
+const actionButtonBase = style({
+  transform: scale(1),
+})
+
 export const actionButton = styleVariants({
-  small: [sprinkles({
+  small: [actionButtonBase, sprinkles({
     flexBasis: '8.5',
     paddingRight: '3.5',
   }), { marginLeft: `calc(-1 * ${commonVars.space['8.5']})` }],
-  medium: [sprinkles({
+  medium: [actionButtonBase, sprinkles({
     flexBasis: '10',
     paddingRight: '4',
   }), { marginLeft: `calc(-1 * ${commonVars.space['10']})` }],
-  large: [
+  large: [actionButtonBase,
     sprinkles({
       flexBasis: '11',
       paddingRight: '4',
     }),
     { marginLeft: `calc(-1 * ${commonVars.space['11']})` },
   ],
-  extraLarge: [sprinkles({
+  extraLarge: [actionButtonBase, sprinkles({
     flexBasis: '14',
     paddingRight: '6',
   }), { marginLeft: `calc(-1 * ${commonVars.space['14']})` }],
diff --git a/components/src/components/molecules/Profile/Profile.tsx b/components/src/components/molecules/Profile/Profile.tsx
index 521e6566..84c06f31 100644
--- a/components/src/components/molecules/Profile/Profile.tsx
+++ b/components/src/components/molecules/Profile/Profile.tsx
@@ -17,6 +17,7 @@ import { Box } from '../../atoms/Box/Box'
 import { Typography } from '../../atoms/Typography/Typography'
 import * as styles from './styles.css'
 import clsx from 'clsx'
+import { assignInlineVars } from '@vanilla-extract/dynamic'
 export type Size = 'small' | 'medium' | 'large'
 
 type NativeDivProps = React.HTMLAttributes<HTMLDivElement>
@@ -51,31 +52,24 @@ const calculateWidth = (size: Size) => {
 }
 
 const Container = React.forwardRef<HTMLElement, BoxProps & ContainerProps>(
-  ({ $size, $hasDropdown, $open, className, ...props }, ref) => (
+  ({ $size, $hasDropdown, $open, className, style, ...props }, ref) => (
     <Box
       alignItems="center"
       backgroundColor={$open ? 'border' : 'backgroundPrimary'}
       borderRadius="full"
       cursor={$hasDropdown ? 'pointer' : 'unset'}
       display="flex"
-      filter={{
-        base: brightness(1),
-        hover: brightness($hasDropdown ? 1.05 : 1),
-      }}
       flexDirection="row"
       gap="2"
       justifyContent="flex-start"
       position="relative"
       ref={ref}
-      transform={{
-        base: translateY(0),
-        hover: translateY($hasDropdown ? -1 : 0),
-      }}
       transitionDuration={150}
       transitionTimingFunction="inOut"
       zIndex={10}
       {...props}
       className={clsx(styles.variants({ size: $size }), className)}
+      style={{ ...style, ...assignInlineVars({ [styles.hasDropdownBrightness]: brightness($hasDropdown ? 1.05 : 1) }), [styles.hasDropdownTransform]: translateY($hasDropdown ? -1 : 0) }}
     />
   ),
 )
diff --git a/components/src/components/molecules/Profile/styles.css.ts b/components/src/components/molecules/Profile/styles.css.ts
index b3c18891..43143fff 100644
--- a/components/src/components/molecules/Profile/styles.css.ts
+++ b/components/src/components/molecules/Profile/styles.css.ts
@@ -1,9 +1,20 @@
 import { sprinkles } from '@/src/css/sprinkles.css'
+import { brightness, translateY } from '@/src/css/utils/common'
+import { createVar } from '@vanilla-extract/css'
 import { recipe } from '@vanilla-extract/recipes'
 
+export const hasDropdownBrightness = createVar()
+export const hasDropdownTransform = createVar()
+
 export const variants = recipe({
   base: {
-    transitionProperty: 'color, border-color, background-color, transform, filter',
+    'transitionProperty': 'color, border-color, background-color, transform, filter',
+    'filter': brightness(1),
+    'transform': translateY(0),
+    ':hover': {
+      filter: hasDropdownBrightness,
+      transform: hasDropdownTransform,
+    },
   },
   variants: {
     size: {
diff --git a/components/src/components/molecules/RadioButtonGroup/RadioButtonGroup.tsx b/components/src/components/molecules/RadioButtonGroup/RadioButtonGroup.tsx
index fe89d034..c463faa5 100644
--- a/components/src/components/molecules/RadioButtonGroup/RadioButtonGroup.tsx
+++ b/components/src/components/molecules/RadioButtonGroup/RadioButtonGroup.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import type { RadioButton } from '@/src/components/molecules'
+import type { RadioButton, RadioButtonProps } from '@/src/components/molecules'
 
 import { getTestId } from '../../../utils/utils'
 import { createSyntheticEvent } from '../../../utils/createSyntheticEvent'
@@ -102,7 +102,7 @@ export const RadioButtonGroup = React.forwardRef<HTMLDivElement, RadioButtonGrou
         role="radiogroup"
         onFocus={handleFocus}
       >
-        {React.Children.map(children as React.ReactElement<typeof RadioButton>[], (child) => {
+        {React.Children.map(children as unknown as React.ReactElement<RadioButtonProps>[], (child) => {
           if (child.props.checked && !didSetDefault) {
             setDidSetDefault(true)
             if (value !== child.props.value) {
@@ -114,6 +114,7 @@ export const RadioButtonGroup = React.forwardRef<HTMLDivElement, RadioButtonGrou
 
           const isChecked = child.props.value === value
 
+          // eslint-disable-next-line @eslint-react/no-clone-element
           return React.cloneElement(child, {
             ref: isChecked ? checkedRef : undefined,
             checked: isChecked,
diff --git a/components/src/components/molecules/Textarea/Textarea.tsx b/components/src/components/molecules/Textarea/Textarea.tsx
index 61a1ea6d..22e2f08b 100644
--- a/components/src/components/molecules/Textarea/Textarea.tsx
+++ b/components/src/components/molecules/Textarea/Textarea.tsx
@@ -119,6 +119,7 @@ const ActionButton = ({
   ...props
 }: BoxProps & { $size: Size, $icon: React.ReactNode }) => {
   const icon = React.isValidElement($icon) ? $icon : <CrossCircleSVG />
+
   return (
     <Box
       {...props}
diff --git a/components/src/components/organisms/Toast/Toast.tsx b/components/src/components/organisms/Toast/Toast.tsx
index da43b9c5..ed2eb309 100644
--- a/components/src/components/organisms/Toast/Toast.tsx
+++ b/components/src/components/organisms/Toast/Toast.tsx
@@ -185,10 +185,10 @@ export const TouchToast = ({
   setPopped,
   ...props
 }: ToastProps &
-InternalProps & {
-  popped: boolean
-  setPopped: (popped: boolean) => void
-}) => {
+  InternalProps & {
+    popped: boolean
+    setPopped: (popped: boolean) => void
+  }) => {
   const ref = React.useRef<HTMLDivElement>(null)
   const [calcTop, setCalcTop] = React.useState(0.025 * window.innerHeight)
   const [touches, setTouches] = React.useState<Array<number | undefined>>([])
diff --git a/components/src/tokens/border.ts b/components/src/tokens/border.ts
index a2e70a4a..dac1a0ce 100644
--- a/components/src/tokens/border.ts
+++ b/components/src/tokens/border.ts
@@ -29,4 +29,5 @@ export const radii = {
   'input': '0.5rem',
   'card': '1rem',
   'checkbox': '0.25rem',
+  'unset': 'unset',
 }
diff --git a/docs/src/components/AdditionalColors/components/PaletteRow.tsx b/docs/src/components/AdditionalColors/components/PaletteRow.tsx
index 36137bde..22c13c25 100644
--- a/docs/src/components/AdditionalColors/components/PaletteRow.tsx
+++ b/docs/src/components/AdditionalColors/components/PaletteRow.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import type { RawColor } from '@ensdomains/thorin'
-import { Box, Typography, rawColorToRGB } from '@ensdomains/thorin'
+import { Box, Typography } from '@ensdomains/thorin'
 import { match, P } from 'ts-pattern'
 
 const PaletteCell = ({
@@ -31,7 +31,9 @@ const PaletteCell = ({
         // border="1px solid"
         borderColor="border"
         // transform={{ base: 'scale(1)', hover: 'scale(1.05)' }}
-        // transition="transform 0.15s ease-in-out"
+        transitionDuration={150}
+        transitionTimingFunction="ease-in-out"
+        transitionProperty="transform"
         onClick={onClick}
       />
     </Box>
diff --git a/docs/src/components/CodePreview.tsx b/docs/src/components/CodePreview.tsx
index ea243840..12636515 100644
--- a/docs/src/components/CodePreview.tsx
+++ b/docs/src/components/CodePreview.tsx
@@ -17,9 +17,7 @@ import { Prism } from './Prism'
 import ComponentWrapper from '../playroom/ComponentWrapper'
 import { CopyButton } from './CopyButton'
 import type { BoxProps } from '@ensdomains/thorin'
-import { Box } from '@ensdomains/thorin'
-import { DownChevronSVG } from '@ensdomains/thorin'
-import { OutlinkSVG } from '@ensdomains/thorin'
+import { Box, DownChevronSVG, OutlinkSVG } from '@ensdomains/thorin'
 
 export type Props = {
   backgroundColor?: Colors
@@ -59,8 +57,8 @@ const ContainerInner = React.forwardRef<
     backgroundColor="background"
     borderTopLeftRadius="2xLarge"
     borderTopRightRadius="2xLarge"
-    // borderBottomLeftRadius={$expand ? '2xLarge' : 'unset'}
-    // borderBottomRightRadius={$expand ? '2xLarge' : 'unset'}
+    borderBottomLeftRadius={$expand ? '2xLarge' : 'unset'}
+    borderBottomRightRadius={$expand ? '2xLarge' : 'unset'}
     overflow="auto"
     padding="4"
   />