this.gui 1.0.15 → 1.0.17

package/src/stories/Atoms/Select/Select.jsx

@@ -1,41 +1,73 @@
-
+// src/stories/Atoms/Select/Select.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import './Select.css';
 
-/**
- * Select component for user interaction
- */
-export const Select = ({ primary, size, children, ...props }) => {
-  const mode = primary ? 'select--primary' : 'select--secondary';
+export const Select = ({
+  options,
+  value,
+  onChange,
+  disabled = false,
+  label = '',
+  placeholder = 'Select an option',
+  color = 'primary', // Default to primary color
+  className = '',
+  ...props
+}) => {
+  const selectClasses = classNames('select', className, {
+    [`select--${color}`]: color, // Dynamically apply color class
+    'select--disabled': disabled,
+  });
+
   return (
-    <div
-      className={['select', `select--${size}`, mode].join(' ')}
-      {...props}
-    >
-      {children}
+    <div className={selectClasses}>
+      {label && <label className="select__label">{label}</label>}
+      <select
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        className="select__input"
+        {...props}
+      >
+        <option value="" disabled>
+          {placeholder}
+        </option>
+        {options.map((option, index) => (
+          <option key={index} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
     </div>
   );
 };
 
 Select.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,
+  /** List of options to choose from */
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+  /** Selected value */
+  value: PropTypes.string,
+  /** Change handler */
+  onChange: PropTypes.func.isRequired,
+  /** Whether the select is disabled */
+  disabled: PropTypes.bool,
+  /** Label for the select component */
+  label: PropTypes.string,
+  /** Placeholder for the select dropdown */
+  placeholder: PropTypes.string,
+  /** Color of the select component */
+  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,
 };
-
-Select.defaultProps = {
-  primary: false,
-  size: 'medium',
-};
-
-export default Select;

package/src/stories/Atoms/Select/Select.stories.jsx

@@ -1,41 +1,109 @@
-
+// src/stories/Atoms/Select/Select.stories.jsx
+import React, { useState } from 'react';
 import { Select } from './Select';
+import './Select.css';
 
-// Storybook configuration for Select component
 export default {
   title: 'Atoms/Interactive/Select',
   component: Select,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    children: { control: 'text' },
+    value: {
+      control: 'text',
+      description: 'Currently selected value.',
+    },
+    options: {
+      control: 'array',
+      description: 'List of options available for selection.',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text displayed before selecting an option.',
+    },
+    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 variant for the select component.',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the select input is disabled.',
+    },
+    label: {
+      control: 'text',
+      description: 'Label for the select input.',
+    },
   },
 };
 
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary Select',
-  },
-};
+const Template = (args) => {
+  const [selectedValue, setSelectedValue] = useState(args.value);
 
-export const Secondary = {
-  args: {
-    children: 'This is a secondary Select',
-  },
+  return (
+    <Select
+      {...args}
+      value={selectedValue}
+      onChange={(e) => setSelectedValue(e.target.value)}
+    />
+  );
 };
 
-export const Large = {
-  args: {
-    size: 'large',
-    children: 'This is a large Select',
-  },
-};
+export const WithDifferentColors = () => (
+  <div style={{ display: 'flex', gap: '20px', flexDirection: 'column' }}>
+    <Select
+      value=""
+      onChange={(e) => {}}
+      options={[
+        { label: 'Option A', value: 'A' },
+        { label: 'Option B', value: 'B' },
+      ]}
+      placeholder="Select an option"
+      label="Primary"
+      color="primary"
+    />
+    <Select
+      value=""
+      onChange={(e) => {}}
+      options={[
+        { label: 'Option C', value: 'C' },
+        { label: 'Option D', value: 'D' },
+      ]}
+      placeholder="Select an option"
+      label="Warning"
+      color="warning"
+    />
+    <Select
+      value=""
+      onChange={(e) => {}}
+      options={[
+        { label: 'Option E', value: 'E' },
+        { label: 'Option F', value: 'F' },
+      ]}
+      placeholder="Select an option"
+      label="Success"
+      color="success"
+    />
+  </div>
+);
 
-export const Small = {
-  args: {
-    size: 'small',
-    children: 'This is a small Select',
-  },
+export const InteractiveSelect = Template.bind({});
+InteractiveSelect.args = {
+  value: '',
+  options: [
+    { label: 'Option 1', value: 'option1' },
+    { label: 'Option 2', value: 'option2' },
+    { label: 'Option 3', value: 'option3' },
+  ],
+  placeholder: 'Select an option',
+  label: 'Interactive Select',
+  color: 'primary',
+  disabled: false,
 };
+InteractiveSelect.storyName = 'Interactive Select';
+

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

@@ -1,29 +1,90 @@
+/* src/stories/Atoms/Slider/Slider.css */
 
+/* Base Slider Styles */
 .slider {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  font-family: var(--font-family);
+  color: var(--text-color);
 }
 
-.slider--primary {
-  background-color: #e3f2fd;
-  border-color: #1e88e5;
+.slider__label {
+  margin-bottom: var(--spacing-sm);
+  font-weight: var(--font-weight-medium);
 }
 
-.slider--secondary {
-  background-color: #fff;
-  border-color: #ccc;
+.slider__wrapper {
+  position: relative;
+  width: 100%;
+  height: 8px;
+  background-color: var(--neutral-color-hover);
+  border-radius: 4px;
 }
 
-.slider--small {
-  padding: 8px;
+.slider__track {
+  position: absolute;
+  width: 100%;
+  height: 8px;
+  border-radius: 4px;
+  background-color: var(--neutral-color-hover);
 }
 
-.slider--medium {
-  padding: 16px;
+.slider__filled {
+  position: absolute;
+  height: 8px;
+  border-radius: 4px;
+  transition: background-color var(--transition-speed);
 }
 
-.slider--large {
-  padding: 32px;
+.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,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';