chore: update to radix v2 (#62)

Co-authored-by: Luiz Estácio | stacio.eth <luizstacio@gmail.com>

.lintstagedrc.mjs

@@ -0,0 +1,14 @@
+import { getTsconfig } from 'get-tsconfig';
+import { relative } from 'node:path';
+
+export default {
+  '**/*.(md|mdx|json|html|css)': ['prettier --write'],
+  '**/*.(t|j)s?(x)': ['prettier --write', 'eslint'],
+  '**/*.ts?(x)': (files) => {
+    const commands = files.map((file) => {
+      const tsConfig = relative(process.cwd(), getTsconfig(file).path);
+      return `tsc -p ${tsConfig} --noEmit`;
+    });
+    return Array.from(new Set(commands));
+  },
+};

package.json

@@ -61,12 +61,12 @@
   "devDependencies": {
     "@fuels/tsup-config": "^0.0.11",
     "@next/eslint-plugin-next": "^13.5.3",
-    "@swc/core": "1.3.90",
+    "@swc/core": "1.3.91",
     "@swc/jest": "0.2.29",
     "@types/jest": "29.5.5",
-    "@types/node": "20.7.0",
-    "@typescript-eslint/eslint-plugin": "^6.7.3",
-    "@typescript-eslint/parser": "^6.7.3",
+    "@types/node": "20.8.2",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
     "eslint": "^8.50.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-node": "^0.3.9",
@@ -79,6 +79,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-testing-library": "^6.0.2",
+    "get-tsconfig": "4.7.2",
     "husky": "^8.0.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.3",

packages/app/package.json

@@ -20,8 +20,8 @@
     "@fuel-wallet/sdk": "0.13.0",
     "@fuels/assets": "0.0.11",
     "@fuels/ui": "workspace:*",
-    "@tabler/icons-react": "2.35.0",
-    "@tanstack/react-query": "4.35.3",
+    "@tabler/icons-react": "2.38.0",
+    "@tanstack/react-query": "4.35.7",
     "clsx": "2.0.0",
     "csstype": "3.1.2",
     "dayjs": "1.11.10",
@@ -30,7 +30,7 @@
     "graphql": "16.8.1",
     "graphql-request": "6.1.0",
     "graphql-tag": "2.12.6",
-    "graphql-yoga": "4.0.4",
+    "graphql-yoga": "4.0.5",
     "next": "13.5.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -52,17 +52,17 @@
     "@storybook/addons": "^7.4.5",
     "@storybook/nextjs": "^7.4.5",
     "@storybook/react": "^7.4.5",
-    "@storybook/testing-library": "^0.2.1",
+    "@storybook/testing-library": "^0.2.2",
     "@storybook/types": "^7.4.5",
     "@svgr/webpack": "8.1.0",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "6.1.3",
-    "@types/node": "20.7.0",
-    "@types/react": "^18.2.23",
+    "@types/node": "20.8.2",
+    "@types/react": "^18.2.24",
     "@types/react-dom": "^18.2.8",
     "@xstate/cli": "^0.5.2",
     "autoprefixer": "10.4.16",
-    "postcss": "8.4.30",
+    "postcss": "8.4.31",
     "postcss-import": "15.1.0",
     "radix-ui-themes-with-tailwind": "1.2.6",
     "storybook": "^7.4.5",

packages/app/src/systems/Transaction/component/TxIcon/TxIcon.tsx

@@ -69,7 +69,7 @@ export function TxIcon({
       className={classes.root({ className })}
       color={color || TX_INTENT_MAP[status || 'Submitted']}
       radius="full"
-      variant="soft"
+      variant="ghost"
     >
       <Icon className={classes.icon()} icon={TX_ICON_MAP[type]} />
     </Badge>

packages/graphql/package.json

@@ -30,7 +30,7 @@
     "cors": "^2.8.5",
     "dayjs": "1.11.10",
     "dotenv": "16.3.1",
-    "esbuild": "0.19.3",
+    "esbuild": "0.19.4",
     "express": "^4.18.2",
     "graphql": "16.8.1",
     "graphql-http": "^1.22.0",
@@ -56,7 +56,7 @@
     "@types/cors": "^2.8.14",
     "@types/express": "^4.17.18",
     "@types/lodash": "4.14.199",
-    "@types/node": "^20.7.0",
+    "@types/node": "^20.8.2",
     "babel-plugin-import-graphql": "2.8.1",
     "babel-register-ts": "7.0.0",
     "graphql-codegen-typescript-common": "0.18.2",

packages/storybook-addon-theme/package.json

@@ -51,7 +51,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.23",
+    "@types/react": "^18.2.24",
     "@types/react-dom": "^18.2.8"
   }
 }

packages/ui/package.json

@@ -56,31 +56,31 @@
   "dependencies": {
     "@fontsource-variable/inter": "5.0.8",
     "@fuel-ts/math": "0.60.0",
-    "@radix-ui/colors": "3.0.0-rc.5",
+    "@radix-ui/colors": "3.0.0",
     "@radix-ui/react-accordion": "1.1.2",
     "@radix-ui/react-aspect-ratio": "1.0.3",
     "@radix-ui/react-dialog": "1.0.5",
     "@radix-ui/react-slot": "1.0.2",
     "@radix-ui/react-toast": "1.1.5",
-    "@radix-ui/themes": "^1.1.2",
-    "@react-aria/focus": "3.14.1",
-    "@tabler/icons-react": "2.35.0",
+    "@radix-ui/themes": "^2.0.0",
+    "@react-aria/focus": "3.14.2",
+    "@tabler/icons-react": "2.38.0",
     "@tailwindcss/typography": "0.5.10",
     "clsx": "2.0.0",
     "csstype": "3.1.2",
     "framer-motion": "10.16.4",
     "modern-normalize": "2.0.0",
     "radix-ui-themes-with-tailwind": "1.2.6",
     "react": "^18.2.0",
-    "react-aria": "3.28.0",
+    "react-aria": "3.29.0",
     "react-dom": "^18.2.0",
-    "react-stately": "3.26.0",
+    "react-stately": "3.27.0",
     "react-use": "17.4.0",
     "tailwind-merge": "1.14.0",
     "tailwind-variants": "0.1.14",
     "tailwindcss-animate": "1.0.7",
     "tailwindcss-radix": "2.8.0",
-    "tailwindcss-themer": "3.1.1"
+    "tailwindcss-themer": "3.1.2"
   },
   "devDependencies": {
     "@chialab/esbuild-plugin-meta-url": "0.17.7",
@@ -94,15 +94,15 @@
     "@storybook/addons": "^7.4.5",
     "@storybook/react": "^7.4.5",
     "@storybook/react-vite": "^7.4.5",
-    "@storybook/testing-library": "^0.2.1",
+    "@storybook/testing-library": "^0.2.2",
     "@storybook/types": "^7.4.5",
     "@types/lodash": "4.14.199",
-    "@types/react": "^18.2.23",
+    "@types/react": "^18.2.24",
     "@types/react-dom": "^18.2.8",
     "autoprefixer": "10.4.16",
     "globby": "13.2.2",
     "lodash": "^4.17.21",
-    "postcss": "8.4.30",
+    "postcss": "8.4.31",
     "postcss-import": "15.1.0",
     "storybook": "^7.4.5",
     "storybook-addon-theme": "workspace:*",

packages/ui/src/components/Badge/Badge.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { IconCalendarX } from '@tabler/icons-react';
 
 import { HStack } from '../Box';
 import { ButtonClose } from '../ButtonClose/ButtonClose';
@@ -23,10 +24,37 @@ export const Usage: Story = {
   ),
 };
 
+export const Variants: Story = {
+  render: () => (
+    <HStack>
+      <Badge variant="solid" color="blue">
+        Solid
+      </Badge>
+      <Badge variant="ghost" color="blue">
+        Ghost
+      </Badge>
+      <Badge variant="surface" color="blue">
+        Surface
+      </Badge>
+      <Badge variant="outline" color="blue">
+        Outline
+      </Badge>
+    </HStack>
+  ),
+};
+
 export const WithClose: Story = {
   render: () => (
     <Badge color="blue" radius="full" size="2">
       Selected <ButtonClose />
     </Badge>
   ),
 };
+
+export const WithIcon: Story = {
+  render: () => (
+    <Badge color="blue" leftIcon={IconCalendarX} iconSize={14} size="2">
+      2023-10-03
+    </Badge>
+  ),
+};

packages/ui/src/components/Badge/Badge.tsx

@@ -1,11 +1,34 @@
 import { Badge as RadixBadge } from '@radix-ui/themes';
 
+import { useIconProps } from '../../hooks/useIconProps';
+import type { WithIconProps } from '../../hooks/useIconProps';
+import { useVariants } from '../../hooks/useVariants';
+import type { WithVariants } from '../../hooks/useVariants';
 import { createComponent } from '../../utils/component';
 import type { PropsOf } from '../../utils/types';
 
-export type BadgeProps = PropsOf<typeof RadixBadge>;
+export type BadgeBaseProps = PropsOf<typeof RadixBadge>;
+export type BadgeVariants = 'solid' | 'ghost' | 'surface' | 'outline';
+export type BadgeProps = WithVariants<BadgeBaseProps, BadgeVariants> &
+  WithIconProps;
 
-export const Badge = createComponent<BadgeProps, typeof RadixBadge>({
+export const Badge = createComponent<BadgeProps, 'span'>({
   id: 'Badge',
-  baseElement: RadixBadge,
+  render: (_, props) => {
+    const { disabled, ...itemProps } = useIconProps(props);
+    const variantProps = useVariants<BadgeProps, BadgeVariants>(props);
+    return (
+      <RadixBadge
+        {...(itemProps as BadgeBaseProps)}
+        {...(variantProps as BadgeBaseProps)}
+        {...(disabled && {
+          disabled,
+          'aria-disabled': disabled,
+        })}
+      />
+    );
+  },
+  defaultProps: {
+    size: '1',
+  },
 });

packages/ui/src/components/Button/Button.stories.tsx

@@ -21,10 +21,11 @@ export const Usage: Story = {
 export const Variant: Story = {
   render: () => (
     <HStack align="center" gap="5">
-      <Button variant="solid">Edit profile</Button>
-      <Button variant="ghost">Edit profile</Button>
-      <Button variant="outline">Edit profile</Button>
-      <Button variant="link">Edit profile</Button>
+      <Button variant="solid">Solid</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="surface">Surface</Button>
+      <Button variant="link">Link</Button>
     </HStack>
   ),
 };

packages/ui/src/components/Button/Button.tsx

@@ -15,7 +15,12 @@ export const Button = createComponent<ButtonProps, 'button'>({
   render: (_, props) => {
     const itemProps = useIconProps(props);
     const variantProps = useVariants(props);
-    return <RadixButton {...itemProps} {...variantProps} />;
+    return (
+      <RadixButton
+        {...(itemProps as RadixButtonProps)}
+        {...(variantProps as RadixButtonProps)}
+      />
+    );
   },
   defaultProps: {
     size: '2',

packages/ui/src/components/IconButton/IconButton.tsx

@@ -2,27 +2,26 @@ import { IconButton as RadixIconButton } from '@radix-ui/themes';
 
 import { getIconSize } from '../../hooks/useIconProps';
 import { useVariants } from '../../hooks/useVariants';
-import type { WithVariants } from '../../hooks/useVariants';
+import type { Variant, WithVariants } from '../../hooks/useVariants';
 import { createComponent } from '../../utils/component';
 import type { Colors, PropsOf } from '../../utils/types';
 import { Icon } from '../Icon/Icon';
 import type { IconContext } from '../Icon/useIconContext';
 import { Spinner } from '../Spinner/Spinner';
 
 type RadixIconButtonProps = Omit<PropsOf<typeof RadixIconButton>, 'children'>;
+type IconButtonBaseProps = RadixIconButtonProps & {
+  disabled?: boolean;
+  isLoading?: boolean;
+  icon: React.ComponentType<Partial<IconContext>>;
+  iconSize?: number;
+  iconStroke?: number;
+  iconClassName?: string;
+  iconColor?: Colors;
+  'aria-label'?: string;
+};
 
-export type IconButtonProps = WithVariants<
-  RadixIconButtonProps & {
-    disabled?: boolean;
-    isLoading?: boolean;
-    icon: React.ComponentType<Partial<IconContext>>;
-    iconSize?: number;
-    iconStroke?: number;
-    iconClassName?: string;
-    iconColor?: Colors;
-    'aria-label'?: string;
-  }
->;
+export type IconButtonProps = WithVariants<IconButtonBaseProps, Variant>;
 
 export const IconButton = createComponent<IconButtonProps, 'button'>({
   id: 'IconButton',
@@ -44,8 +43,8 @@ export const IconButton = createComponent<IconButtonProps, 'button'>({
     const isDisabled = Boolean(disabled || isLoading);
     return (
       <RadixIconButton
-        {...props}
-        {...variantProps}
+        {...(props as RadixIconButtonProps)}
+        {...(variantProps as RadixIconButtonProps)}
         disabled={isDisabled}
         size={size}
       >

packages/ui/src/components/Spinner/Spinner.css

@@ -33,7 +33,7 @@
 }
 .fuel-Spinner__circle-bg {
   fill: transparent;
-  stroke: var(--black-a3);
+  stroke: var(--inverse-a3);
   stroke-width: calc(0.1 * var(--size));
   stroke-linecap: round;
   stroke-dasharray: var(--circumference);

packages/ui/src/hooks/useVariants.tsx

@@ -1,20 +1,21 @@
 'use client';
 
-import type { ButtonProps } from '@radix-ui/themes/dist/cjs/components/button';
-
 import { cx } from '../utils/css';
 
-export type Variant = 'solid' | 'ghost' | 'outline' | 'link';
-export type VariantProps = {
+export type Variant = 'solid' | 'ghost' | 'outline' | 'surface' | 'link';
+export type VariantProps<V = Variant> = {
   className?: string;
-  variant?: Variant;
+  variant?: V;
 };
 
-export type WithVariants<P> = Omit<P, 'variant'> & {
-  variant?: Variant;
+export type WithVariants<
+  P,
+  V = P extends VariantProps ? P['variant'] : Variant,
+> = Omit<P, 'variant'> & {
+  variant?: V;
 };
 
-function getVariant({ variant, className }: VariantProps) {
+function getVariant<V = Variant>({ variant, className }: VariantProps<V>) {
   if (variant === 'ghost') {
     return {
       variant: 'soft',
@@ -36,7 +37,8 @@ function getVariant({ variant, className }: VariantProps) {
   };
 }
 
-export function useVariants<P extends VariantProps>(props: P) {
-  const { variant, className } = getVariant(props);
-  return { variant: variant as ButtonProps['variant'], className };
+export function useVariants<P, V = Variant>(props: P) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { variant, className } = getVariant<V>(props as any);
+  return { variant: variant as V, className };
 }