this.gui 1.0.12 → 1.0.13

package/src/stories/Molecules/FileUpload/FileUpload.jsx

@@ -0,0 +1,25 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './FileUpload.css';
+
+/**
+ * FileUpload component
+ */
+export const FileUpload = (props) => {
+  return (
+    <div className="fileupload" {...props}>
+      {/* Component implementation */}
+    </div>
+  );
+};
+
+FileUpload.propTypes = {
+  // Define prop types here
+};
+
+FileUpload.defaultProps = {
+  // Define default props here
+};
+
+export default FileUpload;

package/src/stories/Molecules/FileUpload/FileUpload.stories.jsx

@@ -0,0 +1,20 @@
+
+import { FileUpload } from './FileUpload';
+
+// Storybook configuration for FileUpload component
+export default {
+  title: 'Molecules/FormElements/FileUpload',
+  component: FileUpload,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    // Define argTypes here
+  },
+};
+
+export const Default = {
+  args: {
+    // Define default args here
+  },
+};

package/src/stories/Molecules/FormField/FormField.css

@@ -0,0 +1,4 @@
+
+.formfield {
+  /* Default styles for FormField */
+}

package/src/stories/Molecules/FormField/FormField.jsx

@@ -0,0 +1,25 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './FormField.css';
+
+/**
+ * FormField component
+ */
+export const FormField = (props) => {
+  return (
+    <div className="formfield" {...props}>
+      {/* Component implementation */}
+    </div>
+  );
+};
+
+FormField.propTypes = {
+  // Define prop types here
+};
+
+FormField.defaultProps = {
+  // Define default props here
+};
+
+export default FormField;

package/src/stories/Molecules/FormField/FormField.stories.jsx

@@ -0,0 +1,20 @@
+
+import { FormField } from './FormField';
+
+// Storybook configuration for FormField component
+export default {
+  title: 'Molecules/FormElements/FormField',
+  component: FormField,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    // Define argTypes here
+  },
+};
+
+export const Default = {
+  args: {
+    // Define default args here
+  },
+};

package/src/stories/Molecules/Header/Header.css

@@ -0,0 +1,35 @@
+.storybook-header {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.storybook-header svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-header h1 {
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1;
+  margin: 6px 0 6px 10px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-header button {
+  padding: 8px 16px; /* Ensure the padding is correctly applied */
+  font-size: 12px;    /* Adjust font size */
+  border-radius: 6px;
+  display: inline-block;
+  margin-right:5px;
+}
+.storybook-header .welcome {
+  color: #333;
+  font-size: 14px;
+  margin-right: 10px;
+}

package/src/stories/Molecules/Header/Header.jsx

@@ -0,0 +1,76 @@
+//this.GUI/src/stories/Profile/ProfilePageContext.jsx
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '../../Atoms/Button/Button/';
+import './Header.css';
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
+  <header>
+    <div className="storybook-header">
+      <div>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="49" height="55">
+  {/* Outer Circle */}
+  <circle cx="60" cy="60" r="45" fill="none" stroke="black" strokeWidth="4" />
+
+  {/* Quadrants */}
+  <path d="M15,60 A45,45 0 0 1 60,15 L60,60 Z" fill="#FFDD67" />
+  <path d="M60,15 A45,45 0 0 1 105,60 L60,60 Z" fill="#F87060" />
+  <path d="M60,60 L105,60 A45,45 0 0 1 60,105 Z" fill="#5BC8AF" />
+  <path d="M60,60 L60,105 A45,45 0 0 1 15,60 Z" fill="#1DA1F2" />
+
+  {/* Face: Eyes */}
+  <circle cx="45" cy="50" r="5" fill="#333" />
+  <circle cx="75" cy="50" r="5" fill="#333" />
+
+  {/* Face: Smile */}
+  <path d="M45 70 Q60 85 75 70" stroke="#333" strokeWidth="3" fill="transparent" />
+
+  {/* Floating Atoms */}
+  <circle cx="20" cy="20" r="5" fill="#1DA1F2" />
+  <circle cx="100" cy="20" r="5" fill="#FFDD67" />
+  <circle cx="110" cy="80" r="5" fill="#F87060" />
+  <circle cx="20" cy="100" r="5" fill="#5BC8AF" />
+  <circle cx="80" cy="110" r="5" fill="#1DA1F2" />
+  <circle cx="10" cy="80" r="5" fill="#FFDD67" />
+  <circle cx="50" cy="10" r="5" fill="#5BC8AF" />
+
+  {/* Dots around the main circle */}
+  <circle cx="25" cy="60" r="3" fill="#1DA1F2" />
+  <circle cx="95" cy="60" r="3" fill="#F87060" />
+  <circle cx="45" cy="25" r="3" fill="#FFDD67" />
+  <circle cx="75" cy="95" r="3" fill="#5BC8AF" />
+</svg>
+
+        <h1  style={{marginTop: '21px'}} >GUI.navbar</h1>
+      </div>
+      <div>
+        {user ? (
+          <>
+            <span className="welcome">
+              Welcome, <b>{user.name}</b>!
+            </span>
+            <Button size="small" onClick={onLogout} label="Log out" />
+          </>
+        ) : (
+          <>
+            <Button size="small" onClick={onLogin} label="Log in" />
+            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+          </>
+        )}
+      </div>
+    </div>
+  </header>
+);
+
+Header.propTypes = {
+  user: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+  }),
+  onLogin: PropTypes.func.isRequired,
+  onLogout: PropTypes.func.isRequired,
+  onCreateAccount: PropTypes.func.isRequired,
+};
+
+Header.defaultProps = {
+  user: null,
+};

package/src/stories/Molecules/Header/Header.stories.jsx

@@ -0,0 +1,28 @@
+import { Header } from './Header';
+import { fn } from '@storybook/test';
+
+export default {
+  title: 'Molecules/Navigation/Header',
+  component: Header,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+  },
+};
+
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut = {};

package/src/stories/Molecules/IconButton/IconButton.css

@@ -0,0 +1,4 @@
+
+.iconbutton {
+  /* Default styles for IconButton */
+}

package/src/stories/Molecules/IconButton/IconButton.jsx

@@ -0,0 +1,25 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './IconButton.css';
+
+/**
+ * IconButton component
+ */
+export const IconButton = (props) => {
+  return (
+    <div className="iconbutton" {...props}>
+      {/* Component implementation */}
+    </div>
+  );
+};
+
+IconButton.propTypes = {
+  // Define prop types here
+};
+
+IconButton.defaultProps = {
+  // Define default props here
+};
+
+export default IconButton;

package/src/stories/Molecules/IconButton/IconButton.stories.jsx

@@ -0,0 +1,20 @@
+
+import { IconButton } from './IconButton';
+
+// Storybook configuration for IconButton component
+export default {
+  title: 'Molecules/ButtonsWithIcons/IconButton',
+  component: IconButton,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    // Define argTypes here
+  },
+};
+
+export const Default = {
+  args: {
+    // Define default args here
+  },
+};

package/src/stories/Molecules/ImageWithCaption/ImageWithCaption.css

@@ -0,0 +1,4 @@
+
+.imagewithcaption {
+  /* Default styles for ImageWithCaption */
+}

package/src/stories/Molecules/ImageWithCaption/ImageWithCaption.jsx

@@ -0,0 +1,25 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './ImageWithCaption.css';
+
+/**
+ * ImageWithCaption component
+ */
+export const ImageWithCaption = (props) => {
+  return (
+    <div className="imagewithcaption" {...props}>
+      {/* Component implementation */}
+    </div>
+  );
+};
+
+ImageWithCaption.propTypes = {
+  // Define prop types here
+};
+
+ImageWithCaption.defaultProps = {
+  // Define default props here
+};
+
+export default ImageWithCaption;

package/src/stories/Molecules/ImageWithCaption/ImageWithCaption.stories.jsx

@@ -0,0 +1,20 @@
+
+import { ImageWithCaption } from './ImageWithCaption';
+
+// Storybook configuration for ImageWithCaption component
+export default {
+  title: 'Molecules/MediaMolecules/ImageWithCaption',
+  component: ImageWithCaption,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    // Define argTypes here
+  },
+};
+
+export const Default = {
+  args: {
+    // Define default args here
+  },
+};

package/src/stories/Molecules/InputGroup/InputGroup.css

@@ -0,0 +1,4 @@
+
+.inputgroup {
+  /* Default styles for InputGroup */
+}

package/src/stories/Molecules/InputGroup/InputGroup.jsx

@@ -0,0 +1,25 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './InputGroup.css';
+
+/**
+ * InputGroup component
+ */
+export const InputGroup = (props) => {
+  return (
+    <div className="inputgroup" {...props}>
+      {/* Component implementation */}
+    </div>
+  );
+};
+
+InputGroup.propTypes = {
+  // Define prop types here
+};
+
+InputGroup.defaultProps = {
+  // Define default props here
+};
+
+export default InputGroup;

package/src/stories/Molecules/InputGroup/InputGroup.stories.jsx

@@ -0,0 +1,20 @@
+
+import { InputGroup } from './InputGroup';
+
+// Storybook configuration for InputGroup component
+export default {
+  title: 'Molecules/FormElements/InputGroup',
+  component: InputGroup,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    // Define argTypes here
+  },
+};
+
+export const Default = {
+  args: {
+    // Define default args here
+  },
+};

package/src/stories/Molecules/InputWithLabel/InputWithLabel.css

@@ -0,0 +1,4 @@
+
+.inputwithlabel {
+  /* Default styles for InputWithLabel */
+}

package/src/stories/Molecules/InputWithLabel/InputWithLabel.jsx

@@ -0,0 +1,25 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './InputWithLabel.css';
+
+/**
+ * InputWithLabel component
+ */
+export const InputWithLabel = (props) => {
+  return (
+    <div className="inputwithlabel" {...props}>
+      {/* Component implementation */}
+    </div>
+  );
+};
+
+InputWithLabel.propTypes = {
+  // Define prop types here
+};
+
+InputWithLabel.defaultProps = {
+  // Define default props here
+};
+
+export default InputWithLabel;

package/src/stories/Molecules/InputWithLabel/InputWithLabel.stories.jsx

@@ -0,0 +1,20 @@
+
+import { InputWithLabel } from './InputWithLabel';
+
+// Storybook configuration for InputWithLabel component
+export default {
+  title: 'Molecules/FormElements/InputWithLabel',
+  component: InputWithLabel,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    // Define argTypes here
+  },
+};
+
+export const Default = {
+  args: {
+    // Define default args here
+  },
+};

package/src/stories/Molecules/List/List.css

@@ -0,0 +1,4 @@
+
+.list {
+  /* Default styles for List */
+}

package/src/stories/Molecules/List/List.jsx

@@ -0,0 +1,25 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './List.css';
+
+/**
+ * List component
+ */
+export const List = (props) => {
+  return (
+    <div className="list" {...props}>
+      {/* Component implementation */}
+    </div>
+  );
+};
+
+List.propTypes = {
+  // Define prop types here
+};
+
+List.defaultProps = {
+  // Define default props here
+};
+
+export default List;

package/src/stories/Molecules/List/List.stories.jsx

@@ -0,0 +1,20 @@
+
+import { List } from './List';
+
+// Storybook configuration for List component
+export default {
+  title: 'Molecules/ContentDisplay/List',
+  component: List,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    // Define argTypes here
+  },
+};
+
+export const Default = {
+  args: {
+    // Define default args here
+  },
+};

package/src/stories/Molecules/MediaCard/MediaCard.css

@@ -0,0 +1,4 @@
+
+.mediacard {
+  /* Default styles for MediaCard */
+}

package/src/stories/Molecules/MediaCard/MediaCard.jsx

@@ -0,0 +1,25 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './MediaCard.css';
+
+/**
+ * MediaCard component
+ */
+export const MediaCard = (props) => {
+  return (
+    <div className="mediacard" {...props}>
+      {/* Component implementation */}
+    </div>
+  );
+};
+
+MediaCard.propTypes = {
+  // Define prop types here
+};
+
+MediaCard.defaultProps = {
+  // Define default props here
+};
+
+export default MediaCard;

package/src/stories/Molecules/MediaCard/MediaCard.stories.jsx

@@ -0,0 +1,20 @@
+
+import { MediaCard } from './MediaCard';
+
+// Storybook configuration for MediaCard component
+export default {
+  title: 'Molecules/ContentDisplay/MediaCard',
+  component: MediaCard,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    // Define argTypes here
+  },
+};
+
+export const Default = {
+  args: {
+    // Define default args here
+  },
+};

package/src/stories/Molecules/Modal/Modal.css

@@ -0,0 +1,4 @@
+
+.modal {
+  /* Default styles for Modal */
+}

package/src/stories/Molecules/Modal/Modal.jsx

@@ -0,0 +1,25 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Modal.css';
+
+/**
+ * Modal component
+ */
+export const Modal = (props) => {
+  return (
+    <div className="modal" {...props}>
+      {/* Component implementation */}
+    </div>
+  );
+};
+
+Modal.propTypes = {
+  // Define prop types here
+};
+
+Modal.defaultProps = {
+  // Define default props here
+};
+
+export default Modal;

package/src/stories/Molecules/Modal/Modal.stories.jsx

@@ -0,0 +1,20 @@
+
+import { Modal } from './Modal';
+
+// Storybook configuration for Modal component
+export default {
+  title: 'Molecules/FeedbackMolecules/Modal',
+  component: Modal,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    // Define argTypes here
+  },
+};
+
+export const Default = {
+  args: {
+    // Define default args here
+  },
+};

package/src/stories/Molecules/Molecules.js

@@ -0,0 +1,44 @@
+const Molecules = {
+  "Molecules": {
+    "Navigation": [
+      { name: "Navbar", paths: { css: "./Navbar/Navbar.css", globalCss: "styles/global.css", jsx: "./Navbar/Navbar.jsx", stories: "./Navbar/Navbar.stories.jsx" }},
+      { name: "Sidebar", paths: { css: "./Sidebar/Sidebar.css", globalCss: "styles/global.css", jsx: "./Sidebar/Sidebar.jsx", stories: "./Sidebar/Sidebar.stories.jsx" }},
+      { name: "Breadcrumbs", paths: { css: "./Breadcrumbs/Breadcrumbs.css", globalCss: "styles/global.css", jsx: "./Breadcrumbs/Breadcrumbs.jsx", stories: "./Breadcrumbs/Breadcrumbs.stories.jsx" }},
+    ],
+    "FormElements": [
+      { name: "InputGroup ", paths: { css: "./InputGroup/InputGroup.css", globalCss: "styles/global.css", jsx: "./InputGroup/InputGroup.jsx", stories: "src/stories/Molecules/InputGroup/InputGroup.stories.jsx" }},
+      { name: "InputWithLabel", paths: { css: "./InputWithLabel/InputWithLabel.css", globalCss: "styles/global.css", jsx: "./InputWithLabel/InputWithLabel.jsx", stories: "src/stories/Molecules/InputWithLabel/InputWithLabel.stories.jsx" }},
+      { name: "SearchBar", paths: { css: "./SearchBar/SearchBar.css", globalCss: "styles/global.css", jsx: "./SearchBar/SearchBar.jsx", stories: "src/stories/Molecules/SearchBar/SearchBar.stories.jsx" }},
+      { name: "FileUpload", paths: { css: "./FileUpload/FileUpload.css", globalCss: "styles/global.css", jsx: "./FileUpload/FileUpload.jsx", stories: "src/stories/Molecules/FileUpload/FileUpload.stories.jsx" }},
+      { name: "FormField", paths: { css: "./FormField/FormField.css", globalCss: "styles/global.css", jsx: "./FormField/FormField.jsx", stories: "src/stories/Molecules/FormField/FormField.stories.jsx" }},
+    ],
+    "ButtonsWithIcons": [
+      { name: "IconButton", paths: { css: "./IconButton/IconButton.css", globalCss: "styles/global.css", jsx: "./IconButton/IconButton.jsx", stories: "src/stories/Molecules/IconButton/IconButton.stories.jsx" }},
+      { name: "ButtonGroup", paths: { css: "./ButtonGroup/ButtonGroup.css", globalCss: "styles/global.css", jsx: "./ButtonGroup/ButtonGroup.jsx", stories: "src/stories/Molecules/ButtonGroup/ButtonGroup.stories.jsx" }},
+    ],
+    "MediaMolecules": [
+      { name: "ImageWithCaption", paths: { css: "./ImageWithCaption/ImageWithCaption.css", globalCss: "styles/global.css", jsx: "./ImageWithCaption/ImageWithCaption.jsx", stories: "src/stories/Molecules/ImageWithCaption/ImageWithCaption.stories.jsx" }},
+      { name: "VideoWithDescription", paths: { css: "./VideoWithDescription/VideoWithDescription.css", globalCss: "styles/global.css", jsx: "./VideoWithDescription/VideoWithDescription.jsx", stories: "src/stories/Molecules/VideoWithDescription/VideoWithDescription.stories.jsx" }},
+      { name: "AvatarWithName", paths: { css: "./AvatarWithName/AvatarWithName.css", globalCss: "styles/global.css", jsx: "./AvatarWithName/AvatarWithName.jsx", stories: "src/stories/Molecules/AvatarWithName/AvatarWithName.stories.jsx" }},
+      { name: "AudioPlayer", paths: { css: "./AudioPlayer/AudioPlayer.css", globalCss: "styles/global.css", jsx: "./AudioPlayer/AudioPlayer.jsx", stories: "src/stories/Molecules/AudioPlayer/AudioPlayer.stories.jsx" }},
+    ],
+    "ContentDisplay": [
+      { name: "SelectTheme", paths: { css: "./SelectTheme/SelectTheme.css", globalCss: "styles/global.css", jsx: "./SelectTheme/SelectTheme.jsx", stories: "src/stories/Molecules/SelectTheme/SelectTheme.stories.jsx" }},
+      { name: "Card", paths: { css: "./Card/Card.css", globalCss: "styles/global.css", jsx: "./Card/Card.jsx", stories: "./Card/Card.stories.jsx" }},
+      { name: "MediaCard", paths: { css: "./MediaCard/MediaCard.css", globalCss: "styles/global.css", jsx: "./MediaCard/MediaCard.jsx", stories: "./MediaCard/MediaCard.stories.jsx" }},
+      { name: "List", paths: { css: "./List/List.css", globalCss: "styles/global.css", jsx: "./List/List.jsx", stories: "./List/List.stories.jsx" }},
+      { name: "Accordion", paths: { css: "./Accordion/Accordion.css", globalCss: "styles/global.css", jsx: "./Accordion/Accordion.jsx", stories: "./Accordion/Accordion.stories.jsx" }},
+    ],
+    "FeedbackMolecules": [
+      { name: "Notification", paths: { css: "./Notification/Notification.css", globalCss: "styles/global.css", jsx: "./Notification/Notification.jsx", stories: "src/stories/Molecules/Notification/Notification.stories.jsx" }},
+      { name: "Modal", paths: { css: "./Modal/Modal.css", globalCss: "styles/global.css", jsx: "./Modal/Modal.jsx", stories: "src/stories/Molecules/Modal/Modal.stories.jsx" }},
+    ],
+    "Tables": [
+      { name: "DataTable", paths: { css: "./DataTable/DataTable.css", globalCss: "styles/global.css", jsx: "./DataTable/DataTable.jsx", stories: "./DataTable/DataTable.stories.jsx" }},
+      { name: "PricingTable", paths: { css: "./PricingTable/PricingTable.css", globalCss: "styles/global.css", jsx: "./PricingTable/PricingTable.jsx", stories: "./PricingTable/PricingTable.stories.jsx" }},
+      { name: "ComparisonTable", paths: { css: "./ComparisonTable/ComparisonTable.css", globalCss: "styles/global.css", jsx: "./ComparisonTable/ComparisonTable.jsx", stories: "./ComparisonTable/ComparisonTable.stories.jsx" }},
+    ]
+  }
+}
+
+export default Molecules;