mirror of
https://github.com/MAKS-IT-COM/maksit-webui.git
synced 2026-06-30 20:06:43 +02:00
(feature): Release v0.3.0 with Storybook catalog, VaultStyle removal, and colspan Tailwind fixes.
This commit is contained in:
Maksym Sadovnychyy
parent
977201ecae
commit
769e7ecbb9
32
.github/workflows/storybook-tests.yml
vendored
Normal file
32
.github/workflows/storybook-tests.yml
vendored
Normal file
@ -0,0 +1,32 @@
|
||||
name: Storybook tests
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
pull_request:
|
||||
branches: [main]
|
||||
|
||||
defaults:
|
||||
run:
|
||||
working-directory: src
|
||||
|
||||
jobs:
|
||||
storybook-tests:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: '20'
|
||||
cache: npm
|
||||
cache-dependency-path: src/package-lock.json
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Install Playwright Chromium
|
||||
run: npx playwright install chromium --with-deps
|
||||
|
||||
- name: Run Storybook component tests
|
||||
run: npm run test-storybook
|
||||
3
.gitignore
vendored
3
.gitignore
vendored
@ -1,5 +1,8 @@
|
||||
node_modules/
|
||||
dist/
|
||||
coverage/
|
||||
storybook-static/
|
||||
src/storybook-static/
|
||||
*.tsbuildinfo
|
||||
.DS_Store
|
||||
npm-debug.log*
|
||||
|
||||
20
CHANGELOG.md
20
CHANGELOG.md
@ -4,6 +4,26 @@ All notable changes to this project will be documented in this file.
|
||||
|
||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
## [v0.3.0] - 2026-05-25
|
||||
|
||||
### Added
|
||||
|
||||
- Storybook 10 catalog for `@maks-it.com/webui-components`: Tailwind v4, React Router decorator, autodocs, a11y addon, stories for all editors, DataTable (with **ClientSideInteractive** filters/pagination demo), Layout, and FormLayout (`FormContainer`, `FormHeader`, `FormContent`, `FormFooter`).
|
||||
- `npm run storybook` and `npm run build-storybook` from `src/`.
|
||||
|
||||
### Changed
|
||||
|
||||
- Storybook stories under `src/stories/components/` mirror `packages/components/src/components/` folder names (`editors`, `Toast`, …); sidebar titles use `components/<folder>/…`; `@webui/*` Vite aliases import package source without a build.
|
||||
|
||||
### Removed
|
||||
|
||||
- Unused `VaultStyleListSection`, `VaultStyleDataTable`, and `VaultStyleListFooter` (`components/list/`) — not consumed by vault or certs-ui; list screens use `DataTable` instead.
|
||||
|
||||
### Fixed
|
||||
|
||||
- Editor `colspan` uses static Tailwind `col-span-*` classes via `functions/tailwind/gridColSpan.ts` so Storybook and Vite builds apply the 12-column grid correctly.
|
||||
- Storybook 10 preview: Vite `esbuild` JSX set to `automatic` so decorators and stories no longer throw `React is not defined`.
|
||||
|
||||
## [v0.2.0] - 2026-05-24
|
||||
|
||||
### Added
|
||||
|
||||
@ -21,8 +21,11 @@ cd src
|
||||
npm install
|
||||
npm run build
|
||||
npm test
|
||||
npm run storybook
|
||||
```
|
||||
|
||||
**Storybook** (`npm run storybook`) runs a local catalog of `@maks-it.com/webui-components` with Tailwind, React Router, autodocs, a11y checks, and **Vitest component tests** (testing widget + `npm run test-storybook`). Stories live under `src/stories/components/` (mirroring component folders); see `src/stories/README.md` for story conventions and testing.
|
||||
|
||||
Tests and coverage badges: **`utils/Run-Tests/Run-Tests.bat`** (plugin config in `utils/Run-Tests/scriptsettings.json`; uses `NpmJestTest`).
|
||||
|
||||
## Release to npmjs
|
||||
|
||||
45
src/.storybook/main.ts
Normal file
45
src/.storybook/main.ts
Normal file
@ -0,0 +1,45 @@
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { dirname, join } from 'node:path'
|
||||
import type { StorybookConfig } from '@storybook/react-vite'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
|
||||
const storybookDir = dirname(fileURLToPath(import.meta.url))
|
||||
const srcDir = join(storybookDir, '..')
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: ['../stories/**/*.stories.@(ts|tsx)'],
|
||||
staticDirs: ['../public'],
|
||||
addons: [
|
||||
getAbsolutePath("@storybook/addon-docs"),
|
||||
getAbsolutePath("@storybook/addon-a11y"),
|
||||
getAbsolutePath("@storybook/addon-vitest")
|
||||
],
|
||||
framework: {
|
||||
name: getAbsolutePath("@storybook/react-vite"),
|
||||
options: {},
|
||||
},
|
||||
async viteFinal (config) {
|
||||
config.plugins = [...(config.plugins ?? []), tailwindcss()]
|
||||
config.esbuild = {
|
||||
...config.esbuild,
|
||||
jsx: 'automatic',
|
||||
jsxImportSource: 'react',
|
||||
}
|
||||
config.resolve = {
|
||||
...config.resolve,
|
||||
alias: {
|
||||
...(config.resolve?.alias as Record<string, string> | undefined),
|
||||
'@webui/components': join(srcDir, 'packages/components/src'),
|
||||
'@webui/contracts': join(srcDir, 'packages/contracts/src'),
|
||||
'@webui/core': join(srcDir, 'packages/core/src'),
|
||||
},
|
||||
}
|
||||
return config
|
||||
},
|
||||
}
|
||||
|
||||
export default config
|
||||
|
||||
function getAbsolutePath(value: string): any {
|
||||
return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
|
||||
}
|
||||
13
src/.storybook/msw-handlers.ts
Normal file
13
src/.storybook/msw-handlers.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { http, HttpResponse } from 'msw'
|
||||
|
||||
/** Handlers for endpoints Storybook stories may call. Extend per story as needed. */
|
||||
export const mswHandlers = {
|
||||
catalog: [
|
||||
http.get('/api/catalog', () =>
|
||||
HttpResponse.json([
|
||||
{ id: 'vault', name: 'Vault' },
|
||||
{ id: 'certs', name: 'Certificates' },
|
||||
]),
|
||||
),
|
||||
],
|
||||
}
|
||||
39
src/.storybook/preview.tsx
Normal file
39
src/.storybook/preview.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import type { Preview } from '@storybook/react-vite'
|
||||
import MockDate from 'mockdate'
|
||||
import { initialize, mswLoader } from 'msw-storybook-addon'
|
||||
import { MemoryRouter } from 'react-router-dom'
|
||||
import { mswHandlers } from './msw-handlers'
|
||||
import '../storybook.css'
|
||||
|
||||
initialize({ onUnhandledRequest: 'bypass' })
|
||||
|
||||
const preview: Preview = {
|
||||
loaders: [mswLoader],
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<MemoryRouter>
|
||||
<section className="p-6">
|
||||
<Story />
|
||||
</section>
|
||||
</MemoryRouter>
|
||||
),
|
||||
],
|
||||
parameters: {
|
||||
layout: 'padded',
|
||||
msw: { handlers: mswHandlers },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/i,
|
||||
},
|
||||
},
|
||||
a11y: {
|
||||
test: 'todo',
|
||||
},
|
||||
},
|
||||
async beforeEach () {
|
||||
MockDate.set('2024-04-01T12:00:00Z')
|
||||
},
|
||||
}
|
||||
|
||||
export default preview
|
||||
21
src/.storybook/tsconfig.json
Normal file
21
src/.storybook/tsconfig.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"extends": "../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"noEmit": true,
|
||||
"declaration": false,
|
||||
"declarationMap": false,
|
||||
"rootDir": "..",
|
||||
"paths": {
|
||||
"@webui/components": ["../packages/components/src"],
|
||||
"@webui/contracts": ["../packages/contracts/src"],
|
||||
"@webui/core": ["../packages/core/src"],
|
||||
"@webui/components/*": ["../packages/components/src/*"],
|
||||
"@webui/contracts/*": ["../packages/contracts/src/*"],
|
||||
"@webui/core/*": ["../packages/core/src/*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"./**/*",
|
||||
"../stories/**/*"
|
||||
]
|
||||
}
|
||||
4492
src/package-lock.json
generated
4492
src/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,13 +1,13 @@
|
||||
{
|
||||
"name": "maksit-webui",
|
||||
"private": true,
|
||||
"version": "0.2.0",
|
||||
"version": "0.3.0",
|
||||
"description": "Shared React UI library for MaksIT Certs UI and Vault WebUI",
|
||||
"workspaces": [
|
||||
"packages/*"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
"node": ">=20.19"
|
||||
},
|
||||
"overrides": {
|
||||
"zod": "^4.4.3",
|
||||
@ -19,13 +19,46 @@
|
||||
"test": "jest --config jest.config.cjs",
|
||||
"test:coverage": "jest --config jest.config.cjs --coverage",
|
||||
"typecheck": "npm run typecheck --workspaces --if-present",
|
||||
"clean": "npm run clean --workspaces --if-present"
|
||||
"clean": "npm run clean --workspaces --if-present",
|
||||
"storybook": "storybook dev -p 6006",
|
||||
"build-storybook": "storybook build -o storybook-static",
|
||||
"test-storybook": "vitest --project storybook run",
|
||||
"test-storybook:watch": "vitest --project storybook",
|
||||
"test-storybook:coverage": "vitest --project storybook run --coverage"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "^10.4.1",
|
||||
"@storybook/addon-docs": "^10.4.1",
|
||||
"@storybook/addon-vitest": "^10.4.1",
|
||||
"@storybook/react-vite": "^10.4.1",
|
||||
"@tailwindcss/vite": "^4.3.0",
|
||||
"@types/jest": "^30.0.0",
|
||||
"@types/mockdate": "^2.0.0",
|
||||
"@types/node": "^22.19.19",
|
||||
"@types/react": "^19.2.15",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitest/browser-playwright": "^4.1.7",
|
||||
"@vitest/coverage-v8": "^4.1.7",
|
||||
"jest": "^30.4.2",
|
||||
"ts-jest": "^29.4.11"
|
||||
"lucide-react": "^1.16.0",
|
||||
"mockdate": "^3.0.5",
|
||||
"msw": "^2.14.6",
|
||||
"msw-storybook-addon": "^2.0.7",
|
||||
"playwright": "^1.60.0",
|
||||
"react": "^19.2.6",
|
||||
"react-dom": "^19.2.6",
|
||||
"react-router-dom": "^7.15.1",
|
||||
"storybook": "^10.4.1",
|
||||
"tailwindcss": "^4.3.0",
|
||||
"ts-jest": "^29.4.11",
|
||||
"vite": "^6.4.2",
|
||||
"vitest": "^4.1.7"
|
||||
},
|
||||
"author": "MaksIT",
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"msw": {
|
||||
"workerDirectory": [
|
||||
"public"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,7 +22,6 @@ npm install react react-dom react-router-dom lucide-react @tanstack/react-table
|
||||
| `Layout` | App chrome / navigation wrapper |
|
||||
| `Offcanvas` | Slide-over panel |
|
||||
| `LazyLoadTable` | Incrementally loaded table |
|
||||
| `VaultStyleDataTable`, `VaultStyleListSection` | Vault-style list layouts |
|
||||
| `EntityScopesSummary` | Entity scope permissions summary |
|
||||
| `Toast`, `addToast` | Toast notifications |
|
||||
| `FieldContainer` | Label + validation wrapper for fields |
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@maks-it.com/webui-components",
|
||||
"version": "0.2.0",
|
||||
"version": "0.3.0",
|
||||
"description": "Shared React components for MaksIT WebUI apps",
|
||||
"type": "module",
|
||||
"main": "./dist/index.cjs",
|
||||
@ -33,8 +33,8 @@
|
||||
"directory": "src/packages/components"
|
||||
},
|
||||
"dependencies": {
|
||||
"@maks-it.com/webui-contracts": "^0.2.0",
|
||||
"@maks-it.com/webui-core": "^0.2.0",
|
||||
"@maks-it.com/webui-contracts": "^0.3.0",
|
||||
"@maks-it.com/webui-core": "^0.3.0",
|
||||
"date-fns": "^4.3.0",
|
||||
"lodash": "^4.18.1"
|
||||
},
|
||||
|
||||
@ -4,6 +4,7 @@ import { AutoSizer, MultiGrid, GridCellProps } from 'react-virtualized'
|
||||
import { mapPagedToDataTable, type DataTablePageView, type PagedResponse } from '@maks-it.com/webui-core'
|
||||
import { Plus, Trash2, Edit } from 'lucide-react'
|
||||
import debounce from 'lodash/debounce'
|
||||
import { colSpanClass, type GridColSpan } from '../../functions/tailwind'
|
||||
|
||||
|
||||
interface FilterProps {
|
||||
@ -27,7 +28,7 @@ export interface DataTableColumn<T, K extends keyof T = keyof T> {
|
||||
cell: (props: CellProps<T, K>) => React.ReactNode
|
||||
}
|
||||
|
||||
interface DataTableProps<T> {
|
||||
export interface DataTableProps<T extends Record<string, unknown> = Record<string, unknown>> {
|
||||
rawd?: PagedResponse<T> | DataTablePageView<T>
|
||||
columns: DataTableColumn<T>[]
|
||||
maxRecordsPerPage?: number
|
||||
@ -44,7 +45,7 @@ interface DataTableProps<T> {
|
||||
onFilterChange?: (filters: Record<string, string>) => void
|
||||
onPreviousPage?: (pageNumber: number) => void
|
||||
onNextPage?: (pageNumber: number) => void
|
||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
||||
colspan?: GridColSpan
|
||||
|
||||
storageKey?: string
|
||||
}
|
||||
@ -405,7 +406,7 @@ const DataTable = <T extends Record<string, unknown>,>(props: DataTableProps<T>)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`col-span-${colspan} flex flex-col h-full w-full relative`}>
|
||||
<div className={`${colSpanClass(colspan)} flex flex-col h-full w-full relative`}>
|
||||
{columns[0] && (
|
||||
<div
|
||||
ref={filterMeasureRef}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import {
|
||||
DataTable,
|
||||
DataTableColumn
|
||||
DataTableColumn,
|
||||
type DataTableProps,
|
||||
} from './DataTable'
|
||||
|
||||
import {
|
||||
@ -9,7 +10,8 @@ import {
|
||||
} from './helpers'
|
||||
|
||||
export type {
|
||||
DataTableColumn
|
||||
DataTableColumn,
|
||||
DataTableProps,
|
||||
}
|
||||
|
||||
export { DataTableFilter } from './DataTableFilter'
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { FC, ReactNode } from 'react'
|
||||
|
||||
interface FormContentProps {
|
||||
export interface FormContentProps {
|
||||
children?: ReactNode
|
||||
/** Merged after base layout; use e.g. `flex flex-col overflow-hidden` when a child should fill height (iframe). */
|
||||
className?: string
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FC } from 'react'
|
||||
import { FC, type ReactNode } from 'react'
|
||||
import { MainContainer } from './MainContainer'
|
||||
import { SideMenu, SideMenuProps } from './SideMenu'
|
||||
import { Container } from './Container'
|
||||
@ -9,7 +9,7 @@ import { Content } from './Content'
|
||||
interface LayoutProps {
|
||||
sideMenu: SideMenuProps
|
||||
header: HeaderProps
|
||||
children: React.ReactNode
|
||||
children: ReactNode
|
||||
footer: FooterProps
|
||||
}
|
||||
|
||||
|
||||
@ -1,17 +1,18 @@
|
||||
import { FC, useEffect, useRef, useState } from 'react'
|
||||
import { FC, type ReactNode, useEffect, useRef, useState } from 'react'
|
||||
import { colSpanClass, type GridColSpan } from '../functions/tailwind'
|
||||
|
||||
interface LazyLoadTableColumnProps {
|
||||
key: string
|
||||
title: string
|
||||
dataIndex: string
|
||||
renderColumn?: (value: unknown) => React.ReactNode
|
||||
renderColumn?: (value: unknown) => ReactNode
|
||||
}
|
||||
|
||||
interface LazyLoadTableProps {
|
||||
data: Record<string, unknown>[]
|
||||
columns: LazyLoadTableColumnProps[]
|
||||
loadMore: () => void
|
||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
||||
colspan?: GridColSpan
|
||||
}
|
||||
|
||||
const LazyLoadTable: FC<LazyLoadTableProps> = (props) => {
|
||||
@ -51,7 +52,7 @@ const LazyLoadTable: FC<LazyLoadTableProps> = (props) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`col-span-${colspan}`}>
|
||||
<div className={colSpanClass(colspan)}>
|
||||
<table className={'w-full border-collapse'}>
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
import { FC, ReactNode, useCallback, useEffect } from 'react'
|
||||
import { colSpanClass, type GridColSpan } from '../functions/tailwind'
|
||||
|
||||
export interface OffcanvasProps {
|
||||
children: ReactNode
|
||||
isOpen?: boolean
|
||||
onOpen?: () => void
|
||||
onClose?: () => void
|
||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
||||
colspan?: GridColSpan
|
||||
}
|
||||
|
||||
const Offcanvas: FC<OffcanvasProps> = (props) => {
|
||||
@ -30,7 +31,7 @@ const Offcanvas: FC<OffcanvasProps> = (props) => {
|
||||
else handleOnClose()
|
||||
}, [isOpen, handleOnOpen, handleOnClose])
|
||||
|
||||
const leftSpan = 12 - colspan
|
||||
const leftSpan = (12 - colspan) as GridColSpan
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -42,10 +43,8 @@ const Offcanvas: FC<OffcanvasProps> = (props) => {
|
||||
].join(' ')}
|
||||
>
|
||||
<div className={'grid grid-cols-12 h-full w-full'}>
|
||||
{/* colonna di offset */}
|
||||
<div className={`col-span-${leftSpan}`} />
|
||||
{/* area principale */}
|
||||
<div className={`col-span-${colspan} min-h-0`}>
|
||||
<div className={colSpanClass(leftSpan)} aria-hidden={true} />
|
||||
<div className={`${colSpanClass(colspan)} min-h-0 bg-white shadow-xl`}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import { ReactNode } from 'react'
|
||||
import { type FC, type MouseEvent, type ReactNode } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { colSpanClass, type GridColSpan } from '../../functions/tailwind'
|
||||
|
||||
interface CommonButtonProps {
|
||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
||||
colspan?: GridColSpan;
|
||||
route?: string;
|
||||
buttonHierarchy?: 'primary' | 'secondary' | 'success' | 'error' | 'warning';
|
||||
onClick?: () => void;
|
||||
@ -13,7 +14,7 @@ type ButtonComponentProps =
|
||||
| ({ label: string; children?: never } & CommonButtonProps)
|
||||
| ({ children: ReactNode; label?: never } & CommonButtonProps);
|
||||
|
||||
const ButtonComponent: React.FC<ButtonComponentProps> = (props) => {
|
||||
const ButtonComponent: FC<ButtonComponentProps> = (props) => {
|
||||
const {
|
||||
colspan,
|
||||
route,
|
||||
@ -25,7 +26,7 @@ const ButtonComponent: React.FC<ButtonComponentProps> = (props) => {
|
||||
const isChildren = 'children' in props && props.children !== undefined
|
||||
const content = 'label' in props ? props.label : props.children
|
||||
|
||||
const handleClick = (e?: React.MouseEvent) => {
|
||||
const handleClick = (e?: MouseEvent) => {
|
||||
if (disabled) {
|
||||
e?.preventDefault()
|
||||
return
|
||||
@ -63,7 +64,7 @@ const ButtonComponent: React.FC<ButtonComponentProps> = (props) => {
|
||||
? (
|
||||
<Link
|
||||
to={route}
|
||||
className={`${buttonClass} px-4 py-2 rounded ${colspan ? `col-span-${colspan}` : 'w-full'} ${centeringClass} ${disabledClass}`}
|
||||
className={`${buttonClass} px-4 py-2 rounded ${colSpanClass(colspan)} ${centeringClass} ${disabledClass}`}
|
||||
onClick={handleClick}
|
||||
tabIndex={disabled ? -1 : undefined}
|
||||
aria-disabled={disabled}
|
||||
@ -73,7 +74,7 @@ const ButtonComponent: React.FC<ButtonComponentProps> = (props) => {
|
||||
</Link>
|
||||
) : (
|
||||
<button
|
||||
className={`${buttonClass} px-4 py-2 rounded ${colspan ? `col-span-${colspan}` : 'w-full'} ${centeringClass} ${disabledClass}`}
|
||||
className={`${buttonClass} px-4 py-2 rounded ${colSpanClass(colspan)} ${centeringClass} ${disabledClass}`}
|
||||
onClick={handleClick}
|
||||
disabled={disabled}
|
||||
>
|
||||
|
||||
@ -1,16 +1,17 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { type ChangeEvent, type FC, useEffect, useRef } from 'react'
|
||||
import type { GridColSpan } from '../../functions/tailwind'
|
||||
import { FieldContainer } from './FieldContainer'
|
||||
|
||||
interface CheckBoxComponentProps {
|
||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
||||
colspan?: GridColSpan;
|
||||
label: string;
|
||||
value: boolean;
|
||||
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
|
||||
errorText?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const CheckBoxComponent: React.FC<CheckBoxComponentProps> = (props) => {
|
||||
const CheckBoxComponent: FC<CheckBoxComponentProps> = (props) => {
|
||||
|
||||
const {
|
||||
colspan = 6,
|
||||
@ -27,7 +28,7 @@ const CheckBoxComponent: React.FC<CheckBoxComponentProps> = (props) => {
|
||||
prevValue.current = value
|
||||
}, [value])
|
||||
|
||||
const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
if (prevValue.current === e.target.checked)
|
||||
return
|
||||
|
||||
|
||||
@ -3,13 +3,14 @@ import { parseISO, formatISO, format, getDaysInMonth, addMonths, subMonths } fro
|
||||
import { ButtonComponent } from './ButtonComponent'
|
||||
import { TextBoxComponent } from './TextBoxComponent'
|
||||
import { CircleX } from 'lucide-react'
|
||||
import type { GridColSpan } from '../../functions/tailwind'
|
||||
import { FieldContainer } from './FieldContainer'
|
||||
import { getInputClasses } from './editorStyles'
|
||||
|
||||
const DISPLAY_FORMAT = 'yyyy-MM-dd HH:mm'
|
||||
|
||||
interface DateTimePickerComponentProps {
|
||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
||||
colspan?: GridColSpan
|
||||
label: string
|
||||
value?: string
|
||||
onChange?: (isoString?: string) => void
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
import React, { useState } from 'react'
|
||||
import type { GridColSpan } from '../../functions/tailwind'
|
||||
import { FieldContainer } from './FieldContainer'
|
||||
|
||||
interface DualListboxComponentProps {
|
||||
label?: string;
|
||||
availableItemsLabel?: string;
|
||||
selectedItemsLabel?: string;
|
||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
||||
colspan?: GridColSpan;
|
||||
|
||||
idFieldName?: string;
|
||||
availableItems: string[];
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { FC, ReactNode } from 'react'
|
||||
import { colSpanClass, type GridColSpan } from '../../functions/tailwind'
|
||||
|
||||
interface FieldContainerProps {
|
||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
||||
colspan?: GridColSpan;
|
||||
label?: string;
|
||||
errorText?: string;
|
||||
children: ReactNode
|
||||
@ -15,7 +16,7 @@ const FieldContainer: FC<FieldContainerProps> = (props) => {
|
||||
children
|
||||
} = props
|
||||
|
||||
return <div className={`${colspan ? `col-span-${colspan}` : 'w-full'}`}>
|
||||
return <div className={colSpanClass(colspan)}>
|
||||
<label className={`block text-gray-700 text-sm font-bold mb-2 ${!label ? 'invisible' : ''}`}>{label || '\u00A0'}</label>
|
||||
{children}
|
||||
<p className={`text-red-500 text-xs italic mt-2 ${!errorText ? 'invisible' : ''}`}>{errorText || '\u00A0'}</p>
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import React, { useRef, useState } from 'react'
|
||||
import { colSpanClass, type GridColSpan } from '../../functions/tailwind'
|
||||
import { ButtonComponent } from './ButtonComponent'
|
||||
import { Trash2 } from 'lucide-react'
|
||||
|
||||
interface FileUploadComponentProps {
|
||||
label?: string
|
||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
||||
colspan?: GridColSpan
|
||||
multiple?: boolean
|
||||
files?: File[]
|
||||
onChange?: (files: File[]) => void
|
||||
@ -80,7 +81,7 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`grid grid-cols-4 gap-2 ${colspan ? `col-span-${colspan}` : 'w-full'}`}>
|
||||
<div className={`grid grid-cols-4 gap-2 ${colSpanClass(colspan)}`}>
|
||||
{/* File input (hidden) */}
|
||||
<input
|
||||
ref={inputRef}
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import React, { useState } from 'react'
|
||||
import type { GridColSpan } from '../../functions/tailwind'
|
||||
import { FieldContainer } from './FieldContainer'
|
||||
|
||||
interface ListboxComponentProps {
|
||||
label?: string;
|
||||
itemsLabel?: string;
|
||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
||||
colspan?: GridColSpan;
|
||||
items: string[];
|
||||
onChange: (items: string[]) => void;
|
||||
errorText?: string;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import type { GridColSpan } from '../../functions/tailwind'
|
||||
import { FieldContainer } from './FieldContainer'
|
||||
|
||||
interface RadioOption {
|
||||
@ -9,7 +10,7 @@ interface RadioOption {
|
||||
interface RadioGroupComponentProps {
|
||||
options: RadioOption[]
|
||||
label?: string
|
||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
||||
colspan?: GridColSpan
|
||||
value?: string
|
||||
onChange?: (value: string) => void
|
||||
errorText?: string
|
||||
|
||||
@ -2,6 +2,7 @@ import { useState, useCallback, ChangeEvent, useEffect, useRef } from 'react'
|
||||
import type { PagedRequest } from '@maks-it.com/webui-contracts'
|
||||
import type { SearchResponseBase } from '@maks-it.com/webui-contracts'
|
||||
import { deepEqual } from '@maks-it.com/webui-core'
|
||||
import type { GridColSpan } from '../../functions/tailwind'
|
||||
import { SelectBoxComponent } from './SelectBoxComponent'
|
||||
|
||||
export type RemoteSelectSearchDataSource<TRequest extends PagedRequest> = (
|
||||
@ -13,7 +14,7 @@ export interface RemoteSelectBoxProps<TRequest extends PagedRequest> {
|
||||
dataSource: RemoteSelectSearchDataSource<TRequest>
|
||||
additionalFilters?: TRequest
|
||||
label: string
|
||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
||||
colspan?: GridColSpan
|
||||
errorText?: string
|
||||
idField?: string
|
||||
labelField?: string
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { Copy, Dices, Eye, EyeOff } from 'lucide-react'
|
||||
import { ChangeEvent, FC, useRef, useState } from 'react'
|
||||
import type { GridColSpan } from '../../functions/tailwind'
|
||||
import { FieldContainer } from './FieldContainer'
|
||||
import { getInputClasses } from './editorStyles'
|
||||
|
||||
@ -7,7 +8,7 @@ export type SecretDataSource = () => Promise<string | undefined>
|
||||
|
||||
export interface SecretComponentProps {
|
||||
label: string
|
||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
||||
colspan?: GridColSpan
|
||||
errorText?: string
|
||||
value?: string
|
||||
onChange?: (e: ChangeEvent<HTMLInputElement>) => void
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import debounce from 'lodash/debounce'
|
||||
import { CircleX } from 'lucide-react'
|
||||
import { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import type { GridColSpan } from '../../functions/tailwind'
|
||||
import { FieldContainer } from './FieldContainer'
|
||||
import { getInputClasses } from './editorStyles'
|
||||
|
||||
@ -11,7 +12,7 @@ export interface SelectBoxComponentOption {
|
||||
|
||||
interface SelectBoxComponentProps {
|
||||
label: string
|
||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
||||
colspan?: GridColSpan
|
||||
errorText?: string
|
||||
options?: SelectBoxComponentOption[]
|
||||
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
import { Eye, EyeOff } from 'lucide-react'
|
||||
import { ChangeEvent, FC, useEffect, useRef, useState } from 'react'
|
||||
import type { GridColSpan } from '../../functions/tailwind'
|
||||
import { FieldContainer } from './FieldContainer'
|
||||
import { getInputClasses } from './editorStyles'
|
||||
|
||||
interface TextBoxComponentProps {
|
||||
label: string
|
||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
||||
colspan?: GridColSpan
|
||||
errorText?: string
|
||||
value?: string | number
|
||||
onChange?: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import React, { useState, ReactNode } from 'react'
|
||||
import type { GridColSpan } from '../../functions/tailwind'
|
||||
import { FieldContainer } from './FieldContainer'
|
||||
|
||||
interface TreeNode {
|
||||
id: string;
|
||||
@ -11,7 +13,7 @@ interface TreeNode {
|
||||
interface TreeViewProps {
|
||||
data: TreeNode[];
|
||||
label?: string;
|
||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
||||
colspan?: GridColSpan;
|
||||
}
|
||||
|
||||
const TreeViewComponent: React.FC<TreeViewProps> = (props) => {
|
||||
@ -75,10 +77,9 @@ const TreeViewComponent: React.FC<TreeViewProps> = (props) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`col-span-${colspan}`}>
|
||||
{label && <label className={'block text-gray-700 text-sm font-bold mb-2'}>{label}</label>}
|
||||
<FieldContainer colspan={colspan} label={label}>
|
||||
<div className={'border p-4 rounded-md'}>{renderTree(data)}</div>
|
||||
</div>
|
||||
</FieldContainer>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,80 +0,0 @@
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
/** Column definition for dense list tables (sortable headers, optional filters). */
|
||||
export interface VaultStyleColumn<T> {
|
||||
id: string
|
||||
header: string
|
||||
/** Optional width hint, e.g. w-24, w-1/4 */
|
||||
widthClass?: string
|
||||
headerClassName?: string
|
||||
cellClassName?: string
|
||||
cell: (row: T) => ReactNode
|
||||
}
|
||||
|
||||
export interface VaultStyleDataTableProps<T> {
|
||||
columns: VaultStyleColumn<T>[]
|
||||
rows: T[]
|
||||
rowKey: (row: T) => string
|
||||
loading?: boolean
|
||||
emptyMessage: string
|
||||
/** When true, no outer card chrome (use inside {@link VaultStyleListSection}). */
|
||||
embedded?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Dense bordered table: neutral header bar, row dividers, hover.
|
||||
*/
|
||||
function VaultStyleDataTable<T>(props: VaultStyleDataTableProps<T>) {
|
||||
const { columns, rows, rowKey, loading, emptyMessage, embedded } = props
|
||||
|
||||
const wrapClass = embedded
|
||||
? 'overflow-x-auto bg-white'
|
||||
: 'overflow-x-auto overflow-y-hidden rounded-md border border-neutral-200 bg-white shadow-sm'
|
||||
|
||||
return (
|
||||
<div className={wrapClass}>
|
||||
<table className={'w-full min-w-[32rem] table-fixed border-collapse text-left text-sm'}>
|
||||
<thead>
|
||||
<tr className={'border-b border-neutral-200 bg-neutral-100'}>
|
||||
{columns.map((col) => (
|
||||
<th
|
||||
key={col.id}
|
||||
scope={'col'}
|
||||
className={`px-3 py-2.5 text-xs font-semibold uppercase tracking-wide text-neutral-600 ${col.widthClass ?? ''} ${col.headerClassName ?? ''}`}
|
||||
>
|
||||
{col.header}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className={'divide-y divide-neutral-200'}>
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className={'px-3 py-10 text-center text-neutral-500'}>
|
||||
Loading…
|
||||
</td>
|
||||
</tr>
|
||||
) : rows.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className={'px-3 py-10 text-center text-neutral-500'}>
|
||||
{emptyMessage}
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
rows.map((row) => (
|
||||
<tr key={rowKey(row)} className={'transition-colors hover:bg-neutral-50'}>
|
||||
{columns.map((col) => (
|
||||
<td key={col.id} className={`px-3 py-2.5 align-middle text-neutral-900 ${col.cellClassName ?? ''}`}>
|
||||
{col.cell(row)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export { VaultStyleDataTable }
|
||||
@ -1,55 +0,0 @@
|
||||
import { FC } from 'react'
|
||||
import { ButtonComponent } from '../editors'
|
||||
|
||||
export interface VaultStyleListFooterProps {
|
||||
pageNumber: number
|
||||
pageSize: number
|
||||
totalRecords: number
|
||||
loading: boolean
|
||||
onPrevious: () => void
|
||||
onNext: () => void
|
||||
}
|
||||
|
||||
/** Footer: “Showing a–b of n” + prev/next for paged lists. */
|
||||
const VaultStyleListFooter: FC<VaultStyleListFooterProps> = (props) => {
|
||||
const { pageNumber, pageSize, totalRecords, loading, onPrevious, onNext } = props
|
||||
|
||||
const size = Math.max(1, pageSize)
|
||||
const total = Math.max(0, totalRecords)
|
||||
const from = total === 0 ? 0 : (pageNumber - 1) * size + 1
|
||||
const to = total === 0 ? 0 : Math.min(pageNumber * size, total)
|
||||
const totalPages = Math.max(1, Math.ceil(total / size))
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
'mt-0 flex flex-col gap-3 border-t border-neutral-200 bg-neutral-50 px-3 py-3 sm:flex-row sm:items-center sm:justify-between'
|
||||
}
|
||||
>
|
||||
<p className={'text-sm text-neutral-600'}>
|
||||
Showing <span className={'font-medium text-neutral-800'}>{from}</span>–
|
||||
<span className={'font-medium text-neutral-800'}>{to}</span> of{' '}
|
||||
<span className={'font-medium text-neutral-800'}>{total}</span>
|
||||
<span className={'ml-2 text-neutral-400'}>
|
||||
(page {pageNumber} of {totalPages})
|
||||
</span>
|
||||
</p>
|
||||
<div className={'flex flex-wrap items-center gap-2'}>
|
||||
<ButtonComponent
|
||||
label={'Previous'}
|
||||
buttonHierarchy={'secondary'}
|
||||
disabled={loading || pageNumber <= 1}
|
||||
onClick={onPrevious}
|
||||
/>
|
||||
<ButtonComponent
|
||||
label={'Next'}
|
||||
buttonHierarchy={'secondary'}
|
||||
disabled={loading || pageNumber >= totalPages || total === 0}
|
||||
onClick={onNext}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export { VaultStyleListFooter }
|
||||
@ -1,33 +0,0 @@
|
||||
import { FC, ReactNode } from 'react'
|
||||
|
||||
/** Wraps filter toolbar + table + footer in one bordered panel (dense admin list layout). */
|
||||
interface VaultStyleListSectionProps {
|
||||
title?: string
|
||||
description?: string
|
||||
toolbar: ReactNode
|
||||
/** Optional second strip (e.g. create form) below filters. */
|
||||
secondaryToolbar?: ReactNode
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
const VaultStyleListSection: FC<VaultStyleListSectionProps> = (props) => {
|
||||
const { title, description, toolbar, secondaryToolbar, children } = props
|
||||
|
||||
return (
|
||||
<div className={'rounded-lg border border-neutral-200 bg-white shadow-sm'}>
|
||||
{(title || description) && (
|
||||
<div className={'border-b border-neutral-200 px-4 py-3'}>
|
||||
{title ? <h2 className={'text-base font-semibold text-neutral-900'}>{title}</h2> : null}
|
||||
{description ? <p className={'mt-1 text-sm text-neutral-600'}>{description}</p> : null}
|
||||
</div>
|
||||
)}
|
||||
<div className={'border-b border-neutral-200 bg-neutral-50 px-4 py-3'}>{toolbar}</div>
|
||||
{secondaryToolbar ? (
|
||||
<div className={'border-b border-neutral-200 bg-white px-4 py-3'}>{secondaryToolbar}</div>
|
||||
) : null}
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export { VaultStyleListSection }
|
||||
@ -1,4 +0,0 @@
|
||||
export { VaultStyleDataTable } from './VaultStyleDataTable'
|
||||
export type { VaultStyleColumn } from './VaultStyleDataTable'
|
||||
export { VaultStyleListFooter } from './VaultStyleListFooter'
|
||||
export { VaultStyleListSection } from './VaultStyleListSection'
|
||||
2
src/packages/components/src/functions/index.ts
Normal file
2
src/packages/components/src/functions/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export { colSpanClass } from './tailwind'
|
||||
export type { GridColSpan } from './tailwind'
|
||||
@ -0,0 +1,22 @@
|
||||
/** Grid column span for 12-column form layouts (static classes for Tailwind). */
|
||||
export type GridColSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
||||
|
||||
const COL_SPAN_CLASS: Record<GridColSpan, string> = {
|
||||
1: 'col-span-1',
|
||||
2: 'col-span-2',
|
||||
3: 'col-span-3',
|
||||
4: 'col-span-4',
|
||||
5: 'col-span-5',
|
||||
6: 'col-span-6',
|
||||
7: 'col-span-7',
|
||||
8: 'col-span-8',
|
||||
9: 'col-span-9',
|
||||
10: 'col-span-10',
|
||||
11: 'col-span-11',
|
||||
12: 'col-span-12',
|
||||
}
|
||||
|
||||
/** Resolves `colspan` to a Tailwind class (dynamic ``col-span-${n}`` is not detected by Tailwind). */
|
||||
export function colSpanClass (colspan?: GridColSpan, fallback = 'w-full'): string {
|
||||
return colspan ? COL_SPAN_CLASS[colspan] : fallback
|
||||
}
|
||||
2
src/packages/components/src/functions/tailwind/index.ts
Normal file
2
src/packages/components/src/functions/tailwind/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export { colSpanClass } from './gridColSpan'
|
||||
export type { GridColSpan } from './gridColSpan'
|
||||
@ -27,8 +27,6 @@ export type {
|
||||
} from './components/editors/RemoteSelectBoxComponent'
|
||||
export { addToast } from './components/Toast/addToast'
|
||||
export { Toast as ToastContainer } from './components/Toast'
|
||||
export { VaultStyleDataTable, VaultStyleListFooter, VaultStyleListSection } from './components/list'
|
||||
export type { VaultStyleColumn } from './components/list'
|
||||
export { EntityScopesSummary } from './components/Scopes'
|
||||
export type { EntityScopesSummaryProps } from './components/Scopes'
|
||||
export { Layout } from './components/Layout'
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@maks-it.com/webui-contracts",
|
||||
"version": "0.2.0",
|
||||
"version": "0.3.0",
|
||||
"description": "Shared TypeScript contracts for MaksIT WebUI apps",
|
||||
"type": "module",
|
||||
"main": "./dist/index.cjs",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@maks-it.com/webui-core",
|
||||
"version": "0.2.0",
|
||||
"version": "0.3.0",
|
||||
"description": "Shared utilities and hooks for MaksIT WebUI apps",
|
||||
"type": "module",
|
||||
"main": "./dist/index.cjs",
|
||||
@ -34,7 +34,7 @@
|
||||
"directory": "src/packages/core"
|
||||
},
|
||||
"dependencies": {
|
||||
"@maks-it.com/webui-contracts": "^0.2.0",
|
||||
"@maks-it.com/webui-contracts": "^0.3.0",
|
||||
"date-fns": "^4.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
349
src/public/mockServiceWorker.js
Normal file
349
src/public/mockServiceWorker.js
Normal file
@ -0,0 +1,349 @@
|
||||
/* eslint-disable */
|
||||
/* tslint:disable */
|
||||
|
||||
/**
|
||||
* Mock Service Worker.
|
||||
* @see https://github.com/mswjs/msw
|
||||
* - Please do NOT modify this file.
|
||||
*/
|
||||
|
||||
const PACKAGE_VERSION = '2.14.6'
|
||||
const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
|
||||
const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
|
||||
const activeClientIds = new Set()
|
||||
|
||||
addEventListener('install', function () {
|
||||
self.skipWaiting()
|
||||
})
|
||||
|
||||
addEventListener('activate', function (event) {
|
||||
event.waitUntil(self.clients.claim())
|
||||
})
|
||||
|
||||
addEventListener('message', async function (event) {
|
||||
const clientId = Reflect.get(event.source || {}, 'id')
|
||||
|
||||
if (!clientId || !self.clients) {
|
||||
return
|
||||
}
|
||||
|
||||
const client = await self.clients.get(clientId)
|
||||
|
||||
if (!client) {
|
||||
return
|
||||
}
|
||||
|
||||
const allClients = await self.clients.matchAll({
|
||||
type: 'window',
|
||||
})
|
||||
|
||||
switch (event.data) {
|
||||
case 'KEEPALIVE_REQUEST': {
|
||||
sendToClient(client, {
|
||||
type: 'KEEPALIVE_RESPONSE',
|
||||
})
|
||||
break
|
||||
}
|
||||
|
||||
case 'INTEGRITY_CHECK_REQUEST': {
|
||||
sendToClient(client, {
|
||||
type: 'INTEGRITY_CHECK_RESPONSE',
|
||||
payload: {
|
||||
packageVersion: PACKAGE_VERSION,
|
||||
checksum: INTEGRITY_CHECKSUM,
|
||||
},
|
||||
})
|
||||
break
|
||||
}
|
||||
|
||||
case 'MOCK_ACTIVATE': {
|
||||
activeClientIds.add(clientId)
|
||||
|
||||
sendToClient(client, {
|
||||
type: 'MOCKING_ENABLED',
|
||||
payload: {
|
||||
client: {
|
||||
id: client.id,
|
||||
frameType: client.frameType,
|
||||
},
|
||||
},
|
||||
})
|
||||
break
|
||||
}
|
||||
|
||||
case 'CLIENT_CLOSED': {
|
||||
activeClientIds.delete(clientId)
|
||||
|
||||
const remainingClients = allClients.filter((client) => {
|
||||
return client.id !== clientId
|
||||
})
|
||||
|
||||
// Unregister itself when there are no more clients
|
||||
if (remainingClients.length === 0) {
|
||||
self.registration.unregister()
|
||||
}
|
||||
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
addEventListener('fetch', function (event) {
|
||||
const requestInterceptedAt = Date.now()
|
||||
|
||||
// Bypass navigation requests.
|
||||
if (event.request.mode === 'navigate') {
|
||||
return
|
||||
}
|
||||
|
||||
// Opening the DevTools triggers the "only-if-cached" request
|
||||
// that cannot be handled by the worker. Bypass such requests.
|
||||
if (
|
||||
event.request.cache === 'only-if-cached' &&
|
||||
event.request.mode !== 'same-origin'
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
// Bypass all requests when there are no active clients.
|
||||
// Prevents the self-unregistered worked from handling requests
|
||||
// after it's been terminated (still remains active until the next reload).
|
||||
if (activeClientIds.size === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
const requestId = crypto.randomUUID()
|
||||
event.respondWith(handleRequest(event, requestId, requestInterceptedAt))
|
||||
})
|
||||
|
||||
/**
|
||||
* @param {FetchEvent} event
|
||||
* @param {string} requestId
|
||||
* @param {number} requestInterceptedAt
|
||||
*/
|
||||
async function handleRequest(event, requestId, requestInterceptedAt) {
|
||||
const client = await resolveMainClient(event)
|
||||
const requestCloneForEvents = event.request.clone()
|
||||
const response = await getResponse(
|
||||
event,
|
||||
client,
|
||||
requestId,
|
||||
requestInterceptedAt,
|
||||
)
|
||||
|
||||
// Send back the response clone for the "response:*" life-cycle events.
|
||||
// Ensure MSW is active and ready to handle the message, otherwise
|
||||
// this message will pend indefinitely.
|
||||
if (client && activeClientIds.has(client.id)) {
|
||||
const serializedRequest = await serializeRequest(requestCloneForEvents)
|
||||
|
||||
// Clone the response so both the client and the library could consume it.
|
||||
const responseClone = response.clone()
|
||||
|
||||
sendToClient(
|
||||
client,
|
||||
{
|
||||
type: 'RESPONSE',
|
||||
payload: {
|
||||
isMockedResponse: IS_MOCKED_RESPONSE in response,
|
||||
request: {
|
||||
id: requestId,
|
||||
...serializedRequest,
|
||||
},
|
||||
response: {
|
||||
type: responseClone.type,
|
||||
status: responseClone.status,
|
||||
statusText: responseClone.statusText,
|
||||
headers: Object.fromEntries(responseClone.headers.entries()),
|
||||
body: responseClone.body,
|
||||
},
|
||||
},
|
||||
},
|
||||
responseClone.body ? [serializedRequest.body, responseClone.body] : [],
|
||||
)
|
||||
}
|
||||
|
||||
return response
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolve the main client for the given event.
|
||||
* Client that issues a request doesn't necessarily equal the client
|
||||
* that registered the worker. It's with the latter the worker should
|
||||
* communicate with during the response resolving phase.
|
||||
* @param {FetchEvent} event
|
||||
* @returns {Promise<Client | undefined>}
|
||||
*/
|
||||
async function resolveMainClient(event) {
|
||||
const client = await self.clients.get(event.clientId)
|
||||
|
||||
if (activeClientIds.has(event.clientId)) {
|
||||
return client
|
||||
}
|
||||
|
||||
if (client?.frameType === 'top-level') {
|
||||
return client
|
||||
}
|
||||
|
||||
const allClients = await self.clients.matchAll({
|
||||
type: 'window',
|
||||
})
|
||||
|
||||
return allClients
|
||||
.filter((client) => {
|
||||
// Get only those clients that are currently visible.
|
||||
return client.visibilityState === 'visible'
|
||||
})
|
||||
.find((client) => {
|
||||
// Find the client ID that's recorded in the
|
||||
// set of clients that have registered the worker.
|
||||
return activeClientIds.has(client.id)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {FetchEvent} event
|
||||
* @param {Client | undefined} client
|
||||
* @param {string} requestId
|
||||
* @param {number} requestInterceptedAt
|
||||
* @returns {Promise<Response>}
|
||||
*/
|
||||
async function getResponse(event, client, requestId, requestInterceptedAt) {
|
||||
// Clone the request because it might've been already used
|
||||
// (i.e. its body has been read and sent to the client).
|
||||
const requestClone = event.request.clone()
|
||||
|
||||
function passthrough() {
|
||||
// Cast the request headers to a new Headers instance
|
||||
// so the headers can be manipulated with.
|
||||
const headers = new Headers(requestClone.headers)
|
||||
|
||||
// Remove the "accept" header value that marked this request as passthrough.
|
||||
// This prevents request alteration and also keeps it compliant with the
|
||||
// user-defined CORS policies.
|
||||
const acceptHeader = headers.get('accept')
|
||||
if (acceptHeader) {
|
||||
const values = acceptHeader.split(',').map((value) => value.trim())
|
||||
const filteredValues = values.filter(
|
||||
(value) => value !== 'msw/passthrough',
|
||||
)
|
||||
|
||||
if (filteredValues.length > 0) {
|
||||
headers.set('accept', filteredValues.join(', '))
|
||||
} else {
|
||||
headers.delete('accept')
|
||||
}
|
||||
}
|
||||
|
||||
return fetch(requestClone, { headers })
|
||||
}
|
||||
|
||||
// Bypass mocking when the client is not active.
|
||||
if (!client) {
|
||||
return passthrough()
|
||||
}
|
||||
|
||||
// Bypass initial page load requests (i.e. static assets).
|
||||
// The absence of the immediate/parent client in the map of the active clients
|
||||
// means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
|
||||
// and is not ready to handle requests.
|
||||
if (!activeClientIds.has(client.id)) {
|
||||
return passthrough()
|
||||
}
|
||||
|
||||
// Notify the client that a request has been intercepted.
|
||||
const serializedRequest = await serializeRequest(event.request)
|
||||
const clientMessage = await sendToClient(
|
||||
client,
|
||||
{
|
||||
type: 'REQUEST',
|
||||
payload: {
|
||||
id: requestId,
|
||||
interceptedAt: requestInterceptedAt,
|
||||
...serializedRequest,
|
||||
},
|
||||
},
|
||||
[serializedRequest.body],
|
||||
)
|
||||
|
||||
switch (clientMessage.type) {
|
||||
case 'MOCK_RESPONSE': {
|
||||
return respondWithMock(clientMessage.data)
|
||||
}
|
||||
|
||||
case 'PASSTHROUGH': {
|
||||
return passthrough()
|
||||
}
|
||||
}
|
||||
|
||||
return passthrough()
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Client} client
|
||||
* @param {any} message
|
||||
* @param {Array<Transferable>} transferrables
|
||||
* @returns {Promise<any>}
|
||||
*/
|
||||
function sendToClient(client, message, transferrables = []) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const channel = new MessageChannel()
|
||||
|
||||
channel.port1.onmessage = (event) => {
|
||||
if (event.data && event.data.error) {
|
||||
return reject(event.data.error)
|
||||
}
|
||||
|
||||
resolve(event.data)
|
||||
}
|
||||
|
||||
client.postMessage(message, [
|
||||
channel.port2,
|
||||
...transferrables.filter(Boolean),
|
||||
])
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Response} response
|
||||
* @returns {Response}
|
||||
*/
|
||||
function respondWithMock(response) {
|
||||
// Setting response status code to 0 is a no-op.
|
||||
// However, when responding with a "Response.error()", the produced Response
|
||||
// instance will have status code set to 0. Since it's not possible to create
|
||||
// a Response instance with status code 0, handle that use-case separately.
|
||||
if (response.status === 0) {
|
||||
return Response.error()
|
||||
}
|
||||
|
||||
const mockedResponse = new Response(response.body, response)
|
||||
|
||||
Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
|
||||
value: true,
|
||||
enumerable: true,
|
||||
})
|
||||
|
||||
return mockedResponse
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Request} request
|
||||
*/
|
||||
async function serializeRequest(request) {
|
||||
return {
|
||||
url: request.url,
|
||||
mode: request.mode,
|
||||
method: request.method,
|
||||
headers: Object.fromEntries(request.headers.entries()),
|
||||
cache: request.cache,
|
||||
credentials: request.credentials,
|
||||
destination: request.destination,
|
||||
integrity: request.integrity,
|
||||
redirect: request.redirect,
|
||||
referrer: request.referrer,
|
||||
referrerPolicy: request.referrerPolicy,
|
||||
body: await request.arrayBuffer(),
|
||||
keepalive: request.keepalive,
|
||||
}
|
||||
}
|
||||
103
src/stories/README.md
Normal file
103
src/stories/README.md
Normal file
@ -0,0 +1,103 @@
|
||||
# Storybook stories
|
||||
|
||||
Stories are **not** published with `@maks-it.com/webui-components`. They live here so the library package stays free of Storybook-only code.
|
||||
|
||||
## Layout (mirrors package source)
|
||||
|
||||
`stories/components/` maps one-to-one to `packages/components/src/components/`:
|
||||
|
||||
```
|
||||
packages/components/src/components/ stories/components/
|
||||
├── editors/ ├── editors/
|
||||
│ └── *.tsx │ └── *.stories.tsx
|
||||
├── Toast/ ├── Toast/
|
||||
├── DataTable/ ├── DataTable/
|
||||
├── FormLayout/ ├── FormLayout/
|
||||
│ │ ├── FormContainer.stories.tsx
|
||||
│ │ ├── FormHeader.stories.tsx
|
||||
│ │ ├── FormContent.stories.tsx
|
||||
│ │ └── FormFooter.stories.tsx
|
||||
├── Layout/ ├── Layout/
|
||||
│ └── SideMenu/ │ └── SideMenu/
|
||||
├── Scopes/ ├── Scopes/
|
||||
├── Offcanvas.tsx ├── Offcanvas.stories.tsx
|
||||
└── LazyLoadTable.tsx └── LazyLoadTable.stories.tsx
|
||||
```
|
||||
|
||||
Use the **same folder names** as in the package (`Toast`, not `feedback`; `list`, not `List`). Storybook sidebar titles use the same path: `components/editors/Button`, `components/Toast`, etc.
|
||||
|
||||
## Imports
|
||||
|
||||
Use the `@webui/*` aliases (configured in `.storybook/main.ts`):
|
||||
|
||||
```ts
|
||||
import { ButtonComponent } from '@webui/components/components/editors/ButtonComponent'
|
||||
import { Toast } from '@webui/components/components/Toast'
|
||||
import { withControlledValue } from '../../helpers/controlledField'
|
||||
```
|
||||
|
||||
From `stories/components/<folder>/`, helpers are always `../../helpers/`.
|
||||
|
||||
## Conventions
|
||||
|
||||
| Topic | Practice |
|
||||
|--------|----------|
|
||||
| **Folder** | Same name as under `packages/components/src/components/` |
|
||||
| **File name** | Same as component: `ButtonComponent.stories.tsx` |
|
||||
| **Title** | `components/<folder>/<StoryName>` — mirrors the folder path |
|
||||
| **Autodocs** | `tags: ['autodocs']` on meta |
|
||||
| **Controlled fields** | `stories/helpers/controlledField` or `controlledEditors` |
|
||||
|
||||
## Adding a story
|
||||
|
||||
1. Create the folder under `stories/components/` if it does not exist yet (match the package).
|
||||
2. Add `<Component>.stories.tsx` in that folder.
|
||||
3. Run `npm run storybook` from `src/`.
|
||||
|
||||
## Testing
|
||||
|
||||
Storybook **component tests** run stories as Vitest tests in a real browser (Chromium via Playwright).
|
||||
|
||||
### In the Storybook UI
|
||||
|
||||
1. Start Storybook: `npm run storybook`
|
||||
2. Use the **testing widget** at the bottom of the sidebar to run all tests, or use a story’s context menu to run tests for one story/component.
|
||||
3. Enable **Accessibility** in the widget to include a11y checks (requires `@storybook/addon-a11y`, already configured).
|
||||
4. Enable **Coverage** in the widget to generate a coverage report for component source under `packages/components/src/`.
|
||||
5. Stories with **`play` functions** show results in the **Interactions** panel.
|
||||
|
||||
### From the CLI
|
||||
|
||||
| Command | Purpose |
|
||||
|---------|---------|
|
||||
| `npm run test-storybook` | Run all story tests once (CI-friendly) |
|
||||
| `npm run test-storybook:watch` | Watch mode while developing stories |
|
||||
| `npm run test-storybook:coverage` | Run tests + V8 coverage report (`coverage/storybook/`) |
|
||||
|
||||
### Interaction tests (`play`)
|
||||
|
||||
Use `play` for non-obvious behavior (clicks, async data, a11y state). Import `expect` and `fn` from `storybook/test`; use `canvas`, `userEvent`, and `args` from the play callback:
|
||||
|
||||
```tsx
|
||||
export const Disabled: Story = {
|
||||
args: { label: 'Save', disabled: true, onClick: fn() },
|
||||
play: async ({ args, canvas, userEvent }) => {
|
||||
const button = canvas.getByRole('button', { name: /save/i })
|
||||
await userEvent.click(button)
|
||||
await expect(button).toBeDisabled()
|
||||
await expect(args.onClick).not.toHaveBeenCalled()
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
See `components/editors/ButtonComponent.stories.tsx` for examples.
|
||||
|
||||
### Visual tests (optional)
|
||||
|
||||
[Chromatic](https://www.chromatic.com/) visual regression tests are **not** installed by default (requires a Chromatic account). To add them:
|
||||
|
||||
```bash
|
||||
npx storybook add @chromatic-com/storybook
|
||||
```
|
||||
|
||||
Then use the **Visual tests** section in the testing widget.
|
||||
83
src/stories/components/DataTable/DataTable.stories.tsx
Normal file
83
src/stories/components/DataTable/DataTable.stories.tsx
Normal file
@ -0,0 +1,83 @@
|
||||
import type { JSX } from 'react'
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { fn } from 'storybook/test'
|
||||
import { DataTableClientSide } from './DataTableClientSide'
|
||||
import { createSampleColumns, createSamplePagedResponse, SampleDataTable } from './shared'
|
||||
|
||||
const tableHeightDecorator = (Story: () => JSX.Element) => (
|
||||
<div className="h-[480px] w-full max-w-5xl">
|
||||
<Story />
|
||||
</div>
|
||||
)
|
||||
|
||||
const meta = {
|
||||
title: 'components/DataTable/DataTable',
|
||||
component: SampleDataTable,
|
||||
tags: ['autodocs'],
|
||||
decorators: [tableHeightDecorator],
|
||||
args: {
|
||||
columns: createSampleColumns(),
|
||||
onFilterChange: fn(),
|
||||
onPreviousPage: fn(),
|
||||
onNextPage: fn(),
|
||||
},
|
||||
} satisfies Meta<typeof SampleDataTable>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
rawd: createSamplePagedResponse(),
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'Filter and pagination callbacks are spies only — the grid does not update unless the parent refetches `rawd` (see **ClientSideInteractive**).',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
/**
|
||||
* Filters and Previous/Next pagination update the grid (Storybook demo).
|
||||
* Apps normally refetch `rawd` from the API in `onFilterChange` / `onPreviousPage` / `onNextPage`.
|
||||
*/
|
||||
export const ClientSideInteractive: Story = {
|
||||
render: () => <DataTableClientSide />,
|
||||
}
|
||||
|
||||
export const Empty: Story = {
|
||||
args: {
|
||||
rawd: createSamplePagedResponse({
|
||||
items: [],
|
||||
totalCount: 0,
|
||||
totalPages: 1,
|
||||
}),
|
||||
},
|
||||
}
|
||||
|
||||
export const WithPagination: Story = {
|
||||
render: () => <DataTableClientSide />,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
'Same as **ClientSideInteractive**: 2 rows per page, 8 total rows — use Previous/Next or scroll the grid to the edges.',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const WithRowActions: Story = {
|
||||
args: {
|
||||
rawd: createSamplePagedResponse(),
|
||||
allowAddRow: () => true,
|
||||
onAddRow: fn(),
|
||||
allowEditRow: () => true,
|
||||
onEditRow: fn(),
|
||||
allowDeleteRow: () => true,
|
||||
onDeleteRow: fn(),
|
||||
},
|
||||
}
|
||||
69
src/stories/components/DataTable/DataTableClientSide.tsx
Normal file
69
src/stories/components/DataTable/DataTableClientSide.tsx
Normal file
@ -0,0 +1,69 @@
|
||||
import { useCallback, useMemo, useState } from 'react'
|
||||
import { extractPropFilter } from '@webui/core'
|
||||
import { DataTable } from '@webui/components/components/DataTable'
|
||||
import {
|
||||
buildPagedView,
|
||||
createSampleColumns,
|
||||
sampleRows,
|
||||
type SampleRow,
|
||||
} from './shared'
|
||||
|
||||
function rowMatchesQuery (row: SampleRow, query: string): boolean {
|
||||
const name = extractPropFilter(query, 'Name')
|
||||
const email = extractPropFilter(query, 'Email')
|
||||
const role = extractPropFilter(query, 'Role')
|
||||
const createdAt = extractPropFilter(query, 'CreatedAt')
|
||||
|
||||
if (name && !row.name.toLowerCase().includes(name.toLowerCase()))
|
||||
return false
|
||||
if (email && !row.email.toLowerCase().includes(email.toLowerCase()))
|
||||
return false
|
||||
if (role && !row.role.toLowerCase().includes(role.toLowerCase()))
|
||||
return false
|
||||
if (createdAt && !row.createdAt.includes(createdAt))
|
||||
return false
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* Storybook-only wrapper: filters and pagination update `rawd` client-side.
|
||||
* In product apps, callbacks usually trigger API refetches instead.
|
||||
*/
|
||||
export function DataTableClientSide () {
|
||||
const [filterQuery, setFilterQuery] = useState('')
|
||||
const [pageNumber, setPageNumber] = useState(1)
|
||||
|
||||
const filteredRows = useMemo(
|
||||
() => sampleRows.filter((row) => rowMatchesQuery(row, filterQuery)),
|
||||
[filterQuery],
|
||||
)
|
||||
|
||||
const rawd = useMemo(
|
||||
() => buildPagedView(filteredRows, pageNumber),
|
||||
[filteredRows, pageNumber],
|
||||
)
|
||||
|
||||
const handleFilterChange = useCallback((filters: Record<string, string>) => {
|
||||
setFilterQuery(filters.filters ?? '')
|
||||
setPageNumber(1)
|
||||
}, [])
|
||||
|
||||
const handlePreviousPage = useCallback((page: number) => {
|
||||
setPageNumber(page)
|
||||
}, [])
|
||||
|
||||
const handleNextPage = useCallback((page: number) => {
|
||||
setPageNumber(page)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<DataTable<SampleRow>
|
||||
rawd={rawd}
|
||||
columns={createSampleColumns()}
|
||||
onFilterChange={handleFilterChange}
|
||||
onPreviousPage={handlePreviousPage}
|
||||
onNextPage={handleNextPage}
|
||||
/>
|
||||
)
|
||||
}
|
||||
54
src/stories/components/DataTable/DataTableFilter.stories.tsx
Normal file
54
src/stories/components/DataTable/DataTableFilter.stories.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { fn } from 'storybook/test'
|
||||
import { DataTableFilter } from '@webui/components/components/DataTable'
|
||||
|
||||
const meta = {
|
||||
title: 'components/DataTable/DataTableFilter',
|
||||
component: DataTableFilter,
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
columnId: 'name',
|
||||
accessorKey: 'name',
|
||||
onFilterChange: fn(),
|
||||
},
|
||||
} satisfies Meta<typeof DataTableFilter>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Normal: Story = {
|
||||
args: {
|
||||
type: 'normal',
|
||||
},
|
||||
}
|
||||
|
||||
export const WithValue: Story = {
|
||||
args: {
|
||||
type: 'normal',
|
||||
value: { value: 'vault', operator: 'contains' },
|
||||
},
|
||||
}
|
||||
|
||||
export const Disabled: Story = {
|
||||
args: {
|
||||
type: 'normal',
|
||||
disabled: true,
|
||||
value: { value: 'read-only filter', operator: '=' },
|
||||
},
|
||||
}
|
||||
|
||||
const mockRemoteFilterDataSource = async () => {
|
||||
await new Promise((resolve) => setTimeout(resolve, 300))
|
||||
return [
|
||||
{ id: 'admin', name: 'Admin' },
|
||||
{ id: 'editor', name: 'Editor' },
|
||||
{ id: 'viewer', name: 'Viewer' },
|
||||
]
|
||||
}
|
||||
|
||||
export const Remote: Story = {
|
||||
args: {
|
||||
type: 'remote',
|
||||
dataSource: mockRemoteFilterDataSource,
|
||||
},
|
||||
}
|
||||
46
src/stories/components/DataTable/DataTableLabel.stories.tsx
Normal file
46
src/stories/components/DataTable/DataTableLabel.stories.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { DataTableLabel } from '@webui/components/components/DataTable'
|
||||
|
||||
const meta = {
|
||||
title: 'components/DataTable/DataTableLabel',
|
||||
component: DataTableLabel,
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof DataTableLabel>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const String: Story = {
|
||||
args: {
|
||||
type: 'normal',
|
||||
value: 'Active certificate',
|
||||
},
|
||||
}
|
||||
|
||||
export const Date: Story = {
|
||||
args: {
|
||||
type: 'normal',
|
||||
dataType: 'date',
|
||||
value: '2026-05-25T14:30:00Z',
|
||||
},
|
||||
}
|
||||
|
||||
export const Empty: Story = {
|
||||
args: {
|
||||
type: 'normal',
|
||||
value: '',
|
||||
},
|
||||
}
|
||||
|
||||
const mockRemoteLabelDataSource = async () => {
|
||||
await new Promise((resolve) => setTimeout(resolve, 300))
|
||||
return { id: '42', displayName: 'Vault production' }
|
||||
}
|
||||
|
||||
export const Remote: Story = {
|
||||
args: {
|
||||
type: 'remote',
|
||||
accessorKey: 'displayName',
|
||||
dataSource: mockRemoteLabelDataSource,
|
||||
},
|
||||
}
|
||||
186
src/stories/components/DataTable/shared.tsx
Normal file
186
src/stories/components/DataTable/shared.tsx
Normal file
@ -0,0 +1,186 @@
|
||||
import type { PagedResponse } from '@webui/contracts/PagedResponse'
|
||||
import {
|
||||
createColumn,
|
||||
createColumns,
|
||||
DataTable,
|
||||
DataTableFilter,
|
||||
DataTableLabel,
|
||||
type DataTableColumn,
|
||||
type DataTableProps,
|
||||
} from '@webui/components/components/DataTable'
|
||||
|
||||
export type SampleRow = {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
role: string
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
export const sampleRows: SampleRow[] = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Ada Lovelace',
|
||||
email: 'ada@example.com',
|
||||
role: 'Admin',
|
||||
createdAt: '2026-01-15T10:00:00Z',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Grace Hopper',
|
||||
email: 'grace@example.com',
|
||||
role: 'Editor',
|
||||
createdAt: '2026-02-20T14:30:00Z',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Alan Turing',
|
||||
email: 'alan@example.com',
|
||||
role: 'Viewer',
|
||||
createdAt: '2026-03-10T09:15:00Z',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'Katherine Johnson',
|
||||
email: 'katherine@example.com',
|
||||
role: 'Editor',
|
||||
createdAt: '2026-04-05T16:45:00Z',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'Tim Berners-Lee',
|
||||
email: 'tim@example.com',
|
||||
role: 'Admin',
|
||||
createdAt: '2026-05-01T08:00:00Z',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'Linus Torvalds',
|
||||
email: 'linus@example.com',
|
||||
role: 'Editor',
|
||||
createdAt: '2026-05-10T11:00:00Z',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'Margaret Hamilton',
|
||||
email: 'margaret@example.com',
|
||||
role: 'Admin',
|
||||
createdAt: '2026-05-12T13:20:00Z',
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: 'Dennis Ritchie',
|
||||
email: 'dennis@example.com',
|
||||
role: 'Viewer',
|
||||
createdAt: '2026-05-18T09:45:00Z',
|
||||
},
|
||||
]
|
||||
|
||||
/** Page size used in Storybook pagination demos */
|
||||
export const STORYBOOK_PAGE_SIZE = 2
|
||||
|
||||
export function buildPagedView (
|
||||
rows: SampleRow[],
|
||||
pageNumber: number,
|
||||
pageSize: number = STORYBOOK_PAGE_SIZE,
|
||||
): PagedResponse<SampleRow> {
|
||||
const totalCount = rows.length
|
||||
const totalPages = Math.max(1, Math.ceil(totalCount / pageSize))
|
||||
const page = Math.min(Math.max(1, pageNumber), totalPages)
|
||||
const start = (page - 1) * pageSize
|
||||
|
||||
return {
|
||||
items: rows.slice(start, start + pageSize),
|
||||
pageNumber: page,
|
||||
pageSize,
|
||||
totalCount,
|
||||
totalPages,
|
||||
hasPreviousPage: page > 1,
|
||||
hasNextPage: page < totalPages,
|
||||
}
|
||||
}
|
||||
|
||||
export function createSamplePagedResponse (
|
||||
overrides?: Partial<PagedResponse<SampleRow>>,
|
||||
): PagedResponse<SampleRow> {
|
||||
return {
|
||||
items: sampleRows,
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: sampleRows.length,
|
||||
totalPages: 1,
|
||||
hasPreviousPage: false,
|
||||
hasNextPage: false,
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
export function createSampleColumns (): DataTableColumn<SampleRow>[] {
|
||||
return createColumns([
|
||||
createColumn({
|
||||
id: 'name',
|
||||
accessorKey: 'name',
|
||||
header: 'Name',
|
||||
filter: ({ columnId }, onFilterChange) => (
|
||||
<DataTableFilter
|
||||
type="normal"
|
||||
columnId={columnId}
|
||||
accessorKey="name"
|
||||
onFilterChange={onFilterChange}
|
||||
/>
|
||||
),
|
||||
cell: ({ value }) => <span>{String(value ?? '')}</span>,
|
||||
}),
|
||||
createColumn({
|
||||
id: 'email',
|
||||
accessorKey: 'email',
|
||||
header: 'Email',
|
||||
filter: ({ columnId }, onFilterChange) => (
|
||||
<DataTableFilter
|
||||
type="normal"
|
||||
columnId={columnId}
|
||||
accessorKey="email"
|
||||
onFilterChange={onFilterChange}
|
||||
/>
|
||||
),
|
||||
cell: ({ value }) => <span>{String(value ?? '')}</span>,
|
||||
}),
|
||||
createColumn({
|
||||
id: 'role',
|
||||
accessorKey: 'role',
|
||||
header: 'Role',
|
||||
filter: ({ columnId }, onFilterChange) => (
|
||||
<DataTableFilter
|
||||
type="normal"
|
||||
columnId={columnId}
|
||||
accessorKey="role"
|
||||
onFilterChange={onFilterChange}
|
||||
/>
|
||||
),
|
||||
cell: ({ value }) => (
|
||||
<DataTableLabel type="normal" value={String(value ?? '')} />
|
||||
),
|
||||
}),
|
||||
createColumn({
|
||||
id: 'createdAt',
|
||||
accessorKey: 'createdAt',
|
||||
header: 'Created',
|
||||
filter: ({ columnId }, onFilterChange) => (
|
||||
<DataTableFilter
|
||||
type="normal"
|
||||
columnId={columnId}
|
||||
accessorKey="createdAt"
|
||||
onFilterChange={onFilterChange}
|
||||
/>
|
||||
),
|
||||
cell: ({ value }) => (
|
||||
<DataTableLabel type="normal" dataType="date" value={String(value ?? '')} />
|
||||
),
|
||||
}),
|
||||
])
|
||||
}
|
||||
|
||||
/** Typed DataTable for Storybook — fixes generic inference vs `Meta<typeof DataTable>`. */
|
||||
export function SampleDataTable (props: DataTableProps<SampleRow>) {
|
||||
return <DataTable<SampleRow> {...props} />
|
||||
}
|
||||
58
src/stories/components/FormLayout/FormContainer.stories.tsx
Normal file
58
src/stories/components/FormLayout/FormContainer.stories.tsx
Normal file
@ -0,0 +1,58 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { FormContainer } from '@webui/components/components/FormLayout/FormContainer'
|
||||
import { FormContent } from '@webui/components/components/FormLayout/FormContent'
|
||||
import { FormFooter } from '@webui/components/components/FormLayout/FormFooter'
|
||||
import { FormHeader } from '@webui/components/components/FormLayout/FormHeader'
|
||||
import {
|
||||
sampleFooterActions,
|
||||
sampleFooterCustom,
|
||||
sampleFormFields,
|
||||
} from './shared'
|
||||
|
||||
const formShellDecorator = (Story: () => React.JSX.Element) => (
|
||||
<div className="h-[560px] w-full max-w-5xl border border-gray-300 bg-white">
|
||||
<Story />
|
||||
</div>
|
||||
)
|
||||
|
||||
const meta = {
|
||||
title: 'components/FormLayout/FormContainer',
|
||||
component: FormContainer,
|
||||
tags: ['autodocs'],
|
||||
decorators: [formShellDecorator],
|
||||
} satisfies Meta<typeof FormContainer>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
/** Typical edit form: header, scrollable fields, action footer. */
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<FormContainer>
|
||||
<FormHeader>Edit user</FormHeader>
|
||||
<FormContent>{sampleFormFields}</FormContent>
|
||||
<FormFooter {...sampleFooterActions} />
|
||||
</FormContainer>
|
||||
),
|
||||
}
|
||||
|
||||
export const CustomFooter: Story = {
|
||||
render: () => (
|
||||
<FormContainer>
|
||||
<FormHeader>Create certificate</FormHeader>
|
||||
<FormContent>
|
||||
<p className="text-gray-600 mb-4">Form body with a centered footer action bar.</p>
|
||||
{sampleFormFields}
|
||||
</FormContent>
|
||||
<FormFooter>{sampleFooterCustom}</FormFooter>
|
||||
</FormContainer>
|
||||
),
|
||||
}
|
||||
|
||||
export const ContentOnly: Story = {
|
||||
render: () => (
|
||||
<FormContainer>
|
||||
<FormContent>{sampleFormFields}</FormContent>
|
||||
</FormContainer>
|
||||
),
|
||||
}
|
||||
42
src/stories/components/FormLayout/FormContent.stories.tsx
Normal file
42
src/stories/components/FormLayout/FormContent.stories.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import {
|
||||
FormContent,
|
||||
type FormContentProps,
|
||||
} from '@webui/components/components/FormLayout/FormContent'
|
||||
import { sampleFormFields } from './shared'
|
||||
|
||||
const meta = {
|
||||
title: 'components/FormLayout/FormContent',
|
||||
component: FormContent,
|
||||
tags: ['autodocs'],
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div className="flex h-[480px] w-full max-w-5xl flex-col border border-gray-300 bg-white">
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
} satisfies Meta<FormContentProps>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
children: sampleFormFields,
|
||||
},
|
||||
}
|
||||
|
||||
export const WithFlexColumn: Story = {
|
||||
args: {
|
||||
className: 'flex min-h-0 flex-1 flex-col overflow-hidden',
|
||||
children: (
|
||||
<div className="min-h-0 flex-1 overflow-y-auto">
|
||||
{sampleFormFields}
|
||||
<p className="text-sm text-gray-500 mt-4">
|
||||
Use <code>className="flex flex-col overflow-hidden"</code> when a child should fill height (e.g. iframe).
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
}
|
||||
28
src/stories/components/FormLayout/FormFooter.stories.tsx
Normal file
28
src/stories/components/FormLayout/FormFooter.stories.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { FormFooter } from '@webui/components/components/FormLayout/FormFooter'
|
||||
import { sampleFooterActions, sampleFooterCustom } from './shared'
|
||||
|
||||
const meta = {
|
||||
title: 'components/FormLayout/FormFooter',
|
||||
component: FormFooter,
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof FormFooter>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const LeftAndRight: Story = {
|
||||
args: sampleFooterActions,
|
||||
}
|
||||
|
||||
export const CustomChildren: Story = {
|
||||
args: {
|
||||
children: sampleFooterCustom,
|
||||
},
|
||||
}
|
||||
|
||||
export const RightActionsOnly: Story = {
|
||||
args: {
|
||||
rightChildren: sampleFooterActions.rightChildren,
|
||||
},
|
||||
}
|
||||
23
src/stories/components/FormLayout/FormHeader.stories.tsx
Normal file
23
src/stories/components/FormLayout/FormHeader.stories.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { FormHeader } from '@webui/components/components/FormLayout/FormHeader'
|
||||
|
||||
const meta = {
|
||||
title: 'components/FormLayout/FormHeader',
|
||||
component: FormHeader,
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof FormHeader>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
children: 'Edit user',
|
||||
},
|
||||
}
|
||||
|
||||
export const LongTitle: Story = {
|
||||
args: {
|
||||
children: 'Certificate authority configuration',
|
||||
},
|
||||
}
|
||||
32
src/stories/components/FormLayout/shared.tsx
Normal file
32
src/stories/components/FormLayout/shared.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import { ButtonComponent } from '@webui/components/components/editors/ButtonComponent'
|
||||
import { CheckBoxComponent } from '@webui/components/components/editors/CheckBoxComponent'
|
||||
import { TextBoxComponent } from '@webui/components/components/editors/TextBoxComponent'
|
||||
|
||||
export const sampleFormFields = (
|
||||
<div className="grid w-full grid-cols-12 gap-4">
|
||||
<TextBoxComponent label="Display name" colspan={6} value="Ada Lovelace" />
|
||||
<TextBoxComponent label="Email" type="email" colspan={6} value="ada@example.com" />
|
||||
<TextBoxComponent label="Department" colspan={6} value="Engineering" />
|
||||
<TextBoxComponent label="Notes" type="textarea" colspan={12} value="Optional notes for this record." />
|
||||
<CheckBoxComponent label="Send welcome email" colspan={12} value={true} />
|
||||
</div>
|
||||
)
|
||||
|
||||
export const sampleFooterActions = {
|
||||
leftChildren: (
|
||||
<ButtonComponent label="Back" buttonHierarchy="secondary" route="/list" />
|
||||
),
|
||||
rightChildren: (
|
||||
<>
|
||||
<ButtonComponent label="Cancel" buttonHierarchy="secondary" />
|
||||
<ButtonComponent label="Save" buttonHierarchy="primary" />
|
||||
</>
|
||||
),
|
||||
}
|
||||
|
||||
export const sampleFooterCustom = (
|
||||
<div className="flex w-full justify-center gap-4">
|
||||
<ButtonComponent label="Discard changes" buttonHierarchy="error" />
|
||||
<ButtonComponent label="Save and continue" buttonHierarchy="success" />
|
||||
</div>
|
||||
)
|
||||
31
src/stories/components/Layout/Container.stories.tsx
Normal file
31
src/stories/components/Layout/Container.stories.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { Container } from '@webui/components/components/Layout/Container'
|
||||
import { Content } from '@webui/components/components/Layout/Content'
|
||||
import { Footer } from '@webui/components/components/Layout/Footer'
|
||||
import { Header } from '@webui/components/components/Layout/Header'
|
||||
|
||||
const meta = {
|
||||
tags: ['ai-generated'],
|
||||
parameters: { layout: 'fullscreen' },
|
||||
} satisfies Meta
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Shell: Story = {
|
||||
render: () => (
|
||||
<Container>
|
||||
<Header>Top bar</Header>
|
||||
<Content>Scrollable main area</Content>
|
||||
<Footer>Status footer</Footer>
|
||||
</Container>
|
||||
),
|
||||
}
|
||||
|
||||
export const ContentOnly: Story = {
|
||||
render: () => (
|
||||
<Container>
|
||||
<Content>Single content region inside the grid shell.</Content>
|
||||
</Container>
|
||||
),
|
||||
}
|
||||
25
src/stories/components/Layout/Content.stories.tsx
Normal file
25
src/stories/components/Layout/Content.stories.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { Content } from '@webui/components/components/Layout/Content'
|
||||
import { sampleMainContent } from './shared'
|
||||
|
||||
const meta = {
|
||||
title: 'components/Layout/Content',
|
||||
component: Content,
|
||||
tags: ['autodocs'],
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div className="h-64 w-full max-w-3xl border border-gray-300">
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
} satisfies Meta<typeof Content>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
children: sampleMainContent,
|
||||
},
|
||||
}
|
||||
16
src/stories/components/Layout/Footer.stories.tsx
Normal file
16
src/stories/components/Layout/Footer.stories.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { Footer } from '@webui/components/components/Layout/Footer'
|
||||
import { sampleFooter } from './shared'
|
||||
|
||||
const meta = {
|
||||
title: 'components/Layout/Footer',
|
||||
component: Footer,
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof Footer>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: sampleFooter,
|
||||
}
|
||||
22
src/stories/components/Layout/Header.stories.tsx
Normal file
22
src/stories/components/Layout/Header.stories.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { Header } from '@webui/components/components/Layout/Header'
|
||||
import { sampleHeader } from './shared'
|
||||
|
||||
const meta = {
|
||||
title: 'components/Layout/Header',
|
||||
component: Header,
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof Header>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: sampleHeader,
|
||||
}
|
||||
|
||||
export const TitleOnly: Story = {
|
||||
args: {
|
||||
children: <h1 className="text-lg font-semibold">Page title</h1>,
|
||||
},
|
||||
}
|
||||
47
src/stories/components/Layout/Layout.stories.tsx
Normal file
47
src/stories/components/Layout/Layout.stories.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { Layout } from '@webui/components/components/Layout'
|
||||
import {
|
||||
minimalSideMenu,
|
||||
sampleFooter,
|
||||
sampleHeader,
|
||||
sampleMainContent,
|
||||
sampleSideMenu,
|
||||
} from './shared'
|
||||
|
||||
const meta = {
|
||||
title: 'components/Layout/Layout',
|
||||
component: Layout,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
} satisfies Meta<typeof Layout>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
sideMenu: sampleSideMenu,
|
||||
header: sampleHeader,
|
||||
footer: sampleFooter,
|
||||
children: sampleMainContent,
|
||||
},
|
||||
}
|
||||
|
||||
export const Minimal: Story = {
|
||||
args: {
|
||||
sideMenu: minimalSideMenu,
|
||||
header: {
|
||||
children: <h1 className="text-lg font-semibold">Settings</h1>,
|
||||
},
|
||||
footer: {
|
||||
children: <span>Footer</span>,
|
||||
},
|
||||
children: (
|
||||
<div className="p-6">
|
||||
<p className="text-gray-600">Minimal shell with a short navigation list.</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
}
|
||||
35
src/stories/components/Layout/MainContainer.stories.tsx
Normal file
35
src/stories/components/Layout/MainContainer.stories.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { Content } from '@webui/components/components/Layout/Content'
|
||||
import { MainContainer } from '@webui/components/components/Layout/MainContainer'
|
||||
import { SideMenu } from '@webui/components/components/Layout/SideMenu'
|
||||
|
||||
const meta = {
|
||||
tags: ['ai-generated'],
|
||||
parameters: { layout: 'fullscreen' },
|
||||
} satisfies Meta
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const WithSideMenu: Story = {
|
||||
render: () => (
|
||||
<MainContainer>
|
||||
<SideMenu headerChildren="Menu" footerChildren="Signed in">
|
||||
<nav className="space-y-2 text-sm">
|
||||
<a href="/vault" className="block text-blue-700">Vault</a>
|
||||
<a href="/certs" className="block text-blue-700">Certificates</a>
|
||||
</nav>
|
||||
</SideMenu>
|
||||
<Content>Application content</Content>
|
||||
</MainContainer>
|
||||
),
|
||||
}
|
||||
|
||||
export const ContentOnly: Story = {
|
||||
render: () => (
|
||||
<MainContainer>
|
||||
<aside className="bg-gray-100 p-4">Sidebar placeholder</aside>
|
||||
<Content>Two-column shell without SideMenu.</Content>
|
||||
</MainContainer>
|
||||
),
|
||||
}
|
||||
33
src/stories/components/Layout/SideMenu/Content.stories.tsx
Normal file
33
src/stories/components/Layout/SideMenu/Content.stories.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { Content } from '@webui/components/components/Layout/SideMenu/Content'
|
||||
|
||||
const meta = {
|
||||
component: Content,
|
||||
tags: ['ai-generated'],
|
||||
} satisfies Meta<typeof Content>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
children: (
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>Dashboard</li>
|
||||
<li>Settings</li>
|
||||
</ul>
|
||||
),
|
||||
},
|
||||
}
|
||||
|
||||
export const ScrollableList: Story = {
|
||||
args: {
|
||||
children: (
|
||||
<ul className="space-y-1 text-sm">
|
||||
{Array.from({ length: 20 }, (_, i) => (
|
||||
<li key={i}>Item {i + 1}</li>
|
||||
))}
|
||||
</ul>
|
||||
),
|
||||
},
|
||||
}
|
||||
22
src/stories/components/Layout/SideMenu/Footer.stories.tsx
Normal file
22
src/stories/components/Layout/SideMenu/Footer.stories.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { Footer } from '@webui/components/components/Layout/SideMenu/Footer'
|
||||
|
||||
const meta = {
|
||||
component: Footer,
|
||||
tags: ['ai-generated'],
|
||||
} satisfies Meta<typeof Footer>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
children: 'Signed in as admin@example.com',
|
||||
},
|
||||
}
|
||||
|
||||
export const Compact: Story = {
|
||||
args: {
|
||||
children: 'v2.4.0',
|
||||
},
|
||||
}
|
||||
39
src/stories/components/Layout/SideMenu/Header.stories.tsx
Normal file
39
src/stories/components/Layout/SideMenu/Header.stories.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { expect } from 'storybook/test'
|
||||
import { Header } from '@webui/components/components/Layout/SideMenu/Header'
|
||||
|
||||
const meta = {
|
||||
component: Header,
|
||||
tags: ['ai-generated'],
|
||||
} satisfies Meta<typeof Header>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
children: 'Navigation',
|
||||
},
|
||||
}
|
||||
|
||||
export const WithActions: Story = {
|
||||
args: {
|
||||
children: (
|
||||
<>
|
||||
<span>MaksIT Admin</span>
|
||||
<span className="text-sm opacity-90">Help</span>
|
||||
</>
|
||||
),
|
||||
},
|
||||
}
|
||||
|
||||
/** Proves Tailwind loaded — SideMenu header bar uses bg-blue-500. */
|
||||
export const CssCheck: Story = {
|
||||
args: {
|
||||
children: 'Navigation',
|
||||
},
|
||||
play: async ({ canvas }) => {
|
||||
const bar = canvas.getByRole('banner').firstElementChild
|
||||
await expect(getComputedStyle(bar!).backgroundColor).toBe('oklch(0.623 0.214 259.815)')
|
||||
},
|
||||
}
|
||||
37
src/stories/components/Layout/SideMenu/SideMenu.stories.tsx
Normal file
37
src/stories/components/Layout/SideMenu/SideMenu.stories.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { SideMenu } from '@webui/components/components/Layout/SideMenu'
|
||||
import { minimalSideMenu, sampleSideMenu } from '../shared'
|
||||
|
||||
const meta = {
|
||||
title: 'components/Layout/SideMenu',
|
||||
component: SideMenu,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div className="h-screen w-[250px]">
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
} satisfies Meta<typeof SideMenu>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: sampleSideMenu,
|
||||
}
|
||||
|
||||
export const Minimal: Story = {
|
||||
args: minimalSideMenu,
|
||||
}
|
||||
|
||||
export const WithoutFooter: Story = {
|
||||
args: {
|
||||
headerChildren: sampleSideMenu.headerChildren,
|
||||
children: sampleSideMenu.children,
|
||||
},
|
||||
}
|
||||
54
src/stories/components/Layout/shared.tsx
Normal file
54
src/stories/components/Layout/shared.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import type { FooterProps } from '@webui/components/components/Layout/Footer'
|
||||
import type { HeaderProps } from '@webui/components/components/Layout/Header'
|
||||
import type { SideMenuProps } from '@webui/components/components/Layout/SideMenu'
|
||||
|
||||
export const sampleSideMenu: SideMenuProps = {
|
||||
headerChildren: <span className="font-semibold">MaksIT WebUI</span>,
|
||||
children: (
|
||||
<nav className="flex flex-col gap-3 text-sm">
|
||||
<Link className="hover:underline" to="/vault">Vault</Link>
|
||||
<Link className="hover:underline" to="/certs">Certificates</Link>
|
||||
<Link className="hover:underline" to="/admin">Administration</Link>
|
||||
<Link className="hover:underline" to="/reports">Reports</Link>
|
||||
</nav>
|
||||
),
|
||||
footerChildren: <span className="text-xs opacity-90">Build 0.3.0</span>,
|
||||
}
|
||||
|
||||
export const minimalSideMenu: SideMenuProps = {
|
||||
headerChildren: <span className="font-semibold">App</span>,
|
||||
children: (
|
||||
<nav className="flex flex-col gap-2 text-sm">
|
||||
<Link className="hover:underline" to="/">Home</Link>
|
||||
<Link className="hover:underline" to="/settings">Settings</Link>
|
||||
</nav>
|
||||
),
|
||||
}
|
||||
|
||||
export const sampleHeader: HeaderProps = {
|
||||
children: (
|
||||
<>
|
||||
<h1 className="text-lg font-semibold">Dashboard</h1>
|
||||
<span className="text-sm opacity-90">Signed in as demo@example.com</span>
|
||||
</>
|
||||
),
|
||||
}
|
||||
|
||||
export const sampleFooter: FooterProps = {
|
||||
children: <span>© 2026 MaksIT — Shared WebUI layout</span>,
|
||||
}
|
||||
|
||||
export const sampleMainContent = (
|
||||
<div className="p-6 space-y-4">
|
||||
<h2 className="text-xl font-semibold text-gray-800">Main content area</h2>
|
||||
<p className="text-gray-600 max-w-prose">
|
||||
This region maps to <code className="bg-gray-200 px-1 rounded">Layout</code> children —
|
||||
forms, tables, and page content render here inside the scrollable main panel.
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-white p-4 rounded shadow-sm border border-gray-200">Card A</div>
|
||||
<div className="bg-white p-4 rounded shadow-sm border border-gray-200">Card B</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
57
src/stories/components/LazyLoadTable.stories.tsx
Normal file
57
src/stories/components/LazyLoadTable.stories.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { fn, expect } from 'storybook/test'
|
||||
import { LazyLoadTable } from '@webui/components/components/LazyLoadTable'
|
||||
|
||||
const sampleData = [
|
||||
{ id: '1', name: 'Row one' },
|
||||
{ id: '2', name: 'Row two' },
|
||||
{ id: '3', name: 'Row three' },
|
||||
]
|
||||
|
||||
const meta = {
|
||||
component: LazyLoadTable,
|
||||
tags: ['ai-generated'],
|
||||
args: {
|
||||
loadMore: fn(),
|
||||
},
|
||||
} satisfies Meta<typeof LazyLoadTable>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
data: sampleData,
|
||||
columns: [
|
||||
{ key: 'name', title: 'Name', dataIndex: 'name' },
|
||||
],
|
||||
},
|
||||
play: async ({ canvas }) => {
|
||||
await expect(canvas.getByText('Row one')).toBeVisible()
|
||||
await expect(canvas.getByText('Loading more...')).toBeVisible()
|
||||
},
|
||||
}
|
||||
|
||||
export const WithCustomCell: Story = {
|
||||
args: {
|
||||
data: sampleData,
|
||||
columns: [
|
||||
{
|
||||
key: 'name',
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
renderColumn: (value) => <strong>{String(value)}</strong>,
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
export const WideGrid: Story = {
|
||||
args: {
|
||||
data: sampleData,
|
||||
colspan: 12,
|
||||
columns: [
|
||||
{ key: 'name', title: 'Name', dataIndex: 'name' },
|
||||
],
|
||||
},
|
||||
}
|
||||
127
src/stories/components/Offcanvas.stories.tsx
Normal file
127
src/stories/components/Offcanvas.stories.tsx
Normal file
@ -0,0 +1,127 @@
|
||||
import { useState, type JSX, type ReactNode } from 'react'
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { fn } from 'storybook/test'
|
||||
import { ButtonComponent } from '@webui/components/components/editors/ButtonComponent'
|
||||
import type { GridColSpan } from '@webui/components/functions/tailwind'
|
||||
import { Offcanvas } from '@webui/components/components/Offcanvas'
|
||||
import { FormContainer } from '@webui/components/components/FormLayout/FormContainer'
|
||||
import { FormContent } from '@webui/components/components/FormLayout/FormContent'
|
||||
import { FormFooter } from '@webui/components/components/FormLayout/FormFooter'
|
||||
import { FormHeader } from '@webui/components/components/FormLayout/FormHeader'
|
||||
import { sampleFormFields } from './FormLayout/shared'
|
||||
|
||||
const pageDecorator = (Story: () => JSX.Element) => (
|
||||
<div className="relative h-[600px] w-full overflow-hidden rounded border border-gray-300 bg-gray-50 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800">Page behind the overlay</h2>
|
||||
<p className="mt-2 text-gray-600">Open the panel, then close via Cancel or the header button.</p>
|
||||
<Story />
|
||||
</div>
|
||||
)
|
||||
|
||||
function OffcanvasDemo ({
|
||||
colspan = 6,
|
||||
startOpen = false,
|
||||
children,
|
||||
}: {
|
||||
colspan?: GridColSpan
|
||||
startOpen?: boolean
|
||||
children?: ReactNode | ((close: () => void) => ReactNode)
|
||||
}) {
|
||||
const [isOpen, setIsOpen] = useState(startOpen)
|
||||
const close = () => setIsOpen(false)
|
||||
|
||||
const panelContent = typeof children === 'function'
|
||||
? children(close)
|
||||
: children ?? (
|
||||
<FormContainer>
|
||||
<FormHeader>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span>Edit record</span>
|
||||
<ButtonComponent label="Close" buttonHierarchy="secondary" onClick={close} />
|
||||
</div>
|
||||
</FormHeader>
|
||||
<FormContent>{sampleFormFields}</FormContent>
|
||||
<FormFooter
|
||||
leftChildren={
|
||||
<ButtonComponent label="Back" buttonHierarchy="secondary" onClick={close} />
|
||||
}
|
||||
rightChildren={
|
||||
<>
|
||||
<ButtonComponent label="Cancel" buttonHierarchy="secondary" onClick={close} />
|
||||
<ButtonComponent label="Save" buttonHierarchy="primary" />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</FormContainer>
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="mt-4 rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
Open offcanvas
|
||||
</button>
|
||||
<Offcanvas
|
||||
isOpen={isOpen}
|
||||
colspan={colspan}
|
||||
onOpen={fn()}
|
||||
onClose={close}
|
||||
>
|
||||
<div className="h-full">{panelContent}</div>
|
||||
</Offcanvas>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const meta = {
|
||||
title: 'components/Offcanvas',
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
'Slide-in overlay panel. Stories use an interactive demo that wraps `Offcanvas` with form content.',
|
||||
},
|
||||
},
|
||||
},
|
||||
decorators: [pageDecorator],
|
||||
} satisfies Meta
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Interactive: Story = {
|
||||
render: () => <OffcanvasDemo />,
|
||||
}
|
||||
|
||||
export const Open: Story = {
|
||||
render: () => <OffcanvasDemo startOpen />,
|
||||
}
|
||||
|
||||
export const WidePanel: Story = {
|
||||
render: () => <OffcanvasDemo startOpen colspan={8} />,
|
||||
}
|
||||
|
||||
export const NarrowPanel: Story = {
|
||||
render: () => <OffcanvasDemo startOpen colspan={4} />,
|
||||
}
|
||||
|
||||
export const SimpleContent: Story = {
|
||||
render: () => (
|
||||
<OffcanvasDemo startOpen colspan={5}>
|
||||
{(close) => (
|
||||
<div className="flex h-full flex-col p-6">
|
||||
<h3 className="text-xl font-bold">Quick actions</h3>
|
||||
<p className="mt-2 flex-1 text-gray-600">
|
||||
Lightweight panel without the full form shell.
|
||||
</p>
|
||||
<ButtonComponent label="Dismiss" buttonHierarchy="secondary" onClick={close} />
|
||||
</div>
|
||||
)}
|
||||
</OffcanvasDemo>
|
||||
),
|
||||
}
|
||||
@ -0,0 +1,55 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { expect } from 'storybook/test'
|
||||
import { EntityScopesSummary } from '@webui/components/components/Scopes/EntityScopesSummary'
|
||||
|
||||
const meta = {
|
||||
component: EntityScopesSummary,
|
||||
tags: ['ai-generated'],
|
||||
} satisfies Meta<typeof EntityScopesSummary>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
const sampleEntries = [
|
||||
{
|
||||
scopeEntityType: 1,
|
||||
entityId: 'vault-1',
|
||||
entityName: 'Production vault',
|
||||
read: true,
|
||||
write: true,
|
||||
delete: false,
|
||||
create: false,
|
||||
},
|
||||
{
|
||||
scopeEntityType: 2,
|
||||
entityId: 'cert-9',
|
||||
entityName: 'Wildcard cert',
|
||||
read: true,
|
||||
write: false,
|
||||
delete: false,
|
||||
create: false,
|
||||
},
|
||||
]
|
||||
|
||||
export const Empty: Story = {
|
||||
args: {
|
||||
entries: [],
|
||||
},
|
||||
play: async ({ canvas }) => {
|
||||
await expect(canvas.getByText('No scopes.')).toBeVisible()
|
||||
},
|
||||
}
|
||||
|
||||
export const WithEntries: Story = {
|
||||
args: {
|
||||
entries: sampleEntries,
|
||||
formatScopeEntityType: (type) => (type === 1 ? 'Vault' : 'Certificate'),
|
||||
},
|
||||
}
|
||||
|
||||
export const CustomTitle: Story = {
|
||||
args: {
|
||||
title: 'Effective permissions',
|
||||
entries: sampleEntries,
|
||||
},
|
||||
}
|
||||
55
src/stories/components/Toast/Toast.stories.tsx
Normal file
55
src/stories/components/Toast/Toast.stories.tsx
Normal file
@ -0,0 +1,55 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { userEvent, within } from 'storybook/test'
|
||||
import { ButtonComponent } from '@webui/components/components/editors/ButtonComponent'
|
||||
import { addToast } from '@webui/components/components/Toast/addToast'
|
||||
import { Toast } from '@webui/components/components/Toast'
|
||||
|
||||
const meta = {
|
||||
title: 'components/Toast',
|
||||
component: Toast,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
} satisfies Meta<typeof Toast>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
function ToastDemo () {
|
||||
return (
|
||||
<>
|
||||
<Toast />
|
||||
<div className="flex flex-wrap gap-2 p-6">
|
||||
<ButtonComponent
|
||||
label="Info"
|
||||
buttonHierarchy="primary"
|
||||
onClick={() => addToast('Saved successfully', 'info', 4000)}
|
||||
/>
|
||||
<ButtonComponent
|
||||
label="Success"
|
||||
buttonHierarchy="success"
|
||||
onClick={() => addToast('Record created', 'success')}
|
||||
/>
|
||||
<ButtonComponent
|
||||
label="Warning"
|
||||
buttonHierarchy="warning"
|
||||
onClick={() => addToast('Session expiring soon', 'warning')}
|
||||
/>
|
||||
<ButtonComponent
|
||||
label="Error"
|
||||
buttonHierarchy="error"
|
||||
onClick={() => addToast('Something went wrong', 'error')}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const Interactive: Story = {
|
||||
render: () => <ToastDemo />,
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement)
|
||||
await userEvent.click(canvas.getByRole('button', { name: 'Success' }))
|
||||
},
|
||||
}
|
||||
86
src/stories/components/editors/ButtonComponent.stories.tsx
Normal file
86
src/stories/components/editors/ButtonComponent.stories.tsx
Normal file
@ -0,0 +1,86 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { expect, fn } from 'storybook/test'
|
||||
import { ButtonComponent } from '@webui/components/components/editors/ButtonComponent'
|
||||
|
||||
const meta = {
|
||||
title: 'components/editors/Button',
|
||||
component: ButtonComponent,
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
onClick: fn(),
|
||||
},
|
||||
argTypes: {
|
||||
buttonHierarchy: {
|
||||
control: 'select',
|
||||
options: ['primary', 'secondary', 'success', 'warning', 'error'],
|
||||
},
|
||||
colspan: {
|
||||
control: { type: 'number', min: 1, max: 12 },
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof ButtonComponent>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Primary: Story = {
|
||||
args: {
|
||||
label: 'Save changes',
|
||||
buttonHierarchy: 'primary',
|
||||
},
|
||||
}
|
||||
|
||||
export const Secondary: Story = {
|
||||
args: {
|
||||
label: 'Cancel',
|
||||
buttonHierarchy: 'secondary',
|
||||
},
|
||||
}
|
||||
|
||||
export const Disabled: Story = {
|
||||
args: {
|
||||
label: 'Unavailable',
|
||||
buttonHierarchy: 'primary',
|
||||
disabled: true,
|
||||
},
|
||||
play: async ({ args, canvas, userEvent }) => {
|
||||
const button = canvas.getByRole('button', { name: /unavailable/i })
|
||||
await userEvent.click(button)
|
||||
await expect(button).toBeDisabled()
|
||||
await expect(args.onClick).not.toHaveBeenCalled()
|
||||
},
|
||||
}
|
||||
|
||||
export const DisabledLink: Story = {
|
||||
args: {
|
||||
label: 'Open dashboard',
|
||||
route: '/dashboard',
|
||||
buttonHierarchy: 'primary',
|
||||
disabled: true,
|
||||
},
|
||||
play: async ({ args, canvas }) => {
|
||||
const link = canvas.getByRole('link', { name: /open dashboard/i })
|
||||
await expect(link).toHaveAttribute('aria-disabled', 'true')
|
||||
await expect(link).toHaveStyle({ pointerEvents: 'none' })
|
||||
await expect(args.onClick).not.toHaveBeenCalled()
|
||||
},
|
||||
}
|
||||
|
||||
export const WithRoute: Story = {
|
||||
args: {
|
||||
label: 'Open dashboard',
|
||||
route: '/dashboard',
|
||||
buttonHierarchy: 'success',
|
||||
},
|
||||
}
|
||||
|
||||
export const ClicksFireHandler: Story = {
|
||||
args: {
|
||||
label: 'Click me',
|
||||
buttonHierarchy: 'primary',
|
||||
},
|
||||
play: async ({ args, canvas, userEvent }) => {
|
||||
await userEvent.click(canvas.getByRole('button', { name: /click me/i }))
|
||||
await expect(args.onClick).toHaveBeenCalledOnce()
|
||||
},
|
||||
}
|
||||
55
src/stories/components/editors/CheckBoxComponent.stories.tsx
Normal file
55
src/stories/components/editors/CheckBoxComponent.stories.tsx
Normal file
@ -0,0 +1,55 @@
|
||||
import type { ComponentProps } from 'react'
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { userEvent, within, expect } from 'storybook/test'
|
||||
import { CheckBoxComponent } from '@webui/components/components/editors/CheckBoxComponent'
|
||||
import { withControlledValue } from '../../helpers/controlledField'
|
||||
|
||||
const ControlledCheckBox = withControlledValue<ComponentProps<typeof CheckBoxComponent>>(
|
||||
CheckBoxComponent,
|
||||
false,
|
||||
)
|
||||
|
||||
const meta = {
|
||||
title: 'components/editors/CheckBox',
|
||||
component: ControlledCheckBox,
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof ControlledCheckBox>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Unchecked: Story = {
|
||||
args: {
|
||||
label: 'Send notifications',
|
||||
value: false,
|
||||
},
|
||||
}
|
||||
|
||||
export const Checked: Story = {
|
||||
args: {
|
||||
label: 'I agree to the terms',
|
||||
value: true,
|
||||
},
|
||||
}
|
||||
|
||||
export const WithError: Story = {
|
||||
args: {
|
||||
label: 'Required consent',
|
||||
value: false,
|
||||
errorText: 'You must accept to continue',
|
||||
},
|
||||
}
|
||||
|
||||
export const TogglesOnClick: Story = {
|
||||
args: {
|
||||
label: 'Enable feature',
|
||||
value: false,
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement)
|
||||
const checkbox = canvas.getByRole('checkbox')
|
||||
await expect(checkbox).not.toBeChecked()
|
||||
await userEvent.click(checkbox)
|
||||
await expect(checkbox).toBeChecked()
|
||||
},
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { DateTimePickerComponent } from '@webui/components/components/editors/DateTimePickerComponent'
|
||||
import { withControlledIsoDate } from '../../helpers/controlledEditors'
|
||||
|
||||
const ControlledDateTimePicker = withControlledIsoDate(DateTimePickerComponent)
|
||||
|
||||
const meta = {
|
||||
title: 'components/editors/DateTimePicker',
|
||||
component: ControlledDateTimePicker,
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof ControlledDateTimePicker>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Empty: Story = {
|
||||
args: {
|
||||
label: 'Scheduled at',
|
||||
placeholder: 'Pick date and time',
|
||||
value: '',
|
||||
},
|
||||
}
|
||||
|
||||
export const WithValue: Story = {
|
||||
args: {
|
||||
label: 'Scheduled at',
|
||||
value: '2026-05-25T14:30:00+00:00',
|
||||
},
|
||||
}
|
||||
|
||||
export const WithError: Story = {
|
||||
args: {
|
||||
label: 'Scheduled at',
|
||||
value: '',
|
||||
errorText: 'Date and time are required',
|
||||
},
|
||||
}
|
||||
|
||||
export const Disabled: Story = {
|
||||
args: {
|
||||
label: 'Scheduled at',
|
||||
value: '2026-05-25T09:00:00+00:00',
|
||||
disabled: true,
|
||||
},
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { DualListboxComponent } from '@webui/components/components/editors/DualListboxComponent'
|
||||
import { withControlledStringList } from '../../helpers/controlledEditors'
|
||||
|
||||
const ControlledDualListbox = withControlledStringList(DualListboxComponent)
|
||||
|
||||
const availableItems = ['Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon']
|
||||
|
||||
const meta = {
|
||||
title: 'components/editors/DualListbox',
|
||||
component: ControlledDualListbox,
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof ControlledDualListbox>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
label: 'Scopes',
|
||||
availableItems,
|
||||
selectedItems: ['Alpha', 'Gamma'],
|
||||
},
|
||||
}
|
||||
|
||||
export const EmptySelection: Story = {
|
||||
args: {
|
||||
label: 'Scopes',
|
||||
availableItems,
|
||||
selectedItems: [],
|
||||
},
|
||||
}
|
||||
|
||||
export const WithError: Story = {
|
||||
args: {
|
||||
label: 'Scopes',
|
||||
availableItems,
|
||||
selectedItems: [],
|
||||
errorText: 'Move at least one item to Selected',
|
||||
},
|
||||
}
|
||||
31
src/stories/components/editors/FieldContainer.stories.tsx
Normal file
31
src/stories/components/editors/FieldContainer.stories.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { FieldContainer } from '@webui/components/components/editors/FieldContainer'
|
||||
|
||||
const meta = {
|
||||
title: 'components/editors/FieldContainer',
|
||||
component: FieldContainer,
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof FieldContainer>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
label: 'Field label',
|
||||
children: (
|
||||
<input
|
||||
className="border rounded w-full py-2 px-3"
|
||||
placeholder="Child control"
|
||||
/>
|
||||
),
|
||||
},
|
||||
}
|
||||
|
||||
export const WithError: Story = {
|
||||
args: {
|
||||
label: 'Required field',
|
||||
errorText: 'This field is required',
|
||||
children: <input className="border border-red-500 rounded w-full py-2 px-3" />,
|
||||
},
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { FileUploadComponent } from '@webui/components/components/editors/FileUploadComponent'
|
||||
import { withControlledFiles } from '../../helpers/controlledEditors'
|
||||
|
||||
const ControlledFileUpload = withControlledFiles(FileUploadComponent)
|
||||
|
||||
const meta = {
|
||||
title: 'components/editors/FileUpload',
|
||||
component: ControlledFileUpload,
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof ControlledFileUpload>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
label: 'Upload documents',
|
||||
multiple: true,
|
||||
files: [],
|
||||
},
|
||||
}
|
||||
|
||||
export const SingleFile: Story = {
|
||||
args: {
|
||||
label: 'Upload certificate',
|
||||
multiple: false,
|
||||
files: [],
|
||||
},
|
||||
}
|
||||
|
||||
export const Disabled: Story = {
|
||||
args: {
|
||||
label: 'Upload documents',
|
||||
files: [],
|
||||
disabled: true,
|
||||
},
|
||||
}
|
||||
33
src/stories/components/editors/ListBoxComponent.stories.tsx
Normal file
33
src/stories/components/editors/ListBoxComponent.stories.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { fn } from 'storybook/test'
|
||||
import { ListboxComponent } from '@webui/components/components/editors/ListBoxComponent'
|
||||
|
||||
const sampleItems = ['Read', 'Write', 'Delete', 'Administer']
|
||||
|
||||
const meta = {
|
||||
title: 'components/editors/ListBox',
|
||||
component: ListboxComponent,
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
onChange: fn(),
|
||||
},
|
||||
} satisfies Meta<typeof ListboxComponent>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
label: 'Permissions',
|
||||
itemsLabel: 'Available permissions',
|
||||
items: sampleItems,
|
||||
},
|
||||
}
|
||||
|
||||
export const WithError: Story = {
|
||||
args: {
|
||||
label: 'Permissions',
|
||||
items: sampleItems,
|
||||
errorText: 'Select at least one permission',
|
||||
},
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { userEvent, within, expect } from 'storybook/test'
|
||||
import { RadioGroupComponent } from '@webui/components/components/editors/RadioGroupComponent'
|
||||
import { withControlledRadioValue } from '../../helpers/controlledEditors'
|
||||
|
||||
const ControlledRadioGroup = withControlledRadioValue(RadioGroupComponent)
|
||||
|
||||
const roleOptions = [
|
||||
{ value: 'viewer', label: 'Viewer' },
|
||||
{ value: 'editor', label: 'Editor' },
|
||||
{ value: 'admin', label: 'Administrator' },
|
||||
]
|
||||
|
||||
const meta = {
|
||||
title: 'components/editors/RadioGroup',
|
||||
component: ControlledRadioGroup,
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof ControlledRadioGroup>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
label: 'Role',
|
||||
options: roleOptions,
|
||||
value: 'viewer',
|
||||
},
|
||||
}
|
||||
|
||||
export const WithError: Story = {
|
||||
args: {
|
||||
label: 'Role',
|
||||
options: roleOptions,
|
||||
value: '',
|
||||
errorText: 'Select a role',
|
||||
},
|
||||
}
|
||||
|
||||
export const ReadOnly: Story = {
|
||||
args: {
|
||||
label: 'Role',
|
||||
options: roleOptions,
|
||||
value: 'admin',
|
||||
readOnly: true,
|
||||
},
|
||||
}
|
||||
|
||||
export const SelectsOption: Story = {
|
||||
args: {
|
||||
label: 'Role',
|
||||
options: roleOptions,
|
||||
value: 'viewer',
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement)
|
||||
await userEvent.click(canvas.getByLabelText('Editor'))
|
||||
await expect(canvas.getByLabelText('Editor')).toBeChecked()
|
||||
},
|
||||
}
|
||||
@ -0,0 +1,69 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import type { PagedRequest } from '@webui/contracts/PagedRequest'
|
||||
import type { SearchResponseBase } from '@webui/contracts/SearchResponseBase'
|
||||
import { fn } from 'storybook/test'
|
||||
import { RemoteSelectBoxComponent } from '@webui/components/components/editors/RemoteSelectBoxComponent'
|
||||
import { withControlledRemoteSelect } from '../../helpers/controlledEditors'
|
||||
|
||||
const mockCatalog: SearchResponseBase[] = [
|
||||
{ id: 'vault', name: 'Vault' },
|
||||
{ id: 'certs', name: 'Certificates' },
|
||||
{ id: 'admin', name: 'Administration' },
|
||||
{ id: 'reports', name: 'Reports' },
|
||||
]
|
||||
|
||||
const mockDataSource = async (request: PagedRequest) => {
|
||||
await new Promise((resolve) => setTimeout(resolve, 200))
|
||||
const filter = request.filters?.toLowerCase() ?? ''
|
||||
if (!filter) return mockCatalog
|
||||
return mockCatalog.filter((item) => item.name.toLowerCase().includes(filter))
|
||||
}
|
||||
|
||||
const ControlledRemoteSelect = withControlledRemoteSelect(RemoteSelectBoxComponent)
|
||||
|
||||
const meta = {
|
||||
title: 'components/editors/RemoteSelectBox',
|
||||
component: ControlledRemoteSelect,
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
onChange: fn(),
|
||||
},
|
||||
} satisfies Meta<typeof ControlledRemoteSelect>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
label: 'Entity',
|
||||
placeholder: 'Search entities…',
|
||||
dataSource: mockDataSource,
|
||||
value: '',
|
||||
},
|
||||
}
|
||||
|
||||
export const WithSelection: Story = {
|
||||
args: {
|
||||
label: 'Entity',
|
||||
dataSource: mockDataSource,
|
||||
value: 'vault',
|
||||
},
|
||||
}
|
||||
|
||||
export const WithError: Story = {
|
||||
args: {
|
||||
label: 'Entity',
|
||||
dataSource: mockDataSource,
|
||||
value: '',
|
||||
errorText: 'Select an entity',
|
||||
},
|
||||
}
|
||||
|
||||
export const ReadOnly: Story = {
|
||||
args: {
|
||||
label: 'Entity',
|
||||
dataSource: mockDataSource,
|
||||
value: 'certs',
|
||||
readOnly: true,
|
||||
},
|
||||
}
|
||||
63
src/stories/components/editors/SecretComponent.stories.tsx
Normal file
63
src/stories/components/editors/SecretComponent.stories.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
import type { ComponentProps } from 'react'
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { SecretComponent } from '@webui/components/components/editors/SecretComponent'
|
||||
import { withControlledValue } from '../../helpers/controlledField'
|
||||
|
||||
const ControlledSecret = withControlledValue<ComponentProps<typeof SecretComponent>>(
|
||||
SecretComponent,
|
||||
'',
|
||||
)
|
||||
|
||||
const mockSecretGenerator = async () =>
|
||||
`sk-${Math.random().toString(36).slice(2, 10)}`
|
||||
|
||||
const meta = {
|
||||
title: 'components/editors/Secret',
|
||||
component: ControlledSecret,
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof ControlledSecret>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Empty: Story = {
|
||||
args: {
|
||||
label: 'API key',
|
||||
placeholder: 'Enter or generate a secret',
|
||||
value: '',
|
||||
},
|
||||
}
|
||||
|
||||
export const WithValue: Story = {
|
||||
args: {
|
||||
label: 'API key',
|
||||
value: 'super-secret-token',
|
||||
enableCopy: true,
|
||||
},
|
||||
}
|
||||
|
||||
export const WithGenerate: Story = {
|
||||
args: {
|
||||
label: 'API key',
|
||||
value: '',
|
||||
enableGenerate: true,
|
||||
dataSource: mockSecretGenerator,
|
||||
},
|
||||
}
|
||||
|
||||
export const WithError: Story = {
|
||||
args: {
|
||||
label: 'API key',
|
||||
value: '',
|
||||
errorText: 'Secret is required',
|
||||
},
|
||||
}
|
||||
|
||||
export const ReadOnly: Story = {
|
||||
args: {
|
||||
label: 'API key',
|
||||
value: 'cannot-edit-me',
|
||||
readOnly: true,
|
||||
enableCopy: true,
|
||||
},
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
import type { ComponentProps } from 'react'
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { SelectBoxComponent } from '@webui/components/components/editors/SelectBoxComponent'
|
||||
import { withControlledValue } from '../../helpers/controlledField'
|
||||
|
||||
const ControlledSelectBox = withControlledValue<ComponentProps<typeof SelectBoxComponent>>(
|
||||
SelectBoxComponent,
|
||||
'',
|
||||
)
|
||||
|
||||
const sampleOptions = [
|
||||
{ value: 'vault', label: 'Vault' },
|
||||
{ value: 'certs', label: 'Certificates' },
|
||||
{ value: 'admin', label: 'Administration' },
|
||||
]
|
||||
|
||||
const meta = {
|
||||
title: 'components/editors/SelectBox',
|
||||
component: ControlledSelectBox,
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof ControlledSelectBox>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
label: 'Module',
|
||||
placeholder: 'Search modules…',
|
||||
options: sampleOptions,
|
||||
value: '',
|
||||
},
|
||||
}
|
||||
|
||||
export const WithSelection: Story = {
|
||||
args: {
|
||||
label: 'Module',
|
||||
options: sampleOptions,
|
||||
value: 'vault',
|
||||
},
|
||||
}
|
||||
|
||||
export const WithError: Story = {
|
||||
args: {
|
||||
label: 'Module',
|
||||
options: sampleOptions,
|
||||
value: '',
|
||||
errorText: 'Select a module',
|
||||
},
|
||||
}
|
||||
79
src/stories/components/editors/TextBoxComponent.stories.tsx
Normal file
79
src/stories/components/editors/TextBoxComponent.stories.tsx
Normal file
@ -0,0 +1,79 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { userEvent, within, expect } from 'storybook/test'
|
||||
import { TextBoxComponent } from '@webui/components/components/editors/TextBoxComponent'
|
||||
import { withControlledValue } from '../../helpers/controlledField'
|
||||
|
||||
const ControlledTextBox = withControlledValue(TextBoxComponent, '')
|
||||
|
||||
const meta = {
|
||||
title: 'components/editors/TextBox',
|
||||
component: ControlledTextBox,
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
type: {
|
||||
control: 'select',
|
||||
options: ['text', 'password', 'textarea', 'number', 'email', 'time'],
|
||||
},
|
||||
colspan: {
|
||||
control: { type: 'number', min: 1, max: 12 },
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof ControlledTextBox>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
label: 'Display name',
|
||||
placeholder: 'Jane Doe',
|
||||
value: '',
|
||||
},
|
||||
}
|
||||
|
||||
export const WithError: Story = {
|
||||
args: {
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: 'not-an-email',
|
||||
errorText: 'Enter a valid email address',
|
||||
},
|
||||
}
|
||||
|
||||
export const Password: Story = {
|
||||
args: {
|
||||
label: 'Password',
|
||||
type: 'password',
|
||||
value: 'secret-value',
|
||||
},
|
||||
}
|
||||
|
||||
export const Textarea: Story = {
|
||||
args: {
|
||||
label: 'Notes',
|
||||
type: 'textarea',
|
||||
value: 'Multi-line content',
|
||||
},
|
||||
}
|
||||
|
||||
export const Disabled: Story = {
|
||||
args: {
|
||||
label: 'Read-only field',
|
||||
value: 'Cannot edit',
|
||||
disabled: true,
|
||||
},
|
||||
}
|
||||
|
||||
export const AcceptsTyping: Story = {
|
||||
args: {
|
||||
label: 'Search',
|
||||
placeholder: 'Type here',
|
||||
value: '',
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement)
|
||||
const input = canvas.getByPlaceholderText('Type here')
|
||||
await userEvent.type(input, 'hello')
|
||||
await expect(input).toHaveValue('hello')
|
||||
},
|
||||
}
|
||||
49
src/stories/components/editors/TreeViewComponent.stories.tsx
Normal file
49
src/stories/components/editors/TreeViewComponent.stories.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||
import { TreeViewComponent } from '@webui/components/components/editors/TreeViewComponent'
|
||||
|
||||
const sampleTree = [
|
||||
{
|
||||
id: 'org',
|
||||
name: 'Organization',
|
||||
defaultCollapsed: false,
|
||||
content: 'Root organization settings',
|
||||
children: [
|
||||
{
|
||||
id: 'vault',
|
||||
name: 'Vault',
|
||||
content: 'Secrets and policies',
|
||||
},
|
||||
{
|
||||
id: 'certs',
|
||||
name: 'Certificates',
|
||||
defaultCollapsed: true,
|
||||
children: [
|
||||
{ id: 'ca', name: 'Certificate authorities' },
|
||||
{ id: 'issued', name: 'Issued certificates' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const meta = {
|
||||
title: 'components/editors/TreeView',
|
||||
component: TreeViewComponent,
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof TreeViewComponent>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
label: 'Navigation tree',
|
||||
data: sampleTree,
|
||||
},
|
||||
}
|
||||
|
||||
export const WithoutLabel: Story = {
|
||||
args: {
|
||||
data: sampleTree,
|
||||
},
|
||||
}
|
||||
66
src/stories/helpers/controlledEditors.tsx
Normal file
66
src/stories/helpers/controlledEditors.tsx
Normal file
@ -0,0 +1,66 @@
|
||||
import { type ChangeEvent, useState, type ComponentType } from 'react'
|
||||
|
||||
/** DateTimePicker: `onChange(isoString?: string)` */
|
||||
export function withControlledIsoDate<P extends { value?: string; onChange?: (iso?: string) => void }> (
|
||||
Component: ComponentType<P>,
|
||||
initial = '',
|
||||
) {
|
||||
return function Controlled (props: Omit<P, 'value' | 'onChange'> & { value?: string }) {
|
||||
const [value, setValue] = useState(props.value ?? initial)
|
||||
return <Component {...(props as P)} value={value} onChange={setValue} />
|
||||
}
|
||||
}
|
||||
|
||||
/** RadioGroup: `onChange(value: string)` */
|
||||
export function withControlledRadioValue<P extends { value?: string; onChange?: (value: string) => void }> (
|
||||
Component: ComponentType<P>,
|
||||
initial = '',
|
||||
) {
|
||||
return function Controlled (props: Omit<P, 'value' | 'onChange'> & { value?: string }) {
|
||||
const [value, setValue] = useState(props.value ?? initial)
|
||||
return <Component {...(props as P)} value={value} onChange={setValue} />
|
||||
}
|
||||
}
|
||||
|
||||
/** DualListbox: `onChange(selectedItems: string[])` */
|
||||
export function withControlledStringList<P extends { selectedItems: string[]; onChange: (items: string[]) => void }> (
|
||||
Component: ComponentType<P>,
|
||||
) {
|
||||
return function Controlled (props: Omit<P, 'selectedItems' | 'onChange'> & { selectedItems?: string[] }) {
|
||||
const [selectedItems, setSelectedItems] = useState(props.selectedItems ?? [])
|
||||
return (
|
||||
<Component
|
||||
{...(props as P)}
|
||||
selectedItems={selectedItems}
|
||||
onChange={setSelectedItems}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/** FileUpload: `onChange(files: File[])` */
|
||||
export function withControlledFiles<P extends { files?: File[]; onChange?: (files: File[]) => void }> (
|
||||
Component: ComponentType<P>,
|
||||
) {
|
||||
return function Controlled (props: Omit<P, 'files' | 'onChange'> & { files?: File[] }) {
|
||||
const [files, setFiles] = useState<File[]>(props.files ?? [])
|
||||
return <Component {...(props as P)} files={files} onChange={setFiles} />
|
||||
}
|
||||
}
|
||||
|
||||
/** RemoteSelectBox: `onChange` as ChangeEvent handler */
|
||||
export function withControlledRemoteSelect<P extends { value?: string | number; onChange?: (e: ChangeEvent<HTMLInputElement>) => void }> (
|
||||
Component: ComponentType<P & { onChange: (e: ChangeEvent<HTMLInputElement>) => void }>,
|
||||
initial: string | number = '',
|
||||
) {
|
||||
return function Controlled (
|
||||
props: Omit<P, 'value' | 'onChange'> & { value?: string | number; onChange?: (e: ChangeEvent<HTMLInputElement>) => void },
|
||||
) {
|
||||
const [value, setValue] = useState(props.value ?? initial)
|
||||
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
setValue(e.target.value)
|
||||
props.onChange?.(e)
|
||||
}
|
||||
return <Component {...(props as P)} value={value} onChange={handleChange} />
|
||||
}
|
||||
}
|
||||
36
src/stories/helpers/controlledField.tsx
Normal file
36
src/stories/helpers/controlledField.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import { ChangeEvent, useState, type ComponentType } from 'react'
|
||||
|
||||
type ControlledValue = string | number | boolean
|
||||
|
||||
type ChangeHandler = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void
|
||||
|
||||
export function withControlledValue<Props> (
|
||||
Component: ComponentType<Props>,
|
||||
initialValue: ControlledValue = '',
|
||||
): ComponentType<Omit<Props, 'value' | 'onChange'> & { value?: ControlledValue }> {
|
||||
function ControlledStory (
|
||||
props: Omit<Props, 'value' | 'onChange'> & { value?: ControlledValue },
|
||||
) {
|
||||
const [value, setValue] = useState<ControlledValue>(props.value ?? initialValue)
|
||||
|
||||
const handleChange: ChangeHandler = (e) => {
|
||||
const next =
|
||||
e.target.type === 'checkbox'
|
||||
? (e.target as HTMLInputElement).checked
|
||||
: e.target.value
|
||||
setValue(next)
|
||||
}
|
||||
|
||||
return (
|
||||
<Component
|
||||
{...(props as Props)}
|
||||
value={value as Props extends { value?: infer V } ? V : never}
|
||||
onChange={handleChange as Props extends { onChange?: infer H } ? H : never}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return ControlledStory as ComponentType<
|
||||
Omit<Props, 'value' | 'onChange'> & { value?: ControlledValue }
|
||||
>
|
||||
}
|
||||
4
src/stories/tsconfig.json
Normal file
4
src/stories/tsconfig.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"extends": "../.storybook/tsconfig.json",
|
||||
"include": ["./**/*"]
|
||||
}
|
||||
5
src/storybook.css
Normal file
5
src/storybook.css
Normal file
@ -0,0 +1,5 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
@source '../packages/components/src/**/*.tsx';
|
||||
@source './.storybook/**/*.tsx';
|
||||
@source './stories/**/*.tsx';
|
||||
61
src/vitest.config.ts
Normal file
61
src/vitest.config.ts
Normal file
@ -0,0 +1,61 @@
|
||||
import path from 'node:path'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
import { defineConfig } from 'vitest/config'
|
||||
import { storybookTest } from '@storybook/addon-vitest/vitest-plugin'
|
||||
import { playwright } from '@vitest/browser-playwright'
|
||||
|
||||
const dirname = path.dirname(fileURLToPath(import.meta.url))
|
||||
const srcDir = dirname
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [tailwindcss()],
|
||||
optimizeDeps: {
|
||||
include: [
|
||||
'react/jsx-dev-runtime',
|
||||
'mockdate',
|
||||
'msw-storybook-addon',
|
||||
'react-router-dom',
|
||||
'storybook/test',
|
||||
'lucide-react',
|
||||
'lodash/debounce',
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@webui/components': path.join(srcDir, 'packages/components/src'),
|
||||
'@webui/contracts': path.join(srcDir, 'packages/contracts/src'),
|
||||
'@webui/core': path.join(srcDir, 'packages/core/src'),
|
||||
},
|
||||
},
|
||||
esbuild: {
|
||||
jsx: 'automatic',
|
||||
jsxImportSource: 'react',
|
||||
},
|
||||
test: {
|
||||
projects: [
|
||||
{
|
||||
extends: true,
|
||||
plugins: [
|
||||
storybookTest({ configDir: path.join(dirname, '.storybook') }),
|
||||
],
|
||||
test: {
|
||||
name: 'storybook',
|
||||
browser: {
|
||||
enabled: true,
|
||||
headless: true,
|
||||
provider: playwright({}),
|
||||
instances: [{ browser: 'chromium' }],
|
||||
},
|
||||
coverage: {
|
||||
provider: 'v8',
|
||||
reporter: ['text', 'html', 'json-summary'],
|
||||
reportsDirectory: './coverage/storybook',
|
||||
include: ['packages/components/src/**/*.{ts,tsx}'],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
})
|
||||
1
src/vitest.shims.d.ts
vendored
Normal file
1
src/vitest.shims.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="@vitest/browser-playwright" />
|
||||
8
tsconfig.json
Normal file
8
tsconfig.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"extends": "./src/stories/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"declaration": false,
|
||||
"declarationMap": false
|
||||
},
|
||||
"include": ["src/stories/**/*.ts", "src/stories/**/*.tsx"]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user