this.gui 1.0.17 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "this.gui",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "This Graphic User Interface.",
   "main": "dist/this-gui.umd.js",
   "module": "dist/this-gui.es.js",
@@ -25,6 +25,7 @@
     "classnames": "^2.5.1",
     "dotenv": "^16.4.5",
     "figlet": "^1.7.0",
+    "fs": "^0.0.1-security",
     "postcss": "^8.4.45",
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.26.2"

package/src/App.jsx

@@ -1,56 +1,32 @@
 import React from 'react';
-import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
 import { ThemeProvider } from './themes/ThemeProvider';
-import MdxProvider from './MdxProvider'; // MDX Provider
-import SiteBuilder from './SiteBuilder'; // Import the site builder component
-import { SelectTheme } from './stories/Molecules/SelectTheme/SelectTheme'; // Import SelectTheme
-import { useTheme } from './themes/ThemeProvider'; // Import the hook
-import Page from './Page'; // Import the Page component
-import example from './example.json'; // Example JSON for Page component
+import PageDashboard from './PageDashboard'; // Pages dashboard view
+import CreatePage from './CreatePage'; // Create page view
+import Page from './Page'; // Render dynamic pages
+import SiteBuilder from './SiteBuilder'; // JSON Site builder
+import MDXEditor from './MDXEditor'; // MDX Site builder
 
 const App = () => {
   return (
     <ThemeProvider>
-      <MdxProvider>
-        <Router>
-          {/* Top navigation */}
-          <nav>
-            <Link to="/" style={{ marginRight: '20px' }}>Site Builder</Link>
-            <Link to="/storybook" style={{ marginRight: '20px' }}>Storybook</Link>
-            <Link to="/test-page" style={{ marginRight: '20px' }}>Test Page</Link> {/* New link */}
-          </nav>
-
-          {/* Render SelectTheme in the main app */}
-          <ThemeSwitcher />
-
-          {/* Route definitions */}
-          <Routes>
-            <Route path="/" element={<SiteBuilder />} /> {/* Site builder interface */}
-            <Route path="/storybook" element={<Storybook />} /> {/* Documentation */}
-            <Route path="/test-page" element={<Page config={example} />} /> {/* Test Page Route */}
-          </Routes>
-        </Router>
-      </MdxProvider>
+      <Router>
+        <Routes>
+          {/* Main Dashboard */}
+          <Route path="/" element={<PageDashboard />} />
+          {/* Create new page */}
+          <Route path="/create-page" element={<CreatePage />} />
+          {/* Site builders for JSON and MDX */}
+          <Route path="/site-builder/json/:pageName" element={<SiteBuilder />} />
+          <Route path="/site-builder/mdx/:pageName" element={<MDXEditor />} />
+          {/* Storybook Route */}
+          <Route path="/storybook" element={<Storybook />} />
+        </Routes>
+      </Router>
     </ThemeProvider>
   );
 };
 
-// Component to handle theme switching using the context
-const ThemeSwitcher = () => {
-  const { setTheme, setMode } = useTheme();
-
-  return (
-    <SelectTheme
-      onThemeChange={(newTheme) => {
-        setTheme(newTheme);
-      }}
-      onModeChange={(newMode) => {
-        setMode(newMode);
-      }}
-    />
-  );
-};
-
 // Storybook IFrame for browsing documentation
 const Storybook = () => (
   <iframe

package/src/CreatePage.jsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const CreatePage = () => {
+  const navigate = useNavigate();
+  const [pageName, setPageName] = useState('');
+  const [pageType, setPageType] = useState('json'); // Default to JSON
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const handleCreatePage = () => {
+    const newPage = {
+      pageName,
+      pageType,
+      content: '', // Optional: You can pass default content here if needed
+    };
+
+    // Call API to create the page on the backend
+    fetch('/api/create-page', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(newPage),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        if (data.error) {
+          setErrorMessage(data.error);
+        } else {
+          // Navigate to the corresponding builder
+          if (pageType === 'json') {
+            navigate(`/site-builder/json/${pageName}`);
+          } else {
+            navigate(`/site-builder/mdx/${pageName}`);
+          }
+        }
+      })
+      .catch((error) => setErrorMessage(`Error: ${error.message}`));
+  };
+
+  return (
+    <div>
+      <h1>Create a New Page</h1>
+      <input
+        type="text"
+        placeholder="Enter page name"
+        value={pageName}
+        onChange={(e) => setPageName(e.target.value)}
+      />
+      <select value={pageType} onChange={(e) => setPageType(e.target.value)}>
+        <option value="json">JSON Format</option>
+        <option value="mdx">MDX Format</option>
+      </select>
+      <button onClick={handleCreatePage}>Create Page</button>
+
+      {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
+    </div>
+  );
+};
+
+export default CreatePage;

package/src/MDXEditor.jsx

@@ -0,0 +1,51 @@
+//this.GUI/src/MDXEditor.jsx
+import React, { useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import MdxProvider from './MdxProvider';  // Correct
+
+const MDXEditor = () => {
+  const navigate = useNavigate();
+  const { pageName } = useParams();
+  const [mdxContent, setMdxContent] = useState(''); // Initial blank content
+
+  const handleInputChange = (e) => {
+    setMdxContent(e.target.value);
+  };
+
+  const handleSavePage = () => {
+    console.log('Saving MDX content:', mdxContent);
+    // Replace this with actual save functionality (e.g., send to a backend API)
+
+    // Optionally navigate back to the main dashboard or SiteBuilder
+    navigate(`/`);
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+      {/* MDX Editor */}
+      <textarea
+        value={mdxContent}
+        onChange={handleInputChange}
+        rows="15"
+        cols="80"
+        placeholder="Write your MDX content here..."
+        style={{ padding: '10px', fontSize: '16px' }}
+      />
+
+      {/* Live Preview */}
+      <div style={{ padding: '20px', border: '1px solid #ccc', marginTop: '20px' }}>
+        <h2>Live Preview</h2>
+        <MdxProvider>
+          <div>{mdxContent ? mdxContent : 'Your MDX preview will appear here.'}</div>
+        </MdxProvider>
+      </div>
+
+      {/* Save Button */}
+      <button onClick={handleSavePage} style={{ padding: '10px 20px', fontSize: '16px' }}>
+        Save MDX Page
+      </button>
+    </div>
+  );
+};
+
+export default MDXEditor;

package/src/PageDashboard.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import Atoms from './stories/Atoms'; // Import the Atoms object
+import Molecules from './stories/Molecules'; // Import the Atoms object
+import siteConfig from '../GUI/config/siteConfig.json'; // Import the config
+
+const PageDashboard = () => {
+  const navigate = useNavigate();
+
+  return (
+    <Atoms.Container
+    size='medium'>
+      <h1>Pages Dashboard</h1>
+
+      {/* Use this.GUI Button for "Add New Page" */}
+      <Atoms.Button
+        label="+ Add New Page"
+        variant="solid"
+        color="primary-color"  // Correct color value
+        onClick={() => navigate('/create-page')}
+        style={{ marginBottom: '20px' }}
+      />
+
+      {siteConfig.pages.length === 0 ? (
+        <p>No pages created yet.</p>
+      ) : (
+        <div className="page-grid" style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
+          {siteConfig.pages.map((page, index) => (
+            <Molecules.Card
+              key={index}
+              variant="outlined"
+              color="secondary"
+              style={{
+                width: '200px',
+                padding: '20px',
+                borderRadius: '8px',
+                boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
+              }}
+            >
+              <h3>{page.name}</h3>
+              <p>Type: {page.type}</p>
+              <Atoms.Button
+              label="Edit Page"
+              variant="outline"
+              color="secondary-color"  // Correct the color value here
+              onClick={() => navigate(page.path)}
+              />
+            </Molecules.Card>
+          ))}
+        </div>
+      )}
+    </Atoms.Container>
+  );
+};
+
+export default PageDashboard;

package/src/SiteBuilder.jsx

@@ -1,39 +1,108 @@
+//this.GUI/src/SiteBuilder.jsx
 import React, { useState } from 'react';
-import GUI from '../index';
+import { renderComponent } from './scripts/renderComponents';
+import ComponentRegistry from './scripts/ComponentRegistry'; // Import the component registry
 
 const SiteBuilder = () => {
-  const [pageContent, setPageContent] = useState([]); // Store the page components
-
-  // Example links for the sidebar
-  const sidebarLinks = [
-    { label: 'Dashboard', url: '/dashboard' },
-    { label: 'Settings', url: '/settings' },
-    { label: 'Profile', url: '/profile' },
-  ];
-
-  // Function to handle adding components
-  const addComponent = (component) => {
-    setPageContent([...pageContent, component]);
+  const [pageContent, setPageContent] = useState([]); // Stores the components added to the page
+  const [selectedComponent, setSelectedComponent] = useState(null); // Currently selected component for configuration
+
+  // Generate available components from the ComponentRegistry
+  const availableComponents = Object.keys(ComponentRegistry).map((key) => ({
+    type: key,
+    label: key,
+  }));
+
+  // Add a new component to the page
+  const addComponent = (componentType) => {
+    setPageContent([...pageContent, { type: componentType, props: {} }]);
+  };
+
+  // Update a component's properties
+  const updateComponentProps = (index, newProps) => {
+    const updatedPage = [...pageContent];
+    updatedPage[index].props = newProps;
+    setPageContent(updatedPage);
+  };
+
+  // Render components on the page
+  const renderPageContent = () => {
+    return pageContent.map((component, index) => {
+      const Component = renderComponent(component.type);
+      return (
+        <div
+          key={index}
+          onClick={() => setSelectedComponent(index)} // Select component for editing
+          style={{ border: selectedComponent === index ? '2px solid blue' : 'none' }}
+        >
+          {Component ? <Component {...component.props} /> : <p>Component not found</p>}
+        </div>
+      );
+    });
   };
 
   return (
-    <div className="site-builder">
-      {/* Fixed Navbar at the top */}
-      <GUI.Molecules.Navbar links={sidebarLinks} /> {/* Using the same links for simplicity */}
-      
-      <div style={{ display: 'flex' }}>
-        {/* Sidebar with components to drag and drop */}
-        <GUI.Molecules.Sidebar links={sidebarLinks} addComponent={addComponent} />
-
-        {/* Main content area where components are dropped */}
-        <main className="builder-content" style={{ flex: 1, padding: '20px' }}>
-          {pageContent.map((Component, idx) => (
-            <div key={idx}>{Component}</div>
+    <div style={{ display: 'flex' }}>
+      {/* Sidebar with available components */}
+      <div style={{ width: '20%', padding: '10px', backgroundColor: '#f0f0f0' }}>
+        <h4>Available Components</h4>
+        <ul>
+          {availableComponents.map((comp, index) => (
+            <li key={index}>
+              <button onClick={() => addComponent(comp.type)}>{comp.label}</button>
+            </li>
           ))}
-        </main>
+        </ul>
+      </div>
+
+      {/* Main canvas area for dragging and arranging components */}
+      <div style={{ width: '60%', padding: '10px' }}>
+        <h4>Canvas</h4>
+        {renderPageContent()}
+      </div>
+
+      {/* Configuration panel for the selected component */}
+      <div style={{ width: '20%', padding: '10px', backgroundColor: '#f9f9f9' }}>
+        <h4>Component Properties</h4>
+        {selectedComponent !== null && (
+          <ComponentConfigPanel
+            component={pageContent[selectedComponent]}
+            onUpdate={(newProps) => updateComponentProps(selectedComponent, newProps)}
+          />
+        )}
       </div>
     </div>
   );
 };
 
+// A simple panel to edit component properties
+const ComponentConfigPanel = ({ component, onUpdate }) => {
+  const [props, setProps] = useState(component.props);
+
+  const handleInputChange = (key, value) => {
+    setProps({ ...props, [key]: value });
+  };
+
+  const handleSave = () => {
+    onUpdate(props); // Send the updated props to the SiteBuilder
+  };
+
+  return (
+    <div>
+      <h5>Edit {component.type} Properties</h5>
+      {Object.keys(props).map((key) => (
+        <div key={key}>
+          <label>{key}</label>
+          <input
+            type="text"
+            value={props[key]}
+            onChange={(e) => handleInputChange(key, e.target.value)}
+          />
+        </div>
+      ))}
+      <button onClick={handleSave}>Save</button>
+    </div>
+  );
+};
+
 export default SiteBuilder;

package/src/scripts/postinstall.js

@@ -1,5 +1,5 @@
 // this.GUI/scripts/postinstall.js
-import { mkdir, writeFile, access } from 'fs/promises';
+import { mkdir, writeFile, access, readFile } from 'fs/promises';
 import { join } from 'path';
 
 const appRootDir = process.env.INIT_CWD || process.cwd();
@@ -8,9 +8,8 @@ const appRootDir = process.env.INIT_CWD || process.cwd();
 const guiDir = join(appRootDir, 'GUI');
 const componentsDir = join(guiDir, 'components');
 const pagesDir = join(guiDir, 'pages'); // Pages directory for JSON layouts
-const builderDir = join(guiDir, 'builder'); // Builder directory for site builder UI
-const mdxDir = join(guiDir, 'mdx');
-const stylesDir = join(guiDir, 'styles');
+const configDir = join(guiDir, 'config');
+const configFile = join(configDir, 'siteConfig.json');
 
 // Helper function to create directories only if they don't already exist
 async function createDir(dirPath) {
@@ -34,23 +33,47 @@ async function createFile(filePath, content) {
   }
 }
 
+// Helper function to update siteConfig.json
+async function updateSiteConfig(newPages) {
+  try {
+    const configContent = await readFile(configFile, 'utf-8');
+    const config = JSON.parse(configContent);
+
+    // Add new pages if they don't already exist in the config
+    newPages.forEach((newPage) => {
+      const exists = config.pages.find((page) => page.name === newPage.name);
+      if (!exists) {
+        config.pages.push(newPage);
+      }
+    });
+
+    await writeFile(configFile, JSON.stringify(config, null, 2));
+    console.log(`Updated: ${configFile}`);
+  } catch (err) {
+    console.error(`Failed to update siteConfig: ${err}`);
+  }
+}
+
 // Function to initialize the directory structure and files
 async function initializeFiles() {
-  const mdxWelcomeFile = join(mdxDir, 'Welcome.mdx');
-  const stylesFile = join(stylesDir, 'global.css');
+  const mdxWelcomeFile = join(pagesDir, 'Welcome.mdx');
   const samplePageFile = join(pagesDir, 'home.json'); // Sample JSON page
-  const builderIndexFile = join(builderDir, 'index.html'); // Entry point for builder UI
 
+  // Create siteConfig.json
   await createFile(
-    mdxWelcomeFile,
-    `# Welcome to Your Custom GUI\n\nThis is your first MDX file. Edit it to start building your pages!`
+    configFile,
+    `{
+      "pages": []
+    }`
   );
 
+  // Create Welcome.mdx as a sample MDX file
   await createFile(
-    stylesFile,
-    `/* Add your custom styles here */\nbody { font-family: 'Roboto', sans-serif; }`
+    mdxWelcomeFile,
+    `# Welcome to Your Custom GUI\n\nThis is your first MDX file. Edit it to start building your pages!`
   );
 
+  // Create a sample JSON page layout
   await createFile(
     samplePageFile,
     `{
@@ -69,31 +92,19 @@ async function initializeFiles() {
     }`
   );
 
-  await createFile(
-    builderIndexFile,
-    `<!DOCTYPE html>
-    <html lang="en">
-    <head>
-      <meta charset="UTF-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <title>GUI Builder</title>
-    </head>
-    <body>
-      <div id="builder-root"></div>
-      <script src="/path-to-your-builder-script.js"></script> <!-- Placeholder for the actual builder script -->
-    </body>
-    </html>`
-  );
+  // Update siteConfig.json with the sample pages
+  await updateSiteConfig([
+    { name: 'Welcome', path: '/welcome', type: 'mdx', file: './pages/Welcome.mdx' },
+    { name: 'Home', path: '/home', type: 'json', file: './pages/home.json' },
+  ]);
 }
 
 // Create the directory structure and initialize files at the app level
 (async () => {
   await createDir(guiDir);
   await createDir(componentsDir);
-  await createDir(mdxDir);
-  await createDir(stylesDir);
-  await createDir(pagesDir); // New directory for JSON-based pages
-  await createDir(builderDir); // Directory for builder UI
+  await createDir(pagesDir); // New directory for JSON and MDX pages
+  await createDir(configDir); // Create config directory
   await initializeFiles();
 
   console.log('this.GUI setup complete at the app level!');