@regardio/react 0.3.2

package/src/components/link.tsx

@@ -0,0 +1,206 @@
+import { createContext, useCallback, useContext } from 'react';
+import type { NavLinkProps, NavLinkRenderProps } from 'react-router';
+import { NavLink } from 'react-router';
+import { cva, type VariantProps } from '../utils/cn';
+import { lowerCaseSzett } from '../utils/text';
+
+/**
+ * Context for providing a path resolver function.
+ * This allows projects to inject their own localization logic.
+ */
+export type PathResolver = (routeKey: string) => string;
+
+const PathResolverContext = createContext<PathResolver | null>(null);
+
+export const PathResolverProvider = PathResolverContext.Provider;
+
+export function usePathResolver(): PathResolver | null {
+  return useContext(PathResolverContext);
+}
+
+export interface LinkBaseProps extends Omit<NavLinkProps, 'to'> {
+  to?: string | Partial<{ pathname?: string; search?: string; hash?: string }> | undefined;
+  routeKey?: string;
+  viewTransition?: boolean;
+}
+
+export const LinkBase = ({
+  className,
+  to,
+  routeKey,
+  children,
+  onClick,
+  viewTransition = true,
+  ...props
+}: LinkBaseProps) => {
+  const pathResolver = usePathResolver();
+
+  let path: string;
+
+  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: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+      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 <>{typeof children === 'function' ? null : children}</>;
+  }
+
+  if (isExternal) {
+    const externalState: NavLinkRenderProps = {
+      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 (
+      <a
+        className={resolvedClassName}
+        href={path}
+        onClick={handleClick}
+        style={resolvedStyle}
+      >
+        {typeof children === 'function' ? children(externalState) : children}
+      </a>
+    );
+  }
+
+  return (
+    <NavLink
+      {...props}
+      className={className}
+      onClick={handleClick}
+      to={path}
+      viewTransition={viewTransition}
+    >
+      {children}
+    </NavLink>
+  );
+};
+
+const link = cva({
+  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'],
+    },
+  },
+});
+
+export interface LinkProps extends Omit<NavLinkProps, 'to'>, VariantProps<typeof link> {
+  to?: string | Partial<{ pathname?: string; search?: string; hash?: string }>;
+  routeKey?: string;
+  viewTransition?: boolean;
+}
+
+export const Link = ({
+  arrow,
+  children,
+  className,
+  routeKey,
+  to,
+  variant,
+  viewTransition,
+  ...props
+}: LinkProps) => {
+  return (
+    <LinkBase
+      {...props}
+      className={link({
+        arrow,
+        className,
+        variant,
+      })}
+      routeKey={routeKey}
+      to={to}
+      viewTransition={viewTransition}
+    >
+      {lowerCaseSzett(children as React.ReactNode)}
+    </LinkBase>
+  );
+};
+
+export interface MarkdownLinkProps extends Omit<LinkProps, 'to'> {
+  href?: string;
+}
+
+export const MarkdownLink: React.FC<MarkdownLinkProps> = ({ children, href, ...props }) => {
+  if (href) {
+    return (
+      <Link
+        to={href}
+        {...props}
+      >
+        {children}
+      </Link>
+    );
+  }
+
+  return null;
+};

package/src/components/list-item.tsx

@@ -0,0 +1,30 @@
+import type { ComponentProps } from 'react';
+import { cva, type VariantProps } from '../utils/cn';
+
+const li = cva({
+  defaultVariants: {
+    variant: 'primary',
+  },
+  variants: {
+    variant: {
+      primary: [],
+    },
+  },
+});
+
+export interface ListItemProps extends ComponentProps<'li'>, VariantProps<typeof li> {}
+
+export const ListItem = (props: ListItemProps) => {
+  const { children, className, variant } = props;
+
+  return (
+    <li
+      className={li({
+        className,
+        variant,
+      })}
+    >
+      {children}
+    </li>
+  );
+};

package/src/components/maptiler-map.tsx

@@ -0,0 +1,181 @@
+import { config, Map as MapTiler, Marker, Popup } from '@maptiler/sdk';
+import { useEffect, useRef } from 'react';
+import '@maptiler/sdk/dist/maptiler-sdk.css';
+
+interface MapTilerMarker {
+  lat: number;
+  lng: number;
+  id: string;
+  content?: string;
+  htmlContent?: string;
+  offset?: { x: number; y: number };
+}
+
+interface MapTilerMapProps {
+  markers: MapTilerMarker[];
+  center?: { lat: number; lng: number };
+  zoom?: number;
+  mapStyle?: string;
+  apiKey: string;
+  showPopupsImmediately?: boolean;
+}
+
+export const MapTilerMap = ({
+  markers,
+  center,
+  zoom = 12,
+  mapStyle = 'streets',
+  apiKey,
+  showPopupsImmediately = false,
+}: MapTilerMapProps) => {
+  const mapContainerRef = useRef<HTMLDivElement>(null);
+  const mapRef = useRef<MapTiler | null>(null);
+  const markersRef = useRef<Marker[]>([]);
+
+  useEffect(() => {
+    if (!mapContainerRef.current || typeof window === 'undefined') return;
+
+    // Set MapTiler API key globally
+    config.apiKey = apiKey;
+
+    // Calculate center
+    let calculatedCenter: [number, number];
+    if (center) {
+      calculatedCenter = [center.lng, center.lat];
+    } else if (markers.length > 0) {
+      const firstMarker = markers[0];
+      if (firstMarker) {
+        calculatedCenter = [firstMarker.lng, firstMarker.lat];
+      } else {
+        calculatedCenter = [13.404954, 52.520008]; // Berlin [lng, lat]
+      }
+    } else {
+      calculatedCenter = [13.404954, 52.520008]; // Berlin [lng, lat]
+    }
+
+    // Initialize map with proper style URL
+    const map = new MapTiler({
+      center: calculatedCenter,
+      container: mapContainerRef.current,
+      style: `https://api.maptiler.com/maps/${mapStyle}/style.json?key=${apiKey}`,
+      zoom: zoom,
+    });
+
+    // Handle missing images gracefully - provide fallback markers
+    map.on('styleimagemissing', (e) => {
+      const id = e.id;
+      console.warn(`Missing sprite image: ${id}`);
+      // Don't attempt to add missing images, let the SDK handle it gracefully
+    });
+
+    mapRef.current = map;
+
+    // Add markers
+    const newMarkers: Marker[] = [];
+
+    markers.forEach((marker) => {
+      const markerInstance = new Marker().setLngLat([marker.lng, marker.lat]).addTo(map);
+
+      // Create popup content
+      let popupContent = '';
+      if (marker.htmlContent) {
+        popupContent = marker.htmlContent;
+      } else if (marker.content) {
+        popupContent = marker.content;
+      }
+
+      if (popupContent) {
+        const popup = new Popup({
+          closeButton: false,
+          offset: marker.offset ? [marker.offset.x, marker.offset.y] : [0, 0],
+        }).setHTML(popupContent);
+
+        markerInstance.setPopup(popup);
+
+        if (showPopupsImmediately) {
+          markerInstance.togglePopup();
+        }
+      }
+
+      newMarkers.push(markerInstance);
+    });
+
+    markersRef.current = newMarkers;
+
+    // Cleanup function
+    return () => {
+      if (mapRef.current) {
+        mapRef.current.remove();
+        mapRef.current = null;
+      }
+      markersRef.current = [];
+    };
+  }, [markers, apiKey, mapStyle, zoom, center, showPopupsImmediately]);
+
+  // Update markers when they change
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map) return;
+
+    // Remove existing markers
+    markersRef.current.forEach((marker) => {
+      marker.remove();
+    });
+    markersRef.current = [];
+
+    // Add new markers
+    const newMarkers: Marker[] = [];
+
+    markers.forEach((marker) => {
+      const markerInstance = new Marker().setLngLat([marker.lng, marker.lat]).addTo(map);
+
+      // Create popup content
+      let popupContent = '';
+      if (marker.htmlContent) {
+        popupContent = marker.htmlContent;
+      } else if (marker.content) {
+        popupContent = marker.content;
+      }
+
+      if (popupContent) {
+        const popup = new Popup({
+          closeButton: false,
+          offset: marker.offset ? [marker.offset.x, marker.offset.y] : [0, 0],
+        }).setHTML(popupContent);
+
+        markerInstance.setPopup(popup);
+
+        if (showPopupsImmediately) {
+          markerInstance.togglePopup();
+        }
+      }
+
+      newMarkers.push(markerInstance);
+    });
+
+    markersRef.current = newMarkers;
+
+    if (markers.length > 1) {
+      const lngs = markers.map((m) => m.lng);
+      const lats = markers.map((m) => m.lat);
+      const minLng = Math.min(...lngs);
+      const maxLng = Math.max(...lngs);
+      const minLat = Math.min(...lats);
+      const maxLat = Math.max(...lats);
+      map.fitBounds(
+        [
+          [minLng, minLat],
+          [maxLng, maxLat],
+        ],
+        { padding: 20 },
+      );
+    }
+  }, [markers, showPopupsImmediately]);
+
+  return (
+    <div
+      className="h-full w-full"
+      ref={mapContainerRef}
+    />
+  );
+};

package/src/components/markdown-container.tsx

@@ -0,0 +1,153 @@
+import { MDXProvider } from '@mdx-js/react';
+import Markdown, { type MarkdownToJSX } from 'markdown-to-jsx';
+import type React from 'react';
+import { cn } from '../utils/cn';
+import { replaceSpecialChars } from '../utils/text';
+
+const doubleNewlineRegex = /\n\n+/;
+
+function processTextOutsideMDXComponents(text: string, locale: string): string {
+  // Regex to match MDX components or HTML tags
+  const mdxTagRegex = /(<\/?[A-Za-z][^>]*>)/g;
+
+  return text
+    .split(mdxTagRegex)
+    .map((part) => (mdxTagRegex.test(part) ? part : replaceSpecialChars(part, locale)))
+    .join('');
+}
+
+export function transformLink(
+  to: string | Partial<{ pathname?: string; search?: string; hash?: string }> | undefined,
+): string {
+  const targetDomainSubstring = 'regard';
+
+  if (typeof to === 'string') {
+    try {
+      const url = new URL(to);
+      if (url.hostname.includes(targetDomainSubstring)) {
+        return url.pathname + (url.search ?? '') + (url.hash ?? '');
+      }
+      return to;
+    } catch {
+      return to;
+    }
+  } else if (to?.pathname) {
+    return to.pathname + (to.search ?? '') + (to.hash ?? '');
+  }
+
+  return '';
+}
+
+export type MDXComponent<P = object> = React.ComponentType<P>;
+export type MarkdownOverrides = MarkdownToJSX.Options['overrides'];
+
+export type MarkdownContainerProps = React.PropsWithChildren<{
+  characters?: number;
+  className?: string;
+  locale: string;
+  paragraphs?: number;
+  sentences?: number;
+  mdxComponents?: Record<string, MDXComponent>;
+  markdownOverrides?: MarkdownOverrides;
+}>;
+
+const truncateText = (
+  text: string,
+  maxSentences: number | undefined,
+  maxCharacters: number | undefined,
+  maxParagraphs: number | undefined,
+) => {
+  if (maxSentences === undefined && maxCharacters === undefined && maxParagraphs === undefined) {
+    return text;
+  }
+
+  const paragraphs = text.split(doubleNewlineRegex);
+
+  let truncatedText = '';
+  let charCount = 0;
+  let sentenceCount = 0;
+  let paragraphCount = 0;
+
+  for (const paragraph of paragraphs) {
+    if (maxParagraphs !== undefined && paragraphCount >= maxParagraphs) {
+      break;
+    }
+
+    const sentenceRegex = /(?<!\.\.\.)(?<!\b\w\.)\.(?:\s+|\n+)/g;
+    const parts = paragraph.split(sentenceRegex);
+    const delimiters = paragraph.match(sentenceRegex) || [];
+
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      const delimiter = delimiters[i] || '';
+
+      if (part !== undefined) {
+        if (
+          (maxSentences === undefined || sentenceCount < maxSentences) &&
+          (maxCharacters === undefined ||
+            charCount + part.length + delimiter.length <= maxCharacters)
+        ) {
+          truncatedText += part + delimiter;
+          charCount += part.length + delimiter.length;
+
+          if (delimiter.includes('.')) {
+            sentenceCount++;
+          }
+        } else {
+          break;
+        }
+      }
+    }
+
+    paragraphCount++;
+
+    if (
+      (maxSentences !== undefined && sentenceCount >= maxSentences) ||
+      (maxCharacters !== undefined && charCount >= maxCharacters)
+    ) {
+      break;
+    }
+
+    if (paragraphCount < paragraphs.length) {
+      truncatedText += '\n\n';
+    }
+  }
+
+  return truncatedText.trim();
+};
+
+export const MarkdownContainer: React.FC<MarkdownContainerProps> = (props) => {
+  const rawText = props.children?.toString() || '';
+
+  let processedText = processTextOutsideMDXComponents(rawText, props.locale);
+
+  const shouldTruncate =
+    Number.isInteger(props.sentences) ||
+    Number.isInteger(props.characters) ||
+    Number.isInteger(props.paragraphs);
+
+  if (shouldTruncate) {
+    processedText = truncateText(
+      processedText,
+      props.sentences,
+      props.characters,
+      props.paragraphs,
+    );
+  }
+
+  return (
+    <MDXProvider components={props.mdxComponents}>
+      <Markdown
+        className={cn('markdown', props.className)}
+        options={{
+          disableParsingRawHTML: false,
+          forceWrapper: true,
+          tagfilter: false,
+          ...(props.markdownOverrides ? { overrides: props.markdownOverrides } : {}),
+        }}
+      >
+        {processedText}
+      </Markdown>
+    </MDXProvider>
+  );
+};

package/src/components/password-input.tsx

@@ -0,0 +1,49 @@
+import { Button } from '@base-ui/react/button';
+import { Input } from '@base-ui/react/input';
+import { useState } from 'react';
+import { cn } from '../utils/cn';
+
+export interface InputProps extends React.ComponentPropsWithoutRef<typeof Input> {}
+
+export interface PasswordInputProps extends InputProps {
+  className?: string;
+}
+
+const PasswordInput = ({ className, ...props }: PasswordInputProps) => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <div className={'relative'}>
+      <Input
+        autoComplete={'off'}
+        className={cn(className)}
+        type={showPassword ? 'text' : 'password'}
+        {...props}
+      />
+      <Button
+        className={cn(
+          'absolute',
+          'right-[14px]',
+          'top-[35px]',
+          'flex',
+          'h-6',
+          'w-[20px]',
+          'cursor-pointer',
+          'flex-col',
+          'items-end',
+          'justify-center',
+          'text-gray-500',
+        )}
+        onClick={togglePasswordVisibility}
+      >
+        {showPassword ? 'Off' : 'On'}
+      </Button>
+    </div>
+  );
+};
+
+export { PasswordInput };