@oztix/roadie-components 0.2.0 → 1.0.0

package/src/components/Button/Button.test.tsx

@@ -0,0 +1,156 @@
+import { render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import { Button } from '.'
+
+describe('Button', () => {
+  it('renders with default props', () => {
+    const { getByText } = render(<Button>Click me</Button>)
+    const button = getByText('Click me')
+    expect(button).toBeInTheDocument()
+    expect(button.tagName.toLowerCase()).toBe('button')
+    expect(button).toHaveClass(
+      'button',
+      'button--emphasis_default',
+      'button--size_md'
+    )
+  })
+
+  it('renders with different emphasis', () => {
+    const { rerender, getByText } = render(
+      <Button emphasis='strong' colorPalette='accent'>
+        Strong
+      </Button>
+    )
+    let button = getByText('Strong')
+    expect(button).toHaveClass(
+      'button--emphasis_strong',
+      'color-palette_accent'
+    )
+
+    rerender(<Button emphasis='default'>Default</Button>)
+    button = getByText('Default')
+    expect(button).toHaveClass('button--emphasis_default')
+
+    rerender(<Button emphasis='subtle'>Subtle</Button>)
+    button = getByText('Subtle')
+    expect(button).toHaveClass('button--emphasis_subtle')
+
+    rerender(<Button emphasis='subtler'>subtler</Button>)
+    button = getByText('subtler')
+    expect(button).toHaveClass('button--emphasis_subtler')
+  })
+
+  it('renders with different sizes', () => {
+    const { rerender, getByText } = render(<Button size='sm'>Small</Button>)
+    let button = getByText('Small')
+    expect(button).toHaveClass('button--size_sm')
+
+    rerender(<Button size='md'>Medium</Button>)
+    button = getByText('Medium')
+    expect(button).toHaveClass('button--size_md')
+
+    rerender(<Button size='lg'>Large</Button>)
+    button = getByText('Large')
+    expect(button).toHaveClass('button--size_lg')
+  })
+
+  it('renders with different color palettes', () => {
+    const { rerender, getByText } = render(
+      <Button emphasis='strong' colorPalette='accent'>
+        Accent
+      </Button>
+    )
+    let button = getByText('Accent')
+    expect(button).toHaveClass('color-palette_accent')
+
+    rerender(
+      <Button emphasis='strong' colorPalette='success'>
+        Success
+      </Button>
+    )
+    button = getByText('Success')
+    expect(button).toHaveClass('color-palette_success')
+
+    rerender(
+      <Button emphasis='strong' colorPalette='warning'>
+        Warning
+      </Button>
+    )
+    button = getByText('Warning')
+    expect(button).toHaveClass('color-palette_warning')
+
+    rerender(
+      <Button emphasis='strong' colorPalette='danger'>
+        Danger
+      </Button>
+    )
+    button = getByText('Danger')
+    expect(button).toHaveClass('color-palette_danger')
+  })
+
+  it('handles disabled state', () => {
+    const { getByText } = render(<Button disabled>Disabled</Button>)
+    const button = getByText('Disabled')
+    expect(button).toBeDisabled()
+    expect(button).toHaveClass('button')
+  })
+
+  it('calls onClick when clicked', async () => {
+    const handleClick = vi.fn()
+    const user = userEvent.setup()
+
+    const { getByText } = render(
+      <Button onClick={handleClick}>Click me</Button>
+    )
+    const button = getByText('Click me')
+
+    await user.click(button)
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not call onClick when disabled', async () => {
+    const handleClick = vi.fn()
+    const user = userEvent.setup()
+
+    const { getByText } = render(
+      <Button disabled onClick={handleClick}>
+        Click me
+      </Button>
+    )
+    const button = getByText('Click me')
+
+    await user.click(button)
+    expect(handleClick).not.toHaveBeenCalled()
+  })
+
+  it('applies custom className', () => {
+    const { getByText } = render(
+      <Button className='custom-class'>Custom</Button>
+    )
+    const button = getByText('Custom')
+    expect(button).toHaveClass('custom-class')
+  })
+
+  it('combines multiple props', () => {
+    const { getByText } = render(
+      <Button
+        emphasis='strong'
+        size='lg'
+        colorPalette='accent'
+        className='custom-class'
+      >
+        Combined
+      </Button>
+    )
+    const button = getByText('Combined')
+    expect(button).toHaveClass(
+      'button',
+      'button--emphasis_strong',
+      'button--size_lg',
+      'color-palette_accent',
+      'custom-class'
+    )
+  })
+})

package/src/components/Button/index.tsx

@@ -0,0 +1,48 @@
+import React 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 { type ButtonVariantProps, button } from '@oztix/roadie-core/recipes'
+
+/**
+ * A button component with various emphasis levels and sizes
+ */
+export interface ButtonProps extends HTMLStyledProps<'button'> {
+  /**
+   * The visual emphasis of the button
+   * @default 'default'
+   */
+  emphasis?: ButtonVariantProps['emphasis']
+
+  /**
+   * The size of the button
+   * @default 'md'
+   */
+  size?: ButtonVariantProps['size']
+
+  /**
+   * The color palette to use for the button
+   * @default 'neutral'
+   */
+  colorPalette?: ColorPalette
+
+  /**
+   * When true, the component will pass props to its child component
+   */
+  asChild?: boolean
+
+  /**
+   * The content to display
+   */
+  children?: React.ReactNode
+}
+
+export const Button = styled(
+  ark.button,
+  button
+) as React.ForwardRefExoticComponent<ButtonProps>
+
+Button.displayName = 'Button'

package/src/components/Code/Code.test.tsx

@@ -0,0 +1,85 @@
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { Code } from './index'
+
+describe('Code', () => {
+  it('renders with default props', () => {
+    const { getByText } = render(<Code>const x = 42;</Code>)
+    const code = getByText('const x = 42;')
+    expect(code).toBeInTheDocument()
+    expect(code.tagName.toLowerCase()).toBe('code')
+    expect(code).toHaveClass('code', 'code--emphasis_default')
+  })
+
+  it('renders with different emphasis', () => {
+    const { rerender, getByText } = render(
+      <Code emphasis='strong'>strong code</Code>
+    )
+    let code = getByText('strong code')
+    expect(code).toHaveClass('code--emphasis_strong')
+
+    rerender(<Code emphasis='subtle'>subtle code</Code>)
+    code = getByText('subtle code')
+    expect(code).toHaveClass('code--emphasis_subtle')
+
+    rerender(<Code emphasis='subtler'>subtler code</Code>)
+    code = getByText('subtler code')
+    expect(code).toHaveClass('code--emphasis_subtler')
+  })
+
+  it('renders with different color palettes', () => {
+    const { rerender, getByText } = render(
+      <Code colorPalette='accent'>accent code</Code>
+    )
+    let code = getByText('accent code')
+    expect(code).toBeInTheDocument()
+
+    rerender(<Code colorPalette='success'>success code</Code>)
+    code = getByText('success code')
+    expect(code).toBeInTheDocument()
+
+    rerender(<Code colorPalette='danger'>danger code</Code>)
+    code = getByText('danger code')
+    expect(code).toBeInTheDocument()
+  })
+
+  it('applies custom font size', () => {
+    const { getByText } = render(<Code fontSize='lg'>Large code</Code>)
+    const code = getByText('Large code')
+    expect(code).toHaveClass('fs_lg')
+  })
+
+  it('inherits Text props', () => {
+    const { getByText } = render(<Code color='accent.fg'>Colored code</Code>)
+    const code = getByText('Colored code')
+    expect(code).toHaveClass('c_accent.fg')
+  })
+
+  it('applies line clamp', () => {
+    const { getByText } = render(<Code lineClamp={2}>Clamped code</Code>)
+    const code = getByText('Clamped code')
+    expect(code).toHaveClass('lc_2')
+  })
+
+  it('combines multiple props', () => {
+    const { getByText } = render(
+      <Code
+        emphasis='subtler'
+        colorPalette='accent'
+        fontSize='lg'
+        className='custom-class'
+      >
+        Combined styles
+      </Code>
+    )
+    const code = getByText('Combined styles')
+    expect(code).toHaveClass(
+      'code',
+      'code--emphasis_subtler',
+      'color-palette_accent',
+      'fs_lg',
+      'custom-class'
+    )
+  })
+})

package/src/components/Code/index.tsx

@@ -0,0 +1,37 @@
+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 { type CodeVariantProps, code } from '@oztix/roadie-core/recipes'
+
+/**
+ * A code component that inherits from Text and renders as a code element
+ */
+export interface CodeProps extends HTMLStyledProps<'code'> {
+  /**
+   * The appearance of the code block
+   * @default 'default'
+   */
+  emphasis?: CodeVariantProps['emphasis']
+
+  /**
+   * The color palette to use for the code
+   * @default 'neutral'
+   */
+  colorPalette?: ColorPalette
+
+  /**
+   * The content to display
+   */
+  children?: ReactNode
+}
+
+export const Code = styled(
+  ark.code,
+  code
+) as React.ForwardRefExoticComponent<CodeProps>
+
+Code.displayName = 'Code'

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

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

@@ -0,0 +1,52 @@
+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
+) as React.ForwardRefExoticComponent<HeadingProps>
+
+Heading.displayName = 'Heading'

package/src/components/Text/Text.test.tsx

@@ -0,0 +1,121 @@
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { Text } from './index'
+
+describe('Text', () => {
+  it('renders with default props', () => {
+    const { getByText } = render(<Text>Hello World</Text>)
+    const text = getByText('Hello World')
+    expect(text).toBeInTheDocument()
+    expect(text.tagName.toLowerCase()).toBe('span')
+    expect(text).toHaveClass('text', 'text--emphasis_default')
+  })
+
+  it('applies textStyle prop', () => {
+    const { getByText } = render(<Text textStyle='heading.1'>Large Text</Text>)
+    const text = getByText('Large Text')
+    expect(text).toHaveClass('textStyle_heading.1')
+  })
+
+  it('renders with custom element type', () => {
+    const { getByText } = render(<Text as='p'>Paragraph Text</Text>)
+    const element = getByText('Paragraph Text')
+    expect(element.tagName.toLowerCase()).toBe('p')
+  })
+
+  it('renders with different emphasis', () => {
+    const { rerender, getByText } = render(
+      <Text emphasis='strong'>Strong Text</Text>
+    )
+    let text = getByText('Strong Text')
+    expect(text).toHaveClass('text--emphasis_strong')
+
+    rerender(<Text emphasis='subtle'>Subtle Text</Text>)
+    text = getByText('Subtle Text')
+    expect(text).toHaveClass('text--emphasis_subtle')
+
+    rerender(<Text emphasis='subtler'>subtler Text</Text>)
+    text = getByText('subtler Text')
+    expect(text).toHaveClass('text--emphasis_subtler')
+
+    rerender(<Text emphasis='default'>Default Text</Text>)
+    text = getByText('Default Text')
+    expect(text).toHaveClass('text--emphasis_default')
+  })
+
+  it('renders with different color palettes', () => {
+    const { rerender, getByText } = render(
+      <Text colorPalette='accent'>Accent Text</Text>
+    )
+    let text = getByText('Accent Text')
+    expect(text).toHaveClass('color-palette_accent')
+
+    rerender(<Text colorPalette='brand'>Brand Text</Text>)
+    text = getByText('Brand Text')
+    expect(text).toHaveClass('color-palette_brand')
+
+    rerender(<Text colorPalette='success'>Success Text</Text>)
+    text = getByText('Success Text')
+    expect(text).toHaveClass('color-palette_success')
+
+    rerender(<Text colorPalette='warning'>Warning Text</Text>)
+    text = getByText('Warning Text')
+    expect(text).toHaveClass('color-palette_warning')
+
+    rerender(<Text colorPalette='danger'>Danger Text</Text>)
+    text = getByText('Danger Text')
+    expect(text).toHaveClass('color-palette_danger')
+  })
+
+  it('applies interactive styles', () => {
+    const { getByText } = render(<Text interactive>Interactive Text</Text>)
+    const text = getByText('Interactive Text')
+    expect(text).toHaveClass('text--interactive_true')
+  })
+
+  it('applies line clamp prop', () => {
+    const { getByText } = render(
+      <Text lineClamp={2}>Multi-line text that should be clamped</Text>
+    )
+    const text = getByText('Multi-line text that should be clamped')
+    expect(text).toHaveClass('lc_2')
+  })
+
+  it('forwards additional HTML attributes', () => {
+    const { getByTestId } = render(
+      <Text data-testid='text' title='tooltip' aria-label='Accessible text'>
+        Text with attributes
+      </Text>
+    )
+    const text = getByTestId('text')
+    expect(text).toHaveClass('text')
+    expect(text).toHaveAttribute('title', 'tooltip')
+    expect(text).toHaveAttribute('aria-label', 'Accessible text')
+  })
+
+  it('combines multiple props', () => {
+    const { getByText } = render(
+      <Text
+        textStyle='heading.2'
+        emphasis='strong'
+        colorPalette='accent'
+        interactive
+        lineClamp={2}
+        className='custom-class'
+      >
+        Styled Text
+      </Text>
+    )
+    const text = getByText('Styled Text')
+    expect(text).toHaveClass(
+      'text',
+      'text--emphasis_strong',
+      'text--interactive_true',
+      'textStyle_heading.2',
+      'color-palette_accent',
+      'lc_2',
+      'custom-class'
+    )
+  })
+})

package/src/components/Text/index.tsx

@@ -0,0 +1,54 @@
+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 { type TextVariantProps, text } from '@oztix/roadie-core/recipes'
+
+/**
+ * Text component for displaying content with various styling options
+ */
+export interface TextProps extends HTMLStyledProps<'span'> {
+  /**
+   * The visual emphasis of the text
+   * @default 'default'
+   */
+  emphasis?: TextVariantProps['emphasis']
+
+  /**
+   * Whether the text is interactive
+   * @default false
+   */
+  interactive?: TextVariantProps['interactive']
+
+  /**
+   * The HTML element to render the text as
+   * @default 'span'
+   */
+  as?: HTMLStyledProps<'span'>['as']
+
+  /**
+   * The color palette to use for the text
+   * @default 'neutral'
+   */
+  colorPalette?: ColorPalette
+
+  /**
+   * When true, the component will pass props to its child component
+   */
+  asChild?: boolean
+
+  /**
+   * The content to display
+   */
+  children?: ReactNode
+}
+
+export const Text = styled(
+  ark.span,
+  text
+) as React.ForwardRefExoticComponent<TextProps>
+
+Text.displayName = 'Text'