this.gui 1.0.17 → 1.1.0

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

@@ -1,84 +0,0 @@
-//this.GUI/src/stories/Atoms/Grid/Grid.stories.jsx
-import React from 'react';
-import { Grid } from './Grid';
-
-export default {
-  title: 'Atoms/Layout/Grid',
-  component: Grid,
-  argTypes: {
-    gap: { control: 'text', defaultValue: '16px' },
-    border: { control: 'boolean', defaultValue: false },
-    rounded: { control: 'boolean', defaultValue: false },
-    shadow: {
-      control: 'select',
-      options: ['none', 'small', 'medium', 'large'],
-      defaultValue: 'none',
-    },
-    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',
-    },
-  },
-};
-
-export const ResponsiveGrid = (args) => (
-  <Grid {...args}>
-    <div>Item 1</div>
-    <div>Item 2</div>
-    <div>Item 3</div>
-    <div>Item 4</div>
-    <div>Item 5</div>
-    <div>Item 6</div>
-    <div>Item 7</div>
-    <div>Item 8</div>
-    <div>Item 9</div>
-  </Grid>
-);
-
-export const GridWithRoundedAndShadow = (args) => (
-  <Grid {...args} border={true} rounded={true} shadow="medium" color="primary">
-    <div>Item 1</div>
-    <div>Item 2</div>
-    <div>Item 3</div>
-    <div>Item 4</div>
-    <div>Item 5</div>
-    <div>Item 6</div>
-    <div>Item 7</div>
-    <div>Item 8</div>
-    <div>Item 9</div>
-  </Grid>
-);
-
-export const ColorfulGrid = (args) => (
-  <Grid {...args} color="alert">
-    <div>Item 1</div>
-    <div>Item 2</div>
-    <div>Item 3</div>
-    <div>Item 4</div>
-    <div>Item 5</div>
-    <div>Item 6</div>
-    <div>Item 7</div>
-    <div>Item 8</div>
-    <div>Item 9</div>
-    <div>Item 10</div>
-    <div>Item 11</div>
-    <div>Item 12</div>
-    <div>Item 13</div>
-    <div>Item 14</div>
-    <div>Item 15</div>
-    <div>Item 16</div>
-    <div>Item 17</div>
-    <div>Item 18</div>
-    <div>Item 19</div>
-    <div>Item 20</div>
-    <div>Item 21</div>
-  </Grid>
-);

package/src/stories/Atoms/Heading/Heading.css

@@ -1,112 +0,0 @@
-/* src/stories/Atoms/Heading/Heading.css */
-
-.heading {
-  font-family: var(--font-family);
-  color: var(--text-color);
-  margin-bottom: var(--spacing-md);
-  transition: color var(--transition-speed) ease;
-}
-
-.heading--align-left {
-  text-align: left;
-}
-
-.heading--align-center {
-  text-align: center;
-}
-
-.heading--align-right {
-  text-align: right;
-}
-
-.heading--bold {
-  font-weight: var(--font-weight-heavy);
-}
-
-.heading--info {
-  color: var(--info-color);
-}
-
-.heading--warning {
-  color: var(--warning-color);
-}
-
-.heading--alert {
-  color: var(--alert-color);
-}
-
-.heading--success {
-  color: var(--success-color);
-}
-
-.heading--neutral {
-  color: var(--neutral-color);
-}
-
-.heading--dark {
-  color: var(--dark-color);
-}
-
-.heading--classy-color-1 {
-  color: var(--classy-color-1);
-}
-
-.heading--classy-color-2 {
-  color: var(--classy-color-2);
-}
-
-.heading--classy-color-3 {
-  color: var(--classy-color-3);
-}
-
-.heading--classy-color-4 {
-  color: var(--classy-color-4);
-}
-
-.heading--classy-color-5 {
-  color: var(--classy-color-5);
-}
-
-.heading--small-switch-color-1 {
-  color: var(--small-switch-color-1);
-}
-
-.heading--small-switch-color-2 {
-  color: var(--small-switch-color-2);
-}
-
-.heading--natural-color-1 {
-  color: var(--natural-color-1);
-}
-
-.heading--natural-color-2 {
-  color: var(--natural-color-2);
-}
-
-.heading--natural-color-3 {
-  color: var(--natural-color-3);
-}
-
-.heading--grey-friend-1 {
-  color: var(--grey-friend-1);
-}
-
-.heading--grey-friend-2 {
-  color: var(--grey-friend-2);
-}
-
-.heading--shade-1 {
-  color: var(--shade-1);
-}
-
-.heading--shade-2 {
-  color: var(--shade-2);
-}
-
-.heading--shade-3 {
-  color: var(--shade-3);
-}
-
-.heading--shade-4 {
-  color: var(--shade-4);
-}

package/src/stories/Atoms/Heading/Heading.jsx

@@ -1,69 +0,0 @@
-// src/stories/Atoms/Heading/Heading.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import './Heading.css';
-
-export const Heading = ({
-  level = 1, // 1 to 5
-  align = 'left', // 'left', 'center', 'right'
-  bold = false,
-  color = 'neutral',
-  children,
-  className = '',
-  style = {},
-  ...props
-}) => {
-  const Tag = `h${level}`;
-  const headingClasses = classNames('heading', className, {
-    [`heading--align-${align}`]: align,
-    'heading--bold': bold,
-    [`heading--${color}`]: color,
-  });
-
-  return (
-    <Tag className={headingClasses} style={style} {...props}>
-      {children}
-    </Tag>
-  );
-};
-
-Heading.propTypes = {
-  /** Heading level (1 to 5) */
-  level: PropTypes.oneOf([1, 2, 3, 4, 5]),
-  /** Text alignment */
-  align: PropTypes.oneOf(['left', 'center', 'right']),
-  /** Bold text */
-  bold: PropTypes.bool,
-  /** Color of the heading text */
-  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',
-  ]),
-  /** Content of the heading */
-  children: PropTypes.node.isRequired,
-  /** Additional CSS classes */
-  className: PropTypes.string,
-  /** Inline styles */
-  style: PropTypes.object,
-};

package/src/stories/Atoms/Heading/Heading.stories.jsx

@@ -1,130 +0,0 @@
-// src/stories/Atoms/Heading/Heading.stories.jsx
-import React from 'react';
-import { Heading } from './Heading';
-import './Heading.css';
-
-export default {
-  title: 'Atoms/Text/Heading',
-  component: Heading,
-  argTypes: {
-    level: {
-      control: {
-        type: 'select',
-        options: [1, 2, 3, 4, 5],
-      },
-      description: 'Heading level (1 to 5).',
-    },
-    align: {
-      control: {
-        type: 'select',
-        options: ['left', 'center', 'right'],
-      },
-      description: 'Text alignment.',
-    },
-    bold: {
-      control: 'boolean',
-      description: 'Make the text bold.',
-    },
-    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 heading text.',
-    },
-    className: {
-      control: 'text',
-      description: 'Additional CSS classes.',
-    },
-    style: {
-      control: 'object',
-      description: 'Inline styles.',
-    },
-    children: {
-      control: 'text',
-      description: 'Content of the heading.',
-    },
-  },
-};
-
-/**
- * H1 Center Aligned Bold Heading
- */
-export const H1CenterBold = () => (
-  <Heading level={1} align="center" bold color="success">
-    This is a Center Aligned Bold H1 Heading
-  </Heading>
-);
-
-/**
- * H2 Left Aligned Normal Heading
- */
-export const H2LeftNormal = () => (
-  <Heading level={2} align="left" color="info">
-    This is a Left Aligned Normal H2 Heading
-  </Heading>
-);
-
-/**
- * H3 Right Aligned Bold Heading
- */
-export const H3RightBold = () => (
-  <Heading level={3} align="right" bold color="warning">
-    This is a Right Aligned Bold H3 Heading
-  </Heading>
-);
-
-/**
- * H4 Center Aligned Normal Heading
- */
-export const H4CenterNormal = () => (
-  <Heading level={4} align="center" color="neutral">
-    This is a Center Aligned Normal H4 Heading
-  </Heading>
-);
-
-/**
- * H5 Left Aligned Bold Heading
- */
-export const H5LeftBold = () => (
-  <Heading level={5} align="left" bold color="dark">
-    This is a Left Aligned Bold H5 Heading
-  </Heading>
-);
-
-/**
- * Interactive Heading
- */
-const Template = (args) => <Heading {...args}>This is an interactive heading.</Heading>;
-
-export const InteractiveHeading = Template.bind({});
-InteractiveHeading.args = {
-  level: 3,
-  align: 'center',
-  bold: false,
-  color: 'info',
-};
-InteractiveHeading.storyName = 'Interactive Heading';

package/src/stories/Atoms/Icon/Icon.css

@@ -1,240 +0,0 @@
-/* src/stories/Atoms/Icon/Icon.css */
-
-.icon-container {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.icon-container--background {
-  background-color: var(--color-var);
-}
-
-.icon-container--shape-rounded {
-  border-radius: 50%;
-}
-
-.icon-container--shape-square {
-  border-radius: 0;
-}
-
-.icon-container--size-small {
-  width: var(--font-size-small);
-  height: var(--font-size-small);
-}
-
-.icon-container--size-normal {
-  width: var(--font-size-base);
-  height: var(--font-size-base);
-}
-
-.icon-container--size-big {
-  width: var(--font-size-large);
-  height: var(--font-size-large);
-}
-
-.icon-container--align-left {
-  justify-content: flex-start;
-}
-
-.icon-container--align-center {
-  justify-content: center;
-}
-
-.icon-container--align-right {
-  justify-content: flex-end;
-}
-
-/* Background Color Classes */
-.icon-container--color-info {
-  background-color: var(--info-color);
-}
-
-.icon-container--color-warning {
-  background-color: var(--warning-color);
-}
-
-.icon-container--color-alert {
-  background-color: var(--alert-color);
-}
-
-.icon-container--color-success {
-  background-color: var(--success-color);
-}
-
-.icon-container--color-neutral {
-  background-color: var(--neutral-color);
-}
-
-.icon-container--color-dark {
-  background-color: var(--dark-color);
-}
-
-.icon-container--color-classy-color-1 {
-  background-color: var(--classy-color-1);
-}
-
-.icon-container--color-classy-color-2 {
-  background-color: var(--classy-color-2);
-}
-
-.icon-container--color-classy-color-3 {
-  background-color: var(--classy-color-3);
-}
-
-.icon-container--color-classy-color-4 {
-  background-color: var(--classy-color-4);
-}
-
-.icon-container--color-classy-color-5 {
-  background-color: var(--classy-color-5);
-}
-
-.icon-container--color-small-switch-color-1 {
-  background-color: var(--small-switch-color-1);
-}
-
-.icon-container--color-small-switch-color-2 {
-  background-color: var(--small-switch-color-2);
-}
-
-.icon-container--color-natural-color-1 {
-  background-color: var(--natural-color-1);
-}
-
-.icon-container--color-natural-color-2 {
-  background-color: var(--natural-color-2);
-}
-
-.icon-container--color-natural-color-3 {
-  background-color: var(--natural-color-3);
-}
-
-.icon-container--color-grey-friend-1 {
-  background-color: var(--grey-friend-1);
-}
-
-.icon-container--color-grey-friend-2 {
-  background-color: var(--grey-friend-2);
-}
-
-.icon-container--color-shade-1 {
-  background-color: var(--shade-1);
-}
-
-.icon-container--color-shade-2 {
-  background-color: var(--shade-2);
-}
-
-.icon-container--color-shade-3 {
-  background-color: var(--shade-3);
-}
-
-.icon-container--color-shade-4 {
-  background-color: var(--shade-4);
-}
-
-/* Icon Styles */
-.icon {
-  display: inline-block;
-}
-
-.icon--color-info {
-  color: var(--info-color);
-}
-
-.icon--color-warning {
-  color: var(--warning-color);
-}
-
-.icon--color-alert {
-  color: var(--alert-color);
-}
-
-.icon--color-success {
-  color: var(--success-color);
-}
-
-.icon--color-neutral {
-  color: var(--neutral-color);
-}
-
-.icon--color-dark {
-  color: var(--dark-color);
-}
-
-.icon--color-classy-color-1 {
-  color: var(--classy-color-1);
-}
-
-.icon--color-classy-color-2 {
-  color: var(--classy-color-2);
-}
-
-.icon--color-classy-color-3 {
-  color: var(--classy-color-3);
-}
-
-.icon--color-classy-color-4 {
-  color: var(--classy-color-4);
-}
-
-.icon--color-classy-color-5 {
-  color: var(--classy-color-5);
-}
-
-.icon--color-small-switch-color-1 {
-  color: var(--small-switch-color-1);
-}
-
-.icon--color-small-switch-color-2 {
-  color: var(--small-switch-color-2);
-}
-
-.icon--color-natural-color-1 {
-  color: var(--natural-color-1);
-}
-
-.icon--color-natural-color-2 {
-  color: var(--natural-color-2);
-}
-
-.icon--color-natural-color-3 {
-  color: var(--natural-color-3);
-}
-
-.icon--color-grey-friend-1 {
-  color: var(--grey-friend-1);
-}
-
-.icon--color-grey-friend-2 {
-  color: var(--grey-friend-2);
-}
-
-.icon--color-shade-1 {
-  color: var(--shade-1);
-}
-
-.icon--color-shade-2 {
-  color: var(--shade-2);
-}
-
-.icon--color-shade-3 {
-  color: var(--shade-3);
-}
-
-.icon--color-shade-4 {
-  color: var(--shade-4);
-}
-
-.icon--size-small {
-  font-size: var(--font-size-small);
-}
-
-.icon--size-normal {
-  font-size: var(--font-size-base);
-}
-
-.icon--size-big {
-  font-size: var(--font-size-large);
-}

package/src/stories/Atoms/Icon/Icon.jsx

@@ -1,80 +0,0 @@
-// src/stories/Atoms/Icon/Icon.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import './Icon.css';
-
-export const Icon = ({
-  icon: IconComponent,
-  background = false,
-  color = 'neutral',
-  shape = 'square',
-  size = 'normal',
-  align = 'left',
-  className = '',
-  style = {},
-  ...props
-}) => {
-  const containerClasses = classNames('icon-container', className, {
-    'icon-container--background': background,
-    [`icon-container--shape-${shape}`]: shape,
-    [`icon-container--size-${size}`]: size,
-    [`icon-container--align-${align}`]: align,
-    [`icon-container--color-${color}`]: background,
-  });
-
-  const iconClasses = classNames('icon', {
-    [`icon--color-${color}`]: !background,
-    [`icon--size-${size}`]: size,
-  });
-
-  return background ? (
-    <div className={containerClasses} style={style} {...props}>
-      <IconComponent className={iconClasses} />
-    </div>
-  ) : (
-    <IconComponent className={iconClasses} style={style} {...props} />
-  );
-};
-
-Icon.propTypes = {
-  /** Icon component from react-icons or similar library */
-  icon: PropTypes.elementType.isRequired,
-  /** Whether to display a background behind the icon */
-  background: PropTypes.bool,
-  /** Color of the icon or background */
-  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',
-  ]),
-  /** Shape of the background */
-  shape: PropTypes.oneOf(['rounded', 'square']),
-  /** Size of the icon */
-  size: PropTypes.oneOf(['small', 'normal', 'big']),
-  /** Alignment of the icon within its container */
-  align: PropTypes.oneOf(['left', 'center', 'right']),
-  /** Additional CSS classes */
-  className: PropTypes.string,
-  /** Inline styles */
-  style: PropTypes.object,
-};