this.gui 1.0.15 → 1.0.17

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/Section/Section.css

@@ -0,0 +1,268 @@
+/* this.GUI/src/stories/Atoms/Section/Section.css */
+/* Base Section Styles */
+.section {
+  margin: var(--spacing-md) 0;
+  padding: var(--spacing-md);
+  background-color: var(--background-color);
+  transition: all var(--transition-speed) ease;
+}
+
+/* Border Styles for Section */
+.section--border {
+  border: 1px solid var(--border-color); /* Default border color */
+}
+
+.section--full-width {
+  width: 100vw;
+  margin-left: calc(-50vw + 50%);
+  padding: var(--spacing-lg);
+}
+
+/* Shadow Variants */
+.section--shadow-small {
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.section--shadow-medium {
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.section--shadow-large {
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.4);
+}
+
+/* Title Styling */
+.section__title {
+  margin-bottom: var(--spacing-md);
+  color: var(--text-color);
+  font-weight: var(--font-weight-bold);
+}
+
+/* Border Color Variants - Primary and Secondary Colors */
+.section--border-primary {
+  border-color: var(--primary-color);
+}
+
+.section--border-secondary {
+  border-color: var(--secondary-color);
+}
+
+/* Semantic Colors for Border */
+.section--border-info {
+  border-color: var(--info-color);
+}
+
+.section--border-warning {
+  border-color: var(--warning-color);
+}
+
+.section--border-alert {
+  border-color: var(--alert-color);
+}
+
+.section--border-success {
+  border-color: var(--success-color);
+}
+
+.section--border-neutral {
+  border-color: var(--neutral-color);
+}
+
+.section--border-dark {
+  border-color: var(--dark-color);
+}
+
+/* Classy Palette Variants */
+.section--border-classy-color-1 {
+  border-color: var(--classy-color-1);
+}
+
+.section--border-classy-color-2 {
+  border-color: var(--classy-color-2);
+}
+
+.section--border-classy-color-3 {
+  border-color: var(--classy-color-3);
+}
+
+.section--border-classy-color-4 {
+  border-color: var(--classy-color-4);
+}
+
+.section--border-classy-color-5 {
+  border-color: var(--classy-color-5);
+}
+
+/* Small Switch Palette Variants */
+.section--border-small-switch-color-1 {
+  border-color: var(--small-switch-color-1);
+}
+
+.section--border-small-switch-color-2 {
+  border-color: var(--small-switch-color-2);
+}
+
+/* Natural Palette Variants */
+.section--border-natural-color-1 {
+  border-color: var(--natural-color-1);
+}
+
+.section--border-natural-color-2 {
+  border-color: var(--natural-color-2);
+}
+
+.section--border-natural-color-3 {
+  border-color: var(--natural-color-3);
+}
+
+/* Grey Friends Palette Variants */
+.section--border-grey-friend-1 {
+  border-color: var(--grey-friend-1);
+}
+
+.section--border-grey-friend-2 {
+  border-color: var(--grey-friend-2);
+}
+
+/* Shades Variants */
+.section--border-shade-1 {
+  border-color: var(--shade-1);
+}
+
+.section--border-shade-2 {
+  border-color: var(--shade-2);
+}
+
+.section--border-shade-3 {
+  border-color: var(--shade-3);
+}
+
+.section--border-shade-4 {
+  border-color: var(--shade-4);
+}
+
+/* Background Color Variants */
+.section--background-primary {
+  background-color: var(--primary-color);
+  color: var(--text-color-inverse);
+}
+
+.section--background-secondary {
+  background-color: var(--secondary-color);
+  color: var(--text-color-inverse);
+}
+
+.section--background-info {
+  background-color: var(--info-color);
+  color: var(--text-color-inverse);
+}
+
+.section--background-warning {
+  background-color: var(--warning-color);
+  color: var(--text-color-inverse);
+}
+
+.section--background-alert {
+  background-color: var(--alert-color);
+  color: var(--text-color);
+}
+
+.section--background-success {
+  background-color: var(--success-color);
+  color: var(--text-color-inverse);
+}
+
+.section--background-neutral {
+  background-color: var(--neutral-color);
+  color: var(--text-color);
+}
+
+.section--background-dark {
+  background-color: var(--dark-color);
+  color: var(--text-color-inverse);
+}
+
+/* Classy Palette Background Variants */
+.section--background-classy-color-1 {
+  background-color: var(--classy-color-1);
+  color: var(--text-color-inverse);
+}
+
+.section--background-classy-color-2 {
+  background-color: var(--classy-color-2);
+  color: var(--text-color-inverse);
+}
+
+.section--background-classy-color-3 {
+  background-color: var(--classy-color-3);
+  color: var(--text-color-inverse);
+}
+
+.section--background-classy-color-4 {
+  background-color: var(--classy-color-4);
+  color: var(--text-color-inverse);
+}
+
+.section--background-classy-color-5 {
+  background-color: var(--classy-color-5);
+  color: var(--text-color-inverse);
+}
+
+/* Small Switch Palette Background Variants */
+.section--background-small-switch-color-1 {
+  background-color: var(--small-switch-color-1);
+  color: var(--text-color);
+}
+
+.section--background-small-switch-color-2 {
+  background-color: var(--small-switch-color-2);
+  color: var(--text-color-inverse);
+}
+
+/* Natural Palette Background Variants */
+.section--background-natural-color-1 {
+  background-color: var(--natural-color-1);
+  color: var(--text-color-inverse);
+}
+
+.section--background-natural-color-2 {
+  background-color: var(--natural-color-2);
+  color: var(--text-color);
+}
+
+.section--background-natural-color-3 {
+  background-color: var(--natural-color-3);
+  color: var(--text-color);
+}
+
+/* Grey Friends Background Variants */
+.section--background-grey-friend-1 {
+  background-color: var(--grey-friend-1);
+  color: var(--text-color-inverse);
+}
+
+.section--background-grey-friend-2 {
+  background-color: var(--grey-friend-2);
+  color: var(--text-color-inverse);
+}
+
+/* Shades Background Variants */
+.section--background-shade-1 {
+  background-color: var(--shade-1);
+  color: var(--text-color-inverse);
+}
+
+.section--background-shade-2 {
+  background-color: var(--shade-2);
+  color: var(--text-color-inverse);
+}
+
+.section--background-shade-3 {
+  background-color: var(--shade-3);
+  color: var(--text-color-inverse);
+}
+
+.section--background-shade-4 {
+  background-color: var(--shade-4);
+  color: var(--text-color-inverse);
+}

package/src/stories/Atoms/Section/Section.jsx

@@ -0,0 +1,63 @@
+//this.GUI/src/stories/Atoms/Section/Section.jsx
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Section.css';
+
+export const Section = ({
+  title,
+  margin,
+  padding,
+  backgroundColor,
+  border,
+  borderColor,
+  fullWidth,
+  shadow,
+  id,
+  ariaLabel,
+  children,
+}) => {
+  const sectionClasses = [
+    'section',
+    border ? `section--border section--border-${borderColor}` : '',
+    fullWidth ? 'section--full-width' : '',
+    shadow ? `section--shadow-${shadow}` : '',
+  ].join(' ').trim();
+
+  return (
+    <section id={id} className={sectionClasses} style={{ margin, padding, backgroundColor }} aria-label={ariaLabel}>
+      {title && <h2 className="section__title">{title}</h2>}
+      {children}
+    </section>
+  );
+};
+
+Section.propTypes = {
+  title: PropTypes.string,
+  margin: PropTypes.string,
+  padding: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  border: PropTypes.bool,
+  borderColor: 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'
+  ]),
+  fullWidth: PropTypes.bool,
+  shadow: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
+  id: PropTypes.string,
+  ariaLabel: PropTypes.string,
+  children: PropTypes.node.isRequired,
+};
+
+Section.defaultProps = {
+  margin: '20px 0',
+  padding: '20px',
+  backgroundColor: 'transparent',
+  border: false,
+  borderColor: 'neutral',
+  fullWidth: false,
+  shadow: 'none',
+};

package/src/stories/Atoms/Section/Section.stories.jsx

@@ -0,0 +1,46 @@
+//this.GUI/src/stories/Atoms/Section/Section.stories.jsx
+import React from 'react';
+import { Section } from './Section';
+
+export default {
+  title: 'Atoms/Layout/Section',
+  component: Section,
+  argTypes: {
+    title: { control: 'text', defaultValue: 'Section Title' },
+    margin: { control: 'text', defaultValue: '20px 0' },
+    padding: { control: 'text', defaultValue: '20px' },
+    backgroundColor: { control: 'color', defaultValue: 'transparent' },
+    border: { control: 'boolean', defaultValue: false },
+    borderColor: {
+      control: 'select',
+      options: ['primary', 'secondary', 'info', 'warning', 'alert', 'success', 'neutral', 'dark'],
+      defaultValue: 'neutral',
+    },
+    fullWidth: { control: 'boolean', defaultValue: false },
+    shadow: {
+      control: 'select',
+      options: ['none', 'small', 'medium', 'large'],
+      defaultValue: 'none',
+    },
+    id: { control: 'text', defaultValue: 'section-1' },
+    ariaLabel: { control: 'text', defaultValue: 'Main Section' },
+  },
+};
+
+export const DefaultSection = (args) => (
+  <Section {...args}>
+    <p>This is a section with some default content.</p>
+  </Section>
+);
+
+export const SectionWithBorder = (args) => (
+  <Section {...args} border={true} borderColor="primary">
+    <p>This section has a border.</p>
+  </Section>
+);
+
+export const FullWidthSection = (args) => (
+  <Section {...args} fullWidth={true} shadow="medium">
+    <p>This is a full-width section with a medium shadow.</p>
+  </Section>
+);

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