@ghxstship/xos-ui 0.0.0-stage → 4.16.0

package/src/Gateway/OpportunityCard.tsx

@@ -0,0 +1,73 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useFormat, useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Button, IconButton } from "../Button/Button.tsx";
+import { BrandMark } from "../BrandMark/BrandMark.tsx";
+import { panelClass } from "./Gateway.shared.tsx";
+import { type OpportunityCardProps } from "./Gateway.types.ts";
+
+/** Role, pay, date and place, then a requirements check that shows exactly what is missing. No posted pay reads Rate on Request. */
+export function OpportunityCard({
+  org,
+  verified,
+  role,
+  pay,
+  date,
+  place,
+  requirements,
+  missingAction,
+  deadline,
+  saved,
+  onApply,
+  onSave,
+}: OpportunityCardProps): ReactElement {
+  const t = useT();
+  const fmt = useFormat();
+  const missing = requirements.missing.length > 0;
+  return (
+    <article className={cx(panelClass, "gap-8 w-(--ui-gateway-aside) p-16 text-text-14")}>
+      <header className="flex items-center justify-between gap-8">
+        <span className="flex items-center gap-6 min-w-0">
+          <BrandMark name={org} size="sm" iconOnly />
+          <span className="truncate">{org}</span>
+          {verified ? (
+            <span className="text-state-scheduled">
+              <Icon name="BadgeCheck" size={14} label={t("org.verified")} />
+            </span>
+          ) : null}
+        </span>
+        <IconButton
+          icon="Bookmark"
+          label={saved ? t("action.saved") : t("action.save")}
+          aria-pressed={saved ?? false}
+          onClick={onSave}
+        />
+      </header>
+      <h3 className="m-0 text-heading-16 font-semibold">{role}</h3>
+      <div className="flex flex-wrap gap-x-12 gap-y-4 text-text-secondary">
+        <strong className="text-text-primary tabular-nums">
+          {pay ?? t("money.rateOnRequest")}
+        </strong>
+        <span>{date}</span>
+        <span>{place}</span>
+      </div>
+      <div className="flex items-center gap-6 px-8 py-6 rounded-control bg-bg-surface text-text-13">
+        <span className={missing ? "text-warning" : "text-success"}>
+          <Icon name={missing ? "CircleAlert" : "CircleCheck"} size={14} />
+        </span>
+        <span>
+          {missing
+            ? t("opp.missing", { list: fmt.list(requirements.missing) })
+            : t("opp.qualified")}
+        </span>
+      </div>
+      <footer className="flex items-center justify-between gap-8">
+        <span className="text-text-secondary">{deadline}</span>
+        <Button variant="primary" onClick={onApply}>
+          {missingAction && missing ? missingAction : t("opp.apply")}
+        </Button>
+      </footer>
+    </article>
+  );
+}

package/src/Gateway/OpportunityFilters.tsx

@@ -0,0 +1,64 @@
+import { useState, type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { SegmentedControl } from "../Navigation/Navigation.tsx";
+import { type OpportunityFiltersProps } from "./Gateway.types.ts";
+
+/** Search, filter chips and the cards or map view. */
+export function OpportunityFilters({
+  placeholder: hint,
+  chips,
+  active = [],
+  onSearch,
+  onChipsChange,
+  onViewChange,
+}: OpportunityFiltersProps): ReactElement {
+  const t = useT();
+  const [on, setOn] = useState(active);
+  return (
+    <div role="group" aria-label={t("filter.label")} className="flex flex-wrap items-center gap-8">
+      <label className="flex items-center gap-8 w-(--ui-skeleton-inline) min-w-0 grow h-row-default ps-12 pe-8 rounded-control border border-border-control bg-bg-surface focus-within:outline-solid focus-within:outline-stroke-focus focus-within:outline-focus-ring">
+        <Icon name="Search" color="var(--color-text-secondary)" />
+        <input
+          aria-label={t("opp.search")}
+          placeholder={hint}
+          onChange={(e) => onSearch?.(e.target.value)}
+          className="flex-1 min-w-0 bg-transparent border-0 outline-none text-text-primary placeholder:text-text-tertiary pointer-coarse:min-h-target-coarse"
+        />
+      </label>
+      {chips.map((chip) => {
+        const pressed = on.includes(chip);
+        return (
+          <button
+            key={chip}
+            type="button"
+            aria-pressed={pressed}
+            onClick={() => {
+              const next = pressed ? on.filter((c) => c !== chip) : [...on, chip];
+              setOn(next);
+              onChipsChange?.(next);
+            }}
+            className={cx(
+              "inline-flex items-center gap-4 h-control-md px-12 rounded-pill border border-border-control bg-transparent cursor-pointer",
+              "font-medium text-text-13 text-text-secondary pointer-coarse:min-h-target-coarse",
+              "aria-pressed:bg-text-primary aria-pressed:text-bg-canvas aria-pressed:border-text-primary",
+            )}
+          >
+            {pressed ? <Icon name="Check" size={12} /> : null}
+            {chip}
+          </button>
+        );
+      })}
+      <SegmentedControl
+        label={t("view.label")}
+        value="cards"
+        onChange={(v) => onViewChange?.(v === "map" ? "map" : "cards")}
+        options={[
+          { value: "cards", label: t("view.cards"), icon: "LayoutGrid" },
+          { value: "map", label: t("view.map"), icon: "Map" },
+        ]}
+      />
+    </div>
+  );
+}

package/src/Gateway/PaymentTracker.tsx

@@ -0,0 +1,71 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Money } from "../Forms/Forms.tsx";
+import { type PaymentTrackerProps } from "./Gateway.types.ts";
+
+/** A payment followed like a package: Submitted, Approved, Scheduled, Paid. */
+export function PaymentTracker({
+  invoiceKey,
+  title,
+  amount,
+  current,
+  dates,
+  expected,
+}: PaymentTrackerProps): ReactElement {
+  const t = useT();
+  const steps = [t("pay.submitted"), t("pay.approved"), t("pay.scheduled"), t("pay.paid")];
+  return (
+    <section
+      aria-label={t("pay.label", { key: invoiceKey })}
+      className="flex flex-col gap-16 w-(--ui-alert) max-w-full p-16 box-border rounded-card border border-border-subtle bg-bg-raised"
+    >
+      <div className="flex items-start justify-between gap-8">
+        <div className="flex flex-col">
+          <span className="font-mono text-text-12 text-text-secondary">{invoiceKey}</span>
+          <strong className="font-semibold">{title}</strong>
+        </div>
+        <strong className="text-heading-20 font-semibold tabular-nums">
+          <Money amount={amount} />
+        </strong>
+      </div>
+      <ol className="grid grid-cols-4 gap-8 m-0 p-0 list-none">
+        {steps.map((s, i) => {
+          const state = i < current ? "done" : i === current ? "current" : "todo";
+          const note =
+            dates[i] ??
+            (state === "todo" && expected && i === current + 1
+              ? t("pay.expected", { date: expected })
+              : "");
+          return (
+            <li
+              key={s}
+              aria-current={state === "current" ? "step" : undefined}
+              className={cx(
+                "flex flex-col gap-6 pt-4 text-text-12 border-t-stroke-accent",
+                state === "done" && "border-t-success",
+                state === "current" && "border-t-accent font-medium",
+                state === "todo" && "border-t-border-subtle text-text-secondary",
+              )}
+            >
+              <span
+                className={cx(
+                  "inline-grid place-items-center size-icon-20 rounded-full text-text-11 font-semibold tabular-nums",
+                  state === "todo" &&
+                    "ring-(length:--stroke-width-hairline) ring-inset ring-border-strong",
+                  state === "current" && "bg-accent text-accent-text-on",
+                  state === "done" && "bg-bg-hover text-success",
+                )}
+              >
+                {state === "done" ? <Icon name="Check" size={12} /> : i + 1}
+              </span>
+              <span>{s}</span>
+              <span className="text-text-secondary tabular-nums">{note}</span>
+            </li>
+          );
+        })}
+      </ol>
+    </section>
+  );
+}

package/src/Gateway/PayoutDetailsForm.tsx

@@ -0,0 +1,62 @@
+import { useState, type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Button } from "../Button/Button.tsx";
+import { chipClass } from "../Chips/Chips.tsx";
+import { Card } from "../Surface/Surface.tsx";
+import { Input, Select } from "../Forms/Forms.tsx";
+import { type PayoutDetailsFormProps } from "./Gateway.types.ts";
+
+/** Bank details in a secure form; after saving only the last four digits are shown. */
+export function PayoutDetailsForm({ rail, onFile, onSave }: PayoutDetailsFormProps): ReactElement {
+  const t = useT();
+  const [routing, setRouting] = useState("");
+  const [account, setAccount] = useState("");
+  const [type, setType] = useState("checking");
+  return (
+    <Card
+      title={t("payout.title")}
+      meta={rail}
+      footer={
+        <Button variant="primary" icon="Lock" onClick={() => onSave?.({ routing, account, type })}>
+          {t("payout.save")}
+        </Button>
+      }
+    >
+      {onFile ? (
+        <div className={cx(chipClass, "h-control-lg self-start")}>
+          <Icon name="Landmark" size={14} />
+          <span>{onFile.bank}</span>
+          <span className="font-mono">{t("payout.masked", { last4: onFile.last4 })}</span>
+        </div>
+      ) : null}
+      <Input
+        label={t("payout.routing")}
+        inputMode="numeric"
+        autoComplete="off"
+        placeholder={t("payout.routingHint")}
+        value={routing}
+        onChange={(e) => setRouting(e.target.value)}
+      />
+      <Input
+        label={t("payout.account")}
+        inputMode="numeric"
+        autoComplete="off"
+        type="password"
+        help={t("payout.accountHelp")}
+        value={account}
+        onChange={(e) => setAccount(e.target.value)}
+      />
+      <Select
+        label={t("payout.type")}
+        value="checking"
+        options={[
+          { value: "checking", label: t("payout.checking") },
+          { value: "savings", label: t("payout.savings") },
+        ]}
+        onChange={(e) => setType(e.target.value)}
+      />
+    </Card>
+  );
+}

package/src/Gateway/ProfileEditor.tsx

@@ -0,0 +1,45 @@
+import { type ReactElement } from "react";
+import { useT } from "../lib/context.tsx";
+import { Card } from "../Surface/Surface.tsx";
+import { SegmentedControl } from "../Navigation/Navigation.tsx";
+import { type ProfileEditorProps } from "./Gateway.types.ts";
+import { ProgressBar } from "./ProgressBar.tsx";
+
+/** Each field's visibility (Private, On Apply, Public) with a strength meter naming the next step. */
+export function ProfileEditor({
+  strength,
+  nextStep,
+  fields,
+  onVisibilityChange,
+}: ProfileEditorProps): ReactElement {
+  const t = useT();
+  const options = [
+    { value: "private", label: t("visibility.private") },
+    { value: "application", label: t("visibility.application") },
+    { value: "public", label: t("visibility.public") },
+  ];
+  return (
+    <Card title={t("profile.title")} meta={t("profile.complete", { n: strength })}>
+      <ProgressBar label={nextStep} value={strength} />
+      {fields.map((f) => (
+        <div
+          key={f.label}
+          className="flex flex-wrap items-center gap-12 py-8 border-b border-border-subtle last:border-b-0"
+        >
+          <div className="flex flex-1 flex-col min-w-0">
+            <span className="text-text-12 font-medium text-text-secondary">{f.label}</span>
+            <span>{f.value}</span>
+          </div>
+          <SegmentedControl
+            label={f.label}
+            value={f.visibility}
+            options={options}
+            onChange={(v) =>
+              onVisibilityChange?.(f.label, v as "private" | "application" | "public")
+            }
+          />
+        </div>
+      ))}
+    </Card>
+  );
+}

package/src/Gateway/ProgressBar.tsx

@@ -0,0 +1,30 @@
+import { type ReactElement } from "react";
+import { useT } from "../lib/context.tsx";
+import { type ProgressBarProps } from "./Gateway.types.ts";
+
+/** Determinate progress with its percentage. */
+export function ProgressBar({ label, value }: ProgressBarProps): ReactElement {
+  const t = useT();
+  const pct = Math.max(0, Math.min(100, Math.round(value)));
+  return (
+    <div className="flex flex-col gap-6 w-(--ui-field) max-w-full">
+      <div className="flex justify-between text-text-12 text-text-secondary">
+        <span>{label}</span>
+        <span className="tabular-nums">{t("progress.percent", { n: pct })}</span>
+      </div>
+      <div
+        role="progressbar"
+        aria-label={label}
+        aria-valuenow={pct}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        className="h-(--space-4) rounded-pill bg-bg-hover overflow-hidden"
+      >
+        <div
+          className="h-full rounded-pill bg-accent forced-colors:bg-[Highlight]"
+          style={{ inlineSize: `${pct}%` }}
+        />
+      </div>
+    </div>
+  );
+}

package/src/Gateway/RatingDialog.tsx

@@ -0,0 +1,83 @@
+import { useState, type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Button } from "../Button/Button.tsx";
+import { Textarea } from "../Forms/Forms.tsx";
+import { Dialog } from "../Overlays/Overlays.tsx";
+import { type RatingDialogProps } from "./Gateway.types.ts";
+
+/** A two-sided rating after close-out; stars are a radio group, both ratings release together. */
+export function RatingDialog({
+  counterpart,
+  value = 0,
+  onSubmit,
+  onLater,
+  open,
+  onOpenChange,
+}: RatingDialogProps): ReactElement {
+  const t = useT();
+  const [rating, setRating] = useState(value);
+  const [comment, setComment] = useState("");
+  return (
+    <Dialog
+      title={t("rating.title", { name: counterpart })}
+      {...(open === undefined ? {} : { open })}
+      {...(onOpenChange ? { onOpenChange } : {})}
+      actions={
+        <>
+          <Button variant="ghost" onClick={onLater}>
+            {t("action.later")}
+          </Button>
+          <Button variant="primary" disabled={!rating} onClick={() => onSubmit?.(rating, comment)}>
+            {t("rating.submit")}
+          </Button>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-12">
+        <div role="radiogroup" aria-label={t("rating.label")} className="flex gap-4">
+          {[1, 2, 3, 4, 5].map((n) => (
+            <button
+              key={n}
+              type="button"
+              role="radio"
+              aria-checked={rating === n}
+              tabIndex={rating === n || (rating === 0 && n === 1) ? 0 : -1}
+              aria-label={t(n === 1 ? "rating.star" : "rating.stars", { n })}
+              onClick={() => setRating(n)}
+              onKeyDown={(e) => {
+                const next =
+                  e.key === "ArrowRight" || e.key === "ArrowUp"
+                    ? Math.min(5, n + 1)
+                    : e.key === "ArrowLeft" || e.key === "ArrowDown"
+                      ? Math.max(1, n - 1)
+                      : null;
+                if (next === null) return;
+                e.preventDefault();
+                setRating(next);
+                (
+                  e.currentTarget.parentElement?.children[next - 1] as HTMLElement | undefined
+                )?.focus();
+              }}
+              className={cx(
+                "grid place-items-center size-(--density-target-coarse) rounded-control border-0 bg-transparent cursor-pointer text-text-tertiary",
+                n <= rating && "text-warning [&_svg]:fill-current",
+              )}
+            >
+              <Icon name="Star" size={24} />
+            </button>
+          ))}
+        </div>
+        <Textarea
+          label={t("rating.comment")}
+          width="100%"
+          rows={2}
+          value={comment}
+          onChange={(e) => setComment(e.target.value)}
+        />
+        <span className="text-text-12 text-text-secondary">{t("rating.release")}</span>
+      </div>
+    </Dialog>
+  );
+}

package/src/Gateway/UpNextCard.tsx

@@ -0,0 +1,76 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Button } from "../Button/Button.tsx";
+import { BrandMark } from "../BrandMark/BrandMark.tsx";
+import { PropertyList } from "../Overlays/Overlays.tsx";
+import { panelClass } from "./Gateway.shared.tsx";
+import { type UpNextCardProps } from "./Gateway.types.ts";
+
+/** Leads Gateway Home with the next shift: countdown, call time, address and what to bring. */
+export function UpNextCard({
+  org,
+  countdown,
+  title,
+  when,
+  callTime,
+  address,
+  parking,
+  contact,
+  bring,
+  onDirections,
+  onCalendar,
+  onWallet,
+}: UpNextCardProps): ReactElement {
+  const t = useT();
+  const properties = [
+    { label: t("upnext.when"), value: <span className="tabular-nums">{when}</span> },
+    { label: t("upnext.call"), value: <span className="tabular-nums">{callTime}</span> },
+    { label: t("upnext.where"), value: address },
+    ...(parking ? [{ label: t("upnext.parking"), value: parking }] : []),
+    ...(contact ? [{ label: t("upnext.contact"), value: contact }] : []),
+  ];
+  return (
+    <article
+      aria-label={t("upnext.label")}
+      className={cx(panelClass, "gap-12 w-(--ui-gateway-aside) p-16 text-text-14")}
+    >
+      <header className="flex items-center justify-between gap-8">
+        <span className="flex items-center gap-6">
+          <BrandMark name={org} size="sm" iconOnly />
+          <span className="text-text-12 font-medium text-text-secondary">{t("upnext.label")}</span>
+        </span>
+        <span className="font-semibold text-accent-text tabular-nums">{countdown}</span>
+      </header>
+      <h3 className="m-0 text-heading-20 font-semibold">{title}</h3>
+      <PropertyList items={properties} />
+      {bring && bring.length ? (
+        <div className="flex flex-col gap-4">
+          <span className="text-text-12 font-medium text-text-secondary">{t("upnext.bring")}</span>
+          <ul className="flex flex-col gap-4 m-0 p-0 list-none">
+            {bring.map((b) => (
+              <li key={b} className="flex items-center gap-6">
+                <span className="text-success">
+                  <Icon name="Check" size={14} />
+                </span>
+                {b}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+      <footer className="flex flex-wrap items-center gap-8">
+        <Button variant="primary" icon="Navigation" onClick={onDirections}>
+          {t("upnext.directions")}
+        </Button>
+        <Button icon="CalendarPlus" onClick={onCalendar}>
+          {t("upnext.calendar")}
+        </Button>
+        <Button icon="Wallet" onClick={onWallet}>
+          {t("badge.wallet")}
+        </Button>
+      </footer>
+    </article>
+  );
+}

package/src/Glyphs/Glyphs.tsx

@@ -0,0 +1,66 @@
+import type { ReactElement } from "react";
+import {
+  departmentCodes,
+  departmentIcon,
+  phaseCodes,
+  phaseIcon,
+  recordKindIcon,
+  recordKinds,
+} from "@xos/icons/glyphs";
+import type {
+  DepartmentCode,
+  DepartmentGlyphProps as ReferenceDepartmentGlyphProps,
+  PhaseCode,
+  PhaseGlyphProps as ReferencePhaseGlyphProps,
+  RecordKind,
+  RecordKindGlyphProps as ReferenceRecordKindGlyphProps,
+} from "../types/reference";
+import { Icon } from "../Icon/Icon.tsx";
+
+export type DepartmentGlyphProps = ReferenceDepartmentGlyphProps;
+export type PhaseGlyphProps = ReferencePhaseGlyphProps;
+export type RecordKindGlyphProps = ReferenceRecordKindGlyphProps;
+
+/** The XOS glyph map (canon code to Lucide name), from @xos/icons so the assignment lives in one place. */
+export const glyphs: {
+  departments: Record<DepartmentCode, string>;
+  phases: Record<PhaseCode, string>;
+  recordKinds: Record<RecordKind, string>;
+} = {
+  departments: Object.fromEntries(departmentCodes.map((c) => [c, departmentIcon(c)])) as Record<
+    DepartmentCode,
+    string
+  >,
+  phases: Object.fromEntries(phaseCodes.map((c) => [c, phaseIcon(c)])) as Record<PhaseCode, string>,
+  recordKinds: Object.fromEntries(recordKinds.map((k) => [k, recordKindIcon(k)])) as Record<
+    RecordKind,
+    string
+  >,
+};
+
+function glyphProps(
+  size: number | undefined,
+  label: string | undefined,
+  color: string | undefined,
+) {
+  return {
+    ...(size === undefined ? {} : { size }),
+    ...(label === undefined ? {} : { label }),
+    ...(color === undefined ? {} : { color }),
+  };
+}
+
+/** Department glyph (`4000` Environment is Tent). Sits beside the plain name; never alone. */
+export function DepartmentGlyph({ code, size, label, color }: DepartmentGlyphProps): ReactElement {
+  return <Icon name={glyphs.departments[code] ?? "Circle"} {...glyphProps(size, label, color)} />;
+}
+
+/** Phase glyph (`BLD` Build is Hammer). */
+export function PhaseGlyph({ code, size, label, color }: PhaseGlyphProps): ReactElement {
+  return <Icon name={glyphs.phases[code] ?? "Circle"} {...glyphProps(size, label, color)} />;
+}
+
+/** Record kind glyph (`Task` is SquareCheck). */
+export function RecordKindGlyph({ kind, size, label, color }: RecordKindGlyphProps): ReactElement {
+  return <Icon name={glyphs.recordKinds[kind] ?? "Circle"} {...glyphProps(size, label, color)} />;
+}

package/src/Grids/BidSheet.tsx

@@ -0,0 +1,63 @@
+import { type ReactElement } from "react";
+import type { GridColumn } from "../types/reference";
+import { useT } from "../lib/context.tsx";
+import { InlineAlert } from "../Feedback/Feedback.tsx";
+import { type BidSheetProps } from "./Grids.types.ts";
+import { SpreadsheetGrid } from "./SpreadsheetGrid.tsx";
+
+/** A sealed line-item bid: unit prices are the only editable cells; extended amounts and the total are derived and stay Unpriced while any line is blank. */
+export function BidSheet({ deadline, lines, onChange }: BidSheetProps): ReactElement {
+  const t = useT();
+  const columns: GridColumn[] = [
+    { key: "line", label: t("bid.line"), type: "code", width: 64 },
+    { key: "item", label: t("bid.item") },
+    { key: "unit", label: t("bid.unit"), width: 72 },
+    { key: "qty", label: t("bid.qty"), type: "number", width: 64 },
+    { key: "price", label: t("bid.unitPrice"), type: "money", editable: true },
+    {
+      key: "ext",
+      label: t("bid.extended"),
+      type: "money",
+      total: true,
+      derive: (row) =>
+        typeof row["qty"] === "number" && typeof row["price"] === "number"
+          ? row["qty"] * row["price"]
+          : null,
+    },
+  ];
+  return (
+    <div className="flex flex-col gap-12">
+      <InlineAlert tone="info" title={t("bid.sealed")}>
+        {t("bid.sealedBody", { deadline })}
+      </InlineAlert>
+      <SpreadsheetGrid
+        label={t("bid.lines")}
+        columns={columns}
+        rows={lines.map((l) => ({
+          line: l.line,
+          item: l.item,
+          unit: l.unit,
+          qty: l.qty,
+          price: l.price,
+          ext: l.ext,
+        }))}
+        totalsLabel={t("bid.total")}
+        onChange={(rows) =>
+          onChange?.(
+            rows.map((r) => ({
+              line: String(r["line"] ?? ""),
+              item: String(r["item"] ?? ""),
+              unit: String(r["unit"] ?? ""),
+              qty: Number(r["qty"] ?? 0),
+              price: typeof r["price"] === "number" ? r["price"] : null,
+              ext:
+                typeof r["qty"] === "number" && typeof r["price"] === "number"
+                  ? r["qty"] * r["price"]
+                  : null,
+            })),
+          )
+        }
+      />
+    </div>
+  );
+}