this.gui 1.0.14 → 1.0.16

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/Grid/Grid.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import './Grid.css'; // Import the component-specific styles
 
-const Grid = ({ children, columns = 3, gap = '10px' }) => {
+export const Grid = ({ children, columns = 3, gap = '10px' }) => {
   const gridStyle = {
     display: 'grid',
     gridTemplateColumns: `repeat(${columns}, 1fr)`,
@@ -10,6 +10,4 @@ const Grid = ({ children, columns = 3, gap = '10px' }) => {
   };
 
   return <div style={gridStyle} className="grid-container">{children}</div>;
-};
-
-export default Grid;
+};

package/src/stories/Layouts/Grid/Grid.stories.jsx

@@ -1,26 +1,28 @@
-// src/stories/Layout/Grid/Grid.stories.jsx
-import React from 'react';
-import Grid from './Grid';
 
+import { Grid } from './Grid';
+
+// Storybook configuration for Grid component
 export default {
-  title: 'Layout/Grid',
+  title: 'Layouts/Grid/Grid',
   component: Grid,
+  parameters: {
+    layout: 'fullscreen',
+  },
   argTypes: {
-    columns: { control: 'number', defaultValue: 3 },
-    gap: { control: 'text', defaultValue: '10px' },
+    children: { control: 'text' },
   },
 };
 
-const Template = (args) => (
-  <Grid {...args}>
-    <div style={{ backgroundColor: '#FFDDC1', padding: '20px' }}>Item 1</div>
-    <div style={{ backgroundColor: '#FEC8D8', padding: '20px' }}>Item 2</div>
-    <div style={{ backgroundColor: '#D4A5A5', padding: '20px' }}>Item 3</div>
-  </Grid>
-);
+export const Primary = {
+  args: {
+    primary: true,
+    children: 'This is a primary Grid layout.',
+  },
+};
 
-export const Default = Template.bind({});
-Default.args = {
-  columns: 3,
-  gap: '10px',
-};
+export const Secondary = {
+  args: {
+    primary: false,
+    children: 'This is a secondary Grid 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/Section/Section.css

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

package/src/stories/Layouts/Section/Section.jsx

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

package/src/stories/Layouts/Section/Section.stories.jsx

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