this.gui 1.0.14 → 1.0.16

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,

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/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;
+}