@julseb-lib/react 0.1.0 → 0.1.2

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 (10) hide show
  1. package/dist/index.cjs.js +86 -87
  2. package/dist/index.es.js +83 -84
  3. package/dist/index.umd.js +86 -87
  4. package/dist/lib/components/Avatar/Avatar.tsx +1 -1
  5. package/dist/lib/components/Avatar/AvatarFunction.tsx +0 -3
  6. package/dist/lib/components/InputImage/InputImage.tsx +1 -1
  7. package/dist/lib/components/InputPhone/InputPhone.tsx +308 -308
  8. package/dist/lib/components/InputPhone/styles.tsx +181 -182
  9. package/dist/lib/types/component-items.ts +185 -185
  10. package/package.json +1 -1
package/dist/lib/components/InputPhone/InputPhone.tsx CHANGED
@@ -1,41 +1,41 @@
1
1
  import {
2
- useState,
3
- useRef,
4
- useCallback,
5
- useMemo,
6
- type ChangeEvent,
7
- type FC,
2
+ useState,
3
+ useRef,
4
+ useCallback,
5
+ useMemo,
6
+ type ChangeEvent,
7
+ type FC,
8
8
  } from "react"
9
9
  import classNames from "classnames"
10
10
  import { useClickOutside } from "../../"
11
11
  import {
12
- InputWrapper,
13
- ListInput,
14
- ListInputItem,
15
- InputContainer,
16
- InputRightContainer,
17
- InputValidationIcon,
18
- InputLeftContainer,
19
- InputAndListContainer,
12
+ InputWrapper,
13
+ ListInput,
14
+ ListInputItem,
15
+ InputContainer,
16
+ InputRightContainer,
17
+ InputValidationIcon,
18
+ InputLeftContainer,
19
+ InputAndListContainer,
20
20
  } from "../InputComponents"
21
21
  import { LibIcon } from "../LibIcon"
22
22
  import { Search, CaretDown } from "../../icons"
23
23
  import { countries } from "./utils/countries"
24
24
  import type { LibCountry } from "../../types"
25
25
  import {
26
- StyledInputPhone,
27
- CountryButton,
28
- SearchContainer,
29
- SearchInput,
30
- Flag,
31
- CountryCode,
26
+ StyledInputPhone,
27
+ CountryButton,
28
+ SearchContainer,
29
+ SearchInput,
30
+ Flag,
31
+ CountryCode,
32
32
  } from "./styles"
33
33
  import type { ILibInputPhone } from "./types"
34
34
  import type { ILibListInputItem } from "../InputComponents/types"
35
35
 
36
36
  const DEFAULT_ICONS_SIZES = {
37
- SEARCH: 16,
38
- CARET: 12,
37
+ SEARCH: 16,
38
+ CARET: 12,
39
39
  }
40
40
 
41
41
  /**
@@ -84,309 +84,309 @@ const DEFAULT_ICONS_SIZES = {
84
84
  * />
85
85
  */
86
86
  export const InputPhone: FC<ILibInputPhone> = ({
87
- "data-testid": testid,
88
- ref,
89
- className,
90
- id,
91
- label,
92
- labelComment,
93
- helper,
94
- helperBottom,
95
- validation,
96
- inputBackground,
97
- inputVariant = "rounded",
98
- selectedCountry,
99
- setSelectedCountry,
100
- defaultCountry = "de",
101
- icons,
102
- iconSizes,
103
- iconBaseUrl,
104
- searchPlaceholder = "Search country or code",
105
- listDirection,
106
- value,
107
- maxLength,
108
- disabled,
109
- countryButtonAriaLabel = "Select country",
110
- textNoResult = "Your search did not return any result.",
111
- containerStyle,
112
- inputAndListContainerStyle,
113
- ...rest
87
+ "data-testid": testid,
88
+ ref,
89
+ className,
90
+ id,
91
+ label,
92
+ labelComment,
93
+ helper,
94
+ helperBottom,
95
+ validation,
96
+ inputBackground,
97
+ inputVariant = "rounded",
98
+ selectedCountry,
99
+ setSelectedCountry,
100
+ defaultCountry = "de",
101
+ icons,
102
+ iconSizes,
103
+ iconBaseUrl,
104
+ searchPlaceholder = "Search country or code",
105
+ listDirection,
106
+ value,
107
+ maxLength,
108
+ disabled,
109
+ countryButtonAriaLabel = "Select country",
110
+ textNoResult = "Your search did not return any result.",
111
+ containerStyle,
112
+ inputAndListContainerStyle,
113
+ ...rest
114
114
  }) => {
115
- const hasContainer: boolean = !!(
116
- label ||
117
- labelComment ||
118
- helper ||
119
- helperBottom ||
120
- validation
121
- )
115
+ const hasContainer: boolean = !!(
116
+ label ||
117
+ labelComment ||
118
+ helper ||
119
+ helperBottom ||
120
+ validation
121
+ )
122
122
 
123
- const country = useMemo(() => {
124
- if (selectedCountry) return selectedCountry
125
- else return countries.find(country => country.code === defaultCountry)
126
- }, [defaultCountry, selectedCountry])
123
+ const country = useMemo(() => {
124
+ if (selectedCountry) return selectedCountry
125
+ else return countries.find(country => country.code === defaultCountry)
126
+ }, [defaultCountry, selectedCountry])
127
127
 
128
- const [isOpen, setIsOpen] = useState(false)
128
+ const [isOpen, setIsOpen] = useState(false)
129
129
 
130
- const handleClickCountry = useCallback(() => {
131
- setIsOpen(!isOpen)
132
- }, [isOpen])
130
+ const handleClickCountry = useCallback(() => {
131
+ setIsOpen(!isOpen)
132
+ }, [isOpen])
133
133
 
134
- const listRef = useRef<HTMLDivElement>(null)
135
- useClickOutside(
136
- listRef,
137
- useCallback(() => {
138
- if (isOpen) setIsOpen(false)
139
- }, [isOpen])
140
- )
134
+ const listRef = useRef<HTMLDivElement>(null)
135
+ useClickOutside(
136
+ listRef,
137
+ useCallback(() => {
138
+ if (isOpen) setIsOpen(false)
139
+ }, [isOpen])
140
+ )
141
141
 
142
- const [search, setSearch] = useState("")
143
- const results = useMemo(() => {
144
- return countries.filter(
145
- country =>
146
- country.name.toLowerCase().includes(search.toLowerCase()) ||
147
- country.dial_code
148
- .toLowerCase()
149
- .includes(search.toLowerCase()) ||
150
- country.code.toLowerCase().includes(search.toLowerCase())
151
- )
152
- }, [search])
142
+ const [search, setSearch] = useState("")
143
+ const results = useMemo(() => {
144
+ return countries.filter(
145
+ country =>
146
+ country.name.toLowerCase().includes(search.toLowerCase()) ||
147
+ country.dial_code
148
+ .toLowerCase()
149
+ .includes(search.toLowerCase()) ||
150
+ country.code.toLowerCase().includes(search.toLowerCase())
151
+ )
152
+ }, [search])
153
153
 
154
- const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
155
- setSearch(e.target.value)
156
- }, [])
154
+ const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
155
+ setSearch(e.target.value)
156
+ }, [])
157
157
 
158
- const handleClickResult = useCallback(
159
- (result: LibCountry) => {
160
- setSelectedCountry(result)
161
- setIsOpen(false)
162
- },
163
- [setSelectedCountry]
164
- )
158
+ const handleClickResult = useCallback(
159
+ (result: LibCountry) => {
160
+ setSelectedCountry(result)
161
+ setIsOpen(false)
162
+ },
163
+ [setSelectedCountry]
164
+ )
165
165
 
166
- const defaultIcons = {
167
- search: (
168
- <Search
169
- size={iconSizes?.search || DEFAULT_ICONS_SIZES.SEARCH}
170
- data-testid={
171
- testid && `${testid}.ListInput.SearchContainer.Icon`
172
- }
173
- className={className && "SearchIcon"}
174
- />
175
- ),
176
- caret: (
177
- <CaretDown
178
- size={iconSizes?.search || DEFAULT_ICONS_SIZES.CARET}
179
- data-testid={
180
- testid && `${testid}.LeftContainer.CountryButton.CaretIcon`
181
- }
182
- className={className && "CaretIcon"}
183
- />
184
- ),
185
- }
166
+ const defaultIcons = {
167
+ search: (
168
+ <Search
169
+ size={iconSizes?.search || DEFAULT_ICONS_SIZES.SEARCH}
170
+ data-testid={
171
+ testid && `${testid}.ListInput.SearchContainer.Icon`
172
+ }
173
+ className={className && "SearchIcon"}
174
+ />
175
+ ),
176
+ caret: (
177
+ <CaretDown
178
+ size={iconSizes?.search || DEFAULT_ICONS_SIZES.CARET}
179
+ data-testid={
180
+ testid && `${testid}.LeftContainer.CountryButton.CaretIcon`
181
+ }
182
+ className={className && "CaretIcon"}
183
+ />
184
+ ),
185
+ }
186
186
 
187
- const listItemProps: Omit<
188
- ILibListInputItem,
189
- "onClick" | "isActive" | "readOnly" | "isHovered"
190
- > = {
191
- "data-testid": testid,
192
- className,
193
- validationStatus: validation?.status,
194
- inputBackground,
195
- }
187
+ const listItemProps: Omit<
188
+ ILibListInputItem,
189
+ "onClick" | "isActive" | "readOnly" | "isHovered"
190
+ > = {
191
+ "data-testid": testid,
192
+ className,
193
+ validationStatus: validation?.status,
194
+ inputBackground,
195
+ }
196
196
 
197
- return (
198
- <InputContainer
199
- data-testid={testid}
200
- id={id}
201
- className={className}
202
- label={label}
203
- labelComment={labelComment}
204
- helper={helper}
205
- helperBottom={helperBottom}
206
- validation={validation}
207
- value={value}
208
- counter={undefined}
209
- maxLength={maxLength}
210
- hasListOpen={isOpen}
211
- iconBaseUrl={iconBaseUrl}
212
- style={containerStyle}
213
- >
214
- <InputAndListContainer
215
- data-testid={testid}
216
- className={className}
217
- hasListOpen={isOpen}
218
- inputAndListContainerStyle={inputAndListContainerStyle}
219
- isParent={!hasContainer}
220
- >
221
- <InputWrapper
222
- data-testid={testid}
223
- className={className}
224
- hasContainer={hasContainer}
225
- hasListOpen={isOpen}
226
- isTextArea={false}
227
- inputVariant={inputVariant}
228
- inputBackground={inputBackground}
229
- validationStatus={validation?.status}
230
- >
231
- <InputLeftContainer
232
- data-testid={testid}
233
- className={className}
234
- disabled={disabled}
235
- >
236
- <CountryButton
237
- data-testid={
238
- testid &&
239
- `${testid}.LeftContainer.CountryButton`
240
- }
241
- className={className && "CountryButton"}
242
- type="button"
243
- disabled={disabled}
244
- aria-disabled={disabled}
245
- aria-label={countryButtonAriaLabel}
246
- onClick={handleClickCountry}
247
- $inputBackground={inputBackground}
248
- >
249
- <Flag
250
- data-testid={
251
- testid &&
252
- `${testid}.LeftContainer.CountryButton.Flag`
253
- }
254
- className={className && "Flag"}
255
- src={country?.flag}
256
- alt={`Flag ${country?.name}`}
257
- />
197
+ return (
198
+ <InputContainer
199
+ data-testid={testid}
200
+ id={id}
201
+ className={className}
202
+ label={label}
203
+ labelComment={labelComment}
204
+ helper={helper}
205
+ helperBottom={helperBottom}
206
+ validation={validation}
207
+ value={value}
208
+ counter={undefined}
209
+ maxLength={maxLength}
210
+ hasListOpen={isOpen}
211
+ iconBaseUrl={iconBaseUrl}
212
+ style={containerStyle}
213
+ >
214
+ <InputAndListContainer
215
+ data-testid={testid}
216
+ className={className}
217
+ hasListOpen={isOpen}
218
+ inputAndListContainerStyle={inputAndListContainerStyle}
219
+ isParent={!hasContainer}
220
+ >
221
+ <InputWrapper
222
+ data-testid={testid}
223
+ className={className}
224
+ hasContainer={hasContainer}
225
+ hasListOpen={isOpen}
226
+ isTextArea={false}
227
+ inputVariant={inputVariant}
228
+ inputBackground={inputBackground}
229
+ validationStatus={validation?.status}
230
+ >
231
+ <InputLeftContainer
232
+ data-testid={testid}
233
+ className={className}
234
+ disabled={disabled}
235
+ >
236
+ <CountryButton
237
+ data-testid={
238
+ testid &&
239
+ `${testid}.LeftContainer.CountryButton`
240
+ }
241
+ className={className && "CountryButton"}
242
+ type="button"
243
+ disabled={disabled}
244
+ aria-disabled={disabled}
245
+ aria-label={countryButtonAriaLabel}
246
+ onClick={handleClickCountry}
247
+ $inputBackground={inputBackground}
248
+ >
249
+ <Flag
250
+ data-testid={
251
+ testid &&
252
+ `${testid}.LeftContainer.CountryButton.Flag`
253
+ }
254
+ className={className && "Flag"}
255
+ src={country?.flag}
256
+ alt={`Flag ${country?.name}`}
257
+ />
258
258
 
259
- <LibIcon
260
- icon={icons?.caret || defaultIcons.caret}
261
- size={
262
- iconSizes?.caret ||
263
- DEFAULT_ICONS_SIZES.CARET
264
- }
265
- data-testid={
266
- testid &&
267
- `${testid}.LeftContainer.CountryButton.CaretIcon`
268
- }
269
- className={className && "CaretIcon"}
270
- baseUrl={iconBaseUrl}
271
- />
272
- </CountryButton>
259
+ <LibIcon
260
+ icon={icons?.caret || defaultIcons.caret}
261
+ size={
262
+ iconSizes?.caret ||
263
+ DEFAULT_ICONS_SIZES.CARET
264
+ }
265
+ data-testid={
266
+ testid &&
267
+ `${testid}.LeftContainer.CountryButton.CaretIcon`
268
+ }
269
+ className={className && "CaretIcon"}
270
+ baseUrl={iconBaseUrl}
271
+ />
272
+ </CountryButton>
273
273
 
274
- <CountryCode
275
- data-testid={
276
- testid && `${testid}.LeftContainer.CountryCode`
277
- }
278
- className={className && "CountryCode"}
279
- $inputBackground={inputBackground}
280
- $disabled={disabled}
281
- >
282
- {country?.dial_code}
283
- </CountryCode>
284
- </InputLeftContainer>
274
+ <CountryCode
275
+ data-testid={
276
+ testid && `${testid}.LeftContainer.CountryCode`
277
+ }
278
+ className={className && "CountryCode"}
279
+ $inputBackground={inputBackground}
280
+ $disabled={disabled}
281
+ >
282
+ {country?.dial_code}
283
+ </CountryCode>
284
+ </InputLeftContainer>
285
285
 
286
- <StyledInputPhone
287
- data-testid={testid && `${testid}.Input`}
288
- ref={ref}
289
- className={classNames(
290
- { Input: className },
291
- { WithListOpen: isOpen }
292
- )}
293
- id={id}
294
- type="tel"
295
- disabled={disabled}
296
- $disabled={disabled}
297
- $inputBackground={inputBackground}
298
- $validationStatus={validation?.status}
299
- $inputVariant={inputVariant}
300
- {...rest}
301
- />
286
+ <StyledInputPhone
287
+ data-testid={testid && `${testid}.Input`}
288
+ ref={ref}
289
+ className={classNames(
290
+ { Input: className },
291
+ { WithListOpen: isOpen }
292
+ )}
293
+ id={id}
294
+ type="tel"
295
+ disabled={disabled}
296
+ $disabled={disabled}
297
+ $inputBackground={inputBackground}
298
+ $validationStatus={validation?.status}
299
+ $inputVariant={inputVariant}
300
+ {...rest}
301
+ />
302
302
 
303
- {validation && (
304
- <InputRightContainer
305
- data-testid={testid}
306
- className={className}
307
- disabled={disabled}
308
- withBorder={false}
309
- withPadding
310
- >
311
- <InputValidationIcon
312
- data-testid={testid}
313
- className={className}
314
- validation={validation}
315
- inputBackground={inputBackground}
316
- />
317
- </InputRightContainer>
318
- )}
319
- </InputWrapper>
303
+ {validation && (
304
+ <InputRightContainer
305
+ data-testid={testid}
306
+ className={className}
307
+ disabled={disabled}
308
+ withBorder={false}
309
+ withPadding
310
+ >
311
+ <InputValidationIcon
312
+ data-testid={testid}
313
+ className={className}
314
+ validation={validation}
315
+ inputBackground={inputBackground}
316
+ />
317
+ </InputRightContainer>
318
+ )}
319
+ </InputWrapper>
320
320
 
321
- <ListInput
322
- data-testid={testid}
323
- className={className}
324
- ref={listRef}
325
- isOpen={isOpen}
326
- direction={listDirection}
327
- inputBackground={inputBackground}
328
- validationStatus={validation?.status}
329
- inputVariant={inputVariant}
330
- >
331
- <ListInputItem readOnly {...listItemProps}>
332
- <SearchContainer
333
- data-testid={
334
- testid && `${testid}.ListInput.SearchContainer`
335
- }
336
- className={className && "SearchContainer"}
337
- $validationStatus={validation?.status}
338
- $inputBackground={inputBackground}
339
- >
340
- <LibIcon
341
- icon={icons?.search || defaultIcons.search}
342
- size={
343
- iconSizes?.search ||
344
- DEFAULT_ICONS_SIZES.SEARCH
345
- }
346
- data-testid={
347
- testid &&
348
- `${testid}.ListInput.SearchContainer.Icon`
349
- }
350
- className={className && "IconSearch"}
351
- baseUrl={iconBaseUrl}
352
- />
321
+ <ListInput
322
+ data-testid={testid}
323
+ className={className}
324
+ ref={listRef}
325
+ isOpen={isOpen}
326
+ direction={listDirection}
327
+ inputBackground={inputBackground}
328
+ validationStatus={validation?.status}
329
+ inputVariant={inputVariant}
330
+ >
331
+ <ListInputItem readOnly {...listItemProps}>
332
+ <SearchContainer
333
+ data-testid={
334
+ testid && `${testid}.ListInput.SearchContainer`
335
+ }
336
+ className={className && "SearchContainer"}
337
+ $validationStatus={validation?.status}
338
+ $inputBackground={inputBackground}
339
+ >
340
+ <LibIcon
341
+ icon={icons?.search || defaultIcons.search}
342
+ size={
343
+ iconSizes?.search ||
344
+ DEFAULT_ICONS_SIZES.SEARCH
345
+ }
346
+ data-testid={
347
+ testid &&
348
+ `${testid}.ListInput.SearchContainer.Icon`
349
+ }
350
+ className={className && "IconSearch"}
351
+ baseUrl={iconBaseUrl}
352
+ />
353
353
 
354
- <SearchInput
355
- data-testid={
356
- testid &&
357
- `${testid}.ListInput.SearchContainer.Input`
358
- }
359
- className={className && "InputSearch"}
360
- placeholder={searchPlaceholder}
361
- value={search}
362
- onChange={handleChange}
363
- $inputBackground={inputBackground}
364
- />
365
- </SearchContainer>
366
- </ListInputItem>
354
+ <SearchInput
355
+ data-testid={
356
+ testid &&
357
+ `${testid}.ListInput.SearchContainer.Input`
358
+ }
359
+ className={className && "InputSearch"}
360
+ placeholder={searchPlaceholder}
361
+ value={search}
362
+ onChange={handleChange}
363
+ $inputBackground={inputBackground}
364
+ />
365
+ </SearchContainer>
366
+ </ListInputItem>
367
367
 
368
- {results.length ? (
369
- results.map(result => (
370
- <ListInputItem
371
- onClick={() => handleClickResult(result)}
372
- isActive={country === result}
373
- key={result.code}
374
- {...listItemProps}
375
- >
376
- <Flag src={result.flag} width={16} />
368
+ {results.length ? (
369
+ results.map(result => (
370
+ <ListInputItem
371
+ onClick={() => handleClickResult(result)}
372
+ isActive={country === result}
373
+ key={result.code}
374
+ {...listItemProps}
375
+ >
376
+ <Flag src={result.flag} width={16} />
377
377
 
378
- <span>
379
- ({result.dial_code}) {result.name}
380
- </span>
381
- </ListInputItem>
382
- ))
383
- ) : (
384
- <ListInputItem readOnly {...listItemProps}>
385
- {textNoResult}
386
- </ListInputItem>
387
- )}
388
- </ListInput>
389
- </InputAndListContainer>
390
- </InputContainer>
391
- )
378
+ <span>
379
+ ({result.dial_code}) {result.name}
380
+ </span>
381
+ </ListInputItem>
382
+ ))
383
+ ) : (
384
+ <ListInputItem readOnly {...listItemProps}>
385
+ {textNoResult}
386
+ </ListInputItem>
387
+ )}
388
+ </ListInput>
389
+ </InputAndListContainer>
390
+ </InputContainer>
391
+ )
392
392
  }