Run prettier

.github/workflows/e2e.yml

@@ -39,7 +39,7 @@ jobs:
         run: npx playwright install chromium --with-deps
 
       - name: Build apps
-        run: yarn turbo run build --color --concurrency=5
+        run: yarn turbo build --concurrency=5
 
       - name: Run dev server
         run: bash e2e/support/github/run-e2e-docker-env.sh

__mocks__/react-i18next.js

@@ -1,42 +1,37 @@
 /** At present, this entire mock is boilerplate. */
-const React = require("react");
-const reactI18next = require("react-i18next");
+const React = require('react');
+const reactI18next = require('react-i18next');
 
-const hasChildren = (node) =>
-  node && (node.children || (node.props && node.props.children));
+const hasChildren = (node) => node && (node.children || (node.props && node.props.children));
 
-const getChildren = (node) =>
-  node && node.children ? node.children : node.props && node.props.children;
+const getChildren = (node) => (node && node.children ? node.children : node.props && node.props.children);
 
 const renderNodes = (reactNodes) => {
-  if (typeof reactNodes === "string") {
+  if (typeof reactNodes === 'string') {
     return reactNodes;
   }
 
   return Object.keys(reactNodes).map((key, i) => {
     const child = reactNodes[key];
     const isElement = React.isValidElement(child);
 
-    if (typeof child === "string") {
+    if (typeof child === 'string') {
       return child;
     }
     if (hasChildren(child)) {
       const inner = renderNodes(getChildren(child));
       return React.cloneElement(child, { ...child.props, key: i }, inner);
     }
-    if (typeof child === "object" && !isElement) {
-      return Object.keys(child).reduce(
-        (str, childKey) => `${str}${child[childKey]}`,
-        ""
-      );
+    if (typeof child === 'object' && !isElement) {
+      return Object.keys(child).reduce((str, childKey) => `${str}${child[childKey]}`, '');
     }
 
     return child;
   });
 };
 
 const useMock = [(k) => k, {}];
-useMock.t = (k, o) => (o && o.defaultValue) || (typeof o === "string" ? o : k);
+useMock.t = (k, o) => (o && o.defaultValue) || (typeof o === 'string' ? o : k);
 useMock.i18n = {};
 
 module.exports = {

e2e/pages/index.ts

@@ -1 +1 @@
-export * from './home-page';
+export * from './home-page';

e2e/specs/sample-test.spec.ts

@@ -1,11 +1,11 @@
-import test from "@playwright/test";
-import { HomePage } from "../pages";
-import { expect } from "@playwright/test";
+import test from '@playwright/test';
+import { HomePage } from '../pages';
+import { expect } from '@playwright/test';
 
 // This test is a sample E2E test. You can delete it.
 
-test("Sample test", async ({ page}) => {
-    const homePage = new HomePage(page);
-    await homePage.goto();
-    await expect(homePage.page.getByRole('link', { name: 'Home' })).toBeVisible();
-}); 
+test('Sample test', async ({ page }) => {
+  const homePage = new HomePage(page);
+  await homePage.goto();
+  await expect(homePage.page.getByRole('link', { name: 'Home' })).toBeVisible();
+});

e2e/support/github/docker-compose.yml

@@ -1,11 +1,11 @@
 # This docker compose file is used to create a backend environment for the e2e.yml workflow.
-version: "3.7"
+version: '3.7'
 
 services:
   gateway:
     image: openmrs/openmrs-reference-application-3-gateway:${TAG:-nightly}
     ports:
-      - "8080:80"
+      - '8080:80'
 
   frontend:
     build:

i18next-parser.config.js

@@ -1,14 +1,14 @@
 module.exports = {
-  contextSeparator: "_",
+  contextSeparator: '_',
   // Key separator used in your translation keys
 
   createOldCatalogs: false,
   // Save the \_old files
 
-  defaultNamespace: "translations",
+  defaultNamespace: 'translations',
   // Default namespace used in your i18next config
 
-  defaultValue: "",
+  defaultValue: '',
   // Default value to give to empty keys
   // You may also specify a function accepting the locale, namespace, and key as arguments
 
@@ -18,43 +18,43 @@ module.exports = {
   keepRemoved: false,
   // Keep keys from the catalog that are no longer in code
 
-  keySeparator: ".",
+  keySeparator: '.',
   // Key separator used in your translation keys
   // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
 
   // see below for more details
   lexers: {
-    hbs: ["HandlebarsLexer"],
-    handlebars: ["HandlebarsLexer"],
+    hbs: ['HandlebarsLexer'],
+    handlebars: ['HandlebarsLexer'],
 
-    htm: ["HTMLLexer"],
-    html: ["HTMLLexer"],
+    htm: ['HTMLLexer'],
+    html: ['HTMLLexer'],
 
-    mjs: ["JavascriptLexer"],
-    js: ["JavascriptLexer"], // if you're writing jsx inside .js files, change this to JsxLexer
-    ts: ["JavascriptLexer"],
-    jsx: ["JsxLexer"],
-    tsx: ["JsxLexer"],
+    mjs: ['JavascriptLexer'],
+    js: ['JavascriptLexer'], // if you're writing jsx inside .js files, change this to JsxLexer
+    ts: ['JavascriptLexer'],
+    jsx: ['JsxLexer'],
+    tsx: ['JsxLexer'],
 
-    default: ["JavascriptLexer"],
+    default: ['JavascriptLexer'],
   },
 
-  lineEnding: "auto",
+  lineEnding: 'auto',
   // Control the line ending. See options at https://github.com/ryanve/eol
 
-  locales: ["en"],
+  locales: ['en'],
   // An array of the locales in your applications
 
-  namespaceSeparator: ":",
+  namespaceSeparator: ':',
   // Namespace separator used in your translation keys
   // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
 
-  output: "$NAMESPACE/$LOCALE.json",
+  output: '$NAMESPACE/$LOCALE.json',
   // Supports $LOCALE and $NAMESPACE injection
   // Supports JSON (.json) and YAML (.yml) file formats
   // Where to write the locale files relative to process.cwd()
 
-  pluralSeparator: "_",
+  pluralSeparator: '_',
   // Plural separator used in your translation keys
   // If you want to use plain english keys, separators such as `_` might conflict. You might want to set `pluralSeparator` to a different string that does not occur in your keys.
 

jest.config.js

@@ -1,32 +1,32 @@
 /**
  * @returns {Promise<import('jest').Config>}
  */
-const path = require("path");
+const path = require('path');
 
 module.exports = {
   collectCoverageFrom: [
-    "**/src/**/*.component.tsx",
-    "!**/node_modules/**",
-    "!**/vendor/**",
-    "!**/src/**/*.test.*",
-    "!**/src/declarations.d.ts",
-    "!**/e2e/**",
+    '**/src/**/*.component.tsx',
+    '!**/node_modules/**',
+    '!**/vendor/**',
+    '!**/src/**/*.test.*',
+    '!**/src/declarations.d.ts',
+    '!**/e2e/**',
   ],
   transform: {
-    "^.+\\.tsx?$": ["@swc/jest"],
+    '^.+\\.tsx?$': ['@swc/jest'],
   },
-  transformIgnorePatterns: ["/node_modules/(?!@openmrs)"],
+  transformIgnorePatterns: ['/node_modules/(?!@openmrs)'],
   moduleNameMapper: {
-    "@openmrs/esm-framework": "@openmrs/esm-framework/mock",
-    "@openmrs/esm-utils": "@openmrs/esm-framework/mock",
-    "\\.(s?css)$": "identity-obj-proxy",
-    "^lodash-es/(.*)$": "lodash/$1",
-    "^dexie$": require.resolve("dexie"),
+    '@openmrs/esm-framework': '@openmrs/esm-framework/mock',
+    '@openmrs/esm-utils': '@openmrs/esm-framework/mock',
+    '\\.(s?css)$': 'identity-obj-proxy',
+    '^lodash-es/(.*)$': 'lodash/$1',
+    '^dexie$': require.resolve('dexie'),
   },
-  setupFilesAfterEnv: ["<rootDir>/src/setup-tests.ts"],
-  testPathIgnorePatterns: [path.resolve(__dirname, "e2e")],
-  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ['<rootDir>/src/setup-tests.ts'],
+  testPathIgnorePatterns: [path.resolve(__dirname, 'e2e')],
+  testEnvironment: 'jsdom',
   testEnvironmentOptions: {
-    url: "http://localhost/",
+    url: 'http://localhost/',
   },
 };

src/boxes/extensions/blue-box.component.tsx

@@ -5,8 +5,8 @@
  * https://o3-docs.vercel.app/docs/extension-system
  */
 
-import React from "react";
-import styles from "./box.scss";
+import React from 'react';
+import styles from './box.scss';
 
 const BlueBox: React.FC = () => {
   return <div className={styles.blue}></div>;

src/boxes/extensions/brand-box.component.tsx

@@ -5,8 +5,8 @@
  * https://o3-docs.vercel.app/docs/extension-system
  */
 
-import React from "react";
-import styles from "./box.scss";
+import React from 'react';
+import styles from './box.scss';
 
 const RedBox: React.FC = () => {
   return <div className={styles.brand}></div>;

src/boxes/extensions/red-box.component.tsx

@@ -5,8 +5,8 @@
  * https://o3-docs.vercel.app/docs/extension-system
  */
 
-import React from "react";
-import styles from "./box.scss";
+import React from 'react';
+import styles from './box.scss';
 
 const RedBox: React.FC = () => {
   return <div className={styles.red}></div>;

src/boxes/slot/boxes.component.tsx

@@ -1,18 +1,18 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { Extension, ExtensionSlot } from "@openmrs/esm-framework";
-import styles from "./boxes.scss";
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Extension, ExtensionSlot } from '@openmrs/esm-framework';
+import styles from './boxes.scss';
 
 export const Boxes: React.FC = () => {
   const { t } = useTranslation();
 
   return (
     <div className={styles.container}>
-      <h5>{t("extensionSystem", "Extension system")}</h5>
+      <h5>{t('extensionSystem', 'Extension system')}</h5>
       <p>
         {t(
-          "extensionExplainer",
-          "Here are some colored boxes. Because they are attached as extensions within a slot, an admin can change what boxes are shown using configuration. These boxes happen to be defined in this module, but they could attach to this slot even if they were in a different module."
+          'extensionExplainer',
+          'Here are some colored boxes. Because they are attached as extensions within a slot, an admin can change what boxes are shown using configuration. These boxes happen to be defined in this module, but they could attach to this slot even if they were in a different module.',
         )}
       </p>
       <ExtensionSlot name="Boxes" className={styles.boxes}>

src/config-schema.ts

@@ -1,4 +1,4 @@
-import { Type, validator } from "@openmrs/esm-framework";
+import { Type, validator } from '@openmrs/esm-framework';
 
 /**
  * This is the config schema. It expects a configuration object which
@@ -24,19 +24,16 @@ export const configSchema = {
   casualGreeting: {
     _type: Type.Boolean,
     _default: false,
-    _description: "Whether to use a casual greeting (or a formal one).",
+    _description: 'Whether to use a casual greeting (or a formal one).',
   },
   whoToGreet: {
     _type: Type.Array,
-    _default: ["World"],
-    _description:
-      "Who should be greeted. Names will be separated by a comma and space.",
+    _default: ['World'],
+    _description: 'Who should be greeted. Names will be separated by a comma and space.',
     _elements: {
       _type: Type.String,
     },
-    _validators: [
-      validator((v) => v.length > 0, "At least one person must be greeted."),
-    ],
+    _validators: [validator((v) => v.length > 0, 'At least one person must be greeted.')],
   },
 };
 

src/declarations.d.ts

@@ -1,6 +1,6 @@
-declare module "@carbon/react";
-declare module "*.css";
-declare module "*.scss";
-declare module "*.png";
+declare module '@carbon/react';
+declare module '*.css';
+declare module '*.scss';
+declare module '*.png';
 
 declare type SideNavProps = object;

src/greeter/greeter.component.tsx

@@ -3,41 +3,35 @@
  * comes from `../config-schema.ts`. For more information about the
  * configuration system, read the docs: https://o3-docs.vercel.app/docs/configuration-system
  */
-import React from "react";
-import { Tile } from "@carbon/react";
-import { Trans, useTranslation } from "react-i18next";
-import { useConfig } from "@openmrs/esm-framework";
-import { Config } from "../config-schema";
-import styles from "./greeter.scss";
+import React from 'react';
+import { Tile } from '@carbon/react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useConfig } from '@openmrs/esm-framework';
+import { type Config } from '../config-schema';
+import styles from './greeter.scss';
 
 const Greeter: React.FC = () => {
   const { t } = useTranslation();
   const config: Config = useConfig();
 
   return (
     <div className={styles.container}>
-      <h5>{t("configSystem", "Configuration system")}</h5>
+      <h5>{t('configSystem', 'Configuration system')}</h5>
       <p>
         <Trans key="configSystemExplainer">
-          The greeting shown below is driven by the configuration system. To
-          change the configuration properties, click the spanner icon in the
-          navbar to pull up the Implementer Tools panel. Then, type{" "}
-          <em>template</em> into the <em>Search configuration</em> input. This
-          should filter the configuration properties to show only those that are
-          relevant to this module. You can change the values of these properties
-          and click <em>Save</em> to see the changes reflected in the UI
+          The greeting shown below is driven by the configuration system. To change the configuration properties, click
+          the spanner icon in the navbar to pull up the Implementer Tools panel. Then, type <em>template</em> into the{' '}
+          <em>Search configuration</em> input. This should filter the configuration properties to show only those that
+          are relevant to this module. You can change the values of these properties and click <em>Save</em> to see the
+          changes reflected in the UI
         </Trans>
         .
       </p>
       <div className={styles.greeting}>
         <Tile className={styles.tile}>
-          {config.casualGreeting ? (
-            <Trans key="casualGreeting">hey</Trans>
-          ) : (
-            <Trans key="formalGreeting">hello</Trans>
-          )}{" "}
+          {config.casualGreeting ? <Trans key="casualGreeting">hey</Trans> : <Trans key="formalGreeting">hello</Trans>}{' '}
           {/* t('world')  */}
-          {config.whoToGreet.join(", ")}!
+          {config.whoToGreet.join(', ')}!
         </Tile>
       </div>
       <br />