feat(site): add device preview presets to main site demo (#165)

Author: MaziyarMK

site/components/editor-layout/EditPreviewSize.tsx

@@ -1,6 +1,8 @@
-import { Cross1Icon } from '@radix-ui/react-icons';
+import { Cross1Icon, DesktopIcon, MobileIcon } from '@radix-ui/react-icons';
+import { TabletIcon } from 'lucide-react';
 import * as React from 'react';
 
+import { PresetPreviewSize } from '@app/components/editor-layout/PresetPreviewSize';
 import { useEditor, useEditorActiveComponent } from '@app/editor';
 import { UserFrame } from '@app/extensions/UserFrameExtension';
 
@@ -13,10 +15,26 @@ type EditPreviewSizeProps = {
 export const EditPreviewSize = (props: EditPreviewSizeProps) => {
   const editor = useEditor();
   const componentEditor = useEditorActiveComponent();
-
   return (
     <React.Fragment>
-      <span className="text-xs mr-3 text-slate-500">Preview size</span>
+      <div className="flex flex-row items-center">
+        <span className="text-xs mr-3 text-slate-500">Preview size</span>
+        <div className="flex items-center pr-2">
+          <PresetPreviewSize frames={props.frames} width="390px" height="844px">
+            <MobileIcon />
+          </PresetPreviewSize>
+          <PresetPreviewSize
+            frames={props.frames}
+            width="820px"
+            height="1180px"
+          >
+            <TabletIcon />
+          </PresetPreviewSize>
+          <PresetPreviewSize frames={props.frames} width="100%" height="100%">
+            <DesktopIcon />
+          </PresetPreviewSize>
+        </div>
+      </div>
       <div className="flex items-center">
         <TextField
           placeholder="100%"

site/components/editor-layout/PresetPreviewSize.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+import { Button } from '@app/components/button';
+import { useEditor, useEditorActiveComponent } from '@app/editor';
+import { UserFrame } from '@app/extensions/UserFrameExtension';
+
+type PresetPreviewSizeProps = {
+  frames: UserFrame[];
+  width: string;
+  height: string;
+  children?: React.ReactNode;
+};
+
+export const PresetPreviewSize = (props: PresetPreviewSizeProps) => {
+  const editor = useEditor();
+  const componentEditor = useEditorActiveComponent();
+
+  return (
+    <Button
+      size="xs"
+      variant="subtle"
+      onClick={() => {
+        editor.reka.change(() => {
+          const frame = props.frames.find(
+            (frame) => componentEditor.activeFrame?.user.id === frame.id
+          );
+
+          if (!frame) {
+            return;
+          }
+
+          if (componentEditor.activeFrame) {
+            componentEditor.activeFrame.user.width = props.width;
+            componentEditor.activeFrame.user.height = props.height;
+          }
+          frame.width = props.width;
+          frame.height = props.height;
+        });
+      }}
+    >
+      {props.children}
+    </Button>
+  );
+};

site/components/text-field/index.tsx

@@ -37,6 +37,10 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
     const [uncommittedValue, setUncommitedValue] = React.useState(value);
     const [hasError, setHasError] = React.useState('');
 
+    React.useEffect(() => {
+      setUncommitedValue(value);
+    }, [value]);
+
     const commitValue = () => {
       if (!onCommit) {
         return;