march-hare 0.13.0 → 0.13.2

package/dist/cli/templates/feature/presentational/index.tsx.ejs.t

@@ -0,0 +1,14 @@
+---
+to: src/features/<%= name %>/index.tsx
+---
+import * as React from "react";
+import type { Props } from "./types.ts";
+import { scope } from "./utils.ts";
+
+export function <%= pascalName %>({ label }: Props): React.ReactElement {
+  return (
+    <scope.Boundary>
+      <span>{label}</span>
+    </scope.Boundary>
+  );
+}

package/dist/cli/templates/feature/presentational/types.ts.ejs.t

@@ -0,0 +1,12 @@
+---
+to: src/features/<%= name %>/types.ts
+---
+import { Action, Distribution } from "march-hare";
+
+export type Props = {
+  label: string;
+};
+
+export class Multicast {
+  static Update = Action<string>("<%= pascalName %>.Update", Distribution.Multicast);
+}

package/dist/cli/templates/feature/presentational/utils.ts.ejs.t

@@ -0,0 +1,8 @@
+---
+to: src/features/<%= name %>/utils.ts
+---
+import { shared } from "march-hare";
+import { type Envs } from "@shared/types/index.ts";
+import type { Multicast } from "./types.ts";
+
+export const scope = shared.Scope<Envs, typeof Multicast>();

package/dist/cli/templates/feature/stateful/actions.ts.ejs.t

@@ -0,0 +1,16 @@
+---
+to: src/features/<%= name %>/actions.ts
+---
+import { Actions, type Model } from "./types.ts";
+import { scope } from "./utils.ts";
+
+export function useActions() {
+  const context = scope.useContext<Model, typeof Actions>();
+  const actions = context.useActions({ count: 0 });
+
+  actions.useAction(Actions.Tick, (context) => {
+    context.actions.produce(({ model }) => void (model.count += 1));
+  });
+
+  return actions;
+}

package/dist/cli/templates/feature/stateful/index.tsx.ejs.t

@@ -0,0 +1,19 @@
+---
+to: src/features/<%= name %>/index.tsx
+---
+import * as React from "react";
+import { useActions } from "./actions.ts";
+import { scope } from "./utils.ts";
+import { Actions } from "./types.ts";
+
+export function <%= pascalName %>(): React.ReactElement {
+  const [model, actions] = useActions();
+
+  return (
+    <scope.Boundary>
+      <button onClick={() => actions.dispatch(Actions.Tick)}>
+        <%= pascalName %> ({model.count})
+      </button>
+    </scope.Boundary>
+  );
+}

package/dist/cli/templates/feature/stateful/types.ts.ejs.t

@@ -0,0 +1,16 @@
+---
+to: src/features/<%= name %>/types.ts
+---
+import { Action, Distribution } from "march-hare";
+
+export type Model = {
+  count: number;
+};
+
+export class Actions {
+  static Tick = Action("<%= pascalName %>.Tick");
+}
+
+export class Multicast {
+  static Update = Action<number>("<%= pascalName %>.Update", Distribution.Multicast);
+}

package/dist/cli/templates/feature/stateful/utils.ts.ejs.t

@@ -0,0 +1,8 @@
+---
+to: src/features/<%= name %>/utils.ts
+---
+import { shared } from "march-hare";
+import { type Envs } from "@shared/types/index.ts";
+import type { Multicast } from "./types.ts";
+
+export const scope = shared.Scope<Envs, typeof Multicast>();

package/dist/cli/templates/feature/unit/index.test.tsx.ejs.t

@@ -0,0 +1,21 @@
+---
+to: src/features/<%= name %>/index.test.tsx
+---
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import { App } from "march-hare";
+import { <%= pascalName %> } from "./index.tsx";
+import { type Envs } from "@shared/types/index.ts";
+
+const app = App<Envs>({ env: { apiBase: "https://api.example.test" } });
+
+describe("<%= pascalName %>", () => {
+  it("renders inside an app boundary", () => {
+    render(
+      <app.Boundary>
+        <<%= pascalName %> />
+      </app.Boundary>,
+    );
+    expect(document.body).toBeInTheDocument();
+  });
+});

package/dist/cli/templates/init/new/README.md.ejs.t

@@ -0,0 +1,48 @@
+---
+to: README.md
+---
+# <%= title(name) %>
+
+<%= description %>
+
+Built with [March Hare](https://github.com/Wildhoney/MarchHare) and the
+[`@march-hare/cli`](https://github.com/Wildhoney/MarchHare/tree/main/src/cli)
+scaffolder.
+
+## Layout
+
+```
+src/
+├── app/        ← the host. One App() declaration, one Boundary, all routes.
+├── features/   ← user-facing behaviours. Each feature owns its own scope.
+└── shared/     ← reusable building blocks: types, resources, theme, utils.
+```
+
+Layer boundaries are enforced by `eslint-plugin-boundaries` — imports
+flow strictly downward (`app → features → shared`).
+
+## Scripts
+
+| Command              | What it does                              |
+| -------------------- | ----------------------------------------- |
+| `yarn dev`           | Start the Vite dev server                 |
+| `yarn test`          | Run unit + integration tests with Vitest  |
+| `yarn test:e2e`      | Run Playwright end-to-end tests           |
+| `yarn typecheck`     | TypeScript with no emit                   |
+| `yarn lint`          | ESLint                                    |
+| `yarn checks`        | Format, lint, typecheck, and test         |
+
+## Scaffolding more
+
+With the CLI installed globally (`npm i -g @march-hare/cli`) or linked
+locally, drop new pages, features, and shared modules in:
+
+```bash
+mh                    # interactive menu
+mh feature new        # add a feature
+mh app new            # add a page
+mh shared component   # add a shared component
+```
+
+See the [CLI README](https://github.com/Wildhoney/MarchHare/tree/main/src/cli)
+for the full list.

package/dist/cli/templates/init/new/eslint.config.js.ejs.t

@@ -0,0 +1,88 @@
+---
+to: eslint.config.js
+---
+import js from "@eslint/js";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+import pluginImport from "eslint-plugin-import";
+import pluginBoundaries from "eslint-plugin-boundaries";
+import { defineConfig } from "eslint/config";
+
+export default defineConfig([
+  {
+    files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+    plugins: { js },
+    extends: ["js/recommended"],
+  },
+  {
+    files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+    languageOptions: { globals: globals.browser },
+  },
+  tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  {
+    plugins: { import: pluginImport },
+    settings: {
+      react: { version: "detect" },
+    },
+    rules: {
+      "react/react-in-jsx-scope": "off",
+      "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+      "@typescript-eslint/no-non-null-assertion": "error",
+      "@typescript-eslint/no-namespace": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
+      ],
+      "import/no-default-export": "error",
+    },
+  },
+  {
+    files: ["src/**/*.{ts,tsx,d.ts}"],
+    plugins: { boundaries: pluginBoundaries },
+    settings: {
+      "import/resolver": {
+        typescript: { project: "./tsconfig.json" },
+        node: true,
+      },
+      "boundaries/include": ["src/**/*"],
+      "boundaries/elements": [
+        { type: "app", pattern: "src/app", mode: "folder" },
+        {
+          type: "features",
+          pattern: "src/features/*",
+          mode: "folder",
+          capture: ["slice"],
+        },
+        { type: "shared", pattern: "src/shared", mode: "folder" },
+      ],
+    },
+    rules: {
+      "import/no-default-export": "off",
+      "boundaries/dependencies": [
+        "error",
+        {
+          default: "disallow",
+          message:
+            "${file.type} cannot import ${dependency.type} — layering is top-down (app → features → shared).",
+          rules: [
+            { from: { type: "app" }, allow: { to: { type: ["app", "features", "shared"] } } },
+            { from: { type: "features" }, allow: { to: { type: "shared" } } },
+            { from: { type: "shared" }, allow: { to: { type: "shared" } } },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    files: ["**/*.test.{ts,tsx}", "**/*.integration.{ts,tsx}", "tests/**/*.{ts,tsx}"],
+    rules: {
+      "@typescript-eslint/no-floating-promises": "off",
+    },
+  },
+  {
+    files: ["vite.config.ts", "vitest.config.ts", "playwright.config.ts", "eslint.config.js"],
+    rules: { "import/no-default-export": "off" },
+  },
+]);

package/dist/cli/templates/init/new/gitignore.ejs.t

@@ -0,0 +1,9 @@
+---
+to: .gitignore
+---
+node_modules/
+dist/
+test-results/
+playwright-report/
+.DS_Store
+*.log

package/dist/cli/templates/init/new/index.html.ejs.t

@@ -0,0 +1,18 @@
+---
+to: index.html
+---
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><%= title(name) %></title>
+    <style>
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #f5f5f5; }
+    </style>
+  </head>
+  <body>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

package/dist/cli/templates/init/new/package.json.ejs.t

@@ -0,0 +1,54 @@
+---
+to: package.json
+---
+{
+  "name": "<%= name %>",
+  "version": "0.1.0",
+  "description": "<%= description %>",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/",
+    "fmt": "prettier --write .",
+    "checks": "npm run fmt && npm run lint && npm run typecheck && npm run test"
+  },
+  "dependencies": {
+    "@emotion/css": "^11.13.5",
+    "@mobily/ts-belt": "^3.0.0",
+    "antd": "^6.3.0",
+    "immer": "^10.0.0",
+    "ky": "^2.0.2",
+    "march-hare": "^0.13.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.3",
+    "@playwright/test": "^1.58.2",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
+    "eslint": "^9.39.3",
+    "eslint-import-resolver-typescript": "^4.4.5",
+    "eslint-plugin-boundaries": "^6.0.2",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-react": "^7.37.5",
+    "globals": "^17.3.0",
+    "happy-dom": "^20.6.1",
+    "prettier": "^3.8.1",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.55.0",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
+  }
+}

package/dist/cli/templates/init/new/playwright.config.ts.ejs.t

@@ -0,0 +1,17 @@
+---
+to: playwright.config.ts
+---
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests",
+  testMatch: "*.e2e.ts",
+  use: {
+    baseURL: "http://localhost:5173",
+  },
+  webServer: {
+    command: "vite dev",
+    port: 5173,
+    reuseExistingServer: !process.env.CI,
+  },
+});

package/dist/cli/templates/init/new/prettierrc.ejs.t

@@ -0,0 +1,8 @@
+---
+to: .prettierrc
+---
+{
+  "tabWidth": 2,
+  "printWidth": 80,
+  "singleQuote": false
+}

package/dist/cli/templates/init/new/src.app.index.tsx.ejs.t

@@ -0,0 +1,14 @@
+---
+to: src/app/index.tsx
+---
+import * as React from "react";
+import { app } from "./utils.ts";
+import { HomePage } from "./pages/home/index.tsx";
+
+export function Root(): React.ReactElement {
+  return (
+    <app.Boundary>
+      <HomePage />
+    </app.Boundary>
+  );
+}

package/dist/cli/templates/init/new/src.app.pages.home.actions.ts.ejs.t

@@ -0,0 +1,16 @@
+---
+to: src/app/pages/home/actions.ts
+---
+import { app } from "../../utils.ts";
+import { Actions, type Model } from "./types.ts";
+
+export function useActions() {
+  const context = app.useContext<Model, typeof Actions>();
+  const actions = context.useActions({ greeting: null });
+
+  actions.useAction(Actions.Broadcast.Greeted, (context, message) => {
+    context.actions.produce(({ model }) => void (model.greeting = message));
+  });
+
+  return actions;
+}

package/dist/cli/templates/init/new/src.app.pages.home.index.tsx.ejs.t

@@ -0,0 +1,30 @@
+---
+to: src/app/pages/home/index.tsx
+---
+import * as React from "react";
+import { GreetButton } from "@features/greet/index.tsx";
+import { useActions } from "./actions.ts";
+import * as styles from "./styles.ts";
+
+export function HomePage(): React.ReactElement {
+  const [model] = useActions();
+
+  return (
+    <main className={styles.layout}>
+      <header className={styles.header}>
+        <h1 className={styles.title}><%= title(name) %></h1>
+        <p className={styles.tagline}>
+          Click the button below to dispatch your first March Hare action.
+        </p>
+      </header>
+
+      <GreetButton />
+
+      {model.greeting ? (
+        <p className={styles.greeting}>{model.greeting}</p>
+      ) : (
+        <p className={styles.empty}>No greeting yet — press the button.</p>
+      )}
+    </main>
+  );
+}

package/dist/cli/templates/init/new/src.app.pages.home.integration.tsx.ejs.t

@@ -0,0 +1,28 @@
+---
+to: src/app/pages/home/index.integration.tsx
+---
+import { describe, expect, it } from "vitest";
+import { render, screen, act, fireEvent, waitFor } from "@testing-library/react";
+import { Root } from "@app/index.tsx";
+
+describe("HomePage", () => {
+  it("renders the heading", () => {
+    render(<Root />);
+    expect(screen.getByRole("heading", { name: "<%= title(name) %>" })).toBeInTheDocument();
+  });
+
+  it("shows the empty state until the button is clicked", () => {
+    render(<Root />);
+    expect(screen.getByText(/No greeting yet/)).toBeInTheDocument();
+  });
+
+  it("broadcasts a greeting on click", async () => {
+    render(<Root />);
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: /Say hello/ }));
+    });
+    await waitFor(() => {
+      expect(screen.queryByText(/No greeting yet/)).not.toBeInTheDocument();
+    });
+  });
+});

package/dist/cli/templates/init/new/src.app.pages.home.styles.ts.ejs.t

@@ -0,0 +1,45 @@
+---
+to: src/app/pages/home/styles.ts
+---
+import { css } from "@emotion/css";
+import { colour, font, spacing } from "@shared/theme/index.ts";
+
+export const layout = css`
+  min-height: 100vh;
+  padding: ${spacing.xxl} ${spacing.l};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${spacing.xl};
+  font-family: ${font.family};
+`;
+
+export const header = css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${spacing.xs};
+`;
+
+export const title = css`
+  margin: 0;
+  font-size: ${font.size.xxl};
+  font-weight: ${font.weight.bold};
+  color: ${colour.text.primary};
+`;
+
+export const tagline = css`
+  margin: 0;
+  color: ${colour.text.secondary};
+  font-size: ${font.size.m};
+`;
+
+export const greeting = css`
+  font-size: ${font.size.l};
+  color: ${colour.text.primary};
+`;
+
+export const empty = css`
+  color: ${colour.text.muted};
+  font-style: italic;
+`;

package/dist/cli/templates/init/new/src.app.pages.home.types.ts.ejs.t

@@ -0,0 +1,12 @@
+---
+to: src/app/pages/home/types.ts
+---
+import { Broadcast } from "@shared/types/index.ts";
+
+export type Model = {
+  greeting: string | null;
+};
+
+export class Actions {
+  static Broadcast = Broadcast;
+}

package/dist/cli/templates/init/new/src.app.utils.ts.ejs.t

@@ -0,0 +1,9 @@
+---
+to: src/app/utils.ts
+---
+import { App } from "march-hare";
+import { Env } from "@shared/types/index.ts";
+
+export const app = App<Env.<%= env %>>({
+  env: { apiBase: "<%= apiBase %>" },
+});

package/dist/cli/templates/init/new/src.features.greet.actions.ts.ejs.t

@@ -0,0 +1,20 @@
+---
+to: src/features/greet/actions.ts
+---
+import { Actions, type Model } from "./types.ts";
+import { scope } from "./utils.ts";
+
+export function useActions() {
+  const context = scope.useContext<Model, typeof Actions>();
+  const actions = context.useActions({ count: 0 });
+
+  actions.useAction(Actions.Click, async (context) => {
+    context.actions.produce(({ model }) => void (model.count += 1));
+    await context.actions.dispatch(
+      Actions.Broadcast.Greeted,
+      `Hello from <%= title(name) %> #${context.model.count + 1}`,
+    );
+  });
+
+  return actions;
+}

package/dist/cli/templates/init/new/src.features.greet.index.test.tsx.ejs.t

@@ -0,0 +1,21 @@
+---
+to: src/features/greet/index.test.tsx
+---
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { App } from "march-hare";
+import { GreetButton } from "./index.tsx";
+import { type Envs } from "@shared/types/index.ts";
+
+const app = App<Envs>({ env: { apiBase: "https://api.example.test" } });
+
+describe("GreetButton", () => {
+  it("renders the Say hello button", () => {
+    render(
+      <app.Boundary>
+        <GreetButton />
+      </app.Boundary>,
+    );
+    expect(screen.getByRole("button", { name: "Say hello" })).toBeInTheDocument();
+  });
+});

package/dist/cli/templates/init/new/src.features.greet.index.tsx.ejs.t

@@ -0,0 +1,24 @@
+---
+to: src/features/greet/index.tsx
+---
+import * as React from "react";
+import { Button } from "@shared/components/button/index.tsx";
+import { useActions } from "./actions.ts";
+import { scope } from "./utils.ts";
+import { Actions } from "./types.ts";
+
+export function GreetButton(): React.ReactElement {
+  const [, actions] = useActions();
+
+  return (
+    <scope.Boundary>
+      <Button
+        type="primary"
+        size="large"
+        onClick={() => actions.dispatch(Actions.Click)}
+      >
+        Say hello
+      </Button>
+    </scope.Boundary>
+  );
+}

package/dist/cli/templates/init/new/src.features.greet.types.ts.ejs.t

@@ -0,0 +1,18 @@
+---
+to: src/features/greet/types.ts
+---
+import { Action, Distribution } from "march-hare";
+import { Broadcast } from "@shared/types/index.ts";
+
+export type Model = {
+  count: number;
+};
+
+export class Actions {
+  static Click = Action("Greet.Click");
+  static Broadcast = Broadcast;
+}
+
+export class Multicast {
+  static Pulse = Action<number>("Greet.Pulse", Distribution.Multicast);
+}

package/dist/cli/templates/init/new/src.features.greet.utils.ts.ejs.t

@@ -0,0 +1,8 @@
+---
+to: src/features/greet/utils.ts
+---
+import { shared } from "march-hare";
+import { type Envs } from "@shared/types/index.ts";
+import type { Multicast } from "./types.ts";
+
+export const scope = shared.Scope<Envs, typeof Multicast>();

package/dist/cli/templates/init/new/src.index.tsx.ejs.t

@@ -0,0 +1,8 @@
+---
+to: src/index.tsx
+---
+import * as ReactDOM from "react-dom/client";
+import { Root } from "./app/index.tsx";
+
+const root = ReactDOM.createRoot(document.body);
+root.render(<Root />);

package/dist/cli/templates/init/new/src.shared.components.button.index.test.tsx.ejs.t

@@ -0,0 +1,13 @@
+---
+to: src/shared/components/button/index.test.tsx
+---
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Button } from "./index.tsx";
+
+describe("Button", () => {
+  it("renders its children", () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole("button", { name: "Click me" })).toBeInTheDocument();
+  });
+});