upstream-twenty/packages/twenty-docs/scripts/generate-ui-reference.ts

import { readFileSync } from 'node:fs';
import { resolve } from 'node:path';

import {
  type ComponentDocumentation,
  type TokenDocumentation,
} from '../../twenty-ui/docs/types';
import { checkUiReferenceImports } from './ui/check-ui-reference-imports';
import { renderComponentReference } from './ui/render-component-reference';
import { renderTokenReference } from './ui/render-ui-reference';
import { syncUiReferenceFiles } from './ui/sync-ui-reference-files';

const GENERATED_HEADER = `{/*
 * _____                    _
 *|_   _|_      _____ _ __ | |_ _   _
 *  | | \\ \\ /\\ / / _ \\ '_ \\| __| | | | Auto-generated file
 *  | |  \\ V  V /  __/ | | | |_| |_| | DO NOT EDIT - changes will be overwritten
 *  |_|   \\_/\\_/ \\___|_| |_|\\__|\\__, | Generated by: npx nx generate:ui twenty-docs
 *                              |___/
 *
 * This file is generated from the documentation data in packages/twenty-ui/generated.
 * To update it, edit the component prop types or design tokens in twenty-ui and run:
 *   npx nx generate:ui twenty-docs
 */}`;

const dataRoot = resolve(__dirname, '../../twenty-ui/generated');
const snippetsRoot = resolve(__dirname, '../snippets/ui/generated');
const pagesRoot = resolve(__dirname, '../ui');
const components: ComponentDocumentation[] = JSON.parse(
  readFileSync(resolve(dataRoot, 'components.docs.json'), 'utf8'),
);
const tokens: TokenDocumentation[] = JSON.parse(
  readFileSync(resolve(dataRoot, 'tokens.docs.json'), 'utf8'),
);
const outputs = [
  ...components.map((component) => ({
    name: `${component.slug}.mdx`,
    content: renderComponentReference(component),
  })),
  { name: 'tokens.mdx', content: renderTokenReference(tokens) },
];

const syncErrors = syncUiReferenceFiles({
  directory: snippetsRoot,
  outputs: outputs.map((output) => ({
    ...output,
    content: `${GENERATED_HEADER}\n\n${output.content}`,
  })),
  isCheckMode: process.argv.includes('--check'),
});

if (syncErrors.length > 0) {
  process.stderr.write(
    `${syncErrors.join('\n')}\nRun npx nx generate:ui twenty-docs.\n`,
  );
  process.exitCode = 1;
}

const importErrors = checkUiReferenceImports({
  pagesDirectory: pagesRoot,
  outputs,
});

if (importErrors.length > 0) {
  process.stderr.write(
    `${importErrors.join('\n')}\nKeep the pages under ui/ and DOCUMENTED_COMPONENTS in twenty-ui/docs/components.ts in sync.\n`,
  );
  process.exitCode = 1;
}