this.gui 1.0.16 → 1.0.17

package/src/stories/Molecules/Card/Card.jsx

@@ -1,25 +1,92 @@
-
-import React from 'react';
+//this.GUI/src/stories/Molecules/Card/Card.jsx
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import './Card.css';
 
-/**
- * Card component
- */
-export const Card = (props) => {
+export const Card = ({
+  children,
+  variant,
+  color,
+  textColor,
+  isExpandable,
+  isRemovable,
+  hoverable,
+  width,
+  ...props
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isVisible, setIsVisible] = useState(true);
+
+  const handleExpandToggle = () => setIsExpanded(!isExpanded);
+  const handleRemove = () => setIsVisible(false);
+
+  if (!isVisible) return null;
+
   return (
-    <div className="card" {...props}>
-      {/* Component implementation */}
+    <div
+      className={`card card--${variant} ${hoverable ? 'card--hoverable' : ''}`}
+      style={{
+        backgroundColor: variant === 'solid' ? `var(--${color})` : 'transparent',
+        border: variant === 'outline' ? `1px solid var(--${color})` : 'none',
+        width: width,
+      }}
+      {...props}
+    >
+      {isExpandable && (
+        <button className="card__expand" onClick={handleExpandToggle}>
+          {isExpanded ? 'Close' : 'Expand'}
+        </button>
+      )}
+
+      {isRemovable && (
+        <button className="card__remove" onClick={handleRemove}>
+          &times;
+        </button>
+      )}
+
+      <div
+        className="card__content"
+        style={{
+          color: `var(--${textColor})`, // Apply the text color using CSS variables
+        }}
+      >
+        {children}
+      </div>
+
+      {isExpanded && (
+        <div className="card__expanded-content">
+          {children}
+        </div>
+      )}
     </div>
   );
 };
 
 Card.propTypes = {
-  // Define prop types here
+  children: PropTypes.node.isRequired,
+  variant: PropTypes.oneOf(['solid', 'outline']), // Variant can be 'solid' or 'outline'
+  color: PropTypes.oneOf([
+    'primary-color', 'secondary-color', 'info-color', 'warning-color', 'alert-color', 'success-color', 'neutral-color', 'dark-color',
+    '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'
+  ]).isRequired,
+  textColor: PropTypes.oneOf([
+    'primary-color', 'secondary-color', 'info-color', 'warning-color', 'alert-color', 'success-color', 'neutral-color', 'dark-color',
+    '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'
+  ]), // Separate text color prop
+  isExpandable: PropTypes.bool,
+  isRemovable: PropTypes.bool,
+  hoverable: PropTypes.bool,
+  width: PropTypes.string, // Width of the card
 };
 
 Card.defaultProps = {
-  // Define default props here
-};
-
-export default Card;
+  variant: 'solid',
+  color: 'neutral-color', // Default background/border color
+  textColor: 'dark-color', // Default text color
+  isExpandable: false,
+  isRemovable: false,
+  hoverable: false,
+  width: '100%', // Default width
+};

package/src/stories/Molecules/Card/Card.stories.jsx

@@ -1,20 +1,34 @@
-
+//this.GUI/src/stories/Molecules/Card/Card.stories.jsx
+import React from 'react';
 import { Card } from './Card';
 
-// Storybook configuration for Card component
 export default {
-  title: 'Molecules/ContentDisplay/Card',
+  title: 'Molecules/Display/Card',
   component: Card,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    // Define argTypes here
-  },
 };
 
-export const Default = {
-  args: {
-    // Define default args here
-  },
+export const SolidCard = (args) => (
+  <Card {...args}>
+    <h2>Solid Card Example</h2>
+    <p>This is a solid card.</p>
+  </Card>
+);
+
+SolidCard.args = {
+  variant: 'solid',
+  color: 'primary-color',
+  textColor: 'secondary-color',
 };
+
+export const OutlinedCard = (args) => (
+  <Card {...args}>
+    <h2>Outlined Card Example</h2>
+    <p>This is an outlined card.</p>
+  </Card>
+);
+
+OutlinedCard.args = {
+  variant: 'outline',
+  color: 'primary-color',
+  textColor: 'secondary-color',
+};

package/src/stories/Molecules/ComparisonTable/ComparisonTable.css

@@ -1,4 +1,35 @@
+/* this.GUI/src/stories/Molecules/ComparisonTable/ComparisonTable.css */
+.comparison-table-container {
+  overflow-x: auto;
+  margin: 20px 0;
+}
+
+.comparison-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
+  border: 1px solid var(--neutral-color);
+}
+
+.comparison-table th,
+.comparison-table td {
+  padding: 12px;
+  text-align: center;
+  border: 1px solid;
+  font-size: 14px;
+}
+
+.comparison-table th {
+  background-color: var(--neutral-color, #f9f9f9);
+  font-weight: bold;
+}
 
-.comparisontable {
-  /* Default styles for ComparisonTable */
+.comparison-table .row-header {
+  background-color: var(--neutral-color, #f0f0f0);
+  font-weight: bold;
 }
+
+.comparison-table .highlight {
+  background-color: var(--primary-color, #1F877D);
+  color: var(--text-color-inverse, white);
+}

package/src/stories/Molecules/ComparisonTable/ComparisonTable.jsx

@@ -1,25 +1,104 @@
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import './ComparisonTable.css';
 
-/**
- * ComparisonTable component
- */
-export const ComparisonTable = (props) => {
+export const ComparisonTable = ({
+  headers,
+  rows,
+  rowHeaders,
+  highlightColumn,
+  headerBgColor,
+  rowHeaderBgColor,
+  highlightBgColor,
+  borderColor,
+}) => {
   return (
-    <div className="comparisontable" {...props}>
-      {/* Component implementation */}
+    <div className="comparison-table-container">
+      <table className="comparison-table" style={{ borderColor: `var(--${borderColor})` }}>
+        <thead>
+          <tr>
+            <th></th>
+            {headers.map((header, index) => (
+              <th
+                key={index}
+                className={highlightColumn === index ? 'highlight' : ''}
+                style={{
+                  backgroundColor: `var(--${headerBgColor})`,
+                  borderColor: `var(--${borderColor})`,
+                }}
+              >
+                {header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, rowIndex) => (
+            <tr key={rowIndex}>
+              <td
+                className="row-header"
+                style={{
+                  backgroundColor: `var(--${rowHeaderBgColor})`,
+                  borderColor: `var(--${borderColor})`,
+                }}
+              >
+                {rowHeaders[rowIndex]}
+              </td>
+              {row.map((cell, cellIndex) => (
+                <td
+                  key={cellIndex}
+                  className={highlightColumn === cellIndex ? 'highlight' : ''}
+                  style={{
+                    backgroundColor: highlightColumn === cellIndex ? `var(--${highlightBgColor})` : 'inherit',
+                    borderColor: `var(--${borderColor})`,
+                  }}
+                >
+                  {cell}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </div>
   );
 };
 
 ComparisonTable.propTypes = {
-  // Define prop types here
+  headers: PropTypes.arrayOf(PropTypes.string).isRequired,
+  rows: PropTypes.arrayOf(PropTypes.array).isRequired,
+  rowHeaders: PropTypes.arrayOf(PropTypes.string).isRequired,
+  highlightColumn: PropTypes.number,
+  headerBgColor: PropTypes.oneOf([
+    'primary-color', 'secondary-color', 'info-color', 'warning-color', 'alert-color', 'success-color', 'neutral-color', 'dark-color',
+    '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',
+  ]),
+  rowHeaderBgColor: PropTypes.oneOf([
+    'primary-color', 'secondary-color', 'info-color', 'warning-color', 'alert-color', 'success-color', 'neutral-color', 'dark-color',
+    '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',
+  ]),
+  highlightBgColor: PropTypes.oneOf([
+    'primary-color', 'secondary-color', 'info-color', 'warning-color', 'alert-color', 'success-color', 'neutral-color', 'dark-color',
+    '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',
+  ]),
+  borderColor: PropTypes.oneOf([
+    'primary-color', 'secondary-color', 'info-color', 'warning-color', 'alert-color', 'success-color', 'neutral-color', 'dark-color',
+    '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',
+  ]),
 };
 
 ComparisonTable.defaultProps = {
-  // Define default props here
-};
-
-export default ComparisonTable;
+  highlightColumn: null,
+  headerBgColor: 'neutral-color',
+  rowHeaderBgColor: 'neutral-color',
+  highlightBgColor: 'primary-color',
+  borderColor: 'neutral-color',
+};

package/src/stories/Molecules/ComparisonTable/ComparisonTable.stories.jsx

@@ -1,20 +1,81 @@
-
+import React from 'react';
 import { ComparisonTable } from './ComparisonTable';
 
-// Storybook configuration for ComparisonTable component
 export default {
-  title: 'Molecules/Tables/ComparisonTable',
+  title: 'Molecules/Data/ComparisonTable',
   component: ComparisonTable,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    // Define argTypes here
+    headerBgColor: {
+      control: {
+        type: 'select',
+        options: [
+          'primary-color', 'secondary-color', 'info-color', 'warning-color', 'alert-color', 'success-color', 'neutral-color', 'dark-color',
+          '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'
+        ],
+      },
+    },
+    rowHeaderBgColor: {
+      control: {
+        type: 'select',
+        options: [
+          'primary-color', 'secondary-color', 'info-color', 'warning-color', 'alert-color', 'success-color', 'neutral-color', 'dark-color',
+          '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'
+        ],
+      },
+    },
+    highlightBgColor: {
+      control: {
+        type: 'select',
+        options: [
+          'primary-color', 'secondary-color', 'info-color', 'warning-color', 'alert-color', 'success-color', 'neutral-color', 'dark-color',
+          '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'
+        ],
+      },
+    },
+    borderColor: {
+      control: {
+        type: 'select',
+        options: [
+          'primary-color', 'secondary-color', 'info-color', 'warning-color', 'alert-color', 'success-color', 'neutral-color', 'dark-color',
+          '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'
+        ],
+      },
+    },
   },
 };
 
-export const Default = {
-  args: {
-    // Define default args here
-  },
-};
+const headers = ['Feature', 'Product A', 'Product B', 'Product C'];
+const rowHeaders = ['Price', 'Quality', 'Support', 'Features'];
+const rows = [
+  ['$10', '$15', '$20'],
+  ['High', 'Medium', 'Low'],
+  ['24/7', 'Business Hours', 'Email Only'],
+  ['Basic', 'Advanced', 'Premium'],
+];
+
+export const DefaultTable = (args) => (
+  <ComparisonTable
+    {...args}
+    headers={headers}
+    rows={rows}
+    rowHeaders={rowHeaders}
+  />
+);
+
+export const HighlightedColumn = (args) => (
+  <ComparisonTable
+    {...args}
+    headers={headers}
+    rows={rows}
+    rowHeaders={rowHeaders}
+    highlightColumn={1}
+  />
+);

package/src/stories/Molecules/Dropdown/Dropdown.css

@@ -0,0 +1,192 @@
+/* Base Styles */
+.dropdown {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.dropdown__toggle {
+  width: 100%;
+  padding: 12px;
+  text-align: left;
+  border-radius: var(--border-radius);
+  background-color: transparent; /* No background for toggle */
+  border: 2px solid var(--primary-color); /* Default to primary color */
+  color: var(--primary-color); /* Default text color */
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: border-color var(--transition-speed), color var(--transition-speed);
+}
+
+.dropdown__icon {
+  margin-left: 8px;
+  font-size: 16px;
+}
+
+.dropdown__menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  max-height: 200px;
+  overflow-y: auto;
+  z-index: var(--z-index-tooltip);
+  box-shadow: var(--box-shadow);
+}
+
+.dropdown__search {
+  width: 100%;
+  padding: 10px;
+  border: none;
+  border-bottom: 1px solid var(--border-color);
+  outline: none;
+}
+
+.dropdown__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.dropdown__item {
+  padding: 10px;
+  cursor: pointer;
+  transition: background-color var(--transition-speed);
+}
+
+/* Item hover effect */
+.dropdown__item:hover {
+  background-color: var(--primary-color-hover);
+  color: var(--text-color-inverse);
+}
+
+/* Color Variants for Border and Text */
+.dropdown--primary-color .dropdown__toggle {
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+.dropdown--secondary-color .dropdown__toggle {
+  border-color: var(--secondary-color);
+  color: var(--secondary-color);
+}
+
+.dropdown--info-color .dropdown__toggle {
+  border-color: var(--info-color);
+  color: var(--info-color);
+}
+
+.dropdown--warning-color .dropdown__toggle {
+  border-color: var(--warning-color);
+  color: var(--warning-color);
+}
+
+.dropdown--alert-color .dropdown__toggle {
+  border-color: var(--alert-color);
+  color: var(--alert-color);
+}
+
+.dropdown--success-color .dropdown__toggle {
+  border-color: var(--success-color);
+  color: var(--success-color);
+}
+
+.dropdown--neutral-color .dropdown__toggle {
+  border-color: var(--neutral-color);
+  color: var(--neutral-color);
+}
+
+.dropdown--dark-color .dropdown__toggle {
+  border-color: var(--dark-color);
+  color: var(--dark-color);
+}
+
+/* Classy Palette */
+.dropdown--classy-color-1 .dropdown__toggle {
+  border-color: var(--classy-color-1);
+  color: var(--classy-color-1);
+}
+
+.dropdown--classy-color-2 .dropdown__toggle {
+  border-color: var(--classy-color-2);
+  color: var(--classy-color-2);
+}
+
+.dropdown--classy-color-3 .dropdown__toggle {
+  border-color: var(--classy-color-3);
+  color: var(--classy-color-3);
+}
+
+.dropdown--classy-color-4 .dropdown__toggle {
+  border-color: var(--classy-color-4);
+  color: var(--classy-color-4);
+}
+
+.dropdown--classy-color-5 .dropdown__toggle {
+  border-color: var(--classy-color-5);
+  color: var (--classy-color-5);
+}
+
+/* Small Switch Palette */
+.dropdown--small-switch-color-1 .dropdown__toggle {
+  border-color: var(--small-switch-color-1);
+  color: var(--small-switch-color-1);
+}
+
+.dropdown--small-switch-color-2 .dropdown__toggle {
+  border-color: var(--small-switch-color-2);
+  color: var(--small-switch-color-2);
+}
+
+/* Natural Palette */
+.dropdown--natural-color-1 .dropdown__toggle {
+  border-color: var(--natural-color-1);
+  color: var(--natural-color-1);
+}
+
+.dropdown--natural-color-2 .dropdown__toggle {
+  border-color: var(--natural-color-2);
+  color: var(--natural-color-2);
+}
+
+.dropdown--natural-color-3 .dropdown__toggle {
+  border-color: var(--natural-color-3);
+  color: var(--natural-color-3);
+}
+
+/* Grey Friends */
+.dropdown--grey-friend-1 .dropdown__toggle {
+  border-color: var(--grey-friend-1);
+  color: var(--grey-friend-1);
+}
+
+.dropdown--grey-friend-2 .dropdown__toggle {
+  border-color: var(--grey-friend-2);
+  color: var(--grey-friend-2);
+}
+
+/* Shades */
+.dropdown--shade-1 .dropdown__toggle {
+  border-color: var(--shade-1);
+  color: var(--shade-1);
+}
+
+.dropdown--shade-2 .dropdown__toggle {
+  border-color: var(--shade-2);
+  color: var(--shade-2);
+}
+
+.dropdown--shade-3 .dropdown__toggle {
+  border-color: var(--shade-3);
+  color: var(--shade-3);
+}
+
+.dropdown--shade-4 .dropdown__toggle {
+  border-color: var(--shade-4);
+  color: var(--shade-4);
+}

package/src/stories/Molecules/Dropdown/Dropdown.jsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import './Dropdown.css';
+
+export const Dropdown = ({
+  options,
+  placeholder,
+  color,
+  variant,
+  searchable,
+  onSelect,
+  showArrow,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchValue, setSearchValue] = useState('');
+  const [filteredOptions, setFilteredOptions] = useState(options);
+
+  const handleToggle = () => setIsOpen(!isOpen);
+
+  const handleSearch = (e) => {
+    const value = e.target.value;
+    setSearchValue(value);
+    setFilteredOptions(
+      options.filter(option => 
+        option.toLowerCase().includes(value.toLowerCase())
+      )
+    );
+  };
+
+  const handleSelect = (option) => {
+    setIsOpen(false);
+    setSearchValue('');
+    onSelect(option);
+  };
+
+  return (
+    <div className={`dropdown dropdown--${variant} dropdown--${color}`}>
+      <button
+        className="dropdown__toggle"
+        onClick={handleToggle}
+        aria-expanded={isOpen}
+      >
+        {searchValue || placeholder}
+        {showArrow && <span className="dropdown__icon">&#9662;</span>}
+      </button>
+
+      {isOpen && (
+        <div className="dropdown__menu">
+          {searchable && (
+            <input
+              type="text"
+              className="dropdown__search"
+              value={searchValue}
+              onChange={handleSearch}
+              placeholder="Search..."
+            />
+          )}
+          <ul className="dropdown__list">
+            {filteredOptions.map((option, index) => (
+              <li
+                key={index}
+                className="dropdown__item"
+                onClick={() => handleSelect(option)}
+              >
+                {option}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+};
+
+Dropdown.propTypes = {
+  options: PropTypes.arrayOf(PropTypes.string).isRequired,
+  placeholder: PropTypes.string,
+  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',
+  ]),
+  variant: PropTypes.oneOf(['primary', 'secondary']),
+  searchable: PropTypes.bool,
+  onSelect: PropTypes.func.isRequired,
+  showArrow: PropTypes.bool,
+};
+
+Dropdown.defaultProps = {
+  placeholder: 'Select an option',
+  color: 'primary',
+  variant: 'primary',
+  searchable: false,
+  showArrow: true,
+};