Feat add presets supports (react-email)

package.json

@@ -25,12 +25,15 @@
     "@craftjs/core": "^0.2.0-beta.8",
     "@craftjs/layers": "^0.2.0-beta.8",
     "@heroicons/react": "^1.0.6",
+    "@react-email/button": "^0.0.7",
+    "@react-email/html": "^0.0.4",
     "@vercel/analytics": "^0.1.11",
     "next": "^13.1.6",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-contenteditable": "^3.3.7",
     "react-dom": "^18.2.0",
+    "react-email": "^1.9.0",
     "react-icons": "^4.8.0",
     "rsuite": "^5.28.2",
     "styled-components": "^5.3.9"

src/desginer/Components/PresetCard.tsx

@@ -0,0 +1,15 @@
+import { Panel, Placeholder } from 'rsuite';
+
+import { WebrepubPreset } from '@/desginer/types/webrepub';
+
+interface PresetCardProps extends Pick<WebrepubPreset, 'name'> {
+  onClick: () => void;
+}
+
+export function PresetCard({ name, onClick }: PresetCardProps) {
+  return (
+    <Panel bordered header={name} onClick={onClick} className='pointer-cursor'>
+      <Placeholder.Paragraph />
+    </Panel>
+  );
+}

src/desginer/Components/PresetList.tsx

@@ -0,0 +1,34 @@
+import { useRouter } from 'next/router';
+import { useCallback } from 'react';
+import { Col, Grid, Row } from 'rsuite';
+
+import { PresetCard } from '@/desginer/Components/PresetCard';
+import { useWebrepub } from '@/desginer/Providers/webrepub';
+
+export function PresetList() {
+  const {
+    presets: { collection },
+    setCurrentPreset,
+  } = useWebrepub();
+  const router = useRouter();
+
+  const handlePresetClick = useCallback(
+    (presetName: string) => {
+      setCurrentPreset(presetName);
+      router.push('/editor');
+    },
+    [router, setCurrentPreset]
+  );
+
+  return (
+    <Grid fluid>
+      <Row gutter={16}>
+        {collection.map(({ name }) => (
+          <Col lg={8} md={8} sm={24} xs={24} key={name} className='mb-20'>
+            <PresetCard name={name} onClick={() => handlePresetClick(name)} />
+          </Col>
+        ))}
+      </Row>
+    </Grid>
+  );
+}

src/desginer/Components/index.tsx

@@ -2,3 +2,4 @@ export * from './Drawer';
 export * from './ExamplesList';
 export * from './Logo';
 export * from './MenuButton';
+export * from './PresetCard';

src/desginer/ComponentsBox.tsx

@@ -1,7 +1,6 @@
 import { useEditor } from '@craftjs/core';
 import { CSSProperties } from 'react';
 import React from 'react';
-import { IconType } from 'react-icons';
 import { BiPointer } from 'react-icons/bi';
 import { BsCardImage } from 'react-icons/bs';
 import { TbLink, TbSquare } from 'react-icons/tb';
@@ -13,83 +12,114 @@ import { ImageComponent } from '@/desginer/designComponents/Image';
 import { LinkComponent } from '@/desginer/designComponents/Link';
 import { StackComponent } from '@/desginer/designComponents/Stack';
 import { TextComponent } from '@/desginer/designComponents/Text';
+import { useWebrepub } from '@/desginer/Providers/webrepub';
+import { WebrepubComponent } from '@/desginer/types/webrepub';
 
 export function ComponentsBar() {
   const { connectors, actions } = useEditor();
+  const {
+    presets: { currentPreset },
+  } = useWebrepub();
 
-  return (
-    <List hover className='blue-overlap-shadow '>
-      <List.Item onClick={actions.clearEvents}>
-        <ComponentItem icon={BiPointer} name='Unselect' draggable={false} />
-      </List.Item>
-      <List.Item
-        ref={(ref) => {
-          if (ref) {
-            connectors.create(ref, <TextComponent text='Text' />);
-          }
-        }}
-      >
-        <ComponentItem
-          icon={TfiText}
-          name={TextComponent.displayName ?? 'Text'}
-          draggable={true}
-        />
-      </List.Item>
-      <List.Item
-        ref={(ref) => {
-          if (ref) {
-            connectors.create(ref, <ImageComponent />);
-          }
-        }}
-      >
-        <ComponentItem icon={BsCardImage} name='Image' draggable={true} />
-      </List.Item>
-      <List.Item
-        ref={(ref) => {
-          if (ref) {
-            connectors.create(ref, <LinkComponent />);
-          }
-        }}
-      >
-        <ComponentItem
-          icon={TbLink}
-          name={LinkComponent.displayName ?? 'Link'}
-          draggable={true}
-        />
-      </List.Item>
+  const presetComponentList = (currentPreset?.components ?? []).map((Comp) => {
+    return (
       <List.Item
+        key={Comp.craft?.displayName}
         ref={(ref) => {
           if (ref) {
-            connectors.create(ref, <ContainerComponent />);
+            connectors.create(ref, <Comp />);
           }
         }}
       >
         <ComponentItem
-          icon={TbSquare}
-          name={ContainerComponent.displayName ?? 'Container'}
+          icon={Comp.icon}
+          name={Comp.craft?.displayName ?? 'Component'}
           draggable={true}
         />
       </List.Item>
-      <List.Item
-        ref={(ref) => {
-          if (ref) {
-            connectors.create(ref, <StackComponent />);
-          }
-        }}
-      >
-        <ComponentItem
-          icon={TfiLayoutColumn3}
-          name={StackComponent.displayName ?? 'Stack'}
-          draggable={true}
-        />
+    );
+  });
+
+  return (
+    <List hover className='blue-overlap-shadow '>
+      <List.Item onClick={actions.clearEvents}>
+        <ComponentItem icon={BiPointer} name='Unselect' draggable={false} />
       </List.Item>
+      {/* TODO: remove the conditional once all parts of the preset is ready */}
+      {presetComponentList.length !== 0 ? (
+        presetComponentList
+      ) : (
+        <>
+          <List.Item
+            ref={(ref) => {
+              if (ref) {
+                connectors.create(ref, <TextComponent text='Text' />);
+              }
+            }}
+          >
+            <ComponentItem
+              icon={TfiText}
+              name={TextComponent.displayName ?? 'Text'}
+              draggable={true}
+            />
+          </List.Item>
+          <List.Item
+            ref={(ref) => {
+              if (ref) {
+                connectors.create(ref, <ImageComponent />);
+              }
+            }}
+          >
+            <ComponentItem icon={BsCardImage} name='Image' draggable={true} />
+          </List.Item>
+          <List.Item
+            ref={(ref) => {
+              if (ref) {
+                connectors.create(ref, <LinkComponent />);
+              }
+            }}
+          >
+            <ComponentItem
+              icon={TbLink}
+              name={LinkComponent.displayName ?? 'Link'}
+              draggable={true}
+            />
+          </List.Item>
+          <List.Item
+            ref={(ref) => {
+              if (ref) {
+                connectors.create(ref, <ContainerComponent />);
+              }
+            }}
+          >
+            <ComponentItem
+              icon={TbSquare}
+              name={ContainerComponent.displayName ?? 'Container'}
+              draggable={true}
+            />
+          </List.Item>
+          <List.Item
+            ref={(ref) => {
+              if (ref) {
+                connectors.create(ref, <StackComponent />);
+              }
+            }}
+          >
+            <ComponentItem
+              icon={TfiLayoutColumn3}
+              name={StackComponent.displayName ?? 'Stack'}
+              draggable={true}
+            />
+          </List.Item>
+        </>
+      )}
     </List>
   );
 }
 
 interface ComponentItemProps {
   name: string;
-  icon: IconType;
+  icon: WebrepubComponent['icon'];
   draggable: boolean;
 }
 

src/desginer/PreviewViewport.tsx

@@ -1,12 +1,11 @@
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { FaHome } from 'react-icons/fa';
+import { TiArrowBack } from 'react-icons/ti';
 import styled from 'styled-components';
 
 import { EditorContext } from '@/desginer/EditorContext';
 import { PreviewFrame } from '@/desginer/frames/PreviewFrame';
-import { GlobalSettingsProvider } from '@/desginer/Providers/GlobalSettings';
 
 const FloatingButton = styled.button`
   position: fixed;
@@ -33,11 +32,11 @@ const FloatingButton = styled.button`
 function GoHomeButton() {
   const router = useRouter();
 
-  const goHome = () => router.push('/');
+  const goHome = () => router.push('/editor');
 
   return (
     <FloatingButton onClick={goHome}>
-      <FaHome style={{ marginTop: '5px' }} />
+      <TiArrowBack style={{ marginTop: '5px' }} />
     </FloatingButton>
   );
 }
@@ -49,11 +48,9 @@ export function PreviewViewport() {
   }, []);
   return (
     <>
-      <GlobalSettingsProvider settings={{ isInDesignMode: false }}>
-        <EditorContext enabled={false}>
-          <PreviewFrame></PreviewFrame>
-        </EditorContext>
-      </GlobalSettingsProvider>
+      <EditorContext enabled={false}>
+        <PreviewFrame></PreviewFrame>
+      </EditorContext>
       {documentReady
         ? ReactDOM.createPortal(<GoHomeButton />, document.body)
         : null}

src/desginer/Providers/webrepub/index.ts

@@ -0,0 +1 @@
+export * from './webrepubContext';