@furystack/shades-common-components 11.0.0 → 12.0.1

package/src/components/tree/tree.tsx

@@ -0,0 +1,111 @@
+import type { ChildrenList, PartialElement } from '@furystack/shades'
+import { createComponent, Shade } from '@furystack/shades'
+import { ObservableValue } from '@furystack/utils'
+import type { TreeService } from '../../services/tree-service.js'
+import { TreeItem } from './tree-item.js'
+
+export type TreeItemState = {
+  isFocused: boolean
+  isSelected: boolean
+  level: number
+  hasChildren: boolean
+  isExpanded: boolean
+}
+
+export type TreeProps<T> = {
+  rootItems: T[]
+  treeService: TreeService<T>
+  renderItem: (item: T, state: TreeItemState) => JSX.Element
+  renderIcon?: (item: T, isExpanded: boolean) => JSX.Element
+  variant?: 'contained' | 'outlined'
+  onItemActivate?: (item: T) => void
+  onSelectionChange?: (selected: T[]) => void
+} & PartialElement<HTMLDivElement>
+
+export const Tree: <T>(props: TreeProps<T>, children: ChildrenList) => JSX.Element<any> = Shade({
+  shadowDomName: 'shade-tree',
+  css: {
+    display: 'block',
+    width: '100%',
+    overflow: 'auto',
+  },
+  render: ({ props, useDisposable, useObservable, useHostProps }) => {
+    useDisposable('keydown-handler', () => {
+      const listener = (ev: KeyboardEvent) => {
+        props.treeService.handleKeyDown(ev)
+
+        if (ev.key === 'Enter' && props.treeService.hasFocus.getValue()) {
+          const focusedItem = props.treeService.focusedItem.getValue()
+          if (focusedItem && props.onItemActivate) {
+            props.onItemActivate(focusedItem)
+          }
+        }
+      }
+      window.addEventListener('keydown', listener)
+      return { [Symbol.dispose]: () => window.removeEventListener('keydown', listener) }
+    })
+
+    if (props.treeService.rootItems.getValue() !== props.rootItems) {
+      props.treeService.rootItems.setValue(props.rootItems)
+      props.treeService.updateFlattenedNodes()
+    }
+
+    const treeInstanceId = useDisposable('treeInstanceId', () => ({
+      value: Math.random().toString(36).slice(2),
+      [Symbol.dispose]() {},
+    }))
+
+    useDisposable('clickAway', () => {
+      const listener = (ev: MouseEvent) => {
+        const isInside = ev
+          .composedPath()
+          .some((el) => el instanceof HTMLElement && el.dataset.treeInstanceId === treeInstanceId.value)
+        if (!isInside) {
+          props.treeService.hasFocus.setValue(false)
+        }
+      }
+      window.addEventListener('click', listener, true)
+      return { [Symbol.dispose]: () => window.removeEventListener('click', listener, true) }
+    })
+
+    if (props.onSelectionChange) {
+      const { onSelectionChange } = props
+      useDisposable('selectionChangeCallback', () =>
+        props.treeService.selection.subscribe((newSelection) => {
+          onSelectionChange(newSelection)
+        }),
+      )
+    }
+
+    useHostProps({
+      'data-variant': props.variant || undefined,
+      'data-tree-instance-id': treeInstanceId.value,
+      role: 'tree',
+      'aria-multiselectable': 'true',
+      onclick: () => props.treeService.hasFocus.setValue(true),
+    })
+
+    const [flattenedNodes] = useObservable('flattenedNodes', props.treeService.flattenedNodes)
+
+    const previousItemsRef = useDisposable('previousTreeItems', () => new ObservableValue<Set<unknown>>(new Set()))
+    const previousItems = previousItemsRef.getValue()
+    const currentItems = new Set<unknown>(flattenedNodes.map((n) => n.item))
+    previousItemsRef.setValue(currentItems)
+
+    return (
+      <>
+        {flattenedNodes.map((nodeInfo) => (
+          <TreeItem
+            item={nodeInfo.item}
+            treeService={props.treeService}
+            nodeInfo={nodeInfo}
+            isNew={!previousItems.has(nodeInfo.item)}
+            renderItem={props.renderItem}
+            renderIcon={props.renderIcon}
+            onActivate={props.onItemActivate}
+          />
+        ))}
+      </>
+    )
+  },
+})

package/src/components/typography.spec.tsx

@@ -0,0 +1,235 @@
+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 type { TypographyProps, TypographyVariant } from './typography.js'
+import { Typography } from './typography.js'
+
+describe('Typography', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  const renderTypography = async (props: TypographyProps = {}, children?: JSX.Element[]) => {
+    const injector = new Injector()
+    const root = document.getElementById('root')!
+    initializeShadeRoot({
+      injector,
+      rootElement: root,
+      jsxElement: <Typography {...props}>{children}</Typography>,
+    })
+    await sleepAsync(50)
+    return {
+      injector,
+      element: root.querySelector('shade-typography') as HTMLElement,
+      [Symbol.asyncDispose]: () => injector[Symbol.asyncDispose](),
+    }
+  }
+
+  describe('rendering', () => {
+    it('should render a shade-typography element', async () => {
+      await usingAsync(await renderTypography(), async ({ element }) => {
+        expect(element).toBeTruthy()
+        expect(element.tagName.toLowerCase()).toBe('shade-typography')
+      })
+    })
+
+    it('should render children text', async () => {
+      await usingAsync(await renderTypography({}, ['Hello World'] as unknown as JSX.Element[]), async ({ element }) => {
+        expect(element.textContent).toContain('Hello World')
+      })
+    })
+  })
+
+  describe('variants', () => {
+    const headingVariants: TypographyVariant[] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+    const bodyVariants: TypographyVariant[] = ['body1', 'body2']
+    const subtitleVariants: TypographyVariant[] = ['subtitle1', 'subtitle2']
+    const inlineVariants: TypographyVariant[] = ['caption', 'overline']
+
+    it('should default to body1 variant', async () => {
+      await usingAsync(await renderTypography(), async ({ element }) => {
+        expect(element.getAttribute('data-variant')).toBe('body1')
+        const inner = element.querySelector('.typo-inner')
+        expect(inner?.tagName.toLowerCase()).toBe('p')
+      })
+    })
+
+    headingVariants.forEach((variant) => {
+      it(`should render ${variant} tag for variant="${variant}"`, async () => {
+        await usingAsync(await renderTypography({ variant }), async ({ element }) => {
+          expect(element.getAttribute('data-variant')).toBe(variant)
+          const inner = element.querySelector('.typo-inner')
+          expect(inner?.tagName.toLowerCase()).toBe(variant)
+        })
+      })
+    })
+
+    bodyVariants.forEach((variant) => {
+      it(`should render p tag for variant="${variant}"`, async () => {
+        await usingAsync(await renderTypography({ variant }), async ({ element }) => {
+          const inner = element.querySelector('.typo-inner')
+          expect(inner?.tagName.toLowerCase()).toBe('p')
+        })
+      })
+    })
+
+    subtitleVariants.forEach((variant) => {
+      it(`should render h6 tag for variant="${variant}"`, async () => {
+        await usingAsync(await renderTypography({ variant }), async ({ element }) => {
+          const inner = element.querySelector('.typo-inner')
+          expect(inner?.tagName.toLowerCase()).toBe('h6')
+        })
+      })
+    })
+
+    inlineVariants.forEach((variant) => {
+      it(`should render span tag for variant="${variant}"`, async () => {
+        await usingAsync(await renderTypography({ variant }), async ({ element }) => {
+          const inner = element.querySelector('.typo-inner')
+          expect(inner?.tagName.toLowerCase()).toBe('span')
+        })
+      })
+    })
+  })
+
+  describe('colors', () => {
+    it('should use textPrimary color by default', async () => {
+      await usingAsync(await renderTypography(), async ({ element }) => {
+        expect(element.style.getPropertyValue('--typo-color')).toBe('var(--shades-theme-text-primary)')
+      })
+    })
+
+    it('should set textSecondary color', async () => {
+      await usingAsync(await renderTypography({ color: 'textSecondary' }), async ({ element }) => {
+        expect(element.style.getPropertyValue('--typo-color')).toBe('var(--shades-theme-text-secondary)')
+      })
+    })
+
+    it('should set textDisabled color', async () => {
+      await usingAsync(await renderTypography({ color: 'textDisabled' }), async ({ element }) => {
+        expect(element.style.getPropertyValue('--typo-color')).toBe('var(--shades-theme-text-disabled)')
+      })
+    })
+
+    it('should set palette primary color', async () => {
+      await usingAsync(await renderTypography({ color: 'primary' }), async ({ element }) => {
+        expect(element.style.getPropertyValue('--typo-color')).toBe('var(--shades-theme-palette-primary-main)')
+      })
+    })
+
+    it('should set palette error color', async () => {
+      await usingAsync(await renderTypography({ color: 'error' }), async ({ element }) => {
+        expect(element.style.getPropertyValue('--typo-color')).toBe('var(--shades-theme-palette-error-main)')
+      })
+    })
+  })
+
+  describe('ellipsis', () => {
+    it('should set data-ellipsis="true" for boolean ellipsis', async () => {
+      await usingAsync(await renderTypography({ ellipsis: true }), async ({ element }) => {
+        expect(element.getAttribute('data-ellipsis')).toBe('true')
+      })
+    })
+
+    it('should set data-ellipsis="multiline" for numeric ellipsis', async () => {
+      await usingAsync(await renderTypography({ ellipsis: 3 }), async ({ element }) => {
+        expect(element.getAttribute('data-ellipsis')).toBe('multiline')
+        const inner = element.querySelector('.typo-inner') as HTMLElement
+        expect(inner.style.webkitLineClamp).toBe('3')
+      })
+    })
+
+    it('should not set data-ellipsis when not specified', async () => {
+      await usingAsync(await renderTypography(), async ({ element }) => {
+        expect(element.getAttribute('data-ellipsis')).toBeNull()
+      })
+    })
+  })
+
+  describe('copyable', () => {
+    it('should render copy button when copyable is true', async () => {
+      await usingAsync(
+        await renderTypography({ copyable: true }, ['Copy me'] as unknown as JSX.Element[]),
+        async ({ element }) => {
+          const copyBtn = element.querySelector('.typo-copy-btn')
+          expect(copyBtn).toBeTruthy()
+        },
+      )
+    })
+
+    it('should not render copy button when copyable is false or undefined', async () => {
+      await usingAsync(await renderTypography(), async ({ element }) => {
+        const copyBtn = element.querySelector('.typo-copy-btn')
+        expect(copyBtn).toBeNull()
+      })
+    })
+
+    it('should call clipboard API when copy button is clicked', async () => {
+      const writeText = vi.fn().mockResolvedValue(undefined)
+      Object.assign(navigator, { clipboard: { writeText } })
+
+      await usingAsync(
+        await renderTypography({ copyable: true }, ['Copy this text'] as unknown as JSX.Element[]),
+        async ({ element }) => {
+          const copyBtn = element.querySelector('.typo-copy-btn') as HTMLButtonElement
+          copyBtn.click()
+          expect(writeText).toHaveBeenCalledWith(expect.stringContaining('Copy this text'))
+        },
+      )
+    })
+  })
+
+  describe('gutterBottom', () => {
+    it('should set data-gutter-bottom attribute when gutterBottom is true', async () => {
+      await usingAsync(await renderTypography({ gutterBottom: true }), async ({ element }) => {
+        expect(element.hasAttribute('data-gutter-bottom')).toBe(true)
+      })
+    })
+
+    it('should not set data-gutter-bottom attribute when gutterBottom is falsy', async () => {
+      await usingAsync(await renderTypography(), async ({ element }) => {
+        expect(element.hasAttribute('data-gutter-bottom')).toBe(false)
+      })
+    })
+  })
+
+  describe('align', () => {
+    const alignments = ['left', 'center', 'right', 'justify'] as const
+
+    alignments.forEach((align) => {
+      it(`should set data-align="${align}"`, async () => {
+        await usingAsync(await renderTypography({ align }), async ({ element }) => {
+          expect(element.getAttribute('data-align')).toBe(align)
+        })
+      })
+    })
+
+    it('should not set data-align when not specified', async () => {
+      await usingAsync(await renderTypography(), async ({ element }) => {
+        expect(element.getAttribute('data-align')).toBeNull()
+      })
+    })
+  })
+
+  describe('custom styles', () => {
+    it('should apply custom styles from style prop', async () => {
+      await usingAsync(await renderTypography({ style: { margin: '20px', padding: '10px' } }), async ({ element }) => {
+        expect(element.style.margin).toBe('20px')
+        expect(element.style.padding).toBe('10px')
+      })
+    })
+  })
+
+  describe('overline variant', () => {
+    it('should apply uppercase text transform for overline', async () => {
+      await usingAsync(await renderTypography({ variant: 'overline' }), async ({ element }) => {
+        expect(element.getAttribute('data-variant')).toBe('overline')
+      })
+    })
+  })
+})

package/src/components/typography.tsx

@@ -0,0 +1,292 @@
+import type { PartialElement } from '@furystack/shades'
+import { Shade, createComponent } from '@furystack/shades'
+import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js'
+import { paletteMainColors } from '../services/palette-css-vars.js'
+import type { Palette } from '../services/theme-provider-service.js'
+import { Icon } from './icons/icon.js'
+import { clipboard } from './icons/icon-definitions.js'
+
+/**
+ * Typography variant determines semantic HTML tag and default styles.
+ */
+export type TypographyVariant =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'subtitle1'
+  | 'subtitle2'
+  | 'body1'
+  | 'body2'
+  | 'caption'
+  | 'overline'
+
+/**
+ * Color options for the Typography component.
+ * Supports palette colors and text-level semantic colors.
+ */
+export type TypographyColor = keyof Palette | 'textPrimary' | 'textSecondary' | 'textDisabled'
+
+export type TypographyProps = PartialElement<HTMLElement> & {
+  /** The typographic variant to use. Determines tag and style. Defaults to 'body1'. */
+  variant?: TypographyVariant
+  /** Text color. Defaults to 'textPrimary'. */
+  color?: TypographyColor
+  /** Truncate text with ellipsis. `true` for single-line, a number for max line count. */
+  ellipsis?: boolean | number
+  /** Show a copy button that copies text content to clipboard. */
+  copyable?: boolean
+  /** Add bottom margin for spacing. */
+  gutterBottom?: boolean
+  /** Text alignment. */
+  align?: 'left' | 'center' | 'right' | 'justify'
+}
+
+type VariantDef = {
+  fontSize: string
+  fontWeight: string
+  lineHeight: string
+  letterSpacing: string
+  textTransform?: string
+  scale?: string
+}
+
+const variantDefs: Record<TypographyVariant, VariantDef> = {
+  h1: {
+    fontSize: cssVariableTheme.typography.fontSize.xl,
+    fontWeight: cssVariableTheme.typography.fontWeight.bold,
+    lineHeight: cssVariableTheme.typography.lineHeight.tight,
+    letterSpacing: cssVariableTheme.typography.letterSpacing.tight,
+    scale: '2',
+  },
+  h2: {
+    fontSize: cssVariableTheme.typography.fontSize.xl,
+    fontWeight: cssVariableTheme.typography.fontWeight.bold,
+    lineHeight: cssVariableTheme.typography.lineHeight.tight,
+    letterSpacing: cssVariableTheme.typography.letterSpacing.dense,
+    scale: '1.6',
+  },
+  h3: {
+    fontSize: cssVariableTheme.typography.fontSize.xl,
+    fontWeight: cssVariableTheme.typography.fontWeight.semibold,
+    lineHeight: cssVariableTheme.typography.lineHeight.tight,
+    letterSpacing: cssVariableTheme.typography.letterSpacing.normal,
+    scale: '1.3',
+  },
+  h4: {
+    fontSize: cssVariableTheme.typography.fontSize.lg,
+    fontWeight: cssVariableTheme.typography.fontWeight.semibold,
+    lineHeight: cssVariableTheme.typography.lineHeight.tight,
+    letterSpacing: cssVariableTheme.typography.letterSpacing.wide,
+    scale: '1.15',
+  },
+  h5: {
+    fontSize: cssVariableTheme.typography.fontSize.lg,
+    fontWeight: cssVariableTheme.typography.fontWeight.medium,
+    lineHeight: cssVariableTheme.typography.lineHeight.normal,
+    letterSpacing: cssVariableTheme.typography.letterSpacing.normal,
+  },
+  h6: {
+    fontSize: cssVariableTheme.typography.fontSize.md,
+    fontWeight: cssVariableTheme.typography.fontWeight.medium,
+    lineHeight: cssVariableTheme.typography.lineHeight.normal,
+    letterSpacing: cssVariableTheme.typography.letterSpacing.wide,
+    scale: '1.1',
+  },
+  subtitle1: {
+    fontSize: cssVariableTheme.typography.fontSize.md,
+    fontWeight: cssVariableTheme.typography.fontWeight.medium,
+    lineHeight: cssVariableTheme.typography.lineHeight.normal,
+    letterSpacing: cssVariableTheme.typography.letterSpacing.wide,
+  },
+  subtitle2: {
+    fontSize: cssVariableTheme.typography.fontSize.sm,
+    fontWeight: cssVariableTheme.typography.fontWeight.medium,
+    lineHeight: cssVariableTheme.typography.lineHeight.normal,
+    letterSpacing: '0.1px',
+  },
+  body1: {
+    fontSize: cssVariableTheme.typography.fontSize.md,
+    fontWeight: cssVariableTheme.typography.fontWeight.normal,
+    lineHeight: cssVariableTheme.typography.lineHeight.relaxed,
+    letterSpacing: cssVariableTheme.typography.letterSpacing.wide,
+  },
+  body2: {
+    fontSize: cssVariableTheme.typography.fontSize.sm,
+    fontWeight: cssVariableTheme.typography.fontWeight.normal,
+    lineHeight: cssVariableTheme.typography.lineHeight.relaxed,
+    letterSpacing: cssVariableTheme.typography.letterSpacing.wide,
+  },
+  caption: {
+    fontSize: cssVariableTheme.typography.fontSize.xs,
+    fontWeight: cssVariableTheme.typography.fontWeight.normal,
+    lineHeight: cssVariableTheme.typography.lineHeight.normal,
+    letterSpacing: '0.4px',
+  },
+  overline: {
+    fontSize: cssVariableTheme.typography.fontSize.xs,
+    fontWeight: cssVariableTheme.typography.fontWeight.medium,
+    lineHeight: cssVariableTheme.typography.lineHeight.normal,
+    letterSpacing: cssVariableTheme.typography.letterSpacing.widest,
+    textTransform: 'uppercase',
+  },
+}
+
+const buildVariantCssRules = (): Record<string, Record<string, string>> => {
+  const rules: Record<string, Record<string, string>> = {}
+  for (const [variant, def] of Object.entries(variantDefs)) {
+    const rule: Record<string, string> = {
+      fontSize: def.fontSize,
+      fontWeight: def.fontWeight,
+      lineHeight: def.lineHeight,
+      letterSpacing: def.letterSpacing,
+    }
+    if (def.textTransform) {
+      rule.textTransform = def.textTransform
+    }
+    if (def.scale && def.scale !== '1') {
+      rule.transformOrigin = 'left top'
+      rule.transform = `scale(${def.scale})`
+      rule.marginBottom = `calc((${def.scale} - 1) * 1em)`
+    }
+    rules[`&[data-variant="${variant}"]`] = rule
+  }
+  return rules
+}
+
+const colorToVar = (color: TypographyColor): string => {
+  if (color === 'textPrimary') return cssVariableTheme.text.primary
+  if (color === 'textSecondary') return cssVariableTheme.text.secondary
+  if (color === 'textDisabled') return cssVariableTheme.text.disabled
+  return paletteMainColors[color].main
+}
+
+const variantToTag = (variant: TypographyVariant): string => {
+  if (variant.startsWith('h')) return variant
+  if (variant === 'subtitle1' || variant === 'subtitle2') return 'h6'
+  if (variant === 'body1' || variant === 'body2') return 'p'
+  return 'span'
+}
+
+/**
+ * Typography component for consistent text styling.
+ * Maps variants to semantic HTML tags and uses theme typography tokens.
+ */
+export const Typography = Shade<TypographyProps>({
+  shadowDomName: 'shade-typography',
+  css: {
+    display: 'block',
+    margin: '0',
+    padding: '0',
+    fontFamily: cssVariableTheme.typography.fontFamily,
+    color: 'var(--typo-color)',
+
+    // Variant-specific typography styles
+    ...buildVariantCssRules(),
+
+    // Gutter bottom
+    '&[data-gutter-bottom]': {
+      marginBottom: '0.35em',
+    },
+
+    // Alignment
+    '&[data-align="left"]': { textAlign: 'left' },
+    '&[data-align="center"]': { textAlign: 'center' },
+    '&[data-align="right"]': { textAlign: 'right' },
+    '&[data-align="justify"]': { textAlign: 'justify' },
+
+    // Inner tag resets
+    '& .typo-inner': {
+      margin: '0',
+      padding: '0',
+      font: 'inherit',
+      color: 'inherit',
+      letterSpacing: 'inherit',
+      textTransform: 'inherit',
+    },
+
+    // Ellipsis: single line
+    '&[data-ellipsis="true"] .typo-inner': {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+    },
+
+    // Ellipsis: multi-line (webkit-box-orient applied inline in render)
+    '&[data-ellipsis="multiline"] .typo-inner': {
+      overflow: 'hidden',
+      display: '-webkit-box',
+    },
+
+    // Copy button
+    '& .typo-copy-btn': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: 'transparent',
+      border: 'none',
+      color: cssVariableTheme.text.secondary,
+      cursor: 'pointer',
+      padding: `0 ${cssVariableTheme.spacing.xs}`,
+      fontSize: '0.85em',
+      lineHeight: '1',
+      verticalAlign: 'middle',
+      borderRadius: cssVariableTheme.shape.borderRadius.sm,
+      transition: buildTransition(
+        ['color', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+        ['background', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+      ),
+    },
+    '& .typo-copy-btn:hover': {
+      color: cssVariableTheme.text.primary,
+      background: cssVariableTheme.action.hoverBackground,
+    },
+  },
+  render: ({ props, children, useHostProps, useRef }) => {
+    const { variant = 'body1', color = 'textPrimary', ellipsis, copyable, gutterBottom, align, style } = props
+
+    const hostStyle: Record<string, string> = {
+      '--typo-color': colorToVar(color),
+    }
+    if (style) {
+      Object.assign(hostStyle, style)
+    }
+    useHostProps({
+      'data-gutter-bottom': gutterBottom ? '' : undefined,
+      'data-align': align || undefined,
+      'data-ellipsis': ellipsis === true ? 'true' : typeof ellipsis === 'number' ? 'multiline' : undefined,
+      'data-variant': variant,
+      style: hostStyle,
+    })
+
+    const tag = variantToTag(variant)
+
+    const innerRef = useRef<HTMLElement>('inner')
+    const handleCopy = () => {
+      const text = innerRef.current?.textContent ?? ''
+      navigator.clipboard.writeText(text).catch(() => {
+        // Fallback: do nothing on copy failure
+      })
+    }
+
+    const innerProps: Record<string, unknown> = { className: 'typo-inner', ref: innerRef }
+    if (typeof ellipsis === 'number') {
+      innerProps.style = { webkitLineClamp: String(ellipsis), webkitBoxOrient: 'vertical' }
+    }
+
+    const inner = children ? createComponent(tag, innerProps, ...children) : createComponent(tag, innerProps)
+
+    return (
+      <>
+        {inner}
+        {copyable ? (
+          <button type="button" className="typo-copy-btn" onclick={handleCopy} title="Copy to clipboard">
+            <Icon icon={clipboard} size={14} />
+          </button>
+        ) : null}
+      </>
+    )
+  },
+})