@furystack/shades-common-components 10.0.35 → 12.0.0

package/src/components/dropdown.tsx

@@ -0,0 +1,343 @@
+import type { ChildrenList } from '@furystack/shades'
+import { createComponent, Shade } from '@furystack/shades'
+import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js'
+import type { MenuEntry } from './menu/menu-types.js'
+import { getNavigableKeys } from './menu/menu-types.js'
+
+export type DropdownPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'
+
+export type DropdownProps = {
+  /** Menu items to display in the dropdown */
+  items: MenuEntry[]
+  /** Placement of the dropdown relative to the trigger */
+  placement?: DropdownPlacement
+  /** Whether the dropdown is disabled */
+  disabled?: boolean
+  /** Called when an item is selected */
+  onSelect?: (key: string) => void
+}
+
+const cloneNode = (node: JSX.Element | string): JSX.Element | string =>
+  node instanceof Node ? (node.cloneNode(true) as JSX.Element) : node
+
+const renderDropdownItems = (items: MenuEntry[], onSelect: (key: string) => void): JSX.Element[] => {
+  return items.map((item) => {
+    if (item.type === 'divider') {
+      return <div role="separator" className="dropdown-divider" />
+    }
+
+    if (item.type === 'group') {
+      return (
+        <div role="group" aria-label={item.label} className="dropdown-group">
+          <div className="dropdown-group-label">{item.label}</div>
+          {renderDropdownItems(item.children, onSelect)}
+        </div>
+      )
+    }
+
+    const classNames = ['dropdown-item', item.disabled ? 'disabled' : ''].filter(Boolean).join(' ')
+
+    return (
+      <div
+        role="menuitem"
+        className={classNames}
+        aria-disabled={item.disabled ? 'true' : undefined}
+        data-key={item.key}
+        onclick={() => {
+          if (!item.disabled) {
+            onSelect(item.key)
+          }
+        }}
+      >
+        {item.icon && <span className="dropdown-item-icon">{cloneNode(item.icon)}</span>}
+        <span className="dropdown-item-label">{cloneNode(item.label)}</span>
+      </div>
+    )
+  })
+}
+
+export const Dropdown: (props: DropdownProps, children: ChildrenList) => JSX.Element<any> = Shade<DropdownProps>({
+  shadowDomName: 'shade-dropdown',
+  css: {
+    display: 'inline-flex',
+    position: 'relative',
+
+    '& .dropdown-trigger': {
+      display: 'inline-flex',
+      cursor: 'pointer',
+    },
+
+    '& .dropdown-trigger.disabled': {
+      cursor: 'not-allowed',
+      opacity: '0.5',
+      pointerEvents: 'none',
+    },
+
+    // Backdrop
+    '& .dropdown-backdrop': {
+      opacity: '0',
+      pointerEvents: 'none',
+      transition: `opacity ${cssVariableTheme.transitions.duration.fast} ease-out`,
+    },
+
+    '& .dropdown-backdrop.visible': {
+      opacity: '1',
+      pointerEvents: 'auto',
+    },
+
+    // Panel
+    '& .dropdown-panel': {
+      opacity: '0',
+      transform: 'scale(0.95) translateY(-4px)',
+      transition: buildTransition(
+        ['opacity', cssVariableTheme.transitions.duration.fast, 'ease-out'],
+        ['transform', cssVariableTheme.transitions.duration.fast, 'ease-out'],
+      ),
+      transformOrigin: 'top left',
+    },
+
+    '& .dropdown-panel.visible': {
+      opacity: '1',
+      transform: 'scale(1) translateY(0)',
+    },
+
+    // Dropdown items
+    '& .dropdown-item': {
+      display: 'flex',
+      alignItems: 'center',
+      gap: cssVariableTheme.spacing.sm,
+      padding: `${cssVariableTheme.spacing.sm} ${cssVariableTheme.spacing.md}`,
+      cursor: 'pointer',
+      userSelect: 'none',
+      transition: buildTransition([
+        'background-color',
+        cssVariableTheme.transitions.duration.fast,
+        cssVariableTheme.transitions.easing.default,
+      ]),
+      whiteSpace: 'nowrap',
+    },
+
+    '& .dropdown-item:hover:not(.disabled), & .dropdown-item.focused:not(.disabled)': {
+      backgroundColor: cssVariableTheme.action.hoverBackground,
+    },
+
+    '& .dropdown-item.disabled': {
+      opacity: '0.5',
+      cursor: 'not-allowed',
+    },
+
+    '& .dropdown-item-icon': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: '0',
+      width: '20px',
+    },
+
+    '& .dropdown-item-label': {
+      flex: '1',
+    },
+
+    // Divider
+    '& .dropdown-divider': {
+      height: '1px',
+      margin: `${cssVariableTheme.spacing.xs} ${cssVariableTheme.spacing.sm}`,
+      backgroundColor: cssVariableTheme.divider,
+    },
+
+    // Group
+    '& .dropdown-group-label': {
+      padding: `${cssVariableTheme.spacing.xs} ${cssVariableTheme.spacing.md}`,
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+      fontWeight: cssVariableTheme.typography.fontWeight.bold,
+      color: cssVariableTheme.text.secondary,
+      textTransform: 'uppercase',
+      letterSpacing: cssVariableTheme.typography.letterSpacing.wider,
+      userSelect: 'none',
+    },
+  },
+  render: ({ props, children, useState, useDisposable, useRef, useHostProps }) => {
+    const triggerRef = useRef<HTMLDivElement>('trigger')
+    const panelRef = useRef<HTMLDivElement>('panel')
+    const backdropRef = useRef<HTMLDivElement>('backdrop')
+
+    const [isOpenValue, setIsOpen] = useState('isOpen', false)
+
+    useHostProps({
+      'data-open': isOpenValue ? '' : undefined,
+    })
+
+    useDisposable('keydown-handler', () => {
+      const listener = (ev: KeyboardEvent) => {
+        if (!backdropRef.current?.classList.contains('visible')) return
+
+        const panel = panelRef.current
+        if (!panel) return
+
+        const allItems = Array.from(panel.querySelectorAll<HTMLElement>('.dropdown-item:not(.disabled)'))
+
+        switch (ev.key) {
+          case 'Escape': {
+            ev.preventDefault()
+            backdropRef.current?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+            break
+          }
+          case 'ArrowDown': {
+            if (allItems.length === 0) break
+            ev.preventDefault()
+            const focusedItem = panel.querySelector<HTMLElement>('.dropdown-item.focused')
+            const currentIndex = focusedItem ? allItems.indexOf(focusedItem) : -1
+            const nextIndex = currentIndex < allItems.length - 1 ? currentIndex + 1 : 0
+            allItems.forEach((el) => el.classList.remove('focused'))
+            allItems[nextIndex]?.classList.add('focused')
+            break
+          }
+          case 'ArrowUp': {
+            if (allItems.length === 0) break
+            ev.preventDefault()
+            const focusedItem = panel.querySelector<HTMLElement>('.dropdown-item.focused')
+            const currentIndex = focusedItem ? allItems.indexOf(focusedItem) : allItems.length
+            const prevIndex = currentIndex > 0 ? currentIndex - 1 : allItems.length - 1
+            allItems.forEach((el) => el.classList.remove('focused'))
+            allItems[prevIndex]?.classList.add('focused')
+            break
+          }
+          case 'Enter': {
+            ev.preventDefault()
+            const focusedItem = panel.querySelector<HTMLElement>('.dropdown-item.focused')
+            focusedItem?.click()
+            break
+          }
+          default:
+            break
+        }
+      }
+
+      window.addEventListener('keydown', listener, true)
+      return { [Symbol.dispose]: () => window.removeEventListener('keydown', listener, true) }
+    })
+
+    const { items, placement = 'bottomLeft', disabled, onSelect } = props
+
+    const positionAndShowPanel = () => {
+      requestAnimationFrame(() => {
+        const trigger = triggerRef.current
+        const panel = panelRef.current
+        const backdrop = backdropRef.current
+        if (!trigger || !panel || !backdrop) return
+
+        const { top: rectTop, bottom: rectBottom, left: rectLeft, right: rectRight } = trigger.getBoundingClientRect()
+        const panelWidth = panel.offsetWidth
+        const panelHeight = panel.offsetHeight
+
+        let top: number
+        let left: number
+
+        switch (placement) {
+          case 'bottomRight':
+            top = rectBottom + 2
+            left = rectRight - panelWidth
+            break
+          case 'topLeft':
+            top = rectTop - panelHeight - 2
+            left = rectLeft
+            break
+          case 'topRight':
+            top = rectTop - panelHeight - 2
+            left = rectRight - panelWidth
+            break
+          case 'bottomLeft':
+          default:
+            top = rectBottom + 2
+            left = rectLeft
+            break
+        }
+
+        panel.style.top = `${top}px`
+        panel.style.left = `${left}px`
+
+        backdrop.classList.add('visible')
+        panel.classList.add('visible')
+
+        const keys = getNavigableKeys(items)
+        if (keys.length > 0) {
+          panel.querySelector(`[data-key="${keys[0]}"]`)?.classList.add('focused')
+        }
+      })
+    }
+
+    const openDropdown = () => {
+      if (isOpenValue) return
+      setIsOpen(true)
+      positionAndShowPanel()
+    }
+
+    const closeDropdown = () => {
+      setIsOpen(false)
+      const backdrop = backdropRef.current
+      const panel = panelRef.current
+      backdrop?.classList.remove('visible')
+      panel?.classList.remove('visible')
+      panel?.querySelectorAll('.dropdown-item.focused').forEach((el) => el.classList.remove('focused'))
+    }
+
+    const handleTriggerClick = () => {
+      if (disabled) return
+      if (backdropRef.current?.classList.contains('visible')) {
+        closeDropdown()
+      } else {
+        openDropdown()
+      }
+    }
+
+    const handleSelect = (key: string) => {
+      onSelect?.(key)
+      closeDropdown()
+    }
+
+    // If re-rendered while open (e.g. parent prop change), restore visual state
+    if (isOpenValue) {
+      positionAndShowPanel()
+    }
+
+    return (
+      <>
+        <div ref={triggerRef} className={`dropdown-trigger${disabled ? ' disabled' : ''}`} onclick={handleTriggerClick}>
+          {children}
+        </div>
+        <div
+          ref={backdropRef}
+          className="dropdown-backdrop"
+          style={{
+            position: 'fixed',
+            top: '0',
+            left: '0',
+            width: '100%',
+            height: '100%',
+            zIndex: cssVariableTheme.zIndex.dropdown,
+          }}
+          onclick={closeDropdown}
+        >
+          <div
+            ref={panelRef}
+            role="menu"
+            className="dropdown-panel"
+            style={{
+              position: 'fixed',
+              minWidth: '160px',
+              background: cssVariableTheme.background.paper,
+              borderRadius: cssVariableTheme.shape.borderRadius.md,
+              boxShadow: cssVariableTheme.shadows.lg,
+              border: `1px solid ${cssVariableTheme.divider}`,
+              padding: `${cssVariableTheme.spacing.xs} 0`,
+              overflow: 'hidden',
+            }}
+            onclick={(ev: MouseEvent) => ev.stopPropagation()}
+          >
+            {renderDropdownItems(items, handleSelect)}
+          </div>
+        </div>
+      </>
+    )
+  },
+})

package/src/components/fab.spec.tsx

@@ -0,0 +1,119 @@
+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 { cssVariableTheme } from '../services/css-variable-theme.js'
+import { Fab } from './fab.js'
+
+describe('Fab', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  const renderFab = async (children?: JSX.Element[]) => {
+    const injector = new Injector()
+    const root = document.getElementById('root')!
+    initializeShadeRoot({
+      injector,
+      rootElement: root,
+      jsxElement: <Fab>{children}</Fab>,
+    })
+    await sleepAsync(50)
+    return {
+      injector,
+      fab: root.querySelector('button[is="shade-fab"]') as HTMLButtonElement,
+      [Symbol.asyncDispose]: () => injector[Symbol.asyncDispose](),
+    }
+  }
+
+  describe('rendering', () => {
+    it('should render a button element', async () => {
+      await usingAsync(await renderFab(), async ({ fab }) => {
+        expect(fab).toBeTruthy()
+        expect(fab.tagName.toLowerCase()).toBe('button')
+        expect(fab.getAttribute('is')).toBe('shade-fab')
+      })
+    })
+  })
+
+  describe('positioning', () => {
+    it('should have fixed positioning', async () => {
+      await usingAsync(await renderFab(), async ({ fab }) => {
+        const computedStyle = window.getComputedStyle(fab)
+        expect(computedStyle.position).toBe('fixed')
+      })
+    })
+
+    it('should be positioned at bottom-right corner', async () => {
+      await usingAsync(await renderFab(), async ({ fab }) => {
+        const computedStyle = window.getComputedStyle(fab)
+        expect(computedStyle.bottom).toBe(cssVariableTheme.spacing.xl)
+        expect(computedStyle.right).toBe(cssVariableTheme.spacing.xl)
+      })
+    })
+  })
+
+  describe('children', () => {
+    it('should render text children', async () => {
+      await usingAsync(await renderFab(['+'] as unknown as JSX.Element[]), async ({ fab }) => {
+        expect(fab.textContent).toContain('+')
+      })
+    })
+
+    it('should render element children', async () => {
+      await usingAsync(await renderFab([<span>🚀</span>]), async ({ fab }) => {
+        expect(fab.textContent).toContain('🚀')
+      })
+    })
+  })
+
+  describe('styling', () => {
+    it('should have circular shape', async () => {
+      await usingAsync(await renderFab(), async ({ fab }) => {
+        const computedStyle = window.getComputedStyle(fab)
+        expect(computedStyle.borderRadius).toBe(cssVariableTheme.shape.borderRadius.full)
+      })
+    })
+
+    it('should have fixed dimensions', async () => {
+      await usingAsync(await renderFab(), async ({ fab }) => {
+        const computedStyle = window.getComputedStyle(fab)
+        expect(computedStyle.width).toBe('64px')
+        expect(computedStyle.height).toBe('64px')
+      })
+    })
+
+    it('should center content with flexbox', async () => {
+      await usingAsync(await renderFab(), async ({ fab }) => {
+        const computedStyle = window.getComputedStyle(fab)
+        expect(computedStyle.display).toBe('flex')
+        expect(computedStyle.justifyContent).toBe('center')
+        expect(computedStyle.alignItems).toBe('center')
+      })
+    })
+  })
+
+  describe('button functionality', () => {
+    it('should trigger onclick handler when clicked', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const handleClick = vi.fn()
+        const root = document.getElementById('root')!
+        initializeShadeRoot({
+          injector,
+          rootElement: root,
+          jsxElement: <Fab onclick={handleClick}>+</Fab>,
+        })
+        await sleepAsync(50)
+        const fab = root.querySelector('button[is="shade-fab"]') as HTMLButtonElement
+
+        fab.click()
+
+        expect(handleClick).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
+})

package/src/components/fab.tsx

@@ -1,24 +1,56 @@
+import type { PartialElement } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../services/css-variable-theme.js'
+import { paletteFullColors } from '../services/palette-css-vars.js'
+import type { Palette } from '../services/theme-provider-service.js'
 
-export const Fab = Shade({
+export type FabProps = PartialElement<HTMLButtonElement> & {
+  color?: keyof Palette
+}
+
+export const Fab = Shade<FabProps>({
   shadowDomName: 'shade-fab',
   elementBase: HTMLButtonElement,
   elementBaseName: 'button',
-  style: {
+  css: {
     position: 'fixed',
-    bottom: '32px',
-    right: '32px',
-    background: 'gray',
+    bottom: cssVariableTheme.spacing.xl,
+    right: cssVariableTheme.spacing.xl,
+    background: 'var(--fab-color-main)',
+    color: 'var(--fab-color-contrast)',
     width: '64px',
     height: '64px',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    borderRadius: '50%',
-    boxShadow: '2px 2px 4px rgba(0,0,0,0.3)',
+    borderRadius: cssVariableTheme.shape.borderRadius.full,
+    boxShadow: cssVariableTheme.shadows.md,
     cursor: 'pointer',
+    border: 'none',
+    transition: `transform ${cssVariableTheme.transitions.duration.normal} ease, box-shadow ${cssVariableTheme.transitions.duration.normal} ease, background ${cssVariableTheme.transitions.duration.normal} ease`,
+    '&:hover': {
+      transform: 'scale(1.05)',
+      background: 'var(--fab-color-dark)',
+      boxShadow: cssVariableTheme.shadows.xl,
+    },
+    '&:active': {
+      transform: 'scale(0.95)',
+    },
+    '&:disabled': {
+      cursor: 'not-allowed',
+      opacity: cssVariableTheme.action.disabledOpacity,
+    },
   },
-  render: ({ children }) => {
+  render: ({ props, children, useHostProps }) => {
+    const colors = paletteFullColors[props.color ?? 'primary']
+    useHostProps({
+      style: {
+        '--fab-color-main': colors.main,
+        '--fab-color-contrast': colors.mainContrast,
+        '--fab-color-dark': colors.dark,
+      },
+    })
+
     return <>{children}</>
   },
 })