@regardio/react 0.4.5 → 0.5.1

package/src/components/maptiler-map.tsx

@@ -1,181 +0,0 @@
-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/text.tsx

@@ -1,38 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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-nonce.test.ts

@@ -1,35 +0,0 @@
-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/stories/Box.stories.tsx

@@ -1,83 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Box } from '../components/box';
-
-const meta: Meta<typeof Box> = {
-  component: Box,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  title: 'Components/Box',
-};
-
-export default meta;
-type Story = StoryObj<typeof Box>;
-
-export const Default: Story = {
-  args: {
-    children: 'Default Box',
-  },
-};
-
-export const Container: Story = {
-  args: {
-    children: 'Container Box',
-    variant: 'container',
-  },
-};
-
-export const Flex: Story = {
-  args: {
-    children: (
-      <>
-        <span>Flex Item 1</span>
-        <span>Flex Item 2</span>
-        <span>Flex Item 3</span>
-      </>
-    ),
-    variant: 'flex',
-  },
-};
-
-export const Grid: Story = {
-  args: {
-    children: (
-      <>
-        <div>Grid Item 1</div>
-        <div>Grid Item 2</div>
-        <div>Grid Item 3</div>
-      </>
-    ),
-    variant: 'grid',
-  },
-};
-
-export const Code: Story = {
-  args: {
-    children: "const example = 'code block';",
-    variant: 'code',
-  },
-};
-
-export const AsSection: Story = {
-  args: {
-    as: 'section',
-    children: 'This is rendered as a section element',
-    variant: 'section',
-  },
-};
-
-export const AllVariants: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      <Box variant="primary">Primary (default)</Box>
-      <Box variant="container">Container</Box>
-      <Box variant="flex">Flex</Box>
-      <Box variant="grid">Grid</Box>
-      <Box variant="code">Code</Box>
-      <Box variant="section">Section</Box>
-      <Box variant="aside">Aside</Box>
-      <Box variant="main">Main</Box>
-    </div>
-  ),
-};

package/src/stories/Carousel.stories.tsx

@@ -1,95 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from '../components/carousel';
-
-const meta: Meta<typeof Carousel> = {
-  component: Carousel,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  title: 'Components/Carousel',
-};
-
-export default meta;
-type Story = StoryObj<typeof Carousel>;
-
-const SlideCard = ({ children }: { children: React.ReactNode }) => (
-  <div
-    style={{
-      alignItems: 'center',
-      background: '#f0f0f0',
-      border: '1px solid #ddd',
-      borderRadius: '8px',
-      display: 'flex',
-      height: '200px',
-      justifyContent: 'center',
-      width: '300px',
-    }}
-  >
-    {children}
-  </div>
-);
-
-export const Default: Story = {
-  render: () => (
-    <Carousel className="w-full max-w-md">
-      <CarouselContent className="gap-4">
-        <CarouselItem>
-          <SlideCard>Slide 1</SlideCard>
-        </CarouselItem>
-        <CarouselItem>
-          <SlideCard>Slide 2</SlideCard>
-        </CarouselItem>
-        <CarouselItem>
-          <SlideCard>Slide 3</SlideCard>
-        </CarouselItem>
-      </CarouselContent>
-    </Carousel>
-  ),
-};
-
-export const WithControls: Story = {
-  render: () => (
-    <Carousel className="w-full max-w-md">
-      <CarouselContent className="gap-4">
-        <CarouselItem>
-          <SlideCard>Slide 1</SlideCard>
-        </CarouselItem>
-        <CarouselItem>
-          <SlideCard>Slide 2</SlideCard>
-        </CarouselItem>
-        <CarouselItem>
-          <SlideCard>Slide 3</SlideCard>
-        </CarouselItem>
-      </CarouselContent>
-      <div className="flex justify-center gap-4 mt-4">
-        <CarouselPrevious className="px-4 py-2 bg-gray-200 rounded">Previous</CarouselPrevious>
-        <CarouselNext className="px-4 py-2 bg-gray-200 rounded">Next</CarouselNext>
-      </div>
-    </Carousel>
-  ),
-};
-
-export const ManySlides: Story = {
-  render: () => (
-    <Carousel className="w-full max-w-md">
-      <CarouselContent className="gap-4">
-        {[1, 2, 3, 4, 5, 6].map((i) => (
-          <CarouselItem key={i}>
-            <SlideCard>Slide {i}</SlideCard>
-          </CarouselItem>
-        ))}
-      </CarouselContent>
-      <div className="flex justify-center gap-4 mt-4">
-        <CarouselPrevious className="px-4 py-2 bg-gray-200 rounded">←</CarouselPrevious>
-        <CarouselNext className="px-4 py-2 bg-gray-200 rounded">→</CarouselNext>
-      </div>
-    </Carousel>
-  ),
-};

package/src/stories/DefinitionList.stories.tsx

@@ -1,51 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Dd, DefinitionList, Dt } from '../components/definition-list';
-
-const meta: Meta<typeof DefinitionList> = {
-  component: DefinitionList,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  title: 'Components/DefinitionList',
-};
-
-export default meta;
-type Story = StoryObj<typeof DefinitionList>;
-
-export const Default: Story = {
-  render: () => (
-    <DefinitionList>
-      <Dt>Term 1</Dt>
-      <Dd>Definition for term 1</Dd>
-      <Dt>Term 2</Dt>
-      <Dd>Definition for term 2</Dd>
-      <Dt>Term 3</Dt>
-      <Dd>Definition for term 3</Dd>
-    </DefinitionList>
-  ),
-};
-
-export const Unstyled: Story = {
-  render: () => (
-    <DefinitionList variant="unstyled">
-      <Dt>Term 1</Dt>
-      <Dd>Definition for term 1</Dd>
-      <Dt>Term 2</Dt>
-      <Dd>Definition for term 2</Dd>
-    </DefinitionList>
-  ),
-};
-
-export const ContactInfo: Story = {
-  render: () => (
-    <DefinitionList>
-      <Dt>Email</Dt>
-      <Dd>contact@example.com</Dd>
-      <Dt>Phone</Dt>
-      <Dd>+1 234 567 890</Dd>
-      <Dt>Address</Dt>
-      <Dd>123 Main Street, City, Country</Dd>
-    </DefinitionList>
-  ),
-};

package/src/stories/Item.stories.tsx

@@ -1,79 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { MemoryRouter } from 'react-router';
-import { Item } from '../components/item';
-
-const meta: Meta<typeof Item> = {
-  component: Item,
-  decorators: [
-    (Story) => (
-      <MemoryRouter>
-        <Story />
-      </MemoryRouter>
-    ),
-  ],
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  title: 'Components/Item',
-};
-
-export default meta;
-type Story = StoryObj<typeof Item>;
-
-export const Default: Story = {
-  args: {
-    children: <div className="p-4">Item content</div>,
-  },
-};
-
-export const WithLink: Story = {
-  args: {
-    children: <div className="p-4">Clickable item</div>,
-    link: '/example',
-  },
-};
-
-export const WidthVariants: Story = {
-  render: () => (
-    <div className="grid grid-cols-12 gap-4">
-      <Item width="xs">
-        <div className="p-2 bg-gray-100">XS</div>
-      </Item>
-      <Item width="sm">
-        <div className="p-2 bg-gray-100">SM</div>
-      </Item>
-      <Item width="md">
-        <div className="p-2 bg-gray-100">MD</div>
-      </Item>
-      <Item width="lg">
-        <div className="p-2 bg-gray-100">LG</div>
-      </Item>
-      <Item width="full">
-        <div className="p-2 bg-gray-100">Full</div>
-      </Item>
-    </div>
-  ),
-};
-
-export const ThemeColors: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
-      <Item themeColor="blue">
-        <div className="p-4">Blue</div>
-      </Item>
-      <Item themeColor="green">
-        <div className="p-4">Green</div>
-      </Item>
-      <Item themeColor="red">
-        <div className="p-4">Red</div>
-      </Item>
-      <Item themeColor="orange">
-        <div className="p-4">Orange</div>
-      </Item>
-      <Item themeColor="purple">
-        <div className="p-4">Purple</div>
-      </Item>
-    </div>
-  ),
-};

package/src/stories/ListItem.stories.tsx

@@ -1,38 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ListItem } from '../components/list-item';
-import { UnorderedList } from '../components/unordered-list';
-
-const meta: Meta<typeof ListItem> = {
-  component: ListItem,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  title: 'Components/ListItem',
-};
-
-export default meta;
-type Story = StoryObj<typeof ListItem>;
-
-export const Default: Story = {
-  args: {
-    children: 'List item content',
-  },
-};
-
-export const InList: Story = {
-  render: () => (
-    <UnorderedList>
-      <ListItem>First item</ListItem>
-      <ListItem>Second item</ListItem>
-      <ListItem>Third item</ListItem>
-    </UnorderedList>
-  ),
-};
-
-export const WithCustomClass: Story = {
-  args: {
-    children: 'Styled list item',
-    className: 'font-bold text-blue-600',
-  },
-};