@tpzdsp/next-toolkit 1.14.3 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpzdsp/next-toolkit",
-  "version": "1.14.3",
+  "version": "1.15.0",
   "description": "A reusable React component library for Next.js applications",
   "engines": {
     "node": ">= 24.12.0",
@@ -119,6 +119,7 @@
     "preview": "vite preview",
     "dev:publish": "yalc publish",
     "dev:push": "yalc push",
+    "tsc:check": "tsc -b --noEmit",
     "storybook": "storybook dev -p 6006",
     "release": "semantic-release"
   },

package/src/assets/styles/globals.css

@@ -45,7 +45,7 @@
 /* Component-specific styles */
 @layer components {
   .focus-yellow {
-    @apply focus:border-[#ffbf47] focus:outline focus:outline-[3px] focus:outline-[#ffbf47];
+    @apply focus:border-focus focus:outline focus:outline-2 focus:outline-focus;
   }
 
   .library-button {
@@ -83,6 +83,10 @@
       top: calc(calc(var(--border) + var(--shadow)) * -1);
     }
   }
+
+  .input-height {
+    @apply h-[38px];
+  }
 }
 
 /* Utilities */

package/src/components/ErrorBoundary/ErrorBoundary.stories.tsx

@@ -14,7 +14,7 @@ const CustomFallback = ({ error, resetErrorBoundary }: FallbackProps) => (
   <div role="alert" className="p-4 border border-red-300 rounded-lg bg-red-50">
     <p className="font-medium text-red-700">Custom Fallback:</p>
 
-    <p className="text-red-600">{error.message}</p>
+    <p className="text-red-600">{error instanceof Error ? error.message : 'Unknown'}</p>
 
     <button
       className="px-3 py-1 mt-2 text-white bg-red-600 rounded hover:bg-red-700"

package/src/components/ErrorBoundary/ErrorBoundary.test.tsx

@@ -12,7 +12,7 @@ const Bomb = () => {
 // Custom fallback with button for reset
 const CustomFallback = ({ error, resetErrorBoundary }: FallbackProps) => (
   <div role="alert">
-    <p>Custom fallback: {error.message}</p>
+    <p>Custom fallback: {error instanceof Error ? error.message : 'Unknown'}</p>
 
     <button onClick={resetErrorBoundary}>Try again</button>
   </div>

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -12,7 +12,7 @@ type ErrorBoundaryProps = {
 
 export const ErrorBoundary = ({ children, fallback, onReset }: ErrorBoundaryProps) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const logError = (error: unknown, info: ErrorInfo) => {
+  const logError = (_error: unknown, _info: ErrorInfo) => {
     // send error to third party api, etc
   };
 

package/src/components/InfoBox/InfoBox.tsx

@@ -98,8 +98,8 @@ export const InfoBox = ({
   const iconClasses = cn(
     // Icon size
     'w-5 h-5',
-    // Icon color - yellow when open, black when closed
-    isOpen ? 'text-focus' : 'text-black',
+    // Icon color - yellow when open, auto when closed
+    isOpen ? 'text-focus' : '',
     // Hover state - yellow
     'hover:text-focus',
     // Focus state - yellow

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

@@ -93,9 +93,9 @@ describe('RuleDivider', () => {
 
     const [firstHr, span, secondHr] = containerElement.children;
 
-    expect(firstHr.tagName).toBe('HR');
-    expect(span.tagName).toBe('SPAN');
-    expect(secondHr.tagName).toBe('HR');
+    expect(firstHr?.tagName).toBe('HR');
+    expect(span?.tagName).toBe('SPAN');
+    expect(secondHr?.tagName).toBe('HR');
   });
 
   it('should have proper structure when no children provided', () => {
@@ -107,7 +107,7 @@ describe('RuleDivider', () => {
 
     const hrElement = containerElement.children[0];
 
-    expect(hrElement.tagName).toBe('HR');
+    expect(hrElement?.tagName).toBe('HR');
   });
 
   it('should handle empty string as children', () => {

package/src/components/form/Input.test.tsx

@@ -1,7 +1,6 @@
 import { Input } from './Input';
 import { render, screen } from '../../test/renderers';
 
-const ROUNDED_MD = 'rounded-md';
 const BORDER_ERROR = 'border-error';
 
 describe('Input', () => {
@@ -19,13 +18,7 @@ describe('Input', () => {
 
       const input = screen.getByRole('textbox');
 
-      expect(input).toHaveClass(
-        ROUNDED_MD,
-        'border',
-        'p-1',
-        'disabled:opacity-60',
-        'disabled:bg-gray-100',
-      );
+      expect(input).toHaveClass('border', 'p-1', 'disabled:opacity-60', 'disabled:bg-gray-100');
     });
 
     it('applies error styling when hasError is true', () => {
@@ -57,7 +50,7 @@ describe('Input', () => {
 
       const input = screen.getByRole('textbox');
 
-      expect(input).toHaveClass(ROUNDED_MD, 'border', 'p-1', 'custom-class');
+      expect(input).toHaveClass('border', 'p-1', 'custom-class');
     });
 
     it('allows custom className to override default classes', () => {
@@ -105,7 +98,7 @@ describe('Input', () => {
 
       const input = screen.getByRole('textbox');
 
-      expect(input).toHaveClass(BORDER_ERROR, 'w-full', ROUNDED_MD, 'border', 'p-1');
+      expect(input).toHaveClass(BORDER_ERROR, 'w-full', 'border', 'p-1');
     });
 
     it('handles different input types', () => {
@@ -174,7 +167,6 @@ describe('Input', () => {
 
       // Custom classes should override defaults due to twMerge
       expect(input).toHaveClass('border-green-500', 'p-4');
-      expect(input).toHaveClass(ROUNDED_MD); // Default class preserved
       expect(input).toHaveClass('border'); // Base border class is still present
       expect(input).not.toHaveClass('p-1'); // Overridden by p-4
       expect(input).not.toHaveClass(BORDER_ERROR); // Overridden by border-green-500

package/src/components/form/Input.tsx

@@ -14,8 +14,8 @@ export const Input = ({ hasError, className, ...props }: InputProps) => {
     <input
       {...props}
       className={cn(
-        'rounded-md border p-1 disabled:opacity-60 disabled:bg-gray-100',
-        hasError ? 'border-error' : '',
+        'border p-1 disabled:opacity-60 disabled:bg-gray-100 input-height focus-yellow',
+        hasError ? 'border-error' : 'border-black',
         className,
       )}
     />

package/src/components/form/TextArea.test.tsx

@@ -3,7 +3,6 @@ import { render, screen } from '@testing-library/react';
 import { TextArea } from './TextArea';
 
 // Constants for repeated class names
-const ROUNDED_MD = 'rounded-md';
 const BORDER = 'border';
 const P_1 = 'p-1';
 const DISABLED_OPACITY = 'disabled:opacity-60';
@@ -26,7 +25,7 @@ describe('TextArea', () => {
 
       const textarea = screen.getByRole('textbox');
 
-      expect(textarea).toHaveClass(ROUNDED_MD, BORDER, P_1, DISABLED_OPACITY, DISABLED_BG);
+      expect(textarea).toHaveClass(BORDER, P_1, DISABLED_OPACITY, DISABLED_BG);
     });
 
     it('applies error styling when hasError is true', () => {
@@ -58,7 +57,7 @@ describe('TextArea', () => {
 
       const textarea = screen.getByRole('textbox');
 
-      expect(textarea).toHaveClass(ROUNDED_MD, BORDER, P_1, 'custom-class');
+      expect(textarea).toHaveClass(BORDER, P_1, 'custom-class');
     });
 
     it('allows custom className to override default classes', () => {
@@ -109,7 +108,7 @@ describe('TextArea', () => {
 
       const textarea = screen.getByRole('textbox');
 
-      expect(textarea).toHaveClass(BORDER_ERROR, 'w-full', ROUNDED_MD, BORDER, P_1);
+      expect(textarea).toHaveClass(BORDER_ERROR, 'w-full', BORDER, P_1);
     });
 
     it('supports required attribute', () => {
@@ -143,7 +142,6 @@ describe('TextArea', () => {
 
       // Custom classes should override defaults due to twMerge
       expect(textarea).toHaveClass('border-green-500', 'p-4');
-      expect(textarea).toHaveClass(ROUNDED_MD); // Default class preserved
       expect(textarea).toHaveClass(BORDER); // Base border class is still present
       expect(textarea).not.toHaveClass(P_1); // Overridden by p-4
       expect(textarea).not.toHaveClass(BORDER_ERROR); // Overridden by border-green-500

package/src/components/form/TextArea.tsx

@@ -14,8 +14,8 @@ export const TextArea = ({ hasError, className, ...props }: TextAreaProps) => {
     <textarea
       {...props}
       className={cn(
-        'rounded-md border p-1 disabled:opacity-60 disabled:bg-gray-100',
-        hasError ? 'border-error' : '',
+        'border p-1 disabled:opacity-60 disabled:bg-gray-100',
+        hasError ? 'border-error' : 'border-black',
         className,
       )}
     />

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

@@ -5,9 +5,9 @@ import type { Credentials } from '../../../types/auth';
 import type { NavLink } from '../../../types/navigation';
 
 const navLinks: NavLink[] = [
-  { label: 'Home', url: '/', isExternal: false },
-  { label: 'API', url: '/api-docs', isExternal: false },
-  { label: 'Support', url: 'https://example.com/support', isExternal: true },
+  { label: 'Home', url: '/', openInNewTab: false },
+  { label: 'API', url: '/api-docs', openInNewTab: false },
+  { label: 'Support', url: 'https://example.com/support', openInNewTab: true },
 ];
 
 const authenticatedCredentials: Credentials = {

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

@@ -3,9 +3,9 @@ import { render, screen } from '../../../test/renderers';
 import type { NavLink } from '../../../types/navigation';
 
 const NAV_LINKS: NavLink[] = [
-  { label: 'Home', url: '/', isExternal: false },
-  { label: 'API', url: '/api-docs', isExternal: false },
-  { label: 'Support', url: 'https://example.com/support', isExternal: true },
+  { label: 'Home', url: '/', openInNewTab: false },
+  { label: 'API', url: '/api-docs', openInNewTab: false },
+  { label: 'Support', url: 'https://example.com/support', openInNewTab: true },
 ];
 
 describe('Header', () => {

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

@@ -3,9 +3,9 @@ import { render, screen, userEvent } from '../../../test/renderers';
 import type { NavLink } from '../../../types/navigation';
 
 const NAV_LINKS: NavLink[] = [
-  { label: 'Home', url: '/', isExternal: false },
-  { label: 'API', url: '/api-docs', isExternal: false },
-  { label: 'Support', url: 'https://example.com/support', isExternal: true },
+  { label: 'Home', url: '/', openInNewTab: false },
+  { label: 'API', url: '/api-docs', openInNewTab: false },
+  { label: 'Support', url: 'https://example.com/support', openInNewTab: true },
 ];
 
 describe('HeaderNavClient', () => {

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

@@ -27,7 +27,7 @@ const OPTIONS = [
   { value: 'vanilla', label: 'Vanilla' },
   { value: 'mint', label: 'Mint' },
   { value: 'cookies', label: 'Cookies & Cream' },
-];
+] as const;
 
 const GROUPED_OPTIONS = [
   {
@@ -46,16 +46,16 @@ const GROUPED_OPTIONS = [
       { value: 'spinach', label: 'Spinach' },
     ],
   },
-];
+] as const;
 
 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' },
-];
+] as const;
 
-const FLAVOUR_PLACEHOLDER_TEXT = 'Select a flavour...';
-const FLAVOUR_MULTI_PLACEHOLDER_TEXT = 'Select multiple flavours...';
+const FLAVOUR_PLACEHOLDER_TEXT = 'Select a flavour...' as const;
+const FLAVOUR_MULTI_PLACEHOLDER_TEXT = 'Select multiple flavours...' as const;
 
 export const Default: Story = {
   args: {

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

@@ -346,11 +346,11 @@ describe('Select', () => {
 
     // Check which option was actually selected
     const selectedCall = onChangeMock.mock.calls[0];
-    const selectedOption = selectedCall[0];
+    const selectedOption = selectedCall?.[0];
 
     // Verify the selected option is displayed
     await waitFor(() => {
-      expect(screen.getByText(selectedOption.label)).toBeInTheDocument();
+      expect(screen.getByText(selectedOption?.label)).toBeInTheDocument();
     });
   });
 

package/src/components/select/Select.tsx

@@ -13,7 +13,7 @@ import type {
 } from 'react-select';
 import { components, default as ReactSelect } from 'react-select';
 
-import { SELECT_CONTAINER_CLASSES, SELECT_CONTROL_CLASSES, SELECT_MIN_HEIGHT } from './common';
+import { SELECT_CONTAINER_CLASSES, SELECT_CONTROL_CLASSES } from './common';
 import { cn } from '../../utils';
 
 // extends the react-select props with some of our own
@@ -30,7 +30,6 @@ const getClassNames = <Option, IsMulti extends boolean, Group extends GroupBase<
     control: (props) =>
       cn(
         SELECT_CONTROL_CLASSES,
-        SELECT_MIN_HEIGHT,
         props.isDisabled ? '!cursor-not-allowed bg-gray-100' : 'bg-white',
         props.isFocused
           ? 'shadow-[0px_0px_0px_theme(borderWidth.form)_theme(colors.focus)] border-focus'
@@ -41,7 +40,7 @@ const getClassNames = <Option, IsMulti extends boolean, Group extends GroupBase<
     placeholder: (props) => cn('text-text-secondary', userClassNames?.placeholder?.(props)),
     menu: (props) =>
       cn(
-        'bg-white rounded-md border  mt-1 overflow-hidden shadow-sm shadow-[0px_0px_6px_0px_#00000044]',
+        'bg-white border border-black mt-1 overflow-hidden shadow-sm shadow-[0px_0px_6px_0px_#00000044]',
         userClassNames?.menu?.(props),
       ),
     menuList: (props) => cn('flex flex-col', userClassNames?.menuList?.(props)),
@@ -64,7 +63,7 @@ const getClassNames = <Option, IsMulti extends boolean, Group extends GroupBase<
       ),
     multiValue: (props) =>
       cn(
-        'flex gap-2 items-center justify-center px-2 bg-brand text-white rounded-md m-[2px]',
+        'flex gap-2 items-center justify-center px-2 bg-brand text-white m-[2px]',
         userClassNames?.multiValue?.(props),
       ),
     multiValueRemove: (props) => cn('w-3 h-3', userClassNames?.multiValueRemove?.(props)),

package/src/components/select/SelectSkeleton.test.tsx

@@ -27,7 +27,6 @@ describe('SelectSkeleton', () => {
       'h-full',
       'bg-gray-100',
       'animate-pulse',
-      'rounded-md',
       'col-span-2',
     );
   });
@@ -70,7 +69,7 @@ describe('SelectSkeleton', () => {
     expect(containerElement.tagName).toBe('DIV');
   });
 
-  it('should apply SELECT_CONTROL_CLASSES and SELECT_MIN_HEIGHT to control element', () => {
+  it('should apply SELECT_CONTROL_CLASSES to control element', () => {
     const { container } = render(<SelectSkeleton />);
 
     const controlElement = container.firstChild?.firstChild as HTMLElement;

package/src/components/select/SelectSkeleton.tsx

@@ -1,4 +1,4 @@
-import { SELECT_CONTAINER_CLASSES, SELECT_CONTROL_CLASSES, SELECT_MIN_HEIGHT } from './common';
+import { SELECT_CONTAINER_CLASSES, SELECT_CONTROL_CLASSES } from './common';
 import type { ExtendProps } from '../../types';
 import { cn } from '../../utils';
 
@@ -12,9 +12,9 @@ export type SelectSkeletonProps = ExtendProps<'div', Props>;
 export const SelectSkeleton = ({ className, ...props }: SelectSkeletonProps = {}) => {
   return (
     <div className={cn(SELECT_CONTAINER_CLASSES, className)} {...props}>
-      <div className={cn(SELECT_CONTROL_CLASSES, SELECT_MIN_HEIGHT)}>
+      <div className={cn(SELECT_CONTROL_CLASSES, 'p-2')}>
         <div
-          className="w-full h-full bg-gray-100 animate-pulse rounded-md col-span-2"
+          className="w-full h-full bg-gray-100 animate-pulse col-span-2"
           aria-label="Loading options"
         ></div>
       </div>

package/src/components/select/common.ts

@@ -1,4 +1,3 @@
-export const SELECT_MIN_HEIGHT = '!min-h-[38px]';
-export const SELECT_CONTAINER_CLASSES = 'w-full h-max select-none !pointer-events-auto';
+export const SELECT_CONTAINER_CLASSES = 'w-full select-none !pointer-events-auto input-height';
 export const SELECT_CONTROL_CLASSES =
-  'px-2 py-2 !grid gap-4 grid-cols-[1fr_min-content] w-full border h-full rounded-md';
+  'p-1 !grid gap-4 grid-cols-[1fr_min-content] w-full border input-height border-black';

package/src/http/constants.ts

@@ -12,6 +12,7 @@ export const MimeType = {
   MultipartForm: 'multipart/form-data',
   Text: 'text/plain',
   NTriples: 'application/n-triples',
+  OctetStream: 'application/octet-stream',
 } as const;
 
 /**