this.gui 1.0.15 → 1.0.17

package/dist/whitey-db68723e.js

@@ -1,5 +0,0 @@
-const t = `html{font-size:19px}html,body{margin:auto;background:#fefefe;-webkit-font-smoothing:antialiased}body{font-family:Vollkorn,Palatino,Times;color:#333;line-height:1.4;text-align:justify}#write{max-width:960px;margin:0 auto 2em;line-height:1.53;padding-top:40px}@media only screen and (min-width: 1400px){#write{max-width:1100px}}@media print{html{font-size:13px}}#write>h1:first-child,h1{margin-top:1.6em;font-weight:400}h1{font-size:3em}h2{margin-top:2em;font-weight:400}h3{font-weight:400;font-style:italic;margin-top:3em}h1,h2,h3{text-align:center}h2:after{border-bottom:1px solid #2f2f2f;content:"";width:100px;display:block;margin:0 auto;height:1px}h1+h2,h2+h3{margin-top:.83em}p,.mathjax-block{margin-top:0;-webkit-hypens:auto;-moz-hypens:auto;-webkit-hyphens:auto;hyphens:auto}ul{list-style:square;padding-left:1.2em}ol{padding-left:1.2em}@media print{ol{padding-left:40px}}blockquote{margin-left:1em;padding-left:1em;border-left:1px solid #ddd}code,pre{font-family:Consolas,Menlo,Monaco,monospace,serif;font-size:.9em;background:white}.md-fences{margin-left:1em;padding-left:1em;border:1px solid #ddd;padding-bottom:8px;padding-top:6px;margin-bottom:1.5em}a{color:#2484c1;text-decoration:none}a:hover{text-decoration:underline}a img{border:none}h1 a,h1 a:hover{color:#333;text-decoration:none}hr{color:#ddd;height:1px;margin:2em 0;border-top:solid 1px #ddd;border-bottom:none;border-left:0;border-right:0}.ty-table-edit{background:#ededed;padding-top:4px}table{margin-bottom:1.333333rem}table th,table td{padding:8px;line-height:1.333333rem;vertical-align:top;border-top:1px solid #ddd}table th{font-weight:700}table thead th{vertical-align:bottom}table caption+thead tr:first-child th,table caption+thead tr:first-child td,table colgroup+thead tr:first-child th,table colgroup+thead tr:first-child td,table thead:first-child tr:first-child th,table thead:first-child tr:first-child td{border-top:0}table tbody+tbody{border-top:2px solid #ddd}.task-list{padding:0}.md-task-list-item{padding-left:1.6rem}.md-task-list-item>input:before{content:"√";display:inline-block;width:1.33333333rem;height:1.6rem;vertical-align:middle;text-align:center;color:#ddd;background-color:#fefefe}.md-task-list-item>input:checked:before,.md-task-list-item>input[checked]:before{color:inherit}.md-tag{color:inherit;font:inherit}#write pre.md-meta-block{min-height:35px;white-space:pre;background:#f8f8f8;border:0px;color:#999;width:100vw;max-width:calc(100% + 60px);margin-left:-30px;border-left:30px #f8f8f8 solid;border-right:30px #f8f8f8 solid;margin-bottom:2em;margin-top:-1.3333333333333rem;line-height:1.8em;font-size:.76em;padding:26px 1em 10px 0}.md-img-error.md-image>.md-meta{vertical-align:bottom}#write>h5.md-focus:before{top:2px}.md-toc{margin-top:40px}.md-toc-content{padding-bottom:20px}.outline-expander:before{color:inherit;font-size:14px;top:auto;content:"";font-family:FontAwesome}.outline-expander:hover:before,.outline-item-open>.outline-item>.outline-expander:before{content:""}#typora-source{font-family:Courier,monospace;color:#6a6a6a}.html-for-mac #typora-sidebar{box-shadow:0 6px 12px #0000002d}.cm-s-typora-default .cm-header,.cm-s-typora-default .cm-property,.CodeMirror.cm-s-typora-default div.CodeMirror-cursor{color:#428bca}.cm-s-typora-default .cm-atom,.cm-s-typora-default .cm-number{color:#777}.typora-node .file-list-item-parent-loc,.typora-node .file-list-item-time,.typora-node .file-list-item-summary{font-family:arial,sans-serif}.md-task-list-item>input{margin-left:-1.3em;margin-top:calc(1rem - 12px)}.md-mathjax-midline{background:#fafafa}.md-fences .code-tooltip{bottom:-2em!important}.dropdown-menu .divider{border-color:#e5e5e5}
-`;
-export {
-  t as default
-};

package/src/MDXEditor.jsx

@@ -1,32 +0,0 @@
-// this.GUI/src/MDXEditor.jsx
-import React, { useState } from 'react';
-import { MdxProvider } from './providers/MdxProvider';
-import { ThemeProvider } from './providers/ThemeProvider';
-import Editor from '@monaco-editor/react'; // Or any other MDX editor you prefer
-
-const MDXEditor = () => {
-  const [content, setContent] = useState('# Your MDX here');
-
-  return (
-    <ThemeProvider>
-      <MdxProvider>
-        <div style={{ display: 'flex', height: '100vh' }}>
-          <Editor
-            height="100%"
-            defaultLanguage="mdx"
-            value={content}
-            onChange={(value) => setContent(value || '')}
-          />
-          <div style={{ flex: 1, padding: '20px', overflow: 'auto' }}>
-            <MdxProvider>
-              {/* Live preview of the MDX content */}
-              {React.createElement(MdxProvider, {}, content)}
-            </MdxProvider>
-          </div>
-        </div>
-      </MdxProvider>
-    </ThemeProvider>
-  );
-};
-
-export default MDXEditor;

package/src/Theme.jsx

@@ -1,28 +0,0 @@
-// this.GUI/src/Theme.jsx
-import React, { useState, useEffect } from 'react';
-import { CssVarsProvider } from '@mui/joy/styles';  // Import MUI Joy's CssVarsProvider
-import lightTheme from './themes/light';  // Import light theme
-import darkTheme from './themes/dark';    // Import dark theme
-
-const Theme = ({ children }) => {
-  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
-
-  useEffect(() => {
-    localStorage.setItem('theme', theme);  // Persist theme preference in localStorage
-  }, [theme]);
-
-  const currentTheme = theme === 'dark' ? darkTheme : lightTheme;
-
-  return (
-    <CssVarsProvider theme={currentTheme}> {/* Wrap with the correct theme */}
-      <div>
-        <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
-          Toggle Theme
-        </button>
-        {children}
-      </div>
-    </CssVarsProvider>
-  );
-};
-
-export default Theme;

package/src/components/CodeBlock.jsx

@@ -1,22 +0,0 @@
-// src/components/CodeBlock.jsx
-
-import React from 'react';
-import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
-// Import the language(s) you need
-import javascript from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
-// Import a syntax highlighting style
-import { atomOneLight } from 'react-syntax-highlighter/dist/esm/styles/hljs';
-
-SyntaxHighlighter.registerLanguage('javascript', javascript);
-
-const CodeBlock = ({ className, children }) => {
-  const language = className ? className.replace('language-', '') : 'javascript';
-
-  return (
-    <SyntaxHighlighter language={language} style={atomOneLight}>
-      {children}
-    </SyntaxHighlighter>
-  );
-};
-
-export default CodeBlock;

package/src/components/ComponentFactory.jsx

@@ -1,36 +0,0 @@
-// src/components/ComponentFactory.jsx
-import React from 'react';
-import GUI from '../../index';
-
-const ComponentFactory = ({ category, subcategory, componentName, ...props }) => {
-  const Category = GUI[category];
-
-  if (!Category) {
-    console.error(`Category "${category}" not found.`);
-    return null;
-  }
-
-  let Component;
-
-  if (subcategory) {
-    const Subcategory = Category[subcategory];
-
-    if (!Subcategory) {
-      console.error(`Subcategory "${subcategory}" not found in category "${category}".`);
-      return null;
-    }
-
-    Component = Subcategory[componentName];
-  } else {
-    Component = Category[componentName];
-  }
-
-  if (!Component) {
-    console.error(`Component "${componentName}" not found in category "${category}"${subcategory ? ` and subcategory "${subcategory}"` : ''}.`);
-    return null;
-  }
-
-  return <Component {...props} />;
-};
-
-export default ComponentFactory;

package/src/components/ComponentRegistry.js

@@ -1,21 +0,0 @@
-// src/components/ComponentRegistry.js
-import { Button } from '../stories/_Atomic/Button/Button';
-import { Input } from '../stories/_Atomic/Input/Input';
-// Import the Navbar component
-import { Navbar } from '../stories/_Molecules/Navbar/Navbar';
-// ... import other components
-
-const ComponentRegistry = {
-  _Atomic: {
-    Button,
-    Input,
-    // ... other atomic components
-  },
-  _Molecules: {
-    Navbar,
-    // ... other molecule components
-  },
-  // ... other categories
-};
-
-export default ComponentRegistry;

package/src/scripts/generateComponents.js

@@ -1,166 +0,0 @@
-const components = {
-    "Atomic": {
-      "Text": ["Heading", "Paragraph", "Label", "Caption"],
-      "Interactive": [
-        "Button", 
-        "Link", 
-        "Icon", 
-        "Checkbox", 
-        "RadioButton", 
-        "Toggle", 
-        "TextInput", 
-        "TextArea", 
-        "Select", 
-        "Slider", 
-        "RangeInput"
-      ],
-      "Media": ["Image", "Video", "Audio", "Icon"],
-      "Visual": [
-        "Divider", 
-        "Spacer", 
-        "Tooltip", 
-        "Badge", 
-        "Tag"
-      ],
-      "Feedback": [
-        "Loader", 
-        "Spinner", 
-        "ProgressBar", 
-        "Alert", 
-        "Snackbar"
-      ]
-    },
-    
-    "Molecules": {
-      "FormElements": [
-        "InputGroup", 
-        "InputWithLabel", 
-        "SearchBar", 
-        "FileUpload", 
-        "FormField"
-      ],
-      "ButtonsWithIcons": [
-        "IconButton", 
-        "ButtonGroup"
-      ],
-      "MediaMolecules": [
-        "ImageWithCaption", 
-        "VideoWithDescription", 
-        "AvatarWithName", 
-        "AudioPlayer"
-      ],
-      "FeedbackMolecules": [
-        "Notification", 
-        "Modal"
-      ]
-    },
-    
-    "Organisms": {
-      "Forms": [
-        "SignInForm", 
-        "RegistrationForm", 
-        "ContactForm"
-      ],
-      "ContentDisplay": [
-        "Card", 
-        "MediaCard", 
-        "List", 
-        "Accordion"
-      ],
-      "Navigation": [
-        "Navbar", 
-        "Sidebar", 
-        "Breadcrumbs"
-      ],
-      "MediaCollections": [
-        "ImageGallery", 
-        "VideoPlaylist", 
-        "Carousel"
-      ],
-      "Tables": [
-        "DataTable", 
-        "PricingTable", 
-        "ComparisonTable"
-      ]
-    },
-  
-    "Layout": {
-      "Grid": ["Grid"],
-      "Section": ["Section"],
-      "FlexboxLayout": ["Flexbox"],
-      "NavigationAndMenus": [
-        "Header", 
-        "Footer", 
-        "DropdownMenu", 
-        "Pagination"
-      ],
-      "ContentOrganization": [
-        "Sidebar", 
-        "Tabs", 
-        "Accordion"
-      ],
-      "HeroSections": [
-        "HeroBanner", 
-        "HeroImageVideo"
-      ]
-    },
-  
-    "Templates": {
-      "LandingPages": [
-        "HeroSection", 
-        "FeaturesList", 
-        "CallToAction", 
-        "Testimonials"
-      ],
-      "DashboardLayouts": [
-        "AdminDashboard", 
-        "SidebarTopNav"
-      ],
-      "ECommercePages": [
-        "ProductPage", 
-        "ShoppingCart"
-      ],
-      "AuthenticationPages": [
-        "SignInPage", 
-        "RegistrationPage"
-      ],
-      "ContactUsPages": [
-        "FormSection", 
-        "LocationInfo", 
-        "SocialMediaLinks"
-      ]
-    },
-    
-    "Pages": {
-      "HomePage": ["HomePage"],
-      "AboutUsPage": ["AboutUsPage"],
-      "ContactUsPage": ["ContactUsPage"],
-      "UserProfilePage": ["UserProfilePage"],
-      "ProductDetailPage": ["ProductDetailPage"],
-      "CheckoutPage": ["CheckoutPage"],
-      "BlogPage": ["BlogPage"],
-      "AdminDashboard": ["AdminDashboard"],
-      "SearchResultsPage": ["SearchResultsPage"]
-    },
-    
-    "Miscellaneous": {
-      "TooltipsPopovers": [
-        "Tooltip", 
-        "Popover"
-      ],
-      "Overlays": [
-        "ModalWindow", 
-        "Drawer"
-      ],
-      "SearchComponents": [
-        "SearchBox", 
-        "Autocomplete"
-      ],
-      "MediaAndContentControls": [
-        "AudioControls", 
-        "VideoControls", 
-        "Filters"
-      ],
-      "InteractiveMaps": ["Map"]
-    }
-  };

package/src/scripts/verifyMolecules.js

@@ -1,158 +0,0 @@
-// verifyMolecules.js
-
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import Molecules from '../stories/Molecules/Molecules.js'; // Import the Molecules 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
-const createDefaultCSSTemplate = (componentName) => `
-.${componentName.toLowerCase()} {
-  /* Default styles for ${componentName} */
-}
-`;
-
-// Default JSX template
-const createDefaultJSX = (componentName) => `
-import React from 'react';
-import PropTypes from 'prop-types';
-import './${componentName}.css';
-
-/**
- * ${componentName} component
- */
-export const ${componentName} = (props) => {
-  return (
-    <div className="${componentName.toLowerCase()}" {...props}>
-      {/* Component implementation */}
-    </div>
-  );
-};
-
-${componentName}.propTypes = {
-  // Define prop types here
-};
-
-${componentName}.defaultProps = {
-  // Define default props here
-};
-
-export default ${componentName};
-`;
-
-// Default Storybook template
-const createDefaultStorybookTemplate = (componentName, category) => `
-import { ${componentName} } from './${componentName}';
-
-// Storybook configuration for ${componentName} component
-export default {
-  title: 'Molecules/${category}/${componentName}',
-  component: ${componentName},
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    // Define argTypes here
-  },
-};
-
-export const Default = {
-  args: {
-    // Define default args here
-  },
-};
-`;
-
-// 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, category) {
-  const missingFiles = []; // Initialize missingFiles array
-
-  for (const [key, filePath] of Object.entries(paths)) {
-    const componentName = component.name.trim();
-    const adjustedPath = path.join(
-      '..',
-      'stories',
-      'Molecules',
-      componentName,
-      filePath.replace('./', '')
-    );
-
-    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
-async function installAndVerifyMolecules(Molecules) {
-  const missingFilesReport = [];
-
-  // Loop through each category (Navigation, FormElements, etc.)
-  for (const category of Object.keys(Molecules.Molecules)) {
-    console.log(`\nVerifying category: ${category}`);
-
-    // Loop through each component in the category
-    for (const component of Molecules.Molecules[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
-installAndVerifyMolecules(Molecules);

package/src/scripts/verify_and_install_atoms.js

@@ -1,211 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import Atomic from '../stories/_Atomic/Atomic.js';  // Import the Atomic 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
-const createDefaultCSSTemplate = (componentName) => `
-.${componentName.toLowerCase()} {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
-}
-
-.${componentName.toLowerCase()}--primary {
-  background-color: #e3f2fd;
-  border-color: #1e88e5;
-}
-
-.${componentName.toLowerCase()}--secondary {
-  background-color: #fff;
-  border-color: #ccc;
-}
-
-.${componentName.toLowerCase()}--small {
-  padding: 8px;
-}
-
-.${componentName.toLowerCase()}--medium {
-  padding: 16px;
-}
-
-.${componentName.toLowerCase()}--large {
-  padding: 32px;
-}
-`;
-
-// Default JSX template
-const createDefaultJSX = (componentName) => `
-import React from 'react';
-import PropTypes from 'prop-types';
-import './${componentName}.css';
-
-/**
- * ${componentName} component for user interaction
- */
-export const ${componentName} = ({ primary, size, children, ...props }) => {
-  const mode = primary ? '${componentName.toLowerCase()}--primary' : '${componentName.toLowerCase()}--secondary';
-  return (
-    <div
-      className={['${componentName.toLowerCase()}', \`${componentName.toLowerCase()}--\${size}\`, mode].join(' ')}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-};
-
-${componentName}.propTypes = {
-  /**
-   * Is this the primary style for the component?
-   */
-  primary: PropTypes.bool,
-  /**
-   * Size of the component
-   */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Content to be rendered inside the component
-   */
-  children: PropTypes.node.isRequired,
-};
-
-${componentName}.defaultProps = {
-  primary: false,
-  size: 'medium',
-};
-
-export default ${componentName};
-`;
-// Default Storybook template
-const createDefaultStorybookTemplate = (componentName) => `
-import { ${componentName} } from './${componentName}';
-
-// Storybook configuration for ${componentName} component
-export default {
-  title: '_Atomic/${componentName}',
-  component: ${componentName},
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    children: { control: 'text' },
-  },
-};
-
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary ${componentName}',
-  },
-};
-
-export const Secondary = {
-  args: {
-    children: 'This is a secondary ${componentName}',
-  },
-};
-
-export const Large = {
-  args: {
-    size: 'large',
-    children: 'This is a large ${componentName}',
-  },
-};
-
-export const Small = {
-  args: {
-    size: 'small',
-    children: 'This is a small ${componentName}',
-  },
-};
-`;
-
-// 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 categoryDir = component.name.trim().replace(' ', '');
-    const adjustedPath = path.join('..', 'stories', '_Atomic', categoryDir, 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 installAndVerifyAtomic(Atomic) {
-  const missingFilesReport = [];
-
-  // Loop through each category (Text, Interactive, etc.)
-  for (const category of Object.keys(Atomic.Atomic)) {
-    console.log(`\nVerifying category: ${category}`);
-
-    // Loop through each component in the category
-    for (const component of Atomic.Atomic[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
-installAndVerifyAtomic(Atomic);