Merge pull request #36 from jy95/classes

feat: allow users to configure their own backend(s) for translations

documentation/blog/2024-04-20-empowerment.mdx

@@ -0,0 +1,15 @@
+---
+slug: empowerment
+title: Customizing i18next Configuration in Our Library
+authors: [jy95]
+tags: [features]
+---
+
+We're thrilled to announce a new feature in our library that empowers users to tailor i18next configuration to their preferences.
+i18next, the internationalization framework, plays a crucial role in facilitating multilingual support. Now, with this enhancement, users have greater control over how i18next behaves within our system.
+
+Benefits :
+
+- **Flexibility** : Users can adapt i18next settings to suit their project's needs, ensuring a seamless internationalization experience.
+- **Customization** : Fine-tune language-related functionalities, such as pluralization rules or date formatting, to match project specifications.
+- **Ease of Integration** : Our library seamlessly integrates with existing i18next workflows, minimizing implementation hurdles.

documentation/docs/custom/displayOrder.mdx

@@ -0,0 +1,27 @@
+---
+description: Control the display order used by the algorithm (Useful when you want to turn on / off some specific rules for some reason)
+title: 🔢 displayOrder
+---
+
+import CodeBlock from "@theme/CodeBlock";
+import Schema from "@site/static/dosages/examples/medicationrequest/medrx004.json";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import MultipleDosagesToText from "@site/src/components/multiple_dosage_to_text";
+
+<Tabs>
+  <TabItem value="text" label="Human readable text" default>
+    <MultipleDosagesToText dosages={Schema} config={{ displayOrder: ["method", "doseQuantity", "doseRange", "rateRatio", "rateQuantity", "rateRange", "durationDurationMax", "frequencyFrequencyMaxPeriodPeriodMax", "offsetWhen", "dayOfWeek", "timeOfDay", "asNeeded", "boundsDuration", "boundsPeriod", "boundsRange", "countCountMax", "event", "code", "maxDosePerPeriod", "maxDosePerAdministration", "maxDosePerLifetime", "additionalInstruction", "patientInstruction", "route", "site"] }} />
+  </TabItem>
+  <TabItem value="json" label="Dosage">
+    <CodeBlock language="json">{JSON.stringify(Schema, null, 2)}</CodeBlock>
+  </TabItem>
+  <TabItem value="config" label="Configuration">
+    ```js
+    {
+        "displayOrder": ["method", "doseQuantity", "doseRange", "rateRatio", "rateQuantity", "rateRange", "durationDurationMax", "frequencyFrequencyMaxPeriodPeriodMax", "offsetWhen", "dayOfWeek", "timeOfDay", "asNeeded", "boundsDuration", "boundsPeriod", "boundsRange", "countCountMax", "event", "code", "maxDosePerPeriod", "maxDosePerAdministration", "maxDosePerLifetime", "additionalInstruction", "patientInstruction", "route", "site"]
+    }
+    ```
+
+  </TabItem>
+</Tabs>

documentation/docs/custom/displaySeparator.mdx

@@ -0,0 +1,27 @@
+---
+description: Override separator between each part of "Dosage"
+title: ➖ displaySeparator
+---
+
+import CodeBlock from "@theme/CodeBlock";
+import Schema from "@site/static/dosages/examples/medicationrequest/medrx004.json";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import MultipleDosagesToText from "@site/src/components/multiple_dosage_to_text";
+
+<Tabs>
+  <TabItem value="text" label="Human readable text" default>
+    <MultipleDosagesToText dosages={Schema} config={{ displaySeparator: " | " }} />
+  </TabItem>
+  <TabItem value="json" label="Dosage">
+    <CodeBlock language="json">{JSON.stringify(Schema, null, 2)}</CodeBlock>
+  </TabItem>
+  <TabItem value="config" label="Configuration">
+    ```js
+    {
+        displaySeparator: " | "
+    }
+    ```
+
+  </TabItem>
+</Tabs>

documentation/docs/custom/i18nConfig.mdx

@@ -0,0 +1,48 @@
+---
+description: Options for the i18next instances
+title: 🌐 i18nConfig
+---
+
+import CodeBlock from "@theme/CodeBlock";
+import Schema from "@site/static/dosages/specs/boundsDuration/common.json";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import SingleDosageToText from "@site/src/components/single_dosage_to_text";
+
+<Tabs>
+  <TabItem value="text" label="Human readable text" default>
+    <SingleDosageToText 
+        dosage={Schema} 
+    />
+
+  </TabItem>
+  <TabItem value="json" label="Dosage">
+    <CodeBlock language="json">{JSON.stringify(Schema, null, 2)}</CodeBlock>
+  </TabItem>
+<TabItem value="config" label="i18nConfig">
+    ```js
+    import LocalStorageBackend from 'i18next-localstorage-backend'; // load from local storage
+    import HttpApi from 'i18next-http-backend'; // have a own http fallback
+
+    {
+        backend: {
+            backends: [
+                LocalStorageBackend,  // primary
+                HttpApi  // fallback
+            ],
+            backendOptions: [{
+                projectId: 'myLocizeProjectId'
+            }, {
+                loadPath: '/locales/{{lng}}/{{ns}}.json' // http api load path for my own fallback
+            }],
+            // cacheHitMode: 'none' // (default)
+            // cacheHitMode: 'refresh' // tries to refresh the cache by loading from the next backend and updates the cache
+            // cacheHitMode: 'refreshAndUpdateStore' // tries to refresh the cache by loading from the next backend, updates the cache and also update the i18next resource store
+            // reloadInterval: 60 * 60 * 1000 // can be used to reload resources in a specific interval (useful in server environments)
+            // refreshExpirationTime: 7 * 24 * 60 * 60 * 1000 // In case of caching with 'refresh' or 'refreshAndUpdateStore', it will only fetch from the next backend if the cached namespace is expired. Only supported if the backend returns the saved timestamp, like i18next-fs-backend, i18next-localstorage-backend
+        }
+    }
+    ```
+
+</TabItem>
+</Tabs>

documentation/src/components/multiple_dosage_to_text.tsx

@@ -5,7 +5,7 @@ import CodeBlock from "@theme/CodeBlock";
 // Types
 import type { Dosage as DosageR4 } from "fhir/r4";
 import type { Dosage as DosageR5 } from "fhir/r5";
-import type { Params as Config } from "fhir-dosage-utils";
+import type { Params as Config, I18InitOptions } from "fhir-dosage-utils";
 type Dosage = DosageR4 | DosageR5;
 
 // For the WHY, consult this
@@ -24,9 +24,11 @@ function decodeHtmlEntities(text: string): string {
 export default function MultipleDosagesToText({
   dosages,
   config,
+  i18nConfig,
 }: {
   dosages: Dosage[];
   config?: Config;
+  i18nConfig?: I18InitOptions;
 }): JSX.Element {
   const [dosageText, setDosageText] = useState("");
   const [language, setLanguage] = useState(config?.language || "en");
@@ -35,7 +37,7 @@ export default function MultipleDosagesToText({
   // Set up instance
   useEffect(() => {
     async function initializeDosageUtils() {
-      const utils = await FhirDosageUtils.build(config);
+      const utils = await FhirDosageUtils.build(config, i18nConfig);
       setDosageUtils(utils);
     }
 

documentation/src/components/single_dosage_to_text.tsx

@@ -5,7 +5,7 @@ import CodeBlock from "@theme/CodeBlock";
 // Types
 import type { Dosage as DosageR4 } from "fhir/r4";
 import type { Dosage as DosageR5 } from "fhir/r5";
-import type { Params as Config } from "fhir-dosage-utils";
+import type { Params as Config, I18InitOptions } from "fhir-dosage-utils";
 type Dosage = DosageR4 | DosageR5;
 
 // For the WHY, consult this
@@ -24,9 +24,11 @@ function decodeHtmlEntities(text: string): string {
 export default function SingleDosageToText({
   dosage,
   config,
+  i18nConfig,
 }: {
   dosage: Dosage;
   config?: Config;
+  i18nConfig?: I18InitOptions;
 }): JSX.Element {
   const [dosageText, setDosageText] = useState("");
   const [language, setLanguage] = useState(config?.language || "en");
@@ -35,7 +37,7 @@ export default function SingleDosageToText({
   // Set up instance
   useEffect(() => {
     async function initializeDosageUtils() {
-      const utils = await FhirDosageUtils.build(config);
+      const utils = await FhirDosageUtils.build(config, i18nConfig);
       setDosageUtils(utils);
     }