fix: properly translate static table headers (#904)

packages/tools/.gitignore

@@ -0,0 +1,56 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+dist/
+bin/
+.tern-project
+.vscode/
+.idea/
+manifest.yml
+.imdone/
+data/contributors.json
+cypress/videos
+cypress/screenshots
+__diff_output__
+.cache
+*.log
+.env
+.temp/
+*.tgz
+public/sw.js
+public/workbox*.js
+

packages/tools/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "arrowParens": "avoid",
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 100
+}

packages/tools/babel.config.js

@@ -0,0 +1,96 @@
+const path = require('path');
+
+const coreVersion = require('./package.json').version;
+const isProduction = process.env.NODE_ENV === 'production';
+const isTest = process.env.NODE_ENV === 'test';
+const isESM = process.env.NODE_ENV === 'esm';
+
+console.info('Build Package:', path.basename(process.cwd()));
+
+const defaultPlugins = [
+  'lodash',
+  [
+    'babel-plugin-transform-builtin-extend',
+    {
+      globals: ['Error'],
+    },
+  ],
+  'transform-export-extensions',
+  '@babel/plugin-proposal-class-properties',
+  '@babel/plugin-proposal-object-rest-spread',
+  '@babel/plugin-proposal-export-default-from',
+  '@babel/plugin-proposal-nullish-coalescing-operator',
+  '@babel/plugin-proposal-optional-chaining',
+  '@babel/plugin-syntax-dynamic-import',
+  'babel-plugin-inline-json-import',
+];
+
+const svgo = {
+  plugins: [
+    {
+      name: 'preset-default',
+      params: {
+        overrides: {
+          removeViewBox: false,
+        },
+      },
+    },
+  ],
+};
+
+function presets() {
+  return [
+    '@babel/preset-react',
+    '@babel/preset-env',
+    [
+      '@emotion/babel-preset-css-prop',
+      {
+        autoLabel: 'always',
+      },
+    ],
+    '@babel/typescript',
+  ];
+}
+
+function plugins() {
+  if (isESM) {
+    return [
+      ...defaultPlugins,
+      [
+        'transform-define',
+        {
+          STATIC_CMS_CORE_VERSION: `${coreVersion}`,
+        },
+      ],
+      [
+        'inline-react-svg',
+        {
+          svgo,
+        },
+      ],
+    ];
+  }
+
+  if (isTest) {
+    return [
+      ...defaultPlugins,
+      [
+        'inline-react-svg',
+        {
+          svgo,
+        },
+      ],
+    ];
+  }
+
+  if (!isProduction) {
+    return [...defaultPlugins];
+  }
+
+  return defaultPlugins;
+}
+
+module.exports = {
+  presets: presets(),
+  plugins: plugins(),
+};

packages/tools/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@staticcms/tools",
+  "version": "1.0.0",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "format": "prettier \"src/**/*.{js,jsx,ts,tsx,css}\" --write",
+    "lint": "prettier \"src/**/*.{js,jsx,ts,tsx,css}\" --list-different",
+    "sync-locales": "ts-node -r tsconfig-paths/register src/localeSync.ts",
+    "type-check": "tsc --watch"
+  },
+  "dependencies": {
+    "@staticcms/core": "^3.3.3",
+    "lodash": "4.17.21",
+    "prettier": "2.8.8",
+    "ts-node": "10.9.1",
+    "typescript": "5.0.4"
+  },
+  "devDependencies": {
+    "@types/common-tags": "1.8.1",
+    "@types/create-react-class": "15.6.3",
+    "@types/fs-extra": "11.0.1",
+    "@types/is-hotkey": "0.1.7",
+    "@types/jest": "29.5.1",
+    "@types/js-yaml": "4.0.5",
+    "@types/jwt-decode": "2.2.1",
+    "@types/lodash": "4.14.194",
+    "@types/minimatch": "5.1.2",
+    "@types/node": "18.16.14",
+    "@types/node-fetch": "2.6.4",
+    "@types/react": "18.2.0",
+    "@types/react-color": "3.0.6",
+    "@types/react-dom": "18.2.1",
+    "@types/react-virtualized-auto-sizer": "1.0.1",
+    "@types/react-window": "1.8.5",
+    "@types/styled-components": "5.1.26",
+    "@types/url-join": "4.0.1",
+    "@types/uuid": "9.0.1"
+  }
+}

packages/tools/src/localeSync.ts

@@ -0,0 +1,110 @@
+import { join } from 'path';
+import get from 'lodash/get';
+import prettier from 'prettier';
+
+import locales from '@staticcms/core/locales';
+import baseLocale from '@staticcms/core/locales/en';
+
+import type { BaseLocalePhrases, LocalePhrases, LocalePhrasesRoot } from '@staticcms/core/locales';
+import { readFileSync, writeFileSync } from 'fs';
+
+// const localesDir = "../core/src/locales";
+
+function processLocaleSection(
+  baseSection: BaseLocalePhrases,
+  localeSection: LocalePhrases,
+): LocalePhrases {
+  if (typeof baseSection === 'string') {
+    return localeSection ?? undefined;
+  }
+
+  return Object.keys(baseSection).reduce((acc, section) => {
+    acc[section] = processLocaleSection(
+      baseSection[section],
+      typeof localeSection === 'string' ? undefined : localeSection?.[section],
+    );
+
+    return acc;
+  }, {} as LocalePhrasesRoot);
+}
+
+function processLocale(name: string, locale: LocalePhrasesRoot) {
+  const newLocale = Object.keys(baseLocale).reduce((acc, section) => {
+    acc[section] = processLocaleSection(baseLocale[section], locale[section]);
+
+    return acc;
+  }, {} as LocalePhrasesRoot);
+
+  const path = join(__dirname, '../../core/src/locales', name, `/index.ts`);
+
+  const formattedCode = prettier.format(
+    `import type { LocalePhrasesRoot } from '../types';
+
+const ${name}: LocalePhrasesRoot = ${JSON.stringify(
+      newLocale,
+      function (_k, v) {
+        return v === undefined ? null : v;
+      },
+      2,
+    )};
+
+export default ${name};
+`,
+    {
+      parser: 'typescript',
+      arrowParens: 'avoid',
+      trailingComma: 'all',
+      singleQuote: true,
+      printWidth: 100,
+    },
+  );
+
+  writeFileSync(path, formattedCode);
+
+  const lines = readFileSync(path, 'utf-8').split('\n');
+
+  const outputLines: string[] = [];
+  const parentPath: string[] = [];
+
+  for (const line of lines) {
+    const parentOpenMatch = /([a-zA-Z0-9_]+): {/.exec(line);
+    if (parentOpenMatch && parentOpenMatch.length === 2) {
+      parentPath.push(parentOpenMatch[1]);
+      outputLines.push(line);
+      continue;
+    }
+
+    const parentCloseMatch = /},/.exec(line);
+    if (parentCloseMatch && parentCloseMatch.length === 1) {
+      parentPath.pop();
+      outputLines.push(line);
+      continue;
+    }
+
+    const emptyLine = /([ ]*)([a-zA-Z0-9_]+): null,/.exec(line);
+    if (emptyLine && emptyLine.length === 3) {
+      const englishTranslation = String(
+        get(baseLocale, [...parentPath, emptyLine[2]].join('.')),
+      ).replace(/\n/g, '\\n');
+
+      outputLines.push(
+        `${emptyLine[1]}${emptyLine[2]}: undefined, // English translation: '${englishTranslation}'`,
+      );
+      continue;
+    }
+
+    outputLines.push(line);
+  }
+
+  writeFileSync(path, outputLines.join('\n'));
+}
+
+(async function () {
+  Object.keys(locales).forEach(locale => {
+    if (locale === 'en') {
+      return;
+    }
+
+    processLocale(locale, locales[locale]);
+  });
+})();

packages/tools/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "declaration": true,
+    "declarationDir": "dist",
+    "emitDeclarationOnly": true,
+    "jsx": "react",
+    "target": "ES2017",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "preserveSymlinks": true,
+    "noEmit": false,
+    "strict": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "allowJs": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "allowImportingTsExtensions": true,
+    "baseUrl": "./",
+    "lib": ["DOM", "es6", "ES2015", "ES2020"],
+    "paths": {
+      "@staticcms/core/locales": ["../core/src/locales"],
+      "@staticcms/core/locales/*": ["../core/src/locales/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "../../node_modules"]
+}