this.gui 1.0.15 → 1.0.17

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

@@ -1,4 +1,67 @@
-
+/* CSS variables for dynamic styling */
 .sidebar {
-  /* Default styles for 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,25 +1,80 @@
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import './Sidebar.css';
 
-/**
- * Sidebar component
- */
-export const Sidebar = (props) => {
+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 (
-    <div className="sidebar" {...props}>
-      {/* Component implementation */}
-    </div>
+    <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 = {
-  // Define prop types here
+  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 = {
-  // Define default props here
+  logo: null,
+  userControls: null,
+  styleOverrides: {},
 };
 
-export default Sidebar;
+export default Sidebar;

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

@@ -1,7 +1,5 @@
-
 import { Sidebar } from './Sidebar';
 
-// Storybook configuration for Sidebar component
 export default {
   title: 'Molecules/Navigation/Sidebar',
   component: Sidebar,
@@ -9,12 +7,29 @@ export default {
     layout: 'centered',
   },
   argTypes: {
-    // Define argTypes here
+    // Define argTypes here for dynamic controls in Storybook
   },
 };
 
 export const Default = {
   args: {
-    // Define default args here
+    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/index.js

@@ -1,9 +1,9 @@
 // src/stories/Molecules/index.js
-
 // Import all components as named exports
 import { Navbar } from './Navbar/Navbar';
 import { Sidebar } from './Sidebar/Sidebar';
 import { Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
+import { Dropdown } from './Dropdown/Dropdown';
 import { InputGroup } from './InputGroup/InputGroup';
 import { InputWithLabel } from './InputWithLabel/InputWithLabel';
 import { SearchBar } from './SearchBar/SearchBar';
@@ -30,6 +30,7 @@ import { SelectTheme } from './SelectTheme/SelectTheme';
 const Molecules = {
   Navbar,
   Sidebar,
+  Dropdown,
   Breadcrumbs,
   InputGroup,
   InputWithLabel,

package/src/stories/Molecules/{Molecules.js → meta_Molecules.js}

@@ -5,6 +5,9 @@ const Molecules = {
       { name: "Sidebar", paths: { css: "./Sidebar/Sidebar.css", globalCss: "styles/global.css", jsx: "./Sidebar/Sidebar.jsx", stories: "./Sidebar/Sidebar.stories.jsx" }},
       { name: "Breadcrumbs", paths: { css: "./Breadcrumbs/Breadcrumbs.css", globalCss: "styles/global.css", jsx: "./Breadcrumbs/Breadcrumbs.jsx", stories: "./Breadcrumbs/Breadcrumbs.stories.jsx" }},
     ],
+    "Menus": [
+      { name: "Dropdown", paths: { css: "./Dropdown/Dropdown.css", globalCss: "styles/global.css", jsx: "./Layout/Dropdown/Dropdown.jsx", stories: "src/stories/Layout/Dropdown/Dropdown.stories.jsx" }},
+    ],
     "FormElements": [
       { name: "InputGroup ", paths: { css: "./InputGroup/InputGroup.css", globalCss: "styles/global.css", jsx: "./InputGroup/InputGroup.jsx", stories: "src/stories/Molecules/InputGroup/InputGroup.stories.jsx" }},
       { name: "InputWithLabel", paths: { css: "./InputWithLabel/InputWithLabel.css", globalCss: "styles/global.css", jsx: "./InputWithLabel/InputWithLabel.jsx", stories: "src/stories/Molecules/InputWithLabel/InputWithLabel.stories.jsx" }},
@@ -16,18 +19,18 @@ const Molecules = {
       { name: "IconButton", paths: { css: "./IconButton/IconButton.css", globalCss: "styles/global.css", jsx: "./IconButton/IconButton.jsx", stories: "src/stories/Molecules/IconButton/IconButton.stories.jsx" }},
       { name: "ButtonGroup", paths: { css: "./ButtonGroup/ButtonGroup.css", globalCss: "styles/global.css", jsx: "./ButtonGroup/ButtonGroup.jsx", stories: "src/stories/Molecules/ButtonGroup/ButtonGroup.stories.jsx" }},
     ],
-    "MediaMolecules": [
+    "Media": [
       { name: "ImageWithCaption", paths: { css: "./ImageWithCaption/ImageWithCaption.css", globalCss: "styles/global.css", jsx: "./ImageWithCaption/ImageWithCaption.jsx", stories: "src/stories/Molecules/ImageWithCaption/ImageWithCaption.stories.jsx" }},
       { name: "VideoWithDescription", paths: { css: "./VideoWithDescription/VideoWithDescription.css", globalCss: "styles/global.css", jsx: "./VideoWithDescription/VideoWithDescription.jsx", stories: "src/stories/Molecules/VideoWithDescription/VideoWithDescription.stories.jsx" }},
-      { name: "AvatarWithName", paths: { css: "./AvatarWithName/AvatarWithName.css", globalCss: "styles/global.css", jsx: "./AvatarWithName/AvatarWithName.jsx", stories: "src/stories/Molecules/AvatarWithName/AvatarWithName.stories.jsx" }},
       { name: "AudioPlayer", paths: { css: "./AudioPlayer/AudioPlayer.css", globalCss: "styles/global.css", jsx: "./AudioPlayer/AudioPlayer.jsx", stories: "src/stories/Molecules/AudioPlayer/AudioPlayer.stories.jsx" }},
     ],
-    "ContentDisplay": [
+    "Display": [
       { name: "SelectTheme", paths: { css: "./SelectTheme/SelectTheme.css", globalCss: "styles/global.css", jsx: "./SelectTheme/SelectTheme.jsx", stories: "src/stories/Molecules/SelectTheme/SelectTheme.stories.jsx" }},
       { name: "Card", paths: { css: "./Card/Card.css", globalCss: "styles/global.css", jsx: "./Card/Card.jsx", stories: "./Card/Card.stories.jsx" }},
       { name: "MediaCard", paths: { css: "./MediaCard/MediaCard.css", globalCss: "styles/global.css", jsx: "./MediaCard/MediaCard.jsx", stories: "./MediaCard/MediaCard.stories.jsx" }},
       { name: "List", paths: { css: "./List/List.css", globalCss: "styles/global.css", jsx: "./List/List.jsx", stories: "./List/List.stories.jsx" }},
       { name: "Accordion", paths: { css: "./Accordion/Accordion.css", globalCss: "styles/global.css", jsx: "./Accordion/Accordion.jsx", stories: "./Accordion/Accordion.stories.jsx" }},
+      { name: "AvatarWithName", paths: { css: "./AvatarWithName/AvatarWithName.css", globalCss: "styles/global.css", jsx: "./AvatarWithName/AvatarWithName.jsx", stories: "src/stories/Molecules/AvatarWithName/AvatarWithName.stories.jsx" }},
     ],
     "FeedbackMolecules": [
       { name: "Notification", paths: { css: "./Notification/Notification.css", globalCss: "styles/global.css", jsx: "./Notification/Notification.jsx", stories: "src/stories/Molecules/Notification/Notification.stories.jsx" }},

package/src/stories/Templates/AdminDashboard/AdminDashboard.css

@@ -0,0 +1,7 @@
+
+.admindashboard {
+  padding: 16px;
+  border-radius: 8px;
+  background-color: #f0f0f0;
+  border: 1px solid #ddd;
+}

package/src/stories/Templates/AdminDashboard/AdminDashboard.jsx

@@ -0,0 +1,24 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './AdminDashboard.css';
+
+/**
+ * AdminDashboard template component
+ */
+export const AdminDashboard = ({ children, ...props }) => {
+  return (
+    <div className="admindashboard" {...props}>
+      {children}
+    </div>
+  );
+};
+
+AdminDashboard.propTypes = {
+  /**
+   * Children components to be rendered inside the template
+   */
+  children: PropTypes.node.isRequired,
+};
+
+export default AdminDashboard;

package/src/stories/Templates/AdminDashboard/AdminDashboard.stories.jsx

@@ -0,0 +1,20 @@
+
+import { AdminDashboard } from './AdminDashboard';
+
+// Storybook configuration for AdminDashboard template
+export default {
+  title: 'Templates/DashboardLayouts/AdminDashboard',
+  component: AdminDashboard,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+};
+
+export const Default = {
+  args: {
+    children: 'This is a default AdminDashboard template.',
+  },
+};

package/src/stories/Templates/CallToAction/CallToAction.css

@@ -0,0 +1,7 @@
+
+.calltoaction {
+  padding: 16px;
+  border-radius: 8px;
+  background-color: #f0f0f0;
+  border: 1px solid #ddd;
+}

package/src/stories/Templates/CallToAction/CallToAction.jsx

@@ -0,0 +1,24 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './CallToAction.css';
+
+/**
+ * CallToAction template component
+ */
+export const CallToAction = ({ children, ...props }) => {
+  return (
+    <div className="calltoaction" {...props}>
+      {children}
+    </div>
+  );
+};
+
+CallToAction.propTypes = {
+  /**
+   * Children components to be rendered inside the template
+   */
+  children: PropTypes.node.isRequired,
+};
+
+export default CallToAction;

package/src/stories/Templates/CallToAction/CallToAction.stories.jsx

@@ -0,0 +1,20 @@
+
+import { CallToAction } from './CallToAction';
+
+// Storybook configuration for CallToAction template
+export default {
+  title: 'Templates/LandingPages/CallToAction',
+  component: CallToAction,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+};
+
+export const Default = {
+  args: {
+    children: 'This is a default CallToAction template.',
+  },
+};

package/src/stories/Templates/FeaturesList/FeaturesList.css

@@ -0,0 +1,7 @@
+
+.featureslist {
+  padding: 16px;
+  border-radius: 8px;
+  background-color: #f0f0f0;
+  border: 1px solid #ddd;
+}

package/src/stories/Templates/FeaturesList/FeaturesList.jsx

@@ -0,0 +1,24 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './FeaturesList.css';
+
+/**
+ * FeaturesList template component
+ */
+export const FeaturesList = ({ children, ...props }) => {
+  return (
+    <div className="featureslist" {...props}>
+      {children}
+    </div>
+  );
+};
+
+FeaturesList.propTypes = {
+  /**
+   * Children components to be rendered inside the template
+   */
+  children: PropTypes.node.isRequired,
+};
+
+export default FeaturesList;

package/src/stories/Templates/FeaturesList/FeaturesList.stories.jsx

@@ -0,0 +1,20 @@
+
+import { FeaturesList } from './FeaturesList';
+
+// Storybook configuration for FeaturesList template
+export default {
+  title: 'Templates/LandingPages/FeaturesList',
+  component: FeaturesList,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+};
+
+export const Default = {
+  args: {
+    children: 'This is a default FeaturesList template.',
+  },
+};

package/src/stories/Templates/FormSection/FormSection.css

@@ -0,0 +1,7 @@
+
+.formsection {
+  padding: 16px;
+  border-radius: 8px;
+  background-color: #f0f0f0;
+  border: 1px solid #ddd;
+}

package/src/stories/Templates/FormSection/FormSection.jsx

@@ -0,0 +1,24 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './FormSection.css';
+
+/**
+ * FormSection template component
+ */
+export const FormSection = ({ children, ...props }) => {
+  return (
+    <div className="formsection" {...props}>
+      {children}
+    </div>
+  );
+};
+
+FormSection.propTypes = {
+  /**
+   * Children components to be rendered inside the template
+   */
+  children: PropTypes.node.isRequired,
+};
+
+export default FormSection;

package/src/stories/Templates/FormSection/FormSection.stories.jsx

@@ -0,0 +1,20 @@
+
+import { FormSection } from './FormSection';
+
+// Storybook configuration for FormSection template
+export default {
+  title: 'Templates/ContactUsPages/FormSection',
+  component: FormSection,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+};
+
+export const Default = {
+  args: {
+    children: 'This is a default FormSection template.',
+  },
+};

package/src/stories/Templates/HeroSection/HeroSection.css

@@ -0,0 +1,7 @@
+
+.herosection {
+  padding: 16px;
+  border-radius: 8px;
+  background-color: #f0f0f0;
+  border: 1px solid #ddd;
+}

package/src/stories/Templates/HeroSection/HeroSection.jsx

@@ -0,0 +1,24 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './HeroSection.css';
+
+/**
+ * HeroSection template component
+ */
+export const HeroSection = ({ children, ...props }) => {
+  return (
+    <div className="herosection" {...props}>
+      {children}
+    </div>
+  );
+};
+
+HeroSection.propTypes = {
+  /**
+   * Children components to be rendered inside the template
+   */
+  children: PropTypes.node.isRequired,
+};
+
+export default HeroSection;

package/src/stories/Templates/HeroSection/HeroSection.stories.jsx

@@ -0,0 +1,20 @@
+
+import { HeroSection } from './HeroSection';
+
+// Storybook configuration for HeroSection template
+export default {
+  title: 'Templates/LandingPages/HeroSection',
+  component: HeroSection,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+};
+
+export const Default = {
+  args: {
+    children: 'This is a default HeroSection template.',
+  },
+};

package/src/stories/Templates/LocationInfo/LocationInfo.css

@@ -0,0 +1,7 @@
+
+.locationinfo {
+  padding: 16px;
+  border-radius: 8px;
+  background-color: #f0f0f0;
+  border: 1px solid #ddd;
+}

package/src/stories/Templates/LocationInfo/LocationInfo.jsx

@@ -0,0 +1,24 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './LocationInfo.css';
+
+/**
+ * LocationInfo template component
+ */
+export const LocationInfo = ({ children, ...props }) => {
+  return (
+    <div className="locationinfo" {...props}>
+      {children}
+    </div>
+  );
+};
+
+LocationInfo.propTypes = {
+  /**
+   * Children components to be rendered inside the template
+   */
+  children: PropTypes.node.isRequired,
+};
+
+export default LocationInfo;

package/src/stories/Templates/LocationInfo/LocationInfo.stories.jsx

@@ -0,0 +1,20 @@
+
+import { LocationInfo } from './LocationInfo';
+
+// Storybook configuration for LocationInfo template
+export default {
+  title: 'Templates/ContactUsPages/LocationInfo',
+  component: LocationInfo,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+};
+
+export const Default = {
+  args: {
+    children: 'This is a default LocationInfo template.',
+  },
+};

package/src/stories/Templates/ProductPage/ProductPage.css

@@ -0,0 +1,7 @@
+
+.productpage {
+  padding: 16px;
+  border-radius: 8px;
+  background-color: #f0f0f0;
+  border: 1px solid #ddd;
+}

package/src/stories/Templates/ProductPage/ProductPage.jsx

@@ -0,0 +1,24 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './ProductPage.css';
+
+/**
+ * ProductPage template component
+ */
+export const ProductPage = ({ children, ...props }) => {
+  return (
+    <div className="productpage" {...props}>
+      {children}
+    </div>
+  );
+};
+
+ProductPage.propTypes = {
+  /**
+   * Children components to be rendered inside the template
+   */
+  children: PropTypes.node.isRequired,
+};
+
+export default ProductPage;

package/src/stories/Templates/ProductPage/ProductPage.stories.jsx

@@ -0,0 +1,20 @@
+
+import { ProductPage } from './ProductPage';
+
+// Storybook configuration for ProductPage template
+export default {
+  title: 'Templates/ECommercePages/ProductPage',
+  component: ProductPage,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+};
+
+export const Default = {
+  args: {
+    children: 'This is a default ProductPage template.',
+  },
+};

package/src/stories/Templates/RegistrationPage/RegistrationPage.css

@@ -0,0 +1,7 @@
+
+.registrationpage {
+  padding: 16px;
+  border-radius: 8px;
+  background-color: #f0f0f0;
+  border: 1px solid #ddd;
+}