create-weave-frontend-app 0.1.0

package/template/+nextjs+azure-web-pubsub/api/get-images.ts

@@ -0,0 +1,15 @@
+export const getImages = async (
+  roomId: string,
+  pageSize: number,
+  page: string | undefined
+) => {
+  let endpoint = `${process.env.NEXT_PUBLIC_API_ENDPOINT}/rooms/${roomId}/images?pageSize=${pageSize}`;
+
+  if (page) {
+    endpoint = `${endpoint}&page=${page}`;
+  }
+
+  const response = await fetch(endpoint);
+  const data = await response.json();
+  return data;
+};

package/template/+nextjs+azure-web-pubsub/api/post-image.ts

@@ -0,0 +1,14 @@
+export const postImage = async (roomId: string, file: File) => {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  const endpoint = `${process.env.NEXT_PUBLIC_API_ENDPOINT}/rooms/${roomId}/images`;
+  const response = await fetch(endpoint, {
+    method: 'POST',
+    body: formData,
+  });
+
+  const data = await response.json();
+
+  return data;
+};

package/template/+nextjs+azure-web-pubsub/api/post-remove-background.ts

@@ -0,0 +1,10 @@
+export const postRemoveBackground = async (roomId: string, imageId: string) => {
+  const endpoint = `${process.env.NEXT_PUBLIC_API_ENDPOINT}/rooms/${roomId}/images/${imageId}/remove-background`;
+  const response = await fetch(endpoint, {
+    method: 'POST',
+  });
+
+  const data = await response.json();
+
+  return data;
+};

package/template/+nextjs+azure-web-pubsub/app/error/page.tsx

@@ -0,0 +1,10 @@
+import { Error } from "@/components/error/error";
+import { Suspense } from "react";
+
+export default function ErrorPage() {
+  return (
+    <Suspense>
+      <Error />
+    </Suspense>
+  );
+}

package/template/+nextjs+azure-web-pubsub/app/globals.css

@@ -0,0 +1,193 @@
+@import "tailwindcss";
+
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --font-noto-sans: var(--font-noto-sans);
+  --font-noto-sans-mono: var(--font-noto-sans-mono);
+}
+
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
+  padding-right: 6px;
+  padding-left: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgba(156, 163, 175, 0.5);
+  border-radius: 10px;
+  transition: background-color 0.5s ease;
+  border: 1px solid transparent;
+  background-clip: padding-box;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(107, 114, 128, 0.7);
+}
+
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
+}
+
+.scrollbar-gutter {
+  scrollbar-gutter: stable;
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.871 0.006 286.286);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.871 0.006 286.286);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.141 0.005 285.823);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.141 0.005 285.823);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.274 0.006 286.033);
+  --input: oklch(0.274 0.006 286.033);
+  --ring: oklch(0.442 0.017 285.786);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.274 0.006 286.033);
+  --sidebar-ring: oklch(0.442 0.017 285.786);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 32px;
+  --spacing-8: 40px;
+  --spacing-9: 48px;
+  --spacing-10: 56px;
+  --spacing-11: 64px;
+  --spacing-12: 80px;
+  --spacing-13: 96px;
+  --spacing-14: 112px;
+  --spacing-15: 128px;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  html {
+    @apply w-full h-full;
+  }
+  body {
+    @apply bg-background ring-0 text-foreground w-full h-full;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background ring-0 text-foreground;
+  }
+}

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

@@ -0,0 +1,46 @@
+import type { Metadata, Viewport } from "next";
+import { Noto_Sans, Noto_Sans_Mono } from "next/font/google";
+import "./globals.css";
+import { AppProviders } from "./providers";
+
+const notoSans = Noto_Sans({
+  preload: true,
+  variable: "--font-noto-sans",
+  subsets: ["latin"],
+});
+
+const notoSansMono = Noto_Sans_Mono({
+  preload: true,
+  variable: "--font-noto-sans-mono",
+  subsets: ["latin"],
+});
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  // Also supported but less commonly used
+  // interactiveWidget: 'resizes-visual',
+};
+
+export const metadata: Metadata = {
+  title: "WeaveJS Playground",
+  description: "This is a playground for WeaveJS",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${notoSans.variable} ${notoSansMono.variable} antialiased`}
+      >
+        <AppProviders>{children}</AppProviders>
+      </body>
+    </html>
+  );
+}

package/template/+nextjs+azure-web-pubsub/app/page.tsx

@@ -0,0 +1,7 @@
+import { Home } from "@/components/home/home";
+
+export default function HomePage() {
+  return (
+    <Home />
+  );
+}

package/template/+nextjs+azure-web-pubsub/app/providers.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+import {
+  QueryClient,
+  QueryClientProvider,
+} from "@tanstack/react-query";
+
+type AppProvidersProps = {
+  children: React.ReactNode;
+};
+
+const queryClient = new QueryClient();
+
+export function AppProviders({ children }: Readonly<AppProvidersProps>) {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}

package/template/+nextjs+azure-web-pubsub/app/room/[roomId]/page.tsx

@@ -0,0 +1,5 @@
+import { Room } from "@/components/room/room";
+
+export default function RoomPage() {
+  return <Room />;
+}

package/template/+nextjs+azure-web-pubsub/components/actions/align-elements-tool/align-elements-tool.ts

@@ -0,0 +1,94 @@
+import { WeaveAction } from '@inditextech/weave-sdk';
+import { WeaveElementInstance, WeaveSelection } from '@inditextech/weave-types';
+import Konva from 'konva';
+
+export class AlignElementsToolAction extends WeaveAction {
+  protected cancelAction!: () => void;
+  internalUpdate = undefined;
+  init = undefined;
+
+  getName(): string {
+    return 'alignElementsTool';
+  }
+
+  private alignElements(nodes: WeaveSelection[], gap: number) {
+    if (nodes.length === 0) {
+      this.cancelAction?.();
+      return;
+    }
+
+    const instances: Konva.Node[] = [];
+    let actualType: string | undefined = nodes[0].node.type;
+    for (const node of nodes) {
+      if (node.instance.getAttrs().nodeType === actualType) {
+        instances.push(node.instance);
+      }
+      if (node.instance.getAttrs().nodeType !== actualType) {
+        actualType = undefined;
+        break;
+      }
+    }
+
+    if (!actualType) {
+      this.cancelAction?.();
+      return;
+    }
+
+    let y: number | undefined = undefined;
+    let prevInstance: Konva.Node | undefined = undefined;
+    for (const [index, instance] of instances.entries()) {
+      if (index === 0) {
+        prevInstance = instance;
+        y = instance.y();
+        continue;
+      }
+
+      if (prevInstance) {
+        const handler = this.instance.getNodeHandler(
+          instance.getAttrs().nodeType
+        );
+        const node = handler.toNode(instance as WeaveElementInstance);
+
+        const newNode = {
+          ...node,
+          props: {
+            ...node.props,
+            x: (prevInstance.x() ?? 0) + (prevInstance.width() ?? 0) + gap,
+            y,
+          },
+        };
+
+        instance.setAttrs({
+          x: (prevInstance.x() ?? 0) + (prevInstance.width() ?? 0) + gap,
+          y,
+        });
+
+        this.instance.updateNode(newNode);
+
+        prevInstance = instance;
+      }
+    }
+
+    this.cancelAction?.();
+  }
+
+  trigger(
+    cancelAction: () => void,
+    { gap = 20, nodes }: { gap: number; nodes: WeaveSelection[] }
+  ) {
+    if (!this.instance) {
+      throw new Error('Instance not defined');
+    }
+
+    const stage = this.instance.getStage();
+
+    stage.container().tabIndex = 1;
+    stage.container().focus();
+
+    this.cancelAction = cancelAction;
+
+    this.alignElements(nodes, gap);
+  }
+
+  cleanup() {}
+}

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

@@ -0,0 +1,164 @@
+import { v4 as uuidv4 } from 'uuid';
+import { Vector2d } from 'konva/lib/types';
+import {
+  ColorTokenToolCallbacks,
+  ColorTokenToolActionState,
+  ColorTokenToolActionTriggerParams,
+} from './types';
+import { COLOR_TOKEN_TOOL_STATE } from './constants';
+import { WeaveAction, WeaveNodesSelectionPlugin } from '@inditextech/weave-sdk';
+import Konva from 'konva';
+
+export class ColorTokenToolAction extends WeaveAction {
+  protected initialized: boolean = false;
+  protected state: ColorTokenToolActionState;
+  protected colorTokenId: string | null;
+  protected container: Konva.Layer | Konva.Group | undefined;
+  protected clickPoint: Vector2d | null;
+  protected cancelAction!: () => void;
+  internalUpdate = undefined;
+
+  constructor(callbacks: ColorTokenToolCallbacks) {
+    super(callbacks);
+
+    this.initialized = false;
+    this.state = COLOR_TOKEN_TOOL_STATE.IDLE;
+    this.colorTokenId = null;
+    this.container = undefined;
+    this.clickPoint = null;
+  }
+
+  getName(): string {
+    return 'colorTokenTool';
+  }
+
+  initProps() {
+    return {
+      colorToken: '#000000',
+      width: 300,
+      height: 300,
+      opacity: 1,
+    };
+  }
+
+  init() {
+    this.instance.addEventListener('onStageDrop', () => {
+      if (window.colorTokenDragColor) {
+        this.instance.triggerAction('colorTokenTool', {
+          color: window.colorTokenDragColor,
+        });
+        window.colorTokenDragColor = undefined;
+      }
+    });
+  }
+
+  private setupEvents() {
+    const stage = this.instance.getStage();
+
+    stage.container().addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        this.cancelAction();
+        return;
+      }
+    });
+
+    stage.on('click tap', (e) => {
+      e.evt.preventDefault();
+
+      if (this.state === COLOR_TOKEN_TOOL_STATE.IDLE) {
+        return;
+      }
+
+      if (this.state === COLOR_TOKEN_TOOL_STATE.ADDING) {
+        this.handleAdding();
+        return;
+      }
+    });
+
+    this.initialized = true;
+  }
+
+  private setState(state: ColorTokenToolActionState) {
+    this.state = state;
+  }
+
+  private addColorToken() {
+    const stage = this.instance.getStage();
+
+    stage.container().style.cursor = 'crosshair';
+    stage.container().focus();
+
+    this.colorTokenId = null;
+    this.clickPoint = null;
+    this.setState(COLOR_TOKEN_TOOL_STATE.ADDING);
+  }
+
+  private handleAdding() {
+    const { mousePoint, container } = this.instance.getMousePointer();
+
+    this.clickPoint = mousePoint;
+    this.container = container;
+
+    this.colorTokenId = uuidv4();
+
+    const nodeHandler = this.instance.getNodeHandler('color-token');
+
+    const node = nodeHandler.createNode(this.colorTokenId, {
+      ...this.props,
+      x: this.clickPoint.x,
+      y: this.clickPoint.y,
+    });
+
+    this.instance.addNode(node, this.container?.getAttrs().id);
+
+    this.cancelAction?.();
+  }
+
+  trigger(
+    cancelAction: () => void,
+    params?: ColorTokenToolActionTriggerParams
+  ) {
+    if (!this.instance) {
+      throw new Error('Instance not defined');
+    }
+
+    if (!this.initialized) {
+      this.setupEvents();
+    }
+    const stage = this.instance.getStage();
+
+    stage.container().tabIndex = 1;
+    stage.container().focus();
+
+    this.cancelAction = cancelAction;
+
+    this.props = this.initProps();
+
+    if (params?.color) {
+      this.props.colorToken = params.color;
+    }
+
+    this.addColorToken();
+  }
+
+  cleanup() {
+    const stage = this.instance.getStage();
+
+    stage.container().style.cursor = 'default';
+
+    const selectionPlugin =
+      this.instance.getPlugin<WeaveNodesSelectionPlugin>('nodesSelection');
+    if (selectionPlugin) {
+      const node = stage.findOne(`#${this.colorTokenId}`);
+      if (node) {
+        selectionPlugin.setSelectedNodes([node]);
+      }
+      this.instance.triggerAction('selectionTool');
+    }
+
+    this.colorTokenId = null;
+    this.container = undefined;
+    this.clickPoint = null;
+    this.setState(COLOR_TOKEN_TOOL_STATE.IDLE);
+  }
+}

package/template/+nextjs+azure-web-pubsub/components/actions/color-token-tool/constants.ts

@@ -0,0 +1,5 @@
+export const COLOR_TOKEN_TOOL_STATE = {
+  ['IDLE']: 'idle',
+  ['ADDING']: 'adding',
+  ['ADDED']: 'added',
+} as const;

package/template/+nextjs+azure-web-pubsub/components/actions/color-token-tool/types.ts

@@ -0,0 +1,12 @@
+import { WeaveActionCallbacks } from '@inditextech/weave-sdk';
+import { COLOR_TOKEN_TOOL_STATE } from './constants';
+
+export type ColorTokenToolActionStateKeys = keyof typeof COLOR_TOKEN_TOOL_STATE;
+export type ColorTokenToolActionState =
+  (typeof COLOR_TOKEN_TOOL_STATE)[ColorTokenToolActionStateKeys];
+
+export type ColorTokenToolCallbacks = WeaveActionCallbacks;
+
+export type ColorTokenToolActionTriggerParams = {
+  color?: string;
+};

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

@@ -0,0 +1,62 @@
+"use client";
+
+import Link from "next/link";
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { AlertCircle } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card";
+import { Logo } from "@/components/utils/logo";
+import { useSearchParams } from "next/navigation";
+import { getError } from "./errors";
+
+export const Error = () => {
+  const searchParams = useSearchParams();
+
+  const errorCode = searchParams.get("errorCode");
+
+  const { description, action, href } = getError(errorCode || "");
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-background relative">
+      <div className="absolute left-8 top-8 text-lg font-semibold text-primary">
+        <h1 className="text-4xl font-noto-sans-mono font-extralight text-foreground uppercase">
+          Whiteboard
+        </h1>
+        <h2 className="text-2xl font-noto-sans-mono font-extralight text-muted-foreground uppercase">
+          Error
+        </h2>
+      </div>
+      <div className="absolute left-8 bottom-8 text-lg font-semibold text-primary">
+        <Logo />
+      </div>
+
+      <Card className="mx-auto max-w-md shadow-lg border-0 shadow-none">
+        <CardHeader className="flex flex-col items-center text-center">
+          <div className="mb-4 rounded-full bg-destructive/10 p-3">
+            <AlertCircle className="h-10 w-10 text-destructive" />
+          </div>
+          <h3 className="text-xl font-noto-sans font-extralight">
+            An error has occurred
+          </h3>
+        </CardHeader>
+
+        <CardContent className="text-center">
+          <p>
+            <span className="text-sm font-noto-sans-mono">{description}</span>
+          </p>
+        </CardContent>
+
+        <CardFooter className="flex flex-col mt-3">
+          <Button asChild className="w-full font-noto-sans-mono uppercase">
+            <Link href={href}>{action}</Link>
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+};