@dillingerstaffing/strand-svelte 0.4.1

package/src/components/Toast/useToast.ts

@@ -0,0 +1,78 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { getContext, setContext } from 'svelte'
+import { writable } from 'svelte/store'
+import type { Writable } from 'svelte/store'
+
+export type ToastStatus = 'info' | 'success' | 'warning' | 'error'
+
+export interface ToastOptions {
+  message: string
+  status?: ToastStatus
+  duration?: number
+}
+
+export interface ToastEntry {
+  id: number
+  message: string
+  status: ToastStatus
+  duration: number
+}
+
+export interface ToastContextValue {
+  toasts: Writable<ToastEntry[]>
+  toast: (options: ToastOptions) => void
+  removeToast: (id: number) => void
+}
+
+const TOAST_KEY = Symbol('StrandToast')
+
+let toastIdCounter = 0
+
+export function createToastContext(): ToastContextValue {
+  const toasts = writable<ToastEntry[]>([])
+  const timers = new Map<number, ReturnType<typeof setTimeout>>()
+
+  function removeToast(id: number) {
+    const timer = timers.get(id)
+    if (timer !== undefined) {
+      clearTimeout(timer)
+      timers.delete(id)
+    }
+    toasts.update((prev) => prev.filter((t) => t.id !== id))
+  }
+
+  function addToast(options: ToastOptions) {
+    const entry: ToastEntry = {
+      id: ++toastIdCounter,
+      message: options.message,
+      status: options.status ?? 'info',
+      duration: options.duration ?? 5000,
+    }
+    toasts.update((prev) => [...prev, entry])
+
+    if (entry.duration > 0) {
+      const timer = setTimeout(() => {
+        removeToast(entry.id)
+      }, entry.duration)
+      timers.set(entry.id, timer)
+    }
+  }
+
+  const ctx: ToastContextValue = {
+    toasts,
+    toast: addToast,
+    removeToast,
+  }
+
+  setContext(TOAST_KEY, ctx)
+  return ctx
+}
+
+export function getToastContext(): ToastContextValue {
+  const ctx = getContext<ToastContextValue>(TOAST_KEY)
+  if (!ctx) {
+    throw new Error('getToastContext must be used within a ToastProvider')
+  }
+  return ctx
+}

package/src/components/Tooltip/Tooltip.svelte

@@ -0,0 +1,56 @@
+<!--! Strand Svelte | MIT License | dillingerstaffing.com -->
+<script lang="ts">
+  /** Tooltip text */
+  export let content: string
+  /** Position relative to trigger */
+  export let position: 'top' | 'right' | 'bottom' | 'left' = 'top'
+  /** Delay in ms before showing */
+  export let delay: number = 200
+
+  let visible = false
+  let timer: ReturnType<typeof setTimeout> | null = null
+
+  let tooltipIdCounter = 0
+  const tooltipId = `strand-tooltip-${++tooltipIdCounter}`
+
+  function show() {
+    timer = setTimeout(() => {
+      visible = true
+    }, delay)
+  }
+
+  function hide() {
+    if (timer !== null) {
+      clearTimeout(timer)
+      timer = null
+    }
+    visible = false
+  }
+
+  $: tooltipClasses = [
+    'strand-tooltip',
+    `strand-tooltip--${position}`,
+    visible && 'strand-tooltip--visible',
+  ].filter(Boolean).join(' ')
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<span
+  class="strand-tooltip__wrapper"
+  on:mouseenter={show}
+  on:mouseleave={hide}
+  on:focus={show}
+  on:blur={hide}
+  aria-describedby={tooltipId}
+  {...$$restProps}
+>
+  <slot />
+  <span
+    id={tooltipId}
+    class={tooltipClasses}
+    role="tooltip"
+    aria-hidden={!visible}
+  >
+    {content}
+  </span>
+</span>

package/src/components/Tooltip/Tooltip.test.ts

@@ -0,0 +1,50 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/svelte'
+import Tooltip from './Tooltip.svelte'
+
+describe('Tooltip', () => {
+  it('renders wrapper with aria-describedby', () => {
+    const { container } = render(Tooltip, { props: { content: 'Help text' } })
+    const wrapper = container.querySelector('.strand-tooltip__wrapper')
+    expect(wrapper).toBeInTheDocument()
+    expect(wrapper).toHaveAttribute('aria-describedby')
+  })
+
+  it('renders tooltip element with role', () => {
+    const { container } = render(Tooltip, { props: { content: 'Help text' } })
+    const tip = container.querySelector('[role="tooltip"]')
+    expect(tip).toBeInTheDocument()
+    expect(tip).toHaveTextContent('Help text')
+    expect(tip).toHaveClass('strand-tooltip')
+  })
+
+  it('applies position class', () => {
+    const positions = ['top', 'right', 'bottom', 'left'] as const
+    for (const position of positions) {
+      const { container, unmount } = render(Tooltip, { props: { content: 'Tip', position } })
+      expect(container.querySelector('.strand-tooltip')).toHaveClass(`strand-tooltip--${position}`)
+      unmount()
+    }
+  })
+
+  it('is hidden by default', () => {
+    const { container } = render(Tooltip, { props: { content: 'Tip' } })
+    const tip = container.querySelector('.strand-tooltip')
+    expect(tip).toHaveAttribute('aria-hidden', 'true')
+    expect(tip).not.toHaveClass('strand-tooltip--visible')
+  })
+
+  it('tooltip id matches aria-describedby', () => {
+    const { container } = render(Tooltip, { props: { content: 'Tip' } })
+    const wrapper = container.querySelector('.strand-tooltip__wrapper')
+    const tip = container.querySelector('[role="tooltip"]')
+    expect(wrapper!.getAttribute('aria-describedby')).toBe(tip!.id)
+  })
+
+  it('defaults to top position', () => {
+    const { container } = render(Tooltip, { props: { content: 'Tip' } })
+    expect(container.querySelector('.strand-tooltip')).toHaveClass('strand-tooltip--top')
+  })
+})

package/src/components/Tooltip/index.ts

@@ -0,0 +1,2 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+export { default as Tooltip } from './Tooltip.svelte'

package/src/index.ts

@@ -0,0 +1,46 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+
+// Input
+export { default as Button } from './components/Button/Button.svelte'
+export { default as Input } from './components/Input/Input.svelte'
+export { default as Textarea } from './components/Textarea/Textarea.svelte'
+export { default as Select } from './components/Select/Select.svelte'
+export { default as Checkbox } from './components/Checkbox/Checkbox.svelte'
+export { default as Radio } from './components/Radio/Radio.svelte'
+export { default as Switch } from './components/Switch/Switch.svelte'
+export { default as Slider } from './components/Slider/Slider.svelte'
+export { default as FormField } from './components/FormField/FormField.svelte'
+
+// Display
+export { default as Card } from './components/Card/Card.svelte'
+export { default as Badge } from './components/Badge/Badge.svelte'
+export { default as Avatar } from './components/Avatar/Avatar.svelte'
+export { default as Tag } from './components/Tag/Tag.svelte'
+export { default as Table } from './components/Table/Table.svelte'
+export { default as DataReadout } from './components/DataReadout/DataReadout.svelte'
+export { default as CodeBlock } from './components/CodeBlock/CodeBlock.svelte'
+
+// Layout
+export { default as Stack } from './components/Stack/Stack.svelte'
+export { default as Grid } from './components/Grid/Grid.svelte'
+export { default as Container } from './components/Container/Container.svelte'
+export { default as Divider } from './components/Divider/Divider.svelte'
+export { default as Section } from './components/Section/Section.svelte'
+
+// Navigation
+export { default as Link } from './components/Link/Link.svelte'
+export { default as Tabs } from './components/Tabs/Tabs.svelte'
+export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.svelte'
+export { default as Nav } from './components/Nav/Nav.svelte'
+
+// Feedback
+export { default as Toast } from './components/Toast/Toast.svelte'
+export { default as ToastProvider } from './components/Toast/ToastProvider.svelte'
+export { createToastContext, getToastContext } from './components/Toast/useToast'
+export type { ToastStatus, ToastOptions, ToastEntry, ToastContextValue } from './components/Toast/useToast'
+export { default as Alert } from './components/Alert/Alert.svelte'
+export { default as Dialog } from './components/Dialog/Dialog.svelte'
+export { default as Tooltip } from './components/Tooltip/Tooltip.svelte'
+export { default as Progress } from './components/Progress/Progress.svelte'
+export { default as Spinner } from './components/Spinner/Spinner.svelte'
+export { default as Skeleton } from './components/Skeleton/Skeleton.svelte'

package/src/test-setup.ts

@@ -0,0 +1,7 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup } from "@testing-library/svelte";
+import { afterEach } from "vitest";
+
+afterEach(() => {
+  cleanup();
+});