this.gui 1.0.12 → 1.0.14

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

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

package/src/stories/Atoms/Snackbar/Snackbar.css

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

package/src/stories/Atoms/Snackbar/Snackbar.jsx

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

package/src/stories/Atoms/Snackbar/Snackbar.stories.jsx

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

package/src/stories/Atoms/Spacer/Spacer.css

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

package/src/stories/Atoms/Spacer/Spacer.jsx

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

package/src/stories/Atoms/Spacer/Spacer.stories.jsx

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

package/src/stories/Atoms/Spinner/Spinner.css

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

package/src/stories/Atoms/Spinner/Spinner.jsx

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

package/src/stories/Atoms/Spinner/Spinner.stories.jsx

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

package/src/stories/Atoms/Tag/Tag.css

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

package/src/stories/Atoms/Tag/Tag.jsx

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

package/src/stories/Atoms/Tag/Tag.stories.jsx

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

package/src/stories/Atoms/TextArea/TextArea.css

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

package/src/stories/Atoms/TextArea/TextArea.jsx

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

package/src/stories/Atoms/TextArea/TextArea.stories.jsx

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

package/src/stories/Atoms/TextInput/TextInput.css

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

package/src/stories/Atoms/TextInput/TextInput.jsx

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