this.gui 1.0.15 → 1.0.17

package/src/stories/Atoms/Icon/Icon.stories.jsx

@@ -1,72 +1,177 @@
-// src/stories/atoms/Interactive/Icon/Icon.stories.jsx
-
+// src/stories/Atoms/Icon/Icon.stories.jsx
 import React from 'react';
 import { Icon } from './Icon';
+import { FaBeer, FaCoffee, FaApple, FaAndroid, FaReact, FaCheck, FaTimes, FaInfoCircle, FaExclamationTriangle, FaQuestionCircle } from 'react-icons/fa';
+import './Icon.css';
 
 export default {
   title: 'Atoms/Media/Icon',
   component: Icon,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    name: {
-      control: 'text',
-      description: 'Name of the icon symbol to use.',
+    icon: {
+      control: 'object',
+      description: 'Icon component from react-icons or similar library.',
+    },
+    background: {
+      control: 'boolean',
+      description: 'Whether to display a background behind the icon.',
+    },
+    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 icon or background.',
+    },
+    shape: {
+      control: {
+        type: 'select',
+        options: ['rounded', 'square'],
+      },
+      description: 'Shape of the icon background.',
     },
     size: {
-      control: 'select',
-      options: ['small', 'medium', 'large'],
+      control: {
+        type: 'select',
+        options: ['small', 'normal', 'big'],
+      },
       description: 'Size of the icon.',
     },
-    color: {
-      control: 'select',
-      options: ['primary', 'secondary', 'success', 'danger', 'warning', 'info'],
-      description: 'Color variant of the icon.',
+    align: {
+      control: {
+        type: 'select',
+        options: ['left', 'center', 'right'],
+      },
+      description: 'Alignment of the icon within its container.',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes.',
+    },
+    style: {
+      control: 'object',
+      description: 'Inline styles.',
     },
   },
 };
 
-const Template = (args) => <Icon {...args} />;
-
-export const Primary = Template.bind({});
-Primary.args = {
-  name: 'home', // Replace 'home' with an actual icon name
-  size: 'medium',
-  color: 'primary',
+const icons = {
+  FaBeer: FaBeer,
+  FaCoffee: FaCoffee,
+  FaApple: FaApple,
+  FaAndroid: FaAndroid,
+  FaReact: FaReact,
+  FaCheck: FaCheck,
+  FaTimes: FaTimes,
+  FaInfoCircle: FaInfoCircle,
+  FaExclamationTriangle: FaExclamationTriangle,
+  FaQuestionCircle: FaQuestionCircle,
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  name: 'settings',
-  size: 'medium',
-  color: 'secondary',
-};
+/**
+ * All Icons Collection
+ */
+export const AllIcons = () => (
+  <div className="icon-collection">
+    {Object.entries(icons).map(([name, IconComponent]) => (
+      <div key={name} className="icon-item">
+        <Icon
+          icon={IconComponent}
+          background={false}
+          color="neutral"
+          shape="square"
+          size="normal"
+        />
+        <p>{name}</p>
+      </div>
+    ))}
+  </div>
+);
 
-export const Success = Template.bind({});
-Success.args = {
-  name: 'check',
-  size: 'medium',
-  color: 'success',
-};
+/**
+ * Icon with Background
+ */
+export const IconWithBackground = () => (
+  <Icon
+    icon={FaBeer}
+    background
+    color="success"
+    shape="rounded"
+    size="big"
+    align="center"
+  />
+);
 
-export const Danger = Template.bind({});
-Danger.args = {
-  name: 'error',
-  size: 'medium',
-  color: 'danger',
-};
+/**
+ * Icon without Background
+ */
+export const IconWithoutBackground = () => (
+  <Icon
+    icon={FaCoffee}
+    background={false}
+    color="warning"
+    size="normal"
+    align="left"
+  />
+);
 
-export const Large = Template.bind({});
-Large.args = {
-  name: 'star',
-  size: 'large',
-  color: 'primary',
-};
+/**
+ * Rounded Icon with Different Colors
+ */
+export const RoundedIcons = () => (
+  <div className="icon-story">
+    <Icon icon={FaApple} background color="info" shape="rounded" size="small" />
+    <Icon icon={FaAndroid} background color="alert" shape="rounded" size="normal" />
+    <Icon icon={FaReact} background color="shade-3" shape="rounded" size="big" />
+  </div>
+);
+
+/**
+ * Square Icon with Different Colors
+ */
+export const SquareIcons = () => (
+  <div className="icon-story">
+    <Icon icon={FaBeer} background color="neutral" shape="square" size="small" />
+    <Icon icon={FaCoffee} background color="dark" shape="square" size="normal" />
+    <Icon icon={FaApple} background color="classy-color-2" shape="square" size="big" />
+  </div>
+);
 
-export const Small = Template.bind({});
-Small.args = {
-  name: 'search',
-  size: 'small',
-  color: 'primary',
-};
+/**
+ * Interactive Icon
+ */
+const Template = (args) => <Icon {...args} />;
+
+export const InteractiveIcon = Template.bind({});
+InteractiveIcon.args = {
+  icon: FaReact,
+  background: false,
+  color: 'info',
+  shape: 'rounded',
+  size: 'normal',
+  align: 'center',
+};
+InteractiveIcon.storyName = 'Interactive Icon';

package/src/stories/Atoms/Image/Image.css

@@ -1,29 +1,245 @@
+/* src/stories/Atoms/Image/Image.css */
+
+.image-figure {
+  position: relative;
+  display: inline-block;
+  margin: 0;
+}
+
+.image__placeholder {
+  width: 100%;
+  height: 100%;
+  background-color: var(--neutral-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--background-color);
+  position: absolute;
+  top: 0;
+  left: 0;
+}
 
 .image {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
+  display: block;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  cursor: pointer;
+  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, opacity var(--transition-speed) ease;
+  opacity: 0;
+}
+
+.image--loaded {
+  opacity: 1;
+}
+
+.image--error {
+  opacity: 1;
+}
+
+.image--thumbnail {
+  max-width: 100%;
+  height: auto;
+}
+
+.image--avatar {
+  border-radius: 50%;
+  object-fit: cover;
+  max-width: 100%;
+  height: auto;
+}
+
+.image--expanded {
+  cursor: default;
+}
+
+.image--flat {
+  cursor: default;
+  max-width: none;
+}
+
+.image--16by9 {
+  aspect-ratio: 16 / 9;
+}
+
+.image--4by3 {
+  aspect-ratio: 4 / 3;
+}
+
+.image--1by1 {
+  aspect-ratio: 1 / 1;
+}
+
+.image--crop-center {
+  object-position: center;
+}
+
+.image--crop-top {
+  object-position: top;
+}
+
+.image--crop-left {
+  object-position: left;
+}
+
+.image--size-xs {
+  width: 30px;
+  height: 30px;
+}
+
+.image--size-sm {
+  width: 50px;
+  height: 50px;
 }
 
-.image--primary {
-  background-color: #e3f2fd;
-  border-color: #1e88e5;
+.image--size-md {
+  width: 100px;
+  height: 100px;
 }
 
-.image--secondary {
+.image--size-lg {
+  width: 150px;
+  height: 150px;
+}
+
+.image--size-xl {
+  width: 200px;
+  height: 200px;
+}
+
+.image:hover {
+  transform: scale(1.05);
+  box-shadow: var(--box-shadow);
+}
+
+.image__caption {
+  text-align: center;
+  margin-top: var(--spacing-sm);
+  font-size: var(--font-size-small);
+  color: var(--muted-text-color);
+}
+
+/* Overlay Styles */
+.image__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity var(--transition-speed) ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-figure:hover .image__overlay {
+  opacity: 1;
+}
+
+.image__overlay-caption {
+  color: #fff;
+  font-size: var(--font-size-base);
+  text-align: center;
+}
+
+.image__overlay-icons {
+  display: flex;
+  gap: 10px;
+}
+
+.image__overlay-icons--center {
+  justify-content: center;
+}
+
+.image__overlay-icons--top-right {
+  position: absolute;
+  top: var(--spacing-sm);
+  right: var(--spacing-sm);
+}
+
+.image__overlay-icon {
+  color: #fff;
+  font-size: 1.5em;
+  cursor: pointer;
+}
+
+/* Modal Styles */
+.image__modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-index-modal);
+}
+
+.image__modal-content {
+  position: relative;
+  width: 90%;
+  max-width: 700px;
+  height: 90%;
+  max-height: 500px;
   background-color: #fff;
-  border-color: #ccc;
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  overflow: hidden;
 }
 
-.image--small {
-  padding: 8px;
+.image__modal-img {
+  width: 100%;
+  height: auto;
+  border-radius: var(--border-radius);
 }
 
-.image--medium {
-  padding: 16px;
+.image__modal-caption {
+  margin-top: var(--spacing-sm);
+  text-align: center;
+  color: var(--text-color);
+  font-size: var(--font-size-small);
+}
+
+.image__modal-close {
+  position: absolute;
+  top: var(--spacing-xs);
+  right: var(--spacing-xs);
+  background: none;
+  border: none;
+  color: var(--dark-color);
+  font-size: 2rem;
+  cursor: pointer;
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+  .image--avatar {
+    width: 80px;
+    height: 80px;
+  }
+
+  .image__modal-content {
+    width: 95%;
+    height: 80%;
+    max-width: 90%;
+    max-height: 400px;
+  }
+
+  .image__overlay-caption {
+    font-size: var(--font-size-small);
+  }
+
+  .image__overlay-icon {
+    font-size: 1.2em;
+  }
 }
 
-.image--large {
-  padding: 32px;
+/* Flat Image Styles */
+.image--flat:hover {
+  transform: none;
+  box-shadow: none;
 }

package/src/stories/Atoms/Image/Image.jsx

@@ -1,41 +1,175 @@
-
-import React from 'react';
+// src/stories/Atoms/Image/Image.jsx
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import './Image.css';
 
-/**
- * Image component for user interaction
- */
-export const Image = ({ primary, size, children, ...props }) => {
-  const mode = primary ? 'image--primary' : 'image--secondary';
+export const Image = ({
+  src,
+  alt,
+  width,
+  height,
+  loading = 'lazy',
+  title,
+  caption,
+  variant = 'thumbnail', // 'thumbnail', 'avatar', 'expanded', 'flat'
+  aspectRatio,
+  crop = 'center', // 'center', 'top', 'left'
+  fallbackSrc = '/fallback.jpg',
+  srcSet,
+  sizes,
+  lazyLoad = true,
+  onClickExpand,
+  hoverIcons = [],
+  hoverCaption,
+  hoverIconPosition = 'center', // 'center', 'top-right'
+  size = 'md', // 'xs', 'sm', 'md', 'lg', 'xl'
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const handleImageLoad = () => {
+    setIsLoaded(true);
+  };
+
+  const handleImageError = () => {
+    setIsError(true);
+  };
+
+  const handleExpand = () => {
+    if (variant !== 'expanded' && variant !== 'flat') {
+      setIsExpanded(true);
+    }
+    if (onClickExpand) {
+      onClickExpand();
+    }
+  };
+
+  const handleCloseExpand = () => {
+    setIsExpanded(false);
+  };
+
+  const imageClasses = classNames('image', className, {
+    [`image--${variant}`]: variant,
+    [`image--${aspectRatio}`]: aspectRatio,
+    [`image--${crop}`]: crop,
+    [`image--size-${size}`]: size,
+    'image--loaded': isLoaded,
+    'image--error': isError,
+  });
+
+  const showOverlay = variant !== 'flat' && (hoverIcons.length > 0 || hoverCaption);
+
   return (
-    <div
-      className={['image', `image--${size}`, mode].join(' ')}
-      {...props}
-    >
-      {children}
-    </div>
+    <>
+      <figure className="image-figure" style={style} {...props}>
+        {!isLoaded && !isError && <div className="image__placeholder">Loading...</div>}
+        <img
+          src={isError ? fallbackSrc : src}
+          alt={alt}
+          width={width}
+          height={height}
+          loading={lazyLoad ? loading : 'eager'}
+          title={title}
+          className={imageClasses}
+          srcSet={srcSet}
+          sizes={sizes}
+          onLoad={handleImageLoad}
+          onError={handleImageError}
+          onClick={variant !== 'flat' ? handleExpand : undefined}
+          role={variant === 'expanded' ? 'img' : 'button'}
+          tabIndex={variant !== 'flat' ? '0' : undefined}
+          onKeyPress={(e) => {
+            if ((e.key === 'Enter' || e.key === ' ') && variant !== 'flat') {
+              handleExpand();
+            }
+          }}
+        />
+        {caption && <figcaption className="image__caption">{caption}</figcaption>}
+
+        {showOverlay && (
+          <div className="image__overlay">
+            {hoverCaption && (
+              <div className="image__overlay-caption">
+                {hoverCaption}
+              </div>
+            )}
+            {hoverIcons.length > 0 && (
+              <div
+                className={classNames('image__overlay-icons', {
+                  'image__overlay-icons--center': hoverIconPosition === 'center',
+                  'image__overlay-icons--top-right': hoverIconPosition === 'top-right',
+                })}
+              >
+                {hoverIcons.map((IconComponent, index) => (
+                  <IconComponent key={index} className="image__overlay-icon" />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </figure>
+
+      {isExpanded && (
+        <div className="image__modal" onClick={handleCloseExpand} role="dialog" aria-modal="true">
+          <div className="image__modal-content" onClick={(e) => e.stopPropagation()}>
+            <button className="image__modal-close" onClick={handleCloseExpand} aria-label="Close">
+              &times;
+            </button>
+            <img src={src} alt={alt} className="image__modal-img" />
+            {caption && <div className="image__modal-caption">{caption}</div>}
+          </div>
+        </div>
+      )}
+    </>
   );
 };
 
 Image.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,
+  /** Source URL of the image */
+  src: PropTypes.string.isRequired,
+  /** Alternative text for the image */
+  alt: PropTypes.string.isRequired,
+  /** Width of the image */
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** Height of the image */
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** Loading behavior */
+  loading: PropTypes.oneOf(['lazy', 'eager']),
+  /** Tooltip text */
+  title: PropTypes.string,
+  /** Caption for the image */
+  caption: PropTypes.string,
+  /** Variant of the image */
+  variant: PropTypes.oneOf(['thumbnail', 'avatar', 'expanded', 'flat']),
+  /** Aspect ratio of the image */
+  aspectRatio: PropTypes.oneOf(['16by9', '4by3', '1by1']),
+  /** Crop position */
+  crop: PropTypes.oneOf(['center', 'top', 'left']),
+  /** Fallback image source */
+  fallbackSrc: PropTypes.string,
+  /** srcSet for responsive images */
+  srcSet: PropTypes.string,
+  /** sizes attribute for responsive images */
+  sizes: PropTypes.string,
+  /** Enable lazy loading */
+  lazyLoad: PropTypes.bool,
+  /** Function to handle expand action */
+  onClickExpand: PropTypes.func,
+  /** Icons to display on hover */
+  hoverIcons: PropTypes.arrayOf(PropTypes.elementType),
+  /** Caption to display on hover */
+  hoverCaption: PropTypes.string,
+  /** Position of hover icons */
+  hoverIconPosition: PropTypes.oneOf(['center', 'top-right']),
+  /** Size of the image */
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /** Additional CSS classes */
+  className: PropTypes.string,
+  /** Inline styles */
+  style: PropTypes.object,
 };
-
-Image.defaultProps = {
-  primary: false,
-  size: 'medium',
-};
-
-export default Image;