Convert properties-to-ts to TypeScript (#2108)

* build: converts ts-node to tsx

* build: updates properties-to-ts to use TypeScript

* fix: exports FocusHandle from the correct location

* fix: removes unused recursive-readdir

* fix: minor refactor of filename in properties-to-ts

* fix: refactored properties.d.ts using future PR with better code docs

* fix: removed cyclical reference to icons index

* fix: renamed variables in convertPropertiesToJson

packages/odyssey-react-mui/package.json

@@ -46,10 +46,10 @@
     "dev:source": "yarn build:source --watch",
     "dev:types": "yarn build:types --watch",
     "dev": "npm-run-all --parallel dev:source dev:types",
-    "generate:i18n": "node scripts/properties-to-ts.js bundle",
+    "generate:i18n": "tsx scripts/properties-to-ts.ts bundle",
     "generate:iconComponents": "svgr ../odyssey-icons/dist/icons --out-dir ./src/icons.generated",
     "generate:icons": "npm-run-all --sequential build:cleanIconComponents generate:iconComponents build:cleanIconsIndex generate:iconsIndex",
-    "generate:iconsIndex": "ts-node --esm scripts/generateIconsIndex.ts",
+    "generate:iconsIndex": "tsx scripts/generateIconsIndex.ts",
     "lint": "eslint .",
     "prepack": "yarn exec prepack",
     "test": "jest",
@@ -75,7 +75,7 @@
     "i18next": "^23.5.1",
     "material-react-table": "^2.0.2",
     "react-i18next": "^12.2.2",
-    "ts-node": "^10.9.1",
+    "tsx": "^4.7.0",
     "word-wrap": "~1.2.5"
   },
   "devDependencies": {
@@ -96,18 +96,15 @@
     "@types/jest-axe": "^3.5.1",
     "@types/react": "^17.0.30",
     "@types/react-dom": "^17.0.5",
-    "@types/yargs": "^17",
     "babel-plugin-import": "^1.13.5",
     "eslint": "^8.44.0",
     "jest": "^29.6.1",
     "jest-axe": "^5.0.1",
     "jest-environment-jsdom": "^29.6.1",
-    "node-ts": "^6.0.1",
     "npm-run-all": "^4.1.5",
     "properties": "1.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "recursive-readdir": "^2.2.2",
     "regenerator-runtime": "^0.13.7",
     "rimraf": "^5.0.1",
     "stylelint": "^14.13.0",

packages/odyssey-react-mui/scripts/properties-to-ts.js → packages/odyssey-react-mui/scripts/properties-to-ts.ts

@@ -1,3 +1,4 @@
+#!/usr/bin/env node
 /*!
  * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
  * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
@@ -10,86 +11,99 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-// Part of this has been copied over from @okta/ui-build-tools' own internal node script
+// This was originally copied over from @okta/ui-build-tools' own internal node script:
 // https://github.com/okta/ui-build-tools/blob/main/packages/clis/i18n/properties-to-json.js
 
-const { resolve, join, basename, extname } = require("node:path");
-const {
-  readFileSync,
-  writeFileSync,
-  rmSync,
+import { basename, extname, join, resolve } from "node:path";
+import {
   existsSync,
   mkdirSync,
-} = require("node:fs");
-const properties = require("properties");
-const readdir = require("recursive-readdir");
-const yargs = require("yargs");
-const { hideBin } = require("yargs/helpers");
+  readFileSync,
+  rmSync,
+  writeFileSync,
+} from "node:fs";
+import { readdir } from "node:fs/promises";
+import properties from "properties";
+import { hideBin } from "yargs/helpers";
+import yargs from "yargs/yargs";
 
-const convert = (baseFiles, propertiesTargetDir) => {
-  for (const src of baseFiles) {
-    const filename = basename(src);
+const convert = (baseFiles: string[], propertiesTargetDir: string) => {
+  baseFiles.forEach((src) => {
     const extension = extname(src);
+    const filename = basename(src, extension);
     const source = `${readFileSync(src)}`;
 
-    properties.parse(source, function (error, obj) {
+    properties.parse(source, (error, propertiesJson) => {
       if (error) {
         return console.error(error);
       }
 
-      const targetFile = join(
-        propertiesTargetDir,
-        filename.replace(extension, ".ts")
-      );
+      const targetFile = join(propertiesTargetDir, filename.concat(".ts"));
+
       writeFileSync(
         targetFile,
-        `export const translation = ${JSON.stringify(obj)};`
+        `export const translation = ${JSON.stringify(propertiesJson)};`
       );
     });
-  }
+  });
 };
 
-async function convertPropertiesToJson({ resourcePath, targetJsonPath }) {
-  const sourceDirectory = resolve(resourcePath);
-  const propertiesTargetDirectory = resolve(targetJsonPath);
+async function convertPropertiesToJson({
+  jsonOutputPath,
+  propertiesFilesPath,
+}: {
+  jsonOutputPath: string;
+  propertiesFilesPath: string;
+}) {
+  const sourceDirectory = resolve(propertiesFilesPath);
+  const propertiesTargetDirectory = resolve(jsonOutputPath);
 
   if (!existsSync(sourceDirectory)) {
     mkdirSync(sourceDirectory);
   }
+
   if (existsSync(propertiesTargetDirectory)) {
     rmSync(propertiesTargetDirectory, { recursive: true, force: true });
   }
+
   mkdirSync(propertiesTargetDirectory);
 
-  let baseFiles = await readdir(sourceDirectory);
-  convert(baseFiles, propertiesTargetDirectory);
+  const propertiesFilePaths = await readdir(sourceDirectory, {
+    recursive: true,
+  });
+
+  convert(
+    propertiesFilePaths
+      .filter((propertiesFilePath) =>
+        propertiesFilePath.endsWith(".properties")
+      )
+      .map((propertiesFilePath) => join(sourceDirectory, propertiesFilePath)),
+    propertiesTargetDirectory
+  );
 }
 
 yargs(hideBin(process.argv))
   .scriptName("properties-to-ts")
   .usage("$0 <cmd> [args]")
   .command(
-    "bundle",
-    "Converts properties file to ts",
-    (yargs) => {
+    "bundle [propertiesFilesPath] [jsonOutputPath]",
+    "Converts `properties` files to TypeScript types.",
+    (yargs) =>
       yargs
-        .positional("resourcePath", {
-          type: "string",
+        .positional("propertiesFilesPath", {
           default: "src/properties",
           describe: "A relative path to resources based on cwd.",
-        })
-        .positional("targetJsonPath", {
           type: "string",
+        })
+        .positional("jsonOutputPath", {
           default: "src/properties/ts",
           describe: "A relative path to directory for ts file output",
-        });
-    },
-    function (argv) {
-      const { resourcePath, targetJsonPath } = argv;
-
+          type: "string",
+        }),
+    (argv) => {
       convertPropertiesToJson({
-        resourcePath,
-        targetJsonPath,
+        jsonOutputPath: argv.jsonOutputPath,
+        propertiesFilesPath: argv.propertiesFilesPath,
       });
     }
   )