create-weave-frontend-app 0.1.0

package/template/+nextjs+websockets/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+websockets/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+websockets/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/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "example-versions",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Used to track dependency versions in create-*-app",
+  "license": "MIT",
+  "dependencies": {
+    "@hookform/resolvers": "^4.1.3",
+    "@inditextech/weave-react": "0.0.0",
+    "@inditextech/weave-sdk": "0.0.0",
+    "@inditextech/weave-store-websockets": "0.0.0",
+    "@inditextech/weave-store-azure-web-pubsub": "0.0.0",
+    "@inditextech/weave-types": "0.0.0",
+    "@next/env": "^15.2.1",
+    "@radix-ui/react-accordion": "^1.2.3",
+    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "@react-three/fiber": "^8.18.0",
+    "@react-three/postprocessing": "^2.19.1",
+    "@tanstack/react-query": "^5.67.1",
+    "boring-avatars": "^1.11.2",
+    "canvas": "^3.1.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
+    "color": "^5.0.0",
+    "framer-motion": "^11.18.2",
+    "konva": "^9.3.18",
+    "motion": "^12.4.7",
+    "next": "14.2.24",
+    "next-themes": "^0.4.6",
+    "ogl": "^1.0.11",
+    "onnxruntime-web": "^1.21.0-dev.20250206-d981b153d3",
+    "pdf-lib": "^1.17.1",
+    "platform-detect": "^3.0.1",
+    "postprocessing": "^6.37.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-hook-form": "^7.54.2",
+    "react-number-format": "^5.4.3",
+    "sharp": "^0.33.5",
+    "sonner": "^2.0.3",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss-animate": "^1.0.7",
+    "three": "^0.167.1",
+    "uuid": "^11.1.0",
+    "vaul": "^1.1.2",
+    "zod": "^3.24.2",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.2.0",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^3.0.7",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.24",
+    "eslint-config-prettier": "^10.0.2",
+    "jsdom": "^26.0.0",
+    "lucide-react": "^0.477.0",
+    "tailwindcss": "^4",
+    "typescript": "^5",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.0.7"
+  }
+}