this.gui 0.0.2 → 0.0.5

package/README.md

@@ -1,15 +1,83 @@
-Consistent Theming: By wrapping MUI or any other UI framework inside your GUI package, you can set a consistent theme, typography, and other styles that will be common across all the apps where you use this package. This ensures brand consistency.
+# This.GUI
 
-Custom Components: You can build upon MUI components to create higher-level components tailored for your needs. For instance, you might have a custom UserAvatar component that integrates with your user system or a DataGrid tailored for your backend's data format.
+`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).
 
-Integrated Logic: The GUI package can contain not just visual components but also logic. For instance, a LoginForm component can have integrated authentication logic that talks to your backend directly. This simplifies the usage in actual apps.
+## Installation
 
-Utilities & Helpers: Apart from components, you can also have utility functions and hooks. For instance, a useUser() hook that fetches and manages the user's state.
+Install `this.gui` via npm:
 
-Extendability: You can set up your GUI package in a way that while it provides a default theme and behavior, individual projects can customize or extend them as needed.
+```shell
+npm install this.gui
+```
 
-Version Control: Changes in the UI/UX can be versioned. If you update a component's look or behavior in the GUI package and bump the version, you can choose when to adopt these changes in your various projects by updating the package version.
+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:
 
-Documentation: You can maintain a single documentation site/source for your custom GUI package, making it easier for your team (and potentially third-party developers) to understand and use your components.
+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.
 
-Dependency Management: With a single GUI package, you can manage the versions of MUI or other dependencies in one place. This can make updates and maintenance easier, especially if breaking changes are introduced in the UI libraries you depend on.
+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:
+
+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.
+
+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.
+
+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.
+
+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.
+
+## Usage
+Include `this.gui` styles and scripts in your project to utilize the library.
+
+### Including Styles
+Link the `this.gui.css` in your HTML or import it in your JavaScript entry file:
+
+In HTML:
+```html
+<link rel="stylesheet" href="/node_modules/this.gui/dist/this.gui.css">
+```
+
+In JavaScript:
+```javascript
+import 'this.gui/dist/this.gui.css';
+```
+
+### Including Scripts
+Reference the `this.gui.js` in your HTML or import it if you're using a module bundler:
+
+In HTML:
+```html
+<script src="/node_modules/this.gui/dist/this.gui.js"></script>
+```
+
+In JavaScript:
+```javascript
+import 'this.gui';
+```
+
+## Themes
+`this.gui` offers light and dark themes that can be toggled using the `data-theme` attribute:
+```html
+<body data-theme="dark">
+  <!-- Content styled with the dark theme -->
+</body>
+```
+
+## Components
+To use `this.gui` components, add the respective classes to your HTML elements:
+
+```html
+<button class="this-gui-button">Click Me</button>
+<div class="this-gui-card">
+  <h3 class="this-gui-card-title">Card Title</h3>
+  <p class="this-gui-card-content">Card content...</p>
+</div>
+```
+
+Refer to the official [documentation](https://suign.github.io/GUI) for detailed usage instructions and component references.
+
+## Contribution
+
+Contributions are welcome! To contribute to `this.gui`, please visit our [GitHub repository](https://github.com/suiGn/GUI).
+
+## License
+
+`this.gui` is available under the MIT license. See the LICENSE file for more info.

package/index.js

@@ -0,0 +1,3 @@
+import './src/styles.scss';
+
+

package/jsdoc.json

@@ -1,6 +1,6 @@
 {
   "source": {
-    "include": ["./src", "./src/index.ts"],
+    "include": ["./src", "./index.js"],
     "includePattern": "\\.(js|jsx|ts|tsx)$",
     "excludePattern": "(node_modules/|docs)"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "this.gui",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "description": "This Graphic User Interface.",
   "main": "index.js",
   "type": "module",
@@ -9,40 +9,29 @@
     "url": "git+https://github.com/suiGn/GUI.git"
   },
   "scripts": {
-    "build": "tsc",
-    "test": "jest"
+    "build": "webpack --mode production",
+    "test": "jest",
+    "build-css": "sass src/styles:dist/css"
   },
   "homepage": "https://www.npmjs.com/package/this.gui",
   "docs": "https://suiGn.github.io/GUI",
   "author": "suiGn",
   "license": "MIT",
   "repoType": "NPM Package",
-  "devDependencies": {
-    "@babel/core": "^7.23.6",
-    "@babel/preset-env": "^7.23.6",
-    "@babel/preset-react": "^7.23.3",
-    "@testing-library/jest-dom": "^6.1.6",
-    "@testing-library/react": "^14.1.2",
-    "@types/jest": "^29.5.11",
-    "@types/react": "^18.2.46",
-    "@types/react-dom": "^18.2.18",
-    "@types/testing-library__react": "^10.2.0",
-    "babel-jest": "^29.7.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jsdom": "^23.0.1",
-    "ts-jest": "^29.1.1",
-    "typedoc": "^0.25.4",
-    "typedoc-material-theme": "^1.0.1",
-    "typescript": "^5.3.3"
-  },
+  "category": "dataformatter",
   "dependencies": {
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
-    "@fontsource/inter": "^5.0.16",
-    "@mui/joy": "^5.0.0-beta.20",
-    "@mui/material": "^5.15.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "material-components-web": "^14.0.0",
+    "sass": "^1.69.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.7",
+    "@babel/preset-env": "^7.23.7",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^6.8.1",
+    "mini-css-extract-plugin": "^2.7.6",
+    "sass-loader": "^13.3.3",
+    "style-loader": "^3.3.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4"
   }
 }

package/webpack.config.cjs

@@ -0,0 +1,34 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  entry: './index.js', // Main entry point of your library
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'this.gui.js', // Output file
+    library: 'thisGui', // Global var when included via script tag
+    libraryTarget: 'umd',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'sass-loader'
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'this.gui.css', // Output CSS file
+    }),
+  ],
+};

package/babel.config.json

@@ -1,3 +0,0 @@
-{
-    "presets": ["@babel/preset-env", "@babel/preset-react"]
-  }

package/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5", // Specify ECMAScript target version
-    "module": "commonjs", // Specify module code generation
-    "lib": ["es6", "dom"], // Specify library files to be included in the compilation
-    "sourceMap": true, // Generates corresponding '.map' file
-    "outDir": "./dist", // Redirect output structure to the directory
-    "rootDir": "./src", // Specify the root directory of input files
-    "strict": true, // Enable all strict type-checking options
-    "noImplicitAny": true, // Raise error on expressions and declarations with an implied 'any' type
-    "moduleResolution": "node", // Select module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6)
-    "esModuleInterop": true, // Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports
-    "skipLibCheck": true, // Skip type checking of declaration files
-    "forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file
-    "jsx": "react" // Support JSX in '.tsx' files: 'preserve', 'react-native', or 'react'
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "tests", "dist"]
-}

package/typedoc.json

@@ -1,13 +0,0 @@
-  {
-    "theme": "default",
-    "entryPoints": ["src/index.ts"],
-    "out": "./docs",
-    "exclude": ["**/node_modules/**"],
-    "readme": "README.md",
-    "includeVersion": true, // Include TypeScript version in the generated documentation
-    "excludeExternals": true, // Exclude external dependencies from documentation
-    "excludePrivate": true, // Exclude private members from documentation
-    "excludeProtected": true, // Exclude protected members from documentation
-    "tsconfig": "tsconfig.json" // Path to your TypeScript configuration file
-  }
-