this.gui 1.0.18 → 1.1.0

package/src/stories/Atoms/Caption/Caption.css

@@ -1,169 +0,0 @@
-/* src/stories/Atoms/Caption/Caption.css */
-
-/* Base Caption Styles */
-.caption {
-  font-family: var(--font-family);
-  font-size: var(--font-size-small, 14px);
-  color: var(--text-color);
-  margin-top: var(--spacing-xs, 4px);
-  margin-bottom: var(--spacing-md, 16px);
-  display: block;
-}
-
-/* Size Variants */
-/* Size Variants */
-.caption--small {
-  font-size: var(--font-size-small);
-}
-
-.caption--large {
-  font-size: var(--font-size-large);
-}
-
-/* Type Variants */
-
-/* 1. Image or Video Captions */
-.caption--image {
-  font-style: italic;
-  text-align: center;
-}
-
-/* 2. Table Captions */
-.caption--table {
-  caption-side: top; /* Ensures the caption appears above the table */
-  font-weight: var(--font-weight-medium, 500);
-}
-
-/* 3. Form Element Captions */
-.caption--form {
-  font-size: var(--font-size-small, 14px);
-  color: var(--text-color);
-  margin-top: var(--spacing-xs, 4px);
-}
-
-/* 4. Chart or Graph Captions */
-.caption--chart {
-  font-weight: var(--font-weight-bold, 600);
-  margin-top: var(--spacing-sm, 8px);
-}
-
-/* 5. Audio or Video Transcriptions (Subtitles or Captions) */
-.caption--transcription {
-  font-size: var(--font-size-small, 14px);
-  color: var(--text-color);
-  background-color: rgba(0, 0, 0, 0.6);
-  color: #ffffff;
-  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
-  border-radius: var(--border-radius, 4px);
-  position: absolute;
-  bottom: var(--spacing-xs, 4px);
-  left: 50%;
-  transform: translateX(-50%);
-  max-width: 90%;
-  text-align: center;
-}
-
-/* 6. Content Descriptions or Explanations */
-.caption--description {
-  font-size: var(--font-size-small, 14px);
-  color: var(--text-color);
-  margin-top: var(--spacing-xs, 4px);
-}
-
-/* 7. Captions for Interactive Elements */
-.caption--interactive {
-  font-size: var(--font-size-small, 14px);
-  color: var(--text-color);
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs, 4px);
-}
-
-/* Color Classes */
-.caption--info {
-  color: var(--info-color);
-}
-
-.caption--warning {
-  color: var(--warning-color);
-}
-
-.caption--alert {
-  color: var(--alert-color);
-}
-
-.caption--success {
-  color: var(--success-color);
-}
-
-.caption--neutral {
-  color: var(--neutral-color);
-}
-
-.caption--dark {
-  color: var(--dark-color);
-}
-
-.caption--classy-color-1 {
-  color: var(--classy-color-1);
-}
-
-.caption--classy-color-2 {
-  color: var(--classy-color-2);
-}
-
-.caption--classy-color-3 {
-  color: var(--classy-color-3);
-}
-
-.caption--classy-color-4 {
-  color: var(--classy-color-4);
-}
-
-.caption--classy-color-5 {
-  color: var(--classy-color-5);
-}
-
-.caption--small-switch-color-1 {
-  color: var(--small-switch-color-1);
-}
-
-.caption--small-switch-color-2 {
-  color: var(--small-switch-color-2);
-}
-
-.caption--natural-color-1 {
-  color: var(--natural-color-1);
-}
-
-.caption--natural-color-2 {
-  color: var(--natural-color-2);
-}
-
-.caption--natural-color-3 {
-  color: var(--natural-color-3);
-}
-
-.caption--grey-friend-1 {
-  color: var(--grey-friend-1);
-}
-
-.caption--grey-friend-2 {
-  color: var(--grey-friend-2);
-}
-
-.caption--shade-1 {
-  color: var(--shade-1);
-}
-
-.caption--shade-2 {
-  color: var(--shade-2);
-}
-
-.caption--shade-3 {
-  color: var(--shade-3);
-}
-
-.caption--shade-4 {
-  color: var(--shade-4);
-}

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

@@ -1,72 +0,0 @@
-// src/stories/Atoms/Caption/Caption.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import './Caption.css';
-
-export const Caption = ({
-  text,
-  variant = 'image', // 'image', 'table', 'form', 'chart', 'transcription', 'description', 'interactive'
-  size = 'normal', // 'small', 'normal', 'large'
-  color,
-  className = '',
-  style = {},
-}) => {
-  const captionClasses = classNames('caption', {
-    [`caption--${variant}`]: variant,
-    [`caption--${size}`]: size !== 'normal',
-    [`caption--${color}`]: color, // Apply color class if provided
-  }, className);
-
-  return (
-    <span className={captionClasses} style={style}>
-      {text}
-    </span>
-  );
-};
-
-Caption.propTypes = {
-  /** Text content of the caption */
-  text: PropTypes.string.isRequired,
-  /** Variant/type of the caption */
-  variant: PropTypes.oneOf([
-    'image',
-    'table',
-    'form',
-    'chart',
-    'transcription',
-    'description',
-    'interactive',
-  ]),
-  /** Size of the caption */
-  size: PropTypes.oneOf(['small', 'normal', 'large']),
-  /** Color of the caption (matches global theme colors) */
-  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',
-  ]),
-  /** Additional CSS classes */
-  className: PropTypes.string,
-  /** Inline styles */
-  style: PropTypes.object,
-};

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,
-};