this.gui 1.0.15 → 1.0.17

package/src/stories/Atoms/Container/Container.css

@@ -1,29 +1,89 @@
+/* src/stories/Atoms/Container/Container.css */
 
+/* Base Container Styles */
 .container {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
+  padding: var(--spacing-md);
+  background-color: transparent;
+  transition: all var(--transition-speed) ease;
+  box-sizing: border-box;
+  position: var(--position, static);
 }
 
-.container--primary {
-  background-color: #e3f2fd;
-  border-color: #1e88e5;
-}
-
-.container--secondary {
-  background-color: #fff;
-  border-color: #ccc;
+/* Border Variant */
+.container--border {
+  border: 1px solid var(--border-color);
 }
 
+/* Size Variants */
 .container--small {
-  padding: 8px;
+  width: 25%;
 }
 
 .container--medium {
-  padding: 16px;
+  width: 50%;
 }
 
 .container--large {
-  padding: 32px;
+  width: 75%;
+}
+
+/* Fluid Variant */
+.container--fluid {
+  width: 100%;
+}
+
+/* Rounded Corners */
+.container--rounded {
+  border-radius: var(--border-radius);
+}
+
+/* Alignment */
+.container--align-left {
+  margin-left: 0;
+  margin-right: auto;
+}
+
+.container--align-center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container--align-right {
+  margin-left: auto;
+  margin-right: 0;
+}
+
+/* Positioning */
+.container--position-static {
+  position: static;
+}
+
+.container--position-relative {
+  position: relative;
+}
+
+.container--position-absolute {
+  position: absolute;
+}
+
+.container--position-fixed {
+  position: fixed;
+}
+
+.container--position-sticky {
+  position: sticky;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+  .container--small,
+  .container--medium,
+  .container--large {
+    width: 100%;
+    padding: var(--spacing-sm);
+  }
+  
+  .container--fluid {
+    padding: var(--spacing-xs);
+  }
 }

package/src/stories/Atoms/Container/Container.jsx

@@ -1,41 +1,54 @@
-
+// src/stories/Atoms/Container/Container.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import './Container.css';
 
-/**
- * Container component for user interaction
- */
-export const Container = ({ primary, size, children, ...props }) => {
-  const mode = primary ? 'container--primary' : 'container--secondary';
+export const Container = ({
+  children,
+  border = false,
+  size = 'medium',
+  rounded = false,
+  fluid = false,
+  align = 'left',
+  position = 'static',
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const containerClasses = classNames('container', className, {
+    'container--border': border,
+    [`container--${size}`]: size,
+    'container--rounded': rounded,
+    'container--fluid': fluid,
+    [`container--align-${align}`]: align,
+    [`container--position-${position}`]: position,
+  });
+
   return (
-    <div
-      className={['container', `container--${size}`, mode].join(' ')}
-      {...props}
-    >
+    <div className={containerClasses} style={style} {...props}>
       {children}
     </div>
   );
 };
 
 Container.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
-   */
+  /** Content to be wrapped inside the container */
   children: PropTypes.node.isRequired,
+  /** Add a border to the container */
+  border: PropTypes.bool,
+  /** Size of the container */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /** Rounded corners */
+  rounded: PropTypes.bool,
+  /** Fluid container (full width) */
+  fluid: PropTypes.bool,
+  /** Text alignment within the container */
+  align: PropTypes.oneOf(['left', 'center', 'right']),
+  /** CSS position property */
+  position: PropTypes.oneOf(['static', 'relative', 'absolute', 'fixed', 'sticky']),
+  /** Additional CSS classes */
+  className: PropTypes.string,
+  /** Inline styles */
+  style: PropTypes.object,
 };
-
-Container.defaultProps = {
-  primary: false,
-  size: 'medium',
-};
-
-export default Container;

package/src/stories/Atoms/Container/Container.stories.jsx

@@ -1,41 +1,104 @@
-
+// src/stories/Atoms/Container/Container.stories.jsx
+import React from 'react';
 import { Container } from './Container';
+import './Container.css';
 
-// Storybook configuration for Container component
 export default {
-  title: 'Atoms/Interactive/Container',
+  title: 'Atoms/Layout/Container',
   component: Container,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    children: { control: 'text' },
+    border: {
+      control: 'boolean',
+      description: 'Add a border to the container.',
+    },
+    size: {
+      control: {
+        type: 'select',
+        options: ['small', 'medium', 'large'],
+      },
+      description: 'Size of the container.',
+    },
+    rounded: {
+      control: 'boolean',
+      description: 'Apply rounded corners to the container.',
+    },
+    fluid: {
+      control: 'boolean',
+      description: 'Make the container full-width.',
+    },
+    align: {
+      control: {
+        type: 'select',
+        options: ['left', 'center', 'right'],
+      },
+      description: 'Alignment of the container.',
+    },
+    position: {
+      control: {
+        type: 'select',
+        options: ['static', 'relative', 'absolute', 'fixed', 'sticky'],
+      },
+      description: 'CSS position property of the container.',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes.',
+    },
+    style: {
+      control: 'object',
+      description: 'Inline styles.',
+    },
   },
 };
 
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary Container',
-  },
-};
+/**
+ * Small Container with Border and Left Alignment
+ */
+export const SmallWithBorderLeft = () => (
+  <Container border size="small" align="left">
+    <p>This is a small container with a border and left alignment.</p>
+  </Container>
+);
 
-export const Secondary = {
-  args: {
-    children: 'This is a secondary Container',
-  },
-};
+/**
+ * Medium Rounded Container with Center Alignment
+ */
+export const MediumRoundedCenter = () => (
+  <Container rounded size="medium" align="center">
+    <p>This is a medium-sized container with rounded corners and center alignment.</p>
+  </Container>
+);
 
-export const Large = {
-  args: {
-    size: 'large',
-    children: 'This is a large Container',
-  },
-};
+/**
+ * Large Fluid Container with Right Alignment
+ */
+export const LargeFluidRight = () => (
+  <Container fluid size="large" align="right">
+    <p>This is a large, fluid container without a border and right alignment.</p>
+  </Container>
+);
 
-export const Small = {
-  args: {
-    size: 'small',
-    children: 'This is a small Container',
-  },
+/**
+ * Container with Absolute Positioning
+ */
+export const AbsolutePositioned = () => (
+  <Container position="absolute" style={{ top: '20px', left: '20px' }}>
+    <p>This container is absolutely positioned.</p>
+  </Container>
+);
+
+/**
+ * Interactive Playground
+ */
+const Template = (args) => <Container {...args}>This is an interactive container.</Container>;
+
+export const InteractiveContainer = Template.bind({});
+InteractiveContainer.args = {
+  border: false,
+  size: 'medium',
+  rounded: false,
+  fluid: false,
+  align: 'left',
+  position: 'static',
 };
+InteractiveContainer.storyName = 'Interactive Container';

package/src/stories/Atoms/Divider/Divider.css

@@ -1,29 +1,147 @@
+/* src/stories/Atoms/Divider/Divider.css */
 
 .divider {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
+  border: none;
+  height: 1px;
+  margin: var(--spacing-md) 0;
+  background-color: var(--neutral-color);
+  transition: background-color var(--transition-speed) ease, height var(--transition-speed) ease;
 }
 
-.divider--primary {
-  background-color: #e3f2fd;
-  border-color: #1e88e5;
+/* Thickness Variants */
+.divider--thin {
+  height: 1px;
 }
 
-.divider--secondary {
-  background-color: #fff;
-  border-color: #ccc;
+.divider--normal {
+  height: 2px;
 }
 
+.divider--bold {
+  height: 3px;
+}
+
+/* Width Variants */
 .divider--small {
-  padding: 8px;
+  width: 25%;
 }
 
 .divider--medium {
-  padding: 16px;
+  width: 50%;
 }
 
 .divider--large {
-  padding: 32px;
+  width: 75%;
+}
+
+/* Alignment Variants */
+.divider--align-left {
+  margin-left: 0;
+}
+
+.divider--align-center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.divider--align-right {
+  margin-right: 0;
+}
+
+/* Color Classes */
+.info {
+  background-color: var(--info-color);
+}
+
+.warning {
+  background-color: var(--warning-color);
+}
+
+.alert {
+  background-color: var(--alert-color);
+}
+
+.success {
+  background-color: var(--success-color);
+}
+
+.neutral {
+  background-color: var(--neutral-color);
+}
+
+.dark {
+  background-color: var(--dark-color);
+}
+
+.classy-color-1 {
+  background-color: var(--classy-color-1);
+}
+
+.classy-color-2 {
+  background-color: var(--classy-color-2);
+}
+
+.classy-color-3 {
+  background-color: var(--classy-color-3);
+}
+
+.classy-color-4 {
+  background-color: var(--classy-color-4);
+}
+
+.classy-color-5 {
+  background-color: var(--classy-color-5);
+}
+
+.small-switch-color-1 {
+  background-color: var(--small-switch-color-1);
+}
+
+.small-switch-color-2 {
+  background-color: var(--small-switch-color-2);
+}
+
+.natural-color-1 {
+  background-color: var(--natural-color-1);
+}
+
+.natural-color-2 {
+  background-color: var(--natural-color-2);
+}
+
+.natural-color-3 {
+  background-color: var(--natural-color-3);
+}
+
+.grey-friend-1 {
+  background-color: var(--grey-friend-1);
+}
+
+.grey-friend-2 {
+  background-color: var(--grey-friend-2);
+}
+
+.shade-1 {
+  background-color: var(--shade-1);
+}
+
+.shade-2 {
+  background-color: var(--shade-2);
+}
+
+.shade-3 {
+  background-color: var(--shade-3);
+}
+
+.shade-4 {
+  background-color: var(--shade-4);
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+  .divider--small,
+  .divider--medium,
+  .divider--large {
+    width: 100%;
+  }
 }

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

@@ -1,41 +1,62 @@
-
+// src/stories/Atoms/Divider/Divider.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import './Divider.css';
 
-/**
- * Divider component for user interaction
- */
-export const Divider = ({ primary, size, children, ...props }) => {
-  const mode = primary ? 'divider--primary' : 'divider--secondary';
-  return (
-    <div
-      className={['divider', `divider--${size}`, mode].join(' ')}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-};
+export const Divider = ({
+  thickness = 'normal',
+  width = 'medium',
+  align = 'center',
+  color = 'neutral',
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const dividerClasses = classNames('divider', className, {
+    [`divider--${thickness}`]: thickness,
+    [`divider--${width}`]: width,
+    [`divider--align-${align}`]: align,
+    [color]: color,
+  });
 
-Divider.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
-   */
-  children: PropTypes.node.isRequired,
+  return <hr className={dividerClasses} style={style} {...props} />;
 };
 
-Divider.defaultProps = {
-  primary: false,
-  size: 'medium',
+Divider.propTypes = {
+  /** Thickness of the divider */
+  thickness: PropTypes.oneOf(['thin', 'normal', 'bold']),
+  /** Width of the divider */
+  width: PropTypes.oneOf(['small', 'medium', 'large']),
+  /** Alignment of the divider */
+  align: PropTypes.oneOf(['left', 'center', 'right']),
+  /** Color of the divider */
+  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',
+  ]),
+  /** Additional CSS classes */
+  className: PropTypes.string,
+  /** Inline styles */
+  style: PropTypes.object,
 };
-
-export default Divider;