create-weave-frontend-app 0.1.0

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

@@ -0,0 +1,467 @@
+'use client';
+
+import React from 'react';
+import {
+  AlignCenter,
+  AlignCenterHorizontal,
+  AlignEndHorizontal,
+  AlignLeft,
+  AlignRight,
+  AlignStartHorizontal,
+  Bold,
+  CaseSensitive,
+  CaseUpper,
+  Italic,
+  RemoveFormatting,
+  Strikethrough,
+  Underline,
+} from 'lucide-react';
+import { WeaveStateElement } from '@inditextech/weave-types';
+import { InputNumber } from '../inputs/input-number';
+import { useWeave } from '@inditextech/weave-react';
+import { useCollaborationRoom } from '@/store/store';
+import { InputColor } from '../inputs/input-color';
+import { ToggleIconButton } from '../toggle-icon-button';
+import InputFontFamily from '../inputs/input-font-family';
+
+export function TextProperties() {
+  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, nodeCreateProps, nodePropertiesAction]);
+
+  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 (!['text'].includes(actualNode.type)) {
+    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">
+            Typography
+          </span>
+        </div>
+      </div>
+      <div className="px-4 pb-4">
+        <div className="grid grid-cols-2 gap-3 w-full">
+          <div className="col-span-2">
+            <InputFontFamily
+              value={`${actualNode.props.fontFamily ?? null}`}
+              onChange={(value) => {
+                const updatedNode: WeaveStateElement = {
+                  ...actualNode,
+                  props: {
+                    ...actualNode.props,
+                    fontFamily: value,
+                  },
+                };
+                updateElement(updatedNode);
+              }}
+            />
+          </div>
+          <div className="col-span-2">
+            <InputColor
+              label="Color"
+              value={`${actualNode.props.fill.replace('#', '')}`}
+              onChange={(value) => {
+                const updatedNode: WeaveStateElement = {
+                  ...actualNode,
+                  props: {
+                    ...actualNode.props,
+                    fill: `#${value}`,
+                  },
+                };
+                updateElement(updatedNode);
+              }}
+            />
+          </div>
+          <InputNumber
+            label="Size (px)"
+            value={actualNode.props.fontSize ?? 16}
+            onChange={(value) => {
+              const updatedNode: WeaveStateElement = {
+                ...actualNode,
+                props: {
+                  ...actualNode.props,
+                  fontSize: value,
+                },
+              };
+              updateElement(updatedNode);
+            }}
+          />
+          <InputNumber
+            label="Line Height"
+            value={actualNode.props.lineHeight ?? 1}
+            onChange={(value) => {
+              const updatedNode: WeaveStateElement = {
+                ...actualNode,
+                props: {
+                  ...actualNode.props,
+                  lineHeight: value,
+                },
+              };
+              updateElement(updatedNode);
+            }}
+          />
+
+          <div className="w-full flex justify-between items-center gap-4 col-span-2">
+            <div className="text-[11px] text-zinc-600 font-noto-sans-mono font-light text-nowrap">
+              Style
+            </div>
+            <div className="w-full flex justify-end items-center gap-1">
+              <ToggleIconButton
+                kind="switch"
+                icon={<RemoveFormatting size={16} />}
+                pressed={
+                  (actualNode.props.fontStyle ?? 'normal').indexOf('normal') !==
+                  -1
+                }
+                onClick={() => {
+                  const updatedNode: WeaveStateElement = {
+                    ...actualNode,
+                    props: {
+                      ...actualNode.props,
+                      fontStyle: 'normal',
+                    },
+                  };
+                  updateElement(updatedNode);
+                }}
+              />
+              <ToggleIconButton
+                kind="switch"
+                icon={<Italic size={16} />}
+                pressed={
+                  (actualNode.props.fontStyle ?? 'normal').indexOf('italic') !==
+                  -1
+                }
+                onClick={() => {
+                  let items = [
+                    ...(actualNode.props.fontStyle ?? 'normal')
+                      .split(' ')
+                      .filter((e: string) => e !== 'normal'),
+                  ];
+                  if (
+                    (actualNode.props.fontStyle ?? 'normal').indexOf(
+                      'italic'
+                    ) !== -1
+                  ) {
+                    items = items.filter((e: string) => e !== 'italic');
+                  }
+                  if (
+                    (actualNode.props.fontStyle ?? 'normal').indexOf(
+                      'italic'
+                    ) === -1
+                  ) {
+                    items = [...items];
+                    items.push('italic');
+                  }
+
+                  if (items.length === 0) {
+                    items = ['normal'];
+                  }
+
+                  const updatedNode: WeaveStateElement = {
+                    ...actualNode,
+                    props: {
+                      ...actualNode.props,
+                      fontStyle: items.join(' '),
+                    },
+                  };
+                  updateElement(updatedNode);
+                }}
+              />
+              <ToggleIconButton
+                kind="switch"
+                icon={<Bold size={16} />}
+                pressed={
+                  (actualNode.props.fontStyle ?? 'normal').indexOf('bold') !==
+                  -1
+                }
+                onClick={() => {
+                  let items = [
+                    ...(actualNode.props.fontStyle ?? 'normal')
+                      .split(' ')
+                      .filter((e: string) => e !== 'normal'),
+                  ];
+                  if (
+                    (actualNode.props.fontStyle ?? 'normal').indexOf('bold') !==
+                    -1
+                  ) {
+                    items = items.filter((e: string) => e !== 'bold');
+                  }
+                  if (
+                    (actualNode.props.fontStyle ?? 'normal').indexOf('bold') ===
+                    -1
+                  ) {
+                    items = [...items];
+                    items.push('bold');
+                  }
+
+                  if (items.length === 0) {
+                    items = ['normal'];
+                  }
+
+                  const updatedNode: WeaveStateElement = {
+                    ...actualNode,
+                    props: {
+                      ...actualNode.props,
+                      fontStyle: items.join(' '),
+                    },
+                  };
+                  updateElement(updatedNode);
+                }}
+              />
+            </div>
+          </div>
+          <div className="w-full flex justify-between items-center gap-4 col-span-2">
+            <div className="text-[11px] text-zinc-600 font-noto-sans-mono font-light text-nowrap">
+              Variant
+            </div>
+            <div className="w-full flex justify-end items-center gap-1">
+              <ToggleIconButton
+                kind="switch"
+                icon={<CaseSensitive size={16} />}
+                pressed={actualNode.props.fontVariant === 'normal'}
+                onClick={() => {
+                  const updatedNode: WeaveStateElement = {
+                    ...actualNode,
+                    props: {
+                      ...actualNode.props,
+                      fontVariant: 'normal',
+                    },
+                  };
+                  updateElement(updatedNode);
+                }}
+              />
+              <ToggleIconButton
+                kind="switch"
+                icon={<CaseUpper size={16} />}
+                pressed={actualNode.props.fontVariant === 'small-caps'}
+                onClick={() => {
+                  const updatedNode: WeaveStateElement = {
+                    ...actualNode,
+                    props: {
+                      ...actualNode.props,
+                      fontVariant: 'small-caps',
+                    },
+                  };
+                  updateElement(updatedNode);
+                }}
+              />
+            </div>
+          </div>
+          <div className="w-full flex justify-between items-center gap-4 col-span-2">
+            <div className="text-[11px] text-zinc-600 font-noto-sans-mono font-light text-nowrap">
+              Decoration
+            </div>
+            <div className="w-full flex justify-end items-center gap-1">
+              <ToggleIconButton
+                kind="switch"
+                icon={<RemoveFormatting size={16} />}
+                pressed={(actualNode.props.textDecoration ?? '') === ''}
+                onClick={() => {
+                  const updatedNode: WeaveStateElement = {
+                    ...actualNode,
+                    props: {
+                      ...actualNode.props,
+                      textDecoration: '',
+                    },
+                  };
+                  updateElement(updatedNode);
+                }}
+              />
+              <ToggleIconButton
+                kind="switch"
+                icon={<Strikethrough size={16} />}
+                pressed={
+                  (actualNode.props.textDecoration ?? '') === 'line-through'
+                }
+                onClick={() => {
+                  const updatedNode: WeaveStateElement = {
+                    ...actualNode,
+                    props: {
+                      ...actualNode.props,
+                      textDecoration: 'line-through',
+                    },
+                  };
+                  updateElement(updatedNode);
+                }}
+              />
+              <ToggleIconButton
+                kind="switch"
+                icon={<Underline size={16} />}
+                pressed={
+                  (actualNode.props.textDecoration ?? '') === 'underline'
+                }
+                onClick={() => {
+                  const updatedNode: WeaveStateElement = {
+                    ...actualNode,
+                    props: {
+                      ...actualNode.props,
+                      textDecoration: 'underline',
+                    },
+                  };
+                  updateElement(updatedNode);
+                }}
+              />
+            </div>
+          </div>
+          <div className="w-full flex justify-between items-center gap-4 col-span-2">
+            <div className="text-[11px] text-zinc-600 font-noto-sans-mono font-light text-nowrap">
+              Horizontal alignment
+            </div>
+            <div className="w-full flex justify-end items-center gap-1">
+              <ToggleIconButton
+                kind="switch"
+                icon={<AlignLeft size={16} />}
+                pressed={(actualNode.props.align ?? '') === 'left'}
+                onClick={() => {
+                  const updatedNode: WeaveStateElement = {
+                    ...actualNode,
+                    props: {
+                      ...actualNode.props,
+                      align: 'left',
+                    },
+                  };
+                  updateElement(updatedNode);
+                }}
+              />
+              <ToggleIconButton
+                kind="switch"
+                icon={<AlignCenter size={16} />}
+                pressed={(actualNode.props.align ?? '') === 'center'}
+                onClick={() => {
+                  const updatedNode: WeaveStateElement = {
+                    ...actualNode,
+                    props: {
+                      ...actualNode.props,
+                      align: 'center',
+                    },
+                  };
+                  updateElement(updatedNode);
+                }}
+              />
+              <ToggleIconButton
+                kind="switch"
+                icon={<AlignRight size={16} />}
+                pressed={(actualNode.props.align ?? '') === 'right'}
+                onClick={() => {
+                  const updatedNode: WeaveStateElement = {
+                    ...actualNode,
+                    props: {
+                      ...actualNode.props,
+                      align: 'right',
+                    },
+                  };
+                  updateElement(updatedNode);
+                }}
+              />
+            </div>
+          </div>
+          <div className="w-full flex justify-between items-center gap-4 col-span-2">
+            <div className="text-[11px] text-zinc-600 font-noto-sans-mono font-light text-nowrap">
+              Vertical alignment
+            </div>
+            <div className="w-full flex justify-end items-center gap-1">
+              <ToggleIconButton
+                kind="switch"
+                icon={<AlignStartHorizontal size={16} />}
+                pressed={(actualNode.props.verticalAlign ?? 'top') === 'top'}
+                onClick={() => {
+                  const updatedNode: WeaveStateElement = {
+                    ...actualNode,
+                    props: {
+                      ...actualNode.props,
+                      verticalAlign: 'top',
+                    },
+                  };
+                  updateElement(updatedNode);
+                }}
+              />
+              <ToggleIconButton
+                kind="switch"
+                icon={<AlignCenterHorizontal size={16} />}
+                pressed={(actualNode.props.verticalAlign ?? 'top') === 'middle'}
+                onClick={() => {
+                  const updatedNode: WeaveStateElement = {
+                    ...actualNode,
+                    props: {
+                      ...actualNode.props,
+                      verticalAlign: 'middle',
+                    },
+                  };
+                  updateElement(updatedNode);
+                }}
+              />
+              <ToggleIconButton
+                kind="switch"
+                icon={<AlignEndHorizontal size={16} />}
+                pressed={(actualNode.props.verticalAlign ?? '') === 'bottom'}
+                onClick={() => {
+                  const updatedNode: WeaveStateElement = {
+                    ...actualNode,
+                    props: {
+                      ...actualNode.props,
+                      verticalAlign: 'bottom',
+                    },
+                  };
+                  updateElement(updatedNode);
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/+nextjs+websockets/components/room-components/overlay/multiuse-overlay.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+import React from 'react';
+import { useWeave } from '@inditextech/weave-react';
+import { NodeProperties } from './node-properties';
+import { useCollaborationRoom } from '@/store/store';
+import { AnimatePresence } from 'framer-motion';
+import OverlayAnimationWrapper from './overlay-animation-wrapper';
+
+export function MultiuseOverlay() {
+  const instance = useWeave((state) => state.instance);
+  const selectedNodes = useWeave((state) => state.selection.nodes);
+  const actualAction = useWeave((state) => state.actions.actual);
+  const isActionActive = useWeave((state) => state.actions.active);
+  const node = useWeave((state) => state.selection.node);
+
+  const nodePropertiesVisible = useCollaborationRoom(
+    (state) => state.nodeProperties.visible
+  );
+  const contextMenuVisible = useCollaborationRoom(
+    (state) => state.contextMenu.show
+  );
+  const setNodePropertiesAction = useCollaborationRoom(
+    (state) => state.setNodePropertiesAction
+  );
+  const setNodePropertiesVisible = useCollaborationRoom(
+    (state) => state.setNodePropertiesVisible
+  );
+
+  React.useEffect(() => {
+    if (
+      isActionActive &&
+      actualAction &&
+      ['selectionTool'].includes(actualAction) &&
+      selectedNodes.length !== 1 &&
+      !contextMenuVisible
+    ) {
+      setNodePropertiesAction(undefined);
+      setNodePropertiesVisible(false);
+    }
+    if (
+      isActionActive &&
+      actualAction &&
+      ['selectionTool'].includes(actualAction) &&
+      selectedNodes.length === 1 &&
+      !contextMenuVisible
+    ) {
+      setNodePropertiesAction('update');
+      setNodePropertiesVisible(true);
+    }
+    if (
+      isActionActive &&
+      actualAction &&
+      [
+        'rectangleTool',
+        'brushTool',
+        'penTool',
+        'imageTool',
+        'colorTokenTool',
+        'frameTool',
+      ].includes(actualAction) &&
+      !contextMenuVisible
+    ) {
+      setNodePropertiesAction('create');
+      setNodePropertiesVisible(true);
+    }
+
+    if (!actualAction && selectedNodes.length !== 1) {
+      setNodePropertiesVisible(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [contextMenuVisible, actualAction, selectedNodes]);
+
+  const nodeType = React.useMemo(() => {
+    switch (node?.type) {
+      case 'group':
+        return 'Group';
+      case 'rectangle':
+        return 'Rectangle';
+      case 'line':
+        return 'Vector path';
+      case 'text':
+        return 'Text';
+      case 'image':
+        return 'Image';
+      case 'colorToken':
+        return 'Color token';
+      case 'frame':
+        return 'Frame';
+      default:
+        return 'Unknown';
+    }
+  }, [node]);
+
+  const actionType = React.useMemo(() => {
+    switch (actualAction) {
+      case 'rectangleTool':
+        return 'Rectangle';
+      case 'brushTool':
+        return 'Vector path';
+      case 'penTool':
+        return 'Vector path';
+      case 'imageTool':
+        return 'Image';
+      case 'colorTokenTool':
+        return 'Color token';
+      case 'frameTool':
+        return 'Frame';
+      default:
+        return 'Unknown';
+    }
+  }, [actualAction]);
+
+  if (!instance || !nodePropertiesVisible) {
+    return null;
+  }
+
+  return (
+    <AnimatePresence mode="wait">
+      <OverlayAnimationWrapper
+        panelId={`nodeProperties-${nodeType}-${actionType}`}
+      >
+        <NodeProperties />
+      </OverlayAnimationWrapper>
+    </AnimatePresence>
+  );
+}

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

@@ -0,0 +1,98 @@
+'use client';
+
+import React from 'react';
+import { useWeave } from '@inditextech/weave-react';
+import { useCollaborationRoom } from '@/store/store';
+import { PositionProperties } from './../node-properties/position-properties';
+import { SizeProperties } from './../node-properties/size-properties';
+import { AppearanceProperties } from './../node-properties/appearance-properties';
+import { FillProperties } from './../node-properties/fill-properties';
+import { StrokeProperties } from './../node-properties/stroke-properties';
+import { TextProperties } from './../node-properties/text-properties';
+import { ImageProperties } from '../node-properties/image-properties';
+import { ColorTokenProperties } from '../node-properties/color-token-properties';
+import { FrameProperties } from '../node-properties/frame-properties';
+import { CropProperties } from '../node-properties/crop-properties';
+
+export const NodeProperties = () => {
+  const actualAction = useWeave((state) => state.actions.actual);
+  const node = useWeave((state) => state.selection.node);
+
+  const nodePropertiesAction = useCollaborationRoom(
+    (state) => state.nodeProperties.action
+  );
+  const nodePropertiesVisible = useCollaborationRoom(
+    (state) => state.nodeProperties.visible
+  );
+
+  const nodeType = React.useMemo(() => {
+    switch (node?.type) {
+      case 'group':
+        return 'Group';
+      case 'rectangle':
+        return 'Rectangle';
+      case 'line':
+        return 'Vector path';
+      case 'text':
+        return 'Text';
+      case 'image':
+        return 'Image';
+      case 'colorToken':
+        return 'Color token';
+      case 'frame':
+        return 'Frame';
+      default:
+        return 'Unknown';
+    }
+  }, [node]);
+
+  const actionType = React.useMemo(() => {
+    switch (actualAction) {
+      case 'rectangleTool':
+        return 'Rectangle';
+      case 'brushTool':
+        return 'Vector path';
+      case 'penTool':
+        return 'Vector path';
+      case 'imageTool':
+        return 'Image';
+      case 'colorTokenTool':
+        return 'Color token';
+      case 'frameTool':
+        return 'Frame';
+      default:
+        return 'Unknown';
+    }
+  }, [actualAction]);
+
+  const title = React.useMemo(() => {
+    if (nodePropertiesAction === 'create') {
+      return actionType;
+    }
+    return nodeType;
+  }, [nodeType, actionType, nodePropertiesAction]);
+
+  if (!nodePropertiesVisible) {
+    return null;
+  }
+
+  return (
+    <div className="w-full justify-center items-center">
+      <div className="w-full p-3 border-b">
+        <h2 className="text-md font-noto-sans-mono font-light">{title}</h2>
+      </div>
+      <div className="flex-1">
+        <ImageProperties />
+        <ColorTokenProperties />
+        <FrameProperties />
+        <PositionProperties />
+        <SizeProperties />
+        <AppearanceProperties />
+        <FillProperties />
+        <StrokeProperties />
+        <TextProperties />
+        <CropProperties />
+      </div>
+    </div>
+  );
+};