@bigbinary/neetoui 2.0.61 → 2.0.71
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/.storybook/preview.js +2 -2
- package/package.json +1 -1
- package/stories/Color.stories.mdx +6 -6
- package/stories/Dropdown.stories.jsx +20 -0
- package/stories/Header.stories.jsx +58 -0
- package/stories/HelpersBorderColor.stories.mdx +162 -0
- package/stories/HelpersBoxShadows.stories.mdx +83 -0
- package/stories/HelpersColor.stories.mdx +170 -0
- package/stories/Iconography.stories.jsx +4 -4
- package/stories/Input.stories.jsx +6 -21
- package/stories/Sidebar.stories.jsx +36 -24
- package/stories/SubHeader.stories.jsx +39 -0
- package/stories/Tag.stories.jsx +82 -16
- package/v2/formik.js +3 -3
- package/v2/index.js +5 -5
- package/v2/layouts.js +4 -4
|
@@ -1,13 +1,22 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
|
|
3
|
-
import
|
|
3
|
+
import Sidebar from "../lib/components/layouts/Sidebar";
|
|
4
4
|
import { NAV_LINKS, COMPONENT_MAPPING } from "../example/src/constants";
|
|
5
5
|
|
|
6
6
|
export default {
|
|
7
7
|
title: "Layouts/Sidebar",
|
|
8
|
+
component: Sidebar,
|
|
9
|
+
parameters: {
|
|
10
|
+
layout: "fullscreen",
|
|
11
|
+
docs: {
|
|
12
|
+
description: {
|
|
13
|
+
component: '`import { Sidebar } from "@bigbinary/neetoui/v2/layouts";`',
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
},
|
|
8
17
|
};
|
|
9
18
|
|
|
10
|
-
|
|
19
|
+
const Template = (args) => {
|
|
11
20
|
let ROUTER_LINKS = [];
|
|
12
21
|
NAV_LINKS.map((navLink) => {
|
|
13
22
|
if (navLink.items) {
|
|
@@ -21,28 +30,7 @@ export const Sidenav = () => {
|
|
|
21
30
|
return (
|
|
22
31
|
<Router>
|
|
23
32
|
<div className="flex flex-row items-start justify-start">
|
|
24
|
-
<Sidebar
|
|
25
|
-
organizationInfo={{
|
|
26
|
-
name: "neetoUI",
|
|
27
|
-
subdomain: "neetoui.netlify.app",
|
|
28
|
-
}}
|
|
29
|
-
navLinks={NAV_LINKS}
|
|
30
|
-
profileInfo={{
|
|
31
|
-
name: "Kieran Miller",
|
|
32
|
-
email: "kieranmiller@gmail.com",
|
|
33
|
-
imageUrl: "https://randomuser.me/api/portraits/women/90.jpg",
|
|
34
|
-
dropdownProps: [
|
|
35
|
-
{
|
|
36
|
-
label: "Edit",
|
|
37
|
-
onClick: () => {},
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
label: "Logout",
|
|
41
|
-
onClick: () => {},
|
|
42
|
-
},
|
|
43
|
-
],
|
|
44
|
-
}}
|
|
45
|
-
/>
|
|
33
|
+
<Sidebar {...args} />
|
|
46
34
|
<div className="relative flex flex-col flex-grow h-screen overflow-auto">
|
|
47
35
|
<Switch>
|
|
48
36
|
{ROUTER_LINKS &&
|
|
@@ -61,3 +49,27 @@ export const Sidenav = () => {
|
|
|
61
49
|
</Router>
|
|
62
50
|
);
|
|
63
51
|
};
|
|
52
|
+
|
|
53
|
+
export const Sidenav = Template.bind({});
|
|
54
|
+
Sidenav.args = {
|
|
55
|
+
organizationInfo: {
|
|
56
|
+
name: "neetoUI",
|
|
57
|
+
subdomain: "neetoui.netlify.app",
|
|
58
|
+
},
|
|
59
|
+
navLinks: NAV_LINKS,
|
|
60
|
+
profileInfo: {
|
|
61
|
+
name: "Kieran Miller",
|
|
62
|
+
email: "kieranmiller@gmail.com",
|
|
63
|
+
imageUrl: "https://randomuser.me/api/portraits/women/90.jpg",
|
|
64
|
+
dropdownProps: [
|
|
65
|
+
{
|
|
66
|
+
label: "Edit",
|
|
67
|
+
onClick: () => {},
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
label: "Logout",
|
|
71
|
+
onClick: () => {},
|
|
72
|
+
},
|
|
73
|
+
],
|
|
74
|
+
},
|
|
75
|
+
};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
|
|
3
|
+
import SubHeader from "../lib/components/layouts/SubHeader";
|
|
4
|
+
|
|
5
|
+
export default {
|
|
6
|
+
title: "Layouts/SubHeader",
|
|
7
|
+
component: SubHeader,
|
|
8
|
+
parameters: {
|
|
9
|
+
layout: "padded",
|
|
10
|
+
docs: {
|
|
11
|
+
description: {
|
|
12
|
+
component:
|
|
13
|
+
'`import { SubHeader } from "@bigbinary/neetoui/v2/layouts";`',
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export const BasicUsage = () => {
|
|
20
|
+
const [searchString, setSearchString] = useState("")
|
|
21
|
+
return (
|
|
22
|
+
<SubHeader
|
|
23
|
+
searchProps={{
|
|
24
|
+
value: searchString,
|
|
25
|
+
onChange: (e) => setSearchString(e.target.value),
|
|
26
|
+
}}
|
|
27
|
+
deleteButtonProps={{
|
|
28
|
+
count: 0,
|
|
29
|
+
selectedIDs: [],
|
|
30
|
+
onClick: () => {},
|
|
31
|
+
}}
|
|
32
|
+
disableButtonProps={{
|
|
33
|
+
count: 0,
|
|
34
|
+
selectedIDs: [],
|
|
35
|
+
onClick: () => {},
|
|
36
|
+
}}
|
|
37
|
+
/>
|
|
38
|
+
)
|
|
39
|
+
}
|
package/stories/Tag.stories.jsx
CHANGED
|
@@ -16,28 +16,84 @@ export default {
|
|
|
16
16
|
},
|
|
17
17
|
};
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
const Template = (args) => <Tag {...args} />;
|
|
20
|
+
|
|
21
|
+
export const Default = Template.bind({});
|
|
22
|
+
Default.args = {
|
|
23
|
+
label: "Label",
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export const TagColorStory = (props) => (
|
|
27
|
+
<div className="p-6">
|
|
28
|
+
<Tag {...props} />
|
|
29
|
+
</div>
|
|
30
|
+
);
|
|
31
|
+
|
|
32
|
+
TagColorStory.storyName = "Tag with Color";
|
|
33
|
+
TagColorStory.args = {
|
|
34
|
+
color: "green",
|
|
35
|
+
style: "outline",
|
|
36
|
+
label: "Label",
|
|
37
|
+
size: "large",
|
|
38
|
+
onClose: null,
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export const AllVariants = () => {
|
|
20
42
|
const onClose = () => alert("onClose Triggered!");
|
|
21
43
|
|
|
22
44
|
return (
|
|
23
45
|
<div className="p-6">
|
|
24
46
|
<div className="p-4 space-y-8 border border-indigo-500 border-dashed">
|
|
25
|
-
<div className="flex flex-col space-y-6
|
|
26
|
-
<div className="flex flex-row
|
|
47
|
+
<div className="flex flex-col p-2 space-y-6">
|
|
48
|
+
<div className="flex flex-row items-start justify-start space-x-4">
|
|
27
49
|
<h5>Outline Small: </h5>
|
|
28
50
|
<Tag label="Label" />
|
|
29
51
|
<Tag icon={Favorite} label="Label" />
|
|
30
52
|
<Tag onClose={onClose} label="Label" />
|
|
31
53
|
<Tag icon={Favorite} onClose={onClose} label="Label" />
|
|
32
54
|
</div>
|
|
33
|
-
<div className="flex flex-row
|
|
55
|
+
<div className="flex flex-row items-start justify-start space-x-4">
|
|
34
56
|
<h5>Outline Large: </h5>
|
|
35
57
|
<Tag size="large" label="Label" />
|
|
36
58
|
<Tag size="large" icon={Favorite} label="Label" />
|
|
37
59
|
<Tag size="large" onClose={onClose} label="Label" />
|
|
38
60
|
<Tag size="large" icon={Favorite} onClose={onClose} label="Label" />
|
|
39
61
|
</div>
|
|
40
|
-
<div className="flex flex-row
|
|
62
|
+
<div className="flex flex-row items-start justify-start space-x-4">
|
|
63
|
+
<h5>Colored Outline Large : </h5>
|
|
64
|
+
<Tag
|
|
65
|
+
style="outline"
|
|
66
|
+
size="large"
|
|
67
|
+
color="grey"
|
|
68
|
+
icon={Favorite}
|
|
69
|
+
onClose={onClose}
|
|
70
|
+
label="Label"
|
|
71
|
+
/>
|
|
72
|
+
<Tag style="outline" size="large" color="red" label="Label" />
|
|
73
|
+
<Tag
|
|
74
|
+
style="outline"
|
|
75
|
+
size="large"
|
|
76
|
+
color="green"
|
|
77
|
+
icon={Favorite}
|
|
78
|
+
label="Label"
|
|
79
|
+
/>
|
|
80
|
+
<Tag
|
|
81
|
+
style="outline"
|
|
82
|
+
size="large"
|
|
83
|
+
color="blue"
|
|
84
|
+
onClose={onClose}
|
|
85
|
+
label="Label"
|
|
86
|
+
/>
|
|
87
|
+
<Tag
|
|
88
|
+
style="outline"
|
|
89
|
+
size="large"
|
|
90
|
+
color="yellow"
|
|
91
|
+
icon={Favorite}
|
|
92
|
+
onClose={onClose}
|
|
93
|
+
label="Label"
|
|
94
|
+
/>
|
|
95
|
+
</div>
|
|
96
|
+
<div className="flex flex-row items-start justify-start space-x-4">
|
|
41
97
|
<h5>Solid Small: </h5>
|
|
42
98
|
<Tag style="solid" label="Label" />
|
|
43
99
|
<Tag style="solid" icon={Favorite} label="Label" />
|
|
@@ -49,7 +105,7 @@ export const Tags = () => {
|
|
|
49
105
|
label="Label"
|
|
50
106
|
/>
|
|
51
107
|
</div>
|
|
52
|
-
<div className="flex flex-row
|
|
108
|
+
<div className="flex flex-row items-start justify-start space-x-4">
|
|
53
109
|
<h5>Solid Large : </h5>
|
|
54
110
|
<Tag style="solid" size="large" label="Label" />
|
|
55
111
|
<Tag style="solid" size="large" icon={Favorite} label="Label" />
|
|
@@ -62,19 +118,29 @@ export const Tags = () => {
|
|
|
62
118
|
label="Label"
|
|
63
119
|
/>
|
|
64
120
|
</div>
|
|
65
|
-
<div className="flex flex-row
|
|
121
|
+
<div className="flex flex-row items-start justify-start space-x-4">
|
|
122
|
+
<h5>Solid With Colors : </h5>
|
|
123
|
+
<Tag size="large" style="solid" label="Label" color="grey" />
|
|
124
|
+
<Tag size="large" style="solid" label="Label" color="red" />
|
|
125
|
+
<Tag size="large" style="solid" label="Label" color="green" />
|
|
126
|
+
<Tag size="large" style="solid" label="Label" color="blue" />
|
|
127
|
+
<Tag size="large" style="solid" label="Label" color="yellow" />
|
|
128
|
+
</div>
|
|
129
|
+
<div className="flex flex-row items-start justify-start space-x-4">
|
|
66
130
|
<h5>With Indicator : </h5>
|
|
67
|
-
<Tag label="Label"
|
|
68
|
-
<Tag label="Label"
|
|
69
|
-
<Tag label="Label"
|
|
70
|
-
<Tag label="Label"
|
|
131
|
+
<Tag label="Label" indicatorColor="green" />
|
|
132
|
+
<Tag label="Label" indicatorColor="yellow" />
|
|
133
|
+
<Tag label="Label" indicatorColor="blue" />
|
|
134
|
+
<Tag label="Label" indicatorColor="red" />
|
|
135
|
+
<Tag label="Label" indicatorColor="grey" />
|
|
71
136
|
</div>
|
|
72
|
-
<div className="flex flex-row
|
|
137
|
+
<div className="flex flex-row items-start justify-start space-x-4">
|
|
73
138
|
<h5>With Indicator Large : </h5>
|
|
74
|
-
<Tag size="large" label="Label"
|
|
75
|
-
<Tag size="large" label="Label"
|
|
76
|
-
<Tag size="large" label="Label"
|
|
77
|
-
<Tag size="large" label="Label"
|
|
139
|
+
<Tag size="large" label="Label" indicatorColor="green" />
|
|
140
|
+
<Tag size="large" label="Label" indicatorColor="yellow" />
|
|
141
|
+
<Tag size="large" label="Label" indicatorColor="blue" />
|
|
142
|
+
<Tag size="large" label="Label" indicatorColor="red" />
|
|
143
|
+
<Tag size="large" label="Label" indicatorColor="grey" />
|
|
78
144
|
</div>
|
|
79
145
|
</div>
|
|
80
146
|
</div>
|