this.gui 0.0.3 → 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 (6) hide show
  1. package/README.md +78 -8
  2. package/dist/this.gui.css +1 -0
  3. package/index.js +3 -0
  4. package/jsdoc.json +1 -1
  5. package/package.json +2 -1
  6. package/webpack.config.cjs +11 -1
package/README.md CHANGED
@@ -1,15 +1,85 @@
1
- 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.
1
+ # This.GUI
2
2
 
3
- 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.
3
+ `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
4
 
5
- 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.
5
+ ## Installation
6
6
 
7
- 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.
7
+ Install `this.gui` via npm:
8
8
 
9
- 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.
9
+ ```shell
10
+ npm install this.gui
11
+ ```
10
12
 
11
- 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.
13
+ Or using Yarn:
12
14
 
13
- 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.
15
+ ```shell
16
+ yarn add this.gui
17
+ ```
14
18
 
15
- 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.
19
+ ## Usage
20
+
21
+ Include `this.gui` styles and scripts in your project to utilize the library.
22
+
23
+ ### Including Styles
24
+
25
+ Link the `this.gui.css` in your HTML or import it in your JavaScript entry file:
26
+
27
+ In HTML:
28
+
29
+ ```html
30
+ <link rel="stylesheet" href="/node_modules/this.gui/dist/this.gui.css">
31
+ ```
32
+
33
+ In JavaScript:
34
+
35
+ ```javascript
36
+ import 'this.gui/dist/this.gui.css';
37
+ ```
38
+
39
+ ### Including Scripts
40
+
41
+ Reference the `this.gui.js` in your HTML or import it if you're using a module bundler:
42
+
43
+ In HTML:
44
+
45
+ ```html
46
+ <script src="/node_modules/this.gui/dist/this.gui.js"></script>
47
+ ```
48
+
49
+ In JavaScript:
50
+
51
+ ```javascript
52
+ import 'this.gui';
53
+ ```
54
+
55
+ ## Themes
56
+
57
+ `this.gui` offers light and dark themes that can be toggled using the `data-theme` attribute:
58
+
59
+ ```html
60
+ <body data-theme="dark">
61
+ <!-- Content styled with the dark theme -->
62
+ </body>
63
+ ```
64
+
65
+ ## Components
66
+
67
+ To use `this.gui` components, add the respective classes to your HTML elements:
68
+
69
+ ```html
70
+ <button class="this-gui-button">Click Me</button>
71
+ <div class="this-gui-card">
72
+ <h3 class="this-gui-card-title">Card Title</h3>
73
+ <p class="this-gui-card-content">Card content...</p>
74
+ </div>
75
+ ```
76
+
77
+ Refer to the official [documentation](https://suign.github.io/GUI) for detailed usage instructions and component references.
78
+
79
+ ## Contribution
80
+
81
+ Contributions are welcome! To contribute to `this.gui`, please visit our [GitHub repository](https://github.com/suiGn/GUI).
82
+
83
+ ## License
84
+
85
+ `this.gui` is available under the MIT license. See the LICENSE file for more info.
package/dist/this.gui.css ADDED
@@ -0,0 +1 @@
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/index.js CHANGED
@@ -0,0 +1,3 @@
1
+ import './src/styles.scss';
2
+
3
+
package/jsdoc.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "source": {
3
- "include": ["./src", "./src/index.ts"],
3
+ "include": ["./src", "./index.js"],
4
4
  "includePattern": "\\.(js|jsx|ts|tsx)$",
5
5
  "excludePattern": "(node_modules/|docs)"
6
6
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "this.gui",
3
- "version": "0.0.3",
3
+ "version": "0.0.42",
4
4
  "description": "This Graphic User Interface.",
5
5
  "main": "index.js",
6
6
  "type": "module",
@@ -27,6 +27,7 @@
27
27
  "@babel/preset-env": "^7.23.7",
28
28
  "babel-loader": "^9.1.3",
29
29
  "css-loader": "^6.8.1",
30
+ "mini-css-extract-plugin": "^2.7.6",
30
31
  "sass-loader": "^13.3.3",
31
32
  "style-loader": "^3.3.3",
32
33
  "webpack": "^5.89.0",
package/webpack.config.cjs CHANGED
@@ -1,4 +1,5 @@
1
1
  const path = require('path');
2
+ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
2
3
 
3
4
  module.exports = {
4
5
  entry: './index.js', // Main entry point of your library
@@ -17,8 +18,17 @@ module.exports = {
17
18
  },
18
19
  {
19
20
  test: /\.scss$/,
20
- use: ['style-loader', 'css-loader', 'sass-loader'],
21
+ use: [
22
+ MiniCssExtractPlugin.loader,
23
+ 'css-loader',
24
+ 'sass-loader'
25
+ ],
21
26
  },
22
27
  ],
23
28
  },
29
+ plugins: [
30
+ new MiniCssExtractPlugin({
31
+ filename: 'this.gui.css', // Output CSS file
32
+ }),
33
+ ],
24
34
  };