@oztix/roadie-components 1.0.0 → 1.2.0

package/src/components/Container/Container.test.tsx

@@ -0,0 +1,241 @@
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { Container } from './index'
+
+describe('Container', () => {
+  it('renders with default props', () => {
+    const { getByTestId } = render(
+      <Container data-testid='container'>Content</Container>
+    )
+    const container = getByTestId('container')
+    expect(container).toBeInTheDocument()
+    expect(container.tagName.toLowerCase()).toBe('div')
+    expect(container).toHaveClass(
+      'd_flex',
+      'pos_relative',
+      'flex-d_column',
+      'flex-wrap_nowrap',
+      'ai_stretch',
+      'ac_flex-start',
+      'jc_flex-start',
+      'min-h_0',
+      'min-w_0',
+      'w_full',
+      'mx_auto',
+      'max-w_8xl'
+    )
+  })
+
+  it('applies responsive padding by default', () => {
+    const { getByTestId } = render(
+      <Container data-testid='container'>Content</Container>
+    )
+    const container = getByTestId('container')
+    // Should have responsive padding classes
+    expect(container.className).toMatch(/px_/)
+  })
+
+  it('renders with contain true by default (constrained width)', () => {
+    const { getByTestId } = render(
+      <Container data-testid='container'>Constrained Content</Container>
+    )
+    const container = getByTestId('container')
+    expect(container).toHaveClass('max-w_8xl')
+  })
+
+  it('renders with contain=false (full width)', () => {
+    const { getByTestId } = render(
+      <Container contain={false} data-testid='container'>
+        Full Width Content
+      </Container>
+    )
+    const container = getByTestId('container')
+    expect(container).toHaveClass('max-w_full')
+  })
+
+  it('renders with contain prop explicitly set to true', () => {
+    const { getByTestId } = render(
+      <Container contain data-testid='container'>
+        Constrained Content
+      </Container>
+    )
+    const container = getByTestId('container')
+    expect(container).toHaveClass('max-w_8xl')
+  })
+
+  it('renders with different HTML elements', () => {
+    const elements: Array<'section' | 'article' | 'aside' | 'main'> = [
+      'section',
+      'article',
+      'aside',
+      'main'
+    ]
+
+    elements.forEach((element) => {
+      const { rerender, getByTestId } = render(
+        <Container as={element} data-testid='container'>
+          {element} content
+        </Container>
+      )
+      const container = getByTestId('container')
+      expect(container.tagName.toLowerCase()).toBe(element)
+      expect(container).toHaveClass(
+        'd_flex',
+        'pos_relative',
+        'flex-d_column',
+        'flex-wrap_nowrap',
+        'ai_stretch',
+        'ac_flex-start',
+        'jc_flex-start',
+        'min-h_0',
+        'min-w_0',
+        'w_full',
+        'mx_auto'
+      )
+      rerender(<></>)
+    })
+  })
+
+  it('applies layout properties', () => {
+    const { getByTestId } = render(
+      <Container
+        data-testid='container'
+        display='inline-flex'
+        position='absolute'
+        flexDirection='row'
+        flexWrap='wrap'
+        alignItems='center'
+        alignContent='center'
+        justifyContent='center'
+      >
+        Styled Container
+      </Container>
+    )
+    const container = getByTestId('container')
+    expect(container).toHaveClass(
+      'd_inline-flex',
+      'pos_absolute',
+      'flex-d_row',
+      'flex-wrap_wrap',
+      'ai_center',
+      'ac_center',
+      'jc_center',
+      'min-h_0',
+      'min-w_0'
+    )
+  })
+
+  it('applies custom styles and attributes', () => {
+    const { getByTestId } = render(
+      <Container
+        data-testid='container'
+        backgroundColor='neutral.bg.subtle'
+        padding='200'
+        title='tooltip'
+        aria-label='Accessible container'
+      >
+        Custom Container
+      </Container>
+    )
+    const container = getByTestId('container')
+    expect(container).toHaveClass('bg-c_neutral.bg.subtle', 'p_200')
+    expect(container).toHaveAttribute('title', 'tooltip')
+    expect(container).toHaveAttribute('aria-label', 'Accessible container')
+  })
+
+  it('renders nested containers', () => {
+    const { getByTestId } = render(
+      <Container data-testid='parent'>
+        <Container data-testid='child'>Nested Content</Container>
+      </Container>
+    )
+    const parent = getByTestId('parent')
+    const child = getByTestId('child')
+    expect(parent).toContainElement(child)
+    expect(child).toHaveTextContent('Nested Content')
+    expect(parent).toHaveClass(
+      'd_flex',
+      'pos_relative',
+      'flex-d_column',
+      'flex-wrap_nowrap',
+      'ai_stretch',
+      'ac_flex-start',
+      'jc_flex-start',
+      'min-h_0',
+      'min-w_0',
+      'w_full',
+      'mx_auto'
+    )
+    expect(child).toHaveClass(
+      'd_flex',
+      'pos_relative',
+      'flex-d_column',
+      'flex-wrap_nowrap',
+      'ai_stretch',
+      'ac_flex-start',
+      'jc_flex-start',
+      'min-h_0',
+      'min-w_0',
+      'w_full',
+      'mx_auto'
+    )
+  })
+
+  it('combines multiple props including contain', () => {
+    const { getByTestId } = render(
+      <Container
+        as='section'
+        contain
+        display='grid'
+        gap='200'
+        padding='400'
+        backgroundColor='neutral.bg.subtle'
+        className='custom-class'
+        data-testid='container'
+      >
+        Combined styles
+      </Container>
+    )
+    const container = getByTestId('container')
+    expect(container.tagName.toLowerCase()).toBe('section')
+    expect(container).toHaveClass(
+      'd_grid',
+      'gap_200',
+      'p_400',
+      'bg-c_neutral.bg.subtle',
+      'max-w_8xl',
+      'custom-class'
+    )
+  })
+
+  it('can override default padding', () => {
+    const { getByTestId } = render(
+      <Container data-testid='container' px='800'>
+        Custom Padding
+      </Container>
+    )
+    const container = getByTestId('container')
+    expect(container).toHaveClass('px_800')
+  })
+
+  it('can override default width', () => {
+    const { getByTestId } = render(
+      <Container data-testid='container' width='auto'>
+        Custom Width
+      </Container>
+    )
+    const container = getByTestId('container')
+    expect(container).toHaveClass('w_auto')
+  })
+
+  it('can set contain=false for full width', () => {
+    const { getByTestId } = render(
+      <Container contain={false} data-testid='container'>
+        Full Width
+      </Container>
+    )
+    const container = getByTestId('container')
+    expect(container).toHaveClass('max-w_full')
+  })
+})

package/src/components/Container/index.tsx

@@ -0,0 +1,34 @@
+import { Container as ContainerPattern } from '@oztix/roadie-core/jsx'
+
+/**
+ * A foundational layout component that provides a centered container with responsive padding
+ * and a constrained max-width by default. Perfect for page layouts and content sections.
+ *
+ * By default, Container has:
+ * - Centered content with `mx: auto`
+ * - Responsive horizontal padding (300 on mobile, 400 on tablet, 600 on desktop)
+ * - Max-width constraint of 7xl (80rem)
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - constrained width by default
+ * <Container>
+ *   <h1>Page Title</h1>
+ *   <p>Content with readable max-width</p>
+ * </Container>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Full-width container
+ * <Container contain={false}>
+ *   <h1>Hero Section</h1>
+ *   <p>This content spans the full width</p>
+ * </Container>
+ * ```
+ */
+export const Container = ContainerPattern
+
+export type ContainerProps = React.ComponentProps<typeof ContainerPattern>
+
+Container.displayName = 'Container'

package/src/components/Heading/index.tsx

@@ -44,9 +44,6 @@ export interface HeadingProps extends HTMLStyledProps<'h2'> {
   children?: ReactNode
 }
 
-export const Heading = styled(
-  ark.h2,
-  heading
-) as React.ForwardRefExoticComponent<HeadingProps>
+export const Heading = styled(ark.h2, heading)
 
 Heading.displayName = 'Heading'

package/src/components/Highlight/Highlight.test.tsx

@@ -0,0 +1,113 @@
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { Highlight } from './index'
+
+describe('Highlight', () => {
+  it('renders with text prop', () => {
+    const { container } = render(<Highlight text='Hello World' query='World' />)
+    expect(container).toHaveTextContent('Hello World')
+    const mark = container.querySelector('mark')
+    expect(mark).toBeInTheDocument()
+    expect(mark).toHaveTextContent('World')
+  })
+
+  it('highlights only matching text when query is provided', () => {
+    const { container } = render(
+      <Highlight text='The quick brown fox' query='quick' />
+    )
+    expect(container).toHaveTextContent('The quick brown fox')
+    const mark = container.querySelector('mark')
+    expect(mark).toHaveTextContent('quick')
+  })
+
+  it('highlights multiple matches when matchAll is true', () => {
+    const { container } = render(
+      <Highlight text='foo bar foo baz' query='foo' matchAll />
+    )
+    const marks = container.querySelectorAll('mark')
+    expect(marks).toHaveLength(2)
+    marks.forEach((mark: Element) => {
+      expect(mark).toHaveTextContent('foo')
+    })
+  })
+
+  it('highlights with case insensitive matching by default', () => {
+    const { container } = render(<Highlight text='Hello World' query='hello' />)
+    const mark = container.querySelector('mark')
+    expect(mark).toHaveTextContent('Hello')
+  })
+
+  it('respects case when ignoreCase is false', () => {
+    const { container } = render(
+      <Highlight text='Hello World' query='hello' ignoreCase={false} />
+    )
+    const mark = container.querySelector('mark')
+    expect(mark).toBeNull()
+  })
+
+  it('highlights multiple queries', () => {
+    const { container } = render(
+      <Highlight text='The quick brown fox' query={['quick', 'fox']} />
+    )
+    const marks = container.querySelectorAll('mark')
+    expect(marks).toHaveLength(2)
+    expect(marks[0]).toHaveTextContent('quick')
+    expect(marks[1]).toHaveTextContent('fox')
+  })
+
+  it('applies default color palette', () => {
+    const { container } = render(
+      <Highlight text='Highlighted text' query='Highlighted' />
+    )
+    const mark = container.querySelector('mark')
+    expect(mark).toHaveClass('color-palette_information')
+  })
+
+  it('applies custom color palette', () => {
+    const { container } = render(
+      <Highlight
+        text='Highlighted text'
+        query='Highlighted'
+        colorPalette='success'
+      />
+    )
+    const mark = container.querySelector('mark')
+    expect(mark).toHaveClass('color-palette_success')
+  })
+
+  it('matches exact words when exactMatch is true', () => {
+    const { container } = render(
+      <Highlight text='foo foobar' query='foo' exactMatch />
+    )
+    const marks = container.querySelectorAll('mark')
+    expect(marks).toHaveLength(1)
+    expect(marks[0]).toHaveTextContent('foo')
+  })
+
+  it('forwards additional HTML attributes', () => {
+    const { container } = render(
+      <Highlight
+        text='Hello'
+        query='Hello'
+        data-testid='highlight'
+        title='tooltip'
+      />
+    )
+    const mark = container.querySelector('mark')
+    expect(mark).toHaveAttribute('data-testid', 'highlight')
+    expect(mark).toHaveAttribute('title', 'tooltip')
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <Highlight
+        text='Highlighted text'
+        query='Highlighted'
+        className='custom-class'
+      />
+    )
+    const mark = container.querySelector('mark')
+    expect(mark).toHaveClass('mark', 'custom-class')
+  })
+})

package/src/components/Highlight/index.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import { Fragment, type ReactElement } from 'react'
+
+import { useHighlight } from '@ark-ui/react/highlight'
+
+import type { ColorPalette } from '@oztix/roadie-core'
+import type { HTMLStyledProps } from '@oztix/roadie-core/jsx'
+
+import { Mark } from '../Mark'
+
+// Re-export Ark UI types and hook for advanced use cases
+export { useHighlight } from '@ark-ui/react/highlight'
+export type { HighlightChunk, UseHighlightProps } from '@ark-ui/react/highlight'
+
+/**
+ * Highlight component for highlighting substrings within text
+ */
+export interface HighlightProps
+  extends Omit<HTMLStyledProps<'mark'>, 'children'> {
+  /**
+   * The text content to display and potentially highlight
+   */
+  text: string
+
+  /**
+   * The query string(s) to highlight within the text
+   */
+  query: string | string[]
+
+  /**
+   * Whether to match whole words only
+   * @default false
+   */
+  exactMatch?: boolean
+
+  /**
+   * Whether to ignore case while matching
+   * @default true
+   */
+  ignoreCase?: boolean
+
+  /**
+   * Whether to match multiple instances of the query
+   * @default true
+   */
+  matchAll?: boolean
+
+  /**
+   * The color palette to use for the highlight
+   * @default 'information'
+   */
+  colorPalette?: ColorPalette
+}
+
+export const Highlight = ({
+  text,
+  query,
+  exactMatch = false,
+  ignoreCase = true,
+  matchAll = true,
+  colorPalette = 'information',
+  ...props
+}: HighlightProps): ReactElement => {
+  // Fast path: if query is empty, just return the text
+  const isQueryEmpty =
+    !query || (Array.isArray(query) && query.length === 0) || query === ''
+
+  if (isQueryEmpty) {
+    return <>{text}</>
+  }
+
+  const chunks = useHighlight({
+    query,
+    text,
+    exactMatch,
+    ignoreCase,
+    matchAll
+  })
+
+  return (
+    <>
+      {chunks.map((chunk, index) =>
+        chunk.match ? (
+          <Mark key={index} colorPalette={colorPalette} {...props}>
+            {chunk.text}
+          </Mark>
+        ) : (
+          <Fragment key={index}>{chunk.text}</Fragment>
+        )
+      )}
+    </>
+  )
+}
+
+Highlight.displayName = 'Highlight'

package/src/components/Mark/Mark.test.tsx

@@ -0,0 +1,82 @@
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { Mark } from './index'
+
+describe('Mark', () => {
+  it('renders with default props', () => {
+    const { container } = render(<Mark>Marked text</Mark>)
+    const mark = container.querySelector('mark')
+    expect(mark).toBeInTheDocument()
+    expect(mark).toHaveTextContent('Marked text')
+    expect(mark).toHaveClass('mark')
+  })
+
+  it('applies color palette when provided', () => {
+    const { container } = render(
+      <Mark colorPalette='information'>Marked text</Mark>
+    )
+    const mark = container.querySelector('mark')
+    expect(mark).toHaveClass('color-palette_information')
+  })
+
+  it('applies custom color palette', () => {
+    const { container } = render(
+      <Mark colorPalette='success'>Marked text</Mark>
+    )
+    const mark = container.querySelector('mark')
+    expect(mark).toHaveClass('color-palette_success')
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <Mark className='custom-class'>Marked text</Mark>
+    )
+    const mark = container.querySelector('mark')
+    expect(mark).toHaveClass('mark', 'custom-class')
+  })
+
+  it('forwards additional HTML attributes', () => {
+    const { container } = render(
+      <Mark data-testid='mark' title='tooltip'>
+        Marked text
+      </Mark>
+    )
+    const mark = container.querySelector('mark')
+    expect(mark).toHaveAttribute('data-testid', 'mark')
+    expect(mark).toHaveAttribute('title', 'tooltip')
+  })
+
+  it('renders with different color palettes', () => {
+    const { rerender, container } = render(
+      <Mark colorPalette='accent'>Accent</Mark>
+    )
+    let mark = container.querySelector('mark')
+    expect(mark).toHaveClass('color-palette_accent')
+
+    rerender(<Mark colorPalette='brand'>Brand</Mark>)
+    mark = container.querySelector('mark')
+    expect(mark).toHaveClass('color-palette_brand')
+
+    rerender(<Mark colorPalette='warning'>Warning</Mark>)
+    mark = container.querySelector('mark')
+    expect(mark).toHaveClass('color-palette_warning')
+
+    rerender(<Mark colorPalette='danger'>Danger</Mark>)
+    mark = container.querySelector('mark')
+    expect(mark).toHaveClass('color-palette_danger')
+  })
+
+  it('renders children correctly', () => {
+    const { container } = render(
+      <Mark>
+        This is <strong>important</strong> text
+      </Mark>
+    )
+    const mark = container.querySelector('mark')
+    expect(mark).toBeInTheDocument()
+    expect(mark?.textContent).toBe('This is important text')
+    const strong = mark?.querySelector('strong')
+    expect(strong).toHaveTextContent('important')
+  })
+})

package/src/components/Mark/index.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react'
+
+import { ark } from '@ark-ui/react/factory'
+
+import type { ColorPalette } from '@oztix/roadie-core'
+import { styled } from '@oztix/roadie-core/jsx'
+import type { HTMLStyledProps } from '@oztix/roadie-core/jsx'
+import { mark } from '@oztix/roadie-core/recipes'
+
+/**
+ * Mark component for highlighting text content
+ */
+export interface MarkProps extends HTMLStyledProps<'mark'> {
+  /**
+   * The color palette to use for the mark
+   * @default 'information'
+   */
+  colorPalette?: ColorPalette
+
+  /**
+   * When true, the component will pass props to its child component
+   */
+  asChild?: boolean
+
+  /**
+   * The content to mark
+   */
+  children?: ReactNode
+}
+
+export const Mark = styled(ark.mark, mark)
+
+Mark.displayName = 'Mark'

package/src/components/SpotIllustration/ArrowUpRight.tsx

@@ -0,0 +1,9 @@
+// Generated file - do not edit directly
+import { createSpotIllustration } from './createSpotIllustration'
+import arrowuprightData from './json/arrow-up-right.json'
+
+export const ArrowUpRight = createSpotIllustration(
+  'ArrowUpRight',
+  arrowuprightData
+)
+export type ArrowUpRightProps = React.ComponentPropsWithRef<typeof ArrowUpRight>

package/src/components/SpotIllustration/CowboyHat.tsx

@@ -0,0 +1,6 @@
+// Generated file - do not edit directly
+import { createSpotIllustration } from './createSpotIllustration'
+import cowboyhatData from './json/cowboy-hat.json'
+
+export const CowboyHat = createSpotIllustration('CowboyHat', cowboyhatData)
+export type CowboyHatProps = React.ComponentPropsWithRef<typeof CowboyHat>

package/src/components/SpotIllustration/Cursor.tsx

@@ -0,0 +1,6 @@
+// Generated file - do not edit directly
+import { createSpotIllustration } from './createSpotIllustration'
+import cursorData from './json/cursor.json'
+
+export const Cursor = createSpotIllustration('Cursor', cursorData)
+export type CursorProps = React.ComponentPropsWithRef<typeof Cursor>

package/src/components/SpotIllustration/FlowerSpiral.tsx

@@ -0,0 +1,9 @@
+// Generated file - do not edit directly
+import { createSpotIllustration } from './createSpotIllustration'
+import flowerspiralData from './json/flower-spiral.json'
+
+export const FlowerSpiral = createSpotIllustration(
+  'FlowerSpiral',
+  flowerspiralData
+)
+export type FlowerSpiralProps = React.ComponentPropsWithRef<typeof FlowerSpiral>

package/src/components/SpotIllustration/Football.tsx

@@ -0,0 +1,6 @@
+// Generated file - do not edit directly
+import { createSpotIllustration } from './createSpotIllustration'
+import footballData from './json/football.json'
+
+export const Football = createSpotIllustration('Football', footballData)
+export type FootballProps = React.ComponentPropsWithRef<typeof Football>

package/src/components/SpotIllustration/Hand.tsx

@@ -0,0 +1,6 @@
+// Generated file - do not edit directly
+import { createSpotIllustration } from './createSpotIllustration'
+import handData from './json/hand.json'
+
+export const Hand = createSpotIllustration('Hand', handData)
+export type HandProps = React.ComponentPropsWithRef<typeof Hand>

package/src/components/SpotIllustration/Heart.tsx

@@ -0,0 +1,6 @@
+// Generated file - do not edit directly
+import { createSpotIllustration } from './createSpotIllustration'
+import heartData from './json/heart.json'
+
+export const Heart = createSpotIllustration('Heart', heartData)
+export type HeartProps = React.ComponentPropsWithRef<typeof Heart>

package/src/components/SpotIllustration/HighFive.tsx

@@ -0,0 +1,6 @@
+// Generated file - do not edit directly
+import { createSpotIllustration } from './createSpotIllustration'
+import highfiveData from './json/high-five.json'
+
+export const HighFive = createSpotIllustration('HighFive', highfiveData)
+export type HighFiveProps = React.ComponentPropsWithRef<typeof HighFive>

package/src/components/SpotIllustration/MapPin.tsx

@@ -0,0 +1,6 @@
+// Generated file - do not edit directly
+import { createSpotIllustration } from './createSpotIllustration'
+import mappinData from './json/map-pin.json'
+
+export const MapPin = createSpotIllustration('MapPin', mappinData)
+export type MapPinProps = React.ComponentPropsWithRef<typeof MapPin>