@wasp.sh/wasp-cli-darwin-arm64-unknown 0.20.0

package/data/Cli/starters/README.md

@@ -0,0 +1,22 @@
+# Wasp Starters
+
+This directory contains starter templates for creating new Wasp projects.
+
+## How Wasp Starters Work
+
+When you create a new project using `wasp new`, Wasp creates the project in 3 steps:
+
+1. **Copy skeleton files**: Wasp copies the [`skeleton`](./skeleton) files into the project directory
+2. **Copy starter template files**: Wasp copies the chosen starter template files (e.g., `basic`) into the project directory
+3. **Replace placeholders**: Wasp replaces template placeholders in the project files (e.g., app name)
+
+Due to this behavior, all files shared by all starters are placed in the [`skeleton`](./skeleton) directory.
+
+## Development Workflow
+
+The recommended approach for developing starter templates:
+
+1. **Create a test project**: Create a new project with the starter you want to modify
+2. **Implement changes**: Make your required changes in the Wasp project
+3. **Copy changes back**: Once satisfied with the implementation, copy the files from your project back to the starter templates
+4. **Test the starter**: Create a new project with `wasp-cli` to verify it matches your previously created project

package/data/Cli/starters/basic/README.md

@@ -0,0 +1,35 @@
+# Basic Starter – A Simple ToDo App
+
+Basic starter is a well-rounded template that showcases the most important bits of working with Wasp.
+
+## Prerequisites
+
+- **Node.js** (newest LTS version recommended): We recommend install Node through a Node version manager, e.g. `nvm`.
+- **Wasp** (latest version): Install via
+  ```sh
+  curl -sSL https://get.wasp.sh/installer.sh | sh
+  ```
+
+## Using the template
+
+You can use this template through the Wasp CLI:
+
+```bash
+wasp new <project-name>
+# or
+wasp new <project-name> -t basic
+```
+
+## Development
+
+To start the application locally for development or preview purposes:
+
+1. Run `wasp db migrate-dev` to migrate the database to the latest migration
+2. Run `wasp start` to start the Wasp application. If running for the first time, this will also install the client and the server dependencies for you.
+3. The application should be running on `localhost:3000`. Open in it your browser to access the client.
+
+To improve your Wasp development experience, we recommend installing the [Wasp extension for VSCode](https://marketplace.visualstudio.com/items?itemName=wasp-lang.wasp).
+
+## Learn more
+
+To find out more about Wasp, visit out [docs](https://wasp.sh/docs).

package/data/Cli/starters/basic/eslint.config.js

@@ -0,0 +1,24 @@
+import js from "@eslint/js";
+import eslintPrettier from "eslint-config-prettier/flat";
+import eslintReact from "eslint-plugin-react";
+import { defineConfig } from "eslint/config";
+import globals from "globals";
+import eslintTypescript from "typescript-eslint";
+
+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, ...globals.node } } },
+  eslintTypescript.configs.recommended,
+  eslintReact.configs.flat.recommended,
+  eslintReact.configs.flat['jsx-runtime'],
+  eslintPrettier,
+  // Overrides:
+  {
+    // `@typescript-eslint/no-require-imports` is enabled by default in `typescript-eslint/recommended` config.
+    // This allows us to use `require` syntax in CJS files.
+    files: ["**/*.{cjs,cts}"],
+    rules: {
+      "@typescript-eslint/no-require-imports": ["off"]
+    }
+  }
+]);

package/data/Cli/starters/basic/main.wasp

@@ -0,0 +1,100 @@
+app __waspAppName__ {
+  wasp: {
+    version: "__waspVersion__"
+  },
+  title: "__waspProjectName__",
+  head: [
+    "<link rel='icon' href='/favicon.ico' />",
+  ],
+  auth: {
+    userEntity: User,
+    methods: {
+      email: {
+        fromField: {
+          name: "Basic App",
+          email: "hello@example.com"
+        },
+        userSignupFields: import { userSignupFields } from "@src/auth/email/userSignupFields",
+        emailVerification: {
+          clientRoute: EmailVerificationRoute,
+        },
+        passwordReset: {
+          clientRoute: PasswordResetRoute,
+        }
+      },
+    },
+    onAuthSucceededRedirectTo: "/",
+    onAuthFailedRedirectTo: "/login",
+  },
+  emailSender: {
+    provider: Dummy,
+  },
+  client: {
+    rootComponent: import { App } from "@src/App",
+  }
+}
+
+// #region Auth
+route LoginRoute { path: "/login", to: LoginPage }
+page LoginPage {
+  component: import { LoginPage } from "@src/auth/email/LoginPage"
+}
+
+route SignupRoute { path: "/signup", to: SignupPage }
+page SignupPage {
+  component: import { SignupPage } from "@src/auth/email/SignupPage"
+}
+
+route RequestPasswordResetRoute { path: "/request-password-reset", to: RequestPasswordResetPage }
+page RequestPasswordResetPage {
+  component: import { RequestPasswordResetPage } from "@src/auth/email/RequestPasswordResetPage",
+}
+
+route PasswordResetRoute { path: "/password-reset", to: PasswordResetPage }
+page PasswordResetPage {
+  component: import { PasswordResetPage } from "@src/auth/email/PasswordResetPage",
+}
+
+route EmailVerificationRoute { path: "/email-verification", to: EmailVerificationPage }
+page EmailVerificationPage {
+  component: import { EmailVerificationPage } from "@src/auth/email/EmailVerificationPage",
+}
+// #endregion Auth
+
+// #region Tasks
+route TasksRoute { path: "/", to: TasksPage }
+page TasksPage {
+  authRequired: true,
+  component: import { TasksPage } from "@src/tasks/TasksPage"
+}
+
+query getTasks {
+  fn: import { getTasks } from "@src/tasks/queries",
+  entities: [Task, Tag]
+}
+
+action createTask {
+  fn: import { createTask } from "@src/tasks/actions",
+  entities: [Task]
+}
+
+action updateTaskStatus {
+  fn: import { updateTaskStatus } from "@src/tasks/actions",
+  entities: [Task]
+}
+
+action deleteCompletedTasks {
+  fn: import { deleteCompletedTasks } from "@src/tasks/actions",
+  entities: [Task],
+}
+
+query getTags {
+  fn: import { getTags } from "@src/tags/queries",
+  entities: [Tag]
+}
+
+action createTag {
+  fn: import { createTag } from "@src/tags/actions",
+  entities: [Tag]
+}
+// #endregion Tasks

package/data/Cli/starters/basic/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "__waspAppName__",
+  "type": "module",
+  "workspaces": [".wasp/build/*", ".wasp/out/*"],
+  "dependencies": {
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "react-hook-form": "^7.57.0",
+    "react-router-dom": "^6.26.2",
+    "tailwind-merge": "~2.6.0",
+    "wasp": "file:.wasp/out/sdk/wasp"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.27.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^9.27.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-react": "^7.37.5",
+    "globals": "^16.1.0",
+    "prettier": "^3.5.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "prisma": "5.19.1",
+    "tailwindcss": "^3.4.17",
+    "typescript": "5.8.2",
+    "typescript-eslint": "^8.32.1",
+    "vite": "^7.0.6"
+  }
+}

package/data/Cli/starters/basic/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/data/Cli/starters/basic/schema.prisma

@@ -0,0 +1,42 @@
+datasource db {
+  provider = "sqlite"
+  url      = env("DATABASE_URL")
+}
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+// Use Prisma Schema file to define your entities: https://www.prisma.io/docs/concepts/components/prisma-schema.
+// Run `wasp db migrate-dev` in the CLI to create the database tables,
+// then run `wasp db studio` to open Prisma Studio and view your db models.
+model User {
+  id       String @id @default(uuid())
+  username String
+
+  tasks Task[]
+  tags  Tag[]
+}
+
+model Task {
+  id          String   @id @default(uuid())
+  description String
+  isDone      Boolean  @default(false)
+  createdAt   DateTime @default(now())
+
+  user   User   @relation(fields: [userId], references: [id])
+  userId String
+
+  tags Tag[]
+}
+
+model Tag {
+  id    String @id @default(uuid())
+  name  String @unique
+  color String
+
+  user   User   @relation(fields: [userId], references: [id])
+  userId String
+
+  tasks Task[]
+}

package/data/Cli/starters/basic/src/App.css

@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .card {
+    @apply rounded-xl border border-neutral-200 bg-white shadow-sm transition-all duration-200;
+  }
+
+  .label {
+    @apply text-sm font-medium text-neutral-700;
+  }
+}

package/data/Cli/starters/basic/src/App.tsx

@@ -0,0 +1,12 @@
+import { Outlet } from "react-router-dom";
+import "./App.css";
+import { Header } from "./shared/components/Header";
+
+export function App() {
+  return (
+    <main className="flex min-h-screen w-full flex-col bg-neutral-50 text-neutral-800">
+      <Header />
+      <Outlet />
+    </main>
+  );
+}

package/data/Cli/starters/basic/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 161 161"><defs><style>.cls-1{fill:#f5cc05;}.cls-2{fill-rule:evenodd;}</style></defs><g id="Page-1"><g id="Group-23"><circle id="Oval" class="cls-1" cx="80.5" cy="80.5" r="79"/><g id="Group-36"><g id="_" data-name="}"><path id="path-2" class="cls-2" d="M88.67,114.33h2.91q6,0,7.87-1.89c1.22-1.25,1.83-3.9,1.83-7.93V93.89c0-4.46.65-7.7,1.93-9.73s3.51-3.43,6.67-4.2q-4.69-1.08-6.65-4.12c-1.3-2-2-5.28-2-9.77V55.44q0-6-1.83-7.93t-7.87-1.88H88.67V39.5h2.65q10.65,0,14.24,3.15t3.59,12.62V65.56c0,4.28.77,7.24,2.29,8.87s4.3,2.44,8.32,2.44h2.74V83h-2.74q-6,0-8.32,2.49c-1.52,1.65-2.29,4.64-2.29,9v10.25q0,9.47-3.59,12.64T91.32,120.5H88.67Z"/><path id="path-2-2" data-name="path-2" class="cls-2" d="M88.67,114.33h2.91q6,0,7.87-1.89c1.22-1.25,1.83-3.9,1.83-7.93V93.89c0-4.46.65-7.7,1.93-9.73s3.51-3.43,6.67-4.2q-4.69-1.08-6.65-4.12c-1.3-2-2-5.28-2-9.77V55.44q0-6-1.83-7.93t-7.87-1.88H88.67V39.5h2.65q10.65,0,14.24,3.15t3.59,12.62V65.56c0,4.28.77,7.24,2.29,8.87s4.3,2.44,8.32,2.44h2.74V83h-2.74q-6,0-8.32,2.49c-1.52,1.65-2.29,4.64-2.29,9v10.25q0,9.47-3.59,12.64T91.32,120.5H88.67Z"/></g><g id="text831"><g id="_2" data-name="="><path id="path-3" class="cls-2" d="M38.5,85.15H75.83v7.58H38.5Zm0-17.88H75.83v7.49H38.5Z"/><path id="path-3-2" data-name="path-3" class="cls-2" d="M38.5,85.15H75.83v7.58H38.5Zm0-17.88H75.83v7.49H38.5Z"/></g></g></g></g></g></svg>

package/data/Cli/starters/basic/src/auth/AuthLayout.tsx

@@ -0,0 +1,10 @@
+export function AuthLayout({ children }: React.PropsWithChildren) {
+  return (
+    <div className="flex justify-center">
+      {/* Auth UI has margin-top on title, so we lower the top padding */}
+      <div className="card mt-32 h-fit w-full max-w-md px-8 py-10 pt-4">
+        {children}
+      </div>
+    </div>
+  );
+}

package/data/Cli/starters/basic/src/auth/email/EmailVerificationPage.tsx

@@ -0,0 +1,19 @@
+import { Link } from "react-router-dom";
+import { VerifyEmailForm } from "wasp/client/auth";
+import { AuthLayout } from "../AuthLayout";
+
+export function EmailVerificationPage() {
+  return (
+    <AuthLayout>
+      <VerifyEmailForm />
+      <br />
+      <span className="text-sm font-medium text-neutral-900">
+        {"If everything is okay, "}
+        <Link to="/login" className="font-semibold underline">
+          go to login
+        </Link>
+        .
+      </span>
+    </AuthLayout>
+  );
+}

package/data/Cli/starters/basic/src/auth/email/LoginPage.tsx

@@ -0,0 +1,27 @@
+import { Link } from "react-router-dom";
+import { LoginForm } from "wasp/client/auth";
+import { AuthLayout } from "../AuthLayout";
+
+export function LoginPage() {
+  return (
+    <AuthLayout>
+      <LoginForm />
+      <br />
+      <span className="text-sm font-medium text-neutral-900">
+        {"Don't have an account yet? "}
+        <Link to="/signup" className="font-semibold underline">
+          Go to signup
+        </Link>
+        .
+      </span>
+      <br />
+      <span className="text-sm font-medium text-neutral-900">
+        {"Forgot your password? "}
+        <Link to="/request-password-reset" className="font-semibold underline">
+          Reset it
+        </Link>
+        .
+      </span>
+    </AuthLayout>
+  );
+}

package/data/Cli/starters/basic/src/auth/email/PasswordResetPage.tsx

@@ -0,0 +1,19 @@
+import { Link } from "react-router-dom";
+import { ResetPasswordForm } from "wasp/client/auth";
+import { AuthLayout } from "../AuthLayout";
+
+export function PasswordResetPage() {
+  return (
+    <AuthLayout>
+      <ResetPasswordForm />
+      <br />
+      <span className="text-sm font-medium text-neutral-900">
+        {"If everything is okay, "}
+        <Link to="/login" className="font-semibold underline">
+          go to login
+        </Link>
+        .
+      </span>
+    </AuthLayout>
+  );
+}

package/data/Cli/starters/basic/src/auth/email/RequestPasswordResetPage.tsx

@@ -0,0 +1,10 @@
+import { ForgotPasswordForm } from "wasp/client/auth";
+import { AuthLayout } from "../AuthLayout";
+
+export function RequestPasswordResetPage() {
+  return (
+    <AuthLayout>
+      <ForgotPasswordForm />
+    </AuthLayout>
+  );
+}

package/data/Cli/starters/basic/src/auth/email/SignupPage.tsx

@@ -0,0 +1,34 @@
+import { Link } from "react-router-dom";
+import { SignupForm } from "wasp/client/auth";
+import { AuthLayout } from "../AuthLayout";
+
+export function SignupPage() {
+  return (
+    <AuthLayout>
+      <SignupForm
+        additionalFields={[
+          {
+            name: "username",
+            type: "input",
+            label: "Username",
+            validations: {
+              required: "Username is required",
+              minLength: {
+                value: 6,
+                message: "Username must be at least 6 characters long",
+              },
+            },
+          },
+        ]}
+      />
+      <br />
+      <span className="text-sm font-medium text-neutral-900">
+        {"Already have an account? "}
+        <Link to="/login" className="font-semibold underline">
+          Go to login
+        </Link>
+        .
+      </span>
+    </AuthLayout>
+  );
+}

package/data/Cli/starters/basic/src/auth/email/userSignupFields.ts

@@ -0,0 +1,13 @@
+import { defineUserSignupFields } from "wasp/server/auth";
+
+export const userSignupFields = defineUserSignupFields({
+  username: (data) => {
+    if (typeof data.username !== "string") {
+      throw new Error("Username is required.");
+    }
+    if (data.username.length < 6) {
+      throw new Error("Username must be at least 6 characters long.");
+    }
+    return data.username;
+  },
+});

package/data/Cli/starters/basic/src/shared/components/Button.tsx

@@ -0,0 +1,90 @@
+import { ClassNameValue, twJoin } from "tailwind-merge";
+import { Link } from "wasp/client/router";
+
+type ButtonSize = "md" | "sm" | "xs";
+type ButtonVariant = "primary" | "danger" | "ghost";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: ButtonSize;
+  variant?: ButtonVariant;
+}
+
+export function Button({
+  children,
+  className,
+  type = "button",
+  size = "md",
+  variant = "primary",
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      className={getButtonClasses({
+        size,
+        variant,
+        className,
+      })}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+type ButtonLinkProps = React.ComponentProps<typeof Link> & {
+  size?: ButtonSize;
+  variant?: ButtonVariant;
+};
+
+export function ButtonLink({
+  children,
+  className,
+  size = "md",
+  variant = "primary",
+  ...props
+}: ButtonLinkProps) {
+  return (
+    <Link
+      className={getButtonClasses({
+        size,
+        variant,
+        className,
+      })}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+}
+
+function getButtonClasses({
+  size,
+  variant,
+  className,
+}: {
+  size: ButtonSize;
+  variant: ButtonVariant;
+  className: ClassNameValue;
+}): string {
+  return twJoin(
+    "rounded-md font-semibold",
+    variantStyles[variant],
+    sizeStyles[size],
+    className,
+  );
+}
+
+const sizeStyles: Record<ButtonSize, ClassNameValue> = {
+  md: "px-4 py-2",
+  sm: "px-3 py-1.5 text-sm",
+  xs: "px-2 py-1 text-xs",
+};
+
+const variantStyles: Record<ButtonVariant, ClassNameValue> = {
+  primary:
+    "bg-primary-500 hover:bg-primary-400 active:bg-primary-300 text-neutral-800",
+  danger: "bg-red-600 text-white hover:bg-red-700 active:bg-red-800",
+  ghost:
+    "bg-transparent text-neutral-800 hover:bg-neutral-100 active:bg-neutral-200",
+};

package/data/Cli/starters/basic/src/shared/components/Dialog.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { twJoin } from "tailwind-merge";
+
+interface DialogProps extends React.PropsWithChildren {
+  open: boolean;
+  onClose: () => void;
+  closeOnClickOutside?: boolean;
+}
+
+export function Dialog({
+  open,
+  onClose,
+  children,
+  closeOnClickOutside = true,
+}: DialogProps) {
+  const dialogRef = React.useRef<HTMLDialogElement>(null);
+
+  React.useEffect(
+    function handleShowOrCloseDialog() {
+      const dialog = dialogRef.current;
+      if (!dialog) return;
+
+      if (open && !dialog.open) {
+        dialog.showModal();
+      } else if (!open && dialog.open) {
+        dialog.close();
+      }
+    },
+    [open],
+  );
+
+  React.useEffect(
+    function handleCloseOnClickOutside() {
+      if (!closeOnClickOutside) return;
+
+      const dialog = dialogRef.current;
+      if (!dialog) return;
+
+      const handleClick = (e: MouseEvent) => {
+        const rect = dialog.getBoundingClientRect();
+        const clickedOutside =
+          e.clientX < rect.left ||
+          e.clientX > rect.right ||
+          e.clientY < rect.top ||
+          e.clientY > rect.bottom;
+
+        if (clickedOutside) {
+          onClose();
+        }
+      };
+
+      dialog.addEventListener("click", handleClick);
+      return () => {
+        dialog.removeEventListener("click", handleClick);
+      };
+    },
+    [closeOnClickOutside, onClose],
+  );
+
+  React.useEffect(
+    function handlePreventScroll() {
+      if (!open) return;
+
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = originalOverflow;
+      };
+    },
+    [open],
+  );
+
+  return (
+    <dialog
+      ref={dialogRef}
+      className={twJoin(
+        "max-h top-[20vh] my-0 flex max-h-[55vh]",
+        "bg-transparent backdrop:bg-black/50 backdrop:backdrop-blur-sm",
+      )}
+      onClose={onClose}
+    >
+      {children}
+    </dialog>
+  );
+}

package/data/Cli/starters/basic/src/shared/components/Header.tsx

@@ -0,0 +1,39 @@
+import { logout, useAuth } from "wasp/client/auth";
+import { Link } from "wasp/client/router";
+import Logo from "../../assets/logo.svg";
+import { Button, ButtonLink } from "./Button";
+
+export function Header() {
+  const { data: user } = useAuth();
+
+  return (
+    <header className="sticky top-0 z-10 flex justify-center border-b border-neutral-200 bg-white shadow">
+      <div className="flex w-full max-w-screen-lg items-center justify-between p-4 px-12">
+        <Link to="/" className="flex items-center gap-2">
+          <img src={Logo} alt="Todo App Logo" className="h-10 w-10" />
+          <h1 className="text-2xl font-semibold">Todo App</h1>
+        </Link>
+        <nav>
+          <ul className="flex gap-4 font-semibold">
+            {user ? (
+              <li>
+                <Button onClick={logout}>Log out</Button>
+              </li>
+            ) : (
+              <>
+                <li>
+                  <ButtonLink to="/signup">Sign up</ButtonLink>
+                </li>
+                <li>
+                  <ButtonLink to="/login" variant="ghost">
+                    Login
+                  </ButtonLink>
+                </li>
+              </>
+            )}
+          </ul>
+        </nav>
+      </div>
+    </header>
+  );
+}