this.gui 1.0.17 → 1.1.0

package/src/stories/Atoms/Toggle/Toggle.css

@@ -1,118 +0,0 @@
-/*this.GUI/src/stories/Atoms/Toggle/Toggle.css*/
-/* Base Toggle Styles */
-.toggle {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.toggle__switch {
-  position: relative;
-  width: 40px;
-  height: 20px;
-  border-radius: var(--border-radius);
-  background-color: var(--off-color, var(--neutral-color));
-  transition: background-color var(--transition-speed);
-}
-
-.toggle__knob {
-  position: absolute;
-  top: 50%;
-  left: 2px;
-  width: 16px;
-  height: 16px;
-  background-color: var(--knob-color, var(--text-color-inverse));
-  border-radius: 50%;
-  transform: translateY(-50%);
-  transition: left var(--transition-speed);
-}
-
-.toggle--checked .toggle__switch {
-  background-color: var(--on-color, var(--primary-color));
-}
-
-.toggle--checked .toggle__knob {
-  left: calc(100% - 18px);
-}
-
-/* Disabled state */
-.toggle--disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-/* Size Variants */
-.toggle--small .toggle__switch {
-  width: 30px;
-  height: 16px;
-}
-
-.toggle--small .toggle__knob {
-  width: 12px;
-  height: 12px;
-}
-
-.toggle--large .toggle__switch {
-  width: 60px;
-  height: 30px;
-}
-
-.toggle--large .toggle__knob {
-  width: 26px;
-  height: 26px;
-}
-
-/* Color Variants */
-.toggle--primary .toggle__switch {
-  background-color: var(--primary-color);
-}
-
-.toggle--secondary .toggle__switch {
-  background-color: var(--secondary-color);
-}
-
-.toggle--info .toggle__switch {
-  background-color: var(--info-color);
-}
-
-.toggle--warning .toggle__switch {
-  background-color: var(--warning-color);
-}
-
-.toggle--alert .toggle__switch {
-  background-color: var(--alert-color);
-}
-
-.toggle--success .toggle__switch {
-  background-color: var(--success-color);
-}
-
-.toggle--neutral .toggle__switch {
-  background-color: var(--neutral-color);
-}
-
-.toggle--dark .toggle__switch {
-  background-color: var(--dark-color);
-}
-
-/* Additional colors from design tokens */
-.toggle--classy-color-1 { background-color: var(--classy-color-1); }
-.toggle--classy-color-2 { background-color: var(--classy-color-2); }
-.toggle--classy-color-3 { background-color: var(--classy-color-3); }
-.toggle--classy-color-4 { background-color: var(--classy-color-4); }
-.toggle--classy-color-5 { background-color: var(--classy-color-5); }
-
-.toggle--small-switch-color-1 { background-color: var(--small-switch-color-1); }
-.toggle--small-switch-color-2 { background-color: var(--small-switch-color-2); }
-
-.toggle--natural-color-1 { background-color: var(--natural-color-1); }
-.toggle--natural-color-2 { background-color: var(--natural-color-2); }
-.toggle--natural-color-3 { background-color: var(--natural-color-3); }
-
-.toggle--grey-friend-1 { background-color: var(--grey-friend-1); }
-.toggle--grey-friend-2 { background-color: var(--grey-friend-2); }
-
-.toggle--shade-1 { background-color: var(--shade-1); }
-.toggle--shade-2 { background-color: var(--shade-2); }
-.toggle--shade-3 { background-color: var(--shade-3); }
-.toggle--shade-4 { background-color: var(--shade-4); }

package/src/stories/Atoms/Toggle/Toggle.jsx

@@ -1,69 +0,0 @@
-//this.GUI/src/stories/Atoms/Toggle/Toggle.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Toggle.css';
-
-export const Toggle = ({
-  checked = false,
-  onChange,
-  disabled = false,
-  size = 'medium',
-  color = 'primary', // Color variant from the theme
-  label = '',
-  labelPosition = 'right', // 'left', 'right', 'top', 'bottom'
-  className = '',
-  ...props
-}) => {
-  const toggleClasses = `
-    toggle 
-    toggle--${size} 
-    toggle--${color} 
-    ${checked ? 'toggle--checked' : ''} 
-    ${disabled ? 'toggle--disabled' : ''} 
-    ${className}
-  `.trim();
-
-  const handleChange = () => {
-    if (!disabled && onChange) {
-      onChange(!checked);
-    }
-  };
-
-  return (
-    <label className={`toggle__label toggle__label--${labelPosition}`}>
-      {label && labelPosition === 'left' && <span>{label}</span>}
-      <div className={toggleClasses} onClick={handleChange} {...props}>
-        <div className="toggle__switch">
-          <div className="toggle__knob" />
-        </div>
-      </div>
-      {label && labelPosition !== 'left' && <span>{label}</span>}
-    </label>
-  );
-};
-
-Toggle.propTypes = {
-  /** Whether the toggle is checked (on/off state) */
-  checked: PropTypes.bool,
-  /** Callback when the toggle changes */
-  onChange: PropTypes.func.isRequired,
-  /** Whether the toggle is disabled */
-  disabled: PropTypes.bool,
-  /** Size of the toggle */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /** Color variant for the toggle */
-  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',
-  ]),
-  /** Label for the toggle */
-  label: PropTypes.string,
-  /** Position of the label relative to the toggle */
-  labelPosition: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
-  /** Additional custom CSS classes */
-  className: PropTypes.string,
-};
-
-export default Toggle;

package/src/stories/Atoms/Toggle/Toggle.stories.jsx

@@ -1,35 +0,0 @@
-//this.GUI/src/stories/Atoms/Toggle/Toggle.stories.jsx
-import React, { useState } from 'react';
-import { Toggle } from './Toggle';
-
-export default {
-  title: 'Atoms/Interactive/Toggle',
-  component: Toggle,
-  argTypes: {
-    checked: { control: 'boolean', defaultValue: false },
-    size: {
-      control: { type: 'select', options: ['small', 'medium', 'large'] },
-      defaultValue: 'medium',
-    },
-    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',
-      ]},
-      defaultValue: 'primary',
-    },
-    label: { control: 'text', defaultValue: 'Toggle label' },
-    labelPosition: {
-      control: { type: 'select', options: ['left', 'right', 'top', 'bottom'] },
-      defaultValue: 'right',
-    },
-  },
-};
-
-export const InteractiveToggle = (args) => {
-  const [checked, setChecked] = useState(args.checked);
-
-  return <Toggle {...args} checked={checked} onChange={setChecked} />;
-};

package/src/stories/Atoms/Tooltip/Tooltip.css

@@ -1,383 +0,0 @@
-/*this.GUI/src/stories/Atoms/Tooltip/Tooltip.css*/
-/* Base Tooltip Styles */
-.tooltip-wrapper {
-  position: relative;
-  display: inline-block;
-}
-
-.tooltip {
-  position: absolute;
-  visibility: hidden;
-  opacity: 0;
-  background-color: var(--tooltip-background-color, #333);
-  color: var(--tooltip-text-color, #fff);
-  text-align: center;
-  padding: 8px;
-  border-radius: 4px;
-  transition: opacity 0.3s ease, visibility 0.3s ease;
-  z-index: 999;
-  font-size: var(--font-size-base, 14px);
-}
-
-.tooltip--visible {
-  visibility: visible;
-  opacity: 1;
-}
-
-/* Arrow */
-.tooltip__arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-style: solid;
-}
-
-/* Tooltip Position Variants */
-.tooltip--top {
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.tooltip--top .tooltip__arrow {
-  top: 100%;
-  left: 50%;
-  border-width: 6px 6px 0 6px;
-  border-color: var(--tooltip-background-color) transparent transparent transparent;
-}
-
-.tooltip--bottom {
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.tooltip--bottom .tooltip__arrow {
-  bottom: 100%;
-  left: 50%;
-  border-width: 0 6px 6px 6px;
-  border-color: transparent transparent var(--tooltip-background-color) transparent;
-}
-
-.tooltip--left {
-  right: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.tooltip--left .tooltip__arrow {
-  right: -6px;
-  top: 50%;
-  border-width: 6px 6px 6px 0;
-  border-color: transparent var(--tooltip-background-color) transparent transparent;
-}
-
-.tooltip--right {
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.tooltip--right .tooltip__arrow {
-  left: -6px;
-  top: 50%;
-  border-width: 6px 0 6px 6px;
-  border-color: transparent transparent transparent var(--tooltip-background-color);
-}
-
-/* Custom Variants: North, South, East, West */
-.tooltip--north {
-  top: -120%;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.tooltip--south {
-  bottom: -120%;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.tooltip--east {
-  left: 120%;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.tooltip--west {
-  right: 120%;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-/* Colors for Primary and Secondary Variants */
-.tooltip--primary {
-  background-color: var(--primary-color, #1F877D);
-  color: #fff;
-}
-
-.tooltip--secondary {
-  background-color: transparent;
-  border: 2px solid var(--primary-color, #1F877D);
-  color: var(--primary-color, #1F877D);
-}
-
-/* Primary Colors (Background) */
-.tooltip--primary-primary {
-  background-color: var(--primary-color, #1F877D);
-  color: #fff;
-}
-
-.tooltip--primary-secondary {
-  background-color: var(--secondary-color, #39a182);
-  color: #fff;
-}
-
-.tooltip--primary-info {
-  background-color: var(--info-color, #008699);
-  color: #fff;
-}
-
-.tooltip--primary-warning {
-  background-color: var(--warning-color, #FF6F61);
-  color: #fff;
-}
-
-.tooltip--primary-alert {
-  background-color: var(--alert-color, #ffcc00);
-  color: #fff;
-}
-
-.tooltip--primary-success {
-  background-color: var(--success-color, #00B4B8);
-  color: #fff;
-}
-
-.tooltip--primary-neutral {
-  background-color: var(--neutral-color, #a4a4a4);
-  color: #fff;
-}
-
-.tooltip--primary-dark {
-  background-color: var(--dark-color, #2C2C2C);
-  color: #fff;
-}
-
-/* Classy Palette */
-.tooltip--primary-classy-color-1 {
-  background-color: var(--classy-color-1, #16655c);
-  color: #fff;
-}
-
-.tooltip--primary-classy-color-2 {
-  background-color: var(--classy-color-2, #96b1ac);
-  color: #fff;
-}
-
-.tooltip--primary-classy-color-3 {
-  background-color: var(--classy-color-3, #637c78);
-  color: #fff;
-}
-
-.tooltip--primary-classy-color-4 {
-  background-color: var(--classy-color-4, #405b83);
-  color: #fff;
-}
-
-.tooltip--primary-classy-color-5 {
-  background-color: var(--classy-color-5, #738db8);
-  color: #fff;
-}
-
-/* Small Switch Colors */
-.tooltip--primary-small-switch-color-1 {
-  background-color: var(--small-switch-color-1, #deefe6);
-  color: #000;
-}
-
-.tooltip--primary-small-switch-color-2 {
-  background-color: var(--small-switch-color-2, #4e8a6e);
-  color: #fff;
-}
-
-/* Natural Palette */
-.tooltip--primary-natural-color-1 {
-  background-color: var(--natural-color-1, #00aa96);
-  color: #fff;
-}
-
-.tooltip--primary-natural-color-2 {
-  background-color: var(--natural-color-2, #e8fefa);
-  color: #000;
-}
-
-.tooltip--primary-natural-color-3 {
-  background-color: var(--natural-color-3, #e7fefe);
-  color: #000;
-}
-
-/* Grey Friends */
-.tooltip--primary-grey-friend-1 {
-  background-color: var(--grey-friend-1, #344b47);
-  color: #fff;
-}
-
-.tooltip--primary-grey-friend-2 {
-  background-color: var(--grey-friend-2, #96b1ac);
-  color: #fff;
-}
-
-/* Shades */
-.tooltip--primary-shade-1 {
-  background-color: var(--shade-1, #3b847a);
-  color: #fff;
-}
-
-.tooltip--primary-shade-2 {
-  background-color: var(--shade-2, #5da59a);
-  color: #fff;
-}
-
-.tooltip--primary-shade-3 {
-  background-color: var(--shade-3, #7ec7bc);
-  color: #fff;
-}
-
-.tooltip--primary-shade-4 {
-  background-color: var(--shade-4, #a0eade);
-  color: #fff;
-}
-
-/* Secondary Colors (Outlined with Text Colored) */
-.tooltip--secondary {
-  background-color: transparent;
-  border: 2px solid var(--primary-color, #1F877D);
-  color: var(--primary-color, #1F877D);
-}
-
-.tooltip--secondary-secondary {
-  border-color: var(--secondary-color, #39a182);
-  color: var(--secondary-color, #39a182);
-}
-
-.tooltip--secondary-info {
-  border-color: var(--info-color, #008699);
-  color: var(--info-color, #008699);
-}
-
-.tooltip--secondary-warning {
-  border-color: var(--warning-color, #FF6F61);
-  color: var(--warning-color, #FF6F61);
-}
-
-.tooltip--secondary-alert {
-  border-color: var(--alert-color, #ffcc00);
-  color: var(--alert-color, #ffcc00);
-}
-
-.tooltip--secondary-success {
-  border-color: var(--success-color, #00B4B8);
-  color: var(--success-color, #00B4B8);
-}
-
-.tooltip--secondary-neutral {
-  border-color: var(--neutral-color, #a4a4a4);
-  color: var(--neutral-color, #a4a4a4);
-}
-
-.tooltip--secondary-dark {
-  border-color: var(--dark-color, #2C2C2C);
-  color: var(--dark-color, #2C2C2C);
-}
-
-/* Classy Palette (Outlined) */
-.tooltip--secondary-classy-color-1 {
-  border-color: var(--classy-color-1, #16655c);
-  color: var(--classy-color-1, #16655c);
-}
-
-.tooltip--secondary-classy-color-2 {
-  border-color: var(--classy-color-2, #96b1ac);
-  color: var(--classy-color-2, #96b1ac);
-}
-
-.tooltip--secondary-classy-color-3 {
-  border-color: var(--classy-color-3, #637c78);
-  color: var(--classy-color-3, #637c78);
-}
-
-.tooltip--secondary-classy-color-4 {
-  border-color: var(--classy-color-4, #405b83);
-  color: var(--classy-color-4, #405b83);
-}
-
-.tooltip--secondary-classy-color-5 {
-  border-color: var(--classy-color-5, #738db8);
-  color: var(--classy-color-5, #738db8);
-}
-
-/* Small Switch Palette (Outlined) */
-.tooltip--secondary-small-switch-color-1 {
-  border-color: var(--small-switch-color-1, #deefe6);
-  color: var(--small-switch-color-1, #deefe6);
-}
-
-.tooltip--secondary-small-switch-color-2 {
-  border-color: var(--small-switch-color-2, #4e8a6e);
-  color: var(--small-switch-color-2, #4e8a6e);
-}
-
-/* Natural Palette (Outlined) */
-.tooltip--secondary-natural-color-1 {
-  border-color: var(--natural-color-1, #00aa96);
-  color: var(--natural-color-1, #00aa96);
-}
-
-.tooltip--secondary-natural-color-2 {
-  border-color: var(--natural-color-2, #e8fefa);
-  color: var(--natural-color-2, #e8fefa);
-}
-
-.tooltip--secondary-natural-color-3 {
-  border-color: var(--natural-color-3, #e7fefe);
-  color: var(--natural-color-3, #e7fefe);
-}
-
-/* Grey Friends (Outlined) */
-.tooltip--secondary-grey-friend-1 {
-  border-color: var(--grey-friend-1, #344b47);
-  color: var(--grey-friend-1, #344b47);
-}
-
-.tooltip--secondary-grey-friend-2 {
-  border-color: var(--grey-friend-2, #96b1ac);
-  color: var(--grey-friend-2, #96b1ac);
-}
-
-/* Shades (Outlined) */
-.tooltip--secondary-shade-1 {
-  border-color: var(--shade-1, #3b847a);
-  color: var(--shade-1, #3b847a);
-}
-
-.tooltip--secondary-shade-2 {
-  border-color: var(--shade-2, #5da59a);
-  color: var(--shade-2, #5da59a);
-}
-
-.tooltip--secondary-shade-3 {
-  border-color: var(--shade-3, #7ec7bc);
-  color: var(--shade-3, #7ec7bc);
-}
-
-.tooltip--secondary-shade-4 {
-  border-color: var(--shade-4, #a0eade);
-  color: var(--shade-4, #a0eade);
-}
-
-
-/* Hover Behavior */
-.tooltip-wrapper:hover .tooltip {
-  visibility: visible;
-  opacity: 1;
-}

package/src/stories/Atoms/Tooltip/Tooltip.jsx

@@ -1,46 +0,0 @@
-//this.GUI/src/stories/Atoms/Tooltip/Tooltip.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Tooltip.css';
-
-export const Tooltip = ({
-  content,
-  position = 'top',
-  variant = 'primary',
-  color = 'primary',  // Ensure default color is "primary"
-  showArrow = true,
-  children,
-  ...props
-}) => {
-  const tooltipClasses = `
-    tooltip
-    tooltip--${position}
-    tooltip--${variant}
-    tooltip--primary-${color}
-    ${variant === 'secondary' ? `tooltip--secondary-${color}` : ''}
-  `.trim(); // Ensuring the correct color class is applied
-
-  return (
-    <div className="tooltip-wrapper" {...props}>
-      {children}
-      <div className={tooltipClasses}>
-        {content}
-        {showArrow && <div className="tooltip__arrow"></div>}
-      </div>
-    </div>
-  );
-};
-
-Tooltip.propTypes = {
-  content: PropTypes.node.isRequired,
-  position: PropTypes.oneOf(['top', 'bottom', 'left', 'right', 'north', 'south', 'east', 'west']),
-  variant: PropTypes.oneOf(['primary', 'secondary']),
-  color: PropTypes.oneOf([
-    'primary', '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'
-  ]),
-  showArrow: PropTypes.bool,
-  children: PropTypes.node.isRequired,
-};

package/src/stories/Atoms/Tooltip/Tooltip.stories.jsx

@@ -1,52 +0,0 @@
-//this.GUI/src/stories/Atoms/Tooltip/Tooltip.stories.jsx
-import React from 'react';
-import { Tooltip } from './Tooltip';
-
-export default {
-  title: 'Atoms/Interactive/Tooltip',
-  component: Tooltip,
-  argTypes: {
-    content: { control: 'text', defaultValue: 'Tooltip Content' },
-    position: {
-      control: { type: 'select', options: ['top', 'bottom', 'left', 'right', 'north', 'south', 'east', 'west'] },
-      defaultValue: 'top'
-    },
-    color: {
-      control: { type: 'select', options: [
-        'primary', 'info', 'warning', 'alert', 'success', 'neutral', 'dark',
-        'classy-color-1', 'classy-color-2', 'classy-color-3', 'classy-color-4', 'classy-color-5'
-      ]},
-      defaultValue: 'primary'
-    },
-    variant: { control: { type: 'select', options: ['primary', 'secondary'] }, defaultValue: 'primary' },
-    showArrow: { control: 'boolean', defaultValue: true },
-  },
-};
-
-
-export const ColorVariants = () => (
-  <div style={{ padding: '50px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px' }}>
-    {['primary', 'info', 'warning', 'alert', 'success', 'neutral', 'dark'].map((color) => (
-      <Tooltip key={color} content={`This is ${color}`} color={color}>
-        <button>Hover for {color}</button>
-      </Tooltip>
-    ))}
-  </div>
-);
-
-export const InteractiveTooltip = (args) => (
-  <div style={{ padding: '100px', display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
-    <Tooltip {...args} position="top">
-      <button>Hover Top</button>
-    </Tooltip>
-    <Tooltip {...args} position="bottom">
-      <button>Hover Bottom</button>
-    </Tooltip>
-    <Tooltip {...args} position="left">
-      <button>Hover Left</button>
-    </Tooltip>
-    <Tooltip {...args} position="right">
-      <button>Hover Right</button>
-    </Tooltip>
-  </div>
-);