@furystack/shades-common-components 10.0.35 → 12.0.0

package/src/components/alert.spec.tsx

@@ -0,0 +1,256 @@
+import { createComponent } from '@furystack/shades'
+import { flushUpdates } from '@furystack/shades'
+import { describe, expect, it, vi } from 'vitest'
+import type { AlertProps } from './alert.js'
+import { Alert } from './alert.js'
+
+describe('Alert', () => {
+  it('should be defined', () => {
+    expect(Alert).toBeDefined()
+    expect(typeof Alert).toBe('function')
+  })
+
+  it('should create an alert element with default props', () => {
+    const el = (<Alert>Test message</Alert>) as unknown as HTMLElement
+    expect(el).toBeDefined()
+    expect(el.tagName?.toLowerCase()).toBe('shade-alert')
+  })
+
+  it('should set severity to info by default', async () => {
+    const el = (
+      <div>
+        <Alert>Info message</Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    expect(alert.getAttribute('data-severity')).toBe('info')
+  })
+
+  it('should set data-severity attribute for each severity', async () => {
+    const severities = ['error', 'warning', 'info', 'success'] as const
+
+    for (const severity of severities) {
+      const el = (
+        <div>
+          <Alert severity={severity}>Message</Alert>
+        </div>
+      )
+      const alert = el.firstElementChild as JSX.Element
+      alert.updateComponent()
+      await flushUpdates()
+      expect(alert.getAttribute('data-severity')).toBe(severity)
+    }
+  })
+
+  it('should set data-variant attribute when variant is provided', async () => {
+    const variants = ['filled', 'outlined', 'standard'] as const
+
+    for (const variant of variants) {
+      const el = (
+        <div>
+          <Alert variant={variant}>Message</Alert>
+        </div>
+      )
+      const alert = el.firstElementChild as JSX.Element
+      alert.updateComponent()
+      await flushUpdates()
+      expect(alert.getAttribute('data-variant')).toBe(variant)
+    }
+  })
+
+  it('should not set data-variant attribute when variant is not provided', async () => {
+    const el = (
+      <div>
+        <Alert>Message</Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    expect(alert.hasAttribute('data-variant')).toBe(false)
+  })
+
+  it('should set role="alert" on the element', async () => {
+    const el = (
+      <div>
+        <Alert>Message</Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    expect(alert.getAttribute('role')).toBe('alert')
+  })
+
+  it('should render a title when title prop is provided', async () => {
+    const el = (
+      <div>
+        <Alert title="Error Title" severity="error">
+          Details here
+        </Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    const titleEl = alert.querySelector('.alert-title')
+    expect(titleEl).not.toBeNull()
+    expect(titleEl?.textContent).toBe('Error Title')
+  })
+
+  it('should not render a title when title prop is not provided', async () => {
+    const el = (
+      <div>
+        <Alert severity="info">Just a message</Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    const titleEl = alert.querySelector('.alert-title')
+    expect(titleEl).toBeNull()
+  })
+
+  it('should render a close button when onClose is provided', async () => {
+    const onClose = vi.fn()
+    const el = (
+      <div>
+        <Alert onClose={onClose}>Closeable</Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    const closeBtn = alert.querySelector('.alert-close')
+    expect(closeBtn).not.toBeNull()
+  })
+
+  it('should not render a close button when onClose is not provided', async () => {
+    const el = (
+      <div>
+        <Alert>Not closeable</Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    const closeBtn = alert.querySelector('.alert-close')
+    expect(closeBtn).toBeNull()
+  })
+
+  it('should call onClose when close button is clicked', async () => {
+    const onClose = vi.fn()
+    const el = (
+      <div>
+        <Alert onClose={onClose}>Closeable</Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    const closeBtn = alert.querySelector('.alert-close') as HTMLElement
+    closeBtn.click()
+    expect(onClose).toHaveBeenCalledOnce()
+  })
+
+  it('should stop propagation when close button is clicked', async () => {
+    const onClose = vi.fn()
+    const onAlertClick = vi.fn()
+    const el = (
+      <div>
+        <Alert onClose={onClose} onclick={onAlertClick}>
+          Closeable
+        </Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    const closeBtn = alert.querySelector('.alert-close') as HTMLElement
+    closeBtn.click()
+    expect(onClose).toHaveBeenCalledOnce()
+    expect(onAlertClick).not.toHaveBeenCalled()
+  })
+
+  it('should render the default icon for the severity', async () => {
+    const el = (
+      <div>
+        <Alert severity="error">Error</Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    const iconEl = alert.querySelector('.alert-icon')
+    expect(iconEl).not.toBeNull()
+    expect(iconEl?.querySelector('shade-icon')).not.toBeNull()
+  })
+
+  it('should render a custom icon when icon prop is provided', async () => {
+    const el = (
+      <div>
+        <Alert severity="error" icon="🔥">
+          Error
+        </Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    const iconEl = alert.querySelector('.alert-icon')
+    expect(iconEl).not.toBeNull()
+    expect(iconEl?.textContent).toBe('🔥')
+  })
+
+  it('should set CSS custom properties for severity color', async () => {
+    const el = (
+      <div>
+        <Alert severity="error">Error</Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    expect(alert.style.getPropertyValue('--alert-color-main')).toBe('var(--shades-theme-palette-error-main)')
+  })
+
+  it('should set CSS custom properties for success severity', async () => {
+    const el = (
+      <div>
+        <Alert severity="success">Success</Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    expect(alert.style.getPropertyValue('--alert-color-main')).toBe('var(--shades-theme-palette-success-main)')
+  })
+
+  it('should render children in the message area', async () => {
+    const el = (
+      <div>
+        <Alert>Alert message content</Alert>
+      </div>
+    )
+    const alert = el.firstElementChild as JSX.Element
+    alert.updateComponent()
+    await flushUpdates()
+    const messageEl = alert.querySelector('.alert-message')
+    expect(messageEl).not.toBeNull()
+  })
+
+  it('should set props correctly', () => {
+    const el = (
+      <Alert severity="warning" variant="filled" title="Warning Title" icon="⚡">
+        Warning content
+      </Alert>
+    ) as unknown as JSX.Element
+    const props = el.props as AlertProps
+    expect(props.severity).toBe('warning')
+    expect(props.variant).toBe('filled')
+    expect(props.title).toBe('Warning Title')
+    expect(props.icon).toBe('⚡')
+  })
+})

package/src/components/alert.tsx

@@ -0,0 +1,186 @@
+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 { Icon } from './icons/icon.js'
+import {
+  checkCircle,
+  close as closeIcon,
+  errorCircle,
+  info as infoIcon,
+  warning as warningIcon,
+} from './icons/icon-definitions.js'
+
+export type AlertSeverity = 'error' | 'warning' | 'info' | 'success'
+
+export type AlertProps = PartialElement<HTMLElement> & {
+  severity?: AlertSeverity
+  variant?: 'filled' | 'outlined' | 'standard'
+  title?: string
+  onClose?: (ev: MouseEvent) => void
+  icon?: JSX.Element | string
+}
+
+const severityColorMap: Record<AlertSeverity, { main: string; mainContrast: string; light: string }> = {
+  error: { ...paletteMainColors.error, light: cssVariableTheme.palette.error.light },
+  warning: { ...paletteMainColors.warning, light: cssVariableTheme.palette.warning.light },
+  info: { ...paletteMainColors.info, light: cssVariableTheme.palette.info.light },
+  success: { ...paletteMainColors.success, light: cssVariableTheme.palette.success.light },
+}
+
+const defaultIcons: Record<AlertSeverity, JSX.Element> = {
+  error: (<Icon icon={errorCircle} size="small" />) as unknown as JSX.Element,
+  warning: (<Icon icon={warningIcon} size="small" />) as unknown as JSX.Element,
+  info: (<Icon icon={infoIcon} size="small" />) as unknown as JSX.Element,
+  success: (<Icon icon={checkCircle} size="small" />) as unknown as JSX.Element,
+}
+
+export const Alert = Shade<AlertProps>({
+  shadowDomName: 'shade-alert',
+  css: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: cssVariableTheme.spacing.md,
+    padding: `${cssVariableTheme.spacing.md} ${cssVariableTheme.spacing.lg}`,
+    fontFamily: cssVariableTheme.typography.fontFamily,
+    fontSize: cssVariableTheme.typography.fontSize.sm,
+    lineHeight: '1.5',
+    borderRadius: cssVariableTheme.shape.borderRadius.md,
+    boxSizing: 'border-box',
+    transition: buildTransition(
+      ['background', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+      ['color', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+      ['box-shadow', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+    ),
+
+    // ==========================================
+    // STANDARD VARIANT (default)
+    // ==========================================
+
+    '&:not([data-variant]), &[data-variant="standard"]': {
+      background: 'color-mix(in srgb, var(--alert-color-main) 12%, transparent)',
+      color: 'var(--alert-color-main)',
+    },
+
+    // ==========================================
+    // FILLED VARIANT
+    // ==========================================
+
+    '&[data-variant="filled"]': {
+      background: 'var(--alert-color-main)',
+      color: 'var(--alert-color-main-contrast)',
+    },
+
+    // ==========================================
+    // OUTLINED VARIANT
+    // ==========================================
+
+    '&[data-variant="outlined"]': {
+      background: 'transparent',
+      color: 'var(--alert-color-main)',
+      boxShadow: '0px 0px 0px 1px var(--alert-color-main)',
+    },
+
+    // ==========================================
+    // ICON
+    // ==========================================
+
+    '& .alert-icon': {
+      display: 'flex',
+      alignItems: 'center',
+      fontSize: '20px',
+      lineHeight: '1',
+      flexShrink: '0',
+      paddingTop: '1px',
+    },
+
+    // ==========================================
+    // CONTENT
+    // ==========================================
+
+    '& .alert-content': {
+      flex: '1',
+      minWidth: '0',
+    },
+
+    '& .alert-title': {
+      fontWeight: cssVariableTheme.typography.fontWeight.semibold,
+      marginBottom: cssVariableTheme.spacing.xs,
+    },
+
+    '& .alert-message': {
+      opacity: '0.9',
+    },
+
+    // ==========================================
+    // CLOSE BUTTON
+    // ==========================================
+
+    '& .alert-close': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+      borderRadius: cssVariableTheme.shape.borderRadius.full,
+      border: 'none',
+      background: 'transparent',
+      color: 'inherit',
+      padding: '4px',
+      marginTop: '-2px',
+      marginRight: `-${cssVariableTheme.spacing.sm}`,
+      fontSize: '14px',
+      lineHeight: '1',
+      opacity: '0.7',
+      flexShrink: '0',
+      transition: buildTransition(
+        ['opacity', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+        ['background', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+      ),
+    },
+
+    '& .alert-close:hover': {
+      opacity: '1',
+      background: 'color-mix(in srgb, currentColor 15%, transparent)',
+    },
+  },
+  render: ({ props, children, useHostProps }) => {
+    const { severity = 'info', variant, title, onClose, icon, style } = props
+
+    const colors = severityColorMap[severity]
+    useHostProps({
+      'data-variant': variant || undefined,
+      'data-severity': severity,
+      role: 'alert',
+      style: {
+        '--alert-color-main': colors.main,
+        '--alert-color-main-contrast': colors.mainContrast,
+        '--alert-color-light': colors.light,
+        ...(style as Record<string, string>),
+      },
+    })
+
+    const displayIcon = icon ?? defaultIcons[severity]
+
+    return (
+      <>
+        <span className="alert-icon">{displayIcon}</span>
+        <div className="alert-content">
+          {title ? <div className="alert-title">{title}</div> : null}
+          <div className="alert-message">{children}</div>
+        </div>
+        {onClose ? (
+          <span
+            className="alert-close"
+            role="button"
+            onclick={(ev: MouseEvent) => {
+              ev.stopPropagation()
+              onClose(ev)
+            }}
+          >
+            <Icon icon={closeIcon} size="small" />
+          </span>
+        ) : null}
+      </>
+    )
+  },
+})