create-weave-frontend-app 0.1.0

package/template/+nextjs+azure-web-pubsub/components/room-components/toggle-icon-button.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+
+type ToggleIconButtonKind = "toggle" | "switch";
+
+interface ToggleIconButtonCommonProps {
+  kind: ToggleIconButtonKind;
+  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  pressed: boolean;
+  disabled?: boolean;
+}
+
+type ToggleIconButtonToggleProps = ToggleIconButtonCommonProps & {
+  kind: "toggle";
+  icon: React.ReactNode;
+  pressedIcon: React.ReactNode;
+};
+
+type ToggleIconButtonSwitchProps = ToggleIconButtonCommonProps & {
+  kind: "switch";
+  icon: React.ReactNode;
+  pressedIcon?: never;
+};
+
+type ToggleIconButtonProps =
+  | ToggleIconButtonToggleProps
+  | ToggleIconButtonSwitchProps;
+
+export const ToggleIconButton = (props: Readonly<ToggleIconButtonProps>) => {
+  const { kind, onClick, pressed, disabled, icon, pressedIcon } = props;
+
+  const [isPressed, setIsPressed] = React.useState<boolean>(pressed);
+
+  React.useEffect(() => {
+    setIsPressed(pressed);
+  }, [pressed]);
+
+  return (
+    <button
+      className={cn(
+        "flex items-center justify-center cursor-pointer p-1",
+        "transition-all duration-200 ease-in-out",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        {
+          ["p-1"]: kind === "switch",
+          ["bg-white hover:bg-accent"]:
+            (kind === "switch" && !isPressed) || kind === "toggle",
+          ["bg-zinc-700 text-white"]: kind === "switch" && isPressed,
+        }
+      )}
+      disabled={disabled}
+      onClick={(e) => onClick?.(e)}
+    >
+      {kind === "toggle" && (isPressed ? pressedIcon : icon)}
+      {kind === "switch" && icon}
+    </button>
+  );
+};

package/template/+nextjs+azure-web-pubsub/components/room-components/toolbar/toolbar-button.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+type ToolbarButtonProps = {
+  icon: React.ReactNode;
+  onClick: () => void;
+  active?: boolean;
+  disabled?: boolean;
+  label?: React.ReactNode;
+  tooltipSide?: "top" | "bottom" | "left" | "right";
+  tooltipAlign?: "start" | "center" | "end";
+};
+
+export function ToolbarButton({
+  icon,
+  label = "tool",
+  onClick,
+  disabled = false,
+  active = false,
+  tooltipSide = "right",
+  tooltipAlign = "center",
+}: Readonly<ToolbarButtonProps>) {
+  return (
+    <TooltipProvider delayDuration={300}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            className={cn(
+              "pointer-events-auto relative cursor-pointer hover:text-black hover:bg-accent px-2 py-2 flex justify-center items-center",
+              {
+                ["bg-zinc-700 text-white"]: active,
+                ["pointer-events-none cursor-default text-black opacity-50"]:
+                  disabled,
+              }
+            )}
+            disabled={disabled}
+            onClick={onClick}
+          >
+            {icon}
+          </button>
+        </TooltipTrigger>
+        <TooltipContent
+          side={tooltipSide}
+          align={tooltipAlign}
+          className="rounded-none"
+        >
+          {label}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

package/template/+nextjs+azure-web-pubsub/components/room-components/toolbar/toolbar-toggle-button.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import React from "react";
+
+type ToolbarToggleButtonProps = {
+  icon: React.ReactNode;
+  onClick: () => void;
+  pressed: boolean;
+  disabled?: boolean;
+};
+
+export const ToolbarToggleButton = ({
+  icon,
+  onClick,
+  pressed,
+  disabled = false,
+}: Readonly<ToolbarToggleButtonProps>) => {
+  const [isPressed, setIsPressed] = React.useState<boolean>(pressed);
+
+  React.useEffect(() => {
+    setIsPressed(pressed);
+  }, [pressed]);
+
+  return (
+    <button
+      className={cn(
+        "pointer-events-auto cursor-pointer bg-light-background-1 hover:bg-light-background-2 active:bg-light-background-3 disabled:cursor-default disabled:bg-light-background-disabled disabled:text-light-content-disabled px-3 py-3 flex justify-center items-center",
+        {
+          ["bg-light-background-1"]: !isPressed,
+          ["bg-light-background-3"]: isPressed,
+        },
+      )}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {icon}
+    </button>
+  );
+};

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

@@ -0,0 +1,28 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import React from "react";
+
+type ToolbarProps = {
+  children: React.ReactNode;
+  orientation?: "horizontal" | "vertical";
+};
+
+export const Toolbar = ({
+  children,
+  orientation = "vertical",
+}: Readonly<ToolbarProps>) => {
+  return (
+    <div
+      className={cn(
+        "pointer-events-none gap-[1px] shadow-lg px-1 py-1 bg-white border border-light-border-3 pointer-events-auto",
+        {
+          ["flex"]: orientation === "horizontal",
+          ["flex flex-col"]: orientation === "vertical",
+        }
+      )}
+    >
+      {children}
+    </div>
+  );
+};

package/template/+nextjs+azure-web-pubsub/components/room-components/upload-file.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import { useCollaborationRoom } from '@/store/store';
+import { useMutation } from '@tanstack/react-query';
+import { postImage } from '@/api/post-image';
+import { useWeave } from '@inditextech/weave-react';
+
+export function UploadFile() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const inputFileRef = React.useRef<any>(null);
+
+  const instance = useWeave((state) => state.instance);
+
+  const room = useCollaborationRoom((state) => state.room);
+  const showSelectFile = useCollaborationRoom(
+    (state) => state.images.showSelectFile
+  );
+  const setUploadingImage = useCollaborationRoom(
+    (state) => state.setUploadingImage
+  );
+  const setShowSelectFileImage = useCollaborationRoom(
+    (state) => state.setShowSelectFileImage
+  );
+
+  const mutationUpload = useMutation({
+    mutationFn: async (file: File) => {
+      return await postImage(room ?? '', file);
+    },
+  });
+
+  const handleUploadFile = React.useCallback(
+    (file: File) => {
+      if (!['image/jpeg', 'image/png'].includes(file.type)) {
+        return;
+      }
+
+      if (file) {
+        setUploadingImage(true);
+        mutationUpload.mutate(file, {
+          onSuccess: (data) => {
+            if (instance) {
+              inputFileRef.current.value = null;
+              const room = data.fileName.split('/')[0];
+              const imageId = data.fileName.split('/')[1];
+
+              const { finishUploadCallback } = instance.triggerAction(
+                'imageTool'
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              ) as any;
+
+              finishUploadCallback?.(
+                `${process.env.NEXT_PUBLIC_API_ENDPOINT}/rooms/${room}/images/${imageId}`
+              );
+            }
+          },
+          onError: () => {
+            console.error('Error uploading image');
+          },
+          onSettled: () => {
+            setUploadingImage(false);
+          },
+        });
+      }
+    },
+    [instance, mutationUpload, setUploadingImage]
+  );
+
+  React.useEffect(() => {
+    const onStageDrop = (e: DragEvent) => {
+      if (window.weaveDragImageURL) {
+        return;
+      }
+
+      if (e.dataTransfer?.items) {
+        [...e.dataTransfer?.items].forEach((item) => {
+          if (item.kind === 'file') {
+            const file = item.getAsFile();
+            if (file) {
+              handleUploadFile(file);
+            }
+          }
+        });
+        return;
+      }
+      if (e.dataTransfer?.files) {
+        [...e.dataTransfer.files].forEach((file) => {
+          handleUploadFile(file);
+        });
+        return;
+      }
+    };
+
+    if (instance) {
+      instance.addEventListener('onStageDrop', onStageDrop);
+    }
+
+    if (showSelectFile && inputFileRef.current) {
+      inputFileRef.current.click();
+      setShowSelectFileImage(false);
+    }
+
+    return () => {
+      if (instance) {
+        instance.removeEventListener('onStageDrop', onStageDrop);
+      }
+    };
+  }, [
+    instance,
+    showSelectFile,
+    mutationUpload,
+    handleUploadFile,
+    setUploadingImage,
+    setShowSelectFileImage,
+  ]);
+
+  return (
+    <input
+      type="file"
+      accept="image/png,image/gif,image/jpeg"
+      name="image"
+      ref={inputFileRef}
+      className="hidden"
+      onChange={(e) => {
+        const file = e.target.files?.[0];
+        if (file) {
+          handleUploadFile(file);
+        }
+      }}
+    />
+  );
+}

package/template/+nextjs+azure-web-pubsub/components/room-components/with-instance-node.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useWeave } from '@inditextech/weave-react';
+import { Weave } from '@inditextech/weave-sdk';
+import { WeaveStateElement } from '@inditextech/weave-types';
+
+interface InjectedProps {
+  instance: Weave;
+  node: WeaveStateElement;
+}
+
+interface RequiredProps {
+  /**
+   * The types of nodes that this component should be rendered for.
+   * @example ["text", "image"]
+   */
+  types?: string[];
+}
+
+function withInstanceNode<P extends object>(
+  WrappedComponent: React.ComponentType<P & InjectedProps>
+): React.FC<Omit<P, keyof InjectedProps> & RequiredProps> {
+  const ComponentWithInstanceNode: React.FC<
+    Omit<P, keyof InjectedProps> & RequiredProps
+  > = (props) => {
+    const instance = useWeave((state) => state.instance);
+    const node = useWeave((state) => state.selection.node);
+
+    if (!instance || !node) {
+      return null;
+    }
+
+    if (props.types && !props.types.includes(node.type)) {
+      return null;
+    }
+
+    return (
+      <WrappedComponent
+        {...(props as unknown as P)}
+        instance={instance}
+        node={node}
+      />
+    );
+  };
+
+  const wrappedComponentName =
+    WrappedComponent.displayName || WrappedComponent.name || 'Component';
+
+  ComponentWithInstanceNode.displayName = `withInstanceNode(${wrappedComponentName})`;
+
+  return ComponentWithInstanceNode;
+}
+
+export default withInstanceNode;

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

@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

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

@@ -0,0 +1,58 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

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

@@ -0,0 +1,68 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn("flex flex-col gap-1.5 px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6", className)}
+      {...props}
+    />
+  )
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

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

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }