this.gui 1.0.18 → 1.1.0

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

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

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

@@ -1,25 +0,0 @@
-
-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

@@ -1,20 +0,0 @@
-
-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

@@ -1,35 +0,0 @@
-.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

@@ -1,76 +0,0 @@
-//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

@@ -1,28 +0,0 @@
-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

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

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

@@ -1,25 +0,0 @@
-
-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

@@ -1,20 +0,0 @@
-
-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

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

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

@@ -1,25 +0,0 @@
-
-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

@@ -1,20 +0,0 @@
-
-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

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

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

@@ -1,25 +0,0 @@
-
-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

@@ -1,20 +0,0 @@
-
-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

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

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

@@ -1,25 +0,0 @@
-
-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

@@ -1,20 +0,0 @@
-
-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

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

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

@@ -1,25 +0,0 @@
-
-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

@@ -1,20 +0,0 @@
-
-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

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

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

@@ -1,25 +0,0 @@
-
-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

@@ -1,20 +0,0 @@
-
-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

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

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

@@ -1,25 +0,0 @@
-
-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

@@ -1,20 +0,0 @@
-
-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/Navbar/Navbar.css

@@ -1,91 +0,0 @@
-/* src/stories/Molecules/Navigation/Navbar/Navbar.css */
-
-/* Root variables for theming */
-.navbar {
-  --navbar-background-color: var(--background-color);
-  --navbar-border-color: var(--border-color);
-  --navbar-height: 60px;
-  --navbar-link-color: var(--text-color);
-  --navbar-link-hover-background: rgba(255, 255, 255, 0.1);
-  --navbar-link-padding: 0 16px;
-  --navbar-fixed: fixed;
-  --navbar-z-index: 1000;
-
-  position: var(--navbar-fixed);
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: var(--navbar-height);
-  background-color: var(--navbar-background-color);
-  border-bottom: 1px solid var(--navbar-border-color);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  z-index: var(--navbar-z-index);
-  padding: 0 16px;
-  box-sizing: border-box;
-}
-
-.navbar__group {
-  display: flex;
-  align-items: center;
-}
-
-.navbar__group--left {
-  flex: 1;
-}
-
-.navbar__group--center {
-  flex: 1;
-  justify-content: center;
-}
-
-.navbar__group--right {
-  flex: 1;
-  justify-content: flex-end;
-}
-
-.navbar__logo {
-  margin-right: 16px;
-}
-
-.navbar__search {
-  margin-right: 16px;
-}
-
-.navbar__link {
-  color: var(--navbar-link-color);
-  text-decoration: none;
-  padding: var(--navbar-link-padding);
-  display: flex;
-  align-items: center;
-  height: 100%;
-  box-sizing: border-box;
-  transition: background-color 0.3s ease;
-}
-
-.navbar__link:hover {
-  background-color: var(--navbar-link-hover-background);
-}
-
-@media (max-width: 768px) {
-  .navbar {
-    flex-wrap: wrap;
-    height: auto;
-  }
-
-  .navbar__group {
-    width: 100%;
-    justify-content: center;
-    margin: 8px 0;
-  }
-
-  .navbar__group--left,
-  .navbar__group--right {
-    justify-content: center;
-  }
-
-  .navbar__link {
-    padding: 8px;
-  }
-}