@oztix/roadie-components 1.2.0 → 2.0.0

package/src/components/Heading/Heading.test.tsx

@@ -1,128 +0,0 @@
-import { render } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-
-import { Heading } from './index'
-
-describe('Heading', () => {
-  it('renders with default props', () => {
-    const { getByText } = render(<Heading>Hello World</Heading>)
-    const heading = getByText('Hello World')
-    expect(heading).toBeInTheDocument()
-    expect(heading.tagName.toLowerCase()).toBe('h2')
-    expect(heading).toHaveClass('heading', 'heading--emphasis_default')
-  })
-
-  it('renders with different heading levels', () => {
-    const levels: Array<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'> = [
-      'h1',
-      'h2',
-      'h3',
-      'h4',
-      'h5',
-      'h6'
-    ]
-
-    levels.forEach((level) => {
-      const { rerender, getByText } = render(
-        <Heading as={level}>{level} Heading</Heading>
-      )
-      const heading = getByText(`${level} Heading`)
-      expect(heading).toBeInTheDocument()
-      expect(heading.tagName.toLowerCase()).toBe(level)
-      expect(heading).toHaveClass('heading')
-      rerender(<></>)
-    })
-  })
-
-  it('applies text style', () => {
-    const { getByText } = render(
-      <Heading textStyle='display.ui.1'>Large Heading</Heading>
-    )
-    const heading = getByText('Large Heading')
-    expect(heading).toHaveClass('textStyle_display.ui.1')
-  })
-
-  it('inherits Text props', () => {
-    const { getByTestId } = render(
-      <Heading
-        color='neutral.fg.subtle'
-        data-testid='heading'
-        title='tooltip'
-        aria-label='Accessible heading'
-      >
-        Styled Heading
-      </Heading>
-    )
-    const heading = getByTestId('heading')
-    expect(heading).toHaveClass('heading', 'c_neutral.fg.subtle')
-    expect(heading).toHaveAttribute('title', 'tooltip')
-    expect(heading).toHaveAttribute('aria-label', 'Accessible heading')
-  })
-
-  it('applies line clamp', () => {
-    const { getByText } = render(
-      <Heading lineClamp={2}>Multi-line heading that should be clamped</Heading>
-    )
-    const heading = getByText('Multi-line heading that should be clamped')
-    expect(heading).toHaveClass('lc_2')
-  })
-
-  it('renders with different emphasis', () => {
-    const { rerender, getByText } = render(
-      <Heading emphasis='default'>Default Heading</Heading>
-    )
-    let heading = getByText('Default Heading')
-    expect(heading).toHaveClass('heading--emphasis_default')
-
-    rerender(<Heading emphasis='strong'>Strong Heading</Heading>)
-    heading = getByText('Strong Heading')
-    expect(heading).toHaveClass('heading--emphasis_strong')
-
-    rerender(<Heading emphasis='subtle'>Subtle Heading</Heading>)
-    heading = getByText('Subtle Heading')
-    expect(heading).toHaveClass('heading--emphasis_subtle')
-
-    rerender(<Heading emphasis='subtler'>Subtler Heading</Heading>)
-    heading = getByText('Subtler Heading')
-    expect(heading).toHaveClass('heading--emphasis_subtler')
-  })
-
-  it('renders with different color palettes', () => {
-    const { rerender, getByText } = render(
-      <Heading colorPalette='neutral'>Neutral Heading</Heading>
-    )
-    let heading = getByText('Neutral Heading')
-    expect(heading).toBeInTheDocument()
-
-    rerender(<Heading colorPalette='brand'>Brand Heading</Heading>)
-    heading = getByText('Brand Heading')
-    expect(heading).toBeInTheDocument()
-
-    rerender(<Heading colorPalette='success'>Success Heading</Heading>)
-    heading = getByText('Success Heading')
-    expect(heading).toBeInTheDocument()
-  })
-
-  it('combines multiple props', () => {
-    const { getByText } = render(
-      <Heading
-        as='h1'
-        textStyle='display.ui.1'
-        emphasis='strong'
-        colorPalette='brand'
-        className='custom-class'
-      >
-        Combined styles
-      </Heading>
-    )
-    const heading = getByText('Combined styles')
-    expect(heading.tagName.toLowerCase()).toBe('h1')
-    expect(heading).toHaveClass(
-      'heading',
-      'heading--emphasis_strong',
-      'textStyle_display.ui.1',
-      'color-palette_brand',
-      'custom-class'
-    )
-  })
-})

package/src/components/Heading/index.tsx

@@ -1,49 +0,0 @@
-import type { ReactNode } from 'react'
-
-import { ark } from '@ark-ui/react/factory'
-
-import type { ColorPalette } from '@oztix/roadie-core'
-import { type HTMLStyledProps, styled } from '@oztix/roadie-core/jsx'
-import { type HeadingVariantProps, heading } from '@oztix/roadie-core/recipes'
-import type { JsxStyleProps } from '@oztix/roadie-core/types'
-
-type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label'
-type HeadingStyle = Extract<JsxStyleProps['textStyle'], `display.${string}`>
-
-/**
- * A heading component that uses display styles for titles and section headers
- */
-export interface HeadingProps extends HTMLStyledProps<'h2'> {
-  /**
-   * The heading element to render
-   * @default 'h2'
-   */
-  as?: HeadingElement
-
-  /**
-   * The text style to use for the heading
-   * @default 'display.ui'
-   */
-  textStyle?: HeadingStyle
-
-  /**
-   * The color palette to use for the heading
-   * @default 'neutral'
-   */
-  colorPalette?: ColorPalette
-
-  /**
-   * Set a sepecific empahasis level for differen fonts like subtitles
-   * @default 'default'
-   */
-  emphasis?: HeadingVariantProps['emphasis']
-
-  /**
-   * The content to display
-   */
-  children?: ReactNode
-}
-
-export const Heading = styled(ark.h2, heading)
-
-Heading.displayName = 'Heading'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/SpotIllustration/NoteMusic.tsx

@@ -1,6 +0,0 @@
-// Generated file - do not edit directly
-import { createSpotIllustration } from './createSpotIllustration'
-import notemusicData from './json/note-music.json'
-
-export const NoteMusic = createSpotIllustration('NoteMusic', notemusicData)
-export type NoteMusicProps = React.ComponentPropsWithRef<typeof NoteMusic>