this.gui 1.0.17 → 1.1.0

package/src/stories/Atoms/Snackbar/Snackbar.stories.jsx

@@ -1,78 +0,0 @@
-// src/stories/Atoms/Snackbar/Snackbar.stories.jsx
-import React from 'react';
-import { Snackbar } from './Snackbar';
-
-export default {
-  title: 'Atoms/Feedback/Snackbar',
-  component: Snackbar,
-  argTypes: {
-    message: {
-      control: 'text',
-      defaultValue: 'This is a snackbar message.',
-    },
-    duration: {
-      control: 'number',
-      defaultValue: 3000,
-    },
-    actionLabel: {
-      control: 'text',
-      defaultValue: 'Undo',
-    },
-    onActionClick: {
-      action: 'action clicked',
-    },
-    onClose: {
-      action: 'closed',
-    },
-    variant: {
-      control: {
-        type: 'select',
-        options: ['primary', 'secondary'],
-      },
-    },
-    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',
-        ],
-      },
-    },
-  },
-};
-
-const Template = (args) => <Snackbar {...args} />;
-
-export const PrimarySnackbar = Template.bind({});
-PrimarySnackbar.args = {
-  message: 'This is a primary snackbar.',
-  duration: 3000,
-  actionLabel: 'Undo',
-  variant: 'primary',
-  color: 'primary',
-};
-
-export const SecondarySnackbar = Template.bind({});
-SecondarySnackbar.args = {
-  message: 'This is a secondary snackbar with border.',
-  duration: 3000,
-  actionLabel: 'Dismiss',
-  variant: 'secondary',
-  color: 'success',
-};
-
-// Interactive Snackbar Example
-export const InteractiveSnackbar = Template.bind({});
-InteractiveSnackbar.args = {
-  message: 'This is a customizable snackbar.',
-  duration: 3000,
-  actionLabel: 'Dismiss',
-  variant: 'primary',
-  color: 'primary',
-  onActionClick: () => alert('Action clicked!'),
-  onClose: () => alert('Snackbar closed!'),
-};
-InteractiveSnackbar.storyName = 'Interactive Snackbar';

package/src/stories/Atoms/Spacer/Spacer.css

@@ -1,114 +0,0 @@
-/* src/stories/Atoms/Spacer/Spacer.css */
-
-/* Base Styles for Spacer */
-.spacer {
-  display: block;
-  flex-shrink: 0;
-}
-
-/* Vertical Spacers (Height) */
-.spacer--vertical {
-  width: 100%;
-}
-
-.spacer--xs.spacer--vertical {
-  height: 4px;
-}
-
-.spacer--sm.spacer--vertical {
-  height: 8px;
-}
-
-.spacer--md.spacer--vertical {
-  height: 16px;
-}
-
-.spacer--lg.spacer--vertical {
-  height: 32px;
-}
-
-.spacer--xl.spacer--vertical {
-  height: 64px;
-}
-
-/* Horizontal Spacers (Width) */
-.spacer--horizontal {
-  height: 100%;
-}
-
-.spacer--xs.spacer--horizontal {
-  width: 4px;
-}
-
-.spacer--sm.spacer--horizontal {
-  width: 8px;
-}
-
-.spacer--md.spacer--horizontal {
-  width: 16px;
-}
-
-.spacer--lg.spacer--horizontal {
-  width: 32px;
-}
-
-.spacer--xl.spacer--horizontal {
-  width: 64px;
-}
-
-/* Responsive Spacers (adjust size on different screen sizes) */
-.spacer--responsive {
-  @media (max-width: 768px) {
-    .spacer--xs {
-      height: 2px;
-      width: 2px;
-    }
-
-    .spacer--sm {
-      height: 4px;
-      width: 4px;
-    }
-
-    .spacer--md {
-      height: 8px;
-      width: 8px;
-    }
-
-    .spacer--lg {
-      height: 16px;
-      width: 16px;
-    }
-
-    .spacer--xl {
-      height: 32px;
-      width: 32px;
-    }
-  }
-
-  @media (max-width: 480px) {
-    .spacer--xs {
-      height: 1px;
-      width: 1px;
-    }
-
-    .spacer--sm {
-      height: 2px;
-      width: 2px;
-    }
-
-    .spacer--md {
-      height: 4px;
-      width: 4px;
-    }
-
-    .spacer--lg {
-      height: 8px;
-      width: 8px;
-    }
-
-    .spacer--xl {
-      height: 16px;
-      width: 16px;
-    }
-  }
-}

package/src/stories/Atoms/Spacer/Spacer.jsx

@@ -1,35 +0,0 @@
-// src/stories/Atoms/Spacer/Spacer.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import './Spacer.css';
-
-export const Spacer = ({
-  size = 'md',       // Default size is medium (16px)
-  direction = 'vertical', // Can be 'vertical' or 'horizontal'
-  className = '',
-  responsive = true, // Responsive spacer
-}) => {
-  const spacerClasses = classNames(
-    'spacer',
-    `spacer--${size}`,
-    `spacer--${direction}`,
-    {
-      'spacer--responsive': responsive,
-    },
-    className
-  );
-
-  return <div className={spacerClasses} aria-hidden="true" />;
-};
-
-Spacer.propTypes = {
-  /** Spacer size: 'xs', 'sm', 'md', 'lg', 'xl' */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  /** Direction of the space: 'vertical' or 'horizontal' */
-  direction: PropTypes.oneOf(['vertical', 'horizontal']),
-  /** Custom class name for the spacer */
-  className: PropTypes.string,
-  /** Whether the spacer should adjust responsively */
-  responsive: PropTypes.bool,
-};

package/src/stories/Atoms/Spacer/Spacer.stories.jsx

@@ -1,61 +0,0 @@
-// src/stories/Atoms/Spacer/Spacer.stories.jsx
-import React from 'react';
-import { Spacer } from './Spacer';
-
-export default {
-  title: 'Atoms/Layout/Spacer',
-  component: Spacer,
-  argTypes: {
-    size: {
-      control: { type: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
-      description: 'Controls the size of the space (width or height)',
-      defaultValue: 'md',
-    },
-    direction: {
-      control: { type: 'select', options: ['vertical', 'horizontal'] },
-      description: 'Direction of the spacer (vertical or horizontal)',
-      defaultValue: 'vertical',
-    },
-    responsive: {
-      control: { type: 'boolean' },
-      description: 'Make the spacer responsive to screen sizes',
-      defaultValue: true,
-    },
-    className: {
-      control: 'text',
-      description: 'Custom CSS class for additional styling',
-    },
-  },
-};
-
-const Template = (args) => (
-  <div>
-    {/* Vertical Spacer Example */}
-    <div style={{ backgroundColor: '#e0e0e0', padding: '10px' }}>
-      Content Before Vertical Spacer
-    </div>
-    <Spacer {...args} />
-    <div style={{ backgroundColor: '#e0e0e0', padding: '10px' }}>
-      Content After Vertical Spacer
-    </div>
-
-    {/* Horizontal Spacer Example */}
-    <div style={{ display: 'flex', alignItems: 'center', marginTop: '20px' }}>
-      <div style={{ backgroundColor: '#e0e0e0', padding: '10px' }}>
-        Left Content
-      </div>
-      <Spacer {...args} direction="horizontal" />
-      <div style={{ backgroundColor: '#e0e0e0', padding: '10px' }}>
-        Right Content
-      </div>
-    </div>
-  </div>
-);
-
-export const InteractiveSpacer = Template.bind({});
-InteractiveSpacer.args = {
-  size: 'md',
-  direction: 'vertical',
-  responsive: true,
-};
-InteractiveSpacer.storyName = 'Interactive Spacer';

package/src/stories/Atoms/Spinner/Spinner.css

@@ -1,110 +0,0 @@
-/* src/stories/Atoms/Spinner/Spinner.css */
-
-.spinner {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.spinner__icon {
-  border-radius: 50%;
-  border: 4px solid rgba(0, 0, 0, 0.1);
-  border-top-color: var(--spinner-color, var(--primary-color));
-  animation: spin var(--spinner-speed, 1s) linear infinite;
-}
-
-.spinner--small .spinner__icon {
-  width: 24px;
-  height: 24px;
-}
-
-.spinner--medium .spinner__icon {
-  width: 40px;
-  height: 40px;
-}
-
-.spinner--large .spinner__icon {
-  width: 64px;
-  height: 64px;
-}
-
-.spinner--full-screen {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: rgba(255, 255, 255, 0.8);
-  z-index: 1000;
-}
-
-.spinner__text {
-  margin-top: 10px;
-  text-align: center;
-  color: var(--text-color, #000);
-}
-
-/* Colors */
-.spinner--primary .spinner__icon {
-  border-top-color: var(--primary-color);
-}
-
-.spinner--secondary .spinner__icon {
-  border-top-color: var(--secondary-color);
-}
-
-.spinner--info .spinner__icon {
-  border-top-color: var(--info-color);
-}
-
-.spinner--warning .spinner__icon {
-  border-top-color: var(--warning-color);
-}
-
-.spinner--alert .spinner__icon {
-  border-top-color: var(--alert-color);
-}
-
-.spinner--success .spinner__icon {
-  border-top-color: var(--success-color);
-}
-
-.spinner--neutral .spinner__icon {
-  border-top-color: var(--neutral-color);
-}
-
-.spinner--dark .spinner__icon {
-  border-top-color: var(--dark-color);
-}
-
-/* Additional colors from design tokens */
-.spinner--classy-color-1 .spinner__icon { border-top-color: var(--classy-color-1); }
-.spinner--classy-color-2 .spinner__icon { border-top-color: var(--classy-color-2); }
-.spinner--classy-color-3 .spinner__icon { border-top-color: var(--classy-color-3); }
-.spinner--classy-color-4 .spinner__icon { border-top-color: var(--classy-color-4); }
-.spinner--classy-color-5 .spinner__icon { border-top-color: var(--classy-color-5); }
-
-.spinner--small-switch-color-1 .spinner__icon { border-top-color: var(--small-switch-color-1); }
-.spinner--small-switch-color-2 .spinner__icon { border-top-color: var(--small-switch-color-2); }
-
-.spinner--natural-color-1 .spinner__icon { border-top-color: var(--natural-color-1); }
-.spinner--natural-color-2 .spinner__icon { border-top-color: var(--natural-color-2); }
-.spinner--natural-color-3 .spinner__icon { border-top-color: var(--natural-color-3); }
-
-.spinner--grey-friend-1 .spinner__icon { border-top-color: var(--grey-friend-1); }
-.spinner--grey-friend-2 .spinner__icon { border-top-color: var(--grey-friend-2); }
-
-.spinner--shade-1 .spinner__icon { border-top-color: var(--shade-1); }
-.spinner--shade-2 .spinner__icon { border-top-color: var(--shade-2); }
-.spinner--shade-3 .spinner__icon { border-top-color: var(--shade-3); }
-.spinner--shade-4 .spinner__icon { border-top-color: var(--shade-4); }
-
-/* Keyframes */
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}

package/src/stories/Atoms/Spinner/Spinner.jsx

@@ -1,65 +0,0 @@
-// src/stories/Atoms/Spinner/Spinner.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import './Spinner.css';
-
-export const Spinner = ({
-  size = 'medium',
-  color = 'primary', // Ensure this prop is passed correctly
-  loading = true,
-  label = 'Loading...',
-  speed = '1s',
-  thickness = '4px',
-  variant = 'circle',
-  fullScreen = false,
-  text = '',
-  className = '',
-  style = {},
-  ...props
-}) => {
-  if (!loading) return null;
-
-  const spinnerClasses = classNames(
-    'spinner',
-    `spinner--${variant}`,
-    `spinner--${color}`, // This maps the color prop to the correct CSS class
-    {
-      'spinner--full-screen': fullScreen,
-      [`spinner--${size}`]: size,
-    },
-    className
-  );
-
-  return (
-    <div
-      className={spinnerClasses}
-      style={{ animationDuration: speed, borderWidth: thickness, ...style }}
-      role="status"
-      aria-label={label}
-      {...props}
-    >
-      <div className="spinner__icon"></div>
-      {text && <span className="spinner__text">{text}</span>}
-    </div>
-  );
-};
-
-Spinner.propTypes = {
-  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',
-  ]),
-  loading: PropTypes.bool,
-  label: PropTypes.string,
-  speed: PropTypes.string,
-  thickness: PropTypes.string,
-  variant: PropTypes.oneOf(['circle', 'dots', 'bars']),
-  fullScreen: PropTypes.bool,
-  text: PropTypes.string,
-  className: PropTypes.string,
-  style: PropTypes.object,
-};

package/src/stories/Atoms/Spinner/Spinner.stories.jsx

@@ -1,58 +0,0 @@
-// src/stories/Atoms/Spinner/Spinner.stories.jsx
-import React from 'react';
-import { Spinner } from './Spinner';
-
-export default {
-  title: 'Atoms/Feedback/Spinner',
-  component: Spinner,
-  argTypes: {
-    size: {
-      control: { type: 'select', options: ['small', 'medium', 'large'] },
-      description: 'Size of the spinner',
-      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',
-      ]},
-      description: 'Spinner color',
-      defaultValue: 'primary',
-    },
-    variant: {
-      control: { type: 'select', options: ['circle', 'dots', 'bars'] },
-      description: 'Spinner variant',
-      defaultValue: 'circle',
-    },
-    speed: {
-      control: { type: 'text' },
-      description: 'Speed of the spinner animation (e.g., "1s")',
-      defaultValue: '1s',
-    },
-    text: {
-      control: 'text',
-      description: 'Optional loading text',
-      defaultValue: 'Loading...',
-    },
-    fullScreen: {
-      control: 'boolean',
-      description: 'Display spinner in full-screen mode',
-      defaultValue: false,
-    },
-  },
-};
-
-const Template = (args) => <Spinner {...args} />;
-
-export const InteractiveSpinner = Template.bind({});
-InteractiveSpinner.args = {
-  size: 'medium',
-  color: 'primary',
-  variant: 'circle',
-  speed: '1s',
-  text: 'Loading...',
-  fullScreen: false,
-};
-InteractiveSpinner.storyName = 'Interactive Spinner';

package/src/stories/Atoms/Tag/Tag.css

@@ -1,112 +0,0 @@
-/* src/stories/Atoms/Tag/Tag.css */
-
-.tag {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.5rem 1rem;
-  border-radius: 12px;
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: background-color 0.3s ease, border-color 0.3s ease;
-}
-
-.tag--small {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
-}
-
-.tag--large {
-  padding: 0.75rem 1.25rem;
-  font-size: 1rem;
-}
-
-.tag--filled {
-  background-color: var(--tag-bg-color, #1F877D);
-  color: #fff;
-}
-
-.tag--outlined {
-  background-color: transparent;
-  border: 1px solid var(--tag-border-color, #1F877D);
-  color: var(--tag-border-color, #1F877D);
-}
-
-.tag--disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.tag__remove {
-  background: none;
-  border: none;
-  font-size: 1rem;
-  color: inherit;
-  cursor: pointer;
-  margin-left: 0.5rem;
-}
-
-.tag__icon {
-  margin-right: 0.5rem;
-}
-
-.tag--primary {
-  --tag-bg-color: var(--primary-color);
-  --tag-border-color: var(--primary-color);
-}
-
-.tag--secondary {
-  --tag-bg-color: var(--secondary-color);
-  --tag-border-color: var(--secondary-color);
-}
-
-.tag--info {
-  --tag-bg-color: var(--info-color);
-  --tag-border-color: var(--info-color);
-}
-
-.tag--warning {
-  --tag-bg-color: var(--warning-color);
-  --tag-border-color: var(--warning-color);
-}
-
-.tag--alert {
-  --tag-bg-color: var(--alert-color);
-  --tag-border-color: var(--alert-color);
-}
-
-.tag--success {
-  --tag-bg-color: var(--success-color);
-  --tag-border-color: var(--success-color);
-}
-
-.tag--neutral {
-  --tag-bg-color: var(--neutral-color);
-  --tag-border-color: var(--neutral-color);
-}
-
-.tag--dark {
-  --tag-bg-color: var(--dark-color);
-  --tag-border-color: var(--dark-color);
-}
-
-/* Additional colors */
-.tag--classy-color-1 { --tag-bg-color: var(--classy-color-1); --tag-border-color: var(--classy-color-1); }
-.tag--classy-color-2 { --tag-bg-color: var(--classy-color-2); --tag-border-color: var(--classy-color-2); }
-.tag--classy-color-3 { --tag-bg-color: var(--classy-color-3); --tag-border-color: var(--classy-color-3); }
-.tag--classy-color-4 { --tag-bg-color: var(--classy-color-4); --tag-border-color: var(--classy-color-4); }
-.tag--classy-color-5 { --tag-bg-color: var(--classy-color-5); --tag-border-color: var(--classy-color-5); }
-
-.tag--small-switch-color-1 { --tag-bg-color: var(--small-switch-color-1); --tag-border-color: var(--small-switch-color-1); }
-.tag--small-switch-color-2 { --tag-bg-color: var(--small-switch-color-2); --tag-border-color: var(--small-switch-color-2); }
-
-.tag--natural-color-1 { --tag-bg-color: var(--natural-color-1); --tag-border-color: var(--natural-color-1); }
-.tag--natural-color-2 { --tag-bg-color: var(--natural-color-2); --tag-border-color: var(--natural-color-2); }
-.tag--natural-color-3 { --tag-bg-color: var(--natural-color-3); --tag-border-color: var(--natural-color-3); }
-
-.tag--grey-friend-1 { --tag-bg-color: var(--grey-friend-1); --tag-border-color: var(--grey-friend-1); }
-.tag--grey-friend-2 { --tag-bg-color: var(--grey-friend-2); --tag-border-color: var(--grey-friend-2); }
-
-.tag--shade-1 { --tag-bg-color: var(--shade-1); --tag-border-color: var(--shade-1); }
-.tag--shade-2 { --tag-bg-color: var(--shade-2); --tag-border-color: var(--shade-2); }
-.tag--shade-3 { --tag-bg-color: var(--shade-3); --tag-border-color: var(--shade-3); }
-.tag--shade-4 { --tag-bg-color: var(--shade-4); --tag-border-color: var(--shade-4); }