this.gui 1.0.18 → 1.1.0

package/src/stories/Atoms/Container/Container.stories.jsx

@@ -1,145 +0,0 @@
-import React from 'react';
-import { Container } from './Container';
-
-export default {
-  title: 'Atoms/Layout/Container',
-  component: Container,
-  argTypes: {
-    size: {
-      control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
-    },
-    border: {
-      control: { type: 'select' },
-      options: ['on', 'off'],
-    },
-    align: {
-      control: { type: 'select' },
-      options: ['left', 'center', 'right'],
-    },
-    fluid: { control: 'boolean' },
-    padding: {
-      control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
-    },
-    marginTop: {
-      control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
-    },
-    marginBottom: {
-      control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
-    },
-    marginLeft: {
-      control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
-    },
-    marginRight: {
-      control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
-    },
-    position: {
-      control: { type: 'select' },
-      options: ['relative', 'static', 'fixed', 'absolute', 'sticky'],
-    },
-    rounded: { control: 'boolean' }, // Add control for 'rounded' prop
-    borderColor: {
-      control: { type: 'select' },
-      options: [
-        'none',
-        'primary',
-        'secondary',
-        'link',
-        'focus',
-        'info',
-        'warning',
-        'alert',
-        'success',
-        'neutral',
-        'dark',
-        'classy-1',
-        'classy-2',
-        'classy-3',
-        'classy-4',
-        'classy-5',
-        'small-switch-1',
-        'small-switch-2',
-        'natural-1',
-        'natural-2',
-        'natural-3',
-        'grey-friend-1',
-        'grey-friend-2',
-        'shade-1',
-        'shade-2',
-        'shade-3',
-        'shade-4',
-      ],
-    },
-    backgroundColor: {
-      control: { type: 'select' }, // Use 'select' control type
-      options: [
-        'none',
-        'primary',
-        'secondary',
-        'link',
-        'focus',
-        'info',
-        'warning',
-        'alert',
-        'success',
-        'neutral',
-        'dark',
-        'classy-1',
-        'classy-2',
-        'classy-3',
-        'classy-4',
-        'classy-5',
-        'small-switch-1',
-        'small-switch-2',
-        'natural-1',
-        'natural-2',
-        'natural-3',
-        'grey-friend-1',
-        'grey-friend-2',
-        'shade-1',
-        'shade-2',
-        'shade-3',
-        'shade-4',
-      ],
-    },
-  },
-};
-
-const Template = (args) => <Container {...args}>Content goes here</Container>;
-
-export const Default = Template.bind({});
-Default.args = {
-  size: 'medium',
-  border: 'on',
-  align: 'left',
-  fluid: false,
-  padding: 'md',
-  marginTop: 'md',
-  marginBottom: 'md',
-  marginLeft: 'md',
-  marginRight: 'md',
-  position: 'relative',
-};
-
-export const Fluid = Template.bind({});
-Fluid.args = {
-  ...Default.args,
-  fluid: true,
-};
-
-export const Centered = Template.bind({});
-Centered.args = {
-  ...Default.args,
-  align: 'center',
-};
-
-export const LargePadding = Template.bind({});
-LargePadding.args = {
-  ...Default.args,
-  padding: 'lg',
-};

package/src/stories/Atoms/Divider/Divider.css

@@ -1,147 +0,0 @@
-/* src/stories/Atoms/Divider/Divider.css */
-
-.divider {
-  border: none;
-  height: 1px;
-  margin: var(--spacing-md) 0;
-  background-color: var(--neutral-color);
-  transition: background-color var(--transition-speed) ease, height var(--transition-speed) ease;
-}
-
-/* Thickness Variants */
-.divider--thin {
-  height: 1px;
-}
-
-.divider--normal {
-  height: 2px;
-}
-
-.divider--bold {
-  height: 3px;
-}
-
-/* Width Variants */
-.divider--small {
-  width: 25%;
-}
-
-.divider--medium {
-  width: 50%;
-}
-
-.divider--large {
-  width: 75%;
-}
-
-/* Alignment Variants */
-.divider--align-left {
-  margin-left: 0;
-}
-
-.divider--align-center {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.divider--align-right {
-  margin-right: 0;
-}
-
-/* Color Classes */
-.info {
-  background-color: var(--info-color);
-}
-
-.warning {
-  background-color: var(--warning-color);
-}
-
-.alert {
-  background-color: var(--alert-color);
-}
-
-.success {
-  background-color: var(--success-color);
-}
-
-.neutral {
-  background-color: var(--neutral-color);
-}
-
-.dark {
-  background-color: var(--dark-color);
-}
-
-.classy-color-1 {
-  background-color: var(--classy-color-1);
-}
-
-.classy-color-2 {
-  background-color: var(--classy-color-2);
-}
-
-.classy-color-3 {
-  background-color: var(--classy-color-3);
-}
-
-.classy-color-4 {
-  background-color: var(--classy-color-4);
-}
-
-.classy-color-5 {
-  background-color: var(--classy-color-5);
-}
-
-.small-switch-color-1 {
-  background-color: var(--small-switch-color-1);
-}
-
-.small-switch-color-2 {
-  background-color: var(--small-switch-color-2);
-}
-
-.natural-color-1 {
-  background-color: var(--natural-color-1);
-}
-
-.natural-color-2 {
-  background-color: var(--natural-color-2);
-}
-
-.natural-color-3 {
-  background-color: var(--natural-color-3);
-}
-
-.grey-friend-1 {
-  background-color: var(--grey-friend-1);
-}
-
-.grey-friend-2 {
-  background-color: var(--grey-friend-2);
-}
-
-.shade-1 {
-  background-color: var(--shade-1);
-}
-
-.shade-2 {
-  background-color: var(--shade-2);
-}
-
-.shade-3 {
-  background-color: var(--shade-3);
-}
-
-.shade-4 {
-  background-color: var(--shade-4);
-}
-
-/* Responsive Adjustments */
-@media (max-width: 768px) {
-  .divider--small,
-  .divider--medium,
-  .divider--large {
-    width: 100%;
-  }
-}

package/src/stories/Atoms/Divider/Divider.jsx

@@ -1,62 +0,0 @@
-// src/stories/Atoms/Divider/Divider.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import './Divider.css';
-
-export const Divider = ({
-  thickness = 'normal',
-  width = 'medium',
-  align = 'center',
-  color = 'neutral',
-  className = '',
-  style = {},
-  ...props
-}) => {
-  const dividerClasses = classNames('divider', className, {
-    [`divider--${thickness}`]: thickness,
-    [`divider--${width}`]: width,
-    [`divider--align-${align}`]: align,
-    [color]: color,
-  });
-
-  return <hr className={dividerClasses} style={style} {...props} />;
-};
-
-Divider.propTypes = {
-  /** Thickness of the divider */
-  thickness: PropTypes.oneOf(['thin', 'normal', 'bold']),
-  /** Width of the divider */
-  width: PropTypes.oneOf(['small', 'medium', 'large']),
-  /** Alignment of the divider */
-  align: PropTypes.oneOf(['left', 'center', 'right']),
-  /** Color of the divider */
-  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/Divider/Divider.stories.jsx

@@ -1,105 +0,0 @@
-// src/stories/Atoms/Divider/Divider.stories.jsx
-import React from 'react';
-import { Divider } from './Divider';
-import './Divider.css';
-
-export default {
-  title: 'Atoms/Layout/Divider',
-  component: Divider,
-  argTypes: {
-    thickness: {
-      control: {
-        type: 'select',
-        options: ['thin', 'normal', 'bold'],
-      },
-      description: 'Thickness of the divider.',
-    },
-    width: {
-      control: {
-        type: 'select',
-        options: ['small', 'medium', 'large'],
-      },
-      description: 'Width of the divider.',
-    },
-    align: {
-      control: {
-        type: 'select',
-        options: ['left', 'center', 'right'],
-      },
-      description: 'Alignment of the divider.',
-    },
-    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 divider.',
-    },
-    className: {
-      control: 'text',
-      description: 'Additional CSS classes.',
-    },
-    style: {
-      control: 'object',
-      description: 'Inline styles.',
-    },
-  },
-};
-
-/**
- * Thin Small Left Aligned Divider
- */
-export const ThinSmallLeft = () => (
-  <Divider thickness="thin" width="small" align="left" color="info" />
-);
-
-/**
- * Normal Medium Center Aligned Divider
- */
-export const NormalMediumCenter = () => (
-  <Divider thickness="normal" width="medium" align="center" color="warning" />
-);
-
-/**
- * Bold Large Right Aligned Divider
- */
-export const BoldLargeRight = () => (
-  <Divider thickness="bold" width="large" align="right" color="success" />
-);
-
-/**
- * Interactive Divider
- */
-const Template = (args) => <Divider {...args} />;
-
-export const InteractiveDivider = Template.bind({});
-InteractiveDivider.args = {
-  thickness: 'normal',
-  width: 'medium',
-  align: 'center',
-  color: 'neutral',
-};
-InteractiveDivider.storyName = 'Interactive Divider';

package/src/stories/Atoms/Grid/Grid.css

@@ -1,160 +0,0 @@
-/*this.GUI/src/stories/Atoms/Grid/Grid.css*/
-/* Base Grid Styles */
-.grid {
-  display: grid;
-  width: 100%;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Auto-fit responsive columns */
-  gap: 16px; /* Default gap between grid items */
-  padding: 16px;
-}
-
-/* Grid item styling */
-.grid > * {
-  background-color: var(--background-color);
-  padding: 16px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-/* Border Styles for Grid Items when the border prop is true */
-.grid--border > * {
-  border: 1px solid var(--border-color); /* Default border color */
-}
-
-/* Rounded corners */
-.grid--rounded > * {
-  border-radius: var(--border-radius, 8px); /* Apply rounded corners */
-}
-
-/* Shadow Depth Variants */
-.grid--shadow-small > * {
-  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2); /* Small shadow */
-}
-
-.grid--shadow-medium > * {
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Medium shadow */
-}
-
-.grid--shadow-large > * {
-  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.4); /* Large shadow */
-}
-
-/* Responsive behavior: grid adjusts based on screen size */
-@media (max-width: 768px) {
-  .grid {
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 2 columns on tablet */
-  }
-}
-
-@media (max-width: 480px) {
-  .grid {
-    grid-template-columns: 1fr; /* 1 column on mobile */
-  }
-}
-
-/* Hover effect for visual feedback on grid items */
-.grid > *:hover {
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-}
-/* Border Color Variants (Using Theme Colors) */
-.grid--primary > * {
-  border-color: var(--primary-color);
-}
-
-.grid--secondary > * {
-  border-color: var(--secondary-color);
-}
-
-.grid--info > * {
-  border-color: var(--info-color);
-}
-
-.grid--warning > * {
-  border-color: var(--warning-color);
-}
-
-.grid--alert > * {
-  border-color: var(--alert-color);
-}
-
-.grid--success > * {
-  border-color: var(--success-color);
-}
-
-.grid--neutral > * {
-  border-color: var(--neutral-color);
-}
-
-.grid--dark > * {
-  border-color: var(--dark-color);
-}
-
-/* Classy Palette Variants */
-.grid--classy-color-1 > * {
-  border-color: var(--classy-color-1);
-}
-
-.grid--classy-color-2 > * {
-  border-color: var(--classy-color-2);
-}
-
-.grid--classy-color-3 > * {
-  border-color: var(--classy-color-3);
-}
-
-.grid--classy-color-4 > * {
-  border-color: var(--classy-color-4);
-}
-
-.grid--classy-color-5 > * {
-  border-color: var(--classy-color-5);
-}
-
-/* Small Switch Palette */
-.grid--small-switch-color-1 > * {
-  border-color: var(--small-switch-color-1);
-}
-
-.grid--small-switch-color-2 > * {
-  border-color: var(--small-switch-color-2);
-}
-
-/* Natural Palette */
-.grid--natural-color-1 > * {
-  border-color: var(--natural-color-1);
-}
-
-.grid--natural-color-2 > * {
-  border-color: var(--natural-color-2);
-}
-
-.grid--natural-color-3 > * {
-  border-color: var(--natural-color-3);
-}
-
-/* Grey Friends */
-.grid--grey-friend-1 > * {
-  border-color: var(--grey-friend-1);
-}
-
-.grid--grey-friend-2 > * {
-  border-color: var(--grey-friend-2);
-}
-
-/* Shades */
-.grid--shade-1 > * {
-  border-color: var(--shade-1);
-}
-
-.grid--shade-2 > * {
-  border-color: var(--shade-2);
-}
-
-.grid--shade-3 > * {
-  border-color: var(--shade-3);
-}
-
-.grid--shade-4 > * {
-  border-color: var(--shade-4);
-}

package/src/stories/Atoms/Grid/Grid.jsx

@@ -1,43 +0,0 @@
-//this.GUI/src/stories/Atoms/Grid/Grid.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Grid.css'; // Import the revised grid styles
-
-export const Grid = ({ gap, border, color, rounded, shadow, children }) => {
-  const gridClasses = [
-    'grid', // Base grid class
-    border ? `grid--border grid--${color}` : '', // Conditionally apply border and color
-    rounded ? 'grid--rounded' : '', // Conditionally apply rounded corners
-    shadow ? `grid--shadow-${shadow}` : '', // Conditionally apply shadow depth
-  ].join(' ').trim();
-
-  return (
-    <div className={gridClasses} style={{ gap }}>
-      {children} {/* Grid items go here */}
-    </div>
-  );
-};
-
-Grid.propTypes = {
-  gap: PropTypes.string,
-  border: PropTypes.bool,
-  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'
-  ]),
-  rounded: PropTypes.bool, // Boolean for rounded corners
-  shadow: PropTypes.oneOf(['none', 'small', 'medium', 'large']), // Depth of shadow
-  children: PropTypes.node.isRequired,
-};
-
-Grid.defaultProps = {
-  gap: '16px', // Default gap between items
-  border: false, // Default to no border
-  color: 'primary', // Default border color
-  rounded: false, // Default to no rounded corners
-  shadow: 'none', // Default to no shadow
-};