Merge branch 'refactor-with-vanilla-extract' of https://github.com/en…

…sdomains/thorin into refactor-with-vanilla-extract

.vscode/settings.json

@@ -9,5 +9,6 @@
   "stylelint.configFile": "stylelint.config.mjs",
   "svg.preview.background": "custom",
   "prettier.enable": false,
-  "stylelint.configBasedir": "."
+  "stylelint.configBasedir": ".",
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ensdomains/thorin",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.8",
   "description": "A web3 native design system",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -59,7 +59,6 @@
     "jsdom": "^24.1.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "typescript": "4.9.4",
     "vite": "^5.4.0",
     "vite-plugin-dts": "^4.0.2",
     "vite-tsconfig-paths": "^4.0.1",

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

@@ -6,9 +6,9 @@ import { backdropSurface } from './styles.css'
 import type { BoxProps } from '../Box/Box'
 import { Box } from '../Box/Box'
 
-type Props = { $state: TransitionState['status'], $empty: boolean } & BoxProps
+export type BackdropSurfaceProps = { $state: TransitionState['status'], $empty: boolean } & BoxProps
 
-export const BackdropSurface = React.forwardRef<HTMLElement, Props>(
+export const BackdropSurface = React.forwardRef<HTMLElement, BackdropSurfaceProps>(
   ({ $empty, $state, ...props }, ref) => (
     <Box
       {...props}

components/src/components/atoms/Field/Field.tsx

@@ -6,7 +6,7 @@ import type { Space } from '@/src/tokens'
 
 import type { ReactNodeNoStrings } from '../../../types'
 import { useFieldIds } from '../../../hooks'
-import { VisuallyHidden } from '../VisuallyHidden'
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden'
 import { Typography } from '../Typography/Typography'
 import type { BoxProps } from '../Box/Box'
 import { Box } from '../Box/Box'

components/src/components/atoms/FileInput/FileInput.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 
 import type { ReactNodeNoStrings } from '../../../types'
 import { useFieldIds } from '../../../hooks'
-import { VisuallyHidden } from '../VisuallyHidden'
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden'
 import { validateAccept } from './utils'
 
 type Context = {

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

@@ -48,7 +48,7 @@ const DividerBox = ({
   )
 }
 
-type Props = {
+export type ScrollBoxProps = {
   /** If true, the dividers will be hidden */
   hideDividers?: boolean | { top?: boolean, bottom?: boolean }
   /** If true, the dividers will always be shown */
@@ -75,7 +75,7 @@ export const ScrollBox = ({
   horizontalPadding,
   children,
   ...props
-}: Props) => {
+}: ScrollBoxProps) => {
   const ref = React.useRef<HTMLDivElement>(null)
   const topRef = React.useRef<HTMLDivElement>(null)
   const bottomRef = React.useRef<HTMLDivElement>(null)

components/src/components/atoms/Skeleton/Skeleton.tsx

@@ -9,14 +9,14 @@ import { Box } from '../Box/Box'
 
 type NativeDivProps = React.HTMLAttributes<HTMLDivElement>
 
-type Props = {
+export type SkeletonProps = {
   /** An alternative element type to render the component as. */
   as?: 'span'
   /** If true, hides the content and shows the skeleton style. */
   loading?: boolean
 } & NativeDivProps
 
-export const Skeleton: React.FC<Props> = ({ as, children, loading, ...props }) => {
+export const Skeleton: React.FC<SkeletonProps> = ({ as, children, loading, ...props }) => {
   const groupLoading = React.useContext(SkeletonGroupContext)
   const active = loading ?? groupLoading
 

components/src/components/atoms/Spinner/Spinner.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { VisuallyHidden } from '../VisuallyHidden'
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden'
 import * as styles from './styles.css'
 import type { BoxProps } from '../Box/Box'
 import { Box } from '../Box/Box'

components/src/components/atoms/index.ts

@@ -1,5 +1,5 @@
 export { Avatar, type AvatarProps } from './Avatar/Avatar'
-export { BackdropSurface } from './BackdropSurface'
+export { BackdropSurface } from './BackdropSurface/BackdropSurface'
 export { Banner, type BannerProps } from './Banner/Banner'
 export { Button, type ButtonProps } from './Button/Button'
 export { Card, CardDivider, type CardProps } from './Card/Card'
@@ -9,11 +9,11 @@ export { FileInput } from './FileInput/FileInput'
 export { Heading, type HeadingProps } from './Heading/Heading'
 export { Portal, type PortalProps } from './Portal/Portal'
 export { RecordItem, type RecordItemProps } from './RecordItem/RecordItem'
-export { ScrollBox } from './ScrollBox'
-export { Skeleton } from './Skeleton/Skeleton'
+export { ScrollBox, type ScrollBoxProps } from './ScrollBox/ScrollBox'
+export { Skeleton, type SkeletonProps } from './Skeleton/Skeleton'
 export { Spinner, type SpinnerProps } from './Spinner/Spinner'
 export { Tag, type TagProps } from './Tag/Tag'
 export { Typography, type TypographyProps } from './Typography/Typography'
-export { VisuallyHidden } from './VisuallyHidden'
+export { VisuallyHidden } from './VisuallyHidden/VisuallyHidden'
 export { Box, type BoxProps } from './Box/Box'
 export { ThemeProvider, useTheme } from './ThemeProvider/ThemeProvider'

components/src/components/molecules/Backdrop/Backdrop.tsx

@@ -4,7 +4,7 @@ import { useTransition } from 'react-transition-state'
 
 import { Portal } from '../../atoms/Portal/Portal'
 
-import { BackdropSurface } from '../../atoms/BackdropSurface'
+import { BackdropSurface } from '../../atoms/BackdropSurface/BackdropSurface'
 
 export type BackdropProps = {
   /** A function that renders the children nodes */

components/src/components/organisms/Toast/Toast.tsx

@@ -108,7 +108,7 @@ const Draggable = () => (
 
 type NativeDivProps = React.HTMLAttributes<HTMLDivElement>
 
-type Props = {
+export type ToastProps = {
   onClose: () => void
   open: boolean
   msToShow?: number
@@ -137,7 +137,7 @@ const DesktopToast = ({
   state,
   children,
   ...props
-}: Props & InternalProps) => {
+}: ToastProps & InternalProps) => {
   return (
     <Container
       {...{
@@ -176,7 +176,7 @@ export const TouchToast = ({
   popped,
   setPopped,
   ...props
-}: Props &
+}: ToastProps &
 InternalProps & {
   popped: boolean
   setPopped: (popped: boolean) => void
@@ -311,7 +311,7 @@ InternalProps & {
   )
 }
 
-export const Toast: React.FC<Props> = ({
+export const Toast: React.FC<ToastProps> = ({
   onClose,
   open,
   msToShow = 8000,

components/src/components/organisms/index.ts

@@ -1,2 +1,2 @@
 export { Dialog, type DialogProps } from './Dialog/Dialog'
-export { Toast } from './Toast'
+export { Toast, type ToastProps } from './Toast/Toast'

components/src/css/rainbow-spinkles.css.ts

@@ -1,5 +1,7 @@
 import { createRainbowSprinkles, defineProperties } from 'rainbow-sprinkles'
 
+import type { SprinklesFn } from 'rainbow-sprinkles/createRuntimeFn'
+
 import { commonVars, modeVars } from './theme.css'
 
 // TODO: Review order of properties. More specific properties should come last.
@@ -154,6 +156,6 @@ const responsiveProperties = defineProperties({
   },
 })
 
-export const rainbowSprinkles = createRainbowSprinkles(responsiveProperties)
+export const rainbowSprinkles = createRainbowSprinkles(responsiveProperties) as SprinklesFn<[typeof responsiveProperties]>
 
 export type Sprinkles = Parameters<typeof rainbowSprinkles>[0]

components/tsconfig.json

@@ -1,16 +1,15 @@
 {
-    "extends":"../tsconfig.json",
-    "compilerOptions": {
-        "types": ["vite/client", "vitest/globals", "node"],
-        "outDir": "dist",
-        "declaration": true,
-        "baseUrl": ".",
-        "paths": {
-            "!/*": ["../*"],
-            "@/*": ["./*"],
-            "test-utils": ["./test"]
-        }
-    },
-    "include": ["src/**/*"],
-    "exclude": ["dist"]
+  "extends":"../tsconfig.json",
+  "compilerOptions": {
+    "types": ["vite/client", "vitest/globals", "node"],
+    "outDir": "dist",
+    "declaration": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"],
+      "test-utils": ["./test"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["dist"]
 }

components/vite.config.ts

@@ -36,7 +36,7 @@ export default defineConfig(({ mode }) => {
       ],
     },
     plugins: [
-      tsconfigPaths(),
+      tsconfigPaths({ projects: ['tsconfig.json'] }),
       vanillaExtractPlugin({
         identifiers: mode === 'development' ? ({ hash }) => `thorin-${hash}` : 'short',
       }),
@@ -50,15 +50,6 @@ export default defineConfig(({ mode }) => {
           content: content.replace(/\/\.\.\/src/g, ''),
           filePath: filePath.replace('src', ''),
         }),
-        compilerOptions: {
-          baseUrl: '.',
-          emitDeclarationOnly: true,
-          noEmit: false,
-          paths: {
-            '!/*': ['../*'],
-            '@/*': ['./*'],
-          },
-        },
         staticImport: true,
         outDir: 'dist/types',
       }),

docs/tsconfig.json

@@ -4,7 +4,7 @@
     "baseUrl": ".",
     "paths": {
       "~/*": ["./src/*"],
-      "@/*": ["../components/*"],
+      "@/*": ["../components/*"]
     },
     "incremental": true,
     "target": "esnext",

package.json

@@ -56,7 +56,7 @@
     "size-limit": "^6.0.3",
     "stylelint": "^16.8.1",
     "stylelint-config-recommended": "^14.0.1",
-    "typescript": "4.9.4",
+    "typescript": "5.5.4",
     "typescript-eslint": "^8.0.1",
     "utility-types": "^3.10.0"
   },