Refactor carbon component imports (#54)

denniskigen · web-flow · commit c62025820147 · 2021-10-13T22:17:55.000+03:00
* Fix Carbon component imports

* Fix type errors

* Remove redundant ts-ignore comment
diff --git a/packages/esm-active-visits-app/src/active-visits-widget/active-visits.component.tsx b/packages/esm-active-visits-app/src/active-visits-widget/active-visits.component.tsx
@@ -1,7 +1,12 @@
 import React, { useMemo, useEffect, useState, useCallback } from 'react';
-import DataTable, {
-  TableContainer,
+import {
+  DataTable,
+  DataTableSkeleton,
+  InlineLoading,
+  Pagination,
+  Search,
   Table,
+  TableContainer,
   TableHead,
   TableRow,
   TableHeader,
@@ -11,11 +16,7 @@ import DataTable, {
   TableToolbarContent,
   TableExpandRow,
   TableExpandHeader,
-} from 'carbon-components-react/es/components/DataTable';
-import DataTableSkeleton from 'carbon-components-react/es/components/DataTableSkeleton';
-import InlineLoading from 'carbon-components-react/lib/components/InlineLoading';
-import Pagination from 'carbon-components-react/es/components/Pagination';
-import Search from 'carbon-components-react/es/components/Search';
+} from 'carbon-components-react';
 import { useLayoutType, useConfig, usePagination, ConfigurableLink, ExtensionSlot } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { ActiveVisit, useActiveVisits } from './active-visits.resource';
diff --git a/packages/esm-active-visits-app/src/visits-summary/visit-detail.component.tsx b/packages/esm-active-visits-app/src/visits-summary/visit-detail.component.tsx
@@ -1,12 +1,11 @@
 import React, { useState, useMemo } from 'react';
-import Button from 'carbon-components-react/es/components/Button';
+import { Button, DataTableSkeleton } from 'carbon-components-react';
 import { useTranslation } from 'react-i18next';
 import { Encounter, useVisit } from './visit.resource';
 import dayjs from 'dayjs';
 import styles from './visit-detail-overview.scss';
 import EncounterList from './visits-components/encounter-list.component';
 import VisitSummary from './visits-components/visit-summary.component';
-import DataTableSkeleton from 'carbon-components-react/es/components/DataTableSkeleton';
 
 interface VisitDetailComponentProps {
   visitUuid: string;
diff --git a/packages/esm-active-visits-app/src/visits-summary/visits-components/encounter-list.component.tsx b/packages/esm-active-visits-app/src/visits-summary/visits-components/encounter-list.component.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useMemo, useRef } from 'react';
-import DataTable, {
+import {
+  DataTable,
   TableContainer,
   Table,
   TableHead,
@@ -10,7 +11,7 @@ import DataTable, {
   TableExpandRow,
   TableCell,
   TableExpandedRow,
-} from 'carbon-components-react/es/components/DataTable';
+} from 'carbon-components-react';
 import EncounterObservations from './encounter-observations.component';
 import styles from '../visit-detail-overview.scss';
 import { Observation } from '../visit.resource';
diff --git a/packages/esm-active-visits-app/src/visits-summary/visits-components/encounter-observations.component.tsx b/packages/esm-active-visits-app/src/visits-summary/visits-components/encounter-observations.component.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import SkeletonText from 'carbon-components-react/es/components/SkeletonText';
+import { SkeletonText } from 'carbon-components-react';
 import { Observation } from '../visit.resource';
 import styles from '../visit-detail-overview.scss';
 
diff --git a/packages/esm-active-visits-app/src/visits-summary/visits-components/visit-summary.component.tsx b/packages/esm-active-visits-app/src/visits-summary/visits-components/visit-summary.component.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import Tabs from 'carbon-components-react/es/components/Tabs';
-import Tab from 'carbon-components-react/es/components/Tab';
+import { Tab, Tabs } from 'carbon-components-react';
 import dayjs from 'dayjs';
 import { Order, Encounter, Note, Observation, OrderItem } from '../visit.resource';
 import styles from '../visit-detail-overview.scss';
diff --git a/packages/esm-patient-list-app/src/add-patient/add-patient.component.tsx b/packages/esm-patient-list-app/src/add-patient/add-patient.component.tsx
@@ -2,11 +2,7 @@ import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { toOmrsIsoString, showToast, usePagination, useSessionUser } from '@openmrs/esm-framework';
 import { addPatientToLocalOrRemotePatientList, useGetAllPatientListsWithoutPatientQuery } from '../api';
-import Search from 'carbon-components-react/es/components/Search';
-import Button from 'carbon-components-react/es/components/Button';
-import Pagination from 'carbon-components-react/es/components/Pagination';
-import Checkbox from 'carbon-components-react/es/components/Checkbox';
-import SkeletonText from 'carbon-components-react/es/components/SkeletonText';
+import { Button, Checkbox, Pagination, Search, SkeletonText } from 'carbon-components-react';
 import styles from './add-patient.scss';
 
 interface AddPatientProps {
diff --git a/packages/esm-patient-list-app/src/offline-patient-table/last-updated-table-cell.component.tsx b/packages/esm-patient-list-app/src/offline-patient-table/last-updated-table-cell.component.tsx
@@ -11,8 +11,7 @@ import PendingFilled16 from '@carbon/icons-react/es/pending--filled/16';
 import WarningAltFilled16 from '@carbon/icons-react/es/warning--alt--filled/16';
 import CheckmarkOutline16 from '@carbon/icons-react/es/checkmark--outline/16';
 import styles from './last-updated-table-cell.scss';
-import { TableCell } from 'carbon-components-react/es/components/DataTable';
-import Link from 'carbon-components-react/es/components/Link';
+import { Link, TableCell } from 'carbon-components-react';
 
 export interface LastUpdatedTableCellProps {
   patientUuid: string;
diff --git a/packages/esm-patient-list-app/src/offline-patient-table/offline-patient-table.component.tsx b/packages/esm-patient-list-app/src/offline-patient-table/offline-patient-table.component.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
-import DataTable, {
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Search,
+  SearchSkeleton,
+  SkeletonText,
   Table,
   TableBody,
   TableCell,
@@ -10,8 +16,7 @@ import DataTable, {
   FilterRowsData,
   TableSelectAll,
   TableSelectRow,
-} from 'carbon-components-react/es/components/DataTable';
-import DataTableSkeleton from 'carbon-components-react/es/components/DataTableSkeleton';
+} from 'carbon-components-react';
 import {
   useStore,
   getOfflinePatientDataStore,
@@ -26,11 +31,7 @@ import { useGetAllPatientsFromOfflineListQuery, useRemovePatientsFromOfflinePati
 import capitalize from 'lodash-es/capitalize';
 import LastUpdatedTableCell from './last-updated-table-cell.component';
 import styles from './offline-patient-table.scss';
-import Search from 'carbon-components-react/es/components/Search';
 import PatientNameTableCell from './patient-name-table-cell.component';
-import Button from 'carbon-components-react/es/components/Button';
-import SearchSkeleton from 'carbon-components-react/es/components/Search/Search.Skeleton';
-import SkeletonText from 'carbon-components-react/es/components/SkeletonText';
 import Renew32 from '@carbon/icons-react/es/renew/32';
 import { useAsync } from '../utils/use-async.hook';
 
diff --git a/packages/esm-patient-list-app/src/offline-patient-table/patient-name-table-cell.component.tsx b/packages/esm-patient-list-app/src/offline-patient-table/patient-name-table-cell.component.tsx
@@ -1,6 +1,5 @@
 import { navigate } from '@openmrs/esm-framework';
-import { TableCell } from 'carbon-components-react/es/components/DataTable';
-import Link from 'carbon-components-react/es/components/Link';
+import { Link, TableCell } from 'carbon-components-react';
 import React from 'react';
 
 export interface PatientNameTableCellProps {
diff --git a/packages/esm-patient-list-app/src/overlay.component.tsx b/packages/esm-patient-list-app/src/overlay.component.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import ArrowLeft16 from '@carbon/icons-react/es/arrow--left/16';
-import Button from 'carbon-components-react/es/components/Button';
-import Header from 'carbon-components-react/es/components/UIShell/Header';
+import { Button, Header } from 'carbon-components-react';
 
 const Overlay: React.FC<{ close: () => void; header: string }> = ({ close, children, header }) => {
   return (
diff --git a/packages/esm-patient-list-app/src/patient-list-list/create-new-list.component.tsx b/packages/esm-patient-list-app/src/patient-list-list/create-new-list.component.tsx
@@ -1,8 +1,5 @@
 import React, { useCallback, useMemo, useRef } from 'react';
-import Button from 'carbon-components-react/es/components/Button';
-import MultiSelect from 'carbon-components-react/es/components/MultiSelect';
-import TextArea from 'carbon-components-react/es/components/TextArea';
-import TextInput from 'carbon-components-react/es/components/TextInput';
+import { Button, MultiSelect, TextArea, TextInput } from 'carbon-components-react';
 import Overlay from '../overlay.component';
 import { useTranslation } from 'react-i18next';
 import { createPatientList } from '../api';
diff --git a/packages/esm-patient-list-app/src/patient-list-list/patient-list-list.component.tsx b/packages/esm-patient-list-app/src/patient-list-list/patient-list-list.component.tsx
@@ -1,9 +1,6 @@
 import React, { ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 import Add16 from '@carbon/icons-react/es/add/16';
-import Button from 'carbon-components-react/es/components/Button';
-import Search from 'carbon-components-react/es/components/Search';
-import Tab from 'carbon-components-react/es/components/Tab';
-import Tabs from 'carbon-components-react/es/components/Tabs';
+import { Button, DataTableHeader, Search, Tab, Tabs } from 'carbon-components-react';
 import PatientListTable from './patient-list-table.component';
 import CreateNewList from './create-new-list.component';
 import PatientListMembersOverlay from '../patient-list/patient-list-members-overlay.component';
@@ -18,7 +15,6 @@ import {
   PatientListType,
 } from '../api';
 import { SearchState, StateTypes, ViewState } from './types';
-import { DataTableHeader } from 'carbon-components-react/es/components/DataTable';
 import './patient-list-list.scss';
 
 enum TabTypes {
diff --git a/packages/esm-patient-list-app/src/patient-list-list/patient-list-table.component.tsx b/packages/esm-patient-list-app/src/patient-list-list/patient-list-table.component.tsx
@@ -1,16 +1,17 @@
 import React, { CSSProperties } from 'react';
-import DataTable, {
+import {
+  DataTable,
   DataTableCustomRenderProps,
   DataTableHeader,
-} from 'carbon-components-react/es/components/DataTable';
-import Table from 'carbon-components-react/es/components/DataTable/Table';
-import TableContainer from 'carbon-components-react/es/components/DataTable/TableContainer';
-import TableHead from 'carbon-components-react/es/components/DataTable/TableHead';
-import TableHeader from 'carbon-components-react/es/components/DataTable/TableHeader';
-import TableRow from 'carbon-components-react/es/components/DataTable/TableRow';
-import TableCell from 'carbon-components-react/es/components/DataTable/TableCell';
-import TableBody from 'carbon-components-react/es/components/DataTable/TableBody';
-import DataTableSkeleton from 'carbon-components-react/es/components/DataTableSkeleton';
+  DataTableSkeleton,
+  Table,
+  TableBody,
+  TableContainer,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from 'carbon-components-react';
 import Star16 from '@carbon/icons-react/es/star/16';
 import StarFilled16 from '@carbon/icons-react/es/star--filled/16';
 import { useTranslation } from 'react-i18next';
diff --git a/packages/esm-patient-list-app/src/patient-table/patient-table.component.tsx b/packages/esm-patient-list-app/src/patient-table/patient-table.component.tsx
@@ -1,18 +1,19 @@
 import React, { useMemo, CSSProperties } from 'react';
 import { navigate } from '@openmrs/esm-framework';
-import Link from 'carbon-components-react/es/components/Link';
-import DataTable, {
+import {
+  DataTable,
+  DataTableSkeleton,
+  Link,
+  Pagination,
+  Search,
   Table,
   TableBody,
   TableCell,
   TableContainer,
   TableHead,
   TableHeader,
   TableRow,
-} from 'carbon-components-react/es/components/DataTable';
-import DataTableSkeleton from 'carbon-components-react/es/components/DataTableSkeleton';
-import Pagination from 'carbon-components-react/es/components/Pagination';
-import Search from 'carbon-components-react/es/components/Search';
+} from 'carbon-components-react';
 import debounce from 'lodash-es/debounce';
 import styles from './patient-table.scss';
 
diff --git a/packages/esm-patient-registration-app/src/add-patient-link.tsx b/packages/esm-patient-registration-app/src/add-patient-link.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Add20 from '@carbon/icons-react/es/add/20';
 import styles from './add-patient-link.scss';
 import { navigate } from '@openmrs/esm-framework';
-import { HeaderGlobalAction } from 'carbon-components-react/es/components/UIShell';
+import { HeaderGlobalAction } from 'carbon-components-react';
 
 export default function Root() {
   const addPatient = React.useCallback(() => navigate({ to: '${openmrsSpaBase}/patient-registration' }), []);
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx
@@ -1,7 +1,5 @@
 import React, { useContext } from 'react';
-import TextInput from 'carbon-components-react/es/components/TextInput';
-import DatePicker from 'carbon-components-react/es/components/DatePicker';
-import DatePickerInput from 'carbon-components-react/es/components/DatePickerInput';
+import { DatePicker, DatePickerInput, TextInput } from 'carbon-components-react';
 import { useTranslation } from 'react-i18next';
 import { useField } from 'formik';
 import { PatientRegistrationContext } from '../../patient-registration-context';
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.component.tsx
@@ -1,6 +1,5 @@
 import React, { useContext } from 'react';
-import RadioButton from 'carbon-components-react/es/components/RadioButton';
-import RadioButtonGroup from 'carbon-components-react/es/components/RadioButtonGroup';
+import { RadioButton, RadioButtonGroup } from 'carbon-components-react';
 import styles from '../field.scss';
 import { useTranslation } from 'react-i18next';
 import { PatientRegistrationContext } from '../../patient-registration-context';
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/input/input.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/input/input.component.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import TextInput from 'carbon-components-react/es/components/TextInput';
+import { TextInput } from 'carbon-components-react';
 import { useField } from 'formik';
 import { useTranslation } from 'react-i18next';
 
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/select/select-input.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/select/select-input.component.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import Select from 'carbon-components-react/es/components/Select';
-import SelectItem from 'carbon-components-react/es/components/SelectItem';
+import { Select, SelectItem } from 'carbon-components-react';
 import { useField } from 'formik';
 
 interface SelectInputProps {
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/autosuggest/autosuggest.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/autosuggest/autosuggest.component.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import Search from 'carbon-components-react/es/components/Search';
+import { Search } from 'carbon-components-react';
 import styles from './autosuggest.scss';
 import { useTranslation } from 'react-i18next';
 
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx
@@ -2,7 +2,7 @@ import * as Yup from 'yup';
 import React, { useState, useEffect } from 'react';
 import find from 'lodash-es/find';
 import { useField } from 'formik';
-import { Row, Column } from 'carbon-components-react/es/components/Grid';
+import { Row, Column } from 'carbon-components-react';
 import { useTranslation } from 'react-i18next';
 import { SelectInput } from '../../basic-input/select/select-input.component';
 import { Input } from '../../basic-input/input/input.component';
diff --git a/packages/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx
@@ -1,8 +1,6 @@
 import React, { useState, useEffect, useContext, useMemo } from 'react';
 import XAxis16 from '@carbon/icons-react/es/x-axis/16';
-import Button from 'carbon-components-react/es/components/Button';
-import Link from 'carbon-components-react/es/components/Link';
-import { Grid } from 'carbon-components-react/es/components/Grid';
+import { Button, Grid, Link } from 'carbon-components-react';
 import BeforeSavePrompt from './before-save-prompt';
 import styles from './patient-registration.scss';
 import { useLocation } from 'react-router-dom';
diff --git a/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships-section.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships-section.component.tsx
@@ -1,9 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import sectionStyles from '../section.scss';
 import styles from './relationships.scss';
-import Button from 'carbon-components-react/es/components/Button';
-import Select from 'carbon-components-react/es/components/Select';
-import SelectItem from 'carbon-components-react/es/components/SelectItem';
+import { Button, Select, SelectItem } from 'carbon-components-react';
 import { FieldArray } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { Autosuggest } from '../../input/custom-input/autosuggest/autosuggest.component';
diff --git a/packages/esm-patient-registration-app/src/patient-registration/section/section-wrapper.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/section/section-wrapper.component.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from '../patient-registration.scss';
-import { Tile } from 'carbon-components-react/es/components/Tile';
+import { Tile } from 'carbon-components-react';
 import { useTranslation } from 'react-i18next';
 
 export const SectionWrapper = ({ id, children, name, index }) => {
diff --git a/packages/esm-patient-registration-app/src/root.component.tsx b/packages/esm-patient-registration-app/src/root.component.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { BrowserRouter, Route } from 'react-router-dom';
-import { Grid, Row } from 'carbon-components-react/es/components/Grid';
+import { Grid, Row } from 'carbon-components-react';
 import { ExtensionSlot } from '@openmrs/esm-framework';
 import { Resources, ResourcesContext } from './offline.resources';
 import { SavePatientForm } from './patient-registration/form-manager';
diff --git a/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.component.tsx b/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.component.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from 'carbon-components-react/es/components/Button';
+import { Button } from 'carbon-components-react';
 import { useTranslation } from 'react-i18next';
 
 interface CancelPatientEditProps {
diff --git a/packages/esm-patient-search-app/src/patient-search-icon/patient-search-icon.component.tsx b/packages/esm-patient-search-app/src/patient-search-icon/patient-search-icon.component.tsx
@@ -1,17 +1,15 @@
 import React, { useCallback, useState, useEffect, useReducer, useMemo } from 'react';
 import Search20 from '@carbon/icons-react/es/search/20';
 import Close20 from '@carbon/icons-react/es/close/20';
-import { HeaderGlobalAction } from 'carbon-components-react/es/components/UIShell';
-import styles from './patient-search-icon.component.scss';
+import { Button, HeaderGlobalAction, Search } from 'carbon-components-react';
 import PatientSearch from '../patient-search/patient-search.component';
-import Search from 'carbon-components-react/es/components/Search';
 import { useTranslation } from 'react-i18next';
-import Button from 'carbon-components-react/es/components/Button';
 import debounce from 'lodash-es/debounce';
 import { useLayoutType } from '@openmrs/esm-framework';
 import { performPatientSearch } from '../patient-search/patient-search.resource';
 import isEmpty from 'lodash-es/isEmpty';
 import { SearchedPatient } from '../types';
+import styles from './patient-search-icon.component.scss';
 
 interface PatientSearchLaunchProps {}
 
@@ -95,13 +93,8 @@ const PatientSearchLaunch: React.FC<PatientSearchLaunchProps> = () => {
     }
   }, [searchTerm, status]);
 
-  const handleEnterKeyPressed = (event: KeyboardEvent) => event.key.toLowerCase() === 'enter' && performSearch();
-
-  const withButtonSize = useCallback(() => {
-    if (layout === 'desktop') {
-      return { size: 'small' };
-    }
-  }, [layout]);
+  const handleEnterKeyPressed = (event: React.KeyboardEvent<HTMLInputElement>) =>
+    event.key.toLowerCase() === 'enter' && performSearch();
 
   const handleChange = useMemo(() => debounce((searchTerm) => setSearchTerm(searchTerm), searchTimeout), []);
 
@@ -138,9 +131,8 @@ const PatientSearchLaunch: React.FC<PatientSearchLaunchProps> = () => {
             <Button
               disabled={status === 'searching'}
               onClick={performSearch}
-              style={{ background: '#393939' }}
-              {...withButtonSize()}
-              className={styles.searchButton}>
+              className={styles.searchButton}
+              size={layout === 'desktop' ? 'small' : 'default'}>
               {t('search', 'Search')}
             </Button>
           </div>
diff --git a/packages/esm-patient-search-app/src/patient-search/patient-search.component.tsx b/packages/esm-patient-search-app/src/patient-search/patient-search.component.tsx
@@ -2,13 +2,11 @@ import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import isEmpty from 'lodash-es/isEmpty';
 import { usePagination } from '@openmrs/esm-framework';
-import PaginationNav from 'carbon-components-react/es/components/PaginationNav';
-import { Tile } from 'carbon-components-react/es/components/Tile';
+import { Loading, PaginationNav, Tile } from 'carbon-components-react';
 import { SearchedPatient } from '../types/index';
 import EmptyDataIllustration from './empty-data-illustration.component';
 import PatientSearchResults from '../patient-search-result/patient-search-result.component';
 import styles from './patient-search.scss';
-import Loading from 'carbon-components-react/es/components/Loading';
 
 const resultsPerPage = 5;
 
