this.gui 1.0.15 → 1.0.17

package/src/stories/Atoms/Loader/Loader.css

@@ -1,29 +1,106 @@
+/* src/stories/Atoms/Loader/Loader.css */
 
 .loader {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.loader--primary {
-  background-color: #e3f2fd;
-  border-color: #1e88e5;
+.loader--spinner .loader__spinner {
+  border: 4px solid var(--loader-background-color, #f3f3f3);
+  border-top: 4px solid var(--loader-color, #1F877D);
+  border-radius: 50%;
+  width: var(--loader-size, 40px);
+  height: var(--loader-size, 40px);
+  animation: spin 1s linear infinite;
 }
 
-.loader--secondary {
-  background-color: #fff;
-  border-color: #ccc;
+.loader--dots .loader__dots {
+  display: flex;
+  gap: 8px;
 }
 
-.loader--small {
-  padding: 8px;
+.loader--dots .loader__dot {
+  width: 12px;
+  height: 12px;
+  background-color: var(--loader-color, #1F877D);
+  border-radius: 50%;
+  animation: bounce 1.4s infinite ease-in-out both;
 }
 
-.loader--medium {
-  padding: 16px;
+.loader--dots .loader__dot:nth-child(1) {
+  animation-delay: -0.32s;
 }
 
-.loader--large {
-  padding: 32px;
+.loader--dots .loader__dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+.loader--bars .loader__bars {
+  display: flex;
+  gap: 4px;
+}
+
+.loader--bars .loader__bar {
+  width: 4px;
+  height: 20px;
+  background-color: var(--loader-color, #1F877D);
+  animation: stretch 1.2s infinite ease-in-out;
+}
+
+.loader--bars .loader__bar:nth-child(1) {
+  animation-delay: -0.24s;
+}
+
+.loader--bars .loader__bar:nth-child(2) {
+  animation-delay: -0.12s;
+}
+
+.loader--size-sm .loader__spinner {
+  width: 20px;
+  height: 20px;
+  border-width: 2px;
+}
+
+.loader--size-md .loader__spinner {
+  width: 40px;
+  height: 40px;
+  border-width: 4px;
+}
+
+.loader--size-lg .loader__spinner {
+  width: 60px;
+  height: 60px;
+  border-width: 6px;
+}
+
+.loader--custom {
+  --loader-color: var(--loader-color, #1F877D);
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes bounce {
+  0%, 80%, 100% { transform: scale(0); }
+  40% { transform: scale(1); }
+}
+
+@keyframes stretch {
+  0%, 40%, 100% { transform: scaleY(0.4); }
+  20% { transform: scaleY(1); }
+}
+
+/* Color Variants */
+.loader--primary .loader__spinner,
+.loader--primary .loader__dot,
+.loader--primary .loader__bar {
+  --loader-color: #1F877D;
+}
+
+.loader--secondary .loader__spinner,
+.loader--secondary .loader__dot,
+.loader--secondary .loader__bar {
+  --loader-color: #39a182;
 }

package/src/stories/Atoms/Loader/Loader.jsx

@@ -1,41 +1,58 @@
-
+// src/stories/Atoms/Loader/Loader.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import './Loader.css';
 
-/**
- * Loader component for user interaction
- */
-export const Loader = ({ primary, size, children, ...props }) => {
-  const mode = primary ? 'loader--primary' : 'loader--secondary';
+export const Loader = ({
+  variant = 'spinner', // 'spinner', 'dots', 'bars'
+  color = 'primary', // 'primary', 'secondary', 'custom'
+  size = 'md', // 'sm', 'md', 'lg'
+  customColor,
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const loaderClasses = classNames('loader', className, {
+    [`loader--${variant}`]: variant,
+    [`loader--${color}`]: color && color !== 'custom',
+    [`loader--size-${size}`]: size,
+  });
+
+  const loaderStyle = color === 'custom' && customColor ? { ...style, '--loader-color': customColor } : style;
+
   return (
-    <div
-      className={['loader', `loader--${size}`, mode].join(' ')}
-      {...props}
-    >
-      {children}
+    <div className={loaderClasses} style={loaderStyle} {...props}>
+      {variant === 'spinner' && <div className="loader__spinner"></div>}
+      {variant === 'dots' && (
+        <div className="loader__dots">
+          <div className="loader__dot"></div>
+          <div className="loader__dot"></div>
+          <div className="loader__dot"></div>
+        </div>
+      )}
+      {variant === 'bars' && (
+        <div className="loader__bars">
+          <div className="loader__bar"></div>
+          <div className="loader__bar"></div>
+          <div className="loader__bar"></div>
+        </div>
+      )}
     </div>
   );
 };
 
 Loader.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,
+  /** Variant of the loader */
+  variant: PropTypes.oneOf(['spinner', 'dots', 'bars']),
+  /** Color of the loader */
+  color: PropTypes.oneOf(['primary', 'secondary', 'custom']),
+  /** Custom color when color is set to 'custom' */
+  customColor: PropTypes.string,
+  /** Size of the loader */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  /** Additional CSS classes */
+  className: PropTypes.string,
+  /** Inline styles */
+  style: PropTypes.object,
 };
-
-Loader.defaultProps = {
-  primary: false,
-  size: 'medium',
-};
-
-export default Loader;

package/src/stories/Atoms/Loader/Loader.stories.jsx

@@ -1,41 +1,99 @@
-
+// src/stories/Atoms/Loader/Loader.stories.jsx
+import React from 'react';
 import { Loader } from './Loader';
+import './Loader.css';
 
-// Storybook configuration for Loader component
 export default {
   title: 'Atoms/Feedback/Loader',
   component: Loader,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    children: { control: 'text' },
+    variant: {
+      control: {
+        type: 'select',
+        options: ['spinner', 'dots', 'bars'],
+      },
+      description: 'Variant of the loader.',
+    },
+    color: {
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'custom'],
+      },
+      description: 'Color of the loader.',
+    },
+    customColor: {
+      control: 'color',
+      description: 'Custom color when color is set to "custom".',
+    },
+    size: {
+      control: {
+        type: 'select',
+        options: ['sm', 'md', 'lg'],
+      },
+      description: 'Size of the loader.',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes.',
+    },
+    style: {
+      control: 'object',
+      description: 'Inline styles.',
+    },
   },
 };
 
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary Loader',
-  },
-};
+/**
+ * Spinner - Primary - Medium
+ */
+export const SpinnerPrimaryMedium = () => (
+  <Loader variant="spinner" color="primary" size="md" />
+);
 
-export const Secondary = {
-  args: {
-    children: 'This is a secondary Loader',
-  },
-};
+/**
+ * Spinner - Secondary - Large
+ */
+export const SpinnerSecondaryLarge = () => (
+  <Loader variant="spinner" color="secondary" size="lg" />
+);
 
-export const Large = {
-  args: {
-    size: 'large',
-    children: 'This is a large Loader',
-  },
-};
+/**
+ * Dots - Primary - Small
+ */
+export const DotsPrimarySmall = () => (
+  <Loader variant="dots" color="primary" size="sm" />
+);
 
-export const Small = {
-  args: {
-    size: 'small',
-    children: 'This is a small Loader',
-  },
+/**
+ * Dots - Secondary - Medium
+ */
+export const DotsSecondaryMedium = () => (
+  <Loader variant="dots" color="secondary" size="md" />
+);
+
+/**
+ * Bars - Primary - Medium
+ */
+export const BarsPrimaryMedium = () => (
+  <Loader variant="bars" color="primary" size="md" />
+);
+
+/**
+ * Bars - Custom Color - Large
+ */
+export const BarsCustomLarge = () => (
+  <Loader variant="bars" color="custom" customColor="#FF5733" size="lg" />
+);
+
+/**
+ * Interactive Loader
+ */
+const Template = (args) => <Loader {...args} />;
+
+export const InteractiveLoader = Template.bind({});
+InteractiveLoader.args = {
+  variant: 'spinner',
+  color: 'primary',
+  size: 'md',
+  customColor: '#FF5733',
 };

package/src/stories/Atoms/Logo/Logo.css

@@ -0,0 +1,94 @@
+/* src/stories/Atoms/Logo/Logo.css */
+
+.logo {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .logo__image {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+  
+  /* Size Variants */
+  .logo--size-xs {
+    width: 30px;
+    height: 30px;
+  }
+  
+  .logo--size-sm {
+    width: 50px;
+    height: 50px;
+  }
+  
+  .logo--size-md {
+    width: 100px;
+    height: 100px;
+  }
+  
+  .logo--size-lg {
+    width: 150px;
+    height: 150px;
+  }
+  
+  .logo--size-xl {
+    width: 200px;
+    height: 200px;
+  }
+  
+  /* Shape Variants */
+  .logo--shape-normal {
+    border-radius: 0;
+  }
+  
+  .logo--shape-rounded {
+    border-radius: 50%;
+  }
+  
+  .logo--shape-squared {
+    border-radius: 8px;
+  }
+  
+  /* Background Variants */
+  .logo--background-none {
+    background-color: transparent;
+  }
+  
+  .logo--background-palette {
+    background-color: var(--palette-background-color, #f0f0f0);
+  }
+  
+  .logo--background-custom {
+    background-color: var(--logo-background-color, transparent);
+  }
+  
+  /* Responsive */
+  @media (max-width: 768px) {
+    .logo--size-xs {
+      width: 20px;
+      height: 20px;
+    }
+  
+    .logo--size-sm {
+      width: 40px;
+      height: 40px;
+    }
+  
+    .logo--size-md {
+      width: 80px;
+      height: 80px;
+    }
+  
+    .logo--size-lg {
+      width: 120px;
+      height: 120px;
+    }
+  
+    .logo--size-xl {
+      width: 160px;
+      height: 160px;
+    }
+  }
+  

package/src/stories/Atoms/Logo/Logo.jsx

@@ -0,0 +1,53 @@
+// src/stories/Atoms/Logo/Logo.jsx
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import './Logo.css';
+
+export const Logo = ({
+  src,
+  alt = 'Logo',
+  size = 'md', // 'xs', 'sm', 'md', 'lg', 'xl'
+  shape = 'normal', // 'normal', 'rounded', 'squared'
+  background = 'none', // 'none', 'palette', 'custom'
+  customBackgroundColor,
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const logoClasses = classNames('logo', className, {
+    [`logo--size-${size}`]: size,
+    [`logo--shape-${shape}`]: shape,
+    [`logo--background-${background}`]: background,
+  });
+
+  const logoStyle =
+    background === 'custom' && customBackgroundColor
+      ? { ...style, '--logo-background-color': customBackgroundColor }
+      : style;
+
+  return (
+    <div className={logoClasses} style={logoStyle} {...props}>
+      <img src={src} alt={alt} className="logo__image" />
+    </div>
+  );
+};
+
+Logo.propTypes = {
+  /** Source URL or path of the logo image */
+  src: PropTypes.string.isRequired,
+  /** Alternative text for the logo */
+  alt: PropTypes.string,
+  /** Size of the logo */
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /** Shape of the logo */
+  shape: PropTypes.oneOf(['normal', 'rounded', 'squared']),
+  /** Background option */
+  background: PropTypes.oneOf(['none', 'palette', 'custom']),
+  /** Custom background color when background is set to 'custom' */
+  customBackgroundColor: PropTypes.string,
+  /** Additional CSS classes */
+  className: PropTypes.string,
+  /** Inline styles */
+  style: PropTypes.object,
+};

package/src/stories/Atoms/Logo/Logo.stories.jsx

@@ -0,0 +1,120 @@
+// src/stories/Atoms/Logo/Logo.stories.jsx
+import React from 'react';
+import { Logo } from './Logo';
+import './Logo.css';
+
+export default {
+  title: 'Atoms/Media/Logo',
+  component: Logo,
+  argTypes: {
+    src: {
+      control: 'text',
+      description: 'Source URL or path of the logo image.',
+    },
+    alt: {
+      control: 'text',
+      description: 'Alternative text for the logo.',
+    },
+    size: {
+      control: {
+        type: 'select',
+        options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      },
+      description: 'Size of the logo.',
+    },
+    shape: {
+      control: {
+        type: 'select',
+        options: ['normal', 'rounded', 'squared'],
+      },
+      description: 'Shape of the logo.',
+    },
+    background: {
+      control: {
+        type: 'select',
+        options: ['none', 'palette', 'custom'],
+      },
+      description: 'Background option.',
+    },
+    customBackgroundColor: {
+      control: 'color',
+      description: 'Custom background color when background is set to "custom".',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes.',
+    },
+    style: {
+      control: 'object',
+      description: 'Inline styles.',
+    },
+  },
+};
+
+/**
+ * Original Logo - Medium Size - Normal Shape - No Background
+ */
+export const OriginalMediumNormalNoBg = () => (
+  <Logo
+    src="https://via.placeholder.com/150x150?text=Logo"
+    alt="Original Logo"
+    size="md"
+    shape="normal"
+    background="none"
+  />
+);
+
+/**
+ * Logo with Palette Background - Large Size - Rounded Shape
+ */
+export const PaletteBackgroundLargeRounded = () => (
+  <Logo
+    src="https://via.placeholder.com/150x150?text=Logo"
+    alt="Logo with Palette Background"
+    size="lg"
+    shape="rounded"
+    background="palette"
+  />
+);
+
+/**
+ * Logo with Custom Background - Small Size - Squared Shape
+ */
+export const CustomBackgroundSmallSquared = () => (
+  <Logo
+    src="https://via.placeholder.com/150x150?text=Logo"
+    alt="Logo with Custom Background"
+    size="sm"
+    shape="squared"
+    background="custom"
+    customBackgroundColor="#FF5733"
+  />
+);
+
+/**
+ * Original Logo - Extra Large Size - Rounded Shape - No Background
+ */
+export const OriginalXLRoundedNoBg = () => (
+  <Logo
+    src="https://via.placeholder.com/150x150?text=Logo"
+    alt="Original XL Logo"
+    size="xl"
+    shape="rounded"
+    background="none"
+  />
+);
+
+/**
+ * Interactive Logo
+ */
+const Template = (args) => <Logo {...args} />;
+
+export const InteractiveLogo = Template.bind({});
+InteractiveLogo.args = {
+  src: 'https://via.placeholder.com/150x150?text=Logo',
+  alt: 'Interactive Logo',
+  size: 'md',
+  shape: 'normal',
+  background: 'none',
+  customBackgroundColor: '#00FF00',
+};