@qoretechnologies/reqore 0.40.3 → 0.40.5

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 (39) hide show
  1. package/__tests__/helpers/colors.test.tsx +16 -0
  2. package/build-storybook.log +119 -117
  3. package/dist/components/Button/index.d.ts.map +1 -1
  4. package/dist/components/Button/index.js +29 -3
  5. package/dist/components/Button/index.js.map +1 -1
  6. package/dist/components/Effect/index.d.ts +3 -0
  7. package/dist/components/Effect/index.d.ts.map +1 -1
  8. package/dist/components/Effect/index.js.map +1 -1
  9. package/dist/components/Tag/group.d.ts +2 -0
  10. package/dist/components/Tag/group.d.ts.map +1 -1
  11. package/dist/components/Tag/group.js +37 -3
  12. package/dist/components/Tag/group.js.map +1 -1
  13. package/dist/components/Tag/index.d.ts +1 -0
  14. package/dist/components/Tag/index.d.ts.map +1 -1
  15. package/dist/components/Tag/index.js +26 -15
  16. package/dist/components/Tag/index.js.map +1 -1
  17. package/dist/helpers/colors.d.ts +3 -2
  18. package/dist/helpers/colors.d.ts.map +1 -1
  19. package/dist/helpers/colors.js +25 -9
  20. package/dist/helpers/colors.js.map +1 -1
  21. package/dist/hooks/usePopover.d.ts.map +1 -1
  22. package/dist/hooks/usePopover.js +10 -9
  23. package/dist/hooks/usePopover.js.map +1 -1
  24. package/dist/hooks/useTooltip.js +1 -1
  25. package/dist/hooks/useTooltip.js.map +1 -1
  26. package/package.json +1 -1
  27. package/src/components/Button/index.tsx +57 -5
  28. package/src/components/Effect/index.tsx +3 -0
  29. package/src/components/Tag/group.tsx +20 -1
  30. package/src/components/Tag/index.tsx +21 -0
  31. package/src/helpers/colors.ts +35 -11
  32. package/src/hooks/usePopover.tsx +11 -9
  33. package/src/hooks/useTooltip.ts +1 -1
  34. package/src/stories/Button/Button.stories.tsx +21 -3
  35. package/src/stories/Message/Message.stories.tsx +9 -0
  36. package/src/stories/Popover/Popover.stories.tsx +35 -0
  37. package/src/stories/Tag/Tag.stories.tsx +275 -265
  38. package/src/stories/Tag/TagGroup.stories.tsx +13 -3
  39. package/tests.json +1 -1
package/src/stories/Tag/Tag.stories.tsx CHANGED
@@ -2,7 +2,7 @@ import { StoryFn, StoryObj } from '@storybook/react';
2
2
  import { noop } from 'lodash';
3
3
  import { IReqoreTagProps } from '../../components/Tag';
4
4
  import { IReqoreTagGroup } from '../../components/Tag/group';
5
- import { ReqoreTag, ReqoreTagGroup } from '../../index';
5
+ import { ReqoreTag, ReqoreTagGroup, ReqoreVerticalSpacer } from '../../index';
6
6
  import { StoryMeta } from '../utils';
7
7
  import { SizeArg, argManager } from '../utils/args';
8
8
 
@@ -68,273 +68,283 @@ type Story = StoryObj<typeof meta>;
68
68
 
69
69
  const Template: StoryFn<IReqoreTagProps> = (args) => {
70
70
  return (
71
- <ReqoreTagGroup>
72
- <ReqoreTag {...args} actions={null} onRemoveClick={null} rightIcon={null} label={1} />
73
- <ReqoreTag
74
- {...args}
75
- actions={null}
76
- onRemoveClick={null}
77
- rightIcon={null}
78
- label='Basic Tag'
79
- onClick={() => console.log('Tag clicked')}
80
- />
81
- <ReqoreTag
82
- {...args}
83
- actions={null}
84
- onRemoveClick={null}
85
- rightIcon={null}
86
- labelKey='Number'
87
- label={2}
88
- />
89
- <ReqoreTag label='With Icon' icon='AlarmWarningLine' {...args} />
90
- <ReqoreTag
91
- {...args}
92
- labelKey='Without label'
93
- icon='AlarmWarningLine'
94
- rightIcon='24HoursFill'
95
- />
96
- <ReqoreTag
97
- label='With Icon Colors'
98
- icon='AlarmWarningLine'
99
- {...args}
100
- iconColor='warning:lighten:2'
101
- />
102
- <ReqoreTag labelKey='Tag with' label='Label Key' icon='AlarmWarningLine' {...args} />
103
- <ReqoreTag labelKey='Key' label='value' {...args} />
104
- <ReqoreTag icon='QuestionAnswerLine' {...args} fixed />
105
- <ReqoreTag label='Disabled Tag' disabled icon='AlarmWarningLine' {...args} />
106
- <ReqoreTag
107
- label='300px Tag'
108
- width='300px'
109
- fixed
110
- icon='AlarmWarningLine'
111
- {...args}
112
- tooltip='I am wiiiiiiide'
113
- actions={[
114
- {
115
- icon: 'ErrorWarningLine',
116
- onClick: noop,
117
- intent: 'info',
118
- tooltip: {
119
- content: 'IF YOU CAN SEE ME ITS A BUG!!! I HAVE show: false',
120
- openOnMount: true,
121
- intent: 'danger',
71
+ <>
72
+ <ReqoreTagGroup>
73
+ <ReqoreTag {...args} actions={null} onRemoveClick={null} rightIcon={null} label={1} />
74
+ <ReqoreTag
75
+ {...args}
76
+ actions={null}
77
+ onRemoveClick={null}
78
+ rightIcon={null}
79
+ label='Basic Tag'
80
+ onClick={() => console.log('Tag clicked')}
81
+ />
82
+ <ReqoreTag
83
+ {...args}
84
+ actions={null}
85
+ onRemoveClick={null}
86
+ rightIcon={null}
87
+ labelKey='Number'
88
+ label={2}
89
+ />
90
+ <ReqoreTag label='With Icon' icon='AlarmWarningLine' {...args} />
91
+ <ReqoreTag
92
+ {...args}
93
+ labelKey='Without label'
94
+ icon='AlarmWarningLine'
95
+ rightIcon='24HoursFill'
96
+ />
97
+ <ReqoreTag
98
+ label='With Icon Colors'
99
+ icon='AlarmWarningLine'
100
+ {...args}
101
+ iconColor='warning:lighten:2'
102
+ />
103
+ <ReqoreTag labelKey='Tag with' label='Label Key' icon='AlarmWarningLine' {...args} />
104
+ <ReqoreTag labelKey='Key' label='value' {...args} />
105
+ <ReqoreTag icon='QuestionAnswerLine' {...args} fixed />
106
+ <ReqoreTag label='Disabled Tag' disabled icon='AlarmWarningLine' {...args} />
107
+ <ReqoreTag
108
+ label='300px Tag'
109
+ width='300px'
110
+ fixed
111
+ icon='AlarmWarningLine'
112
+ {...args}
113
+ tooltip='I am wiiiiiiide'
114
+ actions={[
115
+ {
116
+ icon: 'ErrorWarningLine',
117
+ onClick: noop,
118
+ intent: 'info',
119
+ tooltip: {
120
+ content: 'IF YOU CAN SEE ME ITS A BUG!!! I HAVE show: false',
121
+ openOnMount: true,
122
+ intent: 'danger',
123
+ },
124
+ show: false,
122
125
  },
123
- show: false,
124
- },
125
- {
126
- icon: '24HoursFill',
127
- onClick: noop,
128
- disabled: true,
129
- intent: 'info',
130
- tooltip: { content: 'I am a tooltip' },
131
- },
132
- {
133
- icon: 'SpyFill',
134
- onClick: noop,
135
- intent: 'success',
136
- },
137
- ]}
138
- />
139
- <ReqoreTag
140
- label='300px fixed Tag with a big description that should wrap and make the tag bigger'
141
- width='300px'
142
- fixed
143
- icon='AlarmWarningLine'
144
- {...args}
145
- tooltip='I am wiiiiiiide'
146
- actions={[
147
- {
148
- icon: 'ErrorWarningLine',
149
- onClick: noop,
150
- intent: 'info',
151
- tooltip: {
152
- content: 'IF YOU CAN SEE ME ITS A BUG!!! I HAVE show: false',
153
- openOnMount: true,
154
- intent: 'danger',
126
+ {
127
+ icon: '24HoursFill',
128
+ onClick: noop,
129
+ disabled: true,
130
+ intent: 'info',
131
+ tooltip: { content: 'I am a tooltip' },
155
132
  },
156
- show: false,
157
- },
158
- {
159
- icon: '24HoursFill',
160
- onClick: noop,
161
- disabled: true,
162
- intent: 'info',
163
- tooltip: { content: 'I am a tooltip' },
164
- },
165
- {
166
- icon: 'SpyFill',
167
- onClick: noop,
168
- intent: 'success',
169
- },
170
- ]}
171
- />
172
- <ReqoreTag label='Danger Tag' icon='AlarmWarningLine' intent='danger' {...args} />
173
- <ReqoreTag label='Transparent tag' icon='Ghost2Line' {...args} color='transparent' />
174
- <ReqoreTag
175
- label='Custom Color Tag'
176
- icon='AlarmWarningLine'
177
- color='#38fdb2'
178
- {...args}
179
- tooltip={{ content: 'Hm, another tooltip', openOnMount: true }}
180
- />
181
- <ReqoreTag
182
- label='Custom Effect Tag'
183
- effect={{
184
- gradient: {
185
- colors: '#ff47a3',
186
- },
187
- }}
188
- labelKeyEffect={{
189
- gradient: {
190
- colors: '#b8f58a',
191
- },
192
- weight: 'thin',
193
- spaced: 2,
194
- uppercase: true,
195
- }}
196
- labelEffect={{
197
- gradient: {
198
- colors: {
199
- 0: '#00e3e8',
200
- 100: '#143a40',
133
+ {
134
+ icon: 'SpyFill',
135
+ onClick: noop,
136
+ intent: 'success',
201
137
  },
202
- },
203
- weight: 'bold',
204
- }}
205
- labelKey='Effect'
206
- icon='Css3Fill'
207
- {...args}
208
- />
209
- <ReqoreTag
210
- {...args}
211
- label='No Buttons Tag'
212
- icon='CarLine'
213
- color='#0b4578'
214
- rightIcon={args.rightIcon}
215
- actions={null}
216
- onRemoveClick={null}
217
- />
218
- <ReqoreTag
219
- {...args}
220
- label='Minimal Tag'
221
- minimal
222
- icon='ShareForward2Fill'
223
- rightIcon={args.rightIcon}
224
- actions={null}
225
- onRemoveClick={null}
226
- />
227
- <ReqoreTag
228
- {...args}
229
- label='Minimal Tag with Intent'
230
- minimal
231
- intent='warning'
232
- icon='ShareForward2Fill'
233
- rightIcon={args.rightIcon}
234
- actions={null}
235
- onRemoveClick={null}
236
- />
237
- <ReqoreTag
238
- {...args}
239
- labelKey='This is the key for a wrapped tag'
240
- label='Wrapped tag with some long text and width specified, no wrap specified'
241
- icon='ShareForward2Fill'
242
- rightIcon={args.rightIcon}
243
- width='400px'
244
- onRemoveClick={null}
245
- actions={[
246
- {
247
- icon: '24HoursFill',
248
- onClick: noop,
249
- disabled: true,
250
- intent: 'info',
251
- tooltip: { content: 'I am a tooltip' },
252
- },
253
- {
254
- icon: 'SpyFill',
255
- onClick: noop,
256
- intent: 'success',
257
- tooltip: { content: 'Hm, another tooltip', openOnMount: true },
258
- },
259
- ]}
260
- />
261
- <ReqoreTag
262
- {...args}
263
- labelKey='This is the key for a wrapped tag'
264
- label='Wrapped tag with some long text and NO width specified, AND wrap specified'
265
- icon='ShareForward2Fill'
266
- rightIcon={args.rightIcon}
267
- leftIconColor='#00fafd'
268
- rightIconColor='#eb0e8c'
269
- wrap
270
- onRemoveClick={null}
271
- actions={[
272
- {
273
- icon: '24HoursFill',
274
- onClick: noop,
275
- disabled: true,
276
- intent: 'info',
277
- tooltip: { content: 'I am a tooltip' },
278
- },
279
- {
280
- icon: 'SpyFill',
281
- onClick: noop,
282
- intent: 'success',
283
- tooltip: { content: 'Hm, another tooltip', openOnMount: true },
284
- },
285
- ]}
286
- />
287
- <ReqoreTag
288
- {...args}
289
- labelKey='Fixed'
290
- fixed='key'
291
- label='Wrapped tag with some long text and NO width specified, AND wrap specified, with fixed key'
292
- icon='DriveLine'
293
- rightIcon={args.rightIcon}
294
- wrap
295
- onRemoveClick={null}
296
- actions={[
297
- {
298
- icon: '24HoursFill',
299
- onClick: noop,
300
- disabled: true,
301
- intent: 'info',
302
- tooltip: { content: 'I am a tooltip' },
303
- },
304
- {
305
- icon: 'SpyFill',
306
- onClick: noop,
307
- intent: 'success',
308
- tooltip: { content: 'Hm, another tooltip', openOnMount: true },
309
- },
310
- ]}
311
- />
312
- <ReqoreTag
313
- {...args}
314
- labelKey='Wrapped tag with some long text and NO width specified, AND wrap specified, with fixed label, Wrapped tag with some long text and NO width specified, AND wrap specified, with fixed label'
315
- fixed='label'
316
- label='Fixed'
317
- icon='DriveLine'
318
- rightIcon={args.rightIcon}
319
- wrap
320
- onRemoveClick={null}
321
- actions={[
322
- {
323
- icon: '24HoursFill',
324
- onClick: noop,
325
- disabled: true,
326
- intent: 'info',
327
- tooltip: { content: 'I am a tooltip' },
328
- },
329
- {
330
- icon: 'SpyFill',
331
- onClick: noop,
332
- intent: 'success',
333
- tooltip: { content: 'Hm, another tooltip', openOnMount: true },
334
- },
335
- ]}
336
- />
337
- </ReqoreTagGroup>
138
+ ]}
139
+ />
140
+ <ReqoreTag
141
+ label='300px fixed Tag with a big description that should wrap and make the tag bigger'
142
+ width='300px'
143
+ fixed
144
+ icon='AlarmWarningLine'
145
+ {...args}
146
+ tooltip='I am wiiiiiiide'
147
+ actions={[
148
+ {
149
+ icon: 'ErrorWarningLine',
150
+ onClick: noop,
151
+ intent: 'info',
152
+ tooltip: {
153
+ content: 'IF YOU CAN SEE ME ITS A BUG!!! I HAVE show: false',
154
+ openOnMount: true,
155
+ intent: 'danger',
156
+ },
157
+ show: false,
158
+ },
159
+ {
160
+ icon: '24HoursFill',
161
+ onClick: noop,
162
+ disabled: true,
163
+ intent: 'info',
164
+ tooltip: { content: 'I am a tooltip' },
165
+ },
166
+ {
167
+ icon: 'SpyFill',
168
+ onClick: noop,
169
+ intent: 'success',
170
+ },
171
+ ]}
172
+ />
173
+ <ReqoreTag label='Danger Tag' icon='AlarmWarningLine' intent='danger' {...args} />
174
+ <ReqoreTag label='Transparent tag' icon='Ghost2Line' {...args} color='transparent' />
175
+ <ReqoreTag
176
+ label='Custom Color Tag'
177
+ icon='AlarmWarningLine'
178
+ color='#38fdb2'
179
+ {...args}
180
+ tooltip={{ content: 'Hm, another tooltip', openOnMount: true }}
181
+ />
182
+ <ReqoreTag
183
+ label='Custom Effect Tag'
184
+ effect={{
185
+ gradient: {
186
+ colors: '#ff47a3',
187
+ },
188
+ }}
189
+ labelKeyEffect={{
190
+ gradient: {
191
+ colors: '#b8f58a',
192
+ },
193
+ weight: 'thin',
194
+ spaced: 2,
195
+ uppercase: true,
196
+ }}
197
+ labelEffect={{
198
+ gradient: {
199
+ colors: {
200
+ 0: '#00e3e8',
201
+ 100: '#143a40',
202
+ },
203
+ },
204
+ weight: 'bold',
205
+ }}
206
+ labelKey='Effect'
207
+ icon='Css3Fill'
208
+ {...args}
209
+ />
210
+ <ReqoreTag
211
+ {...args}
212
+ label='No Buttons Tag'
213
+ icon='CarLine'
214
+ color='#0b4578'
215
+ rightIcon={args.rightIcon}
216
+ actions={null}
217
+ onRemoveClick={null}
218
+ />
219
+ <ReqoreTag
220
+ {...args}
221
+ label='Minimal Tag'
222
+ minimal
223
+ icon='ShareForward2Fill'
224
+ rightIcon={args.rightIcon}
225
+ actions={null}
226
+ onRemoveClick={null}
227
+ />
228
+ <ReqoreTag
229
+ {...args}
230
+ label='Minimal Tag with Intent'
231
+ minimal
232
+ intent='warning'
233
+ icon='ShareForward2Fill'
234
+ rightIcon={args.rightIcon}
235
+ actions={null}
236
+ onRemoveClick={null}
237
+ />
238
+ <ReqoreTag
239
+ {...args}
240
+ labelKey='This is the key for a wrapped tag'
241
+ label='Wrapped tag with some long text and width specified, no wrap specified'
242
+ icon='ShareForward2Fill'
243
+ rightIcon={args.rightIcon}
244
+ width='400px'
245
+ onRemoveClick={null}
246
+ actions={[
247
+ {
248
+ icon: '24HoursFill',
249
+ onClick: noop,
250
+ disabled: true,
251
+ intent: 'info',
252
+ tooltip: { content: 'I am a tooltip' },
253
+ },
254
+ {
255
+ icon: 'SpyFill',
256
+ onClick: noop,
257
+ intent: 'success',
258
+ tooltip: { content: 'Hm, another tooltip', openOnMount: true },
259
+ },
260
+ ]}
261
+ />
262
+ <ReqoreTag
263
+ {...args}
264
+ labelKey='This is the key for a wrapped tag'
265
+ label='Wrapped tag with some long text and NO width specified, AND wrap specified'
266
+ icon='ShareForward2Fill'
267
+ rightIcon={args.rightIcon}
268
+ leftIconColor='#00fafd'
269
+ rightIconColor='#eb0e8c'
270
+ wrap
271
+ onRemoveClick={null}
272
+ actions={[
273
+ {
274
+ icon: '24HoursFill',
275
+ onClick: noop,
276
+ disabled: true,
277
+ intent: 'info',
278
+ tooltip: { content: 'I am a tooltip' },
279
+ },
280
+ {
281
+ icon: 'SpyFill',
282
+ onClick: noop,
283
+ intent: 'success',
284
+ tooltip: { content: 'Hm, another tooltip', openOnMount: true },
285
+ },
286
+ ]}
287
+ />
288
+ <ReqoreTag
289
+ {...args}
290
+ labelKey='Fixed'
291
+ fixed='key'
292
+ label='Wrapped tag with some long text and NO width specified, AND wrap specified, with fixed key'
293
+ icon='DriveLine'
294
+ rightIcon={args.rightIcon}
295
+ wrap
296
+ onRemoveClick={null}
297
+ actions={[
298
+ {
299
+ icon: '24HoursFill',
300
+ onClick: noop,
301
+ disabled: true,
302
+ intent: 'info',
303
+ tooltip: { content: 'I am a tooltip' },
304
+ },
305
+ {
306
+ icon: 'SpyFill',
307
+ onClick: noop,
308
+ intent: 'success',
309
+ tooltip: { content: 'Hm, another tooltip', openOnMount: true },
310
+ },
311
+ ]}
312
+ />
313
+ <ReqoreTag
314
+ {...args}
315
+ labelKey='Wrapped tag with some long text and NO width specified, AND wrap specified, with fixed label, Wrapped tag with some long text and NO width specified, AND wrap specified, with fixed label'
316
+ fixed='label'
317
+ label='Fixed'
318
+ icon='DriveLine'
319
+ rightIcon={args.rightIcon}
320
+ wrap
321
+ onRemoveClick={null}
322
+ actions={[
323
+ {
324
+ icon: '24HoursFill',
325
+ onClick: noop,
326
+ disabled: true,
327
+ intent: 'info',
328
+ tooltip: { content: 'I am a tooltip' },
329
+ },
330
+ {
331
+ icon: 'SpyFill',
332
+ onClick: noop,
333
+ intent: 'success',
334
+ tooltip: { content: 'Hm, another tooltip', openOnMount: true },
335
+ },
336
+ ]}
337
+ />
338
+ </ReqoreTagGroup>
339
+ <ReqoreVerticalSpacer height={5} />
340
+ <ReqoreTagGroup>
341
+ <ReqoreTag label='Center aligned' align='center' {...args} />
342
+ </ReqoreTagGroup>
343
+ <ReqoreVerticalSpacer height={5} />
344
+ <ReqoreTagGroup>
345
+ <ReqoreTag label='Right aligned' align='right' {...args} />
346
+ </ReqoreTagGroup>
347
+ </>
338
348
  );
339
349
  };
340
350
 
package/src/stories/Tag/TagGroup.stories.tsx CHANGED
@@ -228,7 +228,7 @@ const Template: StoryFn<IReqoreTagGroup> = (args) => {
228
228
  icon: 'SpyFill',
229
229
  onClick: noop,
230
230
  intent: 'success',
231
- tooltip: { content: 'Hm, another tooltip', openOnMount: true },
231
+ tooltip: { content: 'Hm, another tooltip' },
232
232
  },
233
233
  ]}
234
234
  />
@@ -251,7 +251,7 @@ const Template: StoryFn<IReqoreTagGroup> = (args) => {
251
251
  icon: 'SpyFill',
252
252
  onClick: noop,
253
253
  intent: 'success',
254
- tooltip: { content: 'Hm, another tooltip', openOnMount: true },
254
+ tooltip: { content: 'Hm, another tooltip' },
255
255
  },
256
256
  ]}
257
257
  />
@@ -274,7 +274,7 @@ const Template: StoryFn<IReqoreTagGroup> = (args) => {
274
274
  icon: 'SpyFill',
275
275
  onClick: noop,
276
276
  intent: 'success',
277
- tooltip: { content: 'Hm, another tooltip', openOnMount: true },
277
+ tooltip: { content: 'Hm, another tooltip' },
278
278
  },
279
279
  ]}
280
280
  />
@@ -295,3 +295,13 @@ export const NoWrap: Story = {
295
295
  render: Template,
296
296
  args: { wrap: false },
297
297
  };
298
+
299
+ export const CenterAlign: Story = {
300
+ render: Template,
301
+ args: { align: 'center' },
302
+ };
303
+
304
+ export const RightAlign: Story = {
305
+ render: Template,
306
+ args: { align: 'right' },
307
+ };