this.gui 1.0.18 → 1.1.0

package/src/stories/Atoms/RadioButton/RadioButton.stories.jsx

@@ -1,113 +0,0 @@
-// src/stories/Atoms/RadioButton/RadioButton.stories.jsx
-import React, { useState } from 'react';
-import { RadioButton } from './RadioButton';
-import './RadioButton.css';
-
-export default {
-  title: 'Atoms/Interactive/RadioButton',
-  component: RadioButton,
-  argTypes: {
-    label: { control: 'text', defaultValue: 'Radio Button Label' },
-    variant: {
-      control: { type: 'select', options: ['primary', 'secondary'] },
-      description: 'Radio button variant.',
-    },
-    size: {
-      control: { type: 'select', options: ['small', 'normal', 'large'] },
-      description: 'Radio button size.',
-    },
-    color: {
-      control: {
-        type: 'select',
-        options: [
-          '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: 'Radio button color.',
-    },
-    rounded: {
-      control: 'boolean',
-      description: 'Rounded or squared radio button.',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disable the radio button.',
-    },
-  },
-};
-
-/**
- * Primary RadioButton - Normal Size
- */
-export const PrimaryNormal = () => (
-  <RadioButton label="Primary Normal RadioButton" variant="primary" size="normal" color="info" name="group1" />
-);
-
-/**
- * Secondary RadioButton - Large Size - Rounded
- */
-export const SecondaryLargeRounded = () => (
-  <RadioButton label="Secondary Large Rounded RadioButton" variant="secondary" size="large" color="warning" rounded name="group2" />
-);
-
-/**
- * Primary RadioButton - Small Size - Rounded
- */
-export const PrimarySmallRounded = () => (
-  <RadioButton label="Primary Small Rounded RadioButton" variant="primary" size="small" color="success" rounded name="group3" />
-);
-
-/**
- * Secondary RadioButton - Normal Size
- */
-export const SecondaryNormal = () => (
-  <RadioButton label="Secondary Normal RadioButton" variant="secondary" size="normal" color="neutral" name="group4" />
-);
-
-/**
- * Interactive RadioButton
- */
-const Template = (args) => {
-  const [checked, setChecked] = useState(args.checked || false);
-
-  const handleChange = (e) => {
-    setChecked(e.target.checked);
-    if (args.onChange) args.onChange(e);
-  };
-
-  return <RadioButton {...args} checked={checked} onChange={handleChange} />;
-};
-
-export const InteractiveRadioButton = Template.bind({});
-InteractiveRadioButton.args = {
-  label: 'Interactive RadioButton',
-  variant: 'primary',
-  size: 'normal',
-  color: 'info',
-  rounded: false,
-  disabled: false,
-  checked: false,
-  name: 'interactive',
-};
-InteractiveRadioButton.storyName = 'Interactive RadioButton';

package/src/stories/Atoms/Range/Range.css

@@ -1,169 +0,0 @@
-/* src/stories/Atoms/Range/Range.css */
-
-/* Base Range Styles */
-.range {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  font-family: var(--font-family);
-  font-size: var(--font-size-base);
-  color: var(--text-color);
-}
-
-.range__label {
-  margin-right: var(--spacing-md);
-  font-weight: var(--font-weight-medium);
-}
-
-.range__wrapper {
-  flex-grow: 1;
-  position: relative;
-}
-
-/* The range input */
-.range__input {
-  appearance: none;
-  width: 100%;
-  height: 8px;
-  background: linear-gradient(
-    to right,
-    var(--primary-color) 0%,
-    var(--primary-color) 0%,
-    var(--neutral-color) 0%
-  );
-  border-radius: 5px;
-  outline: none;
-  transition: background-size var(--transition-speed);
-}
-
-/* Thumb Style */
-.range__input::-webkit-slider-thumb {
-  appearance: none;
-  width: 20px;
-  height: 20px;
-  background-color: var(--thumb-color); /* Thumb color */
-  border-radius: 50%;
-  cursor: pointer;
-  transition: background-color var(--transition-speed);
-}
-
-.range__input::-moz-range-thumb {
-  width: 20px;
-  height: 20px;
-  background-color: var(--thumb-color); /* Thumb color */
-  border-radius: 50%;
-  cursor: pointer;
-}
-
-/* Value Display */
-.range__value {
-  margin-left: var(--spacing-md);
-  font-weight: var(--font-weight-medium);
-}
-
-/* Disabled State */
-.range--disabled .range__input {
-  background-color: var(--neutral-color-hover);
-}
-
-.range--disabled .range__input::-webkit-slider-thumb {
-  background-color: var(--neutral-color-hover);
-}
-
-/* Responsive Styles */
-@media (max-width: 768px) {
-  .range__input {
-    height: 6px;
-  }
-
-  .range__input::-webkit-slider-thumb {
-    width: 16px;
-    height: 16px;
-  }
-
-  .range__input::-moz-range-thumb {
-    width: 16px;
-    height: 16px;
-  }
-}
-
-@media (max-width: 480px) {
-  .range__input {
-    height: 4px;
-  }
-
-  .range__input::-webkit-slider-thumb {
-    width: 12px;
-    height: 12px;
-  }
-
-  .range__input::-moz-range-thumb {
-    width: 12px;
-    height: 12px;
-  }
-}
-
-/* Color Variants (Track) */
-.range--primary .range__input {
-  background: linear-gradient(
-    to right,
-    var(--primary-color) 0%,
-    var(--neutral-color) 0%
-  );
-}
-
-.range--secondary .range__input {
-  background: linear-gradient(
-    to right,
-    var(--secondary-color) 0%,
-    var(--neutral-color) 0%
-  );
-}
-
-.range--info .range__input {
-  background: linear-gradient(
-    to right,
-    var(--info-color) 0%,
-    var(--neutral-color) 0%
-  );
-}
-
-.range--warning .range__input {
-  background: linear-gradient(
-    to right,
-    var(--warning-color) 0%,
-    var(--neutral-color) 0%
-  );
-}
-
-.range--alert .range__input {
-  background: linear-gradient(
-    to right,
-    var(--alert-color) 0%,
-    var(--neutral-color) 0%
-  );
-}
-
-.range--success .range__input {
-  background: linear-gradient(
-    to right,
-    var(--success-color) 0%,
-    var(--neutral-color) 0%
-  );
-}
-
-.range--neutral .range__input {
-  background: linear-gradient(
-    to right,
-    var(--neutral-color) 0%,
-    var(--neutral-color) 0%
-  );
-}
-
-.range--dark .range__input {
-  background: linear-gradient(
-    to right,
-    var(--dark-color) 0%,
-    var(--neutral-color) 0%
-  );
-}

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

@@ -1,87 +0,0 @@
-// 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

@@ -1,110 +0,0 @@
-// 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';