dfh-ui-library 1.1.5 → 1.1.7

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 (2) hide show
  1. package/dist/index.d.ts +347 -258
  2. package/package.json +8 -3
package/dist/index.d.ts CHANGED
@@ -1,245 +1,325 @@
1
1
  /// <reference types="react" />
2
- import React$1, { InputHTMLAttributes, SelectHTMLAttributes, FC, TextareaHTMLAttributes } from 'react';
2
+ import React$1, {
3
+ InputHTMLAttributes,
4
+ SelectHTMLAttributes,
5
+ FC,
6
+ TextareaHTMLAttributes,
7
+ } from "react";
3
8
 
4
9
  type AlignmentType = "center" | "left" | "right";
5
- type IconColorTypes = "white" | "black-900" | "gray-220" | "gray-720" | "inherit" | "gray-300" | string;
6
- type IconType = "Home" | "Info" | "Email" | "RightArrow" | "DropDown" | "DropDownArrow" | "WhiteArrow" | "TrashIcon" | "AddNewitemIcon" | "OkIcon" | "EditIcon" | "Delete" | "AddIcon" | "RemoveTrashIcon" | "RoundTickIcon" | "ValidationWarningIcon" | "WarningIcon" | "NeturalIcon" | "SuccessIcon" | string;
7
- interface ChildrenProp {
8
- /**
9
- * Se the child node and element;
10
- */
11
- children?: React.ReactNode;
10
+ type IconColorTypes =
11
+ | "white"
12
+ | "black-900"
13
+ | "gray-220"
14
+ | "gray-720"
15
+ | "inherit"
16
+ | "gray-300"
17
+ | string;
18
+ type IconType =
19
+ | "Home"
20
+ | "Info"
21
+ | "Email"
22
+ | "RightArrow"
23
+ | "DropDown"
24
+ | "DropDownArrow"
25
+ | "WhiteArrow"
26
+ | "TrashIcon"
27
+ | "AddNewitemIcon"
28
+ | "OkIcon"
29
+ | "EditIcon"
30
+ | "Delete"
31
+ | "AddIcon"
32
+ | "RemoveTrashIcon"
33
+ | "RoundTickIcon"
34
+ | "ValidationWarningIcon"
35
+ | "WarningIcon"
36
+ | "NeturalIcon"
37
+ | "SuccessIcon"
38
+ | string;
39
+ interface IChildrenProp {
40
+ /**
41
+ * Se the child node and element;
42
+ */
43
+ children?: React.ReactNode;
12
44
  }
13
- interface IconTypeProp {
14
- /**
15
- * Set icon type
16
- */
17
- iconType?: IconType;
18
- /**
19
- * Set the Icon Color
20
- */
21
- iconColor?: IconColorTypes;
45
+ interface IIconTypeProp {
46
+ /**
47
+ * Set icon type
48
+ */
49
+ iconType?: IconType;
50
+ /**
51
+ * Set the Icon Color
52
+ */
53
+ iconColor?: IconColorTypes;
22
54
  }
23
- interface AdditionalClassesProp {
24
- /**
25
- * Optional | Set the additional classes
26
- */
27
- additionalClasses?: string | undefined;
55
+ interface IAdditionalClassesProp {
56
+ /**
57
+ * Optional | Set the additional classes
58
+ */
59
+ additionalClasses?: string | undefined;
28
60
  }
29
- interface OnClickEventProps {
30
- onClick?: () => void;
61
+ interface IOnClickEventProps {
62
+ onClick?: () => void;
31
63
  }
32
- type TyphoTypes = "h1" | "h1Bold" | "h1ExtraBold" | "h2" | "h2Bold" | "h2ExtraBold" | "h10" | "h10Bold" | "h10ExtraBold" | "h6" | "h6Bold" | "h6ExtraBold" | "header1" | "header2" | "label1" | "label2";
64
+ type TyphoTypes =
65
+ | "h1"
66
+ | "h1Bold"
67
+ | "h1ExtraBold"
68
+ | "h2"
69
+ | "h2Bold"
70
+ | "h2ExtraBold"
71
+ | "h10"
72
+ | "h10Bold"
73
+ | "h10ExtraBold"
74
+ | "h6"
75
+ | "h6Bold"
76
+ | "h6ExtraBold"
77
+ | "header1"
78
+ | "header2"
79
+ | "label1"
80
+ | "label2";
33
81
  type TyphoComponents = "p" | "span" | "em" | "div" | undefined;
34
82
 
35
- interface ButtonProps extends ChildrenProp, AdditionalClassesProp, IconTypeProp, OnClickEventProps {
36
- /**
37
- * Set the button type
38
- */
39
- type?: "submit" | "button";
40
- /**
41
- * Button Variants
42
- */
43
- variants?: "large" | "small" | "extraSmall" | "largeOutlined" | "smallOutlined" | "extraSmallOutlined" | "default" | "defaultOutlined";
44
- /**
45
- * Set the button disable state
46
- */
47
- isDisabled?: boolean;
48
- /**
49
- * Set the button Label
50
- */
51
- buttonLabel?: string | number;
52
- /**
53
- * Set the icon visibility
54
- */
55
- isIconEnabled?: boolean;
56
- /**
57
- * Set the icon Alignment
58
- */
59
- iconAlignment?: AlignmentType;
60
- /**
61
- * Set icon classes
62
- */
63
- iconClass?: string;
83
+ interface ButtonProps
84
+ extends ChildrenProp,
85
+ AdditionalClassesProp,
86
+ IconTypeProp,
87
+ OnClickEventProps {
88
+ /**
89
+ * Set the button type
90
+ */
91
+ type?: "submit" | "button";
92
+ /**
93
+ * Button Variants
94
+ */
95
+ variants?:
96
+ | "large"
97
+ | "small"
98
+ | "extraSmall"
99
+ | "largeOutlined"
100
+ | "smallOutlined"
101
+ | "extraSmallOutlined"
102
+ | "default"
103
+ | "defaultOutlined";
104
+ /**
105
+ * Set the button disable state
106
+ */
107
+ isDisabled?: boolean;
108
+ /**
109
+ * Set the button Label
110
+ */
111
+ buttonLabel?: string | number;
112
+ /**
113
+ * Set the icon visibility
114
+ */
115
+ isIconEnabled?: boolean;
116
+ /**
117
+ * Set the icon Alignment
118
+ */
119
+ iconAlignment?: AlignmentType;
120
+ /**
121
+ * Set icon classes
122
+ */
123
+ iconClass?: string;
64
124
  }
65
- interface TyphographyProps extends ChildrenProp, AdditionalClassesProp {
66
- /**
67
- * Set element type
68
- */
69
- type?: TyphoTypes;
70
- /**
71
- * Set element node of the content wrapper
72
- */
73
- component?: TyphoComponents;
74
- /**
75
- * Set font-color of the content
76
- */
77
- color?: string;
78
- onClick?: () => void;
125
+ interface ITyphographyProps extends ChildrenProp, AdditionalClassesProp {
126
+ /**
127
+ * Set element type
128
+ */
129
+ type?: TyphoTypes;
130
+ /**
131
+ * Set element node of the content wrapper
132
+ */
133
+ component?: TyphoComponents;
134
+ /**
135
+ * Set font-color of the content
136
+ */
137
+ color?: string;
138
+ onClick?: () => void;
79
139
  }
80
140
  type InputType$1 = "text" | "email" | "password" | "name" | "date";
81
- interface HookFormsInputProps extends InputHTMLAttributes<HTMLInputElement> {
82
- /**
83
- * Set Input type
84
- */
85
- type?: InputType$1;
86
- /**
87
- * Set new variant of the input
88
- */
89
- inputVariant?: "default" | "large";
90
- /**
91
- * Set Input name
92
- */
93
- id?: string;
94
- /**
95
- * Set Input name
96
- */
97
- labelName?: string;
98
- /**
99
- * Set the Label Type
100
- */
101
- labelType?: "default" | "black" | "smallSelect" | "blackSmall";
102
- /**
103
- * Set Input label name
104
- */
105
- label?: string | undefined;
106
- /**
107
- * Ser Error message
108
- */
109
- error?: string;
110
- /**
111
- * Ser Error message
112
- */
113
- isBorderedError?: boolean;
114
- /**
115
- * Set Wrapper classes, new classes will overide the existing default classes
116
- */
117
- wrapperClass?: string | undefined;
118
- /**
119
- * Optional for additional classes
120
- */
121
- additionalClasses?: string | undefined;
122
- /**
123
- * Enable read only
124
- */
125
- readonly?: boolean;
126
- /**
127
- * LabelClasses
128
- */
129
- labelClasses?: string | undefined;
130
- onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
131
- placeholder?: string;
132
- /**
133
- * Set label only
134
- */
135
- onlyLabel?: boolean | undefined;
136
- /**
137
- * inner span Classes
138
- */
139
- labelSpanClasses?: string;
140
- /**
141
- * add additional InputValidation Classes
142
- */
143
- additionalErrorClasses?: string;
144
- isAdditionalErrorInput?: boolean;
145
- fullError?: boolean;
141
+ interface IHookFormsInputProps extends InputHTMLAttributes<HTMLInputElement> {
142
+ /**
143
+ * Set Input type
144
+ */
145
+ type?: InputType$1;
146
+ /**
147
+ * Set new variant of the input
148
+ */
149
+ inputVariant?: "default" | "large";
150
+ /**
151
+ * Set Input name
152
+ */
153
+ id?: string;
154
+ /**
155
+ * Set Input name
156
+ */
157
+ labelName?: string;
158
+ /**
159
+ * Set the Label Type
160
+ */
161
+ labelType?: "default" | "black" | "smallSelect" | "blackSmall";
162
+ /**
163
+ * Set Input label name
164
+ */
165
+ label?: string | undefined;
166
+ /**
167
+ * Ser Error message
168
+ */
169
+ error?: string;
170
+ /**
171
+ * Ser Error message
172
+ */
173
+ isBorderedError?: boolean;
174
+ /**
175
+ * Set Wrapper classes, new classes will overide the existing default classes
176
+ */
177
+ wrapperClass?: string | undefined;
178
+ /**
179
+ * Optional for additional classes
180
+ */
181
+ additionalClasses?: string | undefined;
182
+ /**
183
+ * Enable read only
184
+ */
185
+ readonly?: boolean;
186
+ /**
187
+ * LabelClasses
188
+ */
189
+ labelClasses?: string | undefined;
190
+ onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
191
+ placeholder?: string;
192
+ /**
193
+ * Set label only
194
+ */
195
+ onlyLabel?: boolean | undefined;
196
+ /**
197
+ * inner span Classes
198
+ */
199
+ labelSpanClasses?: string;
200
+ /**
201
+ * add additional InputValidation Classes
202
+ */
203
+ additionalErrorClasses?: string;
204
+ isAdditionalErrorInput?: boolean;
205
+ fullError?: boolean;
146
206
  }
147
207
  interface CheckboxProps {
148
- onChange?: (checked: boolean) => void;
149
- checked?: boolean;
150
- id?: any;
151
- label?: string;
208
+ onChange?: (checked: boolean) => void;
209
+ checked?: boolean;
210
+ id?: any;
211
+ label?: string;
152
212
  }
153
213
  type LABELTYPE = "default" | "black" | "smallSelect" | "blackSmall" | undefined;
154
- interface LabelProps {
155
- /**
156
- * Set the Label Type
157
- */
158
- labelType?: LABELTYPE;
159
- /**
160
- * Label name
161
- */
162
- name: string | undefined;
163
- /**
164
- * Label contents
165
- */
166
- label?: string | undefined;
167
- /**
168
- * Add children
169
- */
170
- children?: React.ReactNode;
171
- /**
172
- * Optional for additional classes
173
- */
174
- additionalClasses?: string | undefined;
175
- /**
176
- * inner span Classes
177
- */
178
- labelSpanClasses?: string;
214
+ interface ILabelProps {
215
+ /**
216
+ * Set the Label Type
217
+ */
218
+ labelType?: LABELTYPE;
219
+ /**
220
+ * Label name
221
+ */
222
+ name: string | undefined;
223
+ /**
224
+ * Label contents
225
+ */
226
+ label?: string | undefined;
227
+ /**
228
+ * Add children
229
+ */
230
+ children?: React.ReactNode;
231
+ /**
232
+ * Optional for additional classes
233
+ */
234
+ additionalClasses?: string | undefined;
235
+ /**
236
+ * inner span Classes
237
+ */
238
+ labelSpanClasses?: string;
179
239
  }
180
- interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
181
- /**
182
- * Type
183
- */
184
- selectType?: "small" | "medium";
185
- /**
186
- * Set Input type
187
- */
188
- options?: (string | number)[];
189
- /**
190
- * Set Input name
191
- */
192
- name: string;
193
- /**
194
- * Set Label type
195
- */
196
- labelType?: "default" | "black" | "smallSelect" | "blackSmall";
197
- /**
198
- * Set Input label name
199
- */
200
- label?: string | undefined;
201
- /**
202
- * LabelClasses
203
- */
204
- labelClasses?: string;
205
- /**
206
- * Default text for placeholder
207
- */
208
- defaultText?: string | undefined;
209
- /**
210
- * Ser Error message
211
- */
212
- error?: string;
213
- /**
214
- * Set Wrapper classes, new classes will overide the existing default classes
215
- */
216
- wrapperClass?: string | undefined;
217
- /**
218
- * Optional for additional classes
219
- */
220
- additionalClasses?: string | undefined;
221
- updateInputValue?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
222
- defaultValue?: string;
240
+ interface ISelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
241
+ /**
242
+ * Type
243
+ */
244
+ selectType?: "small" | "medium";
245
+ /**
246
+ * Set Input type
247
+ */
248
+ options?: (string | number)[];
249
+ /**
250
+ * Set Input name
251
+ */
252
+ name: string;
253
+ /**
254
+ * Set Label type
255
+ */
256
+ labelType?: "default" | "black" | "smallSelect" | "blackSmall";
257
+ /**
258
+ * Set Input label name
259
+ */
260
+ label?: string | undefined;
261
+ /**
262
+ * LabelClasses
263
+ */
264
+ labelClasses?: string;
265
+ /**
266
+ * Default text for placeholder
267
+ */
268
+ defaultText?: string | undefined;
269
+ /**
270
+ * Ser Error message
271
+ */
272
+ error?: string;
273
+ /**
274
+ * Set Wrapper classes, new classes will overide the existing default classes
275
+ */
276
+ wrapperClass?: string | undefined;
277
+ /**
278
+ * Optional for additional classes
279
+ */
280
+ additionalClasses?: string | undefined;
281
+ updateInputValue?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
282
+ defaultValue?: string;
223
283
  }
224
284
 
225
- declare const Button: ({ type, isDisabled, buttonLabel, iconType, iconColor, iconAlignment, isIconEnabled, variants, additionalClasses, iconClass, onClick, }: ButtonProps) => React$1.JSX.Element;
285
+ declare const Button: ({
286
+ type,
287
+ isDisabled,
288
+ buttonLabel,
289
+ iconType,
290
+ iconColor,
291
+ iconAlignment,
292
+ isIconEnabled,
293
+ variants,
294
+ additionalClasses,
295
+ iconClass,
296
+ onClick,
297
+ }: ButtonProps) => React$1.JSX.Element;
226
298
 
227
299
  /**
228
300
  * Primary UI component
229
301
  */
230
- declare const Typhography: ({ type, component, color, additionalClasses, children, onClick, ...rest }: TyphographyProps) => React$1.JSX.Element;
302
+ declare const Typhography: ({
303
+ type,
304
+ component,
305
+ color,
306
+ additionalClasses,
307
+ children,
308
+ onClick,
309
+ ...rest
310
+ }: TyphographyProps) => React$1.JSX.Element;
231
311
 
232
312
  declare const Checkbox: React$1.FC<CheckboxProps>;
233
313
 
234
- interface InputValidationProps {
235
- /**
236
- * Set validation message
237
- */
238
- message?: string | undefined;
239
- /**
240
- * Optional for additional classes
241
- */
242
- additionalClasses?: string | undefined;
314
+ interface IInputValidationProps {
315
+ /**
316
+ * Set validation message
317
+ */
318
+ message?: string | undefined;
319
+ /**
320
+ * Optional for additional classes
321
+ */
322
+ additionalClasses?: string | undefined;
243
323
  }
244
324
  /**
245
325
  * Primary UI component for user interaction
@@ -262,51 +342,60 @@ declare const Label: React$1.FC<LabelProps>;
262
342
  declare const Select: React$1.FC<SelectProps>;
263
343
 
264
344
  type InputType = "text" | "email" | "password" | "name";
265
- interface InputProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
266
- /**
267
- * Set Input type
268
- */
269
- type?: InputType;
270
- /**
271
- * Set Input name
272
- */
273
- name: string;
274
- /**
275
- * Set the Label Type
276
- */
277
- labelType?: "default" | "black" | "smallSelect";
278
- /**
279
- * Set Input label name
280
- */
281
- label?: string | undefined;
282
- /**
283
- * Ser Error message
284
- */
285
- error?: string;
286
- /**
287
- * Set Wrapper classes, new classes will overide the existing default classes
288
- */
289
- wrapperClass?: string | undefined;
290
- /**
291
- * Optional for additional classes
292
- */
293
- additionalClasses?: string | undefined;
294
- /**
295
- * Enable read only
296
- */
297
- readonly?: boolean;
298
- /**
299
- * LabelClasses
300
- */
301
- labelClasses?: string;
302
- /**
303
- * Set label only
304
- */
305
- onlyLabel?: boolean;
345
+ interface IInputProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
346
+ /**
347
+ * Set Input type
348
+ */
349
+ type?: InputType;
350
+ /**
351
+ * Set Input name
352
+ */
353
+ name: string;
354
+ /**
355
+ * Set the Label Type
356
+ */
357
+ labelType?: "default" | "black" | "smallSelect";
358
+ /**
359
+ * Set Input label name
360
+ */
361
+ label?: string | undefined;
362
+ /**
363
+ * Ser Error message
364
+ */
365
+ error?: string;
366
+ /**
367
+ * Set Wrapper classes, new classes will overide the existing default classes
368
+ */
369
+ wrapperClass?: string | undefined;
370
+ /**
371
+ * Optional for additional classes
372
+ */
373
+ additionalClasses?: string | undefined;
374
+ /**
375
+ * Enable read only
376
+ */
377
+ readonly?: boolean;
378
+ /**
379
+ * LabelClasses
380
+ */
381
+ labelClasses?: string;
382
+ /**
383
+ * Set label only
384
+ */
385
+ onlyLabel?: boolean;
306
386
  }
307
387
  /**
308
388
  * Primary UI component for user interaction
309
389
  */
310
390
  declare const Textarea: React$1.FC<InputProps>;
311
391
 
312
- export { Button, Checkbox as CheckBox, Input, InputValidation, Label, Select, Textarea, Typhography };
392
+ export {
393
+ Button,
394
+ Checkbox as CheckBox,
395
+ Input,
396
+ InputValidation,
397
+ Label,
398
+ Select,
399
+ Textarea,
400
+ Typhography,
401
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dfh-ui-library",
3
- "version": "1.1.5",
3
+ "version": "1.1.7",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "rollup": "rollup -c --bundleConfigAsCjs",
@@ -16,14 +16,16 @@
16
16
  "@babel/preset-typescript": "^7.23.3",
17
17
  "@rollup/plugin-sucrase": "^5.0.2",
18
18
  "@rollup/plugin-terser": "^0.4.4",
19
- "@storybook/addon-docs": "^7.5.3",
20
- "@storybook/theming": "^7.5.3",
21
19
  "@tailwindcss/forms": "^0.5.7",
22
20
  "@types/react": "^18.2.37",
23
21
  "autoprefixer": "^10.4.16",
24
22
  "classnames": "^2.3.2",
23
+ "lodash": "^4.17.21",
24
+ "moment": "^2.29.4",
25
25
  "react": "^18.2.0",
26
+ "react-datepicker": "^4.23.0",
26
27
  "react-dom": "^18.2.0",
28
+ "react-tooltip": "^5.24.0",
27
29
  "rollup-plugin-peer-deps-external": "^2.2.4",
28
30
  "rollup-plugin-scss": "^4.0.0",
29
31
  "tailwindcss": "^3.3.5",
@@ -48,7 +50,10 @@
48
50
  "@testing-library/jest-dom": "^6.1.4",
49
51
  "@testing-library/react": "^14.1.2",
50
52
  "@testing-library/user-event": "^14.5.1",
53
+ "@storybook/addon-docs": "^7.5.3",
54
+ "@storybook/theming": "^7.5.3",
51
55
  "@types/jest": "^29.5.9",
56
+ "@types/react-datepicker": "^4.19.3",
52
57
  "@typescript-eslint/eslint-plugin": "^6.12.0",
53
58
  "@typescript-eslint/parser": "^6.12.0",
54
59
  "autoprefixer": "^10.4.16",