fix: remove react from dependencies

.changeset/great-falcons-sing.md

@@ -0,0 +1,8 @@
+---
+'@fuel-ui/design-tokens': patch
+'@fuel-ui/icons': patch
+'@fuel-ui/react': patch
+'@fuel-ui/css': patch
+---
+
+fix: use exact versions and remove react instances from dependencies (keeping only as devDependency)

design-system/css/package.json

@@ -23,14 +23,18 @@
     "build": "tsup --dts",
     "ts:check": "tsc --noEmit"
   },
-  "dependencies": {
-    "@radix-ui/colors": "^2.1.0",
-    "@fuel-ui/design-tokens": "workspace:*",
-    "classnames": "^2.3.2",
+  "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
+  "dependencies": {
+    "@radix-ui/colors": "2.1.0",
+    "@fuel-ui/design-tokens": "workspace:*",
+    "classnames": "2.3.2"
+  },
   "devDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "@fuel-stitches/react": "workspace:../../stitches/react"
   }
 }

design-system/icons/package.json

@@ -31,14 +31,14 @@
     "build-icons": "tsx scripts/build.ts",
     "build": "tsup"
   },
-  "devDependencies": {
-    "@types/lodash": "^4.14.197",
-    "lodash": "^4.17.21",
-    "tsx": "^3.12.7"
-  },
   "dependencies": {
-    "@tabler/icons": "^2.32.0",
-    "prettier": "^3.0.3",
-    "svgo": "^3.0.2"
+    "@tabler/icons": "2.32.0",
+    "svgo": "3.0.2"
+  },
+  "devDependencies": {
+    "@types/lodash": "4.14.197",
+    "prettier": "3.0.3",
+    "lodash": "4.17.21",
+    "tsx": "3.12.7"
   }
 }

design-system/react/jest.setup.ts

@@ -1 +1,10 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import '@testing-library/jest-dom';
+
+import { TextDecoder, TextEncoder } from 'node:util';
+
+global.TextEncoder = TextEncoder;
+(global as any).TextDecoder = TextDecoder;
+global.ArrayBuffer = ArrayBuffer;
+global.Uint8Array = Uint8Array;
+global.structuredClone = (val: any) => JSON.parse(JSON.stringify(val));

design-system/react/package.json

@@ -35,83 +35,90 @@
     "xstate:typegen": "xstate typegen 'src/**/*.ts?(x)'",
     "generate:defs": "node scripts/create-defs.mjs"
   },
+  "peerDependencies": {
+    "@fuel-ui/css": ">=0.23.1",
+    "@fuel-ui/icons": ">=0.23.1",
+    "fuels": ">=0.74.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
   "dependencies": {
-    "@fuel-ts/math": "0.74.0",
-    "@fuel-ui/css": "workspace:*",
-    "@fuel-ui/icons": "workspace:~",
-    "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-alert-dialog": "^1.0.4",
-    "@radix-ui/react-aspect-ratio": "^1.0.3",
-    "@radix-ui/react-avatar": "^1.0.3",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-dialog": "^1.0.4",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-popover": "^1.0.6",
-    "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-tooltip": "^1.0.6",
-    "@radix-ui/react-visually-hidden": "^1.0.3",
-    "@react-aria/focus": "^3.14.0",
-    "@react-aria/overlays": "^3.16.0",
-    "@react-aria/utils": "^3.19.0",
+    "@radix-ui/react-accordion": "1.1.2",
+    "@radix-ui/react-alert-dialog": "1.0.4",
+    "@radix-ui/react-aspect-ratio": "1.0.3",
+    "@radix-ui/react-avatar": "1.0.3",
+    "@radix-ui/react-checkbox": "1.0.4",
+    "@radix-ui/react-dialog": "1.0.4",
+    "@radix-ui/react-label": "2.0.2",
+    "@radix-ui/react-popover": "1.0.6",
+    "@radix-ui/react-radio-group": "1.1.3",
+    "@radix-ui/react-switch": "1.0.3",
+    "@radix-ui/react-tabs": "1.0.4",
+    "@radix-ui/react-tooltip": "1.0.6",
+    "@radix-ui/react-visually-hidden": "1.0.3",
+    "@react-aria/focus": "3.14.0",
+    "@react-aria/overlays": "3.16.0",
+    "@react-aria/utils": "3.19.0",
     "@testing-library/react": "14.0.0",
-    "@xstate/react": "^3.2.2",
-    "deepmerge-json": "^1.5.0",
-    "framer-motion": "^10.16.2",
-    "react": "^18.2.0",
-    "react-aria": "^3.27.0",
-    "react-content-loader": "^6.2.1",
-    "react-dom": "^18.2.0",
-    "react-hot-toast": "^2.4.1",
-    "react-number-format": "^5.3.0",
-    "react-stately": "^3.25.0",
-    "xstate": "^4.38.2",
-    "zustand": "^4.4.1"
+    "@xstate/react": "3.2.2",
+    "deepmerge-json": "1.5.0",
+    "framer-motion": "10.16.2",
+    "react-aria": "3.27.0",
+    "react-content-loader": "6.2.1",
+    "react-hot-toast": "2.4.1",
+    "react-number-format": "5.3.0",
+    "react-stately": "3.25.0",
+    "xstate": "4.38.2",
+    "zustand": "4.4.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.11",
+    "@babel/core": "7.22.11",
     "@chialab/esbuild-plugin-meta-url": "0.17.7",
     "@fuel-stitches/react": "workspace:../../stitches/react",
-    "@react-types/button": "^3.7.4",
-    "@react-types/shared": "^3.19.0",
-    "@storybook/addon-a11y": "^7.4.0",
-    "@storybook/addon-actions": "^7.4.0",
-    "@storybook/addon-essentials": "^7.4.0",
-    "@storybook/addon-interactions": "^7.4.0",
-    "@storybook/addon-links": "^7.4.0",
-    "@storybook/addon-storysource": "^7.4.0",
+    "@fuel-ui/css": "workspace:*",
+    "@fuel-ui/icons": "workspace:~",
+    "@react-types/button": "3.7.4",
+    "@react-types/shared": "3.19.0",
+    "@storybook/addon-a11y": "7.4.0",
+    "@storybook/addon-actions": "7.4.0",
+    "@storybook/addon-essentials": "7.4.0",
+    "@storybook/addon-interactions": "7.4.0",
+    "@storybook/addon-links": "7.4.0",
+    "@storybook/addon-storysource": "7.4.0",
     "@storybook/addon-viewport": "7.4.0",
-    "@storybook/addons": "^7.4.0",
-    "@storybook/api": "^7.4.0",
-    "@storybook/components": "^7.4.0",
-    "@storybook/core-events": "^7.4.0",
+    "@storybook/addons": "7.4.0",
+    "@storybook/api": "7.4.0",
+    "@storybook/components": "7.4.0",
+    "@storybook/core-events": "7.4.0",
     "@storybook/manager-api": "7.4.0",
     "@storybook/preview-api": "7.4.0",
-    "@storybook/react": "^7.4.0",
-    "@storybook/react-vite": "^7.4.0",
-    "@storybook/testing-library": "^0.2.0",
-    "@storybook/theming": "^7.4.0",
-    "@storybook/types": "^7.4.0",
+    "@storybook/react": "7.4.0",
+    "@storybook/react-vite": "7.4.0",
+    "@storybook/testing-library": "0.2.0",
+    "@storybook/theming": "7.4.0",
+    "@storybook/types": "7.4.0",
     "@testing-library/jest-dom": "6.1.2",
-    "@types/chrome": "^0.0.244",
-    "@types/color": "^3.0.3",
-    "@types/fs-extra": "^11.0.1",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@xstate/cli": "^0.5.2",
-    "babel-loader": "^9.1.3",
-    "fs-extra": "^11.1.1",
+    "@types/chrome": "0.0.244",
+    "@types/color": "3.0.3",
+    "@types/fs-extra": "11.0.1",
+    "@types/react": "18.2.21",
+    "@types/react-dom": "18.2.7",
+    "@xstate/cli": "0.5.2",
+    "babel-loader": "9.1.3",
+    "fs-extra": "11.1.1",
+    "fuels": "0.74.0",
     "globby": "13.2.2",
-    "lodash": "^4.17.21",
-    "storybook": "^7.4.0",
-    "storybook-dark-mode": "^3.0.1",
-    "ts-jest": "^29.1.1",
-    "tsconfig-paths-webpack-plugin": "^4.1.0",
+    "lodash": "4.17.21",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "storybook": "7.4.0",
+    "storybook-dark-mode": "3.0.1",
+    "ts-jest": "29.1.1",
+    "tsconfig-paths-webpack-plugin": "4.1.0",
     "typescript": "5.2.2",
-    "vite": "^4.4.9",
-    "vite-tsconfig-paths": "^4.2.0",
+    "vite": "4.4.9",
+    "vite-tsconfig-paths": "4.2.0",
     "webpack": "5.88.2",
-    "yargs": "^17.7.2"
+    "yargs": "17.7.2"
   }
 }

design-system/react/src/components/Asset/Asset.tsx

@@ -1,4 +1,4 @@
-import { bn } from '@fuel-ts/math';
+import { bn } from 'fuels';
 import { createContext, useContext } from 'react';
 import { useStyles } from '~/hooks';
 import { useStrictedChildren } from '~/hooks/useStrictedChildren';

design-system/react/src/components/Asset/defs.ts

@@ -1,4 +1,4 @@
-import type { BNInput } from '@fuel-ts/math';
+import type { BNInput } from 'fuels';
 import type { ComponentProps, ReactNode } from 'react';
 import type { Components } from '~/utils/components-list';
 import type { CreateComponent } from '~/utils/system';

design-system/react/src/components/InputAmount/InputAmount.stories.tsx

@@ -1,8 +1,8 @@
 /// <reference types="@storybook/types" />
-import type { BN } from '@fuel-ts/math';
-import { bn } from '@fuel-ts/math';
 import { action } from '@storybook/addon-actions';
 import type { StoryFn } from '@storybook/react';
+import type { BN } from 'fuels';
+import { bn } from 'fuels';
 import { useEffect, useState } from 'react';
 
 import { Box } from '../Box';

design-system/react/src/components/InputAmount/InputAmount.test.tsx

@@ -1,6 +1,6 @@
-import type { BN } from '@fuel-ts/math';
-import { bn } from '@fuel-ts/math';
 import { fireEvent, render, screen, testA11y } from '@fuels/jest';
+import type { BN } from 'fuels';
+import { bn } from 'fuels';
 import { useState } from 'react';
 
 import type { InputAmountProps } from './InputAmount';

design-system/react/src/components/InputAmount/InputAmount.tsx

@@ -1,7 +1,7 @@
-import type { BN } from '@fuel-ts/math';
-import { bn, format } from '@fuel-ts/math';
 import { cssObj } from '@fuel-ui/css';
 import type { PressEvent } from '@react-types/shared';
+import type { BN } from 'fuels';
+import { bn, format } from 'fuels';
 import { useEffect, useState } from 'react';
 import type { FC } from 'react';
 

design-system/react/src/components/InputAmount/utils.tsx

@@ -1,4 +1,4 @@
-import { bn } from '@fuel-ts/math';
+import { bn } from 'fuels';
 
 export const DECIMAL_UNITS = 9;
 

design-system/tokens/package.json

@@ -38,9 +38,9 @@
     "update:tokens": "pnpm build && pnpm copy-sets"
   },
   "dependencies": {
-    "@radix-ui/colors": "^2.1.0",
-    "chroma-js": "^2.4.2",
-    "copy-to-clipboard": "^3.3.3",
-    "lodash": "^4.17.21"
+    "@radix-ui/colors": "2.1.0",
+    "chroma-js": "2.4.2",
+    "copy-to-clipboard": "3.3.3",
+    "lodash": "4.17.21"
   }
 }