@regardio/react 0.3.2

package/src/stories/Link.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { MemoryRouter } from 'react-router';
+import { Link } from '../components/link';
+
+const meta: Meta<typeof Link> = {
+  component: Link,
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  title: 'Components/Link',
+};
+
+export default meta;
+type Story = StoryObj<typeof Link>;
+
+export const Default: Story = {
+  args: {
+    children: 'Default Link',
+    to: '/example',
+  },
+};
+
+export const External: Story = {
+  args: {
+    children: 'External Link',
+    to: 'https://example.com',
+  },
+};
+
+export const WithGermanText: Story = {
+  args: {
+    children: 'Größenübersicht',
+    to: '/sizes',
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      <Link to="/internal">Internal Link</Link>
+      <Link to="https://example.com">External Link</Link>
+      <Link
+        className="text-blue-600 underline"
+        to="/styled"
+      >
+        Styled Link
+      </Link>
+    </div>
+  ),
+};

package/src/stories/ListItem.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ListItem } from '../components/list-item';
+
+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: () => (
+    <ul>
+      <ListItem>First item</ListItem>
+      <ListItem>Second item</ListItem>
+      <ListItem>Third item</ListItem>
+    </ul>
+  ),
+};
+
+export const WithCustomClass: Story = {
+  args: {
+    children: 'Styled list item',
+    className: 'font-bold text-blue-600',
+  },
+};

package/src/stories/MarkdownContainer.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { MarkdownContainer } from '../components/markdown-container';
+
+const meta: Meta<typeof MarkdownContainer> = {
+  component: MarkdownContainer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  title: 'Components/MarkdownContainer',
+};
+
+export default meta;
+type Story = StoryObj<typeof MarkdownContainer>;
+
+export const Default: Story = {
+  args: {
+    children: `# Hello World
+
+This is a **markdown** paragraph with *italic* text.
+
+## Features
+
+- List item 1
+- List item 2
+- List item 3
+
+[Link to example](https://example.com)`,
+    locale: 'en',
+  },
+};
+
+export const GermanLocale: Story = {
+  args: {
+    children: `# Willkommen
+
+Dies ist ein "Beispieltext" mit typografischen Anführungszeichen.
+
+## Funktionen
+
+- Punkt 1
+- Punkt 2`,
+    locale: 'de',
+  },
+};
+
+export const WithTruncation: Story = {
+  args: {
+    children:
+      'This is a long paragraph that will be truncated. It contains multiple sentences. Each sentence adds more content. The truncation should work properly.',
+    locale: 'en',
+    sentences: 2,
+  },
+};
+
+export const WithParagraphLimit: Story = {
+  args: {
+    children: `First paragraph with some content.
+
+Second paragraph with more content.
+
+Third paragraph that should be hidden.
+
+Fourth paragraph also hidden.`,
+    locale: 'en',
+    paragraphs: 2,
+  },
+};
+
+export const WithCharacterLimit: Story = {
+  args: {
+    characters: 50,
+    children: 'This is a long text that will be truncated after a certain number of characters.',
+    locale: 'en',
+  },
+};

package/src/stories/PasswordInput.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PasswordInput } from '../components/password-input';
+
+const meta: Meta<typeof PasswordInput> = {
+  component: PasswordInput,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  title: 'Components/PasswordInput',
+};
+
+export default meta;
+type Story = StoryObj<typeof PasswordInput>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter password',
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    defaultValue: 'secretpassword',
+    placeholder: 'Enter password',
+  },
+};
+
+export const WithCustomClass: Story = {
+  args: {
+    className: 'border border-gray-300 rounded px-3 py-2',
+    placeholder: 'Styled password input',
+  },
+};

package/src/stories/Picture.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Picture } from '../components/picture';
+
+const meta: Meta<typeof Picture> = {
+  component: Picture,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  title: 'Components/Picture',
+};
+
+export default meta;
+type Story = StoryObj<typeof Picture>;
+
+export const SimpleImage: Story = {
+  args: {
+    alt: 'Placeholder image',
+    baseUrl: 'https://via.placeholder.com/400x300',
+  },
+};
+
+export const WithFormats: Story = {
+  args: {
+    alt: 'Responsive image',
+    baseUrl: 'https://via.placeholder.com/{format}',
+    formats: [
+      { size: '480x360', width: 480 },
+      { size: '800x600', width: 800 },
+      { size: '1200x900', width: 1200 },
+    ],
+  },
+};
+
+export const WithCustomSizes: Story = {
+  args: {
+    alt: 'Custom sizes image',
+    baseUrl: 'https://via.placeholder.com/{format}',
+    formats: [
+      { size: '320x240', width: 320 },
+      { size: '640x480', width: 640 },
+    ],
+    sizes: '(max-width: 640px) 320px, 640px',
+  },
+};
+
+export const WithClassName: Story = {
+  args: {
+    alt: 'Styled image',
+    baseUrl: 'https://via.placeholder.com/400x300',
+    className: 'rounded-lg shadow-lg',
+    imgClassName: 'object-cover',
+  },
+};

package/src/stories/ProtectedEmail.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ProtectedEmail } from '../components/protected-email';
+
+const meta: Meta<typeof ProtectedEmail> = {
+  component: ProtectedEmail,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  title: 'Components/ProtectedEmail',
+};
+
+export default meta;
+type Story = StoryObj<typeof ProtectedEmail>;
+
+export const Default: Story = {
+  args: {
+    domain: 'example.com',
+    username: 'contact',
+  },
+};
+
+export const WithCustomText: Story = {
+  args: {
+    domain: 'example.com',
+    text: 'Send us an email',
+    username: 'info',
+  },
+};
+
+export const WithClassName: Story = {
+  args: {
+    className: 'text-blue-600 underline hover:text-blue-800',
+    domain: 'company.org',
+    username: 'support',
+  },
+};
+
+export const MultipleEmails: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      <ProtectedEmail
+        domain="example.com"
+        username="sales"
+      />
+      <ProtectedEmail
+        domain="example.com"
+        username="support"
+      />
+      <ProtectedEmail
+        domain="example.com"
+        text="General Inquiries"
+        username="info"
+      />
+    </div>
+  ),
+};

package/src/stories/Text.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Text } from '../components/text';
+
+const meta: Meta<typeof Text> = {
+  component: Text,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  title: 'Components/Text',
+};
+
+export default meta;
+type Story = StoryObj<typeof Text>;
+
+export const Default: Story = {
+  args: {
+    children: 'This is default text content.',
+  },
+};
+
+export const Subtitle: Story = {
+  args: {
+    children: 'This is subtitle text with larger size.',
+    variant: 'subtitle',
+  },
+};
+
+export const Code: Story = {
+  args: {
+    children: "const example = 'monospace code text';",
+    variant: 'code',
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <Text variant="primary">Primary text (default)</Text>
+      <Text variant="subtitle">Subtitle text</Text>
+      <Text variant="code">Code text with monospace font</Text>
+    </div>
+  ),
+};

package/src/stories/UnorderedList.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ListItem } from '../components/list-item';
+import { UnorderedList } from '../components/unordered-list';
+
+const meta: Meta<typeof UnorderedList> = {
+  component: UnorderedList,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  title: 'Components/UnorderedList',
+};
+
+export default meta;
+type Story = StoryObj<typeof UnorderedList>;
+
+export const Default: Story = {
+  render: () => (
+    <UnorderedList>
+      <ListItem>Item 1</ListItem>
+      <ListItem>Item 2</ListItem>
+      <ListItem>Item 3</ListItem>
+    </UnorderedList>
+  ),
+};
+
+export const Inline: Story = {
+  render: () => (
+    <UnorderedList variant="inline">
+      <ListItem>Tag 1</ListItem>
+      <ListItem>Tag 2</ListItem>
+      <ListItem>Tag 3</ListItem>
+    </UnorderedList>
+  ),
+};
+
+export const Unstyled: Story = {
+  render: () => (
+    <UnorderedList variant="unstyled">
+      <ListItem>No bullet 1</ListItem>
+      <ListItem>No bullet 2</ListItem>
+      <ListItem>No bullet 3</ListItem>
+    </UnorderedList>
+  ),
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+      <div>
+        <h4>Primary (default)</h4>
+        <UnorderedList variant="primary">
+          <ListItem>Item 1</ListItem>
+          <ListItem>Item 2</ListItem>
+        </UnorderedList>
+      </div>
+      <div>
+        <h4>Inline</h4>
+        <UnorderedList variant="inline">
+          <ListItem>Item 1</ListItem>
+          <ListItem>Item 2</ListItem>
+        </UnorderedList>
+      </div>
+      <div>
+        <h4>Unstyled</h4>
+        <UnorderedList variant="unstyled">
+          <ListItem>Item 1</ListItem>
+          <ListItem>Item 2</ListItem>
+        </UnorderedList>
+      </div>
+    </div>
+  ),
+};

package/src/styles/storybook.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/src/styles/tailwind.css

@@ -0,0 +1,7 @@
+/* Tailwind v4 source declarations for @regardio/react
+   Consumers should import this file from their global stylesheet:
+   @import "@regardio/react/tailwind.css";
+*/
+
+/* Scan all source files in this package for utility classes */
+@source "../";

package/src/test-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/src/utils/author.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, test } from 'vitest';
+import { parseAuthorString } from './author';
+
+describe('parseAuthorString', () => {
+  test('parses name only', () => {
+    expect(parseAuthorString('John Doe')).toEqual({ name: 'John Doe' });
+  });
+
+  test('parses name and email', () => {
+    expect(parseAuthorString('John Doe <john@example.com>')).toEqual({
+      email: 'john@example.com',
+      name: 'John Doe',
+    });
+  });
+
+  test('parses name and URL', () => {
+    expect(parseAuthorString('John Doe (https://example.com)')).toEqual({
+      name: 'John Doe',
+      url: 'https://example.com',
+    });
+  });
+
+  test('parses name, email, and URL', () => {
+    expect(parseAuthorString('John Doe <john@example.com> (https://example.com)')).toEqual({
+      email: 'john@example.com',
+      name: 'John Doe',
+      url: 'https://example.com',
+    });
+  });
+
+  test('handles email only (no name)', () => {
+    expect(parseAuthorString('<john@example.com>')).toEqual({
+      email: 'john@example.com',
+    });
+  });
+
+  test('handles whitespace in name', () => {
+    expect(parseAuthorString('  John Doe  <john@example.com>')).toEqual({
+      email: 'john@example.com',
+      name: 'John Doe',
+    });
+  });
+
+  test('returns empty object for empty string', () => {
+    expect(parseAuthorString('')).toEqual({});
+  });
+
+  test('handles relative URL', () => {
+    expect(parseAuthorString('John Doe (/about/john)')).toEqual({
+      name: 'John Doe',
+      url: '/about/john',
+    });
+  });
+});

package/src/utils/author.tsx

@@ -0,0 +1,73 @@
+type AuthorInfo = {
+  name?: string;
+  email?: string;
+  url?: string;
+};
+
+const regex = /^(.*?)\s*(?:<([^>]+)>)?\s*(?:\(([^)]+)\))?$/;
+
+export function parseAuthorString(input: string): AuthorInfo {
+  const match = input.match(regex);
+
+  if (match) {
+    const [, name, email, url] = match;
+
+    const result: AuthorInfo = {};
+
+    if (email) {
+      result.email = email;
+    }
+
+    const trimmedName = name?.trim();
+
+    if (trimmedName) {
+      result.name = trimmedName;
+    }
+
+    if (url) {
+      result.url = url;
+    }
+
+    return result;
+  }
+
+  return {};
+}
+
+export function generateLinkFromAuthorString(input: string): React.ReactNode {
+  const match = input.match(regex);
+  if (match) {
+    const [, name, email, url] = match.map((part) => {
+      return part?.trim();
+    });
+
+    // Generate email link if email is present
+    if (email) {
+      return (
+        <a
+          className={'u-email p-name'}
+          href={`mailto:${email}`}
+        >
+          {name}
+        </a>
+      );
+    }
+
+    // Generate URL link if URL is present (including relative URLs that start with a slash)
+    if (url && (url.startsWith('/') || url.startsWith('http'))) {
+      return (
+        <a
+          className={'u-url p-name'}
+          href={url}
+        >
+          {name}
+        </a>
+      );
+    }
+
+    // Return plain name with microformat class if only name is present
+    return <span className={'p-name'}>{name}</span>;
+  }
+
+  return;
+}

package/src/utils/cn.test.ts

@@ -0,0 +1,48 @@
+import { expect, test } from 'vitest';
+
+import { cn } from './cn';
+
+test('removes conflicting classes using twMerge', () => {
+  const classes = cn('text-red-500', 'text-blue-500');
+
+  expect(classes).toBe('text-blue-500');
+});
+
+test('merges multiple classes into a single string', () => {
+  const classes = cn('text-red-500', 'font-bold');
+
+  expect(classes).toBe('text-red-500 font-bold');
+});
+
+test('removes empty classes', () => {
+  const classes = cn('text-red-500', '', 'font-bold');
+
+  expect(classes).toBe('text-red-500 font-bold');
+});
+
+test('removes undefined classes', () => {
+  const classes = cn('text-red-500', undefined, 'font-bold');
+
+  expect(classes).toBe('text-red-500 font-bold');
+});
+
+test('removes null classes', () => {
+  const classes = cn('text-red-500', null, 'font-bold');
+
+  expect(classes).toBe('text-red-500 font-bold');
+});
+
+test('resolves nested arrays', () => {
+  const classes = cn('text-red-500', ['bg-blue-500', 'font-bold']);
+
+  expect(classes).toBe('text-red-500 bg-blue-500 font-bold');
+});
+
+test('resolves nested objects', () => {
+  const classes = cn('text-red-500', {
+    'bg-blue-500': true,
+    'font-bold': true,
+  });
+
+  expect(classes).toBe('text-red-500 bg-blue-500 font-bold');
+});

package/src/utils/cn.ts

@@ -0,0 +1,14 @@
+import { cx, defineConfig } from 'cva';
+import { twMerge } from 'fluid-tailwindcss/tailwind-merge';
+
+export type { VariantProps } from 'cva';
+
+export const { cva, compose } = defineConfig({
+  hooks: {
+    onComplete: (className: string) => {
+      return twMerge(className);
+    },
+  },
+});
+
+export const cn = (...inputs: Parameters<typeof cx>) => twMerge(cx(inputs));