@oztix/roadie-components 0.2.1 → 1.1.0

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@oztix/roadie-components",
-  "version": "0.2.1",
+  "version": "1.1.0",
   "description": "The components for Roadie Design System at Oztix",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TicketSolutionsPtyLtd/roadie"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -11,11 +15,21 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.js",
+      "require": "./dist/hooks/index.js"
+    },
+    "./src/*": {
+      "types": "./src/*",
+      "import": "./src/*"
     }
   },
   "sideEffects": false,
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "publishConfig": {
     "access": "public"
@@ -25,24 +39,23 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@oztix/roadie-core": "^0.2.1",
-    "react-aria-components": "1.0.0"
+    "@ark-ui/react": "5.26.2",
+    "@oztix/roadie-core": "1.1.0"
   },
   "devDependencies": {
-    "@pandacss/dev": "0.48.1",
-    "@testing-library/jest-dom": "6.1.6",
-    "@testing-library/react": "15.0.0",
-    "@testing-library/user-event": "14.5.1",
-    "@types/node": "22.10.2",
-    "@types/react": "19.0.2",
-    "@types/react-dom": "19.0.2",
-    "@vitejs/plugin-react": "4.3.4",
-    "@vitest/coverage-v8": "1.6.0",
-    "@vitest/ui": "1.6.0",
-    "jsdom": "24.1.3",
-    "tsup": "8.0.0",
-    "typescript": "5.7.2",
-    "vitest": "1.6.0"
+    "@pandacss/dev": "1.4.3",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.0",
+    "@testing-library/user-event": "14.6.1",
+    "@types/node": "24.9.2",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
+    "@vitejs/plugin-react": "5.1.0",
+    "@vitest/coverage-v8": "4.0.4",
+    "@vitest/ui": "4.0.4",
+    "jsdom": "27.0.1",
+    "tsup": "8.5.0",
+    "vitest": "4.0.4"
   },
   "author": {
     "name": "Luke Brooker",
@@ -63,15 +76,14 @@
     "build": "tsup",
     "clean": "rm -rf node_modules dist",
     "dev": "tsup --watch",
-    "pretest": "panda codegen",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "test:ui": "vitest --ui",
     "format": "prettier --ignore-path ../../.prettierignore --write \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
     "format:check": "prettier --ignore-path ../../.prettierignore --check \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
-    "lint": "eslint --ignore-path ../../.eslintignore . --ext .ts,.tsx",
-    "lint:fix": "eslint --ignore-path ../../.eslintignore . --ext .ts,.tsx --fix",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "typecheck": "tsc --noEmit"
   }
 }

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'