this.gui 1.0.15 → 1.0.16

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

@@ -1,41 +1,207 @@
-
+// src/stories/Atoms/Caption/Caption.stories.jsx
+import React from 'react';
 import { Caption } from './Caption';
+import './Caption.css';
 
-// Storybook configuration for Caption component
 export default {
   title: 'Atoms/Text/Caption',
   component: Caption,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    children: { control: 'text' },
+    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' },
+      },
+    },
   },
 };
 
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary Caption',
-  },
-};
+/**
+ * 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>
+);
 
-export const Secondary = {
-  args: {
-    children: 'This is a secondary Caption',
-  },
-};
+/**
+ * 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>
+);
 
-export const Large = {
-  args: {
-    size: 'large',
-    children: 'This is a large Caption',
-  },
-};
+/**
+ * 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>
+);
 
-export const Small = {
-  args: {
-    size: 'small',
-    children: 'This is a small Caption',
-  },
+/**
+ * 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,29 +1,182 @@
+/* src/stories/Atoms/Checkbox/Checkbox.css */
 
+/* Base Checkbox Styles */
 .checkbox {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
+  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;
 }
 
-.checkbox--primary {
-  background-color: #e3f2fd;
-  border-color: #1e88e5;
+/* Disabled State */
+.checkbox--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
 }
 
-.checkbox--secondary {
-  background-color: #fff;
-  border-color: #ccc;
+/* Hidden Checkbox Input */
+.checkbox input {
+  opacity: 0;
+  position: absolute;
+  cursor: pointer;
+  height: 0;
+  width: 0;
 }
 
-.checkbox--small {
-  padding: 8px;
+/* 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--medium {
-  padding: 16px;
+.checkbox--secondary::before {
+  border-color: var(--secondary-color);
+}
+
+/* Sizes */
+.checkbox--small {
+  font-size: var(--font-size-small); /* Inherit small font size */
 }
 
 .checkbox--large {
-  padding: 32px;
+  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,41 +1,83 @@
-
+// src/stories/Atoms/Checkbox/Checkbox.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import './Checkbox.css';
 
-/**
- * Checkbox component for user interaction
- */
-export const Checkbox = ({ primary, size, children, ...props }) => {
-  const mode = primary ? 'checkbox--primary' : 'checkbox--secondary';
+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 (
-    <div
-      className={['checkbox', `checkbox--${size}`, mode].join(' ')}
-      {...props}
-    >
-      {children}
-    </div>
+    <label className={checkboxClasses}>
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        {...props}
+      />
+      <span className="checkbox__label">{label}</span>
+    </label>
   );
 };
 
 Checkbox.propTypes = {
-  /**
-   * Is this the primary style for the component?
-   */
-  primary: PropTypes.bool,
-  /**
-   * Size of the component
-   */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Content to be rendered inside the component
-   */
-  children: PropTypes.node.isRequired,
+  /** 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,
 };
-
-Checkbox.defaultProps = {
-  primary: false,
-  size: 'medium',
-};
-
-export default Checkbox;

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

@@ -1,41 +1,112 @@
-
+// src/stories/Atoms/Checkbox/Checkbox.stories.jsx
+import React, { useState } from 'react';
 import { Checkbox } from './Checkbox';
+import './Checkbox.css';
 
-// Storybook configuration for Checkbox component
 export default {
   title: 'Atoms/Interactive/Checkbox',
   component: Checkbox,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    children: { control: 'text' },
+    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.',
+    },
   },
 };
 
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary Checkbox',
-  },
-};
+/**
+ * Primary Checkbox - Normal Size - Squared
+ */
+export const PrimaryNormal = () => (
+  <Checkbox label="Primary Normal Checkbox" variant="primary" size="normal" color="info" />
+);
 
-export const Secondary = {
-  args: {
-    children: 'This is a secondary Checkbox',
-  },
-};
+/**
+ * Secondary Checkbox - Large Size - Rounded
+ */
+export const SecondaryLargeRounded = () => (
+  <Checkbox label="Secondary Large Rounded Checkbox" variant="secondary" size="large" color="warning" rounded />
+);
 
-export const Large = {
-  args: {
-    size: 'large',
-    children: 'This is a large Checkbox',
-  },
+/**
+ * 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 Small = {
-  args: {
-    size: 'small',
-    children: 'This is a small Checkbox',
-  },
+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';