@oztix/roadie-components 1.2.0 → 2.0.0

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

@@ -1,234 +0,0 @@
-import { render } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { describe, expect, it, vi } from 'vitest'
-
-import { IconButton } from './IconButton'
-
-describe('IconButton', () => {
-  it('renders with default props', () => {
-    const { getByRole } = render(<IconButton aria-label='Icon'>+</IconButton>)
-    const button = getByRole('button')
-    expect(button).toBeInTheDocument()
-    expect(button.tagName.toLowerCase()).toBe('button')
-    expect(button).toHaveClass(
-      'button',
-      'button--emphasis_default',
-      'button--size_md'
-    )
-  })
-
-  it('applies zero padding to create square button', () => {
-    const { getByRole } = render(<IconButton aria-label='Icon'>+</IconButton>)
-    const button = getByRole('button')
-    // The component should have px="0" and py="0" applied
-    expect(button).toBeInTheDocument()
-  })
-
-  it('renders with different emphasis', () => {
-    const { rerender, getByRole } = render(
-      <IconButton emphasis='strong' colorPalette='accent' aria-label='Strong'>
-        +
-      </IconButton>
-    )
-    let button = getByRole('button')
-    expect(button).toHaveClass(
-      'button--emphasis_strong',
-      'color-palette_accent'
-    )
-
-    rerender(
-      <IconButton emphasis='default' aria-label='Default'>
-        +
-      </IconButton>
-    )
-    button = getByRole('button')
-    expect(button).toHaveClass('button--emphasis_default')
-
-    rerender(
-      <IconButton emphasis='subtle' aria-label='Subtle'>
-        +
-      </IconButton>
-    )
-    button = getByRole('button')
-    expect(button).toHaveClass('button--emphasis_subtle')
-
-    rerender(
-      <IconButton emphasis='subtler' aria-label='Subtler'>
-        +
-      </IconButton>
-    )
-    button = getByRole('button')
-    expect(button).toHaveClass('button--emphasis_subtler')
-  })
-
-  it('renders with different sizes', () => {
-    const { rerender, getByRole } = render(
-      <IconButton size='xs' aria-label='Extra small'>
-        +
-      </IconButton>
-    )
-    let button = getByRole('button')
-    expect(button).toHaveClass('button--size_xs')
-
-    rerender(
-      <IconButton size='sm' aria-label='Small'>
-        +
-      </IconButton>
-    )
-    button = getByRole('button')
-    expect(button).toHaveClass('button--size_sm')
-
-    rerender(
-      <IconButton size='md' aria-label='Medium'>
-        +
-      </IconButton>
-    )
-    button = getByRole('button')
-    expect(button).toHaveClass('button--size_md')
-
-    rerender(
-      <IconButton size='lg' aria-label='Large'>
-        +
-      </IconButton>
-    )
-    button = getByRole('button')
-    expect(button).toHaveClass('button--size_lg')
-  })
-
-  it('renders with different color palettes', () => {
-    const { rerender, getByRole } = render(
-      <IconButton emphasis='strong' colorPalette='accent' aria-label='Accent'>
-        +
-      </IconButton>
-    )
-    let button = getByRole('button')
-    expect(button).toHaveClass('color-palette_accent')
-
-    rerender(
-      <IconButton emphasis='strong' colorPalette='success' aria-label='Success'>
-        +
-      </IconButton>
-    )
-    button = getByRole('button')
-    expect(button).toHaveClass('color-palette_success')
-
-    rerender(
-      <IconButton emphasis='strong' colorPalette='warning' aria-label='Warning'>
-        +
-      </IconButton>
-    )
-    button = getByRole('button')
-    expect(button).toHaveClass('color-palette_warning')
-
-    rerender(
-      <IconButton emphasis='strong' colorPalette='danger' aria-label='Danger'>
-        +
-      </IconButton>
-    )
-    button = getByRole('button')
-    expect(button).toHaveClass('color-palette_danger')
-  })
-
-  it('handles disabled state', () => {
-    const { getByRole } = render(
-      <IconButton disabled aria-label='Disabled'>
-        +
-      </IconButton>
-    )
-    const button = getByRole('button')
-    expect(button).toBeDisabled()
-    expect(button).toHaveClass('button')
-  })
-
-  it('calls onClick when clicked', async () => {
-    const handleClick = vi.fn()
-    const user = userEvent.setup()
-
-    const { getByRole } = render(
-      <IconButton onClick={handleClick} aria-label='Click me'>
-        +
-      </IconButton>
-    )
-    const button = getByRole('button')
-
-    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 { getByRole } = render(
-      <IconButton disabled onClick={handleClick} aria-label='Disabled'>
-        +
-      </IconButton>
-    )
-    const button = getByRole('button')
-
-    await user.click(button)
-    expect(handleClick).not.toHaveBeenCalled()
-  })
-
-  it('applies custom className', () => {
-    const { getByRole } = render(
-      <IconButton className='custom-class' aria-label='Custom'>
-        +
-      </IconButton>
-    )
-    const button = getByRole('button')
-    expect(button).toHaveClass('custom-class')
-  })
-
-  it('combines multiple props', () => {
-    const { getByRole } = render(
-      <IconButton
-        emphasis='strong'
-        size='lg'
-        colorPalette='accent'
-        className='custom-class'
-        aria-label='Combined'
-      >
-        +
-      </IconButton>
-    )
-    const button = getByRole('button')
-    expect(button).toHaveClass(
-      'button',
-      'button--emphasis_strong',
-      'button--size_lg',
-      'color-palette_accent',
-      'custom-class'
-    )
-  })
-
-  it('renders icon content correctly', () => {
-    const { getByRole } = render(
-      <IconButton aria-label='Add item'>
-        <svg
-          width='16'
-          height='16'
-          viewBox='0 0 16 16'
-          fill='currentColor'
-          data-testid='icon'
-        >
-          <path d='M8 0L8 16M0 8L16 8' />
-        </svg>
-      </IconButton>
-    )
-    const button = getByRole('button')
-    const icon = button.querySelector('[data-testid="icon"]')
-    expect(icon).toBeInTheDocument()
-  })
-
-  it('allows padding override', () => {
-    const { getByRole } = render(
-      <IconButton px='200' aria-label='Custom padding'>
-        +
-      </IconButton>
-    )
-    const button = getByRole('button')
-    // Should allow override of default px="0"
-    expect(button).toBeInTheDocument()
-  })
-})

package/src/components/Button/IconButton.tsx

@@ -1,14 +0,0 @@
-import type { ComponentProps } from 'react'
-
-import { Button } from './Button'
-
-export interface IconButtonProps
-  extends Omit<ComponentProps<typeof Button>, 'aria-label'> {
-  'aria-label': string
-}
-
-export const IconButton = (props: IconButtonProps) => {
-  return <Button px='0' py='0' _icon={{ fontSize: '1.2em' }} {...props} />
-}
-
-IconButton.displayName = 'IconButton'

package/src/components/Button/index.tsx

@@ -1,2 +0,0 @@
-export * from './Button'
-export * from './IconButton'

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

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

@@ -1,37 +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 { 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/Container/Container.test.tsx

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

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