@elliemae/ds-system 2.2.0-next.6 → 2.3.0-alpha.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.
- package/cjs/arithmetic.js +42 -30
- package/cjs/arithmetic.js.map +7 -0
- package/cjs/constants.js +43 -15
- package/cjs/constants.js.map +7 -0
- package/cjs/globalStyles.js +44 -22
- package/cjs/globalStyles.js.map +7 -0
- package/cjs/index.js +42 -83
- package/cjs/index.js.map +7 -0
- package/cjs/mobileUtilities.js +57 -26
- package/cjs/mobileUtilities.js.map +7 -0
- package/cjs/spaceUtilities.js +72 -46
- package/cjs/spaceUtilities.js.map +7 -0
- package/cjs/styled/index.d.js +27 -2
- package/cjs/styled/index.d.js.map +7 -0
- package/cjs/styled/index.js +57 -93
- package/cjs/styled/index.js.map +7 -0
- package/cjs/styled/styleGetters.js +42 -30
- package/cjs/styled/styleGetters.js.map +7 -0
- package/cjs/styled/types.js +34 -11
- package/cjs/styled/types.js.map +7 -0
- package/cjs/styled/utils.js +46 -23
- package/cjs/styled/utils.js.map +7 -0
- package/cjs/th.js +50 -33
- package/cjs/th.js.map +7 -0
- package/cjs/theme.js +36 -9
- package/cjs/theme.js.map +7 -0
- package/cjs/themeProviderHOC.js +42 -29
- package/cjs/themeProviderHOC.js.map +7 -0
- package/cjs/utils.js +256 -146
- package/cjs/utils.js.map +7 -0
- package/esm/arithmetic.js +13 -25
- package/esm/arithmetic.js.map +7 -0
- package/esm/constants.js +14 -9
- package/esm/constants.js.map +7 -0
- package/esm/globalStyles.js +16 -15
- package/esm/globalStyles.js.map +7 -0
- package/esm/index.js +14 -11
- package/esm/index.js.map +7 -0
- package/esm/mobileUtilities.js +26 -17
- package/esm/mobileUtilities.js.map +7 -0
- package/esm/spaceUtilities.js +43 -35
- package/esm/spaceUtilities.js.map +7 -0
- package/esm/styled/index.d.js +2 -1
- package/esm/styled/index.d.js.map +7 -0
- package/esm/styled/index.js +23 -79
- package/esm/styled/index.js.map +7 -0
- package/esm/styled/styleGetters.js +12 -23
- package/esm/styled/styleGetters.js.map +7 -0
- package/esm/styled/types.js +6 -1
- package/esm/styled/types.js.map +7 -0
- package/esm/styled/utils.js +16 -16
- package/esm/styled/utils.js.map +7 -0
- package/esm/th.js +22 -30
- package/esm/th.js.map +7 -0
- package/esm/theme.js +6 -4
- package/esm/theme.js.map +7 -0
- package/esm/themeProviderHOC.js +13 -20
- package/esm/themeProviderHOC.js.map +7 -0
- package/esm/utils.js +227 -98
- package/esm/utils.js.map +7 -0
- package/package.json +2 -2
- package/types/styled/types.d.ts +1 -2
- package/types/th.d.ts +12 -12
- package/types/utils.d.ts +1 -2
package/esm/arithmetic.js
CHANGED
|
@@ -1,38 +1,26 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import * as React from "react";
|
|
3
2
|
function getNumberAndUnit(numberStrWithUnit) {
|
|
4
3
|
const [number, unit] = String(numberStrWithUnit).match(/[a-z]+|[(/^\-?\d*.\d+|\d+),?]+/gi);
|
|
5
|
-
return {
|
|
6
|
-
number,
|
|
7
|
-
unit
|
|
8
|
-
};
|
|
4
|
+
return { number, unit };
|
|
9
5
|
}
|
|
10
6
|
function op(operator, n1, n2) {
|
|
11
|
-
const {
|
|
12
|
-
|
|
13
|
-
unit
|
|
14
|
-
} = getNumberAndUnit(n1);
|
|
15
|
-
const {
|
|
16
|
-
number: number2,
|
|
17
|
-
unit: unit2
|
|
18
|
-
} = getNumberAndUnit(n2);
|
|
19
|
-
|
|
7
|
+
const { number, unit } = getNumberAndUnit(n1);
|
|
8
|
+
const { number: number2, unit: unit2 } = getNumberAndUnit(n2);
|
|
20
9
|
switch (operator) {
|
|
21
|
-
case
|
|
10
|
+
case "*":
|
|
22
11
|
return Number(number) * Number(number2) + (unit || unit2);
|
|
23
|
-
|
|
24
|
-
case '+':
|
|
12
|
+
case "+":
|
|
25
13
|
return Number(number) + Number(number2) + (unit || unit2);
|
|
26
|
-
|
|
27
|
-
case '-':
|
|
14
|
+
case "-":
|
|
28
15
|
return Number(number) - Number(number2) + (unit || unit2);
|
|
29
|
-
|
|
30
|
-
case '/':
|
|
16
|
+
case "/":
|
|
31
17
|
return Number(number) / Number(number2) + (unit || unit2);
|
|
32
|
-
|
|
33
18
|
default:
|
|
34
19
|
return Number(number) + Number(number2) + (unit || unit2);
|
|
35
20
|
}
|
|
36
21
|
}
|
|
37
|
-
|
|
38
|
-
|
|
22
|
+
export {
|
|
23
|
+
getNumberAndUnit,
|
|
24
|
+
op
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=arithmetic.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/arithmetic.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export function getNumberAndUnit(\n numberStrWithUnit: string | number,\n): { number: string; unit: string } {\n const [number, unit] = String(numberStrWithUnit).match(\n /[a-z]+|[(/^\\-?\\d*.\\d+|\\d+),?]+/gi,\n );\n return { number, unit };\n}\n\nexport function op(operator: string, n1: string, n2: string | number): string {\n const { number, unit } = getNumberAndUnit(n1);\n const { number: number2, unit: unit2 } = getNumberAndUnit(n2);\n switch (operator) {\n case '*':\n return Number(number) * Number(number2) + (unit || unit2);\n case '+':\n return Number(number) + Number(number2) + (unit || unit2);\n case '-':\n return Number(number) - Number(number2) + (unit || unit2);\n case '/':\n return Number(number) / Number(number2) + (unit || unit2);\n default:\n return Number(number) + Number(number2) + (unit || unit2);\n }\n}\n"],
|
|
5
|
+
"mappings": "AAAA;ACAO,0BACL,mBACkC;AAClC,QAAM,CAAC,QAAQ,QAAQ,OAAO,mBAAmB,MAC/C;AAEF,SAAO,EAAE,QAAQ;AAAA;AAGZ,YAAY,UAAkB,IAAY,IAA6B;AAC5E,QAAM,EAAE,QAAQ,SAAS,iBAAiB;AAC1C,QAAM,EAAE,QAAQ,SAAS,MAAM,UAAU,iBAAiB;AAC1D,UAAQ;AAAA,SACD;AACH,aAAO,OAAO,UAAU,OAAO,WAAY,SAAQ;AAAA,SAChD;AACH,aAAO,OAAO,UAAU,OAAO,WAAY,SAAQ;AAAA,SAChD;AACH,aAAO,OAAO,UAAU,OAAO,WAAY,SAAQ;AAAA,SAChD;AACH,aAAO,OAAO,UAAU,OAAO,WAAY,SAAQ;AAAA;AAEnD,aAAO,OAAO,UAAU,OAAO,WAAY,SAAQ;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/constants.js
CHANGED
|
@@ -1,13 +1,18 @@
|
|
|
1
|
+
import * as React from "react";
|
|
1
2
|
const desktopBaseFont = 13;
|
|
2
3
|
const mobileBaseFont = 16;
|
|
3
4
|
const translateUnits = {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
5
|
+
"8px": "4px",
|
|
6
|
+
"16px": "8px",
|
|
7
|
+
"32px": "16px",
|
|
8
|
+
"48px": "24px",
|
|
9
|
+
"56px": "32px",
|
|
10
|
+
"64px": "48px",
|
|
11
|
+
"72px": "64px"
|
|
11
12
|
};
|
|
12
|
-
|
|
13
|
-
|
|
13
|
+
export {
|
|
14
|
+
desktopBaseFont,
|
|
15
|
+
mobileBaseFont,
|
|
16
|
+
translateUnits
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/constants.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const desktopBaseFont = 13;\n\nexport const mobileBaseFont = 16;\n\nexport const translateUnits = {\n '8px': '4px',\n '16px': '8px',\n '32px': '16px',\n '48px': '24px',\n '56px': '32px',\n '64px': '48px',\n '72px': '64px',\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,kBAAkB;AAExB,MAAM,iBAAiB;AAEvB,MAAM,iBAAiB;AAAA,EAC5B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/globalStyles.js
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
import 'react';
|
|
7
|
-
import { createGlobalStyle } from 'styled-components';
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { createGlobalStyle } from "./utils";
|
|
3
|
+
const GlobalStyles = createGlobalStyle`
|
|
4
|
+
:root, body {
|
|
5
|
+
overscroll-behavior-y: none;
|
|
8
6
|
|
|
9
|
-
|
|
10
|
-
const GlobalStyles = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n :root, body {\n overscroll-behavior-y: none;\n\n font-size: ", ";\n\n @media(min-width: ", ") {\n font-size: ", ";\n }\n\n }\n"])), props => props.device === 'desktop' ? '13px' : '16px', _ref => {
|
|
11
|
-
let {
|
|
12
|
-
theme
|
|
13
|
-
} = _ref;
|
|
14
|
-
return theme.breakpoints.small;
|
|
15
|
-
}, props => props.device === 'mobile' ? '16px' : '13px');
|
|
7
|
+
font-size: ${(props) => props.device === "desktop" ? "13px" : "16px"};
|
|
16
8
|
|
|
17
|
-
|
|
9
|
+
@media(min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
10
|
+
font-size: ${(props) => props.device === "mobile" ? "16px" : "13px"};
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
}
|
|
14
|
+
`;
|
|
15
|
+
export {
|
|
16
|
+
GlobalStyles
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=globalStyles.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/globalStyles.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createGlobalStyle } from './utils';\n\nexport const GlobalStyles = createGlobalStyle`\n :root, body {\n overscroll-behavior-y: none;\n\n font-size: ${(props) => (props.device === 'desktop' ? '13px' : '16px')};\n\n @media(min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => (props.device === 'mobile' ? '16px' : '13px')};\n }\n\n }\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAEO,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA,iBAIX,CAAC,UAAW,MAAM,WAAW,YAAY,SAAS;AAAA;AAAA,wBAE3C,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,mBACtC,CAAC,UAAW,MAAM,WAAW,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/index.js
CHANGED
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
5
|
-
export
|
|
6
|
-
export
|
|
7
|
-
export
|
|
8
|
-
export
|
|
9
|
-
export
|
|
10
|
-
|
|
11
|
-
export {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
export * from "./globalStyles";
|
|
3
|
+
export * from "./spaceUtilities";
|
|
4
|
+
export * from "./mobileUtilities";
|
|
5
|
+
export * from "./utils";
|
|
6
|
+
export * from "./arithmetic";
|
|
7
|
+
export * from "./th";
|
|
8
|
+
export * from "./theme";
|
|
9
|
+
export * from "./styled";
|
|
10
|
+
import { themeProviderHOC } from "./themeProviderHOC";
|
|
11
|
+
export {
|
|
12
|
+
themeProviderHOC
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=index.js.map
|
package/esm/index.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './globalStyles';\nexport * from './spaceUtilities';\nexport * from './mobileUtilities';\nexport * from './utils';\nexport * from './arithmetic';\nexport * from './th';\nexport * from './theme';\nexport * from './styled';\nexport { themeProviderHOC } from './themeProviderHOC';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/mobileUtilities.js
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useState, useEffect } from
|
|
3
|
-
import { theme } from
|
|
4
|
-
import {
|
|
5
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useState, useEffect } from "react";
|
|
3
|
+
import { theme } from "./theme";
|
|
4
|
+
import { desktopBaseFont, mobileBaseFont, translateUnits } from "./constants";
|
|
6
5
|
function __UNSAFE_SPACE_TO_DIMSUM(unit) {
|
|
7
|
-
if (translateUnits[unit])
|
|
8
|
-
|
|
6
|
+
if (translateUnits[unit])
|
|
7
|
+
return translateUnits[unit];
|
|
8
|
+
return `${parseFloat(unit) * (mobileBaseFont / desktopBaseFont) / 2}px`;
|
|
9
9
|
}
|
|
10
10
|
function toMobile(unit) {
|
|
11
|
-
if (!isMobile())
|
|
12
|
-
|
|
11
|
+
if (!isMobile())
|
|
12
|
+
return unit;
|
|
13
|
+
return `${parseFloat(unit) * (desktopBaseFont / mobileBaseFont)}rem`;
|
|
13
14
|
}
|
|
14
15
|
const useIsMobile = () => {
|
|
15
16
|
const [mobile, setMobile] = useState(isMobile());
|
|
@@ -17,18 +18,26 @@ const useIsMobile = () => {
|
|
|
17
18
|
function handleResize() {
|
|
18
19
|
setMobile(isMobile());
|
|
19
20
|
}
|
|
20
|
-
|
|
21
|
-
|
|
21
|
+
if (window)
|
|
22
|
+
window.addEventListener("resize", handleResize);
|
|
22
23
|
return () => {
|
|
23
|
-
if (window)
|
|
24
|
+
if (window)
|
|
25
|
+
window.removeEventListener("resize", handleResize);
|
|
24
26
|
};
|
|
25
27
|
}, []);
|
|
26
|
-
if (!window)
|
|
28
|
+
if (!window)
|
|
29
|
+
return false;
|
|
27
30
|
return mobile;
|
|
28
31
|
};
|
|
29
32
|
const isMobile = () => {
|
|
30
|
-
if (!window)
|
|
31
|
-
|
|
33
|
+
if (!window)
|
|
34
|
+
return false;
|
|
35
|
+
return Number(theme.breakpoints.medium.split("px")[0]) - window.innerWidth >= 0;
|
|
32
36
|
};
|
|
33
|
-
|
|
34
|
-
|
|
37
|
+
export {
|
|
38
|
+
__UNSAFE_SPACE_TO_DIMSUM,
|
|
39
|
+
isMobile,
|
|
40
|
+
toMobile,
|
|
41
|
+
useIsMobile
|
|
42
|
+
};
|
|
43
|
+
//# sourceMappingURL=mobileUtilities.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/mobileUtilities.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useState, useEffect } from 'react';\nimport { theme } from './theme';\nimport { desktopBaseFont, mobileBaseFont, translateUnits } from './constants';\n\n// eslint-disable-next-line no-underscore-dangle\nexport function __UNSAFE_SPACE_TO_DIMSUM(unit: string): string {\n if (translateUnits[unit]) return translateUnits[unit];\n return `${(parseFloat(unit) * (mobileBaseFont / desktopBaseFont)) / 2}px`;\n}\n\nexport function toMobile(unit: string): string {\n if (!isMobile()) return unit;\n return `${parseFloat(unit) * (desktopBaseFont / mobileBaseFont)}rem`;\n}\n\nexport const useIsMobile = (): boolean => {\n const [mobile, setMobile] = useState<boolean>(isMobile());\n useEffect(() => {\n function handleResize() {\n setMobile(isMobile());\n }\n if (window) window.addEventListener('resize', handleResize);\n return () => {\n if (window) window.removeEventListener('resize', handleResize);\n };\n }, []);\n if (!window) return false;\n return mobile;\n};\n\nexport const isMobile = (): boolean => {\n if (!window) return false;\n return (\n Number(theme.breakpoints.medium.split('px')[0]) - window.innerWidth >= 0\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AAGO,kCAAkC,MAAsB;AAC7D,MAAI,eAAe;AAAO,WAAO,eAAe;AAChD,SAAO,GAAI,WAAW,QAAS,kBAAiB,mBAAoB;AAAA;AAG/D,kBAAkB,MAAsB;AAC7C,MAAI,CAAC;AAAY,WAAO;AACxB,SAAO,GAAG,WAAW,QAAS,mBAAkB;AAAA;AAG3C,MAAM,cAAc,MAAe;AACxC,QAAM,CAAC,QAAQ,aAAa,SAAkB;AAC9C,YAAU,MAAM;AACd,4BAAwB;AACtB,gBAAU;AAAA;AAEZ,QAAI;AAAQ,aAAO,iBAAiB,UAAU;AAC9C,WAAO,MAAM;AACX,UAAI;AAAQ,eAAO,oBAAoB,UAAU;AAAA;AAAA,KAElD;AACH,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO;AAAA;AAGF,MAAM,WAAW,MAAe;AACrC,MAAI,CAAC;AAAQ,WAAO;AACpB,SACE,OAAO,MAAM,YAAY,OAAO,MAAM,MAAM,MAAM,OAAO,cAAc;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/spaceUtilities.js
CHANGED
|
@@ -1,57 +1,65 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
5
|
-
import 'core-js/modules/esnext.iterator.some.js';
|
|
6
|
-
import { get } from 'lodash';
|
|
7
|
-
import { theme } from './theme.js';
|
|
8
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { get } from "lodash";
|
|
3
|
+
import { theme } from "./theme";
|
|
9
4
|
function mapGap(gutter) {
|
|
10
|
-
if (!gutter)
|
|
11
|
-
|
|
12
|
-
|
|
5
|
+
if (!gutter)
|
|
6
|
+
return "0rem";
|
|
7
|
+
if (String(gutter).includes("rem") || String(gutter).includes("px"))
|
|
8
|
+
return gutter;
|
|
9
|
+
return `${theme.space[gutter]}`;
|
|
13
10
|
}
|
|
14
11
|
function mapGutter(gutter) {
|
|
15
|
-
if (!gutter)
|
|
16
|
-
|
|
12
|
+
if (!gutter)
|
|
13
|
+
return "0rem";
|
|
14
|
+
return `${theme.space[gutter]} * 2`;
|
|
17
15
|
}
|
|
18
16
|
function mapSpace(width) {
|
|
19
|
-
if (typeof width ===
|
|
20
|
-
|
|
17
|
+
if (typeof width === "string")
|
|
18
|
+
return get(theme, width) ? `${get(theme, width)}` : width;
|
|
19
|
+
return `${width * 100}%`;
|
|
21
20
|
}
|
|
22
21
|
function fixSpaceGutter(width, gutter) {
|
|
23
|
-
if (!width)
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
if (!width)
|
|
23
|
+
return "";
|
|
24
|
+
if (Array.isArray(width))
|
|
25
|
+
return width.map((w) => `calc(${mapSpace(w)} - (${mapGutter(gutter)}))`);
|
|
26
|
+
return `calc(${mapSpace(width)} - (${mapGutter(gutter)}))`;
|
|
26
27
|
}
|
|
27
28
|
function fixSpace(width) {
|
|
28
|
-
if (!width)
|
|
29
|
-
|
|
29
|
+
if (!width)
|
|
30
|
+
return "";
|
|
31
|
+
if (Array.isArray(width))
|
|
32
|
+
return width.map((w) => mapSpace(w));
|
|
30
33
|
return mapSpace(width);
|
|
31
34
|
}
|
|
32
|
-
/**
|
|
33
|
-
* Grid
|
|
34
|
-
*
|
|
35
|
-
* @param grid
|
|
36
|
-
*/
|
|
37
|
-
|
|
38
35
|
function numbersToFr(grid) {
|
|
39
|
-
const den = grid.map(f => f < 1 ? Math.floor(1 / f) : f);
|
|
40
|
-
return den.map(d =>
|
|
36
|
+
const den = grid.map((f) => f < 1 ? Math.floor(1 / f) : f);
|
|
37
|
+
return den.map((d) => `${d}fr`);
|
|
41
38
|
}
|
|
42
39
|
function mapGrid(width) {
|
|
43
|
-
if (get(theme, width))
|
|
44
|
-
|
|
40
|
+
if (get(theme, width))
|
|
41
|
+
return `${get(theme, width)}`;
|
|
42
|
+
if (typeof width === "string")
|
|
43
|
+
return width;
|
|
45
44
|
const den = width < 1 ? Math.floor(1 / width) : width;
|
|
46
|
-
return
|
|
45
|
+
return `${den}fr`;
|
|
47
46
|
}
|
|
48
47
|
function mapTemplateGrid(grid) {
|
|
49
48
|
if (Array.isArray(grid)) {
|
|
50
|
-
if (grid.some(w => typeof w ===
|
|
49
|
+
if (grid.some((w) => typeof w === "string"))
|
|
50
|
+
return grid.map((w) => mapGrid(w));
|
|
51
51
|
return numbersToFr(grid);
|
|
52
52
|
}
|
|
53
|
-
|
|
54
53
|
return mapGrid(grid);
|
|
55
54
|
}
|
|
56
|
-
|
|
57
|
-
|
|
55
|
+
export {
|
|
56
|
+
fixSpace,
|
|
57
|
+
fixSpaceGutter,
|
|
58
|
+
mapGap,
|
|
59
|
+
mapGrid,
|
|
60
|
+
mapGutter,
|
|
61
|
+
mapSpace,
|
|
62
|
+
mapTemplateGrid,
|
|
63
|
+
numbersToFr
|
|
64
|
+
};
|
|
65
|
+
//# sourceMappingURL=spaceUtilities.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/spaceUtilities.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { get } from 'lodash';\nimport { theme } from './theme';\n\nexport function mapGap(gutter: number | string): number | string {\n if (!gutter) return '0rem';\n if (String(gutter).includes('rem') || String(gutter).includes('px'))\n return gutter;\n return `${theme.space[gutter]}`;\n}\n\nexport function mapGutter(gutter: string | number): string {\n if (!gutter) return '0rem';\n return `${theme.space[gutter]} * 2`;\n}\n\nexport function mapSpace(width: string | number): string {\n if (typeof width === 'string')\n return get(theme, width) ? `${get(theme, width)}` : width;\n return `${width * 100}%`;\n}\n\nexport function fixSpaceGutter(\n width: string | number,\n gutter: string | number,\n): string | string[] {\n if (!width) return '';\n if (Array.isArray(width))\n return width.map((w) => `calc(${mapSpace(w)} - (${mapGutter(gutter)}))`);\n return `calc(${mapSpace(width)} - (${mapGutter(gutter)}))`;\n}\n\nexport function fixSpace(width: string | number): string | string[] {\n if (!width) return '';\n if (Array.isArray(width)) return width.map((w) => mapSpace(w));\n return mapSpace(width);\n}\n\n/**\n * Grid\n *\n * @param grid\n */\nexport function numbersToFr(grid: number[]): string[] {\n const den = grid.map((f) => (f < 1 ? Math.floor(1 / f) : f));\n return den.map((d) => `${d}fr`);\n}\nexport function mapGrid(width: string | number): string {\n if (get(theme, width)) return `${get(theme, width)}`;\n if (typeof width === 'string') return width;\n const den = width < 1 ? Math.floor(1 / width) : width;\n return `${den}fr`;\n}\n\nexport function mapTemplateGrid(grid: number[]): string | string[] {\n if (Array.isArray(grid)) {\n if (grid.some((w) => typeof w === 'string'))\n return grid.map((w) => mapGrid(w));\n return numbersToFr(grid);\n }\n return mapGrid(grid);\n}\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAEO,gBAAgB,QAA0C;AAC/D,MAAI,CAAC;AAAQ,WAAO;AACpB,MAAI,OAAO,QAAQ,SAAS,UAAU,OAAO,QAAQ,SAAS;AAC5D,WAAO;AACT,SAAO,GAAG,MAAM,MAAM;AAAA;AAGjB,mBAAmB,QAAiC;AACzD,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO,GAAG,MAAM,MAAM;AAAA;AAGjB,kBAAkB,OAAgC;AACvD,MAAI,OAAO,UAAU;AACnB,WAAO,IAAI,OAAO,SAAS,GAAG,IAAI,OAAO,WAAW;AACtD,SAAO,GAAG,QAAQ;AAAA;AAGb,wBACL,OACA,QACmB;AACnB,MAAI,CAAC;AAAO,WAAO;AACnB,MAAI,MAAM,QAAQ;AAChB,WAAO,MAAM,IAAI,CAAC,MAAM,QAAQ,SAAS,SAAS,UAAU;AAC9D,SAAO,QAAQ,SAAS,aAAa,UAAU;AAAA;AAG1C,kBAAkB,OAA2C;AAClE,MAAI,CAAC;AAAO,WAAO;AACnB,MAAI,MAAM,QAAQ;AAAQ,WAAO,MAAM,IAAI,CAAC,MAAM,SAAS;AAC3D,SAAO,SAAS;AAAA;AAQX,qBAAqB,MAA0B;AACpD,QAAM,MAAM,KAAK,IAAI,CAAC,MAAO,IAAI,IAAI,KAAK,MAAM,IAAI,KAAK;AACzD,SAAO,IAAI,IAAI,CAAC,MAAM,GAAG;AAAA;AAEpB,iBAAiB,OAAgC;AACtD,MAAI,IAAI,OAAO;AAAQ,WAAO,GAAG,IAAI,OAAO;AAC5C,MAAI,OAAO,UAAU;AAAU,WAAO;AACtC,QAAM,MAAM,QAAQ,IAAI,KAAK,MAAM,IAAI,SAAS;AAChD,SAAO,GAAG;AAAA;AAGL,yBAAyB,MAAmC;AACjE,MAAI,MAAM,QAAQ,OAAO;AACvB,QAAI,KAAK,KAAK,CAAC,MAAM,OAAO,MAAM;AAChC,aAAO,KAAK,IAAI,CAAC,MAAM,QAAQ;AACjC,WAAO,YAAY;AAAA;AAErB,SAAO,QAAQ;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/styled/index.d.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
//# sourceMappingURL=index.d.js.map
|
package/esm/styled/index.js
CHANGED
|
@@ -1,116 +1,60 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
11
|
-
import 'core-js/modules/esnext.iterator.reduce.js';
|
|
12
|
-
import styled_component from 'styled-components';
|
|
13
|
-
import { getStyleOverrides, variantsResolver, getVariantStyles } from './styleGetters.js';
|
|
14
|
-
import { coerceWithDefaultTheme } from './utils.js';
|
|
15
|
-
|
|
16
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
17
|
-
|
|
18
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
19
|
-
|
|
20
|
-
const styledFunction = function (tag) {
|
|
21
|
-
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
|
22
|
-
name: null,
|
|
23
|
-
slot: null
|
|
24
|
-
};
|
|
25
|
-
const {
|
|
26
|
-
name: componentName,
|
|
27
|
-
slot: componentSlot,
|
|
28
|
-
displayName: componentDisplayName = null
|
|
29
|
-
} = options;
|
|
30
|
-
|
|
31
|
-
const func = function (styleArg) {
|
|
32
|
-
for (var _len = arguments.length, expressions = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
33
|
-
expressions[_key - 1] = arguments[_key];
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
/*
|
|
37
|
-
* These are the internal expression written in dimsum
|
|
38
|
-
* We just coerce with the default theme in case users
|
|
39
|
-
* forget to add the ThemeProvider
|
|
40
|
-
*/
|
|
41
|
-
const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => typeof stylesArg === 'function' ? props => stylesArg(_objectSpread(_objectSpread({}, props), {}, {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import styled_component from "styled-components";
|
|
3
|
+
import { getStyleOverrides, getVariantStyles, variantsResolver } from "./styleGetters";
|
|
4
|
+
import { coerceWithDefaultTheme } from "./utils";
|
|
5
|
+
const styledFunction = (tag, options = { name: null, slot: null }) => {
|
|
6
|
+
const { name: componentName = null, slot: componentSlot = null } = options;
|
|
7
|
+
const func = (styleArg, ...expressions) => {
|
|
8
|
+
const expressionsWithDefaultTheme = expressions ? expressions.map((stylesArg) => typeof stylesArg === "function" ? (props) => stylesArg({
|
|
9
|
+
...props,
|
|
42
10
|
theme: coerceWithDefaultTheme(props.theme)
|
|
43
|
-
})
|
|
11
|
+
}) : stylesArg) : [];
|
|
44
12
|
let transformedStyleArg = styleArg;
|
|
45
|
-
/*
|
|
46
|
-
* Here we get the style overrides from the user
|
|
47
|
-
*/
|
|
48
|
-
|
|
49
13
|
if (componentName && componentSlot) {
|
|
50
|
-
expressionsWithDefaultTheme.push(props => {
|
|
14
|
+
expressionsWithDefaultTheme.push((props) => {
|
|
51
15
|
const theme = coerceWithDefaultTheme(props.theme);
|
|
52
16
|
const styleOverrides = getStyleOverrides(componentName, theme);
|
|
53
|
-
|
|
54
17
|
if (styleOverrides) {
|
|
55
18
|
return [styleOverrides[componentSlot]];
|
|
56
19
|
}
|
|
57
|
-
|
|
58
20
|
return null;
|
|
59
21
|
});
|
|
60
22
|
}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
*/
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
if (componentName && componentSlot === 'root') {
|
|
67
|
-
expressionsWithDefaultTheme.push(props => {
|
|
23
|
+
if (componentName && componentSlot === "root") {
|
|
24
|
+
expressionsWithDefaultTheme.push((props) => {
|
|
68
25
|
const theme = coerceWithDefaultTheme(props.theme);
|
|
69
26
|
return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
|
|
70
27
|
});
|
|
71
28
|
}
|
|
72
|
-
|
|
73
29
|
const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
|
|
74
|
-
|
|
75
30
|
if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
|
|
76
|
-
|
|
77
|
-
const placeholders = new Array(numOfCustomFnsApplied).fill('');
|
|
31
|
+
const placeholders = new Array(numOfCustomFnsApplied).fill("");
|
|
78
32
|
transformedStyleArg = Object.assign([...styleArg, ...placeholders], {
|
|
79
33
|
raw: [...styleArg.raw, ...placeholders]
|
|
80
34
|
});
|
|
81
|
-
} else if (typeof styleArg ===
|
|
82
|
-
|
|
83
|
-
transformedStyleArg = props => styleArg(_objectSpread(_objectSpread({}, props), {}, {
|
|
84
|
-
theme: coerceWithDefaultTheme(props.theme)
|
|
85
|
-
}));
|
|
35
|
+
} else if (typeof styleArg === "function") {
|
|
36
|
+
transformedStyleArg = (props) => styleArg({ ...props, theme: coerceWithDefaultTheme(props.theme) });
|
|
86
37
|
}
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
const displayName = componentName !== null && componentSlot !== null ? "".concat(componentName, "-").concat(componentSlot) : componentDisplayName;
|
|
90
|
-
|
|
38
|
+
let Component = styled_component(tag);
|
|
39
|
+
const displayName = componentName !== null && componentSlot !== null ? `${componentName}-${componentSlot}` : null;
|
|
91
40
|
if (displayName !== null) {
|
|
92
|
-
Component = Component.attrs({
|
|
93
|
-
className: "".concat(componentName, "-").concat(componentSlot)
|
|
94
|
-
});
|
|
41
|
+
Component = Component.attrs({ className: `${componentName}${componentSlot}` });
|
|
95
42
|
}
|
|
96
|
-
|
|
97
43
|
Component = Component(transformedStyleArg, ...expressionsWithDefaultTheme);
|
|
98
|
-
|
|
99
44
|
if (displayName !== null) {
|
|
100
45
|
Component.displayName = displayName;
|
|
101
46
|
}
|
|
102
|
-
|
|
103
47
|
return Component;
|
|
104
48
|
};
|
|
105
|
-
|
|
106
49
|
return func;
|
|
107
50
|
};
|
|
108
|
-
|
|
109
51
|
const styledObject = Object.keys(styled_component).reduce((obj, key) => {
|
|
110
52
|
const castedKey = key;
|
|
111
53
|
obj[castedKey] = styledFunction(castedKey);
|
|
112
54
|
return obj;
|
|
113
55
|
}, {});
|
|
114
56
|
const styled = Object.assign(styledFunction, styledObject);
|
|
115
|
-
|
|
116
|
-
|
|
57
|
+
export {
|
|
58
|
+
styled
|
|
59
|
+
};
|
|
60
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled_component, { StyledComponentPropsWithRef } from 'styled-components';\nimport { Styled, StyledFunction, StyledObject } from './types';\nimport { getStyleOverrides, getVariantStyles, variantsResolver } from './styleGetters';\nimport { coerceWithDefaultTheme } from './utils';\n\nconst styledFunction: StyledFunction = (tag, options = { name: null, slot: null }) => {\n const { name: componentName = null, slot: componentSlot = null } = options;\n const func: ReturnType<StyledFunction> = (styleArg, ...expressions) => {\n /*\n * These are the internal expression written in dimsum\n * We just coerce with the default theme in case users\n * forget to add the ThemeProvider\n */\n const expressionsWithDefaultTheme = expressions\n ? expressions.map<typeof expressions[number]>((stylesArg) =>\n typeof stylesArg === 'function'\n ? (props) =>\n stylesArg({\n ...props,\n theme: coerceWithDefaultTheme(props.theme),\n })\n : stylesArg,\n )\n : [];\n\n let transformedStyleArg = styleArg;\n\n /*\n * Here we get the style overrides from the user\n */\n if (componentName && componentSlot) {\n expressionsWithDefaultTheme.push((props) => {\n const theme = coerceWithDefaultTheme(props.theme);\n const styleOverrides = getStyleOverrides(componentName, theme);\n if (styleOverrides) {\n return [styleOverrides[componentSlot]];\n }\n return null;\n });\n }\n\n /*\n * Here we get the variant overrides from the user (only for the root)\n */\n if (componentName && componentSlot === 'root') {\n expressionsWithDefaultTheme.push((props) => {\n const theme = coerceWithDefaultTheme(props.theme);\n return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);\n });\n }\n\n const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;\n\n if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {\n // Here we are adding placeholders for all the new functions that we are gonna call\n const placeholders: string[] = new Array(numOfCustomFnsApplied).fill('');\n transformedStyleArg = Object.assign([...styleArg, ...placeholders], {\n raw: [...(styleArg as TemplateStringsArray).raw, ...placeholders],\n });\n } else if (typeof styleArg === 'function') {\n // Here we just coerce with the default theme\n transformedStyleArg = (props) => styleArg({ ...props, theme: coerceWithDefaultTheme(props.theme) });\n }\n let Component = styled_component(tag);\n\n const displayName =\n componentName !== null && componentSlot !== null ? `${componentName}-${componentSlot}` : null;\n\n if (displayName !== null) {\n Component = Component.attrs({ className: `${componentName}${componentSlot}` } as unknown as Partial<\n StyledComponentPropsWithRef<typeof tag>\n >);\n }\n\n Component = Component(transformedStyleArg, ...expressionsWithDefaultTheme);\n\n if (displayName !== null) {\n Component.displayName = displayName;\n }\n\n return Component;\n };\n return func;\n};\n\nconst styledObject = Object.keys(styled_component).reduce((obj, key) => {\n const castedKey = key as keyof JSX.IntrinsicElements;\n obj[castedKey] = styledFunction(castedKey);\n return obj;\n}, {} as StyledObject);\n\nexport const styled: Styled = Object.assign(styledFunction, styledObject);\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAEA;AACA;AAEA,MAAM,iBAAiC,CAAC,KAAK,UAAU,EAAE,MAAM,MAAM,MAAM,WAAW;AACpF,QAAM,EAAE,MAAM,gBAAgB,MAAM,MAAM,gBAAgB,SAAS;AACnE,QAAM,OAAmC,CAAC,aAAa,gBAAgB;AAMrE,UAAM,8BAA8B,cAChC,YAAY,IAAgC,CAAC,cAC7C,OAAO,cAAc,aACjB,CAAC,UACD,UAAU;AAAA,SACL;AAAA,MACH,OAAO,uBAAuB,MAAM;AAAA,SAEtC,aAEJ;AAEJ,QAAI,sBAAsB;AAK1B,QAAI,iBAAiB,eAAe;AAClC,kCAA4B,KAAK,CAAC,UAAU;AAC1C,cAAM,QAAQ,uBAAuB,MAAM;AAC3C,cAAM,iBAAiB,kBAAkB,eAAe;AACxD,YAAI,gBAAgB;AAClB,iBAAO,CAAC,eAAe;AAAA;AAEzB,eAAO;AAAA;AAAA;AAOX,QAAI,iBAAiB,kBAAkB,QAAQ;AAC7C,kCAA4B,KAAK,CAAC,UAAU;AAC1C,cAAM,QAAQ,uBAAuB,MAAM;AAC3C,eAAO,iBAAiB,OAAO,iBAAiB,eAAe,QAAQ,OAAO;AAAA;AAAA;AAIlF,UAAM,wBAAwB,4BAA4B,SAAS,YAAY;AAE/E,QAAI,MAAM,QAAQ,aAAa,wBAAwB,GAAG;AAExD,YAAM,eAAyB,IAAI,MAAM,uBAAuB,KAAK;AACrE,4BAAsB,OAAO,OAAO,CAAC,GAAG,UAAU,GAAG,eAAe;AAAA,QAClE,KAAK,CAAC,GAAI,SAAkC,KAAK,GAAG;AAAA;AAAA,eAE7C,OAAO,aAAa,YAAY;AAEzC,4BAAsB,CAAC,UAAU,SAAS,KAAK,OAAO,OAAO,uBAAuB,MAAM;AAAA;AAE5F,QAAI,YAAY,iBAAiB;AAEjC,UAAM,cACJ,kBAAkB,QAAQ,kBAAkB,OAAO,GAAG,iBAAiB,kBAAkB;AAE3F,QAAI,gBAAgB,MAAM;AACxB,kBAAY,UAAU,MAAM,EAAE,WAAW,GAAG,gBAAgB;AAAA;AAK9D,gBAAY,UAAU,qBAAqB,GAAG;AAE9C,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA;AAG1B,WAAO;AAAA;AAET,SAAO;AAAA;AAGT,MAAM,eAAe,OAAO,KAAK,kBAAkB,OAAO,CAAC,KAAK,QAAQ;AACtE,QAAM,YAAY;AAClB,MAAI,aAAa,eAAe;AAChC,SAAO;AAAA,GACN;AAEI,MAAM,SAAiB,OAAO,OAAO,gBAAgB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,19 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
import 'core-js/modules/esnext.async-iterator.every.js';
|
|
5
|
-
import 'core-js/modules/esnext.iterator.every.js';
|
|
6
|
-
import { propsToClassKey } from './utils.js';
|
|
7
|
-
|
|
8
|
-
const getStyleOverrides = (name, theme) => {
|
|
9
|
-
var _theme$components, _theme$components$nam;
|
|
10
|
-
|
|
11
|
-
return ((_theme$components = theme.components) === null || _theme$components === void 0 ? void 0 : (_theme$components$nam = _theme$components[name]) === null || _theme$components$nam === void 0 ? void 0 : _theme$components$nam.styleOverrides) || null;
|
|
12
|
-
};
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { propsToClassKey } from "./utils";
|
|
3
|
+
const getStyleOverrides = (name, theme) => theme.components?.[name]?.styleOverrides || null;
|
|
13
4
|
const getVariantStyles = (name, theme) => {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const variants = ((_theme$components2 = theme.components) === null || _theme$components2 === void 0 ? void 0 : (_theme$components2$na = _theme$components2[name]) === null || _theme$components2$na === void 0 ? void 0 : _theme$components2$na.variants) || [];
|
|
5
|
+
const variants = theme.components?.[name]?.variants || [];
|
|
17
6
|
return variants.reduce((styles, definition) => {
|
|
18
7
|
const key = propsToClassKey(definition.props);
|
|
19
8
|
styles[key] = definition.style;
|
|
@@ -21,18 +10,18 @@ const getVariantStyles = (name, theme) => {
|
|
|
21
10
|
}, {});
|
|
22
11
|
};
|
|
23
12
|
const variantsResolver = (props, styles, theme, name) => {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
const themeVariants = (theme === null || theme === void 0 ? void 0 : (_theme$components3 = theme.components) === null || _theme$components3 === void 0 ? void 0 : (_theme$components3$na = _theme$components3[name]) === null || _theme$components3$na === void 0 ? void 0 : _theme$components3$na.variants) || [];
|
|
13
|
+
const themeVariants = theme?.components?.[name]?.variants || [];
|
|
27
14
|
return themeVariants.reduce((variantsStyles, themeVariant) => {
|
|
28
|
-
const isMatch = Object.keys(themeVariant.props).every(key => props[key] === themeVariant.props[key]);
|
|
29
|
-
|
|
15
|
+
const isMatch = Object.keys(themeVariant.props).every((key) => props[key] === themeVariant.props[key]);
|
|
30
16
|
if (isMatch) {
|
|
31
17
|
variantsStyles.push(styles[propsToClassKey(themeVariant.props)]);
|
|
32
18
|
}
|
|
33
|
-
|
|
34
19
|
return variantsStyles;
|
|
35
20
|
}, []);
|
|
36
21
|
};
|
|
37
|
-
|
|
38
|
-
|
|
22
|
+
export {
|
|
23
|
+
getStyleOverrides,
|
|
24
|
+
getVariantStyles,
|
|
25
|
+
variantsResolver
|
|
26
|
+
};
|
|
27
|
+
//# sourceMappingURL=styleGetters.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/styleGetters.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type { Theme, CSSObject } from './types';\nimport { propsToClassKey } from './utils';\n\nexport const getStyleOverrides = (name: string, theme: Theme): CSSObject | null =>\n theme.components?.[name]?.styleOverrides || null;\n\nexport const getVariantStyles = (name: string, theme: Theme): Record<string, CSSObject> => {\n const variants = theme.components?.[name]?.variants || [];\n\n return variants.reduce((styles, definition) => {\n const key = propsToClassKey(definition.props);\n styles[key] = definition.style;\n return styles;\n }, {} as Record<string, CSSObject>);\n};\n\nexport const variantsResolver = (\n props: Record<string, unknown>,\n styles: CSSObject,\n theme: Theme,\n name: string,\n): CSSObject[keyof CSSObject][] => {\n const themeVariants = theme?.components?.[name]?.variants || [];\n\n return themeVariants.reduce((variantsStyles, themeVariant) => {\n const isMatch = Object.keys(themeVariant.props).every((key) => props[key] === themeVariant.props[key]);\n if (isMatch) {\n variantsStyles.push(styles[propsToClassKey(themeVariant.props)]);\n }\n return variantsStyles;\n }, [] as CSSObject[keyof CSSObject][]);\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACEA;AAEO,MAAM,oBAAoB,CAAC,MAAc,UAC9C,MAAM,aAAa,OAAO,kBAAkB;AAEvC,MAAM,mBAAmB,CAAC,MAAc,UAA4C;AACzF,QAAM,WAAW,MAAM,aAAa,OAAO,YAAY;AAEvD,SAAO,SAAS,OAAO,CAAC,QAAQ,eAAe;AAC7C,UAAM,MAAM,gBAAgB,WAAW;AACvC,WAAO,OAAO,WAAW;AACzB,WAAO;AAAA,KACN;AAAA;AAGE,MAAM,mBAAmB,CAC9B,OACA,QACA,OACA,SACiC;AACjC,QAAM,gBAAgB,OAAO,aAAa,OAAO,YAAY;AAE7D,SAAO,cAAc,OAAO,CAAC,gBAAgB,iBAAiB;AAC5D,UAAM,UAAU,OAAO,KAAK,aAAa,OAAO,MAAM,CAAC,QAAQ,MAAM,SAAS,aAAa,MAAM;AACjG,QAAI,SAAS;AACX,qBAAe,KAAK,OAAO,gBAAgB,aAAa;AAAA;AAE1D,WAAO;AAAA,KACN;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/styled/types.js
CHANGED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/types.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { Theme as PuiTheme } from '@elliemae/pui-theme';\nimport {\n AnyStyledComponent,\n CSSObject,\n Interpolation,\n InterpolationFunction,\n StyledComponent,\n StyledComponentInnerAttrs,\n StyledComponentInnerComponent,\n StyledComponentInnerOtherProps,\n StyledComponentPropsWithRef,\n ThemedStyledProps,\n} from 'styled-components';\n\nexport { CSSObject } from 'styled-components';\n\nexport interface Theme extends PuiTheme {\n components?: {\n [componentName: string]: {\n styleOverrides?: CSSObject;\n variants?: { props: Record<string, { toString: () => string }>; style: CSSObject }[];\n };\n };\n}\n\nexport type ThemedStyledFunctionBase<\n C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,\n T extends object,\n O extends object = {},\n A extends keyof any = never,\n> = <U extends object = {}>(\n first:\n | TemplateStringsArray\n | CSSObject\n | InterpolationFunction<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>,\n ...rest: Array<Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>>\n) => StyledComponent<C, T, O & U, A>;\n\ntype ThemedStyledComponentFactories<T extends object> = {\n [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunctionBase<TTag, T>;\n};\n\nexport type StyledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n tag: C,\n options?: { name: string | null; slot: string | null; },\n) => ThemedStyledFunctionBase<\n C extends AnyStyledComponent ? StyledComponentInnerComponent<C> : C,\n Theme,\n C extends AnyStyledComponent ? StyledComponentInnerOtherProps<C> : {},\n C extends AnyStyledComponent ? StyledComponentInnerAttrs<C> : never\n>;\n\nexport type StyledObject = ThemedStyledComponentFactories<Theme>;\n\nexport type Styled = StyledFunction & StyledObject;\n"],
|
|
5
|
+
"mappings": "AAAA;ACeA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|