@atlaskit/menu 2.14.1 → 2.14.3
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/CHANGELOG.md +14 -0
- package/package.json +10 -7
- package/codemods/0.7.0-change-css-fn-prop.tsx +0 -149
- package/codemods/2.1.0-invalid-link-item-to-button-item.tsx +0 -146
- package/codemods/__tests__/0.7.0-change-css-fn-prop.tsx +0 -360
- package/codemods/__tests__/next-invalid-link-item-to-button-item.tsx +0 -308
- package/codemods/helpers/generic.tsx +0 -637
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/menu
|
|
2
2
|
|
|
3
|
+
## 2.14.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#113256](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113256)
|
|
8
|
+
[`ae6561e3b5b1e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ae6561e3b5b1e) -
|
|
9
|
+
Update dependencies and remove old codemods.
|
|
10
|
+
|
|
11
|
+
## 2.14.2
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 2.14.1
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/menu",
|
|
3
|
-
"version": "2.14.
|
|
3
|
+
"version": "2.14.3",
|
|
4
4
|
"description": "A list of options to help users navigate, or perform actions.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
"@atlaskit/focus-ring": "^2.1.0",
|
|
47
47
|
"@atlaskit/interaction-context": "^2.6.0",
|
|
48
48
|
"@atlaskit/platform-feature-flags": "^1.0.0",
|
|
49
|
-
"@atlaskit/primitives": "^13.
|
|
50
|
-
"@atlaskit/theme": "^
|
|
49
|
+
"@atlaskit/primitives": "^13.5.0",
|
|
50
|
+
"@atlaskit/theme": "^15.0.0",
|
|
51
51
|
"@atlaskit/tokens": "^3.3.0",
|
|
52
52
|
"@babel/runtime": "^7.0.0",
|
|
53
53
|
"@emotion/react": "^11.7.1"
|
|
@@ -60,15 +60,19 @@
|
|
|
60
60
|
"@af/accessibility-testing": "*",
|
|
61
61
|
"@af/integration-testing": "*",
|
|
62
62
|
"@af/visual-regression": "*",
|
|
63
|
+
"@atlaskit/button": "^20.5.1",
|
|
64
|
+
"@atlaskit/docs": "*",
|
|
65
|
+
"@atlaskit/icon": "^23.8.0",
|
|
66
|
+
"@atlaskit/icon-file-type": "^6.9.0",
|
|
67
|
+
"@atlaskit/icon-object": "^6.10.1",
|
|
68
|
+
"@atlaskit/link": "*",
|
|
69
|
+
"@atlaskit/section-message": "*",
|
|
63
70
|
"@atlaskit/visual-regression": "*",
|
|
64
71
|
"@atlassian/feature-flags-test-utils": "*",
|
|
65
72
|
"@emotion/jest": "^11.8.0",
|
|
66
|
-
"@testing-library/dom": "^10.1.0",
|
|
67
73
|
"@testing-library/react": "^13.4.0",
|
|
68
74
|
"ast-types": "^0.13.3",
|
|
69
|
-
"bind-event-listener": "^3.0.0",
|
|
70
75
|
"jscodeshift": "^0.13.0",
|
|
71
|
-
"storybook-addon-performance": "^0.17.3",
|
|
72
76
|
"typescript": "~5.4.2"
|
|
73
77
|
},
|
|
74
78
|
"keywords": [
|
|
@@ -81,7 +85,6 @@
|
|
|
81
85
|
"import-structure": "atlassian-conventions"
|
|
82
86
|
},
|
|
83
87
|
"@repo/internal": {
|
|
84
|
-
"dom-events": "use-bind-event-listener",
|
|
85
88
|
"ui-components": "lite-mode",
|
|
86
89
|
"design-system": "v1",
|
|
87
90
|
"styling": [
|
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
import { type NodePath } from 'ast-types/lib/node-path';
|
|
2
|
-
import type {
|
|
3
|
-
API,
|
|
4
|
-
ASTPath,
|
|
5
|
-
default as core,
|
|
6
|
-
FileInfo,
|
|
7
|
-
ImportDeclaration,
|
|
8
|
-
ImportSpecifier,
|
|
9
|
-
Options,
|
|
10
|
-
} from 'jscodeshift';
|
|
11
|
-
|
|
12
|
-
import { addCommentBeforeJSX, getDefaultSpecifierName } from './helpers/generic';
|
|
13
|
-
|
|
14
|
-
function getJSXAttributesByName(j: core.JSCodeshift, element: ASTPath<any>, attributeName: string) {
|
|
15
|
-
return j(element)
|
|
16
|
-
.find(j.JSXOpeningElement)
|
|
17
|
-
.find(j.JSXAttribute)
|
|
18
|
-
.filter((attribute) => {
|
|
19
|
-
const matches = j(attribute)
|
|
20
|
-
.find(j.JSXIdentifier)
|
|
21
|
-
.filter((identifier) => identifier.value.name === attributeName);
|
|
22
|
-
return Boolean(matches.length);
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
function getImportSpecifier(
|
|
27
|
-
j: core.JSCodeshift,
|
|
28
|
-
source: ReturnType<typeof j>,
|
|
29
|
-
specifier: string,
|
|
30
|
-
imported: string,
|
|
31
|
-
) {
|
|
32
|
-
const specifiers = source
|
|
33
|
-
.find(j.ImportDeclaration)
|
|
34
|
-
.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === specifier)
|
|
35
|
-
.find(j.ImportSpecifier)
|
|
36
|
-
.filter((path: ASTPath<ImportSpecifier>) => path.value.imported.name === imported);
|
|
37
|
-
|
|
38
|
-
if (!specifiers.length) {
|
|
39
|
-
return null;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
return specifiers.nodes()[0]!.local!.name;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
function updateCssFnProp(j: core.JSCodeshift, source: ReturnType<typeof j>, specifier: string) {
|
|
46
|
-
source.findJSXElements(specifier).forEach((element) => {
|
|
47
|
-
const cssFnPropCollection = getJSXAttributesByName(j, element, 'cssFn');
|
|
48
|
-
|
|
49
|
-
// no cssProp usage for this element
|
|
50
|
-
if (!cssFnPropCollection.length) {
|
|
51
|
-
return;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
const cssFnProp = cssFnPropCollection.get();
|
|
55
|
-
|
|
56
|
-
const cssFnExpression: NodePath = j(cssFnProp)
|
|
57
|
-
.find(j.JSXExpressionContainer)
|
|
58
|
-
.find(j.Expression)
|
|
59
|
-
.get();
|
|
60
|
-
|
|
61
|
-
if (cssFnExpression) {
|
|
62
|
-
// just remove the state styles param
|
|
63
|
-
try {
|
|
64
|
-
const [stylePropName] = cssFnExpression!.value.params;
|
|
65
|
-
j(cssFnExpression)
|
|
66
|
-
.find(j.SpreadElement)
|
|
67
|
-
.forEach((n) => {
|
|
68
|
-
// discerns whether there are multiple identifiers here
|
|
69
|
-
const isComplexIdentifier = j(n).find(j.Identifier).length > 1;
|
|
70
|
-
|
|
71
|
-
if (isComplexIdentifier) {
|
|
72
|
-
throw new Error('CSSFn Prop codemod: Unable to parse spread element');
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
const hasStyleProp = !!j(n)
|
|
76
|
-
.find(j.Identifier)
|
|
77
|
-
.filter((node) => node.value.name === stylePropName.name).length;
|
|
78
|
-
if (hasStyleProp) {
|
|
79
|
-
j(n).remove();
|
|
80
|
-
}
|
|
81
|
-
});
|
|
82
|
-
|
|
83
|
-
cssFnExpression!.value.params.shift();
|
|
84
|
-
} catch (e) {
|
|
85
|
-
addCommentBeforeJSX(
|
|
86
|
-
j,
|
|
87
|
-
cssFnProp,
|
|
88
|
-
`
|
|
89
|
-
The usage of the 'cssFn' prop in this component could not be transformed and requires manual intervention.
|
|
90
|
-
The 'cssFn' prop has been simplified so that users no longer need to merge the inherited styles with their own overrides.
|
|
91
|
-
For more info please reach out to #help-design-system-code.
|
|
92
|
-
`,
|
|
93
|
-
);
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
});
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
function hasImportDeclaration(
|
|
100
|
-
j: core.JSCodeshift,
|
|
101
|
-
source: ReturnType<typeof j>,
|
|
102
|
-
importPath: string,
|
|
103
|
-
) {
|
|
104
|
-
return !!source.find(j.ImportDeclaration).filter((path) => path.node.source.value === importPath)
|
|
105
|
-
.length;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
export default function transformer(fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) {
|
|
109
|
-
const source = j(fileInfo.source);
|
|
110
|
-
|
|
111
|
-
if (hasImportDeclaration(j, source, '@atlaskit/menu')) {
|
|
112
|
-
const defaultSpecifier = getDefaultSpecifierName({
|
|
113
|
-
j,
|
|
114
|
-
base: source,
|
|
115
|
-
packageName: '@atlaskit/menu',
|
|
116
|
-
});
|
|
117
|
-
|
|
118
|
-
if (defaultSpecifier != null) {
|
|
119
|
-
updateCssFnProp(j, source, defaultSpecifier);
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
[
|
|
123
|
-
'ButtonItem',
|
|
124
|
-
'LinkItem',
|
|
125
|
-
'CustomItem',
|
|
126
|
-
'HeadingItem',
|
|
127
|
-
'SkeletonItem',
|
|
128
|
-
'SkeletonHeadingItem',
|
|
129
|
-
'MenuGroup',
|
|
130
|
-
'PopupMenuGroup',
|
|
131
|
-
'Section',
|
|
132
|
-
].forEach((pkg) => {
|
|
133
|
-
const importSpecifier = getImportSpecifier(j, source, '@atlaskit/menu', pkg);
|
|
134
|
-
|
|
135
|
-
if (importSpecifier != null) {
|
|
136
|
-
updateCssFnProp(j, source, importSpecifier);
|
|
137
|
-
}
|
|
138
|
-
});
|
|
139
|
-
|
|
140
|
-
return source.toSource(
|
|
141
|
-
options.printOptions || {
|
|
142
|
-
quote: 'single',
|
|
143
|
-
trailingComma: true,
|
|
144
|
-
},
|
|
145
|
-
);
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
return fileInfo.source;
|
|
149
|
-
}
|
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
API,
|
|
3
|
-
ASTPath,
|
|
4
|
-
default as core,
|
|
5
|
-
FileInfo,
|
|
6
|
-
ImportDeclaration,
|
|
7
|
-
ImportSpecifier,
|
|
8
|
-
Options,
|
|
9
|
-
} from 'jscodeshift';
|
|
10
|
-
|
|
11
|
-
const invalidHrefValues = ['', '#'];
|
|
12
|
-
const pkg = '@atlaskit/menu';
|
|
13
|
-
|
|
14
|
-
function getJSXAttributesByName(j: core.JSCodeshift, element: ASTPath<any>, attributeName: string) {
|
|
15
|
-
return j(element)
|
|
16
|
-
.find(j.JSXOpeningElement)
|
|
17
|
-
.find(j.JSXAttribute)
|
|
18
|
-
.filter((attribute) => {
|
|
19
|
-
const matches = j(attribute)
|
|
20
|
-
.find(j.JSXIdentifier)
|
|
21
|
-
.filter((identifier) => identifier.value.name === attributeName);
|
|
22
|
-
return Boolean(matches.length);
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
function getImportSpecifier(
|
|
27
|
-
j: core.JSCodeshift,
|
|
28
|
-
source: ReturnType<typeof j>,
|
|
29
|
-
specifier: string,
|
|
30
|
-
imported: string,
|
|
31
|
-
) {
|
|
32
|
-
const specifiers = source
|
|
33
|
-
.find(j.ImportDeclaration)
|
|
34
|
-
.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === specifier)
|
|
35
|
-
.find(j.ImportSpecifier)
|
|
36
|
-
.filter((path: ASTPath<ImportSpecifier>) => path.value.imported.name === imported);
|
|
37
|
-
|
|
38
|
-
if (!specifiers.length) {
|
|
39
|
-
return null;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
return specifiers.nodes()[0]!.local!.name;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
function convertInvalidLinkItemsToButtonItems(
|
|
46
|
-
j: core.JSCodeshift,
|
|
47
|
-
source: ReturnType<typeof j>,
|
|
48
|
-
specifier: string,
|
|
49
|
-
) {
|
|
50
|
-
// For each instance of LinkItem
|
|
51
|
-
source.findJSXElements(specifier).forEach((element) => {
|
|
52
|
-
const hrefPropCollection = getJSXAttributesByName(j, element, 'href');
|
|
53
|
-
|
|
54
|
-
// base case: no `href` prop exists, it is invalid
|
|
55
|
-
let validHref = false;
|
|
56
|
-
|
|
57
|
-
// if `href` exists
|
|
58
|
-
if (hrefPropCollection.length > 0) {
|
|
59
|
-
const hrefProp = hrefPropCollection.get();
|
|
60
|
-
|
|
61
|
-
const hrefStringLiteral = j(hrefProp).find(j.StringLiteral);
|
|
62
|
-
const hrefExpressionContainer = j(hrefProp).find(j.JSXExpressionContainer).find(j.Expression);
|
|
63
|
-
|
|
64
|
-
// This is tin foil hattery. Can something be neither a string literal
|
|
65
|
-
// nor an expression container? Don't know but gonna cover that
|
|
66
|
-
if (hrefStringLiteral.length === 0 && hrefExpressionContainer.length === 0) {
|
|
67
|
-
return;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
if (hrefStringLiteral.length > 0) {
|
|
71
|
-
const hrefValue = hrefStringLiteral.get().value.value;
|
|
72
|
-
if (invalidHrefValues.includes(hrefValue)) {
|
|
73
|
-
j(hrefProp).forEach((el) => j(el).remove());
|
|
74
|
-
} else {
|
|
75
|
-
validHref = true;
|
|
76
|
-
}
|
|
77
|
-
} else {
|
|
78
|
-
// It seems foolish to try and resolve variables, so we will assume it
|
|
79
|
-
// is valid
|
|
80
|
-
validHref = true;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
if (!validHref) {
|
|
85
|
-
const pkgImport = source
|
|
86
|
-
.find(j.ImportDeclaration)
|
|
87
|
-
.filter((path) => path.node.source.value === pkg);
|
|
88
|
-
const buttonItemIsImported =
|
|
89
|
-
pkgImport
|
|
90
|
-
.find(j.ImportSpecifier)
|
|
91
|
-
.nodes()
|
|
92
|
-
.filter((node) => node.imported.name === 'ButtonItem').length > 0;
|
|
93
|
-
if (!buttonItemIsImported) {
|
|
94
|
-
// Add ButtonItem to imports
|
|
95
|
-
const newSpecifier = j.importSpecifier(j.identifier('ButtonItem'));
|
|
96
|
-
pkgImport.forEach((moduleImport) => {
|
|
97
|
-
const specifiers = moduleImport.node.specifiers ? [...moduleImport.node.specifiers] : [];
|
|
98
|
-
j(moduleImport).replaceWith(
|
|
99
|
-
j.importDeclaration(specifiers.concat([newSpecifier]), moduleImport.node.source),
|
|
100
|
-
);
|
|
101
|
-
});
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
// Replace existing LinkItem with ButtonItem, while maintaining the same props
|
|
105
|
-
if (element.value.openingElement.name.type === 'JSXIdentifier') {
|
|
106
|
-
element.value.openingElement.name.name = 'ButtonItem';
|
|
107
|
-
if (
|
|
108
|
-
element.value.closingElement &&
|
|
109
|
-
element.value.closingElement.name.type === 'JSXIdentifier'
|
|
110
|
-
) {
|
|
111
|
-
element.value.closingElement.name.name = 'ButtonItem';
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
});
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
function hasImportDeclaration(
|
|
119
|
-
j: core.JSCodeshift,
|
|
120
|
-
source: ReturnType<typeof j>,
|
|
121
|
-
importPath: string,
|
|
122
|
-
) {
|
|
123
|
-
return !!source.find(j.ImportDeclaration).filter((path) => path.node.source.value === importPath)
|
|
124
|
-
.length;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
export default function transformer(fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) {
|
|
128
|
-
const source = j(fileInfo.source);
|
|
129
|
-
|
|
130
|
-
if (hasImportDeclaration(j, source, pkg)) {
|
|
131
|
-
const importSpecifier = getImportSpecifier(j, source, pkg, 'LinkItem');
|
|
132
|
-
|
|
133
|
-
if (importSpecifier != null) {
|
|
134
|
-
convertInvalidLinkItemsToButtonItems(j, source, importSpecifier);
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
return source.toSource(
|
|
138
|
-
options.printOptions || {
|
|
139
|
-
quote: 'single',
|
|
140
|
-
trailingComma: true,
|
|
141
|
-
},
|
|
142
|
-
);
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
return fileInfo.source;
|
|
146
|
-
}
|