npm - this.gui - Versions diffs - 0.0.2 → 0.0.42 - Mend

this.gui 0.0.2 → 0.0.42

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 (10) hide show

package/README.md CHANGED Viewed

@@ -1,15 +1,85 @@
-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.
+Or using Yarn:
-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.
+```shell
+yarn add this.gui
+```
-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.
+## 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/dist/this.gui.css ADDED Viewed

@@ -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 ADDED Viewed

@@ -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/index.js CHANGED Viewed

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

package/jsdoc.json CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "this.gui",
-  "version": "0.0.2",
+  "version": "0.0.42",
   "description": "This Graphic User Interface.",
   "main": "index.js",
   "type": "module",
@@ -9,40 +9,28 @@
     "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"
-  },
   "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 ADDED Viewed

@@ -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 DELETED Viewed

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

package/tsconfig.json DELETED Viewed

@@ -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 DELETED Viewed

@@ -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
-  }