@furystack/shades-common-components 11.0.0 → 12.0.0

package/src/components/chip.tsx

@@ -0,0 +1,188 @@
+import type { PartialElement } from '@furystack/shades'
+import { Shade, createComponent } from '@furystack/shades'
+import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js'
+import { paletteFullColors } from '../services/palette-css-vars.js'
+import type { Palette } from '../services/theme-provider-service.js'
+import { Icon } from './icons/icon.js'
+import { close } from './icons/icon-definitions.js'
+
+export type ChipProps = PartialElement<HTMLElement> & {
+  variant?: 'filled' | 'outlined'
+  color?: keyof Palette
+  size?: 'small' | 'medium'
+  disabled?: boolean
+  clickable?: boolean
+  onDelete?: (ev: MouseEvent) => void
+}
+
+const defaultColors = {
+  main: cssVariableTheme.text.secondary,
+  mainContrast: cssVariableTheme.background.default,
+  light: cssVariableTheme.text.primary,
+  lightContrast: cssVariableTheme.background.default,
+  dark: cssVariableTheme.text.disabled,
+  darkContrast: cssVariableTheme.background.default,
+}
+
+export const Chip = Shade<ChipProps>({
+  shadowDomName: 'shade-chip',
+  css: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: cssVariableTheme.spacing.xs,
+    maxWidth: '100%',
+    fontFamily: cssVariableTheme.typography.fontFamily,
+    fontSize: cssVariableTheme.typography.fontSize.sm,
+    fontWeight: cssVariableTheme.typography.fontWeight.medium,
+    lineHeight: '1',
+    borderRadius: cssVariableTheme.shape.borderRadius.lg,
+    whiteSpace: 'nowrap',
+    verticalAlign: 'middle',
+    boxSizing: 'border-box',
+    userSelect: 'none',
+    transition: buildTransition(
+      ['background', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+      ['box-shadow', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+      ['color', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+      ['opacity', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+    ),
+
+    // Size: medium (default)
+    height: '32px',
+    padding: `0 ${cssVariableTheme.spacing.md}`,
+
+    '&[data-size="small"]': {
+      height: '24px',
+      padding: `0 ${cssVariableTheme.spacing.sm}`,
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+    },
+
+    // Disabled state
+    '&[data-disabled]': {
+      opacity: cssVariableTheme.action.disabledOpacity,
+      pointerEvents: 'none',
+    },
+
+    // Clickable state
+    '&[data-clickable]': {
+      cursor: 'pointer',
+    },
+
+    '&[data-clickable]:active:not([data-disabled])': {
+      transform: 'scale(0.96)',
+    },
+
+    // ==========================================
+    // FILLED VARIANT (default)
+    // ==========================================
+
+    '&:not([data-variant])': {
+      background: 'color-mix(in srgb, var(--chip-color-main) 15%, transparent)',
+      color: 'var(--chip-color-main)',
+    },
+
+    '&:not([data-variant])[data-clickable]:hover:not([data-disabled])': {
+      background: 'color-mix(in srgb, var(--chip-color-main) 25%, transparent)',
+    },
+
+    '&[data-variant="filled"]': {
+      background: 'color-mix(in srgb, var(--chip-color-main) 15%, transparent)',
+      color: 'var(--chip-color-main)',
+    },
+
+    '&[data-variant="filled"][data-clickable]:hover:not([data-disabled])': {
+      background: 'color-mix(in srgb, var(--chip-color-main) 25%, transparent)',
+    },
+
+    // ==========================================
+    // OUTLINED VARIANT
+    // ==========================================
+
+    '&[data-variant="outlined"]': {
+      background: 'transparent',
+      color: 'var(--chip-color-main)',
+      boxShadow: '0px 0px 0px 1px var(--chip-color-main)',
+    },
+
+    '&[data-variant="outlined"][data-clickable]:hover:not([data-disabled])': {
+      background: 'color-mix(in srgb, var(--chip-color-main) 10%, transparent)',
+    },
+
+    // ==========================================
+    // DELETE BUTTON
+    // ==========================================
+
+    '& .chip-delete': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+      borderRadius: cssVariableTheme.shape.borderRadius.full,
+      border: 'none',
+      background: 'transparent',
+      color: 'inherit',
+      padding: '0',
+      marginLeft: cssVariableTheme.spacing.xs,
+      marginRight: `calc(-1 * ${cssVariableTheme.spacing.xs})`,
+      width: '18px',
+      height: '18px',
+      fontSize: cssVariableTheme.typography.fontSize.md,
+      lineHeight: '1',
+      opacity: '0.7',
+      transition: buildTransition(
+        ['opacity', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+        ['background', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+      ),
+    },
+
+    '& .chip-delete:hover': {
+      opacity: '1',
+      background: 'color-mix(in srgb, currentColor 15%, transparent)',
+    },
+
+    // Label truncation
+    '& .chip-label': {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+    },
+  },
+  render: ({ props, children, useHostProps }) => {
+    const { variant, color, size, disabled, clickable, onDelete, style, ...rest } = props
+
+    const colors = color ? paletteFullColors[color] : defaultColors
+    useHostProps({
+      'data-variant': variant || undefined,
+      'data-size': size === 'small' ? 'small' : undefined,
+      'data-disabled': disabled ? '' : undefined,
+      'data-clickable': clickable || rest.onclick ? '' : undefined,
+      style: {
+        '--chip-color-main': colors.main,
+        '--chip-color-main-contrast': colors.mainContrast,
+        '--chip-color-light': colors.light,
+        '--chip-color-dark': colors.dark,
+        '--chip-color-dark-contrast': colors.darkContrast,
+        ...(style as Record<string, string>),
+      },
+    })
+
+    return (
+      <>
+        <span className="chip-label">{children}</span>
+        {onDelete ? (
+          <span
+            className="chip-delete"
+            role="button"
+            onclick={(ev: MouseEvent) => {
+              ev.stopPropagation()
+              onDelete(ev)
+            }}
+          >
+            <Icon icon={close} size={14} />
+          </span>
+        ) : null}
+      </>
+    )
+  },
+})

package/src/components/circular-progress.spec.tsx

@@ -0,0 +1,289 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { ObservableValue, sleepAsync, usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ThemeProviderService } from '../services/theme-provider-service.js'
+import { CircularProgress } from './circular-progress.js'
+
+describe('CircularProgress', () => {
+  let originalAnimate: typeof Element.prototype.animate
+
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+    originalAnimate = Element.prototype.animate
+
+    Element.prototype.animate = vi.fn(
+      (_keyframes: Keyframe[] | PropertyIndexedKeyframes | null, _options?: number | KeyframeAnimationOptions) => {
+        const mockAnimation = {
+          onfinish: null as ((event: AnimationPlaybackEvent) => void) | null,
+          oncancel: null as ((event: AnimationPlaybackEvent) => void) | null,
+          cancel: vi.fn(),
+          play: vi.fn(),
+          pause: vi.fn(),
+          finish: vi.fn(),
+          addEventListener: vi.fn(),
+          removeEventListener: vi.fn(),
+        }
+        return mockAnimation as unknown as Animation
+      },
+    ) as typeof Element.prototype.animate
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    Element.prototype.animate = originalAnimate
+    vi.restoreAllMocks()
+  })
+
+  it('should render with shadow DOM', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CircularProgress />,
+      })
+
+      await sleepAsync(50)
+
+      const el = document.querySelector('shade-circular-progress')
+      expect(el).not.toBeNull()
+    })
+  })
+
+  it('should render an SVG element', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CircularProgress />,
+      })
+
+      await sleepAsync(50)
+
+      const svg = document.querySelector('shade-circular-progress svg')
+      expect(svg).not.toBeNull()
+    })
+  })
+
+  it('should render track and progress circles', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CircularProgress />,
+      })
+
+      await sleepAsync(50)
+
+      const track = document.querySelector('shade-circular-progress .progress-track')
+      const circle = document.querySelector('shade-circular-progress .progress-circle')
+      expect(track).not.toBeNull()
+      expect(circle).not.toBeNull()
+    })
+  })
+
+  it('should set role="progressbar"', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <CircularProgress />,
+      })
+
+      await sleepAsync(50)
+
+      const el = document.querySelector('shade-circular-progress') as HTMLElement
+      expect(el.getAttribute('role')).toBe('progressbar')
+    })
+  })
+
+  describe('size', () => {
+    it('should use default size of 40px', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CircularProgress />,
+        })
+
+        await sleepAsync(50)
+
+        const svg = document.querySelector('shade-circular-progress svg') as SVGElement
+        expect(svg.getAttribute('width')).toBe('40')
+        expect(svg.getAttribute('height')).toBe('40')
+      })
+    })
+
+    it('should accept custom size', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CircularProgress size={60} />,
+        })
+
+        await sleepAsync(50)
+
+        const svg = document.querySelector('shade-circular-progress svg') as SVGElement
+        expect(svg.getAttribute('width')).toBe('60')
+        expect(svg.getAttribute('height')).toBe('60')
+      })
+    })
+  })
+
+  describe('determinate variant', () => {
+    it('should set aria-valuenow for determinate variant', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const value = new ObservableValue(50)
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CircularProgress variant="determinate" value={value} />,
+        })
+
+        await sleepAsync(50)
+
+        const el = document.querySelector('shade-circular-progress') as HTMLElement
+        expect(el.getAttribute('aria-valuenow')).toBe('50')
+        expect(el.getAttribute('aria-valuemin')).toBe('0')
+        expect(el.getAttribute('aria-valuemax')).toBe('100')
+      })
+    })
+
+    it('should clamp value to 0-100 range', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const value = new ObservableValue(150)
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CircularProgress variant="determinate" value={value} />,
+        })
+
+        await sleepAsync(50)
+
+        const el = document.querySelector('shade-circular-progress') as HTMLElement
+        expect(el.getAttribute('aria-valuenow')).toBe('100')
+      })
+    })
+
+    it('should update stroke-dashoffset when observable value changes', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const value = new ObservableValue(0)
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CircularProgress variant="determinate" value={value} />,
+        })
+
+        await sleepAsync(50)
+
+        const circle = document.querySelector('shade-circular-progress .progress-circle') as SVGCircleElement
+        const initialOffset = circle.style.strokeDashoffset
+
+        value.setValue(75)
+        await sleepAsync(10)
+
+        const updatedOffset = circle.style.strokeDashoffset
+        expect(updatedOffset).not.toBe(initialOffset)
+      })
+    })
+
+    it('should update aria-valuenow when observable value changes', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const value = new ObservableValue(20)
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CircularProgress variant="determinate" value={value} />,
+        })
+
+        await sleepAsync(50)
+
+        const el = document.querySelector('shade-circular-progress') as HTMLElement
+        expect(el.getAttribute('aria-valuenow')).toBe('20')
+
+        value.setValue(85)
+        await sleepAsync(10)
+
+        expect(el.getAttribute('aria-valuenow')).toBe('85')
+      })
+    })
+  })
+
+  describe('indeterminate variant', () => {
+    it('should default to indeterminate variant', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CircularProgress />,
+        })
+
+        await sleepAsync(50)
+
+        const el = document.querySelector('shade-circular-progress') as HTMLElement
+        expect(el.hasAttribute('aria-valuenow')).toBe(false)
+      })
+    })
+  })
+
+  describe('theme integration', () => {
+    it('should set CSS color variable from theme', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CircularProgress />,
+        })
+
+        await sleepAsync(50)
+
+        const el = document.querySelector('shade-circular-progress') as HTMLElement
+        const themeService = injector.getInstance(ThemeProviderService)
+        expect(el.style.getPropertyValue('--circular-progress-color')).toBe(themeService.theme.palette.primary.main)
+      })
+    })
+
+    it('should use custom color from color prop', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CircularProgress color="secondary" />,
+        })
+
+        await sleepAsync(50)
+
+        const el = document.querySelector('shade-circular-progress') as HTMLElement
+        const themeService = injector.getInstance(ThemeProviderService)
+        expect(el.style.getPropertyValue('--circular-progress-color')).toBe(themeService.theme.palette.secondary.main)
+      })
+    })
+  })
+})

package/src/components/circular-progress.tsx

@@ -0,0 +1,145 @@
+import { Shade, createComponent } from '@furystack/shades'
+import type { ObservableValue } from '@furystack/utils'
+import { cssVariableTheme } from '../services/css-variable-theme.js'
+import type { Palette } from '../services/theme-provider-service.js'
+import { ThemeProviderService } from '../services/theme-provider-service.js'
+
+export type CircularProgressProps = {
+  /**
+   * An observable progress value (0–100). Used when variant is 'determinate'.
+   * The component subscribes internally and updates the arc without re-rendering.
+   */
+  value?: ObservableValue<number>
+  /**
+   * The variant of the progress indicator.
+   * - 'determinate': shows a fixed arc based on `value`
+   * - 'indeterminate': shows a rotating animation
+   * @default 'indeterminate'
+   */
+  variant?: 'determinate' | 'indeterminate'
+  /**
+   * The palette color for the progress circle.
+   * @default 'primary'
+   */
+  color?: keyof Palette
+  /**
+   * The diameter of the circular progress in pixels.
+   * @default 40
+   */
+  size?: number
+  /**
+   * The thickness of the circular stroke.
+   * @default 3.6
+   */
+  thickness?: number
+}
+
+const SVG_SIZE = 44
+const DEFAULT_SIZE = 40
+const DEFAULT_THICKNESS = 3.6
+
+const clampValue = (v: number) => Math.max(0, Math.min(100, v))
+
+export const CircularProgress = Shade<CircularProgressProps>({
+  shadowDomName: 'shade-circular-progress',
+  css: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    lineHeight: '1',
+
+    '& svg': {
+      display: 'block',
+    },
+
+    '& .progress-track': {
+      stroke: 'color-mix(in srgb, var(--circular-progress-color) 20%, transparent)',
+      fill: 'none',
+    },
+
+    '& .progress-circle': {
+      stroke: 'var(--circular-progress-color)',
+      fill: 'none',
+      strokeLinecap: 'round',
+      transition: `stroke-dashoffset ${cssVariableTheme.transitions.duration.normal} ${cssVariableTheme.transitions.easing.easeInOut}`,
+    },
+  },
+  render: ({ props, injector, useObservable, useHostProps }) => {
+    const themeProvider = injector.getInstance(ThemeProviderService)
+    const variant = props.variant || 'indeterminate'
+    const value = clampValue(props.value?.getValue() ?? 0)
+    const size = props.size ?? DEFAULT_SIZE
+    const thickness = props.thickness ?? DEFAULT_THICKNESS
+    const indeterminate = variant === 'indeterminate'
+
+    const radius = (SVG_SIZE - thickness) / 2
+    const circumference = 2 * Math.PI * radius
+
+    if (variant === 'determinate' && props.value) {
+      useObservable('ariaValue', props.value)
+    }
+
+    const color = themeProvider.theme.palette[props.color || 'primary'].main
+    useHostProps({
+      role: 'progressbar',
+      ...(variant === 'determinate'
+        ? {
+            'aria-valuenow': String(value),
+            'aria-valuemin': '0',
+            'aria-valuemax': '100',
+          }
+        : {
+            'aria-valuenow': undefined,
+          }),
+      style: { '--circular-progress-color': color },
+    })
+
+    const dashOffset = variant === 'determinate' ? circumference - (value / 100) * circumference : 0
+    const center = SVG_SIZE / 2
+
+    return (
+      <svg
+        width={size}
+        height={size}
+        viewBox={`0 0 ${SVG_SIZE} ${SVG_SIZE}`}
+        style={indeterminate ? { animation: 'circular-rotate 1.4s linear infinite' } : undefined}
+      >
+        {indeterminate && (
+          <style>{`
+            @keyframes circular-rotate {
+              100% { transform: rotate(360deg); }
+            }
+            @keyframes circular-dash {
+              0% {
+                stroke-dasharray: ${circumference * 0.05} ${circumference};
+                stroke-dashoffset: 0;
+              }
+              50% {
+                stroke-dasharray: ${circumference * 0.7} ${circumference};
+                stroke-dashoffset: ${-circumference * 0.12};
+              }
+              100% {
+                stroke-dasharray: ${circumference * 0.7} ${circumference};
+                stroke-dashoffset: ${-circumference * 0.88};
+              }
+            }
+          `}</style>
+        )}
+        <circle className="progress-track" cx={center} cy={center} r={radius} stroke-width={thickness} />
+        <circle
+          className="progress-circle"
+          cx={center}
+          cy={center}
+          r={radius}
+          stroke-width={thickness}
+          stroke-dasharray={indeterminate ? `${circumference * 0.05} ${circumference}` : `${circumference}`}
+          style={{
+            strokeDashoffset: `${dashOffset}`,
+            ...(indeterminate ? { animation: 'circular-dash 1.4s ease-in-out infinite' } : {}),
+          }}
+          transform={`rotate(-90 ${SVG_SIZE / 2} ${SVG_SIZE / 2})`}
+        />
+      </svg>
+    )
+  },
+})