React UI

.github/workflows/test.yml → .github/workflows/ci.yml

@@ -1,4 +1,4 @@
-name: Test
+name: CI
 on:
   push:
 
@@ -40,6 +40,7 @@ jobs:
     runs-on: ubuntu-latest
     permissions:
       id-token: write
+      pull-requests: write
     steps:
       - uses: actions/checkout@v6
 
@@ -50,6 +51,12 @@ jobs:
       - name: Install modules
         run: npm install
 
+      - name: Install Playwright browsers
+        run: npx playwright install chromium
+
+      # Do not run npm build here! This intentonally runs tests against the unbuilt source
+      # to ensure that the tests are properly configured to run against the source files.
+
       - name: Test
         run: npm run coverage
 
@@ -60,6 +67,26 @@ jobs:
           fail_ci_if_error: true
           files: ./coverage/coverage-final.json
 
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+      pull-requests: write
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: "22"
+      - name: Install modules
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Publish to pkg.pr.new
+        run: npx pkg-pr-new publish ./packages/*
+
   benchmarks:
     runs-on: ubuntu-latest
     concurrency:

aliases.ts

@@ -0,0 +1,30 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const root = import.meta.dirname;
+
+interface PackageJson {
+  name: string;
+  workspaces?: string[];
+}
+
+const rootPkg: PackageJson = JSON.parse(readFileSync(resolve(root, "package.json"), "utf-8"));
+
+/**
+ * Resolve aliases for all workspace packages to their `src/index.ts` entry
+ * points. Optionally exclude the current package (to avoid self-aliasing).
+ */
+export function aliases(exclude?: string): Record<string, string> {
+  const result: Record<string, string> = {};
+
+  for (const workspace of rootPkg.workspaces ?? []) {
+    const pkgPath = resolve(root, workspace, "package.json");
+    const pkg: PackageJson = JSON.parse(readFileSync(pkgPath, "utf-8"));
+
+    if (pkg.name === exclude) continue;
+
+    result[pkg.name] = resolve(root, workspace, "src/index.ts");
+  }
+
+  return result;
+}

package.json

@@ -24,6 +24,7 @@
     "globals": "^17.2.0",
     "make-fetch-happen": "^15.0.3",
     "npm-run-all": "^4.1.5",
+    "pkg-pr-new": "^0.0.65",
     "prettier": "^3.7.4",
     "tsdown": "^0.21.0",
     "typescript": "^5.3.3",
@@ -34,6 +35,7 @@
     "packages/tide-predictor",
     "packages/neaps",
     "packages/api",
-    "packages/cli"
+    "packages/cli",
+    "packages/react"
   ]
 }

packages/api/vitest.config.ts

@@ -1,12 +1,10 @@
 import { defineProject } from "vitest/config";
 import { resolve } from "node:path";
+import { aliases } from "../../aliases.js";
 
 export default defineProject({
   resolve: {
-    alias: {
-      neaps: resolve(__dirname, "../neaps/src/index.ts"),
-      "@neaps/tide-predictor": resolve(__dirname, "../tide-predictor/src/index.ts"),
-    },
+    alias: aliases("@neaps/api"),
   },
   test: {
     environment: "node",

packages/cli/vitest.config.ts

@@ -1,13 +1,10 @@
 import { defineProject } from "vitest/config";
 import { resolve } from "node:path";
+import { aliases } from "../../aliases.js";
 
 export default defineProject({
   resolve: {
-    alias: {
-      neaps: resolve(__dirname, "../neaps/src/index.ts"),
-      "@neaps/api": resolve(__dirname, "../api/src/index.ts"),
-      "@neaps/tide-predictor": resolve(__dirname, "../tide-predictor/src/index.ts"),
-    },
+    alias: aliases("@neaps/cli"),
   },
   test: {
     environment: "node",

packages/neaps/vitest.config.ts

@@ -1,11 +1,10 @@
 import { defineProject } from "vitest/config";
 import { resolve } from "node:path";
+import { aliases } from "../../aliases.js";
 
 export default defineProject({
   resolve: {
-    alias: {
-      "@neaps/tide-predictor": resolve(__dirname, "../tide-predictor/src/index.ts"),
-    },
+    alias: aliases("neaps"),
   },
   test: {
     environment: "node",

packages/react/.storybook/main.ts

@@ -0,0 +1,30 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+import tailwindcss from "@tailwindcss/vite";
+import { createApp } from "@neaps/api";
+
+const API_PORT = 6007;
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(ts|tsx)"],
+  addons: ["@storybook/addon-themes"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  viteFinal(config) {
+    config.plugins ??= [];
+    config.plugins.push(tailwindcss());
+    config.plugins.push({
+      name: "neaps-api",
+      async configureServer() {
+        const app = createApp();
+        app.listen(API_PORT, "0.0.0.0", () => {
+          console.log(`Neaps API listening on http://0.0.0.0:${API_PORT}`);
+        });
+      },
+    });
+    return config;
+  },
+};
+
+export default config;

packages/react/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from "storybook/internal/manager-api";
+import { light, dark } from "./theme.js";
+
+const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+addons.setConfig({ theme: prefersDark ? dark : light });

packages/react/.storybook/preview.tsx

@@ -0,0 +1,34 @@
+import type { Preview } from "@storybook/react";
+import { withThemeByDataAttribute } from "@storybook/addon-themes";
+import { NeapsProvider } from "../src/provider.js";
+import "./storybook.css";
+
+const API_URL = `${window.location.protocol}//${window.location.hostname}:6007`;
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <NeapsProvider baseUrl={API_URL}>
+        <Story />
+      </NeapsProvider>
+    ),
+    withThemeByDataAttribute({
+      themes: {
+        light: "light",
+        dark: "dark",
+      },
+      defaultTheme: "light",
+      attributeName: "data-theme",
+    }),
+  ],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

packages/react/.storybook/storybook.css

@@ -0,0 +1,10 @@
+@import "tailwindcss";
+@import "../src/styles.css";
+
+[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+[data-theme="light"] {
+  color-scheme: light;
+}

packages/react/.storybook/theme.ts

@@ -0,0 +1,9 @@
+import { create } from "storybook/internal/theming";
+
+const brand = {
+  brandTitle: "Neaps",
+  brandUrl: "https://openwaters.io/tides/neaps",
+};
+
+export const light = create({ base: "light", ...brand });
+export const dark = create({ base: "dark", ...brand });