@regardio/react 0.5.7 → 0.7.0

package/src/generic-error/generic-error.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import type { ReactElement } from 'react';
 import { isRouteErrorResponse, useRouteError } from 'react-router';
 
 /**
@@ -73,8 +72,8 @@ export function getErrorDescriptor(error: unknown): ErrorDescriptor {
 export function GenericError({
   renderMessage,
 }: {
-  renderMessage?: (descriptor: ErrorDescriptor) => ReactElement;
-} = {}): ReactElement {
+  renderMessage?: (descriptor: ErrorDescriptor) => React.JSX.Element;
+} = {}): React.JSX.Element {
   const error = useRouteError();
   const descriptor = getErrorDescriptor(error);
 

package/src/grid/grid-item.tsx

@@ -1,5 +1,40 @@
-import { tv, type VariantProps } from '@regardio/tailwind/utils';
-import { forwardRef, type HTMLAttributes } from 'react';
+import { tv } from '@regardio/tailwind/utils';
+import type { HTMLAttributes } from 'react';
+
+const GRID_ITEM_VARIANTS = {
+  end: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 'auto'] as const,
+  rowSpan: [1, 2, 3, 4, 5, 6, 'full'] as const,
+  span: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'full'] as const,
+  spanLg: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'full'] as const,
+  spanMd: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'full'] as const,
+  spanSm: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'full'] as const,
+  spanXl: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'full'] as const,
+  spanXs: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'full'] as const,
+  start: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 'auto'] as const,
+} as const;
+
+interface GridItemVariantProps {
+  end?: (typeof GRID_ITEM_VARIANTS.end)[number];
+  rowSpan?: (typeof GRID_ITEM_VARIANTS.rowSpan)[number];
+  span?: (typeof GRID_ITEM_VARIANTS.span)[number];
+  spanLg?: (typeof GRID_ITEM_VARIANTS.spanLg)[number];
+  spanMd?: (typeof GRID_ITEM_VARIANTS.spanMd)[number];
+  spanSm?: (typeof GRID_ITEM_VARIANTS.spanSm)[number];
+  spanXl?: (typeof GRID_ITEM_VARIANTS.spanXl)[number];
+  spanXs?: (typeof GRID_ITEM_VARIANTS.spanXs)[number];
+  start?: (typeof GRID_ITEM_VARIANTS.start)[number];
+}
+
+interface GridItemSlotProps {
+  class?: string;
+  className?: string;
+}
+
+interface GridItemSlots {
+  root: (props?: GridItemSlotProps) => string;
+}
+
+type GridItemStyleFn = (props?: GridItemVariantProps) => GridItemSlots;
 
 const gridItem = tv({
   defaultVariants: {
@@ -141,48 +176,54 @@ const gridItem = tv({
       auto: { root: 'col-start-auto' },
     },
   },
-});
+}) as GridItemStyleFn;
 
-export type GridItemVariants = VariantProps<typeof gridItem>;
+export type GridItemVariants = GridItemVariantProps;
 
 export interface GridItemProps extends HTMLAttributes<HTMLDivElement>, GridItemVariants {
   classNames?: {
     root?: string;
   };
+  ref?: React.Ref<HTMLDivElement>;
 }
 
-export const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
-  (
-    {
-      children,
-      className,
-      classNames,
-      span,
-      spanXs,
-      spanSm,
-      spanMd,
-      spanLg,
-      spanXl,
-      start,
-      end,
-      rowSpan,
-      ...props
-    },
-    ref,
-  ) => {
-    const styles = gridItem({ end, rowSpan, span, spanLg, spanMd, spanSm, spanXl, spanXs, start });
+export const GridItem = function GridItem({
+  children,
+  className,
+  classNames,
+  span,
+  spanXs,
+  spanSm,
+  spanMd,
+  spanLg,
+  spanXl,
+  start,
+  end,
+  rowSpan,
+  ref,
+  ...props
+}: GridItemProps): React.JSX.Element {
+  const styles = gridItem({
+    end,
+    rowSpan,
+    span,
+    spanLg,
+    spanMd,
+    spanSm,
+    spanXl,
+    spanXs,
+    start,
+  });
 
-    return (
-      <div
-        className={styles.root({ className: classNames?.root ?? className })}
-        ref={ref}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-GridItem.displayName = 'GridItem';
+  return (
+    <div
+      className={styles.root({ className: classNames?.root ?? className })}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
 
 export { gridItem };

package/src/grid/grid-root.tsx

@@ -1,5 +1,26 @@
-import { tv, type VariantProps } from '@regardio/tailwind/utils';
-import { createContext, forwardRef, type HTMLAttributes, useContext } from 'react';
+import { tv } from '@regardio/tailwind/utils';
+import { createContext, type HTMLAttributes, useContext } from 'react';
+
+const GRID_VARIANTS = {
+  align: ['center', 'end', 'start', 'stretch'] as const,
+  flow: ['column', 'dense', 'row'] as const,
+} as const;
+
+interface GridVariantProps {
+  align?: (typeof GRID_VARIANTS.align)[number];
+  flow?: (typeof GRID_VARIANTS.flow)[number];
+}
+
+interface GridSlotProps {
+  class?: string;
+  className?: string;
+}
+
+interface GridSlots {
+  root: (props?: GridSlotProps) => string;
+}
+
+type GridStyleFn = (props?: GridVariantProps) => GridSlots;
 
 const grid = tv({
   defaultVariants: {
@@ -28,9 +49,9 @@ const grid = tv({
       row: { root: 'grid-auto-flow-row' },
     },
   },
-});
+}) as GridStyleFn;
 
-type GridVariants = VariantProps<typeof grid>;
+type GridVariants = GridVariantProps;
 
 interface GridContextValue {
   styles: ReturnType<typeof grid>;
@@ -38,7 +59,7 @@ interface GridContextValue {
 
 const GridContext = createContext<GridContextValue | null>(null);
 
-export function useGrid() {
+export function useGrid(): GridContextValue {
   const context = useContext(GridContext);
   if (!context) {
     throw new Error('useGrid must be used within a <Grid.Root />');
@@ -50,23 +71,29 @@ export interface GridRootProps extends HTMLAttributes<HTMLDivElement>, GridVaria
   classNames?: {
     root?: string;
   };
+  ref?: React.Ref<HTMLDivElement>;
 }
 
-export const GridRoot = forwardRef<HTMLDivElement, GridRootProps>(
-  ({ children, className, classNames, flow, align, ...props }, ref) => {
-    const styles = grid({ align, flow });
+export const GridRoot = function GridRoot({
+  children,
+  className,
+  classNames,
+  flow,
+  align,
+  ref,
+  ...props
+}: GridRootProps): React.JSX.Element {
+  const styles = grid({ align, flow });
 
-    return (
-      <GridContext.Provider value={{ styles }}>
-        <div
-          className={styles.root({ className: classNames?.root ?? className })}
-          ref={ref}
-          {...props}
-        >
-          {children}
-        </div>
-      </GridContext.Provider>
-    );
-  },
-);
-GridRoot.displayName = 'GridRoot';
+  return (
+    <GridContext.Provider value={{ styles }}>
+      <div
+        className={styles.root({ className: classNames?.root ?? className })}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </div>
+    </GridContext.Provider>
+  );
+};

package/src/heading/heading.tsx

@@ -30,7 +30,13 @@ export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
   locale?: string;
 }
 
-export const Heading = ({ as, children, className, level = 2, ...props }: HeadingProps) => {
+export const Heading = function Heading({
+  as,
+  children,
+  className,
+  level = 2,
+  ...props
+}: HeadingProps): React.JSX.Element {
   const word = lowerCaseSzett(shy(children));
   const Component: ElementType = as || `h${level}`;
 
@@ -48,5 +54,3 @@ export const Heading = ({ as, children, className, level = 2, ...props }: Headin
     </Component>
   );
 };
-
-Heading.displayName = 'Heading';

package/src/highlight/highlight.tsx

@@ -20,7 +20,7 @@ export interface HighlightProps extends ComponentProps<'mark'> {
   variant?: HighlightVariant;
 }
 
-export const Highlight = ({ children, className, variant }: HighlightProps) => {
+export const Highlight = ({ children, className, variant }: HighlightProps): React.JSX.Element => {
   return (
     <mark
       className={highlight({

package/src/hooks/use-current-route-data.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useMemo } from 'react';
 import { useLocation, useMatches } from 'react-router';
 
@@ -5,7 +7,7 @@ import { useLocation, useMatches } from 'react-router';
  * This base hook is used to access data related to the current route
  * @returns {JSON|undefined} The router data or undefined if not found
  */
-export function useCurrentRouteData<HeaderData>() {
+export function useCurrentRouteData<HeaderData>(): HeaderData | undefined {
   const location = useLocation();
   const matchingRoutes = useMatches();
   const route = useMemo(() => {
@@ -14,5 +16,5 @@ export function useCurrentRouteData<HeaderData>() {
     });
   }, [matchingRoutes, location]);
 
-  return route?.data || (undefined as HeaderData);
+  return (route?.loaderData as HeaderData) || undefined;
 }

package/src/hooks/use-focus-search.ts

@@ -1,8 +1,10 @@
+'use client';
+
 import type { RefObject } from 'react';
 import { useEffect } from 'react';
 
 /** Focuses on the field when user clicks cmd + k or ctrl + k */
-export function useFocusSearch(ref: RefObject<HTMLInputElement>) {
+export function useFocusSearch(ref: RefObject<HTMLInputElement>): void {
   useEffect(() => {
     function handleKeyDown(event: KeyboardEvent) {
       if ((event.metaKey || event.ctrlKey) && event.key === 'k') {

package/src/hooks/use-matches-data.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useMemo } from 'react';
 import { useMatches } from 'react-router';
 

package/src/hooks/use-media-query.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 
 /**

package/src/hooks/use-mobile.ts

@@ -1,8 +1,10 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 
 const MOBILE_BREAKPOINT = 768;
 
-export function useIsMobile() {
+export function useIsMobile(): boolean {
   const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
 
   useEffect(() => {

package/src/hooks/use-nonce.ts

@@ -4,7 +4,7 @@
  */
 import { createContext, useContext } from 'react';
 
-export const NonceContext = createContext<string>('');
-export const NonceProvider = NonceContext.Provider;
+export const NonceContext: React.Context<string> = createContext<string>('');
+export const NonceProvider: React.Provider<string> = NonceContext.Provider;
 
-export const useNonce = () => useContext(NonceContext);
+export const useNonce = (): string => useContext(NonceContext);

package/src/hooks/use-orientation.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 
 /**

package/src/hooks/use-user.tsx

@@ -26,7 +26,8 @@ const defaultContextValue: UserContextType = {
 /**
  * Context for storing and accessing the current authenticated user
  */
-export const UserContext = createContext<UserContextType>(defaultContextValue);
+export const UserContext: React.Context<UserContextType> =
+  createContext<UserContextType>(defaultContextValue);
 
 /**
  * Props for the UserContextProvider component
@@ -53,7 +54,7 @@ export function UserContextProvider({
   user,
   isLoading = false,
   children,
-}: UserContextProviderProps) {
+}: UserContextProviderProps): React.JSX.Element {
   return <UserContext.Provider value={{ isLoading, user }}>{children}</UserContext.Provider>;
 }
 

package/src/icon-button/icon-button.stories.tsx

@@ -2,6 +2,26 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { IconButton } from './icon-button';
 
 const meta: Meta<typeof IconButton> = {
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the button',
+    },
+    size: {
+      control: 'select',
+      description: 'Icon button size',
+      options: ['sm', 'md', 'lg'],
+    },
+    title: {
+      control: 'text',
+      description: 'Title for tooltip and accessibility',
+    },
+    variant: {
+      control: 'select',
+      description: 'Button variant',
+      options: ['primary', 'secondary', 'outline', 'ghost', 'destructive'],
+    },
+  },
   component: IconButton,
   parameters: {
     layout: 'centered',
@@ -11,7 +31,7 @@ const meta: Meta<typeof IconButton> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof IconButton>;
+type Story = StoryObj<typeof meta>;
 
 const PlusIcon = () => (
   <svg
@@ -61,30 +81,131 @@ const CloseIcon = () => (
   </svg>
 );
 
+const SettingsIcon = () => (
+  <svg
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    strokeWidth="2"
+    viewBox="0 0 24 24"
+    width="24"
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="3"
+    />
+    <path d="m12 1v6m0 6v6m4.22-13.22 4.24 4.24M1.54 8.96l4.24 4.24m12.44 0 4.24 4.24M1.54 15.04l4.24-4.24" />
+  </svg>
+);
+
 export const Default: Story = {
   args: {
     icon: <PlusIcon />,
+    title: 'Add',
   },
 };
 
 export const Close: Story = {
   args: {
     icon: <CloseIcon />,
+    title: 'Close',
+    variant: 'ghost',
+  },
+};
+
+export const Settings: Story = {
+  args: {
+    icon: <SettingsIcon />,
+    title: 'Settings',
+    variant: 'secondary',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    icon: <PlusIcon />,
+    size: 'sm',
+    title: 'Add',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    icon: <PlusIcon />,
+    size: 'lg',
+    title: 'Add',
   },
 };
 
-export const WithCustomClass: Story = {
+export const Disabled: Story = {
   args: {
-    className: 'p-2 bg-gray-100 rounded hover:bg-gray-200',
+    disabled: true,
     icon: <PlusIcon />,
+    title: 'Add',
+  },
+};
+
+export const WithAriaLabel: Story = {
+  args: {
+    'aria-label': 'Close dialog',
+    icon: <CloseIcon />,
   },
 };
 
-export const AllIcons: Story = {
+export const AllVariants: Story = {
   render: () => (
-    <div style={{ display: 'flex', gap: '16px' }}>
-      <IconButton icon={<PlusIcon />} />
-      <IconButton icon={<CloseIcon />} />
+    <div className="flex gap-4">
+      <IconButton
+        icon={<PlusIcon />}
+        title="Add"
+        variant="primary"
+      />
+      <IconButton
+        icon={<SettingsIcon />}
+        title="Settings"
+        variant="secondary"
+      />
+      <IconButton
+        icon={<CloseIcon />}
+        title="Close"
+        variant="ghost"
+      />
+      <IconButton
+        icon={<PlusIcon />}
+        title="Delete"
+        variant="destructive"
+      />
     </div>
   ),
 };
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <IconButton
+        icon={<PlusIcon />}
+        size="sm"
+        title="Small"
+      />
+      <IconButton
+        icon={<PlusIcon />}
+        size="md"
+        title="Medium"
+      />
+      <IconButton
+        icon={<PlusIcon />}
+        size="lg"
+        title="Large"
+      />
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  args: {
+    icon: <PlusIcon />,
+    onClick: () => alert('Icon button clicked!'),
+    title: 'Add item',
+  },
+};