this.gui 1.0.17 → 1.1.0

package/src/stories/Atoms/Tag/Tag.jsx

@@ -1,75 +0,0 @@
-// src/stories/Atoms/Tag/Tag.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import './Tag.css';
-
-export const Tag = ({
-  label,
-  color = 'primary', // Default color scheme
-  variant = 'filled', // 'filled' for primary and 'outlined' for secondary
-  size = 'medium', // small, medium, large
-  removable = false,
-  onRemove,
-  onClick,
-  icon,
-  disabled = false,
-  className = '',
-  style = {},
-  ...props
-}) => {
-  const handleRemove = (e) => {
-    e.stopPropagation();
-    if (onRemove) onRemove();
-  };
-
-  const tagClasses = classNames(
-    'tag',
-    `tag--${variant}`,
-    `tag--${color}`,
-    `tag--${size}`,
-    {
-      'tag--removable': removable,
-      'tag--disabled': disabled,
-    },
-    className
-  );
-
-  return (
-    <div
-      className={tagClasses}
-      style={style}
-      onClick={!disabled ? onClick : null}
-      {...props}
-    >
-      {icon && <span className="tag__icon">{icon}</span>}
-      <span className="tag__label">{label}</span>
-      {removable && !disabled && (
-        <button className="tag__remove" onClick={handleRemove} aria-label="Remove tag">
-          &times;
-        </button>
-      )}
-    </div>
-  );
-};
-
-Tag.propTypes = {
-  label: PropTypes.string.isRequired,
-  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',
-  ]),
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  variant: PropTypes.oneOf(['filled', 'outlined']),
-  removable: PropTypes.bool,
-  onRemove: PropTypes.func,
-  onClick: PropTypes.func,
-  icon: PropTypes.node,
-  disabled: PropTypes.bool,
-  className: PropTypes.string,
-  style: PropTypes.object,
-};
-
-export default Tag;

package/src/stories/Atoms/Tag/Tag.stories.jsx

@@ -1,67 +0,0 @@
-// src/stories/Atoms/Tag/Tag.stories.jsx
-import React from 'react';
-import { Tag } from './Tag';
-
-export default {
-  title: 'Atoms/Interactive/Tag',
-  component: Tag,
-  argTypes: {
-    label: { control: 'text', defaultValue: 'Tag Label' },
-    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 tag.',
-    },
-    size: {
-      control: { type: 'select', options: ['small', 'medium', 'large'] },
-      description: 'Size of the tag.',
-    },
-    variant: {
-      control: { type: 'select', options: ['filled', 'outlined'] },
-      description: 'Variant of the tag.',
-    },
-    removable: {
-      control: 'boolean',
-      description: 'Makes the tag removable.',
-    },
-    onRemove: { action: 'removed', description: 'Called when tag is removed.' },
-    onClick: { action: 'clicked', description: 'Called when the tag is clicked.' },
-  },
-};
-
-/** Primary Tags with all colors */
-export const PrimaryTags = () => (
-  <>
-    {['primary', 'info', 'warning', 'alert', 'success', 'neutral', 'dark'].map((color) => (
-      <Tag key={color} label={`Tag ${color}`} color={color} variant="filled" style={{ marginRight: '8px' }} />
-    ))}
-  </>
-);
-
-/** Secondary Tags with all colors */
-export const SecondaryTags = () => (
-  <>
-    {['primary', 'info', 'warning', 'alert', 'success', 'neutral', 'dark'].map((color) => (
-      <Tag key={color} label={`Tag ${color}`} color={color} variant="outlined" style={{ marginRight: '8px' }} />
-    ))}
-  </>
-);
-
-/** Interactive Tag */
-const Template = (args) => <Tag {...args} />;
-
-export const InteractiveTag = Template.bind({});
-InteractiveTag.args = {
-  label: 'Interactive Tag',
-  color: 'primary',
-  size: 'medium',
-  variant: 'filled',
-  removable: true,
-};

package/src/stories/Atoms/TextArea/TextArea.css

@@ -1,99 +0,0 @@
-/*this.GUI/src/stories/Atoms/TextArea/TextArea.css */
-.textarea-wrapper {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 1rem;
-}
-
-.textarea {
-  padding: 10px;
-  border: 1px solid var(--border-color, #ccc);
-  border-radius: 5px;
-  font-family: var(--font-family, sans-serif);
-  font-size: var(--font-size, 16px);
-  width: 100%;
-  transition: border-color 0.3s ease;
-}
-
-.textarea:focus {
-  border-color: var(--primary-color);
-  outline: none;
-}
-
-/* Font Styles */
-.textarea--bold {
-  font-weight: bold;
-}
-
-.textarea--italic {
-  font-style: italic;
-}
-
-.textarea--underline {
-  text-decoration: underline;
-}
-
-/* Colors */
-.textarea--primary {
-  color: var(--primary-color);
-}
-
-.textarea--info {
-  color: var(--info-color);
-}
-
-.textarea--warning {
-  color: var(--warning-color);
-}
-
-.textarea--alert {
-  color: var(--alert-color);
-}
-
-.textarea--success {
-  color: var(--success-color);
-}
-
-.textarea--neutral {
-  color: var(--neutral-color);
-}
-
-.textarea--dark {
-  color: var(--dark-color);
-}
-
-/* Error State */
-.textarea--error {
-  border-color: var(--error-color, red);
-}
-
-.textarea-error {
-  color: red;
-  margin-top: 5px;
-}
-
-.textarea-helper {
-  color: var(--muted-text-color, #777);
-  margin-top: 5px;
-}
-
-/* Disabled */
-.textarea--disabled {
-  background-color: #f5f5f5;
-  cursor: not-allowed;
-}
-
-/* Collapsible */
-.textarea--collapsible {
-  display: none;
-}
-
-.textarea-wrapper button {
-  margin-top: 10px;
-  padding: 5px 10px;
-  border: none;
-  background-color: var(--primary-color);
-  color: white;
-  cursor: pointer;
-  border-radius: 5px;
-}

package/src/stories/Atoms/TextArea/TextArea.jsx

@@ -1,118 +0,0 @@
-//this.GUI/src/stories/Atoms/TextArea/TextArea.jsx
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import './TextArea.css';
-
-export const TextArea = ({
-  value,
-  defaultValue,
-  placeholder = "Enter text here...",
-  rows = 4,
-  cols = 50,
-  resize = "vertical",
-  bold = false,
-  italic = false,
-  underline = false,
-  fontSize = "16px",
-  color = "primary",
-  backgroundColor = "transparent",
-  collapsible = false,
-  collapseAt = 100,
-  maxLength,
-  disabled = false,
-  readOnly = false,
-  required = false,
-  onChange,
-  onBlur,
-  onFocus,
-  autoResize = false,
-  error = false,
-  errorMessage = "",
-  helperText = "",
-  className = "",
-  style = {},
-  ...props
-}) => {
-  const [collapsed, setCollapsed] = useState(collapsible && value?.length > collapseAt);
-
-  const handleChange = (e) => {
-    if (collapsible && e.target.value.length > collapseAt) {
-      setCollapsed(false);
-    }
-    if (onChange) onChange(e);
-  };
-
-  const textareaClasses = classNames('textarea', className, {
-    [`textarea--${color}`]: color,
-    'textarea--bold': bold,
-    'textarea--italic': italic,
-    'textarea--underline': underline,
-    'textarea--disabled': disabled,
-    'textarea--error': error,
-    'textarea--collapsible': collapsible && collapsed,
-  });
-
-  const customStyles = {
-    ...style,
-    fontSize,
-    backgroundColor,
-    resize,
-    display: collapsed ? 'none' : 'block',
-  };
-
-  return (
-    <div className="textarea-wrapper">
-      <textarea
-        value={value}
-        defaultValue={defaultValue}
-        placeholder={placeholder}
-        rows={rows}
-        cols={cols}
-        maxLength={maxLength}
-        readOnly={readOnly}
-        disabled={disabled}
-        required={required}
-        className={textareaClasses}
-        style={customStyles}
-        onChange={handleChange}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        {...props}
-      />
-      {error && errorMessage && <div className="textarea-error">{errorMessage}</div>}
-      {helperText && <div className="textarea-helper">{helperText}</div>}
-      {collapsed && <button onClick={() => setCollapsed(false)}>Expand</button>}
-    </div>
-  );
-};
-
-TextArea.propTypes = {
-  value: PropTypes.string,
-  defaultValue: PropTypes.string,
-  placeholder: PropTypes.string,
-  rows: PropTypes.number,
-  cols: PropTypes.number,
-  resize: PropTypes.oneOf(['none', 'vertical', 'horizontal', 'both']),
-  bold: PropTypes.bool,
-  italic: PropTypes.bool,
-  underline: PropTypes.bool,
-  fontSize: PropTypes.string,
-  color: PropTypes.oneOf(['primary', 'info', 'warning', 'alert', 'success', 'neutral', 'dark']),
-  backgroundColor: PropTypes.string,
-  collapsible: PropTypes.bool,
-  collapseAt: PropTypes.number,
-  maxLength: PropTypes.number,
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  required: PropTypes.bool,
-  onChange: PropTypes.func,
-  onBlur: PropTypes.func,
-  onFocus: PropTypes.func,
-  autoResize: PropTypes.bool,
-  error: PropTypes.bool,
-  errorMessage: PropTypes.string,
-  helperText: PropTypes.string,
-  className: PropTypes.string,
-  style: PropTypes.object,
-};

package/src/stories/Atoms/TextArea/TextArea.stories.jsx

@@ -1,36 +0,0 @@
-//this.GUI/src/stories/Atoms/TextArea/TextArea.stories.jsx
-import React from 'react';
-import { TextArea } from './TextArea';
-
-export default {
-  title: 'Atoms/Interactive/TextArea',
-  component: TextArea,
-  argTypes: {
-    bold: { control: 'boolean', description: 'Bold text' },
-    italic: { control: 'boolean', description: 'Italic text' },
-    underline: { control: 'boolean', description: 'Underlined text' },
-    color: {
-      control: { type: 'select', options: ['primary', 'info', 'warning', 'alert', 'success', 'neutral', 'dark'] },
-      description: 'Text color',
-    },
-    collapsible: { control: 'boolean', description: 'Enable collapsible text area' },
-    collapseAt: { control: 'number', description: 'Collapse after N characters' },
-  },
-};
-
-/** Interactive TextArea */
-const Template = (args) => <TextArea {...args} />;
-
-export const InteractiveTextArea = Template.bind({});
-InteractiveTextArea.args = {
-  value: 'Type here...',
-  placeholder: 'Enter your text...',
-  rows: 4,
-  cols: 50,
-  bold: false,
-  italic: false,
-  underline: false,
-  color: 'primary',
-  collapsible: false,
-  collapseAt: 100,
-};

package/src/stories/Atoms/TextInput/TextInput.css

@@ -1,102 +0,0 @@
-/*this.GUI/src/stories/Atoms/TextInput/TextInput.css */
-.text-input {
-  display: flex;
-  align-items: center;
-  font-family: var(--font-family);
-  width: 100%;
-  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);
-}
-
-.text-input__input {
-  width: 100%;
-  padding: var(--spacing-sm);
-  border: none;
-  background: transparent;
-  color: inherit;
-  font-size: inherit;
-  font-family: inherit;
-  outline: none;
-}
-
-.text-input--small .text-input__input {
-  font-size: var(--font-size-small);
-}
-
-.text-input--large .text-input__input {
-  font-size: var(--font-size-large);
-}
-
-.text-input--disabled {
-  background-color: var(--neutral-color-hover);
-  cursor: not-allowed;
-}
-
-.text-input--primary {
-  border-color: var(--primary-color);
-}
-
-.text-input--secondary {
-  border-color: var(--secondary-color);
-}
-
-/* Additional Colors */
-.text-input--info {
-  border-color: var(--info-color);
-}
-
-.text-input--warning {
-  border-color: var(--warning-color);
-}
-
-.text-input--alert {
-  border-color: var(--alert-color);
-}
-
-.text-input--success {
-  border-color: var(--success-color);
-}
-
-.text-input--neutral {
-  border-color: var(--neutral-color);
-}
-
-.text-input--dark {
-  border-color: var(--dark-color);
-}
-
-.text-input__clear-button {
-  background: none;
-  border: none;
-  font-size: inherit;
-  color: inherit;
-  cursor: pointer;
-}
-
-.text-input--loading {
-  background-color: #f0f0f0;
-}
-
-.text-input__spinner {
-  margin-left: var(--spacing-sm);
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 3px solid rgba(0, 0, 0, 0.1);
-  border-top-color: var(--primary-color);
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}

package/src/stories/Atoms/TextInput/TextInput.jsx

@@ -1,133 +0,0 @@
-//this.GUI/src/stories/Atoms/TextInput/TextInput.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import './TextInput.css';
-
-export const TextInput = ({
-  value,
-  defaultValue,
-  onChange,
-  placeholder = 'Enter text here...',
-  type = 'text',
-  size = 'medium',
-  color = 'primary',
-  fontFamily,
-  fontSize,
-  backgroundColor,
-  borderColor,
-  borderRadius,
-  disabled = false,
-  readOnly = false,
-  required = false,
-  autoFocus = false,
-  maxLength,
-  minLength,
-  pattern,
-  isValid,
-  error,
-  helperText,
-  errorMessage,
-  clearable = false,
-  onClear,
-  loading = false,
-  ariaLabel,
-  ariaDescribedBy,
-  tabIndex,
-  spellCheck = true,
-  autoComplete = 'on',
-  inputMode,
-  step,
-  className = '',
-  style = {},
-  ...props
-}) => {
-  const inputClasses = [
-    'text-input',
-    `text-input--${size}`,
-    `text-input--${color}`,
-    error ? 'text-input--error' : '',
-    loading ? 'text-input--loading' : '',
-    className,
-  ].join(' ').trim();
-
-  return (
-    <div className={inputClasses} style={{ backgroundColor, borderColor, borderRadius, fontFamily, fontSize, ...style }}>
-      <input
-        type={type}
-        value={value}
-        defaultValue={defaultValue}
-        onChange={onChange}
-        placeholder={placeholder}
-        disabled={disabled}
-        readOnly={readOnly}
-        required={required}
-        maxLength={maxLength}
-        minLength={minLength}
-        pattern={pattern}
-        aria-label={ariaLabel}
-        aria-describedby={ariaDescribedBy}
-        tabIndex={tabIndex}
-        spellCheck={spellCheck}
-        autoComplete={autoComplete}
-        inputMode={inputMode}
-        step={step}
-        className="text-input__input"
-        autoFocus={autoFocus}
-        {...props}
-      />
-      {clearable && value && (
-        <button className="text-input__clear-button" onClick={onClear} aria-label="Clear input">
-          &times;
-        </button>
-      )}
-      {loading && <div className="text-input__spinner" />}
-      {helperText && <div className="text-input__helper-text">{helperText}</div>}
-      {error && errorMessage && <div className="text-input__error-message">{errorMessage}</div>}
-    </div>
-  );
-};
-
-TextInput.propTypes = {
-  value: PropTypes.string,
-  defaultValue: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  placeholder: PropTypes.string,
-  type: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  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'
-  ]),
-  fontFamily: PropTypes.string,
-  fontSize: PropTypes.string,
-  backgroundColor: PropTypes.string,
-  borderColor: PropTypes.string,
-  borderRadius: PropTypes.string,
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  required: PropTypes.bool,
-  autoFocus: PropTypes.bool,
-  maxLength: PropTypes.number,
-  minLength: PropTypes.number,
-  pattern: PropTypes.string,
-  isValid: PropTypes.bool,
-  error: PropTypes.bool,
-  helperText: PropTypes.string,
-  errorMessage: PropTypes.string,
-  clearable: PropTypes.bool,
-  onClear: PropTypes.func,
-  loading: PropTypes.bool,
-  ariaLabel: PropTypes.string,
-  ariaDescribedBy: PropTypes.string,
-  tabIndex: PropTypes.number,
-  spellCheck: PropTypes.bool,
-  autoComplete: PropTypes.string,
-  inputMode: PropTypes.string,
-  step: PropTypes.number,
-  className: PropTypes.string,
-  style: PropTypes.object,
-};
-
-export default TextInput;

package/src/stories/Atoms/TextInput/TextInput.stories.jsx

@@ -1,69 +0,0 @@
-//this.GUI/src/stories/Atoms/TextInput/TextInput.stories.jsx
-import React, { useState } from 'react';
-import { TextInput } from './TextInput';
-
-export default {
-  title: 'Atoms/Interactive/TextInput',
-  component: TextInput,
-  argTypes: {
-    value: { control: 'text', defaultValue: '' },
-    placeholder: { control: 'text', defaultValue: 'Enter text...' },
-    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'
-        ]
-      }
-    },
-    disabled: { control: 'boolean' },
-    readOnly: { control: 'boolean' },
-    required: { control: 'boolean' },
-    clearable: { control: 'boolean' },
-    loading: { control: 'boolean' },
-  },
-};
-
-export const DefaultTextInput = () => {
-  const [inputValue, setInputValue] = useState('');
-
-  return (
-    <TextInput
-      value={inputValue}
-      onChange={(e) => setInputValue(e.target.value)}
-      placeholder="Type something..."
-    />
-  );
-};
-
-export const WithClear = () => {
-  const [inputValue, setInputValue] = useState('');
-
-  return (
-    <TextInput
-      value={inputValue}
-      onChange={(e) => setInputValue(e.target.value)}
-      placeholder="Enter text..."
-      clearable={true}
-      onClear={() => setInputValue('')}
-    />
-  );
-};
-
-export const InteractiveTextInput = (args) => {
-  return <TextInput {...args} />;
-};
-
-InteractiveTextInput.args = {
-  placeholder: 'Enter text...',
-  size: 'medium',
-  color: 'primary',
-  disabled: false,
-  readOnly: false,
-  clearable: true,
-  loading: false,
-};