SamagraX-Stencil · varuntree · Apr 25, 2024 · Apr 26, 2024 · Apr 26, 2024 · Apr 29, 2024
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "@mui/material": "^5.15.11",
     "@samagra-x/chatui": "^1.0.3",
     "bootstrap-css-only": "^4.4.1",
+    "decap-cms-app": "^3.1.10",
     "i18next": "^23.10.0",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",

diff --git a/public/admin/MoleculePreview.tsx b/public/admin/MoleculePreview.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const MoleculePreview = ({ entry }) => {
+  const data = entry.getIn(['data']).toJS();
+  return (
+    <div style={{ display: 'flex', width: '100%' }}>
+      <div style={{ flex: 1, padding: '20px' }}>
+        <h1>{data.title}</h1>
+        <p>{data.description}</p>
+        {/* Render your molecule component here using data.config */}
+      </div>
+      <div style={{ flex: 1, padding: '20px' }}>
+        {/* Assume this is where your molecule is rendered */}
+
+      </div>
+    </div>
+  );
+}
+
+export default MoleculePreview;
diff --git a/public/admin/cms.js b/public/admin/cms.js
@@ -0,0 +1,4 @@
+import CMS from 'netlify-cms-app';
+import MoleculePreview from './MoleculePreview';
+
+CMS.registerPreviewTemplate('molecules', MoleculePreview);
diff --git a/public/admin/config.yml b/public/admin/config.yml
@@ -0,0 +1,17 @@
+backend:
+  name: git-gateway
+  branch: cmstest
+
+media_folder: "static/images/uploads"  
+collections:
+  - name: "config"
+    label: "Molecules"
+    files:
+      - name: "navbar"
+        label: "Navbar Configuration"
+        file: "src/cms_molecules/Navbar/config.md"
+        fields:
+          - {label: "Button Color", name: "buttonConfig.color", widget: "string"}
+          - {label: "Button Size", name: "buttonConfig.size", widget: "string"}
+          - {label: "Button Edge", name: "buttonConfig.edge", widget: "string"}
+        preview_path: "public/cms/preview-templates/NavbarPreview.tsx"
diff --git a/public/admin/index.html b/public/admin/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="robots" content="noindex" />
+    <title>Content Manager</title>
+    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
+    <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
+    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
+</head>
+<body>
+    <script>
+        console.log("this is in the HTML page")
+        if (window.netlifyIdentity) {
+            window.netlifyIdentity.on("init", (user) => {
+                if (!user) {
+                    window.netlifyIdentity.on("login", () => {
+                        document.location.href = "/admin/";
+                    });
+                }
+            });
+        }
+    </script>
+    <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log("inside view");
+            if (typeof CMS !== 'undefined' && typeof React !== 'undefined') {
+                const NavbarPreview = ({ entry }) => {
+                    const data = entry.getIn(['data']).toJS(); 
+                    const buttonConfig = data.buttonConfig || { color: 'grey', size: 'medium', edge: 'square' };
+
+                    const buttonStyle = {
+                        backgroundColor: buttonConfig.color,
+                        padding: buttonConfig.size === 'large' ? '10px 20px' : '5px 10px',
+                        borderRadius: buttonConfig.edge === 'rounded' ? '15px' : '0px',
+                        border: 'none',
+                        color: 'white',
+                        cursor: 'pointer',
+                        fontSize: buttonConfig.size === 'large' ? '1.2em' : '1em'
+                    };
+
+                    return (
+                        React.createElement('div', null,
+                            React.createElement('h1', null, 'Button Preview'),
+                            React.createElement('button', {style: buttonStyle}, 'Click Me')
+                        )
+                    );
+                };
+
+                CMS.registerPreviewTemplate('navbar', NavbarPreview);
+            } else {
+                console.error('CMS or React is not defined.');
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -15,7 +15,7 @@ import HomePage from './molecules/home-page'
 import FeedbackPage from './molecules/feedback'
 import ShareButtons from './molecules/share-buttons'
 import { ChatUI } from './molecules/chat-ui'
-import AdminRoute from './components/InputForm'
+{/* import AdminRoute from './components/InputForm' 8 */}
 
 function App() {
   return (
@@ -37,7 +37,7 @@ function App() {
           <Route path="/share-buttons" element={<ShareButtons />} />
           <Route path="/chat-ui" element={<ChatUI />} />
           <Route path="/molecules" element={<Components />} />
-          <Route path="/admin" element={<AdminRoute />} />
+          {/*<Route path="/admin" element={<AdminRoute />} /> */}
         </Routes>
       </>
     </>

diff --git a/src/components/InputForm/faqPage.tsx b/src/components/InputForm/faqPage.tsx
@@ -1,5 +1,4 @@
 import { Box } from '@mui/material'
-import React from 'react'
 import { CheckBoxOption, InputField, PageTitle } from './customeField'
 import { gap, marginBotton } from './constant'
 import { useConfig } from '../../hook/useConfig'

diff --git a/src/components/InputForm/historyPage.tsx b/src/components/InputForm/historyPage.tsx
@@ -1,5 +1,4 @@
 import { Box } from '@mui/material'
-import React from 'react'
 import { CheckBoxOption, InputField, PageTitle } from './customeField'
 import { gap, marginBotton } from './constant'
 import { useConfig } from '../../hook/useConfig'

diff --git a/src/hook/useConfig.ts b/src/hook/useConfig.ts
@@ -1,16 +1,17 @@
+
 import { useConfigContext } from '../context/configContext'
 
 export const useConfig = (key: string, name: string) => {
   const { config } = useConfigContext()
-  return config?.[key]?.[name]
+  return (config as any)?.[key]?.[name]
 }
 
 export const useThemeConfig = (key: string) => {
   const { config } = useConfigContext()
-  return config?.[key]
+  return (config as any)?.[key]
 }
 
 export const useUiConfig = (key: string, name: string) => {
   const { uiConfig } = useConfigContext()
-  return uiConfig?.[key]?.[name]
+  return (uiConfig as any)?.[key]?.[name]
 }