+
+
+
+ )
+}
+
+export { CookieConsent }
diff --git a/src/components/components/CookieConsent/cookies.ts b/src/components/components/CookieConsent/cookies.ts
new file mode 100644
index 0000000..970d6ff
--- /dev/null
+++ b/src/components/components/CookieConsent/cookies.ts
@@ -0,0 +1,31 @@
+export const getCookie = (name: string): string => {
+ if (typeof document === 'undefined')
+ return ''
+
+ const prefix = `${name}=`
+ const parts = decodeURIComponent(document.cookie).split(';')
+
+ for (const part of parts) {
+ const trimmed = part.trim()
+ if (trimmed.startsWith(prefix))
+ return trimmed.substring(prefix.length)
+ }
+
+ return ''
+}
+
+export const setCookie = (
+ name: string,
+ value: string,
+ days: number,
+ domain?: string,
+): void => {
+ if (typeof document === 'undefined')
+ return
+
+ const expires = new Date()
+ expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000)
+
+ const domainPart = domain ? `; domain=${domain}` : ''
+ document.cookie = `${name}=${encodeURIComponent(value)}${domainPart}; expires=${expires.toUTCString()}; path=/; SameSite=Lax`
+}
diff --git a/src/components/components/CookieConsent/index.ts b/src/components/components/CookieConsent/index.ts
new file mode 100644
index 0000000..61c5b0b
--- /dev/null
+++ b/src/components/components/CookieConsent/index.ts
@@ -0,0 +1,3 @@
+export { CookieConsent } from './CookieConsent'
+export type { CookieConsentProps, CookieConsentLink } from './CookieConsent'
+export { getCookie, setCookie } from './cookies'
diff --git a/src/components/components/DataTable/DataTable.tsx b/src/components/components/DataTable/DataTable.tsx
index 8dd8514..50cac62 100644
--- a/src/components/components/DataTable/DataTable.tsx
+++ b/src/components/components/DataTable/DataTable.tsx
@@ -128,6 +128,33 @@ const DataTable =
+ {children}
+ {message}
+ {links.length > 0 ? (
+
+
+
+ -
+ {links.map((link, index) => (
+
-
+
+ {link.label} + +
+ ))}
+
+ {description && (
+ {
+ if (!actionBusy)
+ setCreateFolderOpen(false)
+ }}
+ closeOnBackdrop={!actionBusy}
+ closeOnEscape={!actionBusy}
+ footer={(
+ <>
+ setCreateFolderOpen(false)}
+ />
+ void handleCreateFolder()}
+ />
+
+ )}
+ >
+
+
+
+ )
+}
+
+export { FileBrowser }
diff --git a/src/components/components/FileBrowser/format.ts b/src/components/components/FileBrowser/format.ts
new file mode 100644
index 0000000..285ebff
--- /dev/null
+++ b/src/components/components/FileBrowser/format.ts
@@ -0,0 +1,150 @@
+const formatBytes = (value?: number | null): string => {
+ if (value == null || Number.isNaN(value))
+ return '—'
+
+ if (value < 1024)
+ return `${value} B`
+
+ const units = ['KB', 'MB', 'GB', 'TB']
+ let size = value / 1024
+ let unit = 0
+ while (size >= 1024 && unit < units.length - 1) {
+ size /= 1024
+ unit += 1
+ }
+
+ return `${size.toFixed(size >= 10 || unit === 0 ? 0 : 1)} ${units[unit]}`
+}
+
+const formatDate = (value?: string | null): string => {
+ if (!value)
+ return '—'
+
+ const date = new Date(value)
+ if (Number.isNaN(date.getTime()))
+ return value
+
+ return date.toLocaleString()
+}
+
+const formatMediaType = (mediaType?: string): string => {
+ if (!mediaType)
+ return '—'
+
+ const map: Record{description}
+ )} + +
+
+
+
+
+
+
+
+ {selectedItem && (
+
+ )}
+
+ {onCreateFolder && activeRootId ? (
+
+ ) : null}
+ {onUpload && activeRootId ? (
+ <>
+ void handleUploadChange(e.target.files)}
+ />
+
+
+ ) : null}
+
+ {canDownload ? (
+
+ ) : null}
+
+
+
+
+
+
+
+
+ {navCrumbs.map((crumb) => (
+
+
+
+
+ {visibleItems.length === 0 && !loading ? (
+
+
+
+ )}
+
+
+ {canLoadMore && onLoadMore && (
+
+ {emptyHint ?? 'No items in this folder.'}
+
+ ) : (
+ | + + | + ))} +||||
|---|---|---|---|---|
|
+
+ |
+ ||||
|
+
+ |
+ {itemKindLabel(item)} | ++ {item.isFolder ? '—' : formatBytes(item.size)} + | +{formatDate(item.lastModified)} | ++ {item.isFolder ? '—' : formatMediaType(item.contentType)} + | +
+
+ )}
+
+
+ {slides.map((slide, slideIndex) => (
+
+ ))}
+
+
+ {isOpen && active ? (
+
+ )
+}
+
+export { LightBox }
diff --git a/src/components/components/LightBox/index.ts b/src/components/components/LightBox/index.ts
new file mode 100644
index 0000000..10d8fee
--- /dev/null
+++ b/src/components/components/LightBox/index.ts
@@ -0,0 +1,2 @@
+export { LightBox } from './LightBox'
+export type { LightBoxProps, LightBoxSlide } from './LightBox'
diff --git a/src/components/components/Loader/Loader.tsx b/src/components/components/Loader/Loader.tsx
new file mode 100644
index 0000000..701ccf0
--- /dev/null
+++ b/src/components/components/Loader/Loader.tsx
@@ -0,0 +1,105 @@
+import { type FC, useEffect, useState } from 'react'
+import { loaderEventNames } from './loaderEvents'
+import { Spinner, type SpinnerSize } from './Spinner'
+
+export interface LoaderProps {
+ /** When set, overrides the event-driven ref-count and forces visibility. */
+ visible?: boolean
+ label?: string
+ size?: SpinnerSize
+ className?: string
+}
+
+interface LoaderState {
+ counter: number
+ disabled: boolean
+}
+
+const Loader: FC
+
+ ) : null}
+
+
+ {index + 1} / {slides.length}
+
+
+
+
+
+
+
+ 
+
+
+
+
+ {active.alt ? (
+ {active.alt}
+ ) : null} + +
+
+
+ {slides.map((slide, slideIndex) => (
+
+ ))}
+
+
+
+ )
+}
+
+export { Loader }
diff --git a/src/components/components/Loader/Spinner.tsx b/src/components/components/Loader/Spinner.tsx
new file mode 100644
index 0000000..ed4a969
--- /dev/null
+++ b/src/components/components/Loader/Spinner.tsx
@@ -0,0 +1,39 @@
+import { type FC } from 'react'
+
+export type SpinnerSize = 'sm' | 'md' | 'lg'
+
+export interface SpinnerProps {
+ size?: SpinnerSize
+ className?: string
+ label?: string
+}
+
+const sizeClass: Record
+
+ {label ? {label} : null}
+
+)
+
+export { Spinner }
diff --git a/src/components/components/Loader/index.ts b/src/components/components/Loader/index.ts
new file mode 100644
index 0000000..915973f
--- /dev/null
+++ b/src/components/components/Loader/index.ts
@@ -0,0 +1,10 @@
+export { Loader } from './Loader'
+export type { LoaderProps } from './Loader'
+export { Spinner } from './Spinner'
+export type { SpinnerProps, SpinnerSize } from './Spinner'
+export {
+ showLoader,
+ hideLoader,
+ enableLoader,
+ disableLoader,
+} from './loaderEvents'
diff --git a/src/components/components/Loader/loaderEvents.ts b/src/components/components/Loader/loaderEvents.ts
new file mode 100644
index 0000000..29cc404
--- /dev/null
+++ b/src/components/components/Loader/loaderEvents.ts
@@ -0,0 +1,27 @@
+const SHOW_EVENT = 'webui-show-loader'
+const HIDE_EVENT = 'webui-hide-loader'
+const ENABLE_EVENT = 'webui-enable-loader'
+const DISABLE_EVENT = 'webui-disable-loader'
+
+export const showLoader = (): void => {
+ window.dispatchEvent(new CustomEvent(SHOW_EVENT))
+}
+
+export const hideLoader = (): void => {
+ window.dispatchEvent(new CustomEvent(HIDE_EVENT))
+}
+
+export const enableLoader = (): void => {
+ window.dispatchEvent(new CustomEvent(ENABLE_EVENT))
+}
+
+export const disableLoader = (): void => {
+ window.dispatchEvent(new CustomEvent(DISABLE_EVENT))
+}
+
+export const loaderEventNames = {
+ show: SHOW_EVENT,
+ hide: HIDE_EVENT,
+ enable: ENABLE_EVENT,
+ disable: DISABLE_EVENT,
+} as const
diff --git a/src/components/components/Masonry/Masonry.tsx b/src/components/components/Masonry/Masonry.tsx
new file mode 100644
index 0000000..d89be6e
--- /dev/null
+++ b/src/components/components/Masonry/Masonry.tsx
@@ -0,0 +1,73 @@
+import {
+ Children,
+ type FC,
+ type ReactNode,
+ useCallback,
+ useEffect,
+ useRef,
+ useState,
+} from 'react'
+
+export interface MasonryProps {
+ /** Min widths (ascending) that add a column. Example: `[350, 500, 750]` → 1–4 columns. */
+ breakpoints?: number[]
+ children?: ReactNode
+ className?: string
+ columnClassName?: string
+}
+
+const getColumnCount = (width: number, breakpoints: number[]): number =>
+ breakpoints.reduceRight((count, breakpoint, index) => (
+ breakpoint < width ? count : index
+ ), breakpoints.length) + 1
+
+const Masonry: FC
+
+ )
+}
+
+export { Masonry }
diff --git a/src/components/components/Masonry/index.ts b/src/components/components/Masonry/index.ts
new file mode 100644
index 0000000..c811082
--- /dev/null
+++ b/src/components/components/Masonry/index.ts
@@ -0,0 +1,2 @@
+export { Masonry } from './Masonry'
+export type { MasonryProps } from './Masonry'
diff --git a/src/components/components/Modal/ConfirmDialog.tsx b/src/components/components/Modal/ConfirmDialog.tsx
new file mode 100644
index 0000000..ce0b15a
--- /dev/null
+++ b/src/components/components/Modal/ConfirmDialog.tsx
@@ -0,0 +1,58 @@
+import { type FC, type ReactNode } from 'react'
+import { ButtonComponent } from '../editors/ButtonComponent'
+import { Modal, type ModalSize } from './Modal'
+
+export interface ConfirmDialogProps {
+ isOpen?: boolean
+ title?: ReactNode
+ message?: ReactNode
+ confirmLabel?: string
+ cancelLabel?: string
+ confirmHierarchy?: 'primary' | 'secondary' | 'success' | 'error' | 'warning'
+ onConfirm?: () => void
+ onCancel?: () => void
+ size?: ModalSize
+ closeOnBackdrop?: boolean
+ closeOnEscape?: boolean
+}
+
+const ConfirmDialog: FC
+ {columnItems.map((column, columnIndex) => (
+
+
+ {column.map((child, index) => (
+
+ ))}
+ {child}
+ ))}
+
+
+
+ )
+}
+
+export { Modal }
diff --git a/src/components/components/Modal/index.ts b/src/components/components/Modal/index.ts
new file mode 100644
index 0000000..25b7061
--- /dev/null
+++ b/src/components/components/Modal/index.ts
@@ -0,0 +1,4 @@
+export { Modal } from './Modal'
+export type { ModalProps, ModalSize } from './Modal'
+export { ConfirmDialog } from './ConfirmDialog'
+export type { ConfirmDialogProps } from './ConfirmDialog'
diff --git a/src/components/components/Ratings/Ratings.tsx b/src/components/components/Ratings/Ratings.tsx
new file mode 100644
index 0000000..de29002
--- /dev/null
+++ b/src/components/components/Ratings/Ratings.tsx
@@ -0,0 +1,119 @@
+import { type FC, useState } from 'react'
+import { Star } from 'lucide-react'
+
+export type RatingsSize = 'sm' | 'md' | 'lg'
+
+export interface RatingsProps {
+ /** Current rating (supports fractions for partial fill, e.g. `3.5`). */
+ value: number
+ max?: number
+ /** When set, stars are interactive. */
+ onChange?: (value: number) => void
+ size?: RatingsSize
+ readOnly?: boolean
+ className?: string
+ /** Accessible name; defaults to `"Rating"`. */
+ label?: string
+ emptyClassName?: string
+ filledClassName?: string
+ hoverClassName?: string
+}
+
+const sizeClass: Record
+ {(title !== undefined && title !== null && title !== '') || onClose ? (
+
+
+
+ ) : null}
+
+ + {title} +
+ {onClose ? ( + + ) : null} +
+ {children}
+
+
+ {footer ? (
+
+ {footer}
+
+ ) : null}
+ {
+ if (interactive)
+ setHovered(null)
+ }}
+ >
+ {Array.from({ length: max }, (_, index) => {
+ const starValue = index + 1
+ const fillRatio = clamp(displayValue - index, 0, 1)
+ const isHoveredStar = hovered !== null && starValue <= hovered
+
+ const icon = (
+ <>
+
+ )
+}
+
+export { Ratings }
diff --git a/src/components/components/Ratings/index.ts b/src/components/components/Ratings/index.ts
new file mode 100644
index 0000000..c918a6b
--- /dev/null
+++ b/src/components/components/Ratings/index.ts
@@ -0,0 +1,2 @@
+export { Ratings } from './Ratings'
+export type { RatingsProps, RatingsSize } from './Ratings'
diff --git a/src/components/components/editors/FileUploadComponent.tsx b/src/components/components/editors/FileUploadComponent.tsx
index ba1963e..01cdba5 100644
--- a/src/components/components/editors/FileUploadComponent.tsx
+++ b/src/components/components/editors/FileUploadComponent.tsx
@@ -1,36 +1,42 @@
-import React, { useRef, useState } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
import { colSpanClass, type GridColSpan } from '../../functions'
import { ButtonComponent } from './ButtonComponent'
-import { Trash2 } from 'lucide-react'
+import { Trash2, Upload } from 'lucide-react'
interface FileUploadComponentProps {
label?: string
colspan?: GridColSpan
multiple?: boolean
+ /** Comma-separated accept list for the file input (e.g. `.pdf,image/*`). */
+ accept?: string
files?: File[]
onChange?: (files: File[]) => void
disabled?: boolean
+ /** When true (default), the control accepts drag-and-drop. */
+ droppable?: boolean
}
const FileUploadComponent: React.FC
- {/* File input (hidden) */}
+ = ({
- {/* Select files button */}
)
}
export { FileUploadComponent }
+export type { FileUploadComponentProps }
diff --git a/src/components/components/editors/index.ts b/src/components/components/editors/index.ts
index ede3356..7c26288 100644
--- a/src/components/components/editors/index.ts
+++ b/src/components/components/editors/index.ts
@@ -34,6 +34,7 @@ export {
}
export type { SecretDataSource, SecretComponentProps } from './SecretComponent'
+export type { FileUploadComponentProps } from './FileUploadComponent'
export type {
RemoteSelectBoxProps,
RemoteSelectSearchDataSource,
diff --git a/src/components/components/social/FacebookMessengerButton.tsx b/src/components/components/social/FacebookMessengerButton.tsx
new file mode 100644
index 0000000..82dea50
--- /dev/null
+++ b/src/components/components/social/FacebookMessengerButton.tsx
@@ -0,0 +1,46 @@
+import { type FC, type ReactNode } from 'react'
+
+export interface FacebookMessengerButtonProps {
+ /** Facebook Page username or page id for `https://m.me/{page}`. */
+ page: string
+ title?: ReactNode
+ className?: string
+ floating?: boolean
+}
+
+const MessengerIcon: FC<{ className?: string }> = ({ className }) => (
+
+)
+
+const buildMessengerHref = (page: string): string =>
+ `https://m.me/${encodeURIComponent(page.replace(/^@/, ''))}`
+
+const FacebookMessengerButton: FC
- {/* Files counter with hover popup */}
- {/* Clear selection button */}
{
setShowPopup(true)
- if (!showPopup) {
+ if (!showPopup)
setPopupPos({ x: e.clientX, y: e.clientY })
- }
}}
onMouseLeave={e => {
- // Only close if not moving into popup
- if (!popupRef.current || !popupRef.current.contains(e.relatedTarget as Node)) {
+ if (!popupRef.current || !popupRef.current.contains(e.relatedTarget as Node))
setShowPopup(false)
- }
}}
>
= ({
outline: 'none',
}}
onBlur={e => {
- // Only close if focus moves outside popup and counter
- if (!e.relatedTarget || (!popupRef.current?.contains(e.relatedTarget as Node) && !(e.relatedTarget as HTMLElement)?.closest('.col-span-1'))) {
+ if (!e.relatedTarget || (!popupRef.current?.contains(e.relatedTarget as Node) && !(e.relatedTarget as HTMLElement)?.closest('.col-span-1')))
setShowPopup(false)
- }
}}
onMouseLeave={e => {
- // Only close if not moving back to counter
const parent = (e.relatedTarget as HTMLElement)?.closest('.col-span-1')
- if (!parent) setShowPopup(false)
+ if (!parent)
+ setShowPopup(false)
}}
onKeyDown={e => {
- if (e.key === 'Escape') setShowPopup(false)
+ if (e.key === 'Escape')
+ setShowPopup(false)
}}
- onFocus={() => {}}
>
)}
-
-
-
{displayFiles.map((file, idx) => (
@@ -153,11 +218,8 @@ const FileUploadComponent: React.FC
+
+ ),
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement.ownerDocument.body)
+ const dialog = await canvas.findByRole('dialog', { name: /cookie consent/i })
+ await expect(dialog).toBeVisible()
+ await userEvent.click(canvas.getByRole('button', { name: /accept/i }))
+ await expect(canvas.queryByRole('dialog', { name: /cookie consent/i })).not.toBeInTheDocument()
+ },
+}
diff --git a/src/stories/components/FileBrowser.stories.tsx b/src/stories/components/FileBrowser.stories.tsx
new file mode 100644
index 0000000..a6e0faa
--- /dev/null
+++ b/src/stories/components/FileBrowser.stories.tsx
@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, fn, userEvent, within } from 'storybook/test'
+import { FileBrowser } from '@webui/components/components/FileBrowser'
+import type { FileBrowserItem, FileBrowserRoot } from '@webui/components/components/FileBrowser'
+
+const roots: FileBrowserRoot[] = [
+ { id: 'docs', label: 'docs', iconClassName: 'text-sky-600' },
+]
+
+const items: FileBrowserItem[] = [
+ {
+ key: 'docs/reports/',
+ name: 'reports',
+ isFolder: true,
+ },
+ {
+ key: 'docs/readme.md',
+ name: 'readme.md',
+ isFolder: false,
+ size: 1280,
+ contentType: 'text/markdown',
+ lastModified: '2026-07-20T10:00:00Z',
+ },
+]
+
+const meta = {
+ component: FileBrowser,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'padded',
+ docs: {
+ description: {
+ component:
+ 'Generic storage browser. Optional `onCreateFolder`, `onUpload`, and `onDownload` show matching toolbar actions; hosts own storage keys and HTTP.',
+ },
+ },
+ },
+ args: {
+ roots,
+ activeRootId: 'docs',
+ pathSegments: [],
+ items,
+ rootsTitle: 'Buckets',
+ description: 'Generic storage browser — folders, files, preview, and cleanup actions.',
+ onNavigateRoot: fn(),
+ onNavigatePath: fn(),
+ onRefresh: fn(),
+ onDelete: fn(),
+ },
+ decorators: [
+ (Story) => (
+ Page content
+
+
+ ),
+ ],
+} satisfies Meta
+
+ ),
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement)
+ await expect(canvas.getByText('Loading…')).toBeVisible()
+ },
+}
+
+export const InlineSpinner: Story = {
+ render: () => (
+ Page content behind the overlay.
+
+
+ ),
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement)
+ await expect(canvas.getByText('Working…')).toBeVisible()
+ },
+}
+
+export const EventDriven: Story = {
+ render: () => (
+
+
+ ),
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement)
+ await userEvent.click(canvas.getByRole('button', { name: /showloader/i }))
+ await expect(canvas.getByText('Please wait…')).toBeVisible()
+ await userEvent.click(canvas.getByRole('button', { name: /hideloader/i }))
+ await expect(canvas.queryByText('Please wait…')).not.toBeInTheDocument()
+ },
+}
diff --git a/src/stories/components/Masonry.stories.tsx b/src/stories/components/Masonry.stories.tsx
new file mode 100644
index 0000000..409361d
--- /dev/null
+++ b/src/stories/components/Masonry.stories.tsx
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, within } from 'storybook/test'
+import { Masonry } from '@webui/components/components/Masonry'
+
+const colors = ['bg-sky-200 h-24', 'bg-emerald-200 h-40', 'bg-amber-200 h-28', 'bg-rose-200 h-36', 'bg-violet-200 h-20', 'bg-cyan-200 h-44']
+
+const meta = {
+ title: 'components/Masonry',
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'padded',
+ },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+
+
+
+
+ Ref-counted overlay — call show twice, then hide twice.
+
+
+)
+
+function ModalDemo({ startOpen = false }: { startOpen?: boolean }) {
+ const [isOpen, setIsOpen] = useState(startOpen)
+
+ return (
+ <>
+
+ Centered dialog with title, body, and footer actions.
+
+
+ )
+ },
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement)
+ await userEvent.click(canvas.getByRole('radio', { name: /2 stars/i }))
+ await expect(canvas.getByText(/selected: 2/i)).toBeVisible()
+ },
+}
+
+export const Sizes: Story = {
+ render: () => (
+ Selected: {value}
+
+
+ ),
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement)
+ await expect(canvas.getByRole('img', { name: /small rating/i })).toBeVisible()
+ await expect(canvas.getByRole('img', { name: /medium rating/i })).toBeVisible()
+ await expect(canvas.getByRole('img', { name: /large rating/i })).toBeVisible()
+ },
+}
diff --git a/src/stories/components/editors/FileUploadComponent.stories.tsx b/src/stories/components/editors/FileUploadComponent.stories.tsx
index 7e363e8..d5870cf 100644
--- a/src/stories/components/editors/FileUploadComponent.stories.tsx
+++ b/src/stories/components/editors/FileUploadComponent.stories.tsx
@@ -1,4 +1,5 @@
import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, within } from 'storybook/test'
import { FileUploadComponent } from '@webui/components/components/editors/FileUploadComponent'
import { withControlledFiles } from '../../helpers/controlledEditors'
@@ -8,6 +9,14 @@ const meta = {
title: 'components/editors/FileUpload',
component: ControlledFileUpload,
tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'File picker with optional drag-and-drop (`droppable`, default true). Drop replaces the current selection.',
+ },
+ },
+ },
} satisfies Meta
+
+ ),
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement)
+ await expect(canvas.getByRole('link', { name: /^whatsapp$/i })).toHaveAttribute(
+ 'href',
+ `https://wa.me/15551234567?text=${encodeURIComponent('Hi')}`,
+ )
+ await expect(canvas.getByRole('link', { name: /^messenger$/i })).toHaveAttribute(
+ 'href',
+ 'https://m.me/Meta',
+ )
+ },
+}
diff --git a/src/stories/core/hooks.stories.tsx b/src/stories/core/hooks.stories.tsx
new file mode 100644
index 0000000..c11abc7
--- /dev/null
+++ b/src/stories/core/hooks.stories.tsx
@@ -0,0 +1,270 @@
+import { useEffect, useRef, useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import {
+ useDebounce,
+ useHover,
+ useInterval,
+ useLocalStorage,
+ useLongPress,
+ useMedia,
+ useOnClickOutside,
+ useOnScreen,
+ usePrevious,
+ useSessionStorage,
+} from '@webui/core'
+
+const meta = {
+ title: 'core/hooks',
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'padded',
+ docs: {
+ description: {
+ component:
+ 'Interactive demos for core hooks (debounce, storage, hover, previous, interval, media, click-outside, long-press, on-screen).',
+ },
+ },
+ },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+
+ )
+}
+
+function StorageDemo() {
+ const [localValue, setLocalValue] = useLocalStorage('storybook.local', 0)
+ const [sessionValue, setSessionValue] = useSessionStorage('storybook.session', 0)
+
+ return (
+ + Live: {value || '—'} +
++ Debounced: {debounced || '—'} +
+
+
+ )
+}
+
+function HoverPreviousDemo() {
+ const [ref, isHovered] = useHover
+
+ localStorage: {localValue}
+ +
+
+ sessionStorage: {sessionValue}
+ +
+
+ )
+}
+
+function IntervalDemo() {
+ const [ticks, setTicks] = useState(0)
+ const [running, setRunning] = useState(true)
+ useInterval(() => setTicks((n) => n + 1), running ? 400 : null)
+
+ return (
+
+ {isHovered ? 'Hovered' : 'Hover me'}
+
+
+
+ Previous: {previous ?? '—'}
+
+
+
+ )
+}
+
+function MediaDemo() {
+ const label = useMedia(['(min-width: 768px)'], ['wide'], 'narrow')
+ return Ticks: {ticks}
+ +Viewport: {label}
+} + +function ClickOutsideDemo() { + const ref = useRef
+
+ )
+}
+
+function LongPressDemo() {
+ const [message, setMessage] = useState('Idle')
+ const handlers = useLongPress({
+ delayMs: 400,
+ onLongPress: () => setMessage('Long press'),
+ onClick: () => setMessage('Click'),
+ })
+
+ return (
+
+ Inside panel
+
+
+ Outside clicks: {outside}
+
+
+
+ )
+}
+
+function OnScreenDemo() {
+ const ref = useRef{message}
+
+
+ )
+}
+
+export const Debounce: Story = {
+ render: () => Visible: {mounted && visible ? 'yes' : 'no'}
+
+ Observed block
+
+