@regardio/react 1.2.1 → 1.3.0

package/src/markdown-container/markdown-container.test.tsx

@@ -0,0 +1,124 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { MarkdownContainer, transformLink } from './markdown-container';
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('transformLink', () => {
+  it('strips the origin for regard.io URLs and keeps the pathname', () => {
+    expect(transformLink('https://www.regard.io/about')).toBe('/about');
+  });
+
+  it('preserves search and hash for regard.io URLs', () => {
+    expect(transformLink('https://regard.io/page?q=1#section')).toBe('/page?q=1#section');
+  });
+
+  it('returns the original URL for external links', () => {
+    expect(transformLink('https://example.com/page')).toBe('https://example.com/page');
+  });
+
+  it('returns the original string for relative paths', () => {
+    expect(transformLink('/relative/path')).toBe('/relative/path');
+  });
+
+  it('returns pathname from object with pathname', () => {
+    expect(transformLink({ pathname: '/products', search: '?ref=nav' })).toBe('/products?ref=nav');
+  });
+
+  it('returns pathname with hash from object', () => {
+    expect(transformLink({ hash: '#top', pathname: '/page' })).toBe('/page#top');
+  });
+
+  it('returns empty string for undefined', () => {
+    expect(transformLink(undefined)).toBe('');
+  });
+
+  it('returns empty string for object without pathname', () => {
+    expect(transformLink({})).toBe('');
+  });
+});
+
+describe('MarkdownContainer', () => {
+  it('renders markdown content', () => {
+    render(<MarkdownContainer locale="en">**Bold text**</MarkdownContainer>);
+    expect(screen.getByText('Bold text')).toBeInTheDocument();
+  });
+
+  it('applies the markdown class', () => {
+    const { container } = render(<MarkdownContainer locale="en">Hello</MarkdownContainer>);
+    expect(container.querySelector('.markdown')).toBeInTheDocument();
+  });
+
+  it('applies a custom className', () => {
+    const { container } = render(
+      <MarkdownContainer
+        className="custom"
+        locale="en"
+      >
+        Hello
+      </MarkdownContainer>,
+    );
+    expect(container.querySelector('.custom')).toBeInTheDocument();
+  });
+
+  it('truncates by sentences', () => {
+    const text = 'First sentence. Second sentence. Third sentence.';
+    render(
+      <MarkdownContainer
+        locale="en"
+        sentences={1}
+      >
+        {text}
+      </MarkdownContainer>,
+    );
+    expect(screen.queryByText(/Third sentence/)).not.toBeInTheDocument();
+  });
+
+  it('truncates by paragraphs', () => {
+    const text = 'Paragraph one.\n\nParagraph two.\n\nParagraph three.';
+    render(
+      <MarkdownContainer
+        locale="en"
+        paragraphs={1}
+      >
+        {text}
+      </MarkdownContainer>,
+    );
+    expect(screen.queryByText(/Paragraph two/)).not.toBeInTheDocument();
+  });
+
+  it('truncates by characters', () => {
+    const text = 'Short first. Much longer second sentence here.';
+    render(
+      <MarkdownContainer
+        characters={15}
+        locale="en"
+      >
+        {text}
+      </MarkdownContainer>,
+    );
+    expect(screen.queryByText(/longer second/)).not.toBeInTheDocument();
+  });
+
+  it('renders <br> via the br override', () => {
+    const { container } = render(
+      <MarkdownContainer locale="en">{'Before<br/>After'}</MarkdownContainer>,
+    );
+    expect(container.querySelector('br')).toBeInTheDocument();
+  });
+
+  it('renders <hr> via the hr override', () => {
+    const { container } = render(
+      <MarkdownContainer locale="en">{'Above<hr/>Below'}</MarkdownContainer>,
+    );
+    expect(container.querySelector('hr')).toBeInTheDocument();
+  });
+
+  it('returns full text when no truncation props are given', () => {
+    const text = 'All text here.';
+    render(<MarkdownContainer locale="en">{text}</MarkdownContainer>);
+    expect(screen.getByText('All text here.')).toBeInTheDocument();
+  });
+});

package/src/password-input/password-input.test.tsx

@@ -0,0 +1,53 @@
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { PasswordInput } from './password-input';
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('PasswordInput', () => {
+  it('starts with type=password', () => {
+    render(<PasswordInput />);
+    const input = document.querySelector('input');
+    expect(input).toHaveAttribute('type', 'password');
+  });
+
+  it('shows the toggle button by default', () => {
+    render(<PasswordInput />);
+    expect(screen.getByRole('button', { name: /show password/i })).toBeInTheDocument();
+  });
+
+  it('toggles to type=text when the toggle button is clicked', () => {
+    render(<PasswordInput />);
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: /show password/i }));
+    });
+    const input = document.querySelector('input');
+    expect(input).toHaveAttribute('type', 'text');
+    expect(screen.getByRole('button', { name: /hide password/i })).toBeInTheDocument();
+  });
+
+  it('toggles back to type=password on second click', () => {
+    render(<PasswordInput />);
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: /show password/i }));
+    });
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: /hide password/i }));
+    });
+    const input = document.querySelector('input');
+    expect(input).toHaveAttribute('type', 'password');
+  });
+
+  it('hides the toggle button when showToggle is false', () => {
+    render(<PasswordInput showToggle={false} />);
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('applies a custom className', () => {
+    render(<PasswordInput className="custom-class" />);
+    const wrapper = document.querySelector('.custom-class');
+    expect(wrapper).toBeInTheDocument();
+  });
+});

package/src/protected-email/protected-email.test.tsx

@@ -0,0 +1,82 @@
+import { act, cleanup, render } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { ProtectedEmail } from './protected-email';
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('ProtectedEmail', () => {
+  it('renders the fallback text', () => {
+    const { getByText } = render(
+      <ProtectedEmail
+        domain="example.com"
+        username="hello"
+      />,
+    );
+    expect(getByText('hello(at)example.com')).toBeInTheDocument();
+  });
+
+  it('renders custom text when provided', () => {
+    const { getByText } = render(
+      <ProtectedEmail
+        domain="example.com"
+        text="Contact us"
+        username="hello"
+      />,
+    );
+    expect(getByText('Contact us')).toBeInTheDocument();
+  });
+
+  it('has href after mounting', async () => {
+    const { getByRole } = render(
+      <ProtectedEmail
+        domain="example.com"
+        username="hello"
+      />,
+    );
+    await act(async () => {});
+    expect(getByRole('link')).toHaveAttribute('href', '#email-protected');
+  });
+
+  it('navigates to mailto on click when mounted', async () => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: { href: '' },
+      writable: true,
+    });
+
+    const { getByRole } = render(
+      <ProtectedEmail
+        domain="example.com"
+        username="hello"
+      />,
+    );
+    await act(async () => {});
+
+    getByRole('link').click();
+
+    expect(window.location.href).toBe('mailto:hello@example.com');
+  });
+
+  it('applies custom className', () => {
+    const { getByRole } = render(
+      <ProtectedEmail
+        className="custom-email"
+        domain="example.com"
+        username="hello"
+      />,
+    );
+    expect(getByRole('link')).toHaveClass('custom-email');
+  });
+
+  it('sets a descriptive aria-label', () => {
+    const { getByRole } = render(
+      <ProtectedEmail
+        domain="example.com"
+        username="hello"
+      />,
+    );
+    expect(getByRole('link')).toHaveAttribute('aria-label', 'Email address: hello at example.com');
+  });
+});

package/dist/generic-error/index.d.mts

@@ -1,47 +0,0 @@
-//#region src/generic-error/generic-error.d.ts
-/**
-* Descriptor returned from getErrorDescriptor to help apps localize messages.
-*/
-type ErrorDescriptor = {
-  type: "http";
-  status: number;
-  statusText: string;
-  defaultId: string;
-  defaultMessage: string;
-} | {
-  type: "error";
-  defaultId: string;
-  defaultMessage: string;
-  message?: string;
-  stack?: string;
-} | {
-  type: "unknown";
-  defaultId: string;
-  defaultMessage: string;
-};
-/**
-* Compute a normalized error descriptor from a React Router error.
-* Apps can use this to map to i18n keys.
-*/
-declare function getErrorDescriptor(error: unknown): ErrorDescriptor;
-/**
-* 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
-*/
-declare function GenericError({
-  error,
-  renderMessage
-}: {
-  error: unknown;
-  renderMessage?: (descriptor: ErrorDescriptor) => React.JSX.Element;
-}): React.JSX.Element;
-//#endregion
-export { type ErrorDescriptor, GenericError, getErrorDescriptor };

package/dist/generic-error/index.mjs

@@ -1,56 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { isRouteErrorResponse } from "react-router";
-//#region src/generic-error/generic-error.tsx
-/**
-* Compute a normalized error descriptor from a React Router error.
-* Apps can use this to map to i18n keys.
-*/
-function getErrorDescriptor(error) {
-	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
-*/
-function GenericError({ error, renderMessage }) {
-	const descriptor = getErrorDescriptor(error);
-	return /* @__PURE__ */ jsxs("main", {
-		className: "pt-2xl p-sm container mx-auto",
-		children: [/* @__PURE__ */ jsx("h1", { children: descriptor.type === "http" ? `Error ${descriptor.status}` : "Error" }), renderMessage ? renderMessage(descriptor) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", { children: descriptor.type === "http" ? descriptor.defaultMessage : descriptor.type === "error" ? descriptor.message || descriptor.defaultMessage : descriptor.defaultMessage }), import.meta.env.DEV && descriptor.type === "error" && descriptor.stack && /* @__PURE__ */ jsx("pre", {
-			className: "w-full p-sm overflow-x-auto",
-			children: /* @__PURE__ */ jsx("code", { children: descriptor.stack })
-		})] })]
-	});
-}
-//#endregion
-export { GenericError, getErrorDescriptor };

package/dist/hooks/use-current-route-data.d.mts

@@ -1,8 +0,0 @@
-//#region src/hooks/use-current-route-data.d.ts
-/**
-* This base hook is used to access data related to the current route
-* @returns {JSON|undefined} The router data or undefined if not found
-*/
-declare function useCurrentRouteData<HeaderData>(): HeaderData | undefined;
-//#endregion
-export { useCurrentRouteData };

package/dist/hooks/use-current-route-data.mjs

@@ -1,19 +0,0 @@
-"use client";
-import { useMemo } from "react";
-import { useLocation, useMatches } from "react-router";
-//#region src/hooks/use-current-route-data.ts
-/**
-* This base hook is used to access data related to the current route
-* @returns {JSON|undefined} The router data or undefined if not found
-*/
-function useCurrentRouteData() {
-	const location = useLocation();
-	const matchingRoutes = useMatches();
-	return useMemo(() => {
-		return matchingRoutes.find((route) => {
-			return route.pathname === location.pathname;
-		});
-	}, [matchingRoutes, location])?.loaderData || void 0;
-}
-//#endregion
-export { useCurrentRouteData };

package/dist/hooks/use-matches-data.d.mts

@@ -1,10 +0,0 @@
-//#region src/hooks/use-matches-data.d.ts
-/**
-* 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
-*/
-declare function useMatchesData<T>(id: string): T | undefined;
-//#endregion
-export { useMatchesData };

package/dist/hooks/use-matches-data.mjs

@@ -1,20 +0,0 @@
-"use client";
-import { useMemo } from "react";
-import { useMatches } from "react-router";
-//#region src/hooks/use-matches-data.ts
-/**
-* 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
-*/
-function useMatchesData(id) {
-	const matchingRoutes = useMatches();
-	return useMemo(() => {
-		return matchingRoutes.find((route) => {
-			return route.id === id;
-		});
-	}, [matchingRoutes, id])?.data || void 0;
-}
-//#endregion
-export { useMatchesData };

package/dist/hooks/use-user.d.mts

@@ -1,53 +0,0 @@
-import { ReactNode } from "react";
-import { User } from "@supabase/supabase-js";
-
-//#region src/hooks/use-user.d.ts
-/**
-* Context for storing and accessing the current authenticated user
-*/
-interface UserContextType {
-  /**
-  * Whether the user data is currently loading
-  */
-  isLoading: boolean;
-  /**
-  * The current authenticated user, or null if not authenticated
-  */
-  user: User | null;
-}
-/**
-* Context for storing and accessing the current authenticated user
-*/
-declare const UserContext: React.Context<UserContextType>;
-/**
-* Props for the UserContextProvider component
-*/
-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
-*/
-declare function UserContextProvider({
-  user,
-  isLoading,
-  children
-}: UserContextProviderProps): React.JSX.Element;
-/**
-* Hook to access the current authenticated user from the UserContext
-* @returns The current user context containing the user object and loading state
-*/
-declare function useUser(): UserContextType;
-//#endregion
-export { UserContext, UserContextProvider, UserContextProviderProps, UserContextType, useUser };

package/dist/hooks/use-user.mjs

@@ -1,32 +0,0 @@
-import { createContext, useContext } from "react";
-import { jsx } from "react/jsx-runtime";
-/**
-* Context for storing and accessing the current authenticated user
-*/
-const UserContext = createContext({
-	isLoading: false,
-	user: null
-});
-/**
-* Provider component for the UserContext
-*/
-function UserContextProvider({ user, isLoading = false, children }) {
-	return /* @__PURE__ */ jsx(UserContext.Provider, {
-		value: {
-			isLoading,
-			user
-		},
-		children
-	});
-}
-/**
-* Hook to access the current authenticated user from the UserContext
-* @returns The current user context containing the user object and loading state
-*/
-function useUser() {
-	const context = useContext(UserContext);
-	if (context === void 0) throw new Error("useUser must be used within a UserContextProvider");
-	return context;
-}
-//#endregion
-export { UserContext, UserContextProvider, useUser };

package/dist/link/index.d.mts

@@ -1,71 +0,0 @@
-import { NavLinkProps } from "react-router";
-
-//#region src/link/link.d.ts
-/**
-* Context for providing a path resolver function.
-* This allows projects to inject their own localization logic.
-*/
-type PathResolver = (routeKey: string) => string;
-declare const PathResolverProvider: React.Provider<PathResolver | null>;
-declare function usePathResolver(): PathResolver | null;
-interface LinkBaseProps extends Omit<NavLinkProps, "to"> {
-  routeKey?: string;
-  to?: string | Partial<{
-    pathname?: string;
-    search?: string;
-    hash?: string;
-  }> | undefined;
-  viewTransition?: boolean;
-}
-declare const LinkBase: ({
-  className,
-  to,
-  routeKey,
-  children,
-  onClick,
-  viewTransition,
-  ...props
-}: LinkBaseProps) => React.JSX.Element;
-declare const arrowVariants: {
-  readonly darr: "darr";
-  readonly larr: "larr";
-  readonly rarr: "rarr";
-  readonly uarr: "uarr";
-};
-declare const linkVariants: {
-  readonly button: readonly ["block", "button", "mt-s", "relative", "rarr", "text-right", "text-sm", "tracking-wider", "uppercase"];
-  readonly code: readonly ["font-monospace"];
-  readonly link: readonly ["rarr", "!bg-transparent", "uppercase", "!tracking-wider"];
-  readonly navtitle: readonly ["block", "uppercase", "tracking-wider"];
-  readonly primary: readonly [];
-  readonly subtitle: readonly ["text-lg"];
-};
-type LinkArrow = keyof typeof arrowVariants;
-type LinkVariant = keyof typeof linkVariants;
-interface LinkProps extends Omit<NavLinkProps, "to"> {
-  arrow?: LinkArrow;
-  routeKey?: string;
-  to?: string | Partial<{
-    pathname?: string;
-    search?: string;
-    hash?: string;
-  }>;
-  variant?: LinkVariant;
-  viewTransition?: boolean;
-}
-declare const Link: ({
-  arrow,
-  children,
-  className,
-  routeKey,
-  to,
-  variant,
-  viewTransition,
-  ...props
-}: LinkProps) => React.JSX.Element;
-interface MarkdownLinkProps extends Omit<LinkProps, "to"> {
-  href?: string;
-}
-declare const MarkdownLink: React.FC<MarkdownLinkProps>;
-//#endregion
-export { Link, LinkBase, type LinkBaseProps, type LinkProps, MarkdownLink, type MarkdownLinkProps, type PathResolver, PathResolverProvider, usePathResolver };