this.gui 1.0.16 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "this.gui",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "This Graphic User Interface.",
   "main": "dist/this-gui.umd.js",
   "module": "dist/this-gui.es.js",
@@ -22,14 +22,13 @@
   },
   "dependencies": {
     "@storybook/builder-vite": "^8.2.9",
-    "autoprefixer": "^10.4.20",
     "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",
-    "tailwindcss": "^3.4.10"
+    "react-router-dom": "^6.26.2"
   },
   "peerDependencies": {
     "react": "^18.0.0",

package/src/App.jsx

@@ -1,53 +1,32 @@
-// This.GUI/src/App.jsx
 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 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>
-          </nav>
-
-          {/* Render SelectTheme in the main app */}
-          <ThemeSwitcher />
-
-          {/* Route definitions */}
-          <Routes>
-            <Route path="/" element={<SiteBuilder />} /> {/* Site builder interface */}
-            <Route path="/storybook" element={<Storybook />} /> {/* Documentation */}
-          </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/Page.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { renderComponent } from './scripts/renderComponents';
+
+const Page = ({ config }) => {
+  return (
+    <div>
+      {config.layout.map((item, index) => {
+        const Component = renderComponent(item.type);
+        return Component ? (
+          <Component key={index} {...item.props}>
+            {item.children && item.children.map((child, childIndex) => {
+              const ChildComponent = renderComponent(child.type);
+              return ChildComponent ? (
+                <ChildComponent key={childIndex} {...child.props} />
+              ) : (
+                <p key={childIndex}>Component "{child.type}" not found</p>
+              );
+            })}
+          </Component>
+        ) : (
+          <p key={index}>Component "{item.type}" not found</p>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Page;

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/example.json

@@ -0,0 +1,43 @@
+{
+    "layout": [
+      {
+        "type": "Card",
+        "props": {
+          "variant": "solid",
+          "color": "primary-color",
+          "width": "300px"
+        },
+        "children": [
+          {
+            "type": "Heading",
+            "props": {
+              "text": "Welcome to the Site!"
+            }
+          },
+          {
+            "type": "Paragraph",
+            "props": {
+              "text": "This is a description inside the card."
+            }
+          },
+          {
+            "type": "Button",
+            "props": {
+              "label": "Click Me",
+              "color": "secondary-color"
+            }
+          }
+        ]
+      },
+      {
+        "type": "Navbar",
+        "props": {
+          "links": [
+            { "label": "Home", "url": "/" },
+            { "label": "About", "url": "/about" },
+            { "label": "Contact", "url": "/contact" }
+          ]
+        }
+      }
+    ]
+  }

package/src/scripts/ComponentRegistry.js

@@ -0,0 +1,70 @@
+// src/ComponentRegistry.js
+import Atoms from '../stories/Atoms/index'; 
+import Molecules from '../stories/Molecules/index';
+const ComponentRegistry = {
+ // Atoms
+Alert: Atoms.Alert,
+Audio: Atoms.Audio,
+Badge: Atoms.Badge,
+Button: Atoms.Button,
+Caption: Atoms.Caption,
+Checkbox: Atoms.Checkbox,
+Container: Atoms.Container,
+Divider: Atoms.Divider,
+Grid: Atoms.Grid,
+Heading: Atoms.Heading,
+Icon: Atoms.Icon,
+Image: Atoms.Image,
+Label: Atoms.Label,
+Link: Atoms.Link,
+Loader: Atoms.Loader,
+Logo: Atoms.Logo,
+Paragraph: Atoms.Paragraph,
+ProgressBar: Atoms.ProgressBar,
+RadioButton: Atoms.RadioButton,
+Range: Atoms.Range,
+Section: Atoms.Section,
+Select: Atoms.Select,
+Slider: Atoms.Slider,
+Snackbar: Atoms.Snackbar,
+Spacer: Atoms.Spacer,
+Spinner: Atoms.Spinner,
+Tag: Atoms.Tag,
+TextArea: Atoms.TextArea,
+TextInput: Atoms.TextInput,
+Toggle: Atoms.Toggle,
+Tooltip: Atoms.Tooltip,
+Video: Atoms.Video,
+
+// Molecules
+Accordion: Molecules.Accordion,
+AudioPlayer: Molecules.AudioPlayer,
+AvatarWithName: Molecules.AvatarWithName,
+Breadcrumbs: Molecules.Breadcrumbs,
+ButtonGroup: Molecules.ButtonGroup,
+Card: Molecules.Card,
+ComparisonTable: Molecules.ComparisonTable,
+DataTable: Molecules.DataTable,
+Dropdown: Molecules.Dropdown,
+FileUpload: Molecules.FileUpload,
+FormField: Molecules.FormField,
+IconButton: Molecules.IconButton,
+ImageWithCaption: Molecules.ImageWithCaption,
+InputGroup: Molecules.InputGroup,
+InputWithLabel: Molecules.InputWithLabel,
+List: Molecules.List,
+MediaCard: Molecules.MediaCard,
+Modal: Molecules.Modal,
+Navbar: Molecules.Navbar,
+Notification: Molecules.Notification,
+PricingTable: Molecules.PricingTable,
+SearchBar: Molecules.SearchBar,
+SelectTheme: Molecules.SelectTheme,
+Sidebar: Molecules.Sidebar,
+VideoWithDescription: Molecules.VideoWithDescription,
+
+  // Layouts and Templates
+  // Add more components as needed
+};
+
+export default ComponentRegistry;

package/src/scripts/postinstall.js

@@ -1,15 +1,15 @@
 // this.GUI/scripts/postinstall.js
-import { mkdir, writeFile, access } from 'fs/promises';
+import { mkdir, writeFile, access, readFile } from 'fs/promises';
 import { join } from 'path';
 
-// Use process.env.INIT_CWD to get the root of the user's project during npm install
 const appRootDir = process.env.INIT_CWD || process.cwd();
 
 // Define paths for directories at the app level
 const guiDir = join(appRootDir, 'GUI');
 const componentsDir = join(guiDir, 'components');
-const mdxDir = join(guiDir, 'mdx');
-const stylesDir = join(guiDir, 'styles');
+const pagesDir = join(guiDir, 'pages'); // Pages directory for JSON layouts
+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) {
@@ -33,28 +33,78 @@ 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
 
+  // Create siteConfig.json
+  await createFile(
+    configFile,
+    `{
+      "pages": []
+    }`
+  );
+
+  // Create Welcome.mdx as a sample MDX file
   await createFile(
     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(
-    stylesFile,
-    `/* Add your custom styles here */\nbody { font-family: 'Roboto', sans-serif; }`
+    samplePageFile,
+    `{
+      "layout": [
+        {
+          "type": "Card",
+          "props": { "variant": "solid", "color": "primary-color", "width": "300px" },
+          "children": [
+            {
+              "type": "Paragraph",
+              "props": { "text": "Welcome to our site!" }
+            }
+          ]
+        }
+      ]
+    }`
   );
+
+  // 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 and MDX pages
+  await createDir(configDir); // Create config directory
   await initializeFiles();
 
   console.log('this.GUI setup complete at the app level!');

package/src/scripts/renderComponents.js

@@ -0,0 +1,11 @@
+// this.GUI/src/renderComponent.js
+import ComponentRegistry from './ComponentRegistry';
+
+export function renderComponent(type) {
+  const Component = ComponentRegistry[type];
+  if (!Component) {
+    console.warn(`Component type "${type}" not found in the registry.`);
+    return null;
+  }
+  return Component;
+}

package/src/stories/Atoms/Badge/Badge.css

@@ -1,3 +1,4 @@
+/*this.GUI/src/stories/Atoms/Badge/Badge.css*/
 .badge {
   display: inline-block;
   padding: 4px 8px;

package/src/stories/Atoms/Badge/Badge.stories.jsx

@@ -1,3 +1,4 @@
+//this.GUI/src/stories/Atoms/Badge/Badge.stories.jsx
 import React from 'react';
 import { Badge } from './Badge';
 import './Badge.css';