Move the tabs implementation in the commons-lib -cacx (#1894)

* Move the tabs implementation in the commons-lib -cacx

* remove unused code

* update the imported TabsComponent

* address comments on the PR

* pass the config at the package

packages/esm-cervical-cancer-app/src/cervical-cancer/cacx-visits/cacx-visits-services.component.tsx

@@ -1,45 +1,16 @@
 import React from 'react';
-import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
+import { TabsComponent } from '@ohri/openmrs-esm-ohri-commons-lib';
 import { useConfig } from '@openmrs/esm-framework';
-import { EncounterList, getMenuItemTabConfiguration } from '@ohri/openmrs-esm-ohri-commons-lib';
 import cacxConfigSchema from './cacx-config.json';
 
-import styles from '../common.scss';
-
 interface OverviewListProps {
   patientUuid: string;
 }
 
 const CaCxCervicalCancerServices: React.FC<OverviewListProps> = ({ patientUuid }) => {
   const config = useConfig();
-  const tabs = getMenuItemTabConfiguration(cacxConfigSchema, config);
 
-  return (
-    <div className={styles.tabContainer}>
-      <Tabs>
-        <TabList contained>
-          {tabs.map((tab) => (
-            <Tab key={tab.name}>{tab.name}</Tab>
-          ))}
-        </TabList>
-        <TabPanels>
-          {tabs.map((tab) => (
-            <TabPanel>
-              <EncounterList
-                patientUuid={patientUuid}
-                formList={tab.formList}
-                columns={tab.columns}
-                encounterType={tab.encounterType}
-                launchOptions={tab.launchOptions}
-                headerTitle={tab.headerTitle}
-                description={tab.description}
-              />
-            </TabPanel>
-          ))}
-        </TabPanels>
-      </Tabs>
-    </div>
-  );
+  return <TabsComponent patientUuid={patientUuid} configSchema={cacxConfigSchema} config={config} />;
 };
 
 export default CaCxCervicalCancerServices;

packages/esm-commons-lib/src/components/encounter-list-tabs/encounter-list-tabs.component.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
+import { EncounterList, getMenuItemTabConfiguration } from '@ohri/openmrs-esm-ohri-commons-lib';
+import styles from './encounter-list-tabs.scss';
+
+interface TabsComponentProps {
+  patientUuid: string;
+  configSchema: any;
+  config: any;
+}
+
+export const TabsComponent: React.FC<TabsComponentProps> = ({ patientUuid, configSchema, config }) => {
+  const tabsConfig = getMenuItemTabConfiguration(configSchema, config);
+
+  return (
+    <div className={styles.tabContainer}>
+      <Tabs>
+        <TabList contained>
+          {tabsConfig.map((tab) => (
+            <Tab key={tab.name}>{tab.name}</Tab>
+          ))}
+        </TabList>
+        <TabPanels>
+          {tabsConfig.map((tab) => (
+            <TabPanel key={tab.name}>
+              <EncounterList
+                patientUuid={patientUuid}
+                formList={tab.formList}
+                columns={tab.columns}
+                encounterType={tab.encounterType}
+                launchOptions={tab.launchOptions}
+                headerTitle={tab.headerTitle}
+                description={tab.description}
+              />
+            </TabPanel>
+          ))}
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+};
+
+export default TabsComponent;

packages/esm-cervical-cancer-app/src/cervical-cancer/common.scss → packages/esm-commons-lib/src/components/encounter-list-tabs/encounter-list-tabs.scss

@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/spacing';
-@import '../root.scss';
+@import '../../root.scss';
 
 .tabContainer div[role='tabpanel'] {
   padding: 0 !important;

packages/esm-commons-lib/src/index.ts

@@ -55,6 +55,7 @@ export * from './utils/summary-card-config-builder';
 export * from './utils/encounter-tile-config-builder';
 export * from './utils/cohort-list-config-builder';
 export * from './utils/patient-list-tabs-config-builder';
+export * from './components/encounter-list-tabs/encounter-list-tabs.component';
 // Workspace registration moved to the index.ts and routes.json
 const options = {
   featureName: 'ohri-forms-workspace-item',