use Vite in @status-im/components

packages/components/package.json

@@ -5,15 +5,16 @@
     "*.css"
   ],
   "private": true,
-  "types": "src/index.tsx",
-  "main": "src/index.tsx",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/types/index.d.ts",
   "files": [
     "types",
     "dist"
   ],
   "scripts": {
-    "dev": "tamagui-build --watch",
-    "build": "tamagui-build",
+    "dev": "TAMAGUI_TARGET='web' vite build --watch --mode development",
+    "build": "TAMAGUI_TARGET='web' vite build",
     "postbuild": "yarn typegen",
     "typegen": "tsc --noEmit false --emitDeclarationOnly || true",
     "lint": "eslint src",
@@ -50,8 +51,8 @@
     "@storybook/react": "7.0.0-beta.21",
     "@storybook/react-vite": "7.0.0-beta.21",
     "@storybook/testing-library": "^0.0.13",
-    "@tamagui/build": "1.7.7",
     "@tamagui/vite-plugin": "1.7.7",
+    "@vitejs/plugin-react-swc": "^3.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native-svg": "^13.8.0",

packages/components/src/topbar/topbar.tsx

@@ -1,4 +1,3 @@
-import { Divider, IconButton, Paragraph } from '@status-im/components'
 import {
   ArrowLeftIcon,
   CommunitiesIcon,
@@ -14,7 +13,10 @@ import {
 import { Stack, Text } from '@tamagui/core'
 import { BlurView } from 'expo-blur'
 
+import { Divider } from '../divider'
 import { DropdownMenu } from '../dropdown-menu'
+import { IconButton } from '../icon-button'
+import { Paragraph } from '../typography'
 
 import type { Channel } from '../sidebar/mock-data'
 

packages/components/vite.config.ts

@@ -2,7 +2,7 @@ import { tamaguiPlugin } from '@tamagui/vite-plugin'
 import react from '@vitejs/plugin-react-swc'
 import { defineConfig } from 'vite'
 
-import type { PluginOption } from 'vite'
+import { dependencies, peerDependencies } from './package.json'
 
 const tamaguiConfig = {
   components: [],
@@ -10,14 +10,40 @@ const tamaguiConfig = {
   // useReactNativeWebLite: true,
 }
 
-// https://vitejs.dev/config
-export default defineConfig({
-  define: {
-    TAMAGUI_TARGET: JSON.stringify('web'),
-  },
-  plugins: [
-    react(),
-    tamaguiPlugin(tamaguiConfig) as PluginOption,
-    // tamaguiExtractPlugin(tamaguiConfig)
-  ],
+const external = [
+  ...Object.keys(dependencies || {}),
+  ...Object.keys(peerDependencies || {}),
+].map(name => new RegExp(`^${name}(/.*)?`))
+
+export default defineConfig(({ mode }) => {
+  return {
+    define: {
+      TAMAGUI_TARGET: JSON.stringify('web'),
+    },
+    build: {
+      target: 'es2020',
+      lib: {
+        entry: './src/index.tsx',
+        fileName: 'index',
+        formats: ['es', 'cjs'],
+      },
+      sourcemap: true,
+      emptyOutDir: mode === 'production',
+      rollupOptions: {
+        external,
+      },
+    },
+
+    plugins: [
+      react({
+        // jsxRuntime: 'classic',
+      }),
+      tamaguiPlugin(tamaguiConfig),
+      // tamaguiExtractPlugin(tamaguiConfig)
+    ],
+
+    test: {
+      environment: 'happy-dom',
+    },
+  }
 })