yangsuite-ui-utils 1.0.1
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 +75 -0
- package/bundle/index.js +889 -0
- package/bundle/main.css +13 -0
- package/package.json +45 -0
package/README.md
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
## Package that contains reusable components used in yangsuite plugins such as Header or Footer.
|
|
2
|
+
|
|
3
|
+
### Development
|
|
4
|
+
|
|
5
|
+
1. Install node modules and build bundle\
|
|
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`.
|
|
29
|
+
|
|
30
|
+
```js
|
|
31
|
+
import { reducers } from "yangsuite-ui-utils";
|
|
32
|
+
import { combineReducers } from "redux";
|
|
33
|
+
|
|
34
|
+
const rootReducer = combineReducers({
|
|
35
|
+
...reducers,
|
|
36
|
+
pluginsSlice1: pluginsSlice1,
|
|
37
|
+
pluginsSlice2: pluginsSlice2,
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
export default configureStore({
|
|
41
|
+
reducer: rootReducer
|
|
42
|
+
});
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
4. Import for example `Layout` componenet and use is in your react router configuration.
|
|
46
|
+
|
|
47
|
+
```js
|
|
48
|
+
import { createRoot } from "react-dom/client";
|
|
49
|
+
import { Provider } from "react-redux";
|
|
50
|
+
import store from "./store";
|
|
51
|
+
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
|
52
|
+
import { Layout } from "yangsuite-ui-utils";
|
|
53
|
+
|
|
54
|
+
const router = createBrowserRouter([
|
|
55
|
+
{
|
|
56
|
+
path: "/ysexample",
|
|
57
|
+
element: <Layout />,
|
|
58
|
+
children: [
|
|
59
|
+
{
|
|
60
|
+
path: "",
|
|
61
|
+
element: <div>My component</div>,
|
|
62
|
+
},
|
|
63
|
+
],
|
|
64
|
+
},
|
|
65
|
+
]);
|
|
66
|
+
|
|
67
|
+
createRoot(document.getElementById("app")).render(
|
|
68
|
+
<Provider store={store}>
|
|
69
|
+
<RouterProvider router={router}>
|
|
70
|
+
</RouterProvider>
|
|
71
|
+
</Provider>
|
|
72
|
+
);
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
Refer to [exported packages](./src/index.js) to see all components and functions you can use.
|