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

extract ui to lib

Browse Source
This commit is contained in:
Beatrice Dellacà
2026-02-22 20:35:27 +01:00
parent 23423784df
commit ac60855ae5
24 changed files with 4913 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
.gitignore vendored Normal file
View File

@@ -0,0 +1,50 @@
# Dependencies
node_modules/
# Builds
dist/
build/
coverage/
# Vite / tooling caches
.vite/
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
bun-debug.log*
# Env files (keep .env.example committed)
.env
.env.*
!.env.example
# TypeScript incremental build info
*.tsbuildinfo
# OS / editor cruft
.DS_Store
Thumbs.db
# JetBrains (either ignore all, or see "optional" note below)
.idea/
*.iml
# CMake
cmake-build-*/
# IntelliJ
out/
# JIRA plugin
atlassian-ide-plugin.xml
# Crashlytics plugin
com_crashlytics_export_strings.xml
crashlytics.properties
crashlytics-build.properties
fabric.properties
# Editor-based HTTP Client
http-client.private.env.json

2
.npmrc Normal file
View File

@@ -0,0 +1,2 @@
registry=https://nexus.beatrice.wtf/repository/npm-group/
@panic:registry=https://nexus.beatrice.wtf/repository/npm-hosted/

60
package.json Normal file
View File

@@ -0,0 +1,60 @@
{
"name": "@panic/web-ui",
"version": "0.1.2",
"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"
},
"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",
"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
}
},
"devDependencies": {
"@heroicons/react": "^2.2.0",
"@mdxeditor/editor": "^3.52.4",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"@vitejs/plugin-react": "^5.0.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-router-dom": "^7.0.0",
"tailwindcss": "^3.4.16",
"typescript": "^5.6.2",
"vite": "^7.0.0"
}
}

137
src/components/Button.tsx Normal file
View File

@@ -0,0 +1,137 @@
import type { ElementType, MouseEventHandler } from 'react';
import { Link } from 'react-router-dom';
import type { ComponentSize } from './types';
type ButtonType = 'solid' | 'outlined' | 'noborder';
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;
};
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'
};
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'
};
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'
};
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'
};
const TYPE_CLASS: Record<ButtonType, string> = {
solid: 'btn-solid',
outlined: 'btn-outlined',
noborder: 'btn-noborder'
};
const VARIANT_CLASS: Record<ButtonVariant, string> = {
primary: 'btn-primary',
secondary: 'btn-secondary',
important: 'btn-important'
};
function resolveVariant(type: ButtonType, variant?: ButtonVariant): ButtonVariant {
if (variant) {
return variant;
}
return type === 'solid' ? 'primary' : 'secondary';
}
export function Button({
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>
);
}
return (
<button
type={htmlType}
onClick={onClick}
disabled={disabled}
aria-label={computedAriaLabel}
className={composedClassName}
>
{content}
</button>
);
}

36
src/components/Chip.tsx Normal file
View File

@@ -0,0 +1,36 @@
import type { ElementType, ReactNode } from 'react';
type ChipVariant = 'solid' | 'outlined';
type ChipTone = 'neutral' | 'indigo' | 'cyan';
type ChipProps<T extends ElementType> = {
variant?: ChipVariant;
tone?: ChipTone;
as?: T;
className?: string;
children: ReactNode;
};
const variantClassMap: Record<ChipVariant, string> = {
solid: 'chip-solid',
outlined: 'chip-outlined'
};
const toneClassMap: Record<ChipTone, string> = {
neutral: 'chip-neutral',
indigo: 'chip-indigo',
cyan: 'chip-cyan'
};
export function Chip<T extends ElementType = 'span'>({
variant = 'solid',
tone = 'neutral',
as,
className = '',
children
}: Readonly<ChipProps<T>>) {
const Component = as ?? 'span' as ElementType;
const classes = `chip-root ${variantClassMap[variant]} ${toneClassMap[tone]} ${className}`.trim();
return <Component className={classes}>{children}</Component>;
}

88
src/components/Dropdown.tsx Normal file
View File

@@ -0,0 +1,88 @@
import type { ChangeEventHandler } from 'react';
import { ChevronDownIcon } from '@heroicons/react/24/solid';
import type { ComponentSize } from './types';
type DropdownLayout = 'stacked' | 'inline';
type DropdownChoice = {
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;
};
export function Dropdown({
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 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 wrapperClass = layout === 'inline'
? 'inline-flex w-auto items-center gap-2'
: 'block w-full gap-1';
const selectWrapperClass = 'relative';
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()}
>
{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>
);
}

24
src/components/Form.tsx Normal file
View File

@@ -0,0 +1,24 @@
import type { ReactNode } from 'react';
import { Label } from './Label';
type FormProps = {
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>
<div className="grid grid-cols-1 gap-4 p-4 sm:p-5 lg:grid-cols-3">
{children}
</div>
</div>
);
}

106
src/components/InputField.tsx Normal file
View File

@@ -0,0 +1,106 @@
import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/solid';
import { useState } from 'react';
import type { ChangeEventHandler, FocusEventHandler, ReactNode, Ref } from 'react';
import type { ComponentSize } from './types';
import { Button } from './Button';
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;
};
export function InputField({
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 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';
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>
);
}

55
src/components/Label.tsx Normal file
View File

@@ -0,0 +1,55 @@
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;
};
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'
};
const variantTagMap: Record<LabelVariant, ElementType> = {
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
}: Readonly<LabelProps<T>>) {
const Component = as ?? variantTagMap[variant];
const classes = `${variantClassMap[variant]} ${className}`.trim();
return <Component className={classes}>{children}</Component>;
}

65
src/components/MDXEditorField.tsx Normal file
View File

@@ -0,0 +1,65 @@
import { MDXEditor, type MDXEditorMethods, type MDXEditorProps } from '@mdxeditor/editor';
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;
};
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
}: 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
};
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>
);
}

33
src/components/SidebarNavItem.tsx Normal file
View File

@@ -0,0 +1,33 @@
import type { ComponentType, SVGProps } from 'react';
import { NavLink } from 'react-router-dom';
type IconType = ComponentType<SVGProps<SVGSVGElement>>;
type SidebarNavItemProps = {
to: string;
label: string;
icon: IconType;
collapsed: boolean;
onClick?: () => void;
};
export function SidebarNavItem({ to, label, icon: Icon, collapsed, onClick }: Readonly<SidebarNavItemProps>) {
const layoutClass = collapsed
? 'px-2 justify-start lg:mx-auto lg:w-8 lg:justify-center lg: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>
);
}

180
src/components/Table.tsx Normal file
View File

@@ -0,0 +1,180 @@
import type { ReactNode } from 'react';
import { ArrowPathIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from '@heroicons/react/24/solid';
import { ArrowsUpDownIcon } from '@heroicons/react/24/outline';
import { Button } from './Button';
import { Dropdown } from './Dropdown';
import { Label } from './Label';
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;
};
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;
};
};
export function Table<T>({
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;
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>
) : 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>
);
}

1
src/components/types.ts Normal file
View File

@@ -0,0 +1 @@
export type ComponentSize = 'sm' | 'md' | 'lg' | 'full';

12
src/index.ts Normal file
View File

@@ -0,0 +1,12 @@
export { Button } from './components/Button';
export { Chip } from './components/Chip';
export { Dropdown } from './components/Dropdown';
export { Form } from './components/Form';
export { InputField } from './components/InputField';
export { Label } from './components/Label';
export { SidebarNavItem } from './components/SidebarNavItem';
export { Table } from './components/Table';
export type { TableHeader } from './components/Table';
export type { ComponentSize } from './components/types';
export type { SortDirection, SortState } from './types/sort';

94
src/styles/base.css Normal file
View File

@@ -0,0 +1,94 @@
@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);
}
: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);
}

313
src/styles/components.css Normal file
View File

@@ -0,0 +1,313 @@
.surface {
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;
}
.field::placeholder {
color: var(--text-soft);
}
.field:disabled {
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);
}
.btn-solid,
.btn-outlined,
.btn-noborder {
@apply inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-semibold transition;
}
.btn-solid {
border: 1px solid transparent;
}
.btn-outlined {
border: 1px solid var(--ghost-border);
}
.btn-noborder {
border: 1px solid transparent;
}
.btn-solid.btn-primary {
@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);
}
.btn-solid.btn-secondary {
border-color: var(--ghost-border);
background-color: var(--ghost-border);
color: var(--text-primary);
}
.btn-solid.btn-secondary: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);
}
.btn-solid.btn-important {
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;
}
.btn-outlined.btn-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);
}
.btn-outlined.btn-secondary:disabled {
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;
}
.btn-outlined.btn-primary:hover {
@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;
}
.btn-outlined.btn-important {
@apply border-red-500 text-red-400;
background-color: transparent;
}
.btn-outlined.btn-important:hover {
@apply bg-red-500/10 text-red-300;
}
.btn-outlined.btn-important:disabled {
@apply border-red-900 text-red-900;
background-color: transparent;
}
.btn-noborder.btn-secondary {
background-color: transparent;
color: var(--text-secondary);
}
.btn-noborder.btn-secondary:hover {
background-color: var(--ghost-hover);
}
.btn-noborder.btn-secondary:disabled {
background-color: transparent;
color: var(--ghost-disabled-text);
}
.btn-noborder.btn-primary {
@apply text-accent-300;
background-color: transparent;
}
.btn-noborder.btn-primary:hover {
@apply bg-accent-500/15 text-accent-300;
}
.btn-noborder.btn-primary:disabled {
@apply text-accent-300/60;
background-color: transparent;
}
.btn-noborder.btn-important {
@apply text-red-400;
background-color: transparent;
}
.btn-noborder.btn-important:hover {
@apply bg-red-500/10 text-red-300;
}
.btn-noborder.btn-important:disabled {
@apply text-red-900;
background-color: transparent;
}
.ui-kicker {
color: var(--text-muted);
}
.ui-title {
color: var(--text-primary);
}
.ui-body-secondary {
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;
}
.ui-body-primary {
color: var(--text-secondary);
}
.ui-loading {
color: var(--text-muted);
}
.ui-empty {
color: var(--text-soft);
}
.ui-link {
color: var(--text-secondary);
@apply font-semibold transition;
}
.ui-link:hover {
color: var(--text-primary);
}
.ui-label {
color: var(--text-secondary);
}
.ui-label-disabled {
color: var(--text-soft);
}
.ui-error {
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;
}
.chip-solid {
color: #ffffff;
}
.chip-outlined {
background-color: transparent;
}
.chip-neutral.chip-solid {
border-color: var(--ghost-border);
background-color: var(--ghost-border);
color: var(--text-primary);
}
.chip-neutral.chip-outlined {
border-color: var(--ghost-border);
color: var(--text-secondary);
}
.chip-indigo.chip-solid {
@apply border-indigo-700 bg-indigo-700 text-white;
}
.chip-indigo.chip-outlined {
@apply border-indigo-700 text-indigo-300;
}
.chip-cyan.chip-solid {
@apply border-cyan-700 bg-cyan-700 text-white;
}
.chip-cyan.chip-outlined {
@apply border-cyan-700 text-cyan-300;
}
.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;
}
.table-shell {
border: 1px solid var(--surface-divider);
background-color: var(--surface-bg-strong);
@apply overflow-hidden rounded-xl;
}
.table-scroll {
@apply overflow-x-auto;
}
.table-root {
@apply min-w-full;
}
.table-head {
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;
}
.table-sort-button {
@apply inline-flex items-center gap-1.5 text-left;
}
.table-sort-icon {
color: var(--text-muted);
@apply inline-flex items-center;
}
.table-body-row {
border-top: 1px solid var(--table-row-divider);
}
.table-cell-primary {
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;
}

1
src/styles/utilities.css Normal file
View File

@@ -0,0 +1 @@
@tailwind utilities;

6
src/types/sort.ts Normal file
View File

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

21
tailwind-preset.cjs Normal file
View File

@@ -0,0 +1,21 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
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)'
}
}
}
};

16
tailwind.build.config.cjs Normal file
View File

@@ -0,0 +1,16 @@
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: []
};

12
tsconfig.build.json Normal file
View File

@@ -0,0 +1,12 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"noEmit": false,
"declaration": true,
"emitDeclarationOnly": true,
"rootDir": "src",
"outDir": "dist",
"declarationMap": true
},
"include": ["src"]
}

17
tsconfig.json Normal file
View File

@@ -0,0 +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"]
}

27
vite.config.ts Normal file
View File

@@ -0,0 +1,27 @@
import { defineConfig } from 'vite';
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`
},
rollupOptions: {
external: [
'react',
'react-dom',
'react-router-dom',
'@heroicons/react',
'@mdxeditor/editor'
]
}
}
});

3557
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff