feat: add preset support

src/desginer/Components/PresetCard.tsx

@@ -0,0 +1,15 @@
+import { Panel, Placeholder } from 'rsuite';
+
+import { WebrepubPreset } from '@/desginer/typings/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/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';

src/desginer/Providers/webrepub/webrepubContext.tsx

@@ -0,0 +1,86 @@
+import { createContext, PropsWithChildren, useContext, useState } from 'react';
+
+import { WebrepubPreset } from '@/desginer/typings/webrepub';
+import { ensure } from '@/utils';
+
+interface WebrepubConfigurations {
+  settings: {
+    isInDesignMode: boolean;
+  };
+  presets: {
+    collection: WebrepubPreset[];
+    currentPreset?: WebrepubPreset;
+  };
+}
+
+const noop = () => {
+  /* do nothing */
+};
+
+const defaultWebrepubConfigurations: WebrepubConfigurations = {
+  settings: {
+    isInDesignMode: true,
+  },
+  presets: {
+    collection: [],
+  },
+};
+
+interface WebrepubConfigurationsContextProps {
+  settings: WebrepubConfigurations['settings'];
+  presets: WebrepubConfigurations['presets'];
+  setSettings: (settings: Partial<WebrepubConfigurations['settings']>) => void;
+  setCurrentPreset: (presetName: string) => void;
+}
+
+const WebrepubContext = createContext<WebrepubConfigurationsContextProps>({
+  ...defaultWebrepubConfigurations,
+  setSettings: noop,
+  setCurrentPreset: noop,
+});
+
+interface GlobalSettingsProviderProps extends PropsWithChildren {
+  settings: WebrepubConfigurations['settings'];
+  presets: WebrepubConfigurations['presets'];
+}
+
+export function WebrepubProvider({
+  children,
+  settings,
+  presets,
+}: GlobalSettingsProviderProps) {
+  const [globalSettings, setGlobalSettings] = useState(settings);
+  const [presetsValue, setPresetsValue] = useState(presets);
+
+  const value: WebrepubConfigurationsContextProps = {
+    settings: globalSettings,
+    setSettings: (settings) => {
+      setGlobalSettings({
+        ...globalSettings,
+        ...settings,
+      });
+    },
+    presets: {
+      collection: presetsValue.collection,
+      currentPreset: presetsValue.currentPreset,
+    },
+    setCurrentPreset: (presetName: string) => {
+      setPresetsValue({
+        ...presetsValue,
+        currentPreset: ensure(
+          presetsValue.collection.find((p) => p.name === presetName)
+        ),
+      });
+    },
+  };
+
+  return (
+    <WebrepubContext.Provider value={value}>
+      {children}
+    </WebrepubContext.Provider>
+  );
+}
+
+export function useWebrepub() {
+  return useContext(WebrepubContext);
+}

src/desginer/designComponents/WebPage/WebPageComponent.tsx

@@ -3,7 +3,7 @@ import { CSSProperties, useEffect, useState } from 'react';
 import styled, { css, CSSObject } from 'styled-components';
 
 import { WebPageComponentSettings } from '@/desginer/designComponents/WebPage/WebPageComponentSettings';
-import { useGlobalSettings } from '@/desginer/Providers/GlobalSettings';
+import { useWebrepub } from '@/desginer/Providers/webrepub';
 
 const defaultConfiguredStyles: CSSObject = {
   backgroundColor: '#fff',
@@ -44,7 +44,7 @@ export const WebPageComponent: UserComponent<WebPageComponentProps> = ({
 
   const {
     settings: { isInDesignMode },
-  } = useGlobalSettings();
+  } = useWebrepub();
 
   useEffect(() => {
     if (!window) {

src/desginer/index.tsx

@@ -21,7 +21,6 @@ import { ComponentsBar } from '@/desginer/ComponentsBox';
 import { DesignViewport } from '@/desginer/DesignViewport';
 import { EditorContext } from '@/desginer/EditorContext';
 import { PropertiesBox } from '@/desginer/PropertiesBox';
-import { GlobalSettingsProvider } from '@/desginer/Providers/GlobalSettings';
 import {
   ActionsComponent,
   HistoryComponent,
@@ -200,14 +199,8 @@ function Designer() {
 
 export function WebRepubApp() {
   return (
-    <GlobalSettingsProvider
-      settings={{
-        isInDesignMode: true,
-      }}
-    >
-      <EditorContext enabled={true}>
-        <Designer />
-      </EditorContext>
-    </GlobalSettingsProvider>
+    <EditorContext enabled={true}>
+      <Designer />
+    </EditorContext>
   );
 }

src/desginer/typings/webrepub.d.ts

@@ -1,6 +1,11 @@
 import { UserComponent } from '@craftjs/core';
 import { ReactNode } from 'react';
 
-export type WebrepubComponent<T = unknown> = UserComponent<T> & {
+export type WebrepubComponent<T> = UserComponent<T> & {
   icon?: ReactNode;
 };
+
+export type WebrepubPreset = {
+  name: string;
+  components: WebrepubComponent[];
+};

src/pages/_app.tsx

@@ -6,12 +6,26 @@ import '@/styles/globals.css';
 import 'rsuite/dist/rsuite.min.css';
 import '@/styles/designer.css';
 
+import { WebrepubProvider } from '@/desginer/Providers/webrepub';
+import { getPresets } from '@/presets';
+import ReactEmailPreset from '@/presets/react-email';
+
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <CustomProvider theme='dark'>
-      <Component {...pageProps} />
-      <Analytics />
-    </CustomProvider>
+    <WebrepubProvider
+      settings={{
+        isInDesignMode: true,
+      }}
+      presets={{
+        collection: getPresets(),
+        currentPreset: ReactEmailPreset,
+      }}
+    >
+      <CustomProvider theme='dark'>
+        <Component {...pageProps} />
+        <Analytics />
+      </CustomProvider>
+    </WebrepubProvider>
   );
 }
 

src/pages/editor/index.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+
+import { WebRepubApp } from '@/desginer';
+import { isMobileDevice, isSmallScreen } from '@/desginer/utils/screen';
+import { LoadingView, SmallScreenView } from '@/desginer/Views';
+
+export default function EditorPage() {
+  const [loading, setLoading] = useState(true);
+  const [isDesktop, setIsDesktop] = useState(false);
+
+  useEffect(() => {
+    setLoading(false);
+
+    const checkIsDesktop = () =>
+      setIsDesktop(!isMobileDevice() && !isSmallScreen());
+
+    checkIsDesktop();
+    window.addEventListener('resize', checkIsDesktop);
+
+    return () => {
+      window.removeEventListener('resize', checkIsDesktop);
+    };
+  }, []);
+
+  if (loading) {
+    return <LoadingView></LoadingView>;
+  }
+
+  if (isDesktop) {
+    return <WebRepubApp />;
+  }
+
+  return <SmallScreenView />;
+}