@medway-ui/native 1.0.3 → 1.1.1

package/setup/babel-brownfield.js

@@ -0,0 +1,50 @@
+const path = require('path');
+
+const DEFAULT_APP_PAGES_DIR = 'medway-ui';
+
+function createNativeWindScopeTest(options = {}) {
+  const appPagesDir = options.appPagesDir ?? DEFAULT_APP_PAGES_DIR;
+  const appPagesSegment = `${path.sep}pages${path.sep}${appPagesDir}${path.sep}`;
+
+  return function isNativeWindScope(filename) {
+    return (
+      filename.includes(`${path.sep}@medway-ui${path.sep}native${path.sep}`) ||
+      filename.includes(`${path.sep}medway-ui${path.sep}native${path.sep}`) ||
+      filename.includes(appPagesSegment)
+    );
+  };
+}
+
+function loadCssInteropBabelPlugin(projectRoot) {
+  return require(
+    require.resolve('react-native-css-interop/dist/babel-plugin', {
+      paths: [projectRoot],
+    }),
+  ).default;
+}
+
+/**
+ * Override Babel para NativeWind apenas em arquivos medway-ui + pasta de telas migradas.
+ * Apps legados: presets expo normais + este override (sem nativewind global).
+ *
+ * @param {object} [options]
+ * @param {string} [options.appPagesDir='medway-ui'] - subpasta de src/pages para telas novas
+ * @param {unknown[]} [options.plugins=[]] - plugins do app repetidos no override (reanimated por ultimo)
+ */
+function createBrownfieldOverride(options = {}) {
+  const { plugins = [], projectRoot = process.cwd() } = options;
+  const test = createNativeWindScopeTest(options);
+  const cssInteropPlugin = loadCssInteropBabelPlugin(projectRoot);
+
+  return {
+    test,
+    presets: [['babel-preset-expo', { jsxImportSource: 'nativewind' }]],
+    plugins: [cssInteropPlugin, ...plugins],
+  };
+}
+
+module.exports = {
+  createBrownfieldOverride,
+  createNativeWindScopeTest,
+  DEFAULT_APP_PAGES_DIR,
+};

package/setup/createMedwayUiNavigator.tsx

@@ -0,0 +1,94 @@
+import React, { Suspense, lazy, type ComponentType } from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+type MedwayUiScreenContext = {
+  keys: () => string[];
+  (id: string): { default: ComponentType<object> };
+};
+
+type CreateMedwayUiNavigatorOptions = {
+  /** Primeira tela ao abrir o stack sem `screen` na rota */
+  initialRouteName?: string;
+};
+
+let cssBootstrapped = false;
+
+async function ensureMedwayUiCss() {
+  if (!cssBootstrapped) {
+    await import('./MedwayUiProvider');
+    cssBootstrapped = true;
+  }
+}
+
+function parseScreenName(moduleKey: string): string | null {
+  const match = moduleKey.match(/^\.\/([^/]+)\/index\.tsx$/);
+  return match?.[1] ?? null;
+}
+
+function createLazyScreen(
+  context: MedwayUiScreenContext,
+  moduleKey: string,
+) {
+  const LazyScreen = lazy(async () => {
+    await ensureMedwayUiCss();
+    return { default: context(moduleKey).default };
+  });
+
+  return function MedwayUiLazyScreen(props: object) {
+    return (
+      <Suspense fallback={null}>
+        <LazyScreen {...props} />
+      </Suspense>
+    );
+  };
+}
+
+/**
+ * Cria um Stack Navigator com todas as telas em subpastas (NomeDaTela/index.tsx).
+ *
+ * No app — uma vez, com require.context estático para o Metro.
+ * Novas telas: crie pasta em pages/medway-ui sem editar registro manual.
+ */
+function createMedwayUiNavigator(
+  context: MedwayUiScreenContext,
+  options: CreateMedwayUiNavigatorOptions = {},
+) {
+  const Stack = createNativeStackNavigator();
+
+  const screens = context
+    .keys()
+    .map((key) => ({ key, name: parseScreenName(key) }))
+    .filter((entry): entry is { key: string; name: string } => entry.name != null);
+
+  if (screens.length === 0) {
+    throw new Error(
+      '[@medway-ui/native] Nenhuma tela em pages/medway-ui. Crie ex.: Showcase/index.tsx',
+    );
+  }
+
+  const initialRouteName = options.initialRouteName ?? screens[0].name;
+
+  function MedwayUiNavigator() {
+    return (
+      <Stack.Navigator
+        initialRouteName={initialRouteName}
+        screenOptions={{ headerShown: false, animation: 'slide_from_right' }}
+      >
+        {screens.map(({ key, name }) => (
+          <Stack.Screen
+            key={name}
+            name={name}
+            component={createLazyScreen(context, key)}
+          />
+        ))}
+      </Stack.Navigator>
+    );
+  }
+
+  const screenNames = screens.map(({ name }) => name);
+
+  return { MedwayUiNavigator, screenNames, initialRouteName };
+}
+
+export { createMedwayUiNavigator };
+export type { CreateMedwayUiNavigatorOptions, MedwayUiScreenContext };

package/setup/global.css

@@ -0,0 +1,5 @@
+@import './tokens.native.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/setup/index.ts

@@ -0,0 +1,12 @@
+export { MedwayUiProvider } from './MedwayUiProvider';
+export type {
+  MedwayUiProviderProps,
+  MedwayUiTheme,
+  MedwayUiColorScheme,
+} from './MedwayUiProvider';
+export { lazyMedwayUiScreen } from './lazyScreen';
+export { createMedwayUiNavigator } from './createMedwayUiNavigator';
+export type {
+  CreateMedwayUiNavigatorOptions,
+  MedwayUiScreenContext,
+} from './createMedwayUiNavigator';

package/setup/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+type RequireContext = {
+  keys(): string[];
+  (id: string): { default: React.ComponentType<any> };
+};
+
+type MedwayUiNavigatorResult = {
+  MedwayUiNavigator: React.ComponentType;
+  screenNames: string[];
+};
+
+function extractScreenName(key: string): string {
+  return key.replace(/^\.\//, '').replace(/\/index\.tsx$/, '');
+}
+
+function createMedwayUiNavigator(context: RequireContext): MedwayUiNavigatorResult {
+  const Stack = createNativeStackNavigator();
+
+  const screens = context.keys().map((key) => ({
+    name: extractScreenName(key),
+    component: context(key).default,
+  }));
+
+  const screenNames = screens.map((s) => s.name);
+
+  function MedwayUiNavigator() {
+    return (
+      <Stack.Navigator screenOptions={{ headerShown: false }}>
+        {screens.map(({ name, component }) => (
+          <Stack.Screen key={name} name={name} component={component} />
+        ))}
+      </Stack.Navigator>
+    );
+  }
+
+  return { MedwayUiNavigator, screenNames };
+}
+
+export { createMedwayUiNavigator };
+export type { MedwayUiNavigatorResult };

package/setup/lazyScreen.tsx

@@ -0,0 +1,14 @@
+import React, { type ComponentType } from 'react';
+
+type ScreenModule = { default: ComponentType<object> };
+
+/**
+ * Lazy-load de telas medway-ui com bootstrap de CSS automático.
+ */
+function lazyMedwayUiScreen(loader: () => Promise<ScreenModule>) {
+  return React.lazy(() =>
+    import('./MedwayUiProvider').then(() => loader()),
+  );
+}
+
+export { lazyMedwayUiScreen };

package/setup/metro.js

@@ -0,0 +1,195 @@
+const fs = require('fs');
+const path = require('path');
+
+function loadWithNativeWind(projectRoot) {
+  return require(require.resolve('nativewind/metro', { paths: [projectRoot] }))
+    .withNativeWind;
+}
+
+function tryResolveMedwayModule(basePath) {
+  const extensions = ['.tsx', '.ts', '.jsx', '.js'];
+
+  for (const ext of extensions) {
+    const candidate = `${basePath}${ext}`;
+    if (fs.existsSync(candidate)) return candidate;
+  }
+
+  for (const ext of extensions) {
+    const candidate = path.join(basePath, `index${ext}`);
+    if (fs.existsSync(candidate)) return candidate;
+  }
+
+  return null;
+}
+
+function resolveMedwayAlias(moduleName, medwayUiNativeSrc, medwayUiSharedSrc) {
+  if (!moduleName.startsWith('@/')) return null;
+
+  const relativePath = moduleName.slice(2);
+
+  return (
+    tryResolveMedwayModule(path.join(medwayUiNativeSrc, relativePath)) ??
+    tryResolveMedwayModule(path.join(medwayUiSharedSrc, relativePath))
+  );
+}
+
+function resolvePackageEntry(packageDir, entry) {
+  const withoutExt = entry.replace(/\.(tsx|ts|jsx|js)$/, '');
+  const candidates = [
+    path.resolve(packageDir, entry),
+    path.resolve(packageDir, withoutExt),
+    ...['.tsx', '.ts', '.jsx', '.js'].map((ext) =>
+      path.resolve(packageDir, `${withoutExt}${ext}`),
+    ),
+  ];
+
+  for (const candidate of candidates) {
+    if (fs.existsSync(candidate)) return candidate;
+  }
+
+  return null;
+}
+
+function getAppPackageJsonPath(moduleName, projectRoot) {
+  const directPath = path.join(projectRoot, 'node_modules', moduleName, 'package.json');
+
+  if (fs.existsSync(directPath)) {
+    return directPath;
+  }
+
+  try {
+    return require.resolve(`${moduleName}/package.json`, { paths: [projectRoot] });
+  } catch {
+    return null;
+  }
+}
+
+function resolveBareModule(moduleName, searchRoots) {
+  for (const root of searchRoots) {
+    try {
+      const packageJsonPath = getAppPackageJsonPath(moduleName, root);
+
+      if (packageJsonPath) {
+        const pkg = require(packageJsonPath);
+        const packageDir = path.dirname(packageJsonPath);
+        const reactNativeEntry = pkg['react-native'];
+
+        if (typeof reactNativeEntry === 'string' && !reactNativeEntry.endsWith('cli.js')) {
+          const resolved = resolvePackageEntry(packageDir, reactNativeEntry);
+
+          if (resolved) {
+            return resolved;
+          }
+        }
+      }
+
+      return require.resolve(moduleName, { paths: [root] });
+    } catch {
+      // try next root
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Metro + NativeWind para @medway-ui/native (monorepo file: ou npm).
+ *
+ * @param {import('expo/metro-config').MetroConfig} config
+ * @param {object} [options]
+ * @param {string} options.projectRoot
+ * @param {string} [options.linkedMedwayUiRoot='../medway-ui'] - clone local no monorepo
+ * @param {boolean} [options.resolveNativeSource=true] - aponta @medway-ui/native para src/
+ */
+function withMedwayUi(config, options = {}) {
+  const projectRoot = options.projectRoot ?? process.cwd();
+  const linkedMedwayUiRoot = options.linkedMedwayUiRoot ?? '../medway-ui';
+  const resolveNativeSource = options.resolveNativeSource ?? true;
+
+  const nativePackageRoot = path.resolve(__dirname, '..');
+  const globalCssInput = path.join(nativePackageRoot, 'setup/global.css');
+
+  const medwayUiRoot = path.resolve(projectRoot, linkedMedwayUiRoot);
+  const medwayUiNativeRoot = path.resolve(medwayUiRoot, 'native');
+  const medwayUiNativeSrc = path.resolve(medwayUiNativeRoot, 'src');
+  const medwayUiSharedSrc = path.resolve(medwayUiRoot, 'src');
+  const escapedMedwayUiRoot = medwayUiRoot.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+  config.watchFolders = [...(config.watchFolders ?? []), medwayUiRoot];
+
+  const existingBlockList = config.resolver.blockList;
+  const blockListArray = Array.isArray(existingBlockList)
+    ? existingBlockList
+    : existingBlockList
+      ? [existingBlockList]
+      : [];
+
+  config.resolver.blockList = [
+    ...blockListArray,
+    new RegExp(`${escapedMedwayUiRoot}[\\\\/]native[\\\\/]node_modules[\\\\/].*`),
+    new RegExp(`${escapedMedwayUiRoot}[\\\\/]node_modules[\\\\/].*`),
+  ];
+
+  function isMedwayUiOrigin(originModulePath) {
+    return (
+      originModulePath.includes(`${path.sep}medway-ui${path.sep}`) ||
+      originModulePath.includes(`${path.sep}@medway-ui${path.sep}`)
+    );
+  }
+
+  function isBareImport(moduleName) {
+    return !moduleName.startsWith('.') && !moduleName.startsWith('/');
+  }
+
+  const defaultResolveRequest = config.resolver.resolveRequest;
+
+  config.resolver.resolveRequest = (context, moduleName, platform) => {
+    if (resolveNativeSource && moduleName === '@medway-ui/native') {
+      return {
+        filePath: path.resolve(medwayUiNativeSrc, 'index.ts'),
+        type: 'sourceFile',
+      };
+    }
+
+    if (isMedwayUiOrigin(context.originModulePath)) {
+      if (moduleName.startsWith('@/')) {
+        const resolved = resolveMedwayAlias(
+          moduleName,
+          medwayUiNativeSrc,
+          medwayUiSharedSrc,
+        );
+
+        if (resolved) {
+          return { filePath: resolved, type: 'sourceFile' };
+        }
+      }
+
+      if (isBareImport(moduleName)) {
+        const resolved = resolveBareModule(moduleName, [
+          projectRoot,
+          nativePackageRoot,
+          medwayUiNativeRoot,
+        ]);
+
+        if (resolved) {
+          return { filePath: resolved, type: 'sourceFile' };
+        }
+      }
+    }
+
+    if (defaultResolveRequest) {
+      return defaultResolveRequest(context, moduleName, platform);
+    }
+
+    return context.resolveRequest(context, moduleName, platform);
+  };
+
+  const withNativeWind = loadWithNativeWind(projectRoot);
+
+  return withNativeWind(config, {
+    input: globalCssInput,
+    ...options.nativeWind,
+  });
+}
+
+module.exports = { withMedwayUi };

package/setup/tailwind.js

@@ -0,0 +1,64 @@
+const path = require('path');
+
+function loadDesignTokens(projectRoot) {
+  return require(require.resolve('@medway-ui/core/tokens', { paths: [projectRoot] }));
+}
+
+function resolveNativePackageRoot() {
+  return path.resolve(__dirname, '..');
+}
+
+/**
+ * Tailwind config para apps com @medway-ui/native.
+ *
+ * @param {object} [options]
+ * @param {string} options.projectRoot - raiz do app consumidor
+ * @param {string[]} [options.content] - globs extras (ex.: telas migradas)
+ * @param {string} [options.linkedMedwayUiRoot] - monorepo file: (ex.: '../medway-ui')
+ */
+function createMedwayUiTailwindConfig(options = {}) {
+  const { projectRoot = process.cwd(), content = [], linkedMedwayUiRoot } = options;
+
+  const {
+    colors,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    borderRadius,
+    boxShadow,
+  } = loadDesignTokens(projectRoot);
+
+  const nativeRoot = resolveNativePackageRoot();
+  const nativeSrc = path.join(nativeRoot, 'src');
+
+  const libContent = [
+    path.join(nativeRoot, 'src/**/*.{js,jsx,ts,tsx}'),
+    path.join(projectRoot, 'node_modules/@medway-ui/native/src/**/*.{ts,tsx}'),
+  ];
+
+  if (linkedMedwayUiRoot) {
+    libContent.push(
+      path.resolve(projectRoot, linkedMedwayUiRoot, 'native/src/**/*.{ts,tsx}'),
+    );
+  }
+
+  return {
+    content: ['./App.{js,jsx,ts,tsx}', ...content, ...libContent],
+    darkMode: 'class',
+    presets: [require('nativewind/preset')],
+    theme: {
+      extend: {
+        colors,
+        fontFamily,
+        fontSize,
+        fontWeight,
+        lineHeight,
+        borderRadius,
+        boxShadow,
+      },
+    },
+  };
+}
+
+module.exports = { createMedwayUiTailwindConfig };