@pushwoosh/kit-helpers 4.7.0 → 4.8.1

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 (3) hide show
  1. package/grid.d.ts +44 -28
  2. package/grid.js +22 -1
  3. package/package.json +1 -1
package/grid.d.ts CHANGED
@@ -1,66 +1,81 @@
1
- export declare const toCssValue: (value: number | string) => string;
1
+ type StrNum = string | number;
2
+ export declare const toCssValue: (value: StrNum) => string;
3
+ type CssBoxSides<T> = {
4
+ top?: T;
5
+ right?: T;
6
+ bottom?: T;
7
+ left?: T;
8
+ } | {
9
+ horizontal: T;
10
+ top?: T;
11
+ bottom?: T;
12
+ } | {
13
+ vertical: T;
14
+ right?: T;
15
+ left?: T;
16
+ };
2
17
  export declare const GridContainer: import("styled-components").StyledComponent<"div", any, {
3
18
  $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
4
19
  $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
5
20
  $bgColor?: string | undefined;
6
- $border?: string | undefined;
7
- $borderRadius?: string | number | undefined;
21
+ $border?: string | CssBoxSides<string> | undefined;
22
+ $borderRadius?: StrNum | undefined;
8
23
  $boxShadow?: string | undefined;
9
- $gap?: string | number | undefined;
24
+ $gap?: StrNum | undefined;
10
25
  $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
11
26
  $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
12
27
  $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
13
- $margin?: string | number | undefined;
14
- $padding?: string | number | undefined;
28
+ $margin?: StrNum | CssBoxSides<StrNum> | undefined;
29
+ $padding?: StrNum | CssBoxSides<StrNum> | undefined;
15
30
  $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
16
31
  }, never>;
17
32
  export declare const Columns: import("styled-components").StyledComponent<"div", any, {
18
33
  $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
19
34
  $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
20
35
  $bgColor?: string | undefined;
21
- $border?: string | undefined;
22
- $borderRadius?: string | number | undefined;
36
+ $border?: string | CssBoxSides<string> | undefined;
37
+ $borderRadius?: StrNum | undefined;
23
38
  $boxShadow?: string | undefined;
24
- $gap?: string | number | undefined;
39
+ $gap?: StrNum | undefined;
25
40
  $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
26
41
  $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
27
42
  $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
28
- $margin?: string | number | undefined;
29
- $padding?: string | number | undefined;
43
+ $margin?: StrNum | CssBoxSides<StrNum> | undefined;
44
+ $padding?: StrNum | CssBoxSides<StrNum> | undefined;
30
45
  $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
31
46
  } & {
32
- $sizes: number | string;
47
+ $sizes: StrNum;
33
48
  }, never>;
34
49
  export declare const Rows: import("styled-components").StyledComponent<"div", any, {
35
50
  $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
36
51
  $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
37
52
  $bgColor?: string | undefined;
38
- $border?: string | undefined;
39
- $borderRadius?: string | number | undefined;
53
+ $border?: string | CssBoxSides<string> | undefined;
54
+ $borderRadius?: StrNum | undefined;
40
55
  $boxShadow?: string | undefined;
41
- $gap?: string | number | undefined;
56
+ $gap?: StrNum | undefined;
42
57
  $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
43
58
  $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
44
59
  $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
45
- $margin?: string | number | undefined;
46
- $padding?: string | number | undefined;
60
+ $margin?: StrNum | CssBoxSides<StrNum> | undefined;
61
+ $padding?: StrNum | CssBoxSides<StrNum> | undefined;
47
62
  $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
48
63
  } & {
49
- $sizes: number | string;
64
+ $sizes: StrNum;
50
65
  }, never>;
51
66
  export declare const Horizontal: import("styled-components").StyledComponent<"div", any, {
52
67
  $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
53
68
  $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
54
69
  $bgColor?: string | undefined;
55
- $border?: string | undefined;
56
- $borderRadius?: string | number | undefined;
70
+ $border?: string | CssBoxSides<string> | undefined;
71
+ $borderRadius?: StrNum | undefined;
57
72
  $boxShadow?: string | undefined;
58
- $gap?: string | number | undefined;
73
+ $gap?: StrNum | undefined;
59
74
  $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
60
75
  $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
61
76
  $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
62
- $margin?: string | number | undefined;
63
- $padding?: string | number | undefined;
77
+ $margin?: StrNum | CssBoxSides<StrNum> | undefined;
78
+ $padding?: StrNum | CssBoxSides<StrNum> | undefined;
64
79
  $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
65
80
  } & {
66
81
  $gridAutoFlow: string;
@@ -69,16 +84,17 @@ export declare const Vertical: import("styled-components").StyledComponent<"div"
69
84
  $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
70
85
  $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
71
86
  $bgColor?: string | undefined;
72
- $border?: string | undefined;
73
- $borderRadius?: string | number | undefined;
87
+ $border?: string | CssBoxSides<string> | undefined;
88
+ $borderRadius?: StrNum | undefined;
74
89
  $boxShadow?: string | undefined;
75
- $gap?: string | number | undefined;
90
+ $gap?: StrNum | undefined;
76
91
  $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
77
92
  $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
78
93
  $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
79
- $margin?: string | number | undefined;
80
- $padding?: string | number | undefined;
94
+ $margin?: StrNum | CssBoxSides<StrNum> | undefined;
95
+ $padding?: StrNum | CssBoxSides<StrNum> | undefined;
81
96
  $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
82
97
  } & {
83
98
  $gridAutoFlow: string;
84
99
  }, "$gridAutoFlow">;
100
+ export {};
package/grid.js CHANGED
@@ -8,10 +8,31 @@ const createCssDeclaration = (property, value, valueConvert) => {
8
8
  }
9
9
  return undefined;
10
10
  };
11
+ function createCssBoxDeclaration(property, value, valueConvert) {
12
+ if (typeof value === 'object') {
13
+ const declarations = [];
14
+ const {
15
+ horizontal,
16
+ vertical,
17
+ ...rest
18
+ } = value;
19
+ if (horizontal) {
20
+ declarations.push(createCssDeclaration(`${property}-left`, horizontal, valueConvert), createCssDeclaration(`${property}-right`, horizontal, valueConvert));
21
+ }
22
+ if (vertical) {
23
+ declarations.push(createCssDeclaration(`${property}-top`, vertical, valueConvert), createCssDeclaration(`${property}-bottom`, vertical, valueConvert));
24
+ }
25
+ Object.entries(rest).forEach(([key, keyValue]) => {
26
+ declarations.push(createCssDeclaration(`${property}-${key}`, keyValue, valueConvert));
27
+ });
28
+ return declarations.join('');
29
+ }
30
+ return createCssDeclaration(property, value, valueConvert);
31
+ }
11
32
  export const GridContainer = styled.div.withConfig({
12
33
  displayName: "GridContainer",
13
34
  componentId: "sc-1mpmh7u-0"
14
- })(["display:grid;", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], props => createCssDeclaration('align-content', props.$alignContent), props => createCssDeclaration('align-items', props.$alignItems), props => createCssDeclaration('background-color', props.$bgColor), props => createCssDeclaration('border', props.$border), props => createCssDeclaration('border-radius', props.$borderRadius, toCssValue), props => createCssDeclaration('box-shadow', props.$boxShadow), props => createCssDeclaration('gap', props.$gap, toCssValue), props => createCssDeclaration('grid-auto-flow', props.$gridAutoFlow), props => createCssDeclaration('justify-content', props.$justifyContent), props => createCssDeclaration('justify-items', props.$justifyItems), props => createCssDeclaration('margin', props.$margin, toCssValue), props => createCssDeclaration('padding', props.$padding, toCssValue), props => createCssDeclaration('place-items', props.$placeItems));
35
+ })(["display:grid;", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], props => createCssDeclaration('align-content', props.$alignContent), props => createCssDeclaration('align-items', props.$alignItems), props => createCssDeclaration('background-color', props.$bgColor), props => createCssBoxDeclaration('border', props.$border), props => createCssDeclaration('border-radius', props.$borderRadius, toCssValue), props => createCssDeclaration('box-shadow', props.$boxShadow), props => createCssDeclaration('gap', props.$gap, toCssValue), props => createCssDeclaration('grid-auto-flow', props.$gridAutoFlow), props => createCssDeclaration('justify-content', props.$justifyContent), props => createCssDeclaration('justify-items', props.$justifyItems), props => createCssBoxDeclaration('margin', props.$margin, toCssValue), props => createCssBoxDeclaration('padding', props.$padding, toCssValue), props => createCssDeclaration('place-items', props.$placeItems));
15
36
  export const Columns = styled(GridContainer).withConfig({
16
37
  displayName: "Columns",
17
38
  componentId: "sc-1mpmh7u-1"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pushwoosh/kit-helpers",
3
- "version": "4.7.0",
3
+ "version": "4.8.1",
4
4
  "description": "React component for build Pushwoosh products",
5
5
  "main": "index.js",
6
6
  "module": "index.js",