mfeflow 0.2.0 → 0.3.0

package/assets/features/i18n/feature.json

@@ -0,0 +1,139 @@
+{
+  "name": "i18n",
+  "version": "0.1.0",
+  "description": "Translations with @mfeflow/i18n: the shell starts one i18next instance and sets lang and dir; each remote loads its own messages from its own deploy, so a translation ships with the remote that uses it. Sample messages in English and Arabic (right to left) and a language switcher you own.",
+  "requires": ["core", "tsconfig"],
+  "files": [
+    {
+      "to": "src/i18n/config.ts",
+      "target": "shell",
+      "from": "files/shell-config.ts"
+    },
+    {
+      "to": "src/i18n/init.ts",
+      "target": "shell",
+      "from": "files/shell-init.ts"
+    },
+    {
+      "to": "src/i18n/Languages.tsx",
+      "target": "shell",
+      "from": "files/Languages.tsx"
+    },
+    {
+      "to": "src/i18n/LanguageSwitcher.tsx",
+      "target": "shell",
+      "from": "files/LanguageSwitcher.tsx"
+    },
+    {
+      "to": "src/i18n/init.test.ts",
+      "target": "shell",
+      "from": "files/shell-init-test.ts",
+      "when": {
+        "feature:testing": true
+      }
+    },
+    {
+      "to": "src/i18n/LanguageSwitcher.test.tsx",
+      "target": "shell",
+      "from": "files/language-switcher-test.tsx",
+      "when": {
+        "feature:testing": true
+      }
+    },
+    {
+      "to": "src/i18n/config.ts",
+      "target": "remotes",
+      "from": "files/remote-config.ts"
+    },
+    {
+      "to": "src/i18n/load.ts",
+      "target": "remotes",
+      "from": "files/remote-load.ts"
+    },
+    {
+      "to": "src/i18n/I18n.tsx",
+      "target": "remotes",
+      "from": "files/remote-I18n.tsx.eta",
+      "template": true
+    },
+    {
+      "to": "src/i18n/messages/en.json",
+      "target": "remotes",
+      "from": "files/remote-en.json.eta",
+      "template": true
+    },
+    {
+      "to": "src/i18n/messages/ar.json",
+      "target": "remotes",
+      "from": "files/remote-ar.json.eta",
+      "template": true
+    },
+    {
+      "to": "src/i18n/I18n.test.tsx",
+      "target": "remotes",
+      "from": "files/remote-I18n-test.tsx.eta",
+      "template": true,
+      "when": {
+        "feature:testing": true
+      }
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "@mfeflow/i18n",
+      "range": "latest",
+      "target": "shell"
+    },
+    {
+      "name": "i18next",
+      "range": "26.5.12",
+      "target": "shell"
+    },
+    {
+      "name": "react-i18next",
+      "range": "17.1.9",
+      "target": "shell"
+    },
+    {
+      "name": "@mfeflow/i18n",
+      "range": "latest",
+      "target": "remotes"
+    },
+    {
+      "name": "i18next",
+      "range": "26.5.12",
+      "target": "remotes"
+    },
+    {
+      "name": "react-i18next",
+      "range": "17.1.9",
+      "target": "remotes"
+    }
+  ],
+  "transforms": [
+    {
+      "op": "add-boot-step",
+      "file": "src/bootstrap.tsx",
+      "target": "shell",
+      "call": "initShellI18n",
+      "from": "./i18n/init",
+      "await": true
+    },
+    {
+      "op": "wrap-provider",
+      "file": "src/App.tsx",
+      "target": "shell",
+      "component": "Languages",
+      "from": "./i18n/Languages",
+      "function": "App"
+    },
+    {
+      "op": "wrap-provider",
+      "file": "src/exposed/App.tsx",
+      "target": "remotes",
+      "component": "I18n",
+      "from": "../i18n/I18n",
+      "function": "App"
+    }
+  ]
+}

package/assets/features/i18n/files/LanguageSwitcher.tsx

@@ -0,0 +1,28 @@
+import { useLanguage, useMfeTranslation } from '@mfeflow/i18n/react';
+import { loadShellMessages } from './config';
+
+/** Your component: move it into the header or restyle it. Changing the language also sets <html lang dir>. */
+export function LanguageSwitcher() {
+  const { t } = useMfeTranslation('shell', loadShellMessages);
+  const { language, languages, setLanguage } = useLanguage();
+  return (
+    <label
+      className="language-switcher"
+      style={{ position: 'fixed', left: '1rem', bottom: '1rem' }}
+    >
+      {t('language')}{' '}
+      <select
+        value={language}
+        onChange={(event) => {
+          void setLanguage(event.target.value);
+        }}
+      >
+        {languages.map((option) => (
+          <option key={option.code} value={option.code}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}

package/assets/features/i18n/files/Languages.tsx

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import { LanguageSwitcher } from './LanguageSwitcher';
+
+/** Wraps the shell and shows the language switcher. The instance itself starts in the boot step. */
+export function Languages({ children }: { children: ReactNode }) {
+  return (
+    <>
+      {children}
+      <LanguageSwitcher />
+    </>
+  );
+}

package/assets/features/i18n/files/language-switcher-test.tsx

@@ -0,0 +1,19 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { resetPlatform, renderWithPlatform } from '@mfeflow/testing';
+import { afterEach, describe, expect, it } from 'vitest';
+import { initShellI18n } from './init';
+import { LanguageSwitcher } from './LanguageSwitcher';
+
+afterEach(resetPlatform);
+
+describe('LanguageSwitcher', () => {
+  it('switches the language and the page direction', async () => {
+    await initShellI18n();
+    renderWithPlatform(<LanguageSwitcher />);
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'ar' } });
+    await waitFor(() => {
+      expect(document.documentElement.dir).toBe('rtl');
+    });
+    expect(screen.getByText('اللغة')).toBeDefined();
+  });
+});

package/assets/features/i18n/files/remote-I18n-test.tsx.eta

@@ -0,0 +1,43 @@
+import { StrictMode } from 'react';
+import { screen } from '@testing-library/react';
+import { getI18n } from '@mfeflow/i18n';
+import { renderWithPlatform, resetPlatform } from '@mfeflow/testing';
+import { afterEach, describe, expect, it } from 'vitest';
+import { I18n } from './I18n';
+
+afterEach(resetPlatform);
+
+describe('the <%= it.app.name %> messages', () => {
+  it('start their own i18n when the remote runs without the shell', async () => {
+    renderWithPlatform(
+      <I18n>
+        <p>content</p>
+      </I18n>,
+    );
+    expect(screen.getByText('content')).toBeDefined();
+    expect(await screen.findByText('Hello from <%= it.app.name %>')).toBeDefined();
+  });
+
+  it('follow a language change', async () => {
+    renderWithPlatform(
+      <I18n>
+        <p>content</p>
+      </I18n>,
+    );
+    await screen.findByText('Hello from <%= it.app.name %>');
+    await getI18n().changeLanguage('ar');
+    expect(await screen.findByText('مرحبا من <%= it.app.name %>')).toBeDefined();
+  });
+
+  it('starts one instance when StrictMode runs the effect twice', async () => {
+    renderWithPlatform(
+      <StrictMode>
+        <I18n>
+          <p>content</p>
+        </I18n>
+      </StrictMode>,
+    );
+    expect(await screen.findByText('Hello from <%= it.app.name %>')).toBeDefined();
+    expect(screen.getAllByText('Hello from <%= it.app.name %>')).toHaveLength(1);
+  });
+});

package/assets/features/i18n/files/remote-I18n.tsx.eta

@@ -0,0 +1,36 @@
+import { useEffect, useState, type ReactNode } from 'react';
+import { getI18n, initI18n } from '@mfeflow/i18n';
+import { useMfeTranslation } from '@mfeflow/i18n/react';
+import { defaultLanguage, languages } from './config';
+import { loadMessages } from './load';
+
+function started(): boolean {
+  try {
+    getI18n();
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function Hello() {
+  const { t } = useMfeTranslation('<%= it.app.name %>', loadMessages);
+  return <p data-testid="<%= it.app.name %>-hello">{t('hello')}</p>;
+}
+
+/** Wraps this remote's App. Inside the shell the page already has an i18n instance; on its own the remote starts one. */
+export function I18n({ children }: { children: ReactNode }) {
+  const [ready, setReady] = useState(started);
+  useEffect(() => {
+    if (ready) return;
+    void initI18n({ languages, defaultLanguage, detect: false }).then(() => {
+      setReady(true);
+    });
+  }, [ready]);
+  return (
+    <>
+      {ready ? <Hello /> : null}
+      {children}
+    </>
+  );
+}

package/assets/features/i18n/files/remote-ar.json.eta

@@ -0,0 +1,3 @@
+{
+  "hello": "مرحبا من <%= it.app.name %>"
+}

package/assets/features/i18n/files/remote-config.ts

@@ -0,0 +1,9 @@
+import type { LanguageOption } from '@mfeflow/i18n';
+
+// Only used when this remote runs on its own (pnpm dev in its folder). Inside the shell, the shell's list wins.
+export const languages: LanguageOption[] = [
+  { code: 'en', label: 'English' },
+  { code: 'ar', label: 'العربية' },
+];
+
+export const defaultLanguage = 'en';

package/assets/features/i18n/files/remote-en.json.eta

@@ -0,0 +1,3 @@
+{
+  "hello": "Hello from <%= it.app.name %>"
+}

package/assets/features/i18n/files/remote-load.ts

@@ -0,0 +1,4 @@
+import type { NamespaceLoader } from '@mfeflow/i18n';
+
+// Each language is its own chunk, served from this remote's deploy and versioned with it.
+export const loadMessages: NamespaceLoader = (language) => import(`./messages/${language}.json`);

package/assets/features/i18n/files/shell-config.ts

@@ -0,0 +1,20 @@
+import type { LanguageOption } from '@mfeflow/i18n';
+
+export const languages: LanguageOption[] = [
+  { code: 'en', label: 'English' },
+  { code: 'ar', label: 'العربية' },
+];
+
+export const defaultLanguage = 'en';
+
+// The shell's own messages ship with the shell. Remotes bring theirs (see their src/i18n folder).
+export const shellMessages: Record<string, { shell: Record<string, string> }> = {
+  en: { shell: { language: 'Language' } },
+  ar: { shell: { language: 'اللغة' } },
+};
+
+/** The messages of one language, or the default language's when this one has none, so the text never goes blank. */
+export function loadShellMessages(language: string): Promise<Record<string, string>> {
+  const found = shellMessages[language] ?? shellMessages[defaultLanguage];
+  return Promise.resolve(found?.shell ?? {});
+}

package/assets/features/i18n/files/shell-init-test.ts

@@ -0,0 +1,32 @@
+import { getI18n, getLanguages } from '@mfeflow/i18n';
+import { resetPlatform } from '@mfeflow/testing';
+import { afterEach, describe, expect, it } from 'vitest';
+import { loadShellMessages } from './config';
+import { initShellI18n } from './init';
+
+afterEach(resetPlatform);
+
+describe('initShellI18n', () => {
+  it('starts the page instance with the shell languages', async () => {
+    await initShellI18n();
+    expect(getLanguages().map((l) => l.code)).toEqual(['en', 'ar']);
+    expect(getI18n().t('shell:language')).toBe('Language');
+  });
+
+  it('sets lang and dir when the language changes', async () => {
+    await initShellI18n();
+    await getI18n().changeLanguage('ar');
+    expect(document.documentElement.lang).toBe('ar');
+    expect(document.documentElement.dir).toBe('rtl');
+  });
+});
+
+describe('loadShellMessages', () => {
+  it('gives the messages of the language asked for', async () => {
+    expect(await loadShellMessages('ar')).toEqual({ language: 'اللغة' });
+  });
+
+  it('falls back to the default language for one with no messages', async () => {
+    expect(await loadShellMessages('fr')).toEqual({ language: 'Language' });
+  });
+});

package/assets/features/i18n/files/shell-init.ts

@@ -0,0 +1,7 @@
+import { initI18n } from '@mfeflow/i18n';
+import { defaultLanguage, languages, shellMessages } from './config';
+
+/** The boot step: one i18next instance for the page, shared by the shell and every remote. */
+export async function initShellI18n(): Promise<void> {
+  await initI18n({ languages, defaultLanguage, resources: shellMessages });
+}

package/assets/features/lint-oxlint/files/oxlintrc.json

@@ -1,5 +1,5 @@
 {
   "$schema": "./node_modules/oxlint/configuration_schema.json",
   "extends": ["./node_modules/@mfeflow/oxlint-config/oxlintrc.json"],
-  "ignorePatterns": ["**/dist/**", "**/.turbo/**"]
+  "ignorePatterns": ["**/dist/**", "**/.turbo/**", "**/storybook-static/**"]
 }

package/assets/features/lint-oxlint/files/prettierignore

@@ -1,5 +1,6 @@
 dist
 .turbo
+storybook-static
 coverage
 pnpm-lock.yaml
 CHANGELOG.md

package/assets/features/storybook/feature.json

@@ -0,0 +1,119 @@
+{
+  "name": "storybook",
+  "version": "0.1.0",
+  "description": "Storybook 10 on Rsbuild (storybook-react-rsbuild) in every remote, and the shell's Storybook shows them all: it lists each remote's built Storybook as a ref, found from mfeflow.json, so a remote added later appears without an edit. Each remote has its own Storybook config, kept apart from the Module Federation build.",
+  "requires": ["core", "tsconfig"],
+  "files": [
+    {
+      "to": ".storybook/main.ts",
+      "target": "shell",
+      "from": "files/shell-main.ts"
+    },
+    {
+      "to": ".storybook/rsbuild.config.ts",
+      "target": "shell",
+      "from": "files/rsbuild.config.ts"
+    },
+    {
+      "to": "src/pages/Home.stories.tsx",
+      "target": "shell",
+      "from": "files/Home.stories.tsx"
+    },
+    {
+      "to": ".storybook/main.ts",
+      "target": "remotes",
+      "from": "files/remote-main.ts"
+    },
+    {
+      "to": ".storybook/rsbuild.config.ts",
+      "target": "remotes",
+      "from": "files/rsbuild.config.ts"
+    },
+    {
+      "to": "src/exposed/App.stories.tsx",
+      "target": "remotes",
+      "from": "files/App.stories.tsx.eta",
+      "template": true
+    },
+    {
+      "to": "src/components/ui/button.stories.tsx",
+      "target": "remotes",
+      "from": "files/button.stories.tsx",
+      "when": {
+        "feature:ui-shadcn": true
+      }
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "storybook",
+      "range": "10.6.5",
+      "target": "shell",
+      "dev": true
+    },
+    {
+      "name": "storybook-react-rsbuild",
+      "range": "3.6.1",
+      "target": "shell",
+      "dev": true
+    },
+    {
+      "name": "@rsbuild/plugin-react",
+      "range": "2.1.1",
+      "target": "shell",
+      "dev": true
+    },
+    {
+      "name": "storybook",
+      "range": "10.6.5",
+      "target": "remotes",
+      "dev": true
+    },
+    {
+      "name": "storybook-react-rsbuild",
+      "range": "3.6.1",
+      "target": "remotes",
+      "dev": true
+    },
+    {
+      "name": "@rsbuild/plugin-react",
+      "range": "2.1.1",
+      "target": "remotes",
+      "dev": true
+    }
+  ],
+  "scripts": [
+    {
+      "name": "storybook",
+      "command": "storybook dev --no-open",
+      "target": "shell"
+    },
+    {
+      "name": "storybook:build",
+      "command": "storybook build -o storybook-static",
+      "target": "shell"
+    },
+    {
+      "name": "storybook",
+      "command": "storybook dev --no-open --ci",
+      "target": "remotes"
+    },
+    {
+      "name": "storybook:build",
+      "command": "storybook build -o storybook-static",
+      "target": "remotes"
+    },
+    {
+      "name": "storybook:remotes",
+      "command": "pnpm --filter \"./apps/*\" --filter \"!./apps/shell\" run --if-present storybook:build"
+    },
+    {
+      "name": "storybook",
+      "command": "pnpm storybook:remotes && pnpm --filter ./apps/shell run storybook"
+    },
+    {
+      "name": "storybook:build",
+      "command": "pnpm storybook:remotes && pnpm --filter ./apps/shell run storybook:build"
+    }
+  ]
+}

package/assets/features/storybook/files/App.stories.tsx.eta

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from 'storybook-react-rsbuild';
+import App from './App';
+
+const meta = { title: '<%= it.app.name %>/App', component: App } satisfies Meta<typeof App>;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = {};

package/assets/features/storybook/files/Home.stories.tsx

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from 'storybook-react-rsbuild';
+import { Home } from './Home';
+
+const meta = { title: 'shell/Home', component: Home } satisfies Meta<typeof Home>;
+
+export default meta;
+
+// No registry is loaded in Storybook, so this is the empty state.
+export const NoRemotes: StoryObj<typeof meta> = {};

package/assets/features/storybook/files/button.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from 'storybook-react-rsbuild';
+import { Button } from './button';
+
+const meta = {
+  title: 'ui/Button',
+  component: Button,
+  args: { children: 'Save' },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = {};
+export const Secondary: StoryObj<typeof meta> = { args: { variant: 'secondary' } };
+export const Destructive: StoryObj<typeof meta> = { args: { variant: 'destructive' } };

package/assets/features/storybook/files/remote-main.ts

@@ -0,0 +1,13 @@
+import type { StorybookConfig } from 'storybook-react-rsbuild';
+
+const config: StorybookConfig = {
+  framework: {
+    name: 'storybook-react-rsbuild',
+    options: { builder: { rsbuildConfigPath: './.storybook/rsbuild.config.ts' } },
+  },
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: [],
+  core: { disableTelemetry: true, disableWhatsNewNotifications: true },
+};
+
+export default config;

package/assets/features/storybook/files/rsbuild.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+// Storybook's own build config. It leaves out the app's rsbuild.config.ts on purpose: that one
+// sets up Module Federation, which a story does not need. Add loaders or aliases your stories need here.
+export default defineConfig({
+  plugins: [pluginReact()],
+  // One copy of React, also when a package is linked from another folder.
+  resolve: { dedupe: ['react', 'react-dom'] },
+});

package/assets/features/storybook/files/shell-main.ts

@@ -0,0 +1,39 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import type { StorybookConfig } from 'storybook-react-rsbuild';
+
+// The shell's Storybook shows its own stories and every remote's, each remote as a ref. Remotes are read from
+// mfeflow.json, so one added later appears here without an edit. A ref is the remote's Storybook as built by
+// `pnpm storybook:build` (apps/<remote>/storybook-static), served from /<remote>/ inside this one.
+const root = path.resolve(import.meta.dirname, '../../..');
+
+function field(value: unknown, key: string): unknown {
+  return typeof value === 'object' && value !== null ? Reflect.get(value, key) : undefined;
+}
+
+function remoteStorybooks(): { name: string; built: string }[] {
+  const apps = field(JSON.parse(fs.readFileSync(path.join(root, 'mfeflow.json'), 'utf8')), 'apps');
+  if (typeof apps !== 'object' || apps === null) return [];
+  return Object.entries(apps).flatMap(([name, app]) => {
+    const dir = field(app, 'path');
+    if (field(app, 'kind') !== 'remote' || typeof dir !== 'string') return [];
+    const built = path.join(root, dir, 'storybook-static');
+    return fs.existsSync(path.join(built, 'index.json')) ? [{ name, built }] : [];
+  });
+}
+
+const remotes = remoteStorybooks();
+
+const config: StorybookConfig = {
+  framework: {
+    name: 'storybook-react-rsbuild',
+    options: { builder: { rsbuildConfigPath: './.storybook/rsbuild.config.ts' } },
+  },
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: [],
+  core: { disableTelemetry: true, disableWhatsNewNotifications: true },
+  staticDirs: remotes.map(({ name, built }) => ({ from: built, to: `/${name}` })),
+  refs: Object.fromEntries(remotes.map(({ name }) => [name, { title: name, url: `./${name}` }])),
+};
+
+export default config;