this.gui 1.0.16 → 1.0.17

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/verifyLayouts.js

@@ -1,175 +0,0 @@
-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/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);