this.gui 1.0.18 → 1.1.0

package/src/stories/Molecules/ButtonGroup/ButtonGroup.css

@@ -1,465 +0,0 @@
-/* this.GUI/src/stories/Molecules/ButtonGroup/ButtonGroup.css */ 
-/*Base Styles */
-.button-group {
-  display: inline-flex;
-  gap: var(--spacing-sm);
-}
-
-.button-group__button {
-  padding: var(--button-padding, 8px 16px);
-  border-radius: var(--border-radius, 4px);
-  cursor: pointer;
-  transition: background-color var(--transition-speed, 0.3s), border-color var(--transition-speed, 0.3s), color var(--transition-speed, 0.3s);
-  font-size: inherit;
-  border: none;
-}
-
-.button-group__button:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px var(--focus-outline-color, rgba(0, 0, 0, 0.2));
-}
-
-/* Solid Variant */
-.button-group--solid .button-group__button {
-  background-color: var(--primary-color);
-  color: var(--text-color-inverse);
-}
-
-.button-group--solid .button-group__button:hover {
-  background-color: var(--primary-color-hover);
-}
-
-/* Size Variants */
-.button-group--small .button-group__button {
-  font-size: 0.75rem;
-  padding: 6px 12px;
-}
-
-.button-group--medium .button-group__button {
-  font-size: 1rem;
-  padding: 8px 16px;
-}
-
-.button-group--large .button-group__button {
-  font-size: 1.25rem;
-  padding: 12px 20px;
-}
-
-/* Solid Color Variants */
-.button-group--primary .button-group__button {
-  background-color: var(--primary-color);
-  color: var(--text-color-inverse);
-}
-
-.button-group--primary .button-group__button:hover {
-  background-color: var(--primary-color-hover);
-}
-
-.button-group--secondary .button-group__button {
-  background-color: var(--secondary-color);
-  color: var(--text-color-inverse);
-}
-
-.button-group--secondary .button-group__button:hover {
-  background-color: var(--secondary-color-hover);
-}
-
-.button-group--info .button-group__button {
-  background-color: var(--info-color);
-  color: var(--text-color-inverse);
-}
-
-.button-group--info .button-group__button:hover {
-  background-color: var(--info-color-hover);
-}
-
-.button-group--warning .button-group__button {
-  background-color: var(--warning-color);
-  color: var(--text-color-inverse);
-}
-
-.button-group--warning .button-group__button:hover {
-  background-color: var(--warning-color-hover);
-}
-
-.button-group--alert .button-group__button {
-  background-color: var(--alert-color);
-  color: var(--text-color-inverse);
-}
-
-.button-group--alert .button-group__button:hover {
-  background-color: var(--alert-color-hover);
-}
-
-.button-group--success .button-group__button {
-  background-color: var(--success-color);
-  color: var(--text-color-inverse);
-}
-
-.button-group--success .button-group__button:hover {
-  background-color: var(--success-color-hover);
-}
-
-.button-group--neutral .button-group__button {
-  background-color: var(--neutral-color);
-  color: var(--text-color-inverse);
-}
-
-.button-group--neutral .button-group__button:hover {
-  background-color: var(--neutral-color-hover);
-}
-
-.button-group--dark .button-group__button {
-  background-color: var(--dark-color);
-  color: var(--text-color-inverse);
-}
-
-.button-group--dark .button-group__button:hover {
-  background-color: var(--dark-color-hover);
-}
-
-/* Classy Palette Solid Variants */
-.button-group--classy-color-1 .button-group__button {
-  background-color: var(--classy-color-1);
-  color: var(--text-color-inverse);
-}
-
-.button-group--classy-color-1 .button-group__button:hover {
-  background-color: var(--classy-color-1-hover);
-}
-
-.button-group--classy-color-2 .button-group__button {
-  background-color: var(--classy-color-2);
-  color: var(--text-color-inverse);
-}
-
-.button-group--classy-color-2 .button-group__button:hover {
-  background-color: var(--classy-color-2-hover);
-}
-
-.button-group--classy-color-3 .button-group__button {
-  background-color: var(--classy-color-3);
-  color: var(--text-color-inverse);
-}
-
-.button-group--classy-color-3 .button-group__button:hover {
-  background-color: var(--classy-color-3-hover);
-}
-
-.button-group--classy-color-4 .button-group__button {
-  background-color: var(--classy-color-4);
-  color: var(--text-color-inverse);
-}
-
-.button-group--classy-color-4 .button-group__button:hover {
-  background-color: var(--classy-color-4-hover);
-}
-
-.button-group--classy-color-5 .button-group__button {
-  background-color: var(--classy-color-5);
-  color: var(--text-color-inverse);
-}
-
-.button-group--classy-color-5 .button-group__button:hover {
-  background-color: var(--classy-color-5-hover);
-}
-
-/* Small Switch Palette Solid Variants */
-.button-group--small-switch-color-1 .button-group__button {
-  background-color: var(--small-switch-color-1);
-  color: var(--text-color-inverse);
-}
-
-.button-group--small-switch-color-1 .button-group__button:hover {
-  background-color: var(--small-switch-color-1-hover);
-}
-
-.button-group--small-switch-color-2 .button-group__button {
-  background-color: var(--small-switch-color-2);
-  color: var(--text-color-inverse);
-}
-
-.button-group--small-switch-color-2 .button-group__button:hover {
-  background-color: var(--small-switch-color-2-hover);
-}
-
-/* Natural Palette Solid Variants */
-.button-group--natural-color-1 .button-group__button {
-  background-color: var(--natural-color-1);
-  color: var(--text-color-inverse);
-}
-
-.button-group--natural-color-1 .button-group__button:hover {
-  background-color: var(--natural-color-1-hover);
-}
-
-.button-group--natural-color-2 .button-group__button {
-  background-color: var(--natural-color-2);
-  color: var(--text-color-inverse);
-}
-
-.button-group--natural-color-2 .button-group__button:hover {
-  background-color: var(--natural-color-2-hover);
-}
-
-.button-group--natural-color-3 .button-group__button {
-  background-color: var(--natural-color-3);
-  color: var(--text-color-inverse);
-}
-
-.button-group--natural-color-3 .button-group__button:hover {
-  background-color: var(--natural-color-3-hover);
-}
-
-/* Grey Friends Solid Variants */
-.button-group--grey-friend-1 .button-group__button {
-  background-color: var(--grey-friend-1);
-  color: var(--text-color-inverse);
-}
-
-.button-group--grey-friend-1 .button-group__button:hover {
-  background-color: var(--grey-friend-1-hover);
-}
-
-.button-group--grey-friend-2 .button-group__button {
-  background-color: var(--grey-friend-2);
-  color: var(--text-color-inverse);
-}
-
-.button-group--grey-friend-2 .button-group__button:hover {
-  background-color: var(--grey-friend-2-hover);
-}
-
-/* Shades Solid Variants */
-.button-group--shade-1 .button-group__button {
-  background-color: var(--shade-1);
-  color: var(--text-color-inverse);
-}
-
-.button-group--shade-1 .button-group__button:hover {
-  background-color: var(--shade-1-hover);
-}
-
-.button-group--shade-2 .button-group__button {
-  background-color: var(--shade-2);
-  color: var(--text-color-inverse);
-}
-
-.button-group--shade-2 .button-group__button:hover {
-  background-color: var(--shade-2-hover);
-}
-
-.button-group--shade-3 .button-group__button {
-  background-color: var(--shade-3);
-  color: var(--text-color-inverse);
-}
-
-.button-group--shade-3 .button-group__button:hover {
-  background-color: var(--shade-3-hover);
-}
-
-.button-group--shade-4 .button-group__button {
-  background-color: var(--shade-4);
-  color: var(--text-color-inverse);
-}
-
-.button-group--shade-4 .button-group__button:hover {
-  background-color: var(--shade-4-hover);
-}
-
-/* Outline Variant */
-.button-group--outline .button-group__button {
-  background-color: transparent;
-  border: 2px solid currentColor;
-  color: var(--primary-color); /* Default to primary color */
-}
-
-.button-group--outline .button-group__button:hover {
-  background-color: transparent;
-  border-color: var(--primary-color-hover);
-  color: var(--primary-color-hover);
-}
-
-/* Primary and Secondary Outline Variants */
-.button-group--primary.button-group--outline .button-group__button {
-  background-color: transparent;
-  border-color: var(--primary-color);
-  color: var(--primary-color);
-}
-
-.button-group--secondary.button-group--outline .button-group__button {
-  background-color: transparent;
-  border-color: var(--secondary-color);
-  color: var(--secondary-color);
-}
-
-.button-group--primary.button-group--outline .button-group__button:hover,
-.button-group--secondary.button-group--outline .button-group__button:hover {
-  background-color: transparent;
-  color: var(--primary-color-hover);
-  border-color: var(--primary-color-hover);
-}
-
-/* Size Variants */
-.button-group--small .button-group__button {
-  font-size: 0.75rem;
-  padding: 6px 12px;
-}
-
-.button-group--medium .button-group__button {
-  font-size: 1rem;
-  padding: 8px 16px;
-}
-
-.button-group--large .button-group__button {
-  font-size: 1.25rem;
-  padding: 12px 20px;
-}
-
-/* Color Variants */
-.button-group--primary .button-group__button {
-  background-color: var(--primary-color);
-  color: var(--text-color-inverse);
-}
-
-.button-group--secondary .button-group__button {
-  background-color: var(--secondary-color);
-  color: var(--text-color-inverse);
-}
-
-/* Outline Color Variants */
-.button-group--primary.button-group--outline .button-group__button {
-  border-color: var(--primary-color);
-  color: var(--primary-color);
-}
-
-.button-group--secondary.button-group--outline .button-group__button {
-  border-color: var(--secondary-color);
-  color: var(--secondary-color);
-}
-
-.button-group--info.button-group--outline .button-group__button {
-  border-color: var(--info-color);
-  color: var(--info-color);
-}
-
-.button-group--warning.button-group--outline .button-group__button {
-  border-color: var(--warning-color);
-  color: var(--warning-color);
-}
-
-.button-group--alert.button-group--outline .button-group__button {
-  border-color: var(--alert-color);
-  color: var(--alert-color);
-}
-
-.button-group--success.button-group--outline .button-group__button {
-  border-color: var(--success-color);
-  color: var(--success-color);
-}
-
-.button-group--neutral.button-group--outline .button-group__button {
-  border-color: var(--neutral-color);
-  color: var(--neutral-color);
-}
-
-.button-group--dark.button-group--outline .button-group__button {
-  border-color: var(--dark-color);
-  color: var(--dark-color);
-}
-
-/* Classy Palette Outline Variants */
-.button-group--classy-color-1.button-group--outline .button-group__button {
-  border-color: var(--classy-color-1);
-  color: var(--classy-color-1);
-}
-
-.button-group--classy-color-2.button-group--outline .button-group__button {
-  border-color: var(--classy-color-2);
-  color: var(--classy-color-2);
-}
-
-.button-group--classy-color-3.button-group--outline .button-group__button {
-  border-color: var(--classy-color-3);
-  color: var(--classy-color-3);
-}
-
-.button-group--classy-color-4.button-group--outline .button-group__button {
-  border-color: var(--classy-color-4);
-  color: var(--classy-color-4);
-}
-
-.button-group--classy-color-5.button-group--outline .button-group__button {
-  border-color: var(--classy-color-5);
-  color: var(--classy-color-5);
-}
-
-/* Small Switch Palette Outline Variants */
-.button-group--small-switch-color-1.button-group--outline .button-group__button {
-  border-color: var(--small-switch-color-1);
-  color: var(--small-switch-color-1);
-}
-
-.button-group--small-switch-color-2.button-group--outline .button-group__button {
-  border-color: var(--small-switch-color-2);
-  color: var(--small-switch-color-2);
-}
-
-/* Natural Palette Outline Variants */
-.button-group--natural-color-1.button-group--outline .button-group__button {
-  border-color: var(--natural-color-1);
-  color: var(--natural-color-1);
-}
-
-.button-group--natural-color-2.button-group--outline .button-group__button {
-  border-color: var(--natural-color-2);
-  color: var(--natural-color-2);
-}
-
-.button-group--natural-color-3.button-group--outline .button-group__button {
-  border-color: var(--natural-color-3);
-  color: var(--natural-color-3);
-}
-
-/* Grey Friends Outline Variants */
-.button-group--grey-friend-1.button-group--outline .button-group__button {
-  border-color: var(--grey-friend-1);
-  color: var(--grey-friend-1);
-}
-
-.button-group--grey-friend-2.button-group--outline .button-group__button {
-  border-color: var(--grey-friend-2);
-  color: var(--grey-friend-2);
-}
-
-/* Shades Outline Variants */
-.button-group--shade-1.button-group--outline .button-group__button {
-  border-color: var(--shade-1);
-  color: var(--shade-1);
-}
-
-.button-group--shade-2.button-group--outline .button-group__button {
-  border-color: var(--shade-2);
-  color: var(--shade-2);
-}
-
-.button-group--shade-3.button-group--outline .button-group__button {
-  border-color: var(--shade-3);
-  color: var (--shade-3);
-}
-
-.button-group--shade-4.button-group--outline .button-group__button {
-  border-color: var(--shade-4);
-  color: var(--shade-4);
-}
-
-/* Hover Effects */
-.button-group__button:hover {
-  background-color: var(--primary-color-hover);
-}
-
-.button-group--outline .button-group__button:hover {
-  background-color: transparent;
-  border-color: var(--primary-color-hover);
-  color: var(--primary-color-hover);
-}

package/src/stories/Molecules/ButtonGroup/ButtonGroup.jsx

@@ -1,47 +0,0 @@
-//this.GUI/src/stories/Molecules/ButtonGroup/ButtonGroup.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import './ButtonGroup.css';
-
-export const ButtonGroup = ({ buttons, size, color, variant, onButtonClick }) => {
-  return (
-    <div className={`button-group button-group--${size} button-group--${color} button-group--${variant}`}>
-      {buttons.map((button, index) => (
-        <button
-          key={index}
-          className="button-group__button"
-          onClick={() => onButtonClick(button.value)}
-        >
-          {button.label}
-        </button>
-      ))}
-    </div>
-  );
-};
-
-ButtonGroup.propTypes = {
-  buttons: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string.isRequired, // Label of the button
-      value: PropTypes.any.isRequired,    // Value to return on button click
-    })
-  ).isRequired,
-  size: PropTypes.oneOf(['small', 'medium', 'large']), // Size of the buttons
-  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'
-  ]), // Button color based on theme
-  variant: PropTypes.oneOf(['solid', 'outline']), // Solid or outline button styles
-  onButtonClick: PropTypes.func, // Callback function when a button is clicked
-};
-
-ButtonGroup.defaultProps = {
-  size: 'medium',
-  color: 'primary',
-  variant: 'solid',
-  onButtonClick: () => {},
-};

package/src/stories/Molecules/ButtonGroup/ButtonGroup.stories.jsx

@@ -1,44 +0,0 @@
-//this.GUI/src/stories/Molecules/ButtonGroup/ButtonGroup.stories.jsx
-import React from 'react';
-import { ButtonGroup } from './ButtonGroup';
-
-export default {
-  title: 'Molecules/Actions/ButtonGroup',
-  component: ButtonGroup,
-  argTypes: {
-    size: {
-      control: { type: 'select', options: ['small', 'medium', 'large'] },
-    },
-    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'
-        ],
-      },
-    },
-    variant: {
-      control: { type: 'select', options: ['solid', 'outline'] },
-    },
-  },
-};
-
-const buttonOptions = [
-  { label: 'Button 1', value: 'button1' },
-  { label: 'Button 2', value: 'button2' },
-  { label: 'Button 3', value: 'button3' },
-];
-
-export const DefaultButtonGroup = (args) => <ButtonGroup {...args} buttons={buttonOptions} />;
-
-DefaultButtonGroup.args = {
-  size: 'medium',
-  color: 'primary',
-  variant: 'solid',
-  onButtonClick: (value) => console.log('Clicked button:', value),
-};

package/src/stories/Molecules/Card/Card.css

@@ -1,41 +0,0 @@
-/*this.GUI/src/stories/Molecules/Card/Card.css*/
-.card {
-  padding: 16px;
-  border-radius: var(--border-radius, 8px);
-  position: relative;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-  color: inherit; /* Text color is inherited */
-}
-
-.card__content {
-  color: inherit; /* Inherit text color from parent */
-}
-
-.card--hoverable:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  transform: translateY(-2px);
-}
-
-.card__expand, .card__remove {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  background: none;
-  border: none;
-  font-size: 16px;
-  cursor: pointer;
-}
-
-.card__remove {
-  right: 12px;
-}
-
-.card__expand {
-  right: 40px;
-}
-
-@media (max-width: 768px) {
-  .card {
-    padding: 12px;
-  }
-}

package/src/stories/Molecules/Card/Card.jsx

@@ -1,92 +0,0 @@
-//this.GUI/src/stories/Molecules/Card/Card.jsx
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import './Card.css';
-
-export const Card = ({
-  children,
-  variant,
-  color,
-  textColor,
-  isExpandable,
-  isRemovable,
-  hoverable,
-  width,
-  ...props
-}) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [isVisible, setIsVisible] = useState(true);
-
-  const handleExpandToggle = () => setIsExpanded(!isExpanded);
-  const handleRemove = () => setIsVisible(false);
-
-  if (!isVisible) return null;
-
-  return (
-    <div
-      className={`card card--${variant} ${hoverable ? 'card--hoverable' : ''}`}
-      style={{
-        backgroundColor: variant === 'solid' ? `var(--${color})` : 'transparent',
-        border: variant === 'outline' ? `1px solid var(--${color})` : 'none',
-        width: width,
-      }}
-      {...props}
-    >
-      {isExpandable && (
-        <button className="card__expand" onClick={handleExpandToggle}>
-          {isExpanded ? 'Close' : 'Expand'}
-        </button>
-      )}
-
-      {isRemovable && (
-        <button className="card__remove" onClick={handleRemove}>
-          &times;
-        </button>
-      )}
-
-      <div
-        className="card__content"
-        style={{
-          color: `var(--${textColor})`, // Apply the text color using CSS variables
-        }}
-      >
-        {children}
-      </div>
-
-      {isExpanded && (
-        <div className="card__expanded-content">
-          {children}
-        </div>
-      )}
-    </div>
-  );
-};
-
-Card.propTypes = {
-  children: PropTypes.node.isRequired,
-  variant: PropTypes.oneOf(['solid', 'outline']), // Variant can be 'solid' or 'outline'
-  color: PropTypes.oneOf([
-    'primary-color', 'secondary-color', 'info-color', 'warning-color', 'alert-color', 'success-color', 'neutral-color', 'dark-color',
-    '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'
-  ]).isRequired,
-  textColor: PropTypes.oneOf([
-    'primary-color', 'secondary-color', 'info-color', 'warning-color', 'alert-color', 'success-color', 'neutral-color', 'dark-color',
-    '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'
-  ]), // Separate text color prop
-  isExpandable: PropTypes.bool,
-  isRemovable: PropTypes.bool,
-  hoverable: PropTypes.bool,
-  width: PropTypes.string, // Width of the card
-};
-
-Card.defaultProps = {
-  variant: 'solid',
-  color: 'neutral-color', // Default background/border color
-  textColor: 'dark-color', // Default text color
-  isExpandable: false,
-  isRemovable: false,
-  hoverable: false,
-  width: '100%', // Default width
-};