@nocobase/app-template-default 0.0.0-stage → 1.0.0-beta.57

package/tests/logic/tailwind-sources.test.ts

@@ -0,0 +1,151 @@
+import clientPlugins from '../../client/plugins.js';
+// @vitest-environment node
+
+import {
+  existsSync,
+  mkdirSync,
+  mkdtempSync,
+  readFileSync,
+  realpathSync,
+  rmSync,
+  symlinkSync,
+  writeFileSync,
+} from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+
+import tailwindConfig, { contentFilesIn } from '../../tailwind.config.mjs';
+
+const appRoot = path.resolve(
+  fileURLToPath(new URL('.', import.meta.url)),
+  '../..',
+);
+
+describe('tailwind content sources', () => {
+  const content = tailwindConfig.content as string[];
+
+  it('scans the client files of every enabled plugin', () => {
+    const plugins = clientPlugins.plugins.map((plugin) =>
+      plugin.packageName.slice('@nocobase/'.length),
+    );
+
+    expect(plugins.length).toBeGreaterThan(0);
+
+    // A plugin with no client surface contributes no files, so only those that ship one are required to appear.
+    const withClient = plugins.filter((plugin) =>
+      ['client', 'dist/client'].some((directory) =>
+        existsSync(
+          path.join(appRoot, 'node_modules/@nocobase', plugin, directory),
+        ),
+      ),
+    );
+    expect(withClient.length).toBeGreaterThan(0);
+
+    for (const plugin of withClient) {
+      expect(
+        content.some((file) => file.includes(plugin)),
+        `${plugin} contributes no scanned files; its utility classes would be missing from the stylesheet`,
+      ).toBe(true);
+    }
+  });
+
+  it('resolves past the symlinks pnpm installs dependencies as', () => {
+    // The bug this guards: a wildcard `@source` matches nothing through a pnpm symlink, so every path here must be a
+    // real one that exists. An empty list would mean the whole mechanism silently stopped working.
+    expect(content.length).toBeGreaterThan(0);
+    for (const file of content.slice(0, 20)) {
+      expect(path.isAbsolute(file)).toBe(true);
+      expect(existsSync(file)).toBe(true);
+    }
+
+    // Every file must be its canonical path rather than a path that only reaches the file through a package symlink.
+    // pnpm's canonical store path legitimately contains a nested `node_modules/@nocobase` segment.
+    for (const file of content) {
+      expect(file).toBe(realpathSync(file));
+    }
+  });
+
+  it('scans build output the same way, which is the layout an installed plugin has', () => {
+    // The original failure was invisible in this repository, where plugins expose TypeScript sources, and only showed
+    // up in a generated application, where they ship `dist/client`. `dist` is a build artefact that a clean checkout
+    // does not have, so rather than requiring one, this drives the configuration's own resolution over a fixture
+    // laid out the way pnpm lays out an installed package: a symlink into a store directory.
+    const store = mkdtempSync(path.join(tmpdir(), 'nb3-tailwind-'));
+    try {
+      const installed = path.join(
+        store,
+        'store/app-plugin-fixture/dist/client',
+      );
+      mkdirSync(installed, { recursive: true });
+      writeFileSync(
+        path.join(installed, 'page.js'),
+        'export const cls = "mt-[77px]";',
+      );
+
+      const scope = path.join(store, 'node_modules/@nocobase');
+      mkdirSync(scope, { recursive: true });
+      symlinkSync(
+        path.join(store, 'store/app-plugin-fixture'),
+        path.join(scope, 'app-plugin-fixture'),
+        'junction',
+      );
+
+      const files = contentFilesIn(store);
+
+      expect(files).toHaveLength(1);
+      expect(files[0]).toBe(path.join(realpathSync(installed), 'page.js'));
+      expect(files[0]).toBe(realpathSync(files[0]));
+    } finally {
+      rmSync(store, { recursive: true, force: true });
+    }
+  });
+
+  it('scans canonical Registry source exposed by a plugin', () => {
+    const store = mkdtempSync(path.join(tmpdir(), 'nb3-tailwind-registry-'));
+    try {
+      const registry = path.join(
+        store,
+        'store/app-plugin-fixture/registry/example',
+      );
+      mkdirSync(registry, { recursive: true });
+      writeFileSync(
+        path.join(registry, 'demo.tsx'),
+        'export const cls = "xl:grid-cols-5";',
+      );
+
+      const scope = path.join(store, 'node_modules/@nocobase');
+      mkdirSync(scope, { recursive: true });
+      symlinkSync(
+        path.join(store, 'store/app-plugin-fixture'),
+        path.join(scope, 'app-plugin-fixture'),
+        'junction',
+      );
+
+      const files = contentFilesIn(store);
+
+      expect(files).toContain(path.join(realpathSync(registry), 'demo.tsx'));
+    } finally {
+      rmSync(store, { recursive: true, force: true });
+    }
+  });
+
+  it('is wired into the stylesheet, without the wildcard sources it replaced', () => {
+    const styles = readFileSync(
+      path.join(appRoot, 'client/styles.css'),
+      'utf8',
+    );
+
+    expect(styles).toContain('@config "../tailwind.config.mjs"');
+    expect(styles).not.toContain('app-plugin-*');
+  });
+
+  it('is published, so a generated application has the file @config points at', () => {
+    const packageJson = JSON.parse(
+      readFileSync(path.join(appRoot, 'package.json'), 'utf8'),
+    ) as { files?: string[] };
+
+    expect(packageJson.files).toContain('tailwind.config.mjs');
+  });
+});

package/tests/logic/template-package-name.test.ts

@@ -0,0 +1,88 @@
+// @vitest-environment node
+
+import { readFileSync, readdirSync, statSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+
+const appRoot = path.resolve(
+  fileURLToPath(new URL('.', import.meta.url)),
+  '../..',
+);
+
+interface AppPackageJson {
+  readonly name: string;
+  readonly nocobase?: { readonly templatePackage?: string };
+}
+
+const appPackage = JSON.parse(
+  readFileSync(path.join(appRoot, 'package.json'), 'utf8'),
+) as AppPackageJson;
+const applicationName = appPackage.name;
+const originalTemplateName =
+  appPackage.nocobase?.templatePackage ?? applicationName;
+const isGeneratedApplication = originalTemplateName !== applicationName;
+
+/**
+ * Sources present in this template that `create-app` rewrites, from `PACKAGE_NAME_SOURCES` in
+ * `packages/tools/create-app/src/lib/scaffold.ts`.
+ */
+const REWRITTEN_SOURCES = ['client/runtime.ts', 'client/service-provider.ts'];
+
+/** Source trees shipped to a generated application, per the `files` field. */
+const SHIPPED_SOURCE_DIRECTORIES = ['client', 'server', 'database', 'cli'];
+
+const SOURCE_EXTENSIONS = new Set(['.ts', '.tsx', '.mjs', '.js']);
+
+function sourceFilesIn(directory: string): string[] {
+  const absolute = path.join(appRoot, directory);
+
+  return readdirSync(absolute, { withFileTypes: true }).flatMap((entry) => {
+    if (entry.name === 'node_modules') return [];
+
+    const relative = path.join(directory, entry.name);
+
+    if (entry.isDirectory()) return sourceFilesIn(relative);
+    if (!SOURCE_EXTENSIONS.has(path.extname(entry.name))) return [];
+
+    return [relative];
+  });
+}
+
+describe('template package name', () => {
+  /**
+   * `create-app` rewrites this name to the application's in a fixed list of files. A source that embeds it but is not
+   * on that list ships the template's name into every generated application, where the client would then declare an
+   * i18n namespace the server does not share.
+   *
+   * When this fails, either rewrite the new occurrence to derive the name at runtime, or add the file to
+   * `PACKAGE_NAME_SOURCES` in `packages/tools/create-app/src/lib/scaffold.ts` and to `REWRITTEN_SOURCES` above.
+   */
+  it('keeps the original template name only where create-app rewrites it', () => {
+    const offenders = SHIPPED_SOURCE_DIRECTORIES.filter((directory) =>
+      statSync(path.join(appRoot, directory), { throwIfNoEntry: false }),
+    )
+      .flatMap((directory) => sourceFilesIn(directory))
+      .filter(
+        (relative) =>
+          isGeneratedApplication || !REWRITTEN_SOURCES.includes(relative),
+      )
+      .filter((relative) =>
+        readFileSync(path.join(appRoot, relative), 'utf8').includes(
+          originalTemplateName,
+        ),
+      );
+
+    expect(offenders).toEqual([]);
+  });
+
+  /** The rewrite list is only correct while every file on it exists and carries the current application name. */
+  it('uses the application name in every source create-app rewrites', () => {
+    for (const relative of REWRITTEN_SOURCES) {
+      expect(
+        readFileSync(path.join(appRoot, relative), 'utf8'),
+        `${relative} does not contain ${applicationName}`,
+      ).toContain(applicationName);
+    }
+  });
+});

package/tests/logic/theme-preferences.test.ts

@@ -0,0 +1,86 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { themePresets } from '../../client/theme/theme-presets';
+import {
+  initializeTheme,
+  themeStorageKeys,
+} from '../../client/theme/theme-preferences';
+
+describe('application appearance storage', () => {
+  it('lists Compact first as the default preset', () => {
+    expect(themePresets[0].id).toBe('compact');
+  });
+  it('restores Compact when the saved Ant Design preset is removed', () => {
+    const keys = themeStorageKeys('/crm/');
+    localStorage.setItem(keys.preset, 'ant-design');
+    localStorage.setItem(keys.mode, 'light');
+    initializeTheme(
+      '/crm/',
+      themePresets.map(({ id }) => id),
+    );
+    expect(document.documentElement.dataset.theme).toBe('compact');
+    expect(document.documentElement).toHaveClass('light');
+  });
+  afterEach(() => vi.unstubAllGlobals());
+  beforeEach(() => {
+    localStorage.clear();
+    document.documentElement.removeAttribute('class');
+    vi.stubGlobal('matchMedia', () => ({ matches: true }));
+  });
+
+  it('uses the first registered preset as the fallback', () => {
+    initializeTheme('/crm/', ['custom', 'default']);
+    expect(document.documentElement.dataset.theme).toBe('custom');
+  });
+
+  it('separates apps, preserves nested paths and distinguishes the root', () => {
+    expect(themeStorageKeys('/crm/').mode).toBe(
+      'nocobase:crm:theme:color-scheme',
+    );
+    expect(themeStorageKeys('/crm').preset).toBe('nocobase:crm:theme:preset');
+    expect(themeStorageKeys('/team/crm/').preset).toBe(
+      'nocobase:team%2Fcrm:theme:preset',
+    );
+    expect(themeStorageKeys('/').preset).toBe('nocobase:%2F:theme:preset');
+    expect(themeStorageKeys('/root/')).not.toEqual(themeStorageKeys('/'));
+  });
+
+  it('restores both preferences before React without reading another app', () => {
+    localStorage.setItem('nocobase:crm:theme:color-scheme', 'light');
+    localStorage.setItem('nocobase:crm:theme:preset', 'default');
+    initializeTheme(
+      '/crm/',
+      themePresets.map(({ id }) => id),
+    );
+    expect(document.documentElement).toHaveAttribute('data-theme', 'default');
+    expect(document.documentElement).toHaveClass('light');
+    initializeTheme(
+      '/erp/',
+      themePresets.map(({ id }) => id),
+    );
+    expect(document.documentElement).toHaveAttribute('data-theme', 'compact');
+    expect(document.documentElement).toHaveClass('dark');
+  });
+
+  it('falls back on invalid values and unavailable storage', () => {
+    localStorage.setItem('nocobase:crm:theme:color-scheme', 'invalid');
+    localStorage.setItem('nocobase:crm:theme:preset', 'deleted');
+    initializeTheme(
+      '/crm/',
+      themePresets.map(({ id }) => id),
+    );
+    expect(document.documentElement).toHaveAttribute('data-theme', 'compact');
+    expect(document.documentElement).toHaveClass('dark');
+    const spy = vi
+      .spyOn(Storage.prototype, 'getItem')
+      .mockImplementation(() => {
+        throw new Error('blocked');
+      });
+    expect(() =>
+      initializeTheme(
+        '/crm/',
+        themePresets.map(({ id }) => id),
+      ),
+    ).not.toThrow();
+    spy.mockRestore();
+  });
+});

package/tests/logic/theme-tokens.test.ts

@@ -0,0 +1,248 @@
+// @vitest-environment node
+
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import tailwind from '@tailwindcss/postcss';
+import postcss, { type Root } from 'postcss';
+import { beforeAll, describe, expect, it } from 'vitest';
+
+import { themePresets } from '../../client/theme/theme-presets';
+
+const appRoot = fileURLToPath(new URL('../..', import.meta.url));
+const sizes = [
+  'xs',
+  'sm',
+  'base',
+  'lg',
+  'xl',
+  '2xl',
+  '3xl',
+  '4xl',
+  '5xl',
+  '6xl',
+  '7xl',
+  '8xl',
+  '9xl',
+];
+const shadows = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+const colors = [
+  'background',
+  'foreground',
+  'card',
+  'card-foreground',
+  'popover',
+  'popover-foreground',
+  'primary',
+  'primary-foreground',
+  'secondary',
+  'secondary-foreground',
+  'muted',
+  'muted-foreground',
+  'accent',
+  'accent-foreground',
+  'destructive',
+  'border',
+  'input',
+  'ring',
+  ...Array.from({ length: 5 }, (_, i) => `chart-${i + 1}`),
+  'sidebar',
+  'sidebar-foreground',
+  'sidebar-primary',
+  'sidebar-primary-foreground',
+  'sidebar-accent',
+  'sidebar-accent-foreground',
+  'sidebar-border',
+  'sidebar-ring',
+];
+const sharedTokens = [
+  'radius',
+  'spacing',
+  'font-sans',
+  'font-serif',
+  'font-mono',
+  'font-heading',
+  ...sizes.flatMap((size) => [`text-${size}`, `text-${size}--line-height`]),
+  ...shadows.map((size) => `shadow-${size}`),
+];
+const radii = {
+  sm: 0.6,
+  md: 0.8,
+  lg: 1,
+  xl: 1.4,
+  '2xl': 1.8,
+  '3xl': 2.2,
+  '4xl': 2.6,
+};
+
+function declarations(root: Root, selector: string): Record<string, string> {
+  const values: Record<string, string> = {};
+  root.walkRules((rule) => {
+    if (rule.selectors.includes(selector)) {
+      rule.walkDecls((decl) => {
+        values[decl.prop] = decl.value;
+      });
+    }
+  });
+  return values;
+}
+
+describe('theme token contract', () => {
+  it('keeps compact identical to default except for dimensions', () => {
+    const readPreset = (id: string) =>
+      postcss.parse(
+        readFileSync(
+          new URL(`../../client/theme/themes/${id}.css`, import.meta.url),
+          'utf8',
+        ),
+      );
+    const defaultCss = readPreset('default');
+    const compactCss = readPreset('compact');
+    const withoutDimensions = (values: Record<string, string>) =>
+      Object.fromEntries(
+        Object.entries(values).filter(
+          ([key]) =>
+            key !== '--spacing' &&
+            key !== '--radius' &&
+            !key.startsWith('--text-'),
+        ),
+      );
+    for (const mode of ['', '.dark']) {
+      expect(
+        withoutDimensions(
+          declarations(compactCss, `:root${mode}[data-theme='compact']`),
+        ),
+      ).toEqual(
+        withoutDimensions(
+          declarations(defaultCss, `:root${mode}[data-theme='default']`),
+        ),
+      );
+    }
+    const compact = declarations(compactCss, ":root[data-theme='compact']");
+    const standard = declarations(defaultCss, ":root[data-theme='default']");
+    expect(parseFloat(compact['--spacing'])).toBeLessThan(
+      parseFloat(standard['--spacing']),
+    );
+  });
+
+  for (const { id } of themePresets) {
+    it(`${id} defines complete tokens for the page and isolated previews`, () => {
+      const root = postcss.parse(
+        readFileSync(
+          new URL(`../../client/theme/themes/${id}.css`, import.meta.url),
+          'utf8',
+        ),
+      );
+      const light = declarations(root, `:root[data-theme='${id}']`);
+      const dark = declarations(root, `:root.dark[data-theme='${id}']`);
+      for (const token of [...colors, ...sharedTokens]) {
+        expect(light[`--${token}`], `${id} light: ${token}`).toBeTruthy();
+      }
+      for (const token of colors) {
+        expect(dark[`--${token}`], `${id} dark: ${token}`).toBeTruthy();
+      }
+      expect(declarations(root, `.theme-preview[data-theme='${id}']`)).toEqual(
+        light,
+      );
+      expect(
+        declarations(root, `:root.dark .theme-preview[data-theme='${id}']`),
+      ).toEqual(dark);
+    });
+  }
+});
+
+describe('compiled theme utilities', () => {
+  let compiled: Root;
+  beforeAll(async () => {
+    const candidates = [
+      ...colors.map((color) => `bg-${color}`),
+      ...sizes.map((size) => `text-${size}`),
+      ...shadows.map((size) => `shadow-${size}`),
+      ...Object.keys(radii).map((size) => `rounded-${size}`),
+      'font-sans',
+      'font-serif',
+      'font-mono',
+      'font-heading',
+      'p-4',
+      'gap-2',
+      'h-8',
+      'fill-chart-1',
+      'stroke-chart-5',
+    ];
+    const source = readFileSync(
+      new URL('../../client/styles.css', import.meta.url),
+      'utf8',
+    );
+    const result = await postcss([
+      tailwind({ base: appRoot, optimize: false }),
+    ]).process(source + `\n@source inline("${candidates.join(' ')}");`, {
+      from: fileURLToPath(new URL('../../client/styles.css', import.meta.url)),
+    });
+    compiled = result.root;
+  }, 30_000);
+
+  it('maps every semantic color to a runtime variable', () => {
+    for (const color of colors) {
+      expect(declarations(compiled, `.bg-${color}`)['background-color']).toBe(
+        `var(--${color})`,
+      );
+    }
+    expect(declarations(compiled, '.fill-chart-1').fill).toBe('var(--chart-1)');
+    expect(declarations(compiled, '.stroke-chart-5').stroke).toBe(
+      'var(--chart-5)',
+    );
+  });
+
+  it('keeps fonts, sizes, line heights, spacing and shadows overridable', () => {
+    for (const font of ['sans', 'serif', 'mono', 'heading']) {
+      expect(declarations(compiled, `.font-${font}`)['font-family']).toBe(
+        `var(--font-${font})`,
+      );
+    }
+    for (const size of sizes) {
+      const rule = declarations(compiled, `.text-${size}`);
+      expect(rule['font-size']).toBe(`var(--text-${size})`);
+      expect(rule['line-height']).toContain(`var(--text-${size}--line-height)`);
+    }
+    for (const [selector, property, multiplier] of [
+      ['.p-4', 'padding', '4'],
+      ['.gap-2', 'gap', '2'],
+      ['.h-8', 'height', '8'],
+    ]) {
+      expect(declarations(compiled, selector)[property]).toBe(
+        `calc(var(--spacing) * ${multiplier})`,
+      );
+    }
+    for (const size of shadows) {
+      expect(
+        Object.values(declarations(compiled, `.shadow-${size}`)).join(' '),
+      ).toContain(`var(--shadow-${size})`);
+    }
+  });
+
+  it('derives all seven corner sizes from the current preset', () => {
+    for (const [size, multiplier] of Object.entries(radii)) {
+      const expected =
+        multiplier === 1
+          ? 'var(--radius)'
+          : `calc(var(--radius) * ${multiplier})`;
+      expect(declarations(compiled, `.rounded-${size}`)['border-radius']).toBe(
+        expected,
+      );
+    }
+  });
+
+  it('connects default text, headings and code to font tokens', () => {
+    expect(declarations(compiled, 'body')['font-family']).toBe(
+      'var(--font-sans)',
+    );
+    expect(declarations(compiled, 'body')['font-size']).toBe(
+      'var(--text-base)',
+    );
+    expect(declarations(compiled, 'h1')['font-family']).toBe(
+      'var(--font-heading)',
+    );
+    expect(declarations(compiled, 'code')['font-family']).toBe(
+      'var(--font-mono)',
+    );
+  });
+});

package/tests/logic/toaster.test.tsx

@@ -0,0 +1,108 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { createToastManager, Toaster } from '#components/ui/toast';
+import { createToaster } from '#lib/toaster';
+
+describe('application toaster', () => {
+  it('forwards what a toast reports to the Base UI toast manager', () => {
+    const manager = createToastManager();
+    const add = vi.spyOn(manager, 'add');
+    const close = vi.spyOn(manager, 'close');
+    const onClose = vi.fn();
+    const toaster = createToaster(manager);
+
+    const id = toaster.show({
+      id: 'saved',
+      type: 'success',
+      title: 'Saved',
+      description: 'All changes are stored.',
+      duration: 4000,
+      onClose,
+    });
+    toaster.close(id);
+
+    expect(id).toBe('saved');
+    expect(add).toHaveBeenCalledWith({
+      id: 'saved',
+      type: 'success',
+      title: 'Saved',
+      description: 'All changes are stored.',
+      timeout: 4000,
+      priority: 'low',
+      onClose,
+    });
+    expect(close).toHaveBeenCalledWith('saved');
+    expect(toaster.show({ title: 'Saved again' })).toEqual(expect.any(String));
+  });
+
+  it('renders an action as a button that leaves the toast open', async () => {
+    const manager = createToastManager();
+    const onClick = vi.fn();
+    render(<Toaster toastManager={manager} />);
+
+    act(() => {
+      createToaster(manager).show({
+        type: 'info',
+        title: 'Archived',
+        action: { label: 'Undo', onClick },
+      });
+    });
+    fireEvent.click(await screen.findByRole('button', { name: 'Undo' }));
+
+    expect(onClick).toHaveBeenCalledOnce();
+    expect(screen.getByText('Archived')).toBeInTheDocument();
+  });
+
+  it('closes one toast, never all of them', () => {
+    const manager = createToastManager();
+    const close = vi.spyOn(manager, 'close');
+
+    // A JavaScript caller can pass no id, which Base UI would take as "close every toast".
+    createToaster(manager).close(undefined as unknown as string);
+
+    expect(close).not.toHaveBeenCalled();
+  });
+
+  it('announces a plain-text error at once and keeps every other toast at the default priority', () => {
+    const manager = createToastManager();
+    const add = vi.spyOn(manager, 'add');
+    const toaster = createToaster(manager);
+
+    toaster.show({
+      type: 'error',
+      title: 'Unable to save',
+      description: 'The server is unavailable.',
+    });
+    toaster.show({
+      type: 'error',
+      title: 'Unable to deploy',
+      description: <button type='button'>Show technical details</button>,
+    });
+    toaster.show({
+      type: 'error',
+      title: 'Unable to save',
+      action: { label: 'Retry', onClick: vi.fn() },
+    });
+    toaster.show({ type: 'success', title: 'Saved' });
+
+    expect(add.mock.calls.map(([options]) => options.priority)).toEqual([
+      'high',
+      'low',
+      'low',
+      'low',
+    ]);
+  });
+
+  it('shows what it forwards in the Toaster mounted with its defaults', async () => {
+    // Both defaults are the module's toast manager: that shared manager is what connects the registered toaster to the
+    // Toaster that client/react-providers.ts mounts.
+    render(<Toaster />);
+
+    act(() => {
+      createToaster().show({ type: 'success', title: 'Connected' });
+    });
+
+    expect(await screen.findByText('Connected')).toBeInTheDocument();
+  });
+});