this.gui 1.0.17 → 1.1.0

package/src/stories/Atoms/Slider/Slider.css

@@ -1,90 +0,0 @@
-/* src/stories/Atoms/Slider/Slider.css */
-
-/* Base Slider Styles */
-.slider {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  font-family: var(--font-family);
-  color: var(--text-color);
-}
-
-.slider__label {
-  margin-bottom: var(--spacing-sm);
-  font-weight: var(--font-weight-medium);
-}
-
-.slider__wrapper {
-  position: relative;
-  width: 100%;
-  height: 8px;
-  background-color: var(--neutral-color-hover);
-  border-radius: 4px;
-}
-
-.slider__track {
-  position: absolute;
-  width: 100%;
-  height: 8px;
-  border-radius: 4px;
-  background-color: var(--neutral-color-hover);
-}
-
-.slider__filled {
-  position: absolute;
-  height: 8px;
-  border-radius: 4px;
-  transition: background-color var(--transition-speed);
-}
-
-.slider__thumb {
-  appearance: none;
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  background-color: var(--thumb-color);
-  border-radius: 50%;
-  top: -6px; /* Adjust for thumb size */
-  cursor: pointer;
-  transition: background-color var(--transition-speed);
-}
-
-.slider__thumb:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px var(--primary-color-hover);
-}
-
-.slider__values {
-  display: flex;
-  justify-content: space-between;
-  margin-top: var(--spacing-sm);
-}
-
-.slider--disabled .slider__thumb {
-  cursor: not-allowed;
-  background-color: var(--neutral-color-hover);
-}
-
-/* Color Variants */
-.slider--primary .slider__filled {
-  background-color: var(--primary-color);
-}
-
-.slider--secondary .slider__filled {
-  background-color: var(--secondary-color);
-}
-
-/* Responsive Adjustments */
-@media (max-width: 768px) {
-  .slider__thumb {
-    width: 15px;
-    height: 15px;
-  }
-}
-
-@media (max-width: 480px) {
-  .slider__thumb {
-    width: 12px;
-    height: 12px;
-  }
-}

package/src/stories/Atoms/Slider/Slider.jsx

@@ -1,129 +0,0 @@
-// src/stories/Atoms/Slider/Slider.jsx
-//NOTSTABLE 
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import './Slider.css';
-
-export const Slider = ({
-  min = 0,
-  max = 100,
-  step = 1,
-  value = [20, 80], // Default for dual handle
-  onChange,
-  color = 'primary', // Track color
-  thumbColor = 'primary', // Thumb color
-  showValue = true, // Show current value above the slider
-  label = '',
-  dual = false, // Single or dual handle slider
-  disabled = false,
-  className = '',
-  ...props
-}) => {
-  const [sliderValue, setSliderValue] = useState(value);
-
-  // Sync with external value changes
-  useEffect(() => {
-    setSliderValue(value);
-  }, [value]);
-
-  // Handle thumb value changes
-  const handleSliderChange = (e, index) => {
-    const newValue = [...sliderValue];
-    newValue[index] = Number(e.target.value);
-
-    // Ensure correct ordering for dual sliders (min <= max)
-    if (dual && newValue[0] > newValue[1]) return;
-
-    setSliderValue(newValue);
-    onChange && onChange(newValue);
-  };
-
-  // Calculate thumb position percentages
-  const percentage1 = ((sliderValue[0] - min) / (max - min)) * 100;
-  const percentage2 = dual ? ((sliderValue[1] - min) / (max - min)) * 100 : percentage1;
-
-  const sliderClasses = classNames('slider', className, {
-    [`slider--${color}`]: color,
-    'slider--disabled': disabled,
-  });
-
-  return (
-    <div className={sliderClasses}>
-      {label && <label className="slider__label">{label}</label>}
-      <div className="slider__wrapper">
-        <div className="slider__track" />
-        <div
-          className="slider__filled"
-          style={{
-            left: `${percentage1}%`,
-            right: `${100 - percentage2}%`,
-            background: `var(--${color}-color)`,
-          }}
-        />
-        <input
-          type="range"
-          min={min}
-          max={max}
-          step={step}
-          value={sliderValue[0]}
-          onChange={(e) => handleSliderChange(e, 0)}
-          disabled={disabled}
-          className="slider__thumb"
-          style={{ left: `${percentage1}%`, '--thumb-color': `var(--${thumbColor}-color)` }}
-          {...props}
-        />
-        {dual && (
-          <input
-            type="range"
-            min={min}
-            max={max}
-            step={step}
-            value={sliderValue[1]}
-            onChange={(e) => handleSliderChange(e, 1)}
-            disabled={disabled}
-            className="slider__thumb"
-            style={{ left: `${percentage2}%`, '--thumb-color': `var(--${thumbColor}-color)` }}
-            {...props}
-          />
-        )}
-      </div>
-      {showValue && (
-        <div className="slider__values">
-          {dual ? (
-            <>
-              <span>{sliderValue[0]}</span> - <span>{sliderValue[1]}</span>
-            </>
-          ) : (
-            <span>{sliderValue[0]}</span>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-Slider.propTypes = {
-  min: PropTypes.number,
-  max: PropTypes.number,
-  step: PropTypes.number,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
-  onChange: PropTypes.func,
-  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',
-  ]),
-  thumbColor: 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',
-  ]),
-  showValue: PropTypes.bool,
-  label: PropTypes.string,
-  dual: PropTypes.bool,
-  disabled: PropTypes.bool,
-  className: PropTypes.string,
-};

package/src/stories/Atoms/Slider/Slider.stories.jsx

@@ -1,90 +0,0 @@
-// src/stories/Atoms/Slider/Slider.stories.jsx
-import React, { useState } from 'react';
-import { Slider } from './Slider';
-import './Slider.css';
-
-export default {
-  title: 'Atoms/Interactive/Slider',
-  component: Slider,
-  argTypes: {
-    value: {
-      control: 'array',
-      description: 'Current value(s) of the slider',
-    },
-    min: {
-      control: 'number',
-      description: 'Minimum value for the slider',
-    },
-    max: {
-      control: 'number',
-      description: 'Maximum value for the slider',
-    },
-    step: {
-      control: 'number',
-      description: 'Step size for the slider',
-    },
-    color: {
-      control: {
-        type: 'select',
-        options: [
-          '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',
-        ],
-      },
-      description: 'Color of the slider track',
-    },
-    thumbColor: {
-      control: {
-        type: 'select',
-        options: [
-          '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',
-        ],
-      },
-      description: 'Color of the slider thumb',
-    },
-    dual: {
-      control: 'boolean',
-      description: 'Enable dual handle for range selection',
-    },
-    showValue: {
-      control: 'boolean',
-      description: 'Display the current value(s) above the slider',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disable the slider',
-    },
-  },
-};
-
-const Template = (args) => {
-  const [value, setValue] = useState(args.value || [20, 80]);
-
-  return (
-    <Slider
-      {...args}
-      value={value}
-      onChange={setValue}
-    />
-  );
-};
-
-export const InteractiveSlider = Template.bind({});
-InteractiveSlider.args = {
-  value: [20, 80],
-  min: 0,
-  max: 100,
-  step: 1,
-  color: 'primary',
-  thumbColor: 'info',
-  showValue: true,
-  dual: true,
-  label: 'Select Range',
-  disabled: false,
-};
-InteractiveSlider.storyName = 'Interactive Slider';

package/src/stories/Atoms/Snackbar/Snackbar.css

@@ -1,313 +0,0 @@
-/* src/stories/Atoms/Snackbar/Snackbar.css */
-
-/* Base Snackbar Styles */
-.snackbar {
-  position: fixed;
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  border-radius: var(--border-radius);
-  font-family: var(--font-family);
-  font-size: var(--font-size-base);
-  box-shadow: var(--box-shadow);
-  transition: opacity 0.3s ease, bottom 0.3s ease;
-  opacity: 0;
-  z-index: var(--z-index-modal);
-}
-
-.snackbar--visible {
-  opacity: 1;
-  bottom: 40px;
-}
-
-.snackbar--hidden {
-  opacity: 0;
-  bottom: 20px;
-}
-
-/* Snackbar Variants */
-.snackbar--primary {
-  background-color: var(--primary-color);
-  color: var(--text-color-inverse);
-}
-
-.snackbar--secondary {
-  background-color: transparent;
-  border: 2px solid var(--primary-color);
-  color: var(--primary-color);
-}
-
-/* Dynamic Color Classes */
-.snackbar--primary.snackbar--info {
-  background-color: var(--info-color);
-}
-
-.snackbar--secondary.snackbar--info {
-  border-color: var(--info-color);
-  color: var(--info-color);
-}
-
-/* Add all the color classes in the same pattern as above for 'warning', 'alert', 'success', etc. 
-  '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',*/
-/* Primary Snackbar (with background) */
-.snackbar--primary.snackbar--info {
-  background-color: var(--info-color);
-}
-
-.snackbar--primary.snackbar--warning {
-  background-color: var(--warning-color);
-}
-
-.snackbar--primary.snackbar--alert {
-  background-color: var(--alert-color);
-}
-
-.snackbar--primary.snackbar--success {
-  background-color: var(--success-color);
-}
-
-.snackbar--primary.snackbar--neutral {
-  background-color: var(--neutral-color);
-}
-
-.snackbar--primary.snackbar--dark {
-  background-color: var(--dark-color);
-}
-
-/* Classy Palette Colors for Primary Variant */
-.snackbar--primary.snackbar--classy-color-1 {
-  background-color: var(--classy-color-1);
-}
-
-.snackbar--primary.snackbar--classy-color-2 {
-  background-color: var(--classy-color-2);
-}
-
-.snackbar--primary.snackbar--classy-color-3 {
-  background-color: var(--classy-color-3);
-}
-
-.snackbar--primary.snackbar--classy-color-4 {
-  background-color: var(--classy-color-4);
-}
-
-.snackbar--primary.snackbar--classy-color-5 {
-  background-color: var(--classy-color-5);
-}
-
-/* Small Switch Palette Colors for Primary Variant */
-.snackbar--primary.snackbar--small-switch-color-1 {
-  background-color: var(--small-switch-color-1);
-}
-
-.snackbar--primary.snackbar--small-switch-color-2 {
-  background-color: var(--small-switch-color-2);
-}
-
-/* Natural Palette Colors for Primary Variant */
-.snackbar--primary.snackbar--natural-color-1 {
-  background-color: var(--natural-color-1);
-}
-
-.snackbar--primary.snackbar--natural-color-2 {
-  background-color: var(--natural-color-2);
-}
-
-.snackbar--primary.snackbar--natural-color-3 {
-  background-color: var(--natural-color-3);
-}
-
-/* Grey Friends for Primary Variant */
-.snackbar--primary.snackbar--grey-friend-1 {
-  background-color: var(--grey-friend-1);
-}
-
-.snackbar--primary.snackbar--grey-friend-2 {
-  background-color: var(--grey-friend-2);
-}
-
-/* Shades for Primary Variant */
-.snackbar--primary.snackbar--shade-1 {
-  background-color: var(--shade-1);
-}
-
-.snackbar--primary.snackbar--shade-2 {
-  background-color: var(--shade-2);
-}
-
-.snackbar--primary.snackbar--shade-3 {
-  background-color: var(--shade-3);
-}
-
-.snackbar--primary.snackbar--shade-4 {
-  background-color: var(--shade-4);
-}
-
-/* Secondary Snackbar (border only) */
-.snackbar--secondary.snackbar--info {
-  border-color: var(--info-color);
-  color: var(--info-color);
-}
-
-.snackbar--secondary.snackbar--warning {
-  border-color: var(--warning-color);
-  color: var(--warning-color);
-}
-
-.snackbar--secondary.snackbar--alert {
-  border-color: var(--alert-color);
-  color: var(--alert-color);
-}
-
-.snackbar--secondary.snackbar--success {
-  border-color: var(--success-color);
-  color: var(--success-color);
-}
-
-.snackbar--secondary.snackbar--neutral {
-  border-color: var(--neutral-color);
-  color: var(--neutral-color);
-}
-
-.snackbar--secondary.snackbar--dark {
-  border-color: var(--dark-color);
-  color: var(--dark-color);
-}
-
-/* Classy Palette Colors for Secondary Variant */
-.snackbar--secondary.snackbar--classy-color-1 {
-  border-color: var(--classy-color-1);
-  color: var(--classy-color-1);
-}
-
-.snackbar--secondary.snackbar--classy-color-2 {
-  border-color: var(--classy-color-2);
-  color: var(--classy-color-2);
-}
-
-.snackbar--secondary.snackbar--classy-color-3 {
-  border-color: var(--classy-color-3);
-  color: var(--classy-color-3);
-}
-
-.snackbar--secondary.snackbar--classy-color-4 {
-  border-color: var(--classy-color-4);
-  color: var(--classy-color-4);
-}
-
-.snackbar--secondary.snackbar--classy-color-5 {
-  border-color: var(--classy-color-5);
-  color: var(--classy-color-5);
-}
-
-/* Small Switch Palette Colors for Secondary Variant */
-.snackbar--secondary.snackbar--small-switch-color-1 {
-  border-color: var(--small-switch-color-1);
-  color: var(--small-switch-color-1);
-}
-
-.snackbar--secondary.snackbar--small-switch-color-2 {
-  border-color: var(--small-switch-color-2);
-  color: var(--small-switch-color-2);
-}
-
-/* Natural Palette Colors for Secondary Variant */
-.snackbar--secondary.snackbar--natural-color-1 {
-  border-color: var(--natural-color-1);
-  color: var(--natural-color-1);
-}
-
-.snackbar--secondary.snackbar--natural-color-2 {
-  border-color: var(--natural-color-2);
-  color: var(--natural-color-2);
-}
-
-.snackbar--secondary.snackbar--natural-color-3 {
-  border-color: var(--natural-color-3);
-  color: var(--natural-color-3);
-}
-
-/* Grey Friends for Secondary Variant */
-.snackbar--secondary.snackbar--grey-friend-1 {
-  border-color: var(--grey-friend-1);
-  color: var(--grey-friend-1);
-}
-
-.snackbar--secondary.snackbar--grey-friend-2 {
-  border-color: var(--grey-friend-2);
-  color: var(--grey-friend-2);
-}
-
-/* Shades for Secondary Variant */
-.snackbar--secondary.snackbar--shade-1 {
-  border-color: var(--shade-1);
-  color: var(--shade-1);
-}
-
-.snackbar--secondary.snackbar--shade-2 {
-  border-color: var(--shade-2);
-  color: var(--shade-2);
-}
-
-.snackbar--secondary.snackbar--shade-3 {
-  border-color: var(--shade-3);
-  color: var(--shade-3);
-}
-
-.snackbar--secondary.snackbar--shade-4 {
-  border-color: var(--shade-4);
-  color: var(--shade-4);
-}
-
-
-.snackbar__message {
-  flex-grow: 1;
-  margin-right: 16px;
-}
-
-.snackbar__action {
-  background: none;
-  border: none;
-  color: var(--text-color-inverse);
-  cursor: pointer;
-  font-weight: bold;
-  margin-right: 16px;
-}
-
-.snackbar__action:hover {
-  text-decoration: underline;
-}
-
-.snackbar__close {
-  background: none;
-  border: none;
-  font-size: 20px;
-  cursor: pointer;
-  color: var(--text-color-inverse);
-}
-
-.snackbar__close:hover {
-  color: var(--text-color-inverse);
-}
-
-/* Responsive Adjustments */
-@media (max-width: 768px) {
-  .snackbar {
-    width: 90%;
-    left: 5%;
-    transform: none;
-  }
-}
-
-@media (max-width: 480px) {
-  .snackbar {
-    padding: 12px;
-  }
-}

package/src/stories/Atoms/Snackbar/Snackbar.jsx

@@ -1,72 +0,0 @@
-// src/stories/Atoms/Snackbar/Snackbar.jsx
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import './Snackbar.css';
-
-export const Snackbar = ({
-  message,
-  duration = 3000,
-  actionLabel = '',
-  onActionClick = null,
-  onClose,
-  variant = 'primary', // 'primary' (with background) or 'secondary' (border only)
-  color = 'primary', // Global theme color for background/border/text
-  className = '',
-}) => {
-  const [visible, setVisible] = useState(true);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setVisible(false);
-      if (onClose) onClose();
-    }, duration);
-
-    return () => clearTimeout(timer);
-  }, [duration, onClose]);
-
-  const snackbarClasses = classNames('snackbar', className, {
-    [`snackbar--${variant}`]: variant,
-    [`snackbar--${color}`]: color,
-    'snackbar--visible': visible,
-    'snackbar--hidden': !visible,
-  });
-
-  return (
-    <div className={snackbarClasses}>
-      <span className="snackbar__message">{message}</span>
-      {actionLabel && (
-        <button className="snackbar__action" onClick={onActionClick}>
-          {actionLabel}
-        </button>
-      )}
-      <button className="snackbar__close" onClick={() => setVisible(false)}>
-        &times;
-      </button>
-    </div>
-  );
-};
-
-Snackbar.propTypes = {
-  /** Message to be displayed in the snackbar */
-  message: PropTypes.string.isRequired,
-  /** Duration before the snackbar disappears */
-  duration: PropTypes.number,
-  /** Label for the action button */
-  actionLabel: PropTypes.string,
-  /** Function to be called when action button is clicked */
-  onActionClick: PropTypes.func,
-  /** Function to be called when the snackbar is closed */
-  onClose: PropTypes.func,
-  /** Variant of the snackbar: 'primary' (background) or 'secondary' (border only) */
-  variant: PropTypes.oneOf(['primary', 'secondary']),
-  /** Color for background, border, and text */
-  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',
-  ]),
-  /** Additional CSS classes */
-  className: PropTypes.string,
-};