this.gui 1.0.15 → 1.0.17

package/src/stories/Layouts/Flexbox/Flexbox.stories.jsx

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

package/src/stories/Layouts/Footer/Footer.css

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

package/src/stories/Layouts/Footer/Footer.jsx

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

package/src/stories/Layouts/Footer/Footer.stories.jsx

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

package/src/stories/Layouts/Header/Header.css

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

package/src/stories/Layouts/Header/Header.jsx

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

package/src/stories/Layouts/Header/Header.stories.jsx

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

package/src/stories/Layouts/HeroBanner/HeroBanner.css

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

package/src/stories/Layouts/HeroBanner/HeroBanner.jsx

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

package/src/stories/Layouts/HeroBanner/HeroBanner.stories.jsx

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

package/src/stories/Layouts/HeroImageVideo/HeroImageVideo.css

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

package/src/stories/Layouts/HeroImageVideo/HeroImageVideo.jsx

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

package/src/stories/Layouts/HeroImageVideo/HeroImageVideo.stories.jsx

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

package/src/stories/Layouts/Pagination/Pagination.css

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

package/src/stories/Layouts/Pagination/Pagination.jsx

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

package/src/stories/Layouts/Pagination/Pagination.stories.jsx

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

package/src/stories/Layouts/Sidebar/Sidebar.css

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

package/src/stories/Layouts/Sidebar/Sidebar.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Sidebar.css';
+
+export const Sidebar = ({
+  links = [],  // Default value for links
+  logo = null,  // Default value for logo
+  userControls = null,  // Default value for userControls
+  styleOverrides = {},  // Default value for styleOverrides
+}) => {
+  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,
+    })
+  ),
+  logo: PropTypes.node,
+  userControls: PropTypes.node,
+  styleOverrides: PropTypes.object,
+};

package/src/stories/Layouts/Sidebar/Sidebar.stories.jsx

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

package/src/stories/Layouts/Tabs/Tabs.css

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

package/src/stories/Layouts/Tabs/Tabs.jsx

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

package/src/stories/Layouts/Tabs/Tabs.stories.jsx

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

package/src/stories/Layouts/index.js

@@ -0,0 +1,25 @@
+// this.GUI/src/stories/Layouts/index.js
+import { Flexbox } from './Flexbox/Flexbox';
+import { Header } from './Header/Header';
+import { Footer } from './Footer/Footer';
+import { Pagination } from './Pagination/Pagination';
+import { Sidebar } from './Sidebar/Sidebar';
+import { Tabs } from './Tabs/Tabs';
+import { Accordion } from './Accordion/Accordion';
+import { HeroBanner } from './HeroBanner/HeroBanner';
+import { HeroImageVideo } from './HeroImageVideo/HeroImageVideo';
+
+// Flattened export of all layout components
+const Layouts = {
+  Flexbox,
+  Header,
+  Footer,
+  Pagination,
+  Sidebar,
+  Tabs,
+  Accordion,
+  HeroBanner,
+  HeroImageVideo,
+};
+
+export default Layouts;

package/src/stories/Layouts/meta_Layouts.js

@@ -0,0 +1,28 @@
+const Layout = {
+  "Layout": {
+    "Grid": [
+      { name: "Grid", paths: { css: "./Grid/Grid.css", globalCss: "styles/global.css", jsx: "./Layout/Grid/Grid.jsx", stories: "src/stories/Layout/Grid/Grid.stories.jsx" }},
+    ],
+    "FlexboxLayout": [
+      { name: "Flexbox", paths: { css: "./Flexbox/Flexbox.css", globalCss: "styles/global.css", jsx: "./Layout/Flexbox/Flexbox.jsx", stories: "src/stories/Layout/Flexbox/Flexbox.stories.jsx" }},
+    ],
+    "NavigationAndMenus": [
+      { name: "Header", paths: { css: "./Header/Header.css", globalCss: "styles/global.css", jsx: "./Layout/Header/Header.jsx", stories: "src/stories/Layout/Header/Header.stories.jsx" }},
+      { name: "Footer", paths: { css: "./Footer/Footer.css", globalCss: "styles/global.css", jsx: "./Layout/Footer/Footer.jsx", stories: "src/stories/Layout/Footer/Footer.stories.jsx" }},
+      { name: "Dropdown", paths: { css: "./Dropdown/Dropdown.css", globalCss: "styles/global.css", jsx: "./Layout/Dropdown/Dropdown.jsx", stories: "src/stories/Layout/Dropdown/Dropdown.stories.jsx" }},
+      { name: "Pagination", paths: { css: "./Pagination/Pagination.css", globalCss: "styles/global.css", jsx: "./Layout/Pagination/Pagination.jsx", stories: "src/stories/Layout/Pagination/Pagination.stories.jsx" }},
+    ],
+    "Organization": [
+      { name: "Sidebar", paths: { css: "./Sidebar/Sidebar.css", globalCss: "styles/global.css", jsx: "./Layout/Sidebar/Sidebar.jsx", stories: "src/stories/Layout/Sidebar/Sidebar.stories.jsx" }},
+      { name: "Tabs", paths: { css: "./Tabs/Tabs.css", globalCss: "styles/global.css", jsx: "./Layout/Tabs/Tabs.jsx", stories: "src/stories/Layout/Tabs/Tabs.stories.jsx" }},
+      { name: "Accordion", paths: { css: "./Accordion/Accordion.css", globalCss: "styles/global.css", jsx: "./Layout/Accordion/Accordion.jsx", stories: "src/stories/Layout/Accordion/Accordion.stories.jsx" }},
+    ],
+    "HeroSections": [
+      { name: "HeroBanner", paths: { css: "./HeroBanner/HeroBanner.css", globalCss: "styles/global.css", jsx: "./Layout/HeroBanner/HeroBanner.jsx", stories: "src/stories/Layout/HeroBanner/HeroBanner.stories.jsx" }},
+      { name: "HeroImageVideo", paths: { css: "./HeroImageVideo/HeroImageVideo.css", globalCss: "styles/global.css", jsx: "./Layout/HeroImageVideo/HeroImageVideo.jsx", stories: "src/stories/Layout/HeroImageVideo/HeroImageVideo.stories.jsx" }},
+    ]
+  }
+};
+
+// Export the Layout object
+export default Layout;

package/src/stories/Molecules/Accordion/Accordion.css

@@ -1,4 +1,4 @@
-
+/*this.GUI/src/stories/Molecules/Accordion/Accordion.css*/
 .accordion {
   /* Default styles for Accordion */
 }