@kelpie/ui 0.1.0

package/src/lib/plan.ts

@@ -0,0 +1,147 @@
+import { OPEN_PLAN_ITEM_STATUSES } from '@kelpie/schemas'
+import type { PlanItem, PlanItemStatus } from '@kelpie/schemas'
+
+import type { ChipTone } from '../components/Chip.tsx'
+
+/**
+ * How a page reads a set of plan items: which one is next, how urgent it is, and
+ * what colour that makes it.
+ *
+ * Pure functions over `YYYY-MM-DD` strings, ported from the mockup's `seed.ts`.
+ * Dates compare as text because the format sorts lexicographically, which avoids
+ * parsing a calendar date into a `Date` and back out of whatever timezone the
+ * browser is in.
+ *
+ * `today` is a parameter everywhere rather than a call to `new Date()` inside,
+ * because a function that reads the clock cannot be tested against a fixed
+ * expectation.
+ */
+
+/** The four groups the Deals list can be arranged into. */
+export type DueBucketId = 'overdue' | 'this_week' | 'later' | 'no_plan'
+
+export const DUE_BUCKETS: readonly { readonly id: DueBucketId; readonly label: string }[] = [
+  { id: 'overdue', label: 'Overdue' },
+  { id: 'this_week', label: 'This week' },
+  { id: 'later', label: 'Later' },
+  { id: 'no_plan', label: 'No plan' },
+]
+
+/**
+ * A `Date` as the calendar day it is locally.
+ *
+ * Not `toISOString().slice(0, 10)`: that renders the UTC day, which is yesterday
+ * or tomorrow for most of the world for part of every day.
+ */
+export function toIsoDay(value: Date): string {
+  const year = value.getFullYear()
+  const month = String(value.getMonth() + 1).padStart(2, '0')
+  const day = String(value.getDate()).padStart(2, '0')
+
+  return `${year}-${month}-${day}`
+}
+
+/** The day the reader is having. */
+export function todayIso(now: Date = new Date()): string {
+  return toIsoDay(now)
+}
+
+/** @returns `iso` moved by `days`, still `YYYY-MM-DD`. Parsed at midday so no timezone shifts the day. */
+export function addDays(iso: string, days: number): string {
+  const moved = new Date(`${iso}T12:00:00`)
+
+  moved.setDate(moved.getDate() + days)
+
+  return toIsoDay(moved)
+}
+
+/**
+ * Which group a date falls into.
+ *
+ * @param planDate The date of the next open step, or undefined when there is none.
+ *   "No plan" is a bucket rather than an omission: a record nobody has decided a
+ *   next step for is the one most worth seeing.
+ */
+export function dueBucketFor(planDate: string | undefined, today: string = todayIso()): DueBucketId {
+  if (planDate === undefined) {
+    return 'no_plan'
+  }
+
+  if (planDate < today) {
+    return 'overdue'
+  }
+
+  return planDate <= addDays(today, 7) ? 'this_week' : 'later'
+}
+
+/** Whether a plan item still needs doing. */
+export function isOpen(item: PlanItem): boolean {
+  return (OPEN_PLAN_ITEM_STATUSES as readonly PlanItemStatus[]).includes(item.status)
+}
+
+/** Soonest first, ties broken on title so a list does not reshuffle between renders. */
+export function byDateThenTitle(left: PlanItem, right: PlanItem): number {
+  return left.date.localeCompare(right.date) || left.title.localeCompare(right.title)
+}
+
+/**
+ * The next step still to be done on one record.
+ *
+ * @returns undefined when every step is finished, which is a different state
+ *   from having none at all, and both land in the `no_plan` bucket. A record
+ *   whose plan is complete needs a new one either way.
+ */
+export function nextOpenPlanItem(
+  items: readonly PlanItem[],
+  targetId: string,
+): PlanItem | undefined {
+  return items
+    .filter((item) => item.targetId === targetId && isOpen(item))
+    .sort(byDateThenTitle)[0]
+}
+
+/** Open items grouped by record id, for a list page resolving one column. */
+export function nextOpenByTarget(items: readonly PlanItem[]): ReadonlyMap<string, PlanItem> {
+  const next = new Map<string, PlanItem>()
+
+  for (const item of [...items].sort(byDateThenTitle)) {
+    if (isOpen(item) && !next.has(item.targetId)) {
+      next.set(item.targetId, item)
+    }
+  }
+
+  return next
+}
+
+export interface PlanAttention {
+  readonly overdue: readonly PlanItem[]
+  readonly upcoming: readonly PlanItem[]
+}
+
+/** Open items that are late or due inside the week: what a record's Overview leads with. */
+export function planAttention(
+  items: readonly PlanItem[],
+  today: string = todayIso(),
+): PlanAttention {
+  const open = items.filter(isOpen).sort(byDateThenTitle)
+
+  return {
+    overdue: open.filter((item) => dueBucketFor(item.date, today) === 'overdue'),
+    upcoming: open.filter((item) => dueBucketFor(item.date, today) === 'this_week'),
+  }
+}
+
+const STATUS_TONES: Readonly<Record<PlanItemStatus, ChipTone>> = {
+  todo: 'warning',
+  in_progress: 'accent',
+  done: 'success',
+}
+
+export function planStatusTone(status: PlanItemStatus): ChipTone {
+  return STATUS_TONES[status]
+}
+
+/** The inclusive `?from=`/`?to=` pair covering one month. `month` is 0-based, as `Date` counts. */
+export function monthBounds(year: number, month: number): { from: string; to: string } {
+  return { from: toIsoDay(new Date(year, month, 1)), to: toIsoDay(new Date(year, month + 1, 0)) }
+}

package/src/lib/theme.ts

@@ -0,0 +1,53 @@
+import { THEME_PREFERENCES } from '@kelpie/schemas'
+import type { ThemePreference } from '@kelpie/schemas'
+
+/**
+ * Applying light, dark, or whatever the operating system says.
+ *
+ * The resolved value goes on `data-theme` and `styles.css` does the rest. What
+ * is stored here is a per-browser copy: the account's preference is the source
+ * of truth, and this exists so the first paint does not have to wait for it.
+ *
+ * The preference itself is a wire value, so `ThemePreference` comes from
+ * `@kelpie/schemas` rather than being declared again here.
+ */
+
+export type { ThemePreference }
+
+const STORAGE_KEY = 'kelpie.theme'
+
+export function getStoredTheme(): ThemePreference {
+  const stored = localStorage.getItem(STORAGE_KEY)
+
+  return THEME_PREFERENCES.find((preference) => preference === stored) ?? 'system'
+}
+
+export function setStoredTheme(theme: ThemePreference): void {
+  localStorage.setItem(STORAGE_KEY, theme)
+}
+
+export function resolveTheme(preference: ThemePreference): 'light' | 'dark' {
+  if (preference !== 'system') {
+    return preference
+  }
+
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+export function applyTheme(preference: ThemePreference): void {
+  document.documentElement.setAttribute('data-theme', resolveTheme(preference))
+}
+
+/** Calls back when the operating system flips, for as long as the returned function is uncalled. */
+export function watchSystemTheme(onChange: () => void): () => void {
+  const query = window.matchMedia('(prefers-color-scheme: dark)')
+  const handler = (): void => {
+    onChange()
+  }
+
+  query.addEventListener('change', handler)
+
+  return () => {
+    query.removeEventListener('change', handler)
+  }
+}

package/src/pages/CompaniesPage.tsx

@@ -0,0 +1,143 @@
+import type { Company, IcpFit } from '@kelpie/schemas'
+import { useState } from 'react'
+import { useNavigate } from 'react-router'
+
+import { useCompanies, useCreateCompany } from '../api/resources/companies.ts'
+import { Chip } from '../components/Chip.tsx'
+import type { ChipTone } from '../components/Chip.tsx'
+import { DataTable } from '../components/DataTable.tsx'
+import type { Column } from '../components/DataTable.tsx'
+import { FilterBar, PageHeader } from '../components/PageHeader.tsx'
+import { ErrorPanel, LoadingPanel } from '../components/QueryState.tsx'
+import { useCompanyHeadcounts } from './positionDirectory.ts'
+
+/**
+ * The Companies list.
+ *
+ * The mockup's Deals column is absent: Deals have tables and a module but no
+ * routes, so there is nothing to count. It returns with that endpoint rather
+ * than as a zero that means "not built".
+ */
+
+const ICP_TONES: Readonly<Record<IcpFit, ChipTone>> = {
+  high: 'success',
+  medium: 'warning',
+  low: 'danger',
+  unknown: 'neutral',
+}
+
+export function CompaniesPage(): React.JSX.Element {
+  const [term, setTerm] = useState('')
+  const [sort, setSort] = useState<string | undefined>(undefined)
+  const navigate = useNavigate()
+  const hasFilter = term.trim().length > 0
+  const companies = useCompanies({ term: hasFilter ? term.trim() : undefined, sort })
+  const headcounts = useCompanyHeadcounts(companies.records.map((company) => company.id))
+  const createCompany = useCreateCompany()
+
+  async function addCompany(): Promise<void> {
+    const company = await createCompany.runAsync({ name: 'New company' })
+
+    await navigate(`/companies/${company.id}`)
+  }
+
+  const columns: readonly Column<Company>[] = [
+    {
+      key: 'name',
+      header: 'Name',
+      sortKey: 'name',
+      render: (company) => <span className="font-medium">{company.name}</span>,
+    },
+    {
+      key: 'domain',
+      header: 'Domain',
+      render: (company) => (
+        <span className="font-mono text-[12px] text-ink-muted">{company.domain ?? '—'}</span>
+      ),
+    },
+    {
+      key: 'type',
+      header: 'Type',
+      render: (company) => <span className="capitalize">{company.accountType}</span>,
+    },
+    {
+      key: 'icp',
+      header: 'ICP fit',
+      render: (company) => <Chip tone={ICP_TONES[company.icpFit]}>{company.icpFit}</Chip>,
+    },
+    {
+      key: 'people',
+      header: 'People',
+      className: 'w-20',
+      render: (company) => (
+        <span className="font-mono text-[12px]">{headcounts.countFor(company.id)}</span>
+      ),
+    },
+  ]
+
+  return (
+    <div className="animate-fade-in">
+      <PageHeader
+        title="Companies"
+        onAdd={() => {
+          void addCompany()
+        }}
+        addLabel="Add company"
+      />
+      <FilterBar value={term} onChange={setTerm} placeholder="Filter by name, type, tags…" />
+
+      {createCompany.error !== null && (
+        <div className="mb-3">
+          <ErrorPanel error={createCompany.error} />
+        </div>
+      )}
+
+      {companies.error !== null ? (
+        <ErrorPanel error={companies.error} />
+      ) : companies.isLoading ? (
+        <LoadingPanel label="Loading companies…" />
+      ) : (
+        <>
+          <DataTable
+            columns={columns}
+            rows={companies.records}
+            getRowId={(company) => company.id}
+            onRowClick={(company) => {
+              void navigate(`/companies/${company.id}`)
+            }}
+            emptyMessage={hasFilter ? 'No companies match this filter' : 'No companies yet'}
+            emptyDescription={hasFilter ? 'Try a different search term.' : undefined}
+            emptyAction={
+              hasFilter
+                ? undefined
+                : {
+                    label: 'Add company',
+                    onClick: () => {
+                      void addCompany()
+                    },
+                  }
+            }
+            sort={sort}
+            onSortChange={setSort}
+          />
+          {!headcounts.isComplete && !headcounts.isLoading && (
+            <p className="mt-2 text-[11px] text-ink-faint">
+              These companies hold more positions than one page returns, so the counts below are
+              a floor rather than a total.
+            </p>
+          )}
+          {companies.hasMore && (
+            <button
+              type="button"
+              onClick={companies.loadMore}
+              disabled={companies.isLoadingMore}
+              className="mt-3 rounded-md border border-border px-3 py-1.5 text-[12px] font-medium text-ink transition hover:border-border-strong hover:bg-surface-sunken disabled:opacity-50"
+            >
+              {companies.isLoadingMore ? 'Loading…' : 'Load more'}
+            </button>
+          )}
+        </>
+      )}
+    </div>
+  )
+}