@atlaskit/codemod-cli 0.8.0 → 0.8.4
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 +26 -0
- package/README.md +12 -2
- package/dist/cjs/cli.js +3 -2
- package/dist/cjs/index.js +4 -4
- package/dist/cjs/main.js +6 -4
- package/dist/cjs/presets/index.js +4 -2
- package/dist/cjs/presets/theme-to-design-tokens/theme-to-design-tokens.js +181 -0
- package/dist/cjs/presets/theme-to-design-tokens/types.js +5 -0
- package/dist/cjs/presets/theme-to-design-tokens/utils/ast-meta.js +104 -0
- package/dist/cjs/presets/theme-to-design-tokens/utils/ast.js +19 -0
- package/dist/cjs/presets/theme-to-design-tokens/utils/color-difference.js +174 -0
- package/dist/cjs/presets/theme-to-design-tokens/utils/color-palette-tokens-map.js +129 -0
- package/dist/cjs/presets/theme-to-design-tokens/utils/color-to-token.js +88 -0
- package/dist/cjs/presets/theme-to-design-tokens/utils/color.js +59 -0
- package/dist/cjs/presets/theme-to-design-tokens/utils/fuzzy-search.js +348 -0
- package/dist/cjs/presets/theme-to-design-tokens/utils/legacy-colors.js +81 -0
- package/dist/cjs/presets/theme-to-design-tokens/utils/named-colors.js +8 -0
- package/dist/cjs/transforms.js +1 -1
- package/dist/cjs/types.js +5 -3
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/cli.js +3 -2
- package/dist/es2019/main.js +3 -1
- package/dist/es2019/presets/index.js +2 -1
- package/dist/es2019/presets/theme-to-design-tokens/theme-to-design-tokens.js +137 -0
- package/dist/es2019/presets/theme-to-design-tokens/types.js +1 -0
- package/dist/es2019/presets/theme-to-design-tokens/utils/ast-meta.js +70 -0
- package/dist/es2019/presets/theme-to-design-tokens/utils/ast.js +10 -0
- package/dist/es2019/presets/theme-to-design-tokens/utils/color-difference.js +150 -0
- package/dist/es2019/presets/theme-to-design-tokens/utils/color-palette-tokens-map.js +122 -0
- package/dist/es2019/presets/theme-to-design-tokens/utils/color-to-token.js +75 -0
- package/dist/es2019/presets/theme-to-design-tokens/utils/color.js +35 -0
- package/dist/es2019/presets/theme-to-design-tokens/utils/fuzzy-search.js +336 -0
- package/dist/es2019/presets/theme-to-design-tokens/utils/legacy-colors.js +72 -0
- package/dist/es2019/presets/theme-to-design-tokens/utils/named-colors.js +1 -0
- package/dist/es2019/version.json +1 -1
- package/dist/esm/cli.js +3 -2
- package/dist/esm/main.js +6 -4
- package/dist/esm/presets/index.js +3 -2
- package/dist/esm/presets/theme-to-design-tokens/theme-to-design-tokens.js +165 -0
- package/dist/esm/presets/theme-to-design-tokens/types.js +1 -0
- package/dist/esm/presets/theme-to-design-tokens/utils/ast-meta.js +88 -0
- package/dist/esm/presets/theme-to-design-tokens/utils/ast.js +10 -0
- package/dist/esm/presets/theme-to-design-tokens/utils/color-difference.js +160 -0
- package/dist/esm/presets/theme-to-design-tokens/utils/color-palette-tokens-map.js +122 -0
- package/dist/esm/presets/theme-to-design-tokens/utils/color-to-token.js +78 -0
- package/dist/esm/presets/theme-to-design-tokens/utils/color.js +39 -0
- package/dist/esm/presets/theme-to-design-tokens/utils/fuzzy-search.js +340 -0
- package/dist/esm/presets/theme-to-design-tokens/utils/legacy-colors.js +72 -0
- package/dist/esm/presets/theme-to-design-tokens/utils/named-colors.js +1 -0
- package/dist/esm/types.js +3 -2
- package/dist/esm/version.json +1 -1
- package/dist/types/presets/index.d.ts +1 -0
- package/dist/types/presets/theme-to-design-tokens/theme-to-design-tokens.d.ts +2 -0
- package/dist/types/presets/theme-to-design-tokens/types.d.ts +2 -0
- package/dist/types/presets/theme-to-design-tokens/utils/ast-meta.d.ts +4 -0
- package/dist/types/presets/theme-to-design-tokens/utils/ast.d.ts +3 -0
- package/dist/types/presets/theme-to-design-tokens/utils/color-difference.d.ts +66 -0
- package/dist/types/presets/theme-to-design-tokens/utils/color-palette-tokens-map.d.ts +21 -0
- package/dist/types/presets/theme-to-design-tokens/utils/color-to-token.d.ts +12 -0
- package/dist/types/presets/theme-to-design-tokens/utils/color.d.ts +4 -0
- package/dist/types/presets/theme-to-design-tokens/utils/fuzzy-search.d.ts +5 -0
- package/dist/types/presets/theme-to-design-tokens/utils/legacy-colors.d.ts +3 -0
- package/dist/types/presets/theme-to-design-tokens/utils/named-colors.d.ts +1 -0
- package/package.json +4 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
# @atlaskit/codemod-cli
|
|
2
2
|
|
|
3
|
+
## 0.8.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Adds a new codemod preset `theme-to-design-tokens` that helps migrate from atlaskit theme to atlaskit tokens.
|
|
8
|
+
- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Theme preset is now picked up by the CLI.
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 0.8.3
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`f4d22b1c8af`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f4d22b1c8af) - Ignore directory filtering logic if filtering returns no paths
|
|
16
|
+
|
|
17
|
+
## 0.8.2
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- [`650aa20f6fe`](https://bitbucket.org/atlassian/atlassian-frontend/commits/650aa20f6fe) - Upgrade meow dependency
|
|
22
|
+
|
|
23
|
+
## 0.8.1
|
|
24
|
+
|
|
25
|
+
### Patch Changes
|
|
26
|
+
|
|
27
|
+
- [`982e2f3d3d2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/982e2f3d3d2) - Directory filtering now defaults to true
|
|
28
|
+
|
|
3
29
|
## 0.8.0
|
|
4
30
|
|
|
5
31
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -1,3 +1,13 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Codemod CLI
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Detailed docs and example usage can be found [here](../../../repo-docs/content/cloud/framework/atlassian-frontend/codemods/01-atlassian-codemods.md)
|
|
4
|
+
|
|
5
|
+
## Testing locally
|
|
6
|
+
|
|
7
|
+
When wanting to run the CLI before it has been published you can run the start command.
|
|
8
|
+
|
|
9
|
+
```
|
|
10
|
+
yarn start [commands]
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
For a list of commands run it with `-h` or look at the [documentation](../../../repo-docs/content/cloud/framework/atlassian-frontend/codemods/01-atlassian-codemods.md).
|
package/dist/cjs/cli.js
CHANGED
|
@@ -30,7 +30,7 @@ function _run() {
|
|
|
30
30
|
while (1) {
|
|
31
31
|
switch (_context.prev = _context.next) {
|
|
32
32
|
case 0:
|
|
33
|
-
cli = (0, _meow.default)("\nUsage\n $ npx @atlaskit/codemod-cli [options] <file-paths>...\n\nOptions\n --transform, -t the transform to run, will prompt for a transform if not provided and no module is passed\n --since-ref, runs transforms for all packages that have been upgraded since the specified git ref\n --packages, runs transforms for the specified comma separated list of packages, optionally include a version for each package to run all transforms since that version\n --parser, -p babel|babylon|flow|ts|tsx parser to use for parsing the source files (default: babel)\n --extensions, -e transform files with these file extensions (comma separated list) (default: js)\n --ignore-pattern, ignore files that match a provided glob expression\n --fail-on-error, return a 1 exit code when errors were found during execution of codemods\n --version, -v version number\n --
|
|
33
|
+
cli = (0, _meow.default)("\nUsage\n $ npx @atlaskit/codemod-cli [options] <file-paths>...\n\nOptions\n --transform, -t the transform to run, will prompt for a transform if not provided and no module is passed\n --since-ref, runs transforms for all packages that have been upgraded since the specified git ref\n --packages, runs transforms for the specified comma separated list of packages, optionally include a version for each package to run all transforms since that version\n --parser, -p babel|babylon|flow|ts|tsx parser to use for parsing the source files (default: babel)\n --extensions, -e transform files with these file extensions (comma separated list) (default: js)\n --ignore-pattern, ignore files that match a provided glob expression\n --fail-on-error, return a 1 exit code when errors were found during execution of codemods\n --version, -v version number\n --no-filter-paths disables dependant package file path filtering logic \n --help Help me \uD83D\uDE31\n\nExamples\n # Run a codemod over the /project/src directory, will be prompted for which codemod to run\n $ npx @atlaskit/codemod-cli /project/src\n\n # Run the \"4.0.0-remove-appearance-prop\" transform of the \"button\" package\n $ npx @atlaskit/codemod-cli -t button@4.0.0-remove-appearance-prop /project/src\n\n # Run all transforms for \"@atlaskit/button\" greater than version 3.0.0 and @atlaskit/range greater than 4.0.0\n $ npx @atlaskit/codemod-cli --packages @atlaskit/button@3.0.0,@atlaskit/range@4.0.0 /project/src\n", {
|
|
34
34
|
flags: {
|
|
35
35
|
transform: {
|
|
36
36
|
type: 'string',
|
|
@@ -57,7 +57,8 @@ function _run() {
|
|
|
57
57
|
type: 'boolean'
|
|
58
58
|
},
|
|
59
59
|
filterPaths: {
|
|
60
|
-
type: 'boolean'
|
|
60
|
+
type: 'boolean',
|
|
61
|
+
default: true
|
|
61
62
|
}
|
|
62
63
|
}
|
|
63
64
|
});
|
package/dist/cjs/index.js
CHANGED
|
@@ -5,10 +5,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
Object.defineProperty(exports, "
|
|
8
|
+
Object.defineProperty(exports, "NoTransformsExistError", {
|
|
9
9
|
enumerable: true,
|
|
10
10
|
get: function get() {
|
|
11
|
-
return
|
|
11
|
+
return _types.NoTransformsExistError;
|
|
12
12
|
}
|
|
13
13
|
});
|
|
14
14
|
Object.defineProperty(exports, "ValidationError", {
|
|
@@ -17,10 +17,10 @@ Object.defineProperty(exports, "ValidationError", {
|
|
|
17
17
|
return _types.ValidationError;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
20
|
-
Object.defineProperty(exports, "
|
|
20
|
+
Object.defineProperty(exports, "default", {
|
|
21
21
|
enumerable: true,
|
|
22
22
|
get: function get() {
|
|
23
|
-
return
|
|
23
|
+
return _main.default;
|
|
24
24
|
}
|
|
25
25
|
});
|
|
26
26
|
|
package/dist/cjs/main.js
CHANGED
|
@@ -41,9 +41,9 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
41
41
|
|
|
42
42
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
43
43
|
|
|
44
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
44
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
45
45
|
|
|
46
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
46
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
47
47
|
|
|
48
48
|
var jscodeshift = require.resolve('.bin/jscodeshift');
|
|
49
49
|
|
|
@@ -179,7 +179,9 @@ var runTransform = /*#__PURE__*/function () {
|
|
|
179
179
|
codemodDirs = _context3.sent;
|
|
180
180
|
|
|
181
181
|
if (codemodDirs.length === 0) {
|
|
182
|
-
|
|
182
|
+
// Fallback to non-filter logic if filtering returns no directories
|
|
183
|
+
logger.log(_chalk.default.yellow("Could not filter source paths for ".concat(transform.module, ", falling back to running over all specified paths. (See --no-filter-paths flag)")));
|
|
184
|
+
codemodDirs = filePaths;
|
|
183
185
|
} else {
|
|
184
186
|
logger.log(_chalk.default.green("Running transform '".concat(_chalk.default.bold(transform.name), "' over filtered dirs ").concat(_chalk.default.bold(codemodDirs.join(', ')), "...")));
|
|
185
187
|
}
|
|
@@ -361,7 +363,7 @@ function _main() {
|
|
|
361
363
|
case 4:
|
|
362
364
|
_yield$parseArgs = _context5.sent;
|
|
363
365
|
packages = _yield$parseArgs.packages;
|
|
364
|
-
_process$env$_PACKAGE = "0.8.
|
|
366
|
+
_process$env$_PACKAGE = "0.8.4", _PACKAGE_VERSION_ = _process$env$_PACKAGE === void 0 ? '0.0.0-dev' : _process$env$_PACKAGE;
|
|
365
367
|
logger.log(_chalk.default.bgBlue(_chalk.default.black("\uD83D\uDCDA Atlassian-Frontend codemod library @ ".concat(_PACKAGE_VERSION_, " \uD83D\uDCDA"))));
|
|
366
368
|
|
|
367
369
|
if (packages && packages.length > 0) {
|
|
@@ -11,12 +11,14 @@ var _path = _interopRequireDefault(require("path"));
|
|
|
11
11
|
|
|
12
12
|
require("./styled-to-emotion/styled-to-emotion");
|
|
13
13
|
|
|
14
|
+
require("./theme-to-design-tokens/theme-to-design-tokens");
|
|
15
|
+
|
|
14
16
|
/**
|
|
15
17
|
* Manually import presets to make sure typescript includes them
|
|
16
18
|
* in the final bundle
|
|
17
19
|
*/
|
|
18
|
-
var presets = ['styled-to-emotion'].map(function (preset) {
|
|
19
|
-
return _path.default.join(__dirname, preset, "".concat(preset, ".@(ts|js)"));
|
|
20
|
+
var presets = ['styled-to-emotion', 'theme-to-design-tokens'].map(function (preset) {
|
|
21
|
+
return _path.default.join(__dirname, preset, "".concat(preset, ".@(ts|js|tsx)"));
|
|
20
22
|
});
|
|
21
23
|
var _default = presets;
|
|
22
24
|
exports.default = _default;
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = transformer;
|
|
9
|
+
|
|
10
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
11
|
+
|
|
12
|
+
var _colorToToken = _interopRequireDefault(require("./utils/color-to-token"));
|
|
13
|
+
|
|
14
|
+
var _ast = require("./utils/ast");
|
|
15
|
+
|
|
16
|
+
var _astMeta = require("./utils/ast-meta");
|
|
17
|
+
|
|
18
|
+
var _color = require("./utils/color");
|
|
19
|
+
|
|
20
|
+
var _fuzzySearch = _interopRequireDefault(require("./utils/fuzzy-search"));
|
|
21
|
+
|
|
22
|
+
var _legacyColors = require("./utils/legacy-colors");
|
|
23
|
+
|
|
24
|
+
var _tokenNames = _interopRequireDefault(require("@atlaskit/tokens/token-names"));
|
|
25
|
+
|
|
26
|
+
/* eslint-disable no-console */
|
|
27
|
+
var tokens = Object.keys(_tokenNames.default);
|
|
28
|
+
var search = (0, _fuzzySearch.default)(tokens, false);
|
|
29
|
+
|
|
30
|
+
function hasImportDeclaration(j, source, sourcePath) {
|
|
31
|
+
return !!source.find(j.ImportDeclaration).filter(function (path) {
|
|
32
|
+
return path.node.source.value === sourcePath;
|
|
33
|
+
}).length;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
function hasImportSpecifier(j, source, specifier, sourcePath) {
|
|
37
|
+
return !!source.find(j.ImportDeclaration).filter(function (path) {
|
|
38
|
+
return path.node.source.value === sourcePath;
|
|
39
|
+
}).find(j.ImportSpecifier, {
|
|
40
|
+
local: {
|
|
41
|
+
name: specifier
|
|
42
|
+
}
|
|
43
|
+
}).length;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
function insertTokenImport(j, source) {
|
|
47
|
+
if (hasImportDeclaration(j, source, '@atlaskit/tokens')) {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
var newImport = j.importDeclaration([j.importSpecifier(j.identifier('token'))], j.stringLiteral('@atlaskit/tokens'));
|
|
52
|
+
source.get().node.program.body.unshift(newImport);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
function buildToken(j, tokenResult, node) {
|
|
56
|
+
var callExpr = j.callExpression(j.identifier('token'), [j.stringLiteral(tokenResult.suggestion[0] || 'util.UNSAFE_MISSING_TOKEN'), tokenResult.fallbackNeeded && node].filter(Boolean));
|
|
57
|
+
callExpr.comments = [j.commentBlock(" [token-confidence: ".concat(tokenResult.confidence, "] "))];
|
|
58
|
+
return callExpr;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
function getTokenFromNode(j, path, debug, paletteColor) {
|
|
62
|
+
var baseMeta = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
|
|
63
|
+
var foundMeta = (0, _astMeta.getMetaFromAncestors)(j, path);
|
|
64
|
+
var propertyName = foundMeta.find(function (name) {
|
|
65
|
+
if (!name) {
|
|
66
|
+
return false;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
return name.toLowerCase().match(/(.*color|image|fill|stroke|shadow|border(?!-)|background(?!-)|outline(?!-)|column-rule-color)/);
|
|
70
|
+
});
|
|
71
|
+
var state = 'resting';
|
|
72
|
+
foundMeta.find(function (name) {
|
|
73
|
+
if (!name) {
|
|
74
|
+
return false;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
var result = /(hover|active|disabled)/.exec(name.toLowerCase());
|
|
78
|
+
|
|
79
|
+
if (result) {
|
|
80
|
+
if (result[0] === 'active') {
|
|
81
|
+
state = 'pressed';
|
|
82
|
+
} else {
|
|
83
|
+
state = result[0];
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
return true;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
return false;
|
|
90
|
+
});
|
|
91
|
+
var tokenResult = (0, _colorToToken.default)(paletteColor || '', {
|
|
92
|
+
state: state,
|
|
93
|
+
propertyName: propertyName
|
|
94
|
+
}, function () {
|
|
95
|
+
var searchTerm = (0, _astMeta.cleanMeta)([].concat((0, _toConsumableArray2.default)(foundMeta), (0, _toConsumableArray2.default)(baseMeta))).join(' ');
|
|
96
|
+
var results = search.get(searchTerm);
|
|
97
|
+
|
|
98
|
+
if (results) {
|
|
99
|
+
return results.map(function (result) {
|
|
100
|
+
return result[1];
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
return [];
|
|
105
|
+
});
|
|
106
|
+
return tokenResult;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
function transformer(file, api) {
|
|
110
|
+
var debug = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
111
|
+
var j = api.jscodeshift;
|
|
112
|
+
var source = j(file.source);
|
|
113
|
+
var transformed = false;
|
|
114
|
+
source // Handle colors.N100
|
|
115
|
+
.find(j.MemberExpression).filter(function (path) {
|
|
116
|
+
return path.value.object.type === 'Identifier' && path.value.object.name === 'colors' && path.value.property.type === 'Identifier' && (0, _color.isLegacyColor)(path.value.property.name);
|
|
117
|
+
}).filter(function (path) {
|
|
118
|
+
return !(0, _ast.isDecendantOfToken)(j, path);
|
|
119
|
+
}).forEach(function (path) {
|
|
120
|
+
debug && console.log('file:', file.path);
|
|
121
|
+
insertTokenImport(j, source);
|
|
122
|
+
var key = path.value.property.type === 'Identifier' ? path.value.property.name : undefined;
|
|
123
|
+
var colorMeta = _legacyColors.legacyColorMetaMap[key] || [];
|
|
124
|
+
var tokenId = getTokenFromNode(j, path, debug, key, colorMeta);
|
|
125
|
+
j(path).replaceWith(buildToken(j, tokenId, path.value));
|
|
126
|
+
transformed = true;
|
|
127
|
+
});
|
|
128
|
+
source.find(j.ObjectProperty).filter(function (path) {
|
|
129
|
+
return path.value.value.type === 'Identifier' && ((0, _color.isLegacyColor)(path.value.value.name) || (0, _color.isLegacyNamedColor)(path.value.value.name));
|
|
130
|
+
}).filter(function (path) {
|
|
131
|
+
return hasImportSpecifier(j, source, path.value.value.type === 'Identifier' ? path.value.value.name : '', '@atlaskit/theme') || hasImportSpecifier(j, source, path.value.value.type === 'Identifier' ? path.value.value.name : '', '@atlaskit/theme/colors');
|
|
132
|
+
}).filter(function (path) {
|
|
133
|
+
return !(0, _ast.isDecendantOfToken)(j, path.value.value);
|
|
134
|
+
}).forEach(function (path) {
|
|
135
|
+
var valuePath = path.get('value');
|
|
136
|
+
debug && console.log('file:', file.path);
|
|
137
|
+
insertTokenImport(j, source);
|
|
138
|
+
var colorMeta = _legacyColors.legacyColorMetaMap[valuePath.name] || [];
|
|
139
|
+
var tokenId = getTokenFromNode(j, valuePath, debug, valuePath.name, colorMeta);
|
|
140
|
+
j(path).replaceWith(j.objectProperty(path.value.key, buildToken(j, tokenId, valuePath.value)));
|
|
141
|
+
transformed = true;
|
|
142
|
+
});
|
|
143
|
+
source.find(j.Identifier).filter(function (path) {
|
|
144
|
+
return (0, _color.isLegacyColor)(path.value.name) || (0, _color.isLegacyNamedColor)(path.value.name);
|
|
145
|
+
}).filter(function (path) {
|
|
146
|
+
return hasImportSpecifier(j, source, path.value.name, '@atlaskit/theme') || hasImportSpecifier(j, source, path.value.name, '@atlaskit/theme/colors');
|
|
147
|
+
}).filter(function (path) {
|
|
148
|
+
return !['ImportSpecifier', 'MemberExpression', 'ObjectProperty'].includes(path.parentPath.value.type);
|
|
149
|
+
}).filter(function (path) {
|
|
150
|
+
return !(0, _ast.isDecendantOfToken)(j, path);
|
|
151
|
+
}).forEach(function (path) {
|
|
152
|
+
debug && console.log('file:', file.path);
|
|
153
|
+
insertTokenImport(j, source);
|
|
154
|
+
var colorMeta = _legacyColors.legacyColorMetaMap[path.value.name] || [];
|
|
155
|
+
var tokenId = getTokenFromNode(j, path, debug, path.value.name, colorMeta);
|
|
156
|
+
j(path).replaceWith(buildToken(j, tokenId, path.value));
|
|
157
|
+
transformed = true;
|
|
158
|
+
});
|
|
159
|
+
source.find(j.Literal).filter(function (path) {
|
|
160
|
+
return typeof path.value.value === 'string' && ((0, _color.includesHardCodedColor)(path.value.value) || (0, _color.isHardCodedColor)(path.value.value));
|
|
161
|
+
}).filter(function (path) {
|
|
162
|
+
return !(0, _ast.isDecendantOfToken)(j, path);
|
|
163
|
+
}).forEach(function (path) {
|
|
164
|
+
var _path$value, _path$value$value;
|
|
165
|
+
|
|
166
|
+
debug && console.log('file:', file.path);
|
|
167
|
+
insertTokenImport(j, source);
|
|
168
|
+
var value = path === null || path === void 0 ? void 0 : (_path$value = path.value) === null || _path$value === void 0 ? void 0 : (_path$value$value = _path$value.value) === null || _path$value$value === void 0 ? void 0 : _path$value$value.toString();
|
|
169
|
+
var colorMeta = _legacyColors.legacyColorMetaMap[value] || [];
|
|
170
|
+
var tokenId = getTokenFromNode(j, path, debug, value, colorMeta);
|
|
171
|
+
var tokenNode = buildToken(j, tokenId, path.value);
|
|
172
|
+
j(path).replaceWith((0, _ast.isDecendantOfType)(j, path, j.JSXAttribute) ? j.jsxExpressionContainer(tokenNode) : tokenNode);
|
|
173
|
+
transformed = true;
|
|
174
|
+
});
|
|
175
|
+
|
|
176
|
+
if (transformed) {
|
|
177
|
+
return source.toSource();
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
return file.source;
|
|
181
|
+
}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.cleanMeta = cleanMeta;
|
|
9
|
+
exports.getMetaFromAncestors = getMetaFromAncestors;
|
|
10
|
+
exports.getUniqueWordsFromTokens = void 0;
|
|
11
|
+
|
|
12
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
13
|
+
|
|
14
|
+
var _tokenNames = _interopRequireDefault(require("@atlaskit/tokens/token-names"));
|
|
15
|
+
|
|
16
|
+
var tokens = Object.keys(_tokenNames.default);
|
|
17
|
+
var getUniqueWordsFromTokens = tokens.reduce(function (accum, val) {
|
|
18
|
+
return [].concat((0, _toConsumableArray2.default)(accum), (0, _toConsumableArray2.default)(val.split('.')));
|
|
19
|
+
}, []).reduce(function (accum, val) {
|
|
20
|
+
return [].concat((0, _toConsumableArray2.default)(accum), (0, _toConsumableArray2.default)(val.split(/(?=[A-Z])/g).map(function (e) {
|
|
21
|
+
return e.toLowerCase();
|
|
22
|
+
})));
|
|
23
|
+
}, []).reduce(function (accum, val) {
|
|
24
|
+
if (!accum.includes(val)) {
|
|
25
|
+
accum.push(val);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
return accum;
|
|
29
|
+
}, []);
|
|
30
|
+
exports.getUniqueWordsFromTokens = getUniqueWordsFromTokens;
|
|
31
|
+
|
|
32
|
+
function getMetaFromAncestors(j, path) {
|
|
33
|
+
var meta = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
|
34
|
+
var parent = path.parentPath;
|
|
35
|
+
var grandParent = parent && parent.parentPath;
|
|
36
|
+
|
|
37
|
+
if (parent && parent.value.type === 'ObjectProperty') {
|
|
38
|
+
var value = '';
|
|
39
|
+
|
|
40
|
+
if (parent.value.key.type === 'Literal' || parent.value.key.type === 'StringLiteral' || parent.value.key.type === 'NumericLiteral') {
|
|
41
|
+
value = parent.value.key.value.toString();
|
|
42
|
+
} else {
|
|
43
|
+
value = parent.value.key.name;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
meta.push(value);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
if (parent && grandParent && grandParent.value.type === 'TemplateLiteral') {
|
|
50
|
+
var expressionIndex = grandParent.value.expressions.findIndex(function (exp) {
|
|
51
|
+
return exp.name === path.value.name;
|
|
52
|
+
});
|
|
53
|
+
var quasi = grandParent.value.quasis[expressionIndex];
|
|
54
|
+
var propertyName = (quasi.value.cooked || quasi.value.raw || '').replace(/\n/g, '').split(/;|{|}/).filter(function (el) {
|
|
55
|
+
return !el.match(/\.|\@|\(|\)/);
|
|
56
|
+
}).pop().replace(/:/g, '').trim();
|
|
57
|
+
grandParent.value.quasis.slice(0, expressionIndex + 1).map(function (q) {
|
|
58
|
+
return q.value.cooked;
|
|
59
|
+
}) // We reverse so the most nested one is first which we're more likely than not interested in
|
|
60
|
+
.reverse().forEach(function (str) {
|
|
61
|
+
var result = /(hover|active|disabled|focus)/.exec(str.toLowerCase());
|
|
62
|
+
|
|
63
|
+
if (result) {
|
|
64
|
+
meta.push(result[0]);
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
meta.push(propertyName);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
if (parent && parent.value.type === 'JSXAttribute') {
|
|
71
|
+
if (!['css', 'styles', 'style'].includes(parent.value.name.name)) {
|
|
72
|
+
meta.push(parent.value.name.name);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
if (parent && parent.value.type === 'VariableDeclarator') {
|
|
77
|
+
meta.push(parent.value.id.name);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
if (parent) {
|
|
81
|
+
return getMetaFromAncestors(j, parent, meta);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
return meta;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
function cleanMeta(meta) {
|
|
88
|
+
return meta.reduce(function (accum, val) {
|
|
89
|
+
return [].concat((0, _toConsumableArray2.default)(accum), (0, _toConsumableArray2.default)(typeof val === 'string' ? val.split(/(?=[A-Z])/g).map(function (e) {
|
|
90
|
+
return e.toLowerCase();
|
|
91
|
+
}) : []));
|
|
92
|
+
}, []).reduce(function (accum, val) {
|
|
93
|
+
accum.push(val.replace(/:/g, '').replace(/,/g, '').replace('grey', 'neutral').replace('texts', 'text').replace('error', 'danger').replace('invalid', 'danger').replace('removed', 'danger').replace('removal', 'danger').replace('remove', 'danger').replace('valid', 'success').replace('successful', 'success').replace('risk', 'warning').replace('primary', 'bold').replace('info', 'bold').replace('secondary', 'subtle').replace('hyperlink', 'link').replace('focused', 'focus').replace('active', 'pressed').replace('hovered', 'hover').replace('background-color', 'background').replace('color', 'text').replace('stroke', 'border').replace('border-left', 'border').replace('border-right', 'border').replace('box-shadow', 'shadow'));
|
|
94
|
+
return accum;
|
|
95
|
+
}, []).filter(function (val) {
|
|
96
|
+
return getUniqueWordsFromTokens.includes(val);
|
|
97
|
+
}).reduce(function (accum, val) {
|
|
98
|
+
if (!accum.includes(val)) {
|
|
99
|
+
accum.push(val);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
return accum;
|
|
103
|
+
}, []);
|
|
104
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.isDecendantOfToken = isDecendantOfToken;
|
|
7
|
+
exports.isDecendantOfType = isDecendantOfType;
|
|
8
|
+
|
|
9
|
+
function isDecendantOfToken(j, path) {
|
|
10
|
+
return j(path).closest(j.CallExpression, {
|
|
11
|
+
callee: {
|
|
12
|
+
name: 'token'
|
|
13
|
+
}
|
|
14
|
+
}).length > 0;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
function isDecendantOfType(j, path, type) {
|
|
18
|
+
return j(path).closest(type).length > 0;
|
|
19
|
+
}
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.findClosetMatchingToken = findClosetMatchingToken;
|
|
9
|
+
exports.legacyColorPalette = void 0;
|
|
10
|
+
|
|
11
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
12
|
+
|
|
13
|
+
var _chromatism = require("chromatism");
|
|
14
|
+
|
|
15
|
+
var _tokenNames = _interopRequireDefault(require("@atlaskit/tokens/token-names"));
|
|
16
|
+
|
|
17
|
+
/* eslint-disable @atlassian/tangerine/import/entry-points */
|
|
18
|
+
// Design token values are not currently exposed from @atlaskit/tokens
|
|
19
|
+
// In a follow up ticket we will expose them again via another entrypoint.
|
|
20
|
+
var legacyColorPalette = {
|
|
21
|
+
R50: '#FFEBE6',
|
|
22
|
+
R75: '#FFBDAD',
|
|
23
|
+
R100: '#FF8F73',
|
|
24
|
+
R200: '#FF7452',
|
|
25
|
+
R300: '#FF5630',
|
|
26
|
+
R400: '#DE350B',
|
|
27
|
+
R500: '#BF2600',
|
|
28
|
+
Y50: '#FFFAE6',
|
|
29
|
+
Y75: '#FFF0B3',
|
|
30
|
+
Y100: '#FFE380',
|
|
31
|
+
Y200: '#FFC400',
|
|
32
|
+
Y300: '#FFAB00',
|
|
33
|
+
Y400: '#FF991F',
|
|
34
|
+
Y500: '#FF8B00',
|
|
35
|
+
G50: '#E3FCEF',
|
|
36
|
+
G75: '#ABF5D1',
|
|
37
|
+
G100: '#79F2C0',
|
|
38
|
+
G200: '#57D9A3',
|
|
39
|
+
G300: '#36B37E',
|
|
40
|
+
G400: '#00875A',
|
|
41
|
+
G500: '#006644',
|
|
42
|
+
B50: '#DEEBFF',
|
|
43
|
+
B75: '#B3D4FF',
|
|
44
|
+
B100: '#4C9AFF',
|
|
45
|
+
B200: '#2684FF',
|
|
46
|
+
B300: '#0065FF',
|
|
47
|
+
B400: '#0052CC',
|
|
48
|
+
B500: '#0747A6',
|
|
49
|
+
P50: '#EAE6FF',
|
|
50
|
+
P75: '#C0B6F2',
|
|
51
|
+
P100: '#998DD9',
|
|
52
|
+
P200: '#8777D9',
|
|
53
|
+
P300: '#6554C0',
|
|
54
|
+
P400: '#5243AA',
|
|
55
|
+
P500: '#403294',
|
|
56
|
+
T50: '#E6FCFF',
|
|
57
|
+
T75: '#B3F5FF',
|
|
58
|
+
T100: '#79E2F2',
|
|
59
|
+
T200: '#00C7E6',
|
|
60
|
+
T300: '#00B8D9',
|
|
61
|
+
T400: '#00A3BF',
|
|
62
|
+
T500: '#008DA6',
|
|
63
|
+
N0: '#FFFFFF',
|
|
64
|
+
N10: '#FAFBFC',
|
|
65
|
+
N20: '#F4F5F7',
|
|
66
|
+
N30: '#EBECF0',
|
|
67
|
+
N40: '#DFE1E6',
|
|
68
|
+
N50: '#C1C7D0',
|
|
69
|
+
N60: '#B3BAC5',
|
|
70
|
+
N70: '#A5ADBA',
|
|
71
|
+
N80: '#97A0AF',
|
|
72
|
+
N90: '#8993A4',
|
|
73
|
+
N100: '#7A869A',
|
|
74
|
+
N200: '#6B778C',
|
|
75
|
+
N300: '#5E6C84',
|
|
76
|
+
N400: '#505F79',
|
|
77
|
+
N500: '#42526E',
|
|
78
|
+
N600: '#344563',
|
|
79
|
+
N700: '#253858',
|
|
80
|
+
N800: '#172B4D',
|
|
81
|
+
N900: '#091E42'
|
|
82
|
+
};
|
|
83
|
+
exports.legacyColorPalette = legacyColorPalette;
|
|
84
|
+
|
|
85
|
+
function findClosetMatchingToken(paletteName) {
|
|
86
|
+
var paletteColor = legacyColorPalette[paletteName];
|
|
87
|
+
|
|
88
|
+
if (!paletteColor) {
|
|
89
|
+
return undefined;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
var tokens = Object.entries(_tokenNames.default).map(function (_ref) {
|
|
93
|
+
var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
|
|
94
|
+
key = _ref2[0],
|
|
95
|
+
value = _ref2[1];
|
|
96
|
+
|
|
97
|
+
try {
|
|
98
|
+
var _diff = deltaE(paletteColor, value);
|
|
99
|
+
|
|
100
|
+
return [key, _diff];
|
|
101
|
+
} catch (e) {
|
|
102
|
+
return [key, 99999];
|
|
103
|
+
}
|
|
104
|
+
}).sort(function (a, b) {
|
|
105
|
+
var left = a[1];
|
|
106
|
+
var right = b[1];
|
|
107
|
+
return left - right;
|
|
108
|
+
});
|
|
109
|
+
|
|
110
|
+
var _tokens$ = (0, _slicedToArray2.default)(tokens[0], 2),
|
|
111
|
+
token = _tokens$[0],
|
|
112
|
+
diff = _tokens$[1];
|
|
113
|
+
|
|
114
|
+
if (diff < 10) {
|
|
115
|
+
return token;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
return undefined;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
function toRgbArray(color) {
|
|
122
|
+
var colr = (0, _chromatism.convert)(color);
|
|
123
|
+
return [colr.rgb.r, colr.rgb.g, colr.rgb.b];
|
|
124
|
+
}
|
|
125
|
+
/**
|
|
126
|
+
* Color difference function ripped from https://stackoverflow.com/a/52453462
|
|
127
|
+
*
|
|
128
|
+
* **Color difference**
|
|
129
|
+
* - <= 1.0 not perceptible by human eyes
|
|
130
|
+
* - 1-2 Perceptible through close observation
|
|
131
|
+
* - 2-10 Perceptible at a glance
|
|
132
|
+
* - 11-49 Colors are more similar than opposite
|
|
133
|
+
* - 100 Colors are opposite
|
|
134
|
+
*/
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
function deltaE(rgbA, rgbB) {
|
|
138
|
+
var labA = rgb2lab(toRgbArray(rgbA));
|
|
139
|
+
var labB = rgb2lab(toRgbArray(rgbB));
|
|
140
|
+
var deltaL = labA[0] - labB[0];
|
|
141
|
+
var deltaA = labA[1] - labB[1];
|
|
142
|
+
var deltaB = labA[2] - labB[2];
|
|
143
|
+
var c1 = Math.sqrt(labA[1] * labA[1] + labA[2] * labA[2]);
|
|
144
|
+
var c2 = Math.sqrt(labB[1] * labB[1] + labB[2] * labB[2]);
|
|
145
|
+
var deltaC = c1 - c2;
|
|
146
|
+
var deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;
|
|
147
|
+
deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);
|
|
148
|
+
var sc = 1.0 + 0.045 * c1;
|
|
149
|
+
var sh = 1.0 + 0.015 * c1;
|
|
150
|
+
var deltaLKlsl = deltaL / 1.0;
|
|
151
|
+
var deltaCkcsc = deltaC / sc;
|
|
152
|
+
var deltaHkhsh = deltaH / sh;
|
|
153
|
+
var i = deltaLKlsl * deltaLKlsl + deltaCkcsc * deltaCkcsc + deltaHkhsh * deltaHkhsh;
|
|
154
|
+
return i < 0 ? 0 : Math.sqrt(i);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
function rgb2lab(rgb) {
|
|
158
|
+
var r = rgb[0] / 255,
|
|
159
|
+
g = rgb[1] / 255,
|
|
160
|
+
b = rgb[2] / 255,
|
|
161
|
+
x,
|
|
162
|
+
y,
|
|
163
|
+
z;
|
|
164
|
+
r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
|
|
165
|
+
g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
|
|
166
|
+
b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
|
|
167
|
+
x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
|
|
168
|
+
y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.0;
|
|
169
|
+
z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
|
|
170
|
+
x = x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787 * x + 16 / 116;
|
|
171
|
+
y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
|
|
172
|
+
z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
|
|
173
|
+
return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
|
|
174
|
+
}
|