this.gui 1.0.17 → 1.1.0

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

@@ -1,332 +0,0 @@
-// src/stories/Atoms/Image/Image.stories.jsx
-import React from 'react';
-import { Image } from './Image';
-import { FaHeart, FaShare, FaEdit, FaTrash, FaSearch } from 'react-icons/fa';
-import './Image.css';
-
-export default {
-  title: 'Atoms/Media/Image',
-  component: Image,
-  argTypes: {
-    src: {
-      control: 'text',
-      description: 'Source URL of the image.',
-    },
-    alt: {
-      control: 'text',
-      description: 'Alternative text for the image.',
-    },
-    width: {
-      control: 'text',
-      description: 'Width of the image.',
-    },
-    height: {
-      control: 'text',
-      description: 'Height of the image.',
-    },
-    loading: {
-      control: {
-        type: 'select',
-        options: ['lazy', 'eager'],
-      },
-      description: 'Loading behavior.',
-    },
-    title: {
-      control: 'text',
-      description: 'Tooltip text.',
-    },
-    caption: {
-      control: 'text',
-      description: 'Caption for the image.',
-    },
-    variant: {
-      control: {
-        type: 'select',
-        options: ['thumbnail', 'avatar', 'expanded', 'flat'],
-      },
-      description: 'Variant of the image.',
-    },
-    aspectRatio: {
-      control: {
-        type: 'select',
-        options: ['16by9', '4by3', '1by1'],
-      },
-      description: 'Aspect ratio of the image.',
-    },
-    crop: {
-      control: {
-        type: 'select',
-        options: ['center', 'top', 'left'],
-      },
-      description: 'Crop position of the image.',
-    },
-    fallbackSrc: {
-      control: 'text',
-      description: 'Fallback image source if the main image fails to load.',
-    },
-    srcSet: {
-      control: 'text',
-      description: 'srcSet for responsive images.',
-    },
-    sizes: {
-      control: 'text',
-      description: 'Sizes attribute for responsive images.',
-    },
-    lazyLoad: {
-      control: 'boolean',
-      description: 'Enable lazy loading.',
-    },
-    onClickExpand: {
-      action: 'clicked',
-      description: 'Function to handle expand action.',
-    },
-    hoverIcons: {
-      control: 'object',
-      description: 'Icons to display on hover.',
-    },
-    hoverCaption: {
-      control: 'text',
-      description: 'Caption to display on hover.',
-    },
-    hoverIconPosition: {
-      control: {
-        type: 'select',
-        options: ['center', 'top-right'],
-      },
-      description: 'Position of hover icons.',
-    },
-    size: {
-      control: {
-        type: 'select',
-        options: ['xs', 'sm', 'md', 'lg', 'xl'],
-      },
-      description: 'Size of the image.',
-    },
-    className: {
-      control: 'text',
-      description: 'Additional CSS classes.',
-    },
-    style: {
-      control: 'object',
-      description: 'Inline styles.',
-    },
-  },
-};
-
-/**
- * Thumbnail Variant
- */
-export const Thumbnail = () => (
-  <Image
-    src="https://via.placeholder.com/300x200"
-    alt="Thumbnail Image"
-    variant="thumbnail"
-    caption="This is a thumbnail image."
-    size="md"
-  />
-);
-
-/**
- * Avatar Variant - 5 Sizes
- */
-export const AvatarSizes = () => (
-  <div className="avatar-sizes" style={{ display: 'flex', gap: '16px' }}>
-    <Image
-      src="https://via.placeholder.com/30"
-      alt="Avatar XS"
-      variant="avatar"
-      size="xs"
-      caption="XS Avatar"
-    />
-    <Image
-      src="https://via.placeholder.com/50"
-      alt="Avatar SM"
-      variant="avatar"
-      size="sm"
-      caption="SM Avatar"
-    />
-    <Image
-      src="https://via.placeholder.com/70"
-      alt="Avatar MD"
-      variant="avatar"
-      size="md"
-      caption="MD Avatar"
-    />
-    <Image
-      src="https://via.placeholder.com/90"
-      alt="Avatar LG"
-      variant="avatar"
-      size="lg"
-      caption="LG Avatar"
-    />
-    <Image
-      src="https://via.placeholder.com/110"
-      alt="Avatar XL"
-      variant="avatar"
-      size="xl"
-      caption="XL Avatar"
-    />
-  </div>
-);
-
-/**
- * Expanded Variant
- */
-export const Expanded = () => (
-  <Image
-    src="https://via.placeholder.com/800x600"
-    alt="Expanded Image"
-    variant="expanded"
-    caption="This is an expanded image."
-    onClickExpand={() => console.log('Image expanded')}
-  />
-);
-
-/**
- * Flat Variant
- */
-export const Flat = () => (
-  <Image
-    src="https://via.placeholder.com/400x300"
-    alt="Flat Image"
-    variant="flat"
-    caption="This is a flat image with no overlay."
-  />
-);
-
-/**
- * Image with Aspect Ratio
- */
-export const ImageWithAspectRatio = () => (
-  <Image
-    src="https://via.placeholder.com/400x300"
-    alt="16 by 9 Image"
-    variant="thumbnail"
-    aspectRatio="16by9"
-    caption="Image with 16:9 aspect ratio."
-    size="lg"
-  />
-);
-
-/**
- * Image with Crop
- */
-export const ImageWithCrop = () => (
-  <Image
-    src="https://via.placeholder.com/400x300"
-    alt="Cropped Image"
-    variant="thumbnail"
-    crop="top"
-    caption="Image cropped from the top."
-    size="md"
-  />
-);
-
-/**
- * Image with Fallback
- */
-export const ImageWithFallback = () => (
-  <Image
-    src="https://invalid-url.com/image.jpg"
-    alt="Image with fallback"
-    variant="thumbnail"
-    fallbackSrc="https://via.placeholder.com/300x200?text=Fallback+Image"
-    caption="This image failed to load and shows a fallback."
-    size="md"
-  />
-);
-
-/**
- * Responsive Image
- */
-export const ResponsiveImage = () => (
-  <Image
-    src="https://via.placeholder.com/800x600"
-    alt="Responsive Image"
-    variant="thumbnail"
-    srcSet="
-      https://via.placeholder.com/400x300 400w,
-      https://via.placeholder.com/800x600 800w,
-      https://via.placeholder.com/1200x900 1200w
-    "
-    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
-    caption="This image is responsive using srcSet and sizes."
-    size="lg"
-  />
-);
-
-/**
- * Click to Expand Image
- */
-export const ClickToExpand = () => (
-  <Image
-    src="https://via.placeholder.com/600x400"
-    alt="Clickable Image"
-    variant="thumbnail"
-    caption="Clicking this image will expand it."
-    onClickExpand={() => alert('Image clicked to expand!')}
-    size="md"
-  />
-);
-
-/**
- * On Hover Show Icons at Center
- */
-export const HoverIconsCenter = () => (
-  <Image
-    src="https://via.placeholder.com/300x200"
-    alt="Hover Icons Center"
-    variant="thumbnail"
-    caption="Hover to see icons at center."
-    hoverIcons={[FaHeart, FaShare]}
-    hoverIconPosition="center"
-    size="md"
-  />
-);
-
-/**
- * On Hover Show Caption Overlay
- */
-export const HoverCaptionOverlay = () => (
-  <Image
-    src="https://via.placeholder.com/300x200"
-    alt="Hover Caption"
-    variant="thumbnail"
-    hoverCaption="This is an overlay caption."
-    size="md"
-  />
-);
-
-/**
- * On Hover Show Icons at Top Right
- */
-export const HoverIconsTopRight = () => (
-  <Image
-    src="https://via.placeholder.com/300x200"
-    alt="Hover Icons Top Right"
-    variant="thumbnail"
-    hoverIcons={[FaEdit, FaTrash]}
-    hoverIconPosition="top-right"
-    caption="Hover to see icons at top right."
-    size="md"
-  />
-);
-
-/**
- * Interactive Image
- */
-const Template = (args) => <Image {...args} />;
-
-export const InteractiveImage = Template.bind({});
-InteractiveImage.args = {
-  src: 'https://via.placeholder.com/500x300',
-  alt: 'Interactive Image',
-  variant: 'thumbnail',
-  caption: 'This is an interactive image.',
-  aspectRatio: '4by3',
-  crop: 'center',
-  hoverIcons: [FaSearch],
-  hoverCaption: 'Search this image',
-  hoverIconPosition: 'center',
-  size: 'md',
-};

package/src/stories/Atoms/Label/Label.css

@@ -1,171 +0,0 @@
-/* src/stories/Atoms/Label/Label.css */
-
-.label {
-  display: inline-block;
-  font-weight: 500;
-  text-align: center;
-  border-radius: 0.25rem;
-  transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
-  cursor: default;
-}
-
-.label--background {
-  color: #fff;
-}
-
-.label--color-primary {
-  background-color: var(--primary-color);
-}
-
-.label--color-secondary {
-  border: 1px solid var(--secondary-color);
-  color: var(--secondary-color);
-  background-color: transparent;
-}
-
-.label--color-info {
-  background-color: var(--info-color);
-}
-
-.label--color-warning {
-  background-color: var(--warning-color);
-}
-
-.label--color-alert {
-  background-color: var(--alert-color);
-}
-
-.label--color-success {
-  background-color: var(--success-color);
-}
-
-.label--color-neutral {
-  background-color: var(--neutral-color);
-}
-
-.label--color-dark {
-  background-color: var(--dark-color);
-}
-
-.label--color-classy-color-1 {
-  background-color: var(--classy-color-1);
-}
-
-.label--color-classy-color-2 {
-  background-color: var(--classy-color-2);
-}
-
-.label--color-classy-color-3 {
-  background-color: var(--classy-color-3);
-}
-
-.label--color-classy-color-4 {
-  background-color: var(--classy-color-4);
-}
-
-.label--color-classy-color-5 {
-  background-color: var(--classy-color-5);
-}
-
-.label--color-small-switch-color-1 {
-  background-color: var(--small-switch-color-1);
-}
-
-.label--color-small-switch-color-2 {
-  background-color: var(--small-switch-color-2);
-}
-
-.label--color-natural-color-1 {
-  background-color: var(--natural-color-1);
-}
-
-.label--color-natural-color-2 {
-  background-color: var(--natural-color-2);
-}
-
-.label--color-natural-color-3 {
-  background-color: var(--natural-color-3);
-}
-
-.label--color-grey-friend-1 {
-  background-color: var(--grey-friend-1);
-}
-
-.label--color-grey-friend-2 {
-  background-color: var(--grey-friend-2);
-}
-
-.label--color-shade-1 {
-  background-color: var(--shade-1);
-}
-
-.label--color-shade-2 {
-  background-color: var(--shade-2);
-}
-
-.label--color-shade-3 {
-  background-color: var(--shade-3);
-}
-
-.label--color-shade-4 {
-  background-color: var(--shade-4);
-}
-
-/* Secondary Labels (no background) */
-.label--color-secondary:not(.label--background) {
-  border: 1px solid var(--secondary-color);
-  color: var(--secondary-color);
-  background-color: transparent;
-}
-
-/* Shape Variations */
-.label--shape-rounded {
-  border-radius: 0.25rem;
-}
-
-.label--shape-square {
-  border-radius: 0;
-}
-
-.label--shape-pill {
-  border-radius: 9999px;
-}
-
-/* Size Variations */
-.label--size-xs {
-  font-size: 0.6rem;
-  padding: 0.2em 0.4em;
-}
-
-.label--size-sm {
-  font-size: 0.75rem;
-  padding: 0.25em 0.5em;
-}
-
-.label--size-md {
-  font-size: 0.875rem;
-  padding: 0.3em 0.6em;
-}
-
-.label--size-lg {
-  font-size: 1rem;
-  padding: 0.35em 0.7em;
-}
-
-.label--size-xl {
-  font-size: 1.125rem;
-  padding: 0.4em 0.8em;
-}
-
-/* Additional Styles */
-.label-colors, .label-shapes, .label-sizes {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-md);
-  align-items: center;
-  margin-bottom: var(--spacing-md);
-}
-
-.label-sizes .label {
-  margin-right: var(--spacing-sm);
-}

package/src/stories/Atoms/Label/Label.jsx

@@ -1,71 +0,0 @@
-// src/stories/Atoms/Label/Label.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import './Label.css';
-
-export const Label = ({
-  text,
-  color = 'neutral',
-  background = true,
-  shape = 'rounded', // 'rounded', 'square', 'pill'
-  size = 'md', // 'xs', 'sm', 'md', 'lg', 'xl'
-  className = '',
-  style = {},
-  ...props
-}) => {
-  const labelClasses = classNames('label', className, {
-    [`label--color-${color}`]: color,
-    [`label--background`]: background && color !== 'secondary',
-    [`label--shape-${shape}`]: shape,
-    [`label--size-${size}`]: size,
-  });
-
-  return (
-    <span className={labelClasses} style={style} {...props}>
-      {text}
-    </span>
-  );
-};
-
-Label.propTypes = {
-  /** Text content of the label */
-  text: PropTypes.string.isRequired,
-  /** Color of the label */
-  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',
-  ]),
-  /** Whether the label has a background */
-  background: PropTypes.bool,
-  /** Shape of the label */
-  shape: PropTypes.oneOf(['rounded', 'square', 'pill']),
-  /** Size of the label */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  /** Additional CSS classes */
-  className: PropTypes.string,
-  /** Inline styles */
-  style: PropTypes.object,
-};