@tpzdsp/next-toolkit 1.1.0 → 1.2.1

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,13 +26,16 @@ 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';

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

@@ -4,7 +4,8 @@ import { FaHouse } from 'react-icons/fa6';
 
 import { HeaderAuthClient } from './HeaderAuthClient';
 import { HeaderNavClient } from './HeaderNavClient';
-import type { Credentials, NavLink } from '../../../types';
+import type { Credentials } from '../../../types/auth';
+import type { NavLink } from '../../../types/navigation';
 import { DefraLogo } from '../../images/DefraLogo';
 import { EaLogo } from '../../images/EaLogo';
 import { ExternalLink } from '../../link/ExternalLink';

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

@@ -1,6 +1,8 @@
 'use client';
 
-import type { Credentials } from '../../../types';
+import { useEffect, useState } from 'react';
+
+import type { Credentials } from '../../../types/auth';
 import { Link } from '../../link/Link';
 
 type HeaderAuthClientProps = {
@@ -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

@@ -1,6 +1,6 @@
 'use client';
 
-import type { NavLink } from '../../../types';
+import type { NavLink } from '../../../types/navigation';
 import { DropdownMenu, type DropdownMenuItem } from '../../dropdown/DropdownMenu';
 import { ExternalLink } from '../../link/ExternalLink';
 import { Link } from '../../link/Link';
@@ -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/link/ExternalLink.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 
 import { twMerge } from 'tailwind-merge';
 
-import type { ExtendProps } from '../../types';
+import type { ExtendProps } from '../../types/utils';
 
 type Props = {
   children: ReactNode;

package/src/components/link/Link.tsx

@@ -1,7 +1,7 @@
 import NextLink from 'next/link';
 import { twMerge } from 'tailwind-merge';
 
-import type { ExtendProps } from '../../types';
+import type { ExtendProps } from '../../types/utils';
 
 type Props = {
   href: string | object;

package/src/components/select/Select.stories.tsx

@@ -0,0 +1,336 @@
+/* eslint-disable storybook/no-renderer-packages */
+import { useEffect, useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { Select } from './Select';
+
+const meta = {
+  title: 'Components/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    onChange: fn(),
+  },
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const OPTIONS = [
+  { value: 'chocolate', label: 'Chocolate' },
+  { value: 'strawberry', label: 'Strawberry' },
+  { value: 'vanilla', label: 'Vanilla' },
+  { value: 'mint', label: 'Mint' },
+  { value: 'cookies', label: 'Cookies & Cream' },
+];
+
+const GROUPED_OPTIONS = [
+  {
+    label: 'Fruits',
+    options: [
+      { value: 'apple', label: 'Apple' },
+      { value: 'banana', label: 'Banana' },
+      { value: 'orange', label: 'Orange' },
+    ],
+  },
+  {
+    label: 'Vegetables',
+    options: [
+      { value: 'carrot', label: 'Carrot' },
+      { value: 'broccoli', label: 'Broccoli' },
+      { value: 'spinach', label: 'Spinach' },
+    ],
+  },
+];
+
+const USERS = [
+  { value: 'john', label: 'John Doe', email: 'john@example.com' },
+  { value: 'jane', label: 'Jane Smith', email: 'jane@example.com' },
+  { value: 'bob', label: 'Bob Johnson', email: 'bob@example.com' },
+];
+
+const FLAVOUR_PLACEHOLDER_TEXT = 'Select a flavour...';
+const FLAVOUR_MULTI_PLACEHOLDER_TEXT = 'Select multiple flavours...';
+
+export const Default: Story = {
+  args: {
+    options: OPTIONS,
+    placeholder: FLAVOUR_PLACEHOLDER_TEXT,
+  },
+};
+
+export const WithDefaultValue: Story = {
+  args: {
+    options: OPTIONS,
+    defaultValue: OPTIONS[0],
+    placeholder: FLAVOUR_PLACEHOLDER_TEXT,
+  },
+};
+
+export const Clearable: Story = {
+  args: {
+    options: OPTIONS,
+    defaultValue: OPTIONS[1],
+    isClearable: true,
+    placeholder: FLAVOUR_PLACEHOLDER_TEXT,
+  },
+};
+
+export const Searchable: Story = {
+  args: {
+    options: OPTIONS,
+    isSearchable: true,
+    placeholder: 'Search and select...',
+  },
+};
+
+export const MultiSelect: Story = {
+  args: {
+    options: OPTIONS,
+    isMulti: true,
+    placeholder: FLAVOUR_MULTI_PLACEHOLDER_TEXT,
+  },
+};
+
+export const MultiSelectWithValues: Story = {
+  args: {
+    options: OPTIONS,
+    isMulti: true,
+    defaultValue: [OPTIONS[0], OPTIONS[2]],
+    placeholder: FLAVOUR_MULTI_PLACEHOLDER_TEXT,
+  },
+};
+
+export const MultiSelectClearable: Story = {
+  args: {
+    options: OPTIONS,
+    isMulti: true,
+    isClearable: true,
+    defaultValue: [OPTIONS[0], OPTIONS[1]],
+    placeholder: FLAVOUR_MULTI_PLACEHOLDER_TEXT,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    options: OPTIONS,
+    isDisabled: true,
+    defaultValue: OPTIONS[0],
+    placeholder: 'This select is disabled',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    options: OPTIONS,
+    isLoading: true,
+    placeholder: 'Loading...',
+  },
+};
+
+export const GroupedOptions: Story = {
+  args: {
+    options: GROUPED_OPTIONS,
+    placeholder: 'Select a food item...',
+  },
+};
+
+export const NoOptionsMessage: Story = {
+  args: {
+    options: [],
+    placeholder: 'No options available',
+    noOptionsMessage: () => 'No options found',
+  },
+};
+
+export const CustomFormatOptionLabel: Story = {
+  args: {
+    options: USERS,
+    placeholder: 'Select a user...',
+    formatOptionLabel: (data: unknown) => {
+      const option = data as { value: string; label: string; email: string };
+
+      return (
+        <div>
+          <div className="font-medium">{option.label}</div>
+
+          <div className="text-sm text-gray-500">{option.email}</div>
+        </div>
+      );
+    },
+  },
+};
+
+export const CustomClassNames: Story = {
+  args: {
+    options: OPTIONS,
+    placeholder: 'Custom styled select...',
+    classNames: {
+      control: () => 'border-2 border-purple-500 rounded-lg',
+      option: (state) =>
+        // eslint-disable-next-line sonarjs/no-nested-conditional
+        state.isSelected ? 'bg-purple-500 text-white' : state.isFocused ? 'bg-purple-100' : '',
+      menu: () => 'border-purple-500',
+    },
+  },
+};
+
+export const SmallSize: Story = {
+  args: {
+    options: OPTIONS,
+    placeholder: 'Small select...',
+    classNames: {
+      control: () => 'min-h-8 text-sm',
+      option: () => 'px-2 py-1 text-sm',
+    },
+  },
+};
+
+export const LargeSize: Story = {
+  args: {
+    options: OPTIONS,
+    placeholder: 'Large select...',
+    classNames: {
+      control: () => 'min-h-12 text-lg',
+      option: () => 'px-6 py-3 text-lg',
+    },
+  },
+};
+
+export const ControlledComponent: Story = {
+  render: () => {
+    const [value, setValue] = useState<{ value: string; label: string } | null>(OPTIONS[0]);
+
+    return (
+      <div className="space-y-4">
+        <Select
+          options={OPTIONS}
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          placeholder="Controlled select..."
+        />
+
+        <div className="text-sm text-gray-600">Selected: {value ? value.label : 'None'}</div>
+
+        <button
+          onClick={() => setValue(OPTIONS[2])}
+          className="px-3 py-1 bg-blue-500 text-white rounded text-sm"
+        >
+          Set to Vanilla
+        </button>
+      </div>
+    );
+  },
+};
+export const WithLongOptions: Story = {
+  args: {
+    options: [
+      { value: 'short', label: 'Short' },
+      {
+        value: 'long',
+        label: 'This is a very long option that might overflow and needs to be handled properly',
+      },
+      {
+        value: 'medium',
+        label: 'Medium length option text',
+      },
+    ],
+    placeholder: 'Select an option...',
+  },
+};
+
+export const Async: Story = {
+  render: () => {
+    const [options, setOptions] = useState<{ value: string; label: string }[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const loadOptions = () => {
+      setIsLoading(true);
+      // Simulate API call
+      setTimeout(() => {
+        setOptions([
+          { value: 'async1', label: 'Async Option 1' },
+          { value: 'async2', label: 'Async Option 2' },
+          { value: 'async3', label: 'Async Option 3' },
+        ]);
+        setIsLoading(false);
+      }, 1000);
+    };
+
+    useEffect(() => {
+      loadOptions();
+    }, []);
+
+    return (
+      <div className="space-y-4">
+        <Select options={options} isLoading={isLoading} placeholder="Loading async options..." />
+
+        <button onClick={loadOptions} className="px-3 py-1 bg-green-500 text-white rounded text-sm">
+          Reload Options
+        </button>
+      </div>
+    );
+  },
+};
+
+export const FormIntegration: Story = {
+  render: () => {
+    const [formData, setFormData] = useState<{
+      flavour: { value: string; label: string } | null;
+      toppings: { value: string; label: string }[];
+    }>({
+      flavour: null,
+      toppings: [],
+    });
+
+    return (
+      <form className="space-y-4 p-4 border rounded">
+        <div>
+          <label htmlFor="flavour" className="block text-sm font-medium mb-1">
+            Flavour
+          </label>
+
+          <Select
+            id="flavour"
+            options={OPTIONS}
+            value={formData.flavour}
+            onChange={(value) => setFormData({ ...formData, flavour: value })}
+            placeholder="Select a flavour..."
+            isClearable
+          />
+        </div>
+
+        <div>
+          <label htmlFor="toppings" className="block text-sm font-medium mb-1">
+            Toppings
+          </label>
+
+          <Select
+            id="toppings"
+            options={[
+              { value: 'sprinkles', label: 'Sprinkles' },
+              { value: 'nuts', label: 'Nuts' },
+              { value: 'chocolate-chips', label: 'Chocolate Chips' },
+              { value: 'cherry', label: 'Cherry' },
+            ]}
+            value={formData.toppings}
+            onChange={(value) =>
+              setFormData({ ...formData, toppings: Array.isArray(value) ? [...value] : [] })
+            }
+            placeholder="Select toppings..."
+            isMulti
+          />
+        </div>
+
+        <div className="text-sm text-gray-600">
+          <pre>{JSON.stringify(formData, null, 2)}</pre>
+        </div>
+      </form>
+    );
+  },
+};