create-weave-frontend-app 0.1.0

package/template/+nextjs+websockets/components/room-components/images-library/images-library.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import React from 'react';
+import { useInfiniteQuery, useMutation } from '@tanstack/react-query';
+import { ImagePlus, Trash } from 'lucide-react';
+import { useWeave } from '@inditextech/weave-react';
+import { useCollaborationRoom } from '@/store/store';
+import { getImages } from '@/api/get-images';
+import { postImage } from '@/api/post-image';
+import { delImage } from '@/api/del-image';
+
+export const ImagesLibrary = () => {
+  // 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 imagesLibraryVisible = useCollaborationRoom(
+    (state) => state.images.library.visible
+  );
+
+  const mutationUpload = useMutation({
+    mutationFn: async (file: File) => {
+      return await postImage(room ?? '', file);
+    },
+  });
+
+  const mutationDelete = useMutation({
+    mutationFn: async (imageId: string) => {
+      return await delImage(room ?? '', imageId);
+    },
+  });
+
+  const query = useInfiniteQuery({
+    queryKey: ['getImages', room],
+    queryFn: async ({ pageParam }) => {
+      if (!room) {
+        return [];
+      }
+      return await getImages(room ?? '', 20, pageParam);
+    },
+    initialPageParam: '',
+    getNextPageParam: (lastPage) => lastPage.continuationToken,
+  });
+
+  const linearData = React.useMemo(() => {
+    return query.data?.pages.flatMap((page) => page.images) ?? [];
+  }, [query.data]);
+
+  if (!instance) {
+    return null;
+  }
+
+  if (!imagesLibraryVisible) {
+    return null;
+  }
+
+  return (
+    <div className="pointer-events-auto w-full h-full">
+      <div className="w-[calc(100%-38px)] font-title-xs p-1 pr-0 flex justify-between items-center">
+        <div className="flex justify-between font-noto-sans-mono font-light items-center text-md pl-2">
+          Images
+        </div>
+        <div className="flex justify-end items-center gap-1">
+          <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) {
+                mutationUpload.mutate(file, {
+                  onSuccess: () => {
+                    query.refetch();
+                  },
+                });
+              }
+            }}
+          />
+          <button
+            className="cursor-pointer bg-transparent hover:bg-accent p-2"
+            onClick={() => {
+              if (inputFileRef.current) {
+                inputFileRef.current.click();
+                // instance.triggerAction("imageTool");
+              }
+            }}
+          >
+            <ImagePlus size={16} />
+          </button>
+        </div>
+      </div>
+      <div className="flex flex-col gap-2 w-full h-[calc(100%-50px)] border-t border-zinc-200">
+        <div
+          className="grid grid-cols-2 gap-2 w-full weaveDraggable p-4"
+          onDragStart={(e) => {
+            if (e.target instanceof HTMLImageElement) {
+              window.weaveDragImageURL = e.target.src;
+            }
+          }}
+        >
+          {linearData.length === 0 && (
+            <div className="col-span-2 w-full flex flex-col justify-center items-center text-sm py-5 text-center">
+              <b>No images uploaded</b>
+              <span className="text-xs">Add an image to the whiteboard</span>
+            </div>
+          )}
+          {linearData.length > 0 &&
+            linearData.map((image) => {
+              const imageUrl = `${process.env.NEXT_PUBLIC_API_ENDPOINT}/rooms/${room}/images/${image}`;
+
+              return (
+                <div
+                  key={image}
+                  className="group w-full h-[100px] bg-light-background-1 object-cover cursor-pointer border border-zinc-200 relative"
+                >
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    className="w-full h-full object-cover"
+                    draggable="true"
+                    src={imageUrl}
+                    alt="An image"
+                  />
+                  <button
+                    className="absolute bottom-[8px] right-[8px] bg-white p-2 border border-zinc-200 rounded hidden group-hover:block cursor-pointer"
+                    onClick={() => {
+                      mutationDelete.mutate(image, {
+                        onSuccess: () => {
+                          query.refetch();
+                        },
+                      });
+                    }}
+                  >
+                    <Trash size={16} />
+                  </button>
+                </div>
+              );
+            })}
+        </div>
+      </div>
+    </div>
+  );
+};

package/template/+nextjs+websockets/components/room-components/inputs/input-color.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Input } from "@/components/ui/input";
+import {
+  ColorPicker,
+  ColorPickerAlpha,
+  ColorPickerEyeDropper,
+  ColorPickerFormatEditor,
+  ColorPickerHue,
+  ColorPickerFormatSelector,
+  ColorPickerSaturation,
+} from "@/components/ui/color-picker";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+type InputColorProps = {
+  label?: string;
+  value: string;
+  onChange: (value: string) => void;
+};
+
+export const InputColor = ({
+  label,
+  value,
+  onChange,
+}: Readonly<InputColorProps>) => {
+  const [actualValue, setActualValue] = useState<string>(value);
+
+  useEffect(() => {
+    setActualValue(value);
+  }, [value]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setActualValue(e.target.value);
+  };
+
+  const handleBlur = () => {
+    onChange(actualValue);
+  };
+
+  return (
+    <div className="flex flex-col items-start justify-start relative">
+      {label && (
+        <div className="text-zinc-600 mb-1 text-[11px] font-noto-sans-mono font-light">
+          {label}
+        </div>
+      )}
+      <div className="w-full flex items-center relative">
+        <Popover>
+          <PopoverTrigger>
+            <div
+              className="cursor-pointer shrink-0 w-[32px] h-[32px] mr-1 border border-zinc-200 rounded-none"
+              style={{ background: `#${actualValue}` }}
+            />
+          </PopoverTrigger>
+          <PopoverContent>
+            <ColorPicker
+              value={`#${actualValue}`}
+              onChange={(color) => {
+                onChange((color as string).slice(1));
+              }}
+            >
+              <ColorPickerSaturation />
+              <div className="flex items-center gap-4">
+                <ColorPickerEyeDropper />
+                <div className="w-full grid gap-1">
+                  <ColorPickerHue />
+                  <ColorPickerAlpha />
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <ColorPickerFormatSelector />
+                <ColorPickerFormatEditor />
+              </div>
+            </ColorPicker>
+          </PopoverContent>
+        </Popover>
+
+        <Input
+          type="text"
+          className="w-full py-0 h-[32px] rounded-none !text-xs font-normal text-gray-700 text-right focus:outline-none bg-transparent shadow-none"
+          value={actualValue}
+          onChange={handleInputChange}
+          onBlur={handleBlur}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              e.stopPropagation();
+              const input = e.target as HTMLInputElement;
+              input.blur();
+            }
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/template/+nextjs+websockets/components/room-components/inputs/input-font-family.tsx

@@ -0,0 +1,99 @@
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Check, ChevronDown } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { useEffect, useRef, useState } from "react";
+import { FONTS } from "@/components/utils/constants";
+
+function InputFontFamily({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const [selectedFont, setSelectedFont] = useState<string>(value);
+  const [open, setOpen] = useState(false);
+  const lastSelectedFontFamily = useRef<string>(value);
+
+  useEffect(() => {
+    if (onChange && selectedFont !== lastSelectedFontFamily.current) {
+      lastSelectedFontFamily.current = selectedFont;
+      onChange(selectedFont);
+    }
+  }, [selectedFont, onChange]);
+
+  return (
+    <div className="flex flex-col items-start justify-start relative">
+      <div className="text-zinc-600 mb-1 text-[11px] font-noto-sans-mono font-light">
+        Font Family
+      </div>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger className="w-full">
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className="w-full h-[32px] rounded-none !text-xs text-gray-700 justify-between font-normal bg-transparent shadow-none"
+            style={{ fontFamily: selectedFont }}
+          >
+            {selectedFont}
+            <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="rounded-none p-0 w-[var(--radix-popover-trigger-width)]">
+          <Command>
+            <CommandInput
+              className="!text-xs text-gray-700 justify-between font-normal bg-transparent shadow-none"
+              placeholder="Search font..."
+            />
+            <CommandList>
+              <CommandEmpty>
+                <span className="!text-xs text-gray-700 justify-between font-normal bg-transparent shadow-none">
+                  No font found.
+                </span>
+              </CommandEmpty>
+              <CommandGroup>
+                {FONTS.map((font) => (
+                  <CommandItem
+                    key={font.id}
+                    value={font.name}
+                    onSelect={() => {
+                      setSelectedFont(font.name);
+                      setOpen(false);
+                    }}
+                    className="flex items-center"
+                  >
+                    <span
+                      className="!text-xs text-gray-700 justify-between font-normal bg-transparent shadow-none"
+                      style={{ fontFamily: font.name }}
+                    >
+                      {font.name}
+                    </span>
+                    {selectedFont === font.id && (
+                      <Check className="ml-auto h-4 w-4" />
+                    )}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
+export default InputFontFamily;

package/template/+nextjs+websockets/components/room-components/inputs/input-number.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import React from "react";
+import { NumberInput } from "./number-input";
+
+type InputNumberProps = {
+  label?: string;
+  disabled?: boolean;
+  value: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+};
+
+export const InputNumber = ({
+  label,
+  value,
+  onChange,
+  disabled = false,
+  min = -Infinity,
+  max = Infinity,
+}: Readonly<InputNumberProps>) => {
+  const [actualValue, setActualValue] = React.useState<string>(`${value}`);
+
+  React.useEffect(() => {
+    setActualValue(`${value}`);
+  }, [value]);
+
+  const handleBlur = () => {
+    let numberToSave = actualValue === "" ? "0" : actualValue;
+    numberToSave = numberToSave.replace(/^0+/, "");
+    if (isNaN(parseFloat(numberToSave))) {
+      numberToSave = "0";
+    }
+    onChange?.(parseFloat(actualValue));
+  };
+
+  return (
+    <NumberInput
+      label={label}
+      disabled={disabled}
+      min={min}
+      max={max}
+      decimalScale={2}
+      className="w-full text-xs font-normal text-gray-700 text-right focus:outline-none bg-transparent"
+      value={Number(actualValue)}
+      onChange={(e) => {
+        setActualValue(e.target.value);
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          e.stopPropagation();
+          const input = e.target as HTMLInputElement;
+          input.blur();
+        }
+      }}
+      onBlur={handleBlur}
+    />
+  );
+};

package/template/+nextjs+websockets/components/room-components/inputs/input-text.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import React from "react";
+import { Input } from "@/components/ui/input";
+
+type InputTextProps = {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+};
+
+export const InputText = ({
+  label,
+  value,
+  onChange,
+}: Readonly<InputTextProps>) => {
+  const [actualValue, setActualValue] = React.useState<string>(`${value}`);
+
+  React.useEffect(() => {
+    setActualValue(`${value}`);
+  }, [value]);
+
+  return (
+    <div className="flex flex-col items-start justify-start relative">
+      {label && (
+        <div className="text-zinc-600 mb-1 text-[11px] font-noto-sans-mono font-light">
+          {label}
+        </div>
+      )}
+      <Input
+        type="text"
+        className="w-full py-0 h-[32px] rounded-none !text-xs font-normal text-gray-700 text-left focus:outline-none bg-transparent shadow-none"
+        value={actualValue}
+        onChange={(e) => {
+          setActualValue(e.target.value);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            e.stopPropagation();
+            const input = e.target as HTMLInputElement;
+            input.blur();
+          }
+        }}
+        onBlur={() => {
+          onChange(actualValue);
+        }}
+      />
+    </div>
+  );
+};

package/template/+nextjs+websockets/components/room-components/inputs/number-input.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import { NumericFormat, NumericFormatProps } from "react-number-format";
+import { Input } from "@/components/ui/input";
+
+export interface NumberInputProps
+  extends Omit<NumericFormatProps, "value" | "onValueChange"> {
+  label?: string;
+  stepper?: number;
+  thousandSeparator?: string;
+  placeholder?: string;
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  value?: number; // Controlled value
+  suffix?: string;
+  prefix?: string;
+  onValueChange?: (value: number | undefined) => void;
+  fixedDecimalScale?: boolean;
+  decimalScale?: number;
+}
+
+export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
+  (
+    {
+      label,
+      thousandSeparator,
+      placeholder,
+      defaultValue,
+      min = -Infinity,
+      max = Infinity,
+      onValueChange,
+      fixedDecimalScale = false,
+      decimalScale = 0,
+      value: controlledValue,
+      ...props
+    },
+    ref
+  ) => {
+    const [value, setValue] = React.useState<number | undefined>(
+      controlledValue ?? defaultValue
+    );
+
+    React.useEffect(() => {
+      if (controlledValue !== undefined) {
+        setValue(controlledValue);
+      }
+    }, [controlledValue]);
+
+    const handleChange = (values: {
+      value: string;
+      floatValue: number | undefined;
+    }) => {
+      const newValue =
+        values.floatValue === undefined ? undefined : values.floatValue;
+      setValue(newValue);
+      if (onValueChange) {
+        onValueChange(newValue);
+      }
+    };
+
+    const handleBlur = () => {
+      if (value !== undefined) {
+        if (value < min) {
+          setValue(min);
+          (ref as React.RefObject<HTMLInputElement>).current!.value =
+            String(min);
+        } else if (value > max) {
+          setValue(max);
+          (ref as React.RefObject<HTMLInputElement>).current!.value =
+            String(max);
+        }
+      }
+    };
+
+    return (
+      <div className="flex flex-col items-start justify-start relative">
+        {label && (
+          <div className="text-zinc-600 mb-1 text-[11px] font-noto-sans-mono font-light">
+            {label}
+          </div>
+        )}
+
+        <div className="w-full flex items-center relative">
+          <NumericFormat
+            value={value}
+            onValueChange={handleChange}
+            thousandSeparator={thousandSeparator}
+            decimalScale={decimalScale}
+            fixedDecimalScale={fixedDecimalScale}
+            allowNegative={min < 0}
+            valueIsNumericString
+            onBlur={handleBlur}
+            max={max}
+            min={min}
+            customInput={Input}
+            placeholder={placeholder}
+            getInputRef={ref}
+            {...props}
+            className="w-full py-0 h-[32px] rounded-none !text-xs font-normal text-gray-700 text-right focus:outline-none bg-transparent shadow-none"
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+NumberInput.displayName = "NumberInput";

package/template/+nextjs+websockets/components/room-components/node-properties/appearance-properties.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { WeaveStateElement } from '@inditextech/weave-types';
+import { InputNumber } from '../inputs/input-number';
+import { useWeave } from '@inditextech/weave-react';
+import { useCollaborationRoom } from '@/store/store';
+
+export function AppearanceProperties() {
+  const instance = useWeave((state) => state.instance);
+  const node = useWeave((state) => state.selection.node);
+  const actualAction = useWeave((state) => state.actions.actual);
+
+  const nodePropertiesAction = useCollaborationRoom(
+    (state) => state.nodeProperties.action
+  );
+
+  const nodeCreateProps = useCollaborationRoom(
+    (state) => state.nodeProperties.createProps
+  );
+
+  const [actualNode, setActualNode] = React.useState<
+    WeaveStateElement | undefined
+  >(node);
+
+  React.useEffect(() => {
+    if (!instance) return;
+    if (actualAction && nodePropertiesAction === 'create') {
+      setActualNode({
+        key: 'creating',
+        type: 'undefined',
+        props: {
+          ...nodeCreateProps,
+        },
+      });
+    }
+    if (node && nodePropertiesAction === 'update') {
+      setActualNode(node);
+    }
+    if (!actualAction && !node) {
+      setActualNode(undefined);
+    }
+  }, [instance, actualAction, node, nodePropertiesAction, nodeCreateProps]);
+
+  const updateElement = React.useCallback(
+    (updatedNode: WeaveStateElement) => {
+      if (!instance) return;
+      if (actualAction && nodePropertiesAction === 'create') {
+        instance.updatePropsAction(actualAction, updatedNode.props);
+      }
+      if (nodePropertiesAction === 'update') {
+        instance.updateNode(updatedNode);
+      }
+    },
+    [instance, actualAction, nodePropertiesAction]
+  );
+
+  if (!instance || !actualAction || !actualNode) return null;
+
+  if (!actualAction && !actualNode) return null;
+
+  if (['colorTokenTool', 'frameTool'].includes(actualAction)) return null;
+
+  return (
+    <div className="border-b border-zinc-200">
+      <div className="w-full flex justify-between items-center gap-3 p-4 py-3">
+        <div className="cursor-pointer hover:no-underline items-center py-0">
+          <span className="text-xs font-noto-sans-mono font-light">
+            Appearance
+          </span>
+        </div>
+      </div>
+      <div className="px-4 pb-4">
+        <div className="grid grid-cols-2 gap-3 w-full">
+          <div
+            className={cn({
+              ['col-span-1']: ['rectangle'].includes(actualNode.type),
+              ['col-span-2']: !['rectangle'].includes(actualNode.type),
+            })}
+          >
+            <InputNumber
+              label="Opacity (%)"
+              max={100}
+              min={0}
+              value={(actualNode.props.opacity ?? 1) * 100}
+              onChange={(value) => {
+                const updatedNode: WeaveStateElement = {
+                  ...actualNode,
+                  props: {
+                    ...actualNode.props,
+                    opacity: value / 100,
+                  },
+                };
+                updateElement(updatedNode);
+              }}
+            />
+          </div>
+          {['rectangle'].includes(actualNode.type) && (
+            <InputNumber
+              label="Corner Radius (px)"
+              value={actualNode.props.cornerRadius ?? 0}
+              onChange={(value) => {
+                const updatedNode: WeaveStateElement = {
+                  ...actualNode,
+                  props: {
+                    ...actualNode.props,
+                    cornerRadius: value,
+                  },
+                };
+                updateElement(updatedNode);
+              }}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}