@mrshmllw/smores-react 2.12.6 → 2.14.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.
- package/dist/Box/Box.stories.d.ts +1 -0
- package/dist/Box/Box.stories.js +17 -1
- package/dist/Box/Box.stories.js.map +1 -1
- package/dist/Pagination/Pagination.d.ts +2 -0
- package/dist/Pagination/Pagination.js +8 -3
- package/dist/Pagination/Pagination.js.map +1 -1
- package/dist/utils/flex.d.ts +9 -4
- package/dist/utils/flex.js +24 -5
- package/dist/utils/flex.js.map +1 -1
- package/dist/utils/responsiveProp.d.ts +12 -0
- package/dist/utils/responsiveProp.js +31 -0
- package/dist/utils/responsiveProp.js.map +1 -0
- package/dist/utils/space.d.ts +17 -15
- package/dist/utils/space.js +50 -29
- package/dist/utils/space.js.map +1 -1
- package/package.json +6 -6
- package/dist/Dropdown/__tests__/Dropdown.d.ts +0 -1
- package/dist/Dropdown/__tests__/Dropdown.js +0 -80
- package/dist/Dropdown/__tests__/Dropdown.js.map +0 -1
package/dist/Box/Box.stories.js
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { Text } from '../Text';
|
|
3
|
+
import { Icon } from '../Icon';
|
|
2
4
|
import { Box } from './Box';
|
|
5
|
+
import { theme } from '../theme';
|
|
3
6
|
export default {
|
|
4
7
|
title: 'Box',
|
|
5
8
|
component: Box,
|
|
6
9
|
};
|
|
7
|
-
const Template = (props) => React.createElement(Box, Object.assign({}, props),
|
|
10
|
+
const Template = (props) => (React.createElement(Box, Object.assign({}, props),
|
|
11
|
+
React.createElement(Text, null, "Some lovely content.")));
|
|
8
12
|
export const Default = Template.bind({});
|
|
9
13
|
Default.args = {
|
|
10
14
|
flex: true,
|
|
@@ -19,4 +23,16 @@ Default.argTypes = {
|
|
|
19
23
|
as: { table: { disable: true } },
|
|
20
24
|
forwardedAs: { table: { disable: true } },
|
|
21
25
|
};
|
|
26
|
+
const Card = () => (React.createElement(Box, { px: { small: '12px', medium: '24px' }, pt: { small: '8px', medium: '16px' }, pb: { small: '24px', medium: '32px' }, style: { backgroundColor: theme.colors.background, borderRadius: 8 } },
|
|
27
|
+
React.createElement(Box, { flex: true, direction: { small: 'column', medium: 'row' }, gap: { small: { custom: 2 }, medium: '8px' }, alignItems: { medium: 'center' }, mb: "8px" },
|
|
28
|
+
React.createElement(Icon, { render: "help-aboutus", size: 24 }),
|
|
29
|
+
React.createElement(Text, { typo: "heading-small" }, "Card content.")),
|
|
30
|
+
React.createElement(Text, { color: "subtext" }, "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s.")));
|
|
31
|
+
const ResponsiveTemplate = () => {
|
|
32
|
+
return (React.createElement(Box, { flex: true, direction: { small: 'column', medium: 'row' }, gap: { small: '12px', medium: '16px' } },
|
|
33
|
+
React.createElement(Card, null),
|
|
34
|
+
React.createElement(Card, null),
|
|
35
|
+
React.createElement(Card, null)));
|
|
36
|
+
};
|
|
37
|
+
export const ResponsiveProps = ResponsiveTemplate.bind({});
|
|
22
38
|
//# sourceMappingURL=Box.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.stories.js","sourceRoot":"","sources":["../../src/Box/Box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Box.stories.js","sourceRoot":"","sources":["../../src/Box/Box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAY,MAAM,OAAO,CAAA;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,eAAe;IACb,KAAK,EAAE,KAAK;IACZ,SAAS,EAAE,GAAG;CACf,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAe,EAAE,EAAE,CAAC,CACpC,oBAAC,GAAG,oBAAK,KAAK;IACZ,oBAAC,IAAI,+BAA4B,CAC7B,CACP,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,KAAK;IAChB,cAAc,EAAE,YAAY;IAC5B,UAAU,EAAE,aAAa;IACzB,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,MAAM;CACV,CAAA;AAED,OAAO,CAAC,QAAQ,GAAG;IACjB,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACnC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IAChC,WAAW,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAC1C,CAAA;AAED,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,CACjB,oBAAC,GAAG,IACF,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EACrC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,EACpC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EACrC,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,EAAE,YAAY,EAAE,CAAC,EAAE;IAEpE,oBAAC,GAAG,IACF,IAAI,QACJ,SAAS,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,EAC7C,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,EAC5C,UAAU,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,EAChC,EAAE,EAAC,KAAK;QAER,oBAAC,IAAI,IAAC,MAAM,EAAC,cAAc,EAAC,IAAI,EAAE,EAAE,GAAI;QACxC,oBAAC,IAAI,IAAC,IAAI,EAAC,eAAe,oBAAqB,CAC3C;IACN,oBAAC,IAAI,IAAC,KAAK,EAAC,SAAS,8JAId,CACH,CACP,CAAA;AAED,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC9B,OAAO,CACL,oBAAC,GAAG,IACF,IAAI,QACJ,SAAS,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,EAC7C,GAAG,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE;QAEtC,oBAAC,IAAI,OAAG;QACR,oBAAC,IAAI,OAAG;QACR,oBAAC,IAAI,OAAG,CACJ,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
|
@@ -18,7 +18,7 @@ import { theme } from '../theme';
|
|
|
18
18
|
const MAX_PAGES = 7;
|
|
19
19
|
const MAX_ADDITIONAL_PAGES = Math.ceil(MAX_PAGES / 2);
|
|
20
20
|
export const Pagination = (_a) => {
|
|
21
|
-
var { total, partition, handlePageChange } = _a, marginProps = __rest(_a, ["total", "partition", "handlePageChange"]);
|
|
21
|
+
var { total, partition, handlePageChange, currentPage } = _a, marginProps = __rest(_a, ["total", "partition", "handlePageChange", "currentPage"]);
|
|
22
22
|
const [lastPage, setLastPage] = useState(0);
|
|
23
23
|
const [activePage, setActivePage] = useState(1);
|
|
24
24
|
const [pages, setPages] = useState([]);
|
|
@@ -28,8 +28,13 @@ export const Pagination = (_a) => {
|
|
|
28
28
|
useEffect(() => {
|
|
29
29
|
// This is a rather hacky fix, in theory it should be listening to total, but because the total comes from the same endpoint as the data, it forces a reset to 1 every time
|
|
30
30
|
// Using lastPage seems to bypass that
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
if (currentPage) {
|
|
32
|
+
setActivePage(currentPage);
|
|
33
|
+
}
|
|
34
|
+
else {
|
|
35
|
+
setActivePage(1);
|
|
36
|
+
}
|
|
37
|
+
}, [lastPage, currentPage]);
|
|
33
38
|
useEffect(() => {
|
|
34
39
|
const numberOfPages = Math.ceil(total / partition);
|
|
35
40
|
if (numberOfPages > 1) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAM,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAGhC,MAAM,SAAS,GAAG,CAAC,CAAA;AACnB,MAAM,oBAAoB,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAM,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAGhC,MAAM,SAAS,GAAG,CAAC,CAAA;AACnB,MAAM,oBAAoB,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAA;AAarD,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAM/C,EAAE,EAAE;QAN2C,EAC9C,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,WAAW,OAEZ,EADI,WAAW,cALgC,yDAM/C,CADe;IAEd,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAC3C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAC/C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAA;IAChD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAA;IAC1D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACzD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEvD,SAAS,CAAC,GAAG,EAAE;QACb,2KAA2K;QAC3K,sCAAsC;QACtC,IAAI,WAAW,EAAE;YACf,aAAa,CAAC,WAAW,CAAC,CAAA;SAC3B;aAAM;YACL,aAAa,CAAC,CAAC,CAAC,CAAA;SACjB;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAA;IAE3B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,CAAA;QAClD,IAAI,aAAa,GAAG,CAAC,EAAE;YACrB,WAAW,CAAC,aAAa,CAAC,CAAA;SAC3B;aAAM,IAAI,aAAa,KAAK,CAAC,EAAE;YAC9B,mFAAmF;YACnF,WAAW,CAAC,CAAC,CAAC,CAAA;SACf;QACD,IAAI,aAAa,GAAG,CAAC,EAAE;YACrB,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;YACvE,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,aAAa,GAAG,CAAC,CAAC,CAAC,CAAA;SAC/C;aAAM;YACL,6EAA6E;YAC7E,QAAQ,CAAC,EAAE,CAAC,CAAA;SACb;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAA;IAEtB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,IAAI,SAAS,EAAE;YACzB,aAAa,CAAC,KAAK,CAAC,CAAA;SACrB;aAAM,IAAI,UAAU,IAAI,oBAAoB,EAAE;YAC7C,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAA;SACpD;aAAM,IAAI,UAAU,GAAG,QAAQ,GAAG,oBAAoB,EAAE;YACvD,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,oBAAoB,CAAC,CAAC,CAAA;SAChE;aAAM;YACL,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;YACjD,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,eAAe,GAAG,CAAC,EAAE,eAAe,GAAG,CAAC,CAAC,CAAC,CAAA;SACrE;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAA;IAEjC,SAAS,CAAC,GAAG,EAAE;QACb,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;QAC5C,eAAe,CACb,UAAU,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAC9D,CAAA;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAA;IAEvB,MAAM,QAAQ,GAAG,CAAC,IAAY,EAAE,EAAE;QAChC,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,IAAI,QAAQ,EAAE;YAChC,aAAa,CAAC,IAAI,CAAC,CAAA;YACnB,gBAAgB,CAAC,IAAI,CAAC,CAAA;SACvB;IACH,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,kBAAC,IAAI,QAAC,SAAS,EAAC,KAAK,IAAK,WAAW;QAC5C,UAAU,GAAG,CAAC,GAAG,CAAC,IAAI,CACrB,oBAAC,OAAO,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,CAAC;YAC9C,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAC,OAAO,GAAG,CACzB,CACX;QACD,oBAAC,OAAO,IAAC,MAAM,EAAE,UAAU,KAAK,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;YAC3D,oBAAC,IAAI,IAAC,IAAI,EAAE,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,EAAE,GAAG,EAAC,GAAG,QAE7D,CACC;QACT,aAAa,IAAI,CAChB,oBAAC,GAAG,IAAC,IAAI,QAAC,cAAc,EAAC,QAAQ;YAC/B,oBAAC,IAAI,IAAC,GAAG,EAAC,GAAG,UAAW,CACpB,CACP;QACA,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACpB,OAAO,CACL,oBAAC,OAAO,IACN,MAAM,EAAE,UAAU,KAAK,CAAC,EACxB,GAAG,EAAE,CAAC,EACN,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;gBAE1B,oBAAC,IAAI,IACH,IAAI,EAAE,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,EACrD,GAAG,EAAC,GAAG,IAEN,CAAC,CACG,CACC,CACX,CAAA;QACH,CAAC,CAAC;QACD,YAAY,IAAI,CACf,oBAAC,GAAG,IAAC,IAAI,QAAC,cAAc,EAAC,QAAQ;YAC/B,oBAAC,IAAI,IAAC,GAAG,EAAC,GAAG,UAAW,CACpB,CACP;QACA,OAAO,CAAC,QAAQ,CAAC,IAAI,CACpB,oBAAC,OAAO,IACN,MAAM,EAAE,UAAU,KAAK,QAAQ,EAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAEjC,oBAAC,IAAI,IACH,IAAI,EAAE,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,EAC5D,GAAG,EAAC,GAAG,IAEN,QAAQ,CACJ,CACC,CACX;QACA,UAAU,GAAG,CAAC,IAAI,QAAQ,IAAI,CAC7B,oBAAC,OAAO,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,CAAC;YAC9C,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAC,OAAO,EAAC,MAAM,EAAE,GAAG,GAAI,CACtC,CACX,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAMD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;CAW5B,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAU;gBACrB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;CAK1E,CAAA"}
|
package/dist/utils/flex.d.ts
CHANGED
|
@@ -1,12 +1,17 @@
|
|
|
1
|
+
import { ResponsiveProp } from './responsiveProp';
|
|
2
|
+
import { SpacingProp } from './space';
|
|
1
3
|
type FlexFN = (arg: FlexProps) => string;
|
|
2
4
|
export interface FlexProps {
|
|
3
|
-
direction?: 'column' | 'column-reverse' | 'row' | 'row-reverse'
|
|
5
|
+
direction?: ResponsiveProp<'column' | 'column-reverse' | 'row' | 'row-reverse'>;
|
|
4
6
|
wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
|
|
5
7
|
flex?: boolean;
|
|
6
8
|
flow?: string;
|
|
7
|
-
justifyContent?: 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'space-evenly'
|
|
8
|
-
alignItems?: 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'
|
|
9
|
-
alignContent?: 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'stretch'
|
|
9
|
+
justifyContent?: ResponsiveProp<'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'space-evenly'>;
|
|
10
|
+
alignItems?: ResponsiveProp<'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'>;
|
|
11
|
+
alignContent?: ResponsiveProp<'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'stretch'>;
|
|
12
|
+
gap?: ResponsiveProp<SpacingProp>;
|
|
13
|
+
rowGap?: ResponsiveProp<SpacingProp>;
|
|
14
|
+
columnGap?: ResponsiveProp<SpacingProp>;
|
|
10
15
|
}
|
|
11
16
|
export declare const flex: FlexFN;
|
|
12
17
|
export {};
|
package/dist/utils/flex.js
CHANGED
|
@@ -1,13 +1,32 @@
|
|
|
1
|
+
import { resolveResponsiveProp } from './responsiveProp';
|
|
2
|
+
import { resolveSpacing } from './space';
|
|
1
3
|
export const flex = (props) => {
|
|
2
|
-
const { flex, direction, wrap, flow, justifyContent, alignItems, alignContent, } = props;
|
|
4
|
+
const { flex, direction, wrap, flow, justifyContent, alignItems, alignContent, gap, columnGap, rowGap, } = props;
|
|
3
5
|
return `
|
|
4
6
|
${flex ? `display: flex;` : ''}
|
|
5
|
-
${direction
|
|
7
|
+
${direction
|
|
8
|
+
? resolveResponsiveProp(direction, (value) => `flex-direction: ${value};`)
|
|
9
|
+
: ''}
|
|
6
10
|
${wrap ? `flex-wrap: ${wrap};` : ''}
|
|
7
11
|
${flow ? `flex-flow: ${flow};` : ''}
|
|
8
|
-
${justifyContent
|
|
9
|
-
|
|
10
|
-
|
|
12
|
+
${justifyContent
|
|
13
|
+
? resolveResponsiveProp(justifyContent, (value) => `justify-content: ${value};`)
|
|
14
|
+
: ''}
|
|
15
|
+
${alignItems
|
|
16
|
+
? resolveResponsiveProp(alignItems, (value) => `align-items: ${value};`)
|
|
17
|
+
: ''}
|
|
18
|
+
${alignContent
|
|
19
|
+
? resolveResponsiveProp(alignContent, (value) => `align-content: ${value};`)
|
|
20
|
+
: ''}
|
|
21
|
+
${gap
|
|
22
|
+
? resolveResponsiveProp(gap, (value) => `gap: ${resolveSpacing(value)};`)
|
|
23
|
+
: ''}
|
|
24
|
+
${columnGap
|
|
25
|
+
? resolveResponsiveProp(columnGap, (value) => `column-gap: ${resolveSpacing(value)};`)
|
|
26
|
+
: ''}
|
|
27
|
+
${rowGap
|
|
28
|
+
? resolveResponsiveProp(rowGap, (value) => `row-gap: ${resolveSpacing(value)};`)
|
|
29
|
+
: ''}
|
|
11
30
|
`;
|
|
12
31
|
};
|
|
13
32
|
//# sourceMappingURL=flex.js.map
|
package/dist/utils/flex.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flex.js","sourceRoot":"","sources":["../../src/utils/flex.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"flex.js","sourceRoot":"","sources":["../../src/utils/flex.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAkB,MAAM,kBAAkB,CAAA;AACxE,OAAO,EAAE,cAAc,EAAe,MAAM,SAAS,CAAA;AAoCrD,MAAM,CAAC,MAAM,IAAI,GAAW,CAAC,KAAgB,EAAE,EAAE;IAC/C,MAAM,EACJ,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,cAAc,EACd,UAAU,EACV,YAAY,EACZ,GAAG,EACH,SAAS,EACT,MAAM,GACP,GAAG,KAAK,CAAA;IAET,OAAO;MACH,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;MAE5B,SAAS;QACP,CAAC,CAAC,qBAAqB,CACnB,SAAS,EACT,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,KAAK,GAAG,CACvC;QACH,CAAC,CAAC,EACN;MACE,IAAI,CAAC,CAAC,CAAC,cAAc,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;MACjC,IAAI,CAAC,CAAC,CAAC,cAAc,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;MAEjC,cAAc;QACZ,CAAC,CAAC,qBAAqB,CACnB,cAAc,EACd,CAAC,KAAK,EAAE,EAAE,CAAC,oBAAoB,KAAK,GAAG,CACxC;QACH,CAAC,CAAC,EACN;MAEE,UAAU;QACR,CAAC,CAAC,qBAAqB,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,KAAK,GAAG,CAAC;QACxE,CAAC,CAAC,EACN;MAEE,YAAY;QACV,CAAC,CAAC,qBAAqB,CACnB,YAAY,EACZ,CAAC,KAAK,EAAE,EAAE,CAAC,kBAAkB,KAAK,GAAG,CACtC;QACH,CAAC,CAAC,EACN;MAEE,GAAG;QACD,CAAC,CAAC,qBAAqB,CACnB,GAAG,EACH,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,cAAc,CAAC,KAAK,CAAC,GAAG,CAC5C;QACH,CAAC,CAAC,EACN;MAEE,SAAS;QACP,CAAC,CAAC,qBAAqB,CACnB,SAAS,EACT,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,cAAc,CAAC,KAAK,CAAC,GAAG,CACnD;QACH,CAAC,CAAC,EACN;MAEE,MAAM;QACJ,CAAC,CAAC,qBAAqB,CACnB,MAAM,EACN,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,cAAc,CAAC,KAAK,CAAC,GAAG,CAChD;QACH,CAAC,CAAC,EACN;GACD,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
declare const breakpointToMinPxMapping: {
|
|
2
|
+
small: number;
|
|
3
|
+
medium: number;
|
|
4
|
+
large: number;
|
|
5
|
+
};
|
|
6
|
+
type Breakpoint = keyof typeof breakpointToMinPxMapping;
|
|
7
|
+
type PropByBreakpoint<PropValue> = {
|
|
8
|
+
[key in Breakpoint]?: PropValue;
|
|
9
|
+
};
|
|
10
|
+
export type ResponsiveProp<PropValue> = PropValue | PropByBreakpoint<PropValue>;
|
|
11
|
+
export declare const resolveResponsiveProp: <PropValue>(value: ResponsiveProp<PropValue>, styleTemplate: (value: PropValue) => string) => string;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
const breakpointToMinPxMapping = {
|
|
2
|
+
small: 0,
|
|
3
|
+
medium: 768,
|
|
4
|
+
large: 1024,
|
|
5
|
+
};
|
|
6
|
+
const breakpointList = Object.keys(breakpointToMinPxMapping);
|
|
7
|
+
const isPropByBreakpoint = (value) => {
|
|
8
|
+
return (typeof value === 'object' &&
|
|
9
|
+
value !== null &&
|
|
10
|
+
breakpointList.includes(Object.keys(value)[0]));
|
|
11
|
+
};
|
|
12
|
+
export const resolveResponsiveProp = (value, styleTemplate) => {
|
|
13
|
+
if (!isPropByBreakpoint(value)) {
|
|
14
|
+
return `
|
|
15
|
+
@media (min-width: ${breakpointToMinPxMapping.small}px) {
|
|
16
|
+
${styleTemplate(value)}
|
|
17
|
+
}
|
|
18
|
+
`;
|
|
19
|
+
}
|
|
20
|
+
const breakpointUsed = Object.keys(value);
|
|
21
|
+
let style = '';
|
|
22
|
+
breakpointUsed.forEach((breakpoint) => {
|
|
23
|
+
style += `
|
|
24
|
+
@media (min-width: ${breakpointToMinPxMapping[breakpoint]}px) {
|
|
25
|
+
${styleTemplate(value[breakpoint])}
|
|
26
|
+
}
|
|
27
|
+
`;
|
|
28
|
+
});
|
|
29
|
+
return style;
|
|
30
|
+
};
|
|
31
|
+
//# sourceMappingURL=responsiveProp.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"responsiveProp.js","sourceRoot":"","sources":["../../src/utils/responsiveProp.ts"],"names":[],"mappings":"AAAA,MAAM,wBAAwB,GAAG;IAC/B,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,IAAI;CACqB,CAAA;AAGlC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,wBAAwB,CAAiB,CAAA;AAK5E,MAAM,kBAAkB,GAAG,CACzB,KAAgC,EACM,EAAE;IACxC,OAAO,CACL,OAAO,KAAK,KAAK,QAAQ;QACzB,KAAK,KAAK,IAAI;QACd,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAQ,CAAC,CACtD,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG,CACnC,KAAgC,EAChC,aAA2C,EAC3C,EAAE;IACF,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE;QAC9B,OAAO;2BACgB,wBAAwB,CAAC,KAAK;UAC/C,aAAa,CAAC,KAAK,CAAC;;KAEzB,CAAA;KACF;IAED,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAiB,CAAA;IAEzD,IAAI,KAAK,GAAG,EAAE,CAAA;IACd,cAAc,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,EAAE;QACpC,KAAK,IAAI;6BACgB,wBAAwB,CAAC,UAAU,CAAC;YACrD,aAAa,CAAC,KAAK,CAAC,UAAU,CAAE,CAAC;;OAEtC,CAAA;IACL,CAAC,CAAC,CAAA;IAEF,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}
|
package/dist/utils/space.d.ts
CHANGED
|
@@ -1,24 +1,26 @@
|
|
|
1
|
+
import { ResponsiveProp } from './responsiveProp';
|
|
1
2
|
type Spacing = '8px' | '12px' | '16px' | '24px' | '32px' | '48px' | '64px';
|
|
2
|
-
type SpacingProp = '0' | Spacing | {
|
|
3
|
+
export type SpacingProp = '0' | Spacing | {
|
|
3
4
|
custom: number | string;
|
|
4
5
|
};
|
|
6
|
+
export declare const resolveSpacing: (value: SpacingProp | 'auto') => string;
|
|
5
7
|
export interface MarginProps {
|
|
6
|
-
m?: SpacingProp
|
|
7
|
-
mx?: SpacingProp | 'auto'
|
|
8
|
-
my?: SpacingProp
|
|
9
|
-
ml?: SpacingProp
|
|
10
|
-
mr?: SpacingProp
|
|
11
|
-
mt?: SpacingProp
|
|
12
|
-
mb?: SpacingProp
|
|
8
|
+
m?: ResponsiveProp<SpacingProp>;
|
|
9
|
+
mx?: ResponsiveProp<SpacingProp | 'auto'>;
|
|
10
|
+
my?: ResponsiveProp<SpacingProp>;
|
|
11
|
+
ml?: ResponsiveProp<SpacingProp>;
|
|
12
|
+
mr?: ResponsiveProp<SpacingProp>;
|
|
13
|
+
mt?: ResponsiveProp<SpacingProp>;
|
|
14
|
+
mb?: ResponsiveProp<SpacingProp>;
|
|
13
15
|
}
|
|
14
16
|
export interface PaddingProps {
|
|
15
|
-
p?: SpacingProp
|
|
16
|
-
px?: SpacingProp
|
|
17
|
-
py?: SpacingProp
|
|
18
|
-
pl?: SpacingProp
|
|
19
|
-
pr?: SpacingProp
|
|
20
|
-
pt?: SpacingProp
|
|
21
|
-
pb?: SpacingProp
|
|
17
|
+
p?: ResponsiveProp<SpacingProp>;
|
|
18
|
+
px?: ResponsiveProp<SpacingProp>;
|
|
19
|
+
py?: ResponsiveProp<SpacingProp>;
|
|
20
|
+
pl?: ResponsiveProp<SpacingProp>;
|
|
21
|
+
pr?: ResponsiveProp<SpacingProp>;
|
|
22
|
+
pt?: ResponsiveProp<SpacingProp>;
|
|
23
|
+
pb?: ResponsiveProp<SpacingProp>;
|
|
22
24
|
}
|
|
23
25
|
export declare const margin: (props: MarginProps) => string;
|
|
24
26
|
export declare const padding: (props: PaddingProps) => string;
|
package/dist/utils/space.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
import { resolveResponsiveProp } from './responsiveProp';
|
|
2
|
+
export const resolveSpacing = (value) => {
|
|
2
3
|
if (typeof value === 'string') {
|
|
3
4
|
return value;
|
|
4
5
|
}
|
|
@@ -10,45 +11,65 @@ const resolveSpacing = (value) => {
|
|
|
10
11
|
export const margin = (props) => {
|
|
11
12
|
const { m, mx, my, ml, mr, mt, mb } = props;
|
|
12
13
|
return `
|
|
13
|
-
${m
|
|
14
|
+
${m
|
|
15
|
+
? resolveResponsiveProp(m, (value) => `margin: ${resolveSpacing(value)};`)
|
|
16
|
+
: ''}
|
|
14
17
|
${mx
|
|
15
|
-
? `
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
18
|
+
? resolveResponsiveProp(mx, (value) => `
|
|
19
|
+
margin-left: ${resolveSpacing(value)};
|
|
20
|
+
margin-right: ${resolveSpacing(value)};
|
|
21
|
+
`)
|
|
19
22
|
: ''}
|
|
20
23
|
${my
|
|
21
|
-
? `
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
: ''}
|
|
26
|
-
${ml
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
${
|
|
24
|
+
? resolveResponsiveProp(my, (value) => `
|
|
25
|
+
margin-top: ${resolveSpacing(value)};
|
|
26
|
+
margin-bottom: ${resolveSpacing(value)};
|
|
27
|
+
`)
|
|
28
|
+
: ''}
|
|
29
|
+
${ml
|
|
30
|
+
? resolveResponsiveProp(ml, (value) => `margin-left: ${resolveSpacing(value)};`)
|
|
31
|
+
: ''}
|
|
32
|
+
${mr
|
|
33
|
+
? resolveResponsiveProp(mr, (value) => `margin-right: ${resolveSpacing(value)};`)
|
|
34
|
+
: ''}
|
|
35
|
+
${mt
|
|
36
|
+
? resolveResponsiveProp(mt, (value) => `margin-top: ${resolveSpacing(value)};`)
|
|
37
|
+
: ''}
|
|
38
|
+
${mb
|
|
39
|
+
? resolveResponsiveProp(mb, (value) => `margin-bottom: ${resolveSpacing(value)};`)
|
|
40
|
+
: ''}
|
|
30
41
|
`;
|
|
31
42
|
};
|
|
32
43
|
export const padding = (props) => {
|
|
33
44
|
const { p, px, py, pl, pr, pt, pb } = props;
|
|
34
45
|
return `
|
|
35
|
-
${p
|
|
46
|
+
${p
|
|
47
|
+
? resolveResponsiveProp(p, (value) => `padding: ${resolveSpacing(value)};`)
|
|
48
|
+
: ''}
|
|
36
49
|
${px
|
|
37
|
-
? `
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
50
|
+
? resolveResponsiveProp(px, (value) => `
|
|
51
|
+
padding-left: ${resolveSpacing(value)};
|
|
52
|
+
padding-right: ${resolveSpacing(value)};
|
|
53
|
+
`)
|
|
41
54
|
: ''}
|
|
42
55
|
${py
|
|
43
|
-
? `
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
: ''}
|
|
48
|
-
${pl
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
${
|
|
56
|
+
? resolveResponsiveProp(py, (value) => `
|
|
57
|
+
padding-top: ${resolveSpacing(value)};
|
|
58
|
+
padding-bottom: ${resolveSpacing(value)};
|
|
59
|
+
`)
|
|
60
|
+
: ''}
|
|
61
|
+
${pl
|
|
62
|
+
? resolveResponsiveProp(pl, (value) => `padding-left: ${resolveSpacing(value)};`)
|
|
63
|
+
: ''}
|
|
64
|
+
${pr
|
|
65
|
+
? resolveResponsiveProp(pr, (value) => `padding-right: ${resolveSpacing(value)};`)
|
|
66
|
+
: ''}
|
|
67
|
+
${pt
|
|
68
|
+
? resolveResponsiveProp(pt, (value) => `padding-top: ${resolveSpacing(value)};`)
|
|
69
|
+
: ''}
|
|
70
|
+
${pb
|
|
71
|
+
? resolveResponsiveProp(pb, (value) => `padding-bottom: ${resolveSpacing(value)};`)
|
|
72
|
+
: ''}
|
|
52
73
|
`;
|
|
53
74
|
};
|
|
54
75
|
//# sourceMappingURL=space.js.map
|
package/dist/utils/space.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"space.js","sourceRoot":"","sources":["../../src/utils/space.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"space.js","sourceRoot":"","sources":["../../src/utils/space.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAkB,MAAM,kBAAkB,CAAA;AAMxE,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA2B,EAAE,EAAE;IAC5D,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,KAAK,CAAA;KACb;IAED,IAAI,OAAO,KAAK,CAAC,MAAM,KAAK,QAAQ,EAAE;QACpC,OAAO,KAAK,CAAC,MAAM,CAAA;KACpB;IAED,OAAO,GAAG,KAAK,CAAC,MAAM,IAAI,CAAA;AAC5B,CAAC,CAAA;AAsBD,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAU,EAAE;IACnD,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,KAAK,CAAA;IAE3C,OAAO;MAEH,CAAC;QACC,CAAC,CAAC,qBAAqB,CACnB,CAAC,EACD,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,cAAc,CAAC,KAAK,CAAC,GAAG,CAC/C;QACH,CAAC,CAAC,EACN;MAEE,EAAE;QACA,CAAC,CAAC,qBAAqB,CACnB,EAAE,EACF,CAAC,KAAK,EAAE,EAAE,CAAC;uBACA,cAAc,CAAC,KAAK,CAAC;wBACpB,cAAc,CAAC,KAAK,CAAC;OACtC,CACI;QACH,CAAC,CAAC,EACN;MAEE,EAAE;QACA,CAAC,CAAC,qBAAqB,CACnB,EAAE,EACF,CAAC,KAAK,EAAE,EAAE,CAAC;sBACD,cAAc,CAAC,KAAK,CAAC;yBAClB,cAAc,CAAC,KAAK,CAAC;OACvC,CACI;QACH,CAAC,CAAC,EACN;MAEE,EAAE;QACA,CAAC,CAAC,qBAAqB,CACnB,EAAE,EACF,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,cAAc,CAAC,KAAK,CAAC,GAAG,CACpD;QACH,CAAC,CAAC,EACN;MAEE,EAAE;QACA,CAAC,CAAC,qBAAqB,CACnB,EAAE,EACF,CAAC,KAAK,EAAE,EAAE,CAAC,iBAAiB,cAAc,CAAC,KAAK,CAAC,GAAG,CACrD;QACH,CAAC,CAAC,EACN;MAEE,EAAE;QACA,CAAC,CAAC,qBAAqB,CACnB,EAAE,EACF,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,cAAc,CAAC,KAAK,CAAC,GAAG,CACnD;QACH,CAAC,CAAC,EACN;MAEE,EAAE;QACA,CAAC,CAAC,qBAAqB,CACnB,EAAE,EACF,CAAC,KAAK,EAAE,EAAE,CAAC,kBAAkB,cAAc,CAAC,KAAK,CAAC,GAAG,CACtD;QACH,CAAC,CAAC,EACN;GACD,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAU,EAAE;IACrD,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,KAAK,CAAA;IAE3C,OAAO;MAEH,CAAC;QACC,CAAC,CAAC,qBAAqB,CACnB,CAAC,EACD,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,cAAc,CAAC,KAAK,CAAC,GAAG,CAChD;QACH,CAAC,CAAC,EACN;MAEE,EAAE;QACA,CAAC,CAAC,qBAAqB,CACnB,EAAE,EACF,CAAC,KAAK,EAAE,EAAE,CAAC;wBACC,cAAc,CAAC,KAAK,CAAC;yBACpB,cAAc,CAAC,KAAK,CAAC;OACvC,CACI;QACH,CAAC,CAAC,EACN;MAEE,EAAE;QACA,CAAC,CAAC,qBAAqB,CACnB,EAAE,EACF,CAAC,KAAK,EAAE,EAAE,CAAC;uBACA,cAAc,CAAC,KAAK,CAAC;0BAClB,cAAc,CAAC,KAAK,CAAC;OACxC,CACI;QACH,CAAC,CAAC,EACN;MAEE,EAAE;QACA,CAAC,CAAC,qBAAqB,CACnB,EAAE,EACF,CAAC,KAAK,EAAE,EAAE,CAAC,iBAAiB,cAAc,CAAC,KAAK,CAAC,GAAG,CACrD;QACH,CAAC,CAAC,EACN;MAEE,EAAE;QACA,CAAC,CAAC,qBAAqB,CACnB,EAAE,EACF,CAAC,KAAK,EAAE,EAAE,CAAC,kBAAkB,cAAc,CAAC,KAAK,CAAC,GAAG,CACtD;QACH,CAAC,CAAC,EACN;MAEE,EAAE;QACA,CAAC,CAAC,qBAAqB,CACnB,EAAE,EACF,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,cAAc,CAAC,KAAK,CAAC,GAAG,CACpD;QACH,CAAC,CAAC,EACN;MAEE,EAAE;QACA,CAAC,CAAC,qBAAqB,CACnB,EAAE,EACF,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,cAAc,CAAC,KAAK,CAAC,GAAG,CACvD;QACH,CAAC,CAAC,EACN;GACD,CAAA;AACH,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.14.0",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"keywords": [
|
|
@@ -29,16 +29,16 @@
|
|
|
29
29
|
"fix-package-lock-conflicts": "echo \"Make sure conflicts in package.json are resolved before running this script\" && npm i --package-lock-only"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@babel/core": "^7.20.
|
|
32
|
+
"@babel/core": "^7.20.12",
|
|
33
33
|
"@babel/plugin-proposal-class-properties": "^7.18.6",
|
|
34
34
|
"@babel/preset-env": "^7.20.2",
|
|
35
35
|
"@babel/preset-react": "^7.18.6",
|
|
36
36
|
"@babel/preset-typescript": "^7.18.6",
|
|
37
37
|
"@snyk/protect": "^1.881.0",
|
|
38
|
-
"@storybook/addon-essentials": "^6.5.
|
|
39
|
-
"@storybook/builder-webpack5": "^6.5.
|
|
40
|
-
"@storybook/manager-webpack5": "^6.5.
|
|
41
|
-
"@storybook/react": "^6.5.
|
|
38
|
+
"@storybook/addon-essentials": "^6.5.16",
|
|
39
|
+
"@storybook/builder-webpack5": "^6.5.16",
|
|
40
|
+
"@storybook/manager-webpack5": "^6.5.16",
|
|
41
|
+
"@storybook/react": "^6.5.16",
|
|
42
42
|
"@storybook/storybook-deployer": "^2.8.16",
|
|
43
43
|
"@testing-library/jest-dom": "^5.11.4",
|
|
44
44
|
"@testing-library/react": "^13.4.0",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render } from '@testing-library/react';
|
|
3
|
-
import 'jest-styled-components';
|
|
4
|
-
import { Dropdown } from '../Dropdown';
|
|
5
|
-
const days = [
|
|
6
|
-
{
|
|
7
|
-
label: 'Monday',
|
|
8
|
-
value: 'MONDAY',
|
|
9
|
-
},
|
|
10
|
-
{
|
|
11
|
-
label: 'Tuesday',
|
|
12
|
-
value: 'TUESDAY',
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
label: 'Wednesday',
|
|
16
|
-
value: 'WEDNESDAY',
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
label: 'Thursday',
|
|
20
|
-
value: 'THURSDAY',
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
label: 'Friday',
|
|
24
|
-
value: 'FRIDAY',
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
label: 'Saturday',
|
|
28
|
-
value: 'SATURDAY',
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
label: 'Sunday',
|
|
32
|
-
value: 'SUNDAY',
|
|
33
|
-
},
|
|
34
|
-
];
|
|
35
|
-
const daysWithGroups = [
|
|
36
|
-
{
|
|
37
|
-
label: 'Monday',
|
|
38
|
-
value: 'MONDAY',
|
|
39
|
-
optionGroupLabel: 'Weekday',
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
label: 'Tuesday',
|
|
43
|
-
value: 'TUESDAY',
|
|
44
|
-
optionGroupLabel: 'Weekday',
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
label: 'Wednesday',
|
|
48
|
-
value: 'WEDNESDAY',
|
|
49
|
-
optionGroupLabel: 'Weekday',
|
|
50
|
-
},
|
|
51
|
-
{
|
|
52
|
-
label: 'Thursday',
|
|
53
|
-
value: 'THURSDAY',
|
|
54
|
-
optionGroupLabel: 'Weekday',
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
label: 'Friday',
|
|
58
|
-
value: 'FRIDAY',
|
|
59
|
-
optionGroupLabel: 'Weekday',
|
|
60
|
-
},
|
|
61
|
-
{
|
|
62
|
-
label: 'Saturday',
|
|
63
|
-
value: 'SATURDAY',
|
|
64
|
-
optionGroupLabel: 'Weekend',
|
|
65
|
-
},
|
|
66
|
-
{
|
|
67
|
-
label: 'Sunday',
|
|
68
|
-
value: 'SUNDAY',
|
|
69
|
-
optionGroupLabel: 'Weekend',
|
|
70
|
-
},
|
|
71
|
-
];
|
|
72
|
-
test('rendersDropdown', () => {
|
|
73
|
-
const { container } = render(React.createElement(Dropdown, { list: days }));
|
|
74
|
-
expect(container.firstChild).toMatchSnapshot();
|
|
75
|
-
});
|
|
76
|
-
test('rendersDropdownWithGroups', () => {
|
|
77
|
-
const { container } = render(React.createElement(Dropdown, { list: daysWithGroups }));
|
|
78
|
-
expect(container.firstChild).toMatchSnapshot();
|
|
79
|
-
});
|
|
80
|
-
//# sourceMappingURL=Dropdown.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/Dropdown/__tests__/Dropdown.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,MAAM,IAAI,GAAG;IACX;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;IACD;QACE,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;KACjB;IACD;QACE,KAAK,EAAE,WAAW;QAClB,KAAK,EAAE,WAAW;KACnB;IACD;QACE,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,UAAU;KAClB;IACD;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;IACD;QACE,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,UAAU;KAClB;IACD;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;CACF,CAAA;AAED,MAAM,cAAc,GAAG;IACrB;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;QACf,gBAAgB,EAAE,SAAS;KAC5B;IACD;QACE,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;QAChB,gBAAgB,EAAE,SAAS;KAC5B;IACD;QACE,KAAK,EAAE,WAAW;QAClB,KAAK,EAAE,WAAW;QAClB,gBAAgB,EAAE,SAAS;KAC5B;IACD;QACE,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,UAAU;QACjB,gBAAgB,EAAE,SAAS;KAC5B;IACD;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;QACf,gBAAgB,EAAE,SAAS;KAC5B;IACD;QACE,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,UAAU;QACjB,gBAAgB,EAAE,SAAS;KAC5B;IACD;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;QACf,gBAAgB,EAAE,SAAS;KAC5B;CACF,CAAA;AAED,IAAI,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC3B,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC,CAAA;IAEtD,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAA;AAChD,CAAC,CAAC,CAAA;AAEF,IAAI,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACrC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,QAAQ,IAAC,IAAI,EAAE,cAAc,GAAI,CAAC,CAAA;IAEhE,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAA;AAChD,CAAC,CAAC,CAAA"}
|