this.gui 1.0.15 → 1.0.17

package/src/stories/Atoms/ProgressBar/ProgressBar.stories.jsx

@@ -1,41 +1,86 @@
-
+// this.GUI/src/stories/Atoms/ProgressBar/ProgressBar.stories.jsx
+import React from 'react';
 import { ProgressBar } from './ProgressBar';
+import './ProgressBar.css'; // Import the CSS styles
 
-// Storybook configuration for ProgressBar component
 export default {
   title: 'Atoms/Feedback/ProgressBar',
   component: ProgressBar,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    children: { control: 'text' },
+    color: {
+      control: {
+        type: 'select',
+        options: [
+          'primary', 'secondary', 'info', 'warning', 'alert', 'success', 'neutral', 'dark',
+          'classy-1', 'classy-2', 'classy-3', 'classy-4', 'classy-5',
+          'small-switch-1', 'small-switch-2',
+          'natural-1', 'natural-2', 'natural-3',
+          'grey-friend-1', 'grey-friend-2',
+          'shade-1', 'shade-2', 'shade-3', 'shade-4'
+        ],
+      },
+      description: 'Semantic color of the progress bar.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'primary' },
+      },
+    },
+    progress: {
+      control: {
+        type: 'number',
+      },
+      description: 'Percentage of progress completed.',
+      table: {
+        type: { summary: 'number' },
+      },
+    },
+    label: {
+      control: 'text',
+      description: 'Optional label text displayed within the progress bar.',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    showLabel: {
+      control: 'boolean',
+      description: 'Whether to display the label within the progress bar.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
+    },
   },
 };
 
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary ProgressBar',
-  },
-};
+const Template = (args) => <ProgressBar {...args} />;
 
-export const Secondary = {
-  args: {
-    children: 'This is a secondary ProgressBar',
-  },
+export const Default = Template.bind({});
+Default.args = {
+  progress: 50,
+  color: 'primary',
+  label: '50% Complete',
+  showLabel: true,
 };
 
-export const Large = {
-  args: {
-    size: 'large',
-    children: 'This is a large ProgressBar',
-  },
-};
+export const WithDifferentColors = () => (
+  <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+    {[
+      'primary', 'secondary', 'info', 'warning', 'alert', 'success', 'neutral', 'dark',
+      'classy-1', 'classy-2', 'classy-3', 'classy-4', 'classy-5',
+      'small-switch-1', 'small-switch-2',
+      'natural-1', 'natural-2', 'natural-3',
+      'grey-friend-1', 'grey-friend-2',
+      'shade-1', 'shade-2', 'shade-3', 'shade-4'
+    ].map((color) => (
+      <ProgressBar key={color} progress={75} color={color} label={`${color} bar`} />
+    ))}
+  </div>
+);
 
-export const Small = {
-  args: {
-    size: 'small',
-    children: 'This is a small ProgressBar',
-  },
+export const InteractivePlayground = Template.bind({});
+InteractivePlayground.args = {
+  progress: 60,
+  color: 'info',
+  label: 'Interactive Progress',
+  showLabel: true,
 };

package/src/stories/Atoms/RadioButton/RadioButton.css

@@ -1,29 +1,130 @@
+/* src/stories/Atoms/RadioButton/RadioButton.css */
 
-.radiobutton {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
+/* Base RadioButton Styles */
+.radio-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  font-family: var(--font-family);
+  font-size: var(--font-size-base); /* Inherit base font size */
+  color: var(--text-color);
+  user-select: none;
 }
 
-.radiobutton--primary {
-  background-color: #e3f2fd;
-  border-color: #1e88e5;
+/* Disabled State */
+.radio-button--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
 }
 
-.radiobutton--secondary {
-  background-color: #fff;
-  border-color: #ccc;
+/* Hidden RadioButton Input */
+.radio-button input {
+  opacity: 0;
+  position: absolute;
+  cursor: pointer;
+  height: 0;
+  width: 0;
 }
 
-.radiobutton--small {
-  padding: 8px;
+/* Custom RadioButton */
+.radio-button::before {
+  content: '';
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  border: 2px solid var(--border-color);
+  border-radius: 50%;
+  background-color: var(--background-color);
+  transition: background-color var(--transition-speed), border-color var(--transition-speed);
 }
 
-.radiobutton--medium {
-  padding: 16px;
+/* Checked State */
+.radio-button input:checked + .radio-button__label::before {
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
 }
 
-.radiobutton--large {
-  padding: 32px;
+/* Dot inside radio button */
+.radio-button input:checked + .radio-button__label::after {
+  content: '';
+  position: absolute;
+  left: 6px;
+  top: 6px;
+  width: 6px;
+  height: 6px;
+  background-color: var(--text-color-inverse);
+  border-radius: 50%;
 }
+
+/* Variants */
+.radio-button--primary::before {
+  border-color: var(--primary-color);
+}
+
+.radio-button--secondary::before {
+  border-color: var(--secondary-color);
+}
+
+/* Sizes */
+.radio-button--small {
+  font-size: var(--font-size-small); /* Inherit small font size */
+}
+
+.radio-button--large {
+  font-size: var(--font-size-large); /* Inherit large font size */
+}
+
+.radio-button--small::before {
+  width: 12px;
+  height: 12px;
+}
+
+.radio-button--large::before {
+  width: 20px;
+  height: 20px;
+}
+
+/* Color Classes */
+.info {
+  --primary-color: var(--info-color);
+}
+
+.warning {
+  --primary-color: var(--warning-color);
+}
+
+.alert {
+  --primary-color: var(--alert-color);
+}
+
+.success {
+  --primary-color: var(--success-color);
+}
+
+.neutral {
+  --primary-color: var(--neutral-color);
+}
+
+.dark {
+  --primary-color: var(--dark-color);
+}
+
+/* Additional color classes for customization */
+.classy-color-1 { --primary-color: var(--classy-color-1); }
+.classy-color-2 { --primary-color: var(--classy-color-2); }
+.classy-color-3 { --primary-color: var(--classy-color-3); }
+.classy-color-4 { --primary-color: var(--classy-color-4); }
+.classy-color-5 { --primary-color: var(--classy-color-5); }
+.small-switch-color-1 { --primary-color: var(--small-switch-color-1); }
+.small-switch-color-2 { --primary-color: var(--small-switch-color-2); }
+.natural-color-1 { --primary-color: var(--natural-color-1); }
+.natural-color-2 { --primary-color: var(--natural-color-2); }
+.natural-color-3 { --primary-color: var(--natural-color-3); }
+.grey-friend-1 { --primary-color: var(--grey-friend-1); }
+.grey-friend-2 { --primary-color: var(--grey-friend-2); }
+.shade-1 { --primary-color: var(--shade-1); }
+.shade-2 { --primary-color: var(--shade-2); }
+.shade-3 { --primary-color: var(--shade-3); }
+.shade-4 { --primary-color: var(--shade-4); }

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

@@ -1,41 +1,87 @@
-
+// src/stories/Atoms/RadioButton/RadioButton.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import './RadioButton.css';
 
-/**
- * RadioButton component for user interaction
- */
-export const RadioButton = ({ primary, size, children, ...props }) => {
-  const mode = primary ? 'radiobutton--primary' : 'radiobutton--secondary';
+export const RadioButton = ({
+  label,
+  checked = false,
+  onChange,
+  variant = 'primary',
+  size = 'normal',
+  color = 'info',
+  rounded = false,
+  disabled = false,
+  name = '',
+  className = '',
+  ...props
+}) => {
+  const radioButtonClasses = classNames('radio-button', className, {
+    [`radio-button--${variant}`]: variant,
+    [`radio-button--${size}`]: size !== 'normal',
+    [color]: color,
+    'radio-button--rounded': rounded,
+    'radio-button--disabled': disabled,
+  });
+
   return (
-    <div
-      className={['radiobutton', `radiobutton--${size}`, mode].join(' ')}
-      {...props}
-    >
-      {children}
-    </div>
+    <label className={radioButtonClasses}>
+      <input
+        type="radio"
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        name={name}
+        {...props}
+      />
+      <span className="radio-button__label">{label}</span>
+    </label>
   );
 };
 
 RadioButton.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,
+  /** Label text for the radio button */
+  label: PropTypes.string.isRequired,
+  /** Checked state of the radio button */
+  checked: PropTypes.bool,
+  /** Change handler */
+  onChange: PropTypes.func,
+  /** Radio button variant */
+  variant: PropTypes.oneOf(['primary', 'secondary']),
+  /** Size of the radio button */
+  size: PropTypes.oneOf(['small', 'normal', 'large']),
+  /** Color from the global palette */
+  color: PropTypes.oneOf([
+    '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',
+  ]),
+  /** Rounded or squared */
+  rounded: PropTypes.bool,
+  /** Disabled state */
+  disabled: PropTypes.bool,
+  /** Name of the radio button group */
+  name: PropTypes.string.isRequired,
+  /** Additional CSS classes */
+  className: PropTypes.string,
 };
-
-RadioButton.defaultProps = {
-  primary: false,
-  size: 'medium',
-};
-
-export default RadioButton;

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

@@ -1,41 +1,113 @@
-
+// src/stories/Atoms/RadioButton/RadioButton.stories.jsx
+import React, { useState } from 'react';
 import { RadioButton } from './RadioButton';
+import './RadioButton.css';
 
-// Storybook configuration for RadioButton component
 export default {
   title: 'Atoms/Interactive/RadioButton',
   component: RadioButton,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    children: { control: 'text' },
+    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.',
+    },
   },
 };
 
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary RadioButton',
-  },
-};
+/**
+ * Primary RadioButton - Normal Size
+ */
+export const PrimaryNormal = () => (
+  <RadioButton label="Primary Normal RadioButton" variant="primary" size="normal" color="info" name="group1" />
+);
 
-export const Secondary = {
-  args: {
-    children: 'This is a secondary RadioButton',
-  },
-};
+/**
+ * Secondary RadioButton - Large Size - Rounded
+ */
+export const SecondaryLargeRounded = () => (
+  <RadioButton label="Secondary Large Rounded RadioButton" variant="secondary" size="large" color="warning" rounded name="group2" />
+);
 
-export const Large = {
-  args: {
-    size: 'large',
-    children: 'This is a large RadioButton',
-  },
+/**
+ * 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 Small = {
-  args: {
-    size: 'small',
-    children: 'This is a small RadioButton',
-  },
+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

@@ -0,0 +1,169 @@
+/* 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%
+  );
+}