feat(cms-core): Added SectionsView

signalco-io · Dec 27, 2023 · 3eed0f4 · 3eed0f4
1 parent 8dd531b
commit 3eed0f4
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 11 deletions.
diff --git a/web/apps/uier/app/(rest)/(marketing)/page.tsx b/web/apps/uier/app/(rest)/(marketing)/page.tsx
@@ -1,16 +1,20 @@
+import { ExoticComponent, memo } from 'react';
 import { Heading1 } from '@signalco/cms-feature-marketing/Heading';
 import { Footer1 } from '@signalco/cms-feature-marketing/Footer';
+import { SectionsView } from '@signalco/cms-core/SectionsView';
 import { type SectionData } from '@signalco/cms-core/SectionData';
 import { KnownPages } from '../../../src/knownPages';
 
 const data: SectionData[] = [
     {
+        component: 'Heading1',
         header: 'uier',
         ctas: [
             { label: 'Get Started', href: KnownPages.App },
         ]
     },
     {
+        component: 'Footer1',
         features: [
             {
                 header: 'Product',
@@ -43,20 +47,17 @@ const data: SectionData[] = [
     }
 ];
 
-const sections = [
-    Heading1,
-    Footer1
-];
+const sectionComponents: { [key: string]: ExoticComponent<SectionData> } = {
+    'Heading1': memo(Heading1),
+    'Footer1': memo(Footer1)
+};
 
 export default function LandingPage() {
     return (
         <main>
-            {sections.map((Section, index) => {
-                const sectionData = data[index];
-                return (
-                    <Section key={index} {...sectionData} />
-                );
-            })}
+            <SectionsView
+                sectionsData={data}
+                componentsRegistry={sectionComponents} />
         </main>
     );
 }
diff --git a/web/packages/cms-core/package.json b/web/packages/cms-core/package.json
@@ -12,6 +12,8 @@
     },
     "devDependencies": {
         "@signalco/eslint-config-signalco": "workspace:*",
+        "@signalco/ui-primitives": "workspace:*",
+        "@signalco/ui-icons": "workspace:*",
         "@signalco/tailwindcss-config-signalco": "workspace:*",
         "@signalco/tsconfig": "workspace:*",
         "@types/react": "18.2.45",
@@ -20,4 +22,4 @@
         "react-dom": "18.2.0",
         "typescript": "5.3.3"
     }
-}
+}
diff --git a/web/packages/cms-core/src/SectionData/index.ts b/web/packages/cms-core/src/SectionData/index.ts
@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 
 export type SectionData = {
+    component?: string;
     tagline?: string;
     header?: string;
     description?: string;

diff --git a/web/packages/cms-core/src/SectionsView/SectionsEditor.tsx b/web/packages/cms-core/src/SectionsView/SectionsEditor.tsx
@@ -0,0 +1,38 @@
+import { ExoticComponent } from 'react';
+import { Typography } from '@signalco/ui-primitives/Typography';
+import { IconButton } from '@signalco/ui-primitives/IconButton';
+import { MoreHorizontal } from '@signalco/ui-icons';
+import { SectionData } from '../SectionData';
+
+export function SectionsEditor({ sectionsData, componentsRegistry }: { sectionsData: SectionData[]; componentsRegistry: { [key: string]: ExoticComponent<SectionData>; }; }) {
+    const handleSectionEdit = (sectionData: SectionData) => {
+        console.log('Edit', sectionData);
+    };
+
+    return (
+        <div>
+            {sectionsData.map((sectionData, index) => {
+                const Section = sectionData.component ? componentsRegistry[sectionData.component] : null;
+                if (!Section) {
+                    return null;
+                }
+
+                return (
+                    <div className="group relative" key={index}>
+                        <div className="pointer-events-none absolute inset-0 rounded-md border opacity-0 transition-opacity group-hover:opacity-100" />
+                        <IconButton
+                            onClick={() => handleSectionEdit(sectionData)}
+                            variant="soft"
+                            className="absolute left-0 top-0 rounded-r-none rounded-bl-none opacity-0 transition-opacity group-hover:opacity-100">
+                            <MoreHorizontal />
+                        </IconButton>
+                        <Typography level="body2" className="absolute left-12 top-2 text-center opacity-0 transition-opacity group-hover:opacity-100">
+                            {sectionData.component}
+                        </Typography>
+                        <Section {...sectionData} />
+                    </div>
+                );
+            })}
+        </div>
+    );
+}
diff --git a/web/packages/cms-core/src/SectionsView/SectionsView.tsx b/web/packages/cms-core/src/SectionsView/SectionsView.tsx
@@ -0,0 +1,30 @@
+import { ExoticComponent } from 'react';
+import { SectionData } from '../SectionData';
+
+export type CmsComponentRegistry = {
+    [key: string]: ExoticComponent<SectionData>;
+};
+
+export type CmsSectionsViewProps = {
+    sectionsData: SectionData[];
+    componentsRegistry: CmsComponentRegistry;
+};
+
+export function SectionsView({ sectionsData, componentsRegistry }: CmsSectionsViewProps) {
+    return (
+        <div>
+            {sectionsData.map((sectionData, index) => {
+                const Section = sectionData.component ? componentsRegistry[sectionData.component] : null;
+                if (!Section) {
+                    return null;
+                }
+
+                return (
+                    <Section key={index} {...sectionData} />
+                );
+            })}
+        </div>
+    );
+}
+
+
diff --git a/web/packages/cms-core/src/SectionsView/index.ts b/web/packages/cms-core/src/SectionsView/index.ts
@@ -0,0 +1,2 @@
+export * from './SectionsView';
+export * from './SectionsEditor';
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './SectionsView';
		export * from './SectionsEditor';