Height should be string

packages/opub-ui/package.json

@@ -81,7 +81,8 @@
   },
   "peerDependencies": {
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-leaflet": "^4.0.0 || ^5.0.0"
   },
   "dependencies": {
     "@ariakit/react": "^0.4.18",
@@ -121,13 +122,13 @@
     "esbuild": "^0.24.0",
     "intl-segmenter-polyfill": "^0.4.4",
     "leaflet": "^1.9.4",
+    "leaflet.fullscreen": "^4.0.0",
     "match-sorter": "^6.3.3",
     "modern-screenshot": "^4.4.38",
     "postcss": "^8.4.35",
     "react-aria": "^3.43.1",
     "react-hook-form": "^7.49.3",
-    "react-leaflet": "^5.0.0",
-    "react-leaflet-fullscreen": "^4.1.1",
+    "react-leaflet": "^4.0.0 || ^5.0.0",
     "react-medium-image-zoom": "^5.1.10",
     "react-stately": "^3.35.0",
     "sass": "^1.71.1",
@@ -150,6 +151,7 @@
     "@rollup/plugin-terser": "^0.4.1",
     "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-console": "^2.0.0",
+    "@storybook/addon-docs": "^9.1.7",
     "@storybook/addon-links": "^9.1.7",
     "@storybook/react-vite": "^9.1.7",
     "@svgr/rollup": "^8.1.0",
@@ -167,6 +169,7 @@
     "@vitejs/plugin-react": "^5.0.0",
     "babel-loader": "^8.3.0",
     "chromatic": "^6.17.1",
+    "eslint-plugin-storybook": "9.1.7",
     "happy-dom": "^15.0.0",
     "npm-run-all": "^4.1.5",
     "opub-tokens": "*",
@@ -184,8 +187,6 @@
     "vite": "^5.0.0",
     "vite-plugin-turbosnap": "^1.0.1",
     "vite-tsconfig-paths": "^5.0.0",
-    "vitest": "^2.0.0",
-    "eslint-plugin-storybook": "9.1.7",
-    "@storybook/addon-docs": "^9.1.7"
+    "vitest": "^2.0.0"
   }
 }

packages/opub-ui/src/components/ECharts/ECharts.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import type { CSSProperties } from 'react';
 import { getInstanceByDom, init } from 'echarts';
 import type { EChartsOption, ECharts as EType, SetOptionOpts } from 'echarts';
@@ -23,7 +23,7 @@ export function ECharts({
   theme,
   width = '1000px',
   height = '600px',
-}: ReactEChartsProps): JSX.Element {
+}: ReactEChartsProps) {
   const chartRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {

packages/opub-ui/src/components/FormLayout/utils.tsx

@@ -1,14 +1,15 @@
 'use client';
 
-import React, { isValidElement } from 'react';
+import * as React from 'react';
+import { isValidElement } from 'react';
 
 // Wraps `element` in `Component`, if it is not already an instance of
 // `Component`. If `props` is passed, those will be added as props on the
 // wrapped component. If `element` is null, the component is not wrapped.
 export function wrapWithComponent<TProps extends React.PropsWithChildren>(
   element: React.ReactNode | null | undefined,
   Component: React.ComponentType<TProps>,
-  props: TProps & JSX.IntrinsicAttributes
+  props: TProps
 ): React.ReactNode {
   if (element == null) {
     return null;

packages/opub-ui/src/components/MapChart/MapChart.module.scss

@@ -47,3 +47,22 @@
     cursor: pointer;
   }
 }
+
+// .leaflet-control-fullscreen {
+//   background: white;
+//   width: 30px;
+//   height: 30px;
+//   text-align: center;
+//   line-height: 30px;
+//   cursor: pointer;
+//   font-size: 16px;
+//   border: 1px solid #ccc;
+//   border-radius: 4px;
+// }
+
+// .leaflet-control-fullscreen:after {
+//   content: '⛶'; /* fullscreen icon */
+//   display: block;
+//   text-align: center;
+//   font-size: 16px;
+// }

packages/opub-ui/src/components/MapChart/MapChart.tsx

@@ -2,22 +2,23 @@
 
 import React from 'react';
 import { IconHome, IconStack, IconZoomReset } from '@tabler/icons-react';
+// import { FullscreenControl } from 'react-leaflet-fullscreen';
+
+// import 'react-leaflet-fullscreen/styles.css';
+
+// import 'leaflet/dist/leaflet.css';
+
+import { LatLngExpression } from 'leaflet';
 import {
   GeoJSON,
   MapContainer,
   ScaleControl,
   TileLayer,
   useMap,
 } from 'react-leaflet';
-import { FullscreenControl } from 'react-leaflet-fullscreen';
-
-import 'react-leaflet-fullscreen/styles.css';
-
-// import 'leaflet/dist/leaflet.css';
-
-import { LatLngExpression } from 'leaflet';
 
 import { cn } from '../../utils';
+import FullscreenControl from '../../utils/FullscreenControl';
 import { Icon } from '../Icon';
 import { Popover } from '../Popover';
 import { RadioGroup, RadioItem } from '../RadioGroup';
@@ -108,7 +109,7 @@ type MapProps = {
   customColor?: (value: number) => string;
 
   /* height of the map */
-  height?: number;
+  height?: string;
 };
 
 type LegendProps = {

packages/opub-ui/src/utils/FullscreenControl.tsx

@@ -0,0 +1,28 @@
+import 'leaflet/dist/leaflet.css';
+import 'leaflet.fullscreen'; // only import JS
+
+import { useEffect } from 'react';
+import L from 'leaflet';
+import { useMap } from 'react-leaflet';
+
+// Extend Leaflet types for fullscreen plugin
+declare module 'leaflet' {
+  namespace control {
+    function fullscreen(options?: any): L.Control;
+  }
+}
+
+export default function FullscreenControl() {
+  const map = useMap();
+
+  useEffect(() => {
+    const control = L.control.fullscreen({ position: 'topleft' });
+    control.addTo(map);
+
+    return () => {
+      map.removeControl(control);
+    };
+  }, [map]);
+
+  return null;
+}

packages/opub-ui/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "@repo/config-ts/library.json",
   "compilerOptions": {
+    "jsx": "react-jsx",
     "outDir": "dist",
     "declarationDir": "dist/ts"
   },

packages/opub-ui/vite.config.ts

@@ -15,7 +15,7 @@ export default defineConfig(async () => {
     },
     optimizeDeps: {
       exclude: ['@resvg/resvg-js'],
-      // include: ['react-leaflet', 'leaflet'],
+      include: ['react-leaflet', 'leaflet'],
     },
     build: {
       rollupOptions: {