@regardio/react 1.2.0 → 1.3.0

package/dist/link/index.mjs

@@ -1,127 +0,0 @@
-import { t as lowerCaseSzett } from "../text-BFTwzxPw.mjs";
-import { createContext, useCallback, useContext } from "react";
-import { tv } from "@regardio/tailwind/utils";
-import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
-import { NavLink } from "react-router";
-//#region src/link/link.tsx
-const PathResolverContext = createContext(null);
-const PathResolverProvider = PathResolverContext.Provider;
-function usePathResolver() {
-	return useContext(PathResolverContext);
-}
-const LinkBase = ({ className, to, routeKey, children, onClick, viewTransition = true, ...props }) => {
-	const pathResolver = usePathResolver();
-	let path;
-	if (routeKey && pathResolver) path = pathResolver(routeKey);
-	else if (typeof to === "string") path = to;
-	else {
-		path = to?.pathname ?? "";
-		if (to?.search) path += to.search;
-		if (to?.hash) path += to.hash;
-	}
-	const isExternal = path.startsWith("tel:") || path.startsWith("mailto:") || path.startsWith("#") || path.startsWith("http");
-	const handleClick = useCallback((event) => {
-		onClick?.(event);
-		if (event.defaultPrevented) return;
-		if (path.startsWith("tel:") || path.startsWith("mailto:")) return;
-		if (path.startsWith("#")) {
-			event.preventDefault();
-			const element = document.getElementById(path.substring(1));
-			if (element) element.scrollIntoView({ behavior: "smooth" });
-			return;
-		}
-		if (path.startsWith("http")) {
-			event.preventDefault();
-			window.open(path, "_blank", "noopener,noreferrer");
-			return;
-		}
-	}, [onClick, path]);
-	if (!path) return /* @__PURE__ */ jsx(Fragment$1, { children: typeof children === "function" ? null : children });
-	if (isExternal) {
-		const externalState = {
-			isActive: false,
-			isPending: false,
-			isTransitioning: false
-		};
-		const resolvedClassName = typeof className === "function" ? className(externalState) : className;
-		const resolvedStyle = typeof props.style === "function" ? props.style(externalState) : props.style;
-		return /* @__PURE__ */ jsx("a", {
-			className: resolvedClassName,
-			href: path,
-			onClick: handleClick,
-			style: resolvedStyle,
-			children: typeof children === "function" ? children(externalState) : children
-		});
-	}
-	return /* @__PURE__ */ jsx(NavLink, {
-		...props,
-		className,
-		onClick: handleClick,
-		to: path,
-		viewTransition,
-		children
-	});
-};
-const link = tv({
-	base: [],
-	defaultVariants: { variant: "primary" },
-	variants: {
-		arrow: {
-			darr: "darr",
-			larr: "larr",
-			rarr: "rarr",
-			uarr: "uarr"
-		},
-		variant: {
-			button: [
-				"block",
-				"button",
-				"mt-s",
-				"relative",
-				"rarr",
-				"text-right",
-				"text-sm",
-				"tracking-wider",
-				"uppercase"
-			],
-			code: ["font-monospace"],
-			link: [
-				"rarr",
-				"!bg-transparent",
-				"uppercase",
-				"!tracking-wider"
-			],
-			navtitle: [
-				"block",
-				"uppercase",
-				"tracking-wider"
-			],
-			primary: [],
-			subtitle: ["text-lg"]
-		}
-	}
-});
-const Link = ({ arrow, children, className, routeKey, to, variant, viewTransition, ...props }) => {
-	return /* @__PURE__ */ jsx(LinkBase, {
-		...props,
-		className: link({
-			arrow,
-			className: typeof className === "string" ? className : void 0,
-			variant
-		}),
-		routeKey,
-		to,
-		viewTransition,
-		children: lowerCaseSzett(children)
-	});
-};
-const MarkdownLink = ({ children, href, ...props }) => {
-	if (href) return /* @__PURE__ */ jsx(Link, {
-		to: href,
-		...props,
-		children
-	});
-	return null;
-};
-//#endregion
-export { Link, LinkBase, MarkdownLink, PathResolverProvider, usePathResolver };

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

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { GenericError, getErrorDescriptor } from './generic-error';
-
-const meta: Meta<typeof GenericError> = {
-  component: GenericError,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  tags: ['autodocs'],
-  title: 'Components/GenericError',
-};
-
-export default meta;
-type Story = StoryObj<typeof GenericError>;
-
-const ErrorWrapper = ({ status }: { status: number }) => {
-  const error = new Response('Not Found', { status, statusText: 'Not Found' });
-
-  return <GenericError error={error} />;
-};
-
-export const Error404: Story = {
-  render: () => <ErrorWrapper status={404} />,
-};
-
-export const Error500: Story = {
-  render: () => <ErrorWrapper status={500} />,
-};
-
-export const GetErrorDescriptorDemo: Story = {
-  render: () => {
-    const httpError = getErrorDescriptor(new Response('Not Found', { status: 404 }));
-    const runtimeError = getErrorDescriptor(new Error('Something went wrong'));
-    const unknownError = getErrorDescriptor('unknown');
-
-    return (
-      <div style={{ padding: '24px' }}>
-        <h3>Error Descriptor Examples</h3>
-        <pre style={{ background: '#f5f5f5', padding: '16px' }}>
-          {JSON.stringify({ httpError, runtimeError, unknownError }, null, 2)}
-        </pre>
-      </div>
-    );
-  },
-};

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

@@ -1,105 +0,0 @@
-import { isRouteErrorResponse } from 'react-router';
-
-/**
- * Descriptor returned from getErrorDescriptor to help apps localize messages.
- */
-export type ErrorDescriptor =
-  | {
-      type: 'http';
-      status: number;
-      statusText: string;
-      defaultId: string; // e.g. "errors.http"
-      defaultMessage: string; // e.g. "Error {status}"
-    }
-  | {
-      type: 'error';
-      defaultId: string; // e.g. "errors.runtime"
-      defaultMessage: string; // e.g. "An unexpected error occurred."
-      message?: string;
-      stack?: string;
-    }
-  | {
-      type: 'unknown';
-      defaultId: string; // e.g. "errors.unknown"
-      defaultMessage: string; // e.g. "An unexpected error occurred."
-    };
-
-/**
- * Compute a normalized error descriptor from a React Router error.
- * Apps can use this to map to i18n keys.
- */
-export function getErrorDescriptor(error: unknown): ErrorDescriptor {
-  if (isRouteErrorResponse(error)) {
-    const status = error.status;
-    const statusText = error.statusText || 'Error';
-    return {
-      defaultId: status === 404 ? 'errors.404' : 'errors.http',
-      defaultMessage: status === 404 ? 'Not found' : `Error ${status}`,
-      status,
-      statusText,
-      type: 'http',
-    };
-  }
-  if (error instanceof Error) {
-    return {
-      defaultId: 'errors.runtime',
-      defaultMessage: 'An unexpected error occurred.',
-      message: error.message,
-      type: 'error',
-      ...(error.stack ? { stack: error.stack } : {}),
-    };
-  }
-  return {
-    defaultId: 'errors.unknown',
-    defaultMessage: 'An unexpected error occurred.',
-    type: 'unknown',
-  };
-}
-
-/**
- * GenericError
- *
- * A reusable error boundary component for React Router apps.
- * - Displays status-based messages for route responses
- * - Shows stack traces in development for non-response errors
- * - SSR-safe: accepts optional error prop for server-side rendering
- *
- * For localization, apps may either:
- * - Wrap this component and use `getErrorDescriptor(error)` to map to i18n keys
- * - Or provide a custom `renderMessage` to override the displayed details
- */
-export function GenericError({
-  error,
-  renderMessage,
-}: {
-  error: unknown;
-  renderMessage?: (descriptor: ErrorDescriptor) => React.JSX.Element;
-}): React.JSX.Element {
-  const descriptor = getErrorDescriptor(error);
-
-  const title = descriptor.type === 'http' ? `Error ${descriptor.status}` : 'Error';
-
-  return (
-    <main className="pt-2xl p-sm container mx-auto">
-      <h1>{title}</h1>
-      {renderMessage ? (
-        renderMessage(descriptor)
-      ) : (
-        <>
-          <p>
-            {descriptor.type === 'http'
-              ? descriptor.defaultMessage
-              : descriptor.type === 'error'
-                ? descriptor.message || descriptor.defaultMessage
-                : descriptor.defaultMessage}
-          </p>
-          {import.meta.env.DEV && descriptor.type === 'error' && descriptor.stack && (
-            <pre className="w-full p-sm overflow-x-auto">
-              <code>{descriptor.stack}</code>
-            </pre>
-          )}
-        </>
-      )}
-    </main>
-  );
-}

package/src/generic-error/index.ts

@@ -1,2 +0,0 @@
-export type { ErrorDescriptor } from './generic-error';
-export { GenericError, getErrorDescriptor } from './generic-error';

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

@@ -1,20 +0,0 @@
-'use client';
-
-import { useMemo } from 'react';
-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>(): HeaderData | undefined {
-  const location = useLocation();
-  const matchingRoutes = useMatches();
-  const route = useMemo(() => {
-    return matchingRoutes.find((route) => {
-      return route.pathname === location.pathname;
-    });
-  }, [matchingRoutes, location]);
-
-  return (route?.loaderData as HeaderData) || undefined;
-}

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

@@ -1,21 +0,0 @@
-'use client';
-
-import { useMemo } from 'react';
-import { useMatches } from 'react-router';
-
-/**
- * This base hook is used in other hooks to quickly search for specific data
- * across all loader data using useMatches.
- * @param {string} id The route id
- * @returns {JSON|undefined} The router data or undefined if not found
- */
-export function useMatchesData<T>(id: string): T | undefined {
-  const matchingRoutes = useMatches();
-  const route = useMemo(() => {
-    return matchingRoutes.find((route) => {
-      return route.id === id;
-    });
-  }, [matchingRoutes, id]);
-
-  return (route?.data as T) || undefined;
-}

package/src/hooks/use-user.tsx

@@ -1,73 +0,0 @@
-import type { User } from '@supabase/supabase-js';
-import { createContext, type ReactNode, useContext } from 'react';
-
-/**
- * Context for storing and accessing the current authenticated user
- */
-export interface UserContextType {
-  /**
-   * Whether the user data is currently loading
-   */
-  isLoading: boolean;
-  /**
-   * The current authenticated user, or null if not authenticated
-   */
-  user: User | null;
-}
-
-/**
- * Default context value when no provider is present
- */
-const defaultContextValue: UserContextType = {
-  isLoading: false,
-  user: null,
-};
-
-/**
- * Context for storing and accessing the current authenticated user
- */
-export const UserContext: React.Context<UserContextType> =
-  createContext<UserContextType>(defaultContextValue);
-
-/**
- * Props for the UserContextProvider component
- */
-export interface UserContextProviderProps {
-  /**
-   * Child components that will have access to the user context
-   */
-  children: ReactNode;
-  /**
-   * Whether the user data is currently loading
-   */
-  isLoading?: boolean;
-  /**
-   * The current authenticated user, or null if not authenticated
-   */
-  user: User | null;
-}
-
-/**
- * Provider component for the UserContext
- */
-export function UserContextProvider({
-  user,
-  isLoading = false,
-  children,
-}: UserContextProviderProps): React.JSX.Element {
-  return <UserContext.Provider value={{ isLoading, user }}>{children}</UserContext.Provider>;
-}
-
-/**
- * Hook to access the current authenticated user from the UserContext
- * @returns The current user context containing the user object and loading state
- */
-export function useUser(): UserContextType {
-  const context = useContext(UserContext);
-
-  if (context === undefined) {
-    throw new Error('useUser must be used within a UserContextProvider');
-  }
-
-  return context;
-}

package/src/link/index.ts

@@ -1,2 +0,0 @@
-export type { LinkBaseProps, LinkProps, MarkdownLinkProps, PathResolver } from './link';
-export { Link, LinkBase, MarkdownLink, PathResolverProvider, usePathResolver } from './link';

package/src/link/link.stories.tsx

@@ -1,109 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { MemoryRouter } from 'react-router';
-import { Link } from './link';
-
-const meta: Meta<typeof Link> = {
-  component: Link,
-  decorators: [
-    (Story) => (
-      <MemoryRouter>
-        <Story />
-      </MemoryRouter>
-    ),
-  ],
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  title: 'Components/Link',
-};
-
-export default meta;
-type Story = StoryObj<typeof Link>;
-
-export const Default: Story = {
-  args: {
-    children: 'Default Link',
-    to: '/example',
-  },
-};
-
-export const External: Story = {
-  args: {
-    children: 'External Link',
-    to: 'https://example.com',
-  },
-};
-
-export const WithGermanText: Story = {
-  args: {
-    children: 'Größenübersicht',
-    to: '/sizes',
-  },
-};
-
-export const AllVariants: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-      <Link to="/internal">Internal Link</Link>
-      <Link to="https://example.com">External Link</Link>
-      <Link
-        className="text-blue-600 underline"
-        to="/styled"
-      >
-        Styled Link
-      </Link>
-    </div>
-  ),
-};
-
-export const TelephoneLink: Story = {
-  args: {
-    children: 'Call Us',
-    to: 'tel:+1234567890',
-  },
-};
-
-export const MailtoLink: Story = {
-  args: {
-    children: 'Email Us',
-    to: 'mailto:hello@example.com',
-  },
-};
-
-export const HashLink: Story = {
-  args: {
-    children: 'Jump to Section',
-    to: '#section-id',
-  },
-};
-
-export const WithSearchAndHash: Story = {
-  args: {
-    children: 'Link with Query',
-    to: { hash: '#results', pathname: '/search', search: '?q=test' },
-  },
-};
-
-export const EmptyPath: Story = {
-  args: {
-    children: 'No destination',
-    to: '',
-  },
-};
-
-export const WithArrow: Story = {
-  args: {
-    arrow: 'rarr',
-    children: 'Link with Arrow',
-    to: '/arrow',
-  },
-};
-
-export const ButtonVariant: Story = {
-  args: {
-    children: 'Button Style Link',
-    to: '/button',
-    variant: 'button',
-  },
-};

package/src/link/link.test.tsx

@@ -1,169 +0,0 @@
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-
-import { Link, LinkBase, MarkdownLink, PathResolverProvider } from './link';
-
-afterEach(() => {
-  cleanup();
-});
-
-const renderWithRouter = (ui: React.ReactNode) => {
-  return render(<MemoryRouter>{ui}</MemoryRouter>);
-};
-
-describe('LinkBase', () => {
-  it('renders internal link with NavLink', () => {
-    renderWithRouter(<LinkBase to="/about">About</LinkBase>);
-    expect(screen.getByText('About')).toBeDefined();
-  });
-
-  it('renders external http link as anchor', () => {
-    renderWithRouter(<LinkBase to="https://example.com">External</LinkBase>);
-    const link = screen.getByText('External');
-    expect(link.tagName).toBe('A');
-    expect(link.getAttribute('href')).toBe('https://example.com');
-  });
-
-  it('renders mailto link as anchor', () => {
-    renderWithRouter(<LinkBase to="mailto:test@example.com">Email</LinkBase>);
-    const link = screen.getByText('Email');
-    expect(link.tagName).toBe('A');
-    expect(link.getAttribute('href')).toBe('mailto:test@example.com');
-  });
-
-  it('renders tel link as anchor', () => {
-    renderWithRouter(<LinkBase to="tel:+1234567890">Call</LinkBase>);
-    const link = screen.getByText('Call');
-    expect(link.tagName).toBe('A');
-    expect(link.getAttribute('href')).toBe('tel:+1234567890');
-  });
-
-  it('uses pathResolver when routeKey is provided', () => {
-    const resolver = vi.fn().mockReturnValue('/resolved-path');
-    renderWithRouter(
-      <PathResolverProvider value={resolver}>
-        <LinkBase routeKey="home">Home</LinkBase>
-      </PathResolverProvider>,
-    );
-    expect(resolver).toHaveBeenCalledWith('home');
-    expect(screen.getByText('Home')).toBeDefined();
-  });
-
-  it('handles object to prop with pathname, search, and hash', () => {
-    renderWithRouter(
-      <LinkBase to={{ hash: '#section', pathname: '/page', search: '?q=test' }}>Complex</LinkBase>,
-    );
-    expect(screen.getByText('Complex')).toBeDefined();
-  });
-
-  it('renders children only when path is empty', () => {
-    renderWithRouter(<LinkBase>No Link</LinkBase>);
-    expect(screen.getByText('No Link')).toBeDefined();
-  });
-
-  it('calls onClick handler', () => {
-    const handleClick = vi.fn();
-    renderWithRouter(
-      <LinkBase
-        onClick={handleClick}
-        to="/test"
-      >
-        Click Me
-      </LinkBase>,
-    );
-    fireEvent.click(screen.getByText('Click Me'));
-    expect(handleClick).toHaveBeenCalled();
-  });
-
-  it('opens external http link in new window', () => {
-    const windowOpen = vi.spyOn(window, 'open').mockImplementation(() => null);
-    renderWithRouter(<LinkBase to="https://example.com">External</LinkBase>);
-    fireEvent.click(screen.getByText('External'));
-    expect(windowOpen).toHaveBeenCalledWith('https://example.com', '_blank', 'noopener,noreferrer');
-    windowOpen.mockRestore();
-  });
-
-  it('scrolls to element for hash links', () => {
-    const scrollIntoView = vi.fn();
-    const element = document.createElement('div');
-    element.id = 'section';
-    element.scrollIntoView = scrollIntoView;
-    document.body.appendChild(element);
-
-    renderWithRouter(<LinkBase to="#section">Jump</LinkBase>);
-    fireEvent.click(screen.getByText('Jump'));
-    expect(scrollIntoView).toHaveBeenCalledWith({ behavior: 'smooth' });
-
-    document.body.removeChild(element);
-  });
-
-  it('handles hash link when element not found', () => {
-    renderWithRouter(<LinkBase to="#nonexistent">Jump</LinkBase>);
-    fireEvent.click(screen.getByText('Jump'));
-  });
-
-  it('does not prevent default for tel links', () => {
-    renderWithRouter(<LinkBase to="tel:+1234567890">Call</LinkBase>);
-    const link = screen.getByText('Call');
-    const event = fireEvent.click(link);
-    expect(event).toBe(true);
-  });
-
-  it('respects defaultPrevented in onClick', () => {
-    const handleClick = vi.fn((e: React.MouseEvent) => e.preventDefault());
-    const windowOpen = vi.spyOn(window, 'open').mockImplementation(() => null);
-
-    renderWithRouter(
-      <LinkBase
-        onClick={handleClick}
-        to="https://example.com"
-      >
-        External
-      </LinkBase>,
-    );
-    fireEvent.click(screen.getByText('External'));
-    expect(handleClick).toHaveBeenCalled();
-    expect(windowOpen).not.toHaveBeenCalled();
-
-    windowOpen.mockRestore();
-  });
-});
-
-describe('Link', () => {
-  it('renders with variant', () => {
-    renderWithRouter(
-      <Link
-        to="/test"
-        variant="button"
-      >
-        Button Link
-      </Link>,
-    );
-    expect(screen.getByText('Button Link')).toBeDefined();
-  });
-
-  it('renders with arrow', () => {
-    renderWithRouter(
-      <Link
-        arrow="rarr"
-        to="/test"
-      >
-        Arrow Link
-      </Link>,
-    );
-    expect(screen.getByText('Arrow Link')).toBeDefined();
-  });
-});
-
-describe('MarkdownLink', () => {
-  it('renders Link when href is provided', () => {
-    renderWithRouter(<MarkdownLink href="/page">Markdown</MarkdownLink>);
-    expect(screen.getByText('Markdown')).toBeDefined();
-  });
-
-  it('returns null when href is not provided', () => {
-    const { container } = renderWithRouter(<MarkdownLink>No Link</MarkdownLink>);
-    expect(container.innerHTML).toBe('');
-  });
-});