this.gui 1.0.18 → 1.1.0

package/src/stories/Atoms/Section/Section.css

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

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

@@ -1,46 +0,0 @@
-//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,87 +0,0 @@
-/* src/stories/Atoms/Select/Select.css */
-
-/* Base Select Styles */
-.select {
-  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__label {
-  margin-bottom: var(--spacing-sm);
-  font-weight: var(--font-weight-medium);
-}
-
-.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__input:focus {
-  border-color: var(--primary-color);
-  box-shadow: 0 0 0 3px var(--primary-color-hover);
-  outline: none;
-}
-
-.select--disabled .select__input {
-  background-color: var(--neutral-color-hover);
-  cursor: not-allowed;
-}
-
-/* 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,73 +0,0 @@
-// src/stories/Atoms/Select/Select.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import './Select.css';
-
-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={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 = {
-  /** 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,
-};

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

@@ -1,109 +0,0 @@
-// src/stories/Atoms/Select/Select.stories.jsx
-import React, { useState } from 'react';
-import { Select } from './Select';
-import './Select.css';
-
-export default {
-  title: 'Atoms/Interactive/Select',
-  component: Select,
-  argTypes: {
-    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.',
-    },
-  },
-};
-
-const Template = (args) => {
-  const [selectedValue, setSelectedValue] = useState(args.value);
-
-  return (
-    <Select
-      {...args}
-      value={selectedValue}
-      onChange={(e) => setSelectedValue(e.target.value)}
-    />
-  );
-};
-
-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 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';
-