@furystack/shades-common-components 11.0.0 → 12.0.1

package/src/components/dialog.tsx

@@ -0,0 +1,277 @@
+import { Shade, createComponent } from '@furystack/shades'
+import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js'
+import { promisifyAnimation } from '../utils/promisify-animation.js'
+import { Icon } from './icons/icon.js'
+import { close } from './icons/icon-definitions.js'
+import { Modal } from './modal.js'
+
+export type DialogProps = {
+  isVisible: boolean
+  title?: string
+  onClose?: () => void
+  actions?: JSX.Element
+  maxWidth?: string
+  fullWidth?: boolean
+}
+
+const showAnimation = async (el: Element | null) => {
+  const panel = el?.querySelector?.('.dialog-panel')
+  if (panel) {
+    await promisifyAnimation(
+      panel,
+      [
+        { opacity: 0, transform: 'scale(0.9)' },
+        { opacity: 1, transform: 'scale(1)' },
+      ],
+      {
+        duration: 200,
+        easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+        fill: 'forwards',
+      },
+    )
+  }
+}
+
+const hideAnimation = async (el: Element | null) => {
+  const panel = el?.querySelector?.('.dialog-panel')
+  if (panel) {
+    await promisifyAnimation(
+      panel,
+      [
+        { opacity: 1, transform: 'scale(1)' },
+        { opacity: 0, transform: 'scale(0.9)' },
+      ],
+      {
+        duration: 150,
+        easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+        fill: 'forwards',
+      },
+    )
+  }
+}
+
+export const Dialog = Shade<DialogProps>({
+  shadowDomName: 'shade-dialog',
+  css: {
+    '& .dialog-panel': {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      backgroundColor: cssVariableTheme.background.paper,
+      color: cssVariableTheme.text.primary,
+      borderRadius: cssVariableTheme.shape.borderRadius.md,
+      boxShadow: cssVariableTheme.shadows.xl,
+      margin: cssVariableTheme.spacing.lg,
+      maxHeight: 'calc(100vh - 64px)',
+      overflow: 'hidden',
+      fontFamily: cssVariableTheme.typography.fontFamily,
+    },
+
+    '& .dialog-header': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: `${cssVariableTheme.spacing.md} ${cssVariableTheme.spacing.lg}`,
+      borderBottom: `1px solid ${cssVariableTheme.divider}`,
+      flexShrink: '0',
+    },
+
+    '& .dialog-title': {
+      margin: '0',
+      fontSize: cssVariableTheme.typography.fontSize.lg,
+      fontWeight: cssVariableTheme.typography.fontWeight.semibold,
+      lineHeight: cssVariableTheme.typography.lineHeight.tight,
+    },
+
+    '& .dialog-close': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '32px',
+      height: '32px',
+      border: 'none',
+      background: 'transparent',
+      color: cssVariableTheme.text.secondary,
+      borderRadius: cssVariableTheme.shape.borderRadius.sm,
+      cursor: 'pointer',
+      fontSize: '18px',
+      lineHeight: '1',
+      padding: '0',
+      flexShrink: '0',
+      transition: buildTransition(
+        ['background', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+        ['color', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+      ),
+    },
+
+    '& .dialog-close:hover': {
+      background: cssVariableTheme.action.hoverBackground,
+      color: cssVariableTheme.text.primary,
+    },
+
+    '& .dialog-body': {
+      padding: cssVariableTheme.spacing.lg,
+      overflowY: 'auto',
+      flex: '1',
+    },
+
+    '& .dialog-actions': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      padding: `${cssVariableTheme.spacing.sm} ${cssVariableTheme.spacing.lg}`,
+      borderTop: `1px solid ${cssVariableTheme.divider}`,
+      gap: cssVariableTheme.spacing.sm,
+      flexShrink: '0',
+    },
+  },
+  render: ({ props, children }) => {
+    const { isVisible, title, onClose, actions, maxWidth = '560px', fullWidth } = props
+
+    const handleClose = () => {
+      onClose?.()
+    }
+
+    return (
+      <Modal
+        isVisible={isVisible}
+        onClose={handleClose}
+        showAnimation={showAnimation}
+        hideAnimation={hideAnimation}
+        backdropStyle={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: cssVariableTheme.action.backdrop,
+          zIndex: '1300',
+        }}
+      >
+        <div
+          className="dialog-panel"
+          style={{
+            width: fullWidth ? '100%' : undefined,
+            maxWidth,
+          }}
+          onclick={(ev: MouseEvent) => ev.stopPropagation()}
+        >
+          {title || onClose ? (
+            <div className="dialog-header">
+              {title ? <h2 className="dialog-title">{title}</h2> : <span />}
+              {onClose ? (
+                <button className="dialog-close" onclick={handleClose} aria-label="Close dialog">
+                  <Icon icon={close} size="small" />
+                </button>
+              ) : null}
+            </div>
+          ) : null}
+          <div className="dialog-body">{children}</div>
+          {actions ? <div className="dialog-actions">{actions}</div> : null}
+        </div>
+      </Modal>
+    )
+  },
+})
+
+/**
+ * Options for the confirm dialog helper
+ */
+export type ConfirmDialogOptions = {
+  title: string
+  message: string | JSX.Element
+  confirmText?: string
+  cancelText?: string
+  onConfirm: () => void
+  onCancel?: () => void
+}
+
+/**
+ * Renders a pre-built confirm dialog with confirm/cancel buttons.
+ * Returns a JSX element that should be placed in the component tree.
+ *
+ * @param isVisible - Boolean controlling the dialog visibility
+ * @param options - Configuration for the confirm dialog
+ * @returns A Dialog JSX element
+ *
+ * @example
+ * ```tsx
+ * const [isConfirmOpen, setConfirmOpen] = useState('confirmOpen', false)
+ * // ...
+ * {ConfirmDialog(isConfirmOpen, {
+ *   title: 'Delete Item',
+ *   message: 'Are you sure you want to delete this item?',
+ *   onConfirm: () => { deleteItem(); setConfirmOpen(false) },
+ *   onCancel: () => setConfirmOpen(false),
+ * })}
+ * ```
+ */
+export const ConfirmDialog = (isVisible: boolean, options: ConfirmDialogOptions): JSX.Element => {
+  const { title, message, confirmText = 'Confirm', cancelText = 'Cancel', onConfirm, onCancel } = options
+
+  const handleCancel = () => {
+    onCancel?.()
+  }
+
+  const handleConfirm = () => {
+    onConfirm()
+  }
+
+  return (
+    <Dialog
+      isVisible={isVisible}
+      title={title}
+      onClose={handleCancel}
+      maxWidth="440px"
+      actions={
+        <>
+          <button
+            className="dialog-cancel-btn"
+            onclick={handleCancel}
+            style={{
+              padding: '8px 16px',
+              border: 'none',
+              borderRadius: '4px',
+              background: 'transparent',
+              color: cssVariableTheme.text.secondary,
+              cursor: 'pointer',
+              fontSize: cssVariableTheme.typography.fontSize.md,
+              fontWeight: cssVariableTheme.typography.fontWeight.medium,
+            }}
+          >
+            {cancelText}
+          </button>
+          <button
+            className="dialog-confirm-btn"
+            onclick={handleConfirm}
+            style={{
+              padding: '8px 16px',
+              border: 'none',
+              borderRadius: '4px',
+              background: cssVariableTheme.palette.primary.main,
+              color: cssVariableTheme.palette.primary.mainContrast,
+              cursor: 'pointer',
+              fontSize: cssVariableTheme.typography.fontSize.md,
+              fontWeight: cssVariableTheme.typography.fontWeight.medium,
+            }}
+          >
+            {confirmText}
+          </button>
+        </>
+      }
+    >
+      {typeof message === 'string' ? (
+        <p
+          style={{
+            margin: '0',
+            fontSize: cssVariableTheme.typography.fontSize.md,
+            lineHeight: cssVariableTheme.typography.lineHeight.normal,
+            color: cssVariableTheme.text.secondary,
+          }}
+        >
+          {message}
+        </p>
+      ) : (
+        message
+      )}
+    </Dialog>
+  )
+}

package/src/components/divider.spec.tsx

@@ -0,0 +1,197 @@
+import { createComponent, flushUpdates } from '@furystack/shades'
+import { describe, expect, it } from 'vitest'
+import { Divider } from './divider.js'
+
+describe('Divider', () => {
+  it('should be defined', () => {
+    expect(Divider).toBeDefined()
+    expect(typeof Divider).toBe('function')
+  })
+
+  it('should create a divider element with default props', () => {
+    const el = (<Divider />) as unknown as HTMLElement
+    expect(el).toBeDefined()
+    expect(el.tagName?.toLowerCase()).toBe('shade-divider')
+  })
+
+  it('should set role="separator" by default', async () => {
+    const el = (
+      <div>
+        <Divider />
+      </div>
+    )
+    const divider = el.firstElementChild as JSX.Element
+    divider.updateComponent()
+    await flushUpdates()
+    expect(divider.getAttribute('role')).toBe('separator')
+  })
+
+  it('should render as horizontal by default (no data-orientation)', async () => {
+    const el = (
+      <div>
+        <Divider />
+      </div>
+    )
+    const divider = el.firstElementChild as JSX.Element
+    divider.updateComponent()
+    await flushUpdates()
+    expect(divider.hasAttribute('data-orientation')).toBe(false)
+  })
+
+  it('should set data-orientation="vertical" when orientation is vertical', async () => {
+    const el = (
+      <div>
+        <Divider orientation="vertical" />
+      </div>
+    )
+    const divider = el.firstElementChild as JSX.Element
+    divider.updateComponent()
+    await flushUpdates()
+    expect(divider.getAttribute('data-orientation')).toBe('vertical')
+    expect(divider.getAttribute('aria-orientation')).toBe('vertical')
+  })
+
+  it('should set data-variant for inset variant', async () => {
+    const el = (
+      <div>
+        <Divider variant="inset" />
+      </div>
+    )
+    const divider = el.firstElementChild as JSX.Element
+    divider.updateComponent()
+    await flushUpdates()
+    expect(divider.getAttribute('data-variant')).toBe('inset')
+  })
+
+  it('should set data-variant for middle variant', async () => {
+    const el = (
+      <div>
+        <Divider variant="middle" />
+      </div>
+    )
+    const divider = el.firstElementChild as JSX.Element
+    divider.updateComponent()
+    await flushUpdates()
+    expect(divider.getAttribute('data-variant')).toBe('middle')
+  })
+
+  it('should not set data-variant for full variant', async () => {
+    const el = (
+      <div>
+        <Divider variant="full" />
+      </div>
+    )
+    const divider = el.firstElementChild as JSX.Element
+    divider.updateComponent()
+    await flushUpdates()
+    expect(divider.hasAttribute('data-variant')).toBe(false)
+  })
+
+  it('should not set data-variant when no variant is specified', async () => {
+    const el = (
+      <div>
+        <Divider />
+      </div>
+    )
+    const divider = el.firstElementChild as JSX.Element
+    divider.updateComponent()
+    await flushUpdates()
+    expect(divider.hasAttribute('data-variant')).toBe(false)
+  })
+
+  it('should set data-has-children when children are provided', async () => {
+    const el = (
+      <div>
+        <Divider>Section</Divider>
+      </div>
+    )
+    const divider = el.firstElementChild as JSX.Element
+    divider.updateComponent()
+    await flushUpdates()
+    expect(divider.hasAttribute('data-has-children')).toBe(true)
+  })
+
+  it('should not set data-has-children when no children', async () => {
+    const el = (
+      <div>
+        <Divider />
+      </div>
+    )
+    const divider = el.firstElementChild as JSX.Element
+    divider.updateComponent()
+    await flushUpdates()
+    expect(divider.hasAttribute('data-has-children')).toBe(false)
+  })
+
+  it('should render children inside a divider-text span', async () => {
+    const el = (
+      <div>
+        <Divider>OR</Divider>
+      </div>
+    )
+    const divider = el.firstElementChild as JSX.Element
+    divider.updateComponent()
+    await flushUpdates()
+    const textSpan = divider.querySelector('.divider-text')
+    expect(textSpan).not.toBeNull()
+  })
+
+  it('should set data-text-align for left alignment', async () => {
+    const el = (
+      <div>
+        <Divider textAlign="left">Section</Divider>
+      </div>
+    )
+    const divider = el.firstElementChild as JSX.Element
+    divider.updateComponent()
+    await flushUpdates()
+    expect(divider.getAttribute('data-text-align')).toBe('left')
+  })
+
+  it('should set data-text-align for right alignment', async () => {
+    const el = (
+      <div>
+        <Divider textAlign="right">Section</Divider>
+      </div>
+    )
+    const divider = el.firstElementChild as JSX.Element
+    divider.updateComponent()
+    await flushUpdates()
+    expect(divider.getAttribute('data-text-align')).toBe('right')
+  })
+
+  it('should not set data-text-align for center alignment (default)', async () => {
+    const el = (
+      <div>
+        <Divider textAlign="center">Section</Divider>
+      </div>
+    )
+    const divider = el.firstElementChild as JSX.Element
+    divider.updateComponent()
+    await flushUpdates()
+    expect(divider.hasAttribute('data-text-align')).toBe(false)
+  })
+
+  it('should not set data-text-align when no textAlign is provided', async () => {
+    const el = (
+      <div>
+        <Divider>Section</Divider>
+      </div>
+    )
+    const divider = el.firstElementChild as JSX.Element
+    divider.updateComponent()
+    await flushUpdates()
+    expect(divider.hasAttribute('data-text-align')).toBe(false)
+  })
+
+  it('should accept and apply custom style', () => {
+    const el = (
+      <div>
+        <Divider style={{ borderColor: 'red' }} />
+      </div>
+    )
+    const divider = el.firstElementChild as JSX.Element
+    divider.updateComponent()
+    expect(divider.style.borderColor).toBe('red')
+  })
+})

package/src/components/divider.tsx

@@ -0,0 +1,147 @@
+import type { PartialElement } from '@furystack/shades'
+import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../services/css-variable-theme.js'
+
+export type DividerProps = PartialElement<HTMLElement> & {
+  /** Orientation of the divider */
+  orientation?: 'horizontal' | 'vertical'
+  /** Variant controls whether the divider spans the full width/height or is inset */
+  variant?: 'full' | 'inset' | 'middle'
+  /** Alignment of text content within the divider. Only applies to horizontal dividers with children. */
+  textAlign?: 'left' | 'center' | 'right'
+}
+
+export const Divider = Shade<DividerProps>({
+  shadowDomName: 'shade-divider',
+  css: {
+    display: 'flex',
+    alignItems: 'center',
+    margin: '0',
+    border: 'none',
+    flexShrink: '0',
+
+    // ==========================================
+    // HORIZONTAL (default)
+    // ==========================================
+
+    '&:not([data-orientation="vertical"])': {
+      width: '100%',
+      flexDirection: 'row',
+    },
+
+    // Horizontal line (no children)
+    '&:not([data-orientation="vertical"]):not([data-has-children])': {
+      borderTop: `1px solid ${cssVariableTheme.divider}`,
+      margin: `${cssVariableTheme.spacing.md} 0`,
+    },
+
+    // Horizontal with children: lines on both sides
+    '&:not([data-orientation="vertical"])[data-has-children]': {
+      margin: `${cssVariableTheme.spacing.md} 0`,
+      gap: cssVariableTheme.spacing.md,
+    },
+
+    '&:not([data-orientation="vertical"])[data-has-children]::before, &:not([data-orientation="vertical"])[data-has-children]::after':
+      {
+        content: '""',
+        flex: '1',
+        borderTop: `1px solid ${cssVariableTheme.divider}`,
+      },
+
+    // Text align left: shrink left line
+    '&[data-text-align="left"]::before': {
+      flex: '0 0 10%',
+    },
+
+    // Text align right: shrink right line
+    '&[data-text-align="right"]::after': {
+      flex: '0 0 10%',
+    },
+
+    // Divider text styling
+    '& .divider-text': {
+      fontFamily: cssVariableTheme.typography.fontFamily,
+      fontSize: cssVariableTheme.typography.fontSize.sm,
+      color: cssVariableTheme.text.secondary,
+      whiteSpace: 'nowrap',
+      lineHeight: '1',
+    },
+
+    // ==========================================
+    // VERTICAL
+    // ==========================================
+
+    '&[data-orientation="vertical"]': {
+      flexDirection: 'column',
+      alignSelf: 'stretch',
+      height: 'auto',
+      width: 'auto',
+    },
+
+    // Vertical line (no children)
+    '&[data-orientation="vertical"]:not([data-has-children])': {
+      borderLeft: `1px solid ${cssVariableTheme.divider}`,
+      margin: `0 ${cssVariableTheme.spacing.md}`,
+    },
+
+    // Vertical with children
+    '&[data-orientation="vertical"][data-has-children]': {
+      margin: `0 ${cssVariableTheme.spacing.md}`,
+      gap: cssVariableTheme.spacing.sm,
+    },
+
+    '&[data-orientation="vertical"][data-has-children]::before, &[data-orientation="vertical"][data-has-children]::after':
+      {
+        content: '""',
+        flex: '1',
+        borderLeft: `1px solid ${cssVariableTheme.divider}`,
+      },
+
+    // ==========================================
+    // VARIANT: INSET (indented on the start side)
+    // ==========================================
+
+    '&:not([data-orientation="vertical"])[data-variant="inset"]': {
+      marginLeft: cssVariableTheme.spacing.xl,
+    },
+
+    '&[data-orientation="vertical"][data-variant="inset"]': {
+      marginTop: cssVariableTheme.spacing.xl,
+    },
+
+    // ==========================================
+    // VARIANT: MIDDLE (indented on both sides)
+    // ==========================================
+
+    '&:not([data-orientation="vertical"])[data-variant="middle"]': {
+      marginLeft: cssVariableTheme.spacing.lg,
+      marginRight: cssVariableTheme.spacing.lg,
+    },
+
+    '&[data-orientation="vertical"][data-variant="middle"]': {
+      marginTop: cssVariableTheme.spacing.lg,
+      marginBottom: cssVariableTheme.spacing.lg,
+    },
+  },
+  render: ({ props, children, useHostProps }) => {
+    const { orientation, variant, textAlign, style } = props
+    const isVertical = orientation === 'vertical'
+    const hasChildren = children && (Array.isArray(children) ? children.length > 0 : true)
+
+    useHostProps({
+      role: 'separator',
+      'data-orientation': isVertical ? 'vertical' : undefined,
+      'aria-orientation': isVertical ? 'vertical' : undefined,
+      'data-variant': variant && variant !== 'full' ? variant : undefined,
+      'data-has-children': hasChildren ? '' : undefined,
+      'data-text-align': textAlign && textAlign !== 'center' ? textAlign : undefined,
+      ...(style ? { style: style as Record<string, string> } : {}),
+    })
+
+    if (hasChildren) {
+      return <span className="divider-text">{children}</span>
+    }
+
+    return <></>
+  },
+})