this.gui 1.0.14 → 1.0.16

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

@@ -1,41 +1,129 @@
-
-import React from 'react';
+// 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';
 
-/**
- * Slider component for user interaction
- */
-export const Slider = ({ primary, size, children, ...props }) => {
-  const mode = primary ? 'slider--primary' : 'slider--secondary';
+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={['slider', `slider--${size}`, mode].join(' ')}
-      {...props}
-    >
-      {children}
+    <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 = {
-  /**
-   * 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,
+  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,
 };
-
-Slider.defaultProps = {
-  primary: false,
-  size: 'medium',
-};
-
-export default Slider;

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

@@ -1,41 +1,90 @@
-
+// src/stories/Atoms/Slider/Slider.stories.jsx
+import React, { useState } from 'react';
 import { Slider } from './Slider';
+import './Slider.css';
 
-// Storybook configuration for Slider component
 export default {
   title: 'Atoms/Interactive/Slider',
   component: Slider,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    children: { control: 'text' },
+    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',
+    },
   },
 };
 
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary Slider',
-  },
-};
+const Template = (args) => {
+  const [value, setValue] = useState(args.value || [20, 80]);
 
-export const Secondary = {
-  args: {
-    children: 'This is a secondary Slider',
-  },
+  return (
+    <Slider
+      {...args}
+      value={value}
+      onChange={setValue}
+    />
+  );
 };
 
-export const Large = {
-  args: {
-    size: 'large',
-    children: 'This is a large Slider',
-  },
-};
-
-export const Small = {
-  args: {
-    size: 'small',
-    children: 'This is a small Slider',
-  },
+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,29 +1,313 @@
+/* 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: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
+  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: #e3f2fd;
-  border-color: #1e88e5;
+  background-color: var(--primary-color);
+  color: var(--text-color-inverse);
 }
 
 .snackbar--secondary {
-  background-color: #fff;
-  border-color: #ccc;
+  background-color: transparent;
+  border: 2px solid var(--primary-color);
+  color: var(--primary-color);
 }
 
-.snackbar--small {
-  padding: 8px;
+/* Dynamic Color Classes */
+.snackbar--primary.snackbar--info {
+  background-color: var(--info-color);
 }
 
-.snackbar--medium {
-  padding: 16px;
+.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;
+  }
 }
 
-.snackbar--large {
-  padding: 32px;
+@media (max-width: 480px) {
+  .snackbar {
+    padding: 12px;
+  }
 }