this.gui 1.0.15 → 1.0.17

package/src/stories/Molecules/Dropdown/Dropdown.stories.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Dropdown } from './Dropdown';
+
+export default {
+  title: 'Molecules/Menus/Dropdown',
+  component: Dropdown,
+  argTypes: {
+    color: {
+      control: 'select',
+      options: [
+        'primary', 'secondary', 'info', 'warning', 'alert', 'success', 'neutral', 'dark',
+        'classy-color-1', 'classy-color-2', 'classy-color-3', 'classy-color-4', 'classy-color-5',
+        'small-switch-color-1', 'small-switch-color-2',
+        'natural-color-1', 'natural-color-2', 'natural-color-3',
+        'grey-friend-1', 'grey-friend-2', 'shade-1', 'shade-2', 'shade-3', 'shade-4',
+      ],
+    },
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary'],
+    },
+    searchable: { control: 'boolean' },
+    showArrow: { control: 'boolean', defaultValue: true },
+  },
+};
+
+const options = [
+  'Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'
+];
+
+export const BasicDropdown = (args) => <Dropdown {...args} options={options} />;
+BasicDropdown.args = {
+  placeholder: 'Select an option',
+  searchable: false,
+  variant: 'primary',
+  color: 'primary',
+};
+
+export const SearchableDropdown = (args) => <Dropdown {...args} options={options} />;
+SearchableDropdown.args = {
+  placeholder: 'Type to search...',
+  searchable: true,
+  variant: 'primary',
+  color: 'info',
+};

package/src/stories/Molecules/Navbar/Navbar.css

@@ -1,87 +1,91 @@
 /* src/stories/Molecules/Navigation/Navbar/Navbar.css */
 
-/* CSS variables for dynamic styling */
+/* Root variables for theming */
 .navbar {
-  --navbar-background-color: rgba(34, 139, 34, 0); /* Light greenish background with low opacity */
-  --navbar-border-color: rgba(34, 139, 34, 0.235); /* Light border with dark greenish color and low opacity */
-  --navbar-padding: 8px 16px;
-  --navbar-margin: 16px;
-  --navbar-border-radius: 4px;
-
+  --navbar-background-color: var(--background-color);
+  --navbar-border-color: var(--border-color);
+  --navbar-height: 60px;
+  --navbar-link-color: var(--text-color);
+  --navbar-link-hover-background: rgba(255, 255, 255, 0.1);
+  --navbar-link-padding: 0 16px;
+  --navbar-fixed: fixed;
+  --navbar-z-index: 1000;
+
+  position: var(--navbar-fixed);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--navbar-height);
+  background-color: var(--navbar-background-color);
+  border-bottom: 1px solid var(--navbar-border-color);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: var(--navbar-background-color);
-  border: 1px solid var(--navbar-border-color);
-  padding: var(--navbar-padding);
-  margin: var(--navbar-margin);
-  border-radius: var(--navbar-border-radius);
+  z-index: var(--navbar-z-index);
+  padding: 0 16px;
+  box-sizing: border-box;
 }
 
-.navbar__logo {
-  --navbar-logo-margin-right: 24px;
-
+.navbar__group {
   display: flex;
   align-items: center;
-  margin-right: var(--navbar-logo-margin-right);
 }
 
-.navbar__links {
-  list-style: none;
-  display: flex;
-  margin: 0;
-  padding: 0;
+.navbar__group--left {
+  flex: 1;
 }
 
-.navbar__item {
-  --navbar-item-margin: 0 12px;
-
-  margin: var(--navbar-item-margin);
+.navbar__group--center {
+  flex: 1;
+  justify-content: center;
 }
 
-.navbar__link {
-  --navbar-link-color: #006400;
-  --navbar-link-padding: 8px;
-
-  color: var(--navbar-link-color);
-  text-decoration: none;
-  padding: var(--navbar-link-padding);
+.navbar__group--right {
+  flex: 1;
+  justify-content: flex-end;
 }
 
-.navbar__link:hover,
-.navbar__link--active {
-  --navbar-link-hover-background-color: rgba(34, 139, 34, 0.1);
-  --navbar-link-hover-border-radius: 4px;
-
-  background-color: var(--navbar-link-hover-background-color);
-  border-radius: var(--navbar-link-hover-border-radius);
+.navbar__logo {
+  margin-right: 16px;
 }
 
-.navbar__controls {
-  --navbar-controls-margin-left: 24px;
+.navbar__search {
+  margin-right: 16px;
+}
 
+.navbar__link {
+  color: var(--navbar-link-color);
+  text-decoration: none;
+  padding: var(--navbar-link-padding);
   display: flex;
   align-items: center;
-  margin-left: var(--navbar-controls-margin-left);
-}
-
-.navbar__controls > * {
-  --navbar-control-item-margin-left: 12px;
-
-  margin-left: var(--navbar-control-item-margin-left);
+  height: 100%;
+  box-sizing: border-box;
+  transition: background-color 0.3s ease;
 }
 
-/* Button styles */
-.button {
-  --button-background-color: #228B22;
-  --button-text-color: #fff;
-
-  background-color: var(--button-background-color);
-  color: var(--button-text-color);
+.navbar__link:hover {
+  background-color: var(--navbar-link-hover-background);
 }
 
-.button:hover {
-  --button-hover-background-color: #1e7a1e;
-
-  background-color: var(--button-hover-background-color);
+@media (max-width: 768px) {
+  .navbar {
+    flex-wrap: wrap;
+    height: auto;
+  }
+
+  .navbar__group {
+    width: 100%;
+    justify-content: center;
+    margin: 8px 0;
+  }
+
+  .navbar__group--left,
+  .navbar__group--right {
+    justify-content: center;
+  }
+
+  .navbar__link {
+    padding: 8px;
+  }
 }

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

@@ -1,36 +1,23 @@
-// src/stories/Molecules/Navigation/Navbar/Navbar.jsx
-
+//this.GUI/src/stories/Molecules/Navbar/Navbar.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
 import './Navbar.css';
 
 export const Navbar = ({
-  links,
-  logo,
-  userControls,
+  leftItems = [],
+  centerItems = [],
+  rightItems = [],
+  logo = null,
+  searchComponent = null,
   styleOverrides = {},
 }) => {
-  // Build the style object for CSS variable overrides
   const style = {};
 
   // Map of styleOverrides keys to CSS variable names
   const cssVariableMap = {
     navbarBackgroundColor: '--navbar-background-color',
     navbarBorderColor: '--navbar-border-color',
-    navbarPadding: '--navbar-padding',
-    navbarMargin: '--navbar-margin',
-    navbarBorderRadius: '--navbar-border-radius',
-    logoMarginRight: '--navbar-logo-margin-right',
-    itemMargin: '--navbar-item-margin',
-    linkColor: '--navbar-link-color',
-    linkPadding: '--navbar-link-padding',
-    linkHoverBackgroundColor: '--navbar-link-hover-background-color',
-    linkHoverBorderRadius: '--navbar-link-hover-border-radius',
-    controlsMarginLeft: '--navbar-controls-margin-left',
-    controlItemMarginLeft: '--navbar-control-item-margin-left',
-    buttonBackgroundColor: '--button-background-color',
-    buttonTextColor: '--button-text-color',
-    buttonHoverBackgroundColor: '--button-hover-background-color',
+    navbarHeight: '--navbar-height',
   };
 
   // Set CSS variables based on styleOverrides
@@ -43,45 +30,53 @@ export const Navbar = ({
 
   return (
     <nav className="navbar" style={style}>
-      <div className="navbar__logo">
-        {logo}
+      <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>
-      <ul className="navbar__links">
-        {links.map((link, index) => (
-          <li key={index} className="navbar__item">
-            <a
-              href={link.url}
-              className={`navbar__link ${link.isActive ? 'navbar__link--active' : ''}`}
-            >
-              {link.label}
-            </a>
-          </li>
+      <div className="navbar__group navbar__group--right">
+        {rightItems.map((item, index) => (
+          <a key={index} href={item.url} className="navbar__link">
+            {item.label}
+          </a>
         ))}
-      </ul>
-      <div className="navbar__controls">
-        {userControls}
       </div>
     </nav>
   );
 };
 
 Navbar.propTypes = {
-  links: PropTypes.arrayOf(
+  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,
-      isActive: PropTypes.bool,
     })
-  ).isRequired,
+  ),
+  rightItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      url: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+    })
+  ),
   logo: PropTypes.node,
-  userControls: PropTypes.node,
+  searchComponent: PropTypes.node,
   styleOverrides: PropTypes.object,
-};
-
-Navbar.defaultProps = {
-  logo: null,
-  userControls: null,
-  styleOverrides: {},
-};
-
-export default Navbar;
+};

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

@@ -1,20 +1,70 @@
-
+import React from 'react';
 import { Navbar } from './Navbar';
+import { SearchBar } from '../SearchBar/SearchBar';
+import { Logo } from '../../Atoms/Logo/Logo'; // Importing the Logo component
 
-// Storybook configuration for Navbar component
 export default {
   title: 'Molecules/Navigation/Navbar',
   component: Navbar,
   parameters: {
-    layout: 'centered',
+    layout: 'fullscreen',
   },
   argTypes: {
-    // Define argTypes here
+    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',
+    },
   },
 };
 
-export const Default = {
-  args: {
-    // Define default args here
-  },
+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/SearchBar/SearchBar.css

@@ -1,4 +1,69 @@
+/* src/stories/Molecules/FormElements/SearchBar/SearchBar.css */
 
 .searchbar {
-  /* Default styles for 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,25 +1,73 @@
+// src/stories/Molecules/SearchBar/SearchBar.jsx
 
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import './SearchBar.css';
 
-/**
- * SearchBar component
- */
-export const SearchBar = (props) => {
+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 (
-    <div className="searchbar" {...props}>
-      {/* Component implementation */}
-    </div>
+    <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 = {
-  // Define prop types here
+  placeholder: PropTypes.string,
+  onSearch: PropTypes.func,
 };
 
 SearchBar.defaultProps = {
-  // Define default props here
+  placeholder: 'Search...',
+  onSearch: () => {},
 };
 
-export default SearchBar;
+export default SearchBar;

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

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

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

@@ -1,43 +1,21 @@
-// src/stories/Molecules/SelectTheme/SelectTheme.jsx
-
-import React, { useState, useEffect } from 'react';
-import './SelectTheme.css'; // Import the component styles
-
-const themes = [
-  { label: 'GitHub', value: 'github' },
-  { label: 'Gothic', value: 'gothic' },
-  { label: 'Newsprint', value: 'newsprint' },
-  { label: 'Night', value: 'night' },
-  { label: 'Pixyll', value: 'pixyll' },
-  { label: 'Whitey', value: 'whitey' }
-];
-
-export const SelectTheme = () => {  // Named export
-  const [selectedTheme, setSelectedTheme] = useState('github'); // Default theme
-
-  useEffect(() => {
-    import(`../../../themes/typ/${selectedTheme}.css`).then(() => {
-      console.log(`${selectedTheme} theme loaded`);
-    });
-  }, [selectedTheme]);
-
-  const handleThemeChange = (event) => {
-    setSelectedTheme(event.target.value);
-  };
+import React from 'react';
 
+export const SelectTheme = ({ onThemeChange, onModeChange }) => {
   return (
-    <div className="select-theme-container">
-      <span className="select-theme-label">Select Theme:</span>
-      <select
-        className="select-theme-dropdown"
-        value={selectedTheme}
-        onChange={handleThemeChange}
-      >
-        {themes.map((theme) => (
-          <option key={theme.value} value={theme.value}>
-            {theme.label}
-          </option>
-        ))}
+    <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,6 +1,5 @@
 import React from 'react';
-import SelectTheme from './SelectTheme';
-
+import { SelectTheme } from './SelectTheme';  // Correct way to import a named export
 export default {
   title: 'Molecules/ContentDisplay/SelectTheme',
   component: SelectTheme,