@furystack/shades-common-components 11.0.0 → 12.0.0

package/src/components/rating.tsx

@@ -0,0 +1,286 @@
+import { Shade, createComponent } from '@furystack/shades'
+import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js'
+import type { Palette } from '../services/theme-provider-service.js'
+import { ThemeProviderService } from '../services/theme-provider-service.js'
+import { Icon } from './icons/icon.js'
+import { star as starIcon, starOutline } from './icons/icon-definitions.js'
+
+/**
+ * Props for the Rating component
+ */
+export type RatingProps = {
+  /**
+   * Current rating value
+   */
+  value?: number
+  /**
+   * Maximum number of stars (default: 5)
+   */
+  max?: number
+  /**
+   * Rating precision - 1 for full stars, 0.5 for half stars (default: 1)
+   */
+  precision?: 1 | 0.5
+  /**
+   * Size of the rating stars
+   */
+  size?: 'small' | 'medium' | 'large'
+  /**
+   * Whether the rating is disabled
+   */
+  disabled?: boolean
+  /**
+   * Whether the rating is read-only (displays value but not interactive)
+   */
+  readOnly?: boolean
+  /**
+   * Theme palette color (default: 'warning' for gold stars)
+   */
+  color?: keyof Palette
+  /**
+   * Content used for filled stars (default: filled star icon)
+   */
+  icon?: JSX.Element | string
+  /**
+   * Content used for empty stars (default: outlined star icon)
+   */
+  emptyIcon?: JSX.Element | string
+  /**
+   * Callback when the rating value changes
+   * @param value - The new rating value
+   */
+  onValueChange?: (value: number) => void
+  /**
+   * The name attribute for the hidden input element (for form integration)
+   */
+  name?: string
+}
+
+/**
+ * Rating component for collecting user feedback with star ratings.
+ * Supports full and half-star precision, custom icons, hover feedback,
+ * keyboard navigation, and theme integration.
+ */
+export const Rating = Shade<RatingProps>({
+  shadowDomName: 'shade-rating',
+  css: {
+    display: 'inline-flex',
+    alignItems: 'center',
+
+    '& .rating-container': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '2px',
+    },
+
+    '& .rating-star': {
+      position: 'relative',
+      display: 'inline-flex',
+      cursor: 'pointer',
+      fontSize: cssVariableTheme.typography.fontSize.xl,
+      lineHeight: '1',
+      userSelect: 'none',
+      webkitUserSelect: 'none',
+      transition: buildTransition([
+        'transform',
+        cssVariableTheme.transitions.duration.fast,
+        cssVariableTheme.transitions.easing.default,
+      ]),
+    },
+
+    '& .star-empty': {
+      color: cssVariableTheme.text.disabled,
+    },
+
+    '& .star-filled': {
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      color: 'var(--rating-color)',
+      overflow: 'hidden',
+      pointerEvents: 'none',
+      whiteSpace: 'nowrap',
+      transition: buildTransition([
+        'width',
+        cssVariableTheme.transitions.duration.fast,
+        cssVariableTheme.transitions.easing.default,
+      ]),
+    },
+
+    '&:not([data-disabled]):not([data-readonly]) .rating-star:hover': {
+      transform: 'scale(1.15)',
+    },
+
+    '&:focus-visible': {
+      outline: 'none',
+      boxShadow: cssVariableTheme.action.focusRing,
+      borderRadius: cssVariableTheme.shape.borderRadius.xs,
+    },
+
+    '&[data-size="small"] .rating-star': {
+      fontSize: '18px',
+    },
+
+    '&[data-size="large"] .rating-star': {
+      fontSize: '32px',
+    },
+
+    '&[data-disabled] .rating-star': {
+      cursor: 'not-allowed',
+      opacity: cssVariableTheme.action.disabledOpacity,
+    },
+
+    '&[data-disabled] .rating-star:hover': {
+      transform: 'none',
+    },
+
+    '&[data-readonly] .rating-star': {
+      cursor: 'default',
+    },
+
+    '&[data-readonly] .rating-star:hover': {
+      transform: 'none',
+    },
+  },
+  render: ({ props, injector, useHostProps, useRef }) => {
+    const themeProvider = injector.getInstance(ThemeProviderService)
+    const max = props.max ?? 5
+    const precision = props.precision ?? 1
+    const value = props.value ?? 0
+    const filledIcon = props.icon ?? ((<Icon icon={starIcon} size="small" />) as unknown as JSX.Element)
+    const emptyIcon = props.emptyIcon ?? ((<Icon icon={starOutline} size="small" />) as unknown as JSX.Element)
+    const isInteractive = !props.disabled && !props.readOnly
+
+    const color = themeProvider.theme.palette[props.color || 'warning'].main
+
+    const containerRef = useRef<HTMLDivElement>('container')
+
+    useHostProps({
+      'data-size': props.size || 'medium',
+      style: { '--rating-color': color },
+      ...(props.disabled ? { 'data-disabled': '', 'aria-disabled': 'true' } : {}),
+      ...(props.readOnly ? { 'data-readonly': '', 'aria-readonly': 'true' } : {}),
+      ...(isInteractive
+        ? {
+            role: 'slider',
+            tabindex: '0',
+            'aria-valuenow': String(value),
+            'aria-valuemin': '0',
+            'aria-valuemax': String(max),
+            'aria-label': 'Rating',
+            onkeydown: (ev: KeyboardEvent) => {
+              const step = precision === 0.5 ? 0.5 : 1
+              let newValue: number
+
+              switch (ev.key) {
+                case 'ArrowRight':
+                case 'ArrowUp':
+                  ev.preventDefault()
+                  newValue = Math.min(value + step, max)
+                  break
+                case 'ArrowLeft':
+                case 'ArrowDown':
+                  ev.preventDefault()
+                  newValue = Math.max(value - step, 0)
+                  break
+                case 'Home':
+                  ev.preventDefault()
+                  newValue = 0
+                  break
+                case 'End':
+                  ev.preventDefault()
+                  newValue = max
+                  break
+                default:
+                  return
+              }
+
+              if (newValue !== value) {
+                props.onValueChange?.(newValue)
+              }
+            },
+          }
+        : {
+            role: 'img',
+            'aria-label': `Rating: ${value} out of ${max}`,
+          }),
+    })
+
+    const updateStarVisuals = (displayValue: number) => {
+      const container = containerRef.current
+      if (!container) return
+      const starEls = container.querySelectorAll('.rating-star')
+      starEls.forEach((starEl, index) => {
+        const starValue = index + 1
+        const filled = starEl.querySelector('.star-filled') as HTMLElement
+        if (!filled) return
+
+        if (displayValue >= starValue) {
+          filled.style.width = '100%'
+        } else if (precision === 0.5 && displayValue >= starValue - 0.5) {
+          filled.style.width = '50%'
+        } else {
+          filled.style.width = '0%'
+        }
+      })
+    }
+
+    const getValueFromMouseEvent = (ev: MouseEvent, index: number): number => {
+      const starEl = ev.currentTarget as HTMLElement
+      const rect = starEl.getBoundingClientRect()
+      const x = ev.clientX - rect.left
+      if (precision === 0.5 && x < rect.width / 2) {
+        return index + 0.5
+      }
+      return index + 1
+    }
+
+    const handleClick = (ev: MouseEvent, index: number) => {
+      if (!isInteractive) return
+      const hostEl = containerRef.current?.closest('shade-rating') as HTMLElement | null
+      hostEl?.focus()
+      const newValue = getValueFromMouseEvent(ev, index)
+      props.onValueChange?.(newValue)
+    }
+
+    const handleMouseMove = (ev: MouseEvent, index: number) => {
+      if (!isInteractive) return
+      const hoverValue = getValueFromMouseEvent(ev, index)
+      updateStarVisuals(hoverValue)
+    }
+
+    const handleMouseLeave = () => {
+      if (!isInteractive) return
+      updateStarVisuals(value)
+    }
+
+    const stars = Array.from({ length: max }, (_, i) => {
+      const starValue = i + 1
+      const isFilled = value >= starValue
+      const isHalf = precision === 0.5 && !isFilled && value >= starValue - 0.5
+      const initialWidth = isFilled ? '100%' : isHalf ? '50%' : '0%'
+
+      return (
+        <span
+          className="rating-star"
+          aria-hidden="true"
+          data-value={String(starValue)}
+          onclick={(ev: MouseEvent) => handleClick(ev, i)}
+          onmousemove={(ev: MouseEvent) => handleMouseMove(ev, i)}
+        >
+          <span className="star-empty">{emptyIcon}</span>
+          <span className="star-filled" style={{ width: initialWidth }}>
+            {filledIcon}
+          </span>
+        </span>
+      )
+    })
+
+    return (
+      <div ref={containerRef} className="rating-container" onmouseleave={handleMouseLeave}>
+        {stars}
+        {props.name ? <input type="hidden" name={props.name} value={String(value)} /> : null}
+      </div>
+    )
+  },
+})

package/src/components/result.spec.tsx

@@ -0,0 +1,221 @@
+import { createComponent, flushUpdates } from '@furystack/shades'
+import { describe, expect, it } from 'vitest'
+import type { ResultProps, ResultStatus } from './result.js'
+import { Result } from './result.js'
+
+describe('Result', () => {
+  it('should be defined', () => {
+    expect(Result).toBeDefined()
+    expect(typeof Result).toBe('function')
+  })
+
+  it('should create a result element', () => {
+    const el = (<Result status="success" title="Done" />) as unknown as HTMLElement
+    expect(el).toBeDefined()
+    expect(el.tagName?.toLowerCase()).toBe('shade-result')
+  })
+
+  it('should set data-status attribute for each status', async () => {
+    const statuses: ResultStatus[] = ['success', 'error', 'warning', 'info', '403', '404', '500']
+    expect(statuses.length).toBe(7)
+
+    for (const status of statuses) {
+      const el = (
+        <div>
+          <Result status={status} title="Test" />
+        </div>
+      )
+      const result = el.firstElementChild as JSX.Element
+      result.updateComponent()
+      await flushUpdates()
+      expect(result.getAttribute('data-status')).toBe(status)
+    }
+  })
+
+  it('should render the title text', async () => {
+    const el = (
+      <div>
+        <Result status="success" title="Operation Successful" />
+      </div>
+    )
+    const result = el.firstElementChild as JSX.Element
+    result.updateComponent()
+    await flushUpdates()
+    const titleEl = result.querySelector('.result-title')
+    expect(titleEl).not.toBeNull()
+    expect(titleEl?.textContent).toBe('Operation Successful')
+  })
+
+  it('should render the subtitle when provided', async () => {
+    const el = (
+      <div>
+        <Result status="info" title="Info" subtitle="Some details here" />
+      </div>
+    )
+    const result = el.firstElementChild as JSX.Element
+    result.updateComponent()
+    await flushUpdates()
+    const subtitleEl = result.querySelector('.result-subtitle')
+    expect(subtitleEl).not.toBeNull()
+    expect(subtitleEl?.textContent).toBe('Some details here')
+  })
+
+  it('should not render the subtitle when not provided', async () => {
+    const el = (
+      <div>
+        <Result status="success" title="Done" />
+      </div>
+    )
+    const result = el.firstElementChild as JSX.Element
+    result.updateComponent()
+    await flushUpdates()
+    const subtitleEl = result.querySelector('.result-subtitle')
+    expect(subtitleEl).toBeNull()
+  })
+
+  it('should render the default icon for each status', async () => {
+    const statuses: ResultStatus[] = ['success', 'error', 'warning', 'info', '403', '404', '500']
+    expect(statuses.length).toBe(7)
+
+    for (const status of statuses) {
+      const el = (
+        <div>
+          <Result status={status} title="Test" />
+        </div>
+      )
+      const result = el.firstElementChild as JSX.Element
+      result.updateComponent()
+      await flushUpdates()
+      const iconEl = result.querySelector('.result-icon')
+      expect(iconEl).not.toBeNull()
+      expect(iconEl?.querySelector('shade-icon')).not.toBeNull()
+    }
+  })
+
+  it('should render a custom icon when icon prop is provided', async () => {
+    const el = (
+      <div>
+        <Result status="success" title="Done" icon="🎉" />
+      </div>
+    )
+    const result = el.firstElementChild as JSX.Element
+    result.updateComponent()
+    await flushUpdates()
+    const iconEl = result.querySelector('.result-icon')
+    expect(iconEl).not.toBeNull()
+    expect(iconEl?.textContent).toBe('🎉')
+  })
+
+  it('should set CSS custom property for status color', async () => {
+    const el = (
+      <div>
+        <Result status="success" title="Done" />
+      </div>
+    )
+    const result = el.firstElementChild as JSX.Element
+    result.updateComponent()
+    await flushUpdates()
+    expect(result.style.getPropertyValue('--result-status-color')).toBe('var(--shades-theme-palette-success-main)')
+  })
+
+  it('should set CSS custom property for error status color', async () => {
+    const el = (
+      <div>
+        <Result status="error" title="Failed" />
+      </div>
+    )
+    const result = el.firstElementChild as JSX.Element
+    result.updateComponent()
+    await flushUpdates()
+    expect(result.style.getPropertyValue('--result-status-color')).toBe('var(--shades-theme-palette-error-main)')
+  })
+
+  it('should set CSS custom property for 403 status (warning color)', async () => {
+    const el = (
+      <div>
+        <Result status="403" title="Forbidden" />
+      </div>
+    )
+    const result = el.firstElementChild as JSX.Element
+    result.updateComponent()
+    await flushUpdates()
+    expect(result.style.getPropertyValue('--result-status-color')).toBe('var(--shades-theme-palette-warning-main)')
+  })
+
+  it('should set CSS custom property for 404 status (info color)', async () => {
+    const el = (
+      <div>
+        <Result status="404" title="Not Found" />
+      </div>
+    )
+    const result = el.firstElementChild as JSX.Element
+    result.updateComponent()
+    await flushUpdates()
+    expect(result.style.getPropertyValue('--result-status-color')).toBe('var(--shades-theme-palette-info-main)')
+  })
+
+  it('should set CSS custom property for 500 status (error color)', async () => {
+    const el = (
+      <div>
+        <Result status="500" title="Server Error" />
+      </div>
+    )
+    const result = el.firstElementChild as JSX.Element
+    result.updateComponent()
+    await flushUpdates()
+    expect(result.style.getPropertyValue('--result-status-color')).toBe('var(--shades-theme-palette-error-main)')
+  })
+
+  it('should render children in the extra area', async () => {
+    const el = (
+      <div>
+        <Result status="success" title="Done">
+          <button>Go Home</button>
+        </Result>
+      </div>
+    )
+    const result = el.firstElementChild as JSX.Element
+    result.updateComponent()
+    await flushUpdates()
+    const extraEl = result.querySelector('.result-extra')
+    expect(extraEl).not.toBeNull()
+    const button = extraEl?.querySelector('button')
+    expect(button).not.toBeNull()
+    expect(button?.textContent).toBe('Go Home')
+  })
+
+  it('should not render the extra area when no children are provided', async () => {
+    const el = (
+      <div>
+        <Result status="success" title="Done" />
+      </div>
+    )
+    const result = el.firstElementChild as JSX.Element
+    result.updateComponent()
+    await flushUpdates()
+    const extraEl = result.querySelector('.result-extra')
+    expect(extraEl).toBeNull()
+  })
+
+  it('should set the icon role to img', async () => {
+    const el = (
+      <div>
+        <Result status="success" title="Done" />
+      </div>
+    )
+    const result = el.firstElementChild as JSX.Element
+    result.updateComponent()
+    await flushUpdates()
+    const iconEl = result.querySelector('.result-icon')
+    expect(iconEl?.getAttribute('role')).toBe('img')
+  })
+
+  it('should set props correctly', () => {
+    const el = (<Result status="warning" title="Careful" subtitle="Watch out" icon="⚡" />) as unknown as JSX.Element
+    const props = el.props as ResultProps
+    expect(props.status).toBe('warning')
+    expect(props.title).toBe('Careful')
+    expect(props.subtitle).toBe('Watch out')
+    expect(props.icon).toBe('⚡')
+  })
+})

package/src/components/result.tsx

@@ -0,0 +1,155 @@
+import type { PartialElement } from '@furystack/shades'
+import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../services/css-variable-theme.js'
+import { paletteMainColors } from '../services/palette-css-vars.js'
+import { Icon } from './icons/icon.js'
+import {
+  checkCircle,
+  errorCircle,
+  forbidden,
+  info as infoIcon,
+  searchOff,
+  serverError,
+  warning as warningIcon,
+} from './icons/icon-definitions.js'
+
+/**
+ * Result status types. Includes both semantic statuses and HTTP error codes.
+ */
+export type ResultStatus = 'success' | 'error' | 'warning' | 'info' | '403' | '404' | '500'
+
+export type ResultProps = PartialElement<HTMLElement> & {
+  /** The status determines the icon and color of the result */
+  status: ResultStatus
+  /** The main title text */
+  title: string
+  /** Optional subtitle text below the title */
+  subtitle?: string
+  /** Optional custom icon to override the default status icon */
+  icon?: JSX.Element | string
+}
+
+const statusColorMap: Record<ResultStatus, string> = {
+  success: paletteMainColors.success.main,
+  error: paletteMainColors.error.main,
+  warning: paletteMainColors.warning.main,
+  info: paletteMainColors.info.main,
+  '403': paletteMainColors.warning.main,
+  '404': paletteMainColors.info.main,
+  '500': paletteMainColors.error.main,
+}
+
+const defaultIcons: Record<ResultStatus, JSX.Element> = {
+  success: (<Icon icon={checkCircle} size={64} />) as unknown as JSX.Element,
+  error: (<Icon icon={errorCircle} size={64} />) as unknown as JSX.Element,
+  warning: (<Icon icon={warningIcon} size={64} />) as unknown as JSX.Element,
+  info: (<Icon icon={infoIcon} size={64} />) as unknown as JSX.Element,
+  '403': (<Icon icon={forbidden} size={64} />) as unknown as JSX.Element,
+  '404': (<Icon icon={searchOff} size={64} />) as unknown as JSX.Element,
+  '500': (<Icon icon={serverError} size={64} />) as unknown as JSX.Element,
+}
+
+const defaultTitles: Record<ResultStatus, string> = {
+  success: 'Success',
+  error: 'Error',
+  warning: 'Warning',
+  info: 'Information',
+  '403': '403 - Forbidden',
+  '404': '404 - Not Found',
+  '500': '500 - Internal Server Error',
+}
+
+/**
+ * Result component for displaying operation outcomes, status pages, and feedback.
+ * Supports success, error, warning, info statuses and common HTTP error codes (403, 404, 500).
+ */
+export const Result = Shade<ResultProps>({
+  shadowDomName: 'shade-result',
+  css: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    textAlign: 'center',
+    padding: `${cssVariableTheme.spacing.xl} ${cssVariableTheme.spacing.lg}`,
+    fontFamily: cssVariableTheme.typography.fontFamily,
+    boxSizing: 'border-box',
+
+    // ==========================================
+    // ICON
+    // ==========================================
+
+    '& .result-icon': {
+      fontSize: '64px',
+      lineHeight: '1',
+      marginBottom: cssVariableTheme.spacing.lg,
+      color: 'var(--result-status-color)',
+    },
+
+    // ==========================================
+    // TITLE
+    // ==========================================
+
+    '& .result-title': {
+      fontSize: cssVariableTheme.typography.fontSize.xl,
+      fontWeight: cssVariableTheme.typography.fontWeight.bold,
+      color: cssVariableTheme.text.primary,
+      margin: '0',
+      marginBottom: cssVariableTheme.spacing.sm,
+      lineHeight: cssVariableTheme.typography.lineHeight.tight,
+    },
+
+    // ==========================================
+    // SUBTITLE
+    // ==========================================
+
+    '& .result-subtitle': {
+      fontSize: cssVariableTheme.typography.fontSize.md,
+      color: cssVariableTheme.text.secondary,
+      margin: '0',
+      marginBottom: cssVariableTheme.spacing.lg,
+      lineHeight: cssVariableTheme.typography.lineHeight.normal,
+      maxWidth: '480px',
+    },
+
+    // ==========================================
+    // EXTRA (actions area)
+    // ==========================================
+
+    '& .result-extra': {
+      display: 'flex',
+      gap: cssVariableTheme.spacing.md,
+      marginTop: cssVariableTheme.spacing.md,
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+    },
+  },
+  render: ({ props, children, useHostProps }) => {
+    const { status, title, subtitle, icon, style } = props
+
+    const displayIcon = icon ?? defaultIcons[status]
+    const statusColor = statusColorMap[status]
+
+    useHostProps({
+      'data-status': status,
+      style: {
+        '--result-status-color': statusColor,
+        ...(style as Record<string, string>),
+      },
+    })
+
+    const hasChildren = children && (Array.isArray(children) ? children.length > 0 : true)
+
+    return (
+      <>
+        <span className="result-icon" role="img">
+          {displayIcon}
+        </span>
+        <h3 className="result-title">{title}</h3>
+        {subtitle ? <p className="result-subtitle">{subtitle}</p> : null}
+        {hasChildren ? <div className="result-extra">{children}</div> : null}
+      </>
+    )
+  },
+})
+
+export { defaultIcons as resultDefaultIcons, defaultTitles as resultDefaultTitles }