@tpzdsp/next-toolkit 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpzdsp/next-toolkit",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A reusable React component library for Next.js applications",
   "type": "module",
   "private": false,
@@ -71,8 +71,11 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@tpzdsp/eslint-config-dsp": "^1.9.0",
+    "@turf/turf": "^7.2.0",
+    "@types/geojson": "^7946.0.16",
     "@types/jsonwebtoken": "^9.0.10",
     "@types/node": "^24.0.15",
+    "@types/proj4": "^2.19.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@typescript-eslint/eslint-plugin": "^8.38.0",
@@ -94,18 +97,25 @@
     "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-sonarjs": "^3.0.4",
     "eslint-plugin-storybook": "^9.0.18",
+    "geojson": "^0.5.0",
     "globals": "^16.3.0",
     "husky": "^9.1.7",
     "jsdom": "^26.1.0",
     "jsonwebtoken": "^9.0.2",
     "next": "^15.4.2",
+    "ol": "^10.6.1",
+    "ol-geocoder": "^4.3.3",
+    "ol-mapbox-style": "^13.0.1",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "prettier-plugin-classnames": "^0.8.1",
     "prettier-plugin-tailwindcss": "^0.6.14",
+    "proj4": "^2.19.10",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",
+    "react-select": "^5.10.2",
+    "react-select-event": "^5.5.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "semantic-release": "^24.2.7",
     "storybook": "8.6.14",
@@ -120,12 +130,21 @@
   "peerDependencies": {
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.6.1",
+    "@turf/turf": "^7.2.0",
+    "@types/geojson": "^7946.0.16",
     "@types/jsonwebtoken": "^9.0.10",
+    "@types/proj4": "^2.19.0",
+    "geojson": "^0.5.0",
     "jsonwebtoken": "^9.0.2",
     "next": "^15.4.2",
+    "ol": "^10.6.1",
+    "ol-geocoder": "^4.3.3",
+    "ol-mapbox-style": "^13.0.1",
+    "proj4": "^2.19.10",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-icons": "^5.5.0"
+    "react-icons": "^5.5.0",
+    "react-select": "^5.10.2"
   },
   "release": {
     "extends": "./release.config.js"

package/src/assets/styles/globals.css

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

package/src/assets/styles/ol.css

@@ -0,0 +1,122 @@
+@import 'ol/ol.css';
+@import 'ol-geocoder/dist/ol-geocoder.min.css';
+
+.ol-zoom {
+  left: unset;
+  right: 0.5rem;
+}
+
+.ol-layer-switcher {
+  top: 65px;
+  right: 0.5rem;
+}
+
+.ol-btn {
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+}
+
+.ol-layer-switcher-panel {
+  position: absolute;
+  top: 0;
+  right: -100%; /* Start off-screen */
+  min-width: fit-content;
+  max-width: 80vw;
+  background-color: #008938;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 10px;
+  gap: 10px;
+  transition: right 0.3s ease-in-out;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.ol-layer-switcher-panel.open {
+  right: 1.5rem; /* Slide into view */
+}
+
+.ol-layer-switcher-panel 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-panel button:hover {
+  background-color: #ddd;
+}
+
+.ol-layer-switcher-panel button.active {
+  background-color: #007bff; /* Bright blue background */
+  color: white; /* White text */
+  border-color: #0056b3; /* Darker border for contrast */
+  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3); /* Subtle shadow effect */
+  transform: scale(1.05); /* Slightly scale the active button */
+  transition: all 0.2s ease; /* Smooth transition for all styles */
+}
+
+.ol-layer-switcher-panel button.active img {
+  filter: brightness(1.2); /* Makes the image brighter */
+}
+
+.ol-layer-switcher-panel button:not(.active) img {
+  filter: grayscale(1); /* Apply grayscale to inactive images */
+}
+
+.ol-layer-switcher-panel button img {
+  max-width: 80px;
+  height: auto;
+  border: 2px solid #000;
+  border-radius: 0.3rem;
+}
+
+.ol-layer-switcher-panel button div {
+  font-size: 14px;
+  padding-top: 0.5rem;
+}
+
+.ol-geocoder .gcd-txt-control {
+  height: unset !important;
+}
+
+.ol-geocoder .gcd-txt-glass,
+.ol-geocoder ul.gcd-txt-result {
+  top: unset !important;
+}
+
+.ol-geocoder ul.gcd-txt-result>li:nth-child(odd) {
+  background-color: #008938;
+}
+
+.ol-geocoder ul.gcd-txt-result>li:nth-child(even) {
+  background-color: #bddabd;
+}
+
+.ol-geocoder ul.gcd-txt-result>li>a:hover {
+    background-color: #fff;
+}
+
+/* Change the text color on hover */
+.ol-geocoder ul.gcd-txt-result>li>a:hover .gcd-address,
+.ol-geocoder ul.gcd-txt-result>li>a:hover .gcd-road,
+.ol-geocoder ul.gcd-txt-result>li>a:hover .gcd-city,
+.ol-geocoder ul.gcd-txt-result>li>a:hover .gcd-country {
+    color: #000;
+}
+
+/* Ensure the text color when not hovering */
+.ol-geocoder ul.gcd-txt-result .gcd-address,
+.ol-geocoder ul.gcd-txt-result .gcd-road,
+.ol-geocoder ul.gcd-txt-result .gcd-city,
+.ol-geocoder ul.gcd-txt-result .gcd-country {
+    color: #fff;
+}

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,252 @@
+/* eslint-disable storybook/no-renderer-packages */
+import { useEffect, useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Modal } from './Modal';
+
+const MODAL_ROOT_ID = 'modal-root';
+
+const meta: Meta<typeof Modal> = {
+  title: 'Components/Modal',
+  component: Modal,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'A modal dialog component that renders content in a portal overlay.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    isOpen: {
+      control: 'boolean',
+      description: 'Whether the modal is open',
+    },
+    onClose: {
+      action: 'onClose',
+      description: 'Callback function called when the modal should close',
+    },
+    children: {
+      control: false,
+      description: 'Content to display inside the modal',
+    },
+  },
+  decorators: [
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    (Story) => {
+      useEffect(() => {
+        // Ensure modal-root exists
+        if (!document.getElementById(MODAL_ROOT_ID)) {
+          const modalRoot = document.createElement('div');
+
+          modalRoot.id = MODAL_ROOT_ID;
+          document.body.appendChild(modalRoot);
+        }
+
+        return () => {
+          // Clean up on unmount
+          const modalRoot = document.getElementById(MODAL_ROOT_ID);
+
+          if (modalRoot) {
+            document.body.removeChild(modalRoot);
+          }
+        };
+      }, []);
+
+      return (
+        <div>
+          <Story />
+        </div>
+      );
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Modal>;
+
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    children: (
+      <div>
+        <h2 className="text-xl font-bold mb-4">Modal Title</h2>
+
+        <p className="text-gray-600 mb-4">
+          This is a basic modal with some content. You can close it by clicking the X button,
+          pressing Escape, or clicking outside the modal.
+        </p>
+
+        <div className="flex gap-2">
+          <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
+            Confirm
+          </button>
+
+          <button className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400">
+            Cancel
+          </button>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const Closed: Story = {
+  args: {
+    isOpen: false,
+    children: (
+      <div>
+        <h2 className="text-xl font-bold mb-4">You won&apos;t see this</h2>
+
+        <p>This modal is closed, so the content is not visible.</p>
+      </div>
+    ),
+  },
+};
+
+export const SimpleMessage: Story = {
+  args: {
+    isOpen: true,
+    children: (
+      <div className="text-center">
+        <h3 className="text-lg font-semibold mb-2">Success!</h3>
+
+        <p className="text-gray-600">Your action was completed successfully.</p>
+      </div>
+    ),
+  },
+};
+
+type ModalWrapperProps = {
+  children: React.ReactNode;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+const ModalWrapper = ({ children, isOpen, onClose }: ModalWrapperProps) => {
+  useEffect(() => {
+    if (!document.getElementById(MODAL_ROOT_ID)) {
+      const modalRoot = document.createElement('div');
+
+      modalRoot.id = MODAL_ROOT_ID;
+      document.body.appendChild(modalRoot);
+    }
+  }, []);
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      {children}
+    </Modal>
+  );
+};
+
+export const WithWrapper: Story = {
+  render: (args) => (
+    <ModalWrapper {...args}>
+      <div>
+        <h2 className="text-xl font-bold mb-4">Modal with Wrapper</h2>
+
+        <p className="text-gray-600">This modal uses a wrapper to ensure modal-root exists.</p>
+      </div>
+    </ModalWrapper>
+  ),
+  args: {
+    isOpen: true,
+  },
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedModal, setSelectedModal] = useState<string | null>(null);
+
+    useEffect(() => {
+      if (!document.getElementById(MODAL_ROOT_ID)) {
+        const modalRoot = document.createElement('div');
+
+        modalRoot.id = MODAL_ROOT_ID;
+        document.body.appendChild(modalRoot);
+      }
+    }, []);
+
+    const openModal = (type: string) => {
+      setSelectedModal(type);
+      setIsOpen(true);
+    };
+
+    const closeModal = () => {
+      setIsOpen(false);
+      setSelectedModal(null);
+    };
+
+    const renderModalContent = () => {
+      switch (selectedModal) {
+        case 'info':
+          return (
+            <div>
+              <h3 className="text-lg font-semibold mb-2">Information</h3>
+
+              <p className="text-gray-600">This is an informational modal.</p>
+            </div>
+          );
+        case 'warning':
+          return (
+            <div>
+              <h3 className="text-lg font-semibold mb-2 text-yellow-600">Warning</h3>
+
+              <p className="text-gray-600">This action requires confirmation.</p>
+            </div>
+          );
+        case 'error':
+          return (
+            <div>
+              <h3 className="text-lg font-semibold mb-2 text-red-600">Error</h3>
+
+              <p className="text-gray-600">Something went wrong. Please try again.</p>
+            </div>
+          );
+        default:
+          return <p>Default modal content</p>;
+      }
+    };
+
+    return (
+      <div className="p-8">
+        <h2 className="text-xl font-bold mb-4">Interactive Modal Demo</h2>
+
+        <p className="text-gray-600 mb-6">
+          Click any button below to open different types of modals.
+        </p>
+
+        <div className="space-x-4">
+          <button
+            onClick={() => openModal('info')}
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+          >
+            Info Modal
+          </button>
+
+          <button
+            onClick={() => openModal('warning')}
+            className="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600"
+          >
+            Warning Modal
+          </button>
+
+          <button
+            onClick={() => openModal('error')}
+            className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+          >
+            Error Modal
+          </button>
+        </div>
+
+        <Modal isOpen={isOpen} onClose={closeModal}>
+          {renderModalContent()}
+        </Modal>
+      </div>
+    );
+  },
+};

package/src/components/Modal/Modal.test.tsx

@@ -0,0 +1,248 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { Modal } from './Modal';
+import { render, screen, userEvent } from '../../utils/renderers';
+
+const MODAL_CONTENT = 'Modal content';
+const MODAL_ROOT_ID = 'modal-root';
+const BACKDROP_SELECTOR = '[aria-modal="true"]';
+
+// Mock the useClickOutside hook
+vi.mock('../../hooks/useClickOutside', () => ({
+  useClickOutside: vi.fn(),
+}));
+
+describe('Modal', () => {
+  // Setup modal root element for each test
+  beforeEach(() => {
+    const modalRoot = document.createElement('div');
+
+    modalRoot.id = MODAL_ROOT_ID;
+    document.body.appendChild(modalRoot);
+  });
+
+  afterEach(() => {
+    const modalRoot = document.getElementById(MODAL_ROOT_ID);
+
+    if (modalRoot) {
+      document.body.removeChild(modalRoot);
+    }
+  });
+
+  it('should render modal when isOpen is true', () => {
+    render(
+      <Modal isOpen={true} onClose={vi.fn()}>
+        <div>{MODAL_CONTENT}</div>
+      </Modal>,
+    );
+
+    expect(screen.getByText(MODAL_CONTENT)).toBeInTheDocument();
+
+    // Check for the backdrop with aria-modal attribute instead of role
+    const backdrop = screen.getByText(MODAL_CONTENT).closest(BACKDROP_SELECTOR);
+
+    expect(backdrop).toBeInTheDocument();
+  });
+
+  it('should not render modal when isOpen is false', () => {
+    render(
+      <Modal isOpen={false} onClose={vi.fn()}>
+        <div>{MODAL_CONTENT}</div>
+      </Modal>,
+    );
+
+    expect(screen.queryByText(MODAL_CONTENT)).not.toBeInTheDocument();
+  });
+
+  it('should not render modal when modal root is missing', () => {
+    // Remove modal root
+    const modalRoot = document.getElementById(MODAL_ROOT_ID);
+
+    if (modalRoot) {
+      document.body.removeChild(modalRoot);
+    }
+
+    render(
+      <Modal isOpen={true} onClose={vi.fn()}>
+        <div>{MODAL_CONTENT}</div>
+      </Modal>,
+    );
+
+    expect(screen.queryByText(MODAL_CONTENT)).not.toBeInTheDocument();
+  });
+
+  it('should have proper accessibility attributes', () => {
+    render(
+      <Modal isOpen={true} onClose={vi.fn()}>
+        <div>{MODAL_CONTENT}</div>
+      </Modal>,
+    );
+
+    const backdrop = screen.getByText(MODAL_CONTENT).closest(BACKDROP_SELECTOR);
+
+    expect(backdrop).toHaveAttribute('aria-modal', 'true');
+
+    const closeButton = screen.getByRole('button', { name: /close modal/i });
+
+    expect(closeButton).toHaveAttribute('aria-label', 'Close modal');
+  });
+
+  it('should call onClose when close button is clicked', async () => {
+    const user = userEvent.setup();
+    const onCloseMock = vi.fn();
+
+    render(
+      <Modal isOpen={true} onClose={onCloseMock}>
+        <div>{MODAL_CONTENT}</div>
+      </Modal>,
+    );
+
+    const closeButton = screen.getByRole('button', { name: /close modal/i });
+
+    await user.click(closeButton);
+
+    expect(onCloseMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call onClose when Escape key is pressed', async () => {
+    const user = userEvent.setup();
+    const onCloseMock = vi.fn();
+
+    render(
+      <Modal isOpen={true} onClose={onCloseMock}>
+        <div>{MODAL_CONTENT}</div>
+      </Modal>,
+    );
+
+    await user.keyboard('{Escape}');
+
+    expect(onCloseMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not call onClose when other keys are pressed', async () => {
+    const user = userEvent.setup();
+    const onCloseMock = vi.fn();
+
+    render(
+      <Modal isOpen={true} onClose={onCloseMock}>
+        <div>{MODAL_CONTENT}</div>
+      </Modal>,
+    );
+
+    await user.keyboard('{Enter}');
+    await user.keyboard('{Space}');
+    await user.keyboard('a');
+
+    expect(onCloseMock).not.toHaveBeenCalled();
+  });
+
+  it('should render complex content correctly', () => {
+    render(
+      <Modal isOpen={true} onClose={vi.fn()}>
+        <div>
+          <h2>Modal Title</h2>
+
+          <p>Modal description</p>
+
+          <button>Action Button</button>
+
+          <ul>
+            <li>Item 1</li>
+
+            <li>Item 2</li>
+          </ul>
+        </div>
+      </Modal>,
+    );
+
+    expect(screen.getByText('Modal Title')).toBeInTheDocument();
+    expect(screen.getByText('Modal description')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Action Button' })).toBeInTheDocument();
+    expect(screen.getByText('Item 1')).toBeInTheDocument();
+    expect(screen.getByText('Item 2')).toBeInTheDocument();
+  });
+
+  it('should have correct styling classes', () => {
+    render(
+      <Modal isOpen={true} onClose={vi.fn()}>
+        <div>{MODAL_CONTENT}</div>
+      </Modal>,
+    );
+
+    const backdrop = screen.getByText(MODAL_CONTENT).closest(BACKDROP_SELECTOR);
+
+    expect(backdrop).toHaveClass(
+      'fixed',
+      'inset-0',
+      'z-50',
+      'flex',
+      'items-center',
+      'justify-center',
+      'bg-black',
+      'bg-opacity-50',
+    );
+
+    const modalContent = backdrop?.firstChild as HTMLElement;
+
+    expect(modalContent).toHaveClass(
+      'bg-white',
+      'rounded-lg',
+      'p-6',
+      'relative',
+      'max-w-md',
+      'w-full',
+      'shadow-lg',
+      'z-10',
+    );
+  });
+
+  it('should render close icon correctly', () => {
+    render(
+      <Modal isOpen={true} onClose={vi.fn()}>
+        <div>{MODAL_CONTENT}</div>
+      </Modal>,
+    );
+
+    const closeButton = screen.getByRole('button', { name: /close modal/i });
+    const closeIcon = closeButton.querySelector('svg');
+
+    expect(closeIcon).toBeInTheDocument();
+    expect(closeButton).toHaveClass(
+      'text-static-xl',
+      'absolute',
+      'top-2',
+      'right-2',
+      'text-gray-600',
+      'hover:text-black',
+    );
+  });
+
+  it('should clean up event listeners when unmounted', () => {
+    const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener');
+    const onCloseMock = vi.fn();
+
+    const { unmount } = render(
+      <Modal isOpen={true} onClose={onCloseMock}>
+        <div>{MODAL_CONTENT}</div>
+      </Modal>,
+    );
+
+    unmount();
+
+    expect(removeEventListenerSpy).toHaveBeenCalledWith('keydown', expect.any(Function));
+
+    removeEventListenerSpy.mockRestore();
+  });
+
+  it('should have modal content with correct tabIndex', () => {
+    render(
+      <Modal isOpen={true} onClose={vi.fn()}>
+        <div>{MODAL_CONTENT}</div>
+      </Modal>,
+    );
+
+    const modalContent = screen.getByText(MODAL_CONTENT).closest('div[tabIndex="-1"]');
+
+    expect(modalContent).toHaveAttribute('tabIndex', '-1');
+  });
+});