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/
|
node_modules/
|
||||||
dist/
|
dist/
|
||||||
|
coverage/
|
||||||
|
storybook-static/
|
||||||
|
src/storybook-static/
|
||||||
*.tsbuildinfo
|
*.tsbuildinfo
|
||||||
.DS_Store
|
.DS_Store
|
||||||
npm-debug.log*
|
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).
|
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
|
## [v0.2.0] - 2026-05-24
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
|
|||||||
@ -21,8 +21,11 @@ cd src
|
|||||||
npm install
|
npm install
|
||||||
npm run build
|
npm run build
|
||||||
npm test
|
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`).
|
Tests and coverage badges: **`utils/Run-Tests/Run-Tests.bat`** (plugin config in `utils/Run-Tests/scriptsettings.json`; uses `NpmJestTest`).
|
||||||
|
|
||||||
## Release to npmjs
|
## 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",
|
"name": "maksit-webui",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.2.0",
|
"version": "0.3.0",
|
||||||
"description": "Shared React UI library for MaksIT Certs UI and Vault WebUI",
|
"description": "Shared React UI library for MaksIT Certs UI and Vault WebUI",
|
||||||
"workspaces": [
|
"workspaces": [
|
||||||
"packages/*"
|
"packages/*"
|
||||||
],
|
],
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=20"
|
"node": ">=20.19"
|
||||||
},
|
},
|
||||||
"overrides": {
|
"overrides": {
|
||||||
"zod": "^4.4.3",
|
"zod": "^4.4.3",
|
||||||
@ -19,13 +19,46 @@
|
|||||||
"test": "jest --config jest.config.cjs",
|
"test": "jest --config jest.config.cjs",
|
||||||
"test:coverage": "jest --config jest.config.cjs --coverage",
|
"test:coverage": "jest --config jest.config.cjs --coverage",
|
||||||
"typecheck": "npm run typecheck --workspaces --if-present",
|
"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": {
|
"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/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",
|
"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",
|
"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 |
|
| `Layout` | App chrome / navigation wrapper |
|
||||||
| `Offcanvas` | Slide-over panel |
|
| `Offcanvas` | Slide-over panel |
|
||||||
| `LazyLoadTable` | Incrementally loaded table |
|
| `LazyLoadTable` | Incrementally loaded table |
|
||||||
| `VaultStyleDataTable`, `VaultStyleListSection` | Vault-style list layouts |
|
|
||||||
| `EntityScopesSummary` | Entity scope permissions summary |
|
| `EntityScopesSummary` | Entity scope permissions summary |
|
||||||
| `Toast`, `addToast` | Toast notifications |
|
| `Toast`, `addToast` | Toast notifications |
|
||||||
| `FieldContainer` | Label + validation wrapper for fields |
|
| `FieldContainer` | Label + validation wrapper for fields |
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@maks-it.com/webui-components",
|
"name": "@maks-it.com/webui-components",
|
||||||
"version": "0.2.0",
|
"version": "0.3.0",
|
||||||
"description": "Shared React components for MaksIT WebUI apps",
|
"description": "Shared React components for MaksIT WebUI apps",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"main": "./dist/index.cjs",
|
"main": "./dist/index.cjs",
|
||||||
@ -33,8 +33,8 @@
|
|||||||
"directory": "src/packages/components"
|
"directory": "src/packages/components"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@maks-it.com/webui-contracts": "^0.2.0",
|
"@maks-it.com/webui-contracts": "^0.3.0",
|
||||||
"@maks-it.com/webui-core": "^0.2.0",
|
"@maks-it.com/webui-core": "^0.3.0",
|
||||||
"date-fns": "^4.3.0",
|
"date-fns": "^4.3.0",
|
||||||
"lodash": "^4.18.1"
|
"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 { mapPagedToDataTable, type DataTablePageView, type PagedResponse } from '@maks-it.com/webui-core'
|
||||||
import { Plus, Trash2, Edit } from 'lucide-react'
|
import { Plus, Trash2, Edit } from 'lucide-react'
|
||||||
import debounce from 'lodash/debounce'
|
import debounce from 'lodash/debounce'
|
||||||
|
import { colSpanClass, type GridColSpan } from '../../functions/tailwind'
|
||||||
|
|
||||||
|
|
||||||
interface FilterProps {
|
interface FilterProps {
|
||||||
@ -27,7 +28,7 @@ export interface DataTableColumn<T, K extends keyof T = keyof T> {
|
|||||||
cell: (props: CellProps<T, K>) => React.ReactNode
|
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>
|
rawd?: PagedResponse<T> | DataTablePageView<T>
|
||||||
columns: DataTableColumn<T>[]
|
columns: DataTableColumn<T>[]
|
||||||
maxRecordsPerPage?: number
|
maxRecordsPerPage?: number
|
||||||
@ -44,7 +45,7 @@ interface DataTableProps<T> {
|
|||||||
onFilterChange?: (filters: Record<string, string>) => void
|
onFilterChange?: (filters: Record<string, string>) => void
|
||||||
onPreviousPage?: (pageNumber: number) => void
|
onPreviousPage?: (pageNumber: number) => void
|
||||||
onNextPage?: (pageNumber: number) => void
|
onNextPage?: (pageNumber: number) => void
|
||||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
colspan?: GridColSpan
|
||||||
|
|
||||||
storageKey?: string
|
storageKey?: string
|
||||||
}
|
}
|
||||||
@ -405,7 +406,7 @@ const DataTable = <T extends Record<string, unknown>,>(props: DataTableProps<T>)
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
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] && (
|
{columns[0] && (
|
||||||
<div
|
<div
|
||||||
ref={filterMeasureRef}
|
ref={filterMeasureRef}
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import {
|
import {
|
||||||
DataTable,
|
DataTable,
|
||||||
DataTableColumn
|
DataTableColumn,
|
||||||
|
type DataTableProps,
|
||||||
} from './DataTable'
|
} from './DataTable'
|
||||||
|
|
||||||
import {
|
import {
|
||||||
@ -9,7 +10,8 @@ import {
|
|||||||
} from './helpers'
|
} from './helpers'
|
||||||
|
|
||||||
export type {
|
export type {
|
||||||
DataTableColumn
|
DataTableColumn,
|
||||||
|
DataTableProps,
|
||||||
}
|
}
|
||||||
|
|
||||||
export { DataTableFilter } from './DataTableFilter'
|
export { DataTableFilter } from './DataTableFilter'
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import { FC, ReactNode } from 'react'
|
import { FC, ReactNode } from 'react'
|
||||||
|
|
||||||
interface FormContentProps {
|
export interface FormContentProps {
|
||||||
children?: ReactNode
|
children?: ReactNode
|
||||||
/** Merged after base layout; use e.g. `flex flex-col overflow-hidden` when a child should fill height (iframe). */
|
/** Merged after base layout; use e.g. `flex flex-col overflow-hidden` when a child should fill height (iframe). */
|
||||||
className?: string
|
className?: string
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { FC } from 'react'
|
import { FC, type ReactNode } from 'react'
|
||||||
import { MainContainer } from './MainContainer'
|
import { MainContainer } from './MainContainer'
|
||||||
import { SideMenu, SideMenuProps } from './SideMenu'
|
import { SideMenu, SideMenuProps } from './SideMenu'
|
||||||
import { Container } from './Container'
|
import { Container } from './Container'
|
||||||
@ -9,7 +9,7 @@ import { Content } from './Content'
|
|||||||
interface LayoutProps {
|
interface LayoutProps {
|
||||||
sideMenu: SideMenuProps
|
sideMenu: SideMenuProps
|
||||||
header: HeaderProps
|
header: HeaderProps
|
||||||
children: React.ReactNode
|
children: ReactNode
|
||||||
footer: FooterProps
|
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 {
|
interface LazyLoadTableColumnProps {
|
||||||
key: string
|
key: string
|
||||||
title: string
|
title: string
|
||||||
dataIndex: string
|
dataIndex: string
|
||||||
renderColumn?: (value: unknown) => React.ReactNode
|
renderColumn?: (value: unknown) => ReactNode
|
||||||
}
|
}
|
||||||
|
|
||||||
interface LazyLoadTableProps {
|
interface LazyLoadTableProps {
|
||||||
data: Record<string, unknown>[]
|
data: Record<string, unknown>[]
|
||||||
columns: LazyLoadTableColumnProps[]
|
columns: LazyLoadTableColumnProps[]
|
||||||
loadMore: () => void
|
loadMore: () => void
|
||||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
colspan?: GridColSpan
|
||||||
}
|
}
|
||||||
|
|
||||||
const LazyLoadTable: FC<LazyLoadTableProps> = (props) => {
|
const LazyLoadTable: FC<LazyLoadTableProps> = (props) => {
|
||||||
@ -51,7 +52,7 @@ const LazyLoadTable: FC<LazyLoadTableProps> = (props) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`col-span-${colspan}`}>
|
<div className={colSpanClass(colspan)}>
|
||||||
<table className={'w-full border-collapse'}>
|
<table className={'w-full border-collapse'}>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
|||||||
@ -1,11 +1,12 @@
|
|||||||
import { FC, ReactNode, useCallback, useEffect } from 'react'
|
import { FC, ReactNode, useCallback, useEffect } from 'react'
|
||||||
|
import { colSpanClass, type GridColSpan } from '../functions/tailwind'
|
||||||
|
|
||||||
export interface OffcanvasProps {
|
export interface OffcanvasProps {
|
||||||
children: ReactNode
|
children: ReactNode
|
||||||
isOpen?: boolean
|
isOpen?: boolean
|
||||||
onOpen?: () => void
|
onOpen?: () => void
|
||||||
onClose?: () => void
|
onClose?: () => void
|
||||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
colspan?: GridColSpan
|
||||||
}
|
}
|
||||||
|
|
||||||
const Offcanvas: FC<OffcanvasProps> = (props) => {
|
const Offcanvas: FC<OffcanvasProps> = (props) => {
|
||||||
@ -30,7 +31,7 @@ const Offcanvas: FC<OffcanvasProps> = (props) => {
|
|||||||
else handleOnClose()
|
else handleOnClose()
|
||||||
}, [isOpen, handleOnOpen, handleOnClose])
|
}, [isOpen, handleOnOpen, handleOnClose])
|
||||||
|
|
||||||
const leftSpan = 12 - colspan
|
const leftSpan = (12 - colspan) as GridColSpan
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@ -42,10 +43,8 @@ const Offcanvas: FC<OffcanvasProps> = (props) => {
|
|||||||
].join(' ')}
|
].join(' ')}
|
||||||
>
|
>
|
||||||
<div className={'grid grid-cols-12 h-full w-full'}>
|
<div className={'grid grid-cols-12 h-full w-full'}>
|
||||||
{/* colonna di offset */}
|
<div className={colSpanClass(leftSpan)} aria-hidden={true} />
|
||||||
<div className={`col-span-${leftSpan}`} />
|
<div className={`${colSpanClass(colspan)} min-h-0 bg-white shadow-xl`}>
|
||||||
{/* area principale */}
|
|
||||||
<div className={`col-span-${colspan} min-h-0`}>
|
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</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 { Link } from 'react-router-dom'
|
||||||
|
import { colSpanClass, type GridColSpan } from '../../functions/tailwind'
|
||||||
|
|
||||||
interface CommonButtonProps {
|
interface CommonButtonProps {
|
||||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
colspan?: GridColSpan;
|
||||||
route?: string;
|
route?: string;
|
||||||
buttonHierarchy?: 'primary' | 'secondary' | 'success' | 'error' | 'warning';
|
buttonHierarchy?: 'primary' | 'secondary' | 'success' | 'error' | 'warning';
|
||||||
onClick?: () => void;
|
onClick?: () => void;
|
||||||
@ -13,7 +14,7 @@ type ButtonComponentProps =
|
|||||||
| ({ label: string; children?: never } & CommonButtonProps)
|
| ({ label: string; children?: never } & CommonButtonProps)
|
||||||
| ({ children: ReactNode; label?: never } & CommonButtonProps);
|
| ({ children: ReactNode; label?: never } & CommonButtonProps);
|
||||||
|
|
||||||
const ButtonComponent: React.FC<ButtonComponentProps> = (props) => {
|
const ButtonComponent: FC<ButtonComponentProps> = (props) => {
|
||||||
const {
|
const {
|
||||||
colspan,
|
colspan,
|
||||||
route,
|
route,
|
||||||
@ -25,7 +26,7 @@ const ButtonComponent: React.FC<ButtonComponentProps> = (props) => {
|
|||||||
const isChildren = 'children' in props && props.children !== undefined
|
const isChildren = 'children' in props && props.children !== undefined
|
||||||
const content = 'label' in props ? props.label : props.children
|
const content = 'label' in props ? props.label : props.children
|
||||||
|
|
||||||
const handleClick = (e?: React.MouseEvent) => {
|
const handleClick = (e?: MouseEvent) => {
|
||||||
if (disabled) {
|
if (disabled) {
|
||||||
e?.preventDefault()
|
e?.preventDefault()
|
||||||
return
|
return
|
||||||
@ -63,7 +64,7 @@ const ButtonComponent: React.FC<ButtonComponentProps> = (props) => {
|
|||||||
? (
|
? (
|
||||||
<Link
|
<Link
|
||||||
to={route}
|
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}
|
onClick={handleClick}
|
||||||
tabIndex={disabled ? -1 : undefined}
|
tabIndex={disabled ? -1 : undefined}
|
||||||
aria-disabled={disabled}
|
aria-disabled={disabled}
|
||||||
@ -73,7 +74,7 @@ const ButtonComponent: React.FC<ButtonComponentProps> = (props) => {
|
|||||||
</Link>
|
</Link>
|
||||||
) : (
|
) : (
|
||||||
<button
|
<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}
|
onClick={handleClick}
|
||||||
disabled={disabled}
|
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'
|
import { FieldContainer } from './FieldContainer'
|
||||||
|
|
||||||
interface CheckBoxComponentProps {
|
interface CheckBoxComponentProps {
|
||||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
colspan?: GridColSpan;
|
||||||
label: string;
|
label: string;
|
||||||
value: boolean;
|
value: boolean;
|
||||||
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
|
||||||
errorText?: string;
|
errorText?: string;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const CheckBoxComponent: React.FC<CheckBoxComponentProps> = (props) => {
|
const CheckBoxComponent: FC<CheckBoxComponentProps> = (props) => {
|
||||||
|
|
||||||
const {
|
const {
|
||||||
colspan = 6,
|
colspan = 6,
|
||||||
@ -27,7 +28,7 @@ const CheckBoxComponent: React.FC<CheckBoxComponentProps> = (props) => {
|
|||||||
prevValue.current = value
|
prevValue.current = value
|
||||||
}, [value])
|
}, [value])
|
||||||
|
|
||||||
const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||||
if (prevValue.current === e.target.checked)
|
if (prevValue.current === e.target.checked)
|
||||||
return
|
return
|
||||||
|
|
||||||
|
|||||||
@ -3,13 +3,14 @@ import { parseISO, formatISO, format, getDaysInMonth, addMonths, subMonths } fro
|
|||||||
import { ButtonComponent } from './ButtonComponent'
|
import { ButtonComponent } from './ButtonComponent'
|
||||||
import { TextBoxComponent } from './TextBoxComponent'
|
import { TextBoxComponent } from './TextBoxComponent'
|
||||||
import { CircleX } from 'lucide-react'
|
import { CircleX } from 'lucide-react'
|
||||||
|
import type { GridColSpan } from '../../functions/tailwind'
|
||||||
import { FieldContainer } from './FieldContainer'
|
import { FieldContainer } from './FieldContainer'
|
||||||
import { getInputClasses } from './editorStyles'
|
import { getInputClasses } from './editorStyles'
|
||||||
|
|
||||||
const DISPLAY_FORMAT = 'yyyy-MM-dd HH:mm'
|
const DISPLAY_FORMAT = 'yyyy-MM-dd HH:mm'
|
||||||
|
|
||||||
interface DateTimePickerComponentProps {
|
interface DateTimePickerComponentProps {
|
||||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
colspan?: GridColSpan
|
||||||
label: string
|
label: string
|
||||||
value?: string
|
value?: string
|
||||||
onChange?: (isoString?: string) => void
|
onChange?: (isoString?: string) => void
|
||||||
|
|||||||
@ -1,11 +1,12 @@
|
|||||||
import React, { useState } from 'react'
|
import React, { useState } from 'react'
|
||||||
|
import type { GridColSpan } from '../../functions/tailwind'
|
||||||
import { FieldContainer } from './FieldContainer'
|
import { FieldContainer } from './FieldContainer'
|
||||||
|
|
||||||
interface DualListboxComponentProps {
|
interface DualListboxComponentProps {
|
||||||
label?: string;
|
label?: string;
|
||||||
availableItemsLabel?: string;
|
availableItemsLabel?: string;
|
||||||
selectedItemsLabel?: string;
|
selectedItemsLabel?: string;
|
||||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
colspan?: GridColSpan;
|
||||||
|
|
||||||
idFieldName?: string;
|
idFieldName?: string;
|
||||||
availableItems: string[];
|
availableItems: string[];
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
import { FC, ReactNode } from 'react'
|
import { FC, ReactNode } from 'react'
|
||||||
|
import { colSpanClass, type GridColSpan } from '../../functions/tailwind'
|
||||||
|
|
||||||
interface FieldContainerProps {
|
interface FieldContainerProps {
|
||||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
colspan?: GridColSpan;
|
||||||
label?: string;
|
label?: string;
|
||||||
errorText?: string;
|
errorText?: string;
|
||||||
children: ReactNode
|
children: ReactNode
|
||||||
@ -15,7 +16,7 @@ const FieldContainer: FC<FieldContainerProps> = (props) => {
|
|||||||
children
|
children
|
||||||
} = props
|
} = 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>
|
<label className={`block text-gray-700 text-sm font-bold mb-2 ${!label ? 'invisible' : ''}`}>{label || '\u00A0'}</label>
|
||||||
{children}
|
{children}
|
||||||
<p className={`text-red-500 text-xs italic mt-2 ${!errorText ? 'invisible' : ''}`}>{errorText || '\u00A0'}</p>
|
<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 React, { useRef, useState } from 'react'
|
||||||
|
import { colSpanClass, type GridColSpan } from '../../functions/tailwind'
|
||||||
import { ButtonComponent } from './ButtonComponent'
|
import { ButtonComponent } from './ButtonComponent'
|
||||||
import { Trash2 } from 'lucide-react'
|
import { Trash2 } from 'lucide-react'
|
||||||
|
|
||||||
interface FileUploadComponentProps {
|
interface FileUploadComponentProps {
|
||||||
label?: string
|
label?: string
|
||||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
colspan?: GridColSpan
|
||||||
multiple?: boolean
|
multiple?: boolean
|
||||||
files?: File[]
|
files?: File[]
|
||||||
onChange?: (files: File[]) => void
|
onChange?: (files: File[]) => void
|
||||||
@ -80,7 +81,7 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
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) */}
|
{/* File input (hidden) */}
|
||||||
<input
|
<input
|
||||||
ref={inputRef}
|
ref={inputRef}
|
||||||
|
|||||||
@ -1,10 +1,11 @@
|
|||||||
import React, { useState } from 'react'
|
import React, { useState } from 'react'
|
||||||
|
import type { GridColSpan } from '../../functions/tailwind'
|
||||||
import { FieldContainer } from './FieldContainer'
|
import { FieldContainer } from './FieldContainer'
|
||||||
|
|
||||||
interface ListboxComponentProps {
|
interface ListboxComponentProps {
|
||||||
label?: string;
|
label?: string;
|
||||||
itemsLabel?: string;
|
itemsLabel?: string;
|
||||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
colspan?: GridColSpan;
|
||||||
items: string[];
|
items: string[];
|
||||||
onChange: (items: string[]) => void;
|
onChange: (items: string[]) => void;
|
||||||
errorText?: string;
|
errorText?: string;
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
import React, { useEffect, useRef, useState } from 'react'
|
import React, { useEffect, useRef, useState } from 'react'
|
||||||
|
import type { GridColSpan } from '../../functions/tailwind'
|
||||||
import { FieldContainer } from './FieldContainer'
|
import { FieldContainer } from './FieldContainer'
|
||||||
|
|
||||||
interface RadioOption {
|
interface RadioOption {
|
||||||
@ -9,7 +10,7 @@ interface RadioOption {
|
|||||||
interface RadioGroupComponentProps {
|
interface RadioGroupComponentProps {
|
||||||
options: RadioOption[]
|
options: RadioOption[]
|
||||||
label?: string
|
label?: string
|
||||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
colspan?: GridColSpan
|
||||||
value?: string
|
value?: string
|
||||||
onChange?: (value: string) => void
|
onChange?: (value: string) => void
|
||||||
errorText?: string
|
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 { PagedRequest } from '@maks-it.com/webui-contracts'
|
||||||
import type { SearchResponseBase } from '@maks-it.com/webui-contracts'
|
import type { SearchResponseBase } from '@maks-it.com/webui-contracts'
|
||||||
import { deepEqual } from '@maks-it.com/webui-core'
|
import { deepEqual } from '@maks-it.com/webui-core'
|
||||||
|
import type { GridColSpan } from '../../functions/tailwind'
|
||||||
import { SelectBoxComponent } from './SelectBoxComponent'
|
import { SelectBoxComponent } from './SelectBoxComponent'
|
||||||
|
|
||||||
export type RemoteSelectSearchDataSource<TRequest extends PagedRequest> = (
|
export type RemoteSelectSearchDataSource<TRequest extends PagedRequest> = (
|
||||||
@ -13,7 +14,7 @@ export interface RemoteSelectBoxProps<TRequest extends PagedRequest> {
|
|||||||
dataSource: RemoteSelectSearchDataSource<TRequest>
|
dataSource: RemoteSelectSearchDataSource<TRequest>
|
||||||
additionalFilters?: TRequest
|
additionalFilters?: TRequest
|
||||||
label: string
|
label: string
|
||||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
colspan?: GridColSpan
|
||||||
errorText?: string
|
errorText?: string
|
||||||
idField?: string
|
idField?: string
|
||||||
labelField?: string
|
labelField?: string
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
import { Copy, Dices, Eye, EyeOff } from 'lucide-react'
|
import { Copy, Dices, Eye, EyeOff } from 'lucide-react'
|
||||||
import { ChangeEvent, FC, useRef, useState } from 'react'
|
import { ChangeEvent, FC, useRef, useState } from 'react'
|
||||||
|
import type { GridColSpan } from '../../functions/tailwind'
|
||||||
import { FieldContainer } from './FieldContainer'
|
import { FieldContainer } from './FieldContainer'
|
||||||
import { getInputClasses } from './editorStyles'
|
import { getInputClasses } from './editorStyles'
|
||||||
|
|
||||||
@ -7,7 +8,7 @@ export type SecretDataSource = () => Promise<string | undefined>
|
|||||||
|
|
||||||
export interface SecretComponentProps {
|
export interface SecretComponentProps {
|
||||||
label: string
|
label: string
|
||||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
colspan?: GridColSpan
|
||||||
errorText?: string
|
errorText?: string
|
||||||
value?: string
|
value?: string
|
||||||
onChange?: (e: ChangeEvent<HTMLInputElement>) => void
|
onChange?: (e: ChangeEvent<HTMLInputElement>) => void
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import debounce from 'lodash/debounce'
|
import debounce from 'lodash/debounce'
|
||||||
import { CircleX } from 'lucide-react'
|
import { CircleX } from 'lucide-react'
|
||||||
import { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
import { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||||
|
import type { GridColSpan } from '../../functions/tailwind'
|
||||||
import { FieldContainer } from './FieldContainer'
|
import { FieldContainer } from './FieldContainer'
|
||||||
import { getInputClasses } from './editorStyles'
|
import { getInputClasses } from './editorStyles'
|
||||||
|
|
||||||
@ -11,7 +12,7 @@ export interface SelectBoxComponentOption {
|
|||||||
|
|
||||||
interface SelectBoxComponentProps {
|
interface SelectBoxComponentProps {
|
||||||
label: string
|
label: string
|
||||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
colspan?: GridColSpan
|
||||||
errorText?: string
|
errorText?: string
|
||||||
options?: SelectBoxComponentOption[]
|
options?: SelectBoxComponentOption[]
|
||||||
|
|
||||||
|
|||||||
@ -1,11 +1,12 @@
|
|||||||
import { Eye, EyeOff } from 'lucide-react'
|
import { Eye, EyeOff } from 'lucide-react'
|
||||||
import { ChangeEvent, FC, useEffect, useRef, useState } from 'react'
|
import { ChangeEvent, FC, useEffect, useRef, useState } from 'react'
|
||||||
|
import type { GridColSpan } from '../../functions/tailwind'
|
||||||
import { FieldContainer } from './FieldContainer'
|
import { FieldContainer } from './FieldContainer'
|
||||||
import { getInputClasses } from './editorStyles'
|
import { getInputClasses } from './editorStyles'
|
||||||
|
|
||||||
interface TextBoxComponentProps {
|
interface TextBoxComponentProps {
|
||||||
label: string
|
label: string
|
||||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
colspan?: GridColSpan
|
||||||
errorText?: string
|
errorText?: string
|
||||||
value?: string | number
|
value?: string | number
|
||||||
onChange?: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void
|
onChange?: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void
|
||||||
|
|||||||
@ -1,4 +1,6 @@
|
|||||||
import React, { useState, ReactNode } from 'react'
|
import React, { useState, ReactNode } from 'react'
|
||||||
|
import type { GridColSpan } from '../../functions/tailwind'
|
||||||
|
import { FieldContainer } from './FieldContainer'
|
||||||
|
|
||||||
interface TreeNode {
|
interface TreeNode {
|
||||||
id: string;
|
id: string;
|
||||||
@ -11,7 +13,7 @@ interface TreeNode {
|
|||||||
interface TreeViewProps {
|
interface TreeViewProps {
|
||||||
data: TreeNode[];
|
data: TreeNode[];
|
||||||
label?: string;
|
label?: string;
|
||||||
colspan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
colspan?: GridColSpan;
|
||||||
}
|
}
|
||||||
|
|
||||||
const TreeViewComponent: React.FC<TreeViewProps> = (props) => {
|
const TreeViewComponent: React.FC<TreeViewProps> = (props) => {
|
||||||
@ -75,10 +77,9 @@ const TreeViewComponent: React.FC<TreeViewProps> = (props) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`col-span-${colspan}`}>
|
<FieldContainer colspan={colspan} label={label}>
|
||||||
{label && <label className={'block text-gray-700 text-sm font-bold mb-2'}>{label}</label>}
|
|
||||||
<div className={'border p-4 rounded-md'}>{renderTree(data)}</div>
|
<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'
|
} from './components/editors/RemoteSelectBoxComponent'
|
||||||
export { addToast } from './components/Toast/addToast'
|
export { addToast } from './components/Toast/addToast'
|
||||||
export { Toast as ToastContainer } from './components/Toast'
|
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 { EntityScopesSummary } from './components/Scopes'
|
||||||
export type { EntityScopesSummaryProps } from './components/Scopes'
|
export type { EntityScopesSummaryProps } from './components/Scopes'
|
||||||
export { Layout } from './components/Layout'
|
export { Layout } from './components/Layout'
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@maks-it.com/webui-contracts",
|
"name": "@maks-it.com/webui-contracts",
|
||||||
"version": "0.2.0",
|
"version": "0.3.0",
|
||||||
"description": "Shared TypeScript contracts for MaksIT WebUI apps",
|
"description": "Shared TypeScript contracts for MaksIT WebUI apps",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"main": "./dist/index.cjs",
|
"main": "./dist/index.cjs",
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@maks-it.com/webui-core",
|
"name": "@maks-it.com/webui-core",
|
||||||
"version": "0.2.0",
|
"version": "0.3.0",
|
||||||
"description": "Shared utilities and hooks for MaksIT WebUI apps",
|
"description": "Shared utilities and hooks for MaksIT WebUI apps",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"main": "./dist/index.cjs",
|
"main": "./dist/index.cjs",
|
||||||
@ -34,7 +34,7 @@
|
|||||||
"directory": "src/packages/core"
|
"directory": "src/packages/core"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@maks-it.com/webui-contracts": "^0.2.0",
|
"@maks-it.com/webui-contracts": "^0.3.0",
|
||||||
"date-fns": "^4.3.0"
|
"date-fns": "^4.3.0"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"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