Refactor to vanilla sprinkles (Extreme edition)

components/src/components/atoms/Avatar/Avatar.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react'
 
-import { rainbowSprinkles } from '@/src/css/rainbow-spinkles.css'
-
 import { rawColorToRGBA } from '@/src/tokens/color'
 
 import { Box, type BoxProps } from '../Box/Box'
 import { avatar } from './styles.css'
@@ -36,19 +34,19 @@
   $url?: string
 }
 const Placeholder = ({
   $disabled,
   $url,
   ...props
 }: PlaceholderProps & BoxProps) => (
   <Box
     alignItems="center"
-    background={$url || 'blueGradient'}
+    // background={$url || 'blueGradient'}
     display="flex"
-    filter={$disabled ? 'grayscale(1)' : 'unset'}
-    height="100%"
+    // filter={$disabled ? 'grayscale(1)' : 'unset'}
+    // height="100%"
     justifyContent="center"
     position="absolute"
-    width="100%"
+    // width="100%"
     {...props}
   />
 )
@@ -67,7 +65,7 @@
   /** An element that overlays the avatar */
   checked?: boolean
   /** An svg to overlay over the avatar */
-  icon?: React.ReactElement
+  icon?: React.FC
   /** The deconding attribute of an img element */
   decoding?: NativeImgAttributes['decoding']
   /** A custom sizing for the avatar */
@@ -84,7 +82,7 @@
   icon,
   checked,
   size,
-  ...props
+  // ...props
 }) => {
   const ref = React.useRef<HTMLImageElement>(null)
   const [showImage, setShowImage] = React.useState(!!src)
@@ -115,35 +113,38 @@
 
   const isImageVisible = showImage && !!src
 
-  const {
-    className: imgClassName,
-    style: imgStyle,
-    otherProps: imgOtherProps,
-  } = rainbowSprinkles({
-    display: isImageVisible ? 'block' : 'none',
-    position: 'absolute',
-    height: '100%',
-    objectFit: 'cover',
-    width: '100%',
-    filter: disabled ? 'grayscale(1)' : undefined,
-    ...props,
-  })
+  // const {
+  //   className: imgClassName,
+  //   style: imgStyle,
+  //   otherProps: imgOtherProps,
+  // } = rainbowSprinkles({
+  //   display: isImageVisible ? 'block' : 'none',
+  //   position: 'absolute',
+  //   height: '100%',
+  //   objectFit: 'cover',
+  //   width: '100%',
+  //   filter: disabled ? 'grayscale(1)' : undefined,
+  //   ...props,
+  // })
 
   const overlay = React.useMemo(() => {
     if (disabled || (!icon && !checked)) return null
     return (
       <Box
         alignItems="center"
-        bg={
-          checked
-            ? rawColorToRGBA([56, 137, 255], 0.75)
-            : rawColorToRGBA([0, 0, 0], 0.25)
-        }
+        // bg={
+        //   checked
+        //     ? rawColorToRGBA([56, 137, 255], 0.75)
+        //     : rawColorToRGBA([0, 0, 0], 0.25)
+        // }
         color="white"
         display="flex"
         justifyContent="center"
       >
-        <Box as={icon ?? <CheckSVG />} wh="40%" />
+        <Box
+          as={icon ?? CheckSVG}
+        // wh="40%"
+        />
       </Box>
     )
   }, [checked, disabled, icon])
@@ -157,9 +158,9 @@
         />
       )}
       <img
-        className={imgClassName}
-        style={imgStyle}
-        {...imgOtherProps}
+        // className={imgClassName}
+        // style={imgStyle}
+        // {...imgOtherProps}
         alt={label}
         decoding={decoding}
         ref={ref}

components/src/components/atoms/BackdropSurface/BackdropSurface.tsx

@@ -15,7 +15,7 @@ export const BackdropSurface = React.forwardRef<HTMLElement, BackdropSurfaceProp
       className={backdropSurface({
         entered: !$empty && $state === 'entered',
       })}
-      height="100vh"
+      // height="100vh"
       left="0"
       overflow="hidden"
       position="fixed"
@@ -24,8 +24,8 @@ export const BackdropSurface = React.forwardRef<HTMLElement, BackdropSurfaceProp
       transitionDuration={300}
       transitionProperty="all"
       transitionTimingFunction="popIn"
-      width="100vw"
-      zIndex="999"
+      // width="100vw"
+      // zIndex="999"
     />
   ),
 )

components/src/components/atoms/Banner/Banner.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 
 import type { WithAlert } from './utils/getValueForAlert'
 import { getValueForAlert } from './utils/getValueForAlert'
 import { Typography } from '../Typography/Typography'
 
 import { AlertSVG, CrossSVG, EthSVG, UpRightArrowSVG } from '../../../index'
 import type { BoxProps } from '../Box/Box'
 import { Box } from '../Box/Box'
 
 type NativeDivProps = React.HTMLAttributes<HTMLDivElement>
 
 type IconTypes = 'filledCircle' | 'normal' | 'none'
 
@@ -18,9 +18,9 @@
   as?: 'a'
   onDismiss?: () => void
   actionIcon?: React.ReactNode
-  icon?: React.ReactNode
+  icon?: React.FC
   iconType?: IconTypes
-} & NativeDivProps
+} & BoxProps
 
 type WithIcon = {
   icon?: React.ReactNode
@@ -56,14 +56,14 @@
   $hasAction: boolean
 }
 const ContainerBox = React.forwardRef<HTMLElement, ContainerProps>(
   ({ $alert, $hasAction, ...props }, ref) => (
     <Box
       alignItems={{ base: 'stretch', sm: 'center' }}
-      backgroundColor={{
-        base: getValueForAlert($alert, 'background'),
-        hover: getValueForAlert($alert, 'hover'),
-      }}
-      borderColor={getValueForAlert($alert, 'border')}
+      // backgroundColor={{
+      //   base: getValueForAlert($alert, 'background'),
+      //   hover: getValueForAlert($alert, 'hover'),
+      // }}
+      // borderColor={getValueForAlert($alert, 'border')}
       borderRadius="2xLarge"
       borderStyle="solid"
       borderWidth="1x"
@@ -73,13 +73,13 @@
       position="relative"
       pr={$hasAction ? '8' : undefined}
       ref={ref}
-      transform={{
-        base: 'translateY(0)',
-        hover: $hasAction ? 'translateY(-1px)' : 'translateY(0px)',
-      }}
+      // transform={{
+      //   base: 'translateY(0)',
+      //   hover: $hasAction ? 'translateY(-1px)' : 'translateY(0px)',
+      // }}
       transitionDuration={150}
       transitionProperty="all"
-      transitionTimingFunction="ease-in-out"
+      // transitionTimingFunction="ease-in-out"
       width="full"
       {...props}
     />
@@ -87,13 +87,13 @@
 )
 
 const IconBox = ({
   $alert,
   ...props
 }: BoxProps & { $alert: NonNullableAlert }) => (
   <Box
-    backgroundColor={getValueForAlert($alert, 'icon')}
+    // backgroundColor={getValueForAlert($alert, 'icon')}
     borderRadius="full"
-    color={getValueForAlert($alert, 'svg')}
+    // color={getValueForAlert($alert, 'svg')}
     flex={0}
     flexBasis={{ base: '8', sm: '10' }}
     height={{ base: '8', sm: '10' }}
@@ -103,13 +103,13 @@
 )
 
 const SVGBox = ({
   $alert,
   ...props
 }: BoxProps & { $alert: NonNullableAlert }) => (
   <Box
     display="block"
     height="full"
-    transform={$alert === 'info' ? 'scale(1)' : 'scale(0.5)'}
+    // transform={$alert === 'info' ? 'scale(1)' : 'scale(0.5)'}
     width="full"
     {...props}
   />
@@ -128,32 +128,32 @@
 )
 
 const ActionButtonIconBox = ({
   $alert,
   $hasAction,
   ...props
 }: BoxProps & { $alert: NonNullableAlert, $hasAction: boolean }) => (
   <Box
     alignItems="center"
-    backgroundColor={{
-      base: getValueForAlert($alert, 'actionIcon'),
-      hover: getValueForAlert($alert, 'actionIconHover'),
-    }}
+    // backgroundColor={{
+    //   base: getValueForAlert($alert, 'actionIcon'),
+    //   hover: getValueForAlert($alert, 'actionIconHover'),
+    // }}
     borderRadius="full"
-    color={{
-      base: getValueForAlert($alert, 'actionSvg'),
-      hover: getValueForAlert($alert, 'actionSvgHover'),
-    }}
+    // color={{
+    //   base: getValueForAlert($alert, 'actionSvg'),
+    //   hover: getValueForAlert($alert, 'actionSvgHover'),
+    // }}
     cursor="pointer"
     display="flex"
     height="5"
     justifyContent="center"
-    transform={{
-      base: 'translateY(0)',
-      hover: $hasAction ? 'translateY(-1px)' : 'translateY(0px)',
-    }}
+    // transform={{
+    //   base: 'translateY(0)',
+    //   hover: $hasAction ? 'translateY(-1px)' : 'translateY(0px)',
+    // }}
     transitionDuration={150}
     transitionProperty="all"
-    transitionTimingFunction="ease-in-out"
+    // transitionTimingFunction="ease-in-out"
     width="5"
     {...props}
   />
@@ -170,7 +170,7 @@
   onDismiss,
 }: Pick<BannerProps, 'alert' | 'onDismiss'> & { hasHref: boolean } & WithIcon) => {
   if (onDismiss) {
-    const Icon = (icon || <CrossSVG />) as React.ReactElement
+    const Icon = (icon || CrossSVG) as React.FC
     return (
       <ActionButtonBox onClick={() => onDismiss()}>
         <ActionButtonIconBox $alert={alert} $hasAction>
@@ -180,7 +180,7 @@
     )
   }
   if (hasHref || icon) {
-    const Icon = (icon || <UpRightArrowSVG />) as React.ReactElement
+    const Icon = (icon || UpRightArrowSVG) as React.FC
     return (
       <ActionButtonBox as="div">
         <ActionButtonIconBox $alert={alert} $hasAction={false}>
@@ -223,11 +223,11 @@
         {...props}
         $alert={alert}
         $hasAction={hasAction}
         as={asProp as any}
         ref={ref}
       >
         <IconBox $alert={alert}>
           <SVGBox $alert={alert} as={Icon as any} />
         </IconBox>
         <Box
           display="flex"

components/src/components/atoms/Box/Box.tsx

@@ -1,7 +1,8 @@
 import type {
   AllHTMLAttributes,
-  ElementType,
-  ReactElement } from 'react'
+  FunctionComponent,
+  ComponentClass,
+} from 'react'
 import React, {
   forwardRef,
 } from 'react'
@@ -18,11 +19,11 @@
 >
 
 export type BoxProps = Sprinkles &
-  HTMLProperties & { as?: ElementType | ReactElement<any> }
+  HTMLProperties & { as?: string | FunctionComponent<any> | ComponentClass<any, any> }
 
 export const Box = forwardRef<HTMLElement, BoxProps >(
   (
-    { as = 'div', className, ...props },
+    { as = 'div', className, children, ...props },
     ref,
   ) => {
     const atomProps: Record<string, unknown> = {}
@@ -37,12 +38,13 @@
       }
     }
 
-    const atomicCss = sprinkles(props)
+    const atomicCss = sprinkles(atomProps)
 
     return React.createElement(as, {
       className: clsx(atomicCss, className),
       ...nativeProps,
       ref,
+      children,
     })
   },
 )