feat(formulus): use ODE tokens and components (fixes #291)

.github/workflows/ci.yml

@@ -77,7 +77,16 @@ jobs:
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: 'npm'
-          cache-dependency-path: formulus/package-lock.json
+          cache-dependency-path: |
+            formulus/package-lock.json
+            packages/tokens/package-lock.json
+
+      - name: Install and build @ode/tokens
+        working-directory: .
+        run: |
+          cd packages/tokens
+          npm install
+          npm run build
 
       - name: Install dependencies
         run: npm install
@@ -262,19 +271,19 @@ jobs:
           echo "| Synkronus | ${{ needs.synkronus.result }} |" >> $GITHUB_STEP_SUMMARY
           echo "| Synkronus CLI | ${{ needs.synkronus-cli.result }} |" >> $GITHUB_STEP_SUMMARY
 
-          if [ "${{ needs.formulus.result }}" != "success" ] && [ "${{ needs.formulus.result }}" != "skipped" ]; then
+          if [ "${{ needs.formulus.result }}" == "failure" ]; then
             echo "❌ Formulus CI failed"
             exit 1
           fi
-          if [ "${{ needs.formulus-formplayer.result }}" != "success" ] && [ "${{ needs.formulus-formplayer.result }}" != "skipped" ]; then
+          if [ "${{ needs.formulus-formplayer.result }}" == "failure" ]; then
             echo "❌ Formulus Formplayer CI failed"
             exit 1
           fi
-          if [ "${{ needs.synkronus.result }}" != "success" ] && [ "${{ needs.synkronus.result }}" != "skipped" ]; then
+          if [ "${{ needs.synkronus.result }}" == "failure" ]; then
             echo "❌ Synkronus CI failed"
             exit 1
           fi
-          if [ "${{ needs.synkronus-cli.result }}" != "success" ] && [ "${{ needs.synkronus-cli.result }}" != "skipped" ]; then
+          if [ "${{ needs.synkronus-cli.result }}" == "failure" ]; then
             echo "❌ Synkronus CLI CI failed"
             exit 1
           fi

.github/workflows/formulus-android.yml

@@ -93,16 +93,16 @@ jobs:
             packages/tokens/package-lock.json
             packages/tokens/package.json
 
-      - name: Install npm dependencies (formulus)
-        working-directory: formulus
-        run: npm ci
-
       - name: Install and build @ode/tokens
         working-directory: packages/tokens
         run: |
           npm install
           npm run build
 
+      - name: Install npm dependencies (formulus)
+        working-directory: formulus
+        run: npm ci
+
       - name: Set up Java
         uses: actions/setup-java@v4
         with:

Dockerfile

@@ -31,6 +31,7 @@ COPY packages/tokens/package*.json ./packages/tokens/
 COPY packages/tokens/package-lock.json ./packages/tokens/
 COPY packages/tokens/style-dictionary.config.js ./packages/tokens/
 COPY packages/tokens/config.json ./packages/tokens/
+COPY packages/tokens/scripts ./packages/tokens/scripts
 COPY packages/tokens/src ./packages/tokens/src
 COPY packages/components/package*.json ./packages/components/
 COPY synkronus-portal/package*.json ./synkronus-portal/

formulus/metro.config.js

@@ -1,15 +1,58 @@
 import { getDefaultConfig, mergeConfig } from '@react-native/metro-config';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
+
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+/** Monorepo root (parent of formulus) so Metro can resolve @ode/tokens and @ode/components */
+const monorepoRoot = path.resolve(__dirname, '..');
+
+/**
+ * Force a single React/react-native instance so hooks work (avoids "Invalid hook call" / "useState of null").
+ * Without this, @ode/components would use its own node_modules/react and we'd have two React copies.
+ */
+const projectRoot = __dirname;
+
+/**
+ * Force react and react-native to always resolve from the app's node_modules
+ * (avoids incomplete copy in packages/components). react-native-svg only uses
+ * extraNodeModules so Metro resolves its real entry (lib/commonjs/index.js).
+ */
+const forcedModules = {
+  react: path.resolve(projectRoot, 'node_modules/react'),
+  'react-native': path.resolve(projectRoot, 'node_modules/react-native'),
+};
+const extraModules = {
+  ...forcedModules,
+  'react-native-svg': path.resolve(
+    projectRoot,
+    'node_modules/react-native-svg',
+  ),
+};
+
 /**
  * Metro configuration
  * https://reactnative.dev/docs/metro
  *
  * @type {import('@react-native/metro-config').MetroConfig}
  */
-const config = {};
+const config = {
+  watchFolders: [monorepoRoot],
+  resolver: {
+    unstable_enableSymlinks: true,
+    unstable_enablePackageExports: true,
+    extraNodeModules: extraModules,
+    resolveRequest(context, moduleName, platform) {
+      if (forcedModules[moduleName]) {
+        return {
+          type: 'sourceFile',
+          filePath: path.join(forcedModules[moduleName], 'index.js'),
+        };
+      }
+      return context.resolveRequest(context, moduleName, platform);
+    },
+  },
+};
 
 export default mergeConfig(getDefaultConfig(__dirname), config);