panic.haus/web-ui
1
0
Fork 0
Code Issues Pull Requests 10 Actions Packages Projects Releases Activity

update prettier
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Beatrice Dellacà
2026-02-23 14:23:37 +01:00
parent c2e370f0a8
commit f1c7e245aa
36 changed files with 2137 additions and 2108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
.drone.yml
View File

@@ -4,34 +4,34 @@ type: docker
name: web-ui-ci
trigger:
branch:
- main
- develop
event:
- push
- pull_request
branch:
- main
- develop
event:
- push
- pull_request
steps:
- name: install
image: node:22
commands:
- corepack enable
- corepack prepare yarn@1.22.22 --activate
- yarn install --frozen-lockfile
- name: install
image: node:22
commands:
- corepack enable
- corepack prepare yarn@1.22.22 --activate
- yarn install --frozen-lockfile
- name: lint
image: node:22
commands:
- corepack enable
- corepack prepare yarn@1.22.22 --activate
- yarn lint
- name: lint
image: node:22
commands:
- corepack enable
- corepack prepare yarn@1.22.22 --activate
- yarn lint
- name: build
image: node:22
commands:
- corepack enable
- corepack prepare yarn@1.22.22 --activate
- yarn build
- name: build
image: node:22
commands:
- corepack enable
- corepack prepare yarn@1.22.22 --activate
- yarn build
---
kind: pipeline
@@ -39,22 +39,22 @@ type: docker
name: web-ui-publish
trigger:
branch:
- main
event:
- promote
target:
- production
branch:
- main
event:
- promote
target:
- production
steps:
- name: publish-npm
image: node:22
environment:
NEXUS_NPM_TOKEN:
from_secret: nexus_npm_token
commands:
- corepack enable
- corepack prepare yarn@1.22.22 --activate
- yarn install --frozen-lockfile
- npm config set //nexus.beatrice.wtf/repository/npm-hosted/:_authToken "$NEXUS_NPM_TOKEN"
- yarn publish:nexus
- name: publish-npm
image: node:22
environment:
NEXUS_NPM_TOKEN:
from_secret: nexus_npm_token
commands:
- corepack enable
- corepack prepare yarn@1.22.22 --activate
- yarn install --frozen-lockfile
- npm config set //nexus.beatrice.wtf/repository/npm-hosted/:_authToken "$NEXUS_NPM_TOKEN"
- yarn publish:nexus

10
.prettierrc
View File

@@ -1,7 +1,7 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"singleQuote": true,
"semi": true,
"printWidth": 100,
"tabWidth": 2
"$schema": "https://json.schemastore.org/prettierrc",
"singleQuote": true,
"semi": true,
"printWidth": 100,
"tabWidth": 4
}

18
.storybook/main.ts
View File

@@ -1,15 +1,15 @@
import type { StorybookConfig } from '@storybook/react-vite';
const config: StorybookConfig = {
stories: ['../src/**/*.stories.@(ts|tsx|mdx)'],
addons: ['@storybook/addon-docs', '@storybook/addon-a11y', '@storybook/addon-themes'],
framework: {
name: '@storybook/react-vite',
options: {},
},
docs: {
autodocs: 'tag',
},
stories: ['../src/**/*.stories.@(ts|tsx|mdx)'],
addons: ['@storybook/addon-docs', '@storybook/addon-a11y', '@storybook/addon-themes'],
framework: {
name: '@storybook/react-vite',
options: {},
},
docs: {
autodocs: 'tag',
},
};
export default config;

4
.storybook/preview.css
View File

@@ -3,6 +3,6 @@
@tailwind utilities;
body {
background-color: var(--bg-page);
color: var(--text-primary);
background-color: var(--bg-page);
color: var(--text-primary);
}

30
.storybook/preview.tsx
View File

@@ -6,22 +6,22 @@ import '../src/styles/base.css';
import '../src/styles/components.css';
const preview: Preview = {
decorators: [
(Story) => (
<MemoryRouter>
<Story />
</MemoryRouter>
),
],
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
decorators: [
(Story) => (
<MemoryRouter>
<Story />
</MemoryRouter>
),
],
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
layout: 'centered',
},
layout: 'centered',
},
};
export default preview;

74
eslint.config.mjs
View File

@@ -5,44 +5,44 @@ import globals from 'globals';
import tseslint from 'typescript-eslint';
export default tseslint.config(
{
ignores: [
'dist',
'coverage',
'storybook-static',
'node_modules',
'*.config.cjs',
'vite.config.js',
'vite.config.d.ts',
'tailwind-preset.cjs',
],
},
js.configs.recommended,
...tseslint.configs.recommended,
{
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
globals: {
...globals.browser,
...globals.node,
},
{
ignores: [
'dist',
'coverage',
'storybook-static',
'node_modules',
'*.config.cjs',
'vite.config.js',
'vite.config.d.ts',
'tailwind-preset.cjs',
],
},
rules: {
'no-empty': ['error', { allowEmptyCatch: true }],
js.configs.recommended,
...tseslint.configs.recommended,
{
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
globals: {
...globals.browser,
...globals.node,
},
},
rules: {
'no-empty': ['error', { allowEmptyCatch: true }],
},
},
},
{
files: ['src/**/*.{ts,tsx}'],
ignores: ['src/**/*.stories.ts', 'src/**/*.stories.tsx'],
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
{
files: ['src/**/*.{ts,tsx}'],
ignores: ['src/**/*.stories.ts', 'src/**/*.stories.tsx'],
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
},
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
},
},
);

162
package.json
View File

@@ -1,86 +1,86 @@
{
"name": "@panic/web-ui",
"version": "0.1.7",
"license": "AGPL-3.0-only",
"description": "Core components for panic.haus web applications",
"type": "module",
"main": "./dist/index.js",
"module": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js"
"name": "@panic/web-ui",
"version": "0.1.7",
"license": "AGPL-3.0-only",
"description": "Core components for panic.haus web applications",
"type": "module",
"main": "./dist/index.js",
"module": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js"
},
"./components/MDXEditorField": {
"types": "./dist/components/MDXEditorField.d.ts",
"import": "./dist/components/MDXEditorField.js"
},
"./styles/base.css": "./dist/styles/base.css",
"./styles/components.css": "./dist/styles/components.css",
"./styles/utilities.css": "./dist/styles/utilities.css",
"./tailwind-preset": "./dist/tailwind-preset.cjs"
},
"./components/MDXEditorField": {
"types": "./dist/components/MDXEditorField.d.ts",
"import": "./dist/components/MDXEditorField.js"
"files": [
"dist"
],
"scripts": {
"clean": "rm -rf dist",
"build": "yarn clean && vite build && tsc -p tsconfig.build.json && mkdir -p dist/styles && cp src/styles/base.css dist/styles/base.css && tailwindcss -c tailwind.build.config.cjs -i src/styles/components.css -o dist/styles/components.css --minify && tailwindcss -c tailwind.build.config.cjs -i src/styles/utilities.css -o dist/styles/utilities.css --minify && cp tailwind-preset.cjs dist/tailwind-preset.cjs",
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"format": "prettier . --write",
"format:check": "prettier . --check",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"prepublishOnly": "yarn build",
"publish:nexus": "npm publish --registry ${NEXUS_NPM_REGISTRY:-https://nexus.beatrice.wtf/repository/npm-hosted/}"
},
"./styles/base.css": "./dist/styles/base.css",
"./styles/components.css": "./dist/styles/components.css",
"./styles/utilities.css": "./dist/styles/utilities.css",
"./tailwind-preset": "./dist/tailwind-preset.cjs"
},
"files": [
"dist"
],
"scripts": {
"clean": "rm -rf dist",
"build": "yarn clean && vite build && tsc -p tsconfig.build.json && mkdir -p dist/styles && cp src/styles/base.css dist/styles/base.css && tailwindcss -c tailwind.build.config.cjs -i src/styles/components.css -o dist/styles/components.css --minify && tailwindcss -c tailwind.build.config.cjs -i src/styles/utilities.css -o dist/styles/utilities.css --minify && cp tailwind-preset.cjs dist/tailwind-preset.cjs",
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"format": "prettier . --write",
"format:check": "prettier . --check",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"prepublishOnly": "yarn build",
"publish:nexus": "npm publish --registry ${NEXUS_NPM_REGISTRY:-https://nexus.beatrice.wtf/repository/npm-hosted/}"
},
"publishConfig": {
"registry": "https://nexus.beatrice.wtf/repository/npm-hosted/",
"access": "restricted"
},
"peerDependencies": {
"@heroicons/react": "^2.2.0",
"@mdxeditor/editor": "^3.52.4",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-router-dom": "^7.0.0"
},
"peerDependenciesMeta": {
"@mdxeditor/editor": {
"optional": true
"publishConfig": {
"registry": "https://nexus.beatrice.wtf/repository/npm-hosted/",
"access": "restricted"
},
"peerDependencies": {
"@heroicons/react": "^2.2.0",
"@mdxeditor/editor": "^3.52.4",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-router-dom": "^7.0.0"
},
"peerDependenciesMeta": {
"@mdxeditor/editor": {
"optional": true
}
},
"devDependencies": {
"@codemirror/language": "^6.11.3",
"@eslint/js": "^9",
"@heroicons/react": "^2.2.0",
"@lezer/highlight": "^1.2.1",
"@mdxeditor/editor": "^3.52.4",
"@storybook/addon-a11y": "^10.2.10",
"@storybook/addon-docs": "^10.2.10",
"@storybook/addon-themes": "^10.2.10",
"@storybook/react": "^10.2.10",
"@storybook/react-vite": "^10.2.10",
"@testing-library/dom": "^10.4.1",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"@vitejs/plugin-react": "^5.0.0",
"eslint": "^9",
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-react-refresh": "^0.5.1",
"globals": "^17.3.0",
"postcss": "^8.4.49",
"prettier": "^3.8.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-router-dom": "^7.0.0",
"storybook": "^10.2.10",
"tailwindcss": "^3.4.16",
"typescript": "^5.6.2",
"typescript-eslint": "^8.56.0",
"vite": "^7.0.0",
"yjs": "^13.6.24"
}
},
"devDependencies": {
"@codemirror/language": "^6.11.3",
"@eslint/js": "^9",
"@heroicons/react": "^2.2.0",
"@lezer/highlight": "^1.2.1",
"@mdxeditor/editor": "^3.52.4",
"@storybook/addon-a11y": "^10.2.10",
"@storybook/addon-docs": "^10.2.10",
"@storybook/addon-themes": "^10.2.10",
"@storybook/react": "^10.2.10",
"@storybook/react-vite": "^10.2.10",
"@testing-library/dom": "^10.4.1",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"@vitejs/plugin-react": "^5.0.0",
"eslint": "^9",
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-react-refresh": "^0.5.1",
"globals": "^17.3.0",
"postcss": "^8.4.49",
"prettier": "^3.8.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-router-dom": "^7.0.0",
"storybook": "^10.2.10",
"tailwindcss": "^3.4.16",
"typescript": "^5.6.2",
"typescript-eslint": "^8.56.0",
"vite": "^7.0.0",
"yjs": "^13.6.24"
}
}

8
postcss.config.cjs
View File

@@ -1,7 +1,7 @@
module.exports = {
plugins: {
tailwindcss: {
config: './tailwind.storybook.config.cjs',
plugins: {
tailwindcss: {
config: './tailwind.storybook.config.cjs',
},
},
},
};

2
renovate.json
View File

@@ -1,3 +1,3 @@
{
"$schema": "https://docs.renovatebot.com/renovate-schema.json"
"$schema": "https://docs.renovatebot.com/renovate-schema.json"
}

212
src/components/Button.stories.tsx
View File

@@ -3,85 +3,85 @@ import { PlusIcon } from '@heroicons/react/24/solid';
import { Button } from './Button';
const meta = {
title: 'Components/Button',
component: Button,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component:
'Polymorphic button component: renders a native `<button>` or a React Router `<Link>` when `to` is provided.',
},
title: 'Components/Button',
component: Button,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component:
'Polymorphic button component: renders a native `<button>` or a React Router `<Link>` when `to` is provided.',
},
},
},
},
argTypes: {
label: {
description: 'Visible button label text.',
control: 'text',
table: { type: { summary: 'string' } },
argTypes: {
label: {
description: 'Visible button label text.',
control: 'text',
table: { type: { summary: 'string' } },
},
type: {
description: 'Base visual style.',
options: ['solid', 'outlined', 'noborder'],
control: 'inline-radio',
table: { type: { summary: "'solid' | 'outlined' | 'noborder'" } },
},
variant: {
description:
'Color variant. If omitted: `primary` for `solid`, `secondary` for the other types.',
options: ['primary', 'secondary', 'important'],
control: 'inline-radio',
table: { type: { summary: "'primary' | 'secondary' | 'important'" } },
},
size: {
description: 'Button size.',
options: ['sm', 'md', 'lg', 'full'],
control: 'inline-radio',
table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
},
to: {
description: 'Navigation path. When set, the component renders a `<Link>`.',
control: 'text',
table: { type: { summary: 'string' } },
},
htmlType: {
description: 'HTML button type used when rendering a native `<button>`.',
options: ['button', 'submit', 'reset'],
control: 'inline-radio',
table: { type: { summary: "'button' | 'submit' | 'reset'" } },
},
disabled: {
description: 'Disables interaction and hover/click states.',
control: 'boolean',
table: { type: { summary: 'boolean' } },
},
icon: {
description: 'Optional icon component (for example Heroicons).',
control: false,
table: { type: { summary: 'ElementType' } },
},
ariaLabel: {
description: 'Accessible label. Falls back to `label` when not provided.',
control: 'text',
table: { type: { summary: 'string' } },
},
className: {
description: 'Extra CSS classes for the root element.',
control: 'text',
table: { type: { summary: 'string' } },
},
onClick: {
description: 'Click handler callback.',
action: 'clicked',
table: { type: { summary: 'MouseEventHandler<HTMLElement>' } },
},
},
type: {
description: 'Base visual style.',
options: ['solid', 'outlined', 'noborder'],
control: 'inline-radio',
table: { type: { summary: "'solid' | 'outlined' | 'noborder'" } },
args: {
type: 'solid',
variant: 'primary',
size: 'md',
label: 'Save',
},
variant: {
description:
'Color variant. If omitted: `primary` for `solid`, `secondary` for the other types.',
options: ['primary', 'secondary', 'important'],
control: 'inline-radio',
table: { type: { summary: "'primary' | 'secondary' | 'important'" } },
},
size: {
description: 'Button size.',
options: ['sm', 'md', 'lg', 'full'],
control: 'inline-radio',
table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
},
to: {
description: 'Navigation path. When set, the component renders a `<Link>`.',
control: 'text',
table: { type: { summary: 'string' } },
},
htmlType: {
description: 'HTML button type used when rendering a native `<button>`.',
options: ['button', 'submit', 'reset'],
control: 'inline-radio',
table: { type: { summary: "'button' | 'submit' | 'reset'" } },
},
disabled: {
description: 'Disables interaction and hover/click states.',
control: 'boolean',
table: { type: { summary: 'boolean' } },
},
icon: {
description: 'Optional icon component (for example Heroicons).',
control: false,
table: { type: { summary: 'ElementType' } },
},
ariaLabel: {
description: 'Accessible label. Falls back to `label` when not provided.',
control: 'text',
table: { type: { summary: 'string' } },
},
className: {
description: 'Extra CSS classes for the root element.',
control: 'text',
table: { type: { summary: 'string' } },
},
onClick: {
description: 'Click handler callback.',
action: 'clicked',
table: { type: { summary: 'MouseEventHandler<HTMLElement>' } },
},
},
args: {
type: 'solid',
variant: 'primary',
size: 'md',
label: 'Save',
},
} satisfies Meta<typeof Button>;
export default meta;
@@ -90,49 +90,49 @@ type Story = StoryObj<typeof meta>;
export const SolidPrimary: Story = {};
export const SolidImportant: Story = {
args: {
type: 'solid',
variant: 'important',
label: 'Delete',
},
args: {
type: 'solid',
variant: 'important',
label: 'Delete',
},
};
export const OutlinedSecondary: Story = {
args: {
type: 'outlined',
variant: 'secondary',
label: 'Cancel',
},
args: {
type: 'outlined',
variant: 'secondary',
label: 'Cancel',
},
};
export const IconOnly: Story = {
args: {
icon: PlusIcon,
label: undefined,
ariaLabel: 'Add item',
},
args: {
icon: PlusIcon,
label: undefined,
ariaLabel: 'Add item',
},
};
export const LinkButton: Story = {
args: {
to: '/demo',
label: 'Go to demo',
},
args: {
to: '/demo',
label: 'Go to demo',
},
};
export const Disabled: Story = {
args: {
disabled: true,
},
args: {
disabled: true,
},
};
export const SizeMatrix: Story = {
render: (args) => (
<div className="grid grid-cols-1 gap-3">
<Button {...args} size="sm" label="Small" />
<Button {...args} size="md" label="Medium" />
<Button {...args} size="lg" label="Large" />
<Button {...args} size="full" label="Full width" />
</div>
),
render: (args) => (
<div className="grid grid-cols-1 gap-3">
<Button {...args} size="sm" label="Small" />
<Button {...args} size="md" label="Medium" />
<Button {...args} size="lg" label="Large" />
<Button {...args} size="full" label="Full width" />
</div>
),
};

202
src/components/Button.tsx
View File

@@ -7,133 +7,133 @@ type ButtonVariant = 'primary' | 'secondary' | 'important';
type NativeButtonType = 'button' | 'submit' | 'reset';
type ButtonProps = {
label?: string;
type: ButtonType;
variant?: ButtonVariant;
size?: ComponentSize;
to?: string;
htmlType?: NativeButtonType;
onClick?: MouseEventHandler<HTMLElement>;
disabled?: boolean;
icon?: ElementType;
ariaLabel?: string;
className?: string;
label?: string;
type: ButtonType;
variant?: ButtonVariant;
size?: ComponentSize;
to?: string;
htmlType?: NativeButtonType;
onClick?: MouseEventHandler<HTMLElement>;
disabled?: boolean;
icon?: ElementType;
ariaLabel?: string;
className?: string;
};
const SIZE_CLASS: Record<ComponentSize, string> = {
sm: 'h-8 px-3 text-xs',
md: 'h-10 px-4 text-sm',
lg: 'h-12 px-5 text-base',
full: 'h-10 w-full px-4 text-sm',
sm: 'h-8 px-3 text-xs',
md: 'h-10 px-4 text-sm',
lg: 'h-12 px-5 text-base',
full: 'h-10 w-full px-4 text-sm',
};
const ICON_ONLY_SIZE_CLASS: Record<ComponentSize, string> = {
sm: 'h-8 w-8 !p-0',
md: 'h-10 w-10 !p-0',
lg: 'h-12 w-12 !p-0',
full: 'h-10 w-full !p-0',
sm: 'h-8 w-8 !p-0',
md: 'h-10 w-10 !p-0',
lg: 'h-12 w-12 !p-0',
full: 'h-10 w-full !p-0',
};
const ICON_CLASS: Record<ComponentSize, string> = {
sm: 'h-4 w-4',
md: 'h-4 w-4',
lg: 'h-5 w-5',
full: 'h-4 w-4',
sm: 'h-4 w-4',
md: 'h-4 w-4',
lg: 'h-5 w-5',
full: 'h-4 w-4',
};
const ICON_ONLY_CLASS: Record<ComponentSize, string> = {
sm: 'h-4 w-4',
md: 'h-5 w-5',
lg: 'h-6 w-6',
full: 'h-5 w-5',
sm: 'h-4 w-4',
md: 'h-5 w-5',
lg: 'h-6 w-6',
full: 'h-5 w-5',
};
const TYPE_CLASS: Record<ButtonType, string> = {
solid: 'btn-solid',
outlined: 'btn-outlined',
noborder: 'btn-noborder',
solid: 'btn-solid',
outlined: 'btn-outlined',
noborder: 'btn-noborder',
};
const VARIANT_CLASS: Record<ButtonVariant, string> = {
primary: 'btn-primary',
secondary: 'btn-secondary',
important: 'btn-important',
primary: 'btn-primary',
secondary: 'btn-secondary',
important: 'btn-important',
};
function resolveVariant(type: ButtonType, variant?: ButtonVariant): ButtonVariant {
if (variant) {
return variant;
}
if (variant) {
return variant;
}
return type === 'solid' ? 'primary' : 'secondary';
return type === 'solid' ? 'primary' : 'secondary';
}
export function Button({
label,
type,
variant,
size = 'md',
to,
htmlType = 'button',
onClick,
disabled = false,
icon: Icon,
ariaLabel,
className = '',
label,
type,
variant,
size = 'md',
to,
htmlType = 'button',
onClick,
disabled = false,
icon: Icon,
ariaLabel,
className = '',
}: Readonly<ButtonProps>) {
const isIconOnly = Icon != null && !label;
const resolvedVariant = resolveVariant(type, variant);
const composedClassName = [
TYPE_CLASS[type],
VARIANT_CLASS[resolvedVariant],
isIconOnly ? ICON_ONLY_SIZE_CLASS[size] : SIZE_CLASS[size],
Icon && label ? 'gap-1.5' : '',
disabled ? 'pointer-events-none cursor-not-allowed opacity-45 saturate-50' : '',
className,
]
.join(' ')
.trim();
const computedAriaLabel = ariaLabel ?? label;
const iconClass = `${isIconOnly ? ICON_ONLY_CLASS[size] : ICON_CLASS[size]} shrink-0`;
const content = (
<>
{Icon ? <Icon className={iconClass} aria-hidden="true" /> : null}
{label ?? null}
</>
);
const handleLinkClick: MouseEventHandler<HTMLElement> = (event) => {
if (disabled) {
event.preventDefault();
return;
}
onClick?.(event);
};
if (to) {
return (
<Link
to={to}
onClick={handleLinkClick}
aria-disabled={disabled}
aria-label={computedAriaLabel}
tabIndex={disabled ? -1 : undefined}
className={composedClassName}
>
{content}
</Link>
const isIconOnly = Icon != null && !label;
const resolvedVariant = resolveVariant(type, variant);
const composedClassName = [
TYPE_CLASS[type],
VARIANT_CLASS[resolvedVariant],
isIconOnly ? ICON_ONLY_SIZE_CLASS[size] : SIZE_CLASS[size],
Icon && label ? 'gap-1.5' : '',
disabled ? 'pointer-events-none cursor-not-allowed opacity-45 saturate-50' : '',
className,
]
.join(' ')
.trim();
const computedAriaLabel = ariaLabel ?? label;
const iconClass = `${isIconOnly ? ICON_ONLY_CLASS[size] : ICON_CLASS[size]} shrink-0`;
const content = (
<>
{Icon ? <Icon className={iconClass} aria-hidden="true" /> : null}
{label ?? null}
</>
);
}
return (
<button
type={htmlType}
onClick={onClick}
disabled={disabled}
aria-label={computedAriaLabel}
className={composedClassName}
>
{content}
</button>
);
const handleLinkClick: MouseEventHandler<HTMLElement> = (event) => {
if (disabled) {
event.preventDefault();
return;
}
onClick?.(event);
};
if (to) {
return (
<Link
to={to}
onClick={handleLinkClick}
aria-disabled={disabled}
aria-label={computedAriaLabel}
tabIndex={disabled ? -1 : undefined}
className={composedClassName}
>
{content}
</Link>
);
}
return (
<button
type={htmlType}
onClick={onClick}
disabled={disabled}
aria-label={computedAriaLabel}
className={composedClassName}
>
{content}
</button>
);
}

151
src/components/Chip.stories.tsx
View File

@@ -2,50 +2,51 @@ import type { Meta, StoryObj } from '@storybook/react';
import { Chip } from './Chip';
const meta = {
title: 'Components/Chip',
component: Chip,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component:
'Compact badge/chip component with solid or outlined style. `tone` accepts a Tailwind color token (for example `cyan-700`) and resolves it to the correct border/background/text color at runtime.',
},
title: 'Components/Chip',
component: Chip,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component:
'Compact badge/chip component with solid or outlined style. `tone` accepts a Tailwind color token (for example `cyan-700`) and resolves it to the correct border/background/text color at runtime.',
},
},
},
},
argTypes: {
variant: {
description: 'Chip visual style.',
options: ['solid', 'outlined'],
control: 'inline-radio',
table: { type: { summary: "'solid' | 'outlined'" } },
argTypes: {
variant: {
description: 'Chip visual style.',
options: ['solid', 'outlined'],
control: 'inline-radio',
table: { type: { summary: "'solid' | 'outlined'" } },
},
tone: {
description:
'Tailwind color token (format: `<color>-<shade>`, for example `cyan-700`, `indigo-600`, `rose-500`).',
control: 'text',
table: { type: { summary: 'string' } },
},
as: {
description:
"Root tag or component to render (for example `'span'`, `'a'`, `'button'`).",
control: false,
table: { type: { summary: 'ElementType' } },
},
className: {
description: 'Extra CSS classes for the root element.',
control: 'text',
table: { type: { summary: 'string' } },
},
children: {
description: 'Text or React node rendered inside the chip.',
control: 'text',
table: { type: { summary: 'ReactNode' } },
},
},
tone: {
description:
'Tailwind color token (format: `<color>-<shade>`, for example `cyan-700`, `indigo-600`, `rose-500`).',
control: 'text',
table: { type: { summary: 'string' } },
args: {
children: 'Published',
variant: 'solid',
},
as: {
description: "Root tag or component to render (for example `'span'`, `'a'`, `'button'`).",
control: false,
table: { type: { summary: 'ElementType' } },
},
className: {
description: 'Extra CSS classes for the root element.',
control: 'text',
table: { type: { summary: 'string' } },
},
children: {
description: 'Text or React node rendered inside the chip.',
control: 'text',
table: { type: { summary: 'ReactNode' } },
},
},
args: {
children: 'Published',
variant: 'solid',
},
} satisfies Meta<typeof Chip>;
export default meta;
@@ -54,44 +55,44 @@ type Story = StoryObj<typeof meta>;
export const SolidDefault: Story = {};
export const OutlinedIndigo: Story = {
args: {
variant: 'outlined',
tone: 'indigo-700',
children: 'Draft',
},
args: {
variant: 'outlined',
tone: 'indigo-700',
children: 'Draft',
},
};
export const OutlinedCyan: Story = {
args: {
variant: 'outlined',
tone: 'cyan-700',
children: 'Archived',
},
args: {
variant: 'outlined',
tone: 'cyan-700',
children: 'Archived',
},
};
export const ToneMatrix: Story = {
render: () => (
<div className="flex flex-wrap items-center gap-2">
<Chip variant="solid">Default</Chip>
<Chip variant="solid" tone="indigo-700">
Indigo
</Chip>
<Chip variant="solid" tone="cyan-700">
Cyan
</Chip>
<Chip variant="solid" tone="rose-600">
Rose
</Chip>
<Chip variant="outlined">Default</Chip>
<Chip variant="outlined" tone="indigo-700">
Indigo
</Chip>
<Chip variant="outlined" tone="cyan-700">
Cyan
</Chip>
<Chip variant="outlined" tone="rose-600">
Rose
</Chip>
</div>
),
render: () => (
<div className="flex flex-wrap items-center gap-2">
<Chip variant="solid">Default</Chip>
<Chip variant="solid" tone="indigo-700">
Indigo
</Chip>
<Chip variant="solid" tone="cyan-700">
Cyan
</Chip>
<Chip variant="solid" tone="rose-600">
Rose
</Chip>
<Chip variant="outlined">Default</Chip>
<Chip variant="outlined" tone="indigo-700">
Indigo
</Chip>
<Chip variant="outlined" tone="cyan-700">
Cyan
</Chip>
<Chip variant="outlined" tone="rose-600">
Rose
</Chip>
</div>
),
};

90
src/components/Chip.tsx
View File

@@ -4,67 +4,67 @@ import type { CSSProperties, ElementType, ReactNode } from 'react';
type ChipVariant = 'solid' | 'outlined';
type ChipProps<T extends ElementType> = {
variant?: ChipVariant;
// Tailwind color token, e.g. "cyan-700", "indigo-500", "rose-600".
tone?: string;
as?: T;
className?: string;
children: ReactNode;
variant?: ChipVariant;
// Tailwind color token, e.g. "cyan-700", "indigo-500", "rose-600".
tone?: string;
as?: T;
className?: string;
children: ReactNode;
};
const variantClassMap: Record<ChipVariant, string> = {
solid: 'chip-solid',
outlined: 'chip-outlined',
solid: 'chip-solid',
outlined: 'chip-outlined',
};
type TailwindPalette = Record<string, string>;
function resolveTailwindToneColor(tone: string | undefined): string | null {
const normalizedTone = tone?.trim().toLowerCase();
if (normalizedTone == null || normalizedTone === '') {
return null;
}
const normalizedTone = tone?.trim().toLowerCase();
if (normalizedTone == null || normalizedTone === '') {
return null;
}
const colorSource = tailwindColors as unknown as Record<string, unknown>;
const lastDashIndex = normalizedTone.lastIndexOf('-');
const colorSource = tailwindColors as unknown as Record<string, unknown>;
const lastDashIndex = normalizedTone.lastIndexOf('-');
if (lastDashIndex === -1) {
const direct = colorSource[normalizedTone];
return typeof direct === 'string' ? direct : null;
}
if (lastDashIndex === -1) {
const direct = colorSource[normalizedTone];
return typeof direct === 'string' ? direct : null;
}
const colorName = normalizedTone.slice(0, lastDashIndex);
const shade = normalizedTone.slice(lastDashIndex + 1);
const palette = colorSource[colorName];
const colorName = normalizedTone.slice(0, lastDashIndex);
const shade = normalizedTone.slice(lastDashIndex + 1);
const palette = colorSource[colorName];
if (palette == null || typeof palette !== 'object') {
return null;
}
if (palette == null || typeof palette !== 'object') {
return null;
}
const shadeColor = (palette as TailwindPalette)[shade];
return typeof shadeColor === 'string' ? shadeColor : null;
const shadeColor = (palette as TailwindPalette)[shade];
return typeof shadeColor === 'string' ? shadeColor : null;
}
export function Chip<T extends ElementType = 'span'>({
variant = 'solid',
tone,
as,
className = '',
children,
variant = 'solid',
tone,
as,
className = '',
children,
}: Readonly<ChipProps<T>>) {
const Component = as ?? ('span' as ElementType);
const toneColor = resolveTailwindToneColor(tone);
const toneStyle: CSSProperties | undefined =
toneColor == null
? undefined
: variant === 'solid'
? { borderColor: toneColor, backgroundColor: toneColor, color: '#ffffff' }
: { borderColor: toneColor, color: toneColor };
const classes = `chip-root ${variantClassMap[variant]} ${className}`.trim();
const Component = as ?? ('span' as ElementType);
const toneColor = resolveTailwindToneColor(tone);
const toneStyle: CSSProperties | undefined =
toneColor == null
? undefined
: variant === 'solid'
? { borderColor: toneColor, backgroundColor: toneColor, color: '#ffffff' }
: { borderColor: toneColor, color: toneColor };
const classes = `chip-root ${variantClassMap[variant]} ${className}`.trim();
return (
<Component className={classes} style={toneStyle}>
{children}
</Component>
);
return (
<Component className={classes} style={toneStyle}>
{children}
</Component>
);
}

248
src/components/Dropdown.stories.tsx
View File

@@ -3,152 +3,152 @@ import type { Meta, StoryObj } from '@storybook/react';
import { Dropdown } from './Dropdown';
const choices = [
{ id: 'draft', label: 'Draft' },
{ id: 'review', label: 'In review' },
{ id: 'published', label: 'Published' },
{ id: 'draft', label: 'Draft' },
{ id: 'review', label: 'In review' },
{ id: 'published', label: 'Published' },
];
const meta = {
title: 'Components/Dropdown',
component: Dropdown,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component:
'Styled select component with label, error state, stacked/inline layout, and multiple sizes.',
},
title: 'Components/Dropdown',
component: Dropdown,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component:
'Styled select component with label, error state, stacked/inline layout, and multiple sizes.',
},
},
},
},
argTypes: {
label: {
description: 'Label text shown above (stacked) or on the left (inline).',
control: 'text',
table: { type: { summary: 'string' } },
argTypes: {
label: {
description: 'Label text shown above (stacked) or on the left (inline).',
control: 'text',
table: { type: { summary: 'string' } },
},
value: {
description: 'Current selected value (must match one `choices[].id`).',
control: 'text',
table: { type: { summary: 'string' } },
},
choices: {
description: 'Options list in `{ id: string; label: string }` format.',
control: 'object',
table: { type: { summary: 'Array<{ id: string; label: string }>' } },
},
size: {
description: 'Control size.',
options: ['sm', 'md', 'lg', 'full'],
control: 'inline-radio',
table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
},
layout: {
description: 'Label/control layout mode.',
options: ['stacked', 'inline'],
control: 'inline-radio',
table: { type: { summary: "'stacked' | 'inline'" } },
},
disabled: {
description: 'Disables the field.',
control: 'boolean',
table: { type: { summary: 'boolean' } },
},
required: {
description: 'Sets the native HTML `required` attribute.',
control: 'boolean',
table: { type: { summary: 'boolean' } },
},
error: {
description: 'Error message shown below the field.',
control: 'text',
table: { type: { summary: 'string' } },
},
className: {
description: 'Extra CSS classes for the wrapper.',
control: 'text',
table: { type: { summary: 'string' } },
},
selectClassName: {
description: 'Extra CSS classes for the `<select>` element.',
control: 'text',
table: { type: { summary: 'string' } },
},
onChange: {
description: 'Callback fired with the newly selected value.',
action: 'changed',
table: { type: { summary: '(value: string) => void' } },
},
},
value: {
description: 'Current selected value (must match one `choices[].id`).',
control: 'text',
table: { type: { summary: 'string' } },
args: {
label: 'Status',
value: 'draft',
choices,
size: 'md',
layout: 'stacked',
},
choices: {
description: 'Options list in `{ id: string; label: string }` format.',
control: 'object',
table: { type: { summary: 'Array<{ id: string; label: string }>' } },
},
size: {
description: 'Control size.',
options: ['sm', 'md', 'lg', 'full'],
control: 'inline-radio',
table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
},
layout: {
description: 'Label/control layout mode.',
options: ['stacked', 'inline'],
control: 'inline-radio',
table: { type: { summary: "'stacked' | 'inline'" } },
},
disabled: {
description: 'Disables the field.',
control: 'boolean',
table: { type: { summary: 'boolean' } },
},
required: {
description: 'Sets the native HTML `required` attribute.',
control: 'boolean',
table: { type: { summary: 'boolean' } },
},
error: {
description: 'Error message shown below the field.',
control: 'text',
table: { type: { summary: 'string' } },
},
className: {
description: 'Extra CSS classes for the wrapper.',
control: 'text',
table: { type: { summary: 'string' } },
},
selectClassName: {
description: 'Extra CSS classes for the `<select>` element.',
control: 'text',
table: { type: { summary: 'string' } },
},
onChange: {
description: 'Callback fired with the newly selected value.',
action: 'changed',
table: { type: { summary: '(value: string) => void' } },
},
},
args: {
label: 'Status',
value: 'draft',
choices,
size: 'md',
layout: 'stacked',
},
} satisfies Meta<typeof Dropdown>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Stacked: Story = {
render: (args) => {
const [value, setValue] = useState(args.value);
return (
<Dropdown
{...args}
value={value}
onChange={(next) => {
setValue(next);
args.onChange?.(next);
}}
/>
);
},
render: (args) => {
const [value, setValue] = useState(args.value);
return (
<Dropdown
{...args}
value={value}
onChange={(next) => {
setValue(next);
args.onChange?.(next);
}}
/>
);
},
};
export const Inline: Story = {
args: {
layout: 'inline',
size: 'sm',
},
render: (args) => {
const [value, setValue] = useState(args.value);
return (
<Dropdown
{...args}
value={value}
onChange={(next) => {
setValue(next);
args.onChange?.(next);
}}
/>
);
},
args: {
layout: 'inline',
size: 'sm',
},
render: (args) => {
const [value, setValue] = useState(args.value);
return (
<Dropdown
{...args}
value={value}
onChange={(next) => {
setValue(next);
args.onChange?.(next);
}}
/>
);
},
};
export const Disabled: Story = {
args: {
disabled: true,
},
args: {
disabled: true,
},
};
export const WithError: Story = {
args: {
error: 'Please choose a valid status',
},
args: {
error: 'Please choose a valid status',
},
};
export const SizeMatrix: Story = {
render: (args) => {
const [value, setValue] = useState(args.value);
return (
<div className="grid grid-cols-1 gap-3">
<Dropdown {...args} value={value} size="sm" label="Small" onChange={setValue} />
<Dropdown {...args} value={value} size="md" label="Medium" onChange={setValue} />
<Dropdown {...args} value={value} size="lg" label="Large" onChange={setValue} />
<Dropdown {...args} value={value} size="full" label="Full" onChange={setValue} />
</div>
);
},
render: (args) => {
const [value, setValue] = useState(args.value);
return (
<div className="grid grid-cols-1 gap-3">
<Dropdown {...args} value={value} size="sm" label="Small" onChange={setValue} />
<Dropdown {...args} value={value} size="md" label="Medium" onChange={setValue} />
<Dropdown {...args} value={value} size="lg" label="Large" onChange={setValue} />
<Dropdown {...args} value={value} size="full" label="Full" onChange={setValue} />
</div>
);
},
};

148
src/components/Dropdown.tsx
View File

@@ -5,91 +5,91 @@ import type { ComponentSize } from './types';
type DropdownLayout = 'stacked' | 'inline';
type DropdownChoice = {
label: string;
id: string;
label: string;
id: string;
};
type DropdownProps = {
label?: string;
value: string;
choices: DropdownChoice[];
size?: ComponentSize;
layout?: DropdownLayout;
disabled?: boolean;
required?: boolean;
onChange?: (value: string) => void;
error?: string;
className?: string;
selectClassName?: string;
label?: string;
value: string;
choices: DropdownChoice[];
size?: ComponentSize;
layout?: DropdownLayout;
disabled?: boolean;
required?: boolean;
onChange?: (value: string) => void;
error?: string;
className?: string;
selectClassName?: string;
};
export function Dropdown({
label,
value,
choices,
size = 'md',
layout = 'stacked',
disabled = false,
required = false,
onChange,
error,
className = '',
selectClassName = '',
label,
value,
choices,
size = 'md',
layout = 'stacked',
disabled = false,
required = false,
onChange,
error,
className = '',
selectClassName = '',
}: Readonly<DropdownProps>) {
const containerSizeClass = {
sm: 'max-w-xs',
md: 'max-w-sm',
lg: 'max-w-md',
full: 'max-w-none',
}[size];
const containerSizeClass = {
sm: 'max-w-xs',
md: 'max-w-sm',
lg: 'max-w-md',
full: 'max-w-none',
}[size];
const selectSizeClass = {
sm: 'h-8 !text-xs',
md: 'h-10 text-sm',
lg: 'h-12 text-sm',
full: 'h-10 text-sm',
}[size];
const selectSizeClass = {
sm: 'h-8 !text-xs',
md: 'h-10 text-sm',
lg: 'h-12 text-sm',
full: 'h-10 text-sm',
}[size];
const handleChange: ChangeEventHandler<HTMLSelectElement> = (event) => {
onChange?.(event.target.value);
};
const handleChange: ChangeEventHandler<HTMLSelectElement> = (event) => {
onChange?.(event.target.value);
};
const wrapperClass =
layout === 'inline' ? 'inline-flex w-auto items-center gap-2' : 'block w-full gap-1';
const wrapperClass =
layout === 'inline' ? 'inline-flex w-auto items-center gap-2' : 'block w-full gap-1';
const selectWrapperClass = layout === 'inline' ? 'relative' : 'relative mt-1';
const labelClass = layout === 'inline' ? 'text-xs ui-body-secondary' : '';
const selectWrapperClass = layout === 'inline' ? 'relative' : 'relative mt-1';
const labelClass = layout === 'inline' ? 'text-xs ui-body-secondary' : '';
return (
<label
className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerSizeClass} ${className}`.trim()}
>
{label ? <span className={labelClass}>{label}</span> : null}
<div className={selectWrapperClass}>
<select
value={value}
onChange={handleChange}
disabled={disabled}
required={required}
className={`field w-full appearance-none pr-9 disabled:opacity-100 ${selectSizeClass} ${error ? 'border-red-400/70 focus:border-red-400 focus:ring-red-400/30' : ''} ${selectClassName}`.trim()}
return (
<label
className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerSizeClass} ${className}`.trim()}
>
{choices.map((choice) => (
<option key={choice.id} value={choice.id}>
{choice.label}
</option>
))}
</select>
<span
className={`pointer-events-none absolute inset-y-0 right-3 flex items-center ${disabled ? 'ui-label-disabled' : 'ui-body-secondary'}`}
>
<ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
</span>
</div>
{error ? (
<span className="mt-1 block text-xs" style={{ color: 'var(--error-text)' }}>
{error}
</span>
) : null}
</label>
);
{label ? <span className={labelClass}>{label}</span> : null}
<div className={selectWrapperClass}>
<select
value={value}
onChange={handleChange}
disabled={disabled}
required={required}
className={`field w-full appearance-none pr-9 disabled:opacity-100 ${selectSizeClass} ${error ? 'border-red-400/70 focus:border-red-400 focus:ring-red-400/30' : ''} ${selectClassName}`.trim()}
>
{choices.map((choice) => (
<option key={choice.id} value={choice.id}>
{choice.label}
</option>
))}
</select>
<span
className={`pointer-events-none absolute inset-y-0 right-3 flex items-center ${disabled ? 'ui-label-disabled' : 'ui-body-secondary'}`}
>
<ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
</span>
</div>
{error ? (
<span className="mt-1 block text-xs" style={{ color: 'var(--error-text)' }}>
{error}
</span>
) : null}
</label>
);
}

154
src/components/Form.stories.tsx
View File

@@ -6,94 +6,94 @@ import { Form } from './Form';
import { InputField } from './InputField';
const meta = {
title: 'Components/Form',
component: Form,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component:
'Surface container with a title bar and a responsive content grid, intended for CMS forms.',
},
title: 'Components/Form',
component: Form,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component:
'Surface container with a title bar and a responsive content grid, intended for CMS forms.',
},
},
},
},
argTypes: {
title: {
description: 'Form title displayed in the header bar.',
control: 'text',
table: { type: { summary: 'string' } },
argTypes: {
title: {
description: 'Form title displayed in the header bar.',
control: 'text',
table: { type: { summary: 'string' } },
},
titleBarRight: {
description: 'Optional node rendered on the right side of the title bar.',
control: false,
table: { type: { summary: 'ReactNode' } },
},
children: {
description: 'Form content rendered inside the responsive grid.',
control: false,
table: { type: { summary: 'ReactNode' } },
},
className: {
description: 'Extra CSS classes for the root container.',
control: 'text',
table: { type: { summary: 'string' } },
},
},
titleBarRight: {
description: 'Optional node rendered on the right side of the title bar.',
control: false,
table: { type: { summary: 'ReactNode' } },
args: {
title: 'Post details',
},
children: {
description: 'Form content rendered inside the responsive grid.',
control: false,
table: { type: { summary: 'ReactNode' } },
},
className: {
description: 'Extra CSS classes for the root container.',
control: 'text',
table: { type: { summary: 'string' } },
},
},
args: {
title: 'Post details',
},
} satisfies Meta<typeof Form>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Basic: Story = {
args: {
children: (
<>
<InputField label="Title" type="text" value="A short post title" />
<Dropdown
label="Status"
value="draft"
choices={[
{ id: 'draft', label: 'Draft' },
{ id: 'published', label: 'Published' },
]}
/>
<InputField label="Slug" type="text" value="a-short-post-title" />
</>
),
},
args: {
children: (
<>
<InputField label="Title" type="text" value="A short post title" />
<Dropdown
label="Status"
value="draft"
choices={[
{ id: 'draft', label: 'Draft' },
{ id: 'published', label: 'Published' },
]}
/>
<InputField label="Slug" type="text" value="a-short-post-title" />
</>
),
},
};
export const WithActions: Story = {
render: (args) => {
const [title, setTitle] = useState('Storybook powered CMS');
const [status, setStatus] = useState('draft');
render: (args) => {
const [title, setTitle] = useState('Storybook powered CMS');
const [status, setStatus] = useState('draft');
return (
<Form {...args} titleBarRight={<Button type="solid" size="sm" label="Save" />}>
<div className="col-span-2">
<InputField
label="Title"
type="text"
value={title}
onChange={(event) => setTitle(event.target.value)}
size="full"
/>
</div>
<Dropdown
label="Status"
value={status}
onChange={setStatus}
choices={[
{ id: 'draft', label: 'Draft' },
{ id: 'review', label: 'In review' },
{ id: 'published', label: 'Published' },
]}
/>
<InputField label="Slug" type="text" value="storybook-powered-cms" />
</Form>
);
},
return (
<Form {...args} titleBarRight={<Button type="solid" size="sm" label="Save" />}>
<div className="col-span-2">
<InputField
label="Title"
type="text"
value={title}
onChange={(event) => setTitle(event.target.value)}
size="full"
/>
</div>
<Dropdown
label="Status"
value={status}
onChange={setStatus}
choices={[
{ id: 'draft', label: 'Draft' },
{ id: 'review', label: 'In review' },
{ id: 'published', label: 'Published' },
]}
/>
<InputField label="Slug" type="text" value="storybook-powered-cms" />
</Form>
);
},
};

32
src/components/Form.tsx
View File

@@ -2,24 +2,24 @@ import type { ReactNode } from 'react';
import { Label } from './Label';
type FormProps = {
title: string;
titleBarRight?: ReactNode;
children: ReactNode;
className?: string;
title: string;
titleBarRight?: ReactNode;
children: ReactNode;
className?: string;
};
export function Form({ title, titleBarRight, children, className = '' }: Readonly<FormProps>) {
return (
<div className={`surface overflow-hidden rounded-xl ${className}`.trim()}>
<div
className="flex items-center justify-between border-b px-4 py-3 sm:px-5"
style={{ borderColor: 'var(--surface-divider)' }}
>
<Label variant="h4">{title}</Label>
{titleBarRight ? <div>{titleBarRight}</div> : null}
</div>
return (
<div className={`surface overflow-hidden rounded-xl ${className}`.trim()}>
<div
className="flex items-center justify-between border-b px-4 py-3 sm:px-5"
style={{ borderColor: 'var(--surface-divider)' }}
>
<Label variant="h4">{title}</Label>
{titleBarRight ? <div>{titleBarRight}</div> : null}
</div>
<div className="grid grid-cols-1 gap-4 p-4 sm:p-5 lg:grid-cols-3">{children}</div>
</div>
);
<div className="grid grid-cols-1 gap-4 p-4 sm:p-5 lg:grid-cols-3">{children}</div>
</div>
);
}

412
src/components/InputField.stories.tsx
View File

@@ -4,234 +4,234 @@ import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
import { InputField } from './InputField';
const meta = {
title: 'Components/InputField',
component: InputField,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component:
'Text input field with optional label, validation state, size/layout variants, and password visibility toggle.',
},
title: 'Components/InputField',
component: InputField,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component:
'Text input field with optional label, validation state, size/layout variants, and password visibility toggle.',
},
},
},
},
argTypes: {
label: {
description: 'Label text shown above (stacked) or on the left (inline).',
control: 'text',
table: { type: { summary: 'string' } },
argTypes: {
label: {
description: 'Label text shown above (stacked) or on the left (inline).',
control: 'text',
table: { type: { summary: 'string' } },
},
placeholder: {
description: 'Input placeholder text.',
control: 'text',
table: { type: { summary: 'string' } },
},
type: {
description: 'Native input type.',
options: ['text', 'password', 'email'],
control: 'inline-radio',
table: { type: { summary: "'text' | 'password' | 'email'" } },
},
size: {
description: 'Input size.',
options: ['sm', 'md', 'lg', 'full'],
control: 'inline-radio',
table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
},
layout: {
description: 'Label/input layout mode.',
options: ['stacked', 'inline'],
control: 'inline-radio',
table: { type: { summary: "'stacked' | 'inline'" } },
},
value: {
description: 'Controlled input value.',
control: 'text',
table: { type: { summary: 'string' } },
},
name: {
description: 'Native input `name` attribute.',
control: 'text',
table: { type: { summary: 'string' } },
},
disabled: {
description: 'Disables the input.',
control: 'boolean',
table: { type: { summary: 'boolean' } },
},
required: {
description: 'Sets the native HTML `required` attribute.',
control: 'boolean',
table: { type: { summary: 'boolean' } },
},
error: {
description: 'Validation message shown below the field.',
control: 'text',
table: { type: { summary: 'string' } },
},
rightIcon: {
description:
'Optional trailing icon node (ignored for password type because toggle icon is used).',
control: false,
table: { type: { summary: 'ReactNode' } },
},
className: {
description: 'Extra CSS classes for the outer wrapper.',
control: 'text',
table: { type: { summary: 'string' } },
},
inputClassName: {
description: 'Extra CSS classes for the `<input>` element.',
control: 'text',
table: { type: { summary: 'string' } },
},
onChange: {
description: 'Change handler callback.',
action: 'changed',
table: { type: { summary: 'ChangeEventHandler<HTMLInputElement>' } },
},
onBlur: {
description: 'Blur handler callback.',
control: false,
table: { type: { summary: 'FocusEventHandler<HTMLInputElement>' } },
},
inputRef: {
description: 'Ref forwarded to the native `<input>` element.',
control: false,
table: { type: { summary: 'Ref<HTMLInputElement>' } },
},
},
placeholder: {
description: 'Input placeholder text.',
control: 'text',
table: { type: { summary: 'string' } },
args: {
label: 'Email',
type: 'email',
placeholder: 'name@example.com',
value: '',
size: 'md',
layout: 'stacked',
},
type: {
description: 'Native input type.',
options: ['text', 'password', 'email'],
control: 'inline-radio',
table: { type: { summary: "'text' | 'password' | 'email'" } },
},
size: {
description: 'Input size.',
options: ['sm', 'md', 'lg', 'full'],
control: 'inline-radio',
table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
},
layout: {
description: 'Label/input layout mode.',
options: ['stacked', 'inline'],
control: 'inline-radio',
table: { type: { summary: "'stacked' | 'inline'" } },
},
value: {
description: 'Controlled input value.',
control: 'text',
table: { type: { summary: 'string' } },
},
name: {
description: 'Native input `name` attribute.',
control: 'text',
table: { type: { summary: 'string' } },
},
disabled: {
description: 'Disables the input.',
control: 'boolean',
table: { type: { summary: 'boolean' } },
},
required: {
description: 'Sets the native HTML `required` attribute.',
control: 'boolean',
table: { type: { summary: 'boolean' } },
},
error: {
description: 'Validation message shown below the field.',
control: 'text',
table: { type: { summary: 'string' } },
},
rightIcon: {
description:
'Optional trailing icon node (ignored for password type because toggle icon is used).',
control: false,
table: { type: { summary: 'ReactNode' } },
},
className: {
description: 'Extra CSS classes for the outer wrapper.',
control: 'text',
table: { type: { summary: 'string' } },
},
inputClassName: {
description: 'Extra CSS classes for the `<input>` element.',
control: 'text',
table: { type: { summary: 'string' } },
},
onChange: {
description: 'Change handler callback.',
action: 'changed',
table: { type: { summary: 'ChangeEventHandler<HTMLInputElement>' } },
},
onBlur: {
description: 'Blur handler callback.',
control: false,
table: { type: { summary: 'FocusEventHandler<HTMLInputElement>' } },
},
inputRef: {
description: 'Ref forwarded to the native `<input>` element.',
control: false,
table: { type: { summary: 'Ref<HTMLInputElement>' } },
},
},
args: {
label: 'Email',
type: 'email',
placeholder: 'name@example.com',
value: '',
size: 'md',
layout: 'stacked',
},
} satisfies Meta<typeof InputField>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Text: Story = {
args: {
type: 'text',
label: 'Title',
placeholder: 'Write a title',
},
render: (args) => {
const [value, setValue] = useState('Storybook integration');
return (
<InputField
{...args}
value={value}
onChange={(event) => {
setValue(event.target.value);
args.onChange?.(event);
}}
/>
);
},
args: {
type: 'text',
label: 'Title',
placeholder: 'Write a title',
},
render: (args) => {
const [value, setValue] = useState('Storybook integration');
return (
<InputField
{...args}
value={value}
onChange={(event) => {
setValue(event.target.value);
args.onChange?.(event);
}}
/>
);
},
};
export const PasswordWithToggle: Story = {
args: {
type: 'password',
label: 'Password',
placeholder: 'Type a strong password',
},
render: (args) => {
const [value, setValue] = useState('pa55word');
return (
<InputField
{...args}
value={value}
onChange={(event) => {
setValue(event.target.value);
args.onChange?.(event);
}}
/>
);
},
args: {
type: 'password',
label: 'Password',
placeholder: 'Type a strong password',
},
render: (args) => {
const [value, setValue] = useState('pa55word');
return (
<InputField
{...args}
value={value}
onChange={(event) => {
setValue(event.target.value);
args.onChange?.(event);
}}
/>
);
},
};
export const InlineWithIcon: Story = {
args: {
type: 'text',
label: 'Search',
layout: 'inline',
size: 'sm',
rightIcon: <MagnifyingGlassIcon className="h-4 w-4 ui-body-secondary" />,
},
render: (args) => {
const [value, setValue] = useState('posts');
return (
<InputField
{...args}
value={value}
onChange={(event) => {
setValue(event.target.value);
args.onChange?.(event);
}}
/>
);
},
args: {
type: 'text',
label: 'Search',
layout: 'inline',
size: 'sm',
rightIcon: <MagnifyingGlassIcon className="h-4 w-4 ui-body-secondary" />,
},
render: (args) => {
const [value, setValue] = useState('posts');
return (
<InputField
{...args}
value={value}
onChange={(event) => {
setValue(event.target.value);
args.onChange?.(event);
}}
/>
);
},
};
export const Error: Story = {
args: {
type: 'email',
label: 'Email',
value: 'invalid.mail',
error: 'Enter a valid email address',
},
args: {
type: 'email',
label: 'Email',
value: 'invalid.mail',
error: 'Enter a valid email address',
},
};
export const Disabled: Story = {
args: {
type: 'text',
label: 'Read only field',
value: 'Locked content',
disabled: true,
},
args: {
type: 'text',
label: 'Read only field',
value: 'Locked content',
disabled: true,
},
};
export const SizeMatrix: Story = {
args: {
type: 'text',
label: 'Name',
placeholder: 'Enter value',
},
render: (args) => {
const [value, setValue] = useState('Beatrice');
return (
<div className="grid grid-cols-1 gap-3">
<InputField
{...args}
value={value}
size="sm"
onChange={(event) => setValue(event.target.value)}
/>
<InputField
{...args}
value={value}
size="md"
onChange={(event) => setValue(event.target.value)}
/>
<InputField
{...args}
value={value}
size="lg"
onChange={(event) => setValue(event.target.value)}
/>
<InputField
{...args}
value={value}
size="full"
onChange={(event) => setValue(event.target.value)}
/>
</div>
);
},
args: {
type: 'text',
label: 'Name',
placeholder: 'Enter value',
},
render: (args) => {
const [value, setValue] = useState('Beatrice');
return (
<div className="grid grid-cols-1 gap-3">
<InputField
{...args}
value={value}
size="sm"
onChange={(event) => setValue(event.target.value)}
/>
<InputField
{...args}
value={value}
size="md"
onChange={(event) => setValue(event.target.value)}
/>
<InputField
{...args}
value={value}
size="lg"
onChange={(event) => setValue(event.target.value)}
/>
<InputField
{...args}
value={value}
size="full"
onChange={(event) => setValue(event.target.value)}
/>
</div>
);
},
};

186
src/components/InputField.tsx
View File

@@ -8,104 +8,104 @@ type InputKind = 'text' | 'password' | 'email';
type Layout = 'stacked' | 'inline';
type InputFieldProps = {
label?: string;
placeholder?: string;
type: InputKind;
size?: ComponentSize;
layout?: Layout;
value: string;
name?: string;
onChange?: ChangeEventHandler<HTMLInputElement>;
onBlur?: FocusEventHandler<HTMLInputElement>;
inputRef?: Ref<HTMLInputElement>;
disabled?: boolean;
required?: boolean;
error?: string;
rightIcon?: ReactNode;
className?: string;
inputClassName?: string;
label?: string;
placeholder?: string;
type: InputKind;
size?: ComponentSize;
layout?: Layout;
value: string;
name?: string;
onChange?: ChangeEventHandler<HTMLInputElement>;
onBlur?: FocusEventHandler<HTMLInputElement>;
inputRef?: Ref<HTMLInputElement>;
disabled?: boolean;
required?: boolean;
error?: string;
rightIcon?: ReactNode;
className?: string;
inputClassName?: string;
};
export function InputField({
label,
placeholder = '',
type,
size = 'md',
layout = 'stacked',
value,
name,
onChange,
onBlur,
inputRef,
disabled = false,
required = false,
error,
rightIcon,
className = '',
inputClassName = '',
label,
placeholder = '',
type,
size = 'md',
layout = 'stacked',
value,
name,
onChange,
onBlur,
inputRef,
disabled = false,
required = false,
error,
rightIcon,
className = '',
inputClassName = '',
}: Readonly<InputFieldProps>) {
const [showPassword, setShowPassword] = useState(false);
const containerSizeClass = {
sm: 'max-w-xs',
md: 'max-w-sm',
lg: 'max-w-md',
full: 'max-w-none',
}[size];
const [showPassword, setShowPassword] = useState(false);
const containerSizeClass = {
sm: 'max-w-xs',
md: 'max-w-sm',
lg: 'max-w-md',
full: 'max-w-none',
}[size];
const inputSizeClass = {
sm: 'h-8 !text-xs',
md: 'h-10 text-sm',
lg: 'h-12 text-sm',
full: 'h-10 text-sm',
}[size];
const inputSizeClass = {
sm: 'h-8 !text-xs',
md: 'h-10 text-sm',
lg: 'h-12 text-sm',
full: 'h-10 text-sm',
}[size];
const wrapperClass =
layout === 'inline' ? 'inline-flex w-auto items-center gap-2' : 'block w-full gap-1';
const labelClass = layout === 'inline' ? 'text-xs ui-body-secondary' : '';
const isPasswordType = type === 'password';
const resolvedType: InputKind = isPasswordType && showPassword ? 'text' : type;
const hasTrailingIcon = isPasswordType || Boolean(rightIcon);
const inputWrapperClass = layout === 'inline' ? 'relative' : 'relative mt-1';
const wrapperClass =
layout === 'inline' ? 'inline-flex w-auto items-center gap-2' : 'block w-full gap-1';
const labelClass = layout === 'inline' ? 'text-xs ui-body-secondary' : '';
const isPasswordType = type === 'password';
const resolvedType: InputKind = isPasswordType && showPassword ? 'text' : type;
const hasTrailingIcon = isPasswordType || Boolean(rightIcon);
const inputWrapperClass = layout === 'inline' ? 'relative' : 'relative mt-1';
return (
<label
className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerSizeClass} ${className}`.trim()}
>
{label ? <span className={labelClass}>{label}</span> : null}
<div className={inputWrapperClass}>
<input
type={resolvedType}
value={value}
name={name}
onChange={onChange}
onBlur={onBlur}
ref={inputRef}
placeholder={placeholder}
disabled={disabled}
required={required}
className={`field w-full ${hasTrailingIcon ? 'pr-10' : ''} ${inputSizeClass} ${error ? 'border-red-400/70 focus:border-red-400 focus:ring-red-400/30' : ''} ${inputClassName}`.trim()}
/>
{isPasswordType ? (
<Button
type="noborder"
size="sm"
icon={showPassword ? EyeSlashIcon : EyeIcon}
onClick={() => setShowPassword((prev) => !prev)}
disabled={disabled}
className="absolute inset-y-0 right-2 my-auto !h-6 !w-6 !rounded-md !p-0 ui-body-secondary transition hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60"
ariaLabel={showPassword ? 'Hide password' : 'Show password'}
/>
) : rightIcon ? (
<span className="pointer-events-none absolute inset-y-0 right-2 inline-flex items-center justify-center px-1">
{rightIcon}
</span>
) : null}
</div>
{error ? (
<span className="mt-1 block text-xs" style={{ color: 'var(--error-text)' }}>
{error}
</span>
) : null}
</label>
);
return (
<label
className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerSizeClass} ${className}`.trim()}
>
{label ? <span className={labelClass}>{label}</span> : null}
<div className={inputWrapperClass}>
<input
type={resolvedType}
value={value}
name={name}
onChange={onChange}
onBlur={onBlur}
ref={inputRef}
placeholder={placeholder}
disabled={disabled}
required={required}
className={`field w-full ${hasTrailingIcon ? 'pr-10' : ''} ${inputSizeClass} ${error ? 'border-red-400/70 focus:border-red-400 focus:ring-red-400/30' : ''} ${inputClassName}`.trim()}
/>
{isPasswordType ? (
<Button
type="noborder"
size="sm"
icon={showPassword ? EyeSlashIcon : EyeIcon}
onClick={() => setShowPassword((prev) => !prev)}
disabled={disabled}
className="absolute inset-y-0 right-2 my-auto !h-6 !w-6 !rounded-md !p-0 ui-body-secondary transition hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60"
ariaLabel={showPassword ? 'Hide password' : 'Show password'}
/>
) : rightIcon ? (
<span className="pointer-events-none absolute inset-y-0 right-2 inline-flex items-center justify-center px-1">
{rightIcon}
</span>
) : null}
</div>
{error ? (
<span className="mt-1 block text-xs" style={{ color: 'var(--error-text)' }}>
{error}
</span>
) : null}
</label>
);
}

120
src/components/Label.stories.tsx
View File

@@ -2,48 +2,50 @@ import type { Meta, StoryObj } from '@storybook/react';
import { Label } from './Label';
const meta = {
title: 'Components/Label',
component: Label,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component:
'Typography helper component for headings, body text, caption, error text, and inline code styles.',
},
},
},
argTypes: {
variant: {
description: 'Typography style preset.',
options: ['h1', 'h2', 'h3', 'h4', 'body', 'body2', 'caption', 'error', 'code'],
control: 'select',
table: {
type: {
summary: "'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'body2' | 'caption' | 'error' | 'code'",
title: 'Components/Label',
component: Label,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component:
'Typography helper component for headings, body text, caption, error text, and inline code styles.',
},
},
},
},
as: {
description: "Override rendered HTML tag or component (for example `'p'`, `'span'`, `'h2'`).",
control: false,
table: { type: { summary: 'ElementType' } },
argTypes: {
variant: {
description: 'Typography style preset.',
options: ['h1', 'h2', 'h3', 'h4', 'body', 'body2', 'caption', 'error', 'code'],
control: 'select',
table: {
type: {
summary:
"'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'body2' | 'caption' | 'error' | 'code'",
},
},
},
as: {
description:
"Override rendered HTML tag or component (for example `'p'`, `'span'`, `'h2'`).",
control: false,
table: { type: { summary: 'ElementType' } },
},
className: {
description: 'Extra CSS classes.',
control: 'text',
table: { type: { summary: 'string' } },
},
children: {
description: 'Label content.',
control: 'text',
table: { type: { summary: 'ReactNode' } },
},
},
className: {
description: 'Extra CSS classes.',
control: 'text',
table: { type: { summary: 'string' } },
args: {
variant: 'body',
children: 'Label text',
},
children: {
description: 'Label content.',
control: 'text',
table: { type: { summary: 'ReactNode' } },
},
},
args: {
variant: 'body',
children: 'Label text',
},
} satisfies Meta<typeof Label>;
export default meta;
@@ -52,31 +54,31 @@ type Story = StoryObj<typeof meta>;
export const Body: Story = {};
export const Error: Story = {
args: {
variant: 'error',
children: 'This field is required',
},
args: {
variant: 'error',
children: 'This field is required',
},
};
export const Code: Story = {
args: {
variant: 'code',
children: 'const isPublished = true;',
},
args: {
variant: 'code',
children: 'const isPublished = true;',
},
};
export const VariantScale: Story = {
render: () => (
<div className="flex max-w-md flex-col gap-2">
<Label variant="caption">Caption</Label>
<Label variant="h1">Heading 1</Label>
<Label variant="h2">Heading 2</Label>
<Label variant="h3">Heading 3</Label>
<Label variant="h4">Heading 4</Label>
<Label variant="body">Primary body copy</Label>
<Label variant="body2">Secondary body copy</Label>
<Label variant="error">Error copy</Label>
<Label variant="code">npm run build</Label>
</div>
),
render: () => (
<div className="flex max-w-md flex-col gap-2">
<Label variant="caption">Caption</Label>
<Label variant="h1">Heading 1</Label>
<Label variant="h2">Heading 2</Label>
<Label variant="h3">Heading 3</Label>
<Label variant="h4">Heading 4</Label>
<Label variant="body">Primary body copy</Label>
<Label variant="body2">Secondary body copy</Label>
<Label variant="error">Error copy</Label>
<Label variant="code">npm run build</Label>
</div>
),
};

58
src/components/Label.tsx
View File

@@ -3,44 +3,44 @@ import type { ElementType, ReactNode } from 'react';
type LabelVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'body2' | 'caption' | 'error' | 'code';
type LabelProps<T extends ElementType> = {
variant?: LabelVariant;
as?: T;
className?: string;
children: ReactNode;
variant?: LabelVariant;
as?: T;
className?: string;
children: ReactNode;
};
const variantClassMap: Record<LabelVariant, string> = {
h1: 'ui-title text-3xl font-bold',
h2: 'ui-title text-2xl font-semibold',
h3: 'ui-title text-xl font-semibold',
h4: 'ui-title text-base font-semibold',
body: 'ui-body-primary text-sm',
body2: 'ui-body-secondary text-sm',
caption: 'ui-kicker text-xs font-semibold uppercase tracking-[0.12em]',
error: 'ui-error text-sm',
code: 'ui-code text-sm font-mono',
h1: 'ui-title text-3xl font-bold',
h2: 'ui-title text-2xl font-semibold',
h3: 'ui-title text-xl font-semibold',
h4: 'ui-title text-base font-semibold',
body: 'ui-body-primary text-sm',
body2: 'ui-body-secondary text-sm',
caption: 'ui-kicker text-xs font-semibold uppercase tracking-[0.12em]',
error: 'ui-error text-sm',
code: 'ui-code text-sm font-mono',
};
const variantTagMap: Record<LabelVariant, ElementType> = {
h1: 'h1',
h2: 'h2',
h3: 'h3',
h4: 'h3',
body: 'p',
body2: 'p',
caption: 'p',
error: 'p',
code: 'code',
h1: 'h1',
h2: 'h2',
h3: 'h3',
h4: 'h3',
body: 'p',
body2: 'p',
caption: 'p',
error: 'p',
code: 'code',
};
export function Label<T extends ElementType = 'p'>({
variant = 'body',
as,
className = '',
children,
variant = 'body',
as,
className = '',
children,
}: Readonly<LabelProps<T>>) {
const Component = as ?? variantTagMap[variant];
const classes = `${variantClassMap[variant]} ${className}`.trim();
const Component = as ?? variantTagMap[variant];
const classes = `${variantClassMap[variant]} ${className}`.trim();
return <Component className={classes}>{children}</Component>;
return <Component className={classes}>{children}</Component>;
}

253
src/components/MDXEditorField.stories.tsx
View File

@@ -1,10 +1,10 @@
import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import {
headingsPlugin,
listsPlugin,
markdownShortcutPlugin,
quotePlugin,
headingsPlugin,
listsPlugin,
markdownShortcutPlugin,
quotePlugin,
} from '@mdxeditor/editor';
import { MDXEditorField } from './MDXEditorField';
@@ -19,138 +19,145 @@ This is a paragraph with **bold** and _italic_ text.
`;
const meta = {
title: 'Components/MDXEditorField',
component: MDXEditorField,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component:
'MDX editor wrapper with label, editable/read-only/disabled modes, theme class support, and error rendering.',
},
title: 'Components/MDXEditorField',
component: MDXEditorField,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component:
'MDX editor wrapper with label, editable/read-only/disabled modes, theme class support, and error rendering.',
},
},
},
},
argTypes: {
label: {
description: 'Field label shown above the editor.',
control: 'text',
table: { type: { summary: 'string' } },
argTypes: {
label: {
description: 'Field label shown above the editor.',
control: 'text',
table: { type: { summary: 'string' } },
},
markdown: {
description: 'Controlled markdown content value.',
control: 'text',
table: { type: { summary: 'string' } },
},
readOnly: {
description: 'Enables read-only mode.',
control: 'boolean',
table: { type: { summary: 'boolean' } },
},
disabled: {
description: 'Disables editing and applies disabled visuals.',
control: 'boolean',
table: { type: { summary: 'boolean' } },
},
themeClassName: {
description:
'Theme class applied to MDXEditor (for example `light-theme` or `dark-theme`).',
control: 'text',
table: { type: { summary: 'string' } },
},
plugins: {
description: 'MDXEditor plugins array.',
control: false,
table: { type: { summary: 'MDXEditorProps["plugins"]' } },
},
contentEditableClassName: {
description: 'CSS class used on the content editable area.',
control: 'text',
table: { type: { summary: 'string' } },
},
className: {
description: 'Extra CSS classes for the outer wrapper.',
control: 'text',
table: { type: { summary: 'string' } },
},
editorWrapperClassName: {
description: 'Extra CSS classes for the editor shell element.',
control: 'text',
table: { type: { summary: 'string' } },
},
editorWrapperStyle: {
description: 'Inline style object for the editor shell.',
control: 'object',
table: { type: { summary: 'CSSProperties' } },
},
editorClassName: {
description: 'Extra CSS classes for the MDXEditor instance.',
control: 'text',
table: { type: { summary: 'string' } },
},
error: {
description: 'Error message shown below the editor.',
control: 'text',
table: { type: { summary: 'string' } },
},
onChange: {
description: 'Callback fired when markdown changes in editable mode.',
action: 'changed',
table: { type: { summary: '(markdown: string) => void' } },
},
editorRef: {
description: 'Ref to MDXEditor methods.',
control: false,
table: { type: { summary: 'Ref<MDXEditorMethods | null>' } },
},
},
markdown: {
description: 'Controlled markdown content value.',
control: 'text',
table: { type: { summary: 'string' } },
args: {
label: 'Content',
markdown: sampleMarkdown,
plugins: basePlugins,
themeClassName: '',
},
readOnly: {
description: 'Enables read-only mode.',
control: 'boolean',
table: { type: { summary: 'boolean' } },
},
disabled: {
description: 'Disables editing and applies disabled visuals.',
control: 'boolean',
table: { type: { summary: 'boolean' } },
},
themeClassName: {
description: 'Theme class applied to MDXEditor (for example `light-theme` or `dark-theme`).',
control: 'text',
table: { type: { summary: 'string' } },
},
plugins: {
description: 'MDXEditor plugins array.',
control: false,
table: { type: { summary: 'MDXEditorProps["plugins"]' } },
},
contentEditableClassName: {
description: 'CSS class used on the content editable area.',
control: 'text',
table: { type: { summary: 'string' } },
},
className: {
description: 'Extra CSS classes for the outer wrapper.',
control: 'text',
table: { type: { summary: 'string' } },
},
editorWrapperClassName: {
description: 'Extra CSS classes for the editor shell element.',
control: 'text',
table: { type: { summary: 'string' } },
},
editorWrapperStyle: {
description: 'Inline style object for the editor shell.',
control: 'object',
table: { type: { summary: 'CSSProperties' } },
},
editorClassName: {
description: 'Extra CSS classes for the MDXEditor instance.',
control: 'text',
table: { type: { summary: 'string' } },
},
error: {
description: 'Error message shown below the editor.',
control: 'text',
table: { type: { summary: 'string' } },
},
onChange: {
description: 'Callback fired when markdown changes in editable mode.',
action: 'changed',
table: { type: { summary: '(markdown: string) => void' } },
},
editorRef: {
description: 'Ref to MDXEditor methods.',
control: false,
table: { type: { summary: 'Ref<MDXEditorMethods | null>' } },
},
},
args: {
label: 'Content',
markdown: sampleMarkdown,
plugins: basePlugins,
themeClassName: '',
},
} satisfies Meta<typeof MDXEditorField>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Editable: Story = {
render: (args) => {
const [markdown, setMarkdown] = useState(args.markdown);
return (
<div className="w-full max-w-2xl">
<MDXEditorField
{...args}
markdown={markdown}
onChange={(next) => {
setMarkdown(next);
args.onChange?.(next);
}}
editorWrapperClassName="mt-2 overflow-hidden rounded-xl border"
/>
</div>
);
},
render: (args) => {
const [markdown, setMarkdown] = useState(args.markdown);
return (
<div className="w-full max-w-2xl">
<MDXEditorField
{...args}
markdown={markdown}
onChange={(next) => {
setMarkdown(next);
args.onChange?.(next);
}}
editorWrapperClassName="mt-2 overflow-hidden rounded-xl border"
/>
</div>
);
},
};
export const ReadOnly: Story = {
args: {
readOnly: true,
},
render: (args) => (
<div className="w-full max-w-2xl">
<MDXEditorField {...args} editorWrapperClassName="mt-2 overflow-hidden rounded-xl border" />
</div>
),
args: {
readOnly: true,
},
render: (args) => (
<div className="w-full max-w-2xl">
<MDXEditorField
{...args}
editorWrapperClassName="mt-2 overflow-hidden rounded-xl border"
/>
</div>
),
};
export const DisabledWithError: Story = {
args: {
disabled: true,
error: 'Editor is currently disabled',
},
render: (args) => (
<div className="w-full max-w-2xl">
<MDXEditorField {...args} editorWrapperClassName="mt-2 overflow-hidden rounded-xl border" />
</div>
),
args: {
disabled: true,
error: 'Editor is currently disabled',
},
render: (args) => (
<div className="w-full max-w-2xl">
<MDXEditorField
{...args}
editorWrapperClassName="mt-2 overflow-hidden rounded-xl border"
/>
</div>
),
};

132
src/components/MDXEditorField.tsx
View File

@@ -3,75 +3,75 @@ import type { CSSProperties, Ref } from 'react';
import { Label } from './Label';
type MDXEditorFieldProps = {
label?: string;
markdown: string;
readOnly?: boolean;
disabled?: boolean;
onChange?: (markdown: string) => void;
editorRef?: Ref<MDXEditorMethods | null>;
themeClassName: string;
plugins: MDXEditorProps['plugins'];
contentEditableClassName?: string;
className?: string;
editorWrapperClassName?: string;
editorWrapperStyle?: CSSProperties;
editorClassName?: string;
error?: string;
label?: string;
markdown: string;
readOnly?: boolean;
disabled?: boolean;
onChange?: (markdown: string) => void;
editorRef?: Ref<MDXEditorMethods | null>;
themeClassName: string;
plugins: MDXEditorProps['plugins'];
contentEditableClassName?: string;
className?: string;
editorWrapperClassName?: string;
editorWrapperStyle?: CSSProperties;
editorClassName?: string;
error?: string;
};
export function MDXEditorField({
label,
markdown,
readOnly = false,
disabled = false,
onChange,
editorRef,
themeClassName,
plugins,
contentEditableClassName = 'mdx-content',
className = '',
editorWrapperClassName = 'post-mdx-editor mt-2 overflow-hidden rounded-xl border',
editorWrapperStyle,
editorClassName = '',
error,
label,
markdown,
readOnly = false,
disabled = false,
onChange,
editorRef,
themeClassName,
plugins,
contentEditableClassName = 'mdx-content',
className = '',
editorWrapperClassName = 'post-mdx-editor mt-2 overflow-hidden rounded-xl border',
editorWrapperStyle,
editorClassName = '',
error,
}: Readonly<MDXEditorFieldProps>) {
const resolvedEditorClassName = `${themeClassName} ${editorClassName}`.trim();
const editorModeKey = disabled || readOnly ? 'read-only' : 'editable';
const resolvedEditorWrapperClassName =
`${editorWrapperClassName} ${disabled ? 'post-mdx-editor--disabled' : 'post-mdx-editor--enabled'}`.trim();
const resolvedEditorWrapperStyle: CSSProperties = {
backgroundColor: disabled ? 'var(--field-disabled-bg)' : 'var(--field-bg)',
borderColor: disabled ? 'var(--field-disabled-border)' : 'var(--field-border)',
...editorWrapperStyle,
};
const resolvedEditorClassName = `${themeClassName} ${editorClassName}`.trim();
const editorModeKey = disabled || readOnly ? 'read-only' : 'editable';
const resolvedEditorWrapperClassName =
`${editorWrapperClassName} ${disabled ? 'post-mdx-editor--disabled' : 'post-mdx-editor--enabled'}`.trim();
const resolvedEditorWrapperStyle: CSSProperties = {
backgroundColor: disabled ? 'var(--field-disabled-bg)' : 'var(--field-bg)',
borderColor: disabled ? 'var(--field-disabled-border)' : 'var(--field-border)',
...editorWrapperStyle,
};
return (
<div className={className}>
{label ? (
<Label
variant="body"
className={`font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'}`}
>
{label}
</Label>
) : null}
<div className={resolvedEditorWrapperClassName} style={resolvedEditorWrapperStyle}>
<MDXEditor
key={editorModeKey}
ref={editorRef}
markdown={markdown}
onChange={disabled || readOnly ? undefined : onChange}
readOnly={disabled || readOnly}
className={resolvedEditorClassName}
contentEditableClassName={contentEditableClassName}
plugins={plugins}
/>
</div>
{error ? (
<Label variant="error" className="mt-2 ui-error">
{error}
</Label>
) : null}
</div>
);
return (
<div className={className}>
{label ? (
<Label
variant="body"
className={`font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'}`}
>
{label}
</Label>
) : null}
<div className={resolvedEditorWrapperClassName} style={resolvedEditorWrapperStyle}>
<MDXEditor
key={editorModeKey}
ref={editorRef}
markdown={markdown}
onChange={disabled || readOnly ? undefined : onChange}
readOnly={disabled || readOnly}
className={resolvedEditorClassName}
contentEditableClassName={contentEditableClassName}
plugins={plugins}
/>
</div>
{error ? (
<Label variant="error" className="mt-2 ui-error">
{error}
</Label>
) : null}
</div>
);
}

128
src/components/SidebarNavItem.stories.tsx
View File

@@ -3,80 +3,80 @@ import { HomeIcon, UserCircleIcon, UsersIcon } from '@heroicons/react/24/outline
import { SidebarNavItem } from './SidebarNavItem';
const meta = {
title: 'Components/SidebarNavItem',
component: SidebarNavItem,
tags: ['autodocs'],
parameters: {
layout: 'padded',
docs: {
description: {
component:
'Sidebar navigation link with active state styling and collapsed/expanded rendering mode.',
},
title: 'Components/SidebarNavItem',
component: SidebarNavItem,
tags: ['autodocs'],
parameters: {
layout: 'padded',
docs: {
description: {
component:
'Sidebar navigation link with active state styling and collapsed/expanded rendering mode.',
},
},
},
},
argTypes: {
to: {
description: 'Destination route path.',
control: 'text',
table: { type: { summary: 'string' } },
argTypes: {
to: {
description: 'Destination route path.',
control: 'text',
table: { type: { summary: 'string' } },
},
label: {
description: 'Navigation item label.',
control: 'text',
table: { type: { summary: 'string' } },
},
icon: {
description: 'Icon component rendered before the label.',
control: false,
table: { type: { summary: 'ComponentType<SVGProps<SVGSVGElement>>' } },
},
collapsed: {
description: 'Collapsed state. When true, desktop view shows icon-only rail style.',
control: 'boolean',
table: { type: { summary: 'boolean' } },
},
onClick: {
description: 'Optional click callback (for example to close mobile drawer).',
action: 'clicked',
table: { type: { summary: '() => void' } },
},
},
label: {
description: 'Navigation item label.',
control: 'text',
table: { type: { summary: 'string' } },
args: {
to: '/',
label: 'Dashboard',
icon: HomeIcon,
collapsed: false,
},
icon: {
description: 'Icon component rendered before the label.',
control: false,
table: { type: { summary: 'ComponentType<SVGProps<SVGSVGElement>>' } },
},
collapsed: {
description: 'Collapsed state. When true, desktop view shows icon-only rail style.',
control: 'boolean',
table: { type: { summary: 'boolean' } },
},
onClick: {
description: 'Optional click callback (for example to close mobile drawer).',
action: 'clicked',
table: { type: { summary: '() => void' } },
},
},
args: {
to: '/',
label: 'Dashboard',
icon: HomeIcon,
collapsed: false,
},
} satisfies Meta<typeof SidebarNavItem>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Expanded: Story = {
render: (args) => (
<nav className="flex w-56 flex-col gap-1">
<SidebarNavItem {...args} />
<SidebarNavItem to="/users" label="Users" icon={UsersIcon} collapsed={args.collapsed} />
<SidebarNavItem
to="/profile"
label="Profile"
icon={UserCircleIcon}
collapsed={args.collapsed}
/>
</nav>
),
render: (args) => (
<nav className="flex w-56 flex-col gap-1">
<SidebarNavItem {...args} />
<SidebarNavItem to="/users" label="Users" icon={UsersIcon} collapsed={args.collapsed} />
<SidebarNavItem
to="/profile"
label="Profile"
icon={UserCircleIcon}
collapsed={args.collapsed}
/>
</nav>
),
};
export const Collapsed: Story = {
args: {
collapsed: true,
},
render: (args) => (
<nav className="flex w-14 flex-col gap-1">
<SidebarNavItem {...args} />
<SidebarNavItem to="/users" label="Users" icon={UsersIcon} collapsed />
<SidebarNavItem to="/profile" label="Profile" icon={UserCircleIcon} collapsed />
</nav>
),
args: {
collapsed: true,
},
render: (args) => (
<nav className="flex w-14 flex-col gap-1">
<SidebarNavItem {...args} />
<SidebarNavItem to="/users" label="Users" icon={UsersIcon} collapsed />
<SidebarNavItem to="/profile" label="Profile" icon={UserCircleIcon} collapsed />
</nav>
),
};

62
src/components/SidebarNavItem.tsx
View File

@@ -4,40 +4,40 @@ import { NavLink } from 'react-router-dom';
type IconType = ComponentType<SVGProps<SVGSVGElement>>;
type SidebarNavItemProps = {
to: string;
label: string;
icon: IconType;
collapsed: boolean;
onClick?: () => void;
to: string;
label: string;
icon: IconType;
collapsed: boolean;
onClick?: () => void;
};
export function SidebarNavItem({
to,
label,
icon: Icon,
collapsed,
onClick,
to,
label,
icon: Icon,
collapsed,
onClick,
}: Readonly<SidebarNavItemProps>) {
const layoutClass = collapsed
? 'mx-auto w-8 justify-center px-0'
: 'px-2 lg:w-full lg:justify-start';
const layoutClass = collapsed
? 'mx-auto w-8 justify-center px-0'
: 'px-2 lg:w-full lg:justify-start';
return (
<NavLink
to={to}
onClick={onClick}
className={({ isActive }) =>
`inline-flex h-8 items-center rounded-lg text-sm font-medium transition ${layoutClass} ${
isActive ? 'bg-accent-500 text-white' : 'ui-body-secondary hover:bg-zinc-500/15'
}`
}
>
<Icon className="h-4 w-4 shrink-0" />
{!collapsed ? (
<span className="ml-2 truncate leading-none">{label}</span>
) : (
<span className="ml-2 lg:hidden">{label}</span>
)}
</NavLink>
);
return (
<NavLink
to={to}
onClick={onClick}
className={({ isActive }) =>
`inline-flex h-8 items-center rounded-lg text-sm font-medium transition ${layoutClass} ${
isActive ? 'bg-accent-500 text-white' : 'ui-body-secondary hover:bg-zinc-500/15'
}`
}
>
<Icon className="h-4 w-4 shrink-0" />
{!collapsed ? (
<span className="ml-2 truncate leading-none">{label}</span>
) : (
<span className="ml-2 lg:hidden">{label}</span>
)}
</NavLink>
);
}

369
src/components/Table.stories.tsx
View File

@@ -5,162 +5,163 @@ import { Chip } from './Chip';
import { Table, type TableHeader } from './Table';
type UserRow = {
id: string;
name: string;
role: 'ADMIN' | 'EDITOR' | 'AUTHOR';
status: 'Active' | 'Pending';
posts: number;
id: string;
name: string;
role: 'ADMIN' | 'EDITOR' | 'AUTHOR';
status: 'Active' | 'Pending';
posts: number;
};
const rows: UserRow[] = [
{ id: '1', name: 'Beatrice Rosa', role: 'ADMIN', status: 'Active', posts: 48 },
{ id: '2', name: 'Luca Valli', role: 'EDITOR', status: 'Active', posts: 26 },
{ id: '3', name: 'Marta Bellini', role: 'AUTHOR', status: 'Pending', posts: 4 },
{ id: '4', name: 'Giulia Fontana', role: 'AUTHOR', status: 'Active', posts: 12 },
{ id: '5', name: 'Andrea Pini', role: 'EDITOR', status: 'Pending', posts: 9 },
{ id: '6', name: 'Sofia Denti', role: 'AUTHOR', status: 'Active', posts: 7 },
{ id: '7', name: 'Marco Serra', role: 'AUTHOR', status: 'Active', posts: 18 },
{ id: '8', name: 'Elena Neri', role: 'EDITOR', status: 'Active', posts: 31 },
{ id: '1', name: 'Beatrice Rosa', role: 'ADMIN', status: 'Active', posts: 48 },
{ id: '2', name: 'Luca Valli', role: 'EDITOR', status: 'Active', posts: 26 },
{ id: '3', name: 'Marta Bellini', role: 'AUTHOR', status: 'Pending', posts: 4 },
{ id: '4', name: 'Giulia Fontana', role: 'AUTHOR', status: 'Active', posts: 12 },
{ id: '5', name: 'Andrea Pini', role: 'EDITOR', status: 'Pending', posts: 9 },
{ id: '6', name: 'Sofia Denti', role: 'AUTHOR', status: 'Active', posts: 7 },
{ id: '7', name: 'Marco Serra', role: 'AUTHOR', status: 'Active', posts: 18 },
{ id: '8', name: 'Elena Neri', role: 'EDITOR', status: 'Active', posts: 31 },
];
const headers: TableHeader<UserRow>[] = [
{
id: 'name',
label: 'Name',
value: (row) => row.name,
sortable: true,
sortField: 'name',
cellClassName: 'table-cell-primary',
},
{
id: 'role',
label: 'Role',
value: (row) => row.role,
sortable: true,
sortField: 'role',
},
{
id: 'status',
label: 'Status',
value: (row) => (
<Chip variant="outlined" tone={row.status === 'Active' ? 'indigo-700' : 'cyan-700'}>
{row.status}
</Chip>
),
},
{
id: 'posts',
label: 'Posts',
value: (row) => row.posts,
sortable: true,
sortField: 'posts',
},
{
id: 'name',
label: 'Name',
value: (row) => row.name,
sortable: true,
sortField: 'name',
cellClassName: 'table-cell-primary',
},
{
id: 'role',
label: 'Role',
value: (row) => row.role,
sortable: true,
sortField: 'role',
},
{
id: 'status',
label: 'Status',
value: (row) => (
<Chip variant="outlined" tone={row.status === 'Active' ? 'indigo-700' : 'cyan-700'}>
{row.status}
</Chip>
),
},
{
id: 'posts',
label: 'Posts',
value: (row) => row.posts,
sortable: true,
sortField: 'posts',
},
];
type UsersTableProps = {
data: UserRow[];
isLoading?: boolean;
emptyMessage?: string;
sorting?: SortState | null;
onSortChange?: (field: string) => void;
pagination?: {
page: number;
pageSize: number;
total: number;
totalPages: number;
onPageChange: (page: number) => void;
onPageSizeChange?: (pageSize: number) => void;
};
data: UserRow[];
isLoading?: boolean;
emptyMessage?: string;
sorting?: SortState | null;
onSortChange?: (field: string) => void;
pagination?: {
page: number;
pageSize: number;
total: number;
totalPages: number;
onPageChange: (page: number) => void;
onPageSizeChange?: (pageSize: number) => void;
};
};
function UsersTable(props: Readonly<UsersTableProps>) {
return (
<Table<UserRow>
headers={headers}
data={props.data}
rowKey={(row) => row.id}
isLoading={props.isLoading}
emptyMessage={props.emptyMessage}
sorting={props.sorting}
onSortChange={props.onSortChange}
pagination={props.pagination}
/>
);
return (
<Table<UserRow>
headers={headers}
data={props.data}
rowKey={(row) => row.id}
isLoading={props.isLoading}
emptyMessage={props.emptyMessage}
sorting={props.sorting}
onSortChange={props.onSortChange}
pagination={props.pagination}
/>
);
}
function sortRows(data: UserRow[], sorting: SortState | null): UserRow[] {
if (!sorting) {
return data;
}
if (!sorting) {
return data;
}
const sorted = [...data];
sorted.sort((a, b) => {
const left = a[sorting.field as keyof UserRow];
const right = b[sorting.field as keyof UserRow];
if (left === right) {
return 0;
}
if (typeof left === 'number' && typeof right === 'number') {
return sorting.direction === 'asc' ? left - right : right - left;
}
return sorting.direction === 'asc'
? String(left).localeCompare(String(right))
: String(right).localeCompare(String(left));
});
return sorted;
const sorted = [...data];
sorted.sort((a, b) => {
const left = a[sorting.field as keyof UserRow];
const right = b[sorting.field as keyof UserRow];
if (left === right) {
return 0;
}
if (typeof left === 'number' && typeof right === 'number') {
return sorting.direction === 'asc' ? left - right : right - left;
}
return sorting.direction === 'asc'
? String(left).localeCompare(String(right))
: String(right).localeCompare(String(left));
});
return sorted;
}
const meta = {
title: 'Components/Table',
component: UsersTable,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component:
'Generic data table with loading/empty states, optional sorting controls, and optional pagination footer.',
},
},
},
argTypes: {
data: {
description: 'Rows rendered in the table body.',
control: 'object',
table: { type: { summary: 'UserRow[]' } },
},
isLoading: {
description: 'When true, shows the loading indicator row.',
control: 'boolean',
table: { type: { summary: 'boolean' } },
},
emptyMessage: {
description: 'Message shown when `data` is empty and `isLoading` is false.',
control: 'text',
table: { type: { summary: 'string' } },
},
sorting: {
description: 'Current sort state object. Use `null` for no active sorting.',
control: 'object',
table: { type: { summary: "{ field: string; direction: 'asc' | 'desc' } | null" } },
},
onSortChange: {
description: 'Callback fired when a sortable header is clicked.',
action: 'sort changed',
table: { type: { summary: '(field: string) => void' } },
},
pagination: {
description: 'Pagination config object. When omitted, pagination footer is hidden.',
control: 'object',
table: {
type: {
summary: '{ page; pageSize; total; totalPages; onPageChange; onPageSizeChange? }',
title: 'Components/Table',
component: UsersTable,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component:
'Generic data table with loading/empty states, optional sorting controls, and optional pagination footer.',
},
},
},
},
},
args: {
data: rows,
},
argTypes: {
data: {
description: 'Rows rendered in the table body.',
control: 'object',
table: { type: { summary: 'UserRow[]' } },
},
isLoading: {
description: 'When true, shows the loading indicator row.',
control: 'boolean',
table: { type: { summary: 'boolean' } },
},
emptyMessage: {
description: 'Message shown when `data` is empty and `isLoading` is false.',
control: 'text',
table: { type: { summary: 'string' } },
},
sorting: {
description: 'Current sort state object. Use `null` for no active sorting.',
control: 'object',
table: { type: { summary: "{ field: string; direction: 'asc' | 'desc' } | null" } },
},
onSortChange: {
description: 'Callback fired when a sortable header is clicked.',
action: 'sort changed',
table: { type: { summary: '(field: string) => void' } },
},
pagination: {
description: 'Pagination config object. When omitted, pagination footer is hidden.',
control: 'object',
table: {
type: {
summary:
'{ page; pageSize; total; totalPages; onPageChange; onPageSizeChange? }',
},
},
},
},
args: {
data: rows,
},
} satisfies Meta<typeof UsersTable>;
export default meta;
@@ -169,61 +170,61 @@ type Story = StoryObj<typeof meta>;
export const WithRows: Story = {};
export const Loading: Story = {
args: {
isLoading: true,
},
args: {
isLoading: true,
},
};
export const Empty: Story = {
args: {
data: [],
emptyMessage: 'No users found',
},
args: {
data: [],
emptyMessage: 'No users found',
},
};
export const InteractiveSortingAndPagination: Story = {
render: () => {
const [sorting, setSorting] = useState<SortState | null>({
field: 'name',
direction: 'asc',
});
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(5);
render: () => {
const [sorting, setSorting] = useState<SortState | null>({
field: 'name',
direction: 'asc',
});
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(5);
const sorted = useMemo(() => sortRows(rows, sorting), [sorting]);
const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));
const safePage = Math.min(page, totalPages);
const start = (safePage - 1) * pageSize;
const pagedRows = sorted.slice(start, start + pageSize);
const sorted = useMemo(() => sortRows(rows, sorting), [sorting]);
const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));
const safePage = Math.min(page, totalPages);
const start = (safePage - 1) * pageSize;
const pagedRows = sorted.slice(start, start + pageSize);
return (
<UsersTable
data={pagedRows}
sorting={sorting}
onSortChange={(field) => {
setPage(1);
setSorting((prev) => {
if (!prev || prev.field !== field) {
return { field, direction: 'asc' };
}
if (prev.direction === 'asc') {
return { field, direction: 'desc' };
}
return null;
});
}}
pagination={{
page: safePage,
pageSize,
total: sorted.length,
totalPages,
onPageChange: setPage,
onPageSizeChange: (next) => {
setPage(1);
setPageSize(next);
},
}}
/>
);
},
return (
<UsersTable
data={pagedRows}
sorting={sorting}
onSortChange={(field) => {
setPage(1);
setSorting((prev) => {
if (!prev || prev.field !== field) {
return { field, direction: 'asc' };
}
if (prev.direction === 'asc') {
return { field, direction: 'desc' };
}
return null;
});
}}
pagination={{
page: safePage,
pageSize,
total: sorted.length,
totalPages,
onPageChange: setPage,
onPageSizeChange: (next) => {
setPage(1);
setPageSize(next);
},
}}
/>
);
},
};

355
src/components/Table.tsx
View File

@@ -1,10 +1,10 @@
import type { ReactNode } from 'react';
import {
ArrowPathIcon,
ChevronDownIcon,
ChevronLeftIcon,
ChevronRightIcon,
ChevronUpIcon,
ArrowPathIcon,
ChevronDownIcon,
ChevronLeftIcon,
ChevronRightIcon,
ChevronUpIcon,
} from '@heroicons/react/24/solid';
import { ArrowsUpDownIcon } from '@heroicons/react/24/outline';
import { Button } from './Button';
@@ -15,183 +15,192 @@ import type { SortState } from '../types/sort';
type HeaderValue<T> = ReactNode | ((row: T) => ReactNode);
export type TableHeader<T> = {
label: string;
id: string;
value: HeaderValue<T>;
sortable?: boolean;
sortField?: string;
headerClassName?: string;
cellClassName?: string;
label: string;
id: string;
value: HeaderValue<T>;
sortable?: boolean;
sortField?: string;
headerClassName?: string;
cellClassName?: string;
};
type TableProps<T> = {
headers: TableHeader<T>[];
data: T[];
rowKey: (row: T, index: number) => string;
isLoading?: boolean;
emptyMessage?: string;
className?: string;
sorting?: SortState | null;
onSortChange?: (field: string) => void;
pagination?: {
page: number;
pageSize: number;
total: number;
totalPages: number;
onPageChange: (page: number) => void;
onPageSizeChange?: (pageSize: number) => void;
};
headers: TableHeader<T>[];
data: T[];
rowKey: (row: T, index: number) => string;
isLoading?: boolean;
emptyMessage?: string;
className?: string;
sorting?: SortState | null;
onSortChange?: (field: string) => void;
pagination?: {
page: number;
pageSize: number;
total: number;
totalPages: number;
onPageChange: (page: number) => void;
onPageSizeChange?: (pageSize: number) => void;
};
};
export function Table<T>({
headers,
data,
rowKey,
isLoading = false,
emptyMessage = 'No data to show.',
className = '',
sorting = null,
onSortChange,
pagination,
headers,
data,
rowKey,
isLoading = false,
emptyMessage = 'No data to show.',
className = '',
sorting = null,
onSortChange,
pagination,
}: Readonly<TableProps<T>>) {
const canGoPrev = pagination != null && pagination.page > 1;
const canGoNext = pagination != null && pagination.page < pagination.totalPages;
const canGoPrev = pagination != null && pagination.page > 1;
const canGoNext = pagination != null && pagination.page < pagination.totalPages;
return (
<div className={`table-shell ${className}`.trim()}>
<div className="table-scroll">
<table className="table-root">
<thead className="table-head">
<tr>
{headers.map((header) => {
const canSort =
header.sortable === true &&
typeof onSortChange === 'function' &&
typeof header.sortField === 'string' &&
header.sortField.length > 0;
const isActiveSort = canSort && sorting?.field === header.sortField;
const sortDirection = isActiveSort ? sorting?.direction : null;
return (
<div className={`table-shell ${className}`.trim()}>
<div className="table-scroll">
<table className="table-root">
<thead className="table-head">
<tr>
{headers.map((header) => {
const canSort =
header.sortable === true &&
typeof onSortChange === 'function' &&
typeof header.sortField === 'string' &&
header.sortField.length > 0;
const isActiveSort = canSort && sorting?.field === header.sortField;
const sortDirection = isActiveSort ? sorting?.direction : null;
return (
<th
key={header.id}
className={`table-head-cell ${header.headerClassName ?? ''}`.trim()}
>
{canSort ? (
<button
type="button"
className="table-sort-button"
onClick={() => onSortChange(header.sortField as string)}
aria-label={`Sort by ${header.label}`}
>
<span>{header.label}</span>
<span
className="table-sort-icon"
aria-hidden="true"
data-sort-state={sortDirection ?? 'none'}
>
{sortDirection === 'asc' ? <ChevronUpIcon className="h-4 w-4" /> : null}
{sortDirection === 'desc' ? (
<ChevronDownIcon className="h-4 w-4" />
) : null}
{sortDirection == null ? <ArrowsUpDownIcon className="h-4 w-4" /> : null}
</span>
</button>
) : (
header.label
)}
</th>
);
})}
</tr>
</thead>
<tbody>
{isLoading ? (
<tr className="table-body-row">
<td colSpan={headers.length} className="px-4 py-6 text-center">
<Label
as="span"
variant="body2"
className="inline-flex items-center justify-center ui-loading"
>
<ArrowPathIcon className="h-5 w-5 animate-spin" aria-hidden="true" />
</Label>
</td>
</tr>
return (
<th
key={header.id}
className={`table-head-cell ${header.headerClassName ?? ''}`.trim()}
>
{canSort ? (
<button
type="button"
className="table-sort-button"
onClick={() =>
onSortChange(header.sortField as string)
}
aria-label={`Sort by ${header.label}`}
>
<span>{header.label}</span>
<span
className="table-sort-icon"
aria-hidden="true"
data-sort-state={sortDirection ?? 'none'}
>
{sortDirection === 'asc' ? (
<ChevronUpIcon className="h-4 w-4" />
) : null}
{sortDirection === 'desc' ? (
<ChevronDownIcon className="h-4 w-4" />
) : null}
{sortDirection == null ? (
<ArrowsUpDownIcon className="h-4 w-4" />
) : null}
</span>
</button>
) : (
header.label
)}
</th>
);
})}
</tr>
</thead>
<tbody>
{isLoading ? (
<tr className="table-body-row">
<td colSpan={headers.length} className="px-4 py-6 text-center">
<Label
as="span"
variant="body2"
className="inline-flex items-center justify-center ui-loading"
>
<ArrowPathIcon
className="h-5 w-5 animate-spin"
aria-hidden="true"
/>
</Label>
</td>
</tr>
) : null}
{!isLoading && data.length === 0 ? (
<tr className="table-body-row">
<td colSpan={headers.length} className="px-4 py-6 text-center">
<Label variant="body2" className="ui-empty">
{emptyMessage}
</Label>
</td>
</tr>
) : null}
{!isLoading &&
data.map((row, index) => (
<tr key={rowKey(row, index)} className="table-body-row">
{headers.map((header) => {
const content =
typeof header.value === 'function'
? (header.value as (item: T) => ReactNode)(row)
: header.value;
return (
<td
key={`${header.id}-${index}`}
className={`table-cell-secondary ${header.cellClassName ?? ''}`.trim()}
>
{content}
</td>
);
})}
</tr>
))}
</tbody>
</table>
</div>
{pagination ? (
<div className="flex flex-col gap-3 border-t border-zinc-500/20 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
<Label variant="body2">{pagination.total} results</Label>
<div className="flex flex-wrap items-center gap-2">
{pagination.onPageSizeChange ? (
<Dropdown
label="Rows"
value={String(pagination.pageSize)}
choices={[5, 10, 20, 50, 100].map((size) => ({
id: String(size),
label: String(size),
}))}
size="sm"
layout="inline"
className="max-w-none"
selectClassName="rounded-lg px-2"
disabled={isLoading}
onChange={(value) => pagination.onPageSizeChange?.(Number(value))}
/>
) : null}
<Button
type="outlined"
size="sm"
icon={ChevronLeftIcon}
ariaLabel="Previous page"
disabled={!canGoPrev || isLoading}
onClick={() => pagination.onPageChange(pagination.page - 1)}
/>
<Label variant="body2" className="px-1 text-xs ui-body-secondary">
Page {pagination.page} of {Math.max(pagination.totalPages, 1)}
</Label>
<Button
type="outlined"
size="sm"
icon={ChevronRightIcon}
ariaLabel="Next page"
disabled={!canGoNext || isLoading}
onClick={() => pagination.onPageChange(pagination.page + 1)}
/>
</div>
</div>
) : null}
{!isLoading && data.length === 0 ? (
<tr className="table-body-row">
<td colSpan={headers.length} className="px-4 py-6 text-center">
<Label variant="body2" className="ui-empty">
{emptyMessage}
</Label>
</td>
</tr>
) : null}
{!isLoading &&
data.map((row, index) => (
<tr key={rowKey(row, index)} className="table-body-row">
{headers.map((header) => {
const content =
typeof header.value === 'function'
? (header.value as (item: T) => ReactNode)(row)
: header.value;
return (
<td
key={`${header.id}-${index}`}
className={`table-cell-secondary ${header.cellClassName ?? ''}`.trim()}
>
{content}
</td>
);
})}
</tr>
))}
</tbody>
</table>
</div>
{pagination ? (
<div className="flex flex-col gap-3 border-t border-zinc-500/20 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
<Label variant="body2">{pagination.total} results</Label>
<div className="flex flex-wrap items-center gap-2">
{pagination.onPageSizeChange ? (
<Dropdown
label="Rows"
value={String(pagination.pageSize)}
choices={[5, 10, 20, 50, 100].map((size) => ({
id: String(size),
label: String(size),
}))}
size="sm"
layout="inline"
className="max-w-none"
selectClassName="rounded-lg px-2"
disabled={isLoading}
onChange={(value) => pagination.onPageSizeChange?.(Number(value))}
/>
) : null}
<Button
type="outlined"
size="sm"
icon={ChevronLeftIcon}
ariaLabel="Previous page"
disabled={!canGoPrev || isLoading}
onClick={() => pagination.onPageChange(pagination.page - 1)}
/>
<Label variant="body2" className="px-1 text-xs ui-body-secondary">
Page {pagination.page} of {Math.max(pagination.totalPages, 1)}
</Label>
<Button
type="outlined"
size="sm"
icon={ChevronRightIcon}
ariaLabel="Next page"
disabled={!canGoNext || isLoading}
onClick={() => pagination.onPageChange(pagination.page + 1)}
/>
</div>
</div>
) : null}
</div>
);
);
}

172
src/styles/base.css
View File

@@ -1,93 +1,93 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
--bg-page: #16121a;
--surface-bg: rgba(24, 24, 27, 0.45);
--surface-bg-strong: rgba(24, 24, 27, 0.62);
--surface-border: rgba(82, 82, 91, 0.6);
--surface-divider: rgba(63, 63, 70, 0.85);
--text-primary: #d5cfdf;
--text-secondary: #bcb7c8;
--text-muted: #a1a1aa;
--text-soft: #8f8b9c;
--field-bg: rgba(24, 24, 27, 0.6);
--field-border: #3f3f46;
--field-disabled-bg: rgba(24, 24, 27, 0.5);
--field-disabled-border: #3f3f46;
--field-disabled-text: #bbb6c3;
--field-disabled-placeholder: #71717a;
--ghost-bg: rgba(24, 24, 27, 0.5);
--ghost-border: #3f3f46;
--ghost-hover: rgba(39, 39, 42, 0.7);
--ghost-disabled-bg: rgba(24, 24, 27, 0.3);
--ghost-disabled-border: #27272a;
--ghost-disabled-text: #71717a;
--primary-disabled-bg: #3f3f46;
--primary-disabled-text: #a1a1aa;
--table-head-bg: rgba(24, 24, 27, 0.8);
--table-row-divider: #27272a;
--auth-chrome-bg: rgba(24, 24, 27, 0.7);
--auth-glass-blur: 22px;
--auth-sidebar-mobile-width: min(86vw, 320px);
--auth-right-sidebar-mobile-width: min(86vw, 340px);
--error-border: rgba(252, 165, 165, 0.3);
--error-bg: rgba(239, 68, 68, 0.1);
--error-text: #fecaca;
--mdx-link: #7d6f98;
--mdx-link-hover: #9587ad;
--mdx-inline-code-bg: #27272a;
--mdx-inline-code-border: #3f3f46;
--mdx-codeblock-bg: #18181b;
--mdx-codeblock-border: #3f3f46;
--mdx-codeblock-text: #e4e4e7;
--mdx-codeblock-gutter: #a1a1aa;
--mdx-codeblock-active: #27272a;
--mdx-codeblock-selection: rgba(125, 111, 152, 0.35);
--mdx-codeblock-bracket: rgba(125, 111, 152, 0.45);
--shadow-glow: 0 0 0 1px rgba(63, 63, 70, 0.65), 0 18px 44px rgba(0, 0, 0, 0.45);
--bg-page: #16121a;
--surface-bg: rgba(24, 24, 27, 0.45);
--surface-bg-strong: rgba(24, 24, 27, 0.62);
--surface-border: rgba(82, 82, 91, 0.6);
--surface-divider: rgba(63, 63, 70, 0.85);
--text-primary: #d5cfdf;
--text-secondary: #bcb7c8;
--text-muted: #a1a1aa;
--text-soft: #8f8b9c;
--field-bg: rgba(24, 24, 27, 0.6);
--field-border: #3f3f46;
--field-disabled-bg: rgba(24, 24, 27, 0.5);
--field-disabled-border: #3f3f46;
--field-disabled-text: #bbb6c3;
--field-disabled-placeholder: #71717a;
--ghost-bg: rgba(24, 24, 27, 0.5);
--ghost-border: #3f3f46;
--ghost-hover: rgba(39, 39, 42, 0.7);
--ghost-disabled-bg: rgba(24, 24, 27, 0.3);
--ghost-disabled-border: #27272a;
--ghost-disabled-text: #71717a;
--primary-disabled-bg: #3f3f46;
--primary-disabled-text: #a1a1aa;
--table-head-bg: rgba(24, 24, 27, 0.8);
--table-row-divider: #27272a;
--auth-chrome-bg: rgba(24, 24, 27, 0.7);
--auth-glass-blur: 22px;
--auth-sidebar-mobile-width: min(86vw, 320px);
--auth-right-sidebar-mobile-width: min(86vw, 340px);
--error-border: rgba(252, 165, 165, 0.3);
--error-bg: rgba(239, 68, 68, 0.1);
--error-text: #fecaca;
--mdx-link: #7d6f98;
--mdx-link-hover: #9587ad;
--mdx-inline-code-bg: #27272a;
--mdx-inline-code-border: #3f3f46;
--mdx-codeblock-bg: #18181b;
--mdx-codeblock-border: #3f3f46;
--mdx-codeblock-text: #e4e4e7;
--mdx-codeblock-gutter: #a1a1aa;
--mdx-codeblock-active: #27272a;
--mdx-codeblock-selection: rgba(125, 111, 152, 0.35);
--mdx-codeblock-bracket: rgba(125, 111, 152, 0.45);
--shadow-glow: 0 0 0 1px rgba(63, 63, 70, 0.65), 0 18px 44px rgba(0, 0, 0, 0.45);
}
:root[data-theme='light'] {
--bg-page: #f7f7fb;
--surface-bg: rgba(255, 255, 255, 0.9);
--surface-bg-strong: rgba(255, 255, 255, 0.98);
--surface-border: rgba(161, 161, 170, 0.45);
--surface-divider: rgba(212, 212, 216, 0.9);
--text-primary: #52485c;
--text-secondary: #514e60;
--text-muted: #52525b;
--text-soft: #71717a;
--field-bg: rgba(253, 253, 253, 0.8);
--field-border: #d4d4d8;
--field-disabled-bg: rgba(248, 248, 248, 0.8);
--field-disabled-border: #d7d7d7;
--field-disabled-text: #71717a;
--field-disabled-placeholder: #a1a1aa;
--ghost-bg: rgba(255, 255, 255, 0.88);
--ghost-border: #d4d4d8;
--ghost-hover: #f4f4f5;
--ghost-disabled-bg: #f4f4f5;
--ghost-disabled-border: #e4e4e7;
--ghost-disabled-text: #a1a1aa;
--primary-disabled-bg: #e4e4e7;
--primary-disabled-text: #a1a1aa;
--table-head-bg: #f4f4f5;
--table-row-divider: #e4e4e7;
--auth-chrome-bg: rgba(255, 255, 255, 0.7);
--auth-glass-blur: 15px;
--error-border: rgba(248, 113, 113, 0.35);
--error-bg: rgba(254, 226, 226, 0.8);
--error-text: #991b1b;
--mdx-link: #7d6f98;
--mdx-link-hover: #6a5d84;
--mdx-inline-code-bg: #f4f4f5;
--mdx-inline-code-border: #d4d4d8;
--mdx-codeblock-bg: #ffffff;
--mdx-codeblock-border: #d4d4d8;
--mdx-codeblock-text: #18181b;
--mdx-codeblock-gutter: #71717a;
--mdx-codeblock-active: #f4f4f5;
--mdx-codeblock-selection: rgba(125, 111, 152, 0.22);
--mdx-codeblock-bracket: rgba(125, 111, 152, 0.32);
--shadow-glow: 0 0 0 1px rgba(212, 212, 216, 0.9), 0 18px 36px rgba(15, 23, 42, 0.08);
--bg-page: #f7f7fb;
--surface-bg: rgba(255, 255, 255, 0.9);
--surface-bg-strong: rgba(255, 255, 255, 0.98);
--surface-border: rgba(161, 161, 170, 0.45);
--surface-divider: rgba(212, 212, 216, 0.9);
--text-primary: #52485c;
--text-secondary: #514e60;
--text-muted: #52525b;
--text-soft: #71717a;
--field-bg: rgba(253, 253, 253, 0.8);
--field-border: #d4d4d8;
--field-disabled-bg: rgba(248, 248, 248, 0.8);
--field-disabled-border: #d7d7d7;
--field-disabled-text: #71717a;
--field-disabled-placeholder: #a1a1aa;
--ghost-bg: rgba(255, 255, 255, 0.88);
--ghost-border: #d4d4d8;
--ghost-hover: #f4f4f5;
--ghost-disabled-bg: #f4f4f5;
--ghost-disabled-border: #e4e4e7;
--ghost-disabled-text: #a1a1aa;
--primary-disabled-bg: #e4e4e7;
--primary-disabled-text: #a1a1aa;
--table-head-bg: #f4f4f5;
--table-row-divider: #e4e4e7;
--auth-chrome-bg: rgba(255, 255, 255, 0.7);
--auth-glass-blur: 15px;
--error-border: rgba(248, 113, 113, 0.35);
--error-bg: rgba(254, 226, 226, 0.8);
--error-text: #991b1b;
--mdx-link: #7d6f98;
--mdx-link-hover: #6a5d84;
--mdx-inline-code-bg: #f4f4f5;
--mdx-inline-code-border: #d4d4d8;
--mdx-codeblock-bg: #ffffff;
--mdx-codeblock-border: #d4d4d8;
--mdx-codeblock-text: #18181b;
--mdx-codeblock-gutter: #71717a;
--mdx-codeblock-active: #f4f4f5;
--mdx-codeblock-selection: rgba(125, 111, 152, 0.22);
--mdx-codeblock-bracket: rgba(125, 111, 152, 0.32);
--shadow-glow: 0 0 0 1px rgba(212, 212, 216, 0.9), 0 18px 36px rgba(15, 23, 42, 0.08);
}

216
src/styles/components.css
View File

@@ -1,289 +1,289 @@
.surface {
border: 1px solid var(--surface-border);
background-color: var(--surface-bg);
box-shadow: var(--shadow-glow);
@apply rounded-2xl backdrop-blur-xl;
border: 1px solid var(--surface-border);
background-color: var(--surface-bg);
box-shadow: var(--shadow-glow);
@apply rounded-2xl backdrop-blur-xl;
}
.field {
border: 1px solid var(--field-border);
background-color: var(--field-bg);
color: var(--text-primary);
@apply w-full rounded-xl px-3 py-2 text-sm outline-none transition focus:border-accent-400 focus:ring-2 focus:ring-accent-400/30;
border: 1px solid var(--field-border);
background-color: var(--field-bg);
color: var(--text-primary);
@apply w-full rounded-xl px-3 py-2 text-sm outline-none transition focus:border-accent-400 focus:ring-2 focus:ring-accent-400/30;
}
.field::placeholder {
color: var(--text-soft);
color: var(--text-soft);
}
.field:disabled {
border-color: var(--field-disabled-border);
background-color: var(--field-disabled-bg);
color: var(--field-disabled-text);
border-color: var(--field-disabled-border);
background-color: var(--field-disabled-bg);
color: var(--field-disabled-text);
}
.field:disabled::placeholder {
color: var(--field-disabled-placeholder);
color: var(--field-disabled-placeholder);
}
.btn-solid,
.btn-outlined,
.btn-noborder {
@apply inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-semibold transition;
@apply inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-semibold transition;
}
.btn-solid {
border: 1px solid transparent;
border: 1px solid transparent;
}
.btn-outlined {
border: 1px solid var(--ghost-border);
border: 1px solid var(--ghost-border);
}
.btn-noborder {
border: 1px solid transparent;
border: 1px solid transparent;
}
.btn-solid.btn-primary {
@apply bg-accent-500 text-white hover:bg-accent-400 disabled:opacity-100;
@apply bg-accent-500 text-white hover:bg-accent-400 disabled:opacity-100;
}
.btn-solid.btn-primary:disabled {
background-color: var(--primary-disabled-bg);
color: var(--primary-disabled-text);
background-color: var(--primary-disabled-bg);
color: var(--primary-disabled-text);
}
.btn-solid.btn-secondary {
border-color: var(--ghost-border);
background-color: var(--ghost-border);
color: var(--text-primary);
border-color: var(--ghost-border);
background-color: var(--ghost-border);
color: var(--text-primary);
}
.btn-solid.btn-secondary:hover {
background-color: var(--ghost-hover);
background-color: var(--ghost-hover);
}
.btn-solid.btn-secondary:disabled {
border-color: var(--ghost-disabled-border);
background-color: var(--ghost-disabled-bg);
color: var(--ghost-disabled-text);
border-color: var(--ghost-disabled-border);
background-color: var(--ghost-disabled-bg);
color: var(--ghost-disabled-text);
}
.btn-solid.btn-important {
border-color: #dc2626;
@apply bg-red-600 text-white hover:bg-red-500 disabled:opacity-100;
border-color: #dc2626;
@apply bg-red-600 text-white hover:bg-red-500 disabled:opacity-100;
}
.btn-solid.btn-important:disabled {
border-color: #7f1d1d;
background-color: #7f1d1d;
color: #fecaca;
border-color: #7f1d1d;
background-color: #7f1d1d;
color: #fecaca;
}
.btn-outlined.btn-secondary {
border-color: var(--ghost-border);
background-color: var(--ghost-bg);
color: var(--text-secondary);
border-color: var(--ghost-border);
background-color: var(--ghost-bg);
color: var(--text-secondary);
}
.btn-outlined.btn-secondary:hover {
background-color: var(--ghost-hover);
background-color: var(--ghost-hover);
}
.btn-outlined.btn-secondary:disabled {
border-color: var(--ghost-disabled-border);
background-color: var(--ghost-disabled-bg);
color: var(--ghost-disabled-text);
border-color: var(--ghost-disabled-border);
background-color: var(--ghost-disabled-bg);
color: var(--ghost-disabled-text);
}
.btn-outlined.btn-primary {
@apply border-accent-500 text-accent-300;
background-color: transparent;
@apply border-accent-500 text-accent-300;
background-color: transparent;
}
.btn-outlined.btn-primary:hover {
@apply bg-accent-500/15 text-accent-300;
@apply bg-accent-500/15 text-accent-300;
}
.btn-outlined.btn-primary:disabled {
@apply border-accent-500/40 text-accent-300/60;
background-color: transparent;
@apply border-accent-500/40 text-accent-300/60;
background-color: transparent;
}
.btn-outlined.btn-important {
@apply border-red-500 text-red-400;
background-color: transparent;
@apply border-red-500 text-red-400;
background-color: transparent;
}
.btn-outlined.btn-important:hover {
@apply bg-red-500/10 text-red-300;
@apply bg-red-500/10 text-red-300;
}
.btn-outlined.btn-important:disabled {
@apply border-red-900 text-red-900;
background-color: transparent;
@apply border-red-900 text-red-900;
background-color: transparent;
}
.btn-noborder.btn-secondary {
background-color: transparent;
color: var(--text-secondary);
background-color: transparent;
color: var(--text-secondary);
}
.btn-noborder.btn-secondary:hover {
background-color: var(--ghost-hover);
background-color: var(--ghost-hover);
}
.btn-noborder.btn-secondary:disabled {
background-color: transparent;
color: var(--ghost-disabled-text);
background-color: transparent;
color: var(--ghost-disabled-text);
}
.btn-noborder.btn-primary {
@apply text-accent-300;
background-color: transparent;
@apply text-accent-300;
background-color: transparent;
}
.btn-noborder.btn-primary:hover {
@apply bg-accent-500/15 text-accent-300;
@apply bg-accent-500/15 text-accent-300;
}
.btn-noborder.btn-primary:disabled {
@apply text-accent-300/60;
background-color: transparent;
@apply text-accent-300/60;
background-color: transparent;
}
.btn-noborder.btn-important {
@apply text-red-400;
background-color: transparent;
@apply text-red-400;
background-color: transparent;
}
.btn-noborder.btn-important:hover {
@apply bg-red-500/10 text-red-300;
@apply bg-red-500/10 text-red-300;
}
.btn-noborder.btn-important:disabled {
@apply text-red-900;
background-color: transparent;
@apply text-red-900;
background-color: transparent;
}
.ui-kicker {
color: var(--text-muted);
color: var(--text-muted);
}
.ui-title {
color: var(--text-primary);
color: var(--text-primary);
}
.ui-body-secondary {
color: var(--text-muted);
color: var(--text-muted);
}
.ui-code {
border: 1px solid var(--surface-divider);
background-color: var(--ghost-bg);
color: var(--text-primary);
@apply rounded-md px-1.5 py-0.5;
border: 1px solid var(--surface-divider);
background-color: var(--ghost-bg);
color: var(--text-primary);
@apply rounded-md px-1.5 py-0.5;
}
.ui-body-primary {
color: var(--text-secondary);
color: var(--text-secondary);
}
.ui-loading {
color: var(--text-muted);
color: var(--text-muted);
}
.ui-empty {
color: var(--text-soft);
color: var(--text-soft);
}
.ui-link {
color: var(--text-secondary);
@apply font-semibold transition;
color: var(--text-secondary);
@apply font-semibold transition;
}
.ui-link:hover {
color: var(--text-primary);
color: var(--text-primary);
}
.ui-label {
color: var(--text-secondary);
color: var(--text-secondary);
}
.ui-label-disabled {
color: var(--text-soft);
color: var(--text-soft);
}
.ui-error {
color: var(--error-text);
color: var(--error-text);
}
.chip-root {
@apply inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-semibold leading-none;
@apply inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-semibold leading-none;
}
.chip-solid {
border-color: var(--ghost-border);
background-color: var(--ghost-border);
color: var(--text-primary);
border-color: var(--ghost-border);
background-color: var(--ghost-border);
color: var(--text-primary);
}
.chip-outlined {
background-color: transparent;
border-color: var(--ghost-border);
color: var(--text-secondary);
background-color: transparent;
border-color: var(--ghost-border);
color: var(--text-secondary);
}
.alert-error {
border: 1px solid var(--error-border);
background-color: var(--error-bg);
color: var(--error-text);
@apply rounded-lg px-3 py-2 text-sm;
border: 1px solid var(--error-border);
background-color: var(--error-bg);
color: var(--error-text);
@apply rounded-lg px-3 py-2 text-sm;
}
.table-shell {
border: 1px solid var(--surface-divider);
background-color: var(--surface-bg-strong);
@apply overflow-hidden rounded-xl;
border: 1px solid var(--surface-divider);
background-color: var(--surface-bg-strong);
@apply overflow-hidden rounded-xl;
}
.table-scroll {
@apply overflow-x-auto;
@apply overflow-x-auto;
}
.table-root {
@apply min-w-full;
@apply min-w-full;
}
.table-head {
background-color: var(--table-head-bg);
border-bottom: 1px solid var(--surface-divider);
background-color: var(--table-head-bg);
border-bottom: 1px solid var(--surface-divider);
}
.table-head-cell {
color: var(--text-primary);
@apply px-4 py-3 text-left text-sm font-semibold tracking-wider;
color: var(--text-primary);
@apply px-4 py-3 text-left text-sm font-semibold tracking-wider;
}
.table-sort-button {
@apply inline-flex items-center gap-1.5 text-left;
@apply inline-flex items-center gap-1.5 text-left;
}
.table-sort-icon {
color: var(--text-muted);
@apply inline-flex items-center;
color: var(--text-muted);
@apply inline-flex items-center;
}
.table-body-row {
border-top: 1px solid var(--table-row-divider);
border-top: 1px solid var(--table-row-divider);
}
.table-cell-primary {
color: var(--text-primary);
@apply px-4 py-3 text-sm;
color: var(--text-primary);
@apply px-4 py-3 text-sm;
}
.table-cell-secondary {
color: var(--text-secondary);
@apply px-4 py-3 text-sm;
color: var(--text-secondary);
@apply px-4 py-3 text-sm;
}

4
src/types/sort.ts
View File

@@ -1,6 +1,6 @@
export type SortDirection = 'asc' | 'desc';
export type SortState = {
field: string;
direction: SortDirection;
field: string;
direction: SortDirection;
};

32
tailwind-preset.cjs
View File

@@ -1,21 +1,21 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
accent: {
300: '#a89bbf',
400: '#9587ad',
500: '#7d6f98',
600: '#6a5d84',
theme: {
extend: {
colors: {
accent: {
300: '#a89bbf',
400: '#9587ad',
500: '#7d6f98',
600: '#6a5d84',
},
},
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
},
boxShadow: {
glow: '0 0 0 1px rgba(63,63,70,0.65), 0 18px 44px rgba(0,0,0,0.45)',
},
},
},
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
},
boxShadow: {
glow: '0 0 0 1px rgba(63,63,70,0.65), 0 18px 44px rgba(0,0,0,0.45)',
},
},
},
};

18
tailwind.build.config.cjs
View File

@@ -2,13 +2,13 @@ const webUiPreset = require('./tailwind-preset.cjs');
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [webUiPreset],
content: ['./src/**/*.{ts,tsx,js,jsx}'],
corePlugins: {
preflight: false,
},
theme: {
extend: {},
},
plugins: [],
presets: [webUiPreset],
content: ['./src/**/*.{ts,tsx,js,jsx}'],
corePlugins: {
preflight: false,
},
theme: {
extend: {},
},
plugins: [],
};

12
tailwind.storybook.config.cjs
View File

@@ -2,10 +2,10 @@ const webUiPreset = require('./tailwind-preset.cjs');
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [webUiPreset],
content: ['./src/**/*.{ts,tsx,js,jsx,mdx}', './.storybook/**/*.{ts,tsx,js,jsx,mdx}'],
theme: {
extend: {},
},
plugins: [],
presets: [webUiPreset],
content: ['./src/**/*.{ts,tsx,js,jsx,mdx}', './.storybook/**/*.{ts,tsx,js,jsx,mdx}'],
theme: {
extend: {},
},
plugins: [],
};

22
tsconfig.build.json
View File

@@ -1,13 +1,13 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"noEmit": false,
"declaration": true,
"emitDeclarationOnly": true,
"rootDir": "src",
"outDir": "dist",
"declarationMap": true
},
"include": ["src"],
"exclude": ["src/**/*.stories.ts", "src/**/*.stories.tsx"]
"extends": "./tsconfig.json",
"compilerOptions": {
"noEmit": false,
"declaration": true,
"emitDeclarationOnly": true,
"rootDir": "src",
"outDir": "dist",
"declarationMap": true
},
"include": ["src"],
"exclude": ["src/**/*.stories.ts", "src/**/*.stories.tsx"]
}

30
tsconfig.json
View File

@@ -1,17 +1,17 @@
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "Bundler",
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"jsx": "react-jsx",
"strict": true,
"skipLibCheck": true,
"resolveJsonModule": true,
"isolatedModules": true,
"allowImportingTsExtensions": false,
"noEmit": true,
"types": ["react", "react-dom"]
},
"include": ["src"]
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "Bundler",
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"jsx": "react-jsx",
"strict": true,
"skipLibCheck": true,
"resolveJsonModule": true,
"isolatedModules": true,
"allowImportingTsExtensions": false,
"noEmit": true,
"types": ["react", "react-dom"]
},
"include": ["src"]
}

37
vite.config.ts
View File

@@ -3,19 +3,28 @@ import react from '@vitejs/plugin-react';
import { resolve } from 'node:path';
export default defineConfig({
plugins: [react()],
build: {
lib: {
entry: {
index: resolve(__dirname, 'src/index.ts'),
'components/MDXEditorField': resolve(__dirname, 'src/components/MDXEditorField.tsx'),
},
name: 'PanicWebUi',
formats: ['es'],
fileName: (_format, entryName) => `${entryName}.js`,
plugins: [react()],
build: {
lib: {
entry: {
index: resolve(__dirname, 'src/index.ts'),
'components/MDXEditorField': resolve(
__dirname,
'src/components/MDXEditorField.tsx',
),
},
name: 'PanicWebUi',
formats: ['es'],
fileName: (_format, entryName) => `${entryName}.js`,
},
rollupOptions: {
external: [
'react',
'react-dom',
'react-router-dom',
'@heroicons/react',
'@mdxeditor/editor',
],
},
},
rollupOptions: {
external: ['react', 'react-dom', 'react-router-dom', '@heroicons/react', '@mdxeditor/editor'],
},
},
});