@julseb-lib/react 0.0.88 → 0.0.90

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 (20) hide show
  1. package/dist/index.cjs.js +659 -666
  2. package/dist/index.css +679 -570
  3. package/dist/index.es.js +3243 -2733
  4. package/dist/index.umd.js +1141 -1148
  5. package/dist/lib/Mixins.tsx +970 -970
  6. package/dist/lib/components/Avatar/Avatar.tsx +1 -1
  7. package/dist/lib/components/Avatar/AvatarFunction.tsx +99 -106
  8. package/dist/lib/components/Avatar/styles.tsx +62 -89
  9. package/dist/lib/components/Badge/Badge.tsx +54 -52
  10. package/dist/lib/components/Image/Image.tsx +77 -73
  11. package/dist/lib/components/Image/ImageFunction.tsx +39 -37
  12. package/dist/lib/components/Timepicker/Timepicker.tsx +234 -235
  13. package/dist/lib/components/Youtube/types.ts +5 -4
  14. package/dist/lib/index.css +679 -570
  15. package/dist/lib/index.ts +56 -55
  16. package/dist/lib/types/global.ts +129 -128
  17. package/dist/lib/types/index.ts +0 -1
  18. package/license.md +21 -0
  19. package/package.json +1 -1
  20. /package/dist/lib/{types/design-tokens.ts → design-tokens.ts} +0 -0
package/dist/lib/components/Avatar/Avatar.tsx CHANGED
@@ -46,7 +46,7 @@ export const Avatar: FC<ILibAvatar> = ({
46
46
  letter,
47
47
  icon,
48
48
  iconSize = roundIconSize(size),
49
- backgroundColor = "primary",
49
+ backgroundColor = "danger",
50
50
  contentColor = backgroundColor === "white"
51
51
  ? "primary"
52
52
  : backgroundColor === "black"
package/dist/lib/components/Avatar/AvatarFunction.tsx CHANGED
@@ -5,125 +5,118 @@ import { Image } from "../../"
5
5
  import { appendStyles } from "../../lib-utils"
6
6
  import { LibIcon } from "../LibIcon"
7
7
  import type { LibComponentBase } from "../../types"
8
- import { StyledAvatar, StyledFallback } from "./styles"
8
+ import { StyledAvatar } from "./styles"
9
9
  import type { ILibAvatar } from "./types"
10
10
 
11
11
  type IAvatarFunction = Pick<
12
- ILibAvatar,
13
- | "data-testid"
14
- | "as"
15
- | "className"
16
- | "id"
17
- | "backgroundColor"
18
- | "border"
19
- | "borderRadius"
20
- | "size"
21
- | "contentColor"
22
- | "img"
23
- | "letter"
24
- | "icon"
25
- | "iconSize"
26
- | "iconBaseUrl"
27
- | "fontSize"
12
+ ILibAvatar,
13
+ | "data-testid"
14
+ | "as"
15
+ | "className"
16
+ | "id"
17
+ | "backgroundColor"
18
+ | "border"
19
+ | "borderRadius"
20
+ | "size"
21
+ | "contentColor"
22
+ | "img"
23
+ | "letter"
24
+ | "icon"
25
+ | "iconSize"
26
+ | "iconBaseUrl"
27
+ | "fontSize"
28
28
  > &
29
- LibComponentBase<HTMLSpanElement> & {
30
- hasBadge?: boolean
31
- }
29
+ LibComponentBase<HTMLSpanElement> & {
30
+ hasBadge?: boolean
31
+ }
32
32
 
33
33
  export const AvatarFunction: FC<IAvatarFunction> = ({
34
- "data-testid": testid,
35
- as,
36
- ref,
37
- className,
38
- id,
39
- hasBadge,
40
- backgroundColor,
41
- border,
42
- borderRadius,
43
- size,
44
- contentColor,
45
- img,
46
- letter,
47
- icon,
48
- iconSize,
49
- iconBaseUrl,
50
- fontSize = "body",
51
- ...rest
34
+ "data-testid": testid,
35
+ as,
36
+ ref,
37
+ className,
38
+ id,
39
+ hasBadge,
40
+ backgroundColor,
41
+ border,
42
+ borderRadius,
43
+ size = 48,
44
+ contentColor,
45
+ img,
46
+ letter,
47
+ icon,
48
+ iconSize,
49
+ iconBaseUrl,
50
+ fontSize = "body",
51
+ ...rest
52
52
  }) => {
53
- const randomClass = getRandomString(10, true)
54
- const withClass = className?.split(" ")[0] || randomClass
53
+ const randomClass = getRandomString(10, true)
54
+ const withClass = className?.split(" ")[0] || randomClass
55
55
 
56
- appendStyles(`
56
+ appendStyles(`
57
57
  ${id ? `#${id}` : `.${withClass}`} {
58
58
  --avatar-size: ${size}px;
59
59
  }
60
60
  `)
61
61
 
62
- return (
63
- <StyledAvatar
64
- data-testid={hasBadge && testid ? `${testid}.Avatar` : testid}
65
- ref={!hasBadge ? ref : undefined}
66
- as={!hasBadge ? as : "span"}
67
- id={id}
68
- className={classNames(
69
- hasBadge && className ? `Avatar` : className,
70
- randomClass
71
- )}
72
- $backgroundColor={backgroundColor}
73
- $border={border}
74
- $borderRadius={borderRadius}
75
- $size={size}
76
- $contentColor={contentColor}
77
- $fontSize={fontSize}
78
- {...rest}
79
- >
80
- {img && (
81
- <Image
82
- data-testid={testid && `${testid}.Image`}
83
- className={className && "Image"}
84
- src={typeof img === "object" ? img.src : img}
85
- alt={typeof img === "object" ? img.alt : "Avatar"}
86
- width="100%"
87
- height="100%"
88
- fit="cover"
89
- imgFallback={
90
- typeof img === "object"
91
- ? { text: img.fallback || "", fontSize }
92
- : undefined
93
- }
94
- fallback={
95
- typeof img === "object" ? (
96
- // @ts-ignore
97
- <StyledFallback
98
- $backgroundColor={
99
- img.fallbackBackgroundColor ??
100
- backgroundColor
101
- }
102
- $fontColor={
103
- img.fallbackFontColor ?? contentColor
104
- }
105
- $size={size}
106
- $fontSize={img.fallbackFontSize ?? fontSize}
107
- >
108
- {img.fallback}
109
- </StyledFallback>
110
- ) : undefined
111
- }
112
- />
113
- )}
62
+ // @ts-ignore
63
+ console.log(img?.fallbackBackgroundColor)
114
64
 
115
- {letter && letter}
65
+ return (
66
+ <StyledAvatar
67
+ data-testid={hasBadge && testid ? `${testid}.Avatar` : testid}
68
+ ref={!hasBadge ? ref : undefined}
69
+ as={!hasBadge ? as : "span"}
70
+ id={id}
71
+ className={classNames(
72
+ hasBadge && className ? `Avatar` : className,
73
+ randomClass
74
+ )}
75
+ $backgroundColor={backgroundColor}
76
+ $border={border}
77
+ $borderRadius={borderRadius}
78
+ $size={size}
79
+ $contentColor={contentColor}
80
+ $fontSize={fontSize}
81
+ {...rest}
82
+ >
83
+ {img && (
84
+ <Image
85
+ data-testid={testid && `${testid}.Image`}
86
+ className={className && "Image"}
87
+ src={typeof img === "object" ? img.src : img}
88
+ alt={typeof img === "object" ? img.alt : "Avatar"}
89
+ width="100%"
90
+ height="100%"
91
+ fit="cover"
92
+ imgFallback={
93
+ typeof img === "object"
94
+ ? {
95
+ text: img.fallback ?? "",
96
+ fontSize: img.fallbackFontSize ?? fontSize,
97
+ background:
98
+ img.fallbackBackgroundColor ??
99
+ backgroundColor,
100
+ textColor:
101
+ img.fallbackFontColor ?? contentColor,
102
+ }
103
+ : undefined
104
+ }
105
+ />
106
+ )}
116
107
 
117
- {icon && (
118
- <LibIcon
119
- data-testid={testid && `${testid}.Icon`}
120
- className={className && "Icon"}
121
- icon={icon}
122
- size={iconSize}
123
- color={contentColor}
124
- baseUrl={iconBaseUrl}
125
- />
126
- )}
127
- </StyledAvatar>
128
- )
108
+ {letter && letter}
109
+
110
+ {icon && (
111
+ <LibIcon
112
+ data-testid={testid && `${testid}.Icon`}
113
+ className={className && "Icon"}
114
+ icon={icon}
115
+ size={iconSize}
116
+ color={contentColor}
117
+ baseUrl={iconBaseUrl}
118
+ />
119
+ )}
120
+ </StyledAvatar>
121
+ )
129
122
  }
package/dist/lib/components/Avatar/styles.tsx CHANGED
@@ -1,115 +1,88 @@
1
1
  import type { FC } from "react"
2
2
  import styled, { css } from "styled-components"
3
- import {
4
- setDefaultTheme,
5
- Badge,
6
- Mixins,
7
- FONT_WEIGHTS,
8
- SPACERS,
9
- stringifyPx,
10
- } from "../../"
3
+ import { setDefaultTheme, Badge, Mixins, FONT_WEIGHTS, SPACERS } from "../../"
11
4
  import type {
12
- LibAllColors,
13
- ILibBorder,
14
- ILibRadius,
15
- LibSpacers,
16
- ILibOutline,
17
- LibFontSizes,
5
+ LibAllColors,
6
+ ILibBorder,
7
+ ILibRadius,
8
+ LibSpacers,
9
+ ILibOutline,
10
+ LibFontSizes,
18
11
  } from "../../types"
19
12
 
20
13
  const Common = ({
21
- $borderRadius,
22
- $backgroundColor,
23
- $contentColor,
14
+ $borderRadius,
15
+ $backgroundColor,
16
+ $contentColor,
24
17
  }: {
25
- $borderRadius?: ILibRadius
26
- $backgroundColor: LibAllColors
27
- $contentColor: LibAllColors
18
+ $borderRadius?: ILibRadius
19
+ $backgroundColor: LibAllColors
20
+ $contentColor: LibAllColors
28
21
  }) => css`
29
- background-color: ${({ theme }) =>
30
- Mixins.AllColors($backgroundColor, theme)};
31
- color: ${({ theme }) => Mixins.AllColors($contentColor, theme)};
32
- ${Mixins.BorderRadius($borderRadius)};
33
- ${Mixins.Flexbox({
34
- $inline: true,
35
- $alignItems: "center",
36
- $justifyContent: "center",
37
- })}
22
+ background-color: ${({ theme }) =>
23
+ Mixins.AllColors($backgroundColor, theme)};
24
+ color: ${({ theme }) => Mixins.AllColors($contentColor, theme)};
25
+ ${Mixins.BorderRadius($borderRadius)};
26
+ ${Mixins.Flexbox({
27
+ $inline: true,
28
+ $alignItems: "center",
29
+ $justifyContent: "center",
30
+ })}
38
31
 
39
- && {
40
- width: var(--avatar-size);
41
- height: var(--avatar-size);
42
- }
32
+ && {
33
+ width: var(--avatar-size);
34
+ height: var(--avatar-size);
35
+ }
43
36
  `
44
37
 
45
38
  const StyledAvatarContainer = styled.span<{
46
- $borderRadius?: ILibRadius
47
- $backgroundColor: LibAllColors
48
- $contentColor: LibAllColors
39
+ $borderRadius?: ILibRadius
40
+ $backgroundColor: LibAllColors
41
+ $contentColor: LibAllColors
49
42
  }>`
50
- ${Common}
51
- position: relative;
52
- padding: 0;
53
- border-style: inherit;
43
+ ${Common}
44
+ position: relative;
45
+ padding: 0;
46
+ border-style: inherit;
54
47
  `
55
48
 
56
49
  const StyledAvatar = styled.span<{
57
- $border?: ILibBorder
58
- $borderRadius?: ILibRadius
59
- $backgroundColor: LibAllColors
60
- $contentColor: LibAllColors
61
- $fontSize: LibFontSizes
50
+ $border?: ILibBorder
51
+ $borderRadius?: ILibRadius
52
+ $backgroundColor: LibAllColors
53
+ $contentColor: LibAllColors
54
+ $fontSize: LibFontSizes
62
55
  }>`
63
- ${Common}
64
- ${({ $border }) => Mixins.Border($border)};
65
- overflow: hidden;
66
- position: relative;
67
- z-index: 0;
68
- font-weight: ${FONT_WEIGHTS.BLACK};
69
- line-height: var(--avatar-size);
70
- text-transform: uppercase;
71
- font-size: ${({ $fontSize }) => Mixins.FontSize($fontSize)};
56
+ ${Common}
57
+ ${({ $border }) => Mixins.Border($border)};
58
+ overflow: hidden;
59
+ position: relative;
60
+ z-index: 0;
61
+ font-weight: ${FONT_WEIGHTS.BLACK};
62
+ line-height: var(--avatar-size);
63
+ text-transform: uppercase;
64
+ font-size: ${({ $fontSize }) => Mixins.FontSize($fontSize)};
72
65
  `
73
66
 
74
67
  const StyledBadge = styled(Badge)<{
75
- $width: number
76
- $paddingLeftRight: LibSpacers | "auto"
77
- $outline?: ILibOutline
68
+ $width: number
69
+ $paddingLeftRight: LibSpacers | "auto"
70
+ $outline?: ILibOutline
78
71
  }>`
79
- position: absolute;
80
- right: ${({ $width, $paddingLeftRight }) =>
81
- `calc((${$width / 2}px + ${Mixins.Spacer($paddingLeftRight)}) * -1)`};
82
- ${({ $outline }) => Mixins.Outline($outline)}
72
+ position: absolute;
73
+ right: ${({ $width, $paddingLeftRight }) =>
74
+ `calc((${$width / 2}px + ${Mixins.Spacer($paddingLeftRight)}) * -1)`};
75
+ ${({ $outline }) => Mixins.Outline($outline)}
83
76
 
84
- &.PositionTop {
85
- top: ${SPACERS.XXS};
86
- }
77
+ &.PositionTop {
78
+ top: ${SPACERS.XXS};
79
+ }
87
80
 
88
- &.PositionBottom {
89
- bottom: ${SPACERS.XXS};
90
- }
81
+ &.PositionBottom {
82
+ bottom: ${SPACERS.XXS};
83
+ }
91
84
  ` as FC<any>
92
85
 
93
- const StyledFallback = styled.span<{
94
- $size: number
95
- $backgroundColor: LibAllColors
96
- $fontColor: LibAllColors
97
- $fontSize: LibFontSizes
98
- }>`
99
- width: ${({ $size }) => stringifyPx($size)};
100
- height: ${({ $size }) => stringifyPx($size)};
101
- font-weight: ${FONT_WEIGHTS.BLACK};
102
- background-color: ${({ $backgroundColor, theme }) =>
103
- Mixins.AllColors($backgroundColor, theme)};
104
- color: ${({ $fontColor, theme }) => Mixins.AllColors($fontColor, theme)};
105
- font-size: ${({ $fontSize }) => Mixins.FontSize($fontSize)};
106
- `
107
-
108
- setDefaultTheme([
109
- StyledAvatarContainer,
110
- StyledAvatar,
111
- StyledBadge,
112
- StyledFallback,
113
- ])
86
+ setDefaultTheme([StyledAvatarContainer, StyledAvatar, StyledBadge])
114
87
 
115
- export { StyledAvatarContainer, StyledAvatar, StyledBadge, StyledFallback }
88
+ export { StyledAvatarContainer, StyledAvatar, StyledBadge }
package/dist/lib/components/Badge/Badge.tsx CHANGED
@@ -33,65 +33,67 @@ import type { ILibBadge } from "./types"
33
33
  * <Badge icon={<CustomIcon />} size={24} />
34
34
  */
35
35
  export const Badge: FC<ILibBadge> = ({
36
- "data-testid": testid,
37
- className,
38
- ref,
39
- id,
40
- as,
41
- size = 16,
42
- icon,
43
- iconSize = roundIconSize(size),
44
- iconBaseUrl,
45
- number,
46
- backgroundColor = "primary",
47
- contentColor = backgroundColor === "white"
48
- ? "primary"
49
- : backgroundColor === "black"
50
- ? "white"
51
- : "background",
52
- borderRadius = "round",
53
- padding = {
54
- leftRight: "xs",
55
- },
56
- ...rest
36
+ "data-testid": testid,
37
+ className,
38
+ ref,
39
+ id,
40
+ as,
41
+ size = 16,
42
+ icon,
43
+ iconSize = roundIconSize(size),
44
+ iconBaseUrl,
45
+ number,
46
+ backgroundColor = "primary",
47
+ contentColor = backgroundColor === "white"
48
+ ? "primary"
49
+ : backgroundColor === "black"
50
+ ? "white"
51
+ : backgroundColor === "background"
52
+ ? "font"
53
+ : "background",
54
+ borderRadius = "round",
55
+ padding = {
56
+ leftRight: "xs",
57
+ },
58
+ ...rest
57
59
  }) => {
58
- const randomClass = getRandomString(10, true)
59
- const withClass = className?.split(" ")[0] || randomClass
60
+ const randomClass = getRandomString(10, true)
61
+ const withClass = className?.split(" ")[0] || randomClass
60
62
 
61
- appendStyles(`
63
+ appendStyles(`
62
64
  ${id ? `#${id}` : `.${withClass}`} {
63
65
  --badge-size: ${size}px;
64
66
  --badge-font-size: ${roundIconSize(size)}px;
65
67
  }
66
68
  `)
67
69
 
68
- return (
69
- <StyledBadge
70
- data-testid={testid}
71
- ref={ref}
72
- as={as}
73
- className={classNames(className, randomClass)}
74
- id={id}
75
- $backgroundColor={backgroundColor}
76
- $contentColor={contentColor}
77
- $borderRadius={borderRadius}
78
- $padding={padding}
79
- $hasChildren={!!(icon || number)}
80
- $childrenLength={number?.toString().length}
81
- {...rest}
82
- >
83
- {icon && (
84
- <LibIcon
85
- data-testid={testid && `${testid}.Icon`}
86
- className={className && "Icon"}
87
- icon={icon}
88
- color={contentColor}
89
- size={iconSize}
90
- baseUrl={iconBaseUrl}
91
- />
92
- )}
70
+ return (
71
+ <StyledBadge
72
+ data-testid={testid}
73
+ ref={ref}
74
+ as={as}
75
+ className={classNames(className, randomClass)}
76
+ id={id}
77
+ $backgroundColor={backgroundColor}
78
+ $contentColor={contentColor}
79
+ $borderRadius={borderRadius}
80
+ $padding={padding}
81
+ $hasChildren={!!(icon || number)}
82
+ $childrenLength={number?.toString().length}
83
+ {...rest}
84
+ >
85
+ {icon && (
86
+ <LibIcon
87
+ data-testid={testid && `${testid}.Icon`}
88
+ className={className && "Icon"}
89
+ icon={icon}
90
+ color={contentColor}
91
+ size={iconSize}
92
+ baseUrl={iconBaseUrl}
93
+ />
94
+ )}
93
95
 
94
- {number}
95
- </StyledBadge>
96
- )
96
+ {number}
97
+ </StyledBadge>
98
+ )
97
99
  }