this.gui 1.0.18 → 1.1.0

package/src/stories/Getting Started.mdx

@@ -1,239 +0,0 @@
-<img src="https://suign.github.io/assets/imgs/this_GUI.svg" alt="Cleaker Me" width="477" height="477" align="center" style={{marginBottom: '55px'}}/>
-# Welcome to THIS.GUI
-
-### **Explanation of Grouping:**
-The **Atomic Design** methodology defines organisms as complex structures built from smaller components, but how we perceive complexity can vary based on context.
- Let’s break it down to align with your insight:
-
-​	•	**Atomic**: Smallest components that are not broken down further.
-Alert, Audio, Badge, Button, Caption, Checkbox, Container, Divider, Heading, Icon,  Image, Label, Link , Loader, Paragraph, ProgressBar, RadioButton, RangeInput, Select, Slider, Snackbar, Spacer, Spinner, Tag, TextArea, TextInput, Toggle, Tooltip, Video.
-
-​	•	**Molecules**: Simple combinations of atomic components that together form a small UI feature.
-Accordion, AudioPlayer, AvatarWithName, Breadcrumbs, ButtonGroup, Card, ComparisonTable, DataTable, FileUpload, FormField, Header, IconButton, ImageWithCaption, InputGroup, InputWithLabel, List, MediaCard, Modal, Navbar, Notification, PricingTable, SearchBar, Sidebar, VideoWithDescription.
-
-​	•	**Organisms**: More complex, combining molecules and atomic components to create larger, more detailed features.
-
-​	•	**Layout**: Components related to structuring and organizing content across the page.
-
-​	•	**Templates**: Layouts of full pages, combining organisms and layout components.
-
-​	•	**Pages**: Complete and functional pages made up of templates and content.
-
-​	•	**Miscellaneous**: Utility components that don’t fit into the above categories but provide important functions, such as popovers, overlays, and media controls.
-
-### Here’s how it breaks down:
-
-	•	Pages combine multiple Organisms (like forms, media collections, and navigation elements) to create a full layout.
-	•	Organisms themselves are composed of Molecules (which could be form fields, buttons, etc.).
-	•	Molecules are built from Atoms (the smallest UI components like text, buttons, inputs).
-	
-# Recap of Hierarchy
-
-	1.	**Atoms:** Basic building blocks (buttons, inputs).
-	2.	**Molecules:** Small functional units combining Atoms (input groups, button groups).
-	3.	**Organisms:** Larger functional blocks combining Molecules (forms, media cards).
-	4.	**Layouts:** Define structure and positioning (grids, sections, flexbox).
-	5.	**Pages:** Use Layouts, Organisms, Molecules, and Atoms to create entire pages.
-
-
--------------------
-# 1. Atomic Components (Basic/Building Blocks)
-Atomic components are the smallest building blocks and cannot be broken down further.
-
-		**Text Components:**
-	
-	•	Heading (H1, H2, H3, etc.)
-	•	Paragraph
-	•	Label
-	•	Caption
-
-		**Interactive Components:**
-
-	•	Button
-	•	Link (Anchor)
-	•	Icon (Clickable)
-	•	Checkbox
-	•	Radio Button
-	•	Toggle/Switch
-	•	Text Input
-	•	Text Area
-	•	Select/Dropdown
-	•	Slider
-	•	Range Input
-
-		**Media Components:**
-	
-	•	Image
-	•	Video
-	•	Audio
-	•	Icon
-
-		**Visual Components:**
-
-	•	Divider
-	•	Spacer (For layout spacing)
-	•	Tooltip
-	•	Badge
-	•	Tag/Chip
-
-		**Feedback Components:**
-
-	•	Loader/Spinner
-	•	Progress Bar
-	•	Alert
-	•	Snackbar/Toast
-	•	Tooltip
-
-# 2. Molecules (Combining Atomic Components)
-Molecules are combinations of atomic components that work together to form a functional unit.
-
-		**Form Elements:**
-
-	•	Input Group (Input with Button)
-	•	Input with Label
-	•	Search Bar
-	•	File Upload
-	•	Form Field (Label + Input + Helper Text)
-
-		**Buttons with Icons or Text:**
-
-	•	Icon Button (Button with Icon)
-	•	Button Group (Multiple Buttons together)
-
-		**Media Molecules:**
-
-	•	Image with Caption
-	•	Video with Controls and Description
-	•	Avatar + Name
-	•	Audio Player
-
-		**Feedback Molecules:**
-
-	•	Notification (with Alert, Title, and Action)
-	•	Modal (Header, Body, Footer)
-
-# 3. Organisms (Combining Molecules)
-Organisms are larger and more complex UI components formed by grouping together multiple molecules or simple components.
-
-		**Forms and Form Layouts:**
-
-	•	Sign-In Form (Form fields + Submit Button)
-	•	Registration Form (Fields for name, email, password + Terms Checkbox + Submit)
-	•	Contact Form (Input fields + Message TextArea + Send Button)
-
-		**Content Display:**
-
-	•	Card (Image + Title + Description + Action Button)
-	•	Media Card (Image/Video + Title + Text)
-	•	List (Collection of items, e.g., a list of links or products)
-	•	Accordion (Expandable sections with content inside)
-
-		**Navigation:**
-
-	•	Navbar (Logo + Links + Search + Menu Toggle)
-	•	Sidebar (List of links for navigation)
-	•	Breadcrumbs (Links showing hierarchy)
-	
-		**Media Collections:**
-
-	•	Image Gallery (Grid of images with captions)
-	•	Video Playlist (List of videos to watch)
-	•	Carousel/Slider (Image or Media Slider)
-
-		**Tables:**
-
-	•	Data Table (Rows and Columns for displaying structured data)
-	•	Pricing Table (Different pricing options)
-	•	Comparison Table (Compares features/products)
-
-# 4. Layout Components (Page-Level Components)
-Layout components are structural elements used to organize content on a page.
-
-	•	**Grid/Section Layouts:**
-
-	•	Grid (Arranges items in a structured layout with rows and columns)
-	•	Section (A part of the page with a header, content, and actions)
-	•	Flexbox Layout (Horizontally/Vertically aligned containers)
-
-		**Navigation & Menus:**
-
-	•	Header (Navbar + Search + Links)
-	•	Footer (Copyright + Links + Social Media Icons)
-	•	Dropdown Menu (Toggleable menu of options)
-	•	Pagination (Buttons for navigating multiple pages)
-
-		**Content Organization:**
-
-	•	Sidebar (For navigation or additional info)
-	•	Tabs (Switching between different content views)
-	•	Accordion (Collapsible sections)
-
-		**Hero Sections:**
-
-	•	Hero Banner (Large heading, subheading, image, and call to action)
-	•	Hero Image/Video Section (Introductory section at the top of a page)
-
-# 5. Templates (Combining Organisms and Layout Components)
-Templates define the structure of entire pages by arranging multiple organisms and layout components.
-
-		**Landing Pages:**
-
-	•	Hero Section + Features List + Call-to-Action Button + Testimonials
-	•	Product Landing Page (Hero, Features, Pricing, CTA)
-
-		**Dashboard Layouts:**
-
-	•	Sidebar + Top Navbar + Content Area
-	•	Admin Dashboard (Graphs, Lists, Cards, Notifications)
-
-		**E-Commerce Pages:**
-
-	•	Product Page (Product Image, Description, Price, Add to Cart Button)
-	•	Shopping Cart (List of items, quantity, total, checkout button)
-
-		**Authentication Pages:**
-
-	•	Sign-In Page (Form + Link to Register)
-	•	Registration Page (Form + Link to Sign In)
-
-		**Contact Us Page:**
-
-	•	Form Section + Location Info + Social Media Links
-
-# 6. Pages (Final Composition of Templates)
-Pages are final representations of the full UI, using templates to create entire sections with components.
-
-	•	Home Page
-	•	About Us Page
-	•	Contact Us Page
-	•	User Profile Page
-	•	Product Detail Page
-	•	Checkout Page
-	•	Blog/Article Page
-	•	Admin Dashboard
-	•	Search Results Page
-
-# 7. Miscellaneous / Utility Components
-These components often serve specialized purposes and improve user interaction.
-
-		**Tooltips & Popovers:**
-
-	•	Pop-up information when hovering over or clicking an element.
-		**Overlays:**
-
-	•	Modal/Popup Window
-	•	Drawer (Slide-in navigation or settings panel)
-
-		**Search Components:**
-
-	•	Search Box (Input field with search button)
-	•	Autocomplete/Typeahead
-
-		**Media and Content Controls:**
-
-	•	Audio/Video Controls (Play, Pause, Mute)
-	•	Filters (Search filters, Tag filters)
-	
-		**Interactive Maps:**
-
-	•	Map (With interactive markers, zoom, and pan)

package/src/stories/Layouts/Accordion/Accordion.css

@@ -1,293 +0,0 @@
-/* Base Accordion Styles */
-.accordion {
-  border-radius: var(--border-radius);
-  transition: var(--transition-speed) ease;
-}
-
-/* Accordion Item Styles */
-.accordion__item {
-  margin-bottom: var(--spacing-sm);
-}
-
-/* Accordion Header */
-.accordion__header {
-  padding: 16px;
-  width: 100%;
-  text-align: left;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  transition: background-color var(--transition-speed), color var(--transition-speed);
-}
-
-/* PRIMARY VARIANT (Full Background Color) */
-.accordion--primary .accordion__header {
-  background-color: var(--primary-color);
-  color: var(--text-color-inverse);
-}
-
-/* Ensure the secondary variant starts with no background */
-.accordion--secondary .accordion__header {
-  background-color: transparent;
-}
-
-/* Background color variants for Primary */
-.accordion--primary.accordion--secondary .accordion__header {
-  background-color: var(--secondary-color);
-}
-
-.accordion--primary.accordion--info .accordion__header {
-  background-color: var(--info-color);
-}
-
-.accordion--primary.accordion--warning .accordion__header {
-  background-color: var(--warning-color);
-}
-
-.accordion--primary.accordion--alert .accordion__header {
-  background-color: var(--alert-color);
-}
-
-.accordion--primary.accordion--success .accordion__header {
-  background-color: var(--success-color);
-}
-
-.accordion--primary.accordion--neutral .accordion__header {
-  background-color: var(--neutral-color);
-}
-
-.accordion--primary.accordion--dark .accordion__header {
-  background-color: var(--dark-color);
-}
-
-/* Classy Palette */
-.accordion--primary.accordion--classy-color-1 .accordion__header {
-  background-color: var(--classy-color-1);
-}
-
-.accordion--primary.accordion--classy-color-2 .accordion__header {
-  background-color: var(--classy-color-2);
-}
-
-.accordion--primary.accordion--classy-color-3 .accordion__header {
-  background-color: var(--classy-color-3);
-}
-
-.accordion--primary.accordion--classy-color-4 .accordion__header {
-  background-color: var(--classy-color-4);
-}
-
-.accordion--primary.accordion--classy-color-5 .accordion__header {
-  background-color: var(--classy-color-5);
-}
-
-/* Small Switch Palette */
-.accordion--primary.accordion--small-switch-color-1 .accordion__header {
-  background-color: var(--small-switch-color-1);
-}
-
-.accordion--primary.accordion--small-switch-color-2 .accordion__header {
-  background-color: var(--small-switch-color-2);
-}
-
-/* Natural Palette */
-.accordion--primary.accordion--natural-color-1 .accordion__header {
-  background-color: var(--natural-color-1);
-}
-
-.accordion--primary.accordion--natural-color-2 .accordion__header {
-  background-color: var(--natural-color-2);
-}
-
-.accordion--primary.accordion--natural-color-3 .accordion__header {
-  background-color: var(--natural-color-3);
-}
-
-/* Grey Friends */
-.accordion--primary.accordion--grey-friend-1 .accordion__header {
-  background-color: var(--grey-friend-1);
-}
-
-.accordion--primary.accordion--grey-friend-2 .accordion__header {
-  background-color: var(--grey-friend-2);
-}
-
-/* Shades */
-.accordion--primary.accordion--shade-1 .accordion__header {
-  background-color: var(--shade-1);
-}
-
-.accordion--primary.accordion--shade-2 .accordion__header {
-  background-color: var(--shade-2);
-}
-
-.accordion--primary.accordion--shade-3 .accordion__header {
-  background-color: var(--shade-3);
-}
-
-.accordion--primary.accordion--shade-4 .accordion__header {
-  background-color: var(--shade-4);
-}
-
-/* SECONDARY VARIANT (Border Only) */
-.accordion--secondary .accordion__header {
-  background-color: transparent; /* Ensure transparent background */
-  border: 2px solid var(--primary-color); /* Default border color */
-  color: var(--primary-color); /* Default text color */
-}
-
-.accordion--secondary.accordion--secondary .accordion__header {
-  border-color: var(--secondary-color);
-  color: var(--secondary-color);
-}
-
-.accordion--secondary.accordion--info .accordion__header {
-  border-color: var(--info-color);
-  color: var(--info-color);
-}
-
-.accordion--secondary.accordion--warning .accordion__header {
-  border-color: var(--warning-color);
-  color: var(--warning-color);
-}
-
-.accordion--secondary.accordion--alert .accordion__header {
-  border-color: var(--alert-color);
-  color: var(--alert-color);
-}
-
-.accordion--secondary.accordion--success .accordion__header {
-  border-color: var(--success-color);
-  color: var(--success-color);
-}
-
-.accordion--secondary.accordion--neutral .accordion__header {
-  border-color: var(--neutral-color);
-  color: var(--neutral-color);
-}
-
-.accordion--secondary.accordion--dark .accordion__header {
-  border-color: var(--dark-color);
-  color: var(--dark-color);
-}
-
-/* Classy Palette */
-.accordion--secondary.accordion--classy-color-1 .accordion__header {
-  border-color: var(--classy-color-1);
-  color: var(--classy-color-1);
-}
-
-.accordion--secondary.accordion--classy-color-2 .accordion__header {
-  border-color: var(--classy-color-2);
-  color: var(--classy-color-2);
-}
-
-.accordion--secondary.accordion--classy-color-3 .accordion__header {
-  border-color: var(--classy-color-3);
-  color: var(--classy-color-3);
-}
-
-.accordion--secondary.accordion--classy-color-4 .accordion__header {
-  border-color: var(--classy-color-4);
-  color: var(--classy-color-4);
-}
-
-.accordion--secondary.accordion--classy-color-5 .accordion__header {
-  border-color: var(--classy-color-5);
-  color: var(--classy-color-5);
-}
-
-/* Small Switch Palette */
-.accordion--secondary.accordion--small-switch-color-1 .accordion__header {
-  border-color: var(--small-switch-color-1);
-  color: var(--small-switch-color-1);
-}
-
-.accordion--secondary.accordion--small-switch-color-2 .accordion__header {
-  border-color: var(--small-switch-color-2);
-  color: var(--small-switch-color-2);
-}
-
-/* Natural Palette */
-.accordion--secondary.accordion--natural-color-1 .accordion__header {
-  border-color: var(--natural-color-1);
-  color: var(--natural-color-1);
-}
-
-.accordion--secondary.accordion--natural-color-2 .accordion__header {
-  border-color: var(--natural-color-2);
-  color: var(--natural-color-2);
-}
-
-.accordion--secondary.accordion--natural-color-3 .accordion__header {
-  border-color: var(--natural-color-3);
-  color: var(--natural-color-3);
-}
-
-/* Grey Friends */
-.accordion--secondary.accordion--grey-friend-1 .accordion__header {
-  border-color: var(--grey-friend-1);
-  color: var(--grey-friend-1);
-}
-
-.accordion--secondary.accordion--grey-friend-2 .accordion__header {
-  border-color: var(--grey-friend-2);
-  color: var(--grey-friend-2);
-}
-
-/* Shades */
-.accordion--secondary.accordion--shade-1 .accordion__header {
-  border-color: var(--shade-1);
-  color: var(--shade-1);
-}
-
-.accordion--secondary.accordion--shade-2 .accordion__header {
-  border-color: var(--shade-2);
-  color: var(--shade-2);
-}
-
-.accordion--secondary.accordion--shade-3 .accordion__header {
-  border-color: var(--shade-3);
-  color: var(--shade-3);
-}
-
-.accordion--secondary.accordion--shade-4 .accordion__header {
-  border-color: var(--shade-4);
-  color: var(--shade-4);
-}
-/* Accordion Content */
-.accordion__content {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.3s ease;
-  padding: 0 16px;
-  background-color: inherit;
-}
-
-/* Border Option for Accordion Content */
-.accordion--border .accordion__content {
-  border: 1px solid var(--border-color);
-}
-
-.accordion__content--open {
-  max-height: 200px;
-  padding: 16px;
-}
-
-/* Icon for Expand/Collapse */
-.accordion__icon {
-  transition: transform var(--transition-speed);
-}
-
-.accordion__icon--open {
-  transform: rotate(180deg);
-}
-
-/* Responsive Styles */
-@media (max-width: 768px) {
-  .accordion__header {
-    font-size: var(--font-size-small);
-  }
-}

package/src/stories/Layouts/Accordion/Accordion.jsx

@@ -1,74 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import './Accordion.css';
-
-export const Accordion = ({ allowMultipleOpen, items, color, variant, showArrow, border }) => {
-  const [openIndexes, setOpenIndexes] = useState([]);
-
-  const handleToggle = (index) => {
-    if (openIndexes.includes(index)) {
-      setOpenIndexes(openIndexes.filter((i) => i !== index));
-    } else {
-      setOpenIndexes(allowMultipleOpen ? [...openIndexes, index] : [index]);
-    }
-  };
-
-  const accordionClass = `accordion accordion--${variant} accordion--${color} ${border ? 'accordion--border' : ''}`;
-
-  return (
-    <div className={accordionClass}>
-      {items.map((item, index) => (
-        <div key={index} className="accordion__item">
-          <button
-            className={`accordion__header`}
-            onClick={() => handleToggle(index)}
-            aria-expanded={openIndexes.includes(index)}
-            aria-controls={`accordion__content-${index}`}
-          >
-            {item.title}
-            {showArrow && (
-              <span className={`accordion__icon ${openIndexes.includes(index) ? 'accordion__icon--open' : ''}`}>
-                &#9662;
-              </span>
-            )}
-          </button>
-          <div
-            id={`accordion__content-${index}`}
-            className={`accordion__content ${openIndexes.includes(index) ? 'accordion__content--open' : ''}`}
-          >
-            {item.content}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-Accordion.propTypes = {
-  allowMultipleOpen: PropTypes.bool,
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string.isRequired,
-      content: PropTypes.node.isRequired,
-    })
-  ).isRequired,
-  variant: PropTypes.oneOf(['primary', 'secondary']),
-  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'
-  ]),
-  showArrow: PropTypes.bool,
-  border: PropTypes.bool,
-};
-
-Accordion.defaultProps = {
-  allowMultipleOpen: false,
-  color: 'primary',
-  variant: 'primary',
-  showArrow: true,
-  border: false,
-};

package/src/stories/Layouts/Accordion/Accordion.stories.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { Accordion } from './Accordion';
-
-export default {
-  title: 'Molecules/Organization/Accordion',
-  component: Accordion,
-  argTypes: {
-    allowMultipleOpen: { control: 'boolean', defaultValue: false },
-    variant: {
-      control: 'select',
-      options: ['primary', 'secondary'],
-      defaultValue: 'primary',
-    },
-    color: {
-      control: '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'
-      ],
-      defaultValue: 'primary',
-    },
-    showArrow: { control: 'boolean', defaultValue: true },
-    border: { control: 'boolean', defaultValue: false },
-  },
-};
-
-const items = [
-  { title: 'Section 1', content: 'Content for section 1' },
-  { title: 'Section 2', content: 'Content for section 2' },
-  { title: 'Section 3', content: 'Content for section 3' },
-];
-
-export const DefaultAccordion = (args) => <Accordion {...args} items={items} />;
-export const MultipleOpenAccordion = (args) => <Accordion {...args} allowMultipleOpen={true} items={items} />;
-export const AccordionWithBorder = (args) => <Accordion {...args} border={true} items={items} />;

package/src/stories/Layouts/Flexbox/Flexbox.css

@@ -1,16 +0,0 @@
-
-.flexbox {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 16px;
-  gap: 8px;
-  border: 1px solid #ddd;
-}
-
-.flexbox--primary {
-  background-color: #e3f2fd;
-}
-
-.flexbox--secondary {
-  background-color: #fff;
-}

package/src/stories/Layouts/Flexbox/Flexbox.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import './Flexbox.css'; 
-
-export const Flexbox = ({ children, primary, ...props }) => {
-  const mode = primary ? 'flexbox--primary' : 'flexbox--secondary';
-  return (
-    <div className={['flexbox', mode].join(' ')} {...props}>
-      {children}
-    </div>
-  );
-};

package/src/stories/Layouts/Flexbox/Flexbox.stories.jsx

@@ -1,28 +0,0 @@
-
-import { Flexbox } from './Flexbox';
-
-// Storybook configuration for Flexbox component
-export default {
-  title: 'Layouts/FlexboxLayout/Flexbox',
-  component: Flexbox,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    children: { control: 'text' },
-  },
-};
-
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary Flexbox layout.',
-  },
-};
-
-export const Secondary = {
-  args: {
-    primary: false,
-    children: 'This is a secondary Flexbox layout.',
-  },
-};