@furystack/shades-common-components 11.0.0 → 12.0.1

package/src/components/inputs/checkbox.spec.tsx

@@ -0,0 +1,377 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { sleepAsync, usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ThemeProviderService } from '../../services/theme-provider-service.js'
+import { Form, FormService } from '../form.js'
+import { Checkbox } from './checkbox.js'
+
+describe('Checkbox', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    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: <Checkbox />,
+      })
+
+      await sleepAsync(50)
+
+      const checkbox = document.querySelector('shade-checkbox')
+      expect(checkbox).not.toBeNull()
+    })
+  })
+
+  it('should render the inner checkbox input element', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Checkbox name="testField" />,
+      })
+
+      await sleepAsync(50)
+
+      const input = document.querySelector('shade-checkbox input[type="checkbox"]') as HTMLInputElement
+      expect(input).not.toBeNull()
+      expect(input.name).toBe('testField')
+    })
+  })
+
+  it('should render the label title', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Checkbox labelTitle="Accept terms" />,
+      })
+
+      await sleepAsync(50)
+
+      const label = document.querySelector('shade-checkbox label') as HTMLLabelElement
+      expect(label).not.toBeNull()
+      expect(label.textContent).toContain('Accept terms')
+    })
+  })
+
+  it('should not render label span when no labelTitle is provided', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Checkbox />,
+      })
+
+      await sleepAsync(50)
+
+      const labelSpan = document.querySelector('shade-checkbox .checkbox-label')
+      expect(labelSpan).toBeNull()
+    })
+  })
+
+  describe('checked state', () => {
+    it('should be checked when checked prop is true', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Checkbox checked />,
+        })
+
+        await sleepAsync(50)
+
+        const input = document.querySelector('shade-checkbox input[type="checkbox"]') as HTMLInputElement
+        expect(input.checked).toBe(true)
+      })
+    })
+
+    it('should not be checked when checked prop is false', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Checkbox checked={false} />,
+        })
+
+        await sleepAsync(50)
+
+        const input = document.querySelector('shade-checkbox input[type="checkbox"]') as HTMLInputElement
+        expect(input.checked).toBe(false)
+      })
+    })
+  })
+
+  describe('disabled state', () => {
+    it('should set data-disabled attribute when disabled', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Checkbox disabled />,
+        })
+
+        await sleepAsync(50)
+
+        const wrapper = document.querySelector('shade-checkbox') as HTMLElement
+        expect(wrapper.hasAttribute('data-disabled')).toBe(true)
+
+        const input = wrapper.querySelector('input[type="checkbox"]') as HTMLInputElement
+        expect(input.disabled).toBe(true)
+      })
+    })
+
+    it('should not have data-disabled attribute when not disabled', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Checkbox disabled={false} />,
+        })
+
+        await sleepAsync(50)
+
+        const wrapper = document.querySelector('shade-checkbox') as HTMLElement
+        expect(wrapper.hasAttribute('data-disabled')).toBe(false)
+      })
+    })
+  })
+
+  describe('indeterminate state', () => {
+    it('should set data-indeterminate attribute when indeterminate', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Checkbox indeterminate />,
+        })
+
+        await sleepAsync(50)
+
+        const wrapper = document.querySelector('shade-checkbox') as HTMLElement
+        expect(wrapper.hasAttribute('data-indeterminate')).toBe(true)
+      })
+    })
+
+    it('should not have data-indeterminate attribute when not indeterminate', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Checkbox indeterminate={false} />,
+        })
+
+        await sleepAsync(50)
+
+        const wrapper = document.querySelector('shade-checkbox') as HTMLElement
+        expect(wrapper.hasAttribute('data-indeterminate')).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: <Checkbox />,
+        })
+
+        await sleepAsync(50)
+
+        const wrapper = document.querySelector('shade-checkbox') as HTMLElement
+        const themeService = injector.getInstance(ThemeProviderService)
+        expect(wrapper.style.getPropertyValue('--checkbox-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: <Checkbox color="secondary" />,
+        })
+
+        await sleepAsync(50)
+
+        const wrapper = document.querySelector('shade-checkbox') as HTMLElement
+        const themeService = injector.getInstance(ThemeProviderService)
+        expect(wrapper.style.getPropertyValue('--checkbox-color')).toBe(themeService.theme.palette.secondary.main)
+      })
+    })
+  })
+
+  describe('callbacks', () => {
+    it('should call onchange when checkbox is clicked', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onchange = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Checkbox onchange={onchange} />,
+        })
+
+        await sleepAsync(50)
+
+        const input = document.querySelector('shade-checkbox input[type="checkbox"]') as HTMLInputElement
+        input.dispatchEvent(new Event('change', { bubbles: true }))
+
+        await sleepAsync(50)
+
+        expect(onchange).toHaveBeenCalled()
+      })
+    })
+  })
+
+  describe('value and name', () => {
+    it('should set value attribute', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Checkbox name="terms" value="accepted" />,
+        })
+
+        await sleepAsync(50)
+
+        const input = document.querySelector('shade-checkbox input[type="checkbox"]') as HTMLInputElement
+        expect(input.value).toBe('accepted')
+        expect(input.name).toBe('terms')
+      })
+    })
+  })
+
+  describe('required', () => {
+    it('should set required attribute', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Checkbox required />,
+        })
+
+        await sleepAsync(50)
+
+        const input = document.querySelector('shade-checkbox input[type="checkbox"]') as HTMLInputElement
+        expect(input.required).toBe(true)
+      })
+    })
+  })
+
+  describe('labelProps', () => {
+    it('should pass labelProps to the label element', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Checkbox labelProps={{ className: 'custom-label' }} />,
+        })
+
+        await sleepAsync(50)
+
+        const label = document.querySelector('shade-checkbox label') as HTMLLabelElement
+        expect(label.className).toContain('custom-label')
+      })
+    })
+  })
+
+  describe('FormService integration', () => {
+    it('should register input with FormService when inside a Form', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        type TestFormData = { agree: string }
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Form<TestFormData> onSubmit={() => {}} validate={(_data): _data is TestFormData => true}>
+              <Checkbox name="agree" labelTitle="I agree" />
+            </Form>
+          ),
+        })
+
+        await sleepAsync(50)
+
+        const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+        const formInjector = (form as unknown as { injector: Injector }).injector
+        const formService = formInjector.getInstance(FormService)
+
+        expect(formService.inputs.size).toBe(1)
+      })
+    })
+
+    it('should unregister input from FormService on cleanup', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        type TestFormData = { agree: string }
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Form<TestFormData> onSubmit={() => {}} validate={(_data): _data is TestFormData => true}>
+              <Checkbox name="agree" labelTitle="I agree" />
+            </Form>
+          ),
+        })
+
+        await sleepAsync(50)
+
+        const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+        const formInjector = (form as unknown as { injector: Injector }).injector
+        const formService = formInjector.getInstance(FormService)
+
+        expect(formService.inputs.size).toBe(1)
+
+        rootElement.innerHTML = ''
+
+        await sleepAsync(50)
+      })
+    })
+  })
+})

package/src/components/inputs/checkbox.tsx

@@ -0,0 +1,198 @@
+import type { PartialElement } from '@furystack/shades'
+import { Shade, createComponent } from '@furystack/shades'
+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'
+import { FormService } from '../form.js'
+
+export type CheckboxProps = {
+  /**
+   * Whether the checkbox is checked
+   */
+  checked?: boolean
+  /**
+   * Whether the checkbox is in an indeterminate state
+   */
+  indeterminate?: boolean
+  /**
+   * Whether the checkbox is disabled
+   */
+  disabled?: boolean
+  /**
+   * The palette color for the checkbox
+   */
+  color?: keyof Palette
+  /**
+   * Callback when the checked state changes
+   */
+  onchange?: (event: Event) => void
+  /**
+   * Label text or element displayed next to the checkbox
+   */
+  labelTitle?: JSX.Element | string
+  /**
+   * The name attribute for the underlying input element
+   */
+  name?: string
+  /**
+   * The value attribute for the underlying input element
+   */
+  value?: string
+  /**
+   * Whether the checkbox is required
+   */
+  required?: boolean
+  /**
+   * Optional props for the label element
+   */
+  labelProps?: PartialElement<HTMLLabelElement>
+}
+
+export const Checkbox = Shade<CheckboxProps>({
+  shadowDomName: 'shade-checkbox',
+  css: {
+    display: 'inline-flex',
+    alignItems: 'center',
+
+    '& label': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: cssVariableTheme.spacing.sm,
+      cursor: 'pointer',
+      fontSize: cssVariableTheme.typography.fontSize.sm,
+      color: cssVariableTheme.text.primary,
+      userSelect: 'none',
+      webkitUserSelect: 'none',
+    },
+
+    '& .checkbox-control': {
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '20px',
+      height: '20px',
+      flexShrink: '0',
+    },
+
+    '& input[type="checkbox"]': {
+      appearance: 'none',
+      webkitAppearance: 'none',
+      width: '20px',
+      height: '20px',
+      margin: '0',
+      border: `2px solid ${cssVariableTheme.text.secondary}`,
+      borderRadius: cssVariableTheme.shape.borderRadius.xs,
+      backgroundColor: 'transparent',
+      cursor: 'pointer',
+      transition: `all ${cssVariableTheme.transitions.duration.fast} ${cssVariableTheme.transitions.easing.default}`,
+      outline: 'none',
+    },
+
+    '& input[type="checkbox"]:hover:not(:disabled)': {
+      borderColor: 'var(--checkbox-color)',
+    },
+
+    '& input[type="checkbox"]:focus-visible': {
+      boxShadow: cssVariableTheme.action.focusRing,
+    },
+
+    '& input[type="checkbox"]:checked': {
+      backgroundColor: 'var(--checkbox-color)',
+      borderColor: 'var(--checkbox-color)',
+    },
+
+    '& input[type="checkbox"]:checked::after': {
+      content: '""',
+      position: 'absolute',
+      left: '6px',
+      top: '2px',
+      width: '5px',
+      height: '10px',
+      border: `solid ${cssVariableTheme.background.paper}`,
+      borderWidth: '0 2px 2px 0',
+      transform: 'rotate(45deg)',
+      pointerEvents: 'none',
+    },
+
+    '&[data-indeterminate] input[type="checkbox"]': {
+      backgroundColor: 'var(--checkbox-color)',
+      borderColor: 'var(--checkbox-color)',
+    },
+
+    '&[data-indeterminate] input[type="checkbox"]::after': {
+      content: '""',
+      position: 'absolute',
+      left: '4px',
+      top: '8px',
+      width: '10px',
+      height: '2px',
+      backgroundColor: cssVariableTheme.background.paper,
+      border: 'none',
+      transform: 'none',
+      pointerEvents: 'none',
+    },
+
+    '&[data-disabled] label': {
+      color: cssVariableTheme.text.disabled,
+      cursor: 'not-allowed',
+    },
+
+    '&[data-disabled] input[type="checkbox"]': {
+      opacity: cssVariableTheme.action.disabledOpacity,
+      cursor: 'not-allowed',
+    },
+  },
+  render: ({ props, injector, useDisposable, useHostProps, useRef }) => {
+    const inputRef = useRef<HTMLInputElement>('formInput')
+
+    useDisposable('form-registration', () => {
+      const formService = injector.cachedSingletons.has(FormService) ? injector.getInstance(FormService) : null
+      if (formService) {
+        queueMicrotask(() => {
+          if (inputRef.current) formService.inputs.add(inputRef.current)
+        })
+      }
+      return {
+        [Symbol.dispose]: () => {
+          if (inputRef.current && formService) formService.inputs.delete(inputRef.current)
+        },
+      }
+    })
+
+    const themeProvider = injector.getInstance(ThemeProviderService)
+
+    const color = themeProvider.theme.palette[props.color || 'primary'].main
+    useHostProps({
+      'data-disabled': props.disabled ? '' : undefined,
+      'data-indeterminate': props.indeterminate ? '' : undefined,
+      style: { '--checkbox-color': color },
+    })
+
+    const handleChange = function (this: GlobalEventHandlers, ev: Event) {
+      ev.stopPropagation()
+      if (props.indeterminate && inputRef.current) {
+        inputRef.current.indeterminate = true
+      }
+      props.onchange?.call(this, ev)
+    }
+
+    return (
+      <label {...props.labelProps}>
+        <span className="checkbox-control">
+          <input
+            ref={inputRef}
+            type="checkbox"
+            checked={props.checked}
+            disabled={props.disabled}
+            name={props.name}
+            value={props.value}
+            required={props.required}
+            onchange={handleChange}
+          />
+        </span>
+        {props.labelTitle ? <span className="checkbox-label">{props.labelTitle}</span> : null}
+      </label>
+    )
+  },
+})

package/src/components/inputs/index.ts

@@ -1,3 +1,10 @@
 export * from './autocomplete.js'
+export * from './checkbox.js'
+export * from './input-number.js'
 export * from './input.js'
+export * from './radio-group.js'
+export * from './radio.js'
+export * from './select.js'
+export * from './slider.js'
+export * from './switch.js'
 export * from './text-area.js'