this.gui 1.0.16 → 1.0.18

package/src/scripts/verifyTemplates.js

@@ -1,154 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import Templates from '../stories/Templates/meta_Templates.js';  // Import the Templates 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 Templates
-const createDefaultCSSTemplate = (componentName) => `
-.${componentName.toLowerCase()} {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
-}
-`;
-
-// Default JSX template for Templates
-const createDefaultJSX = (componentName) => `
-import React from 'react';
-import PropTypes from 'prop-types';
-import './${componentName}.css';
-
-/**
- * ${componentName} template component
- */
-export const ${componentName} = ({ children, ...props }) => {
-  return (
-    <div className="${componentName.toLowerCase()}" {...props}>
-      {children}
-    </div>
-  );
-};
-
-${componentName}.propTypes = {
-  /**
-   * Children components to be rendered inside the template
-   */
-  children: PropTypes.node.isRequired,
-};
-
-export default ${componentName};
-`;
-
-// Default Storybook template for Templates
-const createDefaultStorybookTemplate = (componentName, category) => `
-import { ${componentName} } from './${componentName}';
-
-// Storybook configuration for ${componentName} template
-export default {
-  title: 'Templates/${category}/${componentName}',
-  component: ${componentName},
-  parameters: {
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    children: { control: 'text' },
-  },
-};
-
-export const Default = {
-  args: {
-    children: 'This is a default ${componentName} template.',
-  },
-};
-`;
-
-// Helper function to write files and create directories if needed
-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 basePath = path.join('..', 'stories', 'Templates', category, componentName);
-    
-    const adjustedPath = path.join(basePath, path.basename(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(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 of Templates
-async function installAndVerifyTemplates(Templates) {
-  const missingFilesReport = [];
-
-  // Loop through each category (LandingPages, DashboardLayouts, etc.)
-  for (const category of Object.keys(Templates.Templates)) {
-    console.log(`\nVerifying category: ${category}`);
-
-    // Loop through each component in the category
-    for (const component of Templates.Templates[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
-installAndVerifyTemplates(Templates);

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

package/src/stories/Layouts/DropdownMenu/DropdownMenu.css

@@ -1,16 +0,0 @@
-
-.dropdownmenu {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 16px;
-  gap: 8px;
-  border: 1px solid #ddd;
-}
-
-.dropdownmenu--primary {
-  background-color: #e3f2fd;
-}
-
-.dropdownmenu--secondary {
-  background-color: #fff;
-}

package/src/stories/Layouts/DropdownMenu/DropdownMenu.jsx

@@ -1,31 +0,0 @@
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import './DropdownMenu.css';
-
-/**
- * DropdownMenu layout component
- */
-export const DropdownMenu = ({ children, primary, ...props }) => {
-  const mode = primary ? 'dropdownmenu--primary' : 'dropdownmenu--secondary';
-  return (
-    <div className={['dropdownmenu', mode].join(' ')} {...props}>
-      {children}
-    </div>
-  );
-};
-
-DropdownMenu.propTypes = {
-  /**
-   * Primary style for the layout
-   */
-  primary: PropTypes.bool,
-  /**
-   * Children components to be rendered inside the layout
-   */
-  children: PropTypes.node.isRequired,
-};
-
-DropdownMenu.defaultProps = {
-  primary: false,
-};

package/src/stories/Layouts/DropdownMenu/DropdownMenu.stories.jsx

@@ -1,28 +0,0 @@
-
-import { DropdownMenu } from './DropdownMenu';
-
-// Storybook configuration for DropdownMenu component
-export default {
-  title: 'Layouts/NavigationAndMenus/DropdownMenu',
-  component: DropdownMenu,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    children: { control: 'text' },
-  },
-};
-
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary DropdownMenu layout.',
-  },
-};
-
-export const Secondary = {
-  args: {
-    primary: false,
-    children: 'This is a secondary DropdownMenu layout.',
-  },
-};

package/src/stories/Layouts/Grid/Grid.css

@@ -1,4 +0,0 @@
-/* src/components/Layout/Grid/Grid.css */
-.grid-container {
-    display: grid;
-  }

package/src/stories/Layouts/Grid/Grid.jsx

@@ -1,13 +0,0 @@
-// src/stories/Layout/Grid/Grid.jsx
-import React from 'react';
-import './Grid.css'; // Import the component-specific styles
-
-export const Grid = ({ children, columns = 3, gap = '10px' }) => {
-  const gridStyle = {
-    display: 'grid',
-    gridTemplateColumns: `repeat(${columns}, 1fr)`,
-    gap,
-  };
-
-  return <div style={gridStyle} className="grid-container">{children}</div>;
-};

package/src/stories/Layouts/Grid/Grid.stories.jsx

@@ -1,28 +0,0 @@
-
-import { Grid } from './Grid';
-
-// Storybook configuration for Grid component
-export default {
-  title: 'Layouts/Grid/Grid',
-  component: Grid,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    children: { control: 'text' },
-  },
-};
-
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary Grid layout.',
-  },
-};
-
-export const Secondary = {
-  args: {
-    primary: false,
-    children: 'This is a secondary Grid layout.',
-  },
-};

package/src/stories/Layouts/Section/Section.css

@@ -1,16 +0,0 @@
-
-.section {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 16px;
-  gap: 8px;
-  border: 1px solid #ddd;
-}
-
-.section--primary {
-  background-color: #e3f2fd;
-}
-
-.section--secondary {
-  background-color: #fff;
-}

package/src/stories/Layouts/Section/Section.jsx

@@ -1,31 +0,0 @@
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Section.css';
-
-/**
- * Section layout component
- */
-export const Section = ({ children, primary, ...props }) => {
-  const mode = primary ? 'section--primary' : 'section--secondary';
-  return (
-    <div className={['section', mode].join(' ')} {...props}>
-      {children}
-    </div>
-  );
-};
-
-Section.propTypes = {
-  /**
-   * Primary style for the layout
-   */
-  primary: PropTypes.bool,
-  /**
-   * Children components to be rendered inside the layout
-   */
-  children: PropTypes.node.isRequired,
-};
-
-Section.defaultProps = {
-  primary: false,
-};

package/src/stories/Layouts/Section/Section.stories.jsx

@@ -1,28 +0,0 @@
-
-import { Section } from './Section';
-
-// Storybook configuration for Section component
-export default {
-  title: 'Layouts/Section/Section',
-  component: Section,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    children: { control: 'text' },
-  },
-};
-
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary Section layout.',
-  },
-};
-
-export const Secondary = {
-  args: {
-    primary: false,
-    children: 'This is a secondary Section layout.',
-  },
-};