this.gui 1.0.16 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "this.gui",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "This Graphic User Interface.",
   "main": "dist/this-gui.umd.js",
   "module": "dist/this-gui.es.js",
@@ -22,14 +22,12 @@
   },
   "dependencies": {
     "@storybook/builder-vite": "^8.2.9",
-    "autoprefixer": "^10.4.20",
     "classnames": "^2.5.1",
     "dotenv": "^16.4.5",
     "figlet": "^1.7.0",
     "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,4 +1,3 @@
-// This.GUI/src/App.jsx
 import React from 'react';
 import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
 import { ThemeProvider } from './themes/ThemeProvider';
@@ -6,6 +5,8 @@ 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 (
@@ -16,6 +17,7 @@ const App = () => {
           <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 */}
@@ -25,6 +27,7 @@ const App = () => {
           <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>

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/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

@@ -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;
+}

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';

package/src/stories/Atoms/Grid/Grid.css

@@ -0,0 +1,160 @@
+/*this.GUI/src/stories/Atoms/Grid/Grid.css*/
+/* Base Grid Styles */
+.grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Auto-fit responsive columns */
+  gap: 16px; /* Default gap between grid items */
+  padding: 16px;
+}
+
+/* Grid item styling */
+.grid > * {
+  background-color: var(--background-color);
+  padding: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Border Styles for Grid Items when the border prop is true */
+.grid--border > * {
+  border: 1px solid var(--border-color); /* Default border color */
+}
+
+/* Rounded corners */
+.grid--rounded > * {
+  border-radius: var(--border-radius, 8px); /* Apply rounded corners */
+}
+
+/* Shadow Depth Variants */
+.grid--shadow-small > * {
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2); /* Small shadow */
+}
+
+.grid--shadow-medium > * {
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Medium shadow */
+}
+
+.grid--shadow-large > * {
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.4); /* Large shadow */
+}
+
+/* Responsive behavior: grid adjusts based on screen size */
+@media (max-width: 768px) {
+  .grid {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 2 columns on tablet */
+  }
+}
+
+@media (max-width: 480px) {
+  .grid {
+    grid-template-columns: 1fr; /* 1 column on mobile */
+  }
+}
+
+/* Hover effect for visual feedback on grid items */
+.grid > *:hover {
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+}
+/* Border Color Variants (Using Theme Colors) */
+.grid--primary > * {
+  border-color: var(--primary-color);
+}
+
+.grid--secondary > * {
+  border-color: var(--secondary-color);
+}
+
+.grid--info > * {
+  border-color: var(--info-color);
+}
+
+.grid--warning > * {
+  border-color: var(--warning-color);
+}
+
+.grid--alert > * {
+  border-color: var(--alert-color);
+}
+
+.grid--success > * {
+  border-color: var(--success-color);
+}
+
+.grid--neutral > * {
+  border-color: var(--neutral-color);
+}
+
+.grid--dark > * {
+  border-color: var(--dark-color);
+}
+
+/* Classy Palette Variants */
+.grid--classy-color-1 > * {
+  border-color: var(--classy-color-1);
+}
+
+.grid--classy-color-2 > * {
+  border-color: var(--classy-color-2);
+}
+
+.grid--classy-color-3 > * {
+  border-color: var(--classy-color-3);
+}
+
+.grid--classy-color-4 > * {
+  border-color: var(--classy-color-4);
+}
+
+.grid--classy-color-5 > * {
+  border-color: var(--classy-color-5);
+}
+
+/* Small Switch Palette */
+.grid--small-switch-color-1 > * {
+  border-color: var(--small-switch-color-1);
+}
+
+.grid--small-switch-color-2 > * {
+  border-color: var(--small-switch-color-2);
+}
+
+/* Natural Palette */
+.grid--natural-color-1 > * {
+  border-color: var(--natural-color-1);
+}
+
+.grid--natural-color-2 > * {
+  border-color: var(--natural-color-2);
+}
+
+.grid--natural-color-3 > * {
+  border-color: var(--natural-color-3);
+}
+
+/* Grey Friends */
+.grid--grey-friend-1 > * {
+  border-color: var(--grey-friend-1);
+}
+
+.grid--grey-friend-2 > * {
+  border-color: var(--grey-friend-2);
+}
+
+/* Shades */
+.grid--shade-1 > * {
+  border-color: var(--shade-1);
+}
+
+.grid--shade-2 > * {
+  border-color: var(--shade-2);
+}
+
+.grid--shade-3 > * {
+  border-color: var(--shade-3);
+}
+
+.grid--shade-4 > * {
+  border-color: var(--shade-4);
+}

package/src/stories/Atoms/Grid/Grid.jsx

@@ -0,0 +1,43 @@
+//this.GUI/src/stories/Atoms/Grid/Grid.jsx
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Grid.css'; // Import the revised grid styles
+
+export const Grid = ({ gap, border, color, rounded, shadow, children }) => {
+  const gridClasses = [
+    'grid', // Base grid class
+    border ? `grid--border grid--${color}` : '', // Conditionally apply border and color
+    rounded ? 'grid--rounded' : '', // Conditionally apply rounded corners
+    shadow ? `grid--shadow-${shadow}` : '', // Conditionally apply shadow depth
+  ].join(' ').trim();
+
+  return (
+    <div className={gridClasses} style={{ gap }}>
+      {children} {/* Grid items go here */}
+    </div>
+  );
+};
+
+Grid.propTypes = {
+  gap: PropTypes.string,
+  border: PropTypes.bool,
+  color: PropTypes.oneOf([
+    'primary', 'secondary', 'info', 'warning', 'alert', 'success', 'neutral', 'dark',
+    'classy-color-1', 'classy-color-2', 'classy-color-3', 'classy-color-4', 'classy-color-5',
+    'small-switch-color-1', 'small-switch-color-2',
+    'natural-color-1', 'natural-color-2', 'natural-color-3',
+    'grey-friend-1', 'grey-friend-2',
+    'shade-1', 'shade-2', 'shade-3', 'shade-4'
+  ]),
+  rounded: PropTypes.bool, // Boolean for rounded corners
+  shadow: PropTypes.oneOf(['none', 'small', 'medium', 'large']), // Depth of shadow
+  children: PropTypes.node.isRequired,
+};
+
+Grid.defaultProps = {
+  gap: '16px', // Default gap between items
+  border: false, // Default to no border
+  color: 'primary', // Default border color
+  rounded: false, // Default to no rounded corners
+  shadow: 'none', // Default to no shadow
+};

package/src/stories/Atoms/Grid/Grid.stories.jsx

@@ -0,0 +1,84 @@
+//this.GUI/src/stories/Atoms/Grid/Grid.stories.jsx
+import React from 'react';
+import { Grid } from './Grid';
+
+export default {
+  title: 'Atoms/Layout/Grid',
+  component: Grid,
+  argTypes: {
+    gap: { control: 'text', defaultValue: '16px' },
+    border: { control: 'boolean', defaultValue: false },
+    rounded: { control: 'boolean', defaultValue: false },
+    shadow: {
+      control: 'select',
+      options: ['none', 'small', 'medium', 'large'],
+      defaultValue: 'none',
+    },
+    color: {
+      control: 'select',
+      options: [
+        'primary', 'secondary', 'info', 'warning', 'alert', 'success', 'neutral', 'dark',
+        'classy-color-1', 'classy-color-2', 'classy-color-3', 'classy-color-4', 'classy-color-5',
+        'small-switch-color-1', 'small-switch-color-2',
+        'natural-color-1', 'natural-color-2', 'natural-color-3',
+        'grey-friend-1', 'grey-friend-2',
+        'shade-1', 'shade-2', 'shade-3', 'shade-4'
+      ],
+      defaultValue: 'primary',
+    },
+  },
+};
+
+export const ResponsiveGrid = (args) => (
+  <Grid {...args}>
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+    <div>Item 4</div>
+    <div>Item 5</div>
+    <div>Item 6</div>
+    <div>Item 7</div>
+    <div>Item 8</div>
+    <div>Item 9</div>
+  </Grid>
+);
+
+export const GridWithRoundedAndShadow = (args) => (
+  <Grid {...args} border={true} rounded={true} shadow="medium" color="primary">
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+    <div>Item 4</div>
+    <div>Item 5</div>
+    <div>Item 6</div>
+    <div>Item 7</div>
+    <div>Item 8</div>
+    <div>Item 9</div>
+  </Grid>
+);
+
+export const ColorfulGrid = (args) => (
+  <Grid {...args} color="alert">
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+    <div>Item 4</div>
+    <div>Item 5</div>
+    <div>Item 6</div>
+    <div>Item 7</div>
+    <div>Item 8</div>
+    <div>Item 9</div>
+    <div>Item 10</div>
+    <div>Item 11</div>
+    <div>Item 12</div>
+    <div>Item 13</div>
+    <div>Item 14</div>
+    <div>Item 15</div>
+    <div>Item 16</div>
+    <div>Item 17</div>
+    <div>Item 18</div>
+    <div>Item 19</div>
+    <div>Item 20</div>
+    <div>Item 21</div>
+  </Grid>
+);

package/src/stories/Atoms/ProgressBar/ProgressBar.css

@@ -1,4 +1,4 @@
-/* ProgressBar.css */
+/* this.GUI/src/stories/Atoms/ProgressBar/ProgressBar.css */
 
 .progress-bar-container {
   width: 100%;

package/src/stories/Atoms/ProgressBar/ProgressBar.jsx

@@ -1,4 +1,4 @@
-// ProgressBar.jsx
+// this.GUI/src/stories/Atoms/ProgressBar/ProgressBar.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
 import './ProgressBar.css'; // Import the CSS styles

package/src/stories/Atoms/ProgressBar/ProgressBar.stories.jsx

@@ -1,4 +1,4 @@
-// ProgressBar.stories.jsx
+// this.GUI/src/stories/Atoms/ProgressBar/ProgressBar.stories.jsx
 import React from 'react';
 import { ProgressBar } from './ProgressBar';
 import './ProgressBar.css'; // Import the CSS styles