create-adjacent 0.1.0

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "create-adjacent",
+  "version": "0.1.0",
+  "description": "Create an Adjacent application: npm create adjacent@latest my-app",
+  "keywords": [
+    "create",
+    "adjacent",
+    "pwa",
+    "nextjs",
+    "scaffold"
+  ],
+  "license": "MIT",
+  "author": "Eric Kweyunga",
+  "homepage": "https://github.com/erickweyunga/adjacent-framework/blob/main/docs/create.md",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/erickweyunga/adjacent-framework.git",
+    "directory": "packages/create-adjacent"
+  },
+  "bugs": {
+    "url": "https://github.com/erickweyunga/adjacent-framework/issues"
+  },
+  "type": "module",
+  "bin": {
+    "create-adjacent": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20.12.0"
+  },
+  "scripts": {
+    "build": "node scripts/copy-templates.mjs && bun build src/index.ts --target node --format esm --outfile dist/index.js",
+    "prepublishOnly": "npm run build",
+    "test": "bun test",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.3.13",
+    "@types/node": "^20",
+    "typescript": "^5",
+    "adjacent-cli": "workspace:~"
+  }
+}

package/templates/adjacent/app/manifest.ts

@@ -0,0 +1,5 @@
+import { createAdjacentManifest } from "adjacent-next";
+
+import config from "{{configFromApp}}";
+
+export default createAdjacentManifest(config);

package/templates/adjacent/app/sw.js/route.ts

@@ -0,0 +1,5 @@
+import { createAdjacentServiceWorker } from "adjacent-next";
+
+import config from "{{configFromRoute}}";
+
+export const { GET } = createAdjacentServiceWorker(config);

package/templates/adjacent/app.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from "adjacent-core";
+
+export default defineConfig({
+  app: {
+    description: "A mobile-first progressive web application built with Adjacent.",
+    name: "{{appName}}",
+    shortName: "{{shortName}}",
+    slug: "{{slug}}",
+  },
+  appearance: {
+    backgroundColor: "#ffffff",
+    themeColor: "#171717",
+  },
+  // The Android wrapper reads these through the generated web manifest.
+  android: {
+    navigationColor: "#ffffff",
+    navigationColorDark: "#0c0c0e",
+    themeColorDark: "#0c0c0e",
+  },
+  offline: true,
+});

package/templates/adjacent/components/navigation.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { Tab, Tabs } from "adjacent-ui/navigation";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+function HomeIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+      <path d="M12 3 3 10.5V21h6v-6h6v6h6V10.5L12 3Z" />
+    </svg>
+  );
+}
+
+function SettingsIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+      <path d="M12 15.5A3.5 3.5 0 1 1 12 8.5a3.5 3.5 0 0 1 0 7Zm7.4-2.5a7.6 7.6 0 0 0 0-2l2-1.6-2-3.4-2.4 1a7.6 7.6 0 0 0-1.7-1L14.9 3H9.1l-.4 2.6a7.6 7.6 0 0 0-1.7 1l-2.4-1-2 3.4L4.6 11a7.6 7.6 0 0 0 0 2l-2 1.6 2 3.4 2.4-1a7.6 7.6 0 0 0 1.7 1l.4 2.6h5.8l.4-2.6a7.6 7.6 0 0 0 1.7-1l2.4 1 2-3.4-2-1.6Z" />
+    </svg>
+  );
+}
+
+/**
+ * One navigation, two presentations: a bottom bar on a phone and a left rail
+ * from 768px. Which one shows is decided in CSS, so there is no hydration flash.
+ */
+export function Navigation() {
+  const pathname = usePathname();
+
+  return (
+    <Tabs>
+      <Tab
+        active={pathname === "/"}
+        icon={<HomeIcon />}
+        label="Home"
+        render={<Link href="/" />}
+      />
+      <Tab
+        active={pathname.startsWith("/settings")}
+        icon={<SettingsIcon />}
+        label="Settings"
+        render={<Link href="/settings" />}
+      />
+    </Tabs>
+  );
+}

package/templates/adjacent/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img" aria-label="App icon">
+  <rect width="100" height="100" fill="#171717" />
+  <path fill="#ffffff" fill-rule="evenodd" d="M 50.0 3.0 L 98.5 97.0 L 1.5 97.0 Z M 50.0 25.29 L 71.01 66.0 L 28.99 66.0 Z M 23.06 77.5 L 76.94 77.5 L 87.0 97.0 L 13.0 97.0 Z" />
+</svg>

package/templates/starter/app/(app)/layout.tsx

@@ -0,0 +1,12 @@
+import { NavigationShell } from "adjacent-ui/navigation";
+import type { ReactNode } from "react";
+
+import { Navigation } from "@/components/navigation";
+
+export default function AppLayout({ children }: { readonly children: ReactNode }) {
+  return (
+    <NavigationShell className="bg-background" navigation={<Navigation />}>
+      {children}
+    </NavigationShell>
+  );
+}

package/templates/starter/app/(app)/page.tsx

@@ -0,0 +1,75 @@
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Divider,
+  List,
+  ListItem,
+  Page,
+  Text,
+} from "adjacent-ui";
+
+export default function Home() {
+  return (
+    <Page
+      options={{
+        headerVariant: "large",
+        subtitle: "A mobile-first progressive web app",
+        title: "{{appName}}",
+      }}
+    >
+      <Card variant="outlined">
+        <CardHeader>
+          <CardTitle>Start here</CardTitle>
+          <CardDescription>
+            Edit <code>app/(app)/page.tsx</code> and this page reloads as you save.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Text variant="body-medium">
+            Every component reads the design tokens in{" "}
+            <code>app/globals.css</code>, so changing one there changes the whole
+            application.
+          </Text>
+        </CardContent>
+      </Card>
+
+      <Card variant="outlined">
+        <CardHeader>
+          <CardTitle>What is configured</CardTitle>
+        </CardHeader>
+        <List divided dividerInset="none" lastDivider={false}>
+          <ListItem
+            headline="Offline support"
+            supportingText="A service worker is served from /sw.js in production builds."
+          />
+          <ListItem
+            headline="Web app manifest"
+            supportingText="Generated from app.config.ts at /manifest.webmanifest."
+          />
+          <ListItem
+            headline="Install prompt"
+            supportingText="Installation state is reported on the Settings tab."
+          />
+        </List>
+      </Card>
+
+      <Divider />
+
+      <Text variant="label-large">Run it on a phone</Text>
+      <Text variant="body-small">
+        With a device connected over ADB, <code>adj dev --android</code> serves
+        this app over a trusted HTTPS tunnel and opens it fullscreen.
+      </Text>
+
+      <div>
+        <Button size="sm" variant="filled">
+          A filled button
+        </Button>
+      </div>
+    </Page>
+  );
+}

package/templates/starter/app/(app)/settings/page.tsx

@@ -0,0 +1,24 @@
+import { Card, CardContent, CardHeader, CardTitle, Page, Text } from "adjacent-ui";
+
+import { SettingsPanel } from "./settings-panel";
+
+export default function Settings() {
+  return (
+    <Page options={{ title: "Settings" }}>
+      <Card variant="outlined">
+        <CardHeader>
+          <CardTitle>Runtime</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Text variant="body-small">
+            Reported by <code>useAdjacent()</code> from{" "}
+            <code>adjacent-react</code>. The service worker registers in
+            production builds only, so it stays unavailable while developing.
+          </Text>
+        </CardContent>
+      </Card>
+
+      <SettingsPanel />
+    </Page>
+  );
+}

package/templates/starter/app/(app)/settings/settings-panel.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useAdjacent } from "adjacent-react";
+import { Button, List, ListItem, Text, useDisplayMode } from "adjacent-ui";
+
+const INSTALL_HINT: Readonly<Record<string, string>> = {
+  android: "Open the browser menu and choose Install app.",
+  browser: "This browser cannot install the app.",
+  ios: "Open the Share sheet and choose Add to Home Screen.",
+  macos: "Open the Share menu and choose Add to Dock.",
+};
+
+/**
+ * Adjacent reports installation and runtime state and renders no UI of its own,
+ * so what a prompt looks like is entirely this component's decision.
+ */
+export function SettingsPanel() {
+  const adjacent = useAdjacent();
+  const displayMode = useDisplayMode();
+
+  return (
+    <>
+      <List divided lastDivider={false}>
+        <ListItem headline="Connectivity" trailingSupportingText={adjacent.connectivity} />
+        <ListItem headline="Display mode" trailingSupportingText={displayMode} />
+        <ListItem
+          headline="Service worker"
+          trailingSupportingText={adjacent.serviceWorker.status}
+        />
+        <ListItem headline="Installation" trailingSupportingText={adjacent.state.status} />
+      </List>
+
+      {adjacent.state.status === "available" ? (
+        <div>
+          <Button onClick={() => void adjacent.install()} variant="filled">
+            Install app
+          </Button>
+        </div>
+      ) : null}
+
+      {adjacent.state.status === "manual" ? (
+        <Text variant="body-small">{INSTALL_HINT[adjacent.state.platform]}</Text>
+      ) : null}
+
+      {adjacent.serviceWorker.status === "update-available" ? (
+        <div>
+          <Button onClick={() => void adjacent.activateUpdate()} variant="tonal">
+            Update app
+          </Button>
+        </div>
+      ) : null}
+    </>
+  );
+}