@furystack/shades-common-components 10.0.35 → 12.0.0

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

@@ -0,0 +1,410 @@
+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 { Switch } from './switch.js'
+
+describe('Switch', () => {
+  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: <Switch />,
+      })
+
+      await sleepAsync(50)
+
+      const switchEl = document.querySelector('shade-switch')
+      expect(switchEl).not.toBeNull()
+    })
+  })
+
+  it('should render the hidden checkbox input', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Switch name="testSwitch" />,
+      })
+
+      await sleepAsync(50)
+
+      const input = document.querySelector('shade-switch input[type="checkbox"]') as HTMLInputElement
+      expect(input).not.toBeNull()
+      expect(input.name).toBe('testSwitch')
+      expect(input.getAttribute('role')).toBe('switch')
+    })
+  })
+
+  it('should render the switch track and thumb', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Switch />,
+      })
+
+      await sleepAsync(50)
+
+      const track = document.querySelector('shade-switch .switch-track')
+      const thumb = document.querySelector('shade-switch .switch-thumb')
+      expect(track).not.toBeNull()
+      expect(thumb).not.toBeNull()
+    })
+  })
+
+  it('should render the label title', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Switch labelTitle="Enable notifications" />,
+      })
+
+      await sleepAsync(50)
+
+      const label = document.querySelector('shade-switch label') as HTMLLabelElement
+      expect(label).not.toBeNull()
+      expect(label.textContent).toContain('Enable notifications')
+    })
+  })
+
+  it('should not render label span when labelTitle is not provided', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Switch />,
+      })
+
+      await sleepAsync(50)
+
+      const labelSpan = document.querySelector('shade-switch .switch-label')
+      expect(labelSpan).toBeNull()
+    })
+  })
+
+  describe('checked state', () => {
+    it('should render as checked when checked prop is true', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Switch checked />,
+        })
+
+        await sleepAsync(50)
+
+        const input = document.querySelector('shade-switch input[type="checkbox"]') as HTMLInputElement
+        expect(input.checked).toBe(true)
+      })
+    })
+
+    it('should render as unchecked when checked prop is false', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Switch checked={false} />,
+        })
+
+        await sleepAsync(50)
+
+        const input = document.querySelector('shade-switch 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: <Switch disabled />,
+        })
+
+        await sleepAsync(50)
+
+        const switchEl = document.querySelector('shade-switch') as HTMLElement
+        expect(switchEl.hasAttribute('data-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: <Switch disabled={false} />,
+        })
+
+        await sleepAsync(50)
+
+        const switchEl = document.querySelector('shade-switch') as HTMLElement
+        expect(switchEl.hasAttribute('data-disabled')).toBe(false)
+      })
+    })
+
+    it('should set the disabled attribute on the input element', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Switch disabled />,
+        })
+
+        await sleepAsync(50)
+
+        const input = document.querySelector('shade-switch input[type="checkbox"]') as HTMLInputElement
+        expect(input.disabled).toBe(true)
+      })
+    })
+  })
+
+  describe('size', () => {
+    it('should set data-size="small" when size is small', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Switch size="small" />,
+        })
+
+        await sleepAsync(50)
+
+        const switchEl = document.querySelector('shade-switch') as HTMLElement
+        expect(switchEl.getAttribute('data-size')).toBe('small')
+      })
+    })
+
+    it('should not have data-size attribute when size is medium (default)', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Switch size="medium" />,
+        })
+
+        await sleepAsync(50)
+
+        const switchEl = document.querySelector('shade-switch') as HTMLElement
+        expect(switchEl.hasAttribute('data-size')).toBe(false)
+      })
+    })
+  })
+
+  describe('callbacks', () => {
+    it('should call onchange when switch is toggled', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onchange = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Switch name="toggle" onchange={onchange} />,
+        })
+
+        await sleepAsync(50)
+
+        const input = document.querySelector('shade-switch input[type="checkbox"]') as HTMLInputElement
+        input.dispatchEvent(new Event('change', { bubbles: true }))
+
+        await sleepAsync(50)
+
+        expect(onchange).toHaveBeenCalled()
+      })
+    })
+  })
+
+  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: <Switch />,
+        })
+
+        await sleepAsync(50)
+
+        const switchEl = document.querySelector('shade-switch') as HTMLElement
+        const themeService = injector.getInstance(ThemeProviderService)
+        expect(switchEl.style.getPropertyValue('--switch-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: <Switch color="secondary" />,
+        })
+
+        await sleepAsync(50)
+
+        const switchEl = document.querySelector('shade-switch') as HTMLElement
+        const themeService = injector.getInstance(ThemeProviderService)
+        expect(switchEl.style.getPropertyValue('--switch-color')).toBe(themeService.theme.palette.secondary.main)
+      })
+    })
+  })
+
+  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 = { notifications: string }
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Form<TestFormData> onSubmit={() => {}} validate={(_data): _data is TestFormData => true}>
+              <Switch name="notifications" labelTitle="Enable notifications" />
+            </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 = { notifications: string }
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Form<TestFormData> onSubmit={() => {}} validate={(_data): _data is TestFormData => true}>
+              <Switch name="notifications" labelTitle="Enable notifications" />
+            </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)
+      })
+    })
+  })
+
+  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: <Switch labelProps={{ className: 'custom-label' }} />,
+        })
+
+        await sleepAsync(50)
+
+        const label = document.querySelector('shade-switch label') as HTMLLabelElement
+        expect(label.className).toContain('custom-label')
+      })
+    })
+  })
+
+  describe('required', () => {
+    it('should set the required attribute on the input element', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Switch required />,
+        })
+
+        await sleepAsync(50)
+
+        const input = document.querySelector('shade-switch input[type="checkbox"]') as HTMLInputElement
+        expect(input.required).toBe(true)
+      })
+    })
+  })
+
+  describe('value', () => {
+    it('should set the value attribute on the input element', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Switch value="yes" />,
+        })
+
+        await sleepAsync(50)
+
+        const input = document.querySelector('shade-switch input[type="checkbox"]') as HTMLInputElement
+        expect(input.value).toBe('yes')
+      })
+    })
+  })
+})

package/src/components/inputs/switch.tsx

@@ -0,0 +1,218 @@
+import type { PartialElement } from '@furystack/shades'
+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 { FormService } from '../form.js'
+
+export type SwitchProps = {
+  /**
+   * Whether the switch is checked (on)
+   */
+  checked?: boolean
+  /**
+   * Whether the switch is disabled
+   */
+  disabled?: boolean
+  /**
+   * The palette color for the switch
+   */
+  color?: keyof Palette
+  /**
+   * Callback when the checked state changes
+   */
+  onchange?: (event: Event) => void
+  /**
+   * Label text or element displayed next to the switch
+   */
+  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 switch is required
+   */
+  required?: boolean
+  /**
+   * The size of the switch
+   */
+  size?: 'small' | 'medium'
+  /**
+   * Optional props for the label element
+   */
+  labelProps?: PartialElement<HTMLLabelElement>
+}
+
+export const Switch = Shade<SwitchProps>({
+  shadowDomName: 'shade-switch',
+  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',
+    },
+
+    '& .switch-control': {
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      flexShrink: '0',
+    },
+
+    // Medium size (default)
+    '& .switch-track': {
+      width: '40px',
+      height: '22px',
+      borderRadius: '11px',
+      backgroundColor: cssVariableTheme.text.secondary,
+      transition: buildTransition([
+        'background-color',
+        cssVariableTheme.transitions.duration.fast,
+        cssVariableTheme.transitions.easing.default,
+      ]),
+      position: 'relative',
+      opacity: '0.5',
+    },
+
+    '& .switch-thumb': {
+      position: 'absolute',
+      top: '2px',
+      left: '2px',
+      width: '18px',
+      height: '18px',
+      borderRadius: '50%',
+      backgroundColor: cssVariableTheme.background.paper,
+      transition: buildTransition(
+        ['transform', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+        ['box-shadow', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+      ),
+      boxShadow: cssVariableTheme.shadows.sm,
+      pointerEvents: 'none',
+    },
+
+    // Small size
+    '&[data-size="small"] .switch-track': {
+      width: '32px',
+      height: '18px',
+      borderRadius: '9px',
+    },
+
+    '&[data-size="small"] .switch-thumb': {
+      width: '14px',
+      height: '14px',
+    },
+
+    // Hidden input
+    '& input[type="checkbox"]': {
+      position: 'absolute',
+      width: '1px',
+      height: '1px',
+      margin: '-1px',
+      padding: '0',
+      overflow: 'hidden',
+      clip: 'rect(0, 0, 0, 0)',
+      whiteSpace: 'nowrap',
+      border: '0',
+    },
+
+    // Checked state
+    '& input[type="checkbox"]:checked + .switch-track': {
+      backgroundColor: 'var(--switch-color)',
+      opacity: '1',
+    },
+
+    '& input[type="checkbox"]:checked + .switch-track .switch-thumb': {
+      transform: 'translateX(18px)',
+    },
+
+    '&[data-size="small"] input[type="checkbox"]:checked + .switch-track .switch-thumb': {
+      transform: 'translateX(14px)',
+    },
+
+    // Hover state
+    '& .switch-control:hover .switch-track': {
+      opacity: '0.7',
+    },
+
+    '& .switch-control:hover input[type="checkbox"]:checked + .switch-track': {
+      opacity: '0.85',
+    },
+
+    // Focus state
+    '& input[type="checkbox"]:focus-visible + .switch-track': {
+      boxShadow: cssVariableTheme.action.focusRing,
+    },
+
+    // Disabled state
+    '&[data-disabled] label': {
+      color: cssVariableTheme.text.disabled,
+      cursor: 'not-allowed',
+    },
+
+    '&[data-disabled] .switch-control': {
+      opacity: cssVariableTheme.action.disabledOpacity,
+      pointerEvents: 'none',
+    },
+  },
+  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-size': props.size === 'small' ? 'small' : undefined,
+      style: { '--switch-color': color },
+    })
+
+    return (
+      <label {...props.labelProps}>
+        <span className="switch-control">
+          <input
+            ref={inputRef}
+            type="checkbox"
+            role="switch"
+            checked={props.checked}
+            disabled={props.disabled}
+            name={props.name}
+            value={props.value}
+            required={props.required}
+            onchange={props.onchange}
+          />
+          <span className="switch-track">
+            <span className="switch-thumb" />
+          </span>
+        </span>
+        {props.labelTitle ? <span className="switch-label">{props.labelTitle}</span> : null}
+      </label>
+    )
+  },
+})