@spacesync/client

Reusable React UI, application shell, theme, and API-client primitives for SpaceSync apps (operator, member).

Shared pure helpers (@spacesync/lib)

Platform-neutral helpers (dateDisplay, booking operating hours / schedule, etc.) live in @spacesync/lib. This package depends on @spacesync/lib@^0.2.1 (published) and re-exports the previous subpaths (./booking-operating-hours, ./booking-schedule, ./lib/dateDisplay, …) for back-compat.

For local lib iteration, temporarily use "@spacesync/lib": "link:../spacesync-lib" (or file:../spacesync-lib), then switch back to the published range before publishing this package.

Develop

This is a standalone package (not a workspace). From this directory:

pnpm install
pnpm typecheck
pnpm build

Local testing (member / operator)

Consumer apps install the published package from npm. They do not read this repo’s src/ directly — only the built dist/ folder.

When the three repos sit side-by-side (see layout below), member and operator automatically alias @spacesync/client to ../spacesync-client/dist and Tailwind scans that folder too. You do not need to copy into node_modules for local work — just build here.

One-time setup

Keep these repos as siblings on disk:

Documents/
  spacesync-client/
  spacesync-member/
  spacesync-operator/

Install dependencies in each app once:

cd ../spacesync-member && npm install
cd ../spacesync-operator && npm install

Daily workflow (recommended)

Terminal 1 — client (watch + rebuild on save):

cd spacesync-client
pnpm dev

Terminal 2 — the app you’re testing:

cd ../spacesync-member && npm run dev   # port 5174
# or
cd ../spacesync-operator && npm run dev   # port 5173

After the first pnpm dev in the client, save a file in spacesync-client/src/ and the app dev server should full-reload within a second or two.

One-off build (no watch)

pnpm build          # dist/ only
pnpm sync:apps      # dist/ + copy into both apps' node_modules (CI / no sibling alias)
pnpm sync:member
pnpm sync:operator

If you still see the old UI

Do these in order:

1. Restart the app dev server (required after changing vite.config.ts or tailwind.css):

# Ctrl+C in the member/operator terminal, then:
npm run dev

2. Clear Vite’s cache (common after Tailwind class changes):

rm -rf node_modules/.vite && npm run dev

Run that inside spacesync-member or spacesync-operator.

3. Hard refresh the browser: Cmd+Shift+R

4. Confirm the client actually built:

cd ../spacesync-client
pnpm build
rg "ring-gray-200" dist/ui.js    # should print nothing (old styling)
rg "getComputedStyle" dist/ui.js # should match (new pill code)

Why sync alone often wasn’t enough

| Layer | What was going wrong | |-------|----------------------| | JS | Copied dist/ into node_modules, but Vite could still serve cached modules | | CSS | Tailwind only rescans class names when its @source files change; stale node_modules/.vite kept old CSS | | Fix | Apps now read ../spacesync-client/dist directly via Vite alias + Tailwind @source |

pnpm sync:apps is still useful when repos are not siblings or before publishing to npm.

Publish (this repo)

Bump the version in package.json if this version is already on npm, then:

pnpm typecheck
pnpm build
npm login   # @spacesync org access on registry.npmjs.org
pnpm publish --access public

prepublishOnly typechecks and prepack builds dist/ automatically.

Version bump shortcuts:

npm version patch   # 0.1.15 → 0.1.16
npm version minor   # 0.1.15 → 0.2.0
npm version major   # 0.1.15 → 1.0.0

Git pushes do not publish. Only pnpm publish (or npm publish --access public) does.

Install (consumers)

pnpm add @spacesync/client

Peer dependencies: react and react-dom (^18.3.1).

import { Button } from "@spacesync/client/ui";
import { AppWebShell } from "@spacesync/client/app-web-shell";

@import "@spacesync/client/styles/theme.css";