@regardio/react 0.3.2

package/src/components/picture.tsx

@@ -0,0 +1,107 @@
+import type React from 'react';
+import { cn } from '../utils/cn';
+
+// Define screen size variants for responsive images
+// Define screen size variants for responsive images (used in srcset generation)
+export const screenSizeVariants = {
+  lg: 1280,
+  max: 1920,
+  md: 960,
+  min: 360,
+  sm: 640,
+  xl: 1600,
+  xs: 480,
+} as const;
+
+// Define image format for different providers
+export type ImageFormat = {
+  size: string; // Size descriptor (e.g., '480x360', 'sm', etc.)
+  width: number; // Width in pixels for srcset
+};
+
+export interface PictureProps {
+  alt: string;
+  baseUrl: string; // Base URL template that can include placeholders
+  className?: string;
+  formats?: ImageFormat[]; // Custom formats if needed
+  imgClassName?: string; // Additional class for the img element
+  placeholder?: string; // Placeholder to replace in baseUrl
+  sizes?: string; // Custom sizes attribute
+}
+
+/**
+ * Generic Picture component that works with any image provider
+ *
+ * @param alt - Alt text for the image
+ * @param baseUrl - Base URL with optional placeholder (e.g., 'https://example.com/images/{format}/image.jpg')
+ * @param className - Optional class for the picture element
+ * @param formats - Custom formats with size and width
+ * @param imgClassName - Optional class for the img element
+ * @param placeholder - Placeholder to replace in baseUrl (default: '{format}')
+ * @param sizes - Custom sizes attribute
+ */
+const Picture: React.FC<PictureProps> = ({
+  alt,
+  baseUrl,
+  className,
+  formats,
+  imgClassName,
+  placeholder = '{format}',
+  sizes = '(max-width: 480px) 480px, (max-width: 768px) 600px, (max-width: 1200px) 1024px, 1920px',
+}) => {
+  // Default formats if none provided
+  const imageFormats = formats || [
+    { size: '480x360', width: 480 },
+    { size: '600x600', width: 600 },
+    { size: '1024x768', width: 1024 },
+    { size: '1920x1440', width: 1920 },
+  ];
+
+  if (imageFormats.length === 0) {
+    return null;
+  }
+
+  // Check if this is a simple image without size variations
+  // (single format with empty size string, or no placeholder in URL)
+  const isSimpleImage =
+    (imageFormats.length === 1 && imageFormats[0]?.size === '') || !baseUrl.includes(placeholder);
+
+  if (isSimpleImage) {
+    return (
+      <img
+        alt={alt}
+        className={cn(className, imgClassName)}
+        src={baseUrl}
+      />
+    );
+  }
+
+  // Generate srcset by replacing placeholder in baseUrl
+  const srcSet = imageFormats
+    .map(({ size, width }) => {
+      const url = baseUrl.replace(placeholder, size);
+      return `${url} ${width}w`;
+    })
+    .join(', ');
+
+  // Use the first format as the default src
+  const defaultFormat = imageFormats[0];
+  // Add a null check for defaultFormat
+  const defaultSrc = defaultFormat ? baseUrl.replace(placeholder, defaultFormat.size) : baseUrl;
+
+  return (
+    <picture className={className}>
+      <source
+        sizes={sizes}
+        srcSet={srcSet}
+      />
+      <img
+        alt={alt}
+        className={cn(imgClassName)}
+        src={defaultSrc}
+      />
+    </picture>
+  );
+};
+
+export { Picture };

package/src/components/protected-email.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+
+interface ProtectedEmailProps {
+  username: string;
+  domain: string;
+  text?: string;
+  className?: string;
+}
+
+/**
+ * ProtectedEmail component that obfuscates email addresses to protect from scrapers.
+ * The email is only assembled client-side with JavaScript, making it harder for scrapers to extract.
+ *
+ * @param username - The part before the @ symbol
+ * @param domain - The part after the @ symbol
+ * @param text - Optional display text (defaults to username(at)domain)
+ * @param className - Optional CSS class name
+ */
+export function ProtectedEmail({ username, domain, text, className }: ProtectedEmailProps) {
+  const [mounted, setMounted] = useState(false);
+
+  // Only assemble the email on the client side
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Display format before JavaScript runs (or for users without JS)
+  const fallbackText = text || `${username}(at)${domain}`;
+
+  // Only assemble the actual mailto link on the client side
+  const handleClick = (e: React.MouseEvent) => {
+    if (mounted) {
+      window.location.href = `mailto:${username}@${domain}`;
+      e.preventDefault();
+    }
+  };
+
+  return (
+    <a
+      aria-label={`Email address: ${username} at ${domain}`}
+      className={className}
+      data-email-protected="true"
+      href={mounted ? '#email-protected' : undefined}
+      onClick={handleClick}
+    >
+      {fallbackText}
+    </a>
+  );
+}

package/src/components/text.tsx

@@ -0,0 +1,38 @@
+import type { ComponentProps } from 'react';
+import { cva, type VariantProps } from '../utils/cn';
+
+const text = cva({
+  base: ['relative', 'block'],
+  defaultVariants: {
+    themeColor: 'primary',
+    variant: 'primary',
+  },
+  variants: {
+    themeColor: {
+      primary: [],
+    },
+    variant: {
+      code: ['font-light', 'font-monospace'],
+      primary: [],
+      subtitle: ['text-lg'],
+    },
+  },
+});
+
+export interface TextProps extends ComponentProps<'p'>, VariantProps<typeof text> {}
+
+export const Text = (props: TextProps) => {
+  const { children, className, variant, themeColor } = props;
+
+  return (
+    <div
+      className={text({
+        className,
+        themeColor,
+        variant,
+      })}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/unordered-list.tsx

@@ -0,0 +1,32 @@
+import type { ComponentProps } from 'react';
+import { cva, type VariantProps } from '../utils/cn';
+
+const ul = cva({
+  defaultVariants: {
+    variant: 'primary',
+  },
+  variants: {
+    variant: {
+      inline: ['flex', 'flex-wrap', 'list-none'],
+      primary: [],
+      unstyled: ['list-none', 'p-0'],
+    },
+  },
+});
+
+export interface UnorderedListProps extends ComponentProps<'ul'>, VariantProps<typeof ul> {}
+
+export const UnorderedList = (props: UnorderedListProps) => {
+  const { children, className, variant } = props;
+
+  return (
+    <ul
+      className={ul({
+        className,
+        variant,
+      })}
+    >
+      {children}
+    </ul>
+  );
+};

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

@@ -0,0 +1,18 @@
+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>() {
+  const location = useLocation();
+  const matchingRoutes = useMatches();
+  const route = useMemo(() => {
+    return matchingRoutes.find((route) => {
+      return route.pathname === location.pathname;
+    });
+  }, [matchingRoutes, location]);
+
+  return route?.data || (undefined as HeaderData);
+}

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

@@ -0,0 +1,20 @@
+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>) {
+  useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+        event.preventDefault();
+        ref?.current?.focus();
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [ref]);
+}

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

@@ -0,0 +1,19 @@
+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-media-query.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * A hook that returns a boolean indicating whether the current viewport matches the provided media query
+ * @param query The media query to check against (e.g. '(min-width: 768px)')
+ * @returns A boolean indicating whether the media query matches
+ */
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    // Create a media query list
+    const mediaQuery = window.matchMedia(query);
+
+    // Set the initial value
+    setMatches(mediaQuery.matches);
+
+    // Define a callback function to handle changes
+    const handleChange = (event: MediaQueryListEvent) => {
+      setMatches(event.matches);
+    };
+
+    // Add the event listener
+    mediaQuery.addEventListener('change', handleChange);
+
+    // Clean up
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, [query]);
+
+  return matches;
+}

package/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener('change', onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/src/hooks/use-nonce.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, test } from 'vitest';
+import { generateNonce } from './use-nonce';
+
+describe('generateNonce', () => {
+  test('generates a string', () => {
+    const nonce = generateNonce();
+    expect(typeof nonce).toBe('string');
+  });
+
+  test('generates a non-empty string', () => {
+    const nonce = generateNonce();
+    expect(nonce.length).toBeGreaterThan(0);
+  });
+
+  test('generates base64-encoded string', () => {
+    const nonce = generateNonce();
+    // Base64 characters: A-Z, a-z, 0-9, +, /, =
+    expect(nonce).toMatch(/^[A-Za-z0-9+/=]+$/);
+  });
+
+  test('generates unique nonces', () => {
+    const nonces = new Set<string>();
+    for (let i = 0; i < 100; i++) {
+      nonces.add(generateNonce());
+    }
+    // All 100 nonces should be unique
+    expect(nonces.size).toBe(100);
+  });
+
+  test('generates nonce of expected length', () => {
+    const nonce = generateNonce();
+    // 16 bytes encoded in base64 = 24 characters (with padding)
+    expect(nonce.length).toBe(24);
+  });
+});

package/src/hooks/use-nonce.ts

@@ -0,0 +1,20 @@
+/**
+ * Nonce Provider.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
+ */
+import { createContext, useContext } from 'react';
+
+export const NonceContext = createContext<string>('');
+export const NonceProvider = NonceContext.Provider;
+
+export const useNonce = () => useContext(NonceContext);
+
+/**
+ * Generate a cryptographically secure nonce for CSP.
+ * @returns A base64-encoded random nonce
+ */
+export function generateNonce(): string {
+  const array = new Uint8Array(16);
+  crypto.getRandomValues(array);
+  return btoa(String.fromCharCode(...array));
+}

package/src/hooks/use-orientation.ts

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Orientation type representing device orientation
+ */
+export type Orientation = 'portrait' | 'landscape';
+
+/**
+ * Hook that tracks the current device orientation
+ * @returns The current orientation ('portrait' or 'landscape')
+ */
+export function useOrientation(): Orientation {
+  const [orientation, setOrientation] = useState<Orientation>(() => {
+    // Initial orientation check
+    if (typeof window !== 'undefined') {
+      return window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+    }
+    return 'portrait'; // Default for SSR
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    // Handler to call on window resize
+    const handleResize = () => {
+      setOrientation(window.innerHeight > window.innerWidth ? 'portrait' : 'landscape');
+    };
+
+    // Set resize listener
+    window.addEventListener('resize', handleResize);
+
+    // Optional: Listen to orientation change event for mobile devices
+    window.addEventListener('orientationchange', handleResize);
+
+    // Call handler right away to set initial orientation
+    handleResize();
+
+    // Clean up
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('orientationchange', handleResize);
+    };
+  }, []);
+
+  return orientation;
+}

package/src/hooks/use-user.tsx

@@ -0,0 +1,72 @@
+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 {
+  /**
+   * The current authenticated user, or null if not authenticated
+   */
+  user: User | null;
+  /**
+   * Whether the user data is currently loading
+   */
+  isLoading: boolean;
+}
+
+/**
+ * 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 = createContext<UserContextType>(defaultContextValue);
+
+/**
+ * Props for the UserContextProvider component
+ */
+export interface UserContextProviderProps {
+  /**
+   * The current authenticated user, or null if not authenticated
+   */
+  user: User | null;
+  /**
+   * Whether the user data is currently loading
+   */
+  isLoading?: boolean;
+  /**
+   * Child components that will have access to the user context
+   */
+  children: ReactNode;
+}
+
+/**
+ * Provider component for the UserContext
+ */
+export function UserContextProvider({
+  user,
+  isLoading = false,
+  children,
+}: UserContextProviderProps) {
+  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/stories/BackgroundSlideshow.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { BackgroundSlideshow, type ImageData } from '../components/background-slideshow';
+
+const meta: Meta<typeof BackgroundSlideshow> = {
+  component: BackgroundSlideshow,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  title: 'Components/BackgroundSlideshow',
+};
+
+export default meta;
+type Story = StoryObj<typeof BackgroundSlideshow>;
+
+const sampleImages: ImageData[] = [
+  {
+    at: { de: 'Bild 1', en: 'Image 1' },
+    fn: 'image1.jpg',
+    hu: 200,
+    id: '1',
+    po: false,
+  },
+  {
+    at: { de: 'Bild 2', en: 'Image 2' },
+    fn: 'image2.jpg',
+    hu: 150,
+    id: '2',
+    po: false,
+  },
+  {
+    at: { de: 'Bild 3', en: 'Image 3' },
+    fn: 'image3.jpg',
+    hu: 100,
+    id: '3',
+    po: false,
+  },
+];
+
+export const Default: Story = {
+  args: {
+    baseUrl: 'https://via.placeholder.com/{format}?text=Image+{id}',
+    className: 'h-[400px] w-full',
+    images: sampleImages,
+    locale: 'en',
+  },
+};
+
+export const WithoutSlideshow: Story = {
+  args: {
+    baseUrl: 'https://via.placeholder.com/{format}?text=Static',
+    className: 'h-[400px] w-full',
+    images: sampleImages,
+    locale: 'en',
+    slideshow: false,
+  },
+};
+
+export const FastTransition: Story = {
+  args: {
+    baseUrl: 'https://via.placeholder.com/{format}?text=Fast',
+    className: 'h-[400px] w-full',
+    images: sampleImages,
+    locale: 'en',
+    slideshowInterval: 2000,
+    transitionDuration: 1000,
+  },
+};

package/src/stories/BlurryGradient.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { BlurryGradient } from '../components/blurry-gradient';
+
+const meta: Meta<typeof BlurryGradient> = {
+  component: BlurryGradient,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  title: 'Components/BlurryGradient',
+};
+
+export default meta;
+type Story = StoryObj<typeof BlurryGradient>;
+
+export const Default: Story = {
+  args: {
+    neutralColor: '#f0f0f0',
+    primaryColor: '#3b82f6',
+    secondaryColor: '#8b5cf6',
+    style: { height: '400px', width: '400px' },
+  },
+};
+
+export const WarmColors: Story = {
+  args: {
+    neutralColor: '#fef3c7',
+    primaryColor: '#f97316',
+    secondaryColor: '#ef4444',
+    style: { height: '400px', width: '400px' },
+  },
+};
+
+export const CoolColors: Story = {
+  args: {
+    neutralColor: '#e0f2fe',
+    primaryColor: '#0ea5e9',
+    secondaryColor: '#06b6d4',
+    style: { height: '400px', width: '400px' },
+  },
+};
+
+export const NatureColors: Story = {
+  args: {
+    neutralColor: '#fef9c3',
+    primaryColor: '#22c55e',
+    secondaryColor: '#84cc16',
+    style: { height: '400px', width: '400px' },
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    neutralColor: '#f0f0f0',
+    primaryColor: '#3b82f6',
+    secondaryColor: '#8b5cf6',
+    style: { height: '200px', width: '100%' },
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};