Files
Stirling-PDF/frontend/shared/components/Checkbox.tsx
T
Reece BrowneandGitHub 8dde4262ec feat(policies): backend-driven policy enforcement (frontend) (#6598)
## Summary
Adds the **Policies** feature (proprietary, behind the
`POLICIES_ENABLED` flag): backend-driven enforcement that runs a fixed
tool pipeline on documents, docked in the right tool sidebar alongside
Tools.

## Highlights
- **Policy catalog** — 5 categories; **Security** is wired (redact PII +
sanitize), the others are marked "Coming soon".
- **Backend as source of truth** — policies persist via the Policies
engine (`/api/v1/policies`), one policy per category, with a local cache
+ offline fallback.
- **Auto-run** — enabled policies run on every uploaded file: dispatch →
poll → import outputs into the workspace.
- **Security redact config** — PII preset dropdown + custom word/regex
entry + advanced options; tool params map to the backend endpoint
fields.
- **Activity feed** with retry on failures; **file badges** showing
which policies ran on a file (sidebar + files page), tinted to the
policy colour.
- Reuses the **Watched Folders** engine for each policy's backing
folder; policy-owned folders are filtered out of the Watched Folders UI.

## Notes
- Gated by `POLICIES_ENABLED` (true in proprietary, false in core) —
unreachable in the open-source build.
- Frontend-only diff; depends on the backend Policies engine and the
merged Watched Folders feature.
2026-06-10 15:57:08 +01:00

79 lines
2.3 KiB
TypeScript

import { forwardRef, type InputHTMLAttributes, type ReactNode } from "react";
import "@shared/components/Checkbox.css";
export interface CheckboxProps extends Omit<
InputHTMLAttributes<HTMLInputElement>,
"type" | "size"
> {
label?: ReactNode;
description?: ReactNode;
/** Optional glyph shown between the box and the label text. */
leadingIcon?: ReactNode;
/** Tri-state checkbox visual (still focusable + submittable, but renders the dash). */
indeterminate?: boolean;
}
export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
function Checkbox(
{ label, description, leadingIcon, indeterminate, className, id, ...rest },
ref,
) {
return (
<label
className={[
"sui-check",
rest.disabled ? "sui-check--disabled" : "",
indeterminate ? "sui-check--mixed" : "",
className ?? "",
]
.filter(Boolean)
.join(" ")}
htmlFor={id}
>
<input
ref={(el) => {
if (typeof ref === "function") ref(el);
else if (ref)
(ref as React.MutableRefObject<HTMLInputElement | null>).current =
el;
if (el) el.indeterminate = !!indeterminate;
}}
type="checkbox"
id={id}
className="sui-check__input"
{...rest}
/>
<span className="sui-check__box" aria-hidden>
<svg
viewBox="0 0 16 16"
width="10"
height="10"
fill="none"
stroke="currentColor"
strokeWidth={2.5}
strokeLinecap="round"
strokeLinejoin="round"
className="sui-check__tick"
>
<polyline points="3 8.5 7 12 13 4" />
</svg>
<span className="sui-check__dash" />
</span>
{leadingIcon && (
<span className="sui-check__icon" aria-hidden>
{leadingIcon}
</span>
)}
{(label || description) && (
<span className="sui-check__text">
{label && <span className="sui-check__label">{label}</span>}
{description && (
<span className="sui-check__desc">{description}</span>
)}
</span>
)}
</label>
);
},
);