Files
dt-design-system/packages/showcase/mobile/metro.config.js
michael 47e8085581 Make RN components fully theme-driven for multi-brand support
Refactor all 18 React Native components from static DTColors imports to
dynamic useDTTheme() context, enabling proper visual differentiation
when switching between DT and Classic brands.

Key changes:
- Replace static DTColors with theme context in all components
- Add shape tokens (bevel/radius) to DTExtendedTheme interface
- Conditionally render SVG bevels (DT) vs borderRadius (Classic)
- Configure fonts per brand (Tektur for DT, system sans-serif for Classic)
- Update buildThemeFromBrand to parse shape and typography tokens
- Fix Metro config for monorepo singleton resolution

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-06 10:18:39 -08:00

56 lines
1.9 KiB
JavaScript

const { getDefaultConfig } = require('expo/metro-config');
const path = require('path');
const projectRoot = __dirname;
const monorepoRoot = path.resolve(projectRoot, '..', '..', '..');
const config = getDefaultConfig(projectRoot);
// Watch the monorepo root for live changes to sibling packages
config.watchFolders = [monorepoRoot];
// Resolve node_modules from both the project and monorepo root (hoisted)
config.resolver.nodeModulesPaths = [
path.resolve(projectRoot, 'node_modules'),
path.resolve(monorepoRoot, 'node_modules'),
];
// Force singleton packages to always resolve from the mobile project.
// In monorepos, Metro can bundle two copies of react (one from root, one from
// the project) causing "Cannot read property 'use' of null" crashes.
const singletons = ['react', 'react-native', 'react-native-safe-area-context'];
config.resolver.resolveRequest = (context, moduleName, platform) => {
// Check if this is a singleton or a deep import of one (e.g. react/jsx-runtime)
const isSingleton = singletons.some(
(s) => moduleName === s || moduleName.startsWith(s + '/')
);
if (isSingleton) {
// Resolve as if the import originated from the mobile project root
const mobileContext = {
...context,
resolveRequest: undefined,
originModulePath: path.join(projectRoot, 'package.json'),
};
return context.resolveRequest(mobileContext, moduleName, platform);
}
return context.resolveRequest(
{ ...context, resolveRequest: undefined },
moduleName,
platform,
);
};
// Block sibling packages' node_modules to prevent duplicate native modules
const packagesDir = path.join(monorepoRoot, 'packages');
const escapedPath = packagesDir.replace(/[/\\]/g, '[/\\\\]');
config.resolver.blockList = [
new RegExp(
`^${escapedPath}[/\\\\](?!showcase[/\\\\]mobile)[^/\\\\]+[/\\\\]node_modules[/\\\\].*$`
),
];
module.exports = config;