this.gui 1.0.18 → 1.1.0

package/src/stories/Atoms/Audio/Audio.jsx

@@ -1,216 +0,0 @@
-// src/stories/Atoms/Audio/Audio.jsx
-import React, { useRef, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { FaPlay, FaPause, FaVolumeUp, FaVolumeMute } from 'react-icons/fa';
-import './Audio.css';
-
-export const Audio = ({
-  src,
-  autoPlay = false,
-  loop = false,
-  muted = false,
-  size = 'medium',
-  color = 'classy-color-1',
-  className = '',
-  style = {},
-  ...props
-}) => {
-  const audioRef = useRef(null);
-  const [isPlaying, setIsPlaying] = useState(autoPlay);
-  const [isMuted, setIsMuted] = useState(muted);
-  const [volume, setVolume] = useState(muted ? 0 : 1);
-  const [currentTime, setCurrentTime] = useState(0);
-  const [duration, setDuration] = useState(0);
-  const [showVolumeSlider, setShowVolumeSlider] = useState(false);
-
-  useEffect(() => {
-    const audio = audioRef.current;
-    if (audio) {
-      audio.volume = volume;
-      audio.muted = isMuted;
-      if (autoPlay) {
-        audio.play().catch(() => setIsPlaying(false));
-      }
-    }
-  }, [volume, isMuted, autoPlay]);
-
-  const togglePlayPause = () => {
-    const audio = audioRef.current;
-    if (!audio) return;
-
-    if (isPlaying) {
-      audio.pause();
-    } else {
-      audio.play().catch(() => setIsPlaying(false));
-    }
-    setIsPlaying(!isPlaying);
-  };
-
-  const handleTimeUpdate = () => {
-    const audio = audioRef.current;
-    if (audio) {
-      setCurrentTime(audio.currentTime);
-    }
-  };
-
-  const handleLoadedMetadata = () => {
-    const audio = audioRef.current;
-    if (audio) {
-      setDuration(audio.duration);
-    }
-  };
-
-  const handleVolumeChange = (e) => {
-    const newVolume = parseFloat(e.target.value);
-    setVolume(newVolume);
-    setIsMuted(newVolume === 0);
-  };
-
-  const toggleMute = () => {
-    setIsMuted(!isMuted);
-    setVolume(!isMuted ? 0 : 1);
-  };
-
-  const handleSeekChange = (e) => {
-    const seekTime = parseFloat(e.target.value);
-    const audio = audioRef.current;
-    if (audio) {
-      audio.currentTime = seekTime;
-      setCurrentTime(seekTime);
-    }
-  };
-
-  const formatTime = (time) => {
-    if (isNaN(time)) return '00:00';
-    const minutes = Math.floor(time / 60);
-    const seconds = Math.floor(time % 60);
-    const paddedSeconds = seconds < 10 ? `0${seconds}` : seconds;
-    return `${minutes}:${paddedSeconds}`;
-  };
-
-  // Combined handler to toggle mute and show volume slider
-  const handleMuteAndShowSlider = (e) => {
-    toggleMute();
-    setShowVolumeSlider((prev) => !prev);
-    e.stopPropagation();
-  };
-
-  // Close volume slider when clicking outside
-  const handleClickOutside = (e) => {
-    if (!e.target.closest('.audio__volume-container')) {
-      setShowVolumeSlider(false);
-    }
-  };
-
-  useEffect(() => {
-    if (showVolumeSlider) {
-      document.addEventListener('click', handleClickOutside);
-    } else {
-      document.removeEventListener('click', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('click', handleClickOutside);
-    };
-  }, [showVolumeSlider]);
-
-  const variantClass = `audio--${size}`;
-  const colorClass = `audio--${color}`;
-  const combinedClassName = `audio ${variantClass} ${colorClass} ${className}`.trim();
-
-  return (
-    <div
-      className={combinedClassName}
-      style={style}
-      {...props}
-    >
-      <audio
-        ref={audioRef}
-        src={src}
-        loop={loop}
-        onTimeUpdate={handleTimeUpdate}
-        onLoadedMetadata={handleLoadedMetadata}
-        onEnded={() => setIsPlaying(false)}
-      >
-        Your browser does not support the audio element.
-      </audio>
-      <button
-        className="audio__play-pause"
-        onClick={togglePlayPause}
-        aria-label={isPlaying ? 'Pause' : 'Play'}
-      >
-        {isPlaying ? <FaPause /> : <FaPlay />}
-      </button>
-      <div className="audio__seek">
-        <input
-          type="range"
-          className="audio__seek-slider"
-          min="0"
-          max={duration}
-          step="0.1"
-          value={currentTime}
-          onChange={handleSeekChange}
-          aria-label="Seek Slider"
-        />
-        <div className="audio__time">
-          <span>{formatTime(currentTime)}</span> / <span>{formatTime(duration)}</span>
-        </div>
-      </div>
-      <div className="audio__volume-container">
-        <button
-          className="audio__mute"
-          onClick={handleMuteAndShowSlider}
-          aria-label={isMuted ? 'Unmute' : 'Mute'}
-        >
-          {isMuted ? <FaVolumeMute /> : <FaVolumeUp />}
-        </button>
-        <input
-          type="range"
-          className={`audio__volume-slider ${showVolumeSlider ? 'visible' : ''}`}
-          min="0"
-          max="1"
-          step="0.01"
-          value={isMuted ? 0 : volume}
-          onChange={handleVolumeChange}
-          aria-label="Volume Slider"
-        />
-      </div>
-    </div>
-  );
-};
-
-Audio.propTypes = {
-  /** Source URL of the audio file */
-  src: PropTypes.string.isRequired,
-  /** Autoplay the audio on load */
-  autoPlay: PropTypes.bool,
-  /** Loop the audio playback */
-  loop: PropTypes.bool,
-  /** Mute the audio by default */
-  muted: PropTypes.bool,
-  /** Size of the audio player */
-  size: PropTypes.oneOf(['small', 'medium']),
-  /** Color from the global palettes */
-  color: PropTypes.oneOf([
-    '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',
-  ]),
-  /** Additional CSS classes */
-  className: PropTypes.string,
-  /** Inline styles */
-  style: PropTypes.object,
-};

package/src/stories/Atoms/Audio/Audio.stories.jsx

@@ -1,191 +0,0 @@
-// src/stories/Atoms/Audio/Audio.stories.jsx
-import React from 'react';
-import { Audio } from './Audio';
-import './Audio.css';
-
-export default {
-  title: 'Atoms/Media/Audio',
-  component: Audio,
-  argTypes: {
-    src: {
-      control: 'text',
-      description: 'Source URL of the audio file.',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'required' },
-      },
-    },
-    autoPlay: {
-      control: 'boolean',
-      description: 'Autoplay the audio on load.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
-    loop: {
-      control: 'boolean',
-      description: 'Loop the audio playback.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
-    muted: {
-      control: 'boolean',
-      description: 'Mute the audio by default.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
-    size: {
-      control: {
-        type: 'select',
-        options: ['small', 'medium'],
-      },
-      description: 'Size of the audio player.',
-      table: {
-        type: { summary: 'small | medium' },
-        defaultValue: { summary: 'medium' },
-      },
-    },
-    color: {
-      control: {
-        type: 'select',
-        options: [
-          '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 from the global palettes for control icons.',
-      table: {
-        type: { summary: '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' },
-        defaultValue: { summary: 'classy-color-1' },
-      },
-    },
-    className: {
-      control: 'text',
-      description: 'Additional CSS classes.',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    style: {
-      control: 'object',
-      description: 'Inline styles.',
-      table: {
-        type: { summary: 'object' },
-      },
-    },
-  },
-};
-
-/**
- * 
- * Medium size with Classy Palette Color 1.
- */
-export const DefaultAudio = () => (
-  <Audio
-    src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
-    size="medium"
-    color="classy-color-1"
-  />
-);
-
-/**
- * 
- * Medium size, autoplay enabled with Classy Palette Color 3.
- */
-export const AutoplayAudio = () => (
-  <Audio
-    src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3"
-    autoPlay
-    size="medium"
-    color="classy-color-3"
-  />
-);
-
-/**
- * 
- * Small size with Classy Palette Color 2.
- */
-export const SmallAudio = () => (
-  <Audio
-    src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3"
-    size="small"
-    color="classy-color-2"
-  />
-);
-
-
-/**
- * 
- * Medium size, looping enabled with Classy Palette Color 4.
- */
-export const LoopingAudio = () => (
-  <Audio
-    src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3"
-    loop
-    size="medium"
-    color="classy-color-4"
-  />
-);
-
-/**
- * 
- * Medium size, muted by default with Classy Palette Color 5.
- */
-export const MutedAudio = () => (
-  <Audio
-    src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-5.mp3"
-    muted
-    size="medium"
-    color="classy-color-5"
-  />
-);
-
-/**
- * 
- * Medium size with custom styles and Classy Palette Color 1.
- */
-export const CustomStyledAudio = () => (
-  <Audio
-    src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-6.mp3"
-    size="medium"
-    color="classy-color-1"
-    style={{ border: '2px solid var(--classy-color-1)', borderRadius: '8px' }}
-  />
-);
-
-/**
- * ### Interactive Playground
- * 
- * Allows dynamic interaction with the audio props via Storybook controls.
- */
-const Template = (args) => <Audio {...args} />;
-
-export const Playground = Template.bind({});
-Playground.args = {
-  src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-7.mp3',
-  autoPlay: false,
-  loop: false,
-  muted: false,
-  size: 'medium',
-  color: 'classy-color-1',
-};
-Playground.storyName = 'Interactive Playground';

package/src/stories/Atoms/Badge/Badge.css

@@ -1,249 +0,0 @@
-/*this.GUI/src/stories/Atoms/Badge/Badge.css*/
-.badge {
-  display: inline-block;
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 14px;
-  font-weight: 600;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  margin-right: 6px;
-  margin-bottom: 6px;
-  border: 1px solid transparent;
-}
-
-/* Size Variants */
-.badge--small {
-  padding: 2px 6px;
-  font-size: 12px;
-}
-
-.badge--large {
-  padding: 6px 12px;
-  font-size: 16px;
-}
-
-/* Rounded Badge */
-.badge--round {
-  padding: 0 12px;
-  border-radius: 50px; /* Pill shape */
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  white-space: nowrap;
-}
-
-/* Primary Badge Variants */
-.badge--primary {
-  background-color: var(--primary-color);
-  color: var(--text-color-inverse);
-}
-
-/* Primary Color Variants */
-.badge--primary.info {
-  background-color: var(--info-color);
-}
-
-.badge--primary.warning {
-  background-color: var(--warning-color);
-}
-
-.badge--primary.alert {
-  background-color: var(--alert-color);
-}
-
-.badge--primary.success {
-  background-color: var(--success-color);
-}
-
-.badge--primary.neutral {
-  background-color: var(--neutral-color);
-}
-
-.badge--primary.dark {
-  background-color: var(--dark-color);
-}
-
-.badge--primary.classy-color-1 {
-  background-color: var(--classy-color-1);
-}
-
-.badge--primary.classy-color-2 {
-  background-color: var(--classy-color-2);
-}
-
-.badge--primary.classy-color-3 {
-  background-color: var(--classy-color-3);
-}
-
-.badge--primary.classy-color-4 {
-  background-color: var(--classy-color-4);
-}
-
-.badge--primary.classy-color-5 {
-  background-color: var(--classy-color-5);
-}
-
-.badge--primary.small-switch-color-1 {
-  background-color: var(--small-switch-color-1);
-}
-
-.badge--primary.small-switch-color-2 {
-  background-color: var(--small-switch-color-2);
-}
-
-.badge--primary.natural-color-1 {
-  background-color: var(--natural-color-1);
-}
-
-.badge--primary.natural-color-2 {
-  background-color: var(--natural-color-2);
-}
-
-.badge--primary.natural-color-3 {
-  background-color: var(--natural-color-3);
-}
-
-.badge--primary.grey-friend-1 {
-  background-color: var(--grey-friend-1);
-}
-
-.badge--primary.grey-friend-2 {
-  background-color: var(--grey-friend-2);
-}
-
-.badge--primary.shade-1 {
-  background-color: var(--shade-1);
-}
-
-.badge--primary.shade-2 {
-  background-color: var(--shade-2);
-}
-
-.badge--primary.shade-3 {
-  background-color: var(--shade-3);
-}
-
-.badge--primary.shade-4 {
-  background-color: var(--shade-4);
-}
-
-/* Secondary Badge Variants */
-.badge--secondary {
-  background-color: transparent;
-  border-color: var(--primary-color);
-  color: var(--primary-color);
-}
-
-/* Secondary Color Variants */
-.badge--secondary.info {
-  border-color: var(--info-color);
-  color: var(--info-color);
-}
-
-.badge--secondary.warning {
-  border-color: var(--warning-color);
-  color: var(--warning-color);
-}
-
-.badge--secondary.alert {
-  border-color: var(--alert-color);
-  color: var(--alert-color);
-}
-
-.badge--secondary.success {
-  border-color: var(--success-color);
-  color: var(--success-color);
-}
-
-.badge--secondary.neutral {
-  border-color: var(--neutral-color);
-  color: var(--neutral-color);
-}
-
-.badge--secondary.dark {
-  border-color: var(--dark-color);
-  color: var(--dark-color);
-}
-
-.badge--secondary.classy-color-1 {
-  border-color: var(--classy-color-1);
-  color: var(--classy-color-1);
-}
-
-.badge--secondary.classy-color-2 {
-  border-color: var(--classy-color-2);
-  color: var(--classy-color-2);
-}
-
-.badge--secondary.classy-color-3 {
-  border-color: var(--classy-color-3);
-  color: var(--classy-color-3);
-}
-
-.badge--secondary.classy-color-4 {
-  border-color: var(--classy-color-4);
-  color: var(--classy-color-4);
-}
-
-.badge--secondary.classy-color-5 {
-  border-color: var(--classy-color-5);
-  color: var(--classy-color-5);
-}
-
-.badge--secondary.small-switch-color-1 {
-  border-color: var(--small-switch-color-1);
-  color: var(--small-switch-color-1);
-}
-
-.badge--secondary.small-switch-color-2 {
-  border-color: var(--small-switch-color-2);
-  color: var(--small-switch-color-2);
-}
-
-.badge--secondary.natural-color-1 {
-  border-color: var(--natural-color-1);
-  color: var(--natural-color-1);
-}
-
-.badge--secondary.natural-color-2 {
-  border-color: var(--natural-color-2);
-  color: var(--natural-color-2);
-}
-
-.badge--secondary.natural-color-3 {
-  border-color: var(--natural-color-3);
-  color: var(--natural-color-3);
-}
-
-.badge--secondary.grey-friend-1 {
-  border-color: var(--grey-friend-1);
-  color: var(--grey-friend-1);
-}
-
-.badge--secondary.grey-friend-2 {
-  border-color: var(--grey-friend-2);
-  color: var(--grey-friend-2);
-}
-
-.badge--secondary.shade-1 {
-  border-color: var(--shade-1);
-  color: var(--shade-1);
-}
-
-.badge--secondary.shade-2 {
-  border-color: var(--shade-2);
-  color: var(--shade-2);
-}
-
-.badge--secondary.shade-3 {
-  border-color: var(--shade-3);
-  color: var(--shade-3);
-}
-
-.badge--secondary.shade-4 {
-  border-color: var(--shade-4);
-  color: var(--shade-4);
-}

package/src/stories/Atoms/Badge/Badge.jsx

@@ -1,54 +0,0 @@
-// src/stories/Atoms/Badge/Badge.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Badge.css';
-
-export const Badge = ({
-  label,
-  variant = 'primary',
-  size = 'normal',
-  color,
-  round = false,
-}) => {
-  const variantClass = `badge--${variant}`;
-  const sizeClass = size !== 'normal' ? `badge--${size}` : '';
-  const colorClass = color ? `${color}` : ''; // Ensure color class matches CSS
-  const roundClass = round ? 'badge--round' : '';
-
-  return (
-    <span className={`badge ${variantClass} ${sizeClass} ${colorClass} ${roundClass}`}>
-      {label}
-    </span>
-  );
-};
-
-Badge.propTypes = {
-  label: PropTypes.string.isRequired,
-  variant: PropTypes.oneOf(['primary', 'secondary']),
-  size: PropTypes.oneOf(['small', 'normal', 'large']),
-  color: PropTypes.oneOf([
-    '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',
-  ]), // Updated to oneOf with specific options
-  round: PropTypes.bool,
-};