@tpzdsp/next-toolkit 1.0.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpzdsp/next-toolkit",
-  "version": "1.0.1",
+  "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/Button/Button.stories.tsx

@@ -14,25 +14,25 @@ export const AllButtons: StoryObj<typeof Button> = {
   render: () => (
     <div className="flex flex-col gap-4">
       <div>
-        <Button type="primary" onClick={action('primary-click')}>
+        <Button variant="primary" onClick={action('primary-click')}>
           Primary
         </Button>
       </div>
 
       <div>
-        <Button type="secondary" onClick={action('secondary-click')}>
+        <Button variant="secondary" onClick={action('secondary-click')}>
           Secondary
         </Button>
       </div>
 
       <div className="p-4 bg-brand">
-        <Button type="inverse" onClick={action('inverse-click')}>
+        <Button variant="inverse" onClick={action('inverse-click')}>
           Inverse
         </Button>
       </div>
 
       <div>
-        <Button type="primary" disabled>
+        <Button variant="primary" disabled>
           Disabled Button
         </Button>
       </div>

package/src/components/Heading/Heading.tsx

@@ -1,21 +1,48 @@
+import { twMerge } from 'tailwind-merge';
+
 export type HeadingProps = {
   type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  className?: string;
   children: React.ReactNode;
 };
 
-export const Heading = ({ type, children }: HeadingProps) => {
+export const Heading = ({ type, className, children }: HeadingProps) => {
   switch (type) {
     case 'h1':
-      return <h1 className="py-4 text-4xl font-bold text-text-primary">{children}</h1>;
+      return (
+        <h1 className={twMerge('py-4 text-4xl font-bold text-text-primary', className)}>
+          {children}
+        </h1>
+      );
     case 'h2':
-      return <h2 className="py-3 text-3xl font-bold text-text-primary">{children}</h2>;
+      return (
+        <h2 className={twMerge('py-3 text-3xl font-bold text-text-primary', className)}>
+          {children}
+        </h2>
+      );
     case 'h3':
-      return <h3 className="py-3 text-xl font-bold text-text-primary">{children}</h3>;
+      return (
+        <h3 className={twMerge('py-3 text-xl font-bold text-text-primary', className)}>
+          {children}
+        </h3>
+      );
     case 'h4':
-      return <h4 className="py-3 text-lg font-bold text-text-primary">{children}</h4>;
+      return (
+        <h4 className={twMerge('py-3 text-lg font-bold text-text-primary', className)}>
+          {children}
+        </h4>
+      );
     case 'h5':
-      return <h5 className="py-2 text-base font-bold text-text-primary">{children}</h5>;
+      return (
+        <h5 className={twMerge('py-2 text-base font-bold text-text-primary', className)}>
+          {children}
+        </h5>
+      );
     case 'h6':
-      return <h6 className="py-2 text-sm font-bold text-text-primary">{children}</h6>;
+      return (
+        <h6 className={twMerge('py-2 text-sm font-bold text-text-primary', className)}>
+          {children}
+        </h6>
+      );
   }
 };

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>
+    );
+  },
+};