this.gui 1.0.18 → 1.1.0

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

@@ -1,99 +0,0 @@
-// src/stories/Atoms/Loader/Loader.stories.jsx
-import React from 'react';
-import { Loader } from './Loader';
-import './Loader.css';
-
-export default {
-  title: 'Atoms/Feedback/Loader',
-  component: Loader,
-  argTypes: {
-    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.',
-    },
-  },
-};
-
-/**
- * Spinner - Primary - Medium
- */
-export const SpinnerPrimaryMedium = () => (
-  <Loader variant="spinner" color="primary" size="md" />
-);
-
-/**
- * Spinner - Secondary - Large
- */
-export const SpinnerSecondaryLarge = () => (
-  <Loader variant="spinner" color="secondary" size="lg" />
-);
-
-/**
- * Dots - Primary - Small
- */
-export const DotsPrimarySmall = () => (
-  <Loader variant="dots" color="primary" size="sm" />
-);
-
-/**
- * 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

@@ -1,94 +0,0 @@
-/* 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

@@ -1,53 +0,0 @@
-// 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

@@ -1,120 +0,0 @@
-// 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',
-};

package/src/stories/Atoms/Paragraph/Paragraph.css

@@ -1,180 +0,0 @@
-/* src/stories/Atoms/Paragraph/Paragraph.css */
-
-.paragraph {
-  font-family: var(--font-family);
-  margin-bottom: var(--spacing-md);
-}
-
-/* Size Variants */
-.paragraph--size-xs {
-  font-size: var(--font-size-small);
-}
-
-.paragraph--size-sm {
-  font-size: calc(var(--font-size-small) * 1.1);
-}
-
-.paragraph--size-md {
-  font-size: var(--font-size-base);
-}
-
-.paragraph--size-lg {
-  font-size: calc(var(--font-size-base) * 1.1);
-}
-
-.paragraph--size-xl {
-  font-size: calc(var(--font-size-base) * 1.25);
-}
-
-/* Text Alignment */
-.paragraph--align-left {
-  text-align: left;
-}
-
-.paragraph--align-center {
-  text-align: center;
-}
-
-.paragraph--align-right {
-  text-align: right;
-}
-
-.paragraph--align-justify {
-  text-align: justify;
-}
-
-/* Font Weight */
-.paragraph--weight-light {
-  font-weight: 300;
-}
-
-.paragraph--weight-normal {
-  font-weight: var(--font-weight-regular);
-}
-
-.paragraph--weight-bold {
-  font-weight: var(--font-weight-bold);
-}
-
-/* Text Colors */
-.paragraph--color-default {
-  color: var(--text-color);
-}
-
-.paragraph--color-muted {
-  color: var(--muted-text-color);
-}
-
-.paragraph--color-primary {
-  color: var(--primary-color);
-}
-
-.paragraph--color-secondary {
-  color: var(--secondary-color);
-}
-
-.paragraph--color-info {
-  color: var(--info-color);
-}
-
-.paragraph--color-warning {
-  color: var(--warning-color);
-}
-
-.paragraph--color-alert {
-  color: var(--alert-color);
-}
-
-.paragraph--color-success {
-  color: var(--success-color);
-}
-
-.paragraph--color-dark {
-  color: var(--dark-color);
-}
-
-.paragraph--color-neutral {
-  color: var(--neutral-color);
-}
-
-/* Classy Palette */
-.paragraph--color-classy-color-1 {
-  color: var(--classy-color-1);
-}
-
-.paragraph--color-classy-color-2 {
-  color: var(--classy-color-2);
-}
-
-.paragraph--color-classy-color-3 {
-  color: var(--classy-color-3);
-}
-
-.paragraph--color-classy-color-4 {
-  color: var(--classy-color-4);
-}
-
-.paragraph--color-classy-color-5 {
-  color: var(--classy-color-5);
-}
-
-/* Small Switch Palette */
-.paragraph--color-small-switch-color-1 {
-  color: var(--small-switch-color-1);
-}
-
-.paragraph--color-small-switch-color-2 {
-  color: var(--small-switch-color-2);
-}
-
-/* Natural Palette */
-.paragraph--color-natural-color-1 {
-  color: var(--natural-color-1);
-}
-
-.paragraph--color-natural-color-2 {
-  color: var(--natural-color-2);
-}
-
-.paragraph--color-natural-color-3 {
-  color: var(--natural-color-3);
-}
-
-/* Grey Friends */
-.paragraph--color-grey-friend-1 {
-  color: var(--grey-friend-1);
-}
-
-.paragraph--color-grey-friend-2 {
-  color: var(--grey-friend-2);
-}
-
-/* Shades */
-.paragraph--color-shade-1 {
-  color: var(--shade-1);
-}
-
-.paragraph--color-shade-2 {
-  color: var(--shade-2);
-}
-
-.paragraph--color-shade-3 {
-  color: var(--shade-3);
-}
-
-.paragraph--color-shade-4 {
-  color: var(--shade-4);
-}
-
-/* Line Height */
-.paragraph--lineHeight-normal {
-  line-height: var(--line-height);
-}
-
-.paragraph--lineHeight-tight {
-  line-height: 1.3;
-}
-
-.paragraph--lineHeight-loose {
-  line-height: 2;
-}

package/src/stories/Atoms/Paragraph/Paragraph.jsx

@@ -1,77 +0,0 @@
-// src/stories/Atoms/Paragraph/Paragraph.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import './Paragraph.css';
-
-export const Paragraph = ({
-  text,
-  size = 'md', // 'xs', 'sm', 'md', 'lg', 'xl'
-  alignment = 'left', // 'left', 'center', 'right', 'justify'
-  weight = 'normal', // 'light', 'normal', 'bold'
-  color = 'default', // All color options, including the new semantic and palette options
-  lineHeight = 'normal', // 'normal', 'tight', 'loose'
-  className = '',
-  style = {},
-  ...props
-}) => {
-  const paragraphClasses = classNames('paragraph', className, {
-    [`paragraph--size-${size}`]: size,
-    [`paragraph--align-${alignment}`]: alignment,
-    [`paragraph--weight-${weight}`]: weight,
-    [`paragraph--color-${color}`]: color,
-    [`paragraph--lineHeight-${lineHeight}`]: lineHeight,
-  });
-
-  return (
-    <p className={paragraphClasses} style={style} {...props}>
-      {text}
-    </p>
-  );
-};
-
-Paragraph.propTypes = {
-  /** Text content for the paragraph */
-  text: PropTypes.string.isRequired,
-  /** Size of the paragraph text */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  /** Text alignment */
-  alignment: PropTypes.oneOf(['left', 'center', 'right', 'justify']),
-  /** Font weight */
-  weight: PropTypes.oneOf(['light', 'normal', 'bold']),
-  /** Text color */
-  color: PropTypes.oneOf([
-    'default',
-    'muted',
-    'primary',
-    'secondary',
-    'info',
-    'warning',
-    'alert',
-    'success',
-    'dark',
-    'neutral',
-    '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',
-  ]),
-  /** Line height */
-  lineHeight: PropTypes.oneOf(['normal', 'tight', 'loose']),
-  /** Additional CSS classes */
-  className: PropTypes.string,
-  /** Inline styles */
-  style: PropTypes.object,
-};