@bigbinary/neeto-tags-frontend 0.0.12 → 0.0.13
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/package.json +1 -1
- package/readme.md +107 -0
package/package.json
CHANGED
package/readme.md
ADDED
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
# @bigbinary/neeto-tags-frontend
|
|
2
|
+
|
|
3
|
+
neetoTagsFrontend is the library that adds dashboard for managing tags across neeto products.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```zsh
|
|
8
|
+
yarn add @bigbinary/neeto-tags-frontend
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
**neetoTagsFrontend** has a few peer dependencies that are required for the proper
|
|
12
|
+
functioning of the package. Install all the peer dependencies using the below
|
|
13
|
+
command:
|
|
14
|
+
|
|
15
|
+
```zsh
|
|
16
|
+
yarn add @bigbinary/neetoui @bigbinary/neeto-icons ramda@^0.27.1 classnames@^2.3.1
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
```jsx
|
|
22
|
+
import React from "react";
|
|
23
|
+
|
|
24
|
+
import NeetoTags from "@bigbinary/neeto-tags-frontend";
|
|
25
|
+
|
|
26
|
+
const App = () => {
|
|
27
|
+
const tagTypes = [
|
|
28
|
+
{
|
|
29
|
+
id: 1,
|
|
30
|
+
label: "Ticket",
|
|
31
|
+
description: "Manage Ticket Tags",
|
|
32
|
+
url: "http://localhost:3000/api/v1/ticket/tags",
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
id: 2,
|
|
36
|
+
label: "Contact",
|
|
37
|
+
description: "Manage Contact Tags",
|
|
38
|
+
url: "/contacts",
|
|
39
|
+
columns: [
|
|
40
|
+
{
|
|
41
|
+
title: "Visitor Count",
|
|
42
|
+
dataIndex: "visitor_count",
|
|
43
|
+
key: "visitor_count",
|
|
44
|
+
align: "center",
|
|
45
|
+
width: "20%",
|
|
46
|
+
},
|
|
47
|
+
],
|
|
48
|
+
},
|
|
49
|
+
];
|
|
50
|
+
|
|
51
|
+
const breadcrumbs = [
|
|
52
|
+
{
|
|
53
|
+
text: "General Setting",
|
|
54
|
+
link: "/general/settings",
|
|
55
|
+
},
|
|
56
|
+
].map(({ link, text }, index) => (
|
|
57
|
+
<div className="neeto-ui-header__breadcrumb" key={index}>
|
|
58
|
+
<Link to={link}>
|
|
59
|
+
<Typography
|
|
60
|
+
lineHeight="tight"
|
|
61
|
+
style="h2"
|
|
62
|
+
weight="semibold"
|
|
63
|
+
data-test-id={text}
|
|
64
|
+
data-cy={text}
|
|
65
|
+
>
|
|
66
|
+
{text}
|
|
67
|
+
</Typography>
|
|
68
|
+
</Link>
|
|
69
|
+
<Right className="neeto-ui-header__breadcrumb-separator" />
|
|
70
|
+
</div>
|
|
71
|
+
);
|
|
72
|
+
|
|
73
|
+
return <NeetoTags tagTypes={tagTypes} breadcrumbs={breadcrumbs} />;
|
|
74
|
+
};
|
|
75
|
+
export default App;
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
Here `tagTypes` is an array of objects which denotes different type of tags present in the application. For example, If we have an application where the ticket and visitor entity have tags assocaited with it. We can pass information about them in object of arrays.
|
|
79
|
+
The object must have four fields `id`, `label`, `descriptions` and `url`. Along with them an optional key is `columns` for adding more columns to the table. The corresponding api should support it.
|
|
80
|
+
|
|
81
|
+
There is one more prop `breadcrumbs`. which will be used in the header and prepended with tag name. In the example `General Setting` breadcrumb is being used, so the header will be:
|
|
82
|
+
|
|
83
|
+
```
|
|
84
|
+
General Setting > Ticket
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
for ticket.
|
|
88
|
+
|
|
89
|
+
## Props
|
|
90
|
+
|
|
91
|
+
1. **tagTypes**: An array of objects that define tag label, endpoint url, id and description:
|
|
92
|
+
|
|
93
|
+
**id**: unique `number` amongst array.
|
|
94
|
+
**label**: label for the entity whose dashboard needs to be show.
|
|
95
|
+
**description**: basic description for the entity.
|
|
96
|
+
**url**: endpoint for the crud apis.
|
|
97
|
+
**columns**: array for additional columns to be added in the table.
|
|
98
|
+
|
|
99
|
+
2. **breadcrumbs**: Breadcrumbs for the header of dashboard.
|
|
100
|
+
|
|
101
|
+
## Development
|
|
102
|
+
|
|
103
|
+
Install all the dependencies by executing the following command
|
|
104
|
+
|
|
105
|
+
```zsh
|
|
106
|
+
yarn install
|
|
107
|
+
```
|