this.gui 1.0.14 → 1.0.16

package/package.json

@@ -1,33 +1,34 @@
 {
   "name": "this.gui",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "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",
+    "react-icons": "^5.3.0",
+    "react-router-dom": "^6.26.2",
     "tailwindcss": "^3.4.10"
   },
   "peerDependencies": {
@@ -39,7 +40,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 +48,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,60 @@
-// src/App.jsx
+// This.GUI/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
 
 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>
+          </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>
     </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/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/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/postinstall.js

@@ -1,19 +1,17 @@
 // this.GUI/scripts/postinstall.js
 import { mkdir, writeFile, access } from 'fs/promises';
 import { join } from 'path';
-import { fileURLToPath } from 'url';
 
-// Get the current directory path
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = join(__filename, '..', '..');
+// 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
-const guiDir = join(__dirname, '..', 'GUI');
+// 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');
 
-// Helper function to create directories
+// Helper function to create directories only if they don't already exist
 async function createDir(dirPath) {
   try {
     await access(dirPath);
@@ -24,35 +22,34 @@ async function createDir(dirPath) {
   }
 }
 
-// Helper function to create initial files if they don't exist
+// Helper function to create initial files only if they don't already exist
+async function createFile(filePath, content) {
+  try {
+    await access(filePath);
+    console.log(`File already exists: ${filePath}`);
+  } catch {
+    await writeFile(filePath, content);
+    console.log(`Created: ${filePath}`);
+  }
+}
+
+// Function to initialize the directory structure and files
 async function initializeFiles() {
   const mdxWelcomeFile = join(mdxDir, 'Welcome.mdx');
   const stylesFile = join(stylesDir, 'global.css');
 
-  try {
-    await access(mdxWelcomeFile);
-    console.log(`File already exists: ${mdxWelcomeFile}`);
-  } catch {
-    await writeFile(
-      mdxWelcomeFile,
-      `# Welcome to Your Custom GUI\n\nThis is your first MDX file. Edit it to start building your pages!`
-    );
-    console.log(`Created: ${mdxWelcomeFile}`);
-  }
+  await createFile(
+    mdxWelcomeFile,
+    `# Welcome to Your Custom GUI\n\nThis is your first MDX file. Edit it to start building your pages!`
+  );
 
-  try {
-    await access(stylesFile);
-    console.log(`File already exists: ${stylesFile}`);
-  } catch {
-    await writeFile(
-      stylesFile,
-      `/* Add your custom styles here */\nbody { font-family: 'Roboto', sans-serif; }`
-    );
-    console.log(`Created: ${stylesFile}`);
-  }
+  await createFile(
+    stylesFile,
+    `/* Add your custom styles here */\nbody { font-family: 'Roboto', sans-serif; }`
+  );
 }
 
-// Create the directory structure and initialize files
+// Create the directory structure and initialize files at the app level
 (async () => {
   await createDir(guiDir);
   await createDir(componentsDir);
@@ -60,5 +57,5 @@ async function initializeFiles() {
   await createDir(stylesDir);
   await initializeFiles();
 
-  console.log('this.GUI setup complete!');
-})();
+  console.log('this.GUI setup complete at the app level!');
+})();

package/src/scripts/verifyLayouts.js

@@ -0,0 +1,175 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import Layout from '../stories/Layouts/meta_Layouts.js';  // Import the Layout constant
+
+// Define __dirname for ES modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Helper function to check if a file exists relative to the script's directory
+const fileExists = (relativeFilePath) => {
+  const fullPath = path.resolve(__dirname, relativeFilePath);
+  return fs.existsSync(fullPath);
+};
+
+// Default CSS template for Layouts
+const createDefaultCSSTemplate = (componentName) => `
+.${componentName.toLowerCase()} {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 16px;
+  gap: 8px;
+  border: 1px solid #ddd;
+}
+
+.${componentName.toLowerCase()}--primary {
+  background-color: #e3f2fd;
+}
+
+.${componentName.toLowerCase()}--secondary {
+  background-color: #fff;
+}
+`;
+
+// Default JSX template for Layouts
+const createDefaultJSX = (componentName) => `
+import React from 'react';
+import PropTypes from 'prop-types';
+import './${componentName}.css';
+
+/**
+ * ${componentName} layout component
+ */
+export const ${componentName} = ({ children, primary, ...props }) => {
+  const mode = primary ? '${componentName.toLowerCase()}--primary' : '${componentName.toLowerCase()}--secondary';
+  return (
+    <div className={['${componentName.toLowerCase()}', mode].join(' ')} {...props}>
+      {children}
+    </div>
+  );
+};
+
+${componentName}.propTypes = {
+  /**
+   * Primary style for the layout
+   */
+  primary: PropTypes.bool,
+  /**
+   * Children components to be rendered inside the layout
+   */
+  children: PropTypes.node.isRequired,
+};
+
+${componentName}.defaultProps = {
+  primary: false,
+};
+`;
+
+// Default Storybook template for Layouts
+const createDefaultStorybookTemplate = (componentName) => `
+import { ${componentName} } from './${componentName}';
+
+// Storybook configuration for ${componentName} component
+export default {
+  title: 'Layouts/${componentName}',
+  component: ${componentName},
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+};
+
+export const Primary = {
+  args: {
+    primary: true,
+    children: 'This is a primary ${componentName} layout.',
+  },
+};
+
+export const Secondary = {
+  args: {
+    primary: false,
+    children: 'This is a secondary ${componentName} layout.',
+  },
+};
+`;
+
+// Helper function to write files
+const writeFile = (filePath, content) => {
+  const fullPath = path.resolve(__dirname, filePath);
+  fs.mkdirSync(path.dirname(fullPath), { recursive: true });
+  fs.writeFileSync(fullPath, content, 'utf8');
+  console.log(`✅ Created: ${filePath}`);
+};
+
+// Function to verify each path and create missing files with default content
+async function verifyPaths(component, paths) {
+  const missingFiles = [];  // Initialize missingFiles array
+
+  for (const [key, filePath] of Object.entries(paths)) {
+    const adjustedPath = path.join('..', 'stories', 'Layouts', filePath);
+
+    if (!fileExists(adjustedPath)) {
+      console.log(`❌ Missing: ${adjustedPath}`);
+      missingFiles.push(adjustedPath);
+
+      // Automatically create the missing file with default content
+      if (key === 'css') {
+        writeFile(adjustedPath, createDefaultCSSTemplate(component.name.trim()));
+      } else if (key === 'jsx') {
+        writeFile(adjustedPath, createDefaultJSX(component.name.trim()));
+      } else if (key === 'stories') {
+        writeFile(adjustedPath, createDefaultStorybookTemplate(component.name.trim()));
+      }
+    } else {
+      console.log(`✅ Exists: ${adjustedPath}`);
+    }
+  }
+
+  return missingFiles;  // Return missingFiles array
+}
+
+// Main function to handle installation and verification
+async function installAndVerifyLayouts(Layout) {
+  const missingFilesReport = [];
+
+  // Loop through each category (Grid, Navigation, etc.)
+  for (const category of Object.keys(Layout.Layout)) {
+    console.log(`\nVerifying category: ${category}`);
+
+    // Loop through each component in the category
+    for (const component of Layout.Layout[category]) {
+      console.log(`\nVerifying component: ${component.name}`);
+
+      // Verify each path for the component and get missing files
+      const missingFiles = await verifyPaths(component, component.paths);
+
+      // If files are missing, report them
+      if (missingFiles.length > 0) {
+        missingFilesReport.push({
+          component: component.name,
+          missingFiles,
+        });
+      }
+    }
+  }
+
+  // If there are missing files, summarize the report
+  if (missingFilesReport.length > 0) {
+    console.log("\nInstallation or verification required for the following components:");
+    missingFilesReport.forEach((report) => {
+      console.log(`\nComponent: ${report.component}`);
+      report.missingFiles.forEach((file) => {
+        console.log(`  ❌ Missing file: ${file}`);
+      });
+    });
+  } else {
+    console.log("\nAll components verified successfully! ✅");
+  }
+}
+
+// Run the verification script
+installAndVerifyLayouts(Layout);

package/src/scripts/verifyTemplates.js

@@ -0,0 +1,154 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import Templates from '../stories/Templates/meta_Templates.js';  // Import the Templates constant
+
+// Define __dirname for ES modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Helper function to check if a file exists relative to the script's directory
+const fileExists = (relativeFilePath) => {
+  const fullPath = path.resolve(__dirname, relativeFilePath);
+  return fs.existsSync(fullPath);
+};
+
+// Default CSS template for Templates
+const createDefaultCSSTemplate = (componentName) => `
+.${componentName.toLowerCase()} {
+  padding: 16px;
+  border-radius: 8px;
+  background-color: #f0f0f0;
+  border: 1px solid #ddd;
+}
+`;
+
+// Default JSX template for Templates
+const createDefaultJSX = (componentName) => `
+import React from 'react';
+import PropTypes from 'prop-types';
+import './${componentName}.css';
+
+/**
+ * ${componentName} template component
+ */
+export const ${componentName} = ({ children, ...props }) => {
+  return (
+    <div className="${componentName.toLowerCase()}" {...props}>
+      {children}
+    </div>
+  );
+};
+
+${componentName}.propTypes = {
+  /**
+   * Children components to be rendered inside the template
+   */
+  children: PropTypes.node.isRequired,
+};
+
+export default ${componentName};
+`;
+
+// Default Storybook template for Templates
+const createDefaultStorybookTemplate = (componentName, category) => `
+import { ${componentName} } from './${componentName}';
+
+// Storybook configuration for ${componentName} template
+export default {
+  title: 'Templates/${category}/${componentName}',
+  component: ${componentName},
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+};
+
+export const Default = {
+  args: {
+    children: 'This is a default ${componentName} template.',
+  },
+};
+`;
+
+// Helper function to write files and create directories if needed
+const writeFile = (filePath, content) => {
+  const fullPath = path.resolve(__dirname, filePath);
+  fs.mkdirSync(path.dirname(fullPath), { recursive: true });
+  fs.writeFileSync(fullPath, content, 'utf8');
+  console.log(`✅ Created: ${filePath}`);
+};
+
+// Function to verify each path and create missing files with default content
+async function verifyPaths(component, paths, category) {
+  const missingFiles = [];  // Initialize missingFiles array
+
+  for (const [key, filePath] of Object.entries(paths)) {
+    const componentName = component.name.trim();
+    const basePath = path.join('..', 'stories', 'Templates', category, componentName);
+    
+    const adjustedPath = path.join(basePath, path.basename(filePath));
+
+    if (!fileExists(adjustedPath)) {
+      console.log(`❌ Missing: ${adjustedPath}`);
+      missingFiles.push(adjustedPath);
+
+      // Automatically create the missing file with default content
+      if (key === 'css') {
+        writeFile(adjustedPath, createDefaultCSSTemplate(componentName));
+      } else if (key === 'jsx') {
+        writeFile(adjustedPath, createDefaultJSX(componentName));
+      } else if (key === 'stories') {
+        writeFile(adjustedPath, createDefaultStorybookTemplate(componentName, category));
+      }
+    } else {
+      console.log(`✅ Exists: ${adjustedPath}`);
+    }
+  }
+
+  return missingFiles;  // Return missingFiles array
+}
+
+// Main function to handle installation and verification of Templates
+async function installAndVerifyTemplates(Templates) {
+  const missingFilesReport = [];
+
+  // Loop through each category (LandingPages, DashboardLayouts, etc.)
+  for (const category of Object.keys(Templates.Templates)) {
+    console.log(`\nVerifying category: ${category}`);
+
+    // Loop through each component in the category
+    for (const component of Templates.Templates[category]) {
+      console.log(`\nVerifying component: ${component.name.trim()}`);
+
+      // Verify each path for the component and get missing files
+      const missingFiles = await verifyPaths(component, component.paths, category);
+
+      // If files are missing, report them
+      if (missingFiles.length > 0) {
+        missingFilesReport.push({
+          component: component.name.trim(),
+          missingFiles,
+        });
+      }
+    }
+  }
+
+  // If there are missing files, summarize the report
+  if (missingFilesReport.length > 0) {
+    console.log("\nInstallation or verification required for the following components:");
+    missingFilesReport.forEach((report) => {
+      console.log(`\nComponent: ${report.component}`);
+      report.missingFiles.forEach((file) => {
+        console.log(`  ❌ Missing file: ${file}`);
+      });
+    });
+  } else {
+    console.log("\nAll components verified successfully! ✅");
+  }
+}
+
+// Run the verification script
+installAndVerifyTemplates(Templates);