@regardio/react 0.3.2

package/src/stories/Box.stories.tsx

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

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

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Countdown } from '../components/countdown';
+
+const meta: Meta<typeof Countdown> = {
+  component: Countdown,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  title: 'Components/Countdown',
+};
+
+export default meta;
+type Story = StoryObj<typeof Countdown>;
+
+export const Default: Story = {};

package/src/stories/DefinitionList.stories.tsx

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

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { createMemoryRouter, RouterProvider } from 'react-router';
+import { GenericError, getErrorDescriptor } from '../components/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 router = createMemoryRouter(
+    [
+      {
+        element: <GenericError />,
+        errorElement: <GenericError />,
+        loader: () => {
+          throw new Response('Not Found', { status, statusText: 'Not Found' });
+        },
+        path: '/',
+      },
+    ],
+    { initialEntries: ['/'] },
+  );
+
+  return <RouterProvider router={router} />;
+};
+
+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/stories/Heading.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Heading } from '../components/heading';
+
+const meta: Meta<typeof Heading> = {
+  component: Heading,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  title: 'Components/Heading',
+};
+
+export default meta;
+type Story = StoryObj<typeof Heading>;
+
+export const Default: Story = {
+  args: {
+    children: 'Default Heading',
+  },
+};
+
+export const Level1: Story = {
+  args: {
+    children: 'Heading Level 1',
+    level: 1,
+  },
+};
+
+export const Level2: Story = {
+  args: {
+    children: 'Heading Level 2',
+    level: 2,
+  },
+};
+
+export const Level3: Story = {
+  args: {
+    children: 'Heading Level 3',
+    level: 3,
+  },
+};
+
+export const Level4: Story = {
+  args: {
+    children: 'Heading Level 4',
+    level: 4,
+  },
+};
+
+export const Level5: Story = {
+  args: {
+    children: 'Heading Level 5',
+    level: 5,
+  },
+};
+
+export const Level6: Story = {
+  args: {
+    children: 'Heading Level 6',
+    level: 6,
+  },
+};
+
+export const WithGermanText: Story = {
+  args: {
+    children: 'Größe und Maße',
+    level: 2,
+  },
+};
+
+export const AllLevels: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      <Heading level={1}>Heading Level 1</Heading>
+      <Heading level={2}>Heading Level 2</Heading>
+      <Heading level={3}>Heading Level 3</Heading>
+      <Heading level={4}>Heading Level 4</Heading>
+      <Heading level={5}>Heading Level 5</Heading>
+      <Heading level={6}>Heading Level 6</Heading>
+    </div>
+  ),
+};

package/src/stories/Highlight.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Highlight } from '../components/highlight';
+
+const meta: Meta<typeof Highlight> = {
+  component: Highlight,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  title: 'Components/Highlight',
+};
+
+export default meta;
+type Story = StoryObj<typeof Highlight>;
+
+export const Default: Story = {
+  args: {
+    children: 'Highlighted text',
+  },
+};
+
+export const InParagraph: Story = {
+  render: () => (
+    <p>
+      This is a paragraph with <Highlight>highlighted text</Highlight> in the middle.
+    </p>
+  ),
+};

package/src/stories/IconButton.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { IconButton } from '../components/icon-button';
+
+const meta: Meta<typeof IconButton> = {
+  component: IconButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  title: 'Components/IconButton',
+};
+
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+
+const PlusIcon = () => (
+  <svg
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    strokeWidth="2"
+    viewBox="0 0 24 24"
+    width="24"
+  >
+    <line
+      x1="12"
+      x2="12"
+      y1="5"
+      y2="19"
+    />
+    <line
+      x1="5"
+      x2="19"
+      y1="12"
+      y2="12"
+    />
+  </svg>
+);
+
+const CloseIcon = () => (
+  <svg
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    strokeWidth="2"
+    viewBox="0 0 24 24"
+    width="24"
+  >
+    <line
+      x1="18"
+      x2="6"
+      y1="6"
+      y2="18"
+    />
+    <line
+      x1="6"
+      x2="18"
+      y1="6"
+      y2="18"
+    />
+  </svg>
+);
+
+export const Default: Story = {
+  args: {
+    icon: <PlusIcon />,
+  },
+};
+
+export const Close: Story = {
+  args: {
+    icon: <CloseIcon />,
+  },
+};
+
+export const WithCustomClass: Story = {
+  args: {
+    className: 'p-2 bg-gray-100 rounded hover:bg-gray-200',
+    icon: <PlusIcon />,
+  },
+};
+
+export const AllIcons: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px' }}>
+      <IconButton icon={<PlusIcon />} />
+      <IconButton icon={<CloseIcon />} />
+    </div>
+  ),
+};

package/src/stories/If.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { If } from '../components/if';
+
+const meta: Meta<typeof If> = {
+  component: If,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  title: 'Components/If',
+};
+
+export default meta;
+type Story = StoryObj<typeof If>;
+
+export const TrueCondition: Story = {
+  args: {
+    children: <p>This content is shown because condition is true</p>,
+    condition: true,
+  },
+};
+
+export const FalseCondition: Story = {
+  args: {
+    children: <p>This content is hidden</p>,
+    condition: false,
+  },
+};
+
+export const WithFallback: Story = {
+  args: {
+    children: <p>Primary content</p>,
+    condition: false,
+    fallback: <p>Fallback content shown when condition is false</p>,
+  },
+};
+
+export const WithValue: Story = {
+  render: () => (
+    <If condition={{ age: 30, name: 'John' }}>
+      {(user) => (
+        <p>
+          User: {user.name}, Age: {user.age}
+        </p>
+      )}
+    </If>
+  ),
+};
+
+export const NullCondition: Story = {
+  args: {
+    children: <p>This won't show</p>,
+    condition: null,
+    fallback: <p>Condition was null</p>,
+  },
+};
+
+export const ZeroCondition: Story = {
+  args: {
+    children: <p>This won't show</p>,
+    condition: 0,
+    fallback: <p>Condition was 0 (falsy)</p>,
+  },
+};
+
+export const EmptyStringCondition: Story = {
+  args: {
+    children: <p>This won't show</p>,
+    condition: '',
+    fallback: <p>Condition was empty string (falsy)</p>,
+  },
+};

package/src/stories/Iframe.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Iframe } from '../components/iframe';
+
+const meta: Meta<typeof Iframe> = {
+  component: Iframe,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  title: 'Components/Iframe',
+};
+
+export default meta;
+type Story = StoryObj<typeof Iframe>;
+
+export const YouTubeVideo: Story = {
+  args: {
+    src: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
+    title: 'YouTube Video',
+  },
+};
+
+export const WithCustomClass: Story = {
+  args: {
+    className: 'rounded-lg shadow-lg',
+    src: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
+    title: 'Styled YouTube Video',
+  },
+};

package/src/stories/Item.stories.tsx

@@ -0,0 +1,79 @@
+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>
+  ),
+};