Vanilla Extract rewrite

.github/workflows/main.yml

@@ -15,7 +15,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-      - uses: pnpm/action-setup@v2.2.2
+      - uses: pnpm/action-setup@v2.4.0
         with:
           version: 7.8.0
 
@@ -39,7 +39,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-      - uses: pnpm/action-setup@v2.2.2
+      - uses: pnpm/action-setup@v2.4.0
         with:
           version: 7.8.0
 
@@ -69,7 +69,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-      - uses: pnpm/action-setup@v2.2.2
+      - uses: pnpm/action-setup@v2.4.0
         with:
           version: 7.8.0
 

.github/workflows/publish.yml

@@ -16,7 +16,7 @@ jobs:
         with:
           ref: ${{ github.event.release.target_commitish }}
 
-      - uses: pnpm/action-setup@v2.2.2
+      - uses: pnpm/action-setup@v2.4.0
         with:
           version: 7.8.0
 

.gitignore

@@ -10,7 +10,7 @@ yarn-error.log*
 
 docs/.next/
 docs/out/
-docs/public/playroom/
+# docs/public/playroom/
 docs/src/playroom/snippets
 
 components/dist/

.vscode/settings.json

@@ -1,8 +1,8 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": false,
-    "source.organizeImports": false
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "never",
+    "source.organizeImports": "never"
   },
   "editor.formatOnSave": true,
   "eslint.options": {

README.md

@@ -9,14 +9,14 @@ A design system for ENS built with React and styled-components.
 To install this package using npm:
 
 ```bash
-npm install @ensdomains/thorin
+npm install @ensdomains/thorin styled-components [email protected]
 
 ```
 
 To install this package using yarn:
 
 ```bash
-yarn add @ensdomains/thorin
+yarn add @ensdomains/thorin styled-components [email protected]
 ```
 
 Checkout the project's [playroom](https://thorin.ens.domains/playroom) to preview the components in a live online environment.

components/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@ensdomains/thorin",
-  "version": "0.6.45",
+  "version": "0.6.50",
   "description": "A web3 native design system",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
-      "require": "./dist/index.cjs.js"
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/types/index.d.ts"
     },
     "./styles.css": {
       "import": "./dist/style.css",

components/src/components/atoms/RecordItem/RecordItem.tsx

@@ -23,6 +23,9 @@ type BaseProps = {
   children: string
   onClick?: () => void
   as?: 'button' | 'a'
+  postfixIcon?: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >
 }
 
 type NativeElementProps = Omit<
@@ -147,37 +150,45 @@ const TrailingSVGBox = ({
   />
 )
 
-export const RecordItem = ({
-  as: asProp = 'button',
-  link,
-  size = 'small',
-  inline = false,
-  icon,
-  keyLabel,
-  keySublabel,
-  value,
-  children,
-  ...props
-}: Props) => {
-  const { copy, copied } = useCopied()
-
-  const generatedProps =
-    asProp === 'a'
-      ? ({
-          href: link,
-          rel: 'nofollow noreferrer',
-          target: '_blank',
-          ...props,
-        } as NativeElementProps & NativeAnchorProps)
-      : ({
-          onClick: () => {
-            copy(value)
-          },
-          ...props,
-        } as NativeElementProps & NativeButtonProps)
-
-  const hasPrefix = !!icon || !!keyLabel
-  const hasLabels = !!keyLabel || !!keySublabel
+export const RecordItem = React.forwardRef<
+  HTMLAnchorElement | HTMLButtonElement,
+  Props
+>(
+  (
+    {
+      as: asProp = 'button',
+      link,
+      size = 'small',
+      inline = false,
+      postfixIcon,
+      icon,
+      keyLabel,
+      keySublabel,
+      value,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const { copy, copied } = useCopied()
+
+    const generatedProps =
+      asProp === 'a'
+        ? ({
+            href: link,
+            rel: 'nofollow noreferrer',
+            target: '_blank',
+            ...props,
+          } as NativeElementProps & NativeAnchorProps)
+        : ({
+            onClick: () => {
+              copy(value)
+            },
+            ...props,
+          } as NativeElementProps & NativeButtonProps)
+
+    const hasPrefix = !!icon || !!keyLabel
+    const hasLabels = !!keyLabel || !!keySublabel
 
   const KeyLabel =
     typeof keyLabel === 'string' ? (
@@ -208,7 +219,9 @@ export const RecordItem = ({
     ) : (
       keySublabel
     )
-  const PostfixProps = link
+  const PostfixProps = postfixIcon 
+    ? { as: postfixIcon } 
+    : link
     ? { $rotate: true, as: UpArrowSVG }
     : copied
     ? { as: CheckSVG }
@@ -238,6 +251,7 @@ export const RecordItem = ({
       <TrailingSVGBox {...(PostfixProps as any)} />
     </ContainerBox>
   )
-}
+})
+
 
 RecordItem.displayName = 'RecordItem'

components/src/components/atoms/ScrollBox/ScrollBox.tsx

@@ -2,59 +2,69 @@ import * as React from 'react'
 
 import * as styles from './styles.css'
 import { Box, BoxProps } from '../Box/Box'
+import { commonVars } from '@/src/css/theme.css'
+import { Space } from '@/src/tokens'
 
 const ScrollBoxBox = React.forwardRef<HTMLElement, BoxProps>((props, ref) => (
   <Box
-    overflowX="auto"
-    overflowY="auto"
-    position="relative"
     ref={ref}
-    transitionDuration="$150"
-    transitionProperty="all"
-    transitionTimingFunction="$inOut"
+    classNames={styles.scrollBox}
     {...props}
   />
 ))
 
 const DividerBox = ({
   show,
   position,
+  horizontalPadding,
 }: {
   show: boolean
   position: 'top' | 'bottom'
-}) => (
+  horizontalPadding?: Space
+}) => {
+  return (
   <Box
-    backgroundColor="$greyLight"
-    bottom={position === 'bottom' ? '$0' : 'unset'}
+  style={horizontalPadding ? { width: `calc(100% - 2 * ${commonVars.space[horizontalPadding]})`} : {}}
+    backgroundColor={show ? '$border' : 'transparent'}
+    bottom={position === 'bottom' ? '-$px' : 'unset'}
     data-testid={`scrollbox-${position}-divider`}
     display="block"
     height="$px"
-    left="$0"
-    opacity={show ? '1' : '0'}
-    position="sticky"
+    left={horizontalPadding ? commonVars.space[horizontalPadding] :"$0"}
+    position="absolute"
     top={position === 'top' ? '$0' : 'unset'}
     transitionDuration="$150"
-    transitionProperty="opacity"
+    transitionProperty="background-color"
     transitionTimingFunction="$inOut"
     width="$full"
     zIndex="100"
-  />
-)
+  />)}
 
 type Props = {
+  /** If true, the dividers will be hidden */
   hideDividers?: boolean | { top?: boolean; bottom?: boolean }
+  /** If true, the dividers will always be shown */
+  alwaysShowDividers?: boolean | { top?: boolean; bottom?: boolean }
+  /** The number of pixels below the top of the content where events such as showing/hiding dividers and onReachedTop will be executed */
   topTriggerPx?: number
+  /** The number of pixels above the bottom of the content where events such as showing/hiding dividers and onReachedTop will be executed */
   bottomTriggerPx?: number
+  /** A callback function that is fired when the content reaches topTriggerPx */
   onReachedTop?: () => void
+  /** A callback function that is fired when the content reaches bottomTriggerPx */
   onReachedBottom?: () => void
+  /** The amount of horizontal padding to apply to the scrollbox. This will decrease the content area as well as the width of the overflow indicator dividers*/
+  horizontalPadding?: Space
 } & BoxProps
 
 export const ScrollBox = ({
   hideDividers = false,
+  alwaysShowDividers = false,
   topTriggerPx = 16,
   bottomTriggerPx = 16,
   onReachedTop,
   onReachedBottom,
+  horizontalPadding,
   children,
   ...props
 }: Props) => {
@@ -66,14 +76,22 @@ export const ScrollBox = ({
     typeof hideDividers === 'boolean' ? hideDividers : !!hideDividers?.top
   const hideBottom =
     typeof hideDividers === 'boolean' ? hideDividers : !!hideDividers?.bottom
+  const alwaysShowTop =
+    typeof alwaysShowDividers === 'boolean'
+      ? alwaysShowDividers
+      : !!alwaysShowDividers?.top
+  const alwaysShowBottom =
+    typeof alwaysShowDividers === 'boolean'
+      ? alwaysShowDividers
+      : !!alwaysShowDividers?.bottom
 
   const funcRef = React.useRef<{
     onReachedTop?: () => void
     onReachedBottom?: () => void
   }>({ onReachedTop, onReachedBottom })
 
-  const [showTop, setShowTop] = React.useState(false)
-  const [showBottom, setShowBottom] = React.useState(false)
+  const [showTop, setShowTop] = React.useState(alwaysShowTop)
+  const [showBottom, setShowBottom] = React.useState(alwaysShowBottom)
 
   const handleIntersect: IntersectionObserverCallback = (entries) => {
     const intersectingTop: [boolean, number] = [false, -1]
@@ -87,9 +105,13 @@ export const ScrollBox = ({
         iref[1] = entry.time
       }
     }
-    intersectingTop[1] !== -1 && !hideTop && setShowTop(!intersectingTop[0])
+    intersectingTop[1] !== -1 &&
+      !hideTop &&
+      !alwaysShowTop &&
+      setShowTop(!intersectingTop[0])
     intersectingBottom[1] !== -1 &&
       !hideBottom &&
+      !alwaysShowBottom &&
       setShowBottom(!intersectingBottom[0])
     intersectingTop[0] && funcRef.current.onReachedTop?.()
     intersectingBottom[0] && funcRef.current.onReachedBottom?.()
@@ -120,28 +142,28 @@ export const ScrollBox = ({
   }, [onReachedTop, onReachedBottom])
 
   return (
-    <ScrollBoxBox
-      // $showBottom={showBottom}
-      // $showTop={showTop}
-      className={styles.scrollBox}
-      ref={ref}
+    <Box
+      position="relative"
+      border="solid $px transparent"
+      width="$full"
+      height="$full"
+      borderLeftWidth="$0"
+      borderRightWidth="$0"
       {...props}
     >
-      <DividerBox position="top" show={showTop} />
-      <Box
-        data-testid="scrollbox-top-intersect"
-        display="block"
-        height="$0"
-        ref={topRef}
-      />
-      {children}
-      <Box
-        data-testid="scrollbox-bottom-intersect"
-        display="block"
-        height="$0"
-        ref={bottomRef}
-      />
-      <DividerBox position="bottom" show={showBottom} />
-    </ScrollBoxBox>
+      <ScrollBoxBox style={horizontalPadding ? {
+        padding: `0 ${commonVars.space[horizontalPadding]}`,
+      } : {}}>
+        <Box data-testid="scrollbox-top-intersect" ref={topRef} 
+        display="block" height="$0"
+        />
+        {children}
+        <Box data-testid="scrollbox-bottom-intersect" ref={bottomRef} 
+        display="block" height="$0"
+        />
+      </ScrollBoxBox>
+      <DividerBox data-testid="scrollbox-top-line" show={showTop} position='top' horizontalPadding={horizontalPadding}/>
+      <DividerBox data-testid="scrollbox-bottom-line" show={showBottom} position='bottom' horizontalPadding={horizontalPadding}/>
+    </Box>
   )
 }