this.gui 1.0.17 → 1.1.0

package/src/stories/Molecules/Navbar/Navbar.jsx

@@ -1,82 +0,0 @@
-//this.GUI/src/stories/Molecules/Navbar/Navbar.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Navbar.css';
-
-export const Navbar = ({
-  leftItems = [],
-  centerItems = [],
-  rightItems = [],
-  logo = null,
-  searchComponent = null,
-  styleOverrides = {},
-}) => {
-  const style = {};
-
-  // Map of styleOverrides keys to CSS variable names
-  const cssVariableMap = {
-    navbarBackgroundColor: '--navbar-background-color',
-    navbarBorderColor: '--navbar-border-color',
-    navbarHeight: '--navbar-height',
-  };
-
-  // Set CSS variables based on styleOverrides
-  Object.keys(styleOverrides).forEach((key) => {
-    const cssVar = cssVariableMap[key];
-    if (cssVar) {
-      style[cssVar] = styleOverrides[key];
-    }
-  });
-
-  return (
-    <nav className="navbar" style={style}>
-      <div className="navbar__group navbar__group--left">
-        {logo && <div className="navbar__logo">{logo}</div>}
-        {searchComponent && <div className="navbar__search">{searchComponent}</div>}
-        {leftItems.map((item, index) => (
-          <a key={index} href={item.url} className="navbar__link">
-            {item.label}
-          </a>
-        ))}
-      </div>
-      <div className="navbar__group navbar__group--center">
-        {centerItems.map((item, index) => (
-          <a key={index} href={item.url} className="navbar__link">
-            {item.label}
-          </a>
-        ))}
-      </div>
-      <div className="navbar__group navbar__group--right">
-        {rightItems.map((item, index) => (
-          <a key={index} href={item.url} className="navbar__link">
-            {item.label}
-          </a>
-        ))}
-      </div>
-    </nav>
-  );
-};
-
-Navbar.propTypes = {
-  leftItems: PropTypes.arrayOf(
-    PropTypes.shape({
-      url: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired,
-    })
-  ),
-  centerItems: PropTypes.arrayOf(
-    PropTypes.shape({
-      url: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired,
-    })
-  ),
-  rightItems: PropTypes.arrayOf(
-    PropTypes.shape({
-      url: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired,
-    })
-  ),
-  logo: PropTypes.node,
-  searchComponent: PropTypes.node,
-  styleOverrides: PropTypes.object,
-};

package/src/stories/Molecules/Navbar/Navbar.stories.jsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import { Navbar } from './Navbar';
-import { SearchBar } from '../SearchBar/SearchBar';
-import { Logo } from '../../Atoms/Logo/Logo'; // Importing the Logo component
-
-export default {
-  title: 'Molecules/Navigation/Navbar',
-  component: Navbar,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    logo: {
-      control: false, // We use a React node, so control is not applicable
-      description: 'Logo component or element to display in the navbar',
-    },
-    searchComponent: {
-      control: false, // We use a React node, so control is not applicable
-      description: 'Search component to display in the navbar',
-    },
-    leftItems: {
-      control: 'object',
-      description: 'Array of navigation items for the left side',
-    },
-    centerItems: {
-      control: 'object',
-      description: 'Array of navigation items for the center',
-    },
-    rightItems: {
-      control: 'object',
-      description: 'Array of navigation items for the right side',
-    },
-    styleOverrides: {
-      control: 'object',
-      description: 'Override default styles with CSS variables',
-    },
-  },
-};
-
-const Template = (args) => <Navbar {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  logo: <Logo />,  // Using the Logo component here
-  searchComponent: <SearchBar placeholder="Search..." />,
-  leftItems: [
-    { url: '#home', label: 'Home' },
-    { url: '#about', label: 'About' },
-  ],
-  centerItems: [
-    { url: '#services', label: 'Services' },
-    { url: '#portfolio', label: 'Portfolio' },
-  ],
-  rightItems: [
-    { url: '#login', label: 'Login' },
-    { url: '#signup', label: 'Sign Up' },
-  ],
-};
-
-export const CustomizedNavbar = Template.bind({});
-CustomizedNavbar.args = {
-  ...Default.args,
-  styleOverrides: {
-    navbarBackgroundColor: '#1F1F1F',
-    navbarBorderColor: '#444444',
-    navbarHeight: '70px',
-    navbarLinkColor: '#FFFFFF',
-    navbarLinkHoverBackground: 'rgba(255, 255, 255, 0.2)',
-  },
-};

package/src/stories/Molecules/Notification/Notification.css

@@ -1,4 +0,0 @@
-
-.notification {
-  /* Default styles for Notification */
-}

package/src/stories/Molecules/Notification/Notification.jsx

@@ -1,25 +0,0 @@
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Notification.css';
-
-/**
- * Notification component
- */
-export const Notification = (props) => {
-  return (
-    <div className="notification" {...props}>
-      {/* Component implementation */}
-    </div>
-  );
-};
-
-Notification.propTypes = {
-  // Define prop types here
-};
-
-Notification.defaultProps = {
-  // Define default props here
-};
-
-export default Notification;

package/src/stories/Molecules/Notification/Notification.stories.jsx

@@ -1,20 +0,0 @@
-
-import { Notification } from './Notification';
-
-// Storybook configuration for Notification component
-export default {
-  title: 'Molecules/FeedbackMolecules/Notification',
-  component: Notification,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    // Define argTypes here
-  },
-};
-
-export const Default = {
-  args: {
-    // Define default args here
-  },
-};

package/src/stories/Molecules/PricingTable/PricingTable.css

@@ -1,4 +0,0 @@
-
-.pricingtable {
-  /* Default styles for PricingTable */
-}

package/src/stories/Molecules/PricingTable/PricingTable.jsx

@@ -1,25 +0,0 @@
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import './PricingTable.css';
-
-/**
- * PricingTable component
- */
-export const PricingTable = (props) => {
-  return (
-    <div className="pricingtable" {...props}>
-      {/* Component implementation */}
-    </div>
-  );
-};
-
-PricingTable.propTypes = {
-  // Define prop types here
-};
-
-PricingTable.defaultProps = {
-  // Define default props here
-};
-
-export default PricingTable;

package/src/stories/Molecules/PricingTable/PricingTable.stories.jsx

@@ -1,20 +0,0 @@
-
-import { PricingTable } from './PricingTable';
-
-// Storybook configuration for PricingTable component
-export default {
-  title: 'Molecules/Tables/PricingTable',
-  component: PricingTable,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    // Define argTypes here
-  },
-};
-
-export const Default = {
-  args: {
-    // Define default args here
-  },
-};

package/src/stories/Molecules/SearchBar/SearchBar.css

@@ -1,69 +0,0 @@
-/* src/stories/Molecules/FormElements/SearchBar/SearchBar.css */
-
-.searchbar {
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-
-.searchbar__toggle {
-  background: none;
-  border: none;
-  padding: 8px;
-  cursor: pointer;
-  color: var(--text-color);
-  display: flex;
-  align-items: center;
-}
-
-.searchbar__icon {
-  width: 24px;
-  height: 24px;
-}
-
-.searchbar__input {
-  padding: 8px;
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius);
-  background-color: var(--background-color);
-  color: var(--text-color);
-  margin-left: 8px;
-  transition: width 0.3s ease, opacity 0.3s ease;
-}
-
-@media (max-width: 768px) {
-  .searchbar__input {
-    width: 0;
-    opacity: 0;
-    visibility: hidden;
-    margin-left: 0;
-    pointer-events: none;
-  }
-
-  .searchbar--expanded .searchbar__input {
-    width: 150px; /* Adjust as needed */
-    opacity: 1;
-    visibility: visible;
-    margin-left: 8px;
-    pointer-events: auto;
-  }
-}
-
-@media (min-width: 769px) {
-  .searchbar__toggle {
-    display: none;
-  }
-
-  .searchbar__input {
-    width: 200px; /* Adjust as needed */
-    opacity: 1;
-    visibility: visible;
-    pointer-events: auto;
-  }
-}
-
-/* Optional: Style the input when focused */
-.searchbar__input:focus {
-  border-color: var(--primary-color);
-  outline: none;
-}

package/src/stories/Molecules/SearchBar/SearchBar.jsx

@@ -1,73 +0,0 @@
-// src/stories/Molecules/SearchBar/SearchBar.jsx
-
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import './SearchBar.css';
-
-export const SearchBar = ({ placeholder, onSearch }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [query, setQuery] = useState('');
-
-  const handleToggle = () => {
-    setIsExpanded((prev) => !prev);
-  };
-
-  const handleInputChange = (e) => {
-    setQuery(e.target.value);
-  };
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    onSearch(query);
-  };
-
-  return (
-    <form
-      className={`searchbar ${isExpanded ? 'searchbar--expanded' : ''}`}
-      onSubmit={handleSubmit}
-    >
-      <button
-        type="button"
-        className="searchbar__toggle"
-        onClick={handleToggle}
-        aria-label="Search"
-      >
-        {/* Magnifying glass icon */}
-        <svg
-          className="searchbar__icon"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          aria-hidden="true"
-        >
-          <path
-            fill="currentColor"
-            d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5
-            6.5 6.5 0 109.5 16a6.471 6.471 0 004.23-1.57l.27.28v.79l5
-            5 1.5-1.5-5-5zM9.5 14C7.01 14 5 11.99 5
-            9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-          />
-        </svg>
-      </button>
-      <input
-        type="text"
-        className="searchbar__input"
-        placeholder={placeholder}
-        value={query}
-        onChange={handleInputChange}
-        aria-label="Search input"
-      />
-    </form>
-  );
-};
-
-SearchBar.propTypes = {
-  placeholder: PropTypes.string,
-  onSearch: PropTypes.func,
-};
-
-SearchBar.defaultProps = {
-  placeholder: 'Search...',
-  onSearch: () => {},
-};
-
-export default SearchBar;

package/src/stories/Molecules/SearchBar/SearchBar.stories.jsx

@@ -1,29 +0,0 @@
-// src/stories/Molecules/FormElements/SearchBar/SearchBar.stories.jsx
-
-import React from 'react';
-import { SearchBar } from './SearchBar';
-
-export default {
-  title: 'Molecules/FormElements/SearchBar',
-  component: SearchBar,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    placeholder: {
-      control: 'text',
-      description: 'Placeholder text for the search input',
-    },
-    onSearch: {
-      action: 'searched',
-      description: 'Function to call when the search form is submitted',
-    },
-  },
-};
-
-const Template = (args) => <SearchBar {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  placeholder: 'Search...',
-};

package/src/stories/Molecules/SelectTheme/SelectTheme.css

@@ -1,25 +0,0 @@
-.select-theme-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px;
-    background-color: var(--bg-color, #f9f9f9); /* Use dynamic theme colors */
-    border-radius: 8px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  }
-  
-  .select-theme-label {
-    font-family: 'Roboto', sans-serif;
-    font-size: 16px;
-    color: var(--text-color, #333);
-  }
-  
-  .select-theme-dropdown {
-    padding: 8px;
-    border-radius: 4px;
-    border: 1px solid var(--border-color, #ccc);
-    background-color: var(--bg-color, #fff);
-    color: var(--text-color, #333);
-    font-family: 'Roboto', sans-serif;
-    font-size: 14px;
-  }

package/src/stories/Molecules/SelectTheme/SelectTheme.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-export const SelectTheme = ({ onThemeChange, onModeChange }) => {
-  return (
-    <div>
-      {/* Dropdown to select the theme */}
-      <label htmlFor="theme-select">Choose a theme:</label>
-      <select id="theme-select" onChange={(e) => onThemeChange(e.target.value)}>
-        <option value="neurons">Neurons</option>
-        <option value="github">GitHub</option>
-        <option value="material">Material</option>
-      </select>
-
-      {/* Toggle between light and dark modes */}
-      <label htmlFor="mode-toggle">Choose mode:</label>
-      <select id="mode-toggle" onChange={(e) => onModeChange(e.target.value)}>
-        <option value="light">Light Mode</option>
-        <option value="dark">Dark Mode</option>
-      </select>
-    </div>
-  );
-};

package/src/stories/Molecules/SelectTheme/SelectTheme.stories.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { SelectTheme } from './SelectTheme';  // Correct way to import a named export
-export default {
-  title: 'Molecules/ContentDisplay/SelectTheme',
-  component: SelectTheme,
-  parameters: {
-    docs: {
-      description: {
-        component: 'SelectTheme allows the user to switch between different CSS themes dynamically.',
-      },
-    },
-  },
-};
-
-const Template = (args) => <SelectTheme {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  // You can pass default props here if needed, though SelectTheme doesn't take any props directly.
-};
-
-Default.story = {
-  name: 'Default',
-};

package/src/stories/Molecules/Sidebar/Sidebar.css

@@ -1,67 +0,0 @@
-/* CSS variables for dynamic styling */
-.sidebar {
-  --sidebar-background-color: rgba(34, 139, 34, 0.1); /* Light greenish background */
-  --sidebar-border-color: rgba(34, 139, 34, 0.2); /* Light border with dark greenish color */
-  --sidebar-padding: 16px;
-  --sidebar-width: 250px;
-
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  background-color: var(--sidebar-background-color);
-  border-right: 1px solid var(--sidebar-border-color);
-  padding: var(--sidebar-padding);
-  width: var(--sidebar-width);
-  height: 100vh;
-  box-sizing: border-box;
-}
-
-.sidebar__logo {
-  --sidebar-logo-margin-bottom: 24px;
-
-  margin-bottom: var(--sidebar-logo-margin-bottom);
-}
-
-.sidebar__links {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-}
-
-.sidebar__item {
-  --sidebar-item-margin: 12px 0;
-
-  margin: var(--sidebar-item-margin);
-  width: 100%;
-}
-
-.sidebar__link {
-  --sidebar-link-color: #006400;
-  --sidebar-link-padding: 8px 16px;
-
-  display: block;
-  color: var(--sidebar-link-color);
-  text-decoration: none;
-  padding: var(--sidebar-link-padding);
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.sidebar__link:hover,
-.sidebar__link--active {
-  --sidebar-link-hover-background-color: rgba(34, 139, 34, 0.2);
-  --sidebar-link-hover-border-radius: 4px;
-
-  background-color: var(--sidebar-link-hover-background-color);
-  border-radius: var(--sidebar-link-hover-border-radius);
-}
-
-.sidebar__controls {
-  --sidebar-controls-margin-top: 24px;
-
-  margin-top: var(--sidebar-controls-margin-top);
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}

package/src/stories/Molecules/Sidebar/Sidebar.jsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Sidebar.css';
-
-export const Sidebar = ({
-  links,
-  logo,
-  userControls,
-  styleOverrides = {},
-}) => {
-  // Build the style object for CSS variable overrides
-  const style = {};
-
-  // Map of styleOverrides keys to CSS variable names
-  const cssVariableMap = {
-    sidebarBackgroundColor: '--sidebar-background-color',
-    sidebarBorderColor: '--sidebar-border-color',
-    sidebarPadding: '--sidebar-padding',
-    sidebarWidth: '--sidebar-width',
-    logoMarginBottom: '--sidebar-logo-margin-bottom',
-    itemMargin: '--sidebar-item-margin',
-    linkColor: '--sidebar-link-color',
-    linkPadding: '--sidebar-link-padding',
-    linkHoverBackgroundColor: '--sidebar-link-hover-background-color',
-    linkHoverBorderRadius: '--sidebar-link-hover-border-radius',
-    controlsMarginTop: '--sidebar-controls-margin-top',
-  };
-
-  // Set CSS variables based on styleOverrides
-  Object.keys(styleOverrides).forEach((key) => {
-    const cssVar = cssVariableMap[key];
-    if (cssVar) {
-      style[cssVar] = styleOverrides[key];
-    }
-  });
-
-  return (
-    <aside className="sidebar" style={style}>
-      <div className="sidebar__logo">
-        {logo}
-      </div>
-      <ul className="sidebar__links">
-        {links.map((link, index) => (
-          <li key={index} className="sidebar__item">
-            <a
-              href={link.url}
-              className={`sidebar__link ${link.isActive ? 'sidebar__link--active' : ''}`}
-            >
-              {link.label}
-            </a>
-          </li>
-        ))}
-      </ul>
-      <div className="sidebar__controls">
-        {userControls}
-      </div>
-    </aside>
-  );
-};
-
-Sidebar.propTypes = {
-  links: PropTypes.arrayOf(
-    PropTypes.shape({
-      url: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired,
-      isActive: PropTypes.bool,
-    })
-  ).isRequired,
-  logo: PropTypes.node,
-  userControls: PropTypes.node,
-  styleOverrides: PropTypes.object,
-};
-
-Sidebar.defaultProps = {
-  logo: null,
-  userControls: null,
-  styleOverrides: {},
-};
-
-export default Sidebar;

package/src/stories/Molecules/Sidebar/Sidebar.stories.jsx

@@ -1,35 +0,0 @@
-import { Sidebar } from './Sidebar';
-
-export default {
-  title: 'Molecules/Navigation/Sidebar',
-  component: Sidebar,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    // Define argTypes here for dynamic controls in Storybook
-  },
-};
-
-export const Default = {
-  args: {
-    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" style={{ width: '100px' }} />,
-    userControls: (
-      <>
-        <button className="button">Control 1</button>
-        <button className="button">Control 2</button>
-      </>
-    ),
-    styleOverrides: {
-      sidebarBackgroundColor: '#f5f5f5',
-      sidebarBorderColor: '#ddd',
-      sidebarPadding: '20px',
-      sidebarWidth: '280px',
-    },
-  },
-};

package/src/stories/Molecules/VideoWithDescription/VideoWithDescription.css

@@ -1,4 +0,0 @@
-
-.videowithdescription {
-  /* Default styles for VideoWithDescription */
-}