@workday/canvas-kit-labs-react 8.0.0-alpha.216-next.4 → 8.0.0-alpha.224-next.7
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/common/index.ts +0 -2
- package/common/lib/theming/useThemeRTL.ts +11 -13
- package/dist/commonjs/common/index.d.ts +0 -2
- package/dist/commonjs/common/index.d.ts.map +1 -1
- package/dist/commonjs/common/index.js +0 -5
- package/dist/commonjs/common/lib/theming/useThemeRTL.d.ts.map +1 -1
- package/dist/commonjs/common/lib/theming/useThemeRTL.js +6 -8
- package/dist/es6/common/index.d.ts +0 -2
- package/dist/es6/common/index.d.ts.map +1 -1
- package/dist/es6/common/index.js +0 -2
- package/dist/es6/common/lib/theming/useThemeRTL.d.ts.map +1 -1
- package/dist/es6/common/lib/theming/useThemeRTL.js +7 -9
- package/package.json +3 -3
- package/common/lib/storybook-utils/ComponentStatesTable.tsx +0 -80
- package/common/lib/storybook-utils/permutateProps.ts +0 -47
- package/common/lib/storybook-utils/propTypes.ts +0 -15
- package/dist/commonjs/common/lib/storybook-utils/ComponentStatesTable.d.ts +0 -26
- package/dist/commonjs/common/lib/storybook-utils/ComponentStatesTable.d.ts.map +0 -1
- package/dist/commonjs/common/lib/storybook-utils/ComponentStatesTable.js +0 -48
- package/dist/commonjs/common/lib/storybook-utils/permutateProps.d.ts +0 -5
- package/dist/commonjs/common/lib/storybook-utils/permutateProps.d.ts.map +0 -1
- package/dist/commonjs/common/lib/storybook-utils/permutateProps.js +0 -47
- package/dist/commonjs/common/lib/storybook-utils/propTypes.d.ts +0 -15
- package/dist/commonjs/common/lib/storybook-utils/propTypes.d.ts.map +0 -1
- package/dist/commonjs/common/lib/storybook-utils/propTypes.js +0 -2
- package/dist/es6/common/lib/storybook-utils/ComponentStatesTable.d.ts +0 -26
- package/dist/es6/common/lib/storybook-utils/ComponentStatesTable.d.ts.map +0 -1
- package/dist/es6/common/lib/storybook-utils/ComponentStatesTable.js +0 -41
- package/dist/es6/common/lib/storybook-utils/permutateProps.d.ts +0 -5
- package/dist/es6/common/lib/storybook-utils/permutateProps.d.ts.map +0 -1
- package/dist/es6/common/lib/storybook-utils/permutateProps.js +0 -43
- package/dist/es6/common/lib/storybook-utils/propTypes.d.ts +0 -15
- package/dist/es6/common/lib/storybook-utils/propTypes.d.ts.map +0 -1
- package/dist/es6/common/lib/storybook-utils/propTypes.js +0 -1
package/common/index.ts
CHANGED
|
@@ -1,22 +1,20 @@
|
|
|
1
|
-
import {
|
|
2
|
-
convertToStaticStates,
|
|
3
|
-
CanvasTheme,
|
|
4
|
-
useIsRTL,
|
|
5
|
-
useTheme,
|
|
6
|
-
} from '@workday/canvas-kit-react/common';
|
|
1
|
+
import {CanvasTheme, useIsRTL, useTheme, StyleRewriteFn} from '@workday/canvas-kit-react/common';
|
|
7
2
|
import {CSSProperties} from '@workday/canvas-kit-react/tokens';
|
|
8
3
|
import {useMemo} from 'react';
|
|
9
4
|
import rtlCSSJS from 'rtl-css-js';
|
|
10
5
|
|
|
11
6
|
export type ComponentStyles = Record<string, CSSProperties>;
|
|
12
|
-
type ThemeWithStaticStates = CanvasTheme & {
|
|
7
|
+
type ThemeWithStaticStates = CanvasTheme & {_styleRewriteFn?: StyleRewriteFn};
|
|
13
8
|
|
|
14
9
|
const getDirectionalStyles = (isRTL: boolean, ...styles: CSSProperties[]) => {
|
|
15
10
|
return isRTL ? rtlCSSJS(styles) : styles;
|
|
16
11
|
};
|
|
17
12
|
|
|
18
|
-
const getConvertedStyles = (
|
|
19
|
-
|
|
13
|
+
const getConvertedStyles = (
|
|
14
|
+
styles: CSSProperties,
|
|
15
|
+
convertFunc?: StyleRewriteFn
|
|
16
|
+
): CSSProperties | undefined => {
|
|
17
|
+
return convertFunc ? convertFunc(styles) : styles;
|
|
20
18
|
};
|
|
21
19
|
|
|
22
20
|
/**
|
|
@@ -51,19 +49,19 @@ const getConvertedStyles = (shouldConvert: boolean, styles: CSSProperties): CSSP
|
|
|
51
49
|
export function useThemeRTL() {
|
|
52
50
|
const theme = useTheme();
|
|
53
51
|
const direction = useIsRTL(theme);
|
|
54
|
-
const
|
|
52
|
+
const convertFunc = (theme.canvas as ThemeWithStaticStates)._styleRewriteFn;
|
|
55
53
|
|
|
56
54
|
const themeRTL = useMemo(() => {
|
|
57
55
|
return (...cssObject: CSSProperties[]) => {
|
|
58
56
|
const styles = getDirectionalStyles(direction, ...cssObject);
|
|
59
57
|
return styles.reduce((first, second) => {
|
|
60
|
-
const convertedFirst =
|
|
61
|
-
const convertedSecond =
|
|
58
|
+
const convertedFirst = getConvertedStyles(first, convertFunc);
|
|
59
|
+
const convertedSecond = getConvertedStyles(second, convertFunc);
|
|
62
60
|
|
|
63
61
|
return {...convertedFirst, ...convertedSecond};
|
|
64
62
|
}, {});
|
|
65
63
|
};
|
|
66
|
-
}, [direction,
|
|
64
|
+
}, [direction, convertFunc]);
|
|
67
65
|
|
|
68
66
|
return {themeRTL, theme};
|
|
69
67
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
|
|
@@ -10,9 +10,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
10
10
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
11
|
};
|
|
12
12
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
-
exports.permutateProps = exports.ComponentStatesTable = void 0;
|
|
14
13
|
__exportStar(require("./lib/theming"), exports);
|
|
15
|
-
var ComponentStatesTable_1 = require("./lib/storybook-utils/ComponentStatesTable");
|
|
16
|
-
Object.defineProperty(exports, "ComponentStatesTable", { enumerable: true, get: function () { return ComponentStatesTable_1.ComponentStatesTable; } });
|
|
17
|
-
var permutateProps_1 = require("./lib/storybook-utils/permutateProps");
|
|
18
|
-
Object.defineProperty(exports, "permutateProps", { enumerable: true, get: function () { return permutateProps_1.permutateProps; } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useThemeRTL.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemeRTL.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useThemeRTL.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemeRTL.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAI/D,oBAAY,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAc5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,WAAW;6BAMD,aAAa,EAAE;;EAYxC"}
|
|
@@ -32,9 +32,8 @@ var getDirectionalStyles = function (isRTL) {
|
|
|
32
32
|
}
|
|
33
33
|
return isRTL ? rtl_css_js_1.default(styles) : styles;
|
|
34
34
|
};
|
|
35
|
-
var getConvertedStyles = function (
|
|
36
|
-
|
|
37
|
-
return shouldConvert ? (_a = common_1.convertToStaticStates(styles)) !== null && _a !== void 0 ? _a : styles : styles;
|
|
35
|
+
var getConvertedStyles = function (styles, convertFunc) {
|
|
36
|
+
return convertFunc ? convertFunc(styles) : styles;
|
|
38
37
|
};
|
|
39
38
|
/**
|
|
40
39
|
* A helpful hook for supporting bidirectional styles.
|
|
@@ -66,10 +65,9 @@ var getConvertedStyles = function (shouldConvert, styles) {
|
|
|
66
65
|
* }
|
|
67
66
|
*/
|
|
68
67
|
function useThemeRTL() {
|
|
69
|
-
var _a;
|
|
70
68
|
var theme = common_1.useTheme();
|
|
71
69
|
var direction = common_1.useIsRTL(theme);
|
|
72
|
-
var
|
|
70
|
+
var convertFunc = theme.canvas._styleRewriteFn;
|
|
73
71
|
var themeRTL = react_1.useMemo(function () {
|
|
74
72
|
return function () {
|
|
75
73
|
var cssObject = [];
|
|
@@ -78,12 +76,12 @@ function useThemeRTL() {
|
|
|
78
76
|
}
|
|
79
77
|
var styles = getDirectionalStyles.apply(void 0, __spreadArrays([direction], cssObject));
|
|
80
78
|
return styles.reduce(function (first, second) {
|
|
81
|
-
var convertedFirst =
|
|
82
|
-
var convertedSecond =
|
|
79
|
+
var convertedFirst = getConvertedStyles(first, convertFunc);
|
|
80
|
+
var convertedSecond = getConvertedStyles(second, convertFunc);
|
|
83
81
|
return __assign(__assign({}, convertedFirst), convertedSecond);
|
|
84
82
|
}, {});
|
|
85
83
|
};
|
|
86
|
-
}, [direction,
|
|
84
|
+
}, [direction, convertFunc]);
|
|
87
85
|
return { themeRTL: themeRTL, theme: theme };
|
|
88
86
|
}
|
|
89
87
|
exports.useThemeRTL = useThemeRTL;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
|
package/dist/es6/common/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useThemeRTL.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemeRTL.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useThemeRTL.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemeRTL.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAI/D,oBAAY,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAc5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,WAAW;6BAMD,aAAa,EAAE;;EAYxC"}
|
|
@@ -16,7 +16,7 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
|
|
|
16
16
|
r[k] = a[j];
|
|
17
17
|
return r;
|
|
18
18
|
};
|
|
19
|
-
import {
|
|
19
|
+
import { useIsRTL, useTheme } from '@workday/canvas-kit-react/common';
|
|
20
20
|
import { useMemo } from 'react';
|
|
21
21
|
import rtlCSSJS from 'rtl-css-js';
|
|
22
22
|
var getDirectionalStyles = function (isRTL) {
|
|
@@ -26,9 +26,8 @@ var getDirectionalStyles = function (isRTL) {
|
|
|
26
26
|
}
|
|
27
27
|
return isRTL ? rtlCSSJS(styles) : styles;
|
|
28
28
|
};
|
|
29
|
-
var getConvertedStyles = function (
|
|
30
|
-
|
|
31
|
-
return shouldConvert ? (_a = convertToStaticStates(styles)) !== null && _a !== void 0 ? _a : styles : styles;
|
|
29
|
+
var getConvertedStyles = function (styles, convertFunc) {
|
|
30
|
+
return convertFunc ? convertFunc(styles) : styles;
|
|
32
31
|
};
|
|
33
32
|
/**
|
|
34
33
|
* A helpful hook for supporting bidirectional styles.
|
|
@@ -60,10 +59,9 @@ var getConvertedStyles = function (shouldConvert, styles) {
|
|
|
60
59
|
* }
|
|
61
60
|
*/
|
|
62
61
|
export function useThemeRTL() {
|
|
63
|
-
var _a;
|
|
64
62
|
var theme = useTheme();
|
|
65
63
|
var direction = useIsRTL(theme);
|
|
66
|
-
var
|
|
64
|
+
var convertFunc = theme.canvas._styleRewriteFn;
|
|
67
65
|
var themeRTL = useMemo(function () {
|
|
68
66
|
return function () {
|
|
69
67
|
var cssObject = [];
|
|
@@ -72,11 +70,11 @@ export function useThemeRTL() {
|
|
|
72
70
|
}
|
|
73
71
|
var styles = getDirectionalStyles.apply(void 0, __spreadArrays([direction], cssObject));
|
|
74
72
|
return styles.reduce(function (first, second) {
|
|
75
|
-
var convertedFirst =
|
|
76
|
-
var convertedSecond =
|
|
73
|
+
var convertedFirst = getConvertedStyles(first, convertFunc);
|
|
74
|
+
var convertedSecond = getConvertedStyles(second, convertFunc);
|
|
77
75
|
return __assign(__assign({}, convertedFirst), convertedSecond);
|
|
78
76
|
}, {});
|
|
79
77
|
};
|
|
80
|
-
}, [direction,
|
|
78
|
+
}, [direction, convertFunc]);
|
|
81
79
|
return { themeRTL: themeRTL, theme: theme };
|
|
82
80
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-labs-react",
|
|
3
|
-
"version": "8.0.0-alpha.
|
|
3
|
+
"version": "8.0.0-alpha.224-next.7+e820f3ad",
|
|
4
4
|
"description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"@emotion/react": "^11.7.1",
|
|
48
48
|
"@emotion/styled": "^11.6.0",
|
|
49
|
-
"@workday/canvas-kit-react": "^8.0.0-alpha.
|
|
49
|
+
"@workday/canvas-kit-react": "^8.0.0-alpha.224-next.7+e820f3ad",
|
|
50
50
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
51
51
|
"@workday/design-assets-types": "^0.2.8",
|
|
52
52
|
"chroma-js": "^2.1.0",
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"devDependencies": {
|
|
57
57
|
"@types/lodash.flatten": "^4.4.6"
|
|
58
58
|
},
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "e820f3adf6fd563cebc522cc02488965bc76b668"
|
|
60
60
|
}
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {styled} from '@workday/canvas-kit-react/common';
|
|
3
|
-
import {PropCombination, Props} from './propTypes';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* A helper to generate a table of all possible states for component visual testing.
|
|
7
|
-
*/
|
|
8
|
-
export interface ComponentStatesTableProps {
|
|
9
|
-
/**
|
|
10
|
-
* The props that will be passed to the component when it is rendered and the corresponding
|
|
11
|
-
* row label for that permutation. It is encouraged to use the result of permutateProps()
|
|
12
|
-
* rather than passing in a list so we don't miss any combinations.
|
|
13
|
-
*/
|
|
14
|
-
rowProps: PropCombination[];
|
|
15
|
-
/**
|
|
16
|
-
* The props that will be passed to the component when it is rendered and the corresponding
|
|
17
|
-
* column label for that permutation. It is encouraged to use the result of permutateProps()
|
|
18
|
-
* rather than passing in a list so we don't miss any combinations.
|
|
19
|
-
*/
|
|
20
|
-
columnProps: PropCombination[];
|
|
21
|
-
/**
|
|
22
|
-
* The render function called to render the component in each cell of the table. This gives you
|
|
23
|
-
* the ability to add extra styling or markup (a blue background for an inverse variant, for example).
|
|
24
|
-
*/
|
|
25
|
-
children(props: Props): React.ReactNode;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
const Table = styled('table')({
|
|
29
|
-
width: '100%',
|
|
30
|
-
thead: {
|
|
31
|
-
textAlign: 'left',
|
|
32
|
-
paddingBottom: 16,
|
|
33
|
-
},
|
|
34
|
-
'td, th': {
|
|
35
|
-
minWidth: 100,
|
|
36
|
-
paddingBottom: 16,
|
|
37
|
-
paddingRight: 16,
|
|
38
|
-
textAlign: 'left',
|
|
39
|
-
},
|
|
40
|
-
});
|
|
41
|
-
|
|
42
|
-
export const ComponentStatesTable = ({
|
|
43
|
-
rowProps,
|
|
44
|
-
columnProps,
|
|
45
|
-
children,
|
|
46
|
-
}: ComponentStatesTableProps) => {
|
|
47
|
-
return (
|
|
48
|
-
<Table>
|
|
49
|
-
<thead>
|
|
50
|
-
<tr>
|
|
51
|
-
<th>Variants</th>
|
|
52
|
-
{columnProps.map(col => (
|
|
53
|
-
<th key={`component-table-heading-${col.label.toLowerCase().replace(' ', ',')}`}>
|
|
54
|
-
{col.label}
|
|
55
|
-
</th>
|
|
56
|
-
))}
|
|
57
|
-
</tr>
|
|
58
|
-
</thead>
|
|
59
|
-
<tbody>
|
|
60
|
-
{rowProps.map(row => {
|
|
61
|
-
return (
|
|
62
|
-
<tr key={row.label.toLowerCase().replace(' ', '-')}>
|
|
63
|
-
<td>{row.label}</td>
|
|
64
|
-
{columnProps.map(col => {
|
|
65
|
-
return (
|
|
66
|
-
<td key={col.label.toLowerCase().replace(' ', '-')}>
|
|
67
|
-
{children({
|
|
68
|
-
...row.props,
|
|
69
|
-
...col.props,
|
|
70
|
-
})}
|
|
71
|
-
</td>
|
|
72
|
-
);
|
|
73
|
-
})}
|
|
74
|
-
</tr>
|
|
75
|
-
);
|
|
76
|
-
})}
|
|
77
|
-
</tbody>
|
|
78
|
-
</Table>
|
|
79
|
-
);
|
|
80
|
-
};
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import {PropCombination, PropDeclaration, Props, PropsDeclaration} from './propTypes';
|
|
2
|
-
|
|
3
|
-
export const permutateProps = (
|
|
4
|
-
allProps: PropsDeclaration,
|
|
5
|
-
filter?: (props: Props) => boolean,
|
|
6
|
-
remainingProps: string[] = Object.keys(allProps),
|
|
7
|
-
values: {[key: string]: PropDeclaration} = {}
|
|
8
|
-
): PropCombination[] => {
|
|
9
|
-
// When there are no more props to combine with, return result
|
|
10
|
-
const prop = remainingProps[0];
|
|
11
|
-
if (!prop) {
|
|
12
|
-
const props: Props = {};
|
|
13
|
-
Object.keys(values).forEach(prop => {
|
|
14
|
-
props[prop] = values?.[prop]?.value;
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
if (filter && !filter(props)) {
|
|
18
|
-
return [];
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
const label = Object.keys(values)
|
|
22
|
-
.map(prop => values?.[prop]?.label)
|
|
23
|
-
.join(' ');
|
|
24
|
-
|
|
25
|
-
return [
|
|
26
|
-
{
|
|
27
|
-
label,
|
|
28
|
-
props,
|
|
29
|
-
},
|
|
30
|
-
];
|
|
31
|
-
}
|
|
32
|
-
const possiblePropValues = allProps[prop];
|
|
33
|
-
|
|
34
|
-
const permutations = possiblePropValues?.map((value: PropDeclaration) => {
|
|
35
|
-
const newValues = {...values}; // Required so we don't overwrite previous references
|
|
36
|
-
newValues[prop] = value;
|
|
37
|
-
|
|
38
|
-
return permutateProps(
|
|
39
|
-
allProps,
|
|
40
|
-
filter,
|
|
41
|
-
remainingProps!.slice(1, remainingProps!.length),
|
|
42
|
-
newValues
|
|
43
|
-
);
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
return (permutations as any).flat();
|
|
47
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export type PropDeclaration = {
|
|
2
|
-
value: any;
|
|
3
|
-
label: string;
|
|
4
|
-
};
|
|
5
|
-
|
|
6
|
-
export type PropsDeclaration = {[key: string]: PropDeclaration[]};
|
|
7
|
-
|
|
8
|
-
export type Props = {
|
|
9
|
-
[key: string]: any;
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
export type PropCombination = {
|
|
13
|
-
label: string;
|
|
14
|
-
props: Props;
|
|
15
|
-
};
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { PropCombination, Props } from './propTypes';
|
|
3
|
-
/**
|
|
4
|
-
* A helper to generate a table of all possible states for component visual testing.
|
|
5
|
-
*/
|
|
6
|
-
export interface ComponentStatesTableProps {
|
|
7
|
-
/**
|
|
8
|
-
* The props that will be passed to the component when it is rendered and the corresponding
|
|
9
|
-
* row label for that permutation. It is encouraged to use the result of permutateProps()
|
|
10
|
-
* rather than passing in a list so we don't miss any combinations.
|
|
11
|
-
*/
|
|
12
|
-
rowProps: PropCombination[];
|
|
13
|
-
/**
|
|
14
|
-
* The props that will be passed to the component when it is rendered and the corresponding
|
|
15
|
-
* column label for that permutation. It is encouraged to use the result of permutateProps()
|
|
16
|
-
* rather than passing in a list so we don't miss any combinations.
|
|
17
|
-
*/
|
|
18
|
-
columnProps: PropCombination[];
|
|
19
|
-
/**
|
|
20
|
-
* The render function called to render the component in each cell of the table. This gives you
|
|
21
|
-
* the ability to add extra styling or markup (a blue background for an inverse variant, for example).
|
|
22
|
-
*/
|
|
23
|
-
children(props: Props): React.ReactNode;
|
|
24
|
-
}
|
|
25
|
-
export declare const ComponentStatesTable: ({ rowProps, columnProps, children, }: ComponentStatesTableProps) => JSX.Element;
|
|
26
|
-
//# sourceMappingURL=ComponentStatesTable.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ComponentStatesTable.d.ts","sourceRoot":"","sources":["../../../../../common/lib/storybook-utils/ComponentStatesTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,eAAe,EAAE,KAAK,EAAC,MAAM,aAAa,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B;;;;OAIG;IACH,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC;CACzC;AAgBD,eAAO,MAAM,oBAAoB,yCAI9B,yBAAyB,gBAkC3B,CAAC"}
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.ComponentStatesTable = void 0;
|
|
18
|
-
var react_1 = __importDefault(require("react"));
|
|
19
|
-
var common_1 = require("@workday/canvas-kit-react/common");
|
|
20
|
-
var Table = common_1.styled('table')({
|
|
21
|
-
width: '100%',
|
|
22
|
-
thead: {
|
|
23
|
-
textAlign: 'left',
|
|
24
|
-
paddingBottom: 16,
|
|
25
|
-
},
|
|
26
|
-
'td, th': {
|
|
27
|
-
minWidth: 100,
|
|
28
|
-
paddingBottom: 16,
|
|
29
|
-
paddingRight: 16,
|
|
30
|
-
textAlign: 'left',
|
|
31
|
-
},
|
|
32
|
-
});
|
|
33
|
-
var ComponentStatesTable = function (_a) {
|
|
34
|
-
var rowProps = _a.rowProps, columnProps = _a.columnProps, children = _a.children;
|
|
35
|
-
return (react_1.default.createElement(Table, null,
|
|
36
|
-
react_1.default.createElement("thead", null,
|
|
37
|
-
react_1.default.createElement("tr", null,
|
|
38
|
-
react_1.default.createElement("th", null, "Variants"),
|
|
39
|
-
columnProps.map(function (col) { return (react_1.default.createElement("th", { key: "component-table-heading-" + col.label.toLowerCase().replace(' ', ',') }, col.label)); }))),
|
|
40
|
-
react_1.default.createElement("tbody", null, rowProps.map(function (row) {
|
|
41
|
-
return (react_1.default.createElement("tr", { key: row.label.toLowerCase().replace(' ', '-') },
|
|
42
|
-
react_1.default.createElement("td", null, row.label),
|
|
43
|
-
columnProps.map(function (col) {
|
|
44
|
-
return (react_1.default.createElement("td", { key: col.label.toLowerCase().replace(' ', '-') }, children(__assign(__assign({}, row.props), col.props))));
|
|
45
|
-
})));
|
|
46
|
-
}))));
|
|
47
|
-
};
|
|
48
|
-
exports.ComponentStatesTable = ComponentStatesTable;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { PropCombination, PropDeclaration, Props, PropsDeclaration } from './propTypes';
|
|
2
|
-
export declare const permutateProps: (allProps: PropsDeclaration, filter?: ((props: Props) => boolean) | undefined, remainingProps?: string[], values?: {
|
|
3
|
-
[key: string]: PropDeclaration;
|
|
4
|
-
}) => PropCombination[];
|
|
5
|
-
//# sourceMappingURL=permutateProps.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"permutateProps.d.ts","sourceRoot":"","sources":["../../../../../common/lib/storybook-utils/permutateProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAE,eAAe,EAAE,KAAK,EAAE,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAEtF,eAAO,MAAM,cAAc,aACf,gBAAgB,oBACT,KAAK,KAAK,OAAO,gCAClB,MAAM,EAAE;;MAEvB,eAAe,EAuCjB,CAAC"}
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
-
exports.permutateProps = void 0;
|
|
15
|
-
var permutateProps = function (allProps, filter, remainingProps, values) {
|
|
16
|
-
if (remainingProps === void 0) { remainingProps = Object.keys(allProps); }
|
|
17
|
-
if (values === void 0) { values = {}; }
|
|
18
|
-
// When there are no more props to combine with, return result
|
|
19
|
-
var prop = remainingProps[0];
|
|
20
|
-
if (!prop) {
|
|
21
|
-
var props_1 = {};
|
|
22
|
-
Object.keys(values).forEach(function (prop) {
|
|
23
|
-
var _a;
|
|
24
|
-
props_1[prop] = (_a = values === null || values === void 0 ? void 0 : values[prop]) === null || _a === void 0 ? void 0 : _a.value;
|
|
25
|
-
});
|
|
26
|
-
if (filter && !filter(props_1)) {
|
|
27
|
-
return [];
|
|
28
|
-
}
|
|
29
|
-
var label = Object.keys(values)
|
|
30
|
-
.map(function (prop) { var _a; return (_a = values === null || values === void 0 ? void 0 : values[prop]) === null || _a === void 0 ? void 0 : _a.label; })
|
|
31
|
-
.join(' ');
|
|
32
|
-
return [
|
|
33
|
-
{
|
|
34
|
-
label: label,
|
|
35
|
-
props: props_1,
|
|
36
|
-
},
|
|
37
|
-
];
|
|
38
|
-
}
|
|
39
|
-
var possiblePropValues = allProps[prop];
|
|
40
|
-
var permutations = possiblePropValues === null || possiblePropValues === void 0 ? void 0 : possiblePropValues.map(function (value) {
|
|
41
|
-
var newValues = __assign({}, values); // Required so we don't overwrite previous references
|
|
42
|
-
newValues[prop] = value;
|
|
43
|
-
return exports.permutateProps(allProps, filter, remainingProps.slice(1, remainingProps.length), newValues);
|
|
44
|
-
});
|
|
45
|
-
return permutations.flat();
|
|
46
|
-
};
|
|
47
|
-
exports.permutateProps = permutateProps;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare type PropDeclaration = {
|
|
2
|
-
value: any;
|
|
3
|
-
label: string;
|
|
4
|
-
};
|
|
5
|
-
export declare type PropsDeclaration = {
|
|
6
|
-
[key: string]: PropDeclaration[];
|
|
7
|
-
};
|
|
8
|
-
export declare type Props = {
|
|
9
|
-
[key: string]: any;
|
|
10
|
-
};
|
|
11
|
-
export declare type PropCombination = {
|
|
12
|
-
label: string;
|
|
13
|
-
props: Props;
|
|
14
|
-
};
|
|
15
|
-
//# sourceMappingURL=propTypes.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"propTypes.d.ts","sourceRoot":"","sources":["../../../../../common/lib/storybook-utils/propTypes.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe,GAAG;IAC5B,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,eAAe,EAAE,CAAA;CAAC,CAAC;AAElE,oBAAY,KAAK,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC;CACd,CAAC"}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { PropCombination, Props } from './propTypes';
|
|
3
|
-
/**
|
|
4
|
-
* A helper to generate a table of all possible states for component visual testing.
|
|
5
|
-
*/
|
|
6
|
-
export interface ComponentStatesTableProps {
|
|
7
|
-
/**
|
|
8
|
-
* The props that will be passed to the component when it is rendered and the corresponding
|
|
9
|
-
* row label for that permutation. It is encouraged to use the result of permutateProps()
|
|
10
|
-
* rather than passing in a list so we don't miss any combinations.
|
|
11
|
-
*/
|
|
12
|
-
rowProps: PropCombination[];
|
|
13
|
-
/**
|
|
14
|
-
* The props that will be passed to the component when it is rendered and the corresponding
|
|
15
|
-
* column label for that permutation. It is encouraged to use the result of permutateProps()
|
|
16
|
-
* rather than passing in a list so we don't miss any combinations.
|
|
17
|
-
*/
|
|
18
|
-
columnProps: PropCombination[];
|
|
19
|
-
/**
|
|
20
|
-
* The render function called to render the component in each cell of the table. This gives you
|
|
21
|
-
* the ability to add extra styling or markup (a blue background for an inverse variant, for example).
|
|
22
|
-
*/
|
|
23
|
-
children(props: Props): React.ReactNode;
|
|
24
|
-
}
|
|
25
|
-
export declare const ComponentStatesTable: ({ rowProps, columnProps, children, }: ComponentStatesTableProps) => JSX.Element;
|
|
26
|
-
//# sourceMappingURL=ComponentStatesTable.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ComponentStatesTable.d.ts","sourceRoot":"","sources":["../../../../../common/lib/storybook-utils/ComponentStatesTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,eAAe,EAAE,KAAK,EAAC,MAAM,aAAa,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B;;;;OAIG;IACH,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC;CACzC;AAgBD,eAAO,MAAM,oBAAoB,yCAI9B,yBAAyB,gBAkC3B,CAAC"}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
import React from 'react';
|
|
13
|
-
import { styled } from '@workday/canvas-kit-react/common';
|
|
14
|
-
var Table = styled('table')({
|
|
15
|
-
width: '100%',
|
|
16
|
-
thead: {
|
|
17
|
-
textAlign: 'left',
|
|
18
|
-
paddingBottom: 16,
|
|
19
|
-
},
|
|
20
|
-
'td, th': {
|
|
21
|
-
minWidth: 100,
|
|
22
|
-
paddingBottom: 16,
|
|
23
|
-
paddingRight: 16,
|
|
24
|
-
textAlign: 'left',
|
|
25
|
-
},
|
|
26
|
-
});
|
|
27
|
-
export var ComponentStatesTable = function (_a) {
|
|
28
|
-
var rowProps = _a.rowProps, columnProps = _a.columnProps, children = _a.children;
|
|
29
|
-
return (React.createElement(Table, null,
|
|
30
|
-
React.createElement("thead", null,
|
|
31
|
-
React.createElement("tr", null,
|
|
32
|
-
React.createElement("th", null, "Variants"),
|
|
33
|
-
columnProps.map(function (col) { return (React.createElement("th", { key: "component-table-heading-" + col.label.toLowerCase().replace(' ', ',') }, col.label)); }))),
|
|
34
|
-
React.createElement("tbody", null, rowProps.map(function (row) {
|
|
35
|
-
return (React.createElement("tr", { key: row.label.toLowerCase().replace(' ', '-') },
|
|
36
|
-
React.createElement("td", null, row.label),
|
|
37
|
-
columnProps.map(function (col) {
|
|
38
|
-
return (React.createElement("td", { key: col.label.toLowerCase().replace(' ', '-') }, children(__assign(__assign({}, row.props), col.props))));
|
|
39
|
-
})));
|
|
40
|
-
}))));
|
|
41
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { PropCombination, PropDeclaration, Props, PropsDeclaration } from './propTypes';
|
|
2
|
-
export declare const permutateProps: (allProps: PropsDeclaration, filter?: ((props: Props) => boolean) | undefined, remainingProps?: string[], values?: {
|
|
3
|
-
[key: string]: PropDeclaration;
|
|
4
|
-
}) => PropCombination[];
|
|
5
|
-
//# sourceMappingURL=permutateProps.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"permutateProps.d.ts","sourceRoot":"","sources":["../../../../../common/lib/storybook-utils/permutateProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAE,eAAe,EAAE,KAAK,EAAE,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAEtF,eAAO,MAAM,cAAc,aACf,gBAAgB,oBACT,KAAK,KAAK,OAAO,gCAClB,MAAM,EAAE;;MAEvB,eAAe,EAuCjB,CAAC"}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
export var permutateProps = function (allProps, filter, remainingProps, values) {
|
|
13
|
-
if (remainingProps === void 0) { remainingProps = Object.keys(allProps); }
|
|
14
|
-
if (values === void 0) { values = {}; }
|
|
15
|
-
// When there are no more props to combine with, return result
|
|
16
|
-
var prop = remainingProps[0];
|
|
17
|
-
if (!prop) {
|
|
18
|
-
var props_1 = {};
|
|
19
|
-
Object.keys(values).forEach(function (prop) {
|
|
20
|
-
var _a;
|
|
21
|
-
props_1[prop] = (_a = values === null || values === void 0 ? void 0 : values[prop]) === null || _a === void 0 ? void 0 : _a.value;
|
|
22
|
-
});
|
|
23
|
-
if (filter && !filter(props_1)) {
|
|
24
|
-
return [];
|
|
25
|
-
}
|
|
26
|
-
var label = Object.keys(values)
|
|
27
|
-
.map(function (prop) { var _a; return (_a = values === null || values === void 0 ? void 0 : values[prop]) === null || _a === void 0 ? void 0 : _a.label; })
|
|
28
|
-
.join(' ');
|
|
29
|
-
return [
|
|
30
|
-
{
|
|
31
|
-
label: label,
|
|
32
|
-
props: props_1,
|
|
33
|
-
},
|
|
34
|
-
];
|
|
35
|
-
}
|
|
36
|
-
var possiblePropValues = allProps[prop];
|
|
37
|
-
var permutations = possiblePropValues === null || possiblePropValues === void 0 ? void 0 : possiblePropValues.map(function (value) {
|
|
38
|
-
var newValues = __assign({}, values); // Required so we don't overwrite previous references
|
|
39
|
-
newValues[prop] = value;
|
|
40
|
-
return permutateProps(allProps, filter, remainingProps.slice(1, remainingProps.length), newValues);
|
|
41
|
-
});
|
|
42
|
-
return permutations.flat();
|
|
43
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export declare type PropDeclaration = {
|
|
2
|
-
value: any;
|
|
3
|
-
label: string;
|
|
4
|
-
};
|
|
5
|
-
export declare type PropsDeclaration = {
|
|
6
|
-
[key: string]: PropDeclaration[];
|
|
7
|
-
};
|
|
8
|
-
export declare type Props = {
|
|
9
|
-
[key: string]: any;
|
|
10
|
-
};
|
|
11
|
-
export declare type PropCombination = {
|
|
12
|
-
label: string;
|
|
13
|
-
props: Props;
|
|
14
|
-
};
|
|
15
|
-
//# sourceMappingURL=propTypes.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"propTypes.d.ts","sourceRoot":"","sources":["../../../../../common/lib/storybook-utils/propTypes.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe,GAAG;IAC5B,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,eAAe,EAAE,CAAA;CAAC,CAAC;AAElE,oBAAY,KAAK,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC;CACd,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|