this.gui 1.0.15 → 1.0.17

package/package.json

@@ -1,34 +1,33 @@
 {
   "name": "this.gui",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "This Graphic User Interface.",
   "main": "dist/this-gui.umd.js",
   "module": "dist/this-gui.es.js",
+  "type": "module",
+  "author": "suiGn",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/neurons-me/GUI.git"
   },
   "scripts": {
-  "start": "node ./src/scripts/logASCIIArt.js && concurrently \"vite --open\" \"storybook dev -p 6006 --no-open\"",
+    "start": "node ./src/scripts/logASCIIArt.js && concurrently \"vite --open\" \"storybook dev -p 6006 --no-open\"",
     "dev": "vite",
     "build": "vite build",
     "prepublishOnly": "npm run build",
     "storybook": "storybook dev -p ${STORYBOOK_PORT:-6006}",
     "build-storybook": "storybook build",
-    "postinstall": "node src/scripts/postinstall.js" 
+    "postinstall": "node src/scripts/postinstall.js"
   },
-  "type": "module",
-  "author": "suiGn",
-  "license": "MIT",
   "dependencies": {
     "@storybook/builder-vite": "^8.2.9",
-    "@vitejs/plugin-react": "^4.3.1",
-    "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",
-    "tailwindcss": "^3.4.10"
+    "react-icons": "^5.3.0",
+    "react-router-dom": "^6.26.2"
   },
   "peerDependencies": {
     "react": "^18.0.0",
@@ -39,7 +38,7 @@
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
     "@mdx-js/rollup": "^3.0.1",
-    "@storybook/addon-docs": "^8.3.0",
+    "@storybook/addon-docs": "^8.3.4",
     "@storybook/addon-essentials": "^8.3.0",
     "@storybook/addon-interactions": "^8.3.0",
     "@storybook/addon-links": "^8.3.0",
@@ -47,20 +46,21 @@
     "@storybook/blocks": "^8.2.9",
     "@storybook/manager-api": "^8.2.9",
     "@storybook/react": "^8.3.0",
-    "@storybook/react-vite": "^8.3.0",
+    "@storybook/react-vite": "^8.3.4",
     "@storybook/test": "^8.2.9",
     "@storybook/theming": "^8.2.9",
+    "@vitejs/plugin-react": "^4.3.2",
     "concurrently": "^9.0.1",
     "cross-env": "^7.0.3",
     "prop-types": "^15.8.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "storybook": "^8.2.9",
-    "vite": "^4.5.3"
+    "vite": "^5.4.8"
   },
   "files": [
     "dist",
-    "src", 
+    "src",
     "README.md",
     "package.json"
   ]

package/src/App.jsx

@@ -1,31 +1,63 @@
-// src/App.jsx
 import React from 'react';
-import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
-import { ThemeProvider } from './themes/ThemeProvider'; // Import ThemeProvider
+import { BrowserRouter as Router, Route, Routes, Link } 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
 
 const App = () => {
   return (
     <ThemeProvider>
-      <Router>
-        <Switch>
-          <Route exact path="/">
-            <div>
-              <h1>Main App</h1>
-              <Link to="/" style={{ marginRight: '20px' }}>Home</Link>
-              <Link to="/storybook" style={{ marginRight: '20px' }}>Storybook</Link>
-            </div>
-          </Route>
-          <Route path="/storybook">
-            <iframe
-              src="http://localhost:6006" // Adjust the URL based on your setup
-              style={{ width: '100%', height: '100vh', border: 'none' }}
-              title="Storybook"
-            ></iframe>
-          </Route>
-        </Switch>
-      </Router>
+      <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>
     </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
+    src="http://localhost:6006" // Adjust based on your Storybook setup
+    style={{ width: '100%', height: '100vh', border: 'none' }}
+    title="Storybook"
+  ></iframe>
+);
+
 export default App;

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/SiteBuilder.jsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import GUI from '../index';
+
+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]);
+  };
+
+  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>
+          ))}
+        </main>
+      </div>
+    </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/index.mdx

@@ -15,6 +15,16 @@ import GUI from '../index';
   }
 />
 
+<GUI.Molecules.Sidebar
+  links={[
+    { url: '#home', label: 'Home', isActive: true },
+    { url: '#about', label: 'About', isActive: false },
+    { url: '#services', label: 'Services', isActive: false },
+  ]}
+  logo={<img src="https://example.com/logo.png" alt="Logo" />}
+  userControls={<button>Logout</button>}
+/>
+
 # Welcome to THIS.GUI
 
 ## Understanding MDX (Markdown + JSX)

package/src/main.jsx

@@ -1,18 +1,15 @@
-//this.GUI/src/mains.jsx
+// main.jsx
 import React from 'react';
-import ReactDOM from 'react-dom';
-import MDXContent from './index.mdx';
-import MdxProvider from './MdxProvider';  
-import { ThemeProvider } from './themes/ThemeProvider';  // Import ThemeProvider
-import './styles/global.css'; // Import the global CSS
+import { createRoot } from 'react-dom/client';
+import App from './App'; // Import App component
 
-ReactDOM.render(
+// Grab the container element
+const container = document.getElementById('root');
+const root = createRoot(container);
+
+// Render your app using createRoot
+root.render(
   <React.StrictMode>
-    <ThemeProvider>
-      <MdxProvider>
-        <MDXContent />
-      </MdxProvider>
-    </ThemeProvider>
-  </React.StrictMode>,
-  document.getElementById('root')
+    <App /> {/* Render the entire App component */}
+  </React.StrictMode>
 );

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

@@ -2,12 +2,13 @@
 import { mkdir, writeFile, access } 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 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');
 
@@ -37,6 +38,8 @@ async function createFile(filePath, content) {
 async function initializeFiles() {
   const mdxWelcomeFile = join(mdxDir, 'Welcome.mdx');
   const stylesFile = join(stylesDir, 'global.css');
+  const samplePageFile = join(pagesDir, 'home.json'); // Sample JSON page
+  const builderIndexFile = join(builderDir, 'index.html'); // Entry point for builder UI
 
   await createFile(
     mdxWelcomeFile,
@@ -47,6 +50,40 @@ async function initializeFiles() {
     stylesFile,
     `/* Add your custom styles here */\nbody { font-family: 'Roboto', sans-serif; }`
   );
+
+  await createFile(
+    samplePageFile,
+    `{
+      "layout": [
+        {
+          "type": "Card",
+          "props": { "variant": "solid", "color": "primary-color", "width": "300px" },
+          "children": [
+            {
+              "type": "Paragraph",
+              "props": { "text": "Welcome to our site!" }
+            }
+          ]
+        }
+      ]
+    }`
+  );
+
+  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>`
+  );
 }
 
 // Create the directory structure and initialize files at the app level
@@ -55,6 +92,8 @@ async function initializeFiles() {
   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 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;
+}