this.gui 1.0.11 → 1.0.13

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

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

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

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

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

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

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

@@ -0,0 +1,48 @@
+/* src/stories/atoms/Interactive/Icon/Icon.css */
+
+/* Base styles for the Icon component */
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+/* Sizes */
+.icon--small {
+  width: 16px;
+  height: 16px;
+}
+
+.icon--medium {
+  width: 24px;
+  height: 24px;
+}
+
+.icon--large {
+  width: 32px;
+  height: 32px;
+}
+
+/* Colors */
+.icon--primary {
+  fill: #1e88e5;
+}
+
+.icon--secondary {
+  fill: #757575;
+}
+
+.icon--success {
+  fill: #43a047;
+}
+
+.icon--danger {
+  fill: #e53935;
+}
+
+.icon--warning {
+  fill: #fdd835;
+}
+
+.icon--info {
+  fill: #039be5;
+}

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

@@ -0,0 +1,51 @@
+// src/stories/atoms/Interactive/Icon/Icon.jsx
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Icon.css';
+
+/**
+ * Icon component for displaying SVG icons
+ */
+export const Icon = ({ name, size, color, ...props }) => {
+  const sizeClass = size ? `icon--${size}` : '';
+  const colorClass = color ? `icon--${color}` : '';
+
+  return (
+    <svg
+      className={['icon', sizeClass, colorClass].join(' ').trim()}
+      {...props}
+    >
+      <use xlinkHref={`#icon-${name}`} />
+    </svg>
+  );
+};
+
+Icon.propTypes = {
+  /**
+   * Name of the icon (should correspond to an existing SVG symbol)
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * Size of the icon
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * Color variant of the icon
+   */
+  color: PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'success',
+    'danger',
+    'warning',
+    'info',
+  ]),
+};
+
+Icon.defaultProps = {
+  size: 'medium',
+  color: 'primary',
+};
+
+export default Icon;

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

@@ -0,0 +1,72 @@
+// src/stories/atoms/Interactive/Icon/Icon.stories.jsx
+
+import React from 'react';
+import { Icon } from './Icon';
+
+export default {
+  title: 'Atoms/Media/Icon',
+  component: Icon,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    name: {
+      control: 'text',
+      description: 'Name of the icon symbol to use.',
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description: 'Size of the icon.',
+    },
+    color: {
+      control: 'select',
+      options: ['primary', 'secondary', 'success', 'danger', 'warning', 'info'],
+      description: 'Color variant of the icon.',
+    },
+  },
+};
+
+const Template = (args) => <Icon {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  name: 'home', // Replace 'home' with an actual icon name
+  size: 'medium',
+  color: 'primary',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  name: 'settings',
+  size: 'medium',
+  color: 'secondary',
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  name: 'check',
+  size: 'medium',
+  color: 'success',
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  name: 'error',
+  size: 'medium',
+  color: 'danger',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  name: 'star',
+  size: 'large',
+  color: 'primary',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  name: 'search',
+  size: 'small',
+  color: 'primary',
+};

package/src/stories/Atoms/Image/Image.css

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

package/src/stories/Atoms/Image/Image.jsx

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

package/src/stories/Atoms/Image/Image.stories.jsx

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

package/src/stories/Atoms/Label/Label.css

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

package/src/stories/Atoms/Label/Label.jsx

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

package/src/stories/Atoms/Label/Label.stories.jsx

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

package/src/stories/Atoms/Link/Link.css

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

package/src/stories/Atoms/Link/Link.jsx

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

package/src/stories/Atoms/Link/Link.stories.jsx

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

package/src/stories/Atoms/Loader/Loader.css

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

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

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