From ec41829ff3f33fe8b880712b638aa7c4ef45629a Mon Sep 17 00:00:00 2001 From: Dennis Kigen Date: Thu, 27 Apr 2023 19:45:24 +0300 Subject: [PATCH 1/2] (refactor) Remove unused styles and style imports + add eslint rules --- .eslintrc | 31 ++++++++++++- jest.config.js | 2 - src/root.scss | 118 +++++++++---------------------------------------- 3 files changed, 52 insertions(+), 99 deletions(-) diff --git a/.eslintrc b/.eslintrc index 94466a77b..c64a3f879 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,4 +1,33 @@ { + "parser": "@typescript-eslint/parser", + "plugins": [ + "@typescript-eslint" + ], "extends": ["ts-react-important-stuff", "plugin:prettier/recommended"], - "parser": "@typescript-eslint/parser" + "rules": { + "no-restricted-imports": [ + "error", + { + "paths": [ + { + "name": "lodash", + "message": "Import specific methods from `lodash`. e.g. `import map from 'lodash/map'`" + }, + { + "name": "lodash-es", + "importNames": ["default"], + "message": "Import specific methods from `lodash-es`. e.g. `import { map } from 'lodash-es'`" + }, + { + "name": "carbon-components-react", + "message": "Import from `@carbon/react` directly. e.g. `import { Toggle } from '@carbon/react'`" + }, + { + "name": "@carbon/icons-react", + "message": "Import from `@carbon/react/icons`. e.g. `import { ChevronUp } from '@carbon/react/icons'`" + } + ] + } + ] + } } diff --git a/jest.config.js b/jest.config.js index c160c56ea..2f51c0634 100644 --- a/jest.config.js +++ b/jest.config.js @@ -16,8 +16,6 @@ module.exports = { transformIgnorePatterns: ['/node_modules/(?!@openmrs)'], moduleNameMapper: { '\\.(s?css)$': 'identity-obj-proxy', - '^@carbon/icons-react/es/(.*)$': '@carbon/icons-react/lib/$1', - '^carbon-components-react/es/(.*)$': 'carbon-components-react/lib/$1', '@openmrs/esm-framework': '@openmrs/esm-framework/mock', 'react-i18next': '/__mocks__/react-i18next.js', 'lodash-es': 'lodash', diff --git a/src/root.scss b/src/root.scss index 52516877d..6e73c4dab 100644 --- a/src/root.scss +++ b/src/root.scss @@ -1,105 +1,31 @@ -@import "~carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/styles"; -@import "~carbon-components/src/globals/scss/vendor/@carbon/layout/scss/generated/spacing"; -@import "~carbon-components/src/globals/scss/vendor/@carbon/layout/scss/generated/layout"; -@import "carbon-components/scss/globals/scss/typography.scss"; -@import "~@openmrs/esm-styleguide/src/vars"; +@use '@carbon/styles/scss/spacing'; +@use '@carbon/styles/scss/type'; +@import '~@openmrs/esm-styleguide/src/vars'; -$ui-01: #f4f4f4; -$ui-02: #ffffff; -$ui-03: #e0e0e0; -$ui-05: #161616; -$ui-background: #ffffff; -$color-gray-70: #525252; -$color-blue-60-2: #0f62fe; -$color-yellow-50: #feecae; -$inverse-support-03: #f1c21b; -$warning-background: #fff8e1; -$openmrs-background-grey: #f4f4f4; -$danger: #da1e28; -$interactive-01: #0f62fe; $brand-teal-01: #3197D9; $ohri-input-width: 22.313rem; $ohri-home-background: #ededed; $button-primary: #0078A6; -.productiveHeading01 { - @include carbon--type-style("productive-heading-01"); -} - -.productiveHeading02 { - @include carbon--type-style("productive-heading-02"); -} - -.productiveHeading03 { - @include carbon--type-style("productive-heading-03"); -} - -.productiveHeading04 { - @include carbon--type-style("productive-heading-04"); -} - -.productiveHeading05 { - @include carbon--type-style("productive-heading-05"); -} - -.productiveHeading06 { - @include carbon--type-style("productive-heading-06"); -} - -.bodyShort01 { - @include carbon--type-style("body-short-01"); -} - -.helperText01 { - @include carbon--type-style("helper-text-01"); -} - -.bodyShort02 { - @include carbon--type-style("body-short-02"); -} - -.bodyLong01 { - @include carbon--type-style("body-long-01"); -} - -.bodyLong02 { - @include carbon--type-style("body-long-02"); -} - -.label01 { - @include carbon--type-style("label-01"); -} - -.text01 { - color: $text-01; -} - -.text02 { - color: $text-02; -} - aside { - background-color: $ui-02 !important; + background-color: $ui-02 !important; +} + +.ohriForm { + :global(.tab-12rem) > button { + width: 12rem !important; + } + + :global(.tab-14rem) > button { + width: 14rem !important; + } + + :global(.tab-16rem) > button { + width: 16rem !important; + } + + :global(.cds--overflow-menu) > div { + width: 15rem !important; + } } -// Login Overrides - -div[class*='-esm-login__styles__center'] > img { - width: 140px; // design has 120px -} - -:global(.tab-12rem) > button { - width: 12rem !important; -} - -:global(.tab-14rem) > button { - width: 14rem !important; -} - -:global(.tab-16rem) > button { - width: 16rem !important; -} - -:global(.cds--overflow-menu) > div { - width: 15rem !important; -} From 9d6a87b93b5208216059686d68769971e9d5daef Mon Sep 17 00:00:00 2001 From: Dennis Kigen Date: Thu, 27 Apr 2023 19:51:19 +0300 Subject: [PATCH 2/2] Prettier --- src/hooks/useFormJson.test.tsx | 58 ++++++++++++++++++++------------ src/hooks/usePatientData.tsx | 4 +-- src/ohri-form.component.test.tsx | 2 +- src/ohri-form.scss | 6 ++-- src/overrides.scss | 4 +-- 5 files changed, 45 insertions(+), 29 deletions(-) diff --git a/src/hooks/useFormJson.test.tsx b/src/hooks/useFormJson.test.tsx index 08488d37e..0251ed099 100644 --- a/src/hooks/useFormJson.test.tsx +++ b/src/hooks/useFormJson.test.tsx @@ -26,38 +26,54 @@ const mockOpenmrsFetch = openmrsFetch as jest.Mock; mockOpenmrsFetch.mockImplementation(jest.fn()); // parent form -when(mockOpenmrsFetch).calledWith(buildPath(PARENT_FORM_NAME)).mockResolvedValue({ data: { results: [nestedForm1Skeleton] } }); -when(mockOpenmrsFetch).calledWith(buildPath(PARENT_FORM_UUID)).mockResolvedValue({ data: nestedForm1Skeleton } ); -when(mockOpenmrsFetch).calledWith(buildPath(PARENT_FORM_SCHEMA_VALUE_REF)).mockResolvedValue({ data: nestedForm1Body }); +when(mockOpenmrsFetch) + .calledWith(buildPath(PARENT_FORM_NAME)) + .mockResolvedValue({ data: { results: [nestedForm1Skeleton] } }); +when(mockOpenmrsFetch) + .calledWith(buildPath(PARENT_FORM_UUID)) + .mockResolvedValue({ data: nestedForm1Skeleton }); +when(mockOpenmrsFetch) + .calledWith(buildPath(PARENT_FORM_SCHEMA_VALUE_REF)) + .mockResolvedValue({ data: nestedForm1Body }); // sub form -when(mockOpenmrsFetch).calledWith(buildPath(SUB_FORM_NAME)).mockResolvedValue({ data: { results: [nestedForm2Skeleton] } }); -when(mockOpenmrsFetch).calledWith(buildPath(SUB_FORM_UUID)).mockResolvedValue({ data: nestedForm2Skeleton }); -when(mockOpenmrsFetch).calledWith(buildPath(SUB_FORM_SCHEMA_VALUE_REF)).mockResolvedValue({ data: nestedForm2Body }); +when(mockOpenmrsFetch) + .calledWith(buildPath(SUB_FORM_NAME)) + .mockResolvedValue({ data: { results: [nestedForm2Skeleton] } }); +when(mockOpenmrsFetch) + .calledWith(buildPath(SUB_FORM_UUID)) + .mockResolvedValue({ data: nestedForm2Skeleton }); +when(mockOpenmrsFetch) + .calledWith(buildPath(SUB_FORM_SCHEMA_VALUE_REF)) + .mockResolvedValue({ data: nestedForm2Body }); // mini form -when(mockOpenmrsFetch).calledWith(buildPath(MINI_FORM_NAME)).mockResolvedValue({ data: { results: [miniFormSkeleton] } }); -when(mockOpenmrsFetch).calledWith(buildPath(MINI_FORM_UUID)).mockResolvedValue({ data: miniFormSkeleton }); -when(mockOpenmrsFetch).calledWith(buildPath(MINI_FORM_SCHEMA_VALUE_REF)).mockResolvedValue({ data: miniFormBody }); +when(mockOpenmrsFetch) + .calledWith(buildPath(MINI_FORM_NAME)) + .mockResolvedValue({ data: { results: [miniFormSkeleton] } }); +when(mockOpenmrsFetch) + .calledWith(buildPath(MINI_FORM_UUID)) + .mockResolvedValue({ data: miniFormSkeleton }); +when(mockOpenmrsFetch) + .calledWith(buildPath(MINI_FORM_SCHEMA_VALUE_REF)) + .mockResolvedValue({ data: miniFormBody }); describe('useFormJson', () => { - - it('should fetch basic form by name', async () => { let hook = null; await act(async () => { - hook = renderHook(() => useFormJson(MINI_FORM_NAME, null, null, null)); + hook = renderHook(() => useFormJson(MINI_FORM_NAME, null, null, null)); }); expect(hook.result.current.isLoading).toBe(false); expect(hook.result.current.error).toBe(undefined); - expect(hook.result.current.formJson.name).toBe(MINI_FORM_NAME) + expect(hook.result.current.formJson.name).toBe(MINI_FORM_NAME); }); it('should fetch basic form by UUID', async () => { let hook = null; await act(async () => { - hook = renderHook(() => useFormJson(MINI_FORM_UUID, null, null, null)); + hook = renderHook(() => useFormJson(MINI_FORM_UUID, null, null, null)); }); expect(hook.result.current.isLoading).toBe(false); @@ -68,9 +84,9 @@ describe('useFormJson', () => { fit('should load form with nested subforms', async () => { let hook = null; await act(async () => { - hook = renderHook(() => useFormJson(PARENT_FORM_NAME, null, null, null)); + hook = renderHook(() => useFormJson(PARENT_FORM_NAME, null, null, null)); }); - + expect(hook.result.current.isLoading).toBe(false); expect(hook.result.current.error).toBe(undefined); expect(hook.result.current.formJson.name).toBe(PARENT_FORM_NAME); @@ -82,20 +98,20 @@ describe('useFormJson', () => { it('should load subforms for raw form json', async () => { let hook = null; await act(async () => { - hook = renderHook(() => useFormJson(null, nestedForm1Body, null, null)); + hook = renderHook(() => useFormJson(null, nestedForm1Body, null, null)); }); - + expect(hook.result.current.isLoading).toBe(false); expect(hook.result.current.error).toBe(undefined); expect(hook.result.current.formJson.name).toBe(PARENT_FORM_NAME); - + // verify subforms verifyEmbeddedForms(hook.result.current.formJson); }); }); function buildPath(path: string) { - return when((url: string) => url.includes(path)); + return when((url: string) => url.includes(path)); } function verifyEmbeddedForms(formJson) { @@ -105,4 +121,4 @@ function verifyEmbeddedForms(formJson) { const nestedSubform = formJson.pages[2].subform.form; expect(nestedSubform.name).toBe(MINI_FORM_NAME); expect(nestedSubform.pages.length).toBe(1); -} \ No newline at end of file +} diff --git a/src/hooks/usePatientData.tsx b/src/hooks/usePatientData.tsx index 79078a491..902fc3f49 100644 --- a/src/hooks/usePatientData.tsx +++ b/src/hooks/usePatientData.tsx @@ -16,8 +16,8 @@ function calculateAge(birthDate: Date): number { export const usePatientData = patientUuid => { const { patient, isLoading: isLoadingPatient, error: patientError } = usePatient(patientUuid); - if(patient && !isLoadingPatient) { + if (patient && !isLoadingPatient) { patient['age'] = calculateAge(new Date(patient?.birthDate)); } return { patient, isLoadingPatient, patientError }; -}; \ No newline at end of file +}; diff --git a/src/ohri-form.component.test.tsx b/src/ohri-form.component.test.tsx index 337d5cd3f..f8e4cc24b 100644 --- a/src/ohri-form.component.test.tsx +++ b/src/ohri-form.component.test.tsx @@ -30,7 +30,7 @@ import { mockVisit } from '../__mocks__/visit.mock'; ////////////////////////////////////////// const patientUUID = '8673ee4f-e2ab-4077-ba55-4980f408773e'; -const visit = mockVisit +const visit = mockVisit; const mockOpenmrsFetch = jest.fn(); const formsResourcePath = when((url: string) => url.includes('/ws/rest/v1/form/')); const clobdataResourcePath = when((url: string) => url.includes('/ws/rest/v1/clobdata/')); diff --git a/src/ohri-form.scss b/src/ohri-form.scss index d1bb455f2..040b7e257 100644 --- a/src/ohri-form.scss +++ b/src/ohri-form.scss @@ -73,10 +73,10 @@ aside[class*='-esm-patient-chart__workspace-window__container__'] { } aside[class*='-esm-patient-chart__workspace-window__container__'] > div { - display: flex; - bottom: 0; + display: flex; + bottom: 0; } aside[class*='-esm-patient-chart__workspace-window__container__'] > div > div { - flex-grow: 1; + flex-grow: 1; } diff --git a/src/overrides.scss b/src/overrides.scss index df3c1cb15..e1ed2bb73 100644 --- a/src/overrides.scss +++ b/src/overrides.scss @@ -1,3 +1,3 @@ .cds--overflow-menu { - visibility: hidden !important; - } \ No newline at end of file + visibility: hidden !important; +} \ No newline at end of file