create-weave-frontend-app 0.1.0

package/template/+nextjs+websockets/components/room-components/overlay/overlay-animation-wrapper.tsx

@@ -0,0 +1,31 @@
+import { motion } from "framer-motion";
+import { rightElementVariants } from "./variants";
+import { SelectionInformation } from "../selection-information";
+
+function OverlayAnimationWrapper({
+  children,
+  panelId,
+}: {
+  children: React.ReactNode;
+  panelId: string;
+}) {
+  return (
+    <motion.div
+      key={panelId}
+      initial="hidden"
+      animate="visible"
+      exit="hidden"
+      variants={rightElementVariants}
+      className="absolute top-[calc(50px+16px)] right-2 bottom-[calc(50px+16px)] flex flex-col gap-5 justify-center items-center"
+    >
+      <div className="w-[320px] p-0 h-full bg-white border border-zinc-200 shadow-lg flex justify-start items-center gap-3 overflow-hidden">
+        <div className="w-full h-full overflow-auto custom-scrollbar !px-0">
+          {children}
+          <SelectionInformation />
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+export default OverlayAnimationWrapper;

package/template/+nextjs+websockets/components/room-components/overlay/room-information-overlay.tsx

@@ -0,0 +1,247 @@
+'use client';
+
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { useRouter } from 'next/navigation';
+import { motion } from 'framer-motion';
+import { useWeave } from '@inditextech/weave-react';
+import { useCollaborationRoom } from '@/store/store';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+import { Logo } from '@/components/utils/logo';
+import {
+  Image as ImageIcon,
+  LogOut,
+  ChevronDown,
+  ChevronUp,
+  Grid2X2PlusIcon,
+  Grid2x2XIcon,
+  Grid3X3Icon,
+  GripIcon,
+  CheckIcon,
+} from 'lucide-react';
+import {
+  WEAVE_GRID_TYPES,
+  WeaveExportStageActionParams,
+  WeaveStageGridPlugin,
+  WeaveStageGridType,
+} from '@inditextech/weave-sdk';
+import { ConnectionStatus } from '../connection-status';
+import { topElementVariants } from './variants';
+import { DropdownMenuLabel } from '@radix-ui/react-dropdown-menu';
+
+export function RoomInformationOverlay() {
+  const router = useRouter();
+
+  const instance = useWeave((state) => state.instance);
+  const weaveConnectionStatus = useWeave((state) => state.connection.status);
+
+  const showUI = useCollaborationRoom((state) => state.ui.show);
+  const room = useCollaborationRoom((state) => state.room);
+
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  const [gridEnabled, setGridEnabled] = React.useState(true);
+  const [gridType, setGridType] = React.useState<WeaveStageGridType>(
+    WEAVE_GRID_TYPES.LINES
+  );
+
+  const handleToggleGrid = React.useCallback(() => {
+    if (instance && instance.isPluginEnabled('stageGrid')) {
+      instance.disablePlugin('stageGrid');
+      setGridEnabled(instance.isPluginEnabled('stageGrid'));
+      return;
+    }
+    if (instance && !instance.isPluginEnabled('stageGrid')) {
+      instance.enablePlugin('stageGrid');
+      setGridEnabled(instance.isPluginEnabled('stageGrid'));
+      return;
+    }
+  }, [instance]);
+
+  const handleSetGridType = React.useCallback(
+    (type: WeaveStageGridType) => {
+      if (instance) {
+        (instance.getPlugin('stageGrid') as WeaveStageGridPlugin)?.setType(
+          type
+        );
+        setGridType(type);
+      }
+    },
+    [instance]
+  );
+
+  const handleExportToImage = React.useCallback(() => {
+    if (instance) {
+      instance.triggerAction<WeaveExportStageActionParams>('exportStageTool', {
+        options: {
+          padding: 20,
+          pixelRatio: 2,
+        },
+      });
+    }
+  }, [instance]);
+
+  React.useEffect(() => {
+    if (instance) {
+      setGridEnabled(instance.isPluginEnabled('stageGrid'));
+    }
+  }, [instance]);
+
+  React.useEffect(() => {
+    if (instance) {
+      const stageGridPlugin = instance.getPlugin(
+        'stageGrid'
+      ) as WeaveStageGridPlugin;
+      setGridType(stageGridPlugin?.getType());
+    }
+  }, [instance]);
+
+  // const handleExportToPdf = React.useCallback(() => {
+  //   if (instance) {
+  //     instance.triggerAction<WeaveExportStageActionParams>("exportStageTool", {
+  //       options: {
+  //         padding: 20,
+  //         pixelRatio: 2,
+  //       },
+  //     });
+  //   }
+  // }, [instance]);
+
+  const handleExitRoom = React.useCallback(() => {
+    router.push('/');
+  }, [router]);
+
+  if (!showUI) {
+    return null;
+  }
+
+  return (
+    <motion.div
+      initial="hidden"
+      animate="visible"
+      exit="hidden"
+      variants={topElementVariants}
+      className="pointer-events-none absolute top-2 left-2 flex gap-1 justify-center items-center"
+    >
+      <div className="bg-white border border-zinc-200 shadow-lg flex justify-start items-center gap-0 pr-1">
+        <div className="bg-accent h-[48px] flex justify-start items-center py-0 px-2">
+          <Logo kind="small" />
+        </div>
+        <div className="flex justify-start items-center p-1 gap-1">
+          <DropdownMenu onOpenChange={(open: boolean) => setMenuOpen(open)}>
+            <DropdownMenuTrigger
+              className={cn(
+                'pointer-events-auto rounded-none cursor-pointer p-1 px-3 hover:bg-accent focus:outline-none',
+                {
+                  ['bg-accent']: menuOpen,
+                  ['bg-white']: !menuOpen,
+                }
+              )}
+            >
+              <div className="flex justify-start items-center gap-2 font-noto-sans-mono text-foreground !normal-case min-h-[32px]">
+                <div className="font-noto-sans text-lg font-extralight">
+                  {room}
+                </div>
+                {menuOpen ? <ChevronUp /> : <ChevronDown />}
+              </div>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="start"
+              side="bottom"
+              alignOffset={0}
+              sideOffset={4}
+              className="font-noto-sans-mono rounded-none"
+            >
+              <DropdownMenuLabel className="px-2 py-1 pt-2 text-zinc-600 text-xs">
+                Grid Visibility
+              </DropdownMenuLabel>
+              <DropdownMenuItem
+                className="text-foreground cursor-pointer hover:rounded-none"
+                onClick={handleToggleGrid}
+              >
+                {!gridEnabled && (
+                  <>
+                    <Grid2X2PlusIcon /> Enable
+                  </>
+                )}
+                {gridEnabled && (
+                  <>
+                    <Grid2x2XIcon /> Disable
+                  </>
+                )}
+              </DropdownMenuItem>
+              <DropdownMenuLabel className="px-2 py-1 pt-2 text-zinc-600 text-xs">
+                Grid Kind
+              </DropdownMenuLabel>
+              <DropdownMenuItem
+                disabled={
+                  !gridEnabled ||
+                  (gridEnabled && gridType === WEAVE_GRID_TYPES.DOTS)
+                }
+                className="text-foreground cursor-pointer hover:rounded-none"
+                onClick={() => {
+                  handleSetGridType(WEAVE_GRID_TYPES.DOTS);
+                }}
+              >
+                <div className="w-full flex justify-between items-center">
+                  <div className="w-full flex justify-start items-center gap-2">
+                    <GripIcon size={16} /> Dots
+                  </div>
+                  {gridType === WEAVE_GRID_TYPES.DOTS && <CheckIcon />}
+                </div>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                disabled={
+                  !gridEnabled ||
+                  (gridEnabled && gridType === WEAVE_GRID_TYPES.LINES)
+                }
+                className="text-foreground cursor-pointer hover:rounded-none"
+                onClick={() => {
+                  handleSetGridType(WEAVE_GRID_TYPES.LINES);
+                }}
+              >
+                <div className="w-full flex justify-between items-center">
+                  <div className="w-full flex justify-start items-center gap-2">
+                    <Grid3X3Icon size={16} /> Lines
+                  </div>
+                  {gridType === WEAVE_GRID_TYPES.LINES && <CheckIcon />}
+                </div>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel className="px-2 py-1 pt-2 text-zinc-600 text-xs">
+                Exporting
+              </DropdownMenuLabel>
+              <DropdownMenuItem
+                className="text-foreground cursor-pointer hover:rounded-none"
+                onClick={handleExportToImage}
+              >
+                <ImageIcon /> Stage to image
+              </DropdownMenuItem>
+              {/* <DropdownMenuItem
+                className="text-foreground cursor-pointer hover:rounded-none"
+                onClick={handleExportToPdf}
+              >
+                <FileText />
+                Export to PDF
+              </DropdownMenuItem> */}
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                className="text-foreground cursor-pointer hover:rounded-none"
+                onClick={handleExitRoom}
+              >
+                <LogOut /> Exit room
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <ConnectionStatus weaveConnectionStatus={weaveConnectionStatus} />
+        </div>
+      </div>
+    </motion.div>
+  );
+}

package/template/+nextjs+websockets/components/room-components/overlay/room-users-overlay.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+import { ConnectedUsers } from "../connected-users";
+import { topElementVariants } from "./variants";
+import { useCollaborationRoom } from "@/store/store";
+
+export function RoomUsersOverlay() {
+  const showUI = useCollaborationRoom((state) => state.ui.show);
+
+  if (!showUI) {
+    return null;
+  }
+
+  return (
+    <motion.div
+      initial="hidden"
+      animate="visible"
+      exit="hidden"
+      variants={topElementVariants}
+      className="pointer-events-none absolute top-2 right-2 flex flex-col gap-1 justify-center items-center"
+    >
+      <div className="w-[320px] min-h-[50px] p-2 py-1 bg-white border border-zinc-200 shadow-lg flex flex-col justify-start items-center">
+        <div className="w-full min-h-[40px] h-full flex flex-col justify-between items-center gap-2">
+          <ConnectedUsers />
+        </div>
+      </div>
+    </motion.div>
+  );
+}

package/template/+nextjs+websockets/components/room-components/overlay/tools-overlay.tsx

@@ -0,0 +1,289 @@
+'use client';
+
+import React from 'react';
+import { ToolbarButton } from '../toolbar/toolbar-button';
+import { useMutation } from '@tanstack/react-query';
+import { postImage } from '@/api/post-image';
+import {
+  Brush,
+  ImagePlus,
+  PenTool,
+  Square,
+  Type,
+  Frame,
+  MousePointer,
+  Hand,
+  Tags,
+} from 'lucide-react';
+import { useWeave } from '@inditextech/weave-react';
+import { Toolbar } from '../toolbar/toolbar';
+import { motion } from 'framer-motion';
+import { leftElementVariants } from './variants';
+import { useCollaborationRoom } from '@/store/store';
+import { ShortcutElement } from '../help/shortcut-element';
+import { SYSTEM_OS } from '@/lib/utils';
+import { useKeyboardHandler } from '../hooks/use-keyboard-handler';
+
+export function ToolsOverlay() {
+  useKeyboardHandler();
+
+  const instance = useWeave((state) => state.instance);
+  const actualAction = useWeave((state) => state.actions.actual);
+
+  const room = useCollaborationRoom((state) => state.room);
+  const showUI = useCollaborationRoom((state) => state.ui.show);
+  const setUploadingImage = useCollaborationRoom(
+    (state) => state.setUploadingImage
+  );
+
+  const mutationUpload = useMutation({
+    mutationFn: async (file: File) => {
+      return await postImage(room ?? '', file);
+    },
+  });
+
+  const setShowSelectFileImage = useCollaborationRoom(
+    (state) => state.setShowSelectFileImage
+  );
+
+  const triggerTool = React.useCallback(
+    (toolName: string) => {
+      if (instance && actualAction !== toolName) {
+        instance.triggerAction(toolName);
+      }
+      if (instance && actualAction === toolName) {
+        instance.cancelAction(toolName);
+      }
+    },
+    [instance, actualAction]
+  );
+
+  React.useEffect(() => {
+    const onPasteExternalImage = async (item: ClipboardItem) => {
+      let blob: Blob | null = null;
+      if (item.types.includes('image/png')) {
+        blob = await item.getType('image/png');
+      }
+      if (item.types.includes('image/jpeg')) {
+        blob = await item.getType('image/jpeg');
+      }
+      if (item.types.includes('image/gif')) {
+        blob = await item.getType('image/gif');
+      }
+
+      if (!blob) {
+        return;
+      }
+
+      setUploadingImage(true);
+      const file = new File([blob], 'external.image');
+      mutationUpload.mutate(file, {
+        onSuccess: (data) => {
+          const room = data.fileName.split('/')[0];
+          const imageId = data.fileName.split('/')[1];
+
+          const { finishUploadCallback } = instance?.triggerAction(
+            'imageTool'
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ) as any;
+
+          finishUploadCallback?.(
+            `${process.env.NEXT_PUBLIC_API_ENDPOINT}/rooms/${room}/images/${imageId}`
+          );
+        },
+        onError: () => {
+          console.error('Error uploading image');
+        },
+        onSettled: () => {
+          setUploadingImage(false);
+        },
+      });
+    };
+
+    if (instance) {
+      instance.addEventListener('onPasteExternal', onPasteExternalImage);
+    }
+
+    return () => {
+      if (instance) {
+        instance.removeEventListener('onPasteExternal', onPasteExternalImage);
+      }
+    };
+  }, [instance, mutationUpload, setShowSelectFileImage, setUploadingImage]);
+
+  if (!showUI) {
+    return null;
+  }
+
+  return (
+    <motion.div
+      initial="hidden"
+      animate="visible"
+      exit="hidden"
+      variants={leftElementVariants}
+      className="pointer-events-none absolute top-[calc(50px+16px)] left-2 bottom-2 flex flex-col gap-2 justify-center items-center"
+    >
+      <Toolbar>
+        <ToolbarButton
+          icon={<Hand />}
+          active={actualAction === 'moveTool'}
+          onClick={() => triggerTool('moveTool')}
+          label={
+            <div className="flex gap-3 justify-start items-center">
+              <p>Move</p>
+              <ShortcutElement
+                variant="light"
+                shortcuts={{
+                  [SYSTEM_OS.MAC]: 'M',
+                  [SYSTEM_OS.OTHER]: 'M',
+                }}
+              />
+            </div>
+          }
+        />
+        <ToolbarButton
+          icon={<MousePointer />}
+          active={actualAction === 'selectionTool'}
+          onClick={() => triggerTool('selectionTool')}
+          label={
+            <div className="flex gap-3 justify-start items-center">
+              <p>Selection</p>
+              <ShortcutElement
+                variant="light"
+                shortcuts={{
+                  [SYSTEM_OS.MAC]: 'S',
+                  [SYSTEM_OS.OTHER]: 'S',
+                }}
+              />
+            </div>
+          }
+        />
+        <ToolbarButton
+          icon={<Square />}
+          active={actualAction === 'rectangleTool'}
+          onClick={() => triggerTool('rectangleTool')}
+          label={
+            <div className="flex gap-3 justify-start items-center">
+              <p>Add a rectangle</p>
+              <ShortcutElement
+                variant="light"
+                shortcuts={{
+                  [SYSTEM_OS.MAC]: 'R',
+                  [SYSTEM_OS.OTHER]: 'R',
+                }}
+              />
+            </div>
+          }
+        />
+        <ToolbarButton
+          icon={<PenTool />}
+          active={actualAction === 'penTool'}
+          onClick={() => triggerTool('penTool')}
+          label={
+            <div className="flex gap-3 justify-start items-center">
+              <p>Add a line</p>
+              <ShortcutElement
+                variant="light"
+                shortcuts={{
+                  [SYSTEM_OS.MAC]: 'L',
+                  [SYSTEM_OS.OTHER]: 'L',
+                }}
+              />
+            </div>
+          }
+        />
+        <ToolbarButton
+          icon={<Brush />}
+          active={actualAction === 'brushTool'}
+          onClick={() => triggerTool('brushTool')}
+          label={
+            <div className="flex gap-3 justify-start items-center">
+              <p>Free draw</p>
+              <ShortcutElement
+                variant="light"
+                shortcuts={{
+                  [SYSTEM_OS.MAC]: 'B',
+                  [SYSTEM_OS.OTHER]: 'B',
+                }}
+              />
+            </div>
+          }
+        />
+        <ToolbarButton
+          icon={<Type />}
+          active={actualAction === 'textTool'}
+          onClick={() => triggerTool('textTool')}
+          label={
+            <div className="flex gap-3 justify-start items-center">
+              <p>Add text</p>
+              <ShortcutElement
+                variant="light"
+                shortcuts={{
+                  [SYSTEM_OS.MAC]: 'T',
+                  [SYSTEM_OS.OTHER]: 't',
+                }}
+              />
+            </div>
+          }
+        />
+        <ToolbarButton
+          icon={<ImagePlus />}
+          active={actualAction === 'imageTool'}
+          onClick={() => {
+            triggerTool('imageTool');
+            setShowSelectFileImage(true);
+          }}
+          label={
+            <div className="flex gap-3 justify-start items-center">
+              <p>Add an image</p>
+              <ShortcutElement
+                variant="light"
+                shortcuts={{
+                  [SYSTEM_OS.MAC]: 'I',
+                  [SYSTEM_OS.OTHER]: 'I',
+                }}
+              />
+            </div>
+          }
+        />
+        <ToolbarButton
+          icon={<Frame />}
+          active={actualAction === 'frameTool'}
+          onClick={() => triggerTool('frameTool')}
+          label={
+            <div className="flex gap-3 justify-start items-center">
+              <p>Add a frame</p>
+              <ShortcutElement
+                variant="light"
+                shortcuts={{
+                  [SYSTEM_OS.MAC]: 'F',
+                  [SYSTEM_OS.OTHER]: 'F',
+                }}
+              />
+            </div>
+          }
+        />
+        <div className="w-full justify-center items-center flex">
+          <div className="w-[20px] h-[1px] bg-zinc-200 my-1"></div>
+        </div>
+        <ToolbarButton
+          icon={<Tags />}
+          active={actualAction === 'colorTokenTool'}
+          onClick={() => triggerTool('colorTokenTool')}
+          label={
+            <div className="flex gap-3 justify-start items-center">
+              <p>Add color token</p>
+              <ShortcutElement
+                variant="light"
+                shortcuts={{
+                  [SYSTEM_OS.MAC]: 'P',
+                  [SYSTEM_OS.OTHER]: 'P',
+                }}
+              />
+            </div>
+          }
+        />
+      </Toolbar>
+    </motion.div>
+  );
+}

package/template/+nextjs+websockets/components/room-components/overlay/variants.ts

@@ -0,0 +1,58 @@
+const topElementVariants = {
+  hidden: {
+    transform: "translateY(-20%)",
+    opacity: 0,
+    transition: { duration: 0.2, ease: [0.25, 0.1, 0.25, 1] },
+  },
+  visible: {
+    transform: "translateY(0)",
+    opacity: 1,
+    transition: { duration: 1, ease: [0.25, 0.1, 0.25, 1], delay: 0.5 },
+  },
+};
+
+const bottomElementVariants = {
+  hidden: {
+    transform: "translateY(20%)",
+    opacity: 0,
+    transition: { duration: 0.2, ease: [0.25, 0.1, 0.25, 1] },
+  },
+  visible: {
+    transform: "translateY(0)",
+    opacity: 1,
+    transition: { duration: 1, ease: [0.25, 0.1, 0.25, 1], delay: 0.5 },
+  },
+};
+
+const leftElementVariants = {
+  hidden: {
+    transform: "translateX(-20%)",
+    opacity: 0,
+    transition: { duration: 0.2, ease: [0.25, 0.1, 0.25, 1], delay: 0.5 },
+  },
+  visible: {
+    transform: "translateX(0)",
+    opacity: 1,
+    transition: { duration: 2, ease: [0.25, 0.1, 0.25, 1], delay: 0.5 },
+  },
+};
+
+const rightElementVariants = {
+  hidden: {
+    transform: "translateX(10%)",
+    opacity: 0,
+    transition: { duration: 0.2, ease: [0.25, 0.1, 0.25, 1] },
+  },
+  visible: {
+    transform: "translateX(0)",
+    opacity: 1,
+    transition: { duration: 0.2, ease: [0.25, 0.1, 0.25, 1] },
+  },
+};
+
+export {
+  topElementVariants,
+  bottomElementVariants,
+  leftElementVariants,
+  rightElementVariants,
+};