@pushwoosh/kit-helpers 4.7.0 → 4.8.0

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 +25 -23
  2. package/grid.js +22 -1
  3. package/package.json +1 -1
package/grid.d.ts CHANGED
@@ -1,17 +1,18 @@
1
- export declare const toCssValue: (value: number | string) => string;
1
+ type StrNum = string | number;
2
+ export declare const toCssValue: (value: StrNum) => string;
2
3
  export declare const GridContainer: import("styled-components").StyledComponent<"div", any, {
3
4
  $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
4
5
  $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
5
6
  $bgColor?: string | undefined;
6
7
  $border?: string | undefined;
7
- $borderRadius?: string | number | undefined;
8
+ $borderRadius?: StrNum | undefined;
8
9
  $boxShadow?: string | undefined;
9
- $gap?: string | number | undefined;
10
+ $gap?: StrNum | undefined;
10
11
  $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
11
12
  $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
12
13
  $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
13
- $margin?: string | number | undefined;
14
- $padding?: string | number | undefined;
14
+ $margin?: StrNum | undefined;
15
+ $padding?: StrNum | undefined;
15
16
  $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
16
17
  }, never>;
17
18
  export declare const Columns: import("styled-components").StyledComponent<"div", any, {
@@ -19,48 +20,48 @@ export declare const Columns: import("styled-components").StyledComponent<"div",
19
20
  $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
20
21
  $bgColor?: string | undefined;
21
22
  $border?: string | undefined;
22
- $borderRadius?: string | number | undefined;
23
+ $borderRadius?: StrNum | undefined;
23
24
  $boxShadow?: string | undefined;
24
- $gap?: string | number | undefined;
25
+ $gap?: StrNum | undefined;
25
26
  $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
26
27
  $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
27
28
  $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
28
- $margin?: string | number | undefined;
29
- $padding?: string | number | undefined;
29
+ $margin?: StrNum | undefined;
30
+ $padding?: StrNum | undefined;
30
31
  $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
31
32
  } & {
32
- $sizes: number | string;
33
+ $sizes: StrNum;
33
34
  }, never>;
34
35
  export declare const Rows: import("styled-components").StyledComponent<"div", any, {
35
36
  $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
36
37
  $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
37
38
  $bgColor?: string | undefined;
38
39
  $border?: string | undefined;
39
- $borderRadius?: string | number | undefined;
40
+ $borderRadius?: StrNum | undefined;
40
41
  $boxShadow?: string | undefined;
41
- $gap?: string | number | undefined;
42
+ $gap?: StrNum | undefined;
42
43
  $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
43
44
  $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
44
45
  $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
45
- $margin?: string | number | undefined;
46
- $padding?: string | number | undefined;
46
+ $margin?: StrNum | undefined;
47
+ $padding?: StrNum | undefined;
47
48
  $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
48
49
  } & {
49
- $sizes: number | string;
50
+ $sizes: StrNum;
50
51
  }, never>;
51
52
  export declare const Horizontal: import("styled-components").StyledComponent<"div", any, {
52
53
  $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
53
54
  $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
54
55
  $bgColor?: string | undefined;
55
56
  $border?: string | undefined;
56
- $borderRadius?: string | number | undefined;
57
+ $borderRadius?: StrNum | undefined;
57
58
  $boxShadow?: string | undefined;
58
- $gap?: string | number | undefined;
59
+ $gap?: StrNum | undefined;
59
60
  $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
60
61
  $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
61
62
  $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
62
- $margin?: string | number | undefined;
63
- $padding?: string | number | undefined;
63
+ $margin?: StrNum | undefined;
64
+ $padding?: StrNum | undefined;
64
65
  $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
65
66
  } & {
66
67
  $gridAutoFlow: string;
@@ -70,15 +71,16 @@ export declare const Vertical: import("styled-components").StyledComponent<"div"
70
71
  $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
71
72
  $bgColor?: string | undefined;
72
73
  $border?: string | undefined;
73
- $borderRadius?: string | number | undefined;
74
+ $borderRadius?: StrNum | undefined;
74
75
  $boxShadow?: string | undefined;
75
- $gap?: string | number | undefined;
76
+ $gap?: StrNum | undefined;
76
77
  $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
77
78
  $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
78
79
  $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
79
- $margin?: string | number | undefined;
80
- $padding?: string | number | undefined;
80
+ $margin?: StrNum | undefined;
81
+ $padding?: StrNum | undefined;
81
82
  $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
82
83
  } & {
83
84
  $gridAutoFlow: string;
84
85
  }, "$gridAutoFlow">;
86
+ 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.0",
4
4
  "description": "React component for build Pushwoosh products",
5
5
  "main": "index.js",
6
6
  "module": "index.js",