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

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { ControllerFieldState } from "react-hook-form";
+import { twJoin } from "tailwind-merge";
+
+interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "id"> {
+  label: string;
+  fieldState: ControllerFieldState;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  function Input({ className, label, fieldState, ...props }, ref) {
+    const id = React.useId();
+    return (
+      <div className="flex flex-col gap-1">
+        <label htmlFor={id} className="label">
+          {label}
+        </label>
+        <input
+          id={id}
+          className={twJoin(
+            "w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-neutral-800 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500",
+            className,
+          )}
+          {...props}
+          ref={ref}
+        />
+        {fieldState.error && (
+          <span className="text-sm text-red-500">
+            {fieldState.error.message}
+          </span>
+        )}
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,26 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+interface PortalProps extends React.HTMLAttributes<HTMLDivElement> {
+  container?: Element | null;
+}
+
+/**
+ * Inspired by Radix UI's Portal component.
+ * @see https://github.com/radix-ui/primitives/blob/main/packages/react/portal/src/portal.tsx
+ */
+export const Portal = React.forwardRef<HTMLDivElement, PortalProps>(
+  function Portal({ container: containerProp, ...portalProps }, forwardRef) {
+    const [mounted, setMounted] = React.useState(false);
+    React.useLayoutEffect(() => setMounted(true), []);
+
+    const container = containerProp || (mounted && globalThis?.document?.body);
+
+    return container
+      ? ReactDOM.createPortal(
+          <div {...portalProps} ref={forwardRef} />,
+          container,
+        )
+      : null;
+  },
+);

package/data/Cli/starters/basic/src/tags/actions.ts

@@ -0,0 +1,23 @@
+import { Tag } from "wasp/entities";
+import { HttpError } from "wasp/server";
+import { CreateTag } from "wasp/server/operations";
+
+type CreateTagArgs = Pick<Tag, "name" | "color">;
+
+export const createTag: CreateTag<CreateTagArgs, Tag> = (tag, context) => {
+  if (!context.user) {
+    throw new HttpError(401);
+  }
+
+  return context.entities.Tag.create({
+    data: {
+      name: tag.name,
+      color: tag.color,
+      user: {
+        connect: {
+          id: context.user.id,
+        },
+      },
+    },
+  });
+};

package/data/Cli/starters/basic/src/tags/components/ColorRadioButton.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { twJoin } from "tailwind-merge";
+
+interface ColorRadioButtonProps
+  extends Required<
+    Pick<
+      React.InputHTMLAttributes<HTMLInputElement>,
+      "name" | "checked" | "value" | "onChange" | "title"
+    >
+  > {
+  bgColor: string;
+}
+
+export function ColorRadioButton({
+  checked,
+  bgColor,
+  title,
+  ...props
+}: ColorRadioButtonProps) {
+  const id = React.useId();
+
+  return (
+    <div className="relative flex items-center">
+      <label
+        htmlFor={id}
+        className={twJoin(
+          "duration-500-sm flex h-8 w-8 cursor-pointer items-center justify-center rounded-full drop-shadow-lg transition-all",
+          "hover:scale-105 hover:ring-[1px] hover:ring-black",
+          checked && "scale-105 ring-[1px] ring-black",
+        )}
+        style={{ background: bgColor }}
+        title={title}
+      >
+        <input
+          type="radio"
+          className="hidden"
+          id={id}
+          checked={checked}
+          {...props}
+        />
+      </label>
+    </div>
+  );
+}

package/data/Cli/starters/basic/src/tags/components/ColorRadioButtons.tsx

@@ -0,0 +1,59 @@
+import { ColorRadioButton } from "./ColorRadioButton";
+import { generateBrightColor } from "./colors";
+
+interface ColorRadioButtonsProps {
+  color: string;
+  setColor: (color: string) => void;
+}
+
+export function ColorRadioButtons({ color, setColor }: ColorRadioButtonsProps) {
+  const randomColor = generateBrightColor();
+
+  return (
+    <fieldset className="space-y-1">
+      <legend className="label">Color</legend>
+      <div className="mt-1 flex flex-wrap gap-2">
+        <ColorRadioButton
+          name="color"
+          value={randomColor}
+          checked={!staticColors.includes(color)}
+          onChange={() => setColor(randomColor)}
+          title="Random"
+          bgColor={`conic-gradient(
+              hsl(360 100% 50%),
+              hsl(315 100% 50%),
+              hsl(270 100% 50%),
+              hsl(225 100% 50%),
+              hsl(180 100% 50%),
+              hsl(135 100% 50%),
+              hsl(90 100% 50%),
+              hsl(45 100% 50%),
+              hsl(0 100% 50%)
+            )`}
+        />
+        {staticColors.map((staticColor, index) => (
+          <ColorRadioButton
+            key={staticColor}
+            name="color"
+            value={staticColor}
+            checked={color === staticColor}
+            onChange={() => setColor(staticColor)}
+            title={`Color ${index + 1}`}
+            bgColor={staticColor}
+          />
+        ))}
+      </div>
+    </fieldset>
+  );
+}
+
+const staticColors = generateBrightColors();
+
+function generateBrightColors(): string[] {
+  const colors: string[] = [];
+  for (let hue = 0; hue < 360; hue += 20) {
+    const hslColor = generateBrightColor(hue);
+    colors.push(hslColor);
+  }
+  return colors;
+}

package/data/Cli/starters/basic/src/tags/components/CreateTagDialog.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { Button } from "../../shared/components/Button";
+import { Dialog } from "../../shared/components/Dialog";
+import { Portal } from "../../shared/components/Portal";
+import { CREATE_TAG_FORM_ID, CreateTagForm } from "./CreateTagForm";
+
+export function CreateTagDialog() {
+  const [tagDialogOpen, setTagDialogOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button
+        className="flex items-center gap-2"
+        type="button"
+        size="sm"
+        onClick={() => setTagDialogOpen(true)}
+      >
+        <span>Add a Tag</span>
+        <span>+</span>
+      </Button>
+      {tagDialogOpen && (
+        <Portal>
+          <Dialog open={tagDialogOpen} onClose={() => setTagDialogOpen(false)}>
+            <section className="card relative flex flex-col">
+              <header className="px-4 py-6 lg:px-6 lg:py-8">
+                <h2 className="text-xl font-semibold">Create a new tag</h2>
+              </header>
+              <div className="overflow-y-auto p-4 lg:p-6">
+                <CreateTagForm onTagCreated={() => setTagDialogOpen(false)} />
+              </div>
+              <footer className="flex justify-end gap-2 px-4 py-6 lg:px-6 lg:py-8">
+                <Button form={CREATE_TAG_FORM_ID} type="submit">
+                  Create
+                </Button>
+                <Button
+                  form={CREATE_TAG_FORM_ID}
+                  type="button"
+                  onClick={() => setTagDialogOpen(false)}
+                  variant="ghost"
+                >
+                  Cancel
+                </Button>
+              </footer>
+            </section>
+          </Dialog>
+        </Portal>
+      )}
+    </>
+  );
+}

package/data/Cli/starters/basic/src/tags/components/CreateTagForm.tsx

@@ -0,0 +1,100 @@
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
+import { createTag } from "wasp/client/operations";
+import { Input } from "../../shared/components/Input";
+import { ColorRadioButtons } from "./ColorRadioButtons";
+import { generateBrightColor } from "./colors";
+import { TagLabel } from "./TagLabel";
+
+interface CreateTagFormProps {
+  onTagCreated: () => void;
+}
+
+interface CreateTagFormValues {
+  name: string;
+  color: string;
+}
+
+export const CREATE_TAG_FORM_ID = "create-tag";
+
+export function CreateTagForm({ onTagCreated }: CreateTagFormProps) {
+  const { handleSubmit, setValue, watch, control, reset } =
+    useForm<CreateTagFormValues>({
+      defaultValues: {
+        name: "",
+        color: generateBrightColor(),
+      },
+    });
+
+  const onSubmit: SubmitHandler<CreateTagFormValues> = async (data) => {
+    try {
+      await createTag(data);
+      onTagCreated();
+    } catch (err: unknown) {
+      window.alert(`Error while creating tag: ${String(err)}`);
+    } finally {
+      reset();
+    }
+  };
+
+  const [name, color] = watch(["name", "color"]);
+
+  return (
+    <form
+      id={CREATE_TAG_FORM_ID}
+      onSubmit={stopPropagate(handleSubmit(onSubmit))}
+      className="flex flex-col gap-6"
+    >
+      <Controller
+        name="name"
+        control={control}
+        rules={{
+          required: { value: true, message: "Name is required" },
+        }}
+        render={({ field, fieldState }) => (
+          <Input
+            label="Name"
+            placeholder="Enter tag name"
+            fieldState={fieldState}
+            {...field}
+          />
+        )}
+      />
+      <ColorRadioButtons
+        color={color}
+        setColor={(color) => setValue("color", color)}
+      />
+      {name && (
+        <div className="flex flex-col gap-2">
+          <span className="label">Preview</span>
+          <div className="flex flex-wrap gap-2">
+            <TagLabel
+              tag={{ id: "", name, color }}
+              isActive={true}
+              showColorCircle
+            />
+            <TagLabel
+              tag={{ id: "", name, color }}
+              isActive={false}
+              showColorCircle
+            />
+          </div>
+        </div>
+      )}
+    </form>
+  );
+}
+
+/**
+ * Calling `stopPropagation()` on `SubmitHandler`'s event does not stop the propagation properly.
+ * So we use this wrapper instead.
+ *
+ * @see https://github.com/react-hook-form/documentation/issues/916
+ */
+function stopPropagate(
+  callback: (event: React.FormEvent<HTMLFormElement>) => void,
+) {
+  return (e: React.FormEvent<HTMLFormElement>) => {
+    e.stopPropagation();
+    callback(e);
+  };
+}

package/data/Cli/starters/basic/src/tags/components/TagLabel.tsx

@@ -0,0 +1,55 @@
+import { ClassNameValue, twJoin } from "tailwind-merge";
+import { Tag } from "wasp/entities";
+
+type TagLabelSize = "md" | "sm" | "tiny";
+
+interface TagLabelProps {
+  tag: Pick<Tag, "id" | "color" | "name">;
+  isActive: boolean;
+  size?: TagLabelSize;
+  showColorCircle?: boolean;
+}
+
+export function TagLabel({
+  tag,
+  isActive,
+  size = "md",
+  showColorCircle = false,
+}: TagLabelProps) {
+  return (
+    <span
+      className={twJoin(
+        "inline-flex items-center gap-1 rounded-full border-2 border-neutral-200 font-mono font-semibold",
+        sizeStyles[size],
+      )}
+      style={{
+        backgroundColor: isActive ? tag.color : "transparent",
+      }}
+    >
+      {tag.name}
+      {showColorCircle && (
+        <span
+          className={twJoin(
+            "relative rounded-full border-2 border-neutral-300 bg-white",
+            colorCircleSizeStyles[size],
+          )}
+          style={{
+            backgroundColor: isActive ? undefined : tag.color,
+          }}
+        />
+      )}
+    </span>
+  );
+}
+
+const sizeStyles: Record<TagLabelSize, ClassNameValue> = {
+  md: "px-4 py-1.5 text-sm",
+  sm: "px-3 py-1 text-xs",
+  tiny: "px-2 py-0.5 text-xs",
+};
+
+const colorCircleSizeStyles: Record<TagLabelSize, ClassNameValue> = {
+  md: "h-3 w-3 -right-2",
+  sm: "h-2 w-2 -right-1",
+  tiny: "h-1.5 w-1.5 -right-0.5",
+};

package/data/Cli/starters/basic/src/tags/components/colors.ts

@@ -0,0 +1,8 @@
+export function generateBrightColor(
+  hue = Math.floor(Math.random() * 360),
+): string {
+  const saturation = 90;
+  const lightness = 80;
+
+  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+}

package/data/Cli/starters/basic/src/tags/queries.ts

@@ -0,0 +1,14 @@
+import { Tag } from "wasp/entities";
+import { HttpError } from "wasp/server";
+import { type GetTags } from "wasp/server/operations";
+
+export const getTags: GetTags<void, Tag[]> = (_, context) => {
+  if (!context.user) {
+    throw new HttpError(401);
+  }
+
+  return context.entities.Tag.findMany({
+    where: { user: { id: context.user.id } },
+    orderBy: { name: "asc" },
+  });
+};

package/data/Cli/starters/basic/src/tasks/TasksPage.tsx

@@ -0,0 +1,19 @@
+import { type AuthUser } from "wasp/auth";
+import { CreateTaskForm } from "./components/CreateTaskForm";
+import { TaskList } from "./components/TaskList";
+
+export const TasksPage = ({ user }: { user: AuthUser }) => {
+  return (
+    <div className="flex flex-col items-center gap-8 px-8 py-12">
+      <h1 className="text-4xl font-bold">{`${user.username}'s tasks`}</h1>
+      <div className="flex w-full flex-col items-center gap-6">
+        <section className="card flex w-full max-w-3xl flex-col gap-6 p-4 lg:p-6">
+          <CreateTaskForm />
+        </section>
+        <section className="card flex w-full max-w-3xl flex-col gap-6 p-4 lg:p-6">
+          <TaskList />
+        </section>
+      </div>
+    </div>
+  );
+};

package/data/Cli/starters/basic/src/tasks/actions.ts

@@ -0,0 +1,71 @@
+import { type Tag, type Task } from "wasp/entities";
+import { HttpError } from "wasp/server";
+import {
+  DeleteCompletedTasks,
+  type CreateTask,
+  type UpdateTaskStatus,
+} from "wasp/server/operations";
+
+type CreateTaskArgs = Pick<Task, "description"> & {
+  tagIds: Tag["id"][];
+};
+
+export const createTask: CreateTask<CreateTaskArgs, Task> = async (
+  { description, tagIds },
+  context,
+) => {
+  if (!context.user) {
+    throw new HttpError(401);
+  }
+
+  return context.entities.Task.create({
+    data: {
+      description,
+      isDone: false,
+      user: {
+        connect: {
+          id: context.user.id,
+        },
+      },
+      tags: {
+        connect: tagIds.map((tag) => ({
+          id: tag,
+        })),
+      },
+    },
+  });
+};
+
+type UpdateTaskStatusArgs = Pick<Task, "id" | "isDone">;
+
+export const updateTaskStatus: UpdateTaskStatus<UpdateTaskStatusArgs> = async (
+  { id, isDone },
+  context,
+) => {
+  if (!context.user) {
+    throw new HttpError(401);
+  }
+
+  return context.entities.Task.update({
+    where: {
+      id,
+    },
+    data: { isDone },
+  });
+};
+
+export const deleteCompletedTasks: DeleteCompletedTasks = async (
+  _args,
+  context,
+) => {
+  if (!context.user) {
+    throw new HttpError(401);
+  }
+
+  return context.entities.Task.deleteMany({
+    where: {
+      userId: context.user.id,
+      isDone: true,
+    },
+  });
+};

package/data/Cli/starters/basic/src/tasks/components/CreateTaskForm.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
+import { createTask, getTags, useQuery } from "wasp/client/operations";
+import { Tag } from "wasp/entities";
+import { Button } from "../../shared/components/Button";
+import { Input } from "../../shared/components/Input";
+import { CreateTagDialog } from "../../tags/components/CreateTagDialog";
+import { TagLabel } from "../../tags/components/TagLabel";
+
+interface CreateTaskFormValues {
+  description: string;
+  tagIds: string[];
+}
+
+export function CreateTaskForm() {
+  const { data: tags } = useQuery(getTags);
+  const { handleSubmit, getValues, setValue, watch, control, reset } =
+    useForm<CreateTaskFormValues>({
+      defaultValues: {
+        description: "",
+        tagIds: [],
+      },
+    });
+
+  const onSubmit: SubmitHandler<CreateTaskFormValues> = async (data, event) => {
+    event?.stopPropagation();
+
+    try {
+      await createTask(data);
+    } catch (err: unknown) {
+      window.alert(`Error while creating task: ${String(err)}`);
+    } finally {
+      reset();
+    }
+  };
+
+  const toggleTag = React.useCallback(
+    function toggleTag(id: Tag["id"]) {
+      const tagIds = getValues("tagIds");
+      if (tagIds.includes(id)) {
+        setValue(
+          "tagIds",
+          tagIds.filter((tagId) => tagId !== id),
+        );
+      } else {
+        setValue("tagIds", [...tagIds, id]);
+      }
+    },
+    [getValues, setValue],
+  );
+
+  const tagIds = watch("tagIds");
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="flex w-full flex-col gap-6"
+      id="create-task"
+    >
+      <h2 className="text-xl font-semibold">Create a new task</h2>
+      <Controller
+        name="description"
+        control={control}
+        rules={{
+          required: { value: true, message: "Description is required" },
+        }}
+        render={({ field, fieldState }) => (
+          <Input
+            label="Description"
+            placeholder="What do I need to do?"
+            fieldState={fieldState}
+            {...field}
+          />
+        )}
+      />
+
+      <div className="flex flex-col gap-2">
+        <span className="label">Select tags</span>
+        <div className="flex flex-wrap gap-4">
+          {tags && tags.length > 0 && (
+            <ul className="flex flex-wrap gap-2">
+              {tags.map((tag) => (
+                <li key={tag.id}>
+                  <button type="button" onClick={() => toggleTag(tag.id)}>
+                    <TagLabel
+                      tag={tag}
+                      isActive={tagIds.includes(tag.id)}
+                      showColorCircle
+                    />
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+          <CreateTagDialog />
+        </div>
+      </div>
+      <Button type="submit" className="self-end">
+        Create
+      </Button>
+    </form>
+  );
+}

package/data/Cli/starters/basic/src/tasks/components/TaskList.tsx

@@ -0,0 +1,68 @@
+import {
+  deleteCompletedTasks,
+  getTasks,
+  useQuery,
+} from "wasp/client/operations";
+import { Button } from "../../shared/components/Button";
+import { TaskListItem } from "./TaskListItem";
+
+export function TaskList() {
+  const { data: tasks, isLoading, isSuccess } = useQuery(getTasks);
+
+  if (isLoading) {
+    return <p>Loading...</p>;
+  }
+
+  if (!isSuccess) {
+    return <p className="text-red-500">Error loading tasks.</p>;
+  }
+
+  const completedTasks = tasks.filter((task) => task.isDone);
+
+  async function handleDeleteCompletedTasks() {
+    try {
+      await deleteCompletedTasks();
+    } catch (err: unknown) {
+      window.alert(`Error while deleting tasks: ${String(err)}`);
+    }
+  }
+
+  if (tasks.length === 0) {
+    return <p className="text-neutral-500">No tasks found.</p>;
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <ul className="flex flex-col gap-2">
+        {tasks.map((task) => (
+          <TaskListItem task={task} key={task.id} />
+        ))}
+      </ul>
+      <div className="flex h-5 items-center justify-between">
+        <div className="text-sm text-neutral-500">
+          <span>
+            {tasks.length} {tasks.length === 1 ? "task" : "tasks"}
+          </span>
+          <span className="mx-2">·</span>
+          <span>{completedTasks.length} completed</span>
+        </div>
+        {completedTasks.length > 0 && (
+          <Button
+            className="flex items-center gap-2"
+            size="sm"
+            onClick={handleDeleteCompletedTasks}
+          >
+            Clear completed
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 -960 960 960"
+              className="size-5 fill-black"
+            >
+              <path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z" />
+            </svg>
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}