this.gui 0.0.55 → 0.0.56

package/README.md

@@ -1,99 +1,40 @@
 # THIS.GUI
-
 -----------
-
-### [Project Status : Experimental and Under Development, Subject to Major Changes]
-
-The module is in active development, and as such, it is subject to significant changes as we refine our approach and methodologies to best support our goals.
-
-visit: https://neurons.me to learn more.
-
-----------
-
 # Installation
-
 Install `this.gui` via **npm**:
-
 ```shell
 npm install this.gui
 ```
+The goal is to automate the UI generation process so users only pass data or configurations, and this.gui handles the rest.
 
-Streamlining and automating the GUI aspect of your development, allowing you to focus on the code while `this.gui` takes care of the user interface. By integrating `this.gui` with your development workflow, it can dynamically generate and adapt user interfaces based on your code, context, and environment. Here's how `this.gui` could serve in various capacities:
-
-1. **Automated UI Generation:**
-   - `this.gui` Generate basic HTML structures for different parts of your websites or applications based on predefined templates or rules.** For instance, if you're working on a data display section, `this.gui` could provide a standard, yet customizable, table or chart layout based on the data type and context.
-2. **Contextual and Environmental Adaptation:**
-   - Detect the environment or context in which it's operating (e.g., mobile, desktop, specific user preferences) and adjust the UI accordingly. **For example,** switch to a mobile-friendly layout when accessed from a phone or alter themes and elements based on user settings or preferences.
-3. **Integration with Development Tools:**
-   - By incorporating `this.gui` into your development ecosystem, including neurons.networks and mlearning tools, you can create a cohesive workflow where GUI elements evolve based on insights and data from these tools. For example, if mlearning tools identify a pattern or preference in user interaction, `this.gui` could adjust the UI elements or layouts to better suit those patterns.
-4. **Code-Centric Workflow:**
-   - With `this.gui`, your primary focus remains on the backend code or logic, while the system handles the frontend. You can specify UI requirements or structures in a simple, abstracted manner, and `this.gui` would interpret these to produce concrete, functional UIs.
-5. **Learning and Optimization:**
-   - Over time, `this.gui` could learn from user interactions, feedback, and other data sources to optimize UI elements for better performance, user engagement, or aesthetics. This learning process could be automated within your development and deployment pipeline, ensuring continuous improvement without manual intervention.
-6. **Rapid Prototyping and Iteration:**
-   - `this.gui` could facilitate rapid prototyping and iteration by quickly generating interfaces that can be tested and refined in real-time. This agility would allow for faster development cycles and the ability to experiment with different UI approaches without significant overhead.
+	1.	The user of this.gui doesn’t need to write React components themselves. They just pass configurations or data structures, and this.gui generates the UI dynamically.
+	2.	React is still required in the user’s project because the UI components provided by this.gui are React components that need to be rendered by React.
 
-In essence, `this.gui` would act as an intelligent, dynamic layer that abstracts away much of the manual work involved in UI development, allowing you to stay focused on the core logic and functionality while still benefiting from a responsive, user-friendly interface.
-
-### Neural Network Integration:
-
-- **Data Processing and Learning**: Both **All.This DataStructures** serve as inputs to neural network models that analyze, learn, and potentially transform these structures. The neural networks could identify inefficiencies, user experience issues, or opportunities for enhancement based on vast datasets and user interaction logs.
-
-- **Output Generation**: The neural networks could output modified or entirely new `this.DOM` and `this.GUI` structures that reflect learned optimizations, adaptations to context or user preferences, or innovative design approaches.
-
-- **Continuous Improvement**: As `this.DOM` and `this.GUI` structures are processed and reprocessed through neural networks, they become more refined and aligned with optimal UI/UX practices, user preferences, and context-specific requirements.
-
-  
-
-  ### Application and Use Cases:
-
-  - **Dynamic Interface Generation**: Leveraging neural networks, `this.GUI` could dynamically generate user interfaces that are optimized for the current context, user preferences, and device capabilities.
-  - **User Experience Optimization**: Neural networks could analyze `this.DOM` structures to suggest or automatically implement optimizations that enhance usability, accessibility, and user engagement.
-  - **Adaptive Interfaces**: Over time, as neural networks learn from a broad spectrum of interactions and contexts, they could guide the evolution of `this.GUI` to create interfaces that adapt in real-time to user needs and environmental factors.
-
-  In this conceptual framework, `this.DOM` and `this.GUI` are not just static descriptions or libraries but living, evolving structures that are integral to a neural network-driven process of continuous UI/UX optimization and innovation within the neurons.me ecosystem.
+The Key Value of this.gui:
 
+	•	Simplifies UI creation: Users only pass configurations or data; they don’t need to deal with the intricacies of React.
+	•	Dynamic generation: The components adapt and render based on the input you give them.
+	•	Automation: You handle all the complexity of component creation, leaving users with a simplified interface to generate UIs.
 
+Build the User’s App:
+	•	When someone uses this.gui in their own application, they import this.gui and use it like any other dependency.
+	•	They will then build their own application using their own bundler (such as Vite, Webpack, etc.). During this process, the bundler will include the components from this.gui as part of the final build.
+	•	This app build step will include all the app’s code and the components from this.gui, and it will bundle everything into a final production build.
 
 ## Contribution
-
-Contributions are welcome! To contribute to `this.gui`, please visit our [GitHub repository](https://github.com/suiGn/GUI).
-
-
-
+Contributions are welcome! To contribute to `this.gui`, please visit our [GitHub repository](https://github.com/neurons-me/GUI).
 ----------
-
 # About All.This
-
-## Modular Data Structures:
-
+###### Modular Data Structures
 **[this.me](https://suign.github.io/this.me)  - [this.audio](https://suign.github.io/this.audio) - [this.text](https://suign.github.io/this.text) - [this.wallet](https://suign.github.io/this.wallet) - [this.img](https://suign.github.io/this.img) - [this.pixel](https://suign.github.io/Pixels) - [be.this](https://suign.github.io/be.this) - [this.DOM](https://suign.github.io/this.DOM) - [this.env](https://suign.github.io/this.env/) - [this.GUI](https://suign.github.io/this.GUI) - [this.be](https://suign.github.io/this.be) - [this.video](https://suign.github.io/this.video) - [this.atom](https://suign.github.io/this.atom) - [this.dictionaries](https://suign.github.io/this.dictionaries/)**
 
-**Each module** in **[all.this](https://neurons.me/all-this)** represents a specific **datastructure**. These classes encapsulate the functionalities and **data specific to their domain.**
-
-## **Utils**
-
-**[all.this](https://neurons.me/all-this)** not only aggregates these modules but also provides utilities to facilitate the integration, management, and enhancement of these data structures. **For example:**
-
-*The integration with [cleaker](https://suign.github.io/cleaker/) ensures each module instance has a **unique cryptographic identity**, enhancing security and data integrity.*
-
-### Neurons.me Ecosystem Glossary:
-
-visit: [Neurons.me Glossary](https://suign.github.io/neurons.me/Glossary) 
-
-## License & Policies
+These classes encapsulate the functionalities to **domain-specific data.**
 
+## Neurons.me
+### License & Policies
 - **License**: MIT License (see LICENSE for details).
-
 - **Privacy Policy**: Respects user privacy; no collection/storage of personal data.
-
-- **Terms of Usage**: Use responsibly. No guarantees/warranties provided. [Terms](https://www.neurons.me/terms-of-use) | [Privacy](https://www.neurons.me/privacy-policy)
-
-  **Learn more** at https://neurons.me
-
-  **Author:** SuiGn
-
-  [By neurons.me](https://neurons.me)
-
-  <img src="https://suign.github.io/neurons.me/neurons_logo.png" alt="neurons.me logo" width="123" height="123" style="width123px; height:123px;">
-
+- **Terms of Usage**: Use responsibly. No guarantees/warranties provided. 
+[Terms](https://www.neurons.me/terms-of-use) | [Privacy](https://www.neurons.me/privacy-policy)
+[neurons.me](https://neurons.me)
+<img src="https://suign.github.io/assets/imgs/neurons_me_logo.png" alt="neurons.me logo" width="89">

package/dist/this-gui.es.js

@@ -0,0 +1 @@
+console.log("this.GUI loaded.");

package/dist/this-gui.umd.js

@@ -0,0 +1 @@
+(function(e){typeof define=="function"&&define.amd?define(e):e()})(function(){"use strict";console.log("this.GUI loaded.")});

package/package.json

@@ -1,26 +1,57 @@
 {
   "name": "this.gui",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "description": "This Graphic User Interface.",
-  "main": "index.js",
+  "main": "dist/this-gui.umd.js",
+  "module": "dist/this-gui.es.js",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/suiGn/GUI.git"
+    "url": "git+https://github.com/neurons-me/GUI.git"
   },
   "scripts": {
-    "start": "node index.js"
+    "dev": "vite",
+    "build": "vite build",
+    "prepublishOnly": "npm run build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
-  "homepage": "https://neurons.me",
-  "docs": "https://suiGn.github.io/GUI",
-  "type":"module",
+  "type": "module",
   "author": "suiGn",
   "license": "MIT",
-  "repoType": "NPM Package",
-  "category": "dataformatter",
   "dependencies": {
-
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@storybook/addon-docs": "^8.2.9",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/builder-vite": "^8.2.9",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.45",
+    "tailwindcss": "^3.4.10"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
-  
-  }
+    "@chromatic-com/storybook": "^1.8.0",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/manager-api": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@storybook/test": "^8.2.9",
+    "@storybook/theming": "^8.2.9",
+    "prop-types": "^15.8.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "storybook": "^8.2.9",
+    "vite": "^4.5.3"
+  },
+  "files": [
+    "dist"
+  ]
 }

package/index.js

@@ -1,8 +0,0 @@
-/*this.GUI/index.js
-ⓝⓔⓤⓡⓞⓝⓢ.ⓜⓔ
-🆂🆄🅸🅶🅽 */
-import thisGUI from './src/this.GUI.js';
-// Re-export thisGUI as the default export of the package
-export default thisGUI;
-
-console.log("this.GUI loaded.");

package/jsdoc.json

@@ -1,52 +0,0 @@
-{
-  "source": {
-    "include": ["./src", "./index.js", "./README.md"]
-  },
-  "opts": {
-    "destination": "./docs",
-    "template": "../../../../../../Sandbox/dev_tools/assets/better-docs",
-    "readme": "./README.md"
-
-  },
-  "templates": {
-    "cleverLinks": false,
-    "monospaceLinks": false,
-    "search": true,
-    "default": {
-        "staticFiles": {
-          "include": [
-              "./README.md"
-          ]
-        }
-    },
-    "better-docs": {
-        "name": "this.GUI",
-        "title": "Docs for this.GUI", 
-        "css": "style.css",
-        "trackingCode": "-",
-  "hideGenerator": false,
-  "navLinks": [
-    {
-      "label": "All.This",
-      "href": "https://suign.github.io/all.this/"
-  },
-  {
-    "label": "@Source",
-    "href": "https://suign.github.io/"
-},
-      {
-          "label": "Github",
-          "href": "https://github.com/suiGn/this.GUI"
-      },
-      {
-          "label": "Cleaker.me",
-          "href": "https://cleaker.me"
-      },
-      {
-        "label": "What is all.this?",
-          "href": "https://www.neurons.me/all-this"
-      }
-  ]
-}
-}
-}

package/knowledge_files/00_Context.md

@@ -1,27 +0,0 @@
-Incorporating such a broad spectrum of input types into this.gui makes it incredibly versatile and powerful, allowing for a rich blend of visual design and code. By accepting diverse input formats—ranging from mockups and blueprints to images—this.gui can serve as a comprehensive tool for constructing and refining user interfaces. Here's how you can structure this.gui and this.dom to handle and process these diverse input types:
-
-Handling Various Input Types for this.gui:
-Mockups and Blueprints:
-
-For graphical mockups and blueprint data, this.gui could utilize image processing and pattern recognition algorithms to interpret layout structures, color schemes, and element relationships. Machine learning models could be trained to translate these visual inputs into actionable GUI structure data.
-Pictures:
-
-When provided with pictures, this.gui can employ computer vision techniques to identify common UI patterns, extract color themes, and suggest design elements. Advanced models could even deduce user interaction patterns or preferences based on common UI paradigms present in the images.
-Code Snippets or Descriptions:
-
-For more traditional inputs like code snippets (HTML/CSS/JS) or textual specifications, this.gui can parse and interpret the code or text to understand the intended GUI structure or behavior. Natural language processing (NLP) can be employed to extract meaningful information from textual descriptions.
-Integration with Design Tools:
-
-this.gui could offer integrations with popular design and prototyping tools, allowing designers to directly export their designs into this.gui for further processing, optimization, or integration into live projects.
-Processing and Output Generation:
-Transformation Engine: Develop a core engine within this.gui that takes the interpreted data from various inputs and transforms it into a standardized format or a set of actionable specifications for GUI construction.
-
-Component Library: Maintain a library of UI components that can be dynamically assembled or modified based on the output of the transformation engine. This library should be flexible and extensible to accommodate a wide range of design aesthetics and functionality.
-
-Adaptation and Optimization: Utilize machine learning to adapt and optimize GUI components based on user interactions, performance metrics, and design trends, ensuring that the output remains relevant and effective.
-
-Output Delivery: Ensure that the final output of this.gui can be easily integrated into development workflows, providing developers with ready-to-use code, assets, and specifications for building or refining the user interface.
-
-Extending to this.dom:
-While this.gui focuses on the broader aspects of GUI creation and adaptation, this.dom can specialize in handling and manipulating DOM-specific structures, potentially bridging the gap between raw design inputs and actionable web content.
-By embracing a wide array of input types and leveraging advanced processing techniques, this.gui can become an invaluable tool in the design and development process, seamlessly merging visual design with functional implementation and ongoing optimization.

package/src/browser/guiFormatter.browser.js

@@ -1,12 +0,0 @@
-// In guiFormatter.browser.js
-export default class GUIFormatterBrowser {
-    constructor(guiInput) {
-        this.guiInput = guiInput;
-    }
-
-    async process() {
-        // Browser-specific GUI processing logic
-        console.log('Processing GUI in Browser environment...');
-        return { /* processed GUI data */ };
-    }
-}

package/src/createGUIFormatter.js

@@ -1,21 +0,0 @@
-// In createGUIFormatter.js
-import GUIFormatterNode from './nodejs/guiFormatter.node.js';
-import GUIFormatterBrowser from './browser/guiFormatter.browser.js';
-
-function isNode() {
-    return typeof window === 'undefined';
-}
-
-function isBrowser() {
-    return typeof window !== 'undefined';
-}
-
-export async function createGUIFormatter(guiInput) {
-    if (isNode()) {
-        return { formatter: new GUIFormatterNode(guiInput), error: null };
-    } else if (isBrowser()) {
-        return { formatter: new GUIFormatterBrowser(guiInput), error: null };
-    } else {
-        return { formatter: null, error: 'Unsupported environment' };
-    }
-}

package/src/htmls/html.html

@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>this.GUI HTML</title>
-</head>
-<body>
-    <p>Check twice the console for test output.</p>
-    <script type="module">
-        import thisGUI from '../index.js';
-
-        // Mock input for testing - replace with actual GUI input data or structure for a real test
-        const guiInput = {
-            type: 'mock', // Indicate this is mock data
-            content: 'This is a mock GUI input for browser test.'
-        };
-
-        thisGUI(guiInput).then(processedGUI => {
-            console.log('Processed GUI in Browser:', processedGUI);
-        }).catch(error => {
-            console.error('Error processing GUI in Browser:', error);
-        });
-    </script>
-</body>
-</html>

package/src/htmls/layout.html

@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Interactive GUI Layout</title>
-</head>
-<body>
-    <h1>Welcome to this.GUI</h1>
-    <p>Select a background color:</p>
-    <input type="color" id="backgroundColorPicker" onchange="changeBackgroundColor()">
-    <button onclick="saveBackgroundColor()">Save Background Color</button>
-
-    <script>
-        // Function to change the background color
-        function changeBackgroundColor() {
-            var colorPicker = document.getElementById('backgroundColorPicker');
-            document.body.style.backgroundColor = colorPicker.value;
-        }
-
-        // Function to save the background color to localStorage
-        function saveBackgroundColor() {
-            var colorPicker = document.getElementById('backgroundColorPicker');
-            localStorage.setItem('backgroundColor', colorPicker.value);
-            alert('Background color saved!');
-        }
-
-        // On load, set the background color from localStorage if it exists
-        document.addEventListener('DOMContentLoaded', (event) => {
-            var savedColor = localStorage.getItem('backgroundColor');
-            if (savedColor) {
-                document.body.style.backgroundColor = savedColor;
-                document.getElementById('backgroundColorPicker').value = savedColor;
-            }
-        });
-    </script>
-</body>
-</html>

package/src/htmls/layout2.html

@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Interactive GUI Layout</title>
-    <style>
-        /* Define basic themes */
-        :root {
-            --dark-bg-color: #333;
-            --dark-text-color: #f1f1f1;
-
-            --light-bg-color: #f1f1f1;
-            --light-text-color: #333;
-
-            --contrast-bg-color: #000;
-            --contrast-text-color: #fff;
-        }
-
-        body.dark {
-            background-color: var(--dark-bg-color);
-            color: var(--dark-text-color);
-        }
-
-        body.light {
-            background-color: var(--light-bg-color);
-            color: var(--light-text-color);
-        }
-
-        body.contrast {
-            background-color: var(--contrast-bg-color);
-            color: var(--contrast-text-color);
-        }
-    </style>
-</head>
-<body>
-    <h1>Welcome to this.GUI</h1>
-    <p>Select a theme:</p>
-    <button onclick="changeTheme('dark')">Dark</button>
-    <button onclick="changeTheme('light')">Light</button>
-    <button onclick="changeTheme('contrast')">High Contrast</button>
-
-    <script>
-        // Function to change the theme
-        function changeTheme(theme) {
-            document.body.className = theme;  // Set the class name on the body to change themes
-            localStorage.setItem('theme', theme);  // Save the theme selection
-        }
-
-        // On load, apply the saved theme
-        document.addEventListener('DOMContentLoaded', () => {
-            const savedTheme = localStorage.getItem('theme') || 'light';  // Default to light theme
-            document.body.className = savedTheme;
-        });
-    </script>
-</body>
-</html>

package/src/htmls/layout3.html

@@ -1,80 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Interactive GUI Layout</title>
-    <style>
-        /* Define basic themes with default colors */
-        :root {
-            --dark-bg-color: #333;
-            --dark-text-color: #f1f1f1;
-
-            --light-bg-color: #f1f1f1;
-            --light-text-color: #333;
-
-            --contrast-bg-color: #000;
-            --contrast-text-color: #fff;
-        }
-
-        body.dark {
-            background-color: var(--dark-bg-color);
-            color: var(--dark-text-color);
-        }
-
-        body.light {
-            background-color: var(--light-bg-color);
-            color: var(--light-text-color);
-        }
-
-        body.contrast {
-            background-color: var(--contrast-bg-color);
-            color: var(--contrast-text-color);
-        }
-    </style>
-</head>
-<body>
-    <h1>Welcome to this.GUI</h1>
-    <p>Select a theme:</p>
-    <button onclick="changeTheme('dark')">Dark</button>
-    <button onclick="changeTheme('light')">Light</button>
-    <button onclick="changeTheme('contrast')">High Contrast</button>
-
-    <p>Select a background color for the chosen theme:</p>
-    <input type="color" id="backgroundColorPicker" onchange="changeBackgroundColor()">
-    <button onclick="saveBackgroundColor()">Save Background Color</button>
-
-    <script>
-        let currentTheme = localStorage.getItem('theme') || 'light';
-
-        // Function to change the theme and update the color picker and background color
-        function changeTheme(theme) {
-            currentTheme = theme;
-            document.body.className = theme;
-            localStorage.setItem('theme', theme);
-
-            // Load the saved color for the selected theme
-            const savedColor = localStorage.getItem(theme + 'BackgroundColor') || document.body.style.backgroundColor;
-            document.body.style.backgroundColor = savedColor;
-            document.getElementById('backgroundColorPicker').value = savedColor;
-        }
-
-        // Function to change the background color based on the color picker's value
-        function changeBackgroundColor() {
-            const colorPicker = document.getElementById('backgroundColorPicker');
-            document.body.style.backgroundColor = colorPicker.value;
-        }
-
-        // Function to save the background color for the current theme
-        function saveBackgroundColor() {
-            const colorPicker = document.getElementById('backgroundColorPicker');
-            localStorage.setItem(currentTheme + 'BackgroundColor', colorPicker.value);
-            alert('Background color saved for ' + currentTheme + ' theme!');
-        }
-
-        // On load, apply the saved theme and its background color
-        document.addEventListener('DOMContentLoaded', () => {
-            changeTheme(currentTheme);
-        });
-    </script>
-</body>
-</html>

package/src/nodejs/guiFormatter.node.js

@@ -1,12 +0,0 @@
-// In guiFormatter.node.js
-export default class GUIFormatterNode {
-    constructor(guiInput) {
-        this.guiInput = guiInput;
-    }
-
-    async process() {
-        // Node.js-specific GUI processing logic
-        console.log('Processing GUI in Node.js environment...');
-        return { /* processed GUI data */ };
-    }
-}

package/src/this.GUI.js

@@ -1,19 +0,0 @@
-// this.GUI.js
-import { createGUIFormatter } from './createGUIFormatter.js';
-
-async function thisGUI(guiInput) {
-    let { formatter, error } = await createGUIFormatter(guiInput);
-
-    if (error) {
-        return { success: false, error };
-    }
-
-    try {
-        const processedGUI = await formatter.process();
-        return { success: true, data: processedGUI };
-    } catch (processingError) {
-        return { success: false, error: processingError.message };
-    }
-}
-
-export default thisGUI;