create-weave-frontend-app 0.1.0

package/template/+nextjs+websockets/components/actions/align-elements-tool/align-elements-tool.ts

@@ -0,0 +1,94 @@
+import { WeaveAction } from '@inditextech/weave-sdk';
+import { WeaveElementInstance, WeaveSelection } from '@inditextech/weave-types';
+import Konva from 'konva';
+
+export class AlignElementsToolAction extends WeaveAction {
+  protected cancelAction!: () => void;
+  internalUpdate = undefined;
+  init = undefined;
+
+  getName(): string {
+    return 'alignElementsTool';
+  }
+
+  private alignElements(nodes: WeaveSelection[], gap: number) {
+    if (nodes.length === 0) {
+      this.cancelAction?.();
+      return;
+    }
+
+    const instances: Konva.Node[] = [];
+    let actualType: string | undefined = nodes[0].node.type;
+    for (const node of nodes) {
+      if (node.instance.getAttrs().nodeType === actualType) {
+        instances.push(node.instance);
+      }
+      if (node.instance.getAttrs().nodeType !== actualType) {
+        actualType = undefined;
+        break;
+      }
+    }
+
+    if (!actualType) {
+      this.cancelAction?.();
+      return;
+    }
+
+    let y: number | undefined = undefined;
+    let prevInstance: Konva.Node | undefined = undefined;
+    for (const [index, instance] of instances.entries()) {
+      if (index === 0) {
+        prevInstance = instance;
+        y = instance.y();
+        continue;
+      }
+
+      if (prevInstance) {
+        const handler = this.instance.getNodeHandler(
+          instance.getAttrs().nodeType
+        );
+        const node = handler.toNode(instance as WeaveElementInstance);
+
+        const newNode = {
+          ...node,
+          props: {
+            ...node.props,
+            x: (prevInstance.x() ?? 0) + (prevInstance.width() ?? 0) + gap,
+            y,
+          },
+        };
+
+        instance.setAttrs({
+          x: (prevInstance.x() ?? 0) + (prevInstance.width() ?? 0) + gap,
+          y,
+        });
+
+        this.instance.updateNode(newNode);
+
+        prevInstance = instance;
+      }
+    }
+
+    this.cancelAction?.();
+  }
+
+  trigger(
+    cancelAction: () => void,
+    { gap = 20, nodes }: { gap: number; nodes: WeaveSelection[] }
+  ) {
+    if (!this.instance) {
+      throw new Error('Instance not defined');
+    }
+
+    const stage = this.instance.getStage();
+
+    stage.container().tabIndex = 1;
+    stage.container().focus();
+
+    this.cancelAction = cancelAction;
+
+    this.alignElements(nodes, gap);
+  }
+
+  cleanup() {}
+}

package/template/+nextjs+websockets/components/actions/color-token-tool/color-token-tool.ts

@@ -0,0 +1,164 @@
+import { v4 as uuidv4 } from 'uuid';
+import { Vector2d } from 'konva/lib/types';
+import {
+  ColorTokenToolCallbacks,
+  ColorTokenToolActionState,
+  ColorTokenToolActionTriggerParams,
+} from './types';
+import { COLOR_TOKEN_TOOL_STATE } from './constants';
+import { WeaveAction, WeaveNodesSelectionPlugin } from '@inditextech/weave-sdk';
+import Konva from 'konva';
+
+export class ColorTokenToolAction extends WeaveAction {
+  protected initialized: boolean = false;
+  protected state: ColorTokenToolActionState;
+  protected colorTokenId: string | null;
+  protected container: Konva.Layer | Konva.Group | undefined;
+  protected clickPoint: Vector2d | null;
+  protected cancelAction!: () => void;
+  internalUpdate = undefined;
+
+  constructor(callbacks: ColorTokenToolCallbacks) {
+    super(callbacks);
+
+    this.initialized = false;
+    this.state = COLOR_TOKEN_TOOL_STATE.IDLE;
+    this.colorTokenId = null;
+    this.container = undefined;
+    this.clickPoint = null;
+  }
+
+  getName(): string {
+    return 'colorTokenTool';
+  }
+
+  initProps() {
+    return {
+      colorToken: '#000000',
+      width: 300,
+      height: 300,
+      opacity: 1,
+    };
+  }
+
+  init() {
+    this.instance.addEventListener('onStageDrop', () => {
+      if (window.colorTokenDragColor) {
+        this.instance.triggerAction('colorTokenTool', {
+          color: window.colorTokenDragColor,
+        });
+        window.colorTokenDragColor = undefined;
+      }
+    });
+  }
+
+  private setupEvents() {
+    const stage = this.instance.getStage();
+
+    stage.container().addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        this.cancelAction();
+        return;
+      }
+    });
+
+    stage.on('click tap', (e) => {
+      e.evt.preventDefault();
+
+      if (this.state === COLOR_TOKEN_TOOL_STATE.IDLE) {
+        return;
+      }
+
+      if (this.state === COLOR_TOKEN_TOOL_STATE.ADDING) {
+        this.handleAdding();
+        return;
+      }
+    });
+
+    this.initialized = true;
+  }
+
+  private setState(state: ColorTokenToolActionState) {
+    this.state = state;
+  }
+
+  private addColorToken() {
+    const stage = this.instance.getStage();
+
+    stage.container().style.cursor = 'crosshair';
+    stage.container().focus();
+
+    this.colorTokenId = null;
+    this.clickPoint = null;
+    this.setState(COLOR_TOKEN_TOOL_STATE.ADDING);
+  }
+
+  private handleAdding() {
+    const { mousePoint, container } = this.instance.getMousePointer();
+
+    this.clickPoint = mousePoint;
+    this.container = container;
+
+    this.colorTokenId = uuidv4();
+
+    const nodeHandler = this.instance.getNodeHandler('color-token');
+
+    const node = nodeHandler.createNode(this.colorTokenId, {
+      ...this.props,
+      x: this.clickPoint.x,
+      y: this.clickPoint.y,
+    });
+
+    this.instance.addNode(node, this.container?.getAttrs().id);
+
+    this.cancelAction?.();
+  }
+
+  trigger(
+    cancelAction: () => void,
+    params?: ColorTokenToolActionTriggerParams
+  ) {
+    if (!this.instance) {
+      throw new Error('Instance not defined');
+    }
+
+    if (!this.initialized) {
+      this.setupEvents();
+    }
+    const stage = this.instance.getStage();
+
+    stage.container().tabIndex = 1;
+    stage.container().focus();
+
+    this.cancelAction = cancelAction;
+
+    this.props = this.initProps();
+
+    if (params?.color) {
+      this.props.colorToken = params.color;
+    }
+
+    this.addColorToken();
+  }
+
+  cleanup() {
+    const stage = this.instance.getStage();
+
+    stage.container().style.cursor = 'default';
+
+    const selectionPlugin =
+      this.instance.getPlugin<WeaveNodesSelectionPlugin>('nodesSelection');
+    if (selectionPlugin) {
+      const node = stage.findOne(`#${this.colorTokenId}`);
+      if (node) {
+        selectionPlugin.setSelectedNodes([node]);
+      }
+      this.instance.triggerAction('selectionTool');
+    }
+
+    this.colorTokenId = null;
+    this.container = undefined;
+    this.clickPoint = null;
+    this.setState(COLOR_TOKEN_TOOL_STATE.IDLE);
+  }
+}

package/template/+nextjs+websockets/components/actions/color-token-tool/constants.ts

@@ -0,0 +1,5 @@
+export const COLOR_TOKEN_TOOL_STATE = {
+  ['IDLE']: 'idle',
+  ['ADDING']: 'adding',
+  ['ADDED']: 'added',
+} as const;

package/template/+nextjs+websockets/components/actions/color-token-tool/types.ts

@@ -0,0 +1,12 @@
+import { WeaveActionCallbacks } from '@inditextech/weave-sdk';
+import { COLOR_TOKEN_TOOL_STATE } from './constants';
+
+export type ColorTokenToolActionStateKeys = keyof typeof COLOR_TOKEN_TOOL_STATE;
+export type ColorTokenToolActionState =
+  (typeof COLOR_TOKEN_TOOL_STATE)[ColorTokenToolActionStateKeys];
+
+export type ColorTokenToolCallbacks = WeaveActionCallbacks;
+
+export type ColorTokenToolActionTriggerParams = {
+  color?: string;
+};

package/template/+nextjs+websockets/components/error/error.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import Link from "next/link";
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { AlertCircle } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card";
+import { Logo } from "@/components/utils/logo";
+import { useSearchParams } from "next/navigation";
+import { getError } from "./errors";
+
+export const Error = () => {
+  const searchParams = useSearchParams();
+
+  const errorCode = searchParams.get("errorCode");
+
+  const { description, action, href } = getError(errorCode || "");
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-background relative">
+      <div className="absolute left-8 top-8 text-lg font-semibold text-primary">
+        <h1 className="text-4xl font-noto-sans-mono font-extralight text-foreground uppercase">
+          Whiteboard
+        </h1>
+        <h2 className="text-2xl font-noto-sans-mono font-extralight text-muted-foreground uppercase">
+          Error
+        </h2>
+      </div>
+      <div className="absolute left-8 bottom-8 text-lg font-semibold text-primary">
+        <Logo />
+      </div>
+
+      <Card className="mx-auto max-w-md shadow-lg border-0 shadow-none">
+        <CardHeader className="flex flex-col items-center text-center">
+          <div className="mb-4 rounded-full bg-destructive/10 p-3">
+            <AlertCircle className="h-10 w-10 text-destructive" />
+          </div>
+          <h3 className="text-xl font-noto-sans font-extralight">
+            An error has occurred
+          </h3>
+        </CardHeader>
+
+        <CardContent className="text-center">
+          <p>
+            <span className="text-sm font-noto-sans-mono">{description}</span>
+          </p>
+        </CardContent>
+
+        <CardFooter className="flex flex-col mt-3">
+          <Button asChild className="w-full font-noto-sans-mono uppercase">
+            <Link href={href}>{action}</Link>
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+};

package/template/+nextjs+websockets/components/error/errors.ts

@@ -0,0 +1,35 @@
+const errors = {
+  "room-required-parameters": {
+    description: "No room or username defined.",
+    action: "Back to Home",
+    href: "/",
+  },
+  "room-failed-connection": {
+    description: "Failed to obtain the room connection endpoint.",
+    action: "Back to Home",
+    href: "/",
+  },
+};
+
+type CommonErrors = {
+  [key: string]: {
+    description: string;
+    action: string;
+    href: string;
+  };
+};
+
+const COMMON_ERRORS: CommonErrors = {
+  "room-required-parameters": errors["room-required-parameters"],
+  "room-failed-connection": errors["room-failed-connection"],
+};
+
+export const getError = (errorCode: string) => {
+  return (
+    COMMON_ERRORS[errorCode] || {
+      description: "An unknown error occurred.",
+      action: "Back to Home",
+      href: "/",
+    }
+  );
+};

package/template/+nextjs+websockets/components/home/home.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import React from "react";
+import { Toaster } from "@/components/ui/sonner";
+import { motion } from "motion/react";
+import { Logo } from "@/components/utils/logo";
+import LoginForm from "../home-components/login-form";
+import Dither from "../ui/reactbits/Backgrounds/Dither/Dither";
+import RotatingText from "../ui/reactbits/TextAnimations/RotatingText/RotatingText";
+
+export const Home = () => {
+  return (
+    <>
+      <main className="w-full h-full grid grid-cols-2">
+        <motion.section
+          initial={{ opacity: 0, x: -20 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.5 }}
+          className="relative flex h-full w-full flex-col items-center justify-center p-6"
+        >
+          <div className="absolute left-6 top-6 flex flex-col gap-2 md:left-8 md:top-8">
+            <motion.div
+              initial={{ opacity: 0, y: -20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 0.2 }}
+              className="flex flex-col items-start justify-start bg-background"
+            >
+              <h1 className="text-5xl font-noto-sans-mono font-extralight text-foreground uppercase">
+                WHITEBOARD
+              </h1>
+              <h2 className="text-3xl font-noto-sans-mono font-extralight text-muted-foreground uppercase mb-8">
+                SHOWCASE
+              </h2>
+            </motion.div>
+          </div>
+          <h3 className="text-2xl font-noto-sans-mono font-extralight text-muted-foreground uppercase mb-8">
+            Join a Room
+          </h3>
+          <LoginForm />
+          <div className="absolute bottom-8 left-8 flex flex-col gap-5 justify-center items-center">
+            <div className="p-0 bg-light-background-1 flex justify-start items-center gap-2">
+              <Logo />
+            </div>
+          </div>
+        </motion.section>
+        <motion.aside
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.8 }}
+          className="relative items-center justify-center bg-muted"
+        >
+          <Dither
+            waveColor={[0.5, 0.5, 0.5]}
+            disableAnimation={false}
+            enableMouseInteraction={false}
+            mouseRadius={0.3}
+            colorNum={6}
+            pixelSize={1}
+            waveAmplitude={0.1}
+            waveFrequency={6}
+            waveSpeed={0.05}
+          />
+          <div className="absolute top-0 left-0 right-0 bottom-0 flex gap-3 justify-center items-center">
+            <div className="font-noto-sans-mono bg-transparent text-black p-3 rounded-lg text-4xl">
+              Weave.js is
+            </div>
+            <RotatingText
+              texts={[
+                "collaborative",
+                "easy to use",
+                "extensible",
+                "flexible",
+                "open source",
+              ]}
+              mainClassName="font-noto-sans-mono p-3 bg-orange-400/50 text-black overflow-hidden justify-center rounded-lg text-4xl"
+              staggerFrom={"last"}
+              initial={{ y: "100%" }}
+              animate={{ y: 0 }}
+              exit={{ y: "-120%" }}
+              staggerDuration={0.025}
+              splitBy="characters"
+              splitLevelClassName="overflow-hidden pb-0.5 sm:pb-1 md:pb-1"
+              transition={{ type: "spring", damping: 30, stiffness: 400 }}
+              rotationInterval={2000}
+            />
+          </div>
+        </motion.aside>
+      </main>
+      <Toaster />
+    </>
+  );
+};

package/template/+nextjs+websockets/components/home-components/home-showcase-animation.tsx

@@ -0,0 +1,119 @@
+"use client"
+
+import type React from "react"
+import { motion } from "framer-motion"
+
+const draw = {
+  hidden: { pathLength: 0, opacity: 0 },
+  visible: (i: number) => {
+    const delay = 1 + i * 0.5
+    return {
+      pathLength: 1,
+      opacity: 1,
+      transition: {
+        pathLength: { delay, type: "spring", duration: 1.5, bounce: 0 },
+        opacity: { delay, duration: 0.01 },
+      },
+    }
+  },
+}
+
+export const HomeShowCaseAnimation: React.FC = () => {
+  return (
+    <motion.svg
+      width="600"
+      height="600"
+      viewBox="0 0 600 600"
+      initial="hidden"
+      animate="visible"
+      className="max-w-full h-auto"
+    >
+      <motion.rect x="50" y="50" width="500" height="500" rx="30" fill="#f0f0f0" stroke="#e0e0e0" strokeWidth="5" />
+
+      <motion.path
+        d="M150 400 Q150 300 300 200 Q450 300 450 400 L450 400 Q450 420 430 420 L170 420 Q150 420 150 400 Z"
+        stroke="#ff6b6b"
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+        variants={draw}
+        custom={0}
+      />
+      <motion.path
+        d="M250 420 L250 340 Q250 320 270 320 L330 320 Q350 320 350 340 L350 420"
+        stroke="#ff6b6b"
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+        variants={draw}
+        custom={1}
+      />
+
+      <motion.path
+        d="M380 180 Q410 140 450 160 Q490 160 490 200 Q490 240 450 240 Q430 270 390 240 Q350 240 350 200 Q350 160 380 180 Z"
+        stroke="#4ecdc4"
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+        variants={draw}
+        custom={2}
+      />
+
+      <motion.path
+        d="M120 450 Q120 380 150 380 Q180 380 180 450 M150 380 Q120 340 150 300 Q180 340 150 380"
+        stroke="#45b7d1"
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+        variants={draw}
+        custom={3}
+      />
+      <motion.path
+        d="M470 450 Q470 380 500 380 Q530 380 530 450 M500 380 Q470 340 500 300 Q530 340 500 380"
+        stroke="#45b7d1"
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+        variants={draw}
+        custom={4}
+      />
+
+      <motion.circle
+        cx="200"
+        cy="200"
+        r="5"
+        fill="#ff6b6b"
+        animate={{
+          x: [0, 100, 0],
+          y: [0, 50, 0],
+        }}
+        transition={{
+          duration: 5,
+          repeat: Number.POSITIVE_INFINITY,
+          repeatType: "reverse",
+        }}
+      />
+      <motion.circle
+        cx="400"
+        cy="400"
+        r="5"
+        fill="#4ecdc4"
+        animate={{
+          x: [0, -50, 0],
+          y: [0, -100, 0],
+        }}
+        transition={{
+          duration: 4,
+          repeat: Number.POSITIVE_INFINITY,
+          repeatType: "reverse",
+        }}
+      />
+    </motion.svg>
+  )
+}
+

package/template/+nextjs+websockets/components/home-components/login-form.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import React from "react";
+import { motion } from "motion/react";
+import { useRouter } from "next/navigation";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { useCollaborationRoom } from "@/store/store";
+
+const formSchema = z
+  .object({
+    username: z
+      .string()
+      .trim()
+      .min(1, { message: "The username is required" })
+      .max(50, { message: "The username must be maximum 50 characters long" }),
+    roomId: z
+      .string()
+      .trim()
+      .min(1, { message: "The room name is required" })
+      .max(50, { message: "The room name must be maximum 50 characters long" }),
+  })
+  .required();
+
+function LoginForm() {
+  const router = useRouter();
+
+  const setRoom = useCollaborationRoom((state) => state.setRoom);
+  const setUser = useCollaborationRoom((state) => state.setUser);
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      username: "",
+      roomId: "",
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    setRoom(values.roomId);
+    setUser({
+      name: values.username,
+      email: `${values.username}@weavejs.com`,
+    });
+    router.push(`/room/${values.roomId}?userName=${values.username}`);
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.95 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.5, delay: 0.4 }}
+      className="w-full max-w-md"
+    >
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="w-full space-y-5"
+        >
+          <FormField
+            control={form.control}
+            name="roomId"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="font-noto-sans-mono">ROOM</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="the room name to join"
+                    className="font-noto-sans-mono rounded-none shadow-none"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="username"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="font-noto-sans-mono">USERNAME</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="your username"
+                    className="font-noto-sans-mono rounded-none shadow-none"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <Button
+            type="submit"
+            className="w-full cursor-pointer font-mono rounded-none"
+          >
+            ENTER THE ROOM
+          </Button>
+        </form>
+      </Form>
+    </motion.div>
+  );
+}
+
+export default LoginForm;