this.gui 1.0.11 → 1.0.13

package/src/stories/Atoms/Loader/Loader.stories.jsx

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

package/src/stories/Atoms/Paragraph/Paragraph.css

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

package/src/stories/Atoms/Paragraph/Paragraph.jsx

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

package/src/stories/Atoms/Paragraph/Paragraph.stories.jsx

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

package/src/stories/Atoms/ProgressBar/ProgressBar.css

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

package/src/stories/Atoms/ProgressBar/ProgressBar.jsx

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

package/src/stories/Atoms/ProgressBar/ProgressBar.stories.jsx

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

package/src/stories/Atoms/RadioButton/RadioButton.css

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

package/src/stories/Atoms/RadioButton/RadioButton.jsx

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

package/src/stories/Atoms/RadioButton/RadioButton.stories.jsx

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

package/src/stories/Atoms/RangeInput/RangeInput.css

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

package/src/stories/Atoms/RangeInput/RangeInput.jsx

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

package/src/stories/Atoms/RangeInput/RangeInput.stories.jsx

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

package/src/stories/Atoms/Select/Select.css

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

package/src/stories/Atoms/Select/Select.jsx

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

package/src/stories/Atoms/Select/Select.stories.jsx

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

package/src/stories/Atoms/Slider/Slider.css

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

package/src/stories/Atoms/Slider/Slider.jsx

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