this.gui 1.0.11 → 1.0.13

package/src/stories/Atoms/Button/Button.css

@@ -0,0 +1,70 @@
+/* Base styles */
+.button {
+  display: inline-block;
+  padding: var(--button-padding, 12px 24px);
+  border-radius: var(--button-border-radius, 8px);
+  font-family: 'Roboto', sans-serif; /* Inheriting global font */
+  font-size: var(--button-font-size, 16px); /* Increased for better readability */
+  cursor: pointer;
+  transition: background-color 0.3s ease, box-shadow 0.3s ease;
+  text-align: center;
+  border: 1px solid transparent;
+  box-shadow: var(--button-box-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));
+  margin-right: 10px; /* Spacing between buttons */
+}
+
+/* Primary button */
+.button--primary {
+  background-color: var(--button-primary-bg-color, #691500); /* Deep green */
+  color: var(--button-primary-text-color, #3c0a0a);
+  border-color: var(--button-primary-border-color, #3f887c);
+}
+
+.button--primary:hover {
+  background-color: var(--button-primary-hover-bg-color, #dee4e3);
+  box-shadow: var(--button-primary-hover-box-shadow, 0 6px 10px rgba(0, 0, 0, 0.2));
+}
+
+/* Secondary button */
+.button--secondary {
+  background-color: var(--button-secondary-bg-color, #fff);
+  color: var(--button-secondary-text-color, #00695c);
+  border-color: var(--button-secondary-border-color, #00695c);
+}
+
+.button--secondary:hover {
+  background-color: var(--button-secondary-hover-bg-color, #f0f0f0);
+  box-shadow: var(--button-secondary-hover-box-shadow, 0 6px 10px rgba(0, 0, 0, 0.1));
+}
+
+/* Sizes */
+.button--small {
+  font-size: var(--button-small-font-size, 14px);
+  padding: var(--button-small-padding, 8px 16px);
+}
+
+.button--medium {
+  font-size: var(--button-medium-font-size, 16px);
+  padding: var(--button-medium-padding, 12px 24px);
+}
+
+.button--large {
+  font-size: var(--button-large-font-size, 18px);
+  padding: var(--button-large-padding, 16px 32px);
+}
+
+/* No Border Button Style */
+.button--no-border {
+  background-color: var(--button-no-border-bg-color, transparent);
+  color: var(--button-no-border-text-color, #00695c);
+  border: var(--button-no-border-border, none);
+  border-bottom: var(--button-no-border-border-bottom, 2px solid #00695c);
+  border-radius: var(--button-no-border-border-radius, 0);
+  padding: var(--button-no-border-padding, 0);
+}
+
+.button--no-border:hover {
+  border-bottom: var(--button-no-border-hover-border-bottom, 2px solid #004d40);
+  background-color: var(--button-no-border-hover-bg-color, transparent);
+  box-shadow: var(--button-no-border-hover-box-shadow, none);
+}

package/src/stories/Atoms/Button/Button.jsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Button.css'; // Keep the styles file
+
+export const Button = ({ primary, size, label, noBorder, children, ...props }) => {
+  const mode = primary ? 'button--primary' : 'button--secondary';
+  const buttonSize = size === 'small' ? 'button--small' : size === 'large' ? 'button--large' : 'button--medium';
+  const borderClass = noBorder ? 'button--no-border' : '';
+
+  return (
+    <button
+      type="button"
+      className={`button ${mode} ${buttonSize} ${borderClass}`}
+      style={{
+        '--button-padding': props.padding || null,
+        '--button-border-radius': props.borderRadius || null,
+        '--button-font-family': props.fontFamily || null,
+        '--button-font-size': props.fontSize || null,
+        '--button-box-shadow': props.boxShadow || null,
+        '--button-primary-bg-color': props.primaryBgColor || null,
+        '--button-primary-text-color': props.primaryTextColor || null,
+        '--button-primary-border-color': props.primaryBorderColor || null,
+        '--button-primary-hover-bg-color': props.primaryHoverBgColor || null,
+        '--button-primary-hover-box-shadow': props.primaryHoverBoxShadow || null,
+        '--button-secondary-bg-color': props.secondaryBgColor || null,
+        '--button-secondary-text-color': props.secondaryTextColor || null,
+        '--button-secondary-border-color': props.secondaryBorderColor || null,
+        '--button-secondary-hover-bg-color': props.secondaryHoverBgColor || null,
+        '--button-secondary-hover-box-shadow': props.secondaryHoverBoxShadow || null,
+        '--button-small-font-size': props.smallFontSize || null,
+        '--button-small-padding': props.smallPadding || null,
+        '--button-medium-font-size': props.mediumFontSize || null,
+        '--button-medium-padding': props.mediumPadding || null,
+        '--button-large-font-size': props.largeFontSize || null,
+        '--button-large-padding': props.largePadding || null,
+        '--button-no-border-bg-color': props.noBorderBgColor || null,
+        '--button-no-border-text-color': props.noBorderTextColor || null,
+        '--button-no-border-border': props.noBorderBorder || null,
+        '--button-no-border-border-bottom': props.noBorderBorderBottom || null,
+        '--button-no-border-border-radius': props.noBorderBorderRadius || null,
+        '--button-no-border-padding': props.noBorderPadding || null,
+        '--button-no-border-hover-border-bottom': props.noBorderHoverBorderBottom || null,
+        '--button-no-border-hover-bg-color': props.noBorderHoverBgColor || null,
+        '--button-no-border-hover-box-shadow': props.noBorderHoverBoxShadow || null,
+      }}
+      {...props}
+    >
+      {children || label}
+    </button>
+  );
+};
+
+Button.propTypes = {
+  primary: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  label: PropTypes.string,
+  noBorder: PropTypes.bool,
+  children: PropTypes.node,
+  padding: PropTypes.string,
+  borderRadius: PropTypes.string,
+  fontFamily: PropTypes.string,
+  fontSize: PropTypes.string,
+  boxShadow: PropTypes.string,
+  primaryBgColor: PropTypes.string,
+  primaryTextColor: PropTypes.string,
+  primaryBorderColor: PropTypes.string,
+  primaryHoverBgColor: PropTypes.string,
+  primaryHoverBoxShadow: PropTypes.string,
+  secondaryBgColor: PropTypes.string,
+  secondaryTextColor: PropTypes.string,
+  secondaryBorderColor: PropTypes.string,
+  secondaryHoverBgColor: PropTypes.string,
+  secondaryHoverBoxShadow: PropTypes.string,
+  smallFontSize: PropTypes.string,
+  smallPadding: PropTypes.string,
+  mediumFontSize: PropTypes.string,
+  mediumPadding: PropTypes.string,
+  largeFontSize: PropTypes.string,
+  largePadding: PropTypes.string,
+  noBorderBgColor: PropTypes.string,
+  noBorderTextColor: PropTypes.string,
+  noBorderBorder: PropTypes.string,
+  noBorderBorderBottom: PropTypes.string,
+  noBorderBorderRadius: PropTypes.string,
+  noBorderPadding: PropTypes.string,
+  noBorderHoverBorderBottom: PropTypes.string,
+  noBorderHoverBgColor: PropTypes.string,
+  noBorderHoverBoxShadow: PropTypes.string,
+};
+
+Button.defaultProps = {
+  primary: false,
+  size: 'medium',
+  label: '',
+  noBorder: false,
+};
+
+export default Button;

package/src/stories/Atoms/Button/Button.stories.jsx

@@ -0,0 +1,54 @@
+import { Button } from './Button';
+
+export default {
+  title: 'Atoms/Interactive/Button',
+  component: Button,
+  parameters: {
+    docs: {
+      description: {
+        component: 'A customizable button component for various user interactions.',
+      },
+    },
+  },
+  argTypes: {
+    primary: { control: 'boolean', description: 'Is this the primary button?' },
+    size: { control: { type: 'select', options: ['small', 'medium', 'large'] }, description: 'Size of the button' },
+    noborder: { control: 'boolean', description: 'No border button style' },
+    label: { control: 'text', description: 'Text label for the button' },
+    children: { control: 'text', description: 'Content inside the button' },
+  },
+};
+
+export const Primary = {
+  args: {
+    primary: true,
+    children: 'Primary Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    children: 'Secondary Button',
+  },
+};
+
+export const NoBorder = {
+  args: {
+    noborder: true,
+    children: 'No Border Button',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    children: 'Large Button',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    children: 'Small Button',
+  },
+};

package/src/stories/Atoms/Caption/Caption.css

@@ -0,0 +1,29 @@
+
+.caption {
+  padding: 16px;
+  border-radius: 8px;
+  background-color: #f0f0f0;
+  border: 1px solid #ddd;
+}
+
+.caption--primary {
+  background-color: #e3f2fd;
+  border-color: #1e88e5;
+}
+
+.caption--secondary {
+  background-color: #fff;
+  border-color: #ccc;
+}
+
+.caption--small {
+  padding: 8px;
+}
+
+.caption--medium {
+  padding: 16px;
+}
+
+.caption--large {
+  padding: 32px;
+}

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

@@ -0,0 +1,41 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Caption.css';
+
+/**
+ * Caption component for user interaction
+ */
+export const Caption = ({ primary, size, children, ...props }) => {
+  const mode = primary ? 'caption--primary' : 'caption--secondary';
+  return (
+    <div
+      className={['caption', `caption--${size}`, mode].join(' ')}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+Caption.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,
+};
+
+Caption.defaultProps = {
+  primary: false,
+  size: 'medium',
+};
+
+export default Caption;

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

@@ -0,0 +1,41 @@
+
+import { Caption } from './Caption';
+
+// Storybook configuration for Caption component
+export default {
+  title: 'Atoms/Text/Caption',
+  component: Caption,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+};
+
+export const Primary = {
+  args: {
+    primary: true,
+    children: 'This is a primary Caption',
+  },
+};
+
+export const Secondary = {
+  args: {
+    children: 'This is a secondary Caption',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    children: 'This is a large Caption',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    children: 'This is a small Caption',
+  },
+};

package/src/stories/Atoms/Checkbox/Checkbox.css

@@ -0,0 +1,29 @@
+
+.checkbox {
+  padding: 16px;
+  border-radius: 8px;
+  background-color: #f0f0f0;
+  border: 1px solid #ddd;
+}
+
+.checkbox--primary {
+  background-color: #e3f2fd;
+  border-color: #1e88e5;
+}
+
+.checkbox--secondary {
+  background-color: #fff;
+  border-color: #ccc;
+}
+
+.checkbox--small {
+  padding: 8px;
+}
+
+.checkbox--medium {
+  padding: 16px;
+}
+
+.checkbox--large {
+  padding: 32px;
+}

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

@@ -0,0 +1,41 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Checkbox.css';
+
+/**
+ * Checkbox component for user interaction
+ */
+export const Checkbox = ({ primary, size, children, ...props }) => {
+  const mode = primary ? 'checkbox--primary' : 'checkbox--secondary';
+  return (
+    <div
+      className={['checkbox', `checkbox--${size}`, mode].join(' ')}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+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,
+};
+
+Checkbox.defaultProps = {
+  primary: false,
+  size: 'medium',
+};
+
+export default Checkbox;

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

@@ -0,0 +1,41 @@
+
+import { Checkbox } from './Checkbox';
+
+// Storybook configuration for Checkbox component
+export default {
+  title: 'Atoms/Interactive/Checkbox',
+  component: Checkbox,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+};
+
+export const Primary = {
+  args: {
+    primary: true,
+    children: 'This is a primary Checkbox',
+  },
+};
+
+export const Secondary = {
+  args: {
+    children: 'This is a secondary Checkbox',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    children: 'This is a large Checkbox',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    children: 'This is a small Checkbox',
+  },
+};

package/src/stories/Atoms/Container/Container.css

@@ -0,0 +1,29 @@
+
+.container {
+  padding: 16px;
+  border-radius: 8px;
+  background-color: #f0f0f0;
+  border: 1px solid #ddd;
+}
+
+.container--primary {
+  background-color: #e3f2fd;
+  border-color: #1e88e5;
+}
+
+.container--secondary {
+  background-color: #fff;
+  border-color: #ccc;
+}
+
+.container--small {
+  padding: 8px;
+}
+
+.container--medium {
+  padding: 16px;
+}
+
+.container--large {
+  padding: 32px;
+}

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

@@ -0,0 +1,41 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Container.css';
+
+/**
+ * Container component for user interaction
+ */
+export const Container = ({ primary, size, children, ...props }) => {
+  const mode = primary ? 'container--primary' : 'container--secondary';
+  return (
+    <div
+      className={['container', `container--${size}`, mode].join(' ')}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+Container.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,
+};
+
+Container.defaultProps = {
+  primary: false,
+  size: 'medium',
+};
+
+export default Container;

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

@@ -0,0 +1,41 @@
+
+import { Container } from './Container';
+
+// Storybook configuration for Container component
+export default {
+  title: 'Atoms/Interactive/Container',
+  component: Container,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+};
+
+export const Primary = {
+  args: {
+    primary: true,
+    children: 'This is a primary Container',
+  },
+};
+
+export const Secondary = {
+  args: {
+    children: 'This is a secondary Container',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    children: 'This is a large Container',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    children: 'This is a small Container',
+  },
+};

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

@@ -0,0 +1,29 @@
+
+.divider {
+  padding: 16px;
+  border-radius: 8px;
+  background-color: #f0f0f0;
+  border: 1px solid #ddd;
+}
+
+.divider--primary {
+  background-color: #e3f2fd;
+  border-color: #1e88e5;
+}
+
+.divider--secondary {
+  background-color: #fff;
+  border-color: #ccc;
+}
+
+.divider--small {
+  padding: 8px;
+}
+
+.divider--medium {
+  padding: 16px;
+}
+
+.divider--large {
+  padding: 32px;
+}

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

@@ -0,0 +1,41 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Divider.css';
+
+/**
+ * Divider component for user interaction
+ */
+export const Divider = ({ primary, size, children, ...props }) => {
+  const mode = primary ? 'divider--primary' : 'divider--secondary';
+  return (
+    <div
+      className={['divider', `divider--${size}`, mode].join(' ')}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+Divider.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,
+};
+
+Divider.defaultProps = {
+  primary: false,
+  size: 'medium',
+};
+
+export default Divider;

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

@@ -0,0 +1,41 @@
+
+import { Divider } from './Divider';
+
+// Storybook configuration for Divider component
+export default {
+  title: 'Atoms/Visual/Divider',
+  component: Divider,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+};
+
+export const Primary = {
+  args: {
+    primary: true,
+    children: 'This is a primary Divider',
+  },
+};
+
+export const Secondary = {
+  args: {
+    children: 'This is a secondary Divider',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    children: 'This is a large Divider',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    children: 'This is a small Divider',
+  },
+};