@julseb-lib/react 0.0.37 → 0.0.38

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 (31) hide show
  1. package/dist/index.cjs.js +19 -19
  2. package/dist/index.es.js +19 -19
  3. package/dist/index.umd.js +87 -87
  4. package/dist/lib/Variables.ts +6 -4
  5. package/dist/lib/components/Accordion/styles.tsx +3 -3
  6. package/dist/lib/components/Aside/styles.tsx +2 -2
  7. package/dist/lib/components/Breadcrumbs/styles.tsx +2 -2
  8. package/dist/lib/components/Burger/styles.tsx +2 -8
  9. package/dist/lib/components/ButtonIcon/styles.tsx +2 -2
  10. package/dist/lib/components/ComponentsMixins/ComponentsMixins.tsx +9 -9
  11. package/dist/lib/components/Datepicker/styles.tsx +8 -8
  12. package/dist/lib/components/Drawer/styles.tsx +2 -2
  13. package/dist/lib/components/Dropdown/styles.tsx +2 -2
  14. package/dist/lib/components/Footer/styles.tsx +4 -4
  15. package/dist/lib/components/Header/styles.tsx +10 -10
  16. package/dist/lib/components/InputCheck/styles.tsx +4 -4
  17. package/dist/lib/components/InputComponents/styles.tsx +7 -7
  18. package/dist/lib/components/InputImage/styles.tsx +2 -2
  19. package/dist/lib/components/InputSlider/styles.tsx +4 -4
  20. package/dist/lib/components/ListGroup/styles.tsx +2 -2
  21. package/dist/lib/components/Main/styles.tsx +2 -2
  22. package/dist/lib/components/MarkdownEditor/styles.tsx +2 -2
  23. package/dist/lib/components/Messaging/styles.tsx +3 -3
  24. package/dist/lib/components/Pagination/styles.tsx +2 -8
  25. package/dist/lib/components/Rating/styles.tsx +4 -8
  26. package/dist/lib/components/Slideshow/styles.tsx +11 -11
  27. package/dist/lib/components/Table/styles.tsx +2 -8
  28. package/dist/lib/components/Tabs/styles.tsx +5 -5
  29. package/dist/lib/components/Toast/styles.tsx +2 -2
  30. package/dist/lib/components/Wrapper/styles.tsx +2 -2
  31. package/package.json +3 -1
package/dist/lib/components/Pagination/styles.tsx CHANGED
@@ -1,13 +1,7 @@
1
1
  /*=============================================== Pagination styles ===============================================*/
2
2
 
3
3
  import styled, { css } from "styled-components"
4
- import {
5
- setDefaultTheme,
6
- BREAKPOINTS,
7
- Mixins,
8
- RADIUSES,
9
- TRANSITIONS,
10
- } from "../../"
4
+ import { setDefaultTheme, MEDIA, Mixins, RADIUSES, TRANSITIONS } from "../../"
11
5
  import type { LibColorsHover } from "../../types"
12
6
 
13
7
  const BUTTON_SIZE = 32
@@ -50,7 +44,7 @@ const StyledPaginationButton = styled.button<{
50
44
  case false:
51
45
  case undefined:
52
46
  return css`
53
- @media ${BREAKPOINTS.HOVER} {
47
+ @media ${MEDIA.HOVER} {
54
48
  &:not(:disabled):hover {
55
49
  background-color: ${Mixins.ColorsHoverHover(
56
50
  $accentColor,
package/dist/lib/components/Rating/styles.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  /*=============================================== Rating styles ===============================================*/
2
2
 
3
3
  import styled, { css } from "styled-components"
4
- import { BREAKPOINTS, Mixins, setDefaultTheme } from "../../"
4
+ import { MEDIA, Mixins, setDefaultTheme } from "../../"
5
5
  import type { LibValidationStatus } from "../../types"
6
6
 
7
7
  export const BUTTON_SIZE = 32
@@ -29,21 +29,17 @@ const RatingButton = styled.button<{
29
29
  ${({ $isReadOnly, theme, $validationStatus }) =>
30
30
  !$isReadOnly &&
31
31
  css`
32
- @media ${BREAKPOINTS.HOVER} {
32
+ @media ${MEDIA.HOVER} {
33
33
  &:hover {
34
34
  color: ${Mixins.ColorsHoverHover(
35
- $validationStatus === false
36
- ? "danger"
37
- : "primary",
35
+ $validationStatus === false ? "danger" : "primary",
38
36
  theme
39
37
  )};
40
38
  }
41
39
 
42
40
  &:active {
43
41
  color: ${Mixins.ColorsHoverActive(
44
- $validationStatus === false
45
- ? "danger"
46
- : "primary",
42
+ $validationStatus === false ? "danger" : "primary",
47
43
  theme
48
44
  )};
49
45
  }
package/dist/lib/components/Slideshow/styles.tsx CHANGED
@@ -6,7 +6,7 @@ import {
6
6
  setDefaultTheme,
7
7
  Mixins,
8
8
  RADIUSES,
9
- BREAKPOINTS,
9
+ MEDIA,
10
10
  SPACERS,
11
11
  Flexbox,
12
12
  TRANSITIONS,
@@ -124,7 +124,7 @@ const StyledSlideshowButton = styled.button<{
124
124
  return null
125
125
  }};
126
126
 
127
- @media ${BREAKPOINTS.HOVER} {
127
+ @media ${MEDIA.HOVER} {
128
128
  &:hover {
129
129
  background-color: ${({ theme, $color }) =>
130
130
  Mixins.ColorsHoverHover($color, theme)};
@@ -139,7 +139,7 @@ const StyledSlideshowButton = styled.button<{
139
139
  ${({ $hideOnTouch }) =>
140
140
  $hideOnTouch &&
141
141
  css`
142
- @media ${BREAKPOINTS.TOUCH} {
142
+ @media ${MEDIA.TOUCH} {
143
143
  display: none;
144
144
  }
145
145
  `}
@@ -163,7 +163,7 @@ const StyledSlideshowPagination = styled(Flexbox).attrs({
163
163
  ${({ $hideOnTouch }) =>
164
164
  $hideOnTouch &&
165
165
  css`
166
- @media ${BREAKPOINTS.TOUCH} {
166
+ @media ${MEDIA.TOUCH} {
167
167
  display: none;
168
168
  }
169
169
  `}
@@ -188,7 +188,7 @@ const SlideshowPaginationItem = styled.button<{
188
188
  border-radius: ${RADIUSES.ROUND};
189
189
  background-color: ${Mixins.ColorsHoverHover($color, theme)};
190
190
 
191
- @media ${BREAKPOINTS.HOVER} {
191
+ @media ${MEDIA.HOVER} {
192
192
  &:hover {
193
193
  background-color: ${Mixins.ColorsHoverDefault(
194
194
  $color,
@@ -210,7 +210,7 @@ const SlideshowPaginationItem = styled.button<{
210
210
  theme
211
211
  )};
212
212
 
213
- @media ${BREAKPOINTS.HOVER} {
213
+ @media ${MEDIA.HOVER} {
214
214
  &:hover {
215
215
  background-color: ${Mixins.ColorsHoverHover(
216
216
  $color,
@@ -227,7 +227,7 @@ const SlideshowPaginationItem = styled.button<{
227
227
  border-radius: 50%;
228
228
  background-color: ${Mixins.ColorsHoverHover($color, theme)};
229
229
 
230
- @media ${BREAKPOINTS.HOVER} {
230
+ @media ${MEDIA.HOVER} {
231
231
  &:hover {
232
232
  background-color: ${Mixins.ColorsHoverDefault(
233
233
  $color,
@@ -249,7 +249,7 @@ const SlideshowPaginationItem = styled.button<{
249
249
  theme
250
250
  )};
251
251
 
252
- @media ${BREAKPOINTS.HOVER} {
252
+ @media ${MEDIA.HOVER} {
253
253
  &:hover {
254
254
  background-color: ${Mixins.ColorsHoverHover(
255
255
  $color,
@@ -268,7 +268,7 @@ const SlideshowPaginationItem = styled.button<{
268
268
  border: 1px solid
269
269
  ${Mixins.ColorsHoverDefault($color, theme)};
270
270
 
271
- @media ${BREAKPOINTS.HOVER} {
271
+ @media ${MEDIA.HOVER} {
272
272
  &:hover {
273
273
  border-color: ${Mixins.ColorsHoverHover(
274
274
  $color,
@@ -290,7 +290,7 @@ const SlideshowPaginationItem = styled.button<{
290
290
  theme
291
291
  )};
292
292
 
293
- @media ${BREAKPOINTS.HOVER} {
293
+ @media ${MEDIA.HOVER} {
294
294
  &:hover {
295
295
  background-color: ${Mixins.ColorsHoverHover(
296
296
  $color,
@@ -323,7 +323,7 @@ const SlideshowThumbnail = styled.button`
323
323
  opacity: 0.5;
324
324
  transition: ${TRANSITIONS.SHORT};
325
325
 
326
- @media ${BREAKPOINTS.HOVER} {
326
+ @media ${MEDIA.HOVER} {
327
327
  &:hover {
328
328
  opacity: 0.8;
329
329
  }
package/dist/lib/components/Table/styles.tsx CHANGED
@@ -1,13 +1,7 @@
1
1
  /*=============================================== Table styles ===============================================*/
2
2
 
3
3
  import styled, { css } from "styled-components"
4
- import {
5
- setDefaultTheme,
6
- SPACERS,
7
- Mixins,
8
- FONT_SIZES,
9
- BREAKPOINTS,
10
- } from "../../"
4
+ import { setDefaultTheme, SPACERS, Mixins, FONT_SIZES, MEDIA } from "../../"
11
5
  import { TextBaseMixin } from "../ComponentsMixins"
12
6
  import type { CssVerticalAlign, LibTableVariant } from "../../types"
13
7
 
@@ -47,7 +41,7 @@ const StyledTable = styled.table<{
47
41
  font-size: ${FONT_SIZES.SMALL};
48
42
  }
49
43
 
50
- @media ${BREAKPOINTS.MOBILE} {
44
+ @media ${MEDIA.BREAKPOINT_MOBILE} {
51
45
  display: block;
52
46
  }
53
47
  }
package/dist/lib/components/Tabs/styles.tsx CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  setDefaultTheme,
6
6
  Mixins,
7
7
  RADIUSES,
8
- BREAKPOINTS,
8
+ MEDIA,
9
9
  SPACERS,
10
10
  TRANSITIONS,
11
11
  } from "../../"
@@ -65,7 +65,7 @@ const StyledTabsButtonsContainer = styled.div<{
65
65
  $inline: true,
66
66
  })};
67
67
 
68
- @media ${BREAKPOINTS.MOBILE} {
68
+ @media ${MEDIA.BREAKPOINT_MOBILE} {
69
69
  flex-direction: column;
70
70
  }
71
71
  `
@@ -76,7 +76,7 @@ const StyledTabsButtonsContainer = styled.div<{
76
76
  $col: $cols,
77
77
  })};
78
78
 
79
- @media ${BREAKPOINTS.MOBILE} {
79
+ @media ${MEDIA.BREAKPOINT_MOBILE} {
80
80
  grid-template-columns: repeat(1, 1fr);
81
81
  }
82
82
  `
@@ -105,7 +105,7 @@ const StyledTabButton = styled.button<{
105
105
  z-index: 2;
106
106
  color: ${theme.FONT};
107
107
 
108
- @media ${BREAKPOINTS.MOBILE} {
108
+ @media ${MEDIA.BREAKPOINT_MOBILE} {
109
109
  width: 100%;
110
110
  }
111
111
 
@@ -121,7 +121,7 @@ const StyledTabButton = styled.button<{
121
121
  min-width: ${$justify === "start" && "100px"};
122
122
  color: ${theme.FONT};
123
123
 
124
- @media ${BREAKPOINTS.HOVER} {
124
+ @media ${MEDIA.HOVER} {
125
125
  &:hover {
126
126
  background-color: ${Mixins.ColorsHoverHover(
127
127
  "primary",
package/dist/lib/components/Toast/styles.tsx CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  import styled, { keyframes, css } from "styled-components"
4
4
  import {
5
- BREAKPOINTS,
5
+ MEDIA,
6
6
  FONT_SIZES,
7
7
  LINE_HEIGHTS,
8
8
  Mixins,
@@ -124,7 +124,7 @@ const CloseButton = styled.button`
124
124
  $justifyContent: "center",
125
125
  })}
126
126
 
127
- @media ${BREAKPOINTS.HOVER} {
127
+ @media ${MEDIA.HOVER} {
128
128
  &:hover {
129
129
  color: ${({ theme }) => Mixins.ColorsHoverHover("gray", theme)};
130
130
  }
package/dist/lib/components/Wrapper/styles.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  /*=============================================== Wrapper styles ===============================================*/
2
2
 
3
3
  import styled from "styled-components"
4
- import { BREAKPOINTS, Mixins, setDefaultTheme } from "../../"
4
+ import { MEDIA, Mixins, setDefaultTheme } from "../../"
5
5
  import type { LibAllColors, LibSpacers } from "../../types"
6
6
 
7
7
  const StyledWrapper = styled.div<{
@@ -17,7 +17,7 @@ const StyledWrapper = styled.div<{
17
17
  $justifyContent: "center",
18
18
  })}
19
19
 
20
- @media ${BREAKPOINTS.TABLET_LARGE} {
20
+ @media ${MEDIA.BREAKPOINT_TABLET_LARGE} {
21
21
  flex-direction: column;
22
22
  align-items: center;
23
23
  min-height: inherit;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@julseb-lib/react",
3
- "version": "0.0.37",
3
+ "version": "0.0.38",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "scripts": {
@@ -21,6 +21,7 @@
21
21
  "plop:p": "yarn plop preview",
22
22
  "plop:st": "yarn plop subtype",
23
23
  "docgen": "react-docgen -o ./src/data/docgen.json ./src/lib/components/**/*.tsx",
24
+ "cssgen": "cssjson src/lib/index.css --output src/data/styles.json",
24
25
  "check-errors": "tsc --noEmit"
25
26
  },
26
27
  "dependencies": {
@@ -50,6 +51,7 @@
50
51
  "@types/styled-components": "^5.1.34",
51
52
  "@vitejs/plugin-react": "^4.3.1",
52
53
  "axios": "^1.7.5",
54
+ "cssjson-cli": "^1.0.1",
53
55
  "cypress": "^13.13.3",
54
56
  "eslint": "^9.9.1",
55
57
  "eslint-plugin-react": "^7.35.0",