@itcase/ui-react-native 1.10.81

package/demoApp/metro.config.js

@@ -0,0 +1,296 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+const path = require('path')
+const fs = require('fs')
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config')
+const { withStorybook } = require('@storybook/react-native/metro/withStorybook')
+
+const projectRoot = __dirname
+const defaultConfig = getDefaultConfig(projectRoot)
+
+/**
+ * Metro configuration (demoApp: packages/react-native/demoApp)
+ * https://reactnative.dev/docs/metro
+ *
+ * @type {import('@react-native/metro-config').MetroConfig}
+ */
+const projectNodeModules = path.join(projectRoot, 'node_modules')
+const repoRoot = path.resolve(projectRoot, '../../..')
+const packagesRoot = path.resolve(projectRoot, '../..')
+const uiCoreDirectory = path.join(packagesRoot, 'core')
+const reactNativeDirectory = path.join(projectNodeModules, 'react-native')
+const { assetExts, sourceExts } = defaultConfig.resolver
+
+const nodeModulesPaths = [
+  projectNodeModules,
+  path.resolve(projectRoot, '../node_modules'),
+  path.join(repoRoot, 'node_modules'),
+]
+
+const ICONS_DEFAULT_SVG_MODULE = '@itcase/icons-default/default/svg'
+
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+function toDirectoryBlockList(directoryPath) {
+  return new RegExp(`${escapeRegExp(directoryPath)}[/\\\\].*`)
+}
+
+function resolveInstalledPackageDirectory(packageName) {
+  const packageSegments = packageName.split('/')
+  const searchDirectories = [
+    ...nodeModulesPaths,
+    path.join(projectNodeModules, '@itcase/storybook-config/node_modules'),
+  ]
+
+  for (const nodeModulesDirectory of searchDirectories) {
+    const packageDirectory = path.join(nodeModulesDirectory, ...packageSegments)
+
+    if (fs.existsSync(path.join(packageDirectory, 'package.json'))) {
+      return packageDirectory
+    }
+  }
+
+  return null
+}
+
+/**
+ * Reanimated imports `semver/functions/satisfies` from a Node script in the
+ * JS bundle. Hoisted `semver` is v6 (no `functions/`); v7 lives nested under
+ * reanimated. Hierarchical lookup is off, so Metro cannot see that copy.
+ */
+function resolveSemverPackageDirectory() {
+  const nestedCandidates = [
+    path.join(
+      projectNodeModules,
+      'react-native-reanimated',
+      'node_modules',
+      'semver',
+    ),
+    path.join(
+      projectNodeModules,
+      'react-native-worklets',
+      'node_modules',
+      'semver',
+    ),
+  ]
+  const hoistedCandidates = nodeModulesPaths.map((nodeModulesDirectory) =>
+    path.join(nodeModulesDirectory, 'semver'),
+  )
+
+  return (
+    [...nestedCandidates, ...hoistedCandidates].find((packageDirectory) =>
+      fs.existsSync(path.join(packageDirectory, 'functions', 'satisfies.js')),
+    ) || null
+  )
+}
+
+function resolveIconsDefaultSvg() {
+  const iconsDefaultMain = require.resolve('@itcase/icons-default', {
+    paths: [projectRoot, repoRoot],
+  })
+  const iconsDefaultRoot = path.resolve(path.dirname(iconsDefaultMain), '../..')
+
+  // ESM barrel uses `import Icon from './file.svg'` so svg-transformer
+  // yields a component. CJS `require('.svg')` is `{ default: Component }`.
+  return path.join(iconsDefaultRoot, 'dist/esm/svg/default.js')
+}
+
+function resolveWorkspaceSourceFile(packageDirectory, moduleName, packageName) {
+  if (moduleName !== packageName && !moduleName.startsWith(`${packageName}/`)) {
+    return null
+  }
+
+  const subpath =
+    moduleName === packageName ? '' : moduleName.slice(packageName.length + 1)
+  const sourceCandidates = [
+    path.join(packageDirectory, 'src', subpath, 'index.native.ts'),
+    path.join(packageDirectory, 'src', subpath, 'index.native.tsx'),
+    path.join(packageDirectory, 'src', `${subpath}.native.ts`),
+    path.join(packageDirectory, 'src', `${subpath}.native.tsx`),
+    path.join(packageDirectory, 'src', subpath, 'index.ts'),
+    path.join(packageDirectory, 'src', subpath, 'index.tsx'),
+    path.join(packageDirectory, 'src', `${subpath}.ts`),
+    path.join(packageDirectory, 'src', `${subpath}.tsx`),
+  ]
+
+  return sourceCandidates.find((candidate) => fs.existsSync(candidate)) || null
+}
+
+function isInsideReactNative(filePath) {
+  return filePath.startsWith(`${reactNativeDirectory}${path.sep}`)
+}
+
+/**
+ * RN 0.87 does not export `./src/private/*`. Package-exports wrapping those
+ * files makes `setup-env` call `.default()` on a namespace object.
+ * Relative requires from inside `react-native` must stay file-based.
+ * Package subpaths like `react-native/asset-registry` still use exports.
+ */
+function shouldDisablePackageExports(originModulePath, moduleName) {
+  if (moduleName.startsWith('react-native/src/')) {
+    return true
+  }
+
+  return isInsideReactNative(originModulePath) && moduleName.startsWith('.')
+}
+
+function resolveToFile(filePath) {
+  if (!fs.existsSync(filePath)) {
+    return null
+  }
+
+  return {
+    type: 'sourceFile',
+    filePath: filePath,
+  }
+}
+
+const itcaseWatchFolders = ['@itcase/icons-default', '@itcase/tokens-am']
+  .map((packageName) => path.join(repoRoot, 'node_modules', packageName))
+  .filter((packagePath) => fs.existsSync(packagePath))
+
+const storybookConfigDirectory = resolveInstalledPackageDirectory(
+  '@itcase/storybook-config',
+)
+
+const extraPackageDirectories = Object.fromEntries(
+  [
+    '@storybook/react-native',
+    '@storybook/react-native-ui',
+    '@storybook/react-native-ui-lite',
+  ]
+    .map((packageName) => [
+      packageName,
+      resolveInstalledPackageDirectory(packageName),
+    ])
+    .filter(([, packageDirectory]) => packageDirectory),
+)
+
+const reactNativeSvgDirectory = path.join(
+  projectNodeModules,
+  'react-native-svg',
+)
+const semverPackageDirectory = resolveSemverPackageDirectory()
+
+const config = {
+  resolver: {
+    assetExts: assetExts.filter((ext) => ext !== 'svg'),
+    blockList: [
+      defaultConfig.resolver.blockList,
+      /[/\\]android[/\\](?:build|\.cxx|\.gradle)[/\\]/,
+      toDirectoryBlockList(path.join(repoRoot, 'node_modules/react')),
+      toDirectoryBlockList(path.join(repoRoot, 'node_modules/react-dom')),
+      toDirectoryBlockList(path.join(repoRoot, 'node_modules/react-native')),
+      toDirectoryBlockList(path.join(projectRoot, '../node_modules/react')),
+      toDirectoryBlockList(path.join(projectRoot, '../node_modules/react-dom')),
+      toDirectoryBlockList(
+        path.join(projectRoot, '../node_modules/react-native'),
+      ),
+      toDirectoryBlockList(
+        path.join(uiCoreDirectory, 'src/context/UIProvider'),
+      ),
+      toDirectoryBlockList(
+        path.join(uiCoreDirectory, 'src/hooks/useMediaQueries'),
+      ),
+      toDirectoryBlockList(
+        path.join(uiCoreDirectory, 'src/context/Notifications'),
+      ),
+    ],
+    // Library sources live in packages/react-native; walking node_modules
+    // from there would load a second `react` and break hooks.
+    disableHierarchicalLookup: true,
+    extraNodeModules: {
+      ...(storybookConfigDirectory
+        ? { '@itcase/storybook-config': storybookConfigDirectory }
+        : {}),
+      '@itcase/ui-core': uiCoreDirectory,
+      react: path.join(projectNodeModules, 'react'),
+      'react-dom': path.join(projectNodeModules, 'react-dom'),
+      'react-native': reactNativeDirectory,
+      ...(fs.existsSync(reactNativeSvgDirectory)
+        ? { 'react-native-svg': reactNativeSvgDirectory }
+        : {}),
+      ...extraPackageDirectories,
+      ...(semverPackageDirectory ? { semver: semverPackageDirectory } : {}),
+    },
+    nodeModulesPaths: nodeModulesPaths,
+    sourceExts: [...sourceExts, 'svg'],
+    unstable_enablePackageExports: true,
+  },
+  transformer: {
+    babelTransformerPath: path.resolve(projectRoot, 'metro-transformer.js'),
+    // Library assets live outside demoApp (`../src/...`). Default `/assets/../`
+    // URLs 404 on Android; Expo/Metro serve them via `unstable_path`.
+    publicPath: '/assets/?unstable_path=.',
+  },
+  watchFolders: [
+    packagesRoot,
+    uiCoreDirectory,
+    ...itcaseWatchFolders,
+    ...Object.values(extraPackageDirectories),
+    ...(storybookConfigDirectory ? [storybookConfigDirectory] : []),
+  ],
+}
+
+const configWithStorybook = withStorybook(mergeConfig(defaultConfig, config), {
+  configPath: path.resolve(projectRoot, '../.storybook-react-native'),
+  enabled: true,
+  liteMode: true,
+})
+
+configWithStorybook.transformer.publicPath = '/assets/?unstable_path=.'
+
+configWithStorybook.resolver.assetExts =
+  configWithStorybook.resolver.assetExts.filter((ext) => ext !== 'svg')
+
+if (!configWithStorybook.resolver.sourceExts.includes('svg')) {
+  configWithStorybook.resolver.sourceExts = [
+    ...configWithStorybook.resolver.sourceExts,
+    'svg',
+  ]
+}
+
+const nextResolveRequest = configWithStorybook.resolver.resolveRequest
+
+configWithStorybook.resolver.resolveRequest = (
+  context,
+  moduleName,
+  platform,
+) => {
+  if (moduleName === ICONS_DEFAULT_SVG_MODULE) {
+    const iconsDefaultSvgPath = resolveToFile(resolveIconsDefaultSvg())
+
+    if (iconsDefaultSvgPath) {
+      return iconsDefaultSvgPath
+    }
+  }
+
+  const uiCoreFile = resolveWorkspaceSourceFile(
+    uiCoreDirectory,
+    moduleName,
+    '@itcase/ui-core',
+  )
+
+  if (uiCoreFile) {
+    return {
+      type: 'sourceFile',
+      filePath: uiCoreFile,
+    }
+  }
+
+  const resolveContext = shouldDisablePackageExports(
+    context.originModulePath ?? '',
+    moduleName,
+  )
+    ? { ...context, unstable_enablePackageExports: false }
+    : context
+
+  if (typeof nextResolveRequest === 'function') {
+    return nextResolveRequest(resolveContext, moduleName, platform)
+  }
+
+  return resolveContext.resolveRequest(resolveContext, moduleName, platform)
+}
+
+module.exports = configWithStorybook