this.gui 1.0.12 → 1.0.14

package/src/stories/Molecules/Navbar/Navbar.css

@@ -0,0 +1,87 @@
+/* src/stories/Molecules/Navigation/Navbar/Navbar.css */
+
+/* CSS variables for dynamic styling */
+.navbar {
+  --navbar-background-color: rgba(34, 139, 34, 0); /* Light greenish background with low opacity */
+  --navbar-border-color: rgba(34, 139, 34, 0.235); /* Light border with dark greenish color and low opacity */
+  --navbar-padding: 8px 16px;
+  --navbar-margin: 16px;
+  --navbar-border-radius: 4px;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--navbar-background-color);
+  border: 1px solid var(--navbar-border-color);
+  padding: var(--navbar-padding);
+  margin: var(--navbar-margin);
+  border-radius: var(--navbar-border-radius);
+}
+
+.navbar__logo {
+  --navbar-logo-margin-right: 24px;
+
+  display: flex;
+  align-items: center;
+  margin-right: var(--navbar-logo-margin-right);
+}
+
+.navbar__links {
+  list-style: none;
+  display: flex;
+  margin: 0;
+  padding: 0;
+}
+
+.navbar__item {
+  --navbar-item-margin: 0 12px;
+
+  margin: var(--navbar-item-margin);
+}
+
+.navbar__link {
+  --navbar-link-color: #006400;
+  --navbar-link-padding: 8px;
+
+  color: var(--navbar-link-color);
+  text-decoration: none;
+  padding: var(--navbar-link-padding);
+}
+
+.navbar__link:hover,
+.navbar__link--active {
+  --navbar-link-hover-background-color: rgba(34, 139, 34, 0.1);
+  --navbar-link-hover-border-radius: 4px;
+
+  background-color: var(--navbar-link-hover-background-color);
+  border-radius: var(--navbar-link-hover-border-radius);
+}
+
+.navbar__controls {
+  --navbar-controls-margin-left: 24px;
+
+  display: flex;
+  align-items: center;
+  margin-left: var(--navbar-controls-margin-left);
+}
+
+.navbar__controls > * {
+  --navbar-control-item-margin-left: 12px;
+
+  margin-left: var(--navbar-control-item-margin-left);
+}
+
+/* Button styles */
+.button {
+  --button-background-color: #228B22;
+  --button-text-color: #fff;
+
+  background-color: var(--button-background-color);
+  color: var(--button-text-color);
+}
+
+.button:hover {
+  --button-hover-background-color: #1e7a1e;
+
+  background-color: var(--button-hover-background-color);
+}

package/src/stories/Molecules/Navbar/Navbar.jsx

@@ -0,0 +1,87 @@
+// src/stories/Molecules/Navigation/Navbar/Navbar.jsx
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Navbar.css';
+
+export const Navbar = ({
+  links,
+  logo,
+  userControls,
+  styleOverrides = {},
+}) => {
+  // Build the style object for CSS variable overrides
+  const style = {};
+
+  // Map of styleOverrides keys to CSS variable names
+  const cssVariableMap = {
+    navbarBackgroundColor: '--navbar-background-color',
+    navbarBorderColor: '--navbar-border-color',
+    navbarPadding: '--navbar-padding',
+    navbarMargin: '--navbar-margin',
+    navbarBorderRadius: '--navbar-border-radius',
+    logoMarginRight: '--navbar-logo-margin-right',
+    itemMargin: '--navbar-item-margin',
+    linkColor: '--navbar-link-color',
+    linkPadding: '--navbar-link-padding',
+    linkHoverBackgroundColor: '--navbar-link-hover-background-color',
+    linkHoverBorderRadius: '--navbar-link-hover-border-radius',
+    controlsMarginLeft: '--navbar-controls-margin-left',
+    controlItemMarginLeft: '--navbar-control-item-margin-left',
+    buttonBackgroundColor: '--button-background-color',
+    buttonTextColor: '--button-text-color',
+    buttonHoverBackgroundColor: '--button-hover-background-color',
+  };
+
+  // Set CSS variables based on styleOverrides
+  Object.keys(styleOverrides).forEach((key) => {
+    const cssVar = cssVariableMap[key];
+    if (cssVar) {
+      style[cssVar] = styleOverrides[key];
+    }
+  });
+
+  return (
+    <nav className="navbar" style={style}>
+      <div className="navbar__logo">
+        {logo}
+      </div>
+      <ul className="navbar__links">
+        {links.map((link, index) => (
+          <li key={index} className="navbar__item">
+            <a
+              href={link.url}
+              className={`navbar__link ${link.isActive ? 'navbar__link--active' : ''}`}
+            >
+              {link.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+      <div className="navbar__controls">
+        {userControls}
+      </div>
+    </nav>
+  );
+};
+
+Navbar.propTypes = {
+  links: PropTypes.arrayOf(
+    PropTypes.shape({
+      url: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+      isActive: PropTypes.bool,
+    })
+  ).isRequired,
+  logo: PropTypes.node,
+  userControls: PropTypes.node,
+  styleOverrides: PropTypes.object,
+};
+
+Navbar.defaultProps = {
+  logo: null,
+  userControls: null,
+  styleOverrides: {},
+};
+
+export default Navbar;

package/src/stories/Molecules/Navbar/Navbar.stories.jsx

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

package/src/stories/Molecules/Notification/Notification.css

@@ -0,0 +1,4 @@
+
+.notification {
+  /* Default styles for Notification */
+}

package/src/stories/Molecules/Notification/Notification.jsx

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

package/src/stories/Molecules/Notification/Notification.stories.jsx

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

package/src/stories/Molecules/PricingTable/PricingTable.css

@@ -0,0 +1,4 @@
+
+.pricingtable {
+  /* Default styles for PricingTable */
+}

package/src/stories/Molecules/PricingTable/PricingTable.jsx

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

package/src/stories/Molecules/PricingTable/PricingTable.stories.jsx

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

package/src/stories/Molecules/SearchBar/SearchBar.css

@@ -0,0 +1,4 @@
+
+.searchbar {
+  /* Default styles for SearchBar */
+}

package/src/stories/Molecules/SearchBar/SearchBar.jsx

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

package/src/stories/Molecules/SearchBar/SearchBar.stories.jsx

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

package/src/stories/Molecules/SelectTheme/SelectTheme.css

@@ -0,0 +1,25 @@
+.select-theme-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: var(--bg-color, #f9f9f9); /* Use dynamic theme colors */
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  }
+  
+  .select-theme-label {
+    font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+    color: var(--text-color, #333);
+  }
+  
+  .select-theme-dropdown {
+    padding: 8px;
+    border-radius: 4px;
+    border: 1px solid var(--border-color, #ccc);
+    background-color: var(--bg-color, #fff);
+    color: var(--text-color, #333);
+    font-family: 'Roboto', sans-serif;
+    font-size: 14px;
+  }

package/src/stories/Molecules/SelectTheme/SelectTheme.jsx

@@ -0,0 +1,44 @@
+// src/stories/Molecules/SelectTheme/SelectTheme.jsx
+
+import React, { useState, useEffect } from 'react';
+import './SelectTheme.css'; // Import the component styles
+
+const themes = [
+  { label: 'GitHub', value: 'github' },
+  { label: 'Gothic', value: 'gothic' },
+  { label: 'Newsprint', value: 'newsprint' },
+  { label: 'Night', value: 'night' },
+  { label: 'Pixyll', value: 'pixyll' },
+  { label: 'Whitey', value: 'whitey' }
+];
+
+export const SelectTheme = () => {  // Named export
+  const [selectedTheme, setSelectedTheme] = useState('github'); // Default theme
+
+  useEffect(() => {
+    import(`../../../themes/typ/${selectedTheme}.css`).then(() => {
+      console.log(`${selectedTheme} theme loaded`);
+    });
+  }, [selectedTheme]);
+
+  const handleThemeChange = (event) => {
+    setSelectedTheme(event.target.value);
+  };
+
+  return (
+    <div className="select-theme-container">
+      <span className="select-theme-label">Select Theme:</span>
+      <select
+        className="select-theme-dropdown"
+        value={selectedTheme}
+        onChange={handleThemeChange}
+      >
+        {themes.map((theme) => (
+          <option key={theme.value} value={theme.value}>
+            {theme.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};

package/src/stories/Molecules/SelectTheme/SelectTheme.stories.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import SelectTheme from './SelectTheme';
+
+export default {
+  title: 'Molecules/ContentDisplay/SelectTheme',
+  component: SelectTheme,
+  parameters: {
+    docs: {
+      description: {
+        component: 'SelectTheme allows the user to switch between different CSS themes dynamically.',
+      },
+    },
+  },
+};
+
+const Template = (args) => <SelectTheme {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  // You can pass default props here if needed, though SelectTheme doesn't take any props directly.
+};
+
+Default.story = {
+  name: 'Default',
+};

package/src/stories/Molecules/Sidebar/Sidebar.css

@@ -0,0 +1,4 @@
+
+.sidebar {
+  /* Default styles for Sidebar */
+}

package/src/stories/Molecules/Sidebar/Sidebar.jsx

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

package/src/stories/Molecules/Sidebar/Sidebar.stories.jsx

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

package/src/stories/Molecules/VideoWithDescription/VideoWithDescription.css

@@ -0,0 +1,4 @@
+
+.videowithdescription {
+  /* Default styles for VideoWithDescription */
+}

package/src/stories/Molecules/VideoWithDescription/VideoWithDescription.jsx

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

package/src/stories/Molecules/VideoWithDescription/VideoWithDescription.stories.jsx

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

package/src/stories/Molecules/index.js

@@ -0,0 +1,57 @@
+// src/stories/Molecules/index.js
+
+// Import all components as named exports
+import { Navbar } from './Navbar/Navbar';
+import { Sidebar } from './Sidebar/Sidebar';
+import { Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
+import { InputGroup } from './InputGroup/InputGroup';
+import { InputWithLabel } from './InputWithLabel/InputWithLabel';
+import { SearchBar } from './SearchBar/SearchBar';
+import { FileUpload } from './FileUpload/FileUpload';
+import { FormField } from './FormField/FormField';
+import { IconButton } from './IconButton/IconButton';
+import { ButtonGroup } from './ButtonGroup/ButtonGroup';
+import { ImageWithCaption } from './ImageWithCaption/ImageWithCaption';
+import { VideoWithDescription } from './VideoWithDescription/VideoWithDescription';
+import { AvatarWithName } from './AvatarWithName/AvatarWithName';
+import { AudioPlayer } from './AudioPlayer/AudioPlayer';
+import { Card } from './Card/Card';
+import { MediaCard } from './MediaCard/MediaCard';
+import { List } from './List/List';
+import { Accordion } from './Accordion/Accordion';
+import { Notification } from './Notification/Notification';
+import { Modal } from './Modal/Modal';
+import { DataTable } from './DataTable/DataTable';
+import { PricingTable } from './PricingTable/PricingTable';
+import { ComparisonTable } from './ComparisonTable/ComparisonTable';
+import { SelectTheme } from './SelectTheme/SelectTheme'; 
+
+// Flattened export of all components
+const Molecules = {
+  Navbar,
+  Sidebar,
+  Breadcrumbs,
+  InputGroup,
+  InputWithLabel,
+  SearchBar,
+  SelectTheme,  
+  FileUpload,
+  FormField,
+  IconButton,
+  ButtonGroup,
+  ImageWithCaption,
+  VideoWithDescription,
+  AvatarWithName,
+  AudioPlayer,
+  Card,
+  MediaCard,
+  List,
+  Accordion,
+  Notification,
+  Modal,
+  DataTable,
+  PricingTable,
+  ComparisonTable,
+};
+
+export default Molecules;

package/src/stories/Organisms/Organisms.js

@@ -0,0 +1,39 @@
+const organisms = {
+  "Organisms": {
+    "Forms": [
+      { name: "SignInForm", paths: { css: "./SignInForm/SignInForm.css", globalCss: "styles/global.css", jsx: "./SignInForm/SignInForm.jsx", stories: "./SignInForm/SignInForm.stories.jsx" }},
+      { name: "RegistrationForm", paths: { css: "./RegistrationForm/RegistrationForm.css", globalCss: "styles/global.css", jsx: "./RegistrationForm/RegistrationForm.jsx", stories: "./RegistrationForm/RegistrationForm.stories.jsx" }},
+      { name: "ContactForm", paths: { css: "./ContactForm/ContactForm.css", globalCss: "styles/global.css", jsx: "./ContactForm/ContactForm.jsx", stories: "./ContactForm/ContactForm.stories.jsx" }},
+    ],
+    
+    "ContentDisplay": [
+      { name: "ProfileCard", paths: { css: "./ProfileCard/ProfileCard.css", globalCss: "styles/global.css", jsx: "./ProfileCard/ProfileCard.jsx", stories: "./ProfileCard/ProfileCard.stories.jsx" }},
+      { name: "ProductDetail", paths: { css: "./ProductDetail/ProductDetail.css", globalCss: "styles/global.css", jsx: "./ProductDetail/ProductDetail.jsx", stories: "./ProductDetail/ProductDetail.stories.jsx" }},
+      { name: "ArticleContent", paths: { css: "./ArticleContent/ArticleContent.css", globalCss: "styles/global.css", jsx: "./ArticleContent/ArticleContent.jsx", stories: "./ArticleContent/ArticleContent.stories.jsx" }},
+    ],
+    
+    "MediaCollections": [
+      { name: "ImageGallery", paths: { css: "./ImageGallery/ImageGallery.css", globalCss: "styles/global.css", jsx: "./ImageGallery/ImageGallery.jsx", stories: "./ImageGallery/ImageGallery.stories.jsx" }},
+      { name: "VideoPlaylist", paths: { css: "./VideoPlaylist/VideoPlaylist.css", globalCss: "styles/global.css", jsx: "./VideoPlaylist/VideoPlaylist.jsx", stories: "./VideoPlaylist/VideoPlaylist.stories.jsx" }},
+      { name: "Carousel", paths: { css: "./Carousel/Carousel.css", globalCss: "styles/global.css", jsx: "./Carousel/Carousel.jsx", stories: "./Carousel/Carousel.stories.jsx" }},
+    ],
+    
+    "Interactive": [
+      { name: "ShoppingCart", paths: { css: "./ShoppingCart/ShoppingCart.css", globalCss: "styles/global.css", jsx: "./ShoppingCart/ShoppingCart.jsx", stories: "./ShoppingCart/ShoppingCart.stories.jsx" }},
+      { name: "UserProfile", paths: { css: "./UserProfile/UserProfile.css", globalCss: "styles/global.css", jsx: "./UserProfile/UserProfile.jsx", stories: "./UserProfile/UserProfile.stories.jsx" }},
+      { name: "Checkout", paths: { css: "./Checkout/Checkout.css", globalCss: "styles/global.css", jsx: "./Checkout/Checkout.jsx", stories: "./Checkout/Checkout.stories.jsx" }},
+    ],
+    
+    "MediaCollections": [
+      { name: "ImageGallery", paths: { css: "./ImageGallery/ImageGallery.css", globalCss: "styles/global.css", jsx: "./ImageGallery/ImageGallery.jsx", stories: "./ImageGallery/ImageGallery.stories.jsx" }},
+      { name: "VideoPlaylist", paths: { css: "./VideoPlaylist/VideoPlaylist.css", globalCss: "styles/global.css", jsx: "./VideoPlaylist/VideoPlaylist.jsx", stories: "./VideoPlaylist/VideoPlaylist.stories.jsx" }},
+      { name: "Carousel", paths: { css: "./Carousel/Carousel.css", globalCss: "styles/global.css", jsx: "./Carousel/Carousel.jsx", stories: "./Carousel/Carousel.stories.jsx" }},
+    ],
+
+    "Feedback": [
+      { name: "UserNotification", paths: { css: "./UserNotification/UserNotification.css", globalCss: "styles/global.css", jsx: "./UserNotification/UserNotification.jsx", stories: "./UserNotification/UserNotification.stories.jsx" }},
+      { name: "StatusBanner", paths: { css: "./StatusBanner/StatusBanner.css", globalCss: "styles/global.css", jsx: "./StatusBanner/StatusBanner.jsx", stories: "./StatusBanner/StatusBanner.stories.jsx" }},
+      { name: "AlertSystem", paths: { css: "./AlertSystem/AlertSystem.css", globalCss: "styles/global.css", jsx: "./AlertSystem/AlertSystem.jsx", stories: "./AlertSystem/AlertSystem.stories.jsx" }},
+    ]
+  }
+}

package/src/stories/Organisms/Profile/UserFriends/UserFriends.context.jsx

@@ -0,0 +1,15 @@
+
+import React, { createContext, useContext, useState } from 'react';
+
+const UserFriendsContext = createContext();
+
+export const UserFriendsProvider = ({ children }) => {
+  const [state, setState] = useState(null);
+  return (
+    <UserFriendsContext.Provider value={[state, setState]}>
+      {children}
+    </UserFriendsContext.Provider>
+  );
+};
+
+export const useUserFriends = () => useContext(UserFriendsContext);