@tpzdsp/next-toolkit 1.1.0 → 1.2.0

package/src/components/divider/RuleDivider.stories.tsx

@@ -0,0 +1,255 @@
+/* eslint-disable storybook/no-renderer-packages */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { RuleDivider } from './RuleDivider';
+
+const meta = {
+  title: 'Components/RuleDivider',
+  component: RuleDivider,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof RuleDivider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-96">
+      <RuleDivider />
+    </div>
+  ),
+};
+
+export const WithText: Story = {
+  render: () => (
+    <div className="w-96">
+      <RuleDivider>OR</RuleDivider>
+    </div>
+  ),
+};
+
+export const WithLongerText: Story = {
+  render: () => (
+    <div className="w-96">
+      <RuleDivider>Continue Reading</RuleDivider>
+    </div>
+  ),
+};
+export const WithIcon: Story = {
+  render: () => (
+    <div className="w-96">
+      <RuleDivider>
+        <svg
+          className="w-4 h-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+        </svg>
+      </RuleDivider>
+    </div>
+  ),
+};
+
+export const WithStyledText: Story = {
+  render: () => (
+    <div className="w-96">
+      <RuleDivider>
+        <span className="text-sm text-gray-500 uppercase tracking-wide">Section Break</span>
+      </RuleDivider>
+    </div>
+  ),
+};
+
+export const WithBoldText: Story = {
+  render: () => (
+    <div className="w-96">
+      <RuleDivider>
+        <strong className="text-gray-700">Important</strong>
+      </RuleDivider>
+    </div>
+  ),
+};
+
+export const WithColoredText: Story = {
+  render: () => (
+    <div className="w-96">
+      <RuleDivider>
+        <span className="text-blue-600 font-medium">New Content</span>
+      </RuleDivider>
+    </div>
+  ),
+};
+
+export const InContainer: Story = {
+  render: () => (
+    <div className="w-96 p-4 border rounded">
+      <p className="mb-4">This is some content above the divider.</p>
+
+      <RuleDivider>
+        <span className="text-gray-500">More below</span>
+      </RuleDivider>
+
+      <p className="mt-4">This is content below the divider.</p>
+    </div>
+  ),
+};
+
+export const FormSeparator: Story = {
+  render: () => (
+    <div className="w-80 p-6 border rounded">
+      <div className="space-y-4">
+        <div>
+          <p className="block text-sm font-medium mb-1">Email</p>
+
+          <input
+            type="email"
+            className="w-full p-2 border border-gray-300 rounded"
+            placeholder="Enter your email"
+          />
+        </div>
+
+        <div>
+          <p className="block text-sm font-medium mb-1">Password</p>
+
+          <input
+            type="password"
+            className="w-full p-2 border border-gray-300 rounded"
+            placeholder="Enter your password"
+          />
+        </div>
+      </div>
+
+      <div className="my-6">
+        <RuleDivider>
+          <span className="text-xs text-gray-400 uppercase">OR</span>
+        </RuleDivider>
+      </div>
+
+      <button className="w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">
+        Continue with Google
+      </button>
+    </div>
+  ),
+};
+
+export const ContentSections: Story = {
+  render: () => (
+    <div className="max-w-2xl p-6 space-y-6">
+      <div>
+        <h2 className="text-xl font-bold mb-2">Introduction</h2>
+
+        <p className="text-gray-600">
+          This is the introduction section with some content that explains the topic.
+        </p>
+      </div>
+
+      <RuleDivider>
+        <span className="text-sm text-gray-500">Chapter 1</span>
+      </RuleDivider>
+
+      <div>
+        <h3 className="text-lg font-semibold mb-2">Getting Started</h3>
+
+        <p className="text-gray-600">
+          Here we dive into the first chapter with detailed explanations and examples.
+        </p>
+      </div>
+
+      <RuleDivider>
+        <span className="text-sm text-gray-500">Chapter 2</span>
+      </RuleDivider>
+
+      <div>
+        <h3 className="text-lg font-semibold mb-2">Advanced Topics</h3>
+
+        <p className="text-gray-600">This section covers more advanced concepts and use cases.</p>
+      </div>
+    </div>
+  ),
+};
+
+export const MultipleInList: Story = {
+  render: () => (
+    <div className="w-80 space-y-4">
+      <RuleDivider />
+
+      <RuleDivider>
+        <span className="text-gray-600">Section A</span>
+      </RuleDivider>
+
+      <RuleDivider>
+        <span className="text-gray-600">Section B</span>
+      </RuleDivider>
+
+      <RuleDivider>
+        <span className="text-gray-600">Section C</span>
+      </RuleDivider>
+
+      <RuleDivider />
+    </div>
+  ),
+};
+
+export const DifferentWidths: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div className="w-32">
+        <div className="text-sm mb-2">Small (w-32)</div>
+
+        <RuleDivider>
+          <span className="text-xs">OR</span>
+        </RuleDivider>
+      </div>
+
+      <div className="w-64">
+        <div className="text-sm mb-2">Medium (w-64)</div>
+
+        <RuleDivider>
+          <span className="text-sm">Continue</span>
+        </RuleDivider>
+      </div>
+
+      <div className="w-96">
+        <div className="text-sm mb-2">Large (w-96)</div>
+
+        <RuleDivider>
+          <span className="text-base">Section Divider</span>
+        </RuleDivider>
+      </div>
+    </div>
+  ),
+};
+
+export const WithButton: Story = {
+  render: () => (
+    <RuleDivider>
+      <button className="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded hover:bg-gray-200">
+        Show More
+      </button>
+    </RuleDivider>
+  ),
+};
+
+export const WithMultipleElements: Story = {
+  render: () => (
+    <RuleDivider>
+      <div className="flex items-center gap-2">
+        <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+          <path
+            fillRule="evenodd"
+            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+            clipRule="evenodd"
+          />
+        </svg>
+
+        <span className="text-sm text-green-600">Completed</span>
+      </div>
+    </RuleDivider>
+  ),
+};

package/src/components/divider/RuleDivider.test.tsx

@@ -0,0 +1,164 @@
+import { RuleDivider } from './RuleDivider';
+import { render, screen } from '../../utils/renderers';
+
+describe('RuleDivider', () => {
+  it('should render with default props', () => {
+    const { container } = render(<RuleDivider />);
+
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it('should render single hr element when no children provided', () => {
+    const { container } = render(<RuleDivider />);
+
+    const hrElements = container.querySelectorAll('hr');
+
+    expect(hrElements).toHaveLength(1);
+  });
+
+  it('should have correct container classes', () => {
+    const { container } = render(<RuleDivider />);
+
+    const containerElement = container.firstChild as HTMLElement;
+
+    expect(containerElement).toHaveClass('flex', 'items-center');
+  });
+
+  it('should render with children', () => {
+    render(<RuleDivider>Divider Text</RuleDivider>);
+
+    expect(screen.getByText('Divider Text')).toBeInTheDocument();
+  });
+
+  it('should render two hr elements when children are provided', () => {
+    const { container } = render(<RuleDivider>With Text</RuleDivider>);
+
+    const hrElements = container.querySelectorAll('hr');
+
+    expect(hrElements).toHaveLength(2);
+  });
+
+  it('should apply correct classes to hr elements', () => {
+    const { container } = render(<RuleDivider />);
+
+    const hrElement = container.querySelector('hr');
+
+    expect(hrElement).toHaveClass('flex-grow');
+  });
+
+  it('should apply correct classes to span when children provided', () => {
+    const { container } = render(<RuleDivider>Test Content</RuleDivider>);
+
+    const spanElement = container.querySelector('span');
+
+    expect(spanElement).toHaveClass('px-2');
+    expect(spanElement).toHaveTextContent('Test Content');
+  });
+
+  it('should render complex children correctly', () => {
+    render(
+      <RuleDivider>
+        <strong>Bold Text</strong>
+      </RuleDivider>,
+    );
+
+    expect(screen.getByText('Bold Text')).toBeInTheDocument();
+    expect(screen.getByText('Bold Text').tagName).toBe('STRONG');
+  });
+
+  it('should handle multiple text nodes as children', () => {
+    render(<RuleDivider>Multiple words here</RuleDivider>);
+
+    expect(screen.getByText('Multiple words here')).toBeInTheDocument();
+  });
+
+  it('should render icon as children', () => {
+    const IconComponent = () => <svg data-testid="test-icon" />;
+
+    render(
+      <RuleDivider>
+        <IconComponent />
+      </RuleDivider>,
+    );
+
+    expect(screen.getByTestId('test-icon')).toBeInTheDocument();
+  });
+
+  it('should have proper structure when children provided', () => {
+    const { container } = render(<RuleDivider>Content</RuleDivider>);
+
+    const containerElement = container.firstChild as HTMLElement;
+
+    expect(containerElement.children).toHaveLength(3); // hr + span + hr
+
+    const [firstHr, span, secondHr] = containerElement.children;
+
+    expect(firstHr.tagName).toBe('HR');
+    expect(span.tagName).toBe('SPAN');
+    expect(secondHr.tagName).toBe('HR');
+  });
+
+  it('should have proper structure when no children provided', () => {
+    const { container } = render(<RuleDivider />);
+
+    const containerElement = container.firstChild as HTMLElement;
+
+    expect(containerElement.children).toHaveLength(1); // only hr
+
+    const hrElement = containerElement.children[0];
+
+    expect(hrElement.tagName).toBe('HR');
+  });
+
+  it('should handle empty string as children', () => {
+    const { container } = render(<RuleDivider>{''}</RuleDivider>);
+
+    // Empty string is falsy, so should behave like no children
+    const hrElements = container.querySelectorAll('hr');
+
+    expect(hrElements).toHaveLength(1);
+
+    const spanElement = container.querySelector('span');
+
+    expect(spanElement).not.toBeInTheDocument();
+  });
+
+  it('should handle null children correctly', () => {
+    const { container } = render(<RuleDivider>{null}</RuleDivider>);
+
+    // null should be considered falsy, so only one hr should render
+    const hrElements = container.querySelectorAll('hr');
+
+    expect(hrElements).toHaveLength(1);
+
+    const spanElement = container.querySelector('span');
+
+    expect(spanElement).not.toBeInTheDocument();
+  });
+
+  it('should handle undefined children correctly', () => {
+    const { container } = render(<RuleDivider>{undefined}</RuleDivider>);
+
+    // undefined should be considered falsy, so only one hr should render
+    const hrElements = container.querySelectorAll('hr');
+
+    expect(hrElements).toHaveLength(1);
+
+    const spanElement = container.querySelector('span');
+
+    expect(spanElement).not.toBeInTheDocument();
+  });
+
+  it('should render multiple child elements', () => {
+    render(
+      <RuleDivider>
+        <span>Text 1</span>
+
+        <span>Text 2</span>
+      </RuleDivider>,
+    );
+
+    expect(screen.getByText('Text 1')).toBeInTheDocument();
+    expect(screen.getByText('Text 2')).toBeInTheDocument();
+  });
+});

package/src/components/divider/RuleDivider.tsx

@@ -0,0 +1,18 @@
+type RuleDividerProps = {
+  children?: React.ReactNode;
+};
+
+export const RuleDivider = ({ children }: RuleDividerProps) => {
+  return (
+    <div className="flex items-center">
+      <hr className="flex-grow" />
+      {children ? (
+        <>
+          <span className="px-2">{children}</span>
+
+          <hr className="flex-grow" />
+        </>
+      ) : null}
+    </div>
+  );
+};

package/src/components/index.ts

@@ -11,6 +11,7 @@ export { OglLogo } from './images/OglLogo';
 export { ExternalLink } from './link/ExternalLink';
 export { Link } from './link/Link';
 export { Paragraph } from './Paragraph/Paragraph';
+export { RuleDivider } from './divider/RuleDivider';
 
 // Export default component types
 export type { ButtonProps } from './Button/Button';
@@ -25,14 +26,20 @@ export type { ParagraphProps } from './Paragraph/Paragraph';
 export type { SlidingPanelProps } from './SlidingPanel/SlidingPanel';
 
 // Client components - these require 'use client' directive
-export { NextLinkWrapper } from './link/NextLinkWrapper';
 export { DropdownMenu } from './dropdown/DropdownMenu';
 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';
 
 // Export client component types
-export type { NextLinkWrapperProps } from './link/NextLinkWrapper';
+export type { AccordionProps } from './accordion/Accordion';
 
 // Export layout components
 export { Header } from './layout/header/Header';
 export { Footer } from './layout/footer/Footer';
+
+// Export Map components
+export * from './map';

package/src/components/layout/header/HeaderAuthClient.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { useEffect, useState } from 'react';
+
 import type { Credentials } from '../../../types';
 import { Link } from '../../link/Link';
 
@@ -9,7 +11,11 @@ type HeaderAuthClientProps = {
 };
 
 export const HeaderAuthClient = ({ hostname, credentials }: HeaderAuthClientProps) => {
-  console.log('HeaderAuthClient: ', { hostname, credentials });
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
 
   return (
     <span
@@ -20,13 +26,15 @@ export const HeaderAuthClient = ({ hostname, credentials }: HeaderAuthClientProp
         <span>Welcome,</span> {credentials ? credentials.user.email : 'Guest'}
       </span>
 
-      <Link
-        href={`${hostname}/${credentials ? 'api/logout' : 'login'}?redirect-uri=${encodeURIComponent(window?.location?.href)}`}
-        className="text-white visited:text-white active:text-black hover:text-white"
-        prefetch={false}
-      >
-        <span className="text-base">{credentials ? 'Logout' : 'Login'}</span>
-      </Link>
+      {isClient && (
+        <Link
+          href={`${hostname}/${credentials ? 'api/logout' : 'login'}?redirect-uri=${encodeURIComponent(window.location.href)}`}
+          className="text-white visited:text-white active:text-black hover:text-white"
+          prefetch={false}
+        >
+          <span className="text-base">{credentials ? 'Logout' : 'Login'}</span>
+        </Link>
+      )}
     </span>
   );
 };

package/src/components/layout/header/HeaderNavClient.tsx

@@ -23,8 +23,8 @@ const InternalNavItem = ({ label, url, icon, ...props }: DropdownMenuItem<NavLin
   </Link>
 );
 
-const NavItem = (props: DropdownMenuItem<NavLink>) => {
-  if (props.isExternal) {
+const NavItem = ({ isExternal, ...props }: DropdownMenuItem<NavLink>) => {
+  if (isExternal) {
     return <ExternalNavItem {...props} />;
   }
 

package/src/components/map/LayerSwitcherControl.ts

@@ -0,0 +1,147 @@
+/* eslint-disable no-restricted-syntax */
+import type { StaticImageData } from 'next/image';
+import { Map } from 'ol';
+import { Control } from 'ol/control';
+import type { Options as ControlOptions } from 'ol/control/Control';
+import BaseLayer from 'ol/layer/Base';
+
+import OpenLayersLogo from './images/openlayers-logo.png';
+
+export class LayerSwitcherControl extends Control {
+  map!: Map;
+  panel!: HTMLElement;
+  isCollapsed = true;
+
+  constructor(layers: BaseLayer[], options?: ControlOptions) {
+    const button = document.createElement('button');
+
+    button.setAttribute('aria-labelledby', 'Button to toggle layer switcher');
+    button.setAttribute('aria-label', 'Button to toggle layer switcher');
+    button.setAttribute('title', 'Basemap switcher');
+    button.className = 'ol-layer-switcher ol-btn';
+
+    const switcherImage = document.createElement('img');
+
+    const openLayersLogoData = OpenLayersLogo as unknown as StaticImageData;
+
+    switcherImage.src = openLayersLogoData.src;
+    switcherImage.setAttribute('alt', 'Openlayers logo');
+    switcherImage.setAttribute('width', '20px');
+    switcherImage.setAttribute('height', '20px');
+    button.appendChild(switcherImage);
+
+    const element = document.createElement('div');
+
+    element.className = 'ol-layer-switcher ol-unselectable ol-control';
+    element.appendChild(button);
+
+    super({
+      element,
+      target: options?.target,
+    });
+
+    this.panel = document.createElement('div');
+    this.panel.className = 'ol-layer-switcher-panel';
+
+    layers.forEach((layer) => {
+      const img = document.createElement('img');
+
+      img.src = layer.get('image') as string;
+      img.setAttribute('title', layer.get('name'));
+
+      const switcherText = document.createElement('div');
+
+      switcherText.textContent = layer.get('name') as string;
+
+      const btn = document.createElement('button');
+
+      btn.appendChild(img);
+      btn.appendChild(switcherText);
+
+      btn.addEventListener(
+        'click',
+        this.selectBasemap.bind(this, layer.get('name') as string),
+        false,
+      );
+
+      this.panel.appendChild(btn);
+    });
+
+    button.addEventListener('click', this.toggleLayerSwitcher.bind(this), false);
+  }
+
+  setMap(map: Map) {
+    super.setMap(map);
+
+    if (map) {
+      // Ensure we only set the initial active layer when the map is assigned
+      map.once('rendercomplete', this.setInitialActiveLayer.bind(this));
+    }
+  }
+
+  toggleLayerSwitcher() {
+    if (this.isCollapsed) {
+      this.element.appendChild(this.panel);
+      requestAnimationFrame(() => {
+        this.panel.classList.add('open'); // Ensure animation works after adding to DOM
+      });
+    } else {
+      this.panel.classList.remove('open');
+      setTimeout(() => {
+        this.element.removeChild(this.panel);
+      }, 300); // Matches CSS transition time to prevent flickering
+    }
+
+    this.isCollapsed = !this.isCollapsed;
+  }
+
+  selectBasemap(layerName: string) {
+    const currentBasemap = this.getMap()
+      ?.getLayers()
+      .getArray()
+      .filter((layer: BaseLayer) => layer.get('basemap') === true)
+      .find((layer: BaseLayer) => layer.getVisible() === true);
+
+    const newBasemap = this.getMap()
+      ?.getLayers()
+      .getArray()
+      .find((layer: BaseLayer) => layer.get('name') === layerName);
+
+    currentBasemap?.setVisible(false);
+    newBasemap?.setVisible(true);
+
+    this.updateActiveButton(layerName); // Update the active button style
+  }
+
+  setInitialActiveLayer() {
+    const map = this.getMap();
+
+    if (!map) {
+      return;
+    }
+
+    const currentBasemap = this.getMap()
+      ?.getLayers()
+      .getArray()
+      .filter((layer: BaseLayer) => layer.get('basemap') === true)
+      .find((layer: BaseLayer) => layer.getVisible() === true);
+
+    if (currentBasemap) {
+      const activeLayerName = currentBasemap.get('name');
+
+      this.updateActiveButton(activeLayerName);
+    }
+  }
+
+  updateActiveButton(layerName: string) {
+    const buttons = this.panel.querySelectorAll('button');
+
+    buttons.forEach((btn: HTMLButtonElement) => {
+      if (btn.textContent?.trim() === layerName) {
+        btn.classList.add('active');
+      } else {
+        btn.classList.remove('active');
+      }
+    });
+  }
+}