create-weave-frontend-app 0.1.0

package/template/+nextjs+azure-web-pubsub/store/store.ts

@@ -0,0 +1,241 @@
+import { Vector2d } from 'konva/lib/types';
+import { create } from 'zustand';
+import { ContextMenuOption } from '@/components/room-components/context-menu';
+import { WeaveElementAttributes } from '@inditextech/weave-types';
+
+type ShowcaseUser = {
+  name: string;
+  email: string;
+};
+
+type NodePropertiesAction = 'create' | 'update' | undefined;
+
+type FinishUploadCallback = (imageURL: string) => void;
+
+interface CollaborationRoomState {
+  fetchConnectionUrl: {
+    loading: boolean;
+    error: Error | null;
+  };
+  ui: {
+    show: boolean;
+  };
+  user: ShowcaseUser | undefined;
+  room: string | undefined;
+  contextMenu: {
+    show: boolean;
+    position: Vector2d;
+    options: ContextMenuOption[];
+  };
+  nodeProperties: {
+    action: NodePropertiesAction;
+    createProps: WeaveElementAttributes | undefined;
+    visible: boolean;
+  };
+  images: {
+    showSelectFile: boolean;
+    transforming: boolean;
+    uploading: boolean;
+    loading: boolean;
+    finishUploadCallback: FinishUploadCallback | null;
+    library: {
+      visible: boolean;
+    };
+  };
+  frames: {
+    library: {
+      visible: boolean;
+    };
+  };
+  colorToken: {
+    library: {
+      visible: boolean;
+    };
+  };
+  setShowUi: (newShowUI: boolean) => void;
+  setFetchConnectionUrlLoading: (newLoading: boolean) => void;
+  setFetchConnectionUrlError: (
+    newFetchConnectionUrlError: Error | null
+  ) => void;
+  setUser: (newUser: ShowcaseUser | undefined) => void;
+  setRoom: (newRoom: string | undefined) => void;
+  setContextMenuShow: (newContextMenuShow: boolean) => void;
+  setContextMenuPosition: (newContextMenuPosition: Vector2d) => void;
+  setContextMenuOptions: (newContextMenuOptions: ContextMenuOption[]) => void;
+  setTransformingImage: (newTransformingImage: boolean) => void;
+  setUploadingImage: (newUploadingImage: boolean) => void;
+  setShowSelectFileImage: (newShowSelectFileImage: boolean) => void;
+  setLoadingImage: (newLoadingImage: boolean) => void;
+  setFinishUploadCallbackImage: (
+    newFinishUploadCallbackImage: FinishUploadCallback | null
+  ) => void;
+  setNodePropertiesAction: (
+    newNodePropertiesAction: NodePropertiesAction
+  ) => void;
+  setNodePropertiesCreateProps: (
+    newNodePropertiesCreateProps: WeaveElementAttributes | undefined
+  ) => void;
+  setNodePropertiesVisible: (newNodePropertiesVisible: boolean) => void;
+  setImagesLibraryVisible: (newImagesLibraryVisible: boolean) => void;
+  setFramesLibraryVisible: (newFramesLibraryVisible: boolean) => void;
+  setColorTokensLibraryVisible: (newColorTokensLibraryVisible: boolean) => void;
+}
+
+export const useCollaborationRoom = create<CollaborationRoomState>()((set) => ({
+  ui: {
+    show: true,
+  },
+  fetchConnectionUrl: {
+    loading: false,
+    error: null,
+  },
+  user: undefined,
+  room: undefined,
+  contextMenu: {
+    show: false,
+    position: { x: 0, y: 0 },
+    options: [],
+  },
+  nodeProperties: {
+    action: undefined,
+    visible: false,
+    createProps: undefined,
+  },
+  images: {
+    showSelectFile: false,
+    transforming: false,
+    uploading: false,
+    loading: false,
+    finishUploadCallback: null,
+    library: {
+      visible: false,
+    },
+  },
+  frames: {
+    library: {
+      visible: false,
+    },
+  },
+  colorToken: {
+    library: {
+      visible: false,
+    },
+  },
+  setShowUi: (newShowUI) =>
+    set((state) => ({
+      ...state,
+      ui: { ...state.ui, show: newShowUI },
+    })),
+  setFetchConnectionUrlLoading: (newLoading) =>
+    set((state) => ({
+      ...state,
+      fetchConnectionUrl: { ...state.fetchConnectionUrl, loading: newLoading },
+    })),
+  setFetchConnectionUrlError: (newFetchConnectionUrlError) =>
+    set((state) => ({
+      ...state,
+      fetchConnectionUrl: {
+        ...state.fetchConnectionUrl,
+        error: newFetchConnectionUrlError,
+      },
+    })),
+  setUser: (newUser) => set((state) => ({ ...state, user: newUser })),
+  setRoom: (newRoom) => set((state) => ({ ...state, room: newRoom })),
+  setContextMenuShow: (newContextMenuShow) =>
+    set((state) => ({
+      ...state,
+      contextMenu: { ...state.contextMenu, show: newContextMenuShow },
+    })),
+  setContextMenuPosition: (newContextMenuPosition) =>
+    set((state) => ({
+      ...state,
+      contextMenu: { ...state.contextMenu, position: newContextMenuPosition },
+    })),
+  setContextMenuOptions: (newContextMenuOptions) =>
+    set((state) => ({
+      ...state,
+      contextMenu: { ...state.contextMenu, options: newContextMenuOptions },
+    })),
+  setTransformingImage: (newTransformingImage) =>
+    set((state) => ({
+      ...state,
+      images: { ...state.images, transforming: newTransformingImage },
+    })),
+  setUploadingImage: (newUploadingImage) =>
+    set((state) => ({
+      ...state,
+      images: { ...state.images, uploading: newUploadingImage },
+    })),
+  setShowSelectFileImage: (newShowSelectFileImage) =>
+    set((state) => ({
+      ...state,
+      images: { ...state.images, showSelectFile: newShowSelectFileImage },
+    })),
+  setLoadingImage: (newLoadingImage) =>
+    set((state) => ({
+      ...state,
+      images: { ...state.images, loading: newLoadingImage },
+    })),
+  setFinishUploadCallbackImage: (newFinishUploadCallbackImage) =>
+    set((state) => ({
+      ...state,
+      images: {
+        ...state.images,
+        finishUploadCallback: newFinishUploadCallbackImage,
+      },
+    })),
+  setNodePropertiesAction: (newNodePropertiesAction) =>
+    set((state) => ({
+      ...state,
+      nodeProperties: {
+        ...state.nodeProperties,
+        action: newNodePropertiesAction,
+      },
+    })),
+  setNodePropertiesCreateProps: (newNodePropertiesCreateProps) =>
+    set((state) => ({
+      ...state,
+      nodeProperties: {
+        ...state.nodeProperties,
+        createProps: newNodePropertiesCreateProps,
+      },
+    })),
+  setNodePropertiesVisible: (newNodePropertiesVisible) =>
+    set((state) => ({
+      ...state,
+      nodeProperties: {
+        ...state.nodeProperties,
+        visible: newNodePropertiesVisible,
+      },
+    })),
+  setImagesLibraryVisible: (newImagesLibraryVisible) =>
+    set((state) => ({
+      ...state,
+      images: {
+        ...state.images,
+        library: { ...state.images.library, visible: newImagesLibraryVisible },
+      },
+    })),
+  setFramesLibraryVisible: (newFramesLibraryVisible) =>
+    set((state) => ({
+      ...state,
+      frames: {
+        ...state.frames,
+        library: {
+          ...state.frames.library,
+          visible: newFramesLibraryVisible,
+        },
+      },
+    })),
+  setColorTokensLibraryVisible: (newColorTokensLibraryVisible) =>
+    set((state) => ({
+      ...state,
+      colorToken: {
+        ...state.colorToken,
+        library: {
+          ...state.colorToken.library,
+          visible: newColorTokensLibraryVisible,
+        },
+      },
+    })),
+}));

package/template/+nextjs+azure-web-pubsub/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"],
+      "konva": ["./node_modules/konva"],
+      "konva/lib/types": ["./node_modules/konva/lib/types"]
+    }
+  },
+  "include": [
+    "new-types.d.ts",
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "next.config.mts"
+  ],
+  "exclude": ["node_modules"]
+}

package/template/+nextjs+azure-web-pubsub/vitest.config.mts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+import tsconfigPaths from 'vite-tsconfig-paths'
+ 
+export default defineConfig({
+  plugins: [tsconfigPaths(), react()],
+  test: {
+    environment: 'jsdom',
+  },
+})

package/template/+nextjs+websockets/README.md

@@ -0,0 +1,39 @@
+# Weave.js Frontend start template
+
+This is a Next.js application was generated with **Create Weave.js Frontend**
+
+## Quickstart
+
+If you skipped the automatic installation of the dependencies, run first this
+command:
+
+```bash
+npm install
+# or
+pnpm install
+# or
+yarn install
+```
+
+This App uses the Weave.js
+[Azure Web Pubsub store](https://inditextech.github.io/weavejs/docs/main/build/stores/azure-web-pubsub-store). So before start the development server please setup on the `.env` file the configuration for your Azure Web Pubsub instance.
+
+After configures, lets run the development server:
+
+```bash
+npm run dev
+# or
+pnpm dev
+# or
+yarn dev
+```
+
+## Learn more
+
+To learn more about Next.js and Weave.js, take a look at the following
+resources:
+
+- [Next.js](https://nextjs.org/) - learn about Next.js
+- [Next.js documentation](https://nextjs.org/docs) - get started using Next.js
+- [Weave.js](https://inditextech.github.io/weavejs) - learn about Weave.js
+- [Weave.js repository](https://github.com/InditexTech/weavejs) - check out out code.

package/template/+nextjs+websockets/api/del-image.ts

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

package/template/+nextjs+websockets/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+websockets/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+websockets/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+websockets/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+websockets/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+websockets/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+websockets/app/page.tsx

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

package/template/+nextjs+websockets/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+websockets/app/room/[roomId]/page.tsx

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