Merge branch 'twrnc-package' of https://github.com/MetaMask/metamask-…

…design-system into twrnc-package

apps/storybook-react/.storybook/main.ts

@@ -38,10 +38,6 @@ const config: StorybookConfig = {
           __dirname,
           '../../../node_modules/@metamask/design-tokens',
         ),
-        '@components': path.resolve(
-          __dirname,
-          '../packages/react-components/src',
-        ),
       };
     }
     return config;

apps/storybook-react/package.json

@@ -24,6 +24,7 @@
     "@types/prop-types": "^15",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

apps/storybook-react/vite.config.ts

@@ -1,14 +1,6 @@
-// import path from 'path';
+import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-  resolve: {
-    // TO DO: Update when react component package is created
-    // alias: {
-    //   '@components': path.resolve(
-    //     __dirname,
-    //     '../packages/react-components/src',
-    //   ),
-    // },
-  },
+  plugins: [react()],
 });

packages/design-system-react/jest.config.js

@@ -14,6 +14,9 @@ module.exports = merge(baseConfig, {
   // The display name when running multiple projects
   displayName,
 
+  // Add coverage ignore patterns
+  coveragePathIgnorePatterns: ['index.ts'],
+
   // An object that configures minimum threshold enforcement for coverage results
   coverageThreshold: {
     global: {

packages/design-system-react/src/components/button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';

packages/design-system-react/src/components/index.ts

@@ -0,0 +1,5 @@
+export { Text, TextVariant } from './text';
+export type { TextProps } from './text';
+
+export { Button } from './button';
+export type { ButtonProps } from './button';

packages/design-system-react/src/Text.tsx → packages/design-system-react/src/components/text/Text.tsx

@@ -16,7 +16,7 @@ export enum TextVariant {
   BodyXs = 'body-xs',
 }
 
-interface TextProps {
+export interface TextProps {
   variant: TextVariant;
   children: React.ReactNode;
   className?: string;

packages/design-system-react/src/components/text/index.ts

@@ -0,0 +1,2 @@
+export { Text, TextVariant } from './Text';
+export type { TextProps } from './Text';

packages/design-system-react/src/index.ts

@@ -1,2 +1 @@
-export { Button } from './Button';
-export { Text } from './Text';
+export * from './components';

yarn.lock

@@ -77,7 +77,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.1.0, @babel/core@npm:^7.12.10, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.0, @babel/core@npm:^7.23.5, @babel/core@npm:^7.7.2, @babel/core@npm:^7.8.0":
+"@babel/core@npm:^7.1.0, @babel/core@npm:^7.12.10, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.0, @babel/core@npm:^7.23.5, @babel/core@npm:^7.25.2, @babel/core@npm:^7.7.2, @babel/core@npm:^7.8.0":
   version: 7.26.0
   resolution: "@babel/core@npm:7.26.0"
   dependencies:
@@ -1358,7 +1358,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx-self@npm:^7.0.0":
+"@babel/plugin-transform-react-jsx-self@npm:^7.0.0, @babel/plugin-transform-react-jsx-self@npm:^7.24.7":
   version: 7.25.9
   resolution: "@babel/plugin-transform-react-jsx-self@npm:7.25.9"
   dependencies:
@@ -1369,7 +1369,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx-source@npm:^7.0.0":
+"@babel/plugin-transform-react-jsx-source@npm:^7.0.0, @babel/plugin-transform-react-jsx-source@npm:^7.24.7":
   version: 7.25.9
   resolution: "@babel/plugin-transform-react-jsx-source@npm:7.25.9"
   dependencies:
@@ -3445,6 +3445,7 @@ __metadata:
     "@types/prop-types": "npm:^15"
     "@types/react": "npm:^18.2.0"
     "@types/react-dom": "npm:^18.2.0"
+    "@vitejs/plugin-react": "npm:^4.3.3"
     autoprefixer: "npm:^10.4.20"
     prop-types: "npm:^15.8.1"
     react: "npm:^18.2.0"
@@ -5296,7 +5297,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.14, @types/babel__core@npm:^7.18.0":
+"@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.14, @types/babel__core@npm:^7.18.0, @types/babel__core@npm:^7.20.5":
   version: 7.20.5
   resolution: "@types/babel__core@npm:7.20.5"
   dependencies:
@@ -5803,6 +5804,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitejs/plugin-react@npm:^4.3.3":
+  version: 4.3.3
+  resolution: "@vitejs/plugin-react@npm:4.3.3"
+  dependencies:
+    "@babel/core": "npm:^7.25.2"
+    "@babel/plugin-transform-react-jsx-self": "npm:^7.24.7"
+    "@babel/plugin-transform-react-jsx-source": "npm:^7.24.7"
+    "@types/babel__core": "npm:^7.20.5"
+    react-refresh: "npm:^0.14.2"
+  peerDependencies:
+    vite: ^4.2.0 || ^5.0.0
+  checksum: 10/816b47c54aefce198ce2fb2b3e63b5f158ab33b04713dbec0e780a89c5126d4ea6b08544972464c43096b16e90e7f467fcf19692fad30d4f8ca5bf9a386f38b3
+  languageName: node
+  linkType: hard
+
 "@vitest/expect@npm:2.0.5":
   version: 2.0.5
   resolution: "@vitest/expect@npm:2.0.5"
@@ -16954,6 +16970,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-refresh@npm:^0.14.2":
+  version: 0.14.2
+  resolution: "react-refresh@npm:0.14.2"
+  checksum: 10/512abf97271ab8623486061be04b608c39d932e3709f9af1720b41573415fa4993d0009fa5138b6705b60a98f4102f744d4e26c952b14f41a0e455521c6be4cc
+  languageName: node
+  linkType: hard
+
 "react-refresh@npm:^0.4.0":
   version: 0.4.3
   resolution: "react-refresh@npm:0.4.3"