this.gui 1.0.17 → 1.1.0

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

@@ -1,34 +0,0 @@
-//this.GUI/src/stories/Molecules/Card/Card.stories.jsx
-import React from 'react';
-import { Card } from './Card';
-
-export default {
-  title: 'Molecules/Display/Card',
-  component: Card,
-};
-
-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,35 +0,0 @@
-/* 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;
-}
-
-.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,104 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './ComparisonTable.css';
-
-export const ComparisonTable = ({
-  headers,
-  rows,
-  rowHeaders,
-  highlightColumn,
-  headerBgColor,
-  rowHeaderBgColor,
-  highlightBgColor,
-  borderColor,
-}) => {
-  return (
-    <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 = {
-  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 = {
-  highlightColumn: null,
-  headerBgColor: 'neutral-color',
-  rowHeaderBgColor: 'neutral-color',
-  highlightBgColor: 'primary-color',
-  borderColor: 'neutral-color',
-};

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

@@ -1,81 +0,0 @@
-import React from 'react';
-import { ComparisonTable } from './ComparisonTable';
-
-export default {
-  title: 'Molecules/Data/ComparisonTable',
-  component: ComparisonTable,
-  argTypes: {
-    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'
-        ],
-      },
-    },
-  },
-};
-
-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/DataTable/DataTable.css

@@ -1,4 +0,0 @@
-
-.datatable {
-  /* Default styles for DataTable */
-}

package/src/stories/Molecules/DataTable/DataTable.jsx

@@ -1,25 +0,0 @@
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import './DataTable.css';
-
-/**
- * DataTable component
- */
-export const DataTable = (props) => {
-  return (
-    <div className="datatable" {...props}>
-      {/* Component implementation */}
-    </div>
-  );
-};
-
-DataTable.propTypes = {
-  // Define prop types here
-};
-
-DataTable.defaultProps = {
-  // Define default props here
-};
-
-export default DataTable;

package/src/stories/Molecules/DataTable/DataTable.stories.jsx

@@ -1,20 +0,0 @@
-
-import { DataTable } from './DataTable';
-
-// Storybook configuration for DataTable component
-export default {
-  title: 'Molecules/Tables/DataTable',
-  component: DataTable,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    // Define argTypes here
-  },
-};
-
-export const Default = {
-  args: {
-    // Define default args here
-  },
-};

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

@@ -1,192 +0,0 @@
-/* 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

@@ -1,96 +0,0 @@
-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,
-};

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

@@ -1,45 +0,0 @@
-import React from 'react';
-import { Dropdown } from './Dropdown';
-
-export default {
-  title: 'Molecules/Menus/Dropdown',
-  component: Dropdown,
-  argTypes: {
-    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',
-      ],
-    },
-    variant: {
-      control: 'select',
-      options: ['primary', 'secondary'],
-    },
-    searchable: { control: 'boolean' },
-    showArrow: { control: 'boolean', defaultValue: true },
-  },
-};
-
-const options = [
-  'Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'
-];
-
-export const BasicDropdown = (args) => <Dropdown {...args} options={options} />;
-BasicDropdown.args = {
-  placeholder: 'Select an option',
-  searchable: false,
-  variant: 'primary',
-  color: 'primary',
-};
-
-export const SearchableDropdown = (args) => <Dropdown {...args} options={options} />;
-SearchableDropdown.args = {
-  placeholder: 'Type to search...',
-  searchable: true,
-  variant: 'primary',
-  color: 'info',
-};

package/src/stories/Molecules/FileUpload/FileUpload.css

@@ -1,4 +0,0 @@
-
-.fileupload {
-  /* Default styles for FileUpload */
-}

package/src/stories/Molecules/FileUpload/FileUpload.jsx

@@ -1,25 +0,0 @@
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import './FileUpload.css';
-
-/**
- * FileUpload component
- */
-export const FileUpload = (props) => {
-  return (
-    <div className="fileupload" {...props}>
-      {/* Component implementation */}
-    </div>
-  );
-};
-
-FileUpload.propTypes = {
-  // Define prop types here
-};
-
-FileUpload.defaultProps = {
-  // Define default props here
-};
-
-export default FileUpload;

package/src/stories/Molecules/FileUpload/FileUpload.stories.jsx

@@ -1,20 +0,0 @@
-
-import { FileUpload } from './FileUpload';
-
-// Storybook configuration for FileUpload component
-export default {
-  title: 'Molecules/FormElements/FileUpload',
-  component: FileUpload,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    // Define argTypes here
-  },
-};
-
-export const Default = {
-  args: {
-    // Define default args here
-  },
-};