this.gui 1.0.17 → 1.1.0

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

@@ -1,16 +0,0 @@
-
-.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

@@ -1,31 +0,0 @@
-
-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

@@ -1,28 +0,0 @@
-
-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

@@ -1,16 +0,0 @@
-
-.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

@@ -1,31 +0,0 @@
-
-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

@@ -1,28 +0,0 @@
-
-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

@@ -1,16 +0,0 @@
-
-.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

@@ -1,31 +0,0 @@
-
-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

@@ -1,28 +0,0 @@
-
-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

@@ -1,16 +0,0 @@
-
-.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

@@ -1,31 +0,0 @@
-
-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

@@ -1,28 +0,0 @@
-
-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

@@ -1,16 +0,0 @@
-
-.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

@@ -1,31 +0,0 @@
-
-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

@@ -1,28 +0,0 @@
-
-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

@@ -1,16 +0,0 @@
-
-.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

@@ -1,71 +0,0 @@
-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

@@ -1,28 +0,0 @@
-
-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

@@ -1,16 +0,0 @@
-
-.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

@@ -1,31 +0,0 @@
-
-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

@@ -1,28 +0,0 @@
-
-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

@@ -1,25 +0,0 @@
-// 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

@@ -1,28 +0,0 @@
-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;