this.gui 1.0.14 → 1.0.16

package/dist/whitey-db68723e.js

@@ -1,5 +0,0 @@
-const t = `html{font-size:19px}html,body{margin:auto;background:#fefefe;-webkit-font-smoothing:antialiased}body{font-family:Vollkorn,Palatino,Times;color:#333;line-height:1.4;text-align:justify}#write{max-width:960px;margin:0 auto 2em;line-height:1.53;padding-top:40px}@media only screen and (min-width: 1400px){#write{max-width:1100px}}@media print{html{font-size:13px}}#write>h1:first-child,h1{margin-top:1.6em;font-weight:400}h1{font-size:3em}h2{margin-top:2em;font-weight:400}h3{font-weight:400;font-style:italic;margin-top:3em}h1,h2,h3{text-align:center}h2:after{border-bottom:1px solid #2f2f2f;content:"";width:100px;display:block;margin:0 auto;height:1px}h1+h2,h2+h3{margin-top:.83em}p,.mathjax-block{margin-top:0;-webkit-hypens:auto;-moz-hypens:auto;-webkit-hyphens:auto;hyphens:auto}ul{list-style:square;padding-left:1.2em}ol{padding-left:1.2em}@media print{ol{padding-left:40px}}blockquote{margin-left:1em;padding-left:1em;border-left:1px solid #ddd}code,pre{font-family:Consolas,Menlo,Monaco,monospace,serif;font-size:.9em;background:white}.md-fences{margin-left:1em;padding-left:1em;border:1px solid #ddd;padding-bottom:8px;padding-top:6px;margin-bottom:1.5em}a{color:#2484c1;text-decoration:none}a:hover{text-decoration:underline}a img{border:none}h1 a,h1 a:hover{color:#333;text-decoration:none}hr{color:#ddd;height:1px;margin:2em 0;border-top:solid 1px #ddd;border-bottom:none;border-left:0;border-right:0}.ty-table-edit{background:#ededed;padding-top:4px}table{margin-bottom:1.333333rem}table th,table td{padding:8px;line-height:1.333333rem;vertical-align:top;border-top:1px solid #ddd}table th{font-weight:700}table thead th{vertical-align:bottom}table caption+thead tr:first-child th,table caption+thead tr:first-child td,table colgroup+thead tr:first-child th,table colgroup+thead tr:first-child td,table thead:first-child tr:first-child th,table thead:first-child tr:first-child td{border-top:0}table tbody+tbody{border-top:2px solid #ddd}.task-list{padding:0}.md-task-list-item{padding-left:1.6rem}.md-task-list-item>input:before{content:"√";display:inline-block;width:1.33333333rem;height:1.6rem;vertical-align:middle;text-align:center;color:#ddd;background-color:#fefefe}.md-task-list-item>input:checked:before,.md-task-list-item>input[checked]:before{color:inherit}.md-tag{color:inherit;font:inherit}#write pre.md-meta-block{min-height:35px;white-space:pre;background:#f8f8f8;border:0px;color:#999;width:100vw;max-width:calc(100% + 60px);margin-left:-30px;border-left:30px #f8f8f8 solid;border-right:30px #f8f8f8 solid;margin-bottom:2em;margin-top:-1.3333333333333rem;line-height:1.8em;font-size:.76em;padding:26px 1em 10px 0}.md-img-error.md-image>.md-meta{vertical-align:bottom}#write>h5.md-focus:before{top:2px}.md-toc{margin-top:40px}.md-toc-content{padding-bottom:20px}.outline-expander:before{color:inherit;font-size:14px;top:auto;content:"";font-family:FontAwesome}.outline-expander:hover:before,.outline-item-open>.outline-item>.outline-expander:before{content:""}#typora-source{font-family:Courier,monospace;color:#6a6a6a}.html-for-mac #typora-sidebar{box-shadow:0 6px 12px #0000002d}.cm-s-typora-default .cm-header,.cm-s-typora-default .cm-property,.CodeMirror.cm-s-typora-default div.CodeMirror-cursor{color:#428bca}.cm-s-typora-default .cm-atom,.cm-s-typora-default .cm-number{color:#777}.typora-node .file-list-item-parent-loc,.typora-node .file-list-item-time,.typora-node .file-list-item-summary{font-family:arial,sans-serif}.md-task-list-item>input{margin-left:-1.3em;margin-top:calc(1rem - 12px)}.md-mathjax-midline{background:#fafafa}.md-fences .code-tooltip{bottom:-2em!important}.dropdown-menu .divider{border-color:#e5e5e5}
-`;
-export {
-  t as default
-};

package/src/MDXEditor.jsx

@@ -1,32 +0,0 @@
-// this.GUI/src/MDXEditor.jsx
-import React, { useState } from 'react';
-import { MdxProvider } from './providers/MdxProvider';
-import { ThemeProvider } from './providers/ThemeProvider';
-import Editor from '@monaco-editor/react'; // Or any other MDX editor you prefer
-
-const MDXEditor = () => {
-  const [content, setContent] = useState('# Your MDX here');
-
-  return (
-    <ThemeProvider>
-      <MdxProvider>
-        <div style={{ display: 'flex', height: '100vh' }}>
-          <Editor
-            height="100%"
-            defaultLanguage="mdx"
-            value={content}
-            onChange={(value) => setContent(value || '')}
-          />
-          <div style={{ flex: 1, padding: '20px', overflow: 'auto' }}>
-            <MdxProvider>
-              {/* Live preview of the MDX content */}
-              {React.createElement(MdxProvider, {}, content)}
-            </MdxProvider>
-          </div>
-        </div>
-      </MdxProvider>
-    </ThemeProvider>
-  );
-};
-
-export default MDXEditor;

package/src/stories/Atoms/RangeInput/RangeInput.css

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

package/src/stories/Atoms/RangeInput/RangeInput.jsx

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

package/src/stories/Atoms/RangeInput/RangeInput.stories.jsx

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

package/src/stories/Components.md

@@ -1,189 +0,0 @@
-## **Explanation of Grouping:**
-
-​	•	**Atomic**: Smallest components that are not broken down further.
-​	•	**Molecules**: Simple combinations of atomic components that together form a small UI feature.
-​	•	**Organisms**: More complex, combining molecules and atomic components to create larger, more detailed features.
-​	•	**Layout**: Components related to structuring and organizing content across the page.
-​	•	**Templates**: Layouts of full pages, combining organisms and layout components.
-​	•	**Pages**: Complete and functional pages made up of templates and content.
-​	•	**Miscellaneous**: Utility components that don’t fit into the above categories but provide important functions, such as popovers, overlays, and media controls.
-
-# 1**. Atomic Components (Basic/Building Blocks)**
-Atomic components are the smallest building blocks and cannot be broken down further.
-
-​	•	**Text Components:**
-​	•	Heading (H1, H2, H3, etc.)
-​	•	Paragraph
-​	•	Label
-​	•	Caption
-
-​	•	**Interactive Components:**
-​	•	Button
-​	•	Link (Anchor)
-​	•	Icon (Clickable)
-​	•	Checkbox
-​	•	Radio Button
-​	•	Toggle/Switch
-​	•	Text Input
-​	•	Text Area
-​	•	Select/Dropdown
-​	•	Slider
-​	•	Range Input
-
-​	•	**Media Components:**
-​	•	Image
-​	•	Video
-​	•	Audio
-​	•	Icon
-
-​	•	**Visual Components:**
-​	•	Divider
-​	•	Spacer (For layout spacing)
-​	•	Tooltip
-​	•	Badge
-​	•	Tag/Chip
-
-​	•	**Feedback Components:**
-
-​	•	Loader/Spinner
-​	•	Progress Bar
-​	•	Alert
-​	•	Snackbar/Toast
-​	•	Tooltip
-
-
-
-# **2. Molecules (Combining Atomic Components)**
-Molecules are combinations of atomic components that work together to form a functional unit.
-​	•	**Form Elements:**
-​	•	Input Group (Input with Button)
-​	•	Input with Label
-​	•	Search Bar
-​	•	File Upload
-​	•	Form Field (Label + Input + Helper Text)
-
-​	•	**Buttons with Icons or Text:**
-​	•	Icon Button (Button with Icon)
-​	•	Button Group (Multiple Buttons together)
-
-​	•	**Media Molecules:**
-​	•	Image with Caption
-​	•	Video with Controls and Description
-​	•	Avatar + Name
-​	•	Audio Player
-
-​	•	**Feedback Molecules:**
-​	•	Notification (with Alert, Title, and Action)
-​	•	Modal (Header, Body, Footer)
-
-
-
-# **3. Organisms (Combining Molecules)**
-Organisms are larger and more complex UI components formed by grouping together multiple molecules or simple components.
-
-​	•	**Forms and Form Layouts:**
-​	•	Sign-In Form (Form fields + Submit Button)
-​	•	Registration Form (Fields for name, email, password + Terms Checkbox + Submit)
-​	•	Contact Form (Input fields + Message TextArea + Send Button)
-
-​	•	**Content Display:**
-​	•	Card (Image + Title + Description + Action Button)
-​	•	Media Card (Image/Video + Title + Text)
-​	•	List (Collection of items, e.g., a list of links or products)
-​	•	Accordion (Expandable sections with content inside)
-
-​	•	**Navigation:**
-
-​	•	Navbar (Logo + Links + Search + Menu Toggle)
-​	•	Sidebar (List of links for navigation)
-​	•	Breadcrumbs (Links showing hierarchy)
-
-​	•	**Media Collections:**
-
-​	•	Image Gallery (Grid of images with captions)
-​	•	Video Playlist (List of videos to watch)
-​	•	Carousel/Slider (Image or Media Slider)
-
-​	•	**Tables:**
-
-​	•	Data Table (Rows and Columns for displaying structured data)
-​	•	Pricing Table (Different pricing options)
-​	•	Comparison Table (Compares features/products)
-
-
-
-# **4. Layout Components (Page-Level Components)**
-
-Layout components are structural elements used to organize content on a page.
-​	•	**Grid/Section Layouts:**
-​	•	Grid (Arranges items in a structured layout with rows and columns)
-​	•	Section (A part of the page with a header, content, and actions)
-​	•	Flexbox Layout (Horizontally/Vertically aligned containers)
-
-​	•	**Navigation & Menus:**
-​	•	Header (Navbar + Search + Links)
-​	•	Footer (Copyright + Links + Social Media Icons)
-​	•	Dropdown Menu (Toggleable menu of options)
-​	•	Pagination (Buttons for navigating multiple pages)
-
-​	•	**Content Organization:**
-​	•	Sidebar (For navigation or additional info)
-​	•	Tabs (Switching between different content views)
-​	•	Accordion (Collapsible sections)
-
-​	•	**Hero Sections:**
-​	•	Hero Banner (Large heading, subheading, image, and call to action)
-​	•	Hero Image/Video Section (Introductory section at the top of a page)
-
-
-
-# **5. Templates (Combining Organisms and Layout Components)**
-Templates define the structure of entire pages by arranging multiple organisms and layout components.
-
-​	•	**Landing Pages:**
-​	•	Hero Section + Features List + Call-to-Action Button + Testimonials
-​	•	Product Landing Page (Hero, Features, Pricing, CTA)
-
-​	•	**Dashboard Layouts:**
-​	•	Sidebar + Top Navbar + Content Area
-​	•	Admin Dashboard (Graphs, Lists, Cards, Notifications)
-
-​	•	**E-Commerce Pages:**
-​	•	Product Page (Product Image, Description, Price, Add to Cart Button)
-​	•	Shopping Cart (List of items, quantity, total, checkout button)
-
-​	•	**Authentication Pages:**
-​	•	Sign-In Page (Form + Link to Register)
-​	•	Registration Page (Form + Link to Sign In)
-
-​	•	**Contact Us Page:**
-​	•	Form Section + Location Info + Social Media Links
-
-
-# **6. Pages (Final Composition of Templates)**
-Pages are final representations of the full UI, using templates to create entire sections with components.
-​	•	**Home Page**
-​	•	**About Us Page**
-​	•	**Contact Us Page**
-​	•	**User Profile Page**
-​	•	**Product Detail Page**
-​	•	**Checkout Page**
-​	•	**Blog/Article Page**
-​	•	**Admin Dashboard**
-​	•	**Search Results Page**
-
-# **7. Miscellaneous / Utility Components**
-These components often serve specialized purposes and improve user interaction.
-​	•	**Tooltips & Popovers:**
-​	•	Pop-up information when hovering over or clicking an element.
-​	•	**Overlays:**
-​	•	Modal/Popup Window
-​	•	Drawer (Slide-in navigation or settings panel)
-​	•	**Search Components:**
-​	•	Search Box (Input field with search button)
-​	•	Autocomplete/Typeahead
-​	•	**Media and Content Controls:**
-​	•	Audio/Video Controls (Play, Pause, Mute)
-​	•	Filters (Search filters, Tag filters)
-​	•	**Interactive Maps:**
-​	•	Map (With interactive markers, zoom, and pan)

package/src/stories/Layouts/Layout.js

@@ -1,28 +0,0 @@
-const Layout = {
-"Layout": {
-      "Grid": [
-        { name: "Grid", paths: { css: "./Grid/Grid.css", globalCss: "styles/global.css", jsx: "./Layout/Grid/Grid.jsx", stories: "src/stories/Layout/Grid/Grid.stories.jsx" }},
-      ],
-      "Section": [
-        { name: "Section", paths: { css: "./Section/Section.css", globalCss: "styles/global.css", jsx: "./Layout/Section/Section.jsx", stories: "src/stories/Layout/Section/Section.stories.jsx" }},
-      ],
-      "FlexboxLayout": [
-        { name: "Flexbox", paths: { css: "./Flexbox/Flexbox.css", globalCss: "styles/global.css", jsx: "./Layout/Flexbox/Flexbox.jsx", stories: "src/stories/Layout/Flexbox/Flexbox.stories.jsx" }},
-      ],
-      "NavigationAndMenus": [
-        { name: "Header", paths: { css: "./Header/Header.css", globalCss: "styles/global.css", jsx: "./Layout/Header/Header.jsx", stories: "src/stories/Layout/Header/Header.stories.jsx" }},
-        { name: "Footer", paths: { css: "./Footer/Footer.css", globalCss: "styles/global.css", jsx: "./Layout/Footer/Footer.jsx", stories: "src/stories/Layout/Footer/Footer.stories.jsx" }},
-        { name: "DropdownMenu", paths: { css: "./DropdownMenu/DropdownMenu.css", globalCss: "styles/global.css", jsx: "./Layout/DropdownMenu/DropdownMenu.jsx", stories: "src/stories/Layout/DropdownMenu/DropdownMenu.stories.jsx" }},
-        { name: "Pagination", paths: { css: "./Pagination/Pagination.css", globalCss: "styles/global.css", jsx: "./Layout/Pagination/Pagination.jsx", stories: "src/stories/Layout/Pagination/Pagination.stories.jsx" }},
-      ],
-      "ContentOrganization": [
-        { name: "Sidebar", paths: { css: "./Sidebar/Sidebar.css", globalCss: "styles/global.css", jsx: "./Layout/Sidebar/Sidebar.jsx", stories: "src/stories/Layout/Sidebar/Sidebar.stories.jsx" }},
-        { name: "Tabs", paths: { css: "./Tabs/Tabs.css", globalCss: "styles/global.css", jsx: "./Layout/Tabs/Tabs.jsx", stories: "src/stories/Layout/Tabs/Tabs.stories.jsx" }},
-        { name: "Accordion", paths: { css: "./Accordion/Accordion.css", globalCss: "styles/global.css", jsx: "./Layout/Accordion/Accordion.jsx", stories: "src/stories/Layout/Accordion/Accordion.stories.jsx" }},
-      ],
-      "HeroSections": [
-        { name: "HeroBanner", paths: { css: "./HeroBanner/HeroBanner.css", globalCss: "styles/global.css", jsx: "./Layout/HeroBanner/HeroBanner.jsx", stories: "src/stories/Layout/HeroBanner/HeroBanner.stories.jsx" }},
-        { name: "HeroImageVideo", paths: { css: "./HeroImageVideo/HeroImageVideo.css", globalCss: "styles/global.css", jsx: "./Layout/HeroImageVideo/HeroImageVideo.jsx", stories: "src/stories/Layout/HeroImageVideo/HeroImageVideo.stories.jsx" }},
-      ]
-    }
-    }

package/src/styles/Header.modules.css

@@ -1,32 +0,0 @@
-/* src/styles/Header.modules.css */
-
-.header {
-    background-color: #1976d2;
-    color: white;
-    padding: 1rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-family: Arial, sans-serif;
-  }
-  
-  .logo {
-    font-size: 1.5rem;
-    font-weight: bold;
-  }
-  
-  .nav {
-    display: flex;
-    gap: 1.5rem;
-  }
-  
-  .nav a {
-    color: white;
-    text-decoration: none;
-    font-size: 1rem;
-    transition: color 0.3s;
-  }
-  
-  .nav a:hover {
-    color: #ffd700;
-  }

package/src/styles/global.css

@@ -1,59 +0,0 @@
-/* src/styles/global.css */
-
-/* Import fonts */
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
-
-/* Apply global styles */
-body {
-  font-family: 'Roboto', sans-serif;
-  font-weight: 400;
-  line-height: 1.6;
-  color: #333;
-  margin: 0;
-  padding: 0;
-  background-color: #f9f9f9;
-}
-
-/* Headings */
-h1, h2, h3, h4, h5, h6 {
-  font-weight: 700;
-  margin-top: 1.5em;
-  margin-bottom: 0.5em;
-}
-
-/* Paragraphs */
-p {
-  margin-bottom: 1em;
-}
-
-/* Links */
-a {
-  color: #0070f3;
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-/* Code blocks */
-pre {
-  background-color: #f5f5f5;
-  padding: 1em;
-  overflow-x: auto;
-}
-
-code {
-  font-family: 'Courier New', Courier, monospace;
-}
-
-
-.light-theme {
-  --bg-color: #ffffff;
-  --text-color: #333333;
-}
-
-.dark-theme {
-  --bg-color: #181818;
-  --text-color: #eaeaea;
-}

package/src/themes/Themes.js

@@ -1,44 +0,0 @@
-// src/themes/Themes.js
-
-const lightTheme = {
-    buttonPadding: '12px 24px',
-    buttonBorderRadius: '8px',
-    buttonFontFamily: "'Roboto', sans-serif",
-    buttonFontSize: '16px',
-    buttonBoxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
-  
-    buttonPrimaryBgColor: '#00695c',
-    buttonPrimaryTextColor: '#ffffff',
-    buttonPrimaryBorderColor: '#004d40',
-    buttonPrimaryHoverBgColor: '#004d40',
-    buttonPrimaryHoverBoxShadow: '0 4px 6px rgba(0, 0, 0, 0.2)',
-  
-    buttonSecondaryBgColor: '#ffffff',
-    buttonSecondaryTextColor: '#00695c',
-    buttonSecondaryBorderColor: '#00695c',
-    buttonSecondaryHoverBgColor: '#f0f0f0',
-    buttonSecondaryHoverBoxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
-  };
-  
-  const darkTheme = {
-    // Similar structure with dark-themed values
-    buttonPadding: '12px 24px',
-    buttonBorderRadius: '8px',
-    buttonFontFamily: "'Roboto', sans-serif",
-    buttonFontSize: '16px',
-    buttonBoxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
-  
-    buttonPrimaryBgColor: '#1b5e20',
-    buttonPrimaryTextColor: '#e0e0e0',
-    buttonPrimaryBorderColor: '#004d40',
-    buttonPrimaryHoverBgColor: '#004d40',
-    buttonPrimaryHoverBoxShadow: '0 6px 10px rgba(0, 0, 0, 0.4)',
-  
-    buttonSecondaryBgColor: '#333',
-    buttonSecondaryTextColor: '#e0e0e0',
-    buttonSecondaryBorderColor: '#004d40',
-    buttonSecondaryHoverBgColor: '#444',
-    buttonSecondaryHoverBoxShadow: '0 6px 10px rgba(0, 0, 0, 0.4)',
-  };
-  
-  export const themes = { light: lightTheme, dark: darkTheme };

package/src/themes/dark.js

@@ -1,22 +0,0 @@
-//this.GUI/src/themes/dark.js
-import { extendTheme } from '@mui/joy/styles';
-
-const darkTheme = extendTheme({
-  colorSchemes: {
-    dark: {
-      palette: {
-        primary: {
-          solidBg: '#90caf9',
-        },
-        background: {
-          body: '#121212',
-        },
-      },
-    },
-  },
-  fontFamily: {
-    body: 'Arial, sans-serif',
-  },
-});
-
-export default darkTheme;

package/src/themes/light.js

@@ -1,22 +0,0 @@
-//this.GUI/src/themes/light.js
-import { extendTheme } from '@mui/joy/styles';
-
-const lightTheme = extendTheme({
-  colorSchemes: {
-    light: {
-      palette: {
-        primary: {
-          solidBg: '#1976d2',
-        },
-        background: {
-          body: '#ffffff',
-        },
-      },
-    },
-  },
-  fontFamily: {
-    body: 'Arial, sans-serif',
-  },
-});
-
-export default lightTheme;

package/src/themes/typ/Readme.md

@@ -1,4 +0,0 @@
-The built-in CSS will be replaced after update / reinstall, DO NOT MODIFY THEM.
-
-Refer https://support.typora.io/Add-Custom-CSS/ when you want to modify those CSS.
-Refer https://support.typora.io/About-Themes/ if you want to create / install new themes.