@tpzdsp/next-toolkit 1.12.1 → 1.14.0

package/README.md

@@ -139,7 +139,7 @@ interface MyComponentProps extends BaseProps {
 
 ```bash
 # Install OpenLayers dependencies
-npm install ol ol-geocoder ol-mapbox-style proj4
+npm install ol ol-mapbox-style proj4
 ```
 
 ```typescript
@@ -152,14 +152,14 @@ import '@your-org/nextjs-library/styles/ol';
 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.)
+- **Map components**: Require OpenLayers packages (`ol`, `ol-mapbox-style`, etc.)
 
 ```bash
 # For Select components
 npm install react-select
 
 # For Map components  
-npm install ol ol-geocoder ol-mapbox-style proj4 @turf/turf geojson
+npm install ol ol-mapbox-style proj4 @turf/turf geojson
 ```
 
 ```typescript
@@ -451,7 +451,7 @@ npm install react-select
 
 # Error: Cannot resolve module 'ol/ol.css' 
 # Solution: Install OpenLayers dependencies
-npm install ol ol-geocoder ol-mapbox-style proj4
+npm install ol ol-mapbox-style proj4
 
 # Or import components selectively to avoid these dependencies:
 import { Button, Card } from '@your-org/nextjs-library'; // ✅ No extra deps needed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpzdsp/next-toolkit",
-  "version": "1.12.1",
+  "version": "1.14.0",
   "description": "A reusable React component library for Next.js applications",
   "engines": {
     "node": ">= 24.12.0",
@@ -57,6 +57,11 @@
       "import": "./src/components/select/index.ts",
       "require": "./src/components/select/index.ts"
     },
+    "./components/info-box": {
+      "types": "./src/components/InfoBox/InfoBox.tsx",
+      "import": "./src/components/InfoBox/InfoBox.tsx",
+      "require": "./src/components/InfoBox/InfoBox.tsx"
+    },
     "./http": {
       "types": "./src/http/index.ts",
       "import": "./src/http/index.ts",
@@ -171,7 +176,6 @@
     "jsonwebtoken": "^9.0.3",
     "next": "^16.1.4",
     "ol": "^10.6.1",
-    "ol-geocoder": "^4.3.3",
     "ol-mapbox-style": "^13.0.1",
     "postcss": "^8.5.6",
     "prettier": "^3.8.1",
@@ -201,6 +205,7 @@
   },
   "peerDependencies": {
     "@better-fetch/fetch": "^1.1.21",
+    "@floating-ui/react": "^0.27.17",
     "@tanstack/react-query": "^5.90.19",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.6.1",
@@ -213,7 +218,6 @@
     "geojson": "^0.5.0",
     "next": "^16.1.4",
     "ol": "^10.6.1",
-    "ol-geocoder": "^4.3.3",
     "ol-mapbox-style": "^13.0.1",
     "proj4": "^2.19.10",
     "react": "^19.2.1",
@@ -229,6 +233,9 @@
     "@better-fetch/fetch": {
       "optional": true
     },
+    "@floating-ui/react": {
+      "optional": true
+    },
     "@turf/turf": {
       "optional": true
     },
@@ -256,9 +263,6 @@
     "ol": {
       "optional": true
     },
-    "ol-geocoder": {
-      "optional": true
-    },
     "ol-mapbox-style": {
       "optional": true
     },
@@ -277,5 +281,8 @@
   },
   "release": {
     "extends": "./release.config.js"
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.27.17"
   }
 }

package/src/assets/styles/ol.css

@@ -1,42 +1,93 @@
 @import 'ol/ol.css';
-@import 'ol-geocoder/dist/ol-geocoder.min.css';
 
-/* Universal OpenLayers control focus style */
+/**
+ * OpenLayers Control Styles
+ * 
+ * This file contains styles for OpenLayers map controls (zoom, layer switcher, fullscreen).
+ * 
+ * Design System:
+ * - All control buttons extend the `.ol-btn` base class
+ * - Control panels should be implemented as React components with Tailwind CSS
+ * - Use CSS custom properties (--focus-color, etc.) for consistent theming
+ * 
+ * To add a new control:
+ * 1. Add the `ol-btn` class to your button element
+ * 2. Override only the properties you need (e.g., font-size, icon)
+ * 3. Position the control container with absolute positioning
+ */
+
+:root {
+  --focus-color: #ffdd00;
+  --focus-outline-color: #ffbf47;
+  --control-bg: #fff;
+  --control-border: #505a5f;
+  --control-text: #0b0c0c;
+  --control-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+}
+
+/* Base button class for all OpenLayers controls */
+.ol-btn,
+.ol-btn:hover,
+.ol-btn:active,
+.ol-btn:focus,
+.ol-btn:focus-visible {
+  width: 40px !important;
+  height: 40px !important;
+  border: none !important;
+  outline: none !important;
+}
+
+.ol-btn {
+  background: var(--control-bg);
+  color: var(--control-text);
+  font-size: 1.5rem;
+  font-weight: bold;
+  line-height: 1;
+  box-shadow: var(--control-shadow);
+  cursor: pointer;
+  transition:
+    box-shadow 0.2s,
+    background 0.2s;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Ensure SVG icons in buttons are consistently sized and centered */
+.ol-btn svg {
+  width: 20px !important;
+  height: 20px !important;
+  flex-shrink: 0;
+  display: block;
+  margin: 0 auto;
+}
+
+.ol-btn:hover,
+.ol-btn:active {
+  background: var(--focus-color) !important;
+}
+
+.ol-btn:focus,
+.ol-btn:focus-visible {
+  outline: 3px solid var(--focus-outline-color) !important;
+  background: var(--focus-color) !important;
+  z-index: 2;
+}
+
+/* Universal OpenLayers control focus style for non-button elements */
 #map:focus,
 .ol-viewport:focus,
 .ol-control:focus,
-.ol-control button:focus,
-.ol-control button:focus-visible,
 .ol-attribution:focus,
-.ol-attribution button:focus,
-.ol-zoom:focus,
-.ol-zoom button:focus,
-.ol-layer-switcher-toggle:focus,
-.ol-layer-switcher-close:focus,
-.ol-layer-switcher-panel button:focus,
 .ol-attribution ul li a:focus,
-.ol-attribution ul li a:focus-visible,
-.ol-geocoder ul.gcd-txt-result > li > a:focus,
-.ol-geocoder ul.gcd-txt-result > li > a:focus-visible {
-  outline: 3px solid #ffbf47 !important;
-  border-color: #ffbf47 !important;
+.ol-attribution ul li a:focus-visible {
+  outline: 3px solid var(--focus-outline-color) !important;
+  border-color: var(--focus-outline-color) !important;
   z-index: 2;
 }
 
-.ol-geocoder #gcd-input-search:focus,
-.ol-geocoder .gcd-txt-search:focus,
-.ol-geocoder .gcd-txt-search:focus-visible {
-  background-color: #ffbf47 !important;
-  z-index: 2;
-}
-
-.ol-geocoder .gcd-txt-input:focus,
-.ol-geocoder .gcd-txt-input:focus-visible {
-  box-shadow:
-    inset 0 0 0 1px #ffbf47,
-    inset 0 0 6px #ffbf47;
-}
-
 /* Zoom control container */
 .ol-zoom {
   top: 1.5rem;
@@ -47,61 +98,26 @@
   z-index: 10;
 }
 
-/* Zoom buttons */
+/* Apply base button styling to zoom buttons */
 .ol-zoom button,
-.ol-control button {
-  width: 40px;
-  height: 40px;
-  background: #fff;
-  color: #0b0c0c;
-  font-size: 2rem;
-  font-weight: bold;
-  line-height: 1;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-  cursor: pointer;
-  transition:
-    border-color 0.2s,
-    box-shadow 0.2s,
-    background 0.2s;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .ol-zoom button:hover,
-.ol-control button:hover {
-  background: #f3f2f1;
-  border-color: #1d70b8;
-  outline: unset;
-}
-
-/* Layer switcher styles */
-.ol-layer-switcher {
-  top: 0px;
-  right: 1rem;
-}
-
-.ol-layer-switcher-toggle {
-  position: absolute;
-  top: 110px;
-  right: 0px;
+.ol-zoom button:active,
+.ol-zoom button:focus,
+.ol-zoom button:focus-visible {
+  width: 40px !important;
+  height: 40px !important;
+  border: none !important;
+  outline: none !important;
 }
 
-.ol-layer-switcher-toggle button {
-  width: 40px;
-  height: 40px;
-  background: #fff;
-  border: 2px solid #505a5f;
-  color: #0b0c0c;
-  font-size: 1.5rem;
+.ol-zoom button {
+  background: var(--control-bg) !important;
+  color: var(--control-text) !important;
   font-weight: bold;
   line-height: 1;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--control-shadow);
   cursor: pointer;
   transition:
-    border-color 0.2s,
     box-shadow 0.2s,
     background 0.2s;
   margin: 0;
@@ -109,124 +125,79 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  font-size: 0 !important; /* Hide the default +/- text */
+  position: relative;
 }
 
-.ol-layer-switcher-panel {
-  position: absolute;
-  top: 110px;
-  right: -100%;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  padding: 1rem 1rem;
-  min-width: 220px;
-  background: #fff;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
-  gap: 0.5rem;
-  transition: right 0.3s ease-in-out;
-}
-
-.ol-layer-switcher-panel.open {
-  right: 3rem;
-}
-
-/* Header for the close button, aligns it to the top-right */
-.ol-layer-switcher-header {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  width: 100%;
-}
-
-/* Small, circular close button */
-.ol-layer-switcher-close {
-  font-size: 1.25rem;
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-  background: none;
-  border: none;
-  color: #505a5f;
-  cursor: pointer;
-  border-radius: 50%;
-  transition: background 0.2s;
-}
-
-.ol-layer-switcher-close:hover,
-.ol-layer-switcher-close:focus {
-  background: #e1e1e1;
-}
-
-/* Content area for basemap buttons */
-.ol-layer-switcher-content {
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-}
-
-.ol-layer-switcher-content button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid #ccc;
-  background-color: #fff;
-  min-width: 135px;
-  min-height: 135px;
-  cursor: pointer;
-  color: #000;
-}
-
-.ol-layer-switcher-content button:hover {
-  background-color: #ddd;
+.ol-zoom button:hover,
+.ol-zoom button:active {
+  background: var(--focus-color) !important;
 }
 
-.ol-layer-switcher-content button.active {
-  background-color: #007bff;
-  color: white;
-  border-color: #0056b3;
-  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
-  transform: scale(1.05);
-  transition: all 0.2s ease;
+.ol-zoom button:focus,
+.ol-zoom button:focus-visible {
+  outline: 3px solid var(--focus-outline-color) !important;
+  background: var(--focus-color) !important;
+  z-index: 2;
 }
 
-.ol-layer-switcher-content button.active img {
-  filter: brightness(1.2);
+/* Override default zoom button text with SVG icons */
+.ol-zoom-in::before,
+.ol-zoom-out::before {
+  content: '';
+  display: block;
+  width: 20px;
+  height: 20px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  font-size: 0; /* Ensure no text shows */
 }
 
-.ol-layer-switcher-content button:not(.active) img {
-  filter: grayscale(1);
+.ol-zoom-in::before {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M12 5v14m-7-7h14" stroke="%230b0c0c" stroke-width="2" stroke-linecap="round"/></svg>');
 }
 
-.ol-layer-switcher-content button img {
-  max-width: 80px;
-  height: auto;
-  border: 2px solid #000;
+.ol-zoom-out::before {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M5 12h14" stroke="%230b0c0c" stroke-width="2" stroke-linecap="round"/></svg>');
 }
 
-.ol-layer-switcher-content button div {
-  font-size: 14px;
-  padding-top: 0.5rem;
+/* Layer switcher control */
+.ol-layer-switcher {
+  position: absolute;
+  top: 110px;
+  right: 1rem;
+  z-index: 9999;
 }
 
-/* Geocoder tweaks */
-
-#gcd-container,
-.ol-geocoder .gcd-txt-control {
-  height: unset !important;
+/* Full screen control */
+.ol-fullscreen {
+  position: absolute;
+  top: 155px;
+  right: 1rem;
 }
 
-.ol-geocoder .gcd-txt-glass,
-.ol-geocoder ul.gcd-txt-result {
-  top: unset !important;
+/* Full screen mode for map container */
+.map-fullscreen {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  z-index: 9999 !important;
+  margin: 0 !important;
+  padding: 0 !important;
 }
 
-.ol-geocoder ul.gcd-txt-result > li:nth-child(odd),
-.ol-geocoder ul.gcd-txt-result > li:nth-child(even) {
-  background-color: #fff;
-  background-color: #fff;
+/* Ensure map fills container in full screen mode */
+.map-fullscreen .ol-viewport {
+  width: 100% !important;
+  height: 100% !important;
 }
 
-.ol-geocoder ul.gcd-txt-result > li > a:hover {
-  background-color: #f3f2f1;
+/* Hide other UI elements when in full screen (optional) */
+.map-fullscreen ~ * {
+  display: none;
 }

package/src/components/ButtonLink/ButtonLink.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ButtonLink } from './ButtonLink';
+
+const meta = {
+  title: 'Components/ButtonLink',
+  component: ButtonLink,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['button', 'submit', 'reset'],
+    },
+  },
+} satisfies Meta<typeof ButtonLink>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Click me',
+    type: 'button',
+  },
+};
+
+export const WithClickHandler: Story = {
+  args: {
+    children: 'Show alert',
+    onClick: () => alert('Button clicked!'),
+  },
+};
+
+export const Submit: Story = {
+  args: {
+    children: 'Submit form',
+    type: 'submit',
+  },
+  render: (args) => (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        alert('Form submitted!');
+      }}
+    >
+      <ButtonLink {...args} />
+    </form>
+  ),
+};
+
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled button link',
+    disabled: true,
+  },
+};
+
+export const WithCustomStyling: Story = {
+  args: {
+    children: 'Custom styled',
+    className: 'font-bold text-xl',
+  },
+};
+
+export const LongText: Story = {
+  args: {
+    children: 'This is a longer button link that demonstrates how text wraps',
+  },
+};

package/src/components/ButtonLink/ButtonLink.test.tsx

@@ -0,0 +1,154 @@
+import { ButtonLink } from './ButtonLink';
+import { render, screen, userEvent } from '../../test/renderers';
+
+describe('ButtonLink', () => {
+  describe('rendering', () => {
+    it('should render with children', () => {
+      render(<ButtonLink>Click me</ButtonLink>);
+
+      expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+    });
+
+    it('should render as a button element', () => {
+      render(<ButtonLink>Button</ButtonLink>);
+
+      const button = screen.getByRole('button');
+
+      expect(button.tagName).toBe('BUTTON');
+    });
+
+    it('should have link styling classes', () => {
+      render(<ButtonLink>Button</ButtonLink>);
+
+      const button = screen.getByRole('button');
+
+      expect(button).toHaveClass('text-link', 'underline', 'cursor-pointer');
+    });
+
+    it('should merge custom className', () => {
+      render(<ButtonLink className="custom-class">Button</ButtonLink>);
+
+      const button = screen.getByRole('button');
+
+      expect(button).toHaveClass('custom-class');
+      expect(button).toHaveClass('text-link'); // Still has base classes
+    });
+  });
+
+  describe('button types', () => {
+    it('should default to type="button"', () => {
+      render(<ButtonLink>Button</ButtonLink>);
+
+      const button = screen.getByRole('button');
+
+      expect(button).toHaveAttribute('type', 'button');
+    });
+
+    it('should accept type="submit"', () => {
+      render(<ButtonLink type="submit">Submit</ButtonLink>);
+
+      const button = screen.getByRole('button');
+
+      expect(button).toHaveAttribute('type', 'submit');
+    });
+
+    it('should accept type="reset"', () => {
+      render(<ButtonLink type="reset">Reset</ButtonLink>);
+
+      const button = screen.getByRole('button');
+
+      expect(button).toHaveAttribute('type', 'reset');
+    });
+  });
+
+  describe('interactions', () => {
+    it('should handle click events', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+
+      render(<ButtonLink onClick={onClick}>Click me</ButtonLink>);
+
+      await user.click(screen.getByRole('button'));
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not trigger onClick when disabled', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+
+      render(
+        <ButtonLink onClick={onClick} disabled>
+          Disabled
+        </ButtonLink>,
+      );
+
+      await user.click(screen.getByRole('button'));
+
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it('should submit form when type="submit"', () => {
+      const onSubmit = vi.fn((e) => e.preventDefault());
+
+      render(
+        <form onSubmit={onSubmit}>
+          <ButtonLink type="submit">Submit</ButtonLink>
+        </form>,
+      );
+
+      const button = screen.getByRole('button');
+
+      button.click();
+
+      expect(onSubmit).toHaveBeenCalled();
+    });
+  });
+
+  describe('disabled state', () => {
+    it('should have disabled attribute when disabled', () => {
+      render(<ButtonLink disabled>Disabled</ButtonLink>);
+
+      const button = screen.getByRole('button');
+
+      expect(button).toBeDisabled();
+    });
+
+    it('should have reduced opacity when disabled', () => {
+      render(<ButtonLink disabled>Disabled</ButtonLink>);
+
+      const button = screen.getByRole('button');
+
+      expect(button).toHaveClass('disabled:opacity-50');
+    });
+
+    it('should have not-allowed cursor when disabled', () => {
+      render(<ButtonLink disabled>Disabled</ButtonLink>);
+
+      const button = screen.getByRole('button');
+
+      expect(button).toHaveClass('disabled:cursor-not-allowed');
+    });
+  });
+
+  describe('accessibility', () => {
+    it('should have button role', () => {
+      render(<ButtonLink>Button</ButtonLink>);
+
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should accept aria attributes', () => {
+      render(
+        <ButtonLink aria-label="Custom label" aria-describedby="description">
+          Button
+        </ButtonLink>,
+      );
+
+      const button = screen.getByRole('button', { name: 'Custom label' });
+
+      expect(button).toBeInTheDocument();
+      expect(button).toHaveAttribute('aria-describedby', 'description');
+    });
+  });
+});