this.gui 0.0.42 → 0.0.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +62 -17
  2. package/index.js +1 -2
  3. package/jsdoc.json +7 -8
  4. package/package.json +7 -17
  5. package/dist/this.gui.css +0 -1
  6. package/dist/this.gui.js +0 -1
  7. package/webpack.config.cjs +0 -34
package/README.md CHANGED
@@ -1,4 +1,16 @@
1
- # This.GUI
1
+ # THIS.GUI
2
+
3
+ -----------
4
+
5
+ ### [Project Status : Experimental and Under Development, Subject to Major Changes]
6
+
7
+ 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.
8
+
9
+ visit: https://neurons.me to learn more.
10
+
11
+ ----------
12
+
13
+ # Introduction
2
14
 
3
15
  `this.gui` is a comprehensive UI toolkit for web development, providing both pre-styled components and customizable themes for building responsive and modern user interfaces for [all.this](neurons.me/this).
4
16
 
@@ -10,52 +22,51 @@ Install `this.gui` via npm:
10
22
  npm install this.gui
11
23
  ```
12
24
 
13
- Or using Yarn:
25
+ this.gui serve a dual purpose: one as a utility provider for GUI-related functionalities across your technologies and another as a data provider for neural networks. Let's break down how this.gui could serve these two roles:
14
26
 
15
- ```shell
16
- yarn add this.gui
17
- ```
27
+ GUI Provider (Utility Role): As a utility, this.gui can offer a consistent set of GUI components or services that other parts of your technology stack can use. This can include anything from standard UI elements to complex interaction patterns. By centralizing your GUI logic and components, you ensure consistency and reusability across your projects, which aligns well with it being categorized under utilities.
18
28
 
19
- ## Usage
29
+ Data Provider for Neural Networks (Data Role): The more intriguing role of this.gui involves transforming GUI interactions or states into data that can be fed into neural networks. This can be achieved in several ways, depending on what aspects of the GUI you wish to analyze or learn from:
30
+
31
+ Interaction Data: Capturing user interactions with the GUI (clicks, navigation patterns, usage sequences, etc.) can provide valuable data for understanding user behavior or improving user experience.
32
+
33
+ State Data: The state of the GUI at various points in time can offer insights into how users reach certain states, which can be used to optimize workflows or detect common issues.
20
34
 
35
+ Visual Data: If the neural network is designed to work with visual data, screenshots or GUI element properties can be transformed into a format suitable for neural network input. This can be used for tasks like automated GUI testing, layout analysis, or even generating GUI designs.
36
+
37
+ To facilitate these dual roles, your this.gui package might include different modules or subcomponents dedicated to each function. For instance, one module could focus on providing utility functions and components, while another could handle data extraction and transformation for neural network inputs.
38
+
39
+ ## Usage
21
40
  Include `this.gui` styles and scripts in your project to utilize the library.
22
41
 
23
42
  ### Including Styles
24
-
25
43
  Link the `this.gui.css` in your HTML or import it in your JavaScript entry file:
26
44
 
27
45
  In HTML:
28
-
29
46
  ```html
30
47
  <link rel="stylesheet" href="/node_modules/this.gui/dist/this.gui.css">
31
48
  ```
32
49
 
33
50
  In JavaScript:
34
-
35
51
  ```javascript
36
52
  import 'this.gui/dist/this.gui.css';
37
53
  ```
38
54
 
39
55
  ### Including Scripts
40
-
41
56
  Reference the `this.gui.js` in your HTML or import it if you're using a module bundler:
42
57
 
43
58
  In HTML:
44
-
45
59
  ```html
46
60
  <script src="/node_modules/this.gui/dist/this.gui.js"></script>
47
61
  ```
48
62
 
49
63
  In JavaScript:
50
-
51
64
  ```javascript
52
65
  import 'this.gui';
53
66
  ```
54
67
 
55
68
  ## Themes
56
-
57
69
  `this.gui` offers light and dark themes that can be toggled using the `data-theme` attribute:
58
-
59
70
  ```html
60
71
  <body data-theme="dark">
61
72
  <!-- Content styled with the dark theme -->
@@ -63,7 +74,6 @@ import 'this.gui';
63
74
  ```
64
75
 
65
76
  ## Components
66
-
67
77
  To use `this.gui` components, add the respective classes to your HTML elements:
68
78
 
69
79
  ```html
@@ -80,6 +90,41 @@ Refer to the official [documentation](https://suign.github.io/GUI) for detailed
80
90
 
81
91
  Contributions are welcome! To contribute to `this.gui`, please visit our [GitHub repository](https://github.com/suiGn/GUI).
82
92
 
83
- ## License
84
93
 
85
- `this.gui` is available under the MIT license. See the LICENSE file for more info.
94
+
95
+ ----------
96
+
97
+ # About All.This
98
+
99
+ ## Modular Data Structures:
100
+
101
+ **[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/)**
102
+
103
+ **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.**
104
+
105
+ ## **Utils**
106
+
107
+ **[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:**
108
+
109
+ *The integration with [cleaker](https://suign.github.io/cleaker/) ensures each module instance has a **unique cryptographic identity**, enhancing security and data integrity.*
110
+
111
+ ### Neurons.me Ecosystem Glossary:
112
+
113
+ visit: [Neurons.me Glossary](https://suign.github.io/neurons.me/Glossary)
114
+
115
+ ## License & Policies
116
+
117
+ - **License**: MIT License (see LICENSE for details).
118
+
119
+ - **Privacy Policy**: Respects user privacy; no collection/storage of personal data.
120
+
121
+ - **Terms of Usage**: Use responsibly. No guarantees/warranties provided. [Terms](https://www.neurons.me/terms-of-use) | [Privacy](https://www.neurons.me/privacy-policy)
122
+
123
+ **Learn more** at https://neurons.me
124
+
125
+ **Author:** SuiGn
126
+
127
+ [By neurons.me](https://neurons.me)
128
+
129
+ <img src="https://suign.github.io/neurons.me/neurons_logo.png" alt="neurons.me logo" width="123" height="123" style="width123px; height:123px;">
130
+
package/index.js CHANGED
@@ -1,3 +1,2 @@
1
- import './src/styles.scss';
2
-
1
+ console.log("this.GUI loaded.")
3
2
 
package/jsdoc.json CHANGED
@@ -1,13 +1,12 @@
1
1
  {
2
2
  "source": {
3
- "include": ["./src", "./index.js"],
4
- "includePattern": "\\.(js|jsx|ts|tsx)$",
5
- "excludePattern": "(node_modules/|docs)"
3
+ "include": ["./src", "./index.js", "./README.md"]
6
4
  },
7
5
  "opts": {
8
6
  "destination": "./docs",
9
- "template": "../../../../../Sandbox/dev_tools/assets/better-docs",
7
+ "template": "../../../../../../Sandbox/dev_tools/assets/better-docs",
10
8
  "readme": "./README.md"
9
+
11
10
  },
12
11
  "templates": {
13
12
  "cleverLinks": false,
@@ -21,7 +20,7 @@
21
20
  }
22
21
  },
23
22
  "better-docs": {
24
- "name": "This.GUI",
23
+ "name": "this.GUI",
25
24
  "title": "Docs for this.GUI",
26
25
  "css": "style.css",
27
26
  "trackingCode": "-",
@@ -37,7 +36,7 @@
37
36
  },
38
37
  {
39
38
  "label": "Github",
40
- "href": "https://github.com/suiGn/cleaker"
39
+ "href": "https://github.com/suiGn/this.GUI"
41
40
  },
42
41
  {
43
42
  "label": "Cleaker.me",
@@ -45,9 +44,9 @@
45
44
  },
46
45
  {
47
46
  "label": "What is all.this?",
48
- "href": "https://www.neurons.me/this"
47
+ "href": "https://www.neurons.me/all-this"
49
48
  }
50
49
  ]
51
50
  }
52
51
  }
53
- }
52
+ }
package/package.json CHANGED
@@ -1,36 +1,26 @@
1
1
  {
2
2
  "name": "this.gui",
3
- "version": "0.0.42",
3
+ "version": "0.0.52",
4
4
  "description": "This Graphic User Interface.",
5
5
  "main": "index.js",
6
- "type": "module",
7
6
  "repository": {
8
7
  "type": "git",
9
8
  "url": "git+https://github.com/suiGn/GUI.git"
10
9
  },
11
10
  "scripts": {
12
- "build": "webpack --mode production",
13
- "test": "jest",
14
- "build-css": "sass src/styles:dist/css"
11
+ "start": "node index.js"
15
12
  },
16
- "homepage": "https://www.npmjs.com/package/this.gui",
13
+ "homepage": "https://neurons.me",
17
14
  "docs": "https://suiGn.github.io/GUI",
15
+ "type":"module",
18
16
  "author": "suiGn",
19
17
  "license": "MIT",
20
18
  "repoType": "NPM Package",
19
+ "category": "dataformatter",
21
20
  "dependencies": {
22
- "material-components-web": "^14.0.0",
23
- "sass": "^1.69.6"
21
+
24
22
  },
25
23
  "devDependencies": {
26
- "@babel/core": "^7.23.7",
27
- "@babel/preset-env": "^7.23.7",
28
- "babel-loader": "^9.1.3",
29
- "css-loader": "^6.8.1",
30
- "mini-css-extract-plugin": "^2.7.6",
31
- "sass-loader": "^13.3.3",
32
- "style-loader": "^3.3.3",
33
- "webpack": "^5.89.0",
34
- "webpack-cli": "^5.1.4"
24
+
35
25
  }
36
26
  }
package/dist/this.gui.css DELETED
@@ -1 +0,0 @@
1
- :root{--primary: $primary-light;--secondary: $secondary-light}:root[data-theme=dark]{--primary: #bb86fc;--secondary: #03dac6}.my-custom-component{background-color:var(--primary);color:#fff}:root[data-theme=light]{--primary: #6200ee;--secondary: #03dac6}.my-custom-component{background-color:var(--primary);color:#000}.my-element{background-color:var(--primary)}:root[data-theme=dark]{--primary: #bb86fc;--secondary: #03dac6}.my-custom-component{background-color:var(--primary);color:#fff}:root[data-theme=light]{--primary: #6200ee;--secondary: #03dac6}.my-custom-component{background-color:var(--primary);color:#000}
package/dist/this.gui.js DELETED
@@ -1 +0,0 @@
1
- !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.thisGui=t():e.thisGui=t()}(self,(()=>(()=>{"use strict";var e={};return(e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})})(e),e})()));
package/webpack.config.cjs DELETED
@@ -1,34 +0,0 @@
1
- const path = require('path');
2
- const MiniCssExtractPlugin = require('mini-css-extract-plugin');
3
-
4
- module.exports = {
5
- entry: './index.js', // Main entry point of your library
6
- output: {
7
- path: path.resolve(__dirname, 'dist'),
8
- filename: 'this.gui.js', // Output file
9
- library: 'thisGui', // Global var when included via script tag
10
- libraryTarget: 'umd',
11
- },
12
- module: {
13
- rules: [
14
- {
15
- test: /\.js$/,
16
- use: 'babel-loader',
17
- exclude: /node_modules/,
18
- },
19
- {
20
- test: /\.scss$/,
21
- use: [
22
- MiniCssExtractPlugin.loader,
23
- 'css-loader',
24
- 'sass-loader'
25
- ],
26
- },
27
- ],
28
- },
29
- plugins: [
30
- new MiniCssExtractPlugin({
31
- filename: 'this.gui.css', // Output CSS file
32
- }),
33
- ],
34
- };