@julseb-lib/react 0.0.93 → 0.0.95

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 (7) hide show
  1. package/dist/index.cjs.js +65 -63
  2. package/dist/index.es.js +373 -367
  3. package/dist/index.umd.js +65 -63
  4. package/dist/lib/components/Card/Card.tsx +79 -75
  5. package/dist/lib/components/Card/styles.tsx +63 -59
  6. package/dist/lib/components/Card/types.ts +24 -22
  7. package/package.json +2 -2
package/dist/lib/components/Card/Card.tsx CHANGED
@@ -47,80 +47,84 @@ import type { ILibCard } from "./types"
47
47
  * </Card>
48
48
  */
49
49
  export const Card: FC<ILibCard> = ({
50
- "data-testid": testid,
51
- as,
52
- ref,
53
- children,
54
- border,
55
- borderRadius,
56
- padding,
57
- cursor,
58
- width = "100%",
59
- height,
60
- shadow,
61
- backgroundColor = "background",
62
- textColor = "font",
63
- backgroundImg,
64
- textAlign = "left",
65
- href,
66
- to,
67
- blank,
68
- onClick,
69
- inline,
70
- flexDirection,
71
- flexWrap,
72
- justifyContent,
73
- alignItems,
74
- justifyItems,
75
- alignContent,
76
- gap,
77
- columnGap,
78
- rowGap,
79
- ...rest
50
+ "data-testid": testid,
51
+ as,
52
+ ref,
53
+ children,
54
+ border,
55
+ borderRadius,
56
+ padding,
57
+ cursor,
58
+ width = "100%",
59
+ maxWidth = "100%",
60
+ height,
61
+ maxHeight,
62
+ shadow,
63
+ backgroundColor = "background",
64
+ textColor = "font",
65
+ backgroundImg,
66
+ textAlign = "left",
67
+ href,
68
+ to,
69
+ blank,
70
+ onClick,
71
+ inline,
72
+ flexDirection,
73
+ flexWrap,
74
+ justifyContent,
75
+ alignItems,
76
+ justifyItems,
77
+ alignContent,
78
+ gap,
79
+ columnGap,
80
+ rowGap,
81
+ ...rest
80
82
  }) => {
81
- return (
82
- <StyledCard
83
- data-testid={testid}
84
- ref={ref}
85
- as={as ? as : to ? Link : href ? "a" : onClick ? "button" : "div"}
86
- to={to}
87
- href={href}
88
- target={blank ? "_blank" : undefined}
89
- rel={blank ? "noreferrer noopener" : undefined}
90
- onClick={onClick}
91
- $border={border}
92
- $borderRadius={borderRadius}
93
- $padding={padding}
94
- $cursor={cursor}
95
- $width={width}
96
- $height={height}
97
- $shadow={shadow}
98
- $backgroundColor={backgroundColor}
99
- $textColor={textColor}
100
- $backgroundImg={
101
- backgroundImg && {
102
- $img: backgroundImg.img,
103
- $clip: backgroundImg.clip,
104
- $origin: backgroundImg.origin,
105
- $position: backgroundImg.position,
106
- $repeat: backgroundImg.repeat,
107
- $size: backgroundImg.size,
108
- }
109
- }
110
- $textAlign={textAlign}
111
- $inline={inline}
112
- $flexDirection={flexDirection}
113
- $flexWrap={flexWrap}
114
- $justifyContent={justifyContent}
115
- $alignItems={alignItems}
116
- $justifyItems={justifyItems}
117
- $alignContent={alignContent}
118
- $gap={gap}
119
- $columnGap={columnGap}
120
- $rowGap={rowGap}
121
- {...rest}
122
- >
123
- {children}
124
- </StyledCard>
125
- )
83
+ return (
84
+ <StyledCard
85
+ data-testid={testid}
86
+ ref={ref}
87
+ as={as ? as : to ? Link : href ? "a" : onClick ? "button" : "div"}
88
+ to={to}
89
+ href={href}
90
+ target={blank ? "_blank" : undefined}
91
+ rel={blank ? "noreferrer noopener" : undefined}
92
+ onClick={onClick}
93
+ $border={border}
94
+ $borderRadius={borderRadius}
95
+ $padding={padding}
96
+ $cursor={cursor}
97
+ $width={width}
98
+ $maxWidth={maxWidth}
99
+ $height={height}
100
+ $maxHeight={maxHeight}
101
+ $shadow={shadow}
102
+ $backgroundColor={backgroundColor}
103
+ $textColor={textColor}
104
+ $backgroundImg={
105
+ backgroundImg && {
106
+ $img: backgroundImg.img,
107
+ $clip: backgroundImg.clip,
108
+ $origin: backgroundImg.origin,
109
+ $position: backgroundImg.position,
110
+ $repeat: backgroundImg.repeat,
111
+ $size: backgroundImg.size,
112
+ }
113
+ }
114
+ $textAlign={textAlign}
115
+ $inline={inline}
116
+ $flexDirection={flexDirection}
117
+ $flexWrap={flexWrap}
118
+ $justifyContent={justifyContent}
119
+ $alignItems={alignItems}
120
+ $justifyItems={justifyItems}
121
+ $alignContent={alignContent}
122
+ $gap={gap}
123
+ $columnGap={columnGap}
124
+ $rowGap={rowGap}
125
+ {...rest}
126
+ >
127
+ {children}
128
+ </StyledCard>
129
+ )
126
130
  }
package/dist/lib/components/Card/styles.tsx CHANGED
@@ -3,69 +3,73 @@ import type { Property } from "csstype"
3
3
  import { stringifyPx } from "@julseb-lib/utils"
4
4
  import { setDefaultTheme, Mixins } from "../../"
5
5
  import type {
6
- CssCursor,
7
- LibAllColors,
8
- ILibBorder,
9
- ILibBoxShadow,
10
- ILibPadding,
11
- ILibRadius,
12
- CssTextAlign,
13
- CssAlignContent,
14
- CssAlignItems,
15
- CssFlexDirection,
16
- CssFlexWrap,
17
- CssJustifyContent,
18
- CssJustifyItems,
19
- LibSpacers,
6
+ CssCursor,
7
+ LibAllColors,
8
+ ILibBorder,
9
+ ILibBoxShadow,
10
+ ILibPadding,
11
+ ILibRadius,
12
+ CssTextAlign,
13
+ CssAlignContent,
14
+ CssAlignItems,
15
+ CssFlexDirection,
16
+ CssFlexWrap,
17
+ CssJustifyContent,
18
+ CssJustifyItems,
19
+ LibSpacers,
20
20
  } from "../../types"
21
21
 
22
22
  const StyledCard = styled.div<{
23
- $border?: ILibBorder
24
- $borderRadius?: ILibRadius
25
- $padding?: ILibPadding
26
- $cursor?: CssCursor
27
- $width?: string | number
28
- $height?: string | number
29
- $shadow?: ILibBoxShadow
30
- $backgroundColor: LibAllColors
31
- $textColor: LibAllColors
32
- $backgroundImg?: {
33
- $img: string
34
- $clip?: Property.BackgroundClip
35
- $origin?: Property.BackgroundOrigin
36
- $position?: Property.BackgroundPosition
37
- $repeat?: Property.BackgroundRepeat
38
- $size?: Property.BackgroundSize
39
- }
40
- $textAlign?: CssTextAlign
41
- $inline?: boolean
42
- $flexDirection?: CssFlexDirection
43
- $flexWrap?: CssFlexWrap
44
- $justifyContent?: CssJustifyContent
45
- $alignItems?: CssAlignItems
46
- $justifyItems?: CssJustifyItems
47
- $alignContent?: CssAlignContent
48
- $gap?: LibSpacers
49
- $columnGap?: LibSpacers
50
- $rowGap?: LibSpacers
23
+ $border?: ILibBorder
24
+ $borderRadius?: ILibRadius
25
+ $padding?: ILibPadding
26
+ $cursor?: CssCursor
27
+ $width?: string | number
28
+ $maxWidth?: string | number
29
+ $height?: string | number
30
+ $maxHeight?: string | number
31
+ $shadow?: ILibBoxShadow
32
+ $backgroundColor: LibAllColors
33
+ $textColor: LibAllColors
34
+ $backgroundImg?: {
35
+ $img: string
36
+ $clip?: Property.BackgroundClip
37
+ $origin?: Property.BackgroundOrigin
38
+ $position?: Property.BackgroundPosition
39
+ $repeat?: Property.BackgroundRepeat
40
+ $size?: Property.BackgroundSize
41
+ }
42
+ $textAlign?: CssTextAlign
43
+ $inline?: boolean
44
+ $flexDirection?: CssFlexDirection
45
+ $flexWrap?: CssFlexWrap
46
+ $justifyContent?: CssJustifyContent
47
+ $alignItems?: CssAlignItems
48
+ $justifyItems?: CssJustifyItems
49
+ $alignContent?: CssAlignContent
50
+ $gap?: LibSpacers
51
+ $columnGap?: LibSpacers
52
+ $rowGap?: LibSpacers
51
53
  }>`
52
- ${Mixins.Flexbox};
53
- text-decoration: none;
54
- overflow: hidden;
55
- position: relative;
56
- cursor: ${({ $cursor }) => $cursor};
57
- width: ${({ $width }) => $width && stringifyPx($width)};
58
- height: ${({ $height }) => $height && stringifyPx($height)};
59
- background-color: ${({ theme, $backgroundColor }) =>
60
- Mixins.AllColors($backgroundColor, theme)};
61
- color: ${({ theme, $textColor }) => Mixins.AllColors($textColor, theme)};
62
- text-align: ${({ $textAlign }) => $textAlign};
63
- ${({ $borderRadius }) => Mixins.BorderRadius($borderRadius)};
64
- ${({ $border }) => Mixins.Border($border)};
65
- ${({ $padding }) => Mixins.Padding($padding)};
66
- ${({ $shadow }) => Mixins.BoxShadow($shadow)};
67
- ${({ $backgroundImg }) =>
68
- Mixins.BackgroundImage({ ...($backgroundImg as any) })};
54
+ ${Mixins.Flexbox};
55
+ text-decoration: none;
56
+ overflow: hidden;
57
+ position: relative;
58
+ cursor: ${({ $cursor }) => $cursor};
59
+ width: ${({ $width }) => $width && stringifyPx($width)};
60
+ max-width: ${({ $maxWidth }) => $maxWidth && stringifyPx($maxWidth)};
61
+ height: ${({ $height }) => $height && stringifyPx($height)};
62
+ max-height: ${({ $maxHeight }) => $maxHeight && stringifyPx($maxHeight)};
63
+ background-color: ${({ theme, $backgroundColor }) =>
64
+ Mixins.AllColors($backgroundColor, theme)};
65
+ color: ${({ theme, $textColor }) => Mixins.AllColors($textColor, theme)};
66
+ text-align: ${({ $textAlign }) => $textAlign};
67
+ ${({ $borderRadius }) => Mixins.BorderRadius($borderRadius)};
68
+ ${({ $border }) => Mixins.Border($border)};
69
+ ${({ $padding }) => Mixins.Padding($padding)};
70
+ ${({ $shadow }) => Mixins.BoxShadow($shadow)};
71
+ ${({ $backgroundImg }) =>
72
+ Mixins.BackgroundImage({ ...($backgroundImg as any) })};
69
73
  `
70
74
 
71
75
  setDefaultTheme([StyledCard])
package/dist/lib/components/Card/types.ts CHANGED
@@ -1,27 +1,29 @@
1
1
  import type {
2
- LibComponentBase,
3
- LibButtonLinkBlank,
4
- ILibBackgroundImage,
5
- ILibBorder,
6
- ILibRadius,
7
- CssCursor,
8
- ILibBoxShadow,
9
- LibAllColors,
10
- CssTextAlign,
2
+ LibComponentBase,
3
+ LibButtonLinkBlank,
4
+ ILibBackgroundImage,
5
+ ILibBorder,
6
+ ILibRadius,
7
+ CssCursor,
8
+ ILibBoxShadow,
9
+ LibAllColors,
10
+ CssTextAlign,
11
11
  } from "../../types"
12
12
  import type { ILibFlexbox } from "../Flexbox/types"
13
13
 
14
14
  export type ILibCard = LibComponentBase<HTMLDivElement> &
15
- LibButtonLinkBlank &
16
- ILibFlexbox & {
17
- border?: ILibBorder
18
- borderRadius?: ILibRadius
19
- cursor?: CssCursor
20
- width?: string | number
21
- height?: string | number
22
- shadow?: ILibBoxShadow
23
- backgroundColor?: LibAllColors
24
- textColor?: LibAllColors
25
- backgroundImg?: ILibBackgroundImage
26
- textAlign?: CssTextAlign
27
- }
15
+ LibButtonLinkBlank &
16
+ ILibFlexbox & {
17
+ border?: ILibBorder
18
+ borderRadius?: ILibRadius
19
+ cursor?: CssCursor
20
+ width?: string | number
21
+ maxWidth?: string | number
22
+ height?: string | number
23
+ maxHeight?: string | number
24
+ shadow?: ILibBoxShadow
25
+ backgroundColor?: LibAllColors
26
+ textColor?: LibAllColors
27
+ backgroundImg?: ILibBackgroundImage
28
+ textAlign?: CssTextAlign
29
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@julseb-lib/react",
3
- "version": "0.0.93",
3
+ "version": "0.0.95",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "scripts": {
@@ -14,7 +14,7 @@
14
14
  "plop": "cross-env NODE_OPTIONS='--import tsx' plop --plopfile=./plop/plopfile.ts",
15
15
  "plop:c": "yarn plop component",
16
16
  "plop:p": "yarn plop preview",
17
- "plop:st": "yarn plop subtype",
17
+ "plop:st": "yarn plop subtype",
18
18
  "cy": "cypress",
19
19
  "cy:open": "cypress open",
20
20
  "cy:ct:run": "cypress run --component --browser electron",