this.gui 1.0.18 → 1.1.0

package/src/MDXEditor.jsx

@@ -1,51 +0,0 @@
-//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/MdxProvider.jsx

@@ -1,20 +0,0 @@
-//this.GUI/src/MdxProvider.jsx
-import React from 'react';
-import { MDXProvider } from '@mdx-js/react';
-
-// Define custom components without inline styles
-const components = {
-  h1: (props) => <h1 className="mdx-h1" {...props} />,  // Let the theme handle the styles
-  h2: (props) => <h2 className="mdx-h2" {...props} />,
-  p: (props) => <p className="mdx-p" {...props} />,
-  a: (props) => <a className="mdx-link" {...props} />,
-  code: (props) => <code className="mdx-code" {...props} />,
-  pre: (props) => <pre className="mdx-pre" {...props} />,
-  // Add more custom components as needed, without inline styles
-};
-
-const MdxProvider = ({ children }) => {
-  return <MDXProvider components={components}>{children}</MDXProvider>;
-};
-
-export default MdxProvider;

package/src/Page.jsx

@@ -1,28 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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,108 +0,0 @@
-//this.GUI/src/SiteBuilder.jsx
-import React, { useState } from 'react';
-import { renderComponent } from './scripts/renderComponents';
-import ComponentRegistry from './scripts/ComponentRegistry'; // Import the component registry
-
-const SiteBuilder = () => {
-  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 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>
-          ))}
-        </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

@@ -1,43 +0,0 @@
-{
-    "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

@@ -1,164 +0,0 @@
-import GUI from '../index';
-
-<GUI.Molecules.Navbar
-  links={[
-    { url: '/', label: 'Home', isActive: true },
-    { url: '/about', label: 'About', isActive: false },
-    { url: 'http://localhost:6006/', label: 'Storybook', isActive: false },
-    { url: '/contact', label: 'Contact', isActive: false },
-  ]}
-  logo={
-    <img src="https://suign.github.io/assets/imgs/neurons_me_logo.png" alt="Logo" style={{ height: '40px' }} />
-  }
-  userControls={
-    <GUI.Atoms.Button>Click</GUI.Atoms.Button>
-  }
-/>
-
-<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)
-This page is written in **MDX**, a powerful format that allows you to write Markdown while embedding JSX components. With MDX, you can write documentation or content using Markdown's simplicity and still interact with React components directly within the same file.
-For example, in this document, we can use regular Markdown syntax for headings, paragraphs, and links, but we also import and use components from our `this.GUI` library.
-
-### Key Concepts of MDX
-- **Markdown for Content**: Regular text, links, images, and other static content can be written using Markdown.
-- **JSX for Interactivity**: You can directly use any JSX component (like React components) within the MDX file. This makes it ideal for documentation or websites that need to showcase and render components dynamically.
-
-## Example: Navbar Component in MDX
-In the following example, we use the `Navbar` component from the `this.GUI` library. This demonstrates how we can integrate interactive elements within a Markdown-style document.
-
-
-
-```mdx
-<GUI.Molecules.Navbar
-  links={[
-    { url: '/', label: 'Home', isActive: true },
-    { url: '/about', label: 'About', isActive: false },
-    { url: 'http://localhost:6006/', label: 'Storybook', isActive: false },
-    { url: '/contact', label: 'Contact', isActive: false },
-  ]}
-  logo={
-   <img src="https://suign.github.io/assets/imgs/neurons_me_logo.png" alt="Logo" style={{ height: '40px' }} />
-
-  }
-  userControls={
-   <GUI.Atoms.Button>Click</GUI.Atoms.Button>
-  }
-/>
-```
-
-This renders a live `Navbar` component, with links for navigation, including one to our Storybook instance.
-
----
-
-### How This Page is Built with MDX
-1. **Markdown Elements**: 
-    - This heading (`# Welcome to THIS.GUI`) and paragraphs you're reading are written using Markdown.
-    - Links like [Click here](https://example.com) are also written in Markdown syntax.
-
-2. **JSX Elements**: 
-    - Below, we render interactive components from `this.GUI`, such as buttons and the navbar, using JSX.
-
----
-
-## Using MDX to Showcase Components
-MDX allows you to mix documentation with interactive elements. For instance, let's explore different types of buttons you can use with `this.GUI`. These buttons will be rendered dynamically, and their usage will be demonstrated.
-
-### **Atomic Components Example: Buttons**
-Below are different variations of the Button component available in `this.GUI`, along with the code examples for each.
-
-<div>
-  {/* Primary Button */}
-  <GUI.Atoms.Button primary size="medium">Primary Button</GUI.Atoms.Button>
-
-  ```jsx
-  <GUI.Atoms.Button primary size="medium">Primary Button</GUI.Atoms.Button>
-  ```
-
-  {/* Secondary Button */}
-  <GUI.Atoms.Button size="medium">Secondary Button</GUI.Atoms.Button>
-
-  ```jsx
-  <GUI.Atoms.Button size="medium">Secondary Button</GUI.Atoms.Button>
-  ```
-
-  {/* No Border Button */}
-  <GUI.Atoms.Button noBorder size="medium">No Border Button</GUI.Atoms.Button>
-
-  ```jsx
-  <GUI.Atoms.Button noBorder size="medium">No Border Button</GUI.Atoms.Button>
-  ```
-
-  {/* Small Primary Button */}
-  <GUI.Atoms.Button primary size="small">Small Primary Button</GUI.Atoms.Button>
-
-  ```jsx
-  <GUI.Atoms.Button primary size="small">Small Primary Button</GUI.Atoms.Button>
-  ```
-
-  {/* Large No Border Button */}
-  <GUI.Atoms.Button noBorder size="large">Large No Border Button</GUI.Atoms.Button>
-
-  ```jsx
-  <GUI.Atoms.Button noBorder size="large">Large No Border Button</GUI.Atoms.Button>
-  ```
-
-  {/* Custom Button Example */}
-  <GUI.Atoms.Button
-    primary
-    size="large"
-    primaryBgColor="#007bff"
-    primaryTextColor="#ffffff"
-    primaryHoverBgColor="#0056b3"
-    padding="12px 24px"
-  >
-    Custom Styled Button
-  </GUI.Atoms.Button>
-
-  ```jsx
-  <GUI.Atoms.Button
-    primary
-    size="large"
-    primaryBgColor="#007bff"
-    primaryTextColor="#ffffff"
-    primaryHoverBgColor="#0056b3"
-    padding="12px 24px"
-  >
-    Custom Styled Button
-  </GUI.Atoms.Button>
-  ```
-</div>
-
----
-
-### How to Use MDX in Your Own Projects
-You can use MDX in your own documentation to:
-
-- Write clear and simple documentation using Markdown.
-- Embed interactive React components to showcase examples or provide live demos.
-- Combine content and functionality into one coherent file.
-
-MDX files are ideal for documentation, blog posts, or any content-heavy web pages where you also want to include interactive elements. By leveraging MDX, you're able to write once and render rich, dynamic content with ease.
-
----
-
-This example showcases how MDX combines the best of both Markdown and JSX, giving you the flexibility to create interactive, component-rich documentation.
-```
-
-### Key Changes:
-- I've added an explanation of **MDX** and how it combines Markdown and JSX.
-- Each button example is now enclosed in a code block to show how MDX renders both the live component and its JSX code.
-- The file explains the concepts of MDX, making it clearer for developers and users to understand how this page was created. 
-
-This should provide a solid foundation for users exploring your project and help them understand how MDX can be used effectively.

package/src/main.jsx

@@ -1,15 +0,0 @@
-// main.jsx
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './App'; // Import App component
-
-// Grab the container element
-const container = document.getElementById('root');
-const root = createRoot(container);
-
-// Render your app using createRoot
-root.render(
-  <React.StrictMode>
-    <App /> {/* Render the entire App component */}
-  </React.StrictMode>
-);

package/src/scripts/ComponentRegistry.js

@@ -1,70 +0,0 @@
-// 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/logASCIIArt.js

@@ -1,12 +0,0 @@
-// src/scripts/logASCIIArt.js
-import figlet from 'figlet';
-
-function logASCIIArt() {
-  console.log(figlet.textSync('This.GUI', {
-    font: 'Big', // Choose a style like 'Big', 'Standard', etc.
-    horizontalLayout: 'default',
-    verticalLayout: 'default'
-  }));
-}
-
-logASCIIArt(); // This calls the function when the script is executed

package/src/scripts/postinstall.js

@@ -1,111 +0,0 @@
-// this.GUI/scripts/postinstall.js
-import { mkdir, writeFile, access, readFile } from 'fs/promises';
-import { join } from 'path';
-
-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 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) {
-  try {
-    await access(dirPath);
-    console.log(`Directory already exists: ${dirPath}`);
-  } catch {
-    await mkdir(dirPath, { recursive: true });
-    console.log(`Created: ${dirPath}`);
-  }
-}
-
-// 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}`);
-  }
-}
-
-// 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(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(
-    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(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!');
-})();