Fixes

client/package.json

@@ -18,7 +18,8 @@
     "react-native-svg": "^15.1.0",
     "react-native-unistyles": "^2.6.0",
     "react-native-web": "^0.19.10",
-    "react-redux": "^9.1.1"
+    "react-redux": "^9.1.1",
+    "vite-plugin-node-polyfills": "^0.21.0"
   },
   "devDependencies": {
     "@types/react": "latest",

client/src/styles.ts

@@ -1,5 +1,5 @@
 import {UnistylesRegistry} from 'react-native-unistyles';
-import {breakpoints, themes} from 'design/theme';
+import {initialTheme, themes, breakpoints} from 'design/theme';
 
 export type AppThemes = {[K in keyof typeof themes]: typeof themes[K]}
 export type AppBreakpoints = typeof breakpoints
@@ -9,5 +9,6 @@ export default UnistylesRegistry
   .addThemes(themes)
   .addBreakpoints(breakpoints)
   .addConfig({
-    adaptiveThemes: true,
+    initialTheme,
+    adaptiveThemes: false,
   });

design/components/layout/card/Card.docs.mdx

@@ -15,8 +15,7 @@ import {Button} from 'vocs/components';
 :::
 
 ```tsx twoslash
-import React from 'react';
-// ---cut---
+:::twobase:::
 // @log: ↓ Import the component
 :::import:::
 

design/components/layout/card/Card.tsx

@@ -1,4 +1,4 @@
-import {useStyles, createStyleSheet} from 'react-native-unistyles';
+import {useStyles, createStyleSheet} from 'styles';
 import {View, Text} from 'react-native';
 
 export interface CardProps {
@@ -13,7 +13,7 @@ export interface CardProps {
 /**
  * A simple card block component
  * */
-export function Card(props: CardProps) {
+export function Card(props: CardProps): JSX.Element {
   const {styles} = useStyles(stylesheet);
 
   return (

design/lingui.config.ts

@@ -0,0 +1 @@
+export {default} from 'config/lingui';

design/package.json

@@ -2,12 +2,22 @@
   "name": "design",
   "type": "module",
   "private": true,
+  "scripts": {
+    "dev": "exo dev --port 6406",
+    "build": "exo build"
+  },
   "exports": {
     ".": {
-      "import": "./index.ts"
+      "import": "./gen/index.js",
+      "require": "./gen/index.cjs"
     },
     "./theme": {
-      "import": "./theme.ts"
+      "import": "./gen/theme.js",
+      "require": "./gen/theme.cjs"
+    },
+    "./styles": {
+      "import": "./gen/styles.js",
+      "require": "./gen/styles.cjs"
     }
   },
   "dependencies": {
@@ -21,12 +31,14 @@
     "react-native-svg": "^15.1.0",
     "react-native-unistyles": "^2.6.0",
     "react-native-web": "^0.19.10",
-    "react-redux": "^9.1.1"
+    "react-redux": "^9.1.1",
+    "vite-plugin-node-polyfills": "^0.21.0"
   },
   "devDependencies": {
     "@storybook/react": "^8.0.8",
     "@types/react": "latest",
     "@types/react-dom": "latest",
+    "builder": "workspace:*",
     "config": "workspace:*",
     "typescript": "^5.3.2"
   }

design/styles.ts

@@ -0,0 +1,14 @@
+import {UnistylesRegistry} from 'react-native-unistyles';
+import {initialTheme, themes, breakpoints} from 'theme';
+
+export type AppThemes = {[K in keyof typeof themes]: typeof themes[K]}
+export type AppBreakpoints = typeof breakpoints
+
+export * from 'react-native-unistyles';
+export const registry = UnistylesRegistry
+  .addThemes(themes)
+  .addBreakpoints(breakpoints)
+  .addConfig({
+    initialTheme,
+    adaptiveThemes: false,
+  });

design/theme.ts

@@ -1,3 +1,5 @@
+export type Themes = keyof typeof themes;
+
 export const breakpoints = {
   xs: 0,
   sm: 576,
@@ -304,4 +306,4 @@ export const themes = {
   },
 }
 
-export default 'light'
+export const initialTheme: Themes = 'light'

design/vite.config.ts

@@ -0,0 +1 @@
+export {default} from 'builder/vite.design';

library/package.json

@@ -188,7 +188,8 @@
     "redux": "^5.0.1",
     "redux-first-history": "^5.2.0",
     "redux-persist": "^6.0.0",
-    "thumbhash": "^0.1.1"
+    "thumbhash": "^0.1.1",
+    "vite-plugin-node-polyfills": "^0.21.0"
   },
   "devDependencies": {
     "@candlefinance/faster-image": "^1.4.3",

package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "start": "conc -c 'auto' 'pnpm:*-dev'",
     "build": "conc -c 'auto' -g 'pnpm:*-build'",
-    "generate": "pnpm config-build && pnpm translate-build && pnpm builder-build && pnpm library-build",
+    "generate": "pnpm config-build && pnpm translate-build && pnpm builder-build && pnpm library-build && pnpm design-build",
 
     "config-dev": "pnpm --filter ./toolkit/config dev",
     "config-build": "pnpm --filter ./toolkit/config build",
@@ -18,6 +18,10 @@
     "library-dev": "pnpm --filter ./library dev",
     "library-build": "pnpm --filter ./library build",
     "library-publish": "pnpm --filter ./library publish",
+
+    "design-dev": "pnpm --filter ./design dev",
+    "design-build": "pnpm --filter ./design build",
+    "design-publish": "pnpm --filter ./design publish",
 
     "web-dev": "pnpm --filter ./client run dev",
     "web-build": "pnpm --filter ./client run build",