yangsuite-ui-utils 1.0.16 → 1.0.18
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 +96 -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,98 @@ 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
|
+
### Loader
|
|
56
|
+
```js
|
|
57
|
+
import { Loader } from "yangsuite-ui-utils";
|
|
58
|
+
function myComponent() {
|
|
59
|
+
return <Loader msg="Fetching devices" />;
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
Simple spinning loader.
|
|
63
|
+
|
|
64
|
+
Props:
|
|
65
|
+
|
|
66
|
+
- `msg`: Message to display while loading data
|
|
67
|
+
|
|
68
|
+
### Layout
|
|
69
|
+
```js
|
|
70
|
+
import { Layout } from "yangsuite-ui-utils";
|
|
71
|
+
```
|
|
72
|
+
Use it as root component to wrap your app with `Header` and `Navbar`
|
|
73
|
+
|
|
74
|
+
### useCustomNaviage
|
|
75
|
+
```js
|
|
76
|
+
import useCustomNavigate from "./navigation";
|
|
77
|
+
function myComponent() {
|
|
78
|
+
const navigate = useCustomNavigate();
|
|
79
|
+
|
|
80
|
+
return <btn onClick={(e) => navigate('link')}></btn>;
|
|
81
|
+
}
|
|
82
|
+
```
|
|
83
|
+
Hook used to navigate beetween diffrent apps. It will automaticlly decide if redirection should be only within given plugin or beyond it.
|
|
84
|
+
|
|
85
|
+
## Redux layout
|
|
86
|
+
|
|
87
|
+
Store
|
|
88
|
+
|
|
89
|
+
```js
|
|
90
|
+
{
|
|
91
|
+
visible: false, // Tells if sidebar is visible or not
|
|
92
|
+
menu: [], // All sidebar menus
|
|
93
|
+
plugins: {}, // All plugins implemented by plugins
|
|
94
|
+
currentPlugin: "yangsuite" // Current plugin that we are at. Used for routing.
|
|
95
|
+
};
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
Actions
|
|
99
|
+
|
|
100
|
+
```js
|
|
101
|
+
{
|
|
102
|
+
toggleNav, // Toggle navbar
|
|
103
|
+
showNav, // Show navbar
|
|
104
|
+
closeNav, // Close navbar
|
|
105
|
+
useCustomNavigate, // Hook to navigate beetween pages
|
|
106
|
+
}
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
## Development
|
|
110
|
+
|
|
111
|
+
1. Install node modules and build bundle\
|
|
112
|
+
`> npm i`\
|
|
113
|
+
`> npm run build-dev`
|
|
114
|
+
|
|
115
|
+
2. Install package in your plugin by adding path to package to `package.json`.
|
|
116
|
+
|
|
117
|
+
```json
|
|
118
|
+
"dependencies": {
|
|
119
|
+
"@harbor/elements": "1.1.8",
|
|
120
|
+
"@reduxjs/toolkit": "^2.1.0",
|
|
121
|
+
"@tailwindcss/container-queries": "^0.1.1",
|
|
122
|
+
"@tailwindcss/typography": "^0.5.10",
|
|
123
|
+
"js-cookie": "^3.0.5",
|
|
124
|
+
"phosphor-react": "^1.4.1",
|
|
125
|
+
"react": "^18.2.0",
|
|
126
|
+
"react-dom": "^18.2.0",
|
|
127
|
+
"react-redux": "^9.0.2",
|
|
128
|
+
"react-router-dom": "^6.22.0",
|
|
129
|
+
"react-scripts": "5.0.1",
|
|
130
|
+
"yangsuite-ui-utils": "../../yangsuite-ui-utils"
|
|
131
|
+
},
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
3\*. For vite compability add this line to `package.json`
|
|
135
|
+
|
|
136
|
+
```
|
|
137
|
+
...
|
|
138
|
+
"module": "src/index.js",
|
|
139
|
+
...
|
|
140
|
+
```
|
package/package.json
CHANGED