Convert properties-to-ts to TypeScript

lerna.json

@@ -2,9 +2,7 @@
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "changelogPreset": "@okta/conventional-changelog-odyssey",
   "npmClient": "yarn",
-  "packages": [
-    "packages/*"
-  ],
+  "packages": ["packages/*"],
   "useNx": false,
   "version": "1.12.2"
 }

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,13 +96,11 @@
     "@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",

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,29 +11,29 @@
  * 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 convert = (baseFiles: string[], propertiesTargetDir: string) => {
+  baseFiles.forEach((src) => {
     const filename = basename(src);
     const extension = extname(src);
     const source = `${readFileSync(src)}`;
 
-    properties.parse(source, function (error, obj) {
+    properties.parse(source, function (error, propertiesJson) {
       if (error) {
         return console.error(error);
       }
@@ -41,55 +42,71 @@ const convert = (baseFiles, propertiesTargetDir) => {
         propertiesTargetDir,
         filename.replace(extension, ".ts")
       );
+
       writeFileSync(
         targetFile,
-        `export const translation = ${JSON.stringify(obj)};`
+        `export const translation = ${JSON.stringify(propertiesJson)};`
       );
     });
-  }
+  });
 };
 
-async function convertPropertiesToJson({ resourcePath, targetJsonPath }) {
+async function convertPropertiesToJson({
+  resourcePath,
+  targetJsonPath,
+}: {
+  resourcePath: string;
+  targetJsonPath: string;
+}) {
   const sourceDirectory = resolve(resourcePath);
   const propertiesTargetDirectory = resolve(targetJsonPath);
 
   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 [resourcePath] [targetJsonPath]",
+    "Converts `properties` files to TypeScript types.",
+    (yargs) =>
       yargs
         .positional("resourcePath", {
-          type: "string",
           default: "src/properties",
           describe: "A relative path to resources based on cwd.",
+          type: "string",
         })
         .positional("targetJsonPath", {
-          type: "string",
           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,
+        resourcePath: argv.resourcePath,
+        targetJsonPath: argv.targetJsonPath,
       });
     }
   )

packages/odyssey-react-mui/src/@types/properties.d.ts

@@ -0,0 +1,40 @@
+/*!
+ * Copyright (c) 2024-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.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+declare module "properties" {
+  type ParseCallback = (error: Error, propertiesJson: object) => void;
+
+  type StringifyCallback = (error: Error, propertiesString: string) => void;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function createStringifier(): any;
+
+  function parse(
+    data: string,
+    options: object | ParseCallback,
+    cb?: ParseCallback
+  ): void;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function stringify(
+    stringifier: string,
+    options: object | StringifyCallback,
+    cb?: StringifyCallback
+  ): void;
+
+  // eslint-disable-next-line import/no-default-export
+  export default {
+    createStringifier,
+    parse,
+    stringify,
+  };
+}

packages/odyssey-react-mui/src/icons.generated/index.ts

@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * Copyright (c) 2024-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.")
  *
  * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
@@ -87,3 +87,4 @@ export * from "./User";
 export * from "./Video";
 export * from "./Warning";
 export * from "./WarningFilled";
+export * from "./index";

packages/odyssey-react-mui/src/index.ts

@@ -52,8 +52,8 @@ export type {
   ThemeOptions,
 } from "@mui/material";
 
-export type { ForwardRefWithType, FocusHandle } from "./@types/react-augment";
-
+export type { ForwardRefWithType } from "./@types/react-augment";
+export type { FocusHandle } from "./inputUtils";
 export { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
 
 export * from "./Accordion";

packages/odyssey-react-mui/tsconfig.json

@@ -3,8 +3,5 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "@emotion/react"
-  },
-  "ts-node": {
-    "files": true
   }
 }