fix exports in opub-ui for viz and styles

CivicDataLab · Dec 21, 2023 · 411e359 · 411e359 · vercel · Dec 21, 2023
1 parent 27004b1
commit 411e359
Show file tree

Hide file tree

Showing 13 changed files with 86 additions and 71 deletions.
diff --git a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/BarView.tsx b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/BarView.tsx
@@ -1,4 +1,4 @@
-import { BarChart } from 'opub-ui';
+import { BarChart } from 'opub-ui/viz';
 import React from 'react';
 
 export const BarView = React.forwardRef(({ data }: { data: any }, ref: any) => {

diff --git a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Explorer.tsx b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Explorer.tsx
@@ -23,9 +23,12 @@ import dynamic from 'next/dynamic';
 import { BarView } from './BarView';
 import { useWindowSize } from '@/hooks/use-window-size';
 
-const MapChart = dynamic(() => import('opub-ui').then((mod) => mod.MapChart), {
-  ssr: false,
-});
+const MapChart = dynamic(
+  () => import('opub-ui/viz').then((mod) => mod.MapChart),
+  {
+    ssr: false,
+  }
+);
 export const Explorer = React.forwardRef(
   (
     {

diff --git a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Overview.tsx b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Overview.tsx
@@ -1,9 +1,10 @@
 import Icons from '@/components/icons';
 import Link from 'next/link';
-import { BarChart, Icon, Text } from 'opub-ui';
+import { Icon, Text } from 'opub-ui';
 import React from 'react';
 import { ContentCard, ProgressCard } from '../../components/Card';
 import { IOverview } from './scheme-layout';
+import { BarChart } from 'opub-ui/viz';
 
 export const Overview = React.forwardRef(
   ({ data }: { data?: IOverview }, ref: any) => {

diff --git a/examples/district/app/[locale]/components/district-selector.tsx b/examples/district/app/[locale]/components/district-selector.tsx
@@ -12,10 +12,18 @@ import Link from 'next/link';
 import { Icon, Divider, Text, SearchInput } from 'opub-ui';
 import React from 'react';
 
-const MapChart = dynamic(() => import('opub-ui').then((mod) => mod.MapChart), {
-  ssr: false,
-  loading: () => <div>Loading...</div>,
-});
+const MapChart = dynamic(
+  () => import('opub-ui/viz').then((mod) => mod.MapChart),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="w-full h-full flex items-center justify-center">
+        <Text variant="bodyLg">Loading Map...</Text>
+      </div>
+    ),
+  }
+);
+
 export const DistrictSelector = () => {
   const [search, setSearch] = React.useState('');
   const [districtList, setDistrictList] = React.useState(assamDistrictCategory);
@@ -68,7 +76,7 @@ export const DistrictSelector = () => {
             zoomOnClick={false}
             mapProperty="enabled"
             mapDataFn={mapDataFn}
-            click={(e) => {
+            click={(e: any) => {
               const features = e.feature.properties;
               if (
                 features.district &&

diff --git a/examples/district/next.config.js b/examples/district/next.config.js
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  // transpilePackages: ['opub-ui', 'react-aria'],
+  transpilePackages: ['opub-ui', 'react-aria'],
 };
 
 module.exports = nextConfig;
diff --git a/examples/district/styles/globals.css b/examples/district/styles/globals.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 @import './reset.css';
-@import url('~opub-ui/dist/assets/styles.css');
+@import url('opub-ui/dist/style.css');
 @import url('./tokens/_variables.css');
 
 :root {

diff --git a/packages/opub-ui/docs/Guides/Develop.mdx b/packages/opub-ui/docs/Guides/Develop.mdx
@@ -25,7 +25,7 @@ yarn add @opub/ui
 OPub UI comes with a set of base styles that you need to import into your project. The base styles are required for OPub UI to work correctly. Add them in the base css file of your project.
 
 ```css
-@import url('~opub-ui/dist/assets/styles.css');
+@import url('opub-ui/dist/assets/styles.css');
 ```
 
 ### Usage

diff --git a/packages/opub-ui/package.json b/packages/opub-ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "opub-ui",
   "description": "OPub UI Library",
-  "version": "0.0.99",
+  "version": "0.1.0",
   "private": false,
   "license": "MIT",
   "author": "CivicDataLab <tech@civicdatalab.in>",
@@ -23,9 +23,20 @@
     "React Component Library"
   ],
   "sideEffects": false,
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/ts/index.d.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/ts/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./viz": "./dist/viz.js",
+    "./dist/style.css": "./dist/assets/styles.css"
+  },
+  "typesVersions": {
+    "*": {
+      "viz": [
+        "dist/ts/viz.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist",
     "README.md"

diff --git a/packages/opub-ui/rollup.config.mjs b/packages/opub-ui/rollup.config.mjs
@@ -1,5 +1,6 @@
 import commonjs from '@rollup/plugin-commonjs';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
+import terser from '@rollup/plugin-terser';
 import typescript from '@rollup/plugin-typescript';
 import svgr from '@svgr/rollup';
 import { readFileSync } from 'fs';
@@ -8,7 +9,6 @@ import banner2 from 'rollup-plugin-banner2';
 import copy from 'rollup-plugin-copy';
 import { externals } from 'rollup-plugin-node-externals';
 import postcss from 'rollup-plugin-postcss';
-import terser from '@rollup/plugin-terser';
 
 const pkg = JSON.parse(
   readFileSync(new URL('./package.json', import.meta.url).pathname)
@@ -21,7 +21,7 @@ const rollup = (_args) => {
   ];
 
   return {
-    input: './src/index.ts',
+    input: ['./src/index.ts', './src/viz.ts'],
     output: {
       dir: 'dist',
       format: 'esm',

diff --git a/packages/opub-ui/src/components/MapChart/MapChart.tsx b/packages/opub-ui/src/components/MapChart/MapChart.tsx
@@ -76,9 +76,20 @@ type Props = MapProps & LegendProps;
 const MapChart = (props: Props) => {
   const { defaultLayer = 'light', className, ...others } = props;
 
+  //to prevent map re-initialization
+  const [unmountMap, setUnmountMap] = React.useState(false);
+  React.useLayoutEffect(() => {
+    setUnmountMap(false);
+    return () => {
+      setUnmountMap(true);
+    };
+  }, []);
+
   const [selectedLayer, setSelectedLayer] =
     React.useState<layerOptions>(defaultLayer);
 
+  if (unmountMap) return 'loading map...';
+
   return (
     <div className={cn(styles.Wrapper, className)}>
       <Map
@@ -113,15 +124,6 @@ const Map = ({
   legendData?: { label: string; color: string }[];
   legendHeading?: { heading: string; subheading?: string };
 }) => {
-  //to prevent map re-initialization
-  const [unmountMap, setUnmountMap] = React.useState(false);
-  React.useLayoutEffect(() => {
-    setUnmountMap(false);
-    return () => {
-      setUnmountMap(true);
-    };
-  }, []);
-
   const mapRef = React.useRef<any>(null);
 
   const handleMouseOver = React.useCallback((e: { target: any }) => {
@@ -188,43 +190,35 @@ const Map = ({
     return feature;
   });
 
-  if (!unmountMap) {
-    return (
-      <MapContainer
-        center={mapCenter}
-        zoom={mapZoom}
-        ref={mapRef}
-        zoomDelta={0.5}
-        zoomSnap={0.5}
-      >
-        {!hideLayers && (
-          <>
-            <LayerSelector
-              selectedLayer={selectedLayer}
-              setSelectedLayer={setLayer}
-            />
-            <TileLayer url={layers[selectedLayer]} key={selectedLayer} />
-          </>
-        )}
-        {legendData && (
-          <Legend legendData={legendData} legendHeading={legendHeading} />
-        )}
-        <FullscreenControl />
-        {features && (
-          <>
-            <GeoJSON
-              data={feature}
-              style={style}
-              onEachFeature={onEachFeature}
-            />
-          </>
-        )}
-        {!hideScale && <ScaleControl imperial={false} />}
-      </MapContainer>
-    );
-  } else {
-    return 'loading map...';
-  }
+  return (
+    <MapContainer
+      center={mapCenter}
+      zoom={mapZoom}
+      ref={mapRef}
+      zoomDelta={0.5}
+      zoomSnap={0.5}
+    >
+      {!hideLayers && (
+        <>
+          <LayerSelector
+            selectedLayer={selectedLayer}
+            setSelectedLayer={setLayer}
+          />
+          <TileLayer url={layers[selectedLayer]} key={selectedLayer} />
+        </>
+      )}
+      {legendData && (
+        <Legend legendData={legendData} legendHeading={legendHeading} />
+      )}
+      <FullscreenControl />
+      {features && (
+        <>
+          <GeoJSON data={feature} style={style} onEachFeature={onEachFeature} />
+        </>
+      )}
+      {!hideScale && <ScaleControl imperial={false} />}
+    </MapContainer>
+  );
 };
 
 const Legend = ({ legendData, legendHeading }: LegendProps) => {
@@ -307,5 +301,4 @@ const LayerSelector = ({
   );
 };
 
-export { MapChart };
 export default MapChart;
diff --git a/packages/opub-ui/src/components/MapChart/index.ts b/packages/opub-ui/src/components/MapChart/index.ts
@@ -1,2 +1 @@
-export { MapChart } from './MapChart';
-export { default } from './MapChart';
+export { default as MapChart } from './MapChart';
diff --git a/packages/opub-ui/src/components/index.ts b/packages/opub-ui/src/components/index.ts
@@ -62,6 +62,3 @@ export { SearchInput } from './SearchInput';
 export { Tray } from './Tray';
 export { SelectorCard } from './SelectorCard';
 export { Pill } from './Pill';
-export { BarChart } from './BarChart';
-export { ECharts } from './ECharts';
-export { MapChart } from './MapChart';
diff --git a/packages/opub-ui/src/viz.ts b/packages/opub-ui/src/viz.ts
@@ -0,0 +1,3 @@
+export { MapChart } from './components/MapChart';
+export { ECharts } from './components/ECharts';
+export { BarChart } from './components/BarChart';