@tpzdsp/next-toolkit 1.2.3 → 1.2.5

package/README.md

@@ -42,6 +42,9 @@ import { Button, Card, useLocalStorage } from '@your-org/nextjs-library';
 import '@your-org/nextjs-library/styles';
 // OR if the above doesn't work:
 // import '@your-org/nextjs-library/src/assets/styles/globals.css';
+
+// If you're using map components, also import OpenLayers styles:
+import '@your-org/nextjs-library/styles/ol';
 ```
 
 ### Selective Imports (Recommended)
@@ -53,6 +56,9 @@ import { Button, NextLinkWrapper } from '@your-org/nextjs-library/client';
 // Import only server components
 import { Card, Container } from '@your-org/nextjs-library/server';
 
+// Import components with heavy dependencies separately
+import { Select } from '@your-org/nextjs-library/components/select';
+
 // Import only types
 import type { ButtonProps, ApiResponse, FormFieldProps } from '@your-org/nextjs-library/types';
 ```
@@ -62,7 +68,9 @@ import type { ButtonProps, ApiResponse, FormFieldProps } from '@your-org/nextjs-
 ```tsx
 import { Button } from '@your-org/nextjs-library/client';
 import { Card } from '@your-org/nextjs-library/server';
-import '@your-org/nextjs-library/styles'; // or the src path if this doesn't work
+import '@your-org/nextjs-library/styles'; // Base styles
+// Import map styles only if you're using map components:
+// import '@your-org/nextjs-library/styles/ol';
 
 export default function MyPage() {
   return (
@@ -120,6 +128,45 @@ interface MyComponentProps extends BaseProps {
 - **useLocalStorage**: localStorage hook with SSR support
 - **useDebounce**: Debounce values and functions
 
+### Map Components
+
+- **Map**: OpenLayers-based interactive map component
+- **MapContext**: React context for map state management
+- **Popup**: Map popup component for displaying information
+- **LayerSwitcherControl**: Control for switching between map layers
+
+**Note**: Map components require additional dependencies and styles:
+
+```bash
+# Install OpenLayers dependencies
+npm install ol ol-geocoder ol-mapbox-style proj4
+```
+
+```typescript
+// Import map styles when using map components
+import '@your-org/nextjs-library/styles/ol';
+```
+
+### Components with Optional Dependencies
+
+Some components require additional peer dependencies that are marked as optional:
+
+- **Select components**: Require `react-select`
+- **Map components**: Require OpenLayers packages (`ol`, `ol-geocoder`, etc.)
+
+```bash
+# For Select components
+npm install react-select
+
+# For Map components  
+npm install ol ol-geocoder ol-mapbox-style proj4 @turf/turf geojson
+```
+
+```typescript
+// Import Select components separately to avoid forcing dependency
+import { Select } from '@your-org/nextjs-library/components/select';
+```
+
 ### Utilities
 
 - **cn()**: Tailwind class merging utility using tailwind-merge
@@ -418,6 +465,22 @@ yalc publish
 yalc add @your-org/nextjs-library
 ```
 
+**Optional dependency errors:**
+
+```bash
+# Error: Cannot resolve module 'react-select'
+# Solution: Install the required dependency
+npm install react-select
+
+# Error: Cannot resolve module 'ol/ol.css' 
+# Solution: Install OpenLayers dependencies
+npm install ol ol-geocoder ol-mapbox-style proj4
+
+# Or import components selectively to avoid these dependencies:
+import { Button, Card } from '@your-org/nextjs-library'; // ✅ No extra deps needed
+import { Select } from '@your-org/nextjs-library/components/select'; // ❌ Requires react-select
+```
+
 ## Testing
 
 This library uses Vitest and React Testing Library for testing:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpzdsp/next-toolkit",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "A reusable React component library for Next.js applications",
   "type": "module",
   "private": false,
@@ -28,11 +28,6 @@
       "import": "./src/index.ts",
       "require": "./src/index.ts"
     },
-    "./test": {
-      "types": "./src/test/index.ts",
-      "import": "./src/test/index.ts",
-      "require": "./src/test/index.ts"
-    },
     "./utils": {
       "types": "./src/utils/index.ts",
       "import": "./src/utils/index.ts",
@@ -48,6 +43,11 @@
       "import": "./src/components/index.ts",
       "require": "./src/components/index.ts"
     },
+    "./components/select": {
+      "types": "./src/components/select/index.ts",
+      "import": "./src/components/select/index.ts",
+      "require": "./src/components/select/index.ts"
+    },
     "./map": {
       "types": "./src/map/index.ts",
       "import": "./src/map/index.ts",
@@ -79,6 +79,7 @@
       "require": "./src/types/auth.ts"
     },
     "./styles": "./src/assets/styles/globals.css",
+    "./styles/ol": "./src/assets/styles/ol.css",
     "./fonts/*": "./src/assets/fonts/*",
     "./images/*": "./src/assets/images/*"
   },
@@ -186,7 +187,41 @@
     "proj4": "^2.19.10",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-icons": "^5.5.0",
+    "react-icons": "^5.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@turf/turf": {
+      "optional": true
+    },
+    "@types/geojson": {
+      "optional": true
+    },
+    "@types/jsonwebtoken": {
+      "optional": true
+    },
+    "geojson": {
+      "optional": true
+    },
+    "jsonwebtoken": {
+      "optional": true
+    },
+    "ol": {
+      "optional": true
+    },
+    "ol-geocoder": {
+      "optional": true
+    },
+    "ol-mapbox-style": {
+      "optional": true
+    },
+    "proj4": {
+      "optional": true
+    },
+    "react-select": {
+      "optional": true
+    }
+  },
+  "optionalDependencies": {
     "react-select": "^5.10.2"
   },
   "release": {

package/src/assets/styles/globals.css

@@ -1,5 +1,3 @@
-@import './ol.css';
-
 /* Global CSS for the component library */
 @tailwind base;
 @tailwind components;

package/src/components/index.ts

@@ -31,8 +31,9 @@ export { useDropdownMenu } from './dropdown/useDropdownMenu';
 export { SlidingPanel } from './SlidingPanel/SlidingPanel';
 export { Accordion } from './accordion/Accordion';
 export { Modal } from './Modal/Modal';
-export { Select } from './select/Select';
-export { SelectSkeleton } from './select/SelectSkeleton';
+// NOTE: Select components moved to separate entry point '@tpzdsp/next-toolkit/components/select'
+// export { Select } from './select/Select';
+// export { SelectSkeleton } from './select/SelectSkeleton';
 
 // Export client component types
 export type { AccordionProps } from './accordion/Accordion';

package/src/components/select/Select.tsx

@@ -17,7 +17,7 @@ import { twMerge } from 'tailwind-merge';
 import { SELECT_CONTAINER_CLASSES, SELECT_CONTROL_CLASSES, SELECT_MIN_HEIGHT } from './common';
 
 // extends the react-select props with some of our own
-type SelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<
+export type SelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<
   ReactSelectProps<Option, IsMulti, Group>,
   'className'
 >;

package/src/components/select/SelectSkeleton.tsx

@@ -2,9 +2,13 @@ import { twMerge } from 'tailwind-merge';
 
 import { SELECT_CONTAINER_CLASSES, SELECT_CONTROL_CLASSES, SELECT_MIN_HEIGHT } from './common';
 
-export const SelectSkeleton = () => {
+export type SelectSkeletonProps = {
+  className?: string;
+};
+
+export const SelectSkeleton = ({ className }: SelectSkeletonProps = {}) => {
   return (
-    <div className={SELECT_CONTAINER_CLASSES}>
+    <div className={twMerge(SELECT_CONTAINER_CLASSES, className)}>
       <div className={twMerge(SELECT_CONTROL_CLASSES, SELECT_MIN_HEIGHT)}>
         <div
           className="w-full h-full bg-gray-100 animate-pulse rounded-md col-span-2"

package/src/components/select/index.ts

@@ -0,0 +1,18 @@
+// Select components with react-select dependency
+export { Select } from './Select';
+export { SelectSkeleton } from './SelectSkeleton';
+
+// Export types
+export type { SelectProps } from './Select';
+export type { SelectSkeletonProps } from './SelectSkeleton';
+
+// Re-export useful types from react-select for convenience
+export type {
+  Props as ReactSelectProps,
+  GroupBase,
+  OptionsOrGroups,
+  SingleValue,
+  MultiValue,
+  ActionMeta,
+  OnChangeValue,
+} from 'react-select';

package/src/index.ts

@@ -1,11 +0,0 @@
-// Export all components.
-export * from './components';
-
-// Export all utilities (these can be used in both client and server)
-export * from './utils';
-
-// Export all map related code (these can be used in both client and server)
-export * from './map';
-
-// Export all types
-export * from './types';

package/src/map/{Map.tsx → MapComponent.tsx}

@@ -9,9 +9,9 @@ import { fromLonLat } from 'ol/proj';
 import { initializeBasemapLayers } from './basemaps';
 import { initializeGeocoder } from './geocoder';
 import { LayerSwitcherControl } from './LayerSwitcherControl';
-import { getPopupPositionClass } from './map';
 import { useMap } from './MapContext';
 import { Popup } from './Popup';
+import { getPopupPositionClass } from './utils';
 import type { MapConfig, PopupDirection } from '../types/map';
 
 export type MapComponentProps = {

package/src/map/MapContext.tsx

@@ -12,7 +12,7 @@ import ClusterSource from 'ol/source/Cluster';
 import VectorSource from 'ol/source/Vector';
 
 import './projections';
-import { LAYER_NAMES } from './map';
+import { LAYER_NAMES } from './utils';
 import type { MapConfig } from '../types/map';
 
 export type MapContextType = {

package/src/map/index.ts

@@ -2,8 +2,8 @@ export * from './basemaps';
 export * from './geocoder';
 export * from './geometries';
 export * from './LayerSwitcherControl';
-export * from './map';
-export * from './Map';
+export * from './utils';
+export * from './MapComponent';
 export * from './MapContext';
 export * from './osOpenNamesSearch';
 export * from './Popup';