dslinter 0.0.6

package/src/shell/PlaygroundA11yAndCode.tsx

@@ -0,0 +1,387 @@
+import { useCallback } from "react";
+import type { PlaygroundArgs, PlaygroundControl } from "../types/controls";
+import type { PlaygroundEntry } from "../types/playground";
+import type { A11yModuleSummary } from "../report/a11yForModule";
+import type { CodeScoreModuleSummary } from "../report/codeScoreForModule";
+import type { LintFinding, UsageSummary } from "../types/report";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { controlsToApiRows } from "./controlApiTable";
+import { PlaygroundControlField } from "./PlaygroundControlField";
+import { PlaygroundUsageCode } from "./PlaygroundUsageCode";
+import { EmptyCard } from "./EmptyCard";
+import { cn } from "../lib/utils";
+import { Section } from "./Section";
+
+type UsageProps = {
+  entry: PlaygroundEntry;
+  values: PlaygroundArgs;
+};
+
+export function PlaygroundUsageSection({ entry, values }: UsageProps) {
+  const usage =
+    entry.usageSnippet?.(values) ??
+    `// Pass usageSnippet on this PlaygroundEntry, or derive snippets from dslint controls.\n<${entry.id} />`;
+
+  return (
+    <Section
+      id="usage"
+      title="Usage"
+      description="Example usage for the current playground values."
+    >
+      <PlaygroundUsageCode source={usage} />
+    </Section>
+  );
+}
+
+type TokenStyleProps = {
+  findings: LintFinding[];
+  reportReady: boolean;
+};
+
+export function PlaygroundTokenStyleSection({
+  findings,
+  reportReady,
+}: TokenStyleProps) {
+  return (
+    <>
+      {reportReady && findings.length > 0 ? (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Rule</TableHead>
+              <TableHead>Line</TableHead>
+              <TableHead>Severity</TableHead>
+              <TableHead>Message</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {findings.map((f, i) => (
+              <TableRow key={`${f.rule_id}-${f.line ?? "x"}-${i}`}>
+                <TableCell className="font-mono text-xs text-muted-foreground">
+                  {f.rule_id}
+                </TableCell>
+                <TableCell className="font-mono text-xs text-muted-foreground">
+                  {f.line ?? "—"}
+                </TableCell>
+                <TableCell>
+                  <Badge variant="secondary" size="sm">
+                    {f.severity}
+                  </Badge>
+                </TableCell>
+                <TableCell>{f.message}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      ) : reportReady && findings.length === 0 ? (
+        <EmptyCard>
+          No hardcoded or arbitrary token color findings on this file in the
+          current report.
+        </EmptyCard>
+      ) : (
+        <EmptyCard>
+          Token findings update when{" "}
+          <span className="font-mono">dslint-report.json</span> is available
+          (same fetch as Governance).
+        </EmptyCard>
+      )}
+    </>
+  );
+}
+
+type CodeScoreProps = {
+  codeScore: CodeScoreModuleSummary;
+  reportReady: boolean;
+};
+
+export function PlaygroundCodeScoreSection({
+  codeScore,
+  reportReady,
+}: CodeScoreProps) {
+  const { findings } = codeScore;
+
+  const hasFindingRows = reportReady && findings.length > 0;
+
+  return (
+    <>
+      {hasFindingRows ? (
+        <>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Rule</TableHead>
+                <TableHead>Line</TableHead>
+                <TableHead>Severity</TableHead>
+                <TableHead>Message</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {findings.map((f, i) => (
+                <TableRow key={`${f.rule_id}-${f.line ?? "x"}-${i}`}>
+                  <TableCell>{f.rule_id}</TableCell>
+                  <TableCell>{f.line ?? "—"}</TableCell>
+                  <TableCell>{f.severity}</TableCell>
+                  <TableCell>{f.message}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </>
+      ) : reportReady && findings.length === 0 ? (
+        <EmptyCard>
+          No quality findings on this file in the current report.
+        </EmptyCard>
+      ) : (
+        <EmptyCard>
+          Code score updates when{" "}
+          <span className="font-mono">dslint-report.json</span> is available
+          (same fetch as Governance).
+        </EmptyCard>
+      )}
+    </>
+  );
+}
+
+type A11yProps = {
+  a11y: A11yModuleSummary;
+  reportReady: boolean;
+};
+
+export function PlaygroundA11ySection({ a11y, reportReady }: A11yProps) {
+  const hasFindingRows = reportReady && a11y.findings.length > 0;
+
+  return (
+    <>
+      {hasFindingRows ? (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Rule</TableHead>
+              <TableHead>Line</TableHead>
+              <TableHead>Severity</TableHead>
+              <TableHead>Message</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {a11y.findings.map((f, i) => (
+              <TableRow key={`${f.rule_id}-${f.line ?? "x"}-${i}`}>
+                <TableCell>{f.rule_id}</TableCell>
+                <TableCell>{f.line ?? "—"}</TableCell>
+                <TableCell>{f.severity}</TableCell>
+                <TableCell>{f.message}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      ) : reportReady && a11y.issueCount === 0 ? (
+        <EmptyCard>
+          No accessibility findings on this file in the current report.
+        </EmptyCard>
+      ) : (
+        <EmptyCard>
+          A11y score updates when{" "}
+          <span className="font-mono">dslint-report.json</span> is available
+          (same fetch as Governance).
+        </EmptyCard>
+      )}
+    </>
+  );
+}
+
+type ApiProps = {
+  controls: PlaygroundControl[];
+  values: PlaygroundArgs;
+  onChange: (next: PlaygroundArgs) => void;
+  onReset: () => void;
+  /** When set, adds columns for how often each prop appears at scanned JSX call sites. */
+  reportUsage?: UsageSummary;
+  /** Declared prop names from the scan (definitions + playground specs), used for “never passed” hints. */
+  declaredPropsFromScan?: string[];
+  /** True when `dslint-report.json` is loaded (even if this component has no usage row). */
+  governanceReportLoaded?: boolean;
+};
+
+function formatRepoLiteralChips(
+  byVal: Record<string, number> | undefined,
+  max = 6,
+): string {
+  if (!byVal || Object.keys(byVal).length === 0) return "—";
+  const entries = Object.entries(byVal).sort((x, y) => y[1] - x[1]);
+  const shown = entries.slice(0, max);
+  const tail = Math.max(0, entries.length - max);
+  return (
+    shown.map(([val, n]) => `${JSON.stringify(val)} ×${n}`).join(" · ") +
+    (tail > 0 ? ` · +${tail}` : "")
+  );
+}
+
+export function PlaygroundApiReference({
+  controls,
+  values,
+  onChange,
+  onReset,
+  reportUsage,
+  declaredPropsFromScan: _declaredPropsFromScan = [],
+  governanceReportLoaded: _governanceReportLoaded = false,
+}: ApiProps) {
+  if (controls.length === 0) return null;
+
+  const patch = useCallback(
+    (key: string, value: string | number | boolean) => {
+      onChange({ ...values, [key]: value });
+    },
+    [onChange, values],
+  );
+
+  const rows = controlsToApiRows(controls);
+  const showRepo = reportUsage != null;
+  const freqs = reportUsage?.prop_frequencies ?? {};
+  const valueFreqs = reportUsage?.prop_value_frequencies ?? {};
+  const controlKeys = new Set(rows.map((r) => r.prop));
+  const extraRepoProps = showRepo
+    ? Object.keys(freqs)
+        .filter((k) => !controlKeys.has(k))
+        .sort((a, b) => a.localeCompare(b))
+    : [];
+
+  return (
+    <Section
+      id="api-reference"
+      title="API reference"
+      description=""
+      actions={
+        <Button type="button" variant="outline" size="sm" onClick={onReset}>
+          Reset defaults
+        </Button>
+      }
+    >
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Prop</TableHead>
+            <TableHead>Type</TableHead>
+            <TableHead>Value</TableHead>
+            {showRepo ? (
+              <>
+                <TableHead>Usage</TableHead>
+                <TableHead>Values</TableHead>
+              </>
+            ) : null}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {controls.map((c) => {
+            const r = rows.find((row) => row.prop === c.key);
+            if (!r) return null;
+            const n = showRepo ? (freqs[r.prop] ?? 0) : 0;
+            const valueChips = formatRepoLiteralChips(valueFreqs[r.prop]);
+            return (
+              <TableRow key={r.prop}>
+                <TableCell className="font-medium">{r.prop}</TableCell>
+                <TableCell>
+                  {c.type === "select" ? (
+                    <div className="flex flex-wrap items-center gap-1">
+                      {c.options.map((o) => {
+                        const current = String(
+                          values[c.key] ?? c.default ?? "",
+                        );
+                        const selected = current === o.value;
+                        return (
+                          <Badge
+                            key={o.value}
+                            variant="outline"
+                            size="sm"
+                            asChild
+                            className={cn(
+                              selected &&
+                                "border-transparent bg-primary text-primary-foreground hover:bg-primary/90",
+                            )}
+                          >
+                            <button
+                              type="button"
+                              className="cursor-pointer"
+                              onClick={() => patch(c.key, o.value)}
+                              aria-pressed={selected}
+                              aria-label={`Set ${c.label} to ${o.label}`}
+                            >
+                              {o.value}
+                            </button>
+                          </Badge>
+                        );
+                      })}
+                    </div>
+                  ) : (
+                    <span className="font-mono text-xs flex items-center gap-1">
+                      {r.type}
+                      {r.default !== "—" ? (
+                        <Badge variant="secondary" size="sm">
+                          {r.default}
+                        </Badge>
+                      ) : null}
+                    </span>
+                  )}
+                </TableCell>
+                <TableCell>
+                  <PlaygroundControlField
+                    control={c}
+                    values={values}
+                    patch={patch}
+                    idPrefix="api"
+                    layout="table"
+                  />
+                </TableCell>
+                {showRepo ? (
+                  <>
+                    <TableCell>{n}</TableCell>
+                    <TableCell>{valueChips}</TableCell>
+                  </>
+                ) : null}
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+
+      {showRepo && extraRepoProps.length > 0 ? (
+        <div className="mt-4">
+          <h3 className="text-sm font-semibold text-foreground">
+            Also seen in repo (not in playground)
+          </h3>
+          <p className="mt-1 text-xs text-muted-foreground">
+            These prop names appear in scanned JSX but are not wired as
+            playground controls on this page.
+          </p>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Prop</TableHead>
+                <TableHead>Repo call sites</TableHead>
+                <TableHead>Repo literals</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {extraRepoProps.map((prop) => (
+                <TableRow key={prop}>
+                  <TableCell>{prop}</TableCell>
+                  <TableCell>×{freqs[prop] ?? 0}</TableCell>
+                  <TableCell>
+                    {formatRepoLiteralChips(valueFreqs[prop])}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      ) : null}
+    </Section>
+  );
+}

package/src/shell/PlaygroundControlField.tsx

@@ -0,0 +1,213 @@
+import type { PlaygroundArgs, PlaygroundControl } from "../types/controls";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+const labelClass = "text-xs font-medium text-muted-foreground";
+
+export type PlaygroundControlFieldProps = {
+  control: PlaygroundControl;
+  values: PlaygroundArgs;
+  patch: (key: string, value: string | number | boolean) => void;
+  /** Prefix for element ids (e.g. `ctrl` vs `api`). */
+  idPrefix: string;
+  layout: "grid" | "table";
+};
+
+export function PlaygroundControlField({
+  control: c,
+  values,
+  patch,
+  idPrefix,
+  layout,
+}: PlaygroundControlFieldProps) {
+  const id = `${idPrefix}-${c.key}`;
+
+  if (layout === "grid") {
+    switch (c.type) {
+      case "boolean": {
+        const checked = Boolean(values[c.key]);
+        return (
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id={id}
+                checked={checked}
+                onCheckedChange={(v: boolean | "indeterminate") =>
+                  patch(c.key, v === true)
+                }
+              />
+              <Label
+                htmlFor={id}
+                className={`${labelClass} cursor-pointer font-normal`}
+              >
+                {c.label}
+              </Label>
+            </div>
+            {c.hint ? (
+              <p className="text-xs text-muted-foreground">{c.hint}</p>
+            ) : null}
+          </div>
+        );
+      }
+      case "string":
+        return (
+          <div className="flex min-w-0 flex-col gap-1.5">
+            <Label htmlFor={id} className={labelClass}>
+              {c.label}
+            </Label>
+            <Input
+              id={id}
+              type="text"
+              value={String(values[c.key] ?? "")}
+              placeholder={c.placeholder}
+              onChange={(e) => patch(c.key, e.target.value)}
+              className="h-8 text-xs"
+            />
+          </div>
+        );
+      case "number": {
+        const raw = values[c.key];
+        const parsed =
+          typeof raw === "number" && Number.isFinite(raw) ? raw : Number(raw);
+        const safe = Number.isFinite(parsed) ? parsed : c.default;
+        return (
+          <div className="flex min-w-0 flex-col gap-1.5">
+            <Label htmlFor={id} className={labelClass}>
+              {c.label}
+            </Label>
+            <Input
+              id={id}
+              type="number"
+              value={safe}
+              min={c.min}
+              max={c.max}
+              step={c.step ?? 1}
+              onChange={(e) => {
+                const v = e.target.valueAsNumber;
+                patch(c.key, Number.isFinite(v) ? v : c.default);
+              }}
+              className="h-8 text-xs"
+            />
+          </div>
+        );
+      }
+      case "select": {
+        const v = String(values[c.key] ?? c.default ?? "");
+        return (
+          <div className="flex min-w-0 flex-col gap-1.5">
+            <Label htmlFor={id} className={labelClass}>
+              {c.label}
+            </Label>
+            <Select
+              value={v}
+              onValueChange={(next: string) => patch(c.key, next)}
+            >
+              <SelectTrigger id={id} className="h-8 text-xs">
+                <SelectValue placeholder={c.label} />
+              </SelectTrigger>
+              <SelectContent>
+                {c.options.map((o) => (
+                  <SelectItem key={o.value} value={o.value} className="text-xs">
+                    {o.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        );
+      }
+      default:
+        return null;
+    }
+  }
+
+  // table: prop name is in its own column; compact editors only
+  switch (c.type) {
+    case "boolean": {
+      const checked = Boolean(values[c.key]);
+      return (
+        <div className="flex min-w-[8rem] flex-col gap-1">
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id={id}
+              checked={checked}
+              aria-label={c.label}
+              onCheckedChange={(v: boolean | "indeterminate") =>
+                patch(c.key, v === true)
+              }
+            />
+            <span className="text-xs text-muted-foreground">{c.label}</span>
+          </div>
+          {c.hint ? (
+            <p className="text-xs text-muted-foreground">{c.hint}</p>
+          ) : null}
+        </div>
+      );
+    }
+    case "string":
+      return (
+        <Input
+          id={id}
+          type="text"
+          value={String(values[c.key] ?? "")}
+          placeholder={c.placeholder}
+          onChange={(e) => patch(c.key, e.target.value)}
+          className="h-8 min-w-[10rem] max-w-xs text-xs"
+          aria-label={c.label}
+        />
+      );
+    case "number": {
+      const raw = values[c.key];
+      const parsed =
+        typeof raw === "number" && Number.isFinite(raw) ? raw : Number(raw);
+      const safe = Number.isFinite(parsed) ? parsed : c.default;
+      return (
+        <Input
+          id={id}
+          type="number"
+          value={safe}
+          min={c.min}
+          max={c.max}
+          step={c.step ?? 1}
+          onChange={(e) => {
+            const v = e.target.valueAsNumber;
+            patch(c.key, Number.isFinite(v) ? v : c.default);
+          }}
+          className="h-8 w-24 text-xs"
+          aria-label={c.label}
+        />
+      );
+    }
+    case "select": {
+      const v = String(values[c.key] ?? c.default ?? "");
+      return (
+        <Select value={v} onValueChange={(next: string) => patch(c.key, next)}>
+          <SelectTrigger
+            id={id}
+            className="h-8 min-w-[10rem] max-w-xs text-xs"
+            aria-label={c.label}
+          >
+            <SelectValue placeholder={c.label} />
+          </SelectTrigger>
+          <SelectContent>
+            {c.options.map((o) => (
+              <SelectItem key={o.value} value={o.value} className="text-xs">
+                {o.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      );
+    }
+    default:
+      return null;
+  }
+}

package/src/shell/PlaygroundControls.tsx

@@ -0,0 +1,66 @@
+import { useCallback } from "react";
+import type { PlaygroundArgs, PlaygroundControl } from "../types/controls";
+import { Button } from "@/components/ui/button";
+import { PlaygroundControlField } from "./PlaygroundControlField";
+
+type Props = {
+  controls: PlaygroundControl[];
+  values: PlaygroundArgs;
+  onChange: (next: PlaygroundArgs) => void;
+  onReset: () => void;
+  /** Omit the outer card wrapper (doc-style pages provide their own section chrome). */
+  bare?: boolean;
+};
+
+export function PlaygroundControls({
+  controls,
+  values,
+  onChange,
+  onReset,
+  bare,
+}: Props) {
+  const patch = useCallback(
+    (key: string, value: string | number | boolean) => {
+      onChange({ ...values, [key]: value });
+    },
+    [onChange, values],
+  );
+
+  if (controls.length === 0) return null;
+
+  const inner = (
+    <>
+      <div className="flex p-3 pl-5 flex-wrap items-center justify-between gap-3 border-b border-border pb-3">
+        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+          Controls
+        </p>
+        <Button type="button" variant="outline" size="sm" onClick={onReset}>
+          Reset defaults
+        </Button>
+      </div>
+      <div className=" p-3 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {controls.map((c) => (
+          <div key={c.key}>
+            <PlaygroundControlField
+              control={c}
+              values={values}
+              patch={patch}
+              idPrefix="ctrl"
+              layout="grid"
+            />
+          </div>
+        ))}
+      </div>
+    </>
+  );
+
+  if (bare) {
+    return <div className="w-full">{inner}</div>;
+  }
+
+  return (
+    <div className="mb-6 w-full rounded-ds-lg border border-border bg-card p-4 text-card-foreground shadow-xs">
+      {inner}
+    </div>
+  );
+}