this.gui 1.0.11 → 1.0.13

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

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

package/src/stories/Atoms/Toggle/Toggle.css

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

package/src/stories/Atoms/Toggle/Toggle.jsx

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

package/src/stories/Atoms/Toggle/Toggle.stories.jsx

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

package/src/stories/Atoms/Tooltip/Tooltip.css

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

package/src/stories/Atoms/Tooltip/Tooltip.jsx

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

package/src/stories/Atoms/Tooltip/Tooltip.stories.jsx

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

package/src/stories/Atoms/Video/Video.css

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

package/src/stories/Atoms/Video/Video.jsx

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

package/src/stories/Atoms/Video/Video.stories.jsx

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

package/src/stories/Atoms/index.js

@@ -0,0 +1,65 @@
+// Import all components directly
+import { Heading } from './Heading/Heading';
+import { Paragraph } from './Paragraph/Paragraph';
+import { Label } from './Label/Label';
+import { Caption } from './Caption/Caption';
+import { Container } from './Container/Container';
+import { Button } from './Button/Button';
+import { Link } from './Link/Link';
+import { Icon } from './Icon/Icon';
+import { Checkbox } from './Checkbox/Checkbox';
+import { RadioButton } from './RadioButton/RadioButton';
+import { Toggle } from './Toggle/Toggle';
+import { TextInput } from './TextInput/TextInput';
+import { TextArea } from './TextArea/TextArea';
+import { Select } from './Select/Select';
+import { Slider } from './Slider/Slider';
+import { RangeInput } from './RangeInput/RangeInput';
+import { Image } from './Image/Image';
+import { Video } from './Video/Video';
+import { Audio } from './Audio/Audio';
+import { Divider } from './Divider/Divider';
+import { Spacer } from './Spacer/Spacer';
+import { Tooltip } from './Tooltip/Tooltip';
+import { Badge } from './Badge/Badge';
+import { Tag } from './Tag/Tag';
+import { Loader } from './Loader/Loader';
+import { Spinner } from './Spinner/Spinner';
+import { ProgressBar } from './ProgressBar/ProgressBar';
+import { Alert } from './Alert/Alert';
+import { Snackbar } from './Snackbar/Snackbar';
+
+// Flattened export of all components
+const Atoms = {
+  Heading,
+  Paragraph,
+  Label,
+  Caption,
+  Container,
+  Button,
+  Link,
+  Icon,
+  Checkbox,
+  RadioButton,
+  Toggle,
+  TextInput,
+  TextArea,
+  Select,
+  Slider,
+  RangeInput,
+  Image,
+  Video,
+  Audio,
+  Divider,
+  Spacer,
+  Tooltip,
+  Badge,
+  Tag,
+  Loader,
+  Spinner,
+  ProgressBar,
+  Alert,
+  Snackbar,
+};
+
+export default Atoms;

package/src/stories/Atoms/meta_Atoms.js

@@ -0,0 +1,46 @@
+const Atomic = {
+    "Atomic": {
+    "Text": [
+      { name: "Heading", paths: { css: "./Heading/Heading.css", globalCss: "styles/global.css", jsx: "./Heading/Heading.jsx", stories: "./Heading/Heading.stories.jsx" }},
+      { name: "Paragraph", paths: { css: "./Paragraph/Paragraph.css", globalCss: "styles/global.css", jsx: "./Paragraph/Paragraph.jsx", stories: "./Paragraph/Paragraph.stories.jsx" }},
+      { name: "Label", paths: { css: "./Label/Label.css", globalCss: "styles/global.css", jsx: "./Label/Label.jsx", stories: "./Label/Label.stories.jsx" }},
+      { name: "Caption", paths: { css: "./Caption/Caption.css", globalCss: "styles/global.css", jsx: "./Caption/Caption.jsx", stories: "./Caption/Caption.stories.jsx" }},
+    ],
+    "Interactive": [
+      { name: " Container", paths: { css: "./Container/Container.css", globalCss: "styles/global.css", jsx: "./Container/Container.jsx", stories: "./Container/Container.stories.jsx" }},
+      { name: "Button", paths: { css: "/Button/Button.css", globalCss: "styles/global.css", jsx: "./Button/Button.jsx", stories: "./Button/Button.stories.jsx" }},
+      { name: "Link", paths: { css: "Atomic/Link/Link.css", globalCss: "styles/global.css", jsx: "./Link/Link.jsx", stories: "./Link/Link.stories.jsx" }},
+      { name: "Icon", paths: { css: "/Atomic/Icon/Icon.css", globalCss: "styles/global.css", jsx: "./Icon/Icon.jsx", stories: "./Icon/Icon.stories.jsx" }},
+      { name: "Checkbox", paths: { css: "./Checkbox/Checkbox.css", globalCss: "styles/global.css", jsx: "./Checkbox/Checkbox.jsx", stories: "./Checkbox/Checkbox.stories.jsx" }},
+      { name: "RadioButton", paths: { css: "./RadioButton/RadioButton.css", globalCss: "styles/global.css", jsx: "./RadioButton/RadioButton.jsx", stories: "./RadioButton/RadioButton.stories.jsx" }},
+      { name: "Toggle", paths: { css: "./Toggle/Toggle.css", globalCss: "styles/global.css", jsx: "./Toggle/Toggle.jsx", stories: "./Toggle/Toggle.stories.jsx" }},
+      { name: "TextInput", paths: { css: "./TextInput/TextInput.css", globalCss: "styles/global.css", jsx: "./TextInput/TextInput.jsx", stories: "./TextInput/TextInput.stories.jsx" }},
+      { name: "TextArea", paths: { css: "./TextArea/TextArea.css", globalCss: "styles/global.css", jsx: "./TextArea/TextArea.jsx", stories: "./TextArea/TextArea.stories.jsx" }},
+      { name: "Select", paths: { css: "./Select/Select.css", globalCss: "styles/global.css", jsx: "./Select/Select.jsx", stories: "./Select/Select.stories.jsx" }},
+      { name: "Slider", paths: { css: "./Slider/Slider.css", globalCss: "styles/global.css", jsx: "./Slider/Slider.jsx", stories: "./Slider/Slider.stories.jsx" }},
+      { name: "RangeInput", paths: { css: "./RangeInput/RangeInput.css", globalCss: "styles/global.css", jsx: "./RangeInput/RangeInput.jsx", stories: "./RangeInput/RangeInput.stories.jsx" }},
+    ],
+    "Media": [
+      { name: "Image", paths: { css: "./Image/Image.css", globalCss: "styles/global.css", jsx: "./Image/Image.jsx", stories: "./Image/Image.stories.jsx" }},
+      { name: "Video", paths: { css: "./Video/Video.css", globalCss: "styles/global.css", jsx: "./Video/Video.jsx", stories: "./Video/Video.stories.jsx" }},
+      { name: "Audio", paths: { css: "./Audio/Audio.css", globalCss: "styles/global.css", jsx: "./Audio/Audio.jsx", stories: "./Audio/Audio.stories.jsx" }},
+      { name: "Icon", paths: { css: "./Icon/Icon.css", globalCss: "styles/global.css", jsx: "./Icon/Icon.jsx", stories: "./Icon/Icon.stories.jsx" }},
+    ],
+    "Visual": [
+      { name: "Divider", paths: { css: "./Divider/Divider.css", globalCss: "styles/global.css", jsx: "./Divider/Divider.jsx", stories: "./Divider/Divider.stories.jsx" }},
+      { name: "Spacer", paths: { css: "./Spacer/Spacer.css", globalCss: "styles/global.css", jsx: "./Spacer/Spacer.jsx", stories: "./Spacer/Spacer.stories.jsx" }},
+      { name: "Tooltip", paths: { css: "./Tooltip/Tooltip.css", globalCss: "styles/global.css", jsx: "./Tooltip/Tooltip.jsx", stories: "./Tooltip/Tooltip.stories.jsx" }},
+      { name: "Badge", paths: { css: "./Badge/Badge.css", globalCss: "styles/global.css", jsx: "./Badge/Badge.jsx", stories: "./Badge/Badge.stories.jsx" }},
+      { name: "Tag", paths: { css: "./Tag/Tag.css", globalCss: "styles/global.css", jsx: "./Tag/Tag.jsx", stories: "./Tag/Tag.stories.jsx" }},
+    ],
+    "Feedback": [
+      { name: "Loader", paths: { css: "./Loader/Loader.css", globalCss: "styles/global.css", jsx: "./Loader/Loader.jsx", stories: "./Loader/Loader.stories.jsx" }},
+      { name: "Spinner", paths: { css: "./Spinner/Spinner.css", globalCss: "styles/global.css", jsx: "./Spinner/Spinner.jsx", stories: "./Spinner/Spinner.stories.jsx" }},
+      { name: "ProgressBar", paths: { css: "./ProgressBar/ProgressBar.css", globalCss: "styles/global.css", jsx: "./ProgressBar/ProgressBar.jsx", stories: "./ProgressBar/ProgressBar.stories.jsx" }},
+      { name: "Alert", paths: { css: "./Alert/Alert.css", globalCss: "styles/global.css", jsx: "./Alert/Alert.jsx", stories: "./Alert/Alert.stories.jsx" }},
+      { name: "Snackbar", paths: { css: "./Snackbar/Snackbar.css", globalCss: "styles/global.css", jsx: "./Snackbar/Snackbar.jsx", stories: "./Snackbar/Snackbar.stories.jsx" }},
+    ]
+  }
+}
+
+export default Atomic;