this.gui 1.0.12 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "this.gui",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "This Graphic User Interface.",
   "main": "dist/this-gui.umd.js",
   "module": "dist/this-gui.es.js",
@@ -59,6 +59,9 @@
     "vite": "^4.5.3"
   },
   "files": [
-    "dist"
+    "dist",
+    "src", 
+    "README.md",
+    "package.json"
   ]
 }

package/src/App.jsx

@@ -0,0 +1,31 @@
+// src/App.jsx
+import React from 'react';
+import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
+import { ThemeProvider } from './themes/ThemeProvider'; // Import ThemeProvider
+
+const App = () => {
+  return (
+    <ThemeProvider>
+      <Router>
+        <Switch>
+          <Route exact path="/">
+            <div>
+              <h1>Main App</h1>
+              <Link to="/" style={{ marginRight: '20px' }}>Home</Link>
+              <Link to="/storybook" style={{ marginRight: '20px' }}>Storybook</Link>
+            </div>
+          </Route>
+          <Route path="/storybook">
+            <iframe
+              src="http://localhost:6006" // Adjust the URL based on your setup
+              style={{ width: '100%', height: '100vh', border: 'none' }}
+              title="Storybook"
+            ></iframe>
+          </Route>
+        </Switch>
+      </Router>
+    </ThemeProvider>
+  );
+};
+
+export default App;

package/src/MDXEditor.jsx

@@ -0,0 +1,32 @@
+// 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/MdxProvider.jsx

@@ -0,0 +1,20 @@
+//this.GUI/src/MdxProvider.jsx
+import React from 'react';
+import { MDXProvider } from '@mdx-js/react';
+
+// Define custom components without inline styles
+const components = {
+  h1: (props) => <h1 className="mdx-h1" {...props} />,  // Let the theme handle the styles
+  h2: (props) => <h2 className="mdx-h2" {...props} />,
+  p: (props) => <p className="mdx-p" {...props} />,
+  a: (props) => <a className="mdx-link" {...props} />,
+  code: (props) => <code className="mdx-code" {...props} />,
+  pre: (props) => <pre className="mdx-pre" {...props} />,
+  // Add more custom components as needed, without inline styles
+};
+
+const MdxProvider = ({ children }) => {
+  return <MDXProvider components={components}>{children}</MDXProvider>;
+};
+
+export default MdxProvider;

package/src/Theme.jsx

@@ -0,0 +1,28 @@
+// this.GUI/src/Theme.jsx
+import React, { useState, useEffect } from 'react';
+import { CssVarsProvider } from '@mui/joy/styles';  // Import MUI Joy's CssVarsProvider
+import lightTheme from './themes/light';  // Import light theme
+import darkTheme from './themes/dark';    // Import dark theme
+
+const Theme = ({ children }) => {
+  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
+
+  useEffect(() => {
+    localStorage.setItem('theme', theme);  // Persist theme preference in localStorage
+  }, [theme]);
+
+  const currentTheme = theme === 'dark' ? darkTheme : lightTheme;
+
+  return (
+    <CssVarsProvider theme={currentTheme}> {/* Wrap with the correct theme */}
+      <div>
+        <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
+          Toggle Theme
+        </button>
+        {children}
+      </div>
+    </CssVarsProvider>
+  );
+};
+
+export default Theme;

package/src/components/CodeBlock.jsx

@@ -0,0 +1,22 @@
+// src/components/CodeBlock.jsx
+
+import React from 'react';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+// Import the language(s) you need
+import javascript from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
+// Import a syntax highlighting style
+import { atomOneLight } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+
+SyntaxHighlighter.registerLanguage('javascript', javascript);
+
+const CodeBlock = ({ className, children }) => {
+  const language = className ? className.replace('language-', '') : 'javascript';
+
+  return (
+    <SyntaxHighlighter language={language} style={atomOneLight}>
+      {children}
+    </SyntaxHighlighter>
+  );
+};
+
+export default CodeBlock;

package/src/components/ComponentFactory.jsx

@@ -0,0 +1,36 @@
+// src/components/ComponentFactory.jsx
+import React from 'react';
+import GUI from '../../index';
+
+const ComponentFactory = ({ category, subcategory, componentName, ...props }) => {
+  const Category = GUI[category];
+
+  if (!Category) {
+    console.error(`Category "${category}" not found.`);
+    return null;
+  }
+
+  let Component;
+
+  if (subcategory) {
+    const Subcategory = Category[subcategory];
+
+    if (!Subcategory) {
+      console.error(`Subcategory "${subcategory}" not found in category "${category}".`);
+      return null;
+    }
+
+    Component = Subcategory[componentName];
+  } else {
+    Component = Category[componentName];
+  }
+
+  if (!Component) {
+    console.error(`Component "${componentName}" not found in category "${category}"${subcategory ? ` and subcategory "${subcategory}"` : ''}.`);
+    return null;
+  }
+
+  return <Component {...props} />;
+};
+
+export default ComponentFactory;

package/src/components/ComponentRegistry.js

@@ -0,0 +1,21 @@
+// src/components/ComponentRegistry.js
+import { Button } from '../stories/_Atomic/Button/Button';
+import { Input } from '../stories/_Atomic/Input/Input';
+// Import the Navbar component
+import { Navbar } from '../stories/_Molecules/Navbar/Navbar';
+// ... import other components
+
+const ComponentRegistry = {
+  _Atomic: {
+    Button,
+    Input,
+    // ... other atomic components
+  },
+  _Molecules: {
+    Navbar,
+    // ... other molecule components
+  },
+  // ... other categories
+};
+
+export default ComponentRegistry;

package/src/index.mdx

@@ -0,0 +1,154 @@
+import GUI from '../index';
+
+<GUI.Molecules.Navbar
+  links={[
+    { url: '/', label: 'Home', isActive: true },
+    { url: '/about', label: 'About', isActive: false },
+    { url: 'http://localhost:6006/', label: 'Storybook', isActive: false },
+    { url: '/contact', label: 'Contact', isActive: false },
+  ]}
+  logo={
+    <img src="https://suign.github.io/assets/imgs/neurons_me_logo.png" alt="Logo" style={{ height: '40px' }} />
+  }
+  userControls={
+    <GUI.Atoms.Button>Click</GUI.Atoms.Button>
+  }
+/>
+
+# Welcome to THIS.GUI
+
+## Understanding MDX (Markdown + JSX)
+This page is written in **MDX**, a powerful format that allows you to write Markdown while embedding JSX components. With MDX, you can write documentation or content using Markdown's simplicity and still interact with React components directly within the same file.
+For example, in this document, we can use regular Markdown syntax for headings, paragraphs, and links, but we also import and use components from our `this.GUI` library.
+
+### Key Concepts of MDX
+- **Markdown for Content**: Regular text, links, images, and other static content can be written using Markdown.
+- **JSX for Interactivity**: You can directly use any JSX component (like React components) within the MDX file. This makes it ideal for documentation or websites that need to showcase and render components dynamically.
+
+## Example: Navbar Component in MDX
+In the following example, we use the `Navbar` component from the `this.GUI` library. This demonstrates how we can integrate interactive elements within a Markdown-style document.
+
+
+
+```mdx
+<GUI.Molecules.Navbar
+  links={[
+    { url: '/', label: 'Home', isActive: true },
+    { url: '/about', label: 'About', isActive: false },
+    { url: 'http://localhost:6006/', label: 'Storybook', isActive: false },
+    { url: '/contact', label: 'Contact', isActive: false },
+  ]}
+  logo={
+   <img src="https://suign.github.io/assets/imgs/neurons_me_logo.png" alt="Logo" style={{ height: '40px' }} />
+
+  }
+  userControls={
+   <GUI.Atoms.Button>Click</GUI.Atoms.Button>
+  }
+/>
+```
+
+This renders a live `Navbar` component, with links for navigation, including one to our Storybook instance.
+
+---
+
+### How This Page is Built with MDX
+1. **Markdown Elements**: 
+    - This heading (`# Welcome to THIS.GUI`) and paragraphs you're reading are written using Markdown.
+    - Links like [Click here](https://example.com) are also written in Markdown syntax.
+
+2. **JSX Elements**: 
+    - Below, we render interactive components from `this.GUI`, such as buttons and the navbar, using JSX.
+
+---
+
+## Using MDX to Showcase Components
+MDX allows you to mix documentation with interactive elements. For instance, let's explore different types of buttons you can use with `this.GUI`. These buttons will be rendered dynamically, and their usage will be demonstrated.
+
+### **Atomic Components Example: Buttons**
+Below are different variations of the Button component available in `this.GUI`, along with the code examples for each.
+
+<div>
+  {/* Primary Button */}
+  <GUI.Atoms.Button primary size="medium">Primary Button</GUI.Atoms.Button>
+
+  ```jsx
+  <GUI.Atoms.Button primary size="medium">Primary Button</GUI.Atoms.Button>
+  ```
+
+  {/* Secondary Button */}
+  <GUI.Atoms.Button size="medium">Secondary Button</GUI.Atoms.Button>
+
+  ```jsx
+  <GUI.Atoms.Button size="medium">Secondary Button</GUI.Atoms.Button>
+  ```
+
+  {/* No Border Button */}
+  <GUI.Atoms.Button noBorder size="medium">No Border Button</GUI.Atoms.Button>
+
+  ```jsx
+  <GUI.Atoms.Button noBorder size="medium">No Border Button</GUI.Atoms.Button>
+  ```
+
+  {/* Small Primary Button */}
+  <GUI.Atoms.Button primary size="small">Small Primary Button</GUI.Atoms.Button>
+
+  ```jsx
+  <GUI.Atoms.Button primary size="small">Small Primary Button</GUI.Atoms.Button>
+  ```
+
+  {/* Large No Border Button */}
+  <GUI.Atoms.Button noBorder size="large">Large No Border Button</GUI.Atoms.Button>
+
+  ```jsx
+  <GUI.Atoms.Button noBorder size="large">Large No Border Button</GUI.Atoms.Button>
+  ```
+
+  {/* Custom Button Example */}
+  <GUI.Atoms.Button
+    primary
+    size="large"
+    primaryBgColor="#007bff"
+    primaryTextColor="#ffffff"
+    primaryHoverBgColor="#0056b3"
+    padding="12px 24px"
+  >
+    Custom Styled Button
+  </GUI.Atoms.Button>
+
+  ```jsx
+  <GUI.Atoms.Button
+    primary
+    size="large"
+    primaryBgColor="#007bff"
+    primaryTextColor="#ffffff"
+    primaryHoverBgColor="#0056b3"
+    padding="12px 24px"
+  >
+    Custom Styled Button
+  </GUI.Atoms.Button>
+  ```
+</div>
+
+---
+
+### How to Use MDX in Your Own Projects
+You can use MDX in your own documentation to:
+
+- Write clear and simple documentation using Markdown.
+- Embed interactive React components to showcase examples or provide live demos.
+- Combine content and functionality into one coherent file.
+
+MDX files are ideal for documentation, blog posts, or any content-heavy web pages where you also want to include interactive elements. By leveraging MDX, you're able to write once and render rich, dynamic content with ease.
+
+---
+
+This example showcases how MDX combines the best of both Markdown and JSX, giving you the flexibility to create interactive, component-rich documentation.
+```
+
+### Key Changes:
+- I've added an explanation of **MDX** and how it combines Markdown and JSX.
+- Each button example is now enclosed in a code block to show how MDX renders both the live component and its JSX code.
+- The file explains the concepts of MDX, making it clearer for developers and users to understand how this page was created. 
+
+This should provide a solid foundation for users exploring your project and help them understand how MDX can be used effectively.

package/src/main.jsx

@@ -0,0 +1,18 @@
+//this.GUI/src/mains.jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import MDXContent from './index.mdx';
+import MdxProvider from './MdxProvider';  
+import { ThemeProvider } from './themes/ThemeProvider';  // Import ThemeProvider
+import './styles/global.css'; // Import the global CSS
+
+ReactDOM.render(
+  <React.StrictMode>
+    <ThemeProvider>
+      <MdxProvider>
+        <MDXContent />
+      </MdxProvider>
+    </ThemeProvider>
+  </React.StrictMode>,
+  document.getElementById('root')
+);

package/src/scripts/generateComponents.js

@@ -0,0 +1,166 @@
+const components = {
+    "Atomic": {
+      "Text": ["Heading", "Paragraph", "Label", "Caption"],
+      "Interactive": [
+        "Button", 
+        "Link", 
+        "Icon", 
+        "Checkbox", 
+        "RadioButton", 
+        "Toggle", 
+        "TextInput", 
+        "TextArea", 
+        "Select", 
+        "Slider", 
+        "RangeInput"
+      ],
+      "Media": ["Image", "Video", "Audio", "Icon"],
+      "Visual": [
+        "Divider", 
+        "Spacer", 
+        "Tooltip", 
+        "Badge", 
+        "Tag"
+      ],
+      "Feedback": [
+        "Loader", 
+        "Spinner", 
+        "ProgressBar", 
+        "Alert", 
+        "Snackbar"
+      ]
+    },
+    
+    "Molecules": {
+      "FormElements": [
+        "InputGroup", 
+        "InputWithLabel", 
+        "SearchBar", 
+        "FileUpload", 
+        "FormField"
+      ],
+      "ButtonsWithIcons": [
+        "IconButton", 
+        "ButtonGroup"
+      ],
+      "MediaMolecules": [
+        "ImageWithCaption", 
+        "VideoWithDescription", 
+        "AvatarWithName", 
+        "AudioPlayer"
+      ],
+      "FeedbackMolecules": [
+        "Notification", 
+        "Modal"
+      ]
+    },
+    
+    "Organisms": {
+      "Forms": [
+        "SignInForm", 
+        "RegistrationForm", 
+        "ContactForm"
+      ],
+      "ContentDisplay": [
+        "Card", 
+        "MediaCard", 
+        "List", 
+        "Accordion"
+      ],
+      "Navigation": [
+        "Navbar", 
+        "Sidebar", 
+        "Breadcrumbs"
+      ],
+      "MediaCollections": [
+        "ImageGallery", 
+        "VideoPlaylist", 
+        "Carousel"
+      ],
+      "Tables": [
+        "DataTable", 
+        "PricingTable", 
+        "ComparisonTable"
+      ]
+    },
+  
+    "Layout": {
+      "Grid": ["Grid"],
+      "Section": ["Section"],
+      "FlexboxLayout": ["Flexbox"],
+      "NavigationAndMenus": [
+        "Header", 
+        "Footer", 
+        "DropdownMenu", 
+        "Pagination"
+      ],
+      "ContentOrganization": [
+        "Sidebar", 
+        "Tabs", 
+        "Accordion"
+      ],
+      "HeroSections": [
+        "HeroBanner", 
+        "HeroImageVideo"
+      ]
+    },
+  
+    "Templates": {
+      "LandingPages": [
+        "HeroSection", 
+        "FeaturesList", 
+        "CallToAction", 
+        "Testimonials"
+      ],
+      "DashboardLayouts": [
+        "AdminDashboard", 
+        "SidebarTopNav"
+      ],
+      "ECommercePages": [
+        "ProductPage", 
+        "ShoppingCart"
+      ],
+      "AuthenticationPages": [
+        "SignInPage", 
+        "RegistrationPage"
+      ],
+      "ContactUsPages": [
+        "FormSection", 
+        "LocationInfo", 
+        "SocialMediaLinks"
+      ]
+    },
+    
+    "Pages": {
+      "HomePage": ["HomePage"],
+      "AboutUsPage": ["AboutUsPage"],
+      "ContactUsPage": ["ContactUsPage"],
+      "UserProfilePage": ["UserProfilePage"],
+      "ProductDetailPage": ["ProductDetailPage"],
+      "CheckoutPage": ["CheckoutPage"],
+      "BlogPage": ["BlogPage"],
+      "AdminDashboard": ["AdminDashboard"],
+      "SearchResultsPage": ["SearchResultsPage"]
+    },
+    
+    "Miscellaneous": {
+      "TooltipsPopovers": [
+        "Tooltip", 
+        "Popover"
+      ],
+      "Overlays": [
+        "ModalWindow", 
+        "Drawer"
+      ],
+      "SearchComponents": [
+        "SearchBox", 
+        "Autocomplete"
+      ],
+      "MediaAndContentControls": [
+        "AudioControls", 
+        "VideoControls", 
+        "Filters"
+      ],
+      "InteractiveMaps": ["Map"]
+    }
+  };

package/src/scripts/logASCIIArt.js

@@ -0,0 +1,12 @@
+// src/scripts/logASCIIArt.js
+import figlet from 'figlet';
+
+function logASCIIArt() {
+  console.log(figlet.textSync('This.GUI', {
+    font: 'Big', // Choose a style like 'Big', 'Standard', etc.
+    horizontalLayout: 'default',
+    verticalLayout: 'default'
+  }));
+}
+
+logASCIIArt(); // This calls the function when the script is executed

package/src/scripts/postinstall.js

@@ -0,0 +1,64 @@
+// this.GUI/scripts/postinstall.js
+import { mkdir, writeFile, access } from 'fs/promises';
+import { join } from 'path';
+import { fileURLToPath } from 'url';
+
+// Get the current directory path
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = join(__filename, '..', '..');
+
+// Define paths for directories
+const guiDir = join(__dirname, '..', 'GUI');
+const componentsDir = join(guiDir, 'components');
+const mdxDir = join(guiDir, 'mdx');
+const stylesDir = join(guiDir, 'styles');
+
+// Helper function to create directories
+async function createDir(dirPath) {
+  try {
+    await access(dirPath);
+    console.log(`Directory already exists: ${dirPath}`);
+  } catch {
+    await mkdir(dirPath, { recursive: true });
+    console.log(`Created: ${dirPath}`);
+  }
+}
+
+// Helper function to create initial files if they don't exist
+async function initializeFiles() {
+  const mdxWelcomeFile = join(mdxDir, 'Welcome.mdx');
+  const stylesFile = join(stylesDir, 'global.css');
+
+  try {
+    await access(mdxWelcomeFile);
+    console.log(`File already exists: ${mdxWelcomeFile}`);
+  } catch {
+    await writeFile(
+      mdxWelcomeFile,
+      `# Welcome to Your Custom GUI\n\nThis is your first MDX file. Edit it to start building your pages!`
+    );
+    console.log(`Created: ${mdxWelcomeFile}`);
+  }
+
+  try {
+    await access(stylesFile);
+    console.log(`File already exists: ${stylesFile}`);
+  } catch {
+    await writeFile(
+      stylesFile,
+      `/* Add your custom styles here */\nbody { font-family: 'Roboto', sans-serif; }`
+    );
+    console.log(`Created: ${stylesFile}`);
+  }
+}
+
+// Create the directory structure and initialize files
+(async () => {
+  await createDir(guiDir);
+  await createDir(componentsDir);
+  await createDir(mdxDir);
+  await createDir(stylesDir);
+  await initializeFiles();
+
+  console.log('this.GUI setup complete!');
+})();