create-weave-frontend-app 0.1.0

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

@@ -0,0 +1,125 @@
+'use client';
+
+import React from 'react';
+import { Toaster } from '@/components/ui/sonner';
+import { useRouter } from 'next/navigation';
+import { WeaveUser, WEAVE_INSTANCE_STATUS } from '@inditextech/weave-types';
+import { useCollaborationRoom } from '@/store/store';
+import { useWeave, WeaveProvider } from '@inditextech/weave-react';
+import { RoomLayout } from './room.layout';
+import { RoomLoader } from '../room-components/room-loader/room-loader';
+import { AnimatePresence } from 'framer-motion';
+import useGetWeaveJSProps from '../room-components/hooks/use-get-weave-js-props';
+import useGetAzureWebPubsubProvider from '../room-components/hooks/use-get-azure-web-pubsub-provider';
+import useHandleRouteParams from '../room-components/hooks/use-handle-route-params';
+import { UploadFile } from '../room-components/upload-file';
+
+const statusMap = {
+  ['idle']: 'Idle',
+  ['starting']: 'Starting Weave...',
+  ['loadingFonts']: 'Fetching custom fonts...',
+  ['running']: 'Running',
+};
+
+export const Room = () => {
+  const router = useRouter();
+
+  const instance = useWeave((state) => state.instance);
+  const status = useWeave((state) => state.status);
+  const roomLoaded = useWeave((state) => state.room.loaded);
+
+  const room = useCollaborationRoom((state) => state.room);
+  const user = useCollaborationRoom((state) => state.user);
+  const loadingFetchConnectionUrl = useCollaborationRoom(
+    (state) => state.fetchConnectionUrl.loading
+  );
+  const errorFetchConnectionUrl = useCollaborationRoom(
+    (state) => state.fetchConnectionUrl.error
+  );
+  const setFetchConnectionUrlError = useCollaborationRoom(
+    (state) => state.setFetchConnectionUrlError
+  );
+
+  const { loadedParams } = useHandleRouteParams();
+
+  const getUser = React.useCallback(() => {
+    return user as WeaveUser;
+  }, [user]);
+
+  const loadingDescription = React.useMemo(() => {
+    if (!loadedParams) {
+      return 'Fetching room parameters...';
+    }
+    if (loadingFetchConnectionUrl) {
+      return 'Connecting to the room...';
+    }
+    if (status !== WEAVE_INSTANCE_STATUS.RUNNING) {
+      return statusMap[status];
+    }
+    if (status === WEAVE_INSTANCE_STATUS.RUNNING && !roomLoaded) {
+      return 'Fetching room content...';
+    }
+
+    return '';
+  }, [loadedParams, loadingFetchConnectionUrl, status, roomLoaded]);
+
+  const { fonts, nodes, customPlugins, actions } = useGetWeaveJSProps();
+
+  const store = useGetAzureWebPubsubProvider({
+    loadedParams,
+    getUser,
+  });
+
+  React.useEffect(() => {
+    setFetchConnectionUrlError(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  React.useEffect(() => {
+    if (instance && status === WEAVE_INSTANCE_STATUS.RUNNING && roomLoaded) {
+      instance.triggerAction('selectionTool');
+    }
+  }, [instance, status, roomLoaded]);
+
+  if ((!room || !user) && loadedParams) {
+    router.push('/error?errorCode=room-required-parameters');
+    return null;
+  }
+
+  if (errorFetchConnectionUrl) {
+    router.push('/error?errorCode=room-failed-connection');
+    return null;
+  }
+
+  return (
+    <>
+      <AnimatePresence>
+        {(!loadedParams ||
+          loadingFetchConnectionUrl ||
+          status !== WEAVE_INSTANCE_STATUS.RUNNING ||
+          (status === WEAVE_INSTANCE_STATUS.RUNNING && !roomLoaded)) && (
+          <RoomLoader
+            roomId={room ? room : '-'}
+            content="LOADING ROOM"
+            description={loadingDescription}
+          />
+        )}
+      </AnimatePresence>
+      {loadedParams && room && store && (
+        <WeaveProvider
+          containerId="weave"
+          getUser={getUser}
+          store={store}
+          fonts={fonts}
+          nodes={nodes}
+          actions={actions}
+          customPlugins={customPlugins}
+        >
+          <UploadFile />
+          <RoomLayout />
+        </WeaveProvider>
+      )}
+      <Toaster position="bottom-center" />
+    </>
+  );
+};

package/template/+nextjs+azure-web-pubsub/components/room-components/color-tokens-library/color-token.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import React from 'react';
+import { colorIsLight } from '@/lib/utils';
+
+type ColorTokenProps = {
+  color: string;
+};
+
+export const ColorToken = ({ color }: Readonly<ColorTokenProps>) => {
+  let forefrontColor = '#ffffff';
+  if (colorIsLight(color)) {
+    forefrontColor = '#000000';
+  }
+
+  return (
+    <div
+      className="cursor-pointer w-full h-full p-3"
+      draggable="true"
+      data-colortoken={color}
+      style={{ background: color }}
+    >
+      <div
+        style={{ color: forefrontColor }}
+        className="font-noto-sans-mono font-bold text-base"
+      >
+        {color}
+      </div>
+    </div>
+  );
+};

package/template/+nextjs+azure-web-pubsub/components/room-components/color-tokens-library/color-tokens-library.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import React from 'react';
+import { useWeave } from '@inditextech/weave-react';
+import { useCollaborationRoom } from '@/store/store';
+import { ColorToken } from './color-token';
+
+type ColorTokenElement = {
+  id: string;
+  color: string;
+};
+
+export const ColorTokensLibrary = () => {
+  const instance = useWeave((state) => state.instance);
+
+  const colorTokenLibraryVisible = useCollaborationRoom(
+    (state) => state.colorToken.library.visible
+  );
+
+  const commonColorTokens: ColorTokenElement[] = React.useMemo(() => {
+    return [
+      { id: '1', color: '#28282D' },
+      { id: '2', color: '#00656B' },
+      { id: '3', color: '#D79D00' },
+      { id: '4', color: '#3073B7' },
+      { id: '5', color: '#953640' },
+      { id: '6', color: '#C5AECF' },
+      { id: '7', color: '#46295A' },
+      { id: '8', color: '#79797C' },
+    ];
+  }, []);
+
+  if (!instance) {
+    return null;
+  }
+
+  if (!colorTokenLibraryVisible) {
+    return null;
+  }
+
+  return (
+    <div className="pointer-events-auto w-full h-full">
+      <div className="w-[calc(100%-38px)] font-title-xs p-1 bg-white flex justify-between items-center">
+        <div className="flex justify-between  h-7 font-noto-sans-mono font-light items-center text-md pl-2">
+          Some Color Tokens
+        </div>
+      </div>
+      <div className="flex flex-col gap-2 w-full h-[calc(100%-50px)] border-t border-zinc-200">
+        <div
+          className="grid grid-cols-1 gap-2 w-full weaveDraggable p-4"
+          onDragStart={(e) => {
+            if (e.target instanceof HTMLDivElement) {
+              window.colorTokenDragColor = e.target.dataset.colortoken;
+            }
+          }}
+        >
+          {commonColorTokens.map((ele) => {
+            return <ColorToken key={ele.id} color={ele.color} />;
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,152 @@
+'use client';
+
+import React from 'react';
+import Avatar from 'boring-avatars';
+import { Avatar as AvatarUI, AvatarFallback } from '@/components/ui/avatar';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { useCollaborationRoom } from '@/store/store';
+import { ChevronDown } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useWeave } from '@inditextech/weave-react';
+import { cn } from '@/lib/utils';
+
+export const ConnectedUsers = () => {
+  const connectedUsers = useWeave((state) => state.users);
+
+  const user = useCollaborationRoom((state) => state.user);
+
+  const [menuOpen, setMenuOpen] = React.useState(false);
+
+  const connectedUserKey = React.useMemo(() => {
+    const filterOwnUser = Object.keys(connectedUsers).filter(
+      (actUser) => actUser === user?.name
+    );
+    return filterOwnUser?.[0];
+  }, [user, connectedUsers]);
+
+  const { showUsers, restUsers } = React.useMemo(() => {
+    const filterOwnUser = Object.keys(connectedUsers).filter(
+      (actUser) => actUser !== user?.name
+    );
+    return {
+      showUsers: filterOwnUser.slice(0, 4),
+      restUsers: filterOwnUser.slice(4),
+    };
+  }, [user, connectedUsers]);
+
+  if (Object.keys(connectedUsers).length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="w-full min-h-[40px] flex gap-1 justify-between items-center">
+      <TooltipProvider delayDuration={300}>
+        <div className="w-full flex gap-1 justify-start items-center">
+          {connectedUserKey && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button className="cursor-pointer pointer-events-auto">
+                  <AvatarUI className="w-[32px] h-[32px]">
+                    <AvatarFallback>
+                      <Avatar name={user?.name} variant="beam" />
+                    </AvatarFallback>
+                  </AvatarUI>
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" className="rounded-none">
+                <p className="font-noto-sans-mono text-xs">{user?.name}</p>
+              </TooltipContent>
+            </Tooltip>
+          )}
+          {showUsers.map((user) => {
+            const userInfo = connectedUsers[user];
+            return (
+              <Tooltip key={user}>
+                <TooltipTrigger asChild>
+                  <button className="cursor-pointer pointer-events-auto">
+                    <AvatarUI className="w-[32px] h-[32px]">
+                      <AvatarFallback>
+                        <Avatar name={userInfo?.name} variant="beam" />
+                      </AvatarFallback>
+                    </AvatarUI>
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  <p className="font-noto-sans-mono text-sm">{userInfo.name}</p>
+                </TooltipContent>
+              </Tooltip>
+            );
+          })}
+          {restUsers.length > 0 && (
+            <>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <DropdownMenu
+                    onOpenChange={(open: boolean) => setMenuOpen(open)}
+                  >
+                    <DropdownMenuTrigger
+                      className={cn(
+                        ' pointer-events-auto rounded-none cursor-pointer p-2 hover:bg-accent focus:outline-none',
+                        {
+                          ['bg-accent']: menuOpen,
+                          ['bg-white']: !menuOpen,
+                        }
+                      )}
+                    >
+                      <ChevronDown className="rounded-none" />
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                      align="end"
+                      side="bottom"
+                      alignOffset={0}
+                      sideOffset={4}
+                      className="font-noto-sans-mono rounded-none"
+                    >
+                      {restUsers.map((user) => {
+                        const userInfo = connectedUsers[user];
+                        return (
+                          <DropdownMenuItem
+                            key={user}
+                            className="text-foreground focus:bg-white hover:rounded-none"
+                          >
+                            <AvatarUI className="w-[32px] h-[32px]">
+                              <AvatarFallback>
+                                <Avatar name={userInfo?.name} variant="beam" />
+                              </AvatarFallback>
+                            </AvatarUI>
+                            {userInfo?.name}
+                          </DropdownMenuItem>
+                        );
+                      })}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  <p className="font-noto-sans-mono text-sm">More users</p>
+                </TooltipContent>
+              </Tooltip>
+            </>
+          )}
+        </div>
+        <div className="flex justify-start items-center gap-1">
+          <div className="w-full flex justify-start gap-2 items-center text-center font-noto-sans-mono text-xs px-2">
+            <div className="px-2 py-1 bg-accent">
+              {Object.keys(connectedUsers).length}
+            </div>
+            <div className="text-left">users</div>
+          </div>
+        </div>
+      </TooltipProvider>
+    </div>
+  );
+};

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

@@ -0,0 +1,52 @@
+'use client';
+
+import React from 'react';
+import {
+  Cloud,
+  //CloudCog,
+  CloudAlert,
+} from 'lucide-react';
+import { WEAVE_STORE_AZURE_WEB_PUBSUB_CONNECTION_STATUS } from '@inditextech/weave-store-azure-web-pubsub/client';
+import { cn } from '@/lib/utils';
+
+type ConnectionStatusProps = {
+  weaveConnectionStatus: string;
+};
+
+export const ConnectionStatus = ({
+  weaveConnectionStatus,
+}: Readonly<ConnectionStatusProps>) => {
+  return (
+    <div className="flex">
+      <div
+        className={cn(
+          'bg-light-background-1 p-2 flex justify-center items-center rounded-full',
+          {
+            ['bg-emerald-200 text-black']:
+              weaveConnectionStatus ===
+              WEAVE_STORE_AZURE_WEB_PUBSUB_CONNECTION_STATUS.CONNECTED,
+            // ["bg-sky-300 text-white"]:
+            //   weaveConnectionStatus ===
+            //   WEAVE_STORE_AZURE_WEB_PUBSUB_CONNECTION_STATUS.CONNECTING,
+            ['bg-rose-300 text-white']:
+              weaveConnectionStatus ===
+              WEAVE_STORE_AZURE_WEB_PUBSUB_CONNECTION_STATUS.DISCONNECTED,
+          }
+        )}
+      >
+        {weaveConnectionStatus ===
+          WEAVE_STORE_AZURE_WEB_PUBSUB_CONNECTION_STATUS.CONNECTED && (
+          <Cloud size={20} />
+        )}
+        {/* {weaveConnectionStatus ===
+          WEAVE_STORE_AZURE_WEB_PUBSUB_CONNECTION_STATUS.CONNECTING && (
+          <CloudCog size={20} />
+        )} */}
+        {weaveConnectionStatus ===
+          WEAVE_STORE_AZURE_WEB_PUBSUB_CONNECTION_STATUS.DISCONNECTED && (
+          <CloudAlert size={20} />
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,152 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+
+type ContextMenuButtonProps = {
+  label: React.ReactNode;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+  onClick: () => void;
+};
+
+export type ContextMenuOption = {
+  id: string;
+  type: "button" | "divider";
+} & (
+  | {
+      type: "button";
+      label: string | React.ReactNode;
+      icon?: React.ReactNode;
+      disabled?: boolean;
+      onClick: () => void;
+    }
+  | {
+      type: "divider";
+    }
+);
+
+type ContextMenuProps = {
+  show: boolean;
+  onChanged: (show: boolean) => void;
+  position: { x: number; y: number };
+  options: ContextMenuOption[];
+};
+
+function ContextMenuButton({
+  label,
+  icon,
+  disabled,
+  onClick,
+}: Readonly<ContextMenuButtonProps>) {
+  return (
+    <button
+      className={cn(
+        "!cursor-pointer w-[calc(100%-8px)] flex justify-between items-center gap-2 font-noto-sans-mono text-sm text-left whitespace-nowrap m-1 text-foreground px-2 py-1.5",
+        {
+          ["hover:bg-accent"]: !disabled,
+          ["!cursor-default hover:bg-white text-muted-foreground"]: disabled,
+        }
+      )}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {icon} <div className="w-full">{label}</div>
+    </button>
+  );
+}
+
+export const ContextMenuRender = ({
+  show,
+  onChanged,
+  position,
+  options,
+}: Readonly<ContextMenuProps>) => {
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (ref.current && show) {
+      const boundingRect = ref.current.getBoundingClientRect();
+      let X = boundingRect.x;
+      let Y = boundingRect.y;
+
+      X = Math.max(
+        20,
+        Math.min(X, window.innerWidth - boundingRect.width - 20)
+      );
+      Y = Math.max(
+        20,
+        Math.min(Y, window.innerHeight - boundingRect.height - 20)
+      );
+
+      ref.current.style.top = `${Y}px`;
+      ref.current.style.left = `${X}px`;
+    }
+  }, [show]);
+
+  React.useEffect(() => {
+    function checkIfClickedOutside(e: MouseEvent) {
+      if (
+        ref.current &&
+        e.target !== ref.current &&
+        !ref.current.contains(e.target as Node)
+      ) {
+        ref.current.style.display = `none`;
+        onChanged(false);
+      }
+    }
+
+    function checkIfTouchOutside(e: TouchEvent) {
+      console.log(e);
+      if (
+        ref.current &&
+        e.target !== ref.current &&
+        !ref.current.contains(e.target as Node)
+      ) {
+        ref.current.style.display = `none`;
+        onChanged(false);
+      }
+    }
+
+    window.addEventListener("click", checkIfClickedOutside);
+    window.addEventListener("touchstart", checkIfTouchOutside);
+
+    return () => {
+      window.removeEventListener("click", checkIfClickedOutside);
+      window.removeEventListener("touchstart", checkIfTouchOutside);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      className="fixed w-[300px] bg-white flex flex-col border border-zinc-200 shadow-lg"
+      style={{
+        display: show ? "block" : "none",
+        top: `${position.y}px`,
+        left: `${position.x}px`,
+        zIndex: 10,
+      }}
+    >
+      {options.map((option) => {
+        if (option.type === "button") {
+          return (
+            <ContextMenuButton
+              key={option.id}
+              label={option.label}
+              icon={option.icon}
+              disabled={option.disabled ?? false}
+              onClick={option.onClick}
+            />
+          );
+        }
+        if (option.type === "divider") {
+          return (
+            <div key={option.id} className="w-full h-[1px] bg-accent"></div>
+          );
+        }
+      })}
+    </div>
+  );
+};

package/template/+nextjs+azure-web-pubsub/components/room-components/frames-library/frames-library.image.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import Image from "next/image";
+import Konva from "konva";
+import { toImageAsync } from "./utils";
+
+type FrameImageProps = {
+  node: Konva.Group;
+};
+
+export const FrameImage = ({ node }: Readonly<FrameImageProps>) => {
+  const [image, setImage] = React.useState<React.ReactElement | null>(null);
+
+  React.useEffect(() => {
+    setInterval(async () => {
+      const nodeAttrs = node.getAttrs();
+      try {
+        // const box = frameInternal.getClientRect({ relativeTo: stage });
+        const frameBg = node.findOne(`#${nodeAttrs.id}-bg`) as Konva.Group;
+        if (!frameBg) {
+          return;
+        }
+        const boxBg = frameBg.getClientRect();
+        const img = await toImageAsync(node, {
+          x: boxBg.x + 1,
+          y: boxBg.y + 1,
+          width: boxBg.width - 2,
+          height: boxBg.height - 2,
+        });
+        setImage(
+          <Image
+            src={img.src}
+            width={284}
+            height={201}
+            alt="A frame image"
+            className="object-fit w-full h-full"
+          />
+        );
+      } catch (ex) {
+        console.error(ex);
+      }
+    }, 100);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className="w-full aspect-video border border-zinc-200">{image}</div>
+  );
+};

package/template/+nextjs+azure-web-pubsub/components/room-components/frames-library/frames-library.presentation-image.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import Image from "next/image";
+import Konva from "konva";
+import { toImageAsync } from "./utils";
+
+type FrameImageProps = {
+  node: Konva.Group;
+};
+
+export const FramePresentationImage = ({ node }: Readonly<FrameImageProps>) => {
+  const [loading, setLoading] = React.useState<boolean>(false);
+  const [image, setImage] = React.useState<React.ReactElement | null>(null);
+
+  React.useEffect(() => {
+    async function loadPresentationImage() {
+      const nodeAttrs = node.getAttrs();
+      try {
+        // const box = frameInternal.getClientRect({ relativeTo: stage });
+        const frameBg = node.findOne(`#${nodeAttrs.id}-bg`) as Konva.Group;
+        if (!frameBg) {
+          return;
+        }
+        const boxBg = frameBg.getClientRect();
+        setLoading(true);
+        const img = await toImageAsync(node, {
+          pixelRatio: 6,
+          x: boxBg.x + 2,
+          y: boxBg.y + 2,
+          width: boxBg.width - 4,
+          height: boxBg.height - 4,
+        });
+        setLoading(false);
+        setImage(
+          <Image
+            src={img.src}
+            width={500}
+            height={600}
+            alt="A frame image"
+            className="object-contain w-full h-full"
+          />
+        );
+      } catch (ex) {
+        console.error(ex);
+      }
+    }
+    loadPresentationImage();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="w-full h-full flex justify-center items-center">
+        <div className="font-noto-sans-mono text-2xl text-white">
+          Loading...
+        </div>
+      </div>
+    );
+  }
+
+  return image;
+};