this.gui 1.0.15 → 1.0.17

package/src/stories/Atoms/Divider/Divider.stories.jsx

@@ -1,41 +1,105 @@
-
+// src/stories/Atoms/Divider/Divider.stories.jsx
+import React from 'react';
 import { Divider } from './Divider';
+import './Divider.css';
 
-// Storybook configuration for Divider component
 export default {
-  title: 'Atoms/Visual/Divider',
+  title: 'Atoms/Layout/Divider',
   component: Divider,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    children: { control: 'text' },
+    thickness: {
+      control: {
+        type: 'select',
+        options: ['thin', 'normal', 'bold'],
+      },
+      description: 'Thickness of the divider.',
+    },
+    width: {
+      control: {
+        type: 'select',
+        options: ['small', 'medium', 'large'],
+      },
+      description: 'Width of the divider.',
+    },
+    align: {
+      control: {
+        type: 'select',
+        options: ['left', 'center', 'right'],
+      },
+      description: 'Alignment of the divider.',
+    },
+    color: {
+      control: {
+        type: 'select',
+        options: [
+          'info',
+          'warning',
+          'alert',
+          'success',
+          'neutral',
+          'dark',
+          'classy-color-1',
+          'classy-color-2',
+          'classy-color-3',
+          'classy-color-4',
+          'classy-color-5',
+          'small-switch-color-1',
+          'small-switch-color-2',
+          'natural-color-1',
+          'natural-color-2',
+          'natural-color-3',
+          'grey-friend-1',
+          'grey-friend-2',
+          'shade-1',
+          'shade-2',
+          'shade-3',
+          'shade-4',
+        ],
+      },
+      description: 'Color of the divider.',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes.',
+    },
+    style: {
+      control: 'object',
+      description: 'Inline styles.',
+    },
   },
 };
 
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary Divider',
-  },
-};
+/**
+ * Thin Small Left Aligned Divider
+ */
+export const ThinSmallLeft = () => (
+  <Divider thickness="thin" width="small" align="left" color="info" />
+);
 
-export const Secondary = {
-  args: {
-    children: 'This is a secondary Divider',
-  },
-};
+/**
+ * Normal Medium Center Aligned Divider
+ */
+export const NormalMediumCenter = () => (
+  <Divider thickness="normal" width="medium" align="center" color="warning" />
+);
 
-export const Large = {
-  args: {
-    size: 'large',
-    children: 'This is a large Divider',
-  },
-};
+/**
+ * Bold Large Right Aligned Divider
+ */
+export const BoldLargeRight = () => (
+  <Divider thickness="bold" width="large" align="right" color="success" />
+);
 
-export const Small = {
-  args: {
-    size: 'small',
-    children: 'This is a small Divider',
-  },
+/**
+ * Interactive Divider
+ */
+const Template = (args) => <Divider {...args} />;
+
+export const InteractiveDivider = Template.bind({});
+InteractiveDivider.args = {
+  thickness: 'normal',
+  width: 'medium',
+  align: 'center',
+  color: 'neutral',
 };
+InteractiveDivider.storyName = 'Interactive Divider';

package/src/stories/Atoms/Grid/Grid.css

@@ -0,0 +1,160 @@
+/*this.GUI/src/stories/Atoms/Grid/Grid.css*/
+/* Base Grid Styles */
+.grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Auto-fit responsive columns */
+  gap: 16px; /* Default gap between grid items */
+  padding: 16px;
+}
+
+/* Grid item styling */
+.grid > * {
+  background-color: var(--background-color);
+  padding: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Border Styles for Grid Items when the border prop is true */
+.grid--border > * {
+  border: 1px solid var(--border-color); /* Default border color */
+}
+
+/* Rounded corners */
+.grid--rounded > * {
+  border-radius: var(--border-radius, 8px); /* Apply rounded corners */
+}
+
+/* Shadow Depth Variants */
+.grid--shadow-small > * {
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2); /* Small shadow */
+}
+
+.grid--shadow-medium > * {
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Medium shadow */
+}
+
+.grid--shadow-large > * {
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.4); /* Large shadow */
+}
+
+/* Responsive behavior: grid adjusts based on screen size */
+@media (max-width: 768px) {
+  .grid {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 2 columns on tablet */
+  }
+}
+
+@media (max-width: 480px) {
+  .grid {
+    grid-template-columns: 1fr; /* 1 column on mobile */
+  }
+}
+
+/* Hover effect for visual feedback on grid items */
+.grid > *:hover {
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+}
+/* Border Color Variants (Using Theme Colors) */
+.grid--primary > * {
+  border-color: var(--primary-color);
+}
+
+.grid--secondary > * {
+  border-color: var(--secondary-color);
+}
+
+.grid--info > * {
+  border-color: var(--info-color);
+}
+
+.grid--warning > * {
+  border-color: var(--warning-color);
+}
+
+.grid--alert > * {
+  border-color: var(--alert-color);
+}
+
+.grid--success > * {
+  border-color: var(--success-color);
+}
+
+.grid--neutral > * {
+  border-color: var(--neutral-color);
+}
+
+.grid--dark > * {
+  border-color: var(--dark-color);
+}
+
+/* Classy Palette Variants */
+.grid--classy-color-1 > * {
+  border-color: var(--classy-color-1);
+}
+
+.grid--classy-color-2 > * {
+  border-color: var(--classy-color-2);
+}
+
+.grid--classy-color-3 > * {
+  border-color: var(--classy-color-3);
+}
+
+.grid--classy-color-4 > * {
+  border-color: var(--classy-color-4);
+}
+
+.grid--classy-color-5 > * {
+  border-color: var(--classy-color-5);
+}
+
+/* Small Switch Palette */
+.grid--small-switch-color-1 > * {
+  border-color: var(--small-switch-color-1);
+}
+
+.grid--small-switch-color-2 > * {
+  border-color: var(--small-switch-color-2);
+}
+
+/* Natural Palette */
+.grid--natural-color-1 > * {
+  border-color: var(--natural-color-1);
+}
+
+.grid--natural-color-2 > * {
+  border-color: var(--natural-color-2);
+}
+
+.grid--natural-color-3 > * {
+  border-color: var(--natural-color-3);
+}
+
+/* Grey Friends */
+.grid--grey-friend-1 > * {
+  border-color: var(--grey-friend-1);
+}
+
+.grid--grey-friend-2 > * {
+  border-color: var(--grey-friend-2);
+}
+
+/* Shades */
+.grid--shade-1 > * {
+  border-color: var(--shade-1);
+}
+
+.grid--shade-2 > * {
+  border-color: var(--shade-2);
+}
+
+.grid--shade-3 > * {
+  border-color: var(--shade-3);
+}
+
+.grid--shade-4 > * {
+  border-color: var(--shade-4);
+}

package/src/stories/Atoms/Grid/Grid.jsx

@@ -0,0 +1,43 @@
+//this.GUI/src/stories/Atoms/Grid/Grid.jsx
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Grid.css'; // Import the revised grid styles
+
+export const Grid = ({ gap, border, color, rounded, shadow, children }) => {
+  const gridClasses = [
+    'grid', // Base grid class
+    border ? `grid--border grid--${color}` : '', // Conditionally apply border and color
+    rounded ? 'grid--rounded' : '', // Conditionally apply rounded corners
+    shadow ? `grid--shadow-${shadow}` : '', // Conditionally apply shadow depth
+  ].join(' ').trim();
+
+  return (
+    <div className={gridClasses} style={{ gap }}>
+      {children} {/* Grid items go here */}
+    </div>
+  );
+};
+
+Grid.propTypes = {
+  gap: PropTypes.string,
+  border: PropTypes.bool,
+  color: PropTypes.oneOf([
+    'primary', 'secondary', 'info', 'warning', 'alert', 'success', 'neutral', 'dark',
+    'classy-color-1', 'classy-color-2', 'classy-color-3', 'classy-color-4', 'classy-color-5',
+    'small-switch-color-1', 'small-switch-color-2',
+    'natural-color-1', 'natural-color-2', 'natural-color-3',
+    'grey-friend-1', 'grey-friend-2',
+    'shade-1', 'shade-2', 'shade-3', 'shade-4'
+  ]),
+  rounded: PropTypes.bool, // Boolean for rounded corners
+  shadow: PropTypes.oneOf(['none', 'small', 'medium', 'large']), // Depth of shadow
+  children: PropTypes.node.isRequired,
+};
+
+Grid.defaultProps = {
+  gap: '16px', // Default gap between items
+  border: false, // Default to no border
+  color: 'primary', // Default border color
+  rounded: false, // Default to no rounded corners
+  shadow: 'none', // Default to no shadow
+};

package/src/stories/Atoms/Grid/Grid.stories.jsx

@@ -0,0 +1,84 @@
+//this.GUI/src/stories/Atoms/Grid/Grid.stories.jsx
+import React from 'react';
+import { Grid } from './Grid';
+
+export default {
+  title: 'Atoms/Layout/Grid',
+  component: Grid,
+  argTypes: {
+    gap: { control: 'text', defaultValue: '16px' },
+    border: { control: 'boolean', defaultValue: false },
+    rounded: { control: 'boolean', defaultValue: false },
+    shadow: {
+      control: 'select',
+      options: ['none', 'small', 'medium', 'large'],
+      defaultValue: 'none',
+    },
+    color: {
+      control: 'select',
+      options: [
+        'primary', 'secondary', 'info', 'warning', 'alert', 'success', 'neutral', 'dark',
+        'classy-color-1', 'classy-color-2', 'classy-color-3', 'classy-color-4', 'classy-color-5',
+        'small-switch-color-1', 'small-switch-color-2',
+        'natural-color-1', 'natural-color-2', 'natural-color-3',
+        'grey-friend-1', 'grey-friend-2',
+        'shade-1', 'shade-2', 'shade-3', 'shade-4'
+      ],
+      defaultValue: 'primary',
+    },
+  },
+};
+
+export const ResponsiveGrid = (args) => (
+  <Grid {...args}>
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+    <div>Item 4</div>
+    <div>Item 5</div>
+    <div>Item 6</div>
+    <div>Item 7</div>
+    <div>Item 8</div>
+    <div>Item 9</div>
+  </Grid>
+);
+
+export const GridWithRoundedAndShadow = (args) => (
+  <Grid {...args} border={true} rounded={true} shadow="medium" color="primary">
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+    <div>Item 4</div>
+    <div>Item 5</div>
+    <div>Item 6</div>
+    <div>Item 7</div>
+    <div>Item 8</div>
+    <div>Item 9</div>
+  </Grid>
+);
+
+export const ColorfulGrid = (args) => (
+  <Grid {...args} color="alert">
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+    <div>Item 4</div>
+    <div>Item 5</div>
+    <div>Item 6</div>
+    <div>Item 7</div>
+    <div>Item 8</div>
+    <div>Item 9</div>
+    <div>Item 10</div>
+    <div>Item 11</div>
+    <div>Item 12</div>
+    <div>Item 13</div>
+    <div>Item 14</div>
+    <div>Item 15</div>
+    <div>Item 16</div>
+    <div>Item 17</div>
+    <div>Item 18</div>
+    <div>Item 19</div>
+    <div>Item 20</div>
+    <div>Item 21</div>
+  </Grid>
+);

package/src/stories/Atoms/Heading/Heading.css

@@ -1,29 +1,112 @@
+/* src/stories/Atoms/Heading/Heading.css */
 
 .heading {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
+  font-family: var(--font-family);
+  color: var(--text-color);
+  margin-bottom: var(--spacing-md);
+  transition: color var(--transition-speed) ease;
 }
 
-.heading--primary {
-  background-color: #e3f2fd;
-  border-color: #1e88e5;
+.heading--align-left {
+  text-align: left;
 }
 
-.heading--secondary {
-  background-color: #fff;
-  border-color: #ccc;
+.heading--align-center {
+  text-align: center;
 }
 
-.heading--small {
-  padding: 8px;
+.heading--align-right {
+  text-align: right;
 }
 
-.heading--medium {
-  padding: 16px;
+.heading--bold {
+  font-weight: var(--font-weight-heavy);
 }
 
-.heading--large {
-  padding: 32px;
+.heading--info {
+  color: var(--info-color);
+}
+
+.heading--warning {
+  color: var(--warning-color);
+}
+
+.heading--alert {
+  color: var(--alert-color);
+}
+
+.heading--success {
+  color: var(--success-color);
+}
+
+.heading--neutral {
+  color: var(--neutral-color);
+}
+
+.heading--dark {
+  color: var(--dark-color);
+}
+
+.heading--classy-color-1 {
+  color: var(--classy-color-1);
+}
+
+.heading--classy-color-2 {
+  color: var(--classy-color-2);
+}
+
+.heading--classy-color-3 {
+  color: var(--classy-color-3);
+}
+
+.heading--classy-color-4 {
+  color: var(--classy-color-4);
+}
+
+.heading--classy-color-5 {
+  color: var(--classy-color-5);
+}
+
+.heading--small-switch-color-1 {
+  color: var(--small-switch-color-1);
+}
+
+.heading--small-switch-color-2 {
+  color: var(--small-switch-color-2);
+}
+
+.heading--natural-color-1 {
+  color: var(--natural-color-1);
+}
+
+.heading--natural-color-2 {
+  color: var(--natural-color-2);
+}
+
+.heading--natural-color-3 {
+  color: var(--natural-color-3);
+}
+
+.heading--grey-friend-1 {
+  color: var(--grey-friend-1);
+}
+
+.heading--grey-friend-2 {
+  color: var(--grey-friend-2);
+}
+
+.heading--shade-1 {
+  color: var(--shade-1);
+}
+
+.heading--shade-2 {
+  color: var(--shade-2);
+}
+
+.heading--shade-3 {
+  color: var(--shade-3);
+}
+
+.heading--shade-4 {
+  color: var(--shade-4);
 }

package/src/stories/Atoms/Heading/Heading.jsx

@@ -1,41 +1,69 @@
-
+// src/stories/Atoms/Heading/Heading.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import './Heading.css';
 
-/**
- * Heading component for user interaction
- */
-export const Heading = ({ primary, size, children, ...props }) => {
-  const mode = primary ? 'heading--primary' : 'heading--secondary';
+export const Heading = ({
+  level = 1, // 1 to 5
+  align = 'left', // 'left', 'center', 'right'
+  bold = false,
+  color = 'neutral',
+  children,
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const Tag = `h${level}`;
+  const headingClasses = classNames('heading', className, {
+    [`heading--align-${align}`]: align,
+    'heading--bold': bold,
+    [`heading--${color}`]: color,
+  });
+
   return (
-    <div
-      className={['heading', `heading--${size}`, mode].join(' ')}
-      {...props}
-    >
+    <Tag className={headingClasses} style={style} {...props}>
       {children}
-    </div>
+    </Tag>
   );
 };
 
 Heading.propTypes = {
-  /**
-   * Is this the primary style for the component?
-   */
-  primary: PropTypes.bool,
-  /**
-   * Size of the component
-   */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Content to be rendered inside the component
-   */
+  /** Heading level (1 to 5) */
+  level: PropTypes.oneOf([1, 2, 3, 4, 5]),
+  /** Text alignment */
+  align: PropTypes.oneOf(['left', 'center', 'right']),
+  /** Bold text */
+  bold: PropTypes.bool,
+  /** Color of the heading text */
+  color: PropTypes.oneOf([
+    'info',
+    'warning',
+    'alert',
+    'success',
+    'neutral',
+    'dark',
+    'classy-color-1',
+    'classy-color-2',
+    'classy-color-3',
+    'classy-color-4',
+    'classy-color-5',
+    'small-switch-color-1',
+    'small-switch-color-2',
+    'natural-color-1',
+    'natural-color-2',
+    'natural-color-3',
+    'grey-friend-1',
+    'grey-friend-2',
+    'shade-1',
+    'shade-2',
+    'shade-3',
+    'shade-4',
+  ]),
+  /** Content of the heading */
   children: PropTypes.node.isRequired,
+  /** Additional CSS classes */
+  className: PropTypes.string,
+  /** Inline styles */
+  style: PropTypes.object,
 };
-
-Heading.defaultProps = {
-  primary: false,
-  size: 'medium',
-};
-
-export default Heading;