yangsuite-ui-utils 1.0.16 → 1.0.17
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.
- package/README.md +81 -31
- package/package.json +1 -2
package/README.md
CHANGED
|
@@ -1,31 +1,8 @@
|
|
|
1
1
|
## Package that contains reusable components used in yangsuite plugins such as Header or Footer.
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Usage
|
|
4
4
|
|
|
5
|
-
1.
|
|
6
|
-
`> npm i`\
|
|
7
|
-
`> npm run build-dev`
|
|
8
|
-
|
|
9
|
-
2. Install package in your plugin by adding path to package to `package.json`.
|
|
10
|
-
|
|
11
|
-
```json
|
|
12
|
-
"dependencies": {
|
|
13
|
-
"@harbor/elements": "1.1.8",
|
|
14
|
-
"@reduxjs/toolkit": "^2.1.0",
|
|
15
|
-
"@tailwindcss/container-queries": "^0.1.1",
|
|
16
|
-
"@tailwindcss/typography": "^0.5.10",
|
|
17
|
-
"js-cookie": "^3.0.5",
|
|
18
|
-
"phosphor-react": "^1.4.1",
|
|
19
|
-
"react": "^18.2.0",
|
|
20
|
-
"react-dom": "^18.2.0",
|
|
21
|
-
"react-redux": "^9.0.2",
|
|
22
|
-
"react-router-dom": "^6.22.0",
|
|
23
|
-
"react-scripts": "5.0.1",
|
|
24
|
-
"yangsuite-ui-utils": "../../yangsuite-ui-utils"
|
|
25
|
-
},
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
3. Add package reducers to your `store.js`.
|
|
5
|
+
1. Add package reducers to your `store.js`.
|
|
29
6
|
|
|
30
7
|
```js
|
|
31
8
|
import { reducers } from "yangsuite-ui-utils";
|
|
@@ -38,11 +15,11 @@ const rootReducer = combineReducers({
|
|
|
38
15
|
});
|
|
39
16
|
|
|
40
17
|
export default configureStore({
|
|
41
|
-
reducer: rootReducer
|
|
18
|
+
reducer: rootReducer,
|
|
42
19
|
});
|
|
43
20
|
```
|
|
44
21
|
|
|
45
|
-
|
|
22
|
+
2. Import for example `Layout` componenet and use is in your react router configuration.
|
|
46
23
|
|
|
47
24
|
```js
|
|
48
25
|
import { createRoot } from "react-dom/client";
|
|
@@ -66,10 +43,83 @@ const router = createBrowserRouter([
|
|
|
66
43
|
|
|
67
44
|
createRoot(document.getElementById("app")).render(
|
|
68
45
|
<Provider store={store}>
|
|
69
|
-
<RouterProvider router={router}>
|
|
70
|
-
|
|
71
|
-
</Provider>
|
|
46
|
+
<RouterProvider router={router}></RouterProvider>
|
|
47
|
+
</Provider>,
|
|
72
48
|
);
|
|
73
49
|
```
|
|
74
50
|
|
|
75
|
-
Refer to [exported packages](./src/index.js) to see all components and functions you can use
|
|
51
|
+
Refer to [exported packages](./src/index.js) to see all components and functions you can use
|
|
52
|
+
|
|
53
|
+
## Components
|
|
54
|
+
|
|
55
|
+
### Redux layout
|
|
56
|
+
|
|
57
|
+
Store
|
|
58
|
+
|
|
59
|
+
```js
|
|
60
|
+
{
|
|
61
|
+
visible: false, // Tells if sidebar is visible or not
|
|
62
|
+
menu: [], // All sidebar menus
|
|
63
|
+
plugins: {}, // All plugins implemented by plugins
|
|
64
|
+
currentPlugin: "yangsuite" // Current plugin that we are at. Used for routing.
|
|
65
|
+
};
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
Actions
|
|
69
|
+
|
|
70
|
+
```js
|
|
71
|
+
{
|
|
72
|
+
toggleNav, // Toggle navbar
|
|
73
|
+
showNav, // Show navbar
|
|
74
|
+
closeNav, // Close navbar
|
|
75
|
+
useCustomNavigate, // Hook to navigate beetween pages
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### Loader
|
|
80
|
+
|
|
81
|
+
Simple spinning loader.
|
|
82
|
+
|
|
83
|
+
Props:
|
|
84
|
+
|
|
85
|
+
- `msg`: Message to display while loading data
|
|
86
|
+
|
|
87
|
+
### NavBar
|
|
88
|
+
|
|
89
|
+
Sidebar with header. Used redux actions to control it.
|
|
90
|
+
|
|
91
|
+
### Layout
|
|
92
|
+
Use it as root component to wrap your app with `Header` and `Navbar`
|
|
93
|
+
|
|
94
|
+
## Development
|
|
95
|
+
|
|
96
|
+
1. Install node modules and build bundle\
|
|
97
|
+
`> npm i`\
|
|
98
|
+
`> npm run build-dev`
|
|
99
|
+
|
|
100
|
+
2. Install package in your plugin by adding path to package to `package.json`.
|
|
101
|
+
|
|
102
|
+
```json
|
|
103
|
+
"dependencies": {
|
|
104
|
+
"@harbor/elements": "1.1.8",
|
|
105
|
+
"@reduxjs/toolkit": "^2.1.0",
|
|
106
|
+
"@tailwindcss/container-queries": "^0.1.1",
|
|
107
|
+
"@tailwindcss/typography": "^0.5.10",
|
|
108
|
+
"js-cookie": "^3.0.5",
|
|
109
|
+
"phosphor-react": "^1.4.1",
|
|
110
|
+
"react": "^18.2.0",
|
|
111
|
+
"react-dom": "^18.2.0",
|
|
112
|
+
"react-redux": "^9.0.2",
|
|
113
|
+
"react-router-dom": "^6.22.0",
|
|
114
|
+
"react-scripts": "5.0.1",
|
|
115
|
+
"yangsuite-ui-utils": "../../yangsuite-ui-utils"
|
|
116
|
+
},
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
3\*. For vite compability add this line to `package.json`
|
|
120
|
+
|
|
121
|
+
```
|
|
122
|
+
...
|
|
123
|
+
"module": "src/index.js",
|
|
124
|
+
...
|
|
125
|
+
```
|
package/package.json
CHANGED