create-weave-frontend-app 0.1.0

package/template/+nextjs+websockets/components/room-components/help/help-arrange.tsx

@@ -0,0 +1,69 @@
+import {
+  BringToFront,
+  ArrowUp,
+  ArrowDown,
+  SendToBack,
+  Group,
+  Ungroup,
+} from "lucide-react";
+import { SYSTEM_OS } from "@/lib/utils";
+import { HelpShortcutElement } from "./help-shortcut-element";
+
+export const HelpArrange = () => {
+  return (
+    <div className="w-full grid grid-cols-2 py-3 gap-x-5">
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<BringToFront />}
+          label="Bring to front"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "]",
+            [SYSTEM_OS.OTHER]: "]",
+          }}
+        />
+        <HelpShortcutElement
+          icon={<ArrowUp />}
+          label="Move up"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⌘ ]",
+            [SYSTEM_OS.OTHER]: "Ctrl ]",
+          }}
+        />
+        <HelpShortcutElement
+          icon={<ArrowDown />}
+          label="Move down"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⌘ [",
+            [SYSTEM_OS.OTHER]: "Ctrl [",
+          }}
+        />
+        <HelpShortcutElement
+          icon={<SendToBack />}
+          label="Send to back"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "[",
+            [SYSTEM_OS.OTHER]: "[",
+          }}
+        />
+      </div>
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<Group />}
+          label="Group selected elements"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⇧ ⌘ G",
+            [SYSTEM_OS.OTHER]: "⇧ Ctrl G",
+          }}
+        />
+        <HelpShortcutElement
+          icon={<Ungroup />}
+          label="Un-group selected elements"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⇧ ⌘ U",
+            [SYSTEM_OS.OTHER]: "⇧ Ctrl U",
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/template/+nextjs+websockets/components/room-components/help/help-drawer.tsx

@@ -0,0 +1,140 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+import { Keyboard, XIcon } from "lucide-react";
+import { SYSTEM_OS } from "@/lib/utils";
+import { HelpTools } from "./help-tools";
+import { ShortcutElement } from "./shortcut-element";
+import React from "react";
+import { useKeyDown } from "../hooks/use-key-down";
+import { useGetOs } from "../hooks/use-get-os";
+import { HelpZoom } from "./help-zoom";
+import { HelpView } from "./help-view";
+import { HelpSelection } from "./help-selection";
+import { HelpEdit } from "./help-edit";
+import { HelpArrange } from "./help-arrange";
+
+export const HelpDrawer = () => {
+  const os = useGetOs();
+
+  const [open, setOpen] = React.useState<boolean>(false);
+
+  useKeyDown(
+    () => {
+      setOpen((prev) => !prev);
+    },
+    ["KeyK"],
+    (e) => ([SYSTEM_OS.MAC as string].includes(os) ? e.metaKey : e.ctrlKey)
+  );
+
+  return (
+    <Drawer modal={false} open={open} onOpenChange={setOpen}>
+      <DrawerTrigger>
+        <TooltipProvider delayDuration={300}>
+          <Tooltip>
+            <TooltipTrigger
+              asChild
+              className="pointer-events-auto cursor-pointer hover:text-black hover:bg-accent w-8 h-8 px-2 py-2"
+            >
+              <Keyboard />
+            </TooltipTrigger>
+            <TooltipContent side="top" align="start" className="rounded-none">
+              <div className="flex flex-col gap-2 justify-start items-end">
+                <p>Keyboard shortcuts</p>
+                <ShortcutElement
+                  variant="light"
+                  shortcuts={{
+                    [SYSTEM_OS.MAC]: "⌘ K",
+                    [SYSTEM_OS.OTHER]: "Ctrl K",
+                  }}
+                />
+              </div>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </DrawerTrigger>
+      <DrawerContent className="p-0 !rounded-none bg-black flex flex-col justify-start items-center min-h-[330px]">
+        <DrawerHeader className="w-[1024px] flex flex-row justify-between items-centers p-0 py-3">
+          <DrawerTitle className="flex flex-row justify-start items-center text-center text-white font-noto-sans-mono">
+            Keyboard shortcuts
+          </DrawerTitle>
+          <DrawerClose>
+            <div className="outline-none rounded-none font-noto-sans-mono cursor-pointer text-white">
+              <XIcon size={24} />
+            </div>
+          </DrawerClose>
+        </DrawerHeader>
+        <Tabs defaultValue="tools" className="w-[1024px] my-5 p-0">
+          <TabsList className="w-full bg-zinc-700 rounded-none  h-auto">
+            <TabsTrigger
+              value="tools"
+              className="cursor-pointer bg-black rounded-none p-1"
+            >
+              Tools
+            </TabsTrigger>
+            <TabsTrigger
+              value="view"
+              className="cursor-pointer bg-black rounded-none p-1"
+            >
+              View
+            </TabsTrigger>
+            <TabsTrigger
+              value="zoom"
+              className="cursor-pointer bg-black rounded-none p-1"
+            >
+              Zoom
+            </TabsTrigger>
+            <TabsTrigger
+              value="selection"
+              className="cursor-pointer bg-black rounded-none p-1"
+            >
+              Selection
+            </TabsTrigger>
+            <TabsTrigger
+              value="edit"
+              className="cursor-pointer bg-black rounded-none p-1"
+            >
+              Edit
+            </TabsTrigger>
+            <TabsTrigger
+              value="arrange"
+              className="cursor-pointer bg-black rounded-none p-1"
+            >
+              Arrange
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="tools">
+            <HelpTools />
+          </TabsContent>
+          <TabsContent value="view">
+            <HelpView />
+          </TabsContent>
+          <TabsContent value="zoom">
+            <HelpZoom />
+          </TabsContent>
+          <TabsContent value="selection">
+            <HelpSelection />
+          </TabsContent>
+          <TabsContent value="edit">
+            <HelpEdit />
+          </TabsContent>
+          <TabsContent value="arrange">
+            <HelpArrange />
+          </TabsContent>
+        </Tabs>
+      </DrawerContent>
+    </Drawer>
+  );
+};

package/template/+nextjs+websockets/components/room-components/help/help-edit.tsx

@@ -0,0 +1,80 @@
+import {
+  ClipboardPaste,
+  Copy,
+  ClipboardCopy,
+  ImageDown,
+  MonitorDown,
+  Undo,
+  Redo,
+} from "lucide-react";
+import { SYSTEM_OS } from "@/lib/utils";
+import { HelpShortcutElement } from "./help-shortcut-element";
+
+export const HelpEdit = () => {
+  return (
+    <div className="w-full grid grid-cols-3 py-3 gap-x-5">
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<ClipboardCopy />}
+          label="Copy"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⌘ C",
+            [SYSTEM_OS.OTHER]: "Ctrl C",
+          }}
+        />
+        <HelpShortcutElement
+          icon={<ClipboardPaste />}
+          label="Paste"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⌘ P",
+            [SYSTEM_OS.OTHER]: "Ctrl P",
+          }}
+        />
+      </div>
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<Copy />}
+          label="Duplicate"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⌘ D",
+            [SYSTEM_OS.OTHER]: "Ctrl D",
+          }}
+        />
+        <HelpShortcutElement
+          icon={<Undo />}
+          label="Undo"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⇧ ⌘ ,",
+            [SYSTEM_OS.OTHER]: "⇧ Ctrl ,",
+          }}
+        />
+        <HelpShortcutElement
+          icon={<Redo />}
+          label="Redo"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⇧ ⌘ .",
+            [SYSTEM_OS.OTHER]: "⇧ Ctrl .",
+          }}
+        />
+      </div>
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<ImageDown />}
+          label="Export selected as image"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⇧ ⌘ E",
+            [SYSTEM_OS.OTHER]: "⇧ Ctrl E",
+          }}
+        />
+        <HelpShortcutElement
+          icon={<MonitorDown />}
+          label="Export viewport as image"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⇧ ⌘ V",
+            [SYSTEM_OS.OTHER]: "⇧ Ctrl V",
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/template/+nextjs+websockets/components/room-components/help/help-selection.tsx

@@ -0,0 +1,30 @@
+import { SquareDashed, TextSelect } from "lucide-react";
+import { SYSTEM_OS } from "@/lib/utils";
+import { HelpShortcutElement } from "./help-shortcut-element";
+
+export const HelpSelection = () => {
+  return (
+    <div className="w-full grid grid-cols-2 py-3 gap-x-5">
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<TextSelect />}
+          label="Select all"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⇧ ⌘ A",
+            [SYSTEM_OS.OTHER]: "⇧ Ctrl A",
+          }}
+        />
+      </div>
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<SquareDashed />}
+          label="Select none"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⇧ Esc",
+            [SYSTEM_OS.OTHER]: "⇧ Esc",
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/template/+nextjs+websockets/components/room-components/help/help-shortcut-element.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { ShortcutElement } from "./shortcut-element";
+
+type HelpShortcutElement = {
+  icon: React.ReactElement;
+  label: string;
+  shortcuts: Record<string, string>;
+};
+
+export const HelpShortcutElement = ({
+  icon,
+  label,
+  shortcuts,
+}: Readonly<HelpShortcutElement>) => {
+  return (
+    <div className="flex justify-between items-center text-white">
+      <div className="flex gap-2 justify-start items-center">
+        {React.cloneElement(icon, { size: 20 })}
+        <div className="text-white font-noto-sans-mono text-sm">{label}</div>
+      </div>
+      <ShortcutElement shortcuts={shortcuts} />
+    </div>
+  );
+};

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

@@ -0,0 +1,89 @@
+import {
+  Brush,
+  Frame,
+  ImagePlus,
+  MousePointer,
+  PenTool,
+  Square,
+  SwatchBook,
+  Type,
+} from 'lucide-react';
+import { SYSTEM_OS } from '@/lib/utils';
+import { HelpShortcutElement } from './help-shortcut-element';
+
+export const HelpTools = () => {
+  return (
+    <div className="w-full grid grid-cols-3 py-3 gap-x-5">
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<MousePointer />}
+          label="Select tool"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: 'S',
+            [SYSTEM_OS.OTHER]: 'S',
+          }}
+        />
+        <HelpShortcutElement
+          icon={<Frame />}
+          label="Frame tool"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: 'F',
+            [SYSTEM_OS.OTHER]: 'F',
+          }}
+        />
+      </div>
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<Square />}
+          label="Rectangle tool"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: 'R',
+            [SYSTEM_OS.OTHER]: 'R',
+          }}
+        />
+        <HelpShortcutElement
+          icon={<PenTool />}
+          label="Pen tool"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: 'L',
+            [SYSTEM_OS.OTHER]: 'L',
+          }}
+        />
+        <HelpShortcutElement
+          icon={<Brush />}
+          label="Brush tool"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: 'B',
+            [SYSTEM_OS.OTHER]: 'B',
+          }}
+        />
+        <HelpShortcutElement
+          icon={<Type />}
+          label="Text tool"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: 'T',
+            [SYSTEM_OS.OTHER]: 'T',
+          }}
+        />
+        <HelpShortcutElement
+          icon={<ImagePlus />}
+          label="Image tool"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: 'I',
+            [SYSTEM_OS.OTHER]: 'I',
+          }}
+        />
+      </div>
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<SwatchBook />}
+          label="Color token tool"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: 'P',
+            [SYSTEM_OS.OTHER]: 'P',
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/template/+nextjs+websockets/components/room-components/help/help-view.tsx

@@ -0,0 +1,30 @@
+import { Eye, MousePointer } from "lucide-react";
+import { SYSTEM_OS } from "@/lib/utils";
+import { HelpShortcutElement } from "./help-shortcut-element";
+
+export const HelpView = () => {
+  return (
+    <div className="w-full grid grid-cols-2 py-3 gap-x-5">
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<Eye />}
+          label="Show/Hide UI / Zen mode"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⌘ \\",
+            [SYSTEM_OS.OTHER]: "Ctrl \\",
+          }}
+        />
+      </div>
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<MousePointer />}
+          label="Users cursors"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⌥ ⌘ U",
+            [SYSTEM_OS.OTHER]: "Alt Ctrl U",
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/template/+nextjs+websockets/components/room-components/help/help-zoom.tsx

@@ -0,0 +1,46 @@
+import { Fullscreen, Maximize, ZoomIn, ZoomOut } from "lucide-react";
+import { SYSTEM_OS } from "@/lib/utils";
+import { HelpShortcutElement } from "./help-shortcut-element";
+
+export const HelpZoom = () => {
+  return (
+    <div className="w-full grid grid-cols-2 py-3 gap-x-5">
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<ZoomIn />}
+          label="Zoom in"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⌘ +",
+            [SYSTEM_OS.OTHER]: "Ctrl +",
+          }}
+        />
+        <HelpShortcutElement
+          icon={<ZoomOut />}
+          label="Zoom out"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⌘ -",
+            [SYSTEM_OS.OTHER]: "Ctrl -",
+          }}
+        />
+      </div>
+      <div className="flex flex-col gap-3">
+        <HelpShortcutElement
+          icon={<Maximize />}
+          label="Fit to screen"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⇧ 1",
+            [SYSTEM_OS.OTHER]: "⇧ 1",
+          }}
+        />
+        <HelpShortcutElement
+          icon={<Fullscreen />}
+          label="Fit to selection"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "⇧ 2",
+            [SYSTEM_OS.OTHER]: "⇧ 2",
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/template/+nextjs+websockets/components/room-components/help/shortcut-element.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { cn, SYSTEM_OS } from "@/lib/utils";
+import { useGetOs } from "../hooks/use-get-os";
+
+type ShortcutElement = {
+  variant?: "default" | "light";
+  shortcuts: Record<string, string>;
+};
+
+export const ShortcutElement = ({
+  variant = "default",
+  shortcuts,
+}: Readonly<ShortcutElement>) => {
+  const os = useGetOs();
+
+  const isMac = React.useMemo(() => os === SYSTEM_OS.MAC, [os]);
+
+  const keys = React.useMemo(() => {
+    return isMac ? shortcuts[SYSTEM_OS.MAC] : shortcuts[SYSTEM_OS.OTHER];
+  }, [isMac, shortcuts]);
+
+  return (
+    <div className="flex gap-1 justify-start items-center">
+      {keys.split(" ").map((key) => {
+        return (
+          <span
+            key={key}
+            className={cn(
+              "inline-flex justify-start items-center p-0.5 px-1.5 rounded-xs font-noto-sans-mono text-xs",
+              {
+                ["bg-accent text-black"]: variant === "light",
+                ["bg-zinc-800 text-white"]: variant === "default",
+              }
+            )}
+          >
+            {key}
+          </span>
+        );
+      })}
+    </div>
+  );
+};