this.gui 1.0.14 → 1.0.16

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

@@ -1,41 +1,332 @@
-
+// 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';
 
-// Storybook configuration for Image component
 export default {
   title: 'Atoms/Media/Image',
   component: Image,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    children: { control: 'text' },
+    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.',
+    },
   },
 };
 
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary Image',
-  },
-};
+/**
+ * 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"
+  />
+);
 
-export const Secondary = {
-  args: {
-    children: 'This is a secondary Image',
-  },
-};
+/**
+ * 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>
+);
 
-export const Large = {
-  args: {
-    size: 'large',
-    children: 'This is a large Image',
-  },
-};
+/**
+ * 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')}
+  />
+);
 
-export const Small = {
-  args: {
-    size: 'small',
-    children: 'This is a small Image',
-  },
+/**
+ * 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,29 +1,171 @@
+/* src/stories/Atoms/Label/Label.css */
 
 .label {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
+  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--primary {
-  background-color: #e3f2fd;
-  border-color: #1e88e5;
+.label--background {
+  color: #fff;
 }
 
-.label--secondary {
-  background-color: #fff;
-  border-color: #ccc;
+.label--color-primary {
+  background-color: var(--primary-color);
 }
 
-.label--small {
-  padding: 8px;
+.label--color-secondary {
+  border: 1px solid var(--secondary-color);
+  color: var(--secondary-color);
+  background-color: transparent;
 }
 
-.label--medium {
-  padding: 16px;
+.label--color-info {
+  background-color: var(--info-color);
 }
 
-.label--large {
-  padding: 32px;
+.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,41 +1,71 @@
-
+// src/stories/Atoms/Label/Label.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import './Label.css';
 
-/**
- * Label component for user interaction
- */
-export const Label = ({ primary, size, children, ...props }) => {
-  const mode = primary ? 'label--primary' : 'label--secondary';
+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 (
-    <div
-      className={['label', `label--${size}`, mode].join(' ')}
-      {...props}
-    >
-      {children}
-    </div>
+    <span className={labelClasses} style={style} {...props}>
+      {text}
+    </span>
   );
 };
 
 Label.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,
+  /** 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,
 };
-
-Label.defaultProps = {
-  primary: false,
-  size: 'medium',
-};
-
-export default Label;