this.gui 1.0.18 → 1.1.0

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

@@ -1,177 +0,0 @@
-// 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,
-  argTypes: {
-    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: {
-        type: 'select',
-        options: ['small', 'normal', 'big'],
-      },
-      description: 'Size 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 icons = {
-  FaBeer: FaBeer,
-  FaCoffee: FaCoffee,
-  FaApple: FaApple,
-  FaAndroid: FaAndroid,
-  FaReact: FaReact,
-  FaCheck: FaCheck,
-  FaTimes: FaTimes,
-  FaInfoCircle: FaInfoCircle,
-  FaExclamationTriangle: FaExclamationTriangle,
-  FaQuestionCircle: FaQuestionCircle,
-};
-
-/**
- * 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>
-);
-
-/**
- * Icon with Background
- */
-export const IconWithBackground = () => (
-  <Icon
-    icon={FaBeer}
-    background
-    color="success"
-    shape="rounded"
-    size="big"
-    align="center"
-  />
-);
-
-/**
- * Icon without Background
- */
-export const IconWithoutBackground = () => (
-  <Icon
-    icon={FaCoffee}
-    background={false}
-    color="warning"
-    size="normal"
-    align="left"
-  />
-);
-
-/**
- * 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>
-);
-
-/**
- * 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,245 +0,0 @@
-/* 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 {
-  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--size-md {
-  width: 100px;
-  height: 100px;
-}
-
-.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-radius: var(--border-radius);
-  box-shadow: var(--box-shadow);
-  overflow: hidden;
-}
-
-.image__modal-img {
-  width: 100%;
-  height: auto;
-  border-radius: var(--border-radius);
-}
-
-.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;
-  }
-}
-
-/* Flat Image Styles */
-.image--flat:hover {
-  transform: none;
-  box-shadow: none;
-}

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

@@ -1,175 +0,0 @@
-// src/stories/Atoms/Image/Image.jsx
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import './Image.css';
-
-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 (
-    <>
-      <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 = {
-  /** 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,
-};