this.gui 1.0.17 → 1.1.0

package/src/stories/Atoms/Caption/Caption.stories.jsx

@@ -1,207 +0,0 @@
-// src/stories/Atoms/Caption/Caption.stories.jsx
-import React from 'react';
-import { Caption } from './Caption';
-import './Caption.css';
-
-export default {
-  title: 'Atoms/Text/Caption',
-  component: Caption,
-  argTypes: {
-    text: {
-      control: 'text',
-      description: 'Text content of the caption.',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'required' },
-      },
-    },
-    variant: {
-      control: {
-        type: 'select',
-        options: [
-          'image',
-          'table',
-          'form',
-          'chart',
-          'transcription',
-          'description',
-          'interactive',
-        ],
-      },
-      description: 'Variant/type of the caption.',
-      table: {
-        type: { summary: `'image' | 'table' | 'form' | 'chart' | 'transcription' | 'description' | 'interactive'` },
-        defaultValue: { summary: 'image' },
-      },
-    },
-    size: {
-      control: {
-        type: 'select',
-        options: ['small', 'normal', 'large'],
-      },
-      description: 'Size of the caption.',
-      table: {
-        type: { summary: `'small' | 'normal' | 'large'` },
-        defaultValue: { summary: 'normal' },
-      },
-    },
-    color: {
-      control: {
-        type: 'select',
-        options: [
-          '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 caption (matches global theme colors).',
-      table: {
-        type: { summary: `'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'` },
-      },
-    },
-    className: {
-      control: 'text',
-      description: 'Additional CSS classes.',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    style: {
-      control: 'object',
-      description: 'Inline styles.',
-      table: {
-        type: { summary: 'object' },
-      },
-    },
-  },
-};
-
-/**
- * Image or Video Captions
- */
-export const ImageCaption = () => (
-  <figure style={{ textAlign: 'center' }}>
-    <img src="https://via.placeholder.com/150" alt="Sample Image" />
-    <Caption text="CEO delivering the keynote at the annual conference." variant="image" />
-  </figure>
-);
-
-/**
- * Table Captions
- */
-export const TableCaption = () => (
-  <figure>
-    <table>
-      <caption>Quarterly financial results for Q3 2024</caption>
-      <thead>
-        <tr>
-          <th>Revenue</th>
-          <th>Expenses</th>
-          <th>Profit</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>$1,000,000</td>
-          <td>$750,000</td>
-          <td>$250,000</td>
-        </tr>
-      </tbody>
-    </table>
-    {/* Alternatively, using Caption component */}
-    {/* <Caption text="Quarterly financial results for Q3 2024" variant="table" /> */}
-  </figure>
-);
-
-/**
- * Form Element Captions
- */
-export const FormCaption = () => (
-  <div>
-    <label htmlFor="meeting-date">Meeting Date</label>
-    <input type="date" id="meeting-date" name="meeting-date" />
-    <Caption text="Select your preferred meeting date." variant="form" />
-  </div>
-);
-
-/**
- * Chart or Graph Captions
- */
-export const ChartCaption = () => (
-  <div style={{ position: 'relative' }}>
-    <img src="https://via.placeholder.com/300x200" alt="Sample Chart" />
-    <Caption text="Annual growth rate comparison between 2020 and 2024." variant="chart" />
-  </div>
-);
-
-/**
- * Audio or Video Transcriptions (Subtitles or Captions)
- */
-export const TranscriptionCaption = () => (
-  <div style={{ position: 'relative', display: 'inline-block' }}>
-    <video width="300" controls>
-      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
-      Your browser does not support the video tag.
-    </video>
-    <Caption
-      text="[Music playing in the background]."
-      variant="transcription"
-      size="small"
-      color="neutral"
-      style={{ position: 'absolute', bottom: '10px', left: '50%' }}
-    />
-  </div>
-);
-
-/**
- * Content Descriptions or Explanations
- */
-export const DescriptionCaption = () => (
-  <div>
-    <img src="https://via.placeholder.com/300x200" alt="Sample Data" />
-    <Caption text="Data collected from a sample size of 1000 users." variant="description" />
-  </div>
-);
-
-/**
- * Captions for Elements
- */
-export const ElementCaption = () => (
-  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-    <button>🔊</button>
-    <Caption text="Adjust volume level." variant="interactive" />
-  </div>
-);
-
-/**
- * Interactive Playground
- */
-const Template = (args) => <Caption {...args} />;
-
-export const InteractiveCaptionStory = Template.bind({});
-InteractiveCaptionStory.args = {
-  text: 'Interactive Caption',
-  variant: 'image',
-  size: 'normal',
-  color: 'info',
-};
-InteractiveCaptionStory.storyName = 'Interactive Caption';

package/src/stories/Atoms/Checkbox/Checkbox.css

@@ -1,182 +0,0 @@
-/* src/stories/Atoms/Checkbox/Checkbox.css */
-
-/* Base Checkbox Styles */
-.checkbox {
-  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 */
-.checkbox--disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-/* Hidden Checkbox Input */
-.checkbox input {
-  opacity: 0;
-  position: absolute;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-
-/* Custom Checkbox */
-.checkbox::before {
-  content: '';
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
-  border: 2px solid var(--border-color);
-  border-radius: 4px;
-  background-color: var(--background-color);
-  transition: background-color var(--transition-speed), border-color var(--transition-speed);
-}
-
-/* Checked State */
-.checkbox input:checked + .checkbox__label::before {
-  background-color: var(--primary-color);
-  border-color: var(--primary-color);
-}
-
-/* Checkmark */
-.checkbox input:checked + .checkbox__label::after {
-  content: '';
-  position: absolute;
-  left: 5px;
-  top: 1px;
-  width: 5px;
-  height: 10px;
-  border: solid var(--text-color-inverse);
-  border-width: 0 2px 2px 0;
-  transform: rotate(45deg);
-}
-
-/* Variants */
-.checkbox--primary::before {
-  border-color: var(--primary-color);
-}
-
-.checkbox--secondary::before {
-  border-color: var(--secondary-color);
-}
-
-/* Sizes */
-.checkbox--small {
-  font-size: var(--font-size-small); /* Inherit small font size */
-}
-
-.checkbox--large {
-  font-size: var(--font-size-large); /* Inherit large font size */
-}
-
-.checkbox--small::before {
-  width: 12px;
-  height: 12px;
-}
-
-.checkbox--large::before {
-  width: 20px;
-  height: 20px;
-}
-
-/* Rounded */
-.checkbox--rounded::before {
-  border-radius: 50%;
-}
-
-/* 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);
-}
-
-.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/Checkbox/Checkbox.jsx

@@ -1,83 +0,0 @@
-// src/stories/Atoms/Checkbox/Checkbox.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import './Checkbox.css';
-
-export const Checkbox = ({
-  label,
-  checked = false,
-  onChange,
-  variant = 'primary',
-  size = 'normal',
-  color = 'info',
-  rounded = false,
-  disabled = false,
-  className = '',
-  ...props
-}) => {
-  const checkboxClasses = classNames('checkbox', className, {
-    [`checkbox--${variant}`]: variant,
-    [`checkbox--${size}`]: size !== 'normal',
-    [color]: color,
-    'checkbox--rounded': rounded,
-    'checkbox--disabled': disabled,
-  });
-
-  return (
-    <label className={checkboxClasses}>
-      <input
-        type="checkbox"
-        checked={checked}
-        onChange={onChange}
-        disabled={disabled}
-        {...props}
-      />
-      <span className="checkbox__label">{label}</span>
-    </label>
-  );
-};
-
-Checkbox.propTypes = {
-  /** Label text for the checkbox */
-  label: PropTypes.string.isRequired,
-  /** Checked state of the checkbox */
-  checked: PropTypes.bool,
-  /** Change handler */
-  onChange: PropTypes.func,
-  /** Variant of the checkbox */
-  variant: PropTypes.oneOf(['primary', 'secondary']),
-  /** Size of the checkbox */
-  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,
-  /** Additional CSS classes */
-  className: PropTypes.string,
-};

package/src/stories/Atoms/Checkbox/Checkbox.stories.jsx

@@ -1,112 +0,0 @@
-// src/stories/Atoms/Checkbox/Checkbox.stories.jsx
-import React, { useState } from 'react';
-import { Checkbox } from './Checkbox';
-import './Checkbox.css';
-
-export default {
-  title: 'Atoms/Interactive/Checkbox',
-  component: Checkbox,
-  argTypes: {
-    label: { control: 'text', defaultValue: 'Checkbox Label' },
-    variant: {
-      control: { type: 'select', options: ['primary', 'secondary'] },
-      description: 'Checkbox variant.',
-    },
-    size: {
-      control: { type: 'select', options: ['small', 'normal', 'large'] },
-      description: 'Checkbox size.',
-    },
-    color: {
-      control: {
-        type: 'select',
-        options: [
-          '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: 'Checkbox color.',
-    },
-    rounded: {
-      control: 'boolean',
-      description: 'Rounded or squared checkbox.',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disable the checkbox.',
-    },
-  },
-};
-
-/**
- * Primary Checkbox - Normal Size - Squared
- */
-export const PrimaryNormal = () => (
-  <Checkbox label="Primary Normal Checkbox" variant="primary" size="normal" color="info" />
-);
-
-/**
- * Secondary Checkbox - Large Size - Rounded
- */
-export const SecondaryLargeRounded = () => (
-  <Checkbox label="Secondary Large Rounded Checkbox" variant="secondary" size="large" color="warning" rounded />
-);
-
-/**
- * Primary Checkbox - Small Size - Rounded
- */
-export const PrimarySmallRounded = () => (
-  <Checkbox label="Primary Small Rounded Checkbox" variant="primary" size="small" color="success" rounded />
-);
-
-/**
- * Secondary Checkbox - Normal Size - Squared
- */
-export const SecondaryNormal = () => (
-  <Checkbox label="Secondary Normal Checkbox" variant="secondary" size="normal" color="neutral" />
-);
-
-/**
- * Interactive Checkbox
- */
-const Template = (args) => {
-  const [checked, setChecked] = useState(args.checked || false);
-
-  const handleChange = (e) => {
-    setChecked(e.target.checked);
-    if (args.onChange) args.onChange(e);
-  };
-
-  return <Checkbox {...args} checked={checked} onChange={handleChange} />;
-};
-
-export const InteractiveCheckbox = Template.bind({});
-InteractiveCheckbox.args = {
-  label: 'Interactive Checkbox',
-  variant: 'primary',
-  size: 'normal',
-  color: 'info',
-  rounded: false,
-  disabled: false,
-  checked: false,
-};
-InteractiveCheckbox.storyName = 'Interactive Checkbox';

package/src/stories/Atoms/Container/Container.css

@@ -1,89 +0,0 @@
-/* src/stories/Atoms/Container/Container.css */
-
-/* Base Container Styles */
-.container {
-  padding: var(--spacing-md);
-  background-color: transparent;
-  transition: all var(--transition-speed) ease;
-  box-sizing: border-box;
-  position: var(--position, static);
-}
-
-/* Border Variant */
-.container--border {
-  border: 1px solid var(--border-color);
-}
-
-/* Size Variants */
-.container--small {
-  width: 25%;
-}
-
-.container--medium {
-  width: 50%;
-}
-
-.container--large {
-  width: 75%;
-}
-
-/* Fluid Variant */
-.container--fluid {
-  width: 100%;
-}
-
-/* Rounded Corners */
-.container--rounded {
-  border-radius: var(--border-radius);
-}
-
-/* Alignment */
-.container--align-left {
-  margin-left: 0;
-  margin-right: auto;
-}
-
-.container--align-center {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.container--align-right {
-  margin-left: auto;
-  margin-right: 0;
-}
-
-/* Positioning */
-.container--position-static {
-  position: static;
-}
-
-.container--position-relative {
-  position: relative;
-}
-
-.container--position-absolute {
-  position: absolute;
-}
-
-.container--position-fixed {
-  position: fixed;
-}
-
-.container--position-sticky {
-  position: sticky;
-}
-
-/* Responsive Adjustments */
-@media (max-width: 768px) {
-  .container--small,
-  .container--medium,
-  .container--large {
-    width: 100%;
-    padding: var(--spacing-sm);
-  }
-  
-  .container--fluid {
-    padding: var(--spacing-xs);
-  }
-}