@bigbinary/neetoui 2.0.89 → 2.0.93

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.
Files changed (36) hide show
  1. package/package.json +2 -2
  2. package/v2/formik.js +2 -2
  3. package/v2/index.js +2 -2
  4. package/v2/layouts.js +5 -5
  5. package/stories/Alert.stories.jsx +0 -38
  6. package/stories/Avatar.stories.jsx +0 -178
  7. package/stories/Button.stories.jsx +0 -451
  8. package/stories/Callout.stories.jsx +0 -37
  9. package/stories/Checkout.stories.jsx +0 -46
  10. package/stories/Color.stories.mdx +0 -170
  11. package/stories/Dropdown.stories.jsx +0 -104
  12. package/stories/Header.stories.jsx +0 -45
  13. package/stories/HelpersBorderColor.stories.mdx +0 -162
  14. package/stories/HelpersBoxShadows.stories.mdx +0 -83
  15. package/stories/HelpersColor.stories.mdx +0 -170
  16. package/stories/Iconography.stories.jsx +0 -120
  17. package/stories/Input.stories.jsx +0 -187
  18. package/stories/Introduction.stories.mdx +0 -103
  19. package/stories/Label.stories.jsx +0 -29
  20. package/stories/Layouts.stories.jsx +0 -246
  21. package/stories/MenuBar.stories.jsx +0 -119
  22. package/stories/Modal.stories.jsx +0 -183
  23. package/stories/PageLoader.stories.jsx +0 -41
  24. package/stories/Pagination.stories.jsx +0 -26
  25. package/stories/Pane.stories.jsx +0 -67
  26. package/stories/Radio.stories.jsx +0 -34
  27. package/stories/Select.stories.jsx +0 -162
  28. package/stories/Sidebar.stories.jsx +0 -123
  29. package/stories/SubHeader.stories.jsx +0 -39
  30. package/stories/Switch.stories.jsx +0 -52
  31. package/stories/Tab.stories.jsx +0 -71
  32. package/stories/Tag.stories.jsx +0 -149
  33. package/stories/Textarea.stories.jsx +0 -55
  34. package/stories/Toastr.stories.jsx +0 -63
  35. package/stories/Tooltip.stories.jsx +0 -137
  36. package/stories/Typography.stories.jsx +0 -134
package/stories/Alert.stories.jsx DELETED
@@ -1,38 +0,0 @@
1
- import React, { useState } from "react";
2
-
3
- import Alert from "../lib/components/Alert";
4
- import Button from "../lib/components/Button";
5
-
6
- export default {
7
- title: "Overlays/Alert",
8
- component: Alert,
9
- parameters: {
10
- layout: "padded",
11
- docs: {
12
- description: {
13
- component: '`import { Alert } from "@bigbinary/neetoui/v2";`',
14
- },
15
- },
16
- },
17
- };
18
-
19
- export const Alerts = () => {
20
- const [open, setOpen] = useState(false);
21
-
22
- return (
23
- <div className="p-4">
24
- <Button
25
- label="Click here to open Alert Component"
26
- style="primary"
27
- onClick={() => setOpen(true)}
28
- />
29
- <Alert
30
- isOpen={open}
31
- title="Alert Title"
32
- message="This is an alert message"
33
- onClose={() => setOpen(false)}
34
- onSubmit={() => setOpen(false)}
35
- />
36
- </div>
37
- );
38
- };
package/stories/Avatar.stories.jsx DELETED
@@ -1,178 +0,0 @@
1
- import React from "react";
2
-
3
- import Avatar from "../lib/components/Avatar";
4
-
5
- const imageUrl = "https://i.pravatar.cc/300";
6
- const onClick = () => {
7
- alert("onClick event!");
8
- };
9
-
10
- export default {
11
- title: "Components/Avatar",
12
- component: Avatar,
13
- parameters: {
14
- layout: "padded",
15
- docs: {
16
- description: {
17
- component: '`import { Avatar } from "@bigbinary/neetoui/v2";`',
18
- },
19
- },
20
- },
21
- };
22
-
23
- const Template = (args) => <Avatar {...args} />;
24
-
25
- export const Small = Template.bind({});
26
- Small.args = {
27
- onClick: { onClick },
28
- user: { name: "neeto UI" },
29
- size: "small",
30
- };
31
-
32
- export const Medium = Template.bind({});
33
- Medium.args = {
34
- onClick: { onClick },
35
- user: { name: "neeto UI" },
36
- size: "medium",
37
- };
38
-
39
- export const Large = Template.bind({});
40
- Large.args = {
41
- onClick: { onClick },
42
- user: { name: "neeto UI" },
43
- size: "large",
44
- };
45
-
46
- export const Xlarge = Template.bind({});
47
- Xlarge.args = {
48
- onClick: { onClick },
49
- user: { name: "neeto UI" },
50
- size: "xlarge",
51
- };
52
-
53
- export const WithCustomClassName = Template.bind({});
54
- WithCustomClassName.storyName="With Custom className"
55
- WithCustomClassName.args = {
56
- onClick: { onClick },
57
- user: { name: "neeto UI" },
58
- size: "xlarge",
59
- className: "cursor-pointer"
60
- };
61
-
62
- export const AllVariants = () => {
63
- const imageUrl = "https://i.pravatar.cc/300";
64
- const onClick = () => {
65
- alert("onClick event!");
66
- };
67
-
68
- return (
69
- <div className="p-6">
70
- <div className="flex p-4 space-x-4 border border-indigo-500 border-dashed">
71
- <div className="flex flex-col p-2 space-y-4">
72
- <Avatar
73
- onClick={onClick}
74
- user={{ name: "Akkshay Lawrence" }}
75
- size="small"
76
- />
77
- <Avatar
78
- onClick={onClick}
79
- user={{ name: "Vinay V Chandran" }}
80
- size="medium"
81
- />
82
- <Avatar
83
- onClick={onClick}
84
- user={{ name: "Neeraj Singh" }}
85
- size="large"
86
- />
87
- <Avatar
88
- onClick={onClick}
89
- user={{ name: "Goutham Subramanyam" }}
90
- size="xlarge"
91
- />
92
- </div>
93
- <div className="flex flex-col p-2 space-y-4">
94
- <Avatar
95
- onClick={onClick}
96
- user={{ name: "Akkshay Lawrence" }}
97
- size="small"
98
- status="online"
99
- isSquare
100
- />
101
- <Avatar
102
- onClick={onClick}
103
- user={{ name: "Vinay V" }}
104
- size="medium"
105
- status="idle"
106
- isSquare
107
- />
108
- <Avatar
109
- onClick={onClick}
110
- user={{ name: "Neeraj Singh" }}
111
- size="large"
112
- status="offline"
113
- isSquare
114
- />
115
- <Avatar
116
- onClick={onClick}
117
- user={{ name: "Goutham Subramanyam" }}
118
- size="xlarge"
119
- status="online"
120
- isSquare
121
- />
122
- </div>
123
- <div className="flex flex-col p-2 space-y-4">
124
- <Avatar
125
- onClick={onClick}
126
- user={{ name: "Akkshay Lawrence", imageUrl }}
127
- status="online"
128
- size="small"
129
- />
130
- <Avatar
131
- onClick={onClick}
132
- user={{ name: "Vinay V", imageUrl }}
133
- status="idle"
134
- size="medium"
135
- />
136
- <Avatar
137
- onClick={onClick}
138
- user={{ name: "Neeraj Singh", imageUrl }}
139
- status="offline"
140
- size="large"
141
- />
142
- <Avatar
143
- onClick={onClick}
144
- user={{ name: "Goutham Subramanyam", imageUrl }}
145
- status="online"
146
- size="xlarge"
147
- />
148
- </div>
149
- <div className="flex flex-col p-2 space-y-4">
150
- <Avatar
151
- onClick={onClick}
152
- user={{ name: "Akkshay Lawrence", imageUrl }}
153
- size="small"
154
- isSquare
155
- />
156
- <Avatar
157
- onClick={onClick}
158
- user={{ name: "Vinay V", imageUrl }}
159
- size="medium"
160
- isSquare
161
- />
162
- <Avatar
163
- onClick={onClick}
164
- user={{ name: "Neeraj Singh", imageUrl }}
165
- size="large"
166
- isSquare
167
- />
168
- <Avatar
169
- onClick={onClick}
170
- user={{ name: "Goutham Subramanyam", imageUrl }}
171
- size="xlarge"
172
- isSquare
173
- />
174
- </div>
175
- </div>
176
- </div>
177
- );
178
- };
package/stories/Button.stories.jsx DELETED
@@ -1,451 +0,0 @@
1
- import React, { useState } from "react";
2
- import { Keyboard } from "@bigbinary/neeto-icons";
3
-
4
- import Button from "../lib/components/Button";
5
-
6
- export default {
7
- title: "Components/Button",
8
- component: Button,
9
- parameters: {
10
- layout: "padded",
11
- docs: {
12
- description: {
13
- component: '`import { Button } from "@bigbinary/neetoui/v2";`',
14
- },
15
- },
16
- },
17
- };
18
-
19
- const Template = (args) => <Button {...args} />;
20
-
21
- export const Primary = Template.bind({});
22
- Primary.args = {
23
- style: "primary",
24
- label: "Button",
25
- };
26
-
27
- export const Secondary = Template.bind({});
28
- Secondary.args = {
29
- style: "secondary",
30
- label: "Button",
31
- };
32
-
33
- export const Danger = Template.bind({});
34
- Danger.args = {
35
- style: "danger",
36
- label: "Button",
37
- };
38
-
39
- export const Text = Template.bind({});
40
- Text.args = {
41
- style: "text",
42
- label: "Button",
43
- };
44
-
45
- export const Link = Template.bind({});
46
- Link.args = {
47
- style: "link",
48
- label: "Button",
49
- };
50
-
51
- export const Tooltip = Template.bind({});
52
- Tooltip.args = {
53
- label: "Tooltip button",
54
- tooltipProps: {
55
- content: "Top",
56
- placement: "top",
57
- },
58
- };
59
-
60
- export const AllVariants = () => {
61
- const [loading, setLoading] = useState(false);
62
- const toggle = () => {
63
- setLoading(!loading);
64
- };
65
- return (
66
- <div className="w-full">
67
- <div className="p-6 space-y-6">
68
- <Button onClick={toggle} label="Toggle Loading State" />
69
- <div className="p-4 space-y-8 border border-indigo-500 border-dashed">
70
- <h2 className="text-xl">Styles</h2>
71
- <div className="flex gap-10">
72
- <div className="flex flex-col gap-6 items-start">
73
- <Button
74
- loading={loading}
75
- onClick={toggle}
76
- size="large"
77
- label="Primary"
78
- />
79
- <Button
80
- loading={loading}
81
- onClick={toggle}
82
- size="large"
83
- label="Primary"
84
- disabled
85
- />
86
- <Button
87
- loading={loading}
88
- onClick={toggle}
89
- size="large"
90
- label="Primary"
91
- icon={Keyboard}
92
- />
93
- <Button
94
- loading={loading}
95
- onClick={toggle}
96
- size="large"
97
- label="Primary"
98
- icon={Keyboard}
99
- iconPosition="left"
100
- />
101
- <Button
102
- loading
103
- onClick={toggle}
104
- size="large"
105
- label="Primary"
106
- icon={Keyboard}
107
- />
108
- <Button
109
- loading
110
- onClick={toggle}
111
- size="large"
112
- label="Primary"
113
- icon={Keyboard}
114
- iconPosition="left"
115
- />
116
- <Button loading onClick={toggle} size="large" icon={Keyboard} />
117
- </div>
118
- <div className="flex flex-col gap-6 items-start">
119
- <Button
120
- loading={loading}
121
- onClick={toggle}
122
- size="large"
123
- label="Secondary"
124
- style="secondary"
125
- />
126
- <Button
127
- loading={loading}
128
- onClick={toggle}
129
- size="large"
130
- label="Secondary"
131
- style="secondary"
132
- disabled
133
- />
134
- <Button
135
- loading={loading}
136
- onClick={toggle}
137
- size="large"
138
- label="Secondary"
139
- style="secondary"
140
- icon={Keyboard}
141
- />
142
- <Button
143
- loading={loading}
144
- onClick={toggle}
145
- size="large"
146
- label="Secondary"
147
- style="secondary"
148
- icon={Keyboard}
149
- iconPosition="left"
150
- />
151
- <Button
152
- loading
153
- onClick={toggle}
154
- size="large"
155
- label="Secondary"
156
- style="secondary"
157
- icon={Keyboard}
158
- />
159
- <Button
160
- loading
161
- onClick={toggle}
162
- size="large"
163
- label="Secondary"
164
- style="secondary"
165
- icon={Keyboard}
166
- iconPosition="left"
167
- />
168
- <Button
169
- loading
170
- onClick={toggle}
171
- size="large"
172
- style="secondary"
173
- icon={Keyboard}
174
- iconPosition="left"
175
- />
176
- </div>
177
- <div className="flex flex-col gap-6 items-start">
178
- <Button
179
- loading={loading}
180
- onClick={toggle}
181
- size="large"
182
- label="Danger"
183
- style="danger"
184
- />
185
- <Button
186
- loading={loading}
187
- onClick={toggle}
188
- size="large"
189
- label="Danger"
190
- style="danger"
191
- disabled
192
- />
193
- <Button
194
- loading={loading}
195
- onClick={toggle}
196
- size="large"
197
- label="Danger"
198
- style="danger"
199
- icon={Keyboard}
200
- />
201
- <Button
202
- loading={loading}
203
- onClick={toggle}
204
- size="large"
205
- label="Danger"
206
- style="danger"
207
- icon={Keyboard}
208
- iconPosition="left"
209
- />
210
- <Button
211
- loading
212
- onClick={toggle}
213
- size="large"
214
- label="Danger"
215
- style="danger"
216
- icon={Keyboard}
217
- />
218
- <Button
219
- loading
220
- onClick={toggle}
221
- size="large"
222
- label="Danger"
223
- style="danger"
224
- icon={Keyboard}
225
- iconPosition="left"
226
- />
227
- <Button
228
- loading
229
- onClick={toggle}
230
- size="large"
231
- style="danger"
232
- icon={Keyboard}
233
- iconPosition="left"
234
- />
235
- </div>
236
- <div className="flex flex-col gap-6 items-start">
237
- <Button
238
- loading={loading}
239
- onClick={toggle}
240
- size="large"
241
- label="Text"
242
- style="text"
243
- />
244
- <Button
245
- loading={loading}
246
- onClick={toggle}
247
- size="large"
248
- label="Text"
249
- style="text"
250
- disabled
251
- />
252
- <Button
253
- loading={loading}
254
- onClick={toggle}
255
- size="large"
256
- label="Text"
257
- style="text"
258
- icon={Keyboard}
259
- />
260
- <Button
261
- loading={loading}
262
- onClick={toggle}
263
- size="large"
264
- label="Text"
265
- style="text"
266
- icon={Keyboard}
267
- iconPosition="left"
268
- />
269
- <Button
270
- loading
271
- onClick={toggle}
272
- size="large"
273
- label="Text"
274
- style="text"
275
- icon={Keyboard}
276
- />
277
- <Button
278
- loading
279
- onClick={toggle}
280
- size="large"
281
- label="Text"
282
- style="text"
283
- icon={Keyboard}
284
- iconPosition="left"
285
- />
286
- <Button
287
- loading
288
- onClick={toggle}
289
- size="large"
290
- style="text"
291
- icon={Keyboard}
292
- />
293
- </div>
294
- <div className="flex flex-col gap-6 items-start">
295
- <Button size="large" label="Link" style="link" />
296
- <Button size="large" label="Link" style="link" disabled />
297
- <Button size="large" label="Link" style="link" icon={Keyboard} />
298
- <Button
299
- size="large"
300
- label="Link"
301
- style="link"
302
- icon={Keyboard}
303
- iconPosition="left"
304
- />
305
- <Button
306
- loading
307
- size="large"
308
- label="Link"
309
- style="link"
310
- icon={Keyboard}
311
- iconPosition="left"
312
- />
313
- <Button
314
- loading
315
- size="large"
316
- label="Link"
317
- style="link"
318
- icon={Keyboard}
319
- />
320
- <Button loading size="large" style="link" icon={Keyboard} />
321
- </div>
322
- </div>
323
- </div>
324
- <div className="p-4 space-y-8 border border-indigo-500 border-dashed">
325
- <h2 className="text-xl">Sizes</h2>
326
- <div className="flex flex-row flex-wrap items-center justify-start gap-4">
327
- <Button
328
- loading={loading}
329
- onClick={toggle}
330
- size="large"
331
- label="Large"
332
- style="primary"
333
- />
334
- <Button
335
- loading={loading}
336
- onClick={toggle}
337
- size="large"
338
- style="primary"
339
- icon={Keyboard}
340
- />
341
- <Button
342
- loading={loading}
343
- onClick={toggle}
344
- size="large"
345
- label="Large"
346
- style="secondary"
347
- />
348
- <Button
349
- loading={loading}
350
- onClick={toggle}
351
- size="large"
352
- style="secondary"
353
- icon={Keyboard}
354
- />
355
- <Button
356
- loading={loading}
357
- onClick={toggle}
358
- size="large"
359
- label="Large"
360
- style="danger"
361
- />
362
- <Button
363
- loading={loading}
364
- onClick={toggle}
365
- size="large"
366
- style="danger"
367
- icon={Keyboard}
368
- />
369
- <Button
370
- loading={loading}
371
- onClick={toggle}
372
- size="large"
373
- label="Large"
374
- style="text"
375
- />
376
- <Button
377
- loading={loading}
378
- onClick={toggle}
379
- size="large"
380
- style="text"
381
- icon={Keyboard}
382
- />
383
- <Button
384
- loading={loading}
385
- onClick={toggle}
386
- size="large"
387
- label="Large"
388
- style="link"
389
- />
390
- </div>
391
- <div className="flex flex-row flex-wrap items-center justify-start gap-4">
392
- <Button
393
- loading={loading}
394
- onClick={toggle}
395
- label="Default"
396
- style="primary"
397
- />
398
- <Button
399
- loading={loading}
400
- onClick={toggle}
401
- style="primary"
402
- icon={Keyboard}
403
- />
404
- <Button
405
- loading={loading}
406
- onClick={toggle}
407
- label="Default"
408
- style="secondary"
409
- />
410
- <Button
411
- loading={loading}
412
- onClick={toggle}
413
- style="secondary"
414
- icon={Keyboard}
415
- />
416
- <Button
417
- loading={loading}
418
- onClick={toggle}
419
- label="Large"
420
- style="danger"
421
- />
422
- <Button
423
- loading={loading}
424
- onClick={toggle}
425
- style="danger"
426
- icon={Keyboard}
427
- />
428
- <Button
429
- loading={loading}
430
- onClick={toggle}
431
- label="Default"
432
- style="text"
433
- />
434
- <Button
435
- loading={loading}
436
- onClick={toggle}
437
- style="text"
438
- icon={Keyboard}
439
- />
440
- <Button
441
- loading={loading}
442
- onClick={toggle}
443
- label="Default"
444
- style="link"
445
- />
446
- </div>
447
- </div>
448
- </div>
449
- </div>
450
- );
451
- };
package/stories/Callout.stories.jsx DELETED
@@ -1,37 +0,0 @@
1
- import React from "react";
2
- import { Info, Warning } from "@bigbinary/neeto-icons";
3
-
4
- import Callout from "../lib/components/Callout";
5
-
6
- export default {
7
- title: "Components/Callout",
8
- component: Callout,
9
- parameters: {
10
- layout: "padded",
11
- docs: {
12
- description: {
13
- component: '`import { Callout } from "@bigbinary/neetoui/v2";`',
14
- },
15
- },
16
- },
17
- };
18
-
19
- export const InfoCallout = () => {
20
- return (
21
- <Callout style="info" icon={Info}>
22
- This is an info callout!
23
- </Callout>
24
- );
25
- };
26
-
27
- export const WarningCallout = () => {
28
- return (
29
- <Callout style="warning" icon={Warning}>
30
- This is an info callout!
31
- </Callout>
32
- );
33
- };
34
-
35
- export const DangerCallout = () => {
36
- return <Callout style="danger">This is an info callout!</Callout>;
37
- };