create-weave-frontend-app 0.1.0

package/template/+nextjs+websockets/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+websockets/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>
+  );
+};

package/template/+nextjs+websockets/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 useGetWebsocketsProvider from '../room-components/hooks/use-get-websockets-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 = useGetWebsocketsProvider({
+    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+websockets/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+websockets/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+websockets/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>
+  );
+};