this.gui 1.0.14 → 1.0.16

package/src/stories/Atoms/Range/Range.jsx

@@ -0,0 +1,87 @@
+// src/stories/Atoms/Range/Range.jsx
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import './Range.css';
+
+export const Range = ({
+  min = 0,
+  max = 100,
+  step = 1,
+  value = 50,
+  onChange,
+  color = 'primary', // Color of the filled range
+  thumbColor = 'primary', // Color of the thumb (controller)
+  showValue = true,
+  label = '',
+  disabled = false,
+  className = '',
+  ...props
+}) => {
+  const rangeClasses = classNames('range', className, {
+    [`range--${color}`]: color,
+    'range--disabled': disabled,
+  });
+
+  // Calculate the percentage of the range that has been covered
+  const percentage = ((value - min) / (max - min)) * 100;
+
+  return (
+    <div className={rangeClasses}>
+      {label && <label className="range__label">{label}</label>}
+      <div className="range__wrapper">
+        <input
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          onChange={onChange}
+          disabled={disabled}
+          className="range__input"
+          {...props}
+          style={{
+            background: `linear-gradient(to right, var(--${color}-color) ${percentage}%, var(--neutral-color) ${percentage}%)`,
+            '--thumb-color': `var(--${thumbColor}-color)`, // Setting the thumb color dynamically
+          }} // Set the background gradient dynamically and thumb color
+        />
+      </div>
+      {showValue && <span className="range__value">{value}</span>}
+    </div>
+  );
+};
+
+Range.propTypes = {
+  /** Minimum value for the range */
+  min: PropTypes.number,
+  /** Maximum value for the range */
+  max: PropTypes.number,
+  /** Step value */
+  step: PropTypes.number,
+  /** Current value of the range */
+  value: PropTypes.number,
+  /** Change handler */
+  onChange: PropTypes.func.isRequired,
+  /** Color for the filled portion of the range */
+  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',
+  ]),
+  /** Color for the thumb (controller) */
+  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',
+  ]),
+  /** Whether to display the current value next to the slider */
+  showValue: PropTypes.bool,
+  /** Label for the range input */
+  label: PropTypes.string,
+  /** Whether the range input is disabled */
+  disabled: PropTypes.bool,
+  /** Additional CSS classes */
+  className: PropTypes.string,
+};

package/src/stories/Atoms/Range/Range.stories.jsx

@@ -0,0 +1,110 @@
+// src/stories/Atoms/Range/Range.stories.jsx
+import React, { useState } from 'react';
+import { Range } from './Range';
+import './Range.css';
+
+export default {
+  title: 'Atoms/Interactive/Range',
+  component: Range,
+  argTypes: {
+    value: {
+      control: 'number',
+      description: 'Current value of the range input.',
+    },
+    min: {
+      control: 'number',
+      description: 'Minimum value for the range.',
+    },
+    max: {
+      control: 'number',
+      description: 'Maximum value for the range.',
+    },
+    step: {
+      control: 'number',
+      description: 'Step size for the range input.',
+    },
+    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 range component.',
+    },
+    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 thumb (controller).',
+    },
+    showValue: {
+      control: 'boolean',
+      description: 'Whether to display the current value.',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the range input.',
+    },
+    label: {
+      control: 'text',
+      description: 'Label for the range input.',
+    },
+  },
+};
+
+const Template = (args) => {
+  const [value, setValue] = useState(args.value);
+
+  return (
+    <Range
+      {...args}
+      value={value}
+      onChange={(e) => setValue(Number(e.target.value))}
+    />
+  );
+};
+
+export const DefaultRange = Template.bind({});
+DefaultRange.args = {
+  value: 50,
+  min: 0,
+  max: 100,
+  step: 1,
+  color: 'primary',
+  thumbColor: 'primary',
+  showValue: true,
+  label: 'Volume',
+  disabled: false,
+};
+
+export const WithDifferentThumbColors = () => (
+  <div style={{ display: 'flex', gap: '20px', flexDirection: 'column' }}>
+    <Range min={0} max={100} value={75} color="info" thumbColor="warning" label="Brightness" />
+    <Range min={0} max={100} value={40} color="warning" thumbColor="alert" label="Contrast" />
+    <Range min={0} max={100} value={25} color="success" thumbColor="dark" label="Volume" />
+  </div>
+);
+
+export const InteractiveRange = Template.bind({});
+InteractiveRange.args = {
+  value: 50,
+  min: 0,
+  max: 100,
+  step: 1,
+  color: 'primary',
+  thumbColor: 'info',
+  showValue: true,
+  label: 'Volume Control',
+  disabled: false,
+};
+InteractiveRange.storyName = 'Interactive Range';

package/src/stories/Atoms/Select/Select.css

@@ -1,29 +1,87 @@
+/* src/stories/Atoms/Select/Select.css */
 
+/* Base Select Styles */
 .select {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  color: var(--text-color);
+  width: 100%; /* Responsive to container */
 }
 
-.select--primary {
-  background-color: #e3f2fd;
-  border-color: #1e88e5;
+.select__label {
+  margin-bottom: var(--spacing-sm);
+  font-weight: var(--font-weight-medium);
 }
 
-.select--secondary {
-  background-color: #fff;
-  border-color: #ccc;
+.select__input {
+  appearance: none;
+  width: 100%; /* Responsive to container */
+  padding: var(--spacing-sm);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  background-color: var(--background-color);
+  color: var(--text-color);
+  font-size: var(--font-size-base);
+  transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
+  cursor: pointer;
 }
 
-.select--small {
-  padding: 8px;
+.select__input:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px var(--primary-color-hover);
+  outline: none;
 }
 
-.select--medium {
-  padding: 16px;
+.select--disabled .select__input {
+  background-color: var(--neutral-color-hover);
+  cursor: not-allowed;
 }
 
-.select--large {
-  padding: 32px;
+/* Color Variants */
+.select--primary .select__input {
+  border-color: var(--primary-color);
+}
+
+.select--secondary .select__input {
+  border-color: var(--secondary-color);
+}
+
+.select--info .select__input {
+  border-color: var(--info-color);
+}
+
+.select--warning .select__input {
+  border-color: var(--warning-color);
+}
+
+.select--alert .select__input {
+  border-color: var(--alert-color);
+}
+
+.select--success .select__input {
+  border-color: var(--success-color);
+}
+
+.select--neutral .select__input {
+  border-color: var(--neutral-color);
+}
+
+.select--dark .select__input {
+  border-color: var(--dark-color);
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+  .select__input {
+    font-size: var(--font-size-small);
+  }
+}
+
+@media (max-width: 480px) {
+  .select__input {
+    font-size: var(--font-size-small);
+    padding: var(--spacing-xs);
+  }
 }

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;
+  }
 }