this.gui 1.0.17 → 1.1.0

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,100 +0,0 @@
-// this.GUI/scripts/postinstall.js
-import { mkdir, writeFile, access } 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 builderDir = join(guiDir, 'builder'); // Builder directory for site builder UI
-const mdxDir = join(guiDir, 'mdx');
-const stylesDir = join(guiDir, 'styles');
-
-// 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}`);
-  }
-}
-
-// Function to initialize the directory structure and files
-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,
-    `# Welcome to Your Custom GUI\n\nThis is your first MDX file. Edit it to start building your pages!`
-  );
-
-  await createFile(
-    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
-(async () => {
-  await createDir(guiDir);
-  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

@@ -1,11 +0,0 @@
-// 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/Alert/Alert.css

@@ -1,211 +0,0 @@
-/* src/stories/Atoms/Alert/Alert.css */
-
-/* Base Alert Styles */
-.alert {
-  padding: var(--spacing-sm) var(--spacing-md);
-  border-radius: var(--border-radius);
-  font-family: var(--font-family);
-  font-size: var(--font-size-base);
-  display: flex;
-  align-items: center;
-  box-shadow: var(--box-shadow);
-  margin-bottom: var(--spacing-md);
-  transition: 
-    background-color var(--transition-speed),
-    border-color var(--transition-speed),
-    color var(--transition-speed);
-  
-  /* Default Colors (Primary Variant) */
-  background-color: var(--alert-bg-color, var(--primary-color));
-  color: var(--alert-text-color, var(--text-color-inverse));
-  border: 1px solid var(--alert-border-color, var(--primary-color));
-  
-  /* Entrance Animation */
-  animation: fadeIn 0.3s ease-out;
-}
-
-/* Primary Variant */
-.alert--primary {
-  /* Primary Variant Colors */
-  --alert-bg-color: var(--primary-color);
-  --alert-text-color: var(--text-color-inverse);
-  --alert-border-color: var(--primary-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--primary-color-hover);
-  --alert-border-hover-color: var(--primary-color-hover);
-}
-
-.alert--primary:hover {
-  background-color: var(--alert-bg-hover-color);
-  border-color: var(--alert-border-hover-color);
-}
-
-/* Secondary Variant */
-.alert--secondary {
-  /* Secondary Variant Colors */
-  --alert-bg-color: transparent;
-  --alert-text-color: var(--secondary-color);
-  --alert-border-color: var(--secondary-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--secondary-color-hover);
-  --alert-border-hover-color: var(--secondary-color-hover);
-  --alert-text-hover-color: var(--text-color-inverse);
-}
-
-.alert--secondary:hover {
-  background-color: var(--alert-bg-hover-color);
-  color: var(--alert-text-hover-color);
-  border-color: var(--alert-border-hover-color);
-}
-
-/* Semantic Color Modifiers for Primary Variant */
-.alert--primary.alert--info {
-  --alert-bg-color: var(--info-color);
-  --alert-border-color: var(--info-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--info-color-hover);
-  --alert-border-hover-color: var(--info-color-hover);
-}
-
-.alert--primary.alert--warning {
-  --alert-bg-color: var(--warning-color);
-  --alert-border-color: var(--warning-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--warning-color-hover);
-  --alert-border-hover-color: var(--warning-color-hover);
-}
-
-.alert--primary.alert--alert {
-  --alert-bg-color: var(--alert-color);
-  --alert-border-color: var(--alert-color);
-  --alert-text-color: var(--text-color); /* Dark text for readability */
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--alert-color-hover);
-  --alert-border-hover-color: var(--alert-color-hover);
-}
-
-.alert--primary.alert--success {
-  --alert-bg-color: var(--success-color);
-  --alert-border-color: var(--success-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--success-color-hover);
-  --alert-border-hover-color: var(--success-color-hover);
-}
-
-.alert--primary.alert--neutral {
-  --alert-bg-color: var(--neutral-color);
-  --alert-border-color: var(--neutral-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--neutral-color-hover);
-  --alert-border-hover-color: var(--neutral-color-hover);
-}
-
-.alert--primary.alert--dark {
-  --alert-bg-color: var(--dark-color);
-  --alert-border-color: var(--dark-color);
-  --alert-text-color: var(--text-color-inverse); /* White text on dark background */
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--dark-color-hover);
-  --alert-border-hover-color: var(--dark-color-hover);
-}
-
-/* Semantic Color Modifiers for Secondary Variant */
-.alert--secondary.alert--info {
-  --alert-text-color: var(--info-color);
-  --alert-border-color: var(--info-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--info-color-hover);
-  --alert-border-hover-color: var(--info-color-hover);
-}
-
-.alert--secondary.alert--warning {
-  --alert-text-color: var(--warning-color);
-  --alert-border-color: var(--warning-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--warning-color-hover);
-  --alert-border-hover-color: var(--warning-color-hover);
-}
-
-.alert--secondary.alert--alert {
-  --alert-text-color: var(--alert-color);
-  --alert-border-color: var(--alert-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--alert-color-hover);
-  --alert-border-hover-color: var(--alert-color-hover);
-}
-
-.alert--secondary.alert--success {
-  --alert-text-color: var(--success-color);
-  --alert-border-color: var(--success-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--success-color-hover);
-  --alert-border-hover-color: var(--success-color-hover);
-}
-
-.alert--secondary.alert--neutral {
-  --alert-text-color: var(--neutral-color);
-  --alert-border-color: var(--neutral-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--neutral-color-hover);
-  --alert-border-hover-color: var(--neutral-color-hover);
-}
-
-.alert--secondary.alert--dark {
-  --alert-text-color: var(--dark-color);
-  --alert-border-color: var(--dark-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--dark-color-hover);
-  --alert-border-hover-color: var(--dark-color-hover);
-}
-
-/* Optional: Icon Styles */
-.alert__icon {
-  margin-right: var(--spacing-sm);
-  font-size: 1.2em;
-}
-
-/* Optional: Close Button Styles */
-.alert__close {
-  margin-left: auto;
-  background: none;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  font-size: 1.2em;
-}
-
-/* Dismissible Modifier */
-.alert--dismissible {
-  padding-right: var(--spacing-md);
-}
-
-/* Keyframes for fade-in */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Apply animation to alert */
-.alert {
-  animation: fadeIn 0.3s ease-out;
-}

package/src/stories/Atoms/Alert/Alert.jsx

@@ -1,56 +0,0 @@
-// src/stories/Atoms/Alert/Alert.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Alert.css'; // Import the CSS styles
-
-export const Alert = ({
-  variant = 'primary', // 'primary', 'secondary'
-  color, // 'info', 'warning', 'alert', 'success', 'neutral', 'dark'
-  children,
-  className = '',
-  style = {},
-  onClose, // Function to handle close action
-  dismissible = false, // If true, show close button
-  icon, // Optional icon element
-  ...props
-}) => {
-  const variantClass = `alert--${variant}`;
-  const colorClass = color ? `alert--${color}` : '';
-  const dismissibleClass = dismissible ? 'alert--dismissible' : '';
-
-  const combinedClassName = `alert ${variantClass} ${colorClass} ${dismissibleClass} ${className}`.trim();
-
-  return (
-    <div
-      className={combinedClassName}
-      style={style}
-      role="alert"
-      aria-live="assertive"
-      {...props}
-    >
-      {icon && <span className="alert__icon">{icon}</span>}
-      <span className="alert__content">{children}</span>
-      {dismissible && (
-        <button
-          className="alert__close"
-          onClick={onClose}
-          aria-label="Close Alert"
-          tabIndex="0"
-        >
-          &times;
-        </button>
-      )}
-    </div>
-  );
-};
-
-Alert.propTypes = {
-  variant: PropTypes.oneOf(['primary', 'secondary']),
-  color: PropTypes.oneOf(['info', 'warning', 'alert', 'success', 'neutral', 'dark']),
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  style: PropTypes.object,
-  onClose: PropTypes.func,
-  dismissible: PropTypes.bool,
-  icon: PropTypes.node,
-};