@react-spectrum/codemods 0.5.2 → 0.6.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/dist/index.js +0 -0
- package/dist/s1-to-s2/src/codemods/codemod.js +33 -25
- package/dist/s1-to-s2/src/codemods/components/ActionGroup/transform.js +164 -0
- package/dist/s1-to-s2/src/codemods/components/ActionMenu/transform.js +15 -0
- package/dist/s1-to-s2/src/codemods/components/Avatar/transform.js +77 -0
- package/dist/s1-to-s2/src/codemods/components/Badge/transform.js +17 -0
- package/dist/s1-to-s2/src/codemods/components/Breadcrumbs/transform.js +26 -0
- package/dist/s1-to-s2/src/codemods/components/Button/transform.js +45 -0
- package/dist/s1-to-s2/src/codemods/components/CheckboxGroup/transform.js +12 -0
- package/dist/s1-to-s2/src/codemods/components/ColorField/transform.js +26 -0
- package/dist/s1-to-s2/src/codemods/components/ColorSlider/transform.js +12 -0
- package/dist/s1-to-s2/src/codemods/components/Column/transform.js +12 -0
- package/dist/s1-to-s2/src/codemods/components/ComboBox/transform.js +29 -0
- package/dist/s1-to-s2/src/codemods/components/ContextualHelp/transform.js +15 -0
- package/dist/s1-to-s2/src/codemods/components/DialogContainer/transform.js +16 -0
- package/dist/s1-to-s2/src/codemods/components/DialogTrigger/transform.js +111 -0
- package/dist/s1-to-s2/src/codemods/components/Divider/transform.js +12 -0
- package/dist/s1-to-s2/src/codemods/components/Form/transform.js +21 -0
- package/dist/s1-to-s2/src/codemods/components/InlineAlert/transform.js +17 -0
- package/dist/s1-to-s2/src/codemods/components/Item/transform.js +25 -0
- package/dist/s1-to-s2/src/codemods/components/Link/transform.js +76 -0
- package/dist/s1-to-s2/src/codemods/components/NumberField/transform.js +23 -0
- package/dist/s1-to-s2/src/codemods/components/Picker/transform.js +33 -0
- package/dist/s1-to-s2/src/codemods/components/ProgressBar/transform.js +23 -0
- package/dist/s1-to-s2/src/codemods/components/ProgressCircle/transform.js +17 -0
- package/dist/s1-to-s2/src/codemods/components/RadioGroup/transform.js +23 -0
- package/dist/s1-to-s2/src/codemods/components/RangeSlider/transform.js +18 -0
- package/dist/s1-to-s2/src/codemods/components/Row/transform.js +111 -0
- package/dist/s1-to-s2/src/codemods/components/SearchField/transform.js +29 -0
- package/dist/s1-to-s2/src/codemods/components/Section/transform.js +37 -0
- package/dist/s1-to-s2/src/codemods/components/Slider/transform.js +24 -0
- package/dist/s1-to-s2/src/codemods/components/StatusLight/transform.js +20 -0
- package/dist/s1-to-s2/src/codemods/components/TableView/transform.js +189 -0
- package/dist/s1-to-s2/src/codemods/components/Tabs/transform.js +116 -0
- package/dist/s1-to-s2/src/codemods/components/TagGroup/transform.js +27 -0
- package/dist/s1-to-s2/src/codemods/components/TextArea/transform.js +29 -0
- package/dist/s1-to-s2/src/codemods/components/TextField/transform.js +29 -0
- package/dist/s1-to-s2/src/codemods/components/Tooltip/transform.js +29 -0
- package/dist/s1-to-s2/src/codemods/components/TooltipTrigger/transform.js +15 -0
- package/dist/s1-to-s2/src/codemods/{styleProps.js → shared/styleProps.js} +22 -9
- package/dist/s1-to-s2/src/codemods/shared/transforms.js +608 -0
- package/dist/s1-to-s2/src/codemods/{unsafeStyle.js → shared/unsafeStyle.js} +1 -1
- package/dist/s1-to-s2/src/codemods/{utils.js → shared/utils.js} +26 -16
- package/package.json +6 -6
- package/dist/s1-to-s2/src/codemods/button.js +0 -52
- package/dist/s1-to-s2/src/codemods/changes.js +0 -1260
- package/dist/s1-to-s2/src/codemods/dialog.js +0 -63
- package/dist/s1-to-s2/src/codemods/transforms.js +0 -1043
- /package/dist/s1-to-s2/src/{iconMap.js → codemods/icons/iconMap.js} +0 -0
- /package/dist/s1-to-s2/src/codemods/{colors.js → shared/colors.js} +0 -0
- /package/dist/s1-to-s2/src/codemods/{dimensions.js → shared/dimensions.js} +0 -0
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.updateDialogChild = updateDialogChild;
|
|
37
|
+
exports.default = transformDialogTrigger;
|
|
38
|
+
const utils_1 = require("../../shared/utils");
|
|
39
|
+
const transforms_1 = require("../../shared/transforms");
|
|
40
|
+
const getComponents_1 = require("../../../getComponents");
|
|
41
|
+
const t = __importStar(require("@babel/types"));
|
|
42
|
+
let availableComponents = (0, getComponents_1.getComponents)();
|
|
43
|
+
/**
|
|
44
|
+
* Updates DialogTrigger and DialogContainer to the new API.
|
|
45
|
+
*
|
|
46
|
+
* Example:
|
|
47
|
+
* - When `type="popover"`, replaces Dialog with `<Popover>`.
|
|
48
|
+
* - When `type="fullscreen"`, replaces Dialog with `<FullscreenDialog>`.
|
|
49
|
+
* - When `type="fullscreenTakeover"`, replaces Dialog with `<FullscreenDialog variant="fullscreenTakeover">`.
|
|
50
|
+
*/
|
|
51
|
+
function updateDialogChild(path) {
|
|
52
|
+
let typePath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'type');
|
|
53
|
+
let type = typePath?.node.value?.type === 'StringLiteral' ? typePath.node.value?.value : 'modal';
|
|
54
|
+
let newComponentName = 'Dialog';
|
|
55
|
+
let props = [];
|
|
56
|
+
if (type === 'popover') {
|
|
57
|
+
newComponentName = 'Popover';
|
|
58
|
+
}
|
|
59
|
+
else if (type === 'fullscreen' || type === 'fullscreenTakeover') {
|
|
60
|
+
newComponentName = 'FullscreenDialog';
|
|
61
|
+
if (type === 'fullscreenTakeover') {
|
|
62
|
+
props.push(t.jsxAttribute(t.jsxIdentifier('variant'), t.stringLiteral(type)));
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
for (let prop of ['isDismissible', 'mobileType', 'hideArrow', 'placement', 'shouldFlip', 'isKeyboardDismissDisabled', 'containerPadding', 'offset', 'crossOffset']) {
|
|
66
|
+
let attr = path.get('openingElement').get('attributes').find(attr => attr.isJSXAttribute() && attr.node.name.name === prop);
|
|
67
|
+
if (attr) {
|
|
68
|
+
props.push(attr.node);
|
|
69
|
+
attr.remove();
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
typePath?.remove();
|
|
73
|
+
let localName = newComponentName;
|
|
74
|
+
if (newComponentName !== 'Dialog' && availableComponents.has(newComponentName)) {
|
|
75
|
+
let program = path.findParent((p) => t.isProgram(p.node));
|
|
76
|
+
localName = (0, utils_1.addComponentImport)(program, newComponentName);
|
|
77
|
+
}
|
|
78
|
+
path.traverse({
|
|
79
|
+
JSXElement(dialog) {
|
|
80
|
+
if (!t.isJSXIdentifier(dialog.node.openingElement.name) || (0, utils_1.getName)(dialog, dialog.node.openingElement.name) !== 'Dialog') {
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
dialog.node.openingElement.name = t.jsxIdentifier(localName);
|
|
84
|
+
if (dialog.node.closingElement) {
|
|
85
|
+
dialog.node.closingElement.name = t.jsxIdentifier(localName);
|
|
86
|
+
}
|
|
87
|
+
dialog.node.openingElement.attributes.push(...props);
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
/**
|
|
92
|
+
* Transforms DialogTrigger:
|
|
93
|
+
* - Comment out type="tray" (it has not been implemented yet).
|
|
94
|
+
* - Comment out mobileType (it has not been implemented yet).
|
|
95
|
+
* - Remove targetRef (it is no longer supported).
|
|
96
|
+
* - Move render props to the child component (updated API).
|
|
97
|
+
*/
|
|
98
|
+
function transformDialogTrigger(path) {
|
|
99
|
+
// Comment out type="tray"
|
|
100
|
+
(0, transforms_1.commentOutProp)(path, { propName: 'type', propValue: 'tray' });
|
|
101
|
+
// Comment out mobileType
|
|
102
|
+
(0, transforms_1.commentOutProp)(path, { propName: 'mobileType' });
|
|
103
|
+
// Remove targetRef
|
|
104
|
+
(0, transforms_1.removeProp)(path, { propName: 'targetRef' });
|
|
105
|
+
// Move render props to the child component
|
|
106
|
+
(0, transforms_1.moveRenderPropsToChild)(path, { newChildComponentName: 'Dialog' });
|
|
107
|
+
// Update isDismissable to isDismissible
|
|
108
|
+
(0, transforms_1.updatePropName)(path, { oldPropName: 'isDismissable', newPropName: 'isDismissible' });
|
|
109
|
+
// Update DialogTrigger to the new API
|
|
110
|
+
updateDialogChild(path);
|
|
111
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = transformDivider;
|
|
4
|
+
const transforms_1 = require("../../shared/transforms");
|
|
5
|
+
/**
|
|
6
|
+
* Transforms Divider:
|
|
7
|
+
* - Remove Divider component if within a Dialog (Updated design for Dialog in Spectrum 2).
|
|
8
|
+
*/
|
|
9
|
+
function transformDivider(path) {
|
|
10
|
+
// Remove Divider component if within a Dialog
|
|
11
|
+
(0, transforms_1.removeComponentIfWithinParent)(path, { parentComponentName: 'Dialog' });
|
|
12
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = transformForm;
|
|
4
|
+
const transforms_1 = require("../../shared/transforms");
|
|
5
|
+
/**
|
|
6
|
+
* Transforms Form:
|
|
7
|
+
* - Remove isQuiet (it is no longer supported in Spectrum 2).
|
|
8
|
+
* - Remove isReadOnly (it is no longer supported in Spectrum 2).
|
|
9
|
+
* - Remove validationState (it is no longer supported in Spectrum 2).
|
|
10
|
+
* - Remove validationBehavior (it is no longer supported in Spectrum 2).
|
|
11
|
+
*/
|
|
12
|
+
function transformForm(path) {
|
|
13
|
+
// Remove isQuiet
|
|
14
|
+
(0, transforms_1.removeProp)(path, { propName: 'isQuiet' });
|
|
15
|
+
// Remove isReadOnly
|
|
16
|
+
(0, transforms_1.removeProp)(path, { propName: 'isReadOnly' });
|
|
17
|
+
// Remove validationState
|
|
18
|
+
(0, transforms_1.removeProp)(path, { propName: 'validationState' });
|
|
19
|
+
// Remove validationBehavior
|
|
20
|
+
(0, transforms_1.removeProp)(path, { propName: 'validationBehavior' });
|
|
21
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = transformInlineAlert;
|
|
4
|
+
const transforms_1 = require("../../shared/transforms");
|
|
5
|
+
/**
|
|
6
|
+
* Transforms InlineAlert:
|
|
7
|
+
* - Change variant="info" to variant="informative".
|
|
8
|
+
*/
|
|
9
|
+
function transformInlineAlert(path) {
|
|
10
|
+
// Change variant="info" to variant="informative"
|
|
11
|
+
(0, transforms_1.updatePropNameAndValue)(path, {
|
|
12
|
+
oldPropName: 'variant',
|
|
13
|
+
oldPropValue: 'info',
|
|
14
|
+
newPropName: 'variant',
|
|
15
|
+
newPropValue: 'informative'
|
|
16
|
+
});
|
|
17
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = transformItem;
|
|
4
|
+
const transforms_1 = require("../../shared/transforms");
|
|
5
|
+
/**
|
|
6
|
+
* Transforms Item:
|
|
7
|
+
* - If within Menu: Update Item to be a MenuItem.
|
|
8
|
+
* - If within ActionMenu: Update Item to be a MenuItem.
|
|
9
|
+
* - If within TagGroup: Update Item to be a Tag.
|
|
10
|
+
* - If within Breadcrumbs: Update Item to be a Breadcrumb.
|
|
11
|
+
* - If within Picker: Update Item to be a PickerItem.
|
|
12
|
+
* - If within ComboBox: Update Item to be a ComboBoxItem.
|
|
13
|
+
* - Update key to id (and keep key if rendered inside array.map).
|
|
14
|
+
*/
|
|
15
|
+
function transformItem(path) {
|
|
16
|
+
// Update Items based on parent collection component
|
|
17
|
+
(0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'Menu', newComponentName: 'MenuItem' });
|
|
18
|
+
(0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'ActionMenu', newComponentName: 'MenuItem' });
|
|
19
|
+
(0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'TagGroup', newComponentName: 'Tag' });
|
|
20
|
+
(0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'Breadcrumbs', newComponentName: 'Breadcrumb' });
|
|
21
|
+
(0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'Picker', newComponentName: 'PickerItem' });
|
|
22
|
+
(0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'ComboBox', newComponentName: 'ComboBoxItem' });
|
|
23
|
+
// Comment if parent collection not detected
|
|
24
|
+
(0, transforms_1.commentIfParentCollectionNotDetected)(path);
|
|
25
|
+
}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.default = transformLink;
|
|
37
|
+
const utils_1 = require("../../shared/utils");
|
|
38
|
+
const t = __importStar(require("@babel/types"));
|
|
39
|
+
const transforms_1 = require("../../shared/transforms");
|
|
40
|
+
/**
|
|
41
|
+
* If <a> was used inside Link (legacy API), remove the <a> and apply props directly to Link.
|
|
42
|
+
*/
|
|
43
|
+
function updateLegacyLink(path) {
|
|
44
|
+
let missingOuterHref = t.isJSXElement(path.node) && !path.node.openingElement.attributes.some((attr) => t.isJSXAttribute(attr) && attr.name.name === 'href');
|
|
45
|
+
if (missingOuterHref) {
|
|
46
|
+
let innerLink = path.node.children.find((child) => t.isJSXElement(child) && t.isJSXIdentifier(child.openingElement.name));
|
|
47
|
+
if (innerLink && t.isJSXElement(innerLink)) {
|
|
48
|
+
let innerAttributes = innerLink.openingElement.attributes;
|
|
49
|
+
let outerAttributes = path.node.openingElement.attributes;
|
|
50
|
+
innerAttributes.forEach((attr) => {
|
|
51
|
+
outerAttributes.push(attr);
|
|
52
|
+
});
|
|
53
|
+
if (t.isJSXIdentifier(innerLink.openingElement.name) &&
|
|
54
|
+
innerLink.openingElement.name.name !== 'a') {
|
|
55
|
+
(0, utils_1.addComment)(path.node, ' TODO(S2-upgrade): You may have been using a custom link component here. You\'ll need to update this manually.');
|
|
56
|
+
}
|
|
57
|
+
path.node.children = innerLink.children;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
/**
|
|
62
|
+
* Transforms Link:
|
|
63
|
+
* - Change variant="overBackground" to staticColor="white".
|
|
64
|
+
* - If <a> was used inside Link (legacy API), remove the <a> and apply props directly to Link.
|
|
65
|
+
*/
|
|
66
|
+
function transformLink(path) {
|
|
67
|
+
// Change variant="overBackground" to staticColor="white"
|
|
68
|
+
(0, transforms_1.updatePropNameAndValue)(path, {
|
|
69
|
+
oldPropName: 'variant',
|
|
70
|
+
oldPropValue: 'overBackground',
|
|
71
|
+
newPropName: 'staticColor',
|
|
72
|
+
newPropValue: 'white'
|
|
73
|
+
});
|
|
74
|
+
// Update legacy Link
|
|
75
|
+
updateLegacyLink(path);
|
|
76
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = transformNumberField;
|
|
4
|
+
const transforms_1 = require("../../shared/transforms");
|
|
5
|
+
/**
|
|
6
|
+
* Transforms NumberField:
|
|
7
|
+
* - Remove isQuiet (it is no longer supported in Spectrum 2).
|
|
8
|
+
* - Change validationState="invalid" to isInvalid.
|
|
9
|
+
* - Remove validationState="valid" (it is no longer supported in Spectrum 2).
|
|
10
|
+
*/
|
|
11
|
+
function transformNumberField(path) {
|
|
12
|
+
// Remove isQuiet
|
|
13
|
+
(0, transforms_1.removeProp)(path, { propName: 'isQuiet' });
|
|
14
|
+
// Change validationState="invalid" to isInvalid
|
|
15
|
+
(0, transforms_1.updatePropNameAndValue)(path, {
|
|
16
|
+
oldPropName: 'validationState',
|
|
17
|
+
oldPropValue: 'invalid',
|
|
18
|
+
newPropName: 'isInvalid',
|
|
19
|
+
newPropValue: true
|
|
20
|
+
});
|
|
21
|
+
// Remove validationState="valid"
|
|
22
|
+
(0, transforms_1.removeProp)(path, { propName: 'validationState', propValue: 'valid' });
|
|
23
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = transformPicker;
|
|
4
|
+
const transforms_1 = require("../../shared/transforms");
|
|
5
|
+
/**
|
|
6
|
+
* Transforms Picker:
|
|
7
|
+
* - Change menuWidth value from a DimensionValue to a pixel value.
|
|
8
|
+
* - Remove isQuiet (it is no longer supported in Spectrum 2).
|
|
9
|
+
* - Change validationState="invalid" to isInvalid.
|
|
10
|
+
* - Remove validationState="valid" (it is no longer supported in Spectrum 2).
|
|
11
|
+
* - Replace isLoading with loadingState.
|
|
12
|
+
*/
|
|
13
|
+
function transformPicker(path) {
|
|
14
|
+
// Change menuWidth value from a DimensionValue to a pixel value
|
|
15
|
+
(0, transforms_1.convertDimensionValueToPx)(path, { propName: 'menuWidth' });
|
|
16
|
+
// Remove isQuiet
|
|
17
|
+
(0, transforms_1.removeProp)(path, { propName: 'isQuiet' });
|
|
18
|
+
// Change validationState="invalid" to isInvalid
|
|
19
|
+
(0, transforms_1.updatePropNameAndValue)(path, {
|
|
20
|
+
oldPropName: 'validationState',
|
|
21
|
+
oldPropValue: 'invalid',
|
|
22
|
+
newPropName: 'isInvalid',
|
|
23
|
+
newPropValue: true
|
|
24
|
+
});
|
|
25
|
+
// Remove validationState="valid"
|
|
26
|
+
(0, transforms_1.removeProp)(path, { propName: 'validationState', propValue: 'valid' });
|
|
27
|
+
// Replace isLoading with loadingState
|
|
28
|
+
(0, transforms_1.updatePropName)(path, {
|
|
29
|
+
oldPropName: 'isLoading',
|
|
30
|
+
newPropName: 'loadingState',
|
|
31
|
+
comment: 'Replace boolean passed to isLoading with appropriate loadingState.'
|
|
32
|
+
});
|
|
33
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = transformProgressBar;
|
|
4
|
+
const transforms_1 = require("../../shared/transforms");
|
|
5
|
+
/**
|
|
6
|
+
* Transforms ProgressBar:
|
|
7
|
+
* - Change variant="overBackground" to staticColor="white".
|
|
8
|
+
* - Comment out labelPosition (it has not been implemented yet).
|
|
9
|
+
* - Comment out showValueLabel (it has not been implemented yet).
|
|
10
|
+
*/
|
|
11
|
+
function transformProgressBar(path) {
|
|
12
|
+
// Change variant="overBackground" to staticColor="white"
|
|
13
|
+
(0, transforms_1.updatePropNameAndValue)(path, {
|
|
14
|
+
oldPropName: 'variant',
|
|
15
|
+
oldPropValue: 'overBackground',
|
|
16
|
+
newPropName: 'staticColor',
|
|
17
|
+
newPropValue: 'white'
|
|
18
|
+
});
|
|
19
|
+
// Comment out labelPosition
|
|
20
|
+
(0, transforms_1.commentOutProp)(path, { propName: 'labelPosition' });
|
|
21
|
+
// Comment out showValueLabel
|
|
22
|
+
(0, transforms_1.removeProp)(path, { propName: 'showValueLabel' });
|
|
23
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = transformProgressCircle;
|
|
4
|
+
const transforms_1 = require("../../shared/transforms");
|
|
5
|
+
/**
|
|
6
|
+
* Transforms ProgressCircle:
|
|
7
|
+
* - Change variant="overBackground" to staticColor="white".
|
|
8
|
+
*/
|
|
9
|
+
function transformProgressCircle(path) {
|
|
10
|
+
// Change variant="overBackground" to staticColor="white"
|
|
11
|
+
(0, transforms_1.updatePropNameAndValue)(path, {
|
|
12
|
+
oldPropName: 'variant',
|
|
13
|
+
oldPropValue: 'overBackground',
|
|
14
|
+
newPropName: 'staticColor',
|
|
15
|
+
newPropValue: 'white'
|
|
16
|
+
});
|
|
17
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = transformRadioGroup;
|
|
4
|
+
const transforms_1 = require("../../shared/transforms");
|
|
5
|
+
/**
|
|
6
|
+
* Transforms RadioGroup:
|
|
7
|
+
* - Change validationState="invalid" to isInvalid.
|
|
8
|
+
* - Remove validationState="valid" (it is no longer supported in Spectrum 2).
|
|
9
|
+
* - Remove showErrorIcon (it has been removed due to accessibility issues).
|
|
10
|
+
*/
|
|
11
|
+
function transformRadioGroup(path) {
|
|
12
|
+
// Change validationState="invalid" to isInvalid
|
|
13
|
+
(0, transforms_1.updatePropNameAndValue)(path, {
|
|
14
|
+
oldPropName: 'validationState',
|
|
15
|
+
oldPropValue: 'invalid',
|
|
16
|
+
newPropName: 'isInvalid',
|
|
17
|
+
newPropValue: true
|
|
18
|
+
});
|
|
19
|
+
// Remove validationState="valid"
|
|
20
|
+
(0, transforms_1.removeProp)(path, { propName: 'validationState', propValue: 'valid' });
|
|
21
|
+
// Remove showErrorIcon
|
|
22
|
+
(0, transforms_1.removeProp)(path, { propName: 'showErrorIcon' });
|
|
23
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = transformRangeSlider;
|
|
4
|
+
const transforms_1 = require("../../shared/transforms");
|
|
5
|
+
/**
|
|
6
|
+
* Transforms RangeSlider:
|
|
7
|
+
* - Remove showValueLabel (it has been removed due to accessibility issues).
|
|
8
|
+
* - Comment out getValueLabel (it has not been implemented yet).
|
|
9
|
+
* - Comment out orientation (it has not been implemented yet).
|
|
10
|
+
*/
|
|
11
|
+
function transformRangeSlider(path) {
|
|
12
|
+
// Remove showValueLabel
|
|
13
|
+
(0, transforms_1.removeProp)(path, { propName: 'showValueLabel' });
|
|
14
|
+
// Comment out getValueLabel
|
|
15
|
+
(0, transforms_1.commentOutProp)(path, { propName: 'getValueLabel' });
|
|
16
|
+
// Comment out orientation
|
|
17
|
+
(0, transforms_1.commentOutProp)(path, { propName: 'orientation' });
|
|
18
|
+
}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.default = transformRow;
|
|
37
|
+
const utils_1 = require("../../shared/utils");
|
|
38
|
+
const t = __importStar(require("@babel/types"));
|
|
39
|
+
const transforms_1 = require("../../shared/transforms");
|
|
40
|
+
/**
|
|
41
|
+
* Updates the function signature of the Row component.
|
|
42
|
+
*/
|
|
43
|
+
function updateRowFunctionArg(path) {
|
|
44
|
+
// Find the export function passed as a child
|
|
45
|
+
let functionChild = path.get('children').find(childPath => childPath.isJSXExpressionContainer() &&
|
|
46
|
+
childPath.get('expression').isArrowFunctionExpression());
|
|
47
|
+
let tablePath = path.findParent((p) => t.isJSXElement(p.node) &&
|
|
48
|
+
t.isJSXIdentifier(p.node.openingElement.name) &&
|
|
49
|
+
(0, utils_1.getName)(path, p.node.openingElement.name) === 'TableView');
|
|
50
|
+
let tableHeaderPath = tablePath?.get('children').find((child) => t.isJSXElement(child.node) &&
|
|
51
|
+
t.isJSXIdentifier(child.node.openingElement.name) &&
|
|
52
|
+
(0, utils_1.getName)(child, child.node.openingElement.name) === 'TableHeader');
|
|
53
|
+
function findColumnKeyProp(path) {
|
|
54
|
+
let columnKeyProp = 'id';
|
|
55
|
+
path.traverse({
|
|
56
|
+
JSXElement(columnPath) {
|
|
57
|
+
if (t.isArrowFunctionExpression(columnPath.parentPath.node) &&
|
|
58
|
+
t.isJSXElement(columnPath.node) &&
|
|
59
|
+
t.isJSXIdentifier(columnPath.node.openingElement.name) &&
|
|
60
|
+
(0, utils_1.getName)(columnPath, columnPath.node.openingElement.name) === 'Column') {
|
|
61
|
+
let openingElement = columnPath.get('openingElement');
|
|
62
|
+
let keyPropPath = openingElement.get('attributes').find(attr => t.isJSXAttribute(attr.node) &&
|
|
63
|
+
(attr.node.name.name === 'key' || attr.node.name.name === 'id'));
|
|
64
|
+
keyPropPath?.traverse({
|
|
65
|
+
Identifier(innerPath) {
|
|
66
|
+
if (innerPath.node.name === 'column' &&
|
|
67
|
+
innerPath.parentPath.node.type === 'MemberExpression' &&
|
|
68
|
+
t.isIdentifier(innerPath.parentPath.node.property)) {
|
|
69
|
+
columnKeyProp = innerPath.parentPath.node.property.name;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
return columnKeyProp || 'id';
|
|
77
|
+
}
|
|
78
|
+
let columnKey = findColumnKeyProp(tableHeaderPath);
|
|
79
|
+
if (functionChild && functionChild.isJSXExpressionContainer()) {
|
|
80
|
+
let arrowFuncPath = functionChild.get('expression');
|
|
81
|
+
if (arrowFuncPath.isArrowFunctionExpression()) {
|
|
82
|
+
let params = arrowFuncPath.node.params;
|
|
83
|
+
if (params.length === 1 && t.isIdentifier(params[0])) {
|
|
84
|
+
let paramName = params[0].name;
|
|
85
|
+
// Rename parameter to 'column'
|
|
86
|
+
params[0].name = 'column';
|
|
87
|
+
// Replace references to the old parameter name inside the export function body
|
|
88
|
+
arrowFuncPath.get('body').traverse({
|
|
89
|
+
Identifier(innerPath) {
|
|
90
|
+
if (innerPath.node.name === paramName &&
|
|
91
|
+
// Ensure we're not replacing the parameter declaration
|
|
92
|
+
innerPath.node !== params[0]) {
|
|
93
|
+
// Replace with column key
|
|
94
|
+
innerPath.replaceWith(t.memberExpression(t.identifier('column'), t.identifier(columnKey ?? 'id')));
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
/**
|
|
103
|
+
* Transforms Row:
|
|
104
|
+
* - Update key to id.
|
|
105
|
+
* - Update function signature.
|
|
106
|
+
*/
|
|
107
|
+
function transformRow(path) {
|
|
108
|
+
// Update key to id
|
|
109
|
+
(0, transforms_1.updateKeyToId)(path);
|
|
110
|
+
updateRowFunctionArg(path);
|
|
111
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = transformSearchField;
|
|
4
|
+
const transforms_1 = require("../../shared/transforms");
|
|
5
|
+
/**
|
|
6
|
+
* Transforms SearchField:
|
|
7
|
+
* - Remove placeholder (it has been removed due to accessibility issues).
|
|
8
|
+
* - Comment out icon (it has not been implemented yet).
|
|
9
|
+
* - Remove isQuiet (it is no longer supported in Spectrum 2).
|
|
10
|
+
* - Change validationState="invalid" to isInvalid.
|
|
11
|
+
* - Remove validationState="valid" (it is no longer supported in Spectrum 2).
|
|
12
|
+
*/
|
|
13
|
+
function transformSearchField(path) {
|
|
14
|
+
// Remove placeholder
|
|
15
|
+
(0, transforms_1.removeProp)(path, { propName: 'placeholder' });
|
|
16
|
+
// Comment out icon
|
|
17
|
+
(0, transforms_1.commentOutProp)(path, { propName: 'icon' });
|
|
18
|
+
// Remove isQuiet
|
|
19
|
+
(0, transforms_1.removeProp)(path, { propName: 'isQuiet' });
|
|
20
|
+
// Change validationState="invalid" to isInvalid
|
|
21
|
+
(0, transforms_1.updatePropNameAndValue)(path, {
|
|
22
|
+
oldPropName: 'validationState',
|
|
23
|
+
oldPropValue: 'invalid',
|
|
24
|
+
newPropName: 'isInvalid',
|
|
25
|
+
newPropValue: true
|
|
26
|
+
});
|
|
27
|
+
// Remove validationState="valid"
|
|
28
|
+
(0, transforms_1.removeProp)(path, { propName: 'validationState', propValue: 'valid' });
|
|
29
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = transformSection;
|
|
4
|
+
const transforms_1 = require("../../shared/transforms");
|
|
5
|
+
/**
|
|
6
|
+
* Transforms Section:
|
|
7
|
+
* - If within Menu: Update Section to be a MenuSection.
|
|
8
|
+
* - If within Picker: Update Section to be a PickerSection.
|
|
9
|
+
* - If within ComboBox: Update Section to be a ComboBoxSection.
|
|
10
|
+
*/
|
|
11
|
+
function transformSection(path) {
|
|
12
|
+
// Update Sections based on parent collection component
|
|
13
|
+
(0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'Menu', newComponentName: 'MenuSection' });
|
|
14
|
+
(0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'Picker', newComponentName: 'PickerSection' });
|
|
15
|
+
(0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'ComboBox', newComponentName: 'ComboBoxSection' });
|
|
16
|
+
// Move title prop to Header component
|
|
17
|
+
(0, transforms_1.movePropToNewChildComponentName)(path, {
|
|
18
|
+
parentComponentName: 'Menu',
|
|
19
|
+
childComponentName: 'MenuSection',
|
|
20
|
+
propName: 'title',
|
|
21
|
+
newChildComponentName: 'Header'
|
|
22
|
+
});
|
|
23
|
+
(0, transforms_1.movePropToNewChildComponentName)(path, {
|
|
24
|
+
parentComponentName: 'Picker',
|
|
25
|
+
childComponentName: 'PickerSection',
|
|
26
|
+
propName: 'title',
|
|
27
|
+
newChildComponentName: 'Header'
|
|
28
|
+
});
|
|
29
|
+
(0, transforms_1.movePropToNewChildComponentName)(path, {
|
|
30
|
+
parentComponentName: 'ComboBox',
|
|
31
|
+
childComponentName: 'ComboBoxSection',
|
|
32
|
+
propName: 'title',
|
|
33
|
+
newChildComponentName: 'Header'
|
|
34
|
+
});
|
|
35
|
+
// Comment if parent collection not detected
|
|
36
|
+
(0, transforms_1.commentIfParentCollectionNotDetected)(path);
|
|
37
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = transformSlider;
|
|
4
|
+
const transforms_1 = require("../../shared/transforms");
|
|
5
|
+
/**
|
|
6
|
+
* Transforms Slider:
|
|
7
|
+
* - Remove isFilled (Slider is always filled in Spectrum 2).
|
|
8
|
+
* - Remove trackGradient (Not supported in S2 design).
|
|
9
|
+
* - Remove showValueLabel (it has been removed due to accessibility issues).
|
|
10
|
+
* - Comment out getValueLabel (it has not been implemented yet).
|
|
11
|
+
* - Comment out orientation (it has not been implemented yet).
|
|
12
|
+
*/
|
|
13
|
+
function transformSlider(path) {
|
|
14
|
+
// Remove isFilled
|
|
15
|
+
(0, transforms_1.removeProp)(path, { propName: 'isFilled' });
|
|
16
|
+
// Remove trackGradient
|
|
17
|
+
(0, transforms_1.removeProp)(path, { propName: 'trackGradient' });
|
|
18
|
+
// Remove showValueLabel
|
|
19
|
+
(0, transforms_1.removeProp)(path, { propName: 'showValueLabel' });
|
|
20
|
+
// Comment out getValueLabel
|
|
21
|
+
(0, transforms_1.commentOutProp)(path, { propName: 'getValueLabel' });
|
|
22
|
+
// Comment out orientation
|
|
23
|
+
(0, transforms_1.commentOutProp)(path, { propName: 'orientation' });
|
|
24
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = transformStatusLight;
|
|
4
|
+
const transforms_1 = require("../../shared/transforms");
|
|
5
|
+
/**
|
|
6
|
+
* Transforms StatusLight:
|
|
7
|
+
* - Remove isDisabled (it is no longer supported in Spectrum 2).
|
|
8
|
+
* - Change variant="info" to variant="informative".
|
|
9
|
+
*/
|
|
10
|
+
function transformStatusLight(path) {
|
|
11
|
+
// Remove isDisabled
|
|
12
|
+
(0, transforms_1.removeProp)(path, { propName: 'isDisabled' });
|
|
13
|
+
// Change variant="info" to variant="informative"
|
|
14
|
+
(0, transforms_1.updatePropNameAndValue)(path, {
|
|
15
|
+
oldPropName: 'variant',
|
|
16
|
+
oldPropValue: 'info',
|
|
17
|
+
newPropName: 'variant',
|
|
18
|
+
newPropValue: 'informative'
|
|
19
|
+
});
|
|
20
|
+
}
|