create-weave-frontend-app 0.1.0

package/template/+nextjs+azure-web-pubsub/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+azure-web-pubsub/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+azure-web-pubsub/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+azure-web-pubsub/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;

package/template/+nextjs+azure-web-pubsub/components/nodes/color-token/color-token.ts

@@ -0,0 +1,171 @@
+import { WeaveNode } from '@inditextech/weave-sdk';
+import {
+  WeaveElementAttributes,
+  WeaveElementInstance,
+} from '@inditextech/weave-types';
+import Konva from 'konva';
+import { Noto_Sans_Mono } from 'next/font/google';
+
+export const COLOR_TOKEN_NODE_TYPE = 'color-token';
+
+const notoSansMono = Noto_Sans_Mono({
+  preload: true,
+  variable: '--font-noto-sans-mono',
+  subsets: ['latin'],
+});
+
+export class ColorTokenNode extends WeaveNode {
+  protected nodeType = COLOR_TOKEN_NODE_TYPE;
+
+  createNode(key: string, props: WeaveElementAttributes) {
+    return {
+      key,
+      type: this.nodeType,
+      props: {
+        ...props,
+        id: key,
+        nodeType: this.nodeType,
+        children: [],
+      },
+    };
+  }
+
+  createInstance(props: WeaveElementAttributes) {
+    const { id } = props;
+
+    const colorTokenColor = props.colorToken ?? '#DEFFA0';
+
+    const colorTokenParams = {
+      ...props,
+    };
+    delete colorTokenParams.zIndex;
+
+    const colorToken = new Konva.Group({
+      ...colorTokenParams,
+      width: colorTokenParams.width,
+      height: colorTokenParams.height,
+      name: 'node',
+    });
+
+    const internalRect = new Konva.Rect({
+      groupId: id,
+      x: 0,
+      y: 0,
+      fill: '#FFFFFFFF',
+      width: colorTokenParams.width,
+      height: colorTokenParams.height,
+      draggable: false,
+      listening: true,
+      stroke: 'black',
+      strokeWidth: 2,
+    });
+
+    colorToken.add(internalRect);
+
+    const internalRect2 = new Konva.Rect({
+      id: `${id}-colorToken-1`,
+      groupId: id,
+      x: 1,
+      y: 1,
+      fill: colorTokenColor,
+      width: colorTokenParams.width - 2,
+      height: (colorTokenParams.height ?? 0) - 60,
+      draggable: false,
+    });
+
+    colorToken.add(internalRect2);
+
+    const internalRect3 = new Konva.Rect({
+      id: `${id}-colorToken-2`,
+      groupId: id,
+      x: 1,
+      y: 168,
+      fill: colorTokenColor,
+      width: colorTokenParams.width - 2,
+      height: 12,
+      draggable: false,
+    });
+
+    colorToken.add(internalRect3);
+
+    const internalText = new Konva.Text({
+      id: `${id}-colorToken-code`,
+      groupId: id,
+      x: 20,
+      y: 260,
+      fontSize: 20,
+      fontFamily: notoSansMono.style.fontFamily,
+      fill: '#CCCCCCFF',
+      strokeEnabled: false,
+      stroke: '#000000FF',
+      strokeWidth: 1,
+      text: `${colorTokenColor}`,
+      width: (colorTokenParams.width ?? 0) - 40,
+      height: 20,
+      align: 'left',
+      draggable: false,
+    });
+
+    colorToken.add(internalText);
+
+    this.setupDefaultNodeEvents(colorToken);
+
+    return colorToken;
+  }
+
+  updateInstance(
+    nodeInstance: WeaveElementInstance,
+    nextProps: WeaveElementAttributes
+  ) {
+    const { id, colorToken } = nextProps;
+
+    const colorTokenNode = nodeInstance as Konva.Group;
+
+    const nodeInstanceZIndex = nodeInstance.zIndex();
+    nodeInstance.setAttrs({
+      ...nextProps,
+      zIndex: nodeInstanceZIndex,
+    });
+
+    const colorTokenColor = colorToken ?? '#DEFFA0';
+
+    const colorTokenNode1 = colorTokenNode.findOne(`#${id}-colorToken-1`);
+    if (colorTokenNode1) {
+      colorTokenNode1.setAttrs({
+        fill: colorTokenColor,
+      });
+    }
+    const colorTokenNode2 = colorTokenNode.findOne(`#${id}-colorToken-2`);
+    if (colorTokenNode2) {
+      colorTokenNode2.setAttrs({
+        fill: colorTokenColor,
+      });
+    }
+    const colorTokenCode = colorTokenNode.findOne(`#${id}-colorToken-code`);
+    if (colorTokenCode) {
+      colorTokenCode.setAttr('text', `${colorTokenColor}`);
+    }
+  }
+
+  removeInstance(nodeInstance: WeaveElementInstance) {
+    nodeInstance.destroy();
+  }
+
+  toNode(instance: WeaveElementInstance) {
+    const attrs = instance.getAttrs();
+
+    const cleanedAttrs = { ...attrs };
+    delete cleanedAttrs.draggable;
+
+    return {
+      key: attrs.id ?? '',
+      type: attrs.nodeType,
+      props: {
+        ...cleanedAttrs,
+        id: attrs.id ?? '',
+        nodeType: attrs.nodeType,
+        children: [],
+      },
+    };
+  }
+}

package/template/+nextjs+azure-web-pubsub/components/room/room.layout.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import React from 'react';
+import { ContextMenuRender } from '@/components/room-components/context-menu';
+import { useCollaborationRoom } from '@/store/store';
+import { RoomInformationOverlay } from '@/components/room-components/overlay/room-information-overlay';
+import { RoomUsersOverlay } from '@/components/room-components/overlay/room-users-overlay';
+import { ToolsOverlay } from '@/components/room-components/overlay/tools-overlay';
+import { MultiuseOverlay } from '@/components/room-components/overlay/multiuse-overlay';
+import { useWeave } from '@inditextech/weave-react';
+import { WEAVE_INSTANCE_STATUS } from '@inditextech/weave-types';
+import { ZoomHandlerOverlay } from '../room-components/overlay/zoom-handler-overlay';
+import { Logo } from '../utils/logo';
+import { AnimatePresence, motion } from 'framer-motion';
+
+export const RoomLayout = () => {
+  const status = useWeave((state) => state.status);
+  const roomLoaded = useWeave((state) => state.room.loaded);
+
+  const contextMenuShow = useCollaborationRoom(
+    (state) => state.contextMenu.show
+  );
+  const contextMenuPosition = useCollaborationRoom(
+    (state) => state.contextMenu.position
+  );
+  const contextMenuOptions = useCollaborationRoom(
+    (state) => state.contextMenu.options
+  );
+  const setContextMenuShow = useCollaborationRoom(
+    (state) => state.setContextMenuShow
+  );
+  const transformingImage = useCollaborationRoom(
+    (state) => state.images.transforming
+  );
+  const uploadingImage = useCollaborationRoom(
+    (state) => state.images.uploading
+  );
+  const loadingImage = useCollaborationRoom((state) => state.images.loading);
+
+  return (
+    <div className="w-full h-full relative flex">
+      <AnimatePresence>
+        <motion.div
+          animate={{
+            filter: !(status === WEAVE_INSTANCE_STATUS.RUNNING && roomLoaded)
+              ? 'blur(10px)'
+              : 'blur(0px)',
+          }}
+          transition={{
+            duration: 0.5,
+            delay: !(status === WEAVE_INSTANCE_STATUS.RUNNING && roomLoaded)
+              ? 0
+              : 0.5,
+          }}
+          className="w-full h-full"
+        >
+          <div id="weave" className="w-full h-full"></div>
+          {status === WEAVE_INSTANCE_STATUS.RUNNING && roomLoaded && (
+            <>
+              <ContextMenuRender
+                show={contextMenuShow}
+                onChanged={(show: boolean) => {
+                  setContextMenuShow(show);
+                }}
+                position={contextMenuPosition}
+                options={contextMenuOptions}
+              />
+              <RoomInformationOverlay />
+              <div className="absolute top-[64px] left-[8px] right-[8px] flex justify-start items-center pointer-events-none">
+                <div className="max-w-[320px] text-left bg-transparent bg-white/50 p-1 font-noto-sans-mono text-[10px] text-zinc-600">
+                  To pan the canvas, keep the mouse wheel or the space bar
+                  pressed while dragging or use the hand tool.
+                </div>
+              </div>
+              <RoomUsersOverlay />
+              <ToolsOverlay />
+              <ZoomHandlerOverlay />
+              <MultiuseOverlay />
+              {transformingImage && (
+                <div className="bg-black/25 flex justify-center items-center absolute top-0 left-0 right-0 bottom-0">
+                  <div className="flex flex-col gap-5 bg-white p-11 py-8 justify-center items-center">
+                    <Logo kind="large" variant="no-text" />
+                    <div className="font-noto-sans-mono text-base">
+                      Removing background...
+                    </div>
+                  </div>
+                </div>
+              )}
+              {uploadingImage && (
+                <div className="bg-black/25 flex justify-center items-center absolute top-0 left-0 right-0 bottom-0">
+                  <div className="flex flex-col gap-5 bg-white p-11 py-8 justify-center items-center">
+                    <Logo kind="large" variant="no-text" />
+                    <div className="font-noto-sans-mono text-base">
+                      Uploading image...
+                    </div>
+                  </div>
+                </div>
+              )}
+              {loadingImage && (
+                <div className="bg-black/25 flex justify-center items-center absolute top-0 left-0 right-0 bottom-0">
+                  <div className="flex flex-col gap-5 bg-white p-11 py-8 justify-center items-center">
+                    <Logo kind="large" variant="no-text" />
+                    <div className="font-noto-sans-mono text-base">
+                      Loading image...
+                    </div>
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+};