this.gui 1.0.18 → 1.1.0

package/src/stories/Atoms/Paragraph/Paragraph.stories.jsx

@@ -1,143 +0,0 @@
-// src/stories/Atoms/Paragraph/Paragraph.stories.jsx
-import React from 'react';
-import { Paragraph } from './Paragraph';
-import './Paragraph.css';
-
-export default {
-  title: 'Atoms/Text/Paragraph',
-  component: Paragraph,
-  argTypes: {
-    text: {
-      control: 'text',
-      description: 'Text content for the paragraph.',
-    },
-    size: {
-      control: {
-        type: 'select',
-        options: ['xs', 'sm', 'md', 'lg', 'xl'],
-      },
-      description: 'Size of the paragraph text.',
-    },
-    alignment: {
-      control: {
-        type: 'select',
-        options: ['left', 'center', 'right', 'justify'],
-      },
-      description: 'Text alignment.',
-    },
-    weight: {
-      control: {
-        type: 'select',
-        options: ['light', 'normal', 'bold'],
-      },
-      description: 'Font weight.',
-    },
-    color: {
-      control: {
-        type: 'select',
-        options: [
-          'default',
-          'muted',
-          'primary',
-          'secondary',
-          'info',
-          'warning',
-          'alert',
-          'success',
-          'dark',
-          'neutral',
-          '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: 'Text color.',
-    },
-    lineHeight: {
-      control: {
-        type: 'select',
-        options: ['normal', 'tight', 'loose'],
-      },
-      description: 'Line height of the paragraph.',
-    },
-    className: {
-      control: 'text',
-      description: 'Additional CSS classes.',
-    },
-    style: {
-      control: 'object',
-      description: 'Inline styles.',
-    },
-  },
-};
-
-/**
- * Default Paragraph
- */
-export const DefaultParagraph = () => (
-  <Paragraph text="This is a default paragraph with medium size and left alignment." />
-);
-
-/**
- * Large Bold Centered Paragraph
- */
-export const LargeBoldCentered = () => (
-  <Paragraph
-    text="This is a large, bold, and centered paragraph."
-    size="lg"
-    weight="bold"
-    alignment="center"
-    color="primary"
-  />
-);
-
-/**
- * Small Muted Paragraph with Tight Line Height
- */
-export const SmallMutedTight = () => (
-  <Paragraph
-    text="This is a small, muted paragraph with tight line height."
-    size="sm"
-    color="muted"
-    lineHeight="tight"
-  />
-);
-
-/**
- * Paragraph with Justify Alignment and Secondary Color
- */
-export const JustifySecondary = () => (
-  <Paragraph
-    text="This paragraph is justified and has secondary color."
-    alignment="justify"
-    color="secondary"
-  />
-);
-
-/**
- * Interactive Paragraph
- */
-const Template = (args) => <Paragraph {...args} />;
-
-export const InteractiveParagraph = Template.bind({});
-InteractiveParagraph.args = {
-  text: 'This is an interactive paragraph.',
-  size: 'md',
-  alignment: 'left',
-  weight: 'normal',
-  color: 'default',
-  lineHeight: 'normal',
-};

package/src/stories/Atoms/ProgressBar/ProgressBar.css

@@ -1,127 +0,0 @@
-/* this.GUI/src/stories/Atoms/ProgressBar/ProgressBar.css */
-
-.progress-bar-container {
-  width: 100%;
-  height: 20px;
-  background-color: var(--neutral-color);
-  border-radius: var(--border-radius);
-  overflow: hidden;
-  position: relative;
-}
-
-.progress-bar {
-  height: 100%;
-  transition: width var(--transition-speed);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--border-radius);
-  color: var(--text-color-inverse); /* White text for better contrast */
-}
-
-.progress-label {
-  font-size: 12px;
-  font-weight: bold;
-}
-
-/* Color Variants */
-.progress-bar--primary {
-  background-color: var(--primary-color);
-}
-
-.progress-bar--secondary {
-  background-color: var(--secondary-color);
-}
-
-.progress-bar--info {
-  background-color: var(--info-color);
-}
-
-.progress-bar--warning {
-  background-color: var(--warning-color);
-}
-
-.progress-bar--alert {
-  background-color: var(--alert-color);
-}
-
-.progress-bar--success {
-  background-color: var(--success-color);
-}
-
-.progress-bar--neutral {
-  background-color: var(--neutral-color);
-}
-
-.progress-bar--dark {
-  background-color: var(--dark-color);
-}
-
-/* Classy Palette */
-.progress-bar--classy-1 {
-  background-color: var(--classy-color-1);
-}
-
-.progress-bar--classy-2 {
-  background-color: var(--classy-color-2);
-}
-
-.progress-bar--classy-3 {
-  background-color: var(--classy-color-3);
-}
-
-.progress-bar--classy-4 {
-  background-color: var(--classy-color-4);
-}
-
-.progress-bar--classy-5 {
-  background-color: var(--classy-color-5);
-}
-
-/* Small Switch Palette */
-.progress-bar--small-switch-1 {
-  background-color: var(--small-switch-color-1);
-}
-
-.progress-bar--small-switch-2 {
-  background-color: var(--small-switch-color-2);
-}
-
-/* Natural Palette */
-.progress-bar--natural-1 {
-  background-color: var(--natural-color-1);
-}
-
-.progress-bar--natural-2 {
-  background-color: var(--natural-color-2);
-}
-
-.progress-bar--natural-3 {
-  background-color: var(--natural-color-3);
-}
-
-/* Grey Friends */
-.progress-bar--grey-friend-1 {
-  background-color: var(--grey-friend-1);
-}
-
-.progress-bar--grey-friend-2 {
-  background-color: var(--grey-friend-2);
-}
-
-/* Shades */
-.progress-bar--shade-1 {
-  background-color: var(--shade-1);
-}
-
-.progress-bar--shade-2 {
-  background-color: var(--shade-2);
-}
-
-.progress-bar--shade-3 {
-  background-color: var(--shade-3);
-}
-
-.progress-bar--shade-4 {
-  background-color: var(--shade-4);
-}

package/src/stories/Atoms/ProgressBar/ProgressBar.jsx

@@ -1,40 +0,0 @@
-// this.GUI/src/stories/Atoms/ProgressBar/ProgressBar.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import './ProgressBar.css'; // Import the CSS styles
-
-export const ProgressBar = ({
-  progress = 0, // Default to 0% progress
-  color = 'primary', // Can be 'primary', 'secondary', 'info', 'warning', etc.
-  label = '', // Optional label text
-  showLabel = true, // Show or hide the label
-  className = '',
-  style = {},
-  ...props
-}) => {
-  const colorClass = `progress-bar--${color}`;
-
-  return (
-    <div className={`progress-bar-container ${className}`} style={style} {...props}>
-      <div className={`progress-bar ${colorClass}`} style={{ width: `${progress}%` }}>
-        {showLabel && <span className="progress-label">{label}</span>}
-      </div>
-    </div>
-  );
-};
-
-ProgressBar.propTypes = {
-  progress: PropTypes.number,
-  color: PropTypes.oneOf([
-    'primary', 'secondary', 'info', 'warning', 'alert', 'success', 'neutral', 'dark',
-    'classy-1', 'classy-2', 'classy-3', 'classy-4', 'classy-5',
-    'small-switch-1', 'small-switch-2',
-    'natural-1', 'natural-2', 'natural-3',
-    'grey-friend-1', 'grey-friend-2',
-    'shade-1', 'shade-2', 'shade-3', 'shade-4'
-  ]),
-  label: PropTypes.string,
-  showLabel: PropTypes.bool,
-  className: PropTypes.string,
-  style: PropTypes.object,
-};

package/src/stories/Atoms/ProgressBar/ProgressBar.stories.jsx

@@ -1,86 +0,0 @@
-// this.GUI/src/stories/Atoms/ProgressBar/ProgressBar.stories.jsx
-import React from 'react';
-import { ProgressBar } from './ProgressBar';
-import './ProgressBar.css'; // Import the CSS styles
-
-export default {
-  title: 'Atoms/Feedback/ProgressBar',
-  component: ProgressBar,
-  argTypes: {
-    color: {
-      control: {
-        type: 'select',
-        options: [
-          'primary', 'secondary', 'info', 'warning', 'alert', 'success', 'neutral', 'dark',
-          'classy-1', 'classy-2', 'classy-3', 'classy-4', 'classy-5',
-          'small-switch-1', 'small-switch-2',
-          'natural-1', 'natural-2', 'natural-3',
-          'grey-friend-1', 'grey-friend-2',
-          'shade-1', 'shade-2', 'shade-3', 'shade-4'
-        ],
-      },
-      description: 'Semantic color of the progress bar.',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'primary' },
-      },
-    },
-    progress: {
-      control: {
-        type: 'number',
-      },
-      description: 'Percentage of progress completed.',
-      table: {
-        type: { summary: 'number' },
-      },
-    },
-    label: {
-      control: 'text',
-      description: 'Optional label text displayed within the progress bar.',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    showLabel: {
-      control: 'boolean',
-      description: 'Whether to display the label within the progress bar.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: true },
-      },
-    },
-  },
-};
-
-const Template = (args) => <ProgressBar {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  progress: 50,
-  color: 'primary',
-  label: '50% Complete',
-  showLabel: true,
-};
-
-export const WithDifferentColors = () => (
-  <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
-    {[
-      'primary', 'secondary', 'info', 'warning', 'alert', 'success', 'neutral', 'dark',
-      'classy-1', 'classy-2', 'classy-3', 'classy-4', 'classy-5',
-      'small-switch-1', 'small-switch-2',
-      'natural-1', 'natural-2', 'natural-3',
-      'grey-friend-1', 'grey-friend-2',
-      'shade-1', 'shade-2', 'shade-3', 'shade-4'
-    ].map((color) => (
-      <ProgressBar key={color} progress={75} color={color} label={`${color} bar`} />
-    ))}
-  </div>
-);
-
-export const InteractivePlayground = Template.bind({});
-InteractivePlayground.args = {
-  progress: 60,
-  color: 'info',
-  label: 'Interactive Progress',
-  showLabel: true,
-};

package/src/stories/Atoms/RadioButton/RadioButton.css

@@ -1,130 +0,0 @@
-/* src/stories/Atoms/RadioButton/RadioButton.css */
-
-/* Base RadioButton Styles */
-.radio-button {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  font-family: var(--font-family);
-  font-size: var(--font-size-base); /* Inherit base font size */
-  color: var(--text-color);
-  user-select: none;
-}
-
-/* Disabled State */
-.radio-button--disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-/* Hidden RadioButton Input */
-.radio-button input {
-  opacity: 0;
-  position: absolute;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-
-/* Custom RadioButton */
-.radio-button::before {
-  content: '';
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
-  border: 2px solid var(--border-color);
-  border-radius: 50%;
-  background-color: var(--background-color);
-  transition: background-color var(--transition-speed), border-color var(--transition-speed);
-}
-
-/* Checked State */
-.radio-button input:checked + .radio-button__label::before {
-  background-color: var(--primary-color);
-  border-color: var(--primary-color);
-}
-
-/* Dot inside radio button */
-.radio-button input:checked + .radio-button__label::after {
-  content: '';
-  position: absolute;
-  left: 6px;
-  top: 6px;
-  width: 6px;
-  height: 6px;
-  background-color: var(--text-color-inverse);
-  border-radius: 50%;
-}
-
-/* Variants */
-.radio-button--primary::before {
-  border-color: var(--primary-color);
-}
-
-.radio-button--secondary::before {
-  border-color: var(--secondary-color);
-}
-
-/* Sizes */
-.radio-button--small {
-  font-size: var(--font-size-small); /* Inherit small font size */
-}
-
-.radio-button--large {
-  font-size: var(--font-size-large); /* Inherit large font size */
-}
-
-.radio-button--small::before {
-  width: 12px;
-  height: 12px;
-}
-
-.radio-button--large::before {
-  width: 20px;
-  height: 20px;
-}
-
-/* Color Classes */
-.info {
-  --primary-color: var(--info-color);
-}
-
-.warning {
-  --primary-color: var(--warning-color);
-}
-
-.alert {
-  --primary-color: var(--alert-color);
-}
-
-.success {
-  --primary-color: var(--success-color);
-}
-
-.neutral {
-  --primary-color: var(--neutral-color);
-}
-
-.dark {
-  --primary-color: var(--dark-color);
-}
-
-/* Additional color classes for customization */
-.classy-color-1 { --primary-color: var(--classy-color-1); }
-.classy-color-2 { --primary-color: var(--classy-color-2); }
-.classy-color-3 { --primary-color: var(--classy-color-3); }
-.classy-color-4 { --primary-color: var(--classy-color-4); }
-.classy-color-5 { --primary-color: var(--classy-color-5); }
-.small-switch-color-1 { --primary-color: var(--small-switch-color-1); }
-.small-switch-color-2 { --primary-color: var(--small-switch-color-2); }
-.natural-color-1 { --primary-color: var(--natural-color-1); }
-.natural-color-2 { --primary-color: var(--natural-color-2); }
-.natural-color-3 { --primary-color: var(--natural-color-3); }
-.grey-friend-1 { --primary-color: var(--grey-friend-1); }
-.grey-friend-2 { --primary-color: var(--grey-friend-2); }
-.shade-1 { --primary-color: var(--shade-1); }
-.shade-2 { --primary-color: var(--shade-2); }
-.shade-3 { --primary-color: var(--shade-3); }
-.shade-4 { --primary-color: var(--shade-4); }

package/src/stories/Atoms/RadioButton/RadioButton.jsx

@@ -1,87 +0,0 @@
-// src/stories/Atoms/RadioButton/RadioButton.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import './RadioButton.css';
-
-export const RadioButton = ({
-  label,
-  checked = false,
-  onChange,
-  variant = 'primary',
-  size = 'normal',
-  color = 'info',
-  rounded = false,
-  disabled = false,
-  name = '',
-  className = '',
-  ...props
-}) => {
-  const radioButtonClasses = classNames('radio-button', className, {
-    [`radio-button--${variant}`]: variant,
-    [`radio-button--${size}`]: size !== 'normal',
-    [color]: color,
-    'radio-button--rounded': rounded,
-    'radio-button--disabled': disabled,
-  });
-
-  return (
-    <label className={radioButtonClasses}>
-      <input
-        type="radio"
-        checked={checked}
-        onChange={onChange}
-        disabled={disabled}
-        name={name}
-        {...props}
-      />
-      <span className="radio-button__label">{label}</span>
-    </label>
-  );
-};
-
-RadioButton.propTypes = {
-  /** Label text for the radio button */
-  label: PropTypes.string.isRequired,
-  /** Checked state of the radio button */
-  checked: PropTypes.bool,
-  /** Change handler */
-  onChange: PropTypes.func,
-  /** Radio button variant */
-  variant: PropTypes.oneOf(['primary', 'secondary']),
-  /** Size of the radio button */
-  size: PropTypes.oneOf(['small', 'normal', 'large']),
-  /** Color from the global palette */
-  color: PropTypes.oneOf([
-    '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',
-  ]),
-  /** Rounded or squared */
-  rounded: PropTypes.bool,
-  /** Disabled state */
-  disabled: PropTypes.bool,
-  /** Name of the radio button group */
-  name: PropTypes.string.isRequired,
-  /** Additional CSS classes */
-  className: PropTypes.string,
-};