this.gui 1.0.18 → 1.1.0

package/src/scripts/renderComponents.js

@@ -1,11 +0,0 @@
-// this.GUI/src/renderComponent.js
-import ComponentRegistry from './ComponentRegistry';
-
-export function renderComponent(type) {
-  const Component = ComponentRegistry[type];
-  if (!Component) {
-    console.warn(`Component type "${type}" not found in the registry.`);
-    return null;
-  }
-  return Component;
-}

package/src/stories/Atoms/Alert/Alert.css

@@ -1,211 +0,0 @@
-/* src/stories/Atoms/Alert/Alert.css */
-
-/* Base Alert Styles */
-.alert {
-  padding: var(--spacing-sm) var(--spacing-md);
-  border-radius: var(--border-radius);
-  font-family: var(--font-family);
-  font-size: var(--font-size-base);
-  display: flex;
-  align-items: center;
-  box-shadow: var(--box-shadow);
-  margin-bottom: var(--spacing-md);
-  transition: 
-    background-color var(--transition-speed),
-    border-color var(--transition-speed),
-    color var(--transition-speed);
-  
-  /* Default Colors (Primary Variant) */
-  background-color: var(--alert-bg-color, var(--primary-color));
-  color: var(--alert-text-color, var(--text-color-inverse));
-  border: 1px solid var(--alert-border-color, var(--primary-color));
-  
-  /* Entrance Animation */
-  animation: fadeIn 0.3s ease-out;
-}
-
-/* Primary Variant */
-.alert--primary {
-  /* Primary Variant Colors */
-  --alert-bg-color: var(--primary-color);
-  --alert-text-color: var(--text-color-inverse);
-  --alert-border-color: var(--primary-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--primary-color-hover);
-  --alert-border-hover-color: var(--primary-color-hover);
-}
-
-.alert--primary:hover {
-  background-color: var(--alert-bg-hover-color);
-  border-color: var(--alert-border-hover-color);
-}
-
-/* Secondary Variant */
-.alert--secondary {
-  /* Secondary Variant Colors */
-  --alert-bg-color: transparent;
-  --alert-text-color: var(--secondary-color);
-  --alert-border-color: var(--secondary-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--secondary-color-hover);
-  --alert-border-hover-color: var(--secondary-color-hover);
-  --alert-text-hover-color: var(--text-color-inverse);
-}
-
-.alert--secondary:hover {
-  background-color: var(--alert-bg-hover-color);
-  color: var(--alert-text-hover-color);
-  border-color: var(--alert-border-hover-color);
-}
-
-/* Semantic Color Modifiers for Primary Variant */
-.alert--primary.alert--info {
-  --alert-bg-color: var(--info-color);
-  --alert-border-color: var(--info-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--info-color-hover);
-  --alert-border-hover-color: var(--info-color-hover);
-}
-
-.alert--primary.alert--warning {
-  --alert-bg-color: var(--warning-color);
-  --alert-border-color: var(--warning-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--warning-color-hover);
-  --alert-border-hover-color: var(--warning-color-hover);
-}
-
-.alert--primary.alert--alert {
-  --alert-bg-color: var(--alert-color);
-  --alert-border-color: var(--alert-color);
-  --alert-text-color: var(--text-color); /* Dark text for readability */
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--alert-color-hover);
-  --alert-border-hover-color: var(--alert-color-hover);
-}
-
-.alert--primary.alert--success {
-  --alert-bg-color: var(--success-color);
-  --alert-border-color: var(--success-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--success-color-hover);
-  --alert-border-hover-color: var(--success-color-hover);
-}
-
-.alert--primary.alert--neutral {
-  --alert-bg-color: var(--neutral-color);
-  --alert-border-color: var(--neutral-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--neutral-color-hover);
-  --alert-border-hover-color: var(--neutral-color-hover);
-}
-
-.alert--primary.alert--dark {
-  --alert-bg-color: var(--dark-color);
-  --alert-border-color: var(--dark-color);
-  --alert-text-color: var(--text-color-inverse); /* White text on dark background */
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--dark-color-hover);
-  --alert-border-hover-color: var(--dark-color-hover);
-}
-
-/* Semantic Color Modifiers for Secondary Variant */
-.alert--secondary.alert--info {
-  --alert-text-color: var(--info-color);
-  --alert-border-color: var(--info-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--info-color-hover);
-  --alert-border-hover-color: var(--info-color-hover);
-}
-
-.alert--secondary.alert--warning {
-  --alert-text-color: var(--warning-color);
-  --alert-border-color: var(--warning-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--warning-color-hover);
-  --alert-border-hover-color: var(--warning-color-hover);
-}
-
-.alert--secondary.alert--alert {
-  --alert-text-color: var(--alert-color);
-  --alert-border-color: var(--alert-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--alert-color-hover);
-  --alert-border-hover-color: var(--alert-color-hover);
-}
-
-.alert--secondary.alert--success {
-  --alert-text-color: var(--success-color);
-  --alert-border-color: var(--success-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--success-color-hover);
-  --alert-border-hover-color: var(--success-color-hover);
-}
-
-.alert--secondary.alert--neutral {
-  --alert-text-color: var(--neutral-color);
-  --alert-border-color: var(--neutral-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--neutral-color-hover);
-  --alert-border-hover-color: var(--neutral-color-hover);
-}
-
-.alert--secondary.alert--dark {
-  --alert-text-color: var(--dark-color);
-  --alert-border-color: var(--dark-color);
-  
-  /* Hover Colors */
-  --alert-bg-hover-color: var(--dark-color-hover);
-  --alert-border-hover-color: var(--dark-color-hover);
-}
-
-/* Optional: Icon Styles */
-.alert__icon {
-  margin-right: var(--spacing-sm);
-  font-size: 1.2em;
-}
-
-/* Optional: Close Button Styles */
-.alert__close {
-  margin-left: auto;
-  background: none;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  font-size: 1.2em;
-}
-
-/* Dismissible Modifier */
-.alert--dismissible {
-  padding-right: var(--spacing-md);
-}
-
-/* Keyframes for fade-in */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Apply animation to alert */
-.alert {
-  animation: fadeIn 0.3s ease-out;
-}

package/src/stories/Atoms/Alert/Alert.jsx

@@ -1,56 +0,0 @@
-// src/stories/Atoms/Alert/Alert.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Alert.css'; // Import the CSS styles
-
-export const Alert = ({
-  variant = 'primary', // 'primary', 'secondary'
-  color, // 'info', 'warning', 'alert', 'success', 'neutral', 'dark'
-  children,
-  className = '',
-  style = {},
-  onClose, // Function to handle close action
-  dismissible = false, // If true, show close button
-  icon, // Optional icon element
-  ...props
-}) => {
-  const variantClass = `alert--${variant}`;
-  const colorClass = color ? `alert--${color}` : '';
-  const dismissibleClass = dismissible ? 'alert--dismissible' : '';
-
-  const combinedClassName = `alert ${variantClass} ${colorClass} ${dismissibleClass} ${className}`.trim();
-
-  return (
-    <div
-      className={combinedClassName}
-      style={style}
-      role="alert"
-      aria-live="assertive"
-      {...props}
-    >
-      {icon && <span className="alert__icon">{icon}</span>}
-      <span className="alert__content">{children}</span>
-      {dismissible && (
-        <button
-          className="alert__close"
-          onClick={onClose}
-          aria-label="Close Alert"
-          tabIndex="0"
-        >
-          &times;
-        </button>
-      )}
-    </div>
-  );
-};
-
-Alert.propTypes = {
-  variant: PropTypes.oneOf(['primary', 'secondary']),
-  color: PropTypes.oneOf(['info', 'warning', 'alert', 'success', 'neutral', 'dark']),
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  style: PropTypes.object,
-  onClose: PropTypes.func,
-  dismissible: PropTypes.bool,
-  icon: PropTypes.node,
-};

package/src/stories/Atoms/Alert/Alert.stories.jsx

@@ -1,167 +0,0 @@
-// src/stories/Atoms/Alert/Alert.stories.jsx
-import React from 'react';
-import { Alert } from './Alert';
-import './Alert.css'; // Import the CSS styles
-
-export default {
-  title: 'Atoms/Feedback/Alert',
-  component: Alert,
-  argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-        options: ['primary', 'secondary'],
-      },
-      description: 'Variant of the alert.',
-      table: {
-        type: { summary: 'primary | secondary' },
-        defaultValue: { summary: 'primary' },
-      },
-    },
-    color: {
-      control: {
-        type: 'select',
-        options: ['info', 'warning', 'alert', 'success', 'neutral', 'dark'],
-      },
-      description: 'Semantic color of the alert.',
-      table: {
-        type: { summary: `'info' | 'warning' | 'alert' | 'success' | 'neutral' | 'dark'` },
-      },
-    },
-    children: {
-      control: 'text',
-      description: 'Content of the alert.',
-      table: {
-        type: { summary: 'node' },
-      },
-    },
-    dismissible: {
-      control: 'boolean',
-      description: 'If true, shows a close button to dismiss the alert.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-    },
-    onClose: {
-      action: 'closed',
-      description: 'Function called when the alert is dismissed.',
-      table: {
-        type: { summary: 'function' },
-      },
-    },
-    icon: {
-      control: 'none', // Typically, icons are not controlled via Storybook controls
-      description: 'Optional icon to display in the alert.',
-      table: {
-        type: { summary: 'node' },
-      },
-    },
-    className: {
-      control: 'text',
-      description: 'Additional CSS classes.',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    style: {
-      control: 'object',
-      description: 'Inline styles.',
-      table: {
-        type: { summary: 'object' },
-      },
-    },
-  },
-};
-
-/**
- * 
- * Shows default primary and secondary alerts without any semantic color.
- */
-export const DefaultAlerts = () => (
-  <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
-    <Alert variant="primary">Primary Default Alert</Alert>
-    <Alert variant="secondary">Secondary Default Alert</Alert>
-  </div>
-);
-
-/**
- * 
- * Demonstrates primary alerts with all semantic colors.
- */
-export const PrimaryAlerts = () => (
-  <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
-    <h3>Primary Alerts</h3>
-    {['info', 'warning', 'alert', 'success', 'neutral', 'dark'].map((color) => (
-      <Alert key={color} variant="primary" color={color}>
-        This is a {color} primary alert.
-      </Alert>
-    ))}
-  </div>
-);
-
-/**
- * 
- * Demonstrates secondary alerts with all semantic colors.
- */
-export const SecondaryAlerts = () => (
-  <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
-    <h3>Secondary Alerts</h3>
-    {['info', 'warning', 'alert', 'success', 'neutral', 'dark'].map((color) => (
-      <Alert key={color} variant="secondary" color={color}>
-        This is a {color} secondary alert.
-      </Alert>
-    ))}
-  </div>
-);
-
-/**
- * 
- * Demonstrates primary and secondary alerts that can be dismissed.
- */
-export const DismissibleAlerts = () => (
-  <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
-    <h3>Dismissible Primary Alerts</h3>
-    {['info', 'warning', 'alert', 'success', 'neutral', 'dark'].map((color) => (
-      <Alert
-        key={color}
-        variant="primary"
-        color={color}
-        dismissible
-        onClose={() => alert(`Closed ${color} primary alert`)}
-      >
-        This is a {color} primary alert that can be dismissed.
-      </Alert>
-    ))}
-
-    <h3>Dismissible Secondary Alerts</h3>
-    {['info', 'warning', 'alert', 'success', 'neutral', 'dark'].map((color) => (
-      <Alert
-        key={color}
-        variant="secondary"
-        color={color}
-        dismissible
-        onClose={() => alert(`Closed ${color} secondary alert`)}
-      >
-        This is a {color} secondary alert that can be dismissed.
-      </Alert>
-    ))}
-  </div>
-);
-
-
-/**
- * ### Interactive Playground
- * 
- * Allows dynamic interaction with the alert props via Storybook controls.
- */
-const Template = (args) => <Alert {...args} />;
-
-export const Playground = Template.bind({});
-Playground.args = {
-  variant: 'primary',
-  color: 'info',
-  children: 'This is an interactive alert.',
-  dismissible: false,
-};
-Playground.storyName = 'Interactive Playground';

package/src/stories/Atoms/Audio/Audio.css

@@ -1,259 +0,0 @@
-/* src/stories/Atoms/Audio/Audio.css */
-
-/* Base Audio Player Styles */
-.audio {
-  display: flex;
-  align-items: center;
-  background-color: rgba(245, 245, 245, 0.3); /* Subtle grey with low opacity */
-  padding: var(--spacing-sm, 8px);
-  border-radius: var(--border-radius, 6px);
-  gap: var(--spacing-sm, 8px);
-  max-width: 300px; /* Default for medium size */
-  border: 1px solid var(--border-color, #dddddd); /* Added border */
-  position: relative;
-  transition: background-color var(--transition-speed, 0.3s);
-}
-
-.audio:hover {
-  background-color: rgba(245, 245, 245, 0.5);
-}
-
-/* Size Variants */
-.audio--small {
-  max-width: 200px;
-}
-
-.audio--medium {
-  max-width: 300px;
-}
-
-/* Color Classes */
-.audio--classy-color-1 {
-  --icon-color: var(--classy-color-1);
-}
-
-.audio--classy-color-2 {
-  --icon-color: var(--classy-color-2);
-}
-
-.audio--classy-color-3 {
-  --icon-color: var(--classy-color-3);
-}
-
-.audio--classy-color-4 {
-  --icon-color: var(--classy-color-4);
-}
-
-.audio--classy-color-5 {
-  --icon-color: var(--classy-color-5);
-}
-
-.audio--small-switch-color-1 {
-  --icon-color: var(--small-switch-color-1);
-}
-
-.audio--small-switch-color-2 {
-  --icon-color: var(--small-switch-color-2);
-}
-
-.audio--natural-color-1 {
-  --icon-color: var(--natural-color-1);
-}
-
-.audio--natural-color-2 {
-  --icon-color: var(--natural-color-2);
-}
-
-.audio--natural-color-3 {
-  --icon-color: var(--natural-color-3);
-}
-
-.audio--grey-friend-1 {
-  --icon-color: var(--grey-friend-1);
-}
-
-.audio--grey-friend-2 {
-  --icon-color: var(--grey-friend-2);
-}
-
-.audio--shade-1 {
-  --icon-color: var(--shade-1);
-}
-
-.audio--shade-2 {
-  --icon-color: var(--shade-2);
-}
-
-.audio--shade-3 {
-  --icon-color: var(--shade-3);
-}
-
-.audio--shade-4 {
-  --icon-color: var(--shade-4);
-}
-
-/* Play/Pause and Mute Buttons */
-.audio__play-pause,
-.audio__mute {
-  background-color: rgba(128, 128, 128, 0.2); /* Slightly darker grey */
-  border: none;
-  border-radius: 50%;
-  padding: var(--spacing-xs, 6px);
-  cursor: pointer;
-  transition: background-color var(--transition-speed, 0.3s);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--icon-color, #344b47); /* Default icon color */
-}
-
-.audio__play-pause:hover,
-.audio__mute:hover {
-  background-color: rgba(128, 128, 128, 0.4); /* Darker on hover */
-}
-
-/* Time Display and Seek Slider */
-.audio__seek {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs, 4px);
-  flex: 1;
-}
-
-.audio__seek-slider {
-  width: 100%;
-  cursor: pointer;
-  appearance: none;
-  height: 4px;
-  background: var(--grey-friend-2, #96b1ac);
-  border-radius: 2px;
-  outline: none;
-  transition: background var(--transition-speed, 0.3s);
-}
-
-.audio__seek-slider::-webkit-slider-thumb {
-  appearance: none;
-  width: 12px;
-  height: 12px;
-  background: var(--icon-color, #344b47);
-  border-radius: 50%;
-  cursor: pointer;
-  margin-top: -4px; /* Center the thumb */
-  transition: background var(--transition-speed, 0.3s);
-}
-
-.audio__seek-slider::-moz-range-thumb {
-  width: 12px;
-  height: 12px;
-  background: var(--icon-color, #344b47);
-  border-radius: 50%;
-  cursor: pointer;
-  transition: background var(--transition-speed, 0.3s);
-}
-
-.audio__seek-slider:hover {
-  background: var(--grey-friend-1, #344b47);
-}
-
-.audio__seek-slider:hover::-webkit-slider-thumb,
-.audio__seek-slider:hover::-moz-range-thumb {
-  background: var(--icon-color, #344b47);
-}
-
-.audio__time {
-  font-size: var(--font-size-small, 0.9em);
-  color: var(--icon-color, #344b47); /* Inherit icon color */
-  white-space: nowrap;
-}
-
-/* Volume Container */
-.audio__volume-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-/* Volume Slider */
-.audio__volume-slider {
-  position: absolute;
-  bottom: -30px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 100px;
-  cursor: pointer;
-  appearance: none;
-  height: 4px;
-  background: var(--grey-friend-2, #96b1ac);
-  border-radius: 2px;
-  outline: none;
-  transition: opacity var(--transition-speed, 0.3s);
-  opacity: 0;
-  pointer-events: none;
-  z-index: 10;
-}
-
-.audio__volume-slider.visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.audio__volume-slider::-webkit-slider-thumb {
-  appearance: none;
-  width: 12px;
-  height: 12px;
-  background: var(--icon-color, #344b47);
-  border-radius: 50%;
-  cursor: pointer;
-  transition: background var(--transition-speed, 0.3s);
-}
-
-.audio__volume-slider::-moz-range-thumb {
-  width: 12px;
-  height: 12px;
-  background: var(--icon-color, #344b47);
-  border-radius: 50%;
-  cursor: pointer;
-  transition: background var(--transition-speed, 0.3s);
-}
-
-.audio__volume-slider:hover {
-  background: var(--grey-friend-1, #344b47);
-}
-
-.audio__volume-slider:hover::-webkit-slider-thumb,
-.audio__volume-slider:hover::-moz-range-thumb {
-  background: var(--icon-color, #344b47);
-}
-
-/* Show Volume Slider on Hover or When Toggled */
-.audio:hover .audio__volume-slider,
-.audio__volume-slider.visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-/* Responsive Adjustments */
-@media (max-width: 768px) {
-  .audio--small {
-    max-width: 150px;
-  }
-
-  .audio--medium {
-    max-width: 250px;
-  }
-
-  .audio {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--spacing-xs, 4px);
-  }
-
-  .audio__seek {
-    width: 100%;
-  }
-
-  .audio__volume-slider {
-    bottom: -35px;
-    width: 80px;
-  }
-}