@regardio/react 0.4.5 → 0.5.1

package/src/stories/UnorderedList.stories.tsx

@@ -1,73 +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 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/tailwind.css

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

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

package/src/utils/author.test.ts

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

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

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

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

package/src/utils/is-route-active.test.ts

@@ -1,80 +0,0 @@
-import { describe, expect, test } from 'vitest';
-import { checkIfRouteIsActive, isRouteActive } from './is-route-active';
-
-describe('isRouteActive', () => {
-  test('returns true when path matches currentPath exactly', () => {
-    expect(isRouteActive('/about', '/about')).toBe(true);
-    expect(isRouteActive('/contact', '/contact')).toBe(true);
-  });
-
-  test('returns false when paths are different', () => {
-    expect(isRouteActive('/about', '/contact')).toBe(false);
-  });
-
-  test('with end=true (default), only matches exact path', () => {
-    expect(isRouteActive('/about', '/about/team', true)).toBe(false);
-    expect(isRouteActive('/about', '/about', true)).toBe(true);
-  });
-
-  test('with end=false, matches parent paths', () => {
-    expect(isRouteActive('/about', '/about/team', false)).toBe(true);
-    expect(isRouteActive('/about', '/about/team/members', false)).toBe(true);
-  });
-
-  test('with end as function, uses function result', () => {
-    const endFn = (path: string) => path.includes('team');
-    expect(isRouteActive('/about', '/about/team', endFn)).toBe(false);
-    expect(isRouteActive('/about', '/about/contact', endFn)).toBe(true);
-  });
-
-  test('root path only matches root', () => {
-    expect(isRouteActive('/', '/')).toBe(true);
-    expect(isRouteActive('/', '/about', true)).toBe(false);
-  });
-});
-
-describe('checkIfRouteIsActive', () => {
-  test('returns true for exact match', () => {
-    expect(checkIfRouteIsActive('/about', '/about')).toBe(true);
-    expect(checkIfRouteIsActive('/users/123', '/users/123')).toBe(true);
-  });
-
-  test('returns false when root is target but current is not root', () => {
-    expect(checkIfRouteIsActive('/', '/about')).toBe(false);
-    expect(checkIfRouteIsActive('/', '/users/123')).toBe(false);
-  });
-
-  test('returns true for root when current is root', () => {
-    expect(checkIfRouteIsActive('/', '/')).toBe(true);
-  });
-
-  test('returns false when target is not in current path', () => {
-    expect(checkIfRouteIsActive('/about', '/contact')).toBe(false);
-    expect(checkIfRouteIsActive('/users', '/posts')).toBe(false);
-  });
-
-  test('with depth=1, matches when segments match within depth', () => {
-    // depth=1 means matchingSegments > segments.length - 0, i.e., matchingSegments > 1
-    // /about has 1 segment, /about/team has 2 segments, 1 matching
-    // 1 > 1 - 0 = 1 > 1 = false
-    expect(checkIfRouteIsActive('/about', '/about/team', 1)).toBe(false);
-    expect(checkIfRouteIsActive('/about', '/about/team/members', 1)).toBe(false);
-  });
-
-  test('with depth=2, matches one level deep', () => {
-    // depth=2 means matchingSegments > segments.length - 1
-    // /about has 1 segment, 1 > 1 - 1 = 1 > 0 = true
-    expect(checkIfRouteIsActive('/about', '/about/team', 2)).toBe(true);
-    expect(checkIfRouteIsActive('/about', '/about/team/members', 2)).toBe(true);
-  });
-
-  test('with depth=3, matches two levels deep', () => {
-    expect(checkIfRouteIsActive('/about', '/about/team', 3)).toBe(true);
-    expect(checkIfRouteIsActive('/about', '/about/team/members', 3)).toBe(true);
-    expect(checkIfRouteIsActive('/about', '/about/team/members/details', 3)).toBe(true);
-  });
-
-  test('ignores query parameters in current route', () => {
-    expect(checkIfRouteIsActive('/about', '/about?foo=bar')).toBe(true);
-  });
-});

package/src/utils/is-route-active.ts

@@ -1,100 +0,0 @@
-const ROOT_PATH = '/';
-
-/**
- * @name isRouteActive
- * @description A function to check if a route is active. This is used to
- * @param end
- * @param path
- * @param currentPath
- */
-export function isRouteActive(
-  path: string,
-  currentPath: string,
-  end?: boolean | ((path: string) => boolean) | undefined,
-) {
-  // if the path is the same as the current path, we return true
-  if (path === currentPath) {
-    return true;
-  }
-
-  // if the end prop is a function, we call it with the current path
-  if (typeof end === 'function') {
-    return !end(currentPath);
-  }
-
-  // otherwise - we use the evaluateIsRouteActive function
-  const defaultEnd = end ?? true;
-  const oneLevelDeep = 1;
-  const threeLevelsDeep = 3;
-
-  // how far down should segments be matched?
-  const depth = defaultEnd ? oneLevelDeep : threeLevelsDeep;
-
-  return checkIfRouteIsActive(path, currentPath, depth);
-}
-
-/**
- * @name checkIfRouteIsActive
- * @description A function to check if a route is active. This is used to
- * highlight the active link in the navigation.
- * @param targetLink - The link to check against
- * @param currentRoute - the current route
- * @param depth - how far down should segments be matched?
- */
-export function checkIfRouteIsActive(targetLink: string, currentRoute: string, depth = 1) {
-  // we remove any eventual query param from the route's URL
-  const currentRoutePath = currentRoute.split('?')[0] ?? '';
-
-  if (!isRoot(currentRoutePath) && isRoot(targetLink)) {
-    return false;
-  }
-
-  if (!currentRoutePath.includes(targetLink)) {
-    return false;
-  }
-
-  const isSameRoute = targetLink === currentRoutePath;
-
-  if (isSameRoute) {
-    return true;
-  }
-
-  return hasMatchingSegments(targetLink, currentRoutePath, depth);
-}
-
-function splitIntoSegments(href: string) {
-  return href.split('/').filter(Boolean);
-}
-
-function hasMatchingSegments(targetLink: string, currentRoute: string, depth: number) {
-  const segments = splitIntoSegments(targetLink);
-  const matchingSegments = numberOfMatchingSegments(currentRoute, segments);
-
-  if (targetLink === currentRoute) {
-    return true;
-  }
-
-  // how far down should segments be matched?
-  // - if depth = 1 => only highlight the links of the immediate parent
-  // - if depth = 2 => for url = /account match /account/organization/members
-  return matchingSegments > segments.length - (depth - 1);
-}
-
-function numberOfMatchingSegments(href: string, segments: string[]) {
-  let count = 0;
-
-  for (const segment of splitIntoSegments(href)) {
-    // for as long as the segments match, keep counting + 1
-    if (segments.includes(segment)) {
-      count += 1;
-    } else {
-      return count;
-    }
-  }
-
-  return count;
-}
-
-function isRoot(path: string) {
-  return path === ROOT_PATH;
-}

package/src/utils/text.test.ts

@@ -1,152 +0,0 @@
-import { describe, expect, test } from 'vitest';
-import { replaceSpecialChars, shy, toBoolean, typographicQuotes } from './text';
-
-describe('toBoolean', () => {
-  test('returns true for boolean true', () => {
-    expect(toBoolean(true)).toBe(true);
-  });
-
-  test('returns false for boolean false', () => {
-    expect(toBoolean(false)).toBe(false);
-  });
-
-  test('returns true for string "true"', () => {
-    expect(toBoolean('true')).toBe(true);
-  });
-
-  test('returns true for string "1"', () => {
-    expect(toBoolean('1')).toBe(true);
-  });
-
-  test('returns false for string "false"', () => {
-    expect(toBoolean('false')).toBe(false);
-  });
-
-  test('returns false for string "0"', () => {
-    expect(toBoolean('0')).toBe(false);
-  });
-
-  test('returns false for null', () => {
-    expect(toBoolean(null)).toBe(false);
-  });
-
-  test('returns false for undefined', () => {
-    expect(toBoolean(undefined)).toBe(false);
-  });
-
-  test('returns false for other strings', () => {
-    expect(toBoolean('yes')).toBe(false);
-    expect(toBoolean('no')).toBe(false);
-    expect(toBoolean('')).toBe(false);
-  });
-});
-
-describe('shy', () => {
-  test('returns null for null input', () => {
-    expect(shy(null)).toBe(null);
-  });
-
-  test('replaces ­ with soft hyphen in strings', () => {
-    const result = shy('hello­world');
-    expect(result).toBe('hello\u00ADworld');
-  });
-
-  test('handles strings without ­', () => {
-    expect(shy('hello world')).toBe('hello world');
-  });
-
-  test('handles multiple ­ occurrences', () => {
-    const result = shy('one­two­three');
-    expect(result).toBe('one\u00ADtwo\u00ADthree');
-  });
-});
-
-describe('replaceSpecialChars', () => {
-  test('replaces straight quotes for de locale', () => {
-    const result = replaceSpecialChars('"Hello"', 'de');
-    const str = String(result);
-    // Should not contain straight quotes anymore
-    expect(str).not.toContain('"Hello"');
-    expect(str).toContain('Hello');
-  });
-
-  test('replaces straight quotes for de-DE locale', () => {
-    const result = replaceSpecialChars('"Hello"', 'de-DE');
-    const str = String(result);
-    expect(str).not.toContain('"Hello"');
-    expect(str).toContain('Hello');
-  });
-
-  test('replaces straight quotes for en locale', () => {
-    const result = replaceSpecialChars('"Hello"', 'en');
-    const str = String(result);
-    // Should not contain straight quotes anymore
-    expect(str).not.toContain('"Hello"');
-    expect(str).toContain('Hello');
-  });
-
-  test('handles multiple quoted strings', () => {
-    const result = replaceSpecialChars('"one" and "two"', 'de');
-    const str = String(result);
-    expect(str).toContain('one');
-    expect(str).toContain('two');
-    expect(str).toContain('and');
-  });
-
-  test('also applies shy replacement', () => {
-    const result = replaceSpecialChars('"Hello­World"', 'en');
-    expect(String(result)).toContain('\u00AD');
-  });
-});
-
-describe('typographicQuotes', () => {
-  test('replaces double quotes with English curly quotes', () => {
-    const result = typographicQuotes('"Hello"', 'en');
-    expect(result).toBe('\u201CHello\u201D');
-  });
-
-  test('replaces double quotes with German quotes', () => {
-    const result = typographicQuotes('"Hello"', 'de');
-    expect(result).toBe('\u201EHello\u201D');
-  });
-
-  test('replaces double quotes with French guillemets', () => {
-    const result = typographicQuotes('"Hello"', 'fr');
-    expect(result).toBe('\u00AB Hello \u00BB');
-  });
-
-  test('handles de-DE locale (falls back to de)', () => {
-    const result = typographicQuotes('"Hello"', 'de-DE');
-    expect(result).toBe('\u201EHello\u201D');
-  });
-
-  test('handles de-CH locale (Swiss German with guillemets)', () => {
-    const result = typographicQuotes('"Hello"', 'de-CH');
-    expect(result).toBe('\u00ABHello\u00BB');
-  });
-
-  test('handles unknown locale (falls back to English)', () => {
-    const result = typographicQuotes('"Hello"', 'xx-YY');
-    expect(result).toBe('\u201CHello\u201D');
-  });
-
-  test('replaces single quotes', () => {
-    const result = typographicQuotes("'Hello'", 'en');
-    expect(result).toBe('\u2018Hello\u2019');
-  });
-
-  test('handles multiple quoted strings', () => {
-    const result = typographicQuotes('"one" and "two"', 'de');
-    expect(result).toBe('\u201Eone\u201D and \u201Etwo\u201D');
-  });
-
-  test('handles Japanese quotes', () => {
-    const result = typographicQuotes('"Hello"', 'ja');
-    expect(result).toBe('\u300CHello\u300D');
-  });
-
-  test('preserves text without quotes', () => {
-    const result = typographicQuotes('Hello World', 'en');
-    expect(result).toBe('Hello World');
-  });
-});