this.gui 1.0.18 → 1.1.0

package/src/stories/MDX.mdx

@@ -1,118 +0,0 @@
-# This.GUI
-**MDX** is a powerful format because it allows you to combine the simplicity of **Markdown** with the flexibility of **React components**. This means you can write documentation, content, or pages using normal Markdown syntax and sprinkle in **React components** wherever needed.
-
-Here’s a breakdown of how it works:
-
-### 1. **Markdown + JSX**
-MDX lets you write Markdown like usual, but when you need interactive or dynamic content, you can directly insert React components. It merges **Markdown** and **JSX** seamlessly in the same file.
-
-Example:
-
-```mdx
-# Welcome to My Site
-
-This is a simple introduction written in Markdown.
-
-## Here’s a custom button:
-
-<Button label="Click Me" />
-
-Here is more markdown text below the button!
-```
-
-In this example:
-- The heading `# Welcome to My Site` and the paragraph are standard **Markdown**.
-- The `<Button />` component is a **React component** that you import and use directly in the MDX file.
-
-### 2. **Passing Props to Components**
-You can pass props to React components just like you would in a React project. This allows you to create dynamic, reusable content.
-
-```mdx
-## Example with Props
-
-Here’s a button with dynamic props:
-
-<Button label="Submit" color="primary" />
-```
-
-### 3. **Reusability with Components**
-Since you can use any React component, you can integrate complex UI elements, such as forms, charts, or interactive widgets, into your content.
-
-For example:
-
-```mdx
-# User Statistics
-
-<Chart data={userData} />
-
-This chart is embedded directly into the documentation!
-```
-
-### 4. **How to Set It Up**
-To use **MDX** in your project, you’ll typically configure a tool like **Storybook**, **Next.js**, or a custom React setup.
-
-#### With **Storybook**:
-MDX is perfect for writing component documentation in **Storybook**. You can write documentation for your components and render the components directly in the docs.
-
-```mdx
-import { Button } from './Button';
-
-<Meta title="Button" component={Button} />
-
-# Button Component
-
-This is the `Button` component with different styles.
-
-<Canvas>
-  <Story name="Primary Button">
-    <Button label="Primary" color="primary" />
-  </Story>
-</Canvas>
-```
-
-#### With **Next.js**:
-Next.js makes it easy to integrate MDX for static pages or blogs.
-
-1. Install MDX support for Next.js:
-   ```bash
-   npm install @next/mdx @mdx-js/loader
-   ```
-
-2. Configure Next.js in `next.config.js`:
-   ```js
-   const withMDX = require('@next/mdx')({
-     extension: /\.mdx?$/
-   });
-   
-   module.exports = withMDX({
-     pageExtensions: ['js', 'jsx', 'md', 'mdx'],
-   });
-   ```
-
-3. Create an `.mdx` file and use React components inside:
-   ```mdx
-   # Hello World
-
-   <Button label="Click Me" />
-   ```
-
-#### With **Gatsby**:
-MDX can also be used in **Gatsby** to create rich blog posts or pages by embedding React components within Markdown.
-
-### 5. **Where to Use MDX**
-MDX is often used for:
-- **Technical documentation** (with live component previews).
-- **Component libraries** (Storybook).
-- **Blogs or content management systems** (Next.js/Gatsby).
-- **Interactive tutorials**.
-
-### Key Advantages of MDX:
-- **Markdown simplicity**: Use the same syntax you’re used to for writing docs or blog posts.
-- **React components**: Dynamically enhance content with interactivity, custom UI, or reusable components.
-- **Reusable content**: Leverage the power of React to make your content dynamic and interactive.
-
----
-
-MDX gives you the **best of both worlds**: you can write content in **Markdown**, and whenever you need dynamic or interactive elements, you simply drop in a React component. It’s ideal for use cases where you want content and code to live together seamlessly.
-
-Let me know if you'd like help with setting up or using MDX further!

package/src/stories/Miscellaneous/Miscellaneous.js

@@ -1,24 +0,0 @@
-const Miscellaneous = {
-"Miscellaneous": {
-    "TooltipsPopovers": [
-      { name: "Tooltip", paths: { css: "./Tooltip/Tooltip.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/Tooltip/Tooltip.jsx", stories: "./Tooltip/Tooltip.stories.jsx" }},
-      { name: "Popover", paths: { css: "./Popover/Popover.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/Popover/Popover.jsx", stories: "./Popover/Popover.stories.jsx" }},
-    ],
-    "Overlays": [
-      { name: "ModalWindow", paths: { css: "./ModalWindow/ModalWindow.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/ModalWindow/ModalWindow.jsx", stories: "./ModalWindow/ModalWindow.stories.jsx" }},
-      { name: "Drawer", paths: { css: "./Drawer/Drawer.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/Drawer/Drawer.jsx", stories: "./Drawer/Drawer.stories.jsx" }},
-    ],
-    "SearchComponents": [
-      { name: "SearchBox", paths: { css: "./SearchBox/SearchBox.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/SearchBox/SearchBox.jsx", stories: "./SearchBox/SearchBox.stories.jsx" }},
-      { name: "Autocomplete", paths: { css: "./Autocomplete/Autocomplete.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/Autocomplete/Autocomplete.jsx", stories: "./Autocomplete/Autocomplete.stories.jsx" }},
-    ],
-    "MediaAndContentControls": [
-      { name: "AudioControls", paths: { css: "./MediaAndContentControls/AudioControls.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/MediaAndContentControls/AudioControls.jsx", stories: "./MediaAndContentControls/AudioControls.stories.jsx" }},
-      { name: "VideoControls", paths: { css: "./MediaAndContentControls/VideoControls.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/MediaAndContentControls/VideoControls.jsx", stories: "./MediaAndContentControls/VideoControls.stories.jsx" }},
-      { name: "Filters", paths: { css: "./MediaAndContentControls/Filters.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/MediaAndContentControls/Filters.jsx", stories: "./MediaAndContentControls/Filters.stories.jsx" }},
-    ],
-    "InteractiveMaps": [
-      { name: "Map", paths: { css: "./InteractiveMaps/Map.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/InteractiveMaps/Map.jsx", stories: "./InteractiveMaps/Map.stories.jsx" }},
-    ]
-  }
-}

package/src/stories/Molecules/Accordion/Accordion.css

@@ -1,4 +0,0 @@
-/*this.GUI/src/stories/Molecules/Accordion/Accordion.css*/
-.accordion {
-  /* Default styles for Accordion */
-}

package/src/stories/Molecules/Accordion/Accordion.jsx

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

package/src/stories/Molecules/Accordion/Accordion.stories.jsx

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

package/src/stories/Molecules/AudioPlayer/AudioPlayer.css

@@ -1,97 +0,0 @@
-/*this.GUI/src/stories/Molecules/AudioPlayer/AudioPlayer.css*/
-.audio-player {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: rgba(245, 245, 245, 0.3); /* Subtle grey with low opacity */
-  padding: var(--spacing-md, 16px);
-  border-radius: var(--border-radius, 6px);
-  gap: var(--spacing-sm, 8px);
-  max-width: 400px;
-  border: 1px solid var(--border-color, #dddddd);
-  transition: background-color var(--transition-speed, 0.3s);
-}
-
-.audio-player__media img {
-  width: 100%;
-  border-radius: var(--border-radius, 6px);
-}
-
-.audio-player__track-name {
-  font-weight: bold;
-  font-size: var(--font-size-medium, 1.1rem);
-  margin-bottom: var(--spacing-xs, 8px);
-  color: var(--icon-color, #344b47);
-}
-
-.audio-player__controls {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm, 8px);
-}
-
-.audio-player__seek {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  width: 100%;
-  gap: var(--spacing-xs, 4px);
-}
-
-.audio-player__seek-slider {
-  width: 100%;
-  cursor: pointer;
-  appearance: none;
-  height: 4px;
-  background: var(--grey-friend-2, #96b1ac);
-  border-radius: 2px;
-  outline: none;
-  transition: background var(--transition-speed, 0.3s);
-}
-
-.audio-player__seek-slider::-webkit-slider-thumb {
-  appearance: none;
-  width: 12px;
-  height: 12px;
-  background: var(--icon-color, #344b47);
-  border-radius: 50%;
-  cursor: pointer;
-  margin-top: -4px;
-  transition: background var(--transition-speed, 0.3s);
-}
-
-.audio-player__time {
-  font-size: var(--font-size-small, 0.9em);
-  color: var(--icon-color, #344b47);
-}
-
-.audio-player__playlist {
-  width: 100%;
-  margin-top: var(--spacing-sm, 8px);
-  border-top: 1px solid var(--border-color);
-  padding-top: var(--spacing-xs, 8px);
-}
-
-.audio-player__track {
-  padding: var(--spacing-sm, 8px);
-  cursor: pointer;
-  transition: background-color var(--transition-speed, 0.3s);
-  text-align: center;
-}
-
-.audio-player__track:hover {
-  background-color: var(--primary-color-hover, #16655C);
-  color: var(--text-color-inverse, #ffffff);
-}
-
-.audio-player__track.active {
-  background-color: var(--primary-color, #1F877D);
-  color: var(--text-color-inverse, #ffffff);
-}
-
-/* Responsive Adjustments */
-@media (max-width: 768px) {
-  .audio-player {
-    max-width: 100%;
-  }
-}

package/src/stories/Molecules/AudioPlayer/AudioPlayer.jsx

@@ -1,244 +0,0 @@
-//this.GUI/src/stories/Molecules/AudioPlayer/AudioPlayer.jsx
-import React, { useRef, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { FaPlay, FaPause, FaVolumeUp, FaVolumeMute, FaStepForward, FaStepBackward } from 'react-icons/fa';
-import './AudioPlayer.css';
-
-export const AudioPlayer = ({
-  playlist,
-  autoPlay = false,
-  loop = false,
-  muted = false,
-  size = 'medium',
-  color = 'classy-color-1',
-  className = '',
-  style = {},
-  showMedia = true,
-  ...props
-}) => {
-  const audioRef = useRef(null);
-  const [isPlaying, setIsPlaying] = useState(autoPlay);
-  const [isMuted, setIsMuted] = useState(muted);
-  const [volume, setVolume] = useState(muted ? 0 : 1);
-  const [currentTime, setCurrentTime] = useState(0);
-  const [duration, setDuration] = useState(0);
-  const [currentTrack, setCurrentTrack] = useState(playlist[0]);
-  const [currentTrackIndex, setCurrentTrackIndex] = useState(0);
-
-  useEffect(() => {
-    const audio = audioRef.current;
-    if (audio) {
-      audio.volume = volume;
-      audio.muted = isMuted;
-      if (autoPlay) {
-        audio.play().catch(() => setIsPlaying(false));
-      }
-    }
-  }, [volume, isMuted, autoPlay, currentTrack]);
-
-  const togglePlayPause = () => {
-    const audio = audioRef.current;
-    if (!audio) return;
-
-    if (isPlaying) {
-      audio.pause();
-    } else {
-      audio.play().catch(() => setIsPlaying(false));
-    }
-    setIsPlaying(!isPlaying);
-  };
-
-  const handleTimeUpdate = () => {
-    const audio = audioRef.current;
-    if (audio) {
-      setCurrentTime(audio.currentTime);
-    }
-  };
-
-  const handleLoadedMetadata = () => {
-    const audio = audioRef.current;
-    if (audio) {
-      setDuration(audio.duration);
-    }
-  };
-
-  const handleVolumeChange = (e) => {
-    const newVolume = parseFloat(e.target.value);
-    setVolume(newVolume);
-    setIsMuted(newVolume === 0);
-  };
-
-  const toggleMute = () => {
-    setIsMuted(!isMuted);
-    setVolume(!isMuted ? 0 : 1);
-  };
-
-  const handleSeekChange = (e) => {
-    const seekTime = parseFloat(e.target.value);
-    const audio = audioRef.current;
-    if (audio) {
-      audio.currentTime = seekTime;
-      setCurrentTime(seekTime);
-    }
-  };
-
-  const formatTime = (time) => {
-    if (isNaN(time)) return '00:00';
-    const minutes = Math.floor(time / 60);
-    const seconds = Math.floor(time % 60);
-    const paddedSeconds = seconds < 10 ? `0${seconds}` : seconds;
-    return `${minutes}:${paddedSeconds}`;
-  };
-
-  const nextTrack = () => {
-    const nextIndex = (currentTrackIndex + 1) % playlist.length;
-    setCurrentTrackIndex(nextIndex);
-    setCurrentTrack(playlist[nextIndex]);
-  };
-
-  const prevTrack = () => {
-    const prevIndex = (currentTrackIndex - 1 + playlist.length) % playlist.length;
-    setCurrentTrackIndex(prevIndex);
-    setCurrentTrack(playlist[prevIndex]);
-  };
-
-  const handleTrackClick = (track, index) => {
-    setCurrentTrack(track);
-    setCurrentTrackIndex(index);
-    setIsPlaying(false); // Reset play state to allow clicking a new track.
-  };
-
-  const variantClass = `audio-player--${size}`;
-  const colorClass = `audio-player--${color}`;
-  const combinedClassName = `audio-player ${variantClass} ${colorClass} ${className}`.trim();
-
-  return (
-    <div className={combinedClassName} style={style} {...props}>
-      {showMedia && currentTrack.image && (
-        <div className="audio-player__media">
-          <img src={currentTrack.image} alt={currentTrack.title} />
-        </div>
-      )}
-
-      {/* Display Track Name Above Timeline */}
-      <div className="audio-player__track-name">{currentTrack.title}</div>
-
-      <div className="audio-player__controls">
-        <audio
-          ref={audioRef}
-          src={currentTrack.src}
-          loop={loop}
-          onTimeUpdate={handleTimeUpdate}
-          onLoadedMetadata={handleLoadedMetadata}
-          onEnded={nextTrack}
-        >
-          Your browser does not support the audio element.
-        </audio>
-        <button
-          className="audio-player__prev"
-          onClick={prevTrack}
-          aria-label="Previous Track"
-        >
-          <FaStepBackward />
-        </button>
-        <button
-          className="audio-player__play-pause"
-          onClick={togglePlayPause}
-          aria-label={isPlaying ? 'Pause' : 'Play'}
-        >
-          {isPlaying ? <FaPause /> : <FaPlay />}
-        </button>
-        <button
-          className="audio-player__next"
-          onClick={nextTrack}
-          aria-label="Next Track"
-        >
-          <FaStepForward />
-        </button>
-      </div>
-
-      {/* Timeline with Seek and Time */}
-      <div className="audio-player__seek">
-        <input
-          type="range"
-          className="audio-player__seek-slider"
-          min="0"
-          max={duration}
-          step="0.1"
-          value={currentTime}
-          onChange={handleSeekChange}
-          aria-label="Seek Slider"
-        />
-        <div className="audio-player__time">{formatTime(currentTime)} / {formatTime(duration)}</div>
-      </div>
-
-      <div className="audio-player__volume-container">
-        <button
-          className="audio-player__mute"
-          onClick={toggleMute}
-          aria-label={isMuted ? 'Unmute' : 'Mute'}
-        >
-          {isMuted ? <FaVolumeMute /> : <FaVolumeUp />}
-        </button>
-        <input
-          type="range"
-          className="audio-player__volume-slider"
-          min="0"
-          max="1"
-          step="0.01"
-          value={isMuted ? 0 : volume}
-          onChange={handleVolumeChange}
-          aria-label="Volume Slider"
-        />
-      </div>
-
-      {/* Playlist with Border */}
-      <div className="audio-player__playlist">
-        <ul>
-          {playlist.map((track, index) => (
-            <li
-              key={index}
-              className={`audio-player__track ${index === currentTrackIndex ? 'active' : ''}`}
-              onClick={() => handleTrackClick(track, index)}
-            >
-              {track.title}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </div>
-  );
-};
-
-AudioPlayer.propTypes = {
-  playlist: PropTypes.arrayOf(
-    PropTypes.shape({
-      src: PropTypes.string.isRequired,
-      title: PropTypes.string.isRequired,
-      image: PropTypes.string, // Optional album cover or media
-    })
-  ).isRequired,
-  autoPlay: PropTypes.bool,
-  loop: PropTypes.bool,
-  muted: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'medium']),
-  color: PropTypes.oneOf([
-    'classy-color-1', 'classy-color-2', 'classy-color-3', 'classy-color-4', 'classy-color-5',
-    'small-switch-color-1', 'small-switch-color-2',
-    'natural-color-1', 'natural-color-2', 'natural-color-3',
-    'grey-friend-1', 'grey-friend-2',
-    'shade-1', 'shade-2', 'shade-3', 'shade-4',
-  ]),
-  className: PropTypes.string,
-  style: PropTypes.object,
-  showMedia: PropTypes.bool,
-};
-
-AudioPlayer.defaultProps = {
-  autoPlay: false,
-  loop: false,
-  muted: false,
-  size: 'medium',
-  color: 'classy-color-1',
-  showMedia: true,
-};

package/src/stories/Molecules/AudioPlayer/AudioPlayer.stories.jsx

@@ -1,55 +0,0 @@
-//this.GUI/src/stories/Molecules/AudioPlayer/AudioPlayer.stories.jsx
-import React from 'react';
-import { AudioPlayer } from './AudioPlayer';
-import './AudioPlayer.css';
-
-export default {
-  title: 'Molecules/Media/AudioPlayer',
-  component: AudioPlayer,
-  argTypes: {
-    autoPlay: { control: 'boolean', defaultValue: false },
-    loop: { control: 'boolean', defaultValue: false },
-    muted: { control: 'boolean', defaultValue: false },
-    size: {
-      control: 'select',
-      options: ['small', 'medium'],
-      defaultValue: 'medium',
-    },
-    color: {
-      control: 'select',
-      options: [
-        'classy-color-1', 'classy-color-2', 'classy-color-3', 'classy-color-4', 'classy-color-5',
-        'small-switch-color-1', 'small-switch-color-2',
-        'natural-color-1', 'natural-color-2', 'natural-color-3',
-        'grey-friend-1', 'grey-friend-2',
-        'shade-1', 'shade-2', 'shade-3', 'shade-4',
-      ],
-      defaultValue: 'classy-color-1',
-    },
-    showMedia: { control: 'boolean', defaultValue: true },
-  },
-};
-
-const playlist = [
-  {
-    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
-    title: 'Track 1',
-    image: 'https://via.placeholder.com/150?text=Track+1',
-  },
-  {
-    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
-    title: 'Track 2',
-    image: 'https://via.placeholder.com/150?text=Track+2',
-  },
-  {
-    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3',
-    title: 'Track 3',
-    image: 'https://via.placeholder.com/150?text=Track+3',
-  },
-];
-
-export const DefaultAudioPlayer = () => <AudioPlayer playlist={playlist} />;
-export const SmallAudioPlayer = () => <AudioPlayer size="small" playlist={playlist} />;
-export const AutoplayAudioPlayer = () => <AudioPlayer autoPlay playlist={playlist} />;
-export const AudioPlayerWithoutMedia = () => <AudioPlayer showMedia={false} playlist={playlist} />;
-export const LoopingAudioPlayer = () => <AudioPlayer loop playlist={playlist} />;