@furystack/shades-common-components 11.0.0 → 12.0.0

package/src/components/tabs.tsx

@@ -1,23 +1,36 @@
 import { LocationService, Shade, createComponent } from '@furystack/shades'
-import { cssVariableTheme } from '../services/css-variable-theme.js'
+import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js'
+import { close } from './icons/icon-definitions.js'
+import { Icon } from './icons/icon.js'
 
-export interface Tab {
+export type Tab = {
   header: JSX.Element
   component: JSX.Element
   hash: string
+  /** Whether this tab shows a close button. Only effective when onClose is provided on Tabs */
+  closable?: boolean
 }
 
 const TabHeader = Shade<{ hash: string }>({
   shadowDomName: 'shade-tab-header',
   css: {
-    padding: '1em 2.5em',
+    padding: `${cssVariableTheme.spacing.md} 40px`,
     cursor: 'pointer',
-    transition: 'box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease, font-weight 0.3s ease',
+    transition: buildTransition(
+      ['box-shadow', cssVariableTheme.transitions.duration.slow, 'ease'],
+      ['background', cssVariableTheme.transitions.duration.slow, 'ease'],
+      ['color', cssVariableTheme.transitions.duration.slow, 'ease'],
+      ['font-weight', cssVariableTheme.transitions.duration.slow, 'ease'],
+    ),
     fontWeight: 'inherit',
     background: cssVariableTheme.background.default,
     color: cssVariableTheme.text.secondary,
     boxShadow: 'none',
-    '&.active': {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: cssVariableTheme.spacing.sm,
+    textDecoration: 'none',
+    '&[data-active]': {
       fontWeight: 'bolder',
       background: cssVariableTheme.background.paper,
       color: cssVariableTheme.text.primary,
@@ -26,14 +39,16 @@ const TabHeader = Shade<{ hash: string }>({
   },
   elementBase: HTMLAnchorElement,
   elementBaseName: 'a',
-  render: ({ children, element, injector, props, useObservable }) => {
+  render: ({ children, injector, props, useObservable, useHostProps }) => {
     const locationService = injector.getInstance(LocationService)
 
     const [hash] = useObservable('updateLocation', locationService.onLocationHashChanged)
     const isActive = hash === props.hash
 
-    element.classList.toggle('active', isActive)
-    element.setAttribute('href', `#${props.hash}`)
+    useHostProps({
+      href: `#${props.hash}`,
+      ...(isActive ? { 'data-active': '' } : {}),
+    })
 
     return <>{children}</>
   },
@@ -44,6 +59,18 @@ export const Tabs = Shade<{
   containerStyle?: Partial<CSSStyleDeclaration>
   style?: Partial<CSSStyleDeclaration>
   onChange?: (page: number) => void
+  /** When provided, tabs operate in controlled mode (URL hash is ignored) */
+  activeKey?: string
+  /** Called when the active tab changes (receives the tab's hash) */
+  onTabChange?: (key: string) => void
+  /** Visual style of the tab headers. Defaults to 'line' */
+  type?: 'line' | 'card'
+  /** Layout orientation. Defaults to 'horizontal' */
+  orientation?: 'horizontal' | 'vertical'
+  /** Called when a closable tab's close button is clicked */
+  onClose?: (key: string) => void
+  /** Called when the add button is clicked (only shown when this callback is provided) */
+  onAdd?: () => void
 }>({
   shadowDomName: 'shade-tabs',
   css: {
@@ -51,27 +78,203 @@ export const Tabs = Shade<{
     height: '100%',
     display: 'flex',
     flexDirection: 'column',
+
     '& .shade-tabs-header-container': {
       display: 'inline-flex',
-      borderRadius: '5px 5px 0 0',
+      borderRadius: `${cssVariableTheme.shape.borderRadius.md} ${cssVariableTheme.shape.borderRadius.md} 0 0`,
       overflow: 'hidden',
       flexShrink: '0',
     },
+
+    // Controlled mode tab button
+    '& .shade-tab-btn': {
+      padding: `${cssVariableTheme.spacing.md} 40px`,
+      cursor: 'pointer',
+      transition: buildTransition(
+        ['box-shadow', cssVariableTheme.transitions.duration.slow, 'ease'],
+        ['background', cssVariableTheme.transitions.duration.slow, 'ease'],
+        ['color', cssVariableTheme.transitions.duration.slow, 'ease'],
+        ['font-weight', cssVariableTheme.transitions.duration.slow, 'ease'],
+      ),
+      fontWeight: 'inherit',
+      background: cssVariableTheme.background.default,
+      color: cssVariableTheme.text.secondary,
+      boxShadow: 'none',
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: cssVariableTheme.spacing.sm,
+      border: 'none',
+      font: 'inherit',
+    },
+    '& .shade-tab-btn.active': {
+      fontWeight: 'bolder',
+      background: cssVariableTheme.background.paper,
+      color: cssVariableTheme.text.primary,
+      boxShadow: `inset 0 -2px 0 ${cssVariableTheme.palette.primary.main}`,
+    },
+
+    // Close button (span with role="button" via event delegation)
+    '& .shade-tab-close': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '16px',
+      height: '16px',
+      borderRadius: cssVariableTheme.shape.borderRadius.xs,
+      opacity: '0.5',
+      fontSize: '12px',
+      lineHeight: '1',
+      transition: buildTransition(
+        ['opacity', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+        ['background', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+      ),
+    },
+    '& .shade-tab-close:hover': {
+      opacity: '1',
+      background: cssVariableTheme.action.hoverBackground,
+    },
+
+    // Add tab button
+    '& .shade-tab-add': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: `${cssVariableTheme.spacing.sm} ${cssVariableTheme.spacing.md}`,
+      border: 'none',
+      background: 'transparent',
+      color: cssVariableTheme.text.secondary,
+      cursor: 'pointer',
+      fontSize: '18px',
+      lineHeight: '1',
+      transition: buildTransition(
+        ['color', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+        ['background', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+      ),
+    },
+    '& .shade-tab-add:hover': {
+      color: cssVariableTheme.text.primary,
+      background: cssVariableTheme.action.hoverBackground,
+    },
+
+    // --- Vertical orientation ---
+    '&[data-orientation="vertical"]': {
+      flexDirection: 'row',
+    },
+    '&[data-orientation="vertical"] .shade-tabs-header-container': {
+      flexDirection: 'column',
+      borderRadius: `${cssVariableTheme.shape.borderRadius.md} 0 0 ${cssVariableTheme.shape.borderRadius.md}`,
+    },
+    '&[data-orientation="vertical"] a[is="shade-tab-header"][data-active], &[data-orientation="vertical"] .shade-tab-btn.active':
+      {
+        boxShadow: `inset -2px 0 0 ${cssVariableTheme.palette.primary.main}`,
+      },
+
+    // --- Card type ---
+    '&[data-type="card"] .shade-tabs-header-container': {
+      gap: '2px',
+      borderRadius: '0',
+      overflow: 'visible',
+      borderBottom: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+    },
+    '&[data-type="card"] a[is="shade-tab-header"], &[data-type="card"] .shade-tab-btn': {
+      borderRadius: `${cssVariableTheme.shape.borderRadius.md} ${cssVariableTheme.shape.borderRadius.md} 0 0`,
+      border: '1px solid transparent',
+      borderBottom: 'none',
+      marginBottom: '-1px',
+      background: 'transparent',
+    },
+    '&[data-type="card"] a[is="shade-tab-header"][data-active], &[data-type="card"] .shade-tab-btn.active': {
+      boxShadow: 'none',
+      background: cssVariableTheme.background.paper,
+      border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+      borderBottom: `1px solid ${cssVariableTheme.background.paper}`,
+    },
+
+    // --- Card type + vertical ---
+    '&[data-type="card"][data-orientation="vertical"] .shade-tabs-header-container': {
+      borderBottom: 'none',
+      borderRight: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+    },
+    '&[data-type="card"][data-orientation="vertical"] a[is="shade-tab-header"], &[data-type="card"][data-orientation="vertical"] .shade-tab-btn':
+      {
+        borderRadius: `${cssVariableTheme.shape.borderRadius.md} 0 0 ${cssVariableTheme.shape.borderRadius.md}`,
+        border: '1px solid transparent',
+        borderRight: 'none',
+        marginRight: '-1px',
+        marginBottom: '0',
+      },
+    '&[data-type="card"][data-orientation="vertical"] a[is="shade-tab-header"][data-active], &[data-type="card"][data-orientation="vertical"] .shade-tab-btn.active':
+      {
+        boxShadow: 'none',
+        background: cssVariableTheme.background.paper,
+        border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+        borderRight: `1px solid ${cssVariableTheme.background.paper}`,
+      },
   },
-  render: ({ props, element, useObservable, injector }) => {
-    if (props.containerStyle) {
-      Object.assign(element.style, props.containerStyle)
-    }
+  render: ({ props, useObservable, injector, useHostProps }) => {
+    useHostProps({
+      ...(props.containerStyle ? { style: props.containerStyle as Record<string, string> } : {}),
+      ...(props.orientation === 'vertical' ? { 'data-orientation': 'vertical' } : {}),
+      ...(props.type === 'card' ? { 'data-type': 'card' } : {}),
+    })
+
+    const isControlled = props.activeKey !== undefined
 
     const [hash] = useObservable('updateLocation', injector.getInstance(LocationService).onLocationHashChanged)
-    const activeTab = props.tabs.find((t) => t.hash === hash.replace('#', ''))
+
+    const activeKey = isControlled ? props.activeKey! : hash.replace('#', '')
+    const activeTab = props.tabs.find((t) => t.hash === activeKey)
+
+    const handleTabClick = (e: MouseEvent, tab: Tab, index: number) => {
+      const target = e.target as HTMLElement
+      if (target.closest('.shade-tab-close')) {
+        e.stopPropagation()
+        e.preventDefault()
+        props.onClose?.(tab.hash)
+        return
+      }
+      props.onTabChange?.(tab.hash)
+      props.onChange?.(index)
+    }
 
     return (
       <>
-        <div className="shade-tabs-header-container">
-          {props.tabs.map((tab) => (
-            <TabHeader hash={tab.hash}>{tab.header}</TabHeader>
-          ))}
+        <div className="shade-tabs-header-container" role="tablist">
+          {props.tabs.map((tab, index) => {
+            const isActive = tab.hash === activeKey
+            const hasCloseButton = tab.closable && props.onClose
+
+            return isControlled ? (
+              <button
+                className={`shade-tab-btn${isActive ? ' active' : ''}`}
+                role="tab"
+                aria-selected={String(isActive)}
+                tabIndex={isActive ? 0 : -1}
+                onclick={(e: MouseEvent) => handleTabClick(e, tab, index)}
+              >
+                {tab.header}
+                {hasCloseButton ? (
+                  <span className="shade-tab-close">
+                    <Icon icon={close} size={12} />
+                  </span>
+                ) : null}
+              </button>
+            ) : (
+              <TabHeader hash={tab.hash} onclick={(e: MouseEvent) => handleTabClick(e, tab, index)}>
+                {tab.header}
+                {hasCloseButton ? (
+                  <span className="shade-tab-close">
+                    <Icon icon={close} size={12} />
+                  </span>
+                ) : null}
+              </TabHeader>
+            )
+          })}
+          {props.onAdd ? (
+            <button className="shade-tab-add" aria-label="Add tab" onclick={() => props.onAdd!()}>
+              +
+            </button>
+          ) : null}
         </div>
         {activeTab?.component}
       </>

package/src/components/timeline.spec.tsx

@@ -0,0 +1,294 @@
+import { createComponent, flushUpdates } from '@furystack/shades'
+import { describe, expect, it } from 'vitest'
+import type { TimelineItemProps, TimelineProps } from './timeline.js'
+import { Timeline, TimelineItem } from './timeline.js'
+
+describe('TimelineItem', () => {
+  it('should be defined', () => {
+    expect(TimelineItem).toBeDefined()
+    expect(typeof TimelineItem).toBe('function')
+  })
+
+  it('should create a timeline item element', () => {
+    const el = (<TimelineItem />) as unknown as HTMLElement
+    expect(el).toBeDefined()
+    expect(el.tagName?.toLowerCase()).toBe('shade-timeline-item')
+  })
+
+  it('should pass children as content', () => {
+    const el = (<TimelineItem>Event happened</TimelineItem>) as unknown as JSX.Element
+    expect(el).toBeDefined()
+  })
+
+  it('should set props correctly', () => {
+    const el = (<TimelineItem color="success" label="2024-01-01" />) as unknown as { props: TimelineItemProps }
+    expect(el.props.color).toBe('success')
+    expect(el.props.label).toBe('2024-01-01')
+  })
+
+  it('should render dot and content', async () => {
+    const el = (
+      <div>
+        <TimelineItem>
+          <span>Event content</span>
+        </TimelineItem>
+      </div>
+    )
+    const item = el.firstElementChild as JSX.Element
+    item.updateComponent()
+    await flushUpdates()
+    expect(item.querySelector('.timeline-dot')).not.toBeNull()
+    expect(item.querySelector('.timeline-content')).not.toBeNull()
+    expect(item.querySelector('.timeline-tail')).not.toBeNull()
+  })
+
+  it('should render a label when provided', async () => {
+    const el = (
+      <div>
+        <TimelineItem label="Jan 2024">Event</TimelineItem>
+      </div>
+    )
+    const item = el.firstElementChild as JSX.Element
+    item.updateComponent()
+    await flushUpdates()
+    const label = item.querySelector('.timeline-label') as HTMLElement
+    expect(label).not.toBeNull()
+    expect(label.textContent).toBe('Jan 2024')
+  })
+
+  it('should not render a label when not provided', async () => {
+    const el = (
+      <div>
+        <TimelineItem>Event</TimelineItem>
+      </div>
+    )
+    const item = el.firstElementChild as JSX.Element
+    item.updateComponent()
+    await flushUpdates()
+    expect(item.querySelector('.timeline-label')).toBeNull()
+  })
+
+  it('should set custom dot when dot prop is provided', async () => {
+    const el = (
+      <div>
+        <TimelineItem dot={<span>🎉</span>}>Party!</TimelineItem>
+      </div>
+    )
+    const item = el.firstElementChild as JSX.Element
+    item.updateComponent()
+    await flushUpdates()
+    const dot = item.querySelector('.timeline-dot') as HTMLElement
+    expect(dot.hasAttribute('data-custom')).toBe(true)
+  })
+
+  it('should not set data-custom when dot prop is not provided', async () => {
+    const el = (
+      <div>
+        <TimelineItem>Event</TimelineItem>
+      </div>
+    )
+    const item = el.firstElementChild as JSX.Element
+    item.updateComponent()
+    await flushUpdates()
+    const dot = item.querySelector('.timeline-dot') as HTMLElement
+    expect(dot.hasAttribute('data-custom')).toBe(false)
+  })
+
+  it('should set CSS custom property for dot color', async () => {
+    const el = (
+      <div>
+        <TimelineItem color="success">Done</TimelineItem>
+      </div>
+    )
+    const item = el.firstElementChild as JSX.Element
+    item.updateComponent()
+    await flushUpdates()
+    expect(item.style.getPropertyValue('--timeline-dot-color')).toBe('var(--shades-theme-palette-success-main)')
+  })
+
+  it('should default to primary color', async () => {
+    const el = (
+      <div>
+        <TimelineItem>Event</TimelineItem>
+      </div>
+    )
+    const item = el.firstElementChild as JSX.Element
+    item.updateComponent()
+    await flushUpdates()
+    expect(item.style.getPropertyValue('--timeline-dot-color')).toBe('var(--shades-theme-palette-primary-main)')
+  })
+
+  it('should render dashed tail when data-pending attribute is set', async () => {
+    const el = (
+      <div>
+        <TimelineItem data-pending="">Event</TimelineItem>
+      </div>
+    )
+    const item = el.firstElementChild as JSX.Element
+    item.updateComponent()
+    await flushUpdates()
+    const tail = item.querySelector('.timeline-tail') as HTMLElement
+    expect(tail.hasAttribute('data-pending')).toBe(true)
+  })
+})
+
+describe('Timeline', () => {
+  it('should be defined', () => {
+    expect(Timeline).toBeDefined()
+    expect(typeof Timeline).toBe('function')
+  })
+
+  it('should create a timeline element', () => {
+    const el = (<Timeline />) as unknown as HTMLElement
+    expect(el).toBeDefined()
+    expect(el.tagName?.toLowerCase()).toBe('shade-timeline')
+  })
+
+  it('should set props correctly', () => {
+    const el = (<Timeline mode="alternate" pending />) as unknown as { props: TimelineProps }
+    expect(el.props.mode).toBe('alternate')
+    expect(el.props.pending).toBe(true)
+  })
+
+  it('should render timeline items as children', async () => {
+    const el = (
+      <div>
+        <Timeline>
+          <TimelineItem>First</TimelineItem>
+          <TimelineItem>Second</TimelineItem>
+        </Timeline>
+      </div>
+    )
+    const timeline = el.firstElementChild as JSX.Element
+    timeline.updateComponent()
+    await flushUpdates()
+    const items = timeline.querySelectorAll('shade-timeline-item')
+    expect(items.length).toBe(2)
+  })
+
+  it('should set data-mode attribute', async () => {
+    const el = (
+      <div>
+        <Timeline mode="alternate">
+          <TimelineItem>Event</TimelineItem>
+        </Timeline>
+      </div>
+    )
+    const timeline = el.firstElementChild as JSX.Element
+    timeline.updateComponent()
+    await flushUpdates()
+    expect(timeline.getAttribute('data-mode')).toBe('alternate')
+  })
+
+  it('should default mode to left', async () => {
+    const el = (
+      <div>
+        <Timeline>
+          <TimelineItem>Event</TimelineItem>
+        </Timeline>
+      </div>
+    )
+    const timeline = el.firstElementChild as JSX.Element
+    timeline.updateComponent()
+    await flushUpdates()
+    expect(timeline.getAttribute('data-mode')).toBe('left')
+  })
+
+  it('should mark last item with data-last', async () => {
+    const el = (
+      <div>
+        <Timeline>
+          <TimelineItem>First</TimelineItem>
+          <TimelineItem>Last</TimelineItem>
+        </Timeline>
+      </div>
+    )
+    const timeline = el.firstElementChild as JSX.Element
+    timeline.updateComponent()
+    await flushUpdates()
+    const items = timeline.querySelectorAll('shade-timeline-item')
+    expect(items[0].hasAttribute('data-last')).toBe(false)
+    expect(items[1].hasAttribute('data-last')).toBe(true)
+  })
+
+  it('should add pending item when pending is true', async () => {
+    const el = (
+      <div>
+        <Timeline pending>
+          <TimelineItem>Event</TimelineItem>
+        </Timeline>
+      </div>
+    )
+    const timeline = el.firstElementChild as JSX.Element
+    timeline.updateComponent()
+    await flushUpdates()
+    const items = timeline.querySelectorAll('shade-timeline-item')
+    expect(items.length).toBe(2)
+  })
+
+  it('should not mark original last item as data-last when pending is present', async () => {
+    const el = (
+      <div>
+        <Timeline pending>
+          <TimelineItem>First</TimelineItem>
+          <TimelineItem>Second</TimelineItem>
+        </Timeline>
+      </div>
+    )
+    const timeline = el.firstElementChild as JSX.Element
+    timeline.updateComponent()
+    await flushUpdates()
+    const items = timeline.querySelectorAll('shade-timeline-item')
+    expect(items[0].hasAttribute('data-last')).toBe(false)
+    expect(items[1].hasAttribute('data-last')).toBe(false)
+  })
+
+  it('should set data-side="right" on items in right mode', async () => {
+    const el = (
+      <div>
+        <Timeline mode="right">
+          <TimelineItem>Event</TimelineItem>
+        </Timeline>
+      </div>
+    )
+    const timeline = el.firstElementChild as JSX.Element
+    timeline.updateComponent()
+    await flushUpdates()
+    const item = timeline.querySelector('shade-timeline-item') as HTMLElement
+    expect(item.getAttribute('data-side')).toBe('right')
+  })
+
+  it('should alternate data-side in alternate mode', async () => {
+    const el = (
+      <div>
+        <Timeline mode="alternate">
+          <TimelineItem>First</TimelineItem>
+          <TimelineItem>Second</TimelineItem>
+          <TimelineItem>Third</TimelineItem>
+        </Timeline>
+      </div>
+    )
+    const timeline = el.firstElementChild as JSX.Element
+    timeline.updateComponent()
+    await flushUpdates()
+    const items = timeline.querySelectorAll('shade-timeline-item')
+    expect(items[0].getAttribute('data-side')).toBe('left')
+    expect(items[1].getAttribute('data-side')).toBe('right')
+    expect(items[2].getAttribute('data-side')).toBe('left')
+  })
+
+  it('should not set data-side in left mode', async () => {
+    const el = (
+      <div>
+        <Timeline mode="left">
+          <TimelineItem>Event</TimelineItem>
+        </Timeline>
+      </div>
+    )
+    const timeline = el.firstElementChild as JSX.Element
+    timeline.updateComponent()
+    await flushUpdates()
+    const item = timeline.querySelector('shade-timeline-item') as HTMLElement
+    expect(item.hasAttribute('data-side')).toBe(false)
+  })
+})