@julseb-lib/react 0.0.89 → 0.0.91

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 (12) hide show
  1. package/dist/index.cjs.js +286 -295
  2. package/dist/index.css +679 -570
  3. package/dist/index.es.js +1303 -1323
  4. package/dist/index.umd.js +926 -935
  5. package/dist/lib/components/Aside/styles.tsx +0 -1
  6. package/dist/lib/components/Avatar/Avatar.tsx +104 -102
  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/Main/styles.tsx +41 -42
  11. package/dist/lib/index.css +679 -570
  12. package/package.json +1 -1
package/dist/lib/components/Aside/styles.tsx CHANGED
@@ -19,7 +19,6 @@ const StyledAside = styled.aside<{
19
19
  }>`
20
20
  position: relative;
21
21
  width: 100%;
22
- height: 100%;
23
22
  min-height: 100%;
24
23
  max-width: ${({ $size }) => getAsideSize($size || "default")};
25
24
  padding: ${SPACERS.XXL} 0;
package/dist/lib/components/Avatar/Avatar.tsx CHANGED
@@ -35,111 +35,113 @@ import type { ILibAvatar } from "./types"
35
35
  * <Avatar icon={<UserIcon />} badge={{ content: 1, backgroundColor: "danger" }} />
36
36
  */
37
37
  export const Avatar: FC<ILibAvatar> = ({
38
- "data-testid": testid,
39
- as,
40
- ref,
41
- size = 32,
42
- border,
43
- borderRadius = "circle",
44
- badge,
45
- img,
46
- letter,
47
- icon,
48
- iconSize = roundIconSize(size),
49
- backgroundColor = "primary",
50
- contentColor = backgroundColor === "white"
51
- ? "primary"
52
- : backgroundColor === "black"
53
- ? "white"
54
- : "background",
55
- className,
56
- containerStyle,
57
- ...rest
38
+ "data-testid": testid,
39
+ as,
40
+ ref,
41
+ size = 32,
42
+ border,
43
+ borderRadius = "circle",
44
+ badge,
45
+ img,
46
+ letter,
47
+ icon,
48
+ iconSize = roundIconSize(size),
49
+ backgroundColor = "danger",
50
+ contentColor = backgroundColor === "white"
51
+ ? "primary"
52
+ : backgroundColor === "black"
53
+ ? "white"
54
+ : "background",
55
+ className,
56
+ containerStyle,
57
+ role = "img",
58
+ ...rest
58
59
  }) => {
59
- const isBadgeObject = typeof badge === "object"
60
- const badgeSize = isBadgeObject && badge.size ? badge.size : 8
60
+ const isBadgeObject = typeof badge === "object"
61
+ const badgeSize = isBadgeObject && badge.size ? badge.size : 8
61
62
 
62
- const avatarProps = {
63
- "data-testid": testid,
64
- as,
65
- className,
66
- hasBadge: !!badge,
67
- backgroundColor,
68
- border,
69
- borderRadius,
70
- size,
71
- contentColor,
72
- img,
73
- letter,
74
- icon,
75
- iconSize,
76
- ref,
77
- ...rest,
78
- }
63
+ const avatarProps = {
64
+ "data-testid": testid,
65
+ as,
66
+ className,
67
+ hasBadge: !!badge,
68
+ backgroundColor,
69
+ border,
70
+ borderRadius,
71
+ size,
72
+ contentColor,
73
+ img,
74
+ letter,
75
+ icon,
76
+ iconSize,
77
+ ref,
78
+ role,
79
+ ...rest,
80
+ }
79
81
 
80
- if (badge)
81
- return (
82
- <StyledAvatarContainer
83
- data-testid={testid}
84
- ref={ref}
85
- as={as}
86
- className={className}
87
- style={containerStyle}
88
- $backgroundColor={backgroundColor}
89
- $border={border}
90
- $borderRadius={borderRadius}
91
- $size={size}
92
- $contentColor={contentColor}
93
- >
94
- <AvatarFunction {...avatarProps} />
82
+ if (badge)
83
+ return (
84
+ <StyledAvatarContainer
85
+ data-testid={testid}
86
+ ref={ref}
87
+ as={as}
88
+ className={className}
89
+ style={containerStyle}
90
+ $backgroundColor={backgroundColor}
91
+ $border={border}
92
+ $borderRadius={borderRadius}
93
+ $size={size}
94
+ $contentColor={contentColor}
95
+ >
96
+ <AvatarFunction {...avatarProps} />
95
97
 
96
- <StyledBadge
97
- data-testid={testid && `${testid}.Badge`}
98
- className={classNames(
99
- { Badge: className },
100
- `Position${capitalize(
101
- isBadgeObject && badge.position
102
- ? badge.position
103
- : "top"
104
- )}`
105
- )}
106
- size={badgeSize}
107
- number={
108
- isBadgeObject && badge.content
109
- ? badge.content
110
- : undefined
111
- }
112
- backgroundColor={
113
- isBadgeObject && badge.backgroundColor
114
- ? badge.backgroundColor
115
- : undefined
116
- }
117
- contentColor={
118
- isBadgeObject && badge.contentColor
119
- ? badge.contentColor
120
- : undefined
121
- }
122
- padding={
123
- isBadgeObject && badge.padding
124
- ? badge.padding
125
- : undefined
126
- }
127
- $width={badgeSize}
128
- $paddingLeftRight={
129
- isBadgeObject &&
130
- typeof badge.padding === "object" &&
131
- badge.padding?.leftRight
132
- ? badge.padding?.leftRight
133
- : "0px"
134
- }
135
- $outline={
136
- isBadgeObject && badge.outline
137
- ? badge.outline
138
- : undefined
139
- }
140
- />
141
- </StyledAvatarContainer>
142
- )
98
+ <StyledBadge
99
+ data-testid={testid && `${testid}.Badge`}
100
+ className={classNames(
101
+ { Badge: className },
102
+ `Position${capitalize(
103
+ isBadgeObject && badge.position
104
+ ? badge.position
105
+ : "top"
106
+ )}`
107
+ )}
108
+ size={badgeSize}
109
+ number={
110
+ isBadgeObject && badge.content
111
+ ? badge.content
112
+ : undefined
113
+ }
114
+ backgroundColor={
115
+ isBadgeObject && badge.backgroundColor
116
+ ? badge.backgroundColor
117
+ : undefined
118
+ }
119
+ contentColor={
120
+ isBadgeObject && badge.contentColor
121
+ ? badge.contentColor
122
+ : undefined
123
+ }
124
+ padding={
125
+ isBadgeObject && badge.padding
126
+ ? badge.padding
127
+ : undefined
128
+ }
129
+ $width={badgeSize}
130
+ $paddingLeftRight={
131
+ isBadgeObject &&
132
+ typeof badge.padding === "object" &&
133
+ badge.padding?.leftRight
134
+ ? badge.padding?.leftRight
135
+ : "0px"
136
+ }
137
+ $outline={
138
+ isBadgeObject && badge.outline
139
+ ? badge.outline
140
+ : undefined
141
+ }
142
+ />
143
+ </StyledAvatarContainer>
144
+ )
143
145
 
144
- return <AvatarFunction {...avatarProps} />
146
+ return <AvatarFunction {...avatarProps} />
145
147
  }
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 }