create-weave-frontend-app 0.1.0

package/template/+nextjs+websockets/components/ui/tabs.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/template/+nextjs+websockets/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/template/+nextjs+websockets/components/utils/constants.ts

@@ -0,0 +1,118 @@
+import {
+  WeaveMoveToolAction,
+  WeaveSelectionToolAction,
+  WeaveTextToolAction,
+  WeaveZoomOutToolAction,
+  WeaveZoomInToolAction,
+  WeaveExportNodeToolAction,
+  WeaveExportStageToolAction,
+  WeaveFitToScreenToolAction,
+  WeaveFitToSelectionToolAction,
+  WeaveNodesSnappingPlugin,
+  WeaveStageNode,
+  WeaveLayerNode,
+  WeaveGroupNode,
+  WeaveRectangleNode,
+  WeaveLineNode,
+  WeaveTextNode,
+  WeaveImageNode,
+  WeaveFrameNode,
+} from '@inditextech/weave-sdk';
+import { ColorTokenNode } from '@/components/nodes/color-token/color-token';
+import { AlignElementsToolAction } from '@/components/actions/align-elements-tool/align-elements-tool';
+
+const FONTS = [
+  {
+    id: 'NotoSansMono',
+    name: 'NotoSansMono, monospace',
+  },
+  {
+    id: 'Arial',
+    name: 'Arial, sans-serif',
+  },
+  {
+    id: 'Helvetica',
+    name: 'Helvetica, sans-serif',
+  },
+  {
+    id: 'TimesNewRoman',
+    name: 'Times New Roman, serif',
+  },
+  {
+    id: 'Times',
+    name: 'Times, serif',
+  },
+  {
+    id: 'CourierNew',
+    name: 'Courier New, monospace',
+  },
+  {
+    id: 'Courier',
+    name: 'Courier, monospace',
+  },
+  {
+    id: 'Verdana',
+    name: 'Verdana, sans-serif',
+  },
+  {
+    id: 'Georgia',
+    name: 'Georgia, serif',
+  },
+  {
+    id: 'Palatino',
+    name: 'Palatino, serif',
+  },
+  {
+    id: 'Garamond',
+    name: 'Garamond, serif',
+  },
+  {
+    id: 'Bookman',
+    name: 'Bookman, serif',
+  },
+  {
+    id: 'ComicSansMS',
+    name: 'Comic Sans MS, cursive',
+  },
+  {
+    id: 'TrebuchetMS',
+    name: 'Trebuchet MS, sans-serif',
+  },
+  {
+    id: 'ArialBlack',
+    name: 'Arial Black, sans-serif',
+  },
+  {
+    id: 'Impact',
+    name: 'Impact, sans-serif',
+  },
+];
+
+const NODES = [
+  new WeaveStageNode(),
+  new WeaveLayerNode(),
+  new WeaveGroupNode(),
+  new WeaveRectangleNode(),
+  new WeaveLineNode(),
+  new WeaveTextNode(),
+  new WeaveImageNode(),
+  new WeaveFrameNode(),
+  new ColorTokenNode(),
+];
+
+const ACTIONS = [
+  new WeaveMoveToolAction(),
+  new WeaveSelectionToolAction(),
+  new WeaveTextToolAction(),
+  new WeaveZoomOutToolAction(),
+  new WeaveZoomInToolAction(),
+  new WeaveFitToScreenToolAction(),
+  new WeaveFitToSelectionToolAction(),
+  new AlignElementsToolAction(),
+  new WeaveExportNodeToolAction(),
+  new WeaveExportStageToolAction(),
+];
+
+const CUSTOM_PLUGINS = [new WeaveNodesSnappingPlugin()];
+
+export { FONTS, NODES, ACTIONS, CUSTOM_PLUGINS };

package/template/+nextjs+websockets/components/utils/logo.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import Image from "next/image";
+import logoSrc from "@/assets/images/logo.png";
+import { cn } from "@/lib/utils";
+
+type LogoProps = {
+  kind?: "large" | "small";
+  variant?: "no-text" | "text";
+};
+
+export function Logo({
+  kind = "large",
+  variant = "text",
+}: Readonly<LogoProps>) {
+  return (
+    <div className="p-0 bg-transparent flex justify-start items-center gap-2">
+      <Image
+        src={logoSrc}
+        width={kind === "large" ? 64 : 32}
+        height={kind === "large" ? 64 : 32}
+        className={cn(`object-cover`, {
+          ["w-11 h-11"]: kind === "large",
+          ["w-8 h-8"]: kind === "small",
+        })}
+        alt="Weave.js logo"
+      />
+      {variant === "text" && (
+        <div className="font-noto-sans-mono text-muted-foreground !normal-case">
+          Weave.js
+        </div>
+      )}
+    </div>
+  );
+}

package/template/+nextjs+websockets/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/template/+nextjs+websockets/example.env

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_API_ENDPOINT=/weavebff/api/v1
+BACKEND_ENDPOINT=http://localhost:8080

package/template/+nextjs+websockets/example.gitignore

@@ -0,0 +1,44 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.npmrc
+certificates

package/template/+nextjs+websockets/jsrepo.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/jsrepo@1.44.2/schemas/project-config.json",
+  "repos": ["https://reactbits.dev/ts/tailwind"],
+  "includeTests": false,
+  "watermark": true,
+  "formatter": "prettier",
+  "configFiles": {},
+  "paths": {
+    "*": "./components/ui/reactbits"
+  }
+}

package/template/+nextjs+websockets/lib/utils.ts

@@ -0,0 +1,43 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+import * as platforms from "platform-detect";
+
+export const SYSTEM_OS = {
+  ["WINDOWS"]: "Windows",
+  ["ANDROID"]: "Android",
+  ["MAC"]: "Mac",
+  ["IOS"]: "iOS",
+  ["LINUX"]: "Linux",
+  ["OTHER"]: "Other",
+} as const;
+
+export type SystemOsType = keyof typeof SYSTEM_OS;
+export type SystemOs = (typeof SYSTEM_OS)[SystemOsType];
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function colorIsLight(bgColor: string) {
+  const color = bgColor.charAt(0) === "#" ? bgColor.substring(1, 7) : bgColor;
+  const r = parseInt(color.substring(0, 2), 16); // hexToR
+  const g = parseInt(color.substring(2, 4), 16); // hexToG
+  const b = parseInt(color.substring(4, 6), 16); // hexToB
+  const a = 1 - (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return a < 0.5;
+}
+
+export function detectOS() {
+  if (platforms.windows) {
+    return SYSTEM_OS.WINDOWS;
+  } else if (platforms.android) {
+    return SYSTEM_OS.ANDROID;
+  } else if (platforms.macos) {
+    return SYSTEM_OS.MAC;
+  } else if (platforms.ios) {
+    return SYSTEM_OS.IOS;
+  } else if (platforms.linux) {
+    return SYSTEM_OS.LINUX;
+  }
+  return SYSTEM_OS.OTHER;
+}

package/template/+nextjs+websockets/new-types.d.ts

@@ -0,0 +1,8 @@
+interface Window {
+  weave: Weave;
+  weaveTextEditing?: boolean;
+  weaveDragImageURL?: string;
+  colorTokenDragColor?: string;
+}
+
+declare module 'platform-detect';

package/template/+nextjs+websockets/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

package/template/+nextjs+websockets/next.config.js

@@ -0,0 +1,52 @@
+const nextConfig = {
+  output: "standalone",
+  reactStrictMode: false,
+  webpack: (config) => {
+    config.externals = [...config.externals, { canvas: "canvas" }]; // required to make Konva work
+    return config;
+  },
+  experimental: {
+    proxyTimeout: 60000 * 5,
+  },
+  async rewrites() {
+    return {
+      beforeFiles: [
+        {
+          source: "/weavebff/:path*",
+          destination: `${process.env.BACKEND_ENDPOINT}/:path*`, // Proxy to Backend
+        },
+      ],
+    };
+  },
+  headers() {
+    return [
+      {
+        source: "/:path*",
+        headers: [
+          {
+            key: "Cross-Origin-Opener-Policy",
+            value: "same-origin",
+          },
+          {
+            key: "Cross-Origin-Embedder-Policy",
+            value: "require-corp",
+          },
+        ],
+      },
+    ];
+  },
+  images: {
+    localPatterns: [
+      {
+        pathname: "/assets/images/**",
+        search: "",
+      },
+      {
+        pathname: "/weavebff/api/v1/weavejs/rooms/**/images/**",
+        search: "",
+      },
+    ],
+  },
+};
+
+module.exports = nextConfig;

package/template/+nextjs+websockets/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;