Fix Circuit UI CI validation checks

example/babel.config.js

@@ -1,17 +1,43 @@
 const path = require('path');
-const { getConfig } = require('react-native-builder-bob/babel-config');
 const pkg = require('../packages/ui/package.json');
 
-const root = path.resolve(__dirname, '../packages/ui');
+const libraryRoot = path.resolve(__dirname, '../packages/ui');
+const tokensRoot = path.resolve(__dirname, '../packages/tokens');
+const librarySource = path.join(libraryRoot, 'src');
 
 module.exports = function (api) {
   api.cache(true);
 
-  return getConfig(
-    {
-      presets: ['babel-preset-expo'],
-      plugins: ['react-native-reanimated/plugin'],
-    },
-    { root, pkg }
-  );
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: ['react-native-reanimated/plugin'],
+    overrides: [
+      {
+        exclude: /\/node_modules\//,
+        plugins: [
+          [
+            require.resolve('babel-plugin-module-resolver'),
+            {
+              extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
+              alias: {
+                'react-native-circuit-ui': path.join(libraryRoot, pkg.source),
+                '@circuit-ui/tokens': path.join(tokensRoot, 'src/index.ts'),
+              },
+            },
+          ],
+        ],
+      },
+      {
+        include: librarySource,
+        presets: [
+          [
+            require.resolve('react-native-builder-bob/babel-preset'),
+            {
+              supportsStaticESM: true,
+            },
+          ],
+        ],
+      },
+    ],
+  };
 };

example/metro.config.js

@@ -23,13 +23,38 @@ config.server = {
   port: 8083,
 };
 
+const defaultResolveRequest = config.resolver?.resolveRequest;
+
 // Allow Metro to resolve workspace packages hoisted to root node_modules
 config.resolver = {
   ...config.resolver,
+  extraNodeModules: {
+    ...(config.resolver.extraNodeModules ?? {}),
+    'react-native-circuit-ui': path.resolve(repoRoot, 'packages/ui/src'),
+    '@circuit-ui/tokens': path.resolve(repoRoot, 'packages/tokens/src'),
+  },
   nodeModulesPaths: [
     path.resolve(repoRoot, 'node_modules'),
     path.resolve(__dirname, 'node_modules'),
   ],
+  resolveRequest(context, moduleName, platform) {
+    if (moduleName === 'react-native-circuit-ui') {
+      return {
+        type: 'sourceFile',
+        filePath: path.resolve(repoRoot, 'packages/ui/src/index.tsx'),
+      };
+    }
+
+    if (moduleName === '@circuit-ui/tokens') {
+      return {
+        type: 'sourceFile',
+        filePath: path.resolve(repoRoot, 'packages/tokens/src/index.ts'),
+      };
+    }
+
+    const resolver = defaultResolveRequest ?? context.resolveRequest;
+    return resolver(context, moduleName, platform);
+  },
 };
 
 // Watch packages/tokens so hot reload works when token values change

example/package.json

@@ -22,7 +22,8 @@
     "react-native-gesture-handler": "~2.20.2",
     "react-native-reanimated": "~3.16.7",
     "react-native-svg": "^15.11.2",
-    "react-native-web": "~0.19.13"
+    "react-native-web": "~0.19.13",
+    "zustand": "^5.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

example/src/FeaturesShowcase.tsx

@@ -12,15 +12,15 @@ import {
 } from 'react-native-circuit-ui';
 
 // Feature imports
-import { DashboardTabBar } from '../../src/features/dashboard';
-import type { DashboardTab } from '../../src/features/dashboard';
-import { WelcomeView } from '../../src/features/welcome';
-import { ProfileCard, SignInView } from '../../src/features/account';
-import { FeaturedCard } from '../../src/features/discover';
-import { TrophiesView } from '../../src/features/trophies';
-import type { Trophy } from '../../src/features/trophies';
-import { MyCircuitsView } from '../../src/features/circuits';
-import type { MyCircuitsState } from '../../src/features/circuits';
+import { DashboardTabBar } from '../../packages/ui/src/features/dashboard';
+import type { DashboardTab } from '../../packages/ui/src/features/dashboard';
+import { WelcomeView } from '../../packages/ui/src/features/welcome';
+import { ProfileCard, SignInView } from '../../packages/ui/src/features/account';
+import { FeaturedCard } from '../../packages/ui/src/features/discover';
+import { TrophiesView } from '../../packages/ui/src/features/trophies';
+import type { Trophy } from '../../packages/ui/src/features/trophies';
+import { MyCircuitsView } from '../../packages/ui/src/features/circuits';
+import type { MyCircuitsState } from '../../packages/ui/src/features/circuits';
 
 const Section = ({
   title,

example/src/PlaygroundShowcase.tsx

@@ -10,28 +10,28 @@ import { create } from 'zustand';
 import {
   SongToolbar,
   SongMixerTabBar,
-} from '../../src/features/playground/components/SongView';
-import { TrackView } from '../../src/features/playground/components/TrackView';
-import { MixerView } from '../../src/features/playground/components/Mixer';
-import { DrumPadsView } from '../../src/features/playground/components/DrumPads';
-import { PianoKeyboard } from '../../src/features/playground/components/PianoKeyboard';
-import { SongSectionsView } from '../../src/features/playground/components/Sections';
-import { SoundBankView } from '../../src/features/playground/components/SoundBank';
-import { PlaygroundsDashboard } from '../../src/features/playground/components/PlaygroundsDashboard';
-import { AddTrackMenu } from '../../src/features/playground/components/Toolbar';
-import { OnboardingSheet } from '../../src/features/playground/components/Onboarding';
-import { ClipEditorView } from '../../src/features/playground/components/ClipEditor';
-import { BottomPanel } from '../../src/features/playground/components/BottomPanel';
-import { SongStoreProvider } from '../../src/features/playground/stores/playgroundStore';
-import type { SongStore } from '../../src/features/playground/stores/playgroundStore';
+} from '../../packages/ui/src/features/playground/components/SongView';
+import { TrackView } from '../../packages/ui/src/features/playground/components/TrackView';
+import { MixerView } from '../../packages/ui/src/features/playground/components/Mixer';
+import { DrumPadsView } from '../../packages/ui/src/features/playground/components/DrumPads';
+import { PianoKeyboard } from '../../packages/ui/src/features/playground/components/PianoKeyboard';
+import { SongSectionsView } from '../../packages/ui/src/features/playground/components/Sections';
+import { SoundBankView } from '../../packages/ui/src/features/playground/components/SoundBank';
+import { PlaygroundsDashboard } from '../../packages/ui/src/features/playground/components/PlaygroundsDashboard';
+import { AddTrackMenu } from '../../packages/ui/src/features/playground/components/Toolbar';
+import { OnboardingSheet } from '../../packages/ui/src/features/playground/components/Onboarding';
+import { ClipEditorView } from '../../packages/ui/src/features/playground/components/ClipEditor';
+import { BottomPanel } from '../../packages/ui/src/features/playground/components/BottomPanel';
+import { SongStoreProvider } from '../../packages/ui/src/features/playground/stores/playgroundStore';
+import type { SongStore } from '../../packages/ui/src/features/playground/stores/playgroundStore';
 
 // Mock data
 import {
   createMockSong,
   createMockPlaygroundsList,
   createMockDrumClip,
   createDrumSamples,
-} from '../../src/features/playground/mocks';
+} from '../../packages/ui/src/features/playground/mocks';
 
 // Create a mock store for showcase components that use useSongContext
 const noop = () => {};

package.json

@@ -8,53 +8,18 @@
   "packageManager": "yarn@3.6.1",
   "scripts": {
     "build": "yarn workspaces foreach -A run prepare",
+    "prepare": "yarn workspace @circuit-ui/tokens prepare && yarn workspace @circuit-ui/core prepare",
     "test": "yarn workspace @circuit-ui/core test:unit",
     "test:visual": "yarn workspace @circuit-ui/core test:visual",
     "test:unit": "yarn workspace @circuit-ui/core test:unit",
     "test:screenshots": "./scripts/capture-screenshots.sh",
     "typecheck": "yarn workspaces foreach -A run typecheck",
-    "lint": "eslint \"packages/*/src/**/*.{js,ts,tsx}\"",
-    "example": "yarn workspace @circuit-ui-example"
+    "lint": "yarn workspace @circuit-ui/core lint",
+    "example": "yarn workspace react-native-circuit-ui-example"
   },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
     ]
-  },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@react-native",
-      "prettier"
-    ],
-    "rules": {
-      "react/react-in-jsx-scope": "off",
-      "prettier/prettier": [
-        "error",
-        {
-          "quoteProps": "consistent",
-          "singleQuote": true,
-          "tabWidth": 2,
-          "trailingComma": "es5",
-          "useTabs": false
-        }
-      ],
-      "react-native/no-inline-styles": "off",
-      "no-bitwise": "off",
-      "no-void": "off",
-      "no-shadow": "off",
-      "@typescript-eslint/no-shadow": "off"
-    }
-  },
-  "eslintIgnore": [
-    "node_modules/",
-    "packages/*/lib/"
-  ],
-  "prettier": {
-    "quoteProps": "consistent",
-    "singleQuote": true,
-    "tabWidth": 2,
-    "trailingComma": "es5",
-    "useTabs": false
   }
 }

packages/ui/package.json

@@ -323,5 +323,41 @@
         "infile": "CHANGELOG.md"
       }
     }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native",
+      "prettier"
+    ],
+    "rules": {
+      "react/react-in-jsx-scope": "off",
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ],
+      "react-native/no-inline-styles": "off",
+      "no-bitwise": "off",
+      "no-void": "off",
+      "no-shadow": "off",
+      "@typescript-eslint/no-shadow": "off"
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "packages/*/lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
   }
 }