@bloom-housing/ui-components 4.1.3-alpha.0 → 4.1.3-alpha.1

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.1.3-alpha.1](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.1.3-alpha.0...@bloom-housing/ui-components@4.1.3-alpha.1) (2022-04-04)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
 ## [4.1.3-alpha.0](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.1.2-alpha.3...@bloom-housing/ui-components@4.1.3-alpha.0) (2022-03-30)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.1.3-alpha.0",
+  "version": "4.1.3-alpha.1",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
@@ -100,5 +100,5 @@
     "tailwindcss": "2.2.10",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "d278b86d0c7b26e2e26f97d92f9a715e416ab052"
+  "gitHead": "cf5c2f24a088665630fd3830bb6758e316b2cbb4"
 }

package/scripts/duplicate-translations.ts

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+// Prints duplicate translation strings for cleanup
+// example: `ts-node duplicate-translations > duplicated-keys.json`
+const englishTranslations = require("../src/locales/general.json")
+const spanishTranslations = require("../src/locales/es.json")
+const chineseTranslations = require("../src/locales/zh.json")
+const vietnameseTranslations = require("../src/locales/vi.json")
+const tagalogTranslations = require("../src/locales/tl.json")
+
+function main() {
+  type TranslationsType = {
+    [key: string]: string
+  }
+
+  const allTranslations = [
+    { translationKeys: englishTranslations, language: "English" },
+    { translationKeys: spanishTranslations, language: "Spanish" },
+    { translationKeys: chineseTranslations, language: "Chinese" },
+    { translationKeys: vietnameseTranslations, language: "Vietnamese" },
+    { translationKeys: tagalogTranslations, language: "Tagalog" },
+  ]
+
+  const getDuplicateStrings = (translations: TranslationsType) => {
+    const translationValues = Object.values(translations)
+    translationValues.forEach(() => {
+      translationValues.filter((value, index) => translationValues.indexOf(value) !== index)
+    })
+
+    const duplicates: string[] = translationValues.reduce(
+      (acc: string[], val, index, translationValues) => {
+        if (translationValues.indexOf(val) !== index && acc.indexOf(val) < 0) acc.push(val)
+        return acc
+      },
+      []
+    )
+
+    return duplicates
+  }
+
+  allTranslations.forEach((foreignKeys) => {
+    console.log("--------------------")
+    console.log(`Duplicate Public Site ${foreignKeys.language} Translations:`)
+    const duplicatePublicSiteTranslations = getDuplicateStrings(foreignKeys.translationKeys)
+    duplicatePublicSiteTranslations.forEach((duplicateValue) => console.log(duplicateValue))
+  })
+}
+
+void main()
+
+export {}

package/scripts/missing-translations.ts

@@ -0,0 +1,52 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+// Prints out keys/strings that exist in the english file but not in a foreign language translation file
+// example: `ts-node missing-translations > missing-foreign-keys.json`
+const englishTranslations = require("../src/locales/general.json")
+const spanishTranslations = require("../src/locales/es.json")
+const chineseTranslations = require("../src/locales/zh.json")
+const vietnameseTranslations = require("../src/locales/vi.json")
+const tagalogTranslations = require("../src/locales/tl.json")
+
+function main() {
+  type TranslationsType = {
+    [key: string]: string
+  }
+
+  const allTranslations = [
+    { translationKeys: spanishTranslations, language: "Spanish" },
+    { translationKeys: chineseTranslations, language: "Chinese" },
+    { translationKeys: vietnameseTranslations, language: "Vietnamese" },
+    { translationKeys: tagalogTranslations, language: "Tagalog" },
+  ]
+
+  const findMissingStrings = (
+    baseTranslations: TranslationsType,
+    checkedTranslations: TranslationsType
+  ) => {
+    const baseKeys = Object.keys(baseTranslations)
+    const checkedKeys = Object.keys(checkedTranslations)
+    const missingKeys: string[] = []
+    baseKeys.forEach((key) => {
+      if (checkedKeys.indexOf(key) < 0) {
+        missingKeys.push(key)
+      }
+    })
+    return missingKeys
+  }
+
+  allTranslations.forEach((foreignKeys) => {
+    console.log("--------------------")
+    console.log(`Missing Public Site ${foreignKeys.language} Translations:`)
+    const missingPublicSiteTranslations = findMissingStrings(
+      englishTranslations,
+      foreignKeys.translationKeys
+    )
+    missingPublicSiteTranslations.forEach((missingKey) =>
+      console.log(`${missingKey}, ${JSON.stringify(englishTranslations[missingKey])}`)
+    )
+  })
+}
+
+void main()
+
+export {}

package/scripts/reformat-strings.ts

@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+// Reformats strings to flatten the object structure
+// example: `ts-node reformat-strings > flattened-keys.json`
+
+const englishTranslations = require("../src/locales/general.json")
+const spanishTranslations = require("../src/locales/es.json")
+const chineseTranslations = require("../src/locales/zh.json")
+const vietnameseTranslations = require("../src/locales/vi.json")
+const tagalogTranslations = require("../src/locales/tl.json")
+
+function main() {
+  type TranslationsType = {
+    [key: string]: string | TranslationsType
+  }
+
+  const allTranslations = [
+    { translationKeys: englishTranslations, language: "English" },
+    { translationKeys: spanishTranslations, language: "Spanish" },
+    { translationKeys: chineseTranslations, language: "Chinese" },
+    { translationKeys: vietnameseTranslations, language: "Vietnamese" },
+    { translationKeys: tagalogTranslations, language: "Tagalog" },
+  ]
+
+  const addEntry = (
+    translationKey: string,
+    parentKey: string,
+    baseTranslations: TranslationsType | string,
+    flattenedKeys: { [key: string]: string }[]
+  ) => {
+    flattenedKeys.push({
+      key: parentKey ? `${parentKey}.${translationKey}` : translationKey,
+      value: baseTranslations[translationKey],
+    })
+  }
+
+  const flattenKeys = (
+    baseTranslations: TranslationsType | string,
+    flattenedKeys: { [key: string]: string }[],
+    parentKey?: string
+  ) => {
+    Object.keys(baseTranslations).forEach((translationKey) => {
+      if (typeof baseTranslations[translationKey] === "string") {
+        addEntry(translationKey, parentKey || "", baseTranslations, flattenedKeys)
+      }
+      if (typeof baseTranslations[translationKey] !== "string") {
+        flattenKeys(
+          baseTranslations[translationKey],
+          flattenedKeys,
+          parentKey ? `${parentKey}.${translationKey}` : translationKey
+        )
+      }
+    })
+    return flattenedKeys
+  }
+
+  let flattenedKeys: { [key: string]: string }[] = []
+
+  allTranslations.forEach((foreignKeys) => {
+    console.log("--------------------")
+    console.log(`Flattened keys for ${foreignKeys.language} translations:`)
+    flattenedKeys = flattenKeys(foreignKeys.translationKeys, flattenedKeys, "")
+    flattenedKeys.forEach((keys) => console.log(`"${keys.key}": ${JSON.stringify(keys.value)},`))
+  })
+}
+
+void main()
+
+export {}

package/scripts/unused-foreign-keys.ts

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+// Prints keys that are in a foreign language translations file that do not exist in the english file for cleanup
+// example: `ts-node unused-foreign-keys > unused-foreign-keys.json`
+const englishTranslations = require("../src/locales/general.json")
+const spanishTranslations = require("../src/locales/es.json")
+const chineseTranslations = require("../src/locales/zh.json")
+const vietnameseTranslations = require("../src/locales/vi.json")
+const tagalogTranslations = require("../src/locales/tl.json")
+
+function main() {
+  type TranslationsType = {
+    [key: string]: string
+  }
+
+  const allTranslations = [
+    { translationKeys: spanishTranslations, language: "Spanish" },
+    { translationKeys: chineseTranslations, language: "Chinese" },
+    { translationKeys: vietnameseTranslations, language: "Vietnamese" },
+    { translationKeys: tagalogTranslations, language: "Tagalog" },
+  ]
+
+  const getUnusedForeignKeys = (
+    baseTranslations: TranslationsType,
+    checkedTranslations: TranslationsType
+  ) => {
+    const baseTranslationsKeys = Object.keys(baseTranslations)
+    const checkedTranslationsKeys = Object.keys(checkedTranslations)
+    const unusedKeys: string[] = []
+    checkedTranslationsKeys.forEach((key) => {
+      if (!baseTranslationsKeys.find((item) => key === item)) {
+        unusedKeys.push(key)
+      }
+    })
+    return unusedKeys
+  }
+
+  allTranslations.forEach((foreignKeys) => {
+    console.log("--------------------")
+    console.log(`Unused Public Site ${foreignKeys.language} Keys:`)
+    const unusedForeignKeys: string[] = getUnusedForeignKeys(
+      englishTranslations,
+      foreignKeys.translationKeys
+    )
+    unusedForeignKeys.forEach((unusedKey) => console.log(unusedKey))
+  })
+}
+
+void main()
+
+export {}

package/src/forms/DOBField.tsx

@@ -58,7 +58,7 @@ const DOBField = (props: DOBFieldProps) => {
           label={t("t.month")}
           disabled={props.disabled}
           readerOnly={true}
-          placeholder="MM"
+          placeholder={t("account.settings.placeholders.month")}
           defaultValue={defaultDOB?.birthMonth ? defaultDOB.birthMonth : ""}
           error={error?.birthMonth !== undefined}
           validation={{
@@ -80,7 +80,7 @@ const DOBField = (props: DOBFieldProps) => {
           label={t("t.day")}
           disabled={props.disabled}
           readerOnly={true}
-          placeholder="DD"
+          placeholder={t("account.settings.placeholders.day")}
           defaultValue={defaultDOB?.birthDay ? defaultDOB.birthDay : ""}
           error={error?.birthDay !== undefined}
           validation={{
@@ -102,7 +102,7 @@ const DOBField = (props: DOBFieldProps) => {
           label={t("t.year")}
           disabled={props.disabled}
           readerOnly={true}
-          placeholder="YYYY"
+          placeholder={t("account.settings.placeholders.year")}
           defaultValue={defaultDOB?.birthYear ? defaultDOB.birthYear : ""}
           error={error?.birthYear !== undefined}
           validation={{

package/src/forms/DateField.tsx

@@ -47,7 +47,7 @@ const DateField = (props: DateFieldProps) => {
           label={t("t.month")}
           disabled={props.disabled}
           readerOnly={true}
-          placeholder="MM"
+          placeholder={t("account.settings.placeholders.month")}
           defaultValue={defaultDate?.month ?? ""}
           error={error?.month !== undefined}
           validation={{
@@ -68,7 +68,7 @@ const DateField = (props: DateFieldProps) => {
           label={t("t.day")}
           disabled={props.disabled}
           readerOnly={true}
-          placeholder="DD"
+          placeholder={t("account.settings.placeholders.day")}
           defaultValue={defaultDate?.day ?? ""}
           error={error?.day !== undefined}
           validation={{
@@ -89,7 +89,7 @@ const DateField = (props: DateFieldProps) => {
           label={t("t.year")}
           disabled={props.disabled}
           readerOnly={true}
-          placeholder="YYYY"
+          placeholder={t("account.settings.placeholders.year")}
           defaultValue={defaultDate?.year ?? ""}
           error={error?.year !== undefined}
           validation={{

package/src/forms/HouseholdSizeField.tsx

@@ -61,7 +61,7 @@ const HouseholdSizeField = (props: HouseholdSizeFieldProps) => {
         <AlertNotice title={error?.message} type="alert" inverted>
           <p className="mb-2">{t("application.household.dontQualifyInfo")}</p>
           <p>
-            <a href={assistanceUrl}>{t("nav.getAssistance")}</a>
+            <a href={assistanceUrl}>{t("pageTitle.getAssistance")}</a>
           </p>
         </AlertNotice>
       </ErrorMessage>

package/src/forms/TimeField.tsx

@@ -109,7 +109,7 @@ const TimeField = ({
           label={t("t.minutes")}
           defaultValue={defaultValues?.minutes ?? ""}
           readerOnly={true}
-          placeholder="MM"
+          placeholder={t("account.settings.placeholders.month")}
           error={error}
           validation={{
             required: required || innerRequiredRule,