diff --git a/.all-contributorsrc b/.all-contributorsrc index 1b55894f9..ea8918520 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -3,9 +3,7 @@ "projectOwner": "tablecheck", "repoType": "github", "repoHost": "https://github.com", - "files": [ - "README.md" - ], + "files": ["README.md"], "imageSize": 100, "commit": false, "commitConvention": "angular", @@ -15,71 +13,49 @@ "name": "Wahid Magdy", "avatar_url": "https://avatars.githubusercontent.com/u/3442546?v=4", "profile": "https://github.com/wahidmagdy", - "contributions": [ - "doc", - "example" - ] + "contributions": ["doc", "example"] }, { "login": "SimeonC", "name": "Simeon Cheeseman", "avatar_url": "https://avatars.githubusercontent.com/u/1085899?v=4", "profile": "https://github.com/SimeonC", - "contributions": [ - "infra", - "example", - "code", - "test", - "doc" - ] + "contributions": ["infra", "example", "code", "test", "doc"] }, { "login": "irmir", "name": "irmir", "avatar_url": "https://avatars.githubusercontent.com/u/59263605?v=4", "profile": "https://github.com/irmir", - "contributions": [ - "example", - "code" - ] + "contributions": ["example", "code"] }, { "login": "gazpachu", "name": "Joan Mira", "avatar_url": "https://avatars.githubusercontent.com/u/1721288?v=4", "profile": "http://joanmira.com/", - "contributions": [ - "doc", - "code" - ] + "contributions": ["doc", "code"] }, { "login": "johnnyshields", "name": "Johnny Shields", "avatar_url": "https://avatars.githubusercontent.com/u/27655?v=4", "profile": "https://github.com/johnnyshields", - "contributions": [ - "doc" - ] + "contributions": ["doc"] }, { "login": "Findmitrey", "name": "Dmitriy", "avatar_url": "https://avatars.githubusercontent.com/u/19979106?v=4", "profile": "https://github.com/Findmitrey", - "contributions": [ - "example", - "code" - ] + "contributions": ["example", "code"] }, { "login": "daniellizik", "name": "Daniel Lizik", "avatar_url": "https://avatars.githubusercontent.com/u/10506366?v=4", "profile": "https://github.com/daniellizik", - "contributions": [ - "code" - ] + "contributions": ["code"] } ], "contributorsPerLine": 6, diff --git a/.gitignore b/.gitignore index 0aa4f5479..2f4980c32 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,4 @@ tsconfig.*.json .@tablecheck .rollup.cache /cache +/.nx diff --git a/.prettierignore b/.prettierignore index 0c9c0d8f1..222af15cb 100644 --- a/.prettierignore +++ b/.prettierignore @@ -8,4 +8,9 @@ coverage assets CHANGELOG.md system/css/*.css -website/src/static/css/fonts.css \ No newline at end of file +website/src/static/css/fonts.css +.nx +.gritmodules +storybook-static +tmp +.@tablecheck \ No newline at end of file diff --git a/auditjs.json b/auditjs.json index 69fa2e3d2..028dc7704 100644 --- a/auditjs.json +++ b/auditjs.json @@ -1276,6 +1276,86 @@ "reference": "https://ossindex.sonatype.org/vulnerability/CVE-2024-28863?component-type=npm&component-name=tar&utm_source=auditjs&utm_medium=integration&utm_content=4.0.45" } ] + }, + { + "coordinates": "pkg:npm/micromatch@4.0.5", + "description": "Glob matching for javascript/node.js. A replacement and faster alternative to minimatch and multimatch.", + "reference": "https://ossindex.sonatype.org/component/pkg:npm/micromatch@4.0.5?utm_source=auditjs&utm_medium=integration&utm_content=4.0.45", + "vulnerabilities": [ + { + "id": "CVE-2024-4067", + "title": "[CVE-2024-4067] CWE-1333", + "description": "The NPM package `micromatch` is vulnerable to Regular Expression Denial of Service (ReDoS). The vulnerability occurs in `micromatch.braces()` in `index.js` because the pattern `.*` will greedily match anything. By passing a malicious payload, the pattern matching will keep backtracking to the input while it doesn't find the closing bracket. As the input size increases, the consumption time will also increase until it causes the application to hang or slow down. There was a merged fix but further testing shows the issue persists. This issue should be mitigated by using a safe pattern that won't start backtracking the regular expression due to greedy matching.\n", + "cvssScore": 7.5, + "cvssVector": "CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:N/I:N/A:H", + "cve": "CVE-2024-4067", + "reference": "https://ossindex.sonatype.org/vulnerability/CVE-2024-4067?component-type=npm&component-name=micromatch&utm_source=auditjs&utm_medium=integration&utm_content=4.0.45" + } + ] + }, + { + "coordinates": "pkg:npm/braces@3.0.2", + "description": "Bash-like brace expansion, implemented in JavaScript. Safer than other brace expansion libs, with complete support for the Bash 4.3 braces specification, without sacrificing speed.", + "reference": "https://ossindex.sonatype.org/component/pkg:npm/braces@3.0.2?utm_source=auditjs&utm_medium=integration&utm_content=4.0.45", + "vulnerabilities": [ + { + "id": "CVE-2024-4068", + "title": "[CVE-2024-4068] CWE-1050", + "description": "The NPM package `braces` fails to limit the number of characters it can handle, which could lead to Memory Exhaustion. In `lib/parse.js,` if a malicious user sends \"imbalanced braces\" as input, the parsing will enter a loop, which will cause the program to start allocating heap memory without freeing it at any moment of the loop. Eventually, the JavaScript heap limit is reached, and the program will crash.\n", + "cvssScore": 7.5, + "cvssVector": "CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:N/I:N/A:H", + "cve": "CVE-2024-4068", + "reference": "https://ossindex.sonatype.org/vulnerability/CVE-2024-4068?component-type=npm&component-name=braces&utm_source=auditjs&utm_medium=integration&utm_content=4.0.45" + } + ] + }, + { + "coordinates": "pkg:npm/micromatch@3.1.10", + "description": "Glob matching for javascript/node.js. A replacement and faster alternative to minimatch and multimatch.", + "reference": "https://ossindex.sonatype.org/component/pkg:npm/micromatch@3.1.10?utm_source=auditjs&utm_medium=integration&utm_content=4.0.45", + "vulnerabilities": [ + { + "id": "CVE-2024-4067", + "title": "[CVE-2024-4067] CWE-1333", + "description": "The NPM package `micromatch` is vulnerable to Regular Expression Denial of Service (ReDoS). The vulnerability occurs in `micromatch.braces()` in `index.js` because the pattern `.*` will greedily match anything. By passing a malicious payload, the pattern matching will keep backtracking to the input while it doesn't find the closing bracket. As the input size increases, the consumption time will also increase until it causes the application to hang or slow down. There was a merged fix but further testing shows the issue persists. This issue should be mitigated by using a safe pattern that won't start backtracking the regular expression due to greedy matching.\n", + "cvssScore": 7.5, + "cvssVector": "CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:N/I:N/A:H", + "cve": "CVE-2024-4067", + "reference": "https://ossindex.sonatype.org/vulnerability/CVE-2024-4067?component-type=npm&component-name=micromatch&utm_source=auditjs&utm_medium=integration&utm_content=4.0.45" + } + ] + }, + { + "coordinates": "pkg:npm/braces@2.3.2", + "description": "Bash-like brace expansion, implemented in JavaScript. Safer than other brace expansion libs, with complete support for the Bash 4.3 braces specification, without sacrificing speed.", + "reference": "https://ossindex.sonatype.org/component/pkg:npm/braces@2.3.2?utm_source=auditjs&utm_medium=integration&utm_content=4.0.45", + "vulnerabilities": [ + { + "id": "CVE-2024-4068", + "title": "[CVE-2024-4068] CWE-1050", + "description": "The NPM package `braces` fails to limit the number of characters it can handle, which could lead to Memory Exhaustion. In `lib/parse.js,` if a malicious user sends \"imbalanced braces\" as input, the parsing will enter a loop, which will cause the program to start allocating heap memory without freeing it at any moment of the loop. Eventually, the JavaScript heap limit is reached, and the program will crash.\n", + "cvssScore": 7.5, + "cvssVector": "CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:N/I:N/A:H", + "cve": "CVE-2024-4068", + "reference": "https://ossindex.sonatype.org/vulnerability/CVE-2024-4068?component-type=npm&component-name=braces&utm_source=auditjs&utm_medium=integration&utm_content=4.0.45" + } + ] + }, + { + "coordinates": "pkg:npm/ejs@3.1.9", + "description": "Embedded JavaScript templates", + "reference": "https://ossindex.sonatype.org/component/pkg:npm/ejs@3.1.9?utm_source=auditjs&utm_medium=integration&utm_content=4.0.45", + "vulnerabilities": [ + { + "id": "CVE-2024-33883", + "title": "[CVE-2024-33883] CWE-1321", + "description": "The ejs (aka Embedded JavaScript templates) package before 3.1.10 for Node.js lacks certain pollution protection.", + "cvssScore": 8.6, + "cvssVector": "CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:L/I:L/A:H", + "cve": "CVE-2024-33883", + "reference": "https://ossindex.sonatype.org/vulnerability/CVE-2024-33883?component-type=npm&component-name=ejs&utm_source=auditjs&utm_medium=integration&utm_content=4.0.45" + } + ] } ], "ignore": [ @@ -1518,6 +1598,15 @@ }, { "id": "CVE-2024-28863" + }, + { + "id": "CVE-2024-4067" + }, + { + "id": "CVE-2024-4068" + }, + { + "id": "CVE-2024-33883" } ] } diff --git a/localNodeModulesSync.mjs b/localNodeModulesSync.mjs new file mode 100644 index 000000000..7c5630d1b --- /dev/null +++ b/localNodeModulesSync.mjs @@ -0,0 +1,34 @@ +/** + * USAGE: node localNodeModulesSync.mjs ... + * Run this after a build and it will copy the build lib folders + * into the node_modules of the specified target project folders. + */ +import path from 'path'; + +import fs from 'fs-extra'; + +const systemDir = path.join(process.cwd(), 'system'); + +const targets = process.argv.slice(2).map((t) => path.resolve(t)); + +const folders = fs + .readdirSync(systemDir, { withFileTypes: true }) + .filter((dirent) => dirent.isDirectory()) + .map((dirent) => dirent.name); + +for (const target of targets) { + for (const folder of folders) { + const root = path.join(systemDir, folder); + const packageName = fs.readJsonSync(path.join(root, 'package.json')).name; + const dest = path.join(target, 'node_modules', packageName, 'lib'); + if (!fs.existsSync(dest)) { + continue; + } + console.log(`Copying ${packageName} to ${target}`); + fs.emptyDirSync(dest); + fs.copySync(path.join(root, 'lib'), dest, { overwrite: true }); + } + console.log( + 'Stop any dev servers and run `rm -rf node_modules/.vite` to see changes' + ); +} diff --git a/nx.json b/nx.json new file mode 100644 index 000000000..26dd23e76 --- /dev/null +++ b/nx.json @@ -0,0 +1,25 @@ +{ + "tasksRunnerOptions": { + "default": { + "runner": "nx/tasks-runners/default", + "options": { + "cacheableOperations": ["build", "format", "lint", "test", "tsc"] + } + } + }, + "targetDefaults": { + "build": { + "dependsOn": ["^build"], + "outputs": ["{projectRoot}/lib"] + }, + "lint": { + "dependsOn": ["^lint"] + }, + "test": { + "dependsOn": ["^test"] + }, + "tsc": { + "dependsOn": ["^tsc"] + } + } +} diff --git a/package-lock.json b/package-lock.json index b8742d990..62eaabf54 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,6 +35,7 @@ "auto": "11.1.6", "babel-eslint": "11.0.0-beta.2", "babel-preset-razzle": "4.2.18", + "chokidar": "3.5.3", "enum-for": "0.0.5", "execa": "6.1.0", "fs-extra": "11.1.0", @@ -48,6 +49,7 @@ "typescript": "4.9.5" }, "devDependencies": { + "chalk": "5.2.0", "chromatic": "6.17.4" } }, @@ -163,6 +165,21 @@ } } }, + "node_modules/@auto-it/core/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/@auto-it/first-time-contributor": { "version": "11.1.6", "resolved": "https://registry.npmjs.org/@auto-it/first-time-contributor/-/first-time-contributor-11.1.6.tgz", @@ -2659,6 +2676,21 @@ "node": ">=v14" } }, + "node_modules/@commitlint/format/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/@commitlint/is-ignored": { "version": "17.4.4", "resolved": "https://registry.npmjs.org/@commitlint/is-ignored/-/is-ignored-17.4.4.tgz", @@ -2714,6 +2746,21 @@ "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" }, + "node_modules/@commitlint/load/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/@commitlint/load/node_modules/cosmiconfig": { "version": "8.1.3", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.1.3.tgz", @@ -2921,6 +2968,21 @@ "node": ">=v14" } }, + "node_modules/@commitlint/types/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/@cspotcode/source-map-support": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", @@ -3040,6 +3102,22 @@ } } }, + "node_modules/@emotion/jest/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "optional": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/@emotion/memoize": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", @@ -3465,6 +3543,21 @@ "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" } }, + "node_modules/@jest/console/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/@jest/core": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/@jest/core/-/core-27.5.1.tgz", @@ -3511,6 +3604,21 @@ } } }, + "node_modules/@jest/core/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/@jest/environment": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-27.5.1.tgz", @@ -3606,6 +3714,21 @@ "concat-map": "0.0.1" } }, + "node_modules/@jest/reporters/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/@jest/reporters/node_modules/glob": { "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", @@ -3729,6 +3852,21 @@ "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" } }, + "node_modules/@jest/transform/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/@jest/transform/node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -3752,6 +3890,21 @@ "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" } }, + "node_modules/@jest/types/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz", @@ -3886,6 +4039,21 @@ "node": "^14.15.0 || >=16.0.0" } }, + "node_modules/@lerna/child-process/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/@lerna/child-process/node_modules/execa": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz", @@ -4030,6 +4198,21 @@ "node": "^14.15.0 || >=16.0.0" } }, + "node_modules/@lerna/collect-uncommitted/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/@lerna/collect-updates": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/@lerna/collect-updates/-/collect-updates-6.4.1.tgz", @@ -4691,6 +4874,21 @@ "node": "^14.15.0 || >=16.0.0" } }, + "node_modules/@lerna/listable/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/@lerna/log-packed": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/@lerna/log-packed/-/log-packed-6.4.1.tgz", @@ -5362,6 +5560,21 @@ "concat-map": "0.0.1" } }, + "node_modules/@lerna/version/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/@lerna/version/node_modules/load-json-file": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-6.2.0.tgz", @@ -6534,6 +6747,22 @@ "url": "https://opencollective.com/storybook" } }, + "node_modules/@storybook/cli/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "optional": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/@storybook/cli/node_modules/commander": { "version": "6.2.1", "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz", @@ -6915,6 +7144,22 @@ "concat-map": "0.0.1" } }, + "node_modules/@storybook/core-common/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "optional": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/@storybook/core-common/node_modules/cosmiconfig": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz", @@ -7181,6 +7426,22 @@ "node": ">=10" } }, + "node_modules/@storybook/node-logger/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "optional": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/@storybook/node-logger/node_modules/gauge": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz", @@ -7305,6 +7566,22 @@ "url": "https://opencollective.com/storybook" } }, + "node_modules/@storybook/telemetry/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "optional": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/@storybook/telemetry/node_modules/find-up": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", @@ -7719,6 +7996,35 @@ "concat-map": "0.0.1" } }, + "node_modules/@tablecheck/scripts/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@tablecheck/scripts/node_modules/chalk/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, "node_modules/@tablecheck/scripts/node_modules/diff-sequences": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz", @@ -9212,6 +9518,21 @@ "node": ">=4" } }, + "node_modules/all-contributors-cli/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/all-contributors-cli/node_modules/cliui": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", @@ -9981,6 +10302,21 @@ "node": ">=10.x" } }, + "node_modules/auto/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/autoprefixer": { "version": "10.4.14", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz", @@ -10168,6 +10504,21 @@ "@babel/core": "^7.8.0" } }, + "node_modules/babel-jest/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/babel-loader": { "version": "8.3.0", "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.3.0.tgz", @@ -10400,6 +10751,21 @@ "chalk": "^4.1.0" } }, + "node_modules/babel-preset-razzle/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/bail": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz", @@ -10536,7 +10902,6 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "optional": true, "engines": { "node": ">=8" } @@ -10716,6 +11081,22 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/boxen/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "optional": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/boxen/node_modules/type-fest": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", @@ -11232,15 +11613,12 @@ } }, "node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz", + "integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==", + "dev": true, "engines": { - "node": ">=10" + "node": "^12.17.0 || ^14.13 || >=16.0.0" }, "funding": { "url": "https://github.com/chalk/chalk?sponsor=1" @@ -11337,7 +11715,6 @@ "url": "https://paulmillr.com/funding/" } ], - "optional": true, "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -11358,7 +11735,6 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "optional": true, "dependencies": { "is-glob": "^4.0.1" }, @@ -15401,6 +15777,21 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/eslint-formatter-pretty/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/eslint-import-resolver-babel-module": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/eslint-import-resolver-babel-module/-/eslint-import-resolver-babel-module-5.3.2.tgz", @@ -15925,6 +16316,21 @@ "concat-map": "0.0.1" } }, + "node_modules/eslint/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/eslint/node_modules/eslint-scope": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz", @@ -16325,6 +16731,35 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/expect/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/expect/node_modules/chalk/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, "node_modules/expect/node_modules/diff-sequences": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz", @@ -19414,6 +19849,21 @@ "node": ">=12.0.0" } }, + "node_modules/inquirer/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/inquirer/node_modules/ora": { "version": "5.4.1", "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz", @@ -19616,7 +20066,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "optional": true, "dependencies": { "binary-extensions": "^2.0.0" }, @@ -20433,6 +20882,21 @@ "concat-map": "0.0.1" } }, + "node_modules/jake/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/jake/node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -20611,6 +21075,35 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/jest-circus/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-circus/node_modules/chalk/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, "node_modules/jest-circus/node_modules/diff-sequences": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz", @@ -20693,6 +21186,21 @@ } } }, + "node_modules/jest-cli/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/jest-cli/node_modules/yargs": { "version": "16.2.0", "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz", @@ -20772,6 +21280,35 @@ "concat-map": "0.0.1" } }, + "node_modules/jest-config/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-config/node_modules/chalk/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, "node_modules/jest-config/node_modules/glob": { "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", @@ -20829,6 +21366,21 @@ "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0" } }, + "node_modules/jest-diff/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/jest-diff/node_modules/jest-get-type": { "version": "28.0.2", "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-28.0.2.tgz", @@ -20874,6 +21426,35 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/jest-each/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-each/node_modules/chalk/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, "node_modules/jest-each/node_modules/pretty-format": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz", @@ -21980,6 +22561,35 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/jest-jasmine2/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-jasmine2/node_modules/chalk/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, "node_modules/jest-jasmine2/node_modules/diff-sequences": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz", @@ -22101,6 +22711,21 @@ "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0" } }, + "node_modules/jest-matcher-utils/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/jest-matcher-utils/node_modules/jest-get-type": { "version": "28.0.2", "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-28.0.2.tgz", @@ -22139,6 +22764,35 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/jest-message-util/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-message-util/node_modules/chalk/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, "node_modules/jest-message-util/node_modules/pretty-format": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz", @@ -22221,6 +22875,21 @@ "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" } }, + "node_modules/jest-resolve/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/jest-runner": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-27.5.1.tgz", @@ -22252,6 +22921,21 @@ "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" } }, + "node_modules/jest-runner/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/jest-runtime": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-27.5.1.tgz", @@ -22293,6 +22977,21 @@ "concat-map": "0.0.1" } }, + "node_modules/jest-runtime/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/jest-runtime/node_modules/execa": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz", @@ -22460,6 +23159,35 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/jest-snapshot/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-snapshot/node_modules/chalk/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, "node_modules/jest-snapshot/node_modules/diff-sequences": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz", @@ -22533,6 +23261,21 @@ "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" } }, + "node_modules/jest-util/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/jest-validate": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-27.5.1.tgz", @@ -22571,6 +23314,35 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/jest-validate/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jest-validate/node_modules/chalk/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, "node_modules/jest-validate/node_modules/pretty-format": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz", @@ -22615,6 +23387,21 @@ "url": "https://github.com/chalk/ansi-regex?sponsor=1" } }, + "node_modules/jest-watch-typeahead/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/jest-watch-typeahead/node_modules/char-regex": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.1.tgz", @@ -22680,6 +23467,21 @@ "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" } }, + "node_modules/jest-watcher/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/jest-worker": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz", @@ -22810,6 +23612,21 @@ "node": ">=0.10.0" } }, + "node_modules/jscodeshift/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/jscodeshift/node_modules/fill-range": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz", @@ -23019,6 +23836,21 @@ "node": ">=10" } }, + "node_modules/json-fixer/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/json-parse-better-errors": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz", @@ -23957,6 +24789,21 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/log-symbols/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/log-update": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz", @@ -26057,6 +26904,21 @@ "concat-map": "0.0.1" } }, + "node_modules/nx/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/nx/node_modules/dotenv": { "version": "10.0.0", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", @@ -30451,6 +31313,22 @@ "@types/yargs-parser": "*" } }, + "node_modules/razzle-dev-utils/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "optional": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/razzle-dev-utils/node_modules/jest-message-util": { "version": "26.6.2", "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.6.2.tgz", @@ -30831,6 +31709,22 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/razzle/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "optional": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/razzle/node_modules/cjs-module-lexer": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-0.6.0.tgz", @@ -32819,7 +33713,6 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "optional": true, "dependencies": { "picomatch": "^2.2.1" }, @@ -37813,6 +38706,22 @@ "url": "https://github.com/yeoman/update-notifier?sponsor=1" } }, + "node_modules/update-notifier/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "optional": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", @@ -38609,6 +39518,21 @@ "node": ">=0.4.0" } }, + "node_modules/webpack-bundle-analyzer/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/webpack-bundle-analyzer/node_modules/commander": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", @@ -39990,6 +40914,22 @@ "webpack": "3 || 4 || 5" } }, + "node_modules/webpackbar/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "optional": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/websocket-driver": { "version": "0.7.4", "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz", @@ -40592,6 +41532,17 @@ "type-fest": "^0.21.1", "typescript-memoize": "^1.0.0-alpha.3", "url-join": "^4.0.0" + }, + "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + } } }, "@auto-it/first-time-contributor": { @@ -42310,6 +43261,17 @@ "requires": { "@commitlint/types": "^17.4.4", "chalk": "^4.1.0" + }, + "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + } } }, "@commitlint/is-ignored": { @@ -42358,6 +43320,15 @@ "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "cosmiconfig": { "version": "8.1.3", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.1.3.tgz", @@ -42504,6 +43475,17 @@ "integrity": "sha512-amRN8tRLYOsxRr6mTnGGGvB5EmW/4DDjLMgiwK3CCVEmN6Sr/6xePGEpWaspKkckILuUORCwe6VfDBw6uj4axQ==", "requires": { "chalk": "^4.1.0" + }, + "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + } } }, "@cspotcode/source-map-support": { @@ -42601,6 +43583,18 @@ "chalk": "^4.1.0", "specificity": "^0.4.1", "stylis": "4.1.3" + }, + "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + } } }, "@emotion/memoize": { @@ -42916,6 +43910,17 @@ "jest-message-util": "^27.5.1", "jest-util": "^27.5.1", "slash": "^3.0.0" + }, + "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + } } }, "@jest/core": { @@ -42951,6 +43956,17 @@ "rimraf": "^3.0.0", "slash": "^3.0.0", "strip-ansi": "^6.0.0" + }, + "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + } } }, "@jest/environment": { @@ -43028,6 +44044,15 @@ "concat-map": "0.0.1" } }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "glob": { "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", @@ -43125,6 +44150,15 @@ "write-file-atomic": "^3.0.0" }, "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -43142,6 +44176,17 @@ "@types/node": "*", "@types/yargs": "^16.0.0", "chalk": "^4.0.0" + }, + "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + } } }, "@jridgewell/gen-mapping": { @@ -43254,6 +44299,15 @@ "strong-log-transformer": "^2.1.0" }, "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "execa": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz", @@ -43358,6 +44412,17 @@ "@lerna/child-process": "6.4.1", "chalk": "^4.1.0", "npmlog": "^6.0.2" + }, + "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + } } }, "@lerna/collect-updates": { @@ -43884,6 +44949,17 @@ "@lerna/query-graph": "6.4.1", "chalk": "^4.1.0", "columnify": "^1.6.0" + }, + "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + } } }, "@lerna/log-packed": { @@ -44438,6 +45514,15 @@ "concat-map": "0.0.1" } }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "load-json-file": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-6.2.0.tgz", @@ -45296,6 +46381,16 @@ "update-notifier": "^5.0.1" }, "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "commander": { "version": "6.2.1", "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz", @@ -45599,6 +46694,16 @@ "concat-map": "0.0.1" } }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "cosmiconfig": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz", @@ -45797,6 +46902,16 @@ "readable-stream": "^3.6.0" } }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "gauge": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz", @@ -45897,6 +47012,16 @@ "regenerator-runtime": "^0.13.7" }, "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "find-up": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", @@ -46213,6 +47338,25 @@ "concat-map": "0.0.1" } }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "requires": { + "color-convert": "^2.0.1" + } + } + } + }, "diff-sequences": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz", @@ -47490,6 +48634,15 @@ "yargs": "^15.0.1" }, "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "cliui": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", @@ -48073,6 +49226,17 @@ "signale": "^1.4.0", "terminal-link": "^2.1.1", "tslib": "2.1.0" + }, + "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + } } }, "autoprefixer": { @@ -48198,6 +49362,17 @@ "chalk": "^4.0.0", "graceful-fs": "^4.2.9", "slash": "^3.0.0" + }, + "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + } } }, "babel-loader": { @@ -48384,6 +49559,17 @@ "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "chalk": "^4.1.0" + }, + "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + } } }, "bail": { @@ -48486,8 +49672,7 @@ "binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "optional": true + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==" }, "bindings": { "version": "1.5.0", @@ -48634,6 +49819,16 @@ "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==", "optional": true }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "type-fest": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", @@ -49026,13 +50221,10 @@ "optional": true }, "chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz", + "integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==", + "dev": true }, "char-regex": { "version": "1.0.2", @@ -49095,7 +50287,6 @@ "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", - "optional": true, "requires": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -49111,7 +50302,6 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "optional": true, "requires": { "is-glob": "^4.0.1" } @@ -52245,6 +53435,15 @@ "concat-map": "0.0.1" } }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "eslint-scope": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz", @@ -52344,6 +53543,17 @@ "plur": "^4.0.0", "string-width": "^4.2.0", "supports-hyperlinks": "^2.0.0" + }, + "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + } } }, "eslint-import-resolver-babel-module": { @@ -52974,6 +54184,25 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==" }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "requires": { + "color-convert": "^2.0.1" + } + } + } + }, "diff-sequences": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz", @@ -55422,6 +56651,15 @@ "wrap-ansi": "^7.0.0" }, "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "ora": { "version": "5.4.1", "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz", @@ -55570,7 +56808,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "optional": true, "requires": { "binary-extensions": "^2.0.0" } @@ -56135,6 +57372,15 @@ "concat-map": "0.0.1" } }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -56255,6 +57501,25 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==" }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "requires": { + "color-convert": "^2.0.1" + } + } + } + }, "diff-sequences": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz", @@ -56313,6 +57578,15 @@ "yargs": "^16.2.0" }, "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "yargs": { "version": "16.2.0", "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz", @@ -56374,6 +57648,25 @@ "concat-map": "0.0.1" } }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "requires": { + "color-convert": "^2.0.1" + } + } + } + }, "glob": { "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", @@ -56418,6 +57711,15 @@ "pretty-format": "^28.1.3" }, "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "jest-get-type": { "version": "28.0.2", "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-28.0.2.tgz", @@ -56450,6 +57752,25 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==" }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "requires": { + "color-convert": "^2.0.1" + } + } + } + }, "pretty-format": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz", @@ -57331,6 +58652,25 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==" }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "requires": { + "color-convert": "^2.0.1" + } + } + } + }, "diff-sequences": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz", @@ -57425,6 +58765,15 @@ "pretty-format": "^28.1.3" }, "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "jest-get-type": { "version": "28.0.2", "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-28.0.2.tgz", @@ -57453,6 +58802,25 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==" }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "requires": { + "color-convert": "^2.0.1" + } + } + } + }, "pretty-format": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz", @@ -57499,6 +58867,17 @@ "resolve": "^1.20.0", "resolve.exports": "^1.1.0", "slash": "^3.0.0" + }, + "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + } } }, "jest-resolve-dependencies": { @@ -57537,6 +58916,17 @@ "jest-worker": "^27.5.1", "source-map-support": "^0.5.6", "throat": "^6.0.1" + }, + "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + } } }, "jest-runtime": { @@ -57577,6 +58967,15 @@ "concat-map": "0.0.1" } }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "execa": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz", @@ -57695,6 +59094,25 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==" }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "requires": { + "color-convert": "^2.0.1" + } + } + } + }, "diff-sequences": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz", @@ -57750,6 +59168,17 @@ "ci-info": "^3.2.0", "graceful-fs": "^4.2.9", "picomatch": "^2.2.3" + }, + "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + } } }, "jest-validate": { @@ -57775,6 +59204,25 @@ "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==" }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "requires": { + "color-convert": "^2.0.1" + } + } + } + }, "pretty-format": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz", @@ -57806,6 +59254,15 @@ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==" }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "char-regex": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.1.tgz", @@ -57847,6 +59304,17 @@ "chalk": "^4.0.0", "jest-util": "^27.5.1", "string-length": "^4.0.1" + }, + "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + } } }, "jest-worker": { @@ -57952,6 +59420,15 @@ } } }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "fill-range": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz", @@ -58120,6 +59597,17 @@ "@babel/runtime": "^7.18.9", "chalk": "^4.1.2", "pegjs": "^0.10.0" + }, + "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + } } }, "json-parse-better-errors": { @@ -58889,6 +60377,17 @@ "requires": { "chalk": "^4.1.0", "is-unicode-supported": "^0.1.0" + }, + "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + } } }, "log-update": { @@ -60556,6 +62055,15 @@ "concat-map": "0.0.1" } }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "dotenv": { "version": "10.0.0", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", @@ -64115,6 +65623,16 @@ "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==", "optional": true }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "cjs-module-lexer": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-0.6.0.tgz", @@ -65074,6 +66592,16 @@ "@types/yargs-parser": "*" } }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "jest-message-util": { "version": "26.6.2", "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.6.2.tgz", @@ -65755,7 +67283,6 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "optional": true, "requires": { "picomatch": "^2.2.1" } @@ -69657,6 +71184,18 @@ "semver": "^7.3.4", "semver-diff": "^3.1.1", "xdg-basedir": "^4.0.0" + }, + "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + } } }, "uri-js": { @@ -70703,6 +72242,15 @@ "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz", "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==" }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "commander": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", @@ -71390,6 +72938,18 @@ "consola": "^2.15.3", "pretty-time": "^1.1.0", "std-env": "^3.0.1" + }, + "dependencies": { + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + } } }, "websocket-driver": { diff --git a/package.json b/package.json index 65415fdf8..b025c6cad 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "build": "lerna run build", "build:storybook": "lerna run build --scope=stories", "build:website": "lerna run build --scope=website", + "build:watch": "node ./watcher.mjs", "coverage-summary": "tablecheck-scripts coverage-summary", "format": "prettier -w -u *", "postinstall": "husky install && lerna bootstrap", @@ -58,6 +59,7 @@ "auto": "11.1.6", "babel-eslint": "11.0.0-beta.2", "babel-preset-razzle": "4.2.18", + "chokidar": "3.5.3", "enum-for": "0.0.5", "execa": "6.1.0", "fs-extra": "11.1.0", @@ -71,6 +73,7 @@ "typescript": "4.9.5" }, "devDependencies": { + "chalk": "5.2.0", "chromatic": "6.17.4" }, "version": "", diff --git a/system/.eslintrc.js b/system/.eslintrc.js index 2abe1c2b2..36efeff4d 100644 --- a/system/.eslintrc.js +++ b/system/.eslintrc.js @@ -1,6 +1,16 @@ module.exports = { extends: ['@tablecheck/eslint-config'], rules: { - 'jsx-a11y/anchor-has-content': 'off' - } + 'jsx-a11y/anchor-has-content': 'off', + 'react/button-has-type': 'off' + }, + overrides: [ + { + files: ['./*/src/components/*.tsx'], + rules: { + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/naming-convention': 'off' + } + } + ] }; diff --git a/system/core/package-lock.json b/system/core/package-lock.json index 42612cb0d..c5db40cf0 100644 --- a/system/core/package-lock.json +++ b/system/core/package-lock.json @@ -8,8 +8,12 @@ "name": "@tablecheck/tablekit-core", "version": "2.0.0", "license": "MIT", + "dependencies": { + "csstype": "3.1.1" + }, "devDependencies": { "@emotion/react": "11.10.6", + "chalk": "5.2.0", "fs-extra": "11.1.0", "lodash": "4.17.21", "pluralize": "8.0.0", @@ -73,6 +77,29 @@ "node": ">=6.9.0" } }, + "node_modules/@babel/highlight/node_modules/chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "dependencies": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/highlight/node_modules/escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "dev": true, + "engines": { + "node": ">=0.8.0" + } + }, "node_modules/@babel/runtime": { "version": "7.21.0", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz", @@ -256,26 +283,15 @@ } }, "node_modules/chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, - "dependencies": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/chalk/node_modules/escape-string-regexp": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz", + "integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==", "dev": true, "engines": { - "node": ">=0.8.0" + "node": "^12.17.0 || ^14.13 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" } }, "node_modules/color-convert": { @@ -318,8 +334,7 @@ "node_modules/csstype": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", - "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==", - "dev": true + "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==" }, "node_modules/error-ex": { "version": "1.3.2", @@ -701,6 +716,25 @@ "@babel/helper-validator-identifier": "^7.18.6", "chalk": "^2.0.0", "js-tokens": "^4.0.0" + }, + "dependencies": { + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, + "escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "dev": true + } } }, "@babel/runtime": { @@ -859,23 +893,10 @@ "dev": true }, "chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, - "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "dependencies": { - "escape-string-regexp": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", - "dev": true - } - } + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz", + "integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==", + "dev": true }, "color-convert": { "version": "1.9.3", @@ -914,8 +935,7 @@ "csstype": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", - "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==", - "dev": true + "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==" }, "error-ex": { "version": "1.3.2", diff --git a/system/core/package.json b/system/core/package.json index 1071f9378..dc512c20c 100644 --- a/system/core/package.json +++ b/system/core/package.json @@ -14,7 +14,7 @@ "scripts": { "audit": "tablecheck-scripts auditjs", "audit:ci": "tablecheck-scripts auditjs --ci", - "build": "npm run update:exports && SKIP_PREFLIGHT_CHECK=true tablecheck-scripts build-lib", + "build": "npm run update:exports && SKIP_PREFLIGHT_CHECK=true tablecheck-scripts build-lib && npm run update:components", "build:netlify": "SKIP_PREFLIGHT_CHECK=true tablecheck-scripts build-lib", "coverage-summary": "tablecheck-scripts coverage-summary", "format": "tablecheck-scripts lint --fix --skip-typescript", @@ -24,11 +24,16 @@ "test:watch": "tablecheck-scripts test --env=jsdom", "tsc": "tablecheck-scripts tsc", "tsc:watch": "tablecheck-scripts tsc -w", + "update:components": "node scripts/generateComponents.mjs", "update:exports": "node scripts/generateIndex.mjs", "update:figma": "node scripts/updateFromFigma.mjs" }, + "dependencies": { + "csstype": "3.1.1" + }, "devDependencies": { "@emotion/react": "11.10.6", + "chalk": "5.2.0", "fs-extra": "11.1.0", "lodash": "4.17.21", "pluralize": "8.0.0", diff --git a/system/core/scripts/generateComponents.mjs b/system/core/scripts/generateComponents.mjs new file mode 100644 index 000000000..ac9feec3d --- /dev/null +++ b/system/core/scripts/generateComponents.mjs @@ -0,0 +1,456 @@ +// eslint-disable-next-line eslint-comments/disable-enable-pair +/* eslint-disable max-classes-per-file, max-lines */ +import path from 'path'; + +import fs from 'fs-extra'; + +import { prettierWrite } from './prettierWrite.mjs'; + +if (process.env.CI) process.exit(0); + +const cssOutputFolderPath = path.resolve(process.cwd(), '../react-css'); +const reactOutputFolderPath = path.resolve(process.cwd(), '../react'); + +function capitalize(str) { + return str.charAt(0).toUpperCase() + str.slice(1); +} + +class ComponentBuilder { + static headerComment = `/** + * DO NOT EDIT: This file is generated in the post-build step of @tablecheck/tablekit-core + * If you need to provide more "structure" to this component move it to the 'structuredComponents' folder + */`; + + get imports() { + return [ + `import { ${this.importKey} } from '@tablecheck/tablekit-core';`, + `import * as React from 'react';` + ]; + } + + get localImports() { + const imports = []; + if (this.configurableProps.length) { + imports.push(`import { getConfigDefault } from '../config';`); + } + return imports; + } + + get pascalImportKey() { + return capitalize(this.importKey); + } + + get fileName() { + return `${this.pascalImportKey}.tsx`; + } + + get elementType() { + return `HTML${this.reactElementType}Element`; + } + + get reactHtmlAttributesType() { + if (['span', 'div'].includes(this.element)) + return `React.HTMLAttributes<${this.elementType}>`; + return `React.${ + this.reactElementType === 'TextArea' ? 'Textarea' : this.reactElementType + }HTMLAttributes<${this.elementType}>`; + } + + get reactElementType() { + if (this.element === 'a') return 'Anchor'; + if (this.element === 'textarea') return 'TextArea'; + return capitalize(this.element); + } + + constructor(outputFolderPath, importedKey, importedValues) { + this.fixedProps = []; + this.importKey = importedKey; + this.element = importedValues.element || 'div'; + const defaultProps = importedValues.defaultProps + ? { ...importedValues.defaultProps } + : {}; + this.defaultProps = Object.entries(defaultProps); + this.configurableProps = Object.entries( + importedValues.configurableDefaultProps || {} + ); + this.filePath = path.join( + outputFolderPath, + 'src/components', + this.fileName + ); + fs.emptyDirSync(path.join(outputFolderPath, 'src/components')); + this.structuredFileNames = fs.readdirSync( + path.join(outputFolderPath, 'src/structuredComponents') + ); + } + + async build() { + if (!this.isValidComponentImport()) return; + await prettierWrite(this.filePath, this.buildFileContent().join('\n')); + } + + initFileContent() { + const content = [ + ComponentBuilder.headerComment, + ...this.imports, + '', + ...this.localImports + ]; + if (this.localImports.length) { + content.push(''); + } + content.push(''); + return content; + } + + getBasePropsType() { + return this.hasVariants() ? `Omit` : 'Props'; + } + + isValidComponentImport() { + return !this.structuredFileNames.includes(this.fileName); + } + + hasVariants() { + return ( + typeof this.variantStyles === 'object' && + Object.keys(this.variantStyles).length + ); + } + + // eslint-disable-next-line class-methods-use-this + formatKey(key) { + if (key.match(/[^a-zA-Z0-9]/)) { + return `['${key}']`; + } + return `.${key}`; + } + + getPropExport() { + return `export type Props = ${this.importKey}.${ + this.defaultProps.length ? 'DefaultedProps' : 'Props' + } & ${this.reactHtmlAttributesType};`; + } + + writeForwardRefComponent({ + varName, + elementName, + omitVariants, + displayName, + fixedProps = this.fixedProps || [] + }) { + return `export const ${varName} = ${this.writeForwardRefComponentFunction({ + varName, + elementName, + omitVariants, + displayName, + fixedProps + })}; + ${varName}.displayName = \`${displayName || varName}\`;`; + } + + writeForwardRefComponentFunction({ + elementName, + omitVariants, + fixedProps: fixedPropsArg = this.fixedProps || [] + }) { + const fixedProps = [...fixedPropsArg]; + this.defaultProps.forEach(([key]) => { + fixedProps.push( + `${key}={props${this.formatKey(key)} ?? (${ + this.importKey + }.defaultProps${this.formatKey(key)} as never)}` + ); + }); + if ( + this.element === 'button' && + !this.defaultProps.find(([key]) => key === 'type') + ) { + fixedProps.push(`type="button" `); + } + this.configurableProps.forEach(([propKey, configKey]) => { + fixedProps.push( + `${propKey}={props${this.formatKey( + propKey + )} ?? getConfigDefault('${configKey}')}` + ); + }); + const propsType = omitVariants ? 'Omit' : 'Props'; + return `React.forwardRef<${this.elementType}, ${propsType} & ${ + this.reactHtmlAttributesType + }>((props, ref) => <${elementName} {...props} ${fixedProps.join( + ' ' + )} ref={ref} />)`; + } +} + +class CssComponentBuilder extends ComponentBuilder { + constructor(importedKey, importedValues) { + super(cssOutputFolderPath, importedKey, importedValues); + this.className = + this.pascalImportKey === 'InputLikeButton' + ? 'input' + : importedValues.className || ''; + this.selectors = importedValues.selectors; + this.fixedProps = this.className + ? [`className={\`\${(props.className ?? '')} ${this.className}\`}`] + : []; + } + + isValidComponentImport() { + if (!this.hasValidSelectors()) { + console.warn( + `Skipping ${this.importKey} as it does not have valid selectors` + ); + return false; + } + return super.isValidComponentImport(); + } + + hasValidSelectors() { + if (this.pascalImportKey === 'Spinner') return true; + if (this.className) return true; + if (!this.element) return false; + return !!this.defaultProps.find(([key]) => key === 'type'); + } + + buildFileContent() { + const fileContent = this.initFileContent(); + fileContent.push(this.getPropExport()); + if (this.hasVariants()) { + fileContent.push( + `export type ${this.pascalImportKey}Variant = ${this.importKey}.${this.pascalImportKey}Variant;` + ); + } + fileContent.push(''); + fileContent.push( + this.writeForwardRefComponent({ + varName: this.pascalImportKey, + elementName: this.element, + omitVariants: false, + displayName: this.pascalImportKey + }) + ); + + if (this.hasVariants()) { + fileContent.push( + `export const Variant${this.pascalImportKey} = Object.entries(${ + this.importKey + }.variantStyles).reduce( + (result, [key, value]) => { + result[\`\${key.charAt(0).toUpperCase()}\${key.slice(1).toLowerCase()}\`] = ${this.writeForwardRefComponentFunction( + { + varName: 'Component', + elementName: this.element, + omitVariants: true, + displayName: `\`\${key.charAt(0).toUpperCase()}\${key.slice(1).toLowerCase()}\``, + fixedProps: [...this.fixedProps, `data-variant={key}`] + } + )}; + return result; + }, + {} as Record, React.ComponentType<${this.getBasePropsType()}>> + );` + ); + } + + return fileContent; + } +} + +class ReactComponentBuilder extends ComponentBuilder { + get variantComponentsName() { + return `${this.importKey}VariantComponents`; + } + + get styledComponentsName() { + return `${this.importKey}StyledComponents`; + } + + get imports() { + return [`import styled from '@emotion/styled';`, ...super.imports]; + } + + get localImports() { + return [ + ...super.localImports, + `import { extractDisplayName } from '../utils';` + ]; + } + + constructor(importedKey, importedValues) { + super(reactOutputFolderPath, importedKey, importedValues); + this.variantStyles = importedValues.variantStyles; + this.fullStyles = importedValues.fullStyles; + this.coreStyles = importedValues.coreStyles; + } + + isValidComponentImport() { + if (typeof this.fullStyles !== 'string') { + console.warn( + `Skipping ${this.importKey} as it does not export 'fullStyles'` + ); + return false; + } + return super.isValidComponentImport(); + } + + buildFileContent() { + const fileContent = this.initFileContent(); + fileContent.push(this.getPropExport()); + if (this.hasVariants()) { + fileContent.push( + `export type ${this.pascalImportKey}Variant = ${this.importKey}.${this.pascalImportKey}Variant;` + ); + } + fileContent.push(''); + fileContent.push( + `const Base = styled.${this.element}<${this.getBasePropsType()}>\`\${${ + this.importKey + }.fullStyles}\`;` + ); + if (this.coreStyles) { + fileContent.push( + `const Core = styled.${this.element}<${this.getBasePropsType()}>\`\${${ + this.importKey + }.coreStyles}\`;` + ); + } + + if (this.hasVariants()) { + fileContent.push(`const ${this.variantComponentsName} = Object.entries(${ + this.importKey + }.variantStyles).reduce( + (result, [key, value]) => ({ ...result, + [\`\${key.charAt(0).toUpperCase()}\${key.slice(1).toLowerCase()}\`]: styled(${ + this.coreStyles ? 'Core' : 'Base' + })\`\${value}\` + }), + {} as Record, typeof Base> + );`); + } + + fileContent.push(this.buildStyledComponents()); + fileContent.push(''); + + if (!this.hasVariants()) { + fileContent.push( + this.writeForwardRefComponent({ + elementName: `${this.styledComponentsName}.Base`, + omitVariants: false, + varName: `${this.pascalImportKey}`, + shouldExport: true + }) + ); + return fileContent; + } + fileContent.push( + this.writeForwardRefComponent({ + elementName: `${this.styledComponentsName}.Base`, + omitVariants: false, + varName: `${this.pascalImportKey}`, + shouldExport: true + }) + ); + + if (this.coreStyles) { + fileContent.push( + this.writeForwardRefComponent({ + elementName: `${this.styledComponentsName}.Core`, + omitVariants: true, + varName: `${this.pascalImportKey}Base`, + shouldExport: true + }) + ); + } else { + fileContent.push( + `export const ${this.pascalImportKey}Base = ${this.pascalImportKey};` + ); + } + + fileContent.push(`export const Variant${ + this.pascalImportKey + } = Object.fromEntries(Object.entries(${this.variantComponentsName}).map( + ([key, Component]) => { + ${this.writeForwardRefComponent({ + elementName: 'Component', + omitVariants: true, + varName: 'VariantComponent', + displayName: `${this.pascalImportKey}\${key}` + })} + return [key, VariantComponent]; + })) as never as Record, typeof ${this.pascalImportKey}Base>;`); + + return fileContent; + } + + buildStyledComponents() { + const elements = []; + if (this.coreStyles) { + elements.push('Core'); + } + if (this.hasVariants()) { + elements.push(`Base: styled(Base)\` + \${Object.entries(${this.importKey}.variantStyles).map( + ([v, s]) => \`&[data-variant="\${v}"] { \${s} }\` + )} + \``); + elements.push(`...${this.variantComponentsName}`); + } else { + elements.push('Base'); + } + return `export const ${this.styledComponentsName} = {${elements.join( + ',' + )}} as const;`; + } + + writeForwardRefComponent({ + varName, + elementName, + omitVariants, + displayName, + fixedProps: fixedPropsArg = this.fixedProps || [], + shouldExport = false + }) { + return `const _${varName} = ${super.writeForwardRefComponentFunction({ + elementName, + omitVariants, + fixedProps: fixedPropsArg + })}; + _${varName}.displayName = \`${displayName || varName}\`; + ${ + shouldExport ? 'export' : '' + } const ${varName} = _${varName} as never as typeof _${varName} & { + withComponent: typeof ${elementName}['withComponent']; + }; + ${varName}.withComponent = ((withComponent: any) => { + const Styled = ${elementName}.withComponent(withComponent); + const component = ${this.writeForwardRefComponentFunction({ + elementName: 'Styled', + omitVariants, + fixedProps: fixedPropsArg + })}; + component.displayName = \`${ + displayName || varName + }(\${extractDisplayName(withComponent)})\`; + return component; + }) as never;`; + } +} + +const coreExports = await import( + path.join(process.cwd(), 'lib', 'es5', 'index.js') +); + +await Promise.all( + Object.entries(coreExports).map(([key, imports]) => + Promise.all([ + new ReactComponentBuilder(key, imports).build(), + new CssComponentBuilder(key, imports).build() + ]) + ) +); diff --git a/system/core/scripts/generateIndex.mjs b/system/core/scripts/generateIndex.mjs index dc9952fad..1e7e4179f 100644 --- a/system/core/scripts/generateIndex.mjs +++ b/system/core/scripts/generateIndex.mjs @@ -3,9 +3,10 @@ import path from 'path'; import fs from 'fs-extra'; // eslint-disable-next-line @tablecheck/forbidden-imports import _ from 'lodash'; -import prettier from 'prettier'; import ts from 'typescript'; +import { prettierWrite } from './prettierWrite.mjs'; + if (process.env.CI) process.exit(0); const subDirectories = fs @@ -30,6 +31,29 @@ const filenames = subDirectories !filepath.match(/(^index|\.stories)\.tsx?$/gi) ); +function checkForRequiredExports(exportName, exportNodes, reExportedNodes) { + const defaultPropsValue = exportNodes.find( + (n) => + n.name.escapedText === 'configurableDefaultProps' || + n.name.escapedText === 'defaultProps' + ); + const defaultedPropsType = exportNodes.find( + (n) => n.name.escapedText === 'DefaultedProps' + ); + const reExportedDefaultedPropsType = reExportedNodes.find((n) => + n.exportClause.elements.find((e) => e.name.escapedText === 'DefaultedProps') + ); + if ( + defaultPropsValue && + !defaultedPropsType && + !reExportedDefaultedPropsType + ) { + throw new Error( + `${exportName} exports a defaultProps or configurableDefaultProps, it must also export a DefaultedProps type` + ); + } +} + async function getExports(filename) { const filepath = path.join(process.cwd(), 'src', filename); const sourceFile = ts.createSourceFile( @@ -38,6 +62,9 @@ async function getExports(filename) { ts.ScriptTarget.ES6, false ); + const reExports = sourceFile.statements.filter( + (s) => s.kind === ts.SyntaxKind.ExportDeclaration + ); const exportNodes = sourceFile.statements .filter( (s) => @@ -65,45 +92,86 @@ async function getExports(filename) { ) ) ); - function nodeIsType(node) { - return ( - node.kind === ts.SyntaxKind.InterfaceDeclaration || - node.kind === ts.SyntaxKind.TypeAliasDeclaration - ); - } - return exportNodes - .filter((node) => !nodeIsType(node)) - .map((node) => node.name.escapedText); + checkForRequiredExports(filename, exportNodes, reExports); + return exportNodes; +} +function nodeIsType(node) { + return ( + node.kind === ts.SyntaxKind.InterfaceDeclaration || + node.kind === ts.SyntaxKind.TypeAliasDeclaration + ); +} + +const defaults = {}; + +async function collectDefaults(exportName, exportNodes) { + const configurableProps = exportNodes.find( + (n) => n.name.escapedText === 'configurableDefaultProps' + ); + if (!configurableProps) return; + const entries = configurableProps.initializer.properties.map((p) => [ + p.name.text, + p.initializer.text + ]); + entries.forEach(([prop, value]) => { + defaults[value] = defaults[value] || []; + defaults[value].push(`Core.${exportName}.Props['${prop}']`); + }); } async function buildExport(filename) { + if ( + ['src/index.ts', 'src/config.tsx'].includes(filename) || + filename.includes('.gen.') + ) + return ''; const parsedName = path.parse(filename); - const exportPath = `'./${path.join(parsedName.dir, parsedName.name)}'`; + const importPath = `./${path.join(parsedName.dir, parsedName.name)}`; + const exportPath = `'${importPath}'`; if (exportPath.match(/^'\.\/themeVariables\/(types|theme)'$/g)) { return `export * from ${exportPath};`; } - const exportNames = await getExports(filename); + const exportNodes = await getExports(filename); + const exportNames = exportNodes + .filter((node) => !nodeIsType(node)) + .map((node) => node.name.escapedText); if (exportNames.length === 1 && exportNames[0] === parsedName.name) { + collectDefaults(parsedName.name, exportNodes); return `export { ${parsedName.name} } from ${exportPath};`; } - return `export * as ${_.camelCase(parsedName.name)} from ${exportPath};`; + const exportName = _.camelCase(parsedName.name); + collectDefaults(exportName, exportNodes); + return `export * as ${exportName} from ${exportPath};`; } await Promise.all(filenames.map(buildExport)).then((exportLines) => { - const fileContent = exportLines.join('\n'); + const fileContent = exportLines.filter((s) => !!s.trim()).join('\n'); - const filepath = path.join(process.cwd(), 'src/index.ts'); - const config = prettier.resolveConfig.sync(filepath); - fs.outputFileSync( - filepath, - prettier.format( - `/** + return prettierWrite( + 'index.ts', + `/** * DO NOT EDIT: This file is generated, run 'npm update:exports' to update this. * The exports here are generated from all ts/tsx files at the root level */ ${fileContent} - export { globalStyles } from './globalStyles';`, - { filepath, ...config } - ) + export * from './config'; + export { globalStyles } from './globalStyles'; + export { themedCss } from './utils';` ); }); + +await prettierWrite( + 'config.ts', + `/** + * DO NOT EDIT: This file is generated, run 'npm update:exports' to update this. + * The exports here are generated from all ts/tsx files at the root level + */ + import type * as Core from './index'; + + export interface ConfigDefaults { + ${Object.entries(defaults) + .map(([value, types]) => `${value}: NonNullable<${types.join(' & ')}>;`) + .join('\n')} + } + ` +); diff --git a/system/core/scripts/prettierWrite.mjs b/system/core/scripts/prettierWrite.mjs new file mode 100644 index 000000000..85d528cde --- /dev/null +++ b/system/core/scripts/prettierWrite.mjs @@ -0,0 +1,20 @@ +import path from 'path'; + +import fs from 'fs-extra'; +import prettier from 'prettier'; + +export async function prettierWrite(relativeOrAbsolutePath, fileContent) { + const filepath = relativeOrAbsolutePath.startsWith('/') + ? relativeOrAbsolutePath + : path.join(process.cwd(), 'src', relativeOrAbsolutePath); + try { + const config = await prettier.resolveConfig(filepath); + await fs.outputFile( + filepath, + await prettier.format(fileContent, { filepath, ...config }) + ); + } catch (e) { + console.error('Error writing/formatting file', relativeOrAbsolutePath); + await fs.outputFile(filepath, fileContent); + } +} diff --git a/system/core/scripts/updateFromFigma.mjs b/system/core/scripts/updateFromFigma.mjs index d1000754d..a6ed4dcdb 100644 --- a/system/core/scripts/updateFromFigma.mjs +++ b/system/core/scripts/updateFromFigma.mjs @@ -1,10 +1,10 @@ -import path from 'path'; - +import chalk from 'chalk'; import fs from 'fs-extra'; // eslint-disable-next-line @tablecheck/forbidden-imports import _ from 'lodash'; import pluralize from 'pluralize'; -import prettier from 'prettier'; + +import { prettierWrite } from './prettierWrite.mjs'; /** * To use this file, install design tokens figma plugin; https://www.figma.com/community/plugin/888356646278934516 @@ -66,6 +66,8 @@ function valueToCssValue(value) { return `${value}px`; } +const FIGMA_ONLY_TOKENS = ['demolight']; + Object.keys(effectTokens).forEach((name) => { const { value, type } = effectTokens[name]; switch (type) { @@ -88,12 +90,28 @@ Object.keys(effectTokens).forEach((name) => { return; } default: { - console.warn('Unknown Effect', name, type, effectTokens[name]); + if (FIGMA_ONLY_TOKENS.includes(name)) return; + console.warn( + chalk.yellow('Unknown Effect'), + chalk.cyan(name), + type, + effectTokens[name] + ); } } }); - Object.keys(colorVars).forEach((groupKey) => { + if (groupKey === 'light' || groupKey === 'dark') { + const text = colorVars[groupKey].find(([name]) => name === 'text'); + const textSecondary = colorVars[groupKey].find( + ([name]) => name === 'text-secondary' + ); + colorVars[groupKey].push(['brand-secondary-text', text[1]]); + colorVars[groupKey].push([ + 'surface-secondary-text', + groupKey === 'light' ? textSecondary[1] : text[1] + ]); + } colorVars[groupKey] = _.sortBy(colorVars[groupKey], '0').map( ([name, value]) => [name, hexToRgba(value)] ); @@ -110,9 +128,27 @@ function formatCssProp(name, value) { return `--${name}: ${value};`; } +const lightVars = colorVars.light.map(([name]) => name); +const darkVars = colorVars.dark.map(([name]) => name); +const missingLightVars = darkVars.filter((name) => !lightVars.includes(name)); +const missingDarkVars = lightVars.filter((name) => !darkVars.includes(name)); + +if (missingLightVars.length) { + console.warn( + chalk.bold.red('Missing light vars:'), + missingLightVars.join(', ') + ); +} +if (missingDarkVars.length) { + console.warn( + chalk.bold.red('Missing dark vars:'), + missingDarkVars.join(', ') + ); +} + const themeContent = `// eslint-disable-next-line eslint-comments/disable-enable-pair /* eslint-disable max-lines */ -import { css } from '@emotion/react'; +import { css, themedCss } from '../utils'; /** * DO NOT EDIT; File is generated from figma, see './updateFromFigma.mjs' for update instructions @@ -161,26 +197,9 @@ export const darkEffectStyles = css\` .join('\n ')} \`; - -export function themedCss({ light, dark }: { light: ReturnType, dark: ReturnType}): : ReturnType { - return css\` - [data-theme='light'], - :root { - \${light} - } - @media (prefers-color-scheme: dark) { - :root:not([data-theme='light']), [data-theme='system'] { - \${dark} - } - } - [data-theme='dark'] { - \${dark} - } - \`; -} - export const theme = css\` \${themedCss({ + selector: '', light: css\` \${lightColors}; \${lightEffectStyles} @@ -198,20 +217,14 @@ export const theme = css\` } \``; -function outputFile(relativePath, fileContent) { - const filepath = path.join(process.cwd(), 'src', relativePath); - const config = prettier.resolveConfig.sync(filepath); - fs.outputFileSync( - filepath, - prettier.format(fileContent, { filepath, ...config }) - ); -} +await prettierWrite('themeVariables/theme.ts', themeContent); -outputFile('themeVariables/theme.ts', themeContent); +const typesContent = `/** +* DO NOT EDIT; File is generated from figma, see './updateFromFigma.mjs' for update instructions +*/ -const typesContent = ` export interface TableKitCSSProperties { ${allCssProperties.map((name) => `'--${name}'?: string;`).join('\n')} }`; -outputFile('themeVariables/types.ts', typesContent); +await prettierWrite('themeVariables/types.gen.ts', typesContent); diff --git a/system/core/src/components/Alert.ts b/system/core/src/components/Alert.ts index 431506bbc..557c591ff 100644 --- a/system/core/src/components/Alert.ts +++ b/system/core/src/components/Alert.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/react'; +import { css } from '../utils'; export const element = 'div'; export const className = 'alert'; @@ -20,9 +20,9 @@ export interface Props { | 'text-only'; } -export const baseStyles = css` +export const fullStyles = css` display: grid; - grid-gap: var(--spacing-l1) var(--spacing-l2); + gap: var(--spacing-l1) var(--spacing-l2); color: var(--neutral-text); background: var(--neutral-surface); border-radius: var(--border-radius-small); diff --git a/system/core/src/components/Anchor.ts b/system/core/src/components/Anchor.ts index 56cc55de2..129edef71 100644 --- a/system/core/src/components/Anchor.ts +++ b/system/core/src/components/Anchor.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/react'; +import { css } from '../utils'; export const element = 'a'; export const selectors = ['a.link', 'a:not([class])']; @@ -8,31 +8,54 @@ export interface Props { href?: string | undefined; } -export const baseStyles = css` - color: var(--internal-link); - text-decoration: none; - &:not(:any-link) { - --internal-link: var(--link-disabled); +export const fullStyles = css` + color: var(--tk-anchor-internal-color); + text-decoration: underline; + + &:is(button), + &:-webkit-any(button) { + cursor: pointer; + } + &:not(:any-link):not(button), + &:disabled { + --tk-anchor-internal-color: var( + --tk-anchor-disabled-color, + var(--link-disabled) + ); + cursor: not-allowed; } - &:link { - --internal-link: var(--link); + &:link, + &:is(button):not(:disabled), + &:-webkit-any(button):not(:disabled) { + --tk-anchor-internal-color: var(--tk-anchor-color, var(--link)); &:hover, &:active, &[data-pseudo='hover'] { - text-decoration: underline; - --internal-link: var(--link-hover); + --tk-anchor-internal-color: var( + --tk-anchor-hover-color, + var(--link-hover) + ); } &:visited, &[data-pseudo='visited'] { - --internal-link: var(--link-visited); + --tk-anchor-internal-color: var( + --tk-anchor-visited-color, + var(--link-visited) + ); } - &:focus:not(:focus-visible), + &:focus, &:focus-visible, &[data-pseudo='focus'] { outline: none; - --internal-link: var(--link-hover); + --tk-anchor-internal-color: var( + --tk-anchor-hover-color, + var(--link-hover) + ); border-radius: 2px; - box-shadow: 0 0 0 2px var(--link-hover); + box-shadow: 0 0 0 2px var(--focus); + } + &:focus:not(:focus-visible) { + box-shadow: none !important; } } `; diff --git a/system/core/src/components/Badge.ts b/system/core/src/components/Badge.ts index 4bbdd0f74..57a8ee2da 100644 --- a/system/core/src/components/Badge.ts +++ b/system/core/src/components/Badge.ts @@ -1,9 +1,9 @@ -import { css, SerializedStyles } from '@emotion/react'; +import { css } from '../utils'; export const element = 'span'; export const className = 'badge'; -export const baseStyles = css` +export const fullStyles = css` width: max-content; font: var(--label); display: grid; @@ -67,5 +67,5 @@ export const variantStyles = variants.reduce( background-color: var(--${key}-surface); ` }), - {} as Record + {} as Record ); diff --git a/system/core/src/components/Banner.ts b/system/core/src/components/Banner.ts index 22f38e4f9..dcec869b8 100644 --- a/system/core/src/components/Banner.ts +++ b/system/core/src/components/Banner.ts @@ -1,13 +1,14 @@ -import { css, SerializedStyles } from '@emotion/react'; +import { css } from '../utils'; export const className = 'banner'; -export const baseStyles = css` +export const fullStyles = css` padding: var(--spacing-l4); background-color: var(--neutral-surface); display: grid; grid-template-columns: min-content auto min-content; grid-template-areas: 'icon title close' 'icon content content' 'icon actions actions'; + border-radius: var(--border-radius-small); .banner-icon { grid-area: icon; @@ -51,5 +52,5 @@ export const variantStyles = variants.reduce( background-color: var(--${key}-surface); ` }), - {} as Record + {} as Record ); diff --git a/system/core/src/components/Button.ts b/system/core/src/components/Button.ts index 7744ea212..33819aa9e 100644 --- a/system/core/src/components/Button.ts +++ b/system/core/src/components/Button.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/react'; +import { css } from '../utils'; import { beforeStyles as spinnerBeforeStyles, @@ -19,9 +19,20 @@ export interface Props { 'aria-busy'?: boolean; } +export type DefaultedProps = Props; + +export const defaultProps = { + type: 'button' +}; + +export const configurableDefaultProps = { + 'data-size': 'controlSize' +}; + const variants = [ 'primary', 'secondary', + 'secondary-brand', 'tertiary', 'ghost', 'bare', @@ -32,85 +43,100 @@ export type ButtonVariant = (typeof variants)[number]; export const variantStyles = { primary: css` - --color: white; - --background-color: var(--primary); - --border-color: var(--primary); + --tk-button-color: var(--brand-primary-text); + --tk-button-background-color: var(--brand-primary); + --tk-button-border-color: var(--brand-primary); + &[data-pseudo='hover'], + &:hover { + --tk-button-background-color: var(--brand-primary-hover); + --tk-button-border-color: var(--brand-primary-hover); + } + &[data-pseudo='active'], + &:active { + --tk-button-background-color: var(--brand-primary-active); + --tk-button-border-color: var(--brand-primary-active); + } + `, + 'secondary-brand': css` + --tk-button-color: var(--brand-secondary-text); + --tk-button-background-color: var(--brand-secondary); + --tk-button-border-color: var(--brand-secondary); &[data-pseudo='hover'], &:hover { - --background-color: var(--primary-hover); - --border-color: var(--primary-hover); + --tk-button-background-color: var(--brand-secondary-hover); + --tk-button-border-color: var(--brand-secondary-hover); } &[data-pseudo='active'], &:active { - --background-color: var(--primary-active); - --border-color: var(--primary-active); + --tk-button-background-color: var(--brand-secondary-active); + --tk-button-border-color: var(--brand-secondary-active); } `, secondary: css` - --color: var(--text-contrast); - --background-color: var(--secondary); - --border-color: var(--secondary); + --tk-button-color: var(--surface-secondary-text); + --tk-button-background-color: var(--surface-secondary); + --tk-button-border-color: var(--surface-secondary); &[data-pseudo='hover'], &:hover { - --background-color: var(--secondary-hover); - --border-color: var(--secondary-hover); + --tk-button-background-color: var(--surface-secondary-hover); + --tk-button-border-color: var(--surface-secondary-hover); } &[data-pseudo='active'], &:active { - --background-color: var(--secondary-active); - --border-color: var(--secondary-active); + --tk-button-background-color: var(--surface-secondary-active); + --tk-button-border-color: var(--surface-secondary-active); } `, tertiary: css` - --color: var(--text); - --background-color: var(--surface); - --border-color: var(--border-transparent); + --tk-button-color: var(--text); + --tk-button-background-color: var(--surface); + --tk-button-border-color: var(--border); &[data-pseudo='hover'], &:hover { - --background-color: var(--surface-hover); + --tk-button-background-color: var(--surface-hover); } &[data-pseudo='active'], &:active { - --background-color: var(--surface-active); + --tk-button-background-color: var(--surface-active); } `, ghost: css` - --color: var(--text); - --background-color: transparent; - --border-color: var(--border-transparent); + --tk-button-color: var(--text); + --tk-button-background-color: transparent; + --tk-button-border-color: var(--border-transparent); &[data-pseudo='hover'], &:hover { - --background-color: var(--surface-hover-transparent); + --tk-button-background-color: var(--surface-hover-transparent); } &[data-pseudo='active'], &:active { - --background-color: var(--surface-active); + --tk-button-background-color: var(--surface-active); } `, bare: css` - --color: var(--text); - --background-color: transparent; - --border-color: transparent; + --tk-button-color: var(--text); + --tk-button-background-color: transparent; + --tk-button-border-color: transparent; &[data-pseudo='hover'], &:hover { - --background-color: var(--surface-hover); + --tk-button-background-color: var(--surface-hover); } &[data-pseudo='active'], &:active { - --background-color: var(--surface-active); + --tk-button-background-color: var(--surface-active); } `, danger: css` - --color: var(--error); - --background-color: transparent; - --border-color: var(--border-transparent); + --tk-button-color: var(--error); + --tk-button-background-color: transparent; + --tk-button-border-color: var(--border-transparent); &[data-pseudo='hover'], &:hover { - --background-color: var(--surface-hover); + --tk-button-background-color: var(--surface-hover); } &[data-pseudo='active'], &:active { - --background-color: var(--surface-active); + --tk-button-background-color: var(--surface-active); } ` }; @@ -120,14 +146,11 @@ export const coreStyles = css` display: flex; gap: var(--spacing-l2); justify-content: center; - padding: 9px 11px; white-space: nowrap; cursor: pointer; text-decoration: none; font-weight: 400; - font-size: 16px; - line-height: 20px; border: 1px solid var(--primary); border-radius: var(--border-radius-small); @@ -135,10 +158,11 @@ export const coreStyles = css` text-align: center; &[data-pseudo='focus'], - &:focus:not(:focus-visible), + &:focus, &:focus-visible { outline: none; &:after { + display: block; content: ''; position: absolute; top: -3px; @@ -146,10 +170,14 @@ export const coreStyles = css` left: -3px; right: -3px; border-radius: 6px; - border: 2px solid var(--focus, hsla(219, 78.5%, 52.5%, 1)); + box-shadow: 0 0 0 2px var(--focus); } } + &:focus:not(:focus-visible):after { + box-shadow: none !important; + } + &:disabled:disabled { &, &[data-pseudo='hover'], @@ -158,19 +186,21 @@ export const coreStyles = css` &:active { cursor: not-allowed; pointer-events: none; - --background-color: var(--surface-disabled); - border-color: var(--surface-disabled); - --color: var(--text-disabled); + --tk-button-color: var(--text-disabled); + &:not([data-variant='bare']) { + --tk-button-background-color: var(--surface-disabled); + --tk-button-border-color: var(--surface-disabled); + } } } &, &:any-link, &:hover { - color: var(--color); + color: var(--tk-button-color); } - background-color: var(--background-color); - border-color: var(--border-color); + background-color: var(--tk-button-background-color); + border-color: var(--tk-button-border-color); --loading-transition: 300ms ease-in-out; transition: color var(--loading-transition), background-color var(--loading-transition), @@ -184,7 +214,7 @@ export const coreStyles = css` top: calc(50% - var(--spinner-size) / 2); left: calc(50% - var(--spinner-size) / 2); opacity: 0; - background-color: var(--color); + background-color: var(--tk-button-color); transition: opacity var(--loading-transition); transition-delay: 0ms; z-index: 2; @@ -200,6 +230,13 @@ export const coreStyles = css` transition-delay: 200ms; } + &[data-size='medium'], + &:not([data-size]) { + padding: 9px 11px; + font-size: 16px; + line-height: 20px; + } + &[data-size='small'] { padding: 7px; font-size: 14px; @@ -213,7 +250,7 @@ export const coreStyles = css` } `; -export const baseStyles = css` +export const fullStyles = css` ${coreStyles}; &:not([data-variant]) { diff --git a/system/core/src/components/ButtonGroup.ts b/system/core/src/components/ButtonGroup.ts index c58c7eef5..26e96742b 100644 --- a/system/core/src/components/ButtonGroup.ts +++ b/system/core/src/components/ButtonGroup.ts @@ -1,121 +1,98 @@ -import { css } from '@emotion/react'; +import { css } from '../utils'; export const className = 'button-group'; -const stateBoxShadow = { - default: - 'inset 0 1px var(--border), ' + - 'inset -1px 0 var(--border), ' + - 'inset 0 -1px var(--border)', - selected: - '-1px 0 var(--border-active), ' + - 'inset 0 1px var(--border-active), ' + - 'inset -1px 0 var(--border-active), ' + - 'inset 0 -1px var(--border-active)' +export interface Props { + 'data-size'?: 'small' | 'medium' | 'large'; +} + +export type DefaultedProps = Props; + +export const configurableDefaultProps = { + 'data-size': 'controlSize' }; -export const baseStyles = css` +export const fullStyles = css` position: relative; display: flex; flex-flow: row wrap; & > * { position: relative; - display: grid; - grid-gap: var(--spacing-l2); - grid-auto-flow: column; - align-items: center; + display: flex; + gap: var(--spacing-l2); justify-content: center; - font: var(--body-1); - padding: var(--spacing-l3) var(--spacing-l4); text-decoration: none; white-space: nowrap; outline: none; cursor: pointer; - color: var(--text); - background: var(--surface-raised); - box-shadow: ${stateBoxShadow.default}; + color: var(--tk-button-color); + background: var(--tk-button-background-color); + border: 1px solid var(--tk-button-border-color); + font-weight: 400; + + --tk-button-color: var(--text-subtle); + --tk-button-background-color: var(--surface-low); + --tk-button-border-color: var(--border); &[data-pseudo='hover'], - &[data-pseudo='focus'], - &:hover, - &:focus-visible { - background: var(--surface-hover); + &:hover { + --tk-button-background-color: var(--surface-low-hover); } &[data-pseudo='focus'], + &:focus, &:focus-visible { outline: none; + --tk-button-background-color: var(--surface); &:after { content: ''; position: absolute; - z-index: 1; - top: -2px; - bottom: -2px; - left: -3px; - right: -2px; - border: 2px solid var(--focus, hsla(219, 78.5%, 52.5%, 1)); - } - box-shadow: -1px 0 var(--border), inset 0 1px var(--border), - inset -1px 0 var(--border), inset 0 -1px var(--border); - - & + *[data-selected='true'], - & + *:last-child[data-selected='true'] { - box-shadow: -1px 0 var(--border), inset 0 1px var(--border-active), - inset -1px 0 var(--border-active), inset 0 -1px var(--border-active); - } - - &[data-selected='true'] { - box-shadow: ${stateBoxShadow.selected}; + z-index: 2; + top: 0; + bottom: 0; + left: 0; + right: 0; + box-shadow: 0 0 0 2px var(--focus); } } + &:focus:not(:focus-visible):after { + box-shadow: none !important; + } &[data-pseudo='active'], &:active { - background: var(--surface-active); + --tk-button-background-color: var(--surface-active); } &[data-selected='true'] { - color: var(--text-contrast); - background: var(--secondary); - box-shadow: ${stateBoxShadow.selected}; + --tk-button-color: var(--brand-primary-text); + --tk-button-background-color: var(--brand-primary); + --tk-button-border-color: var(--brand-primary); + z-index: 1; } &:first-child { border-top-left-radius: var(--border-radius-small); border-bottom-left-radius: var(--border-radius-small); - box-shadow: inset 0 0 0 1px var(--border); + --tk-button-box-shadow: inset 0 0 0 1px var(--tk-button-border-color); &[data-pseudo='focus'], &:focus-visible { &:after { border-top-left-radius: 6px; border-bottom-left-radius: 6px; - left: -2px; } - box-shadow: inset 0 0 0 1px var(--border); - - &[data-selected='true'] { - box-shadow: inset 0 0 0 1px var(--border-active); - } - } - - &[data-pseudo='active'], - &:active { - background: var(--surface-active); } + } - &[data-selected='true'] { - color: var(--text-contrast); - background: var(--secondary); - box-shadow: inset 0 0 0 1px var(--border-active); - } + &:not(:first-child) { + margin-left: -1px; } &:last-child { border-top-right-radius: var(--border-radius-small); border-bottom-right-radius: var(--border-radius-small); - box-shadow: ${stateBoxShadow.default}; &[data-pseudo='focus'], &:focus-visible { @@ -123,28 +100,26 @@ export const baseStyles = css` border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - box-shadow: -1px 0 var(--border), inset 0 1px var(--border), - inset -1px 0 var(--border), inset 0 -1px var(--border); - - &[data-selected='true'] { - box-shadow: ${stateBoxShadow.selected}; - } } + } + } - &[data-pseudo='active'], - &:active { - background: var(--surface-active); - } + &[data-size='medium'] > *, + &:not([data-size]) > * { + padding: 9px 11px; + font-size: 16px; + line-height: 20px; + } - &[data-selected='true'] { - color: var(--text-contrast); - background: var(--secondary); - box-shadow: ${stateBoxShadow.selected}; - } - } + &[data-size='small'] > * { + padding: 7px; + font-size: 14px; + line-height: 16px; } -`; -export interface Props { - 'data-selected'?: boolean; -} + &[data-size='large'] > * { + padding: 13px 15px; + font-size: 16px; + line-height: 20px; + } +`; diff --git a/system/core/src/components/Checkbox.ts b/system/core/src/components/Checkbox.ts index 55f91b3d1..c8ef1f6fb 100644 --- a/system/core/src/components/Checkbox.ts +++ b/system/core/src/components/Checkbox.ts @@ -1,6 +1,4 @@ -import { css } from '@emotion/react'; - -import { OptionalKeys } from '../typeUtils'; +import { OptionalKeys, css } from '../utils'; export const element = 'input'; export const selectors = ['input[type="checkbox"]:not(.toggle)']; @@ -12,7 +10,7 @@ export interface Props { export type DefaultedProps = OptionalKeys; export const defaultProps = { type: 'checkbox' }; -export const baseStyles = css` +export const fullStyles = css` --checkbox-size: 20px; appearance: none; cursor: pointer; @@ -38,50 +36,67 @@ export const baseStyles = css` outline: none; } &[data-pseudo='focus'], + &:focus, &:focus-visible { box-shadow: 0 0 0 2px var(--focus); } + &:focus:not(:focus-visible) { + box-shadow: none !important; + } &:checked, &:indeterminate { - background-color: var(--text); - border-color: var(--text); + background-color: var(--brand-primary); + border-color: var(--brand-primary); } &:disabled { - border-color: var(--border-transparent); + border-color: var(--border); background-color: var(--text-disabled); cursor: not-allowed; } &:before { - --c: var(--text-contrast); /* Color */ - --t: 2px; /* thickness */ - --w: 11px; /* width */ - --h: 7px; /* height */ + --tk-input-check-color: var(--brand-primary-text); + --tk-input-check-thickness: 2px; + --tk-input-check-width: 11px; + --tk-input-check-height: 7px; display: inline-block; content: ''; - height: var(--h); - width: var(--w); - top: calc(50% - calc(var(--w) - var(--h)) / 2); + height: var(--tk-input-check-height); + width: var(--tk-input-check-width); + top: calc( + 50% - calc(var(--tk-input-check-width) - var(--tk-input-check-height)) / 2 + ); left: 50%; position: absolute; transform-origin: center center; } &:checked:before { - top: calc(50% - calc(var(--w) - var(--h)) / 2); + top: calc( + 50% - calc(var(--tk-input-check-width) - var(--tk-input-check-height)) / 2 + ); left: 50%; transform: translate(-50%, -50%) rotate(-45deg); - background-image: linear-gradient(var(--c), var(--c)), - linear-gradient(var(--c), var(--c)); + background-image: linear-gradient( + var(--tk-input-check-color), + var(--tk-input-check-color) + ), + linear-gradient(var(--tk-input-check-color), var(--tk-input-check-color)); background-position: left bottom; - background-size: calc(100% - var(--t) / 2) var(--t), - var(--t) calc(100% - var(--t) / 2); + background-size: calc(100% - var(--tk-input-check-thickness) / 2) + var(--tk-input-check-thickness), + var(--tk-input-check-thickness) + calc(100% - var(--tk-input-check-thickness) / 2); background-repeat: no-repeat, no-repeat; } &:indeterminate:before { - top: calc(50% - calc(var(--t) / 2)); - left: calc(50% - calc(var(--w) / 2)); - background-image: linear-gradient(var(--c), var(--c)); + top: calc(50% - calc(var(--tk-input-check-thickness) / 2)); + left: calc(50% - calc(var(--tk-input-check-width) / 2)); + background-image: linear-gradient( + var(--tk-input-check-color), + var(--tk-input-check-color) + ); background-attachment: center; - background-size: calc(100% - var(--t) / 2) var(--t); + background-size: calc(100% - var(--tk-input-check-thickness) / 2) + var(--tk-input-check-thickness); background-repeat: no-repeat; } `; diff --git a/system/core/src/components/CheckboxRadioLabel.ts b/system/core/src/components/CheckboxRadioLabel.ts index 7161a3244..136b25d73 100644 --- a/system/core/src/components/CheckboxRadioLabel.ts +++ b/system/core/src/components/CheckboxRadioLabel.ts @@ -1,16 +1,22 @@ -import { css } from '@emotion/react'; +import { css } from '../utils'; export const element = 'label'; export const selectors = ['label.checkbox', 'label.radio']; export interface Props { htmlFor?: string; + 'data-variant'?: 'disabled'; } -export const baseStyles = css` +export const fullStyles = css` display: flex; align-items: center; gap: var(--spacing-l2); cursor: pointer; font: var(--body-1); + color: var(--text); + &[data-variant='disabled'], + &:has(:disabled) { + color: var(--text-disabled); + } `; diff --git a/system/core/src/components/ChildAnchors.ts b/system/core/src/components/ChildAnchors.ts index befafa431..3ece83093 100644 --- a/system/core/src/components/ChildAnchors.ts +++ b/system/core/src/components/ChildAnchors.ts @@ -1,6 +1,6 @@ -import { css } from '@emotion/react'; +import { css } from '../utils'; -import { baseStyles as anchorStyles } from './Anchor'; +import { fullStyles as anchorStyles } from './Anchor'; export const element = 'div'; export const className = 'child-anchors'; @@ -8,7 +8,7 @@ export const className = 'child-anchors'; // eslint-disable-next-line @typescript-eslint/no-empty-interface export interface Props {} -export const baseStyles = css` +export const fullStyles = css` & a { ${anchorStyles} } diff --git a/system/core/src/components/Chip.ts b/system/core/src/components/Chip.ts index 06b648e79..4f94778ad 100644 --- a/system/core/src/components/Chip.ts +++ b/system/core/src/components/Chip.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/react'; +import { css } from '../utils'; export const element = 'button'; export const className = 'chip'; @@ -8,46 +8,76 @@ export interface Props { disabled?: boolean; 'aria-selected'?: boolean; 'aria-controls'?: string; - 'data-size'?: 'small' | 'regular'; + 'data-size'?: 'small' | 'medium' | 'large'; } -export const baseStyles = css` - --padding-y: 12px; - --padding-x: 16px; - padding: calc(var(--padding-y) - 2px) calc(var(--padding-x) - 2px); +export type DefaultedProps = Props; + +export const configurableDefaultProps = { + 'data-size': 'controlSize' +}; + +export const fullStyles = css` + --tk-chip-color: var(--text-subtle); + --tk-chip-background-color: var(--surface-low); + --tk-chip-border-color: var(--border); position: relative; text-decoration: none !important; - color: var(--text); + color: var(--tk-chip-color); + background-color: var(--tk-chip-background-color); border-radius: var(--border-radius-full); - border: 2px solid var(--border-transparent); + border: 1px solid var(--tk-chip-border-color); white-space: nowrap; + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--spacing-l2); + + &[data-size='medium'], + &:not([data-size]) { + padding: 9px 11px; + font-size: 16px; + line-height: 20px; + } + + &[data-size='small'] { + padding: 7px 11px; + font-size: 14px; + line-height: 16px; + } + + &[data-size='large'] { + padding: 13px 15px; + font-size: 16px; + line-height: 20px; + } + &[data-pseudo='hover'], &:hover { - background-color: var(--surface-hover); + --tk-chip-background-color: var(--surface-hover); cursor: pointer; } &[data-pseudo='focus'], - &:focus:not(:focus-visible), + &:focus, &:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus, hsla(219, 78.5%, 52.5%, 1)); } + &:focus:not(:focus-visible) { + box-shadow: none !important; + } &[data-pseudo='active'], &:active { - background-color: var(--surface-active); - } - &[data-size='small'] { - --padding-x: 14px; - --padding-y: 6px; + --tk-chip-background-color: var(--surface-active); } &[aria-selected='true'] { - background-color: var(--secondary); - border-color: var(--secondary); - color: var(--text-contrast); + --tk-chip-background-color: var(--brand-primary); + --tk-chip-border-color: var(--brand-primary); + --tk-chip-color: var(--brand-primary-text); } &:disabled { - color: var(--text-disabled); - background-color: var(--surface-disabled); + --tk-chip-color: var(--text-disabled); + --tk-chip-background-color: var(--surface-disabled); cursor: not-allowed; } `; diff --git a/system/core/src/components/ChipRow.ts b/system/core/src/components/ChipRow.ts index 2bf388593..6a789b7f0 100644 --- a/system/core/src/components/ChipRow.ts +++ b/system/core/src/components/ChipRow.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/react'; +import { css } from '../utils'; export const className = 'chip-row'; @@ -12,7 +12,7 @@ export const defaultProps = { role: 'tablist' }; -export const baseStyles = css` +export const fullStyles = css` display: flex; flex-direction: row; gap: var(--spacing-l2); diff --git a/system/core/src/components/IconButton.ts b/system/core/src/components/IconButton.ts index b02b0761c..e11749cb7 100644 --- a/system/core/src/components/IconButton.ts +++ b/system/core/src/components/IconButton.ts @@ -1,11 +1,15 @@ -import { css } from '@emotion/react'; +import { css } from '../utils'; -import { variantStyles as buttonVariantStyles } from './Button'; +import { variantStyles as buttonVariantStyles, ButtonVariant } from './Button'; import { beforeStyles as spinnerBeforeStyles, coreStyles as spinnerElementStyles } from './Spinner'; +export { configurableDefaultProps } from './Button'; + +export type IconButtonVariant = ButtonVariant | 'danger-bare'; + export const element = 'button'; export const selectors = ['button.icon', 'a[role="button"].icon']; export const className = 'icon-button'; @@ -15,48 +19,51 @@ export interface Props { 'data-size'?: 'small' | 'medium' | 'large'; 'aria-busy'?: boolean; 'data-round'?: boolean; + 'data-mode'?: 'default' | 'input-append'; /** * @deprecated The tooltip styling clashes with the busy styling, apply the tooltip on a wrapper component */ 'data-tooltip'?: never; } -const variants = [ - 'primary', - 'secondary', - 'tertiary', - 'ghost', - 'bare', - 'danger' -] as const; - -export type IconButtonVariant = (typeof variants)[number]; - export const variantStyles = { - ...buttonVariantStyles + ...buttonVariantStyles, + 'danger-bare': css` + ${buttonVariantStyles.danger} + --tk-button-border-color: transparent; + ` }; export const coreStyles = css` position: relative; display: grid; - padding: 9px; cursor: pointer; text-decoration: none; font-size: 16px; - line-height: 24px; + line-height: 20px; border-radius: var(--border-radius-small); align-items: center; text-align: center; - border: solid 1px var(--border-color); + border: solid 1px var(--tk-button-border-color); + + --tk-icon-button-padding: 9px; + padding: var(--tk-icon-button-padding); + &[data-size='small'] { + --tk-icon-button-padding: 7px; + } + &[data-size='large'] { + --tk-icon-button-padding: 13px; + } &[data-pseudo='focus'], - &:focus:not(:focus-visible), + &:focus, &:focus-visible { outline: none; - &:after { + &:not([data-mode='input-append']):after { + display: block; content: ''; pointer-events: none; position: absolute; @@ -65,9 +72,12 @@ export const coreStyles = css` left: -3px; right: -3px; border-radius: 6px; - border: 2px solid var(--focus, hsla(219, 78.5%, 52.5%, 1)); + box-shadow: 0 0 0 2px var(--focus); } } + &:focus:not(:focus-visible):after { + box-shadow: none !important; + } &:disabled:disabled { &, @@ -75,11 +85,13 @@ export const coreStyles = css` &[data-pseudo='active'], &:hover, &:active { - --background-color: var(--surface-disabled); - --border-color: var(--surface-disabled); - --color: var(--text-disabled); cursor: not-allowed; pointer-events: none; + --tk-button-color: var(--text-disabled); + &:not([data-variant='bare']) { + --tk-button-background-color: var(--surface-disabled); + --tk-button-border-color: var(--surface-disabled); + } } &:after { border: none; @@ -89,9 +101,9 @@ export const coreStyles = css` &, &:any-link, &:hover { - color: var(--color); + color: var(--tk-button-color); } - background-color: var(--background-color); + background-color: var(--tk-button-background-color); --loading-transition: 300ms ease-in-out; transition: color var(--loading-transition), background-color var(--loading-transition), @@ -105,7 +117,7 @@ export const coreStyles = css` top: calc(50% - var(--spinner-size) / 2); left: calc(50% - var(--spinner-size) / 2); opacity: 0; - background-color: var(--color); + background-color: var(--tk-button-color); transition: opacity var(--loading-transition); transition-delay: 0ms; z-index: 2; @@ -124,27 +136,30 @@ export const coreStyles = css` &[data-round] { border-radius: 50%; &[data-pseudo='focus'], - &:focus:not(:focus-visible), + &:focus, &:focus-visible { border-radius: 50%; - &::after { + &:after { border-radius: 50%; } } } +`; - &[data-size='small'] { - padding: 7px; - } +export const fullStyles = css` + ${coreStyles} - &[data-size='large'] { - padding: 13px; + &[data-mode='input-append'] { + height: var(--tk-input-height); + --tk-icon-button-padding: 8px !important; + border-color: transparent !important; + margin: 0 -8px; + &:not([data-variant]) { + ${variantStyles.bare}; + } } -`; -export const baseStyles = css` - ${coreStyles} - &:not([data-variant]) { + &:not([data-variant]):not([data-mode='input-append']) { ${variantStyles.primary} } `; diff --git a/system/core/src/components/Input.ts b/system/core/src/components/Input.ts deleted file mode 100644 index 625987337..000000000 --- a/system/core/src/components/Input.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { css } from '@emotion/react'; - -export const element = 'input'; -export const selectors = ['input:not([type="checkbox"]):not([type="radio"])']; -export const className = 'input'; - -export const sharedInputStyles = css` - padding: 12px 16px; - border: 1px solid var(--border-transparent); - border-radius: var(--border-radius-small); - font: var(--body-1); - background: var(--surface); - --width: 220px; - &[data-stretch] { - --width: 100%; - } - &, - &:focus, - &:focus-within { - outline: none; - } - - &[data-pseudo='focus'], - &:focus, - &:focus-within { - border-color: var(--focus); - box-shadow: 0 0 0 1px var(--focus); - } - &[data-variant='error'] { - border-color: var(--error); - box-shadow: 0 0 0 1px var(--error); - } - - &:disabled, - &[data-variant='disabled'] { - color: var(--text-disabled); - border-color: var(--border-transparent); - box-shadow: none; - background: var(--surface-disabled); - cursor: default; - pointer-events: none; - } - - &::placeholder, - & ::placeholder, - .placeholder { - color: var(--text-placeholder); - } -`; - -export const baseStyles = css` - ${sharedInputStyles} - width: var(--width); -`; - -export interface Props { - 'data-variant'?: 'error' | 'disabled'; - 'data-stretch'?: boolean; -} diff --git a/system/core/src/components/InputAlert.ts b/system/core/src/components/InputAlert.ts index 8f7a08376..39f6bfcb1 100644 --- a/system/core/src/components/InputAlert.ts +++ b/system/core/src/components/InputAlert.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/react'; +import { css } from '../utils'; export const element = 'span'; export const className = 'input-alert'; @@ -15,10 +15,10 @@ export interface Props { 'data-variant': InputAlertVariant; } -export const baseStyles = css` +export const fullStyles = css` display: grid; grid-template-columns: min-content 1fr; - grid-gap: var(--spacing-l2); + gap: var(--spacing-l2); margin-top: var(--spacing-l2); color: var(--text); border-radius: var(--border-radius-small); diff --git a/system/core/src/components/InputCore.ts b/system/core/src/components/InputCore.ts new file mode 100644 index 000000000..2929ceeb2 --- /dev/null +++ b/system/core/src/components/InputCore.ts @@ -0,0 +1,83 @@ +import { css } from '../utils'; + +export const element = 'input'; +export const selectors = ['input:not([type="checkbox"]):not([type="radio"])']; +export const className = 'input'; + +export const fullStyles = css` + --tk-input-border-width: 1px; + border: var(--tk-input-border-width) solid var(--border); + border-radius: var(--border-radius-small); + font: var(--body-1); + background: var(--surface); + --tk-input-text: currentColor; + color: var(--tk-input-text); + + --tk-input-width: 220px; + &[data-stretch] { + --tk-input-width: 100%; + } + &[data-size='medium'], + &:not([data-size]) { + --tk-input-vertical-padding: 8px; + --tk-input-height: 40px; + } + + &[data-size='small'] { + --tk-input-vertical-padding: 6px; + --tk-input-height: 36px; + } + + &[data-size='large'] { + --tk-input-vertical-padding: 12px; + --tk-input-height: 48px; + } + --tk-input-horizontal-padding: 12px; + padding: calc(var(--tk-input-vertical-padding) - var(--tk-input-border-width)) + var(--tk-input-horizontal-padding); + + &, + &:focus, + &:focus-within { + outline: none; + } + + &[data-pseudo='focus'], + &:focus, + &:focus-within { + border-color: var(--focus); + box-shadow: 0 0 0 1px var(--focus); + } + &[data-variant='error'] { + border-color: var(--error); + box-shadow: 0 0 0 1px var(--error); + } + + &::placeholder, + & ::placeholder, + .placeholder { + color: var(--text-placeholder); + } + + &:disabled, + &[data-variant='disabled'] { + --tk-input-text: var(--text-disabled); + box-shadow: none; + background: var(--surface-disabled); + cursor: default; + pointer-events: none; + } + width: var(--tk-input-width); +`; + +export interface Props { + 'data-variant'?: 'error' | 'disabled'; + 'data-stretch'?: boolean; + 'data-size'?: 'small' | 'medium' | 'large'; +} + +export type DefaultedProps = Props; + +export const configurableDefaultProps = { + 'data-size': 'controlSize' +}; diff --git a/system/core/src/components/InputLikeButton.ts b/system/core/src/components/InputLikeButton.ts index 2f7a47987..f0ee5b224 100644 --- a/system/core/src/components/InputLikeButton.ts +++ b/system/core/src/components/InputLikeButton.ts @@ -1,9 +1,12 @@ -import { css } from '@emotion/react'; +import { css } from '../utils'; -import { baseStyles as inputBaseStyles } from './Input'; +import { fullStyles as inputfullStyles } from './InputCore'; -export type { Props } from './Input'; -export type { Props as DefaultedProps } from './Input'; +export type { + Props, + DefaultedProps, + configurableDefaultProps +} from './InputCore'; export const element = 'button'; export const selectors = ['button.input', 'a.input']; @@ -12,8 +15,8 @@ export const defaultProps = { role: 'button' }; -export const baseStyles = css` - ${inputBaseStyles}; +export const fullStyles = css` + ${inputfullStyles}; display: flex; gap: var(--spacing-l2); align-items: center; diff --git a/system/core/src/components/InputStructure.ts b/system/core/src/components/InputStructure.ts index ac83c92cc..2f3cfec71 100644 --- a/system/core/src/components/InputStructure.ts +++ b/system/core/src/components/InputStructure.ts @@ -1,8 +1,8 @@ -import { css } from '@emotion/react'; +import { css } from '../utils'; export const className = 'input-structure'; -export const baseStyles = css` +export const fullStyles = css` display: flex; flex-direction: column; gap: var(--spacing-l2); diff --git a/system/core/src/components/InputWithIcons.ts b/system/core/src/components/InputWithIcons.ts index 3cce9f7c9..f7c416891 100644 --- a/system/core/src/components/InputWithIcons.ts +++ b/system/core/src/components/InputWithIcons.ts @@ -1,16 +1,30 @@ -import { css } from '@emotion/react'; +import { css } from '../utils'; -import { sharedInputStyles } from './Input'; +import { fullStyles as inputStyles } from './InputCore'; -export type { Props } from './Input'; +export type { + Props, + DefaultedProps, + configurableDefaultProps +} from './InputCore'; export const className = 'input-with-icons'; -export const baseStyles = css` - ${sharedInputStyles} +export const fullStyles = css` + ${inputStyles} display: grid; - grid-template-columns: 8px 16px auto 16px 8px; - grid-gap: var(--spacing-l2); + --tk-input-icon-gap: var(--spacing-l2); + --tk-input-icon-end-padding: calc( + var(--tk-input-horizontal-padding) - var(--tk-input-border-width) - + var(--tk-input-icon-gap) + ); + grid-template-columns: + var(--tk-input-icon-end-padding) + var(--tk-input-icon-size) + auto + var(--tk-input-icon-size) + var(--tk-input-icon-end-padding); + gap: var(--tk-input-icon-gap); align-items: center; cursor: text; padding: 0; @@ -38,25 +52,27 @@ export const baseStyles = css` &:focus { outline: none; } - width: var(--width); + width: var(--tk-input-width); border: none; background: transparent; - grid-area: 1/1/1/6; - padding-top: 12px; - padding-bottom: 12px; - padding-left: 16px; - padding-right: 16px; - // the 24 below is 16px width icon + 8px gap - &:first-child:not(:last-child) { - padding-left: calc(16px + (24 * var(--rtl-space))); - padding-right: calc(16px + (24 * var(--ltr-space))); - } - &:not(:first-child):last-child { - padding-left: calc(16px + (24 * var(--ltr-space))); - padding-right: calc(16px + (24 * var(--rtl-space))); + grid-area: 1/1/2/6; + padding: calc( + var(--tk-input-vertical-padding) - var(--tk-input-border-width) + ) + var(--tk-input-horizontal-padding); + &:first-child:not(:last-child), + &:not(:first-child):not(:last-child) { + padding-inline-end: calc( + var(--tk-input-horizontal-padding) + var(--tk-input-icon-size) + + var(--tk-input-icon-gap) + ); } + &:not(:first-child):last-child, &:not(:first-child):not(:last-child) { - padding: 12px calc(16px + 24px); + padding-inline-start: calc( + var(--tk-input-horizontal-padding) + var(--tk-input-icon-size) + + var(--tk-input-icon-gap) + ); } } `; diff --git a/system/core/src/components/InputWithPrefix.ts b/system/core/src/components/InputWithPrefix.ts new file mode 100644 index 000000000..06f21e538 --- /dev/null +++ b/system/core/src/components/InputWithPrefix.ts @@ -0,0 +1,84 @@ +import { css } from '../utils'; + +import { fullStyles as inputStyles } from './InputCore'; + +export type { + Props, + DefaultedProps, + configurableDefaultProps +} from './InputCore'; + +export const className = 'input-with-prefix'; + +export const fullStyles = css` + ${inputStyles} + display: grid; + --tk-input-icon-gap: var(--spacing-l2); + --tk-input-icon-end-padding: calc( + var(--tk-input-horizontal-padding) - var(--tk-input-border-width) - + var(--tk-input-icon-gap) + ); + grid-template-columns: + min-content + auto + var(--tk-input-icon-gap) + var(--tk-input-icon-size) + var(--tk-input-icon-gap) + var(--tk-input-icon-end-padding); + gap: 0; + align-items: center; + cursor: text; + padding: 0; + + & > :not(input):not(select):not(button):not(a) { + pointer-events: none; + } + + & > :nth-child(1) { + grid-area: 1/1; + border-inline-end: var(--tk-input-border-width) solid var(--border); + background: var(--surface-raised); + padding: 0 var(--spacing-l3); + display: flex; + align-items: center; + align-self: stretch; + white-space: nowrap; + [dir='rtl'] & { + border-top-right-radius: var(--border-radius-small); + border-bottom-right-radius: var(--border-radius-small); + } + [dir='ltr'] & { + border-top-left-radius: var(--border-radius-small); + border-bottom-left-radius: var(--border-radius-small); + } + } + + & > :nth-child(3) { + z-index: 1; + grid-area: 1/4; + } + + & > input, + & > select { + color: currentColor; + &, + &[data-pseudo='focus'], + &:focus { + outline: none; + } + min-width: 0; + border: none; + background: transparent; + grid-area: 1/2/2/6; + padding: calc( + var(--tk-input-vertical-padding) - var(--tk-input-border-width) + ) + var(--tk-input-horizontal-padding); + &:not(:last-child) { + padding-inline-end: calc( + var(--tk-input-horizontal-padding) + var(--tk-input-icon-size) + + var(--tk-input-icon-gap) + ); + } + } +`; diff --git a/system/core/src/components/InputWithSuffix.ts b/system/core/src/components/InputWithSuffix.ts new file mode 100644 index 000000000..147c29af8 --- /dev/null +++ b/system/core/src/components/InputWithSuffix.ts @@ -0,0 +1,83 @@ +import { css } from '../utils'; + +import { fullStyles as inputStyles } from './InputCore'; + +export type { + Props, + DefaultedProps, + configurableDefaultProps +} from './InputCore'; + +export const className = 'input-with-suffix'; + +export const fullStyles = css` + ${inputStyles} + display: grid; + --tk-input-icon-gap: var(--spacing-l2); + --tk-input-icon-end-padding: calc( + var(--tk-input-horizontal-padding) - var(--tk-input-border-width) - + var(--tk-input-icon-gap) + ); + grid-template-columns: + var(--tk-input-icon-end-padding) + var(--tk-input-icon-gap) + var(--tk-input-icon-size) + var(--tk-input-icon-gap) + auto + min-content; + gap: 0; + align-items: center; + cursor: text; + padding: 0; + + & > :nth-child(1):not(input):not(select) { + z-index: 1; + grid-area: 1/3; + } + + & > :not(input):not(select):not(button):not(a) { + pointer-events: none; + } + + & > input, + & > select { + color: currentColor; + &, + &[data-pseudo='focus'], + &:focus { + outline: none; + } + border: none; + min-width: 0; + background: transparent; + grid-area: 1/1/2/6; + padding: calc( + var(--tk-input-vertical-padding) - var(--tk-input-border-width) + ) + var(--tk-input-horizontal-padding); + &:not(:first-child) { + padding-inline-start: calc( + var(--tk-input-horizontal-padding) + var(--tk-input-icon-size) + + var(--tk-input-icon-gap) + ); + } + & + * { + grid-area: 1/6; + border-inline-start: var(--tk-input-border-width) solid var(--border); + background: var(--surface-raised); + padding: 0 var(--spacing-l3); + display: flex; + align-items: center; + align-self: stretch; + white-space: nowrap; + [dir='rtl'] & { + border-top-left-radius: var(--border-radius-small); + border-bottom-left-radius: var(--border-radius-small); + } + [dir='ltr'] & { + border-top-right-radius: var(--border-radius-small); + border-bottom-right-radius: var(--border-radius-small); + } + } + } +`; diff --git a/system/core/src/components/Menu.ts b/system/core/src/components/Menu.ts index cd45c5baf..9474ff410 100644 --- a/system/core/src/components/Menu.ts +++ b/system/core/src/components/Menu.ts @@ -1,4 +1,4 @@ -import { css, CSSObject } from '@emotion/react'; +import { css, CSSObject } from '../utils'; export const className = 'menu'; @@ -8,12 +8,12 @@ export interface Props {} /** * We export the objects as well for compatibilty with 3rd party libs like react-select */ -export const baseStylesObject: CSSObject = { +export const fullStylesObject: CSSObject = { backgroundColor: 'var(--surface)', boxShadow: 'var(--elevation-small)', borderRadius: 'var(--border-radius-small)', - padding: 'var(--spacing-l1)', + padding: 0, zIndex: 'var(--zindex-layer)' }; -export const baseStyles = css(baseStylesObject); +export const fullStyles = css(fullStylesObject); diff --git a/system/core/src/components/MenuItem.ts b/system/core/src/components/MenuItem.ts index 9d293b1ad..06601ca6c 100644 --- a/system/core/src/components/MenuItem.ts +++ b/system/core/src/components/MenuItem.ts @@ -1,4 +1,4 @@ -import { css, CSSObject } from '@emotion/react'; +import { css, CSSObject } from '../utils'; export const element = 'button'; export const className = 'menu-item'; @@ -17,15 +17,12 @@ export const stateStylesObjects: Record< CSSObject > = { active: { - color: 'var(--text)', background: 'var(--surface-active)' }, focus: { - color: 'var(--text)', background: 'var(--surface-hover)' }, selected: { - color: 'var(--text)', background: 'var(--surface-active)' }, hover: { @@ -33,7 +30,7 @@ export const stateStylesObjects: Record< } }; -export const baseStylesObject: CSSObject = { +export const fullStylesObject: CSSObject = { font: 'var(--body-1)', '&, &:any-link, &:hover': { color: 'var(--text)' @@ -71,8 +68,8 @@ export interface Props { } // eslint-disable-next-line @emotion/syntax-preference -export const baseStyles = css({ - ...baseStylesObject, +export const fullStyles = css({ + ...fullStylesObject, '&:matches(button, :any-link):matches(:active, [data-pseudo="active"])': stateStylesObjects.active, '&:is(button, :any-link):is(:active, [data-pseudo="active"])': diff --git a/system/core/src/components/MenuList.ts b/system/core/src/components/MenuList.ts index f49dec7ff..e4da4a8ae 100644 --- a/system/core/src/components/MenuList.ts +++ b/system/core/src/components/MenuList.ts @@ -1,4 +1,4 @@ -import { css, CSSObject } from '@emotion/react'; +import { css, CSSObject } from '../utils'; export const element = 'menu'; export const selectors = ['menu']; @@ -7,12 +7,12 @@ export const className = 'menu-list'; /** * We export the objects as well for compatibilty with 3rd party libs like react-select */ -export const baseStylesObject: CSSObject = { +export const fullStylesObject: CSSObject = { '&:not([data-noscroll])': { maxHeight: 300, overflowY: 'auto' }, - padding: 0, + padding: 'var(--spacing-l1)', display: 'grid', gridAutoFlow: 'row', gridGap: 'var(--spacing-l1)', @@ -27,4 +27,4 @@ export const baseStylesObject: CSSObject = { export interface Props { 'data-noscroll'?: boolean; } -export const baseStyles = css(baseStylesObject); +export const fullStyles = css(fullStylesObject); diff --git a/system/core/src/components/Radio.ts b/system/core/src/components/Radio.ts index 15f243947..9e2ef7d71 100644 --- a/system/core/src/components/Radio.ts +++ b/system/core/src/components/Radio.ts @@ -1,6 +1,4 @@ -import { css } from '@emotion/react'; - -import { OptionalKeys } from '../typeUtils'; +import { OptionalKeys, css } from '../utils'; export const element = 'input'; export const selectors = ['input[type="radio"]:not(.toggle)']; @@ -12,8 +10,9 @@ export interface Props { export type DefaultedProps = OptionalKeys; export const defaultProps = { type: 'radio' }; -export const baseStyles = css` +export const fullStyles = css` --radio-size: 20px; + --tk-radio-fill: transparent; appearance: none; border-radius: 100%; border: 2px solid var(--border); @@ -30,7 +29,7 @@ export const baseStyles = css` &:before { --radio-inner-size: 9px; - background-color: transparent; + background-color: var(--tk-radio-fill); border-radius: 100%; content: ''; height: var(--radio-inner-size); @@ -52,21 +51,26 @@ export const baseStyles = css` } &[data-pseudo='focus'], + &:focus, &:focus-visible { box-shadow: 0 0 0 2px var(--focus); } - - &:checked { - border-color: var(--text); + &:focus:not(:focus-visible) { + box-shadow: none !important; } - &:checked:before { - background-color: var(--text); + &:checked { + border-color: var(--brand-primary); + --tk-radio-fill: var(--brand-primary); } &:disabled { - border-color: var(--border-transparent); + border-color: var(--border); background-color: var(--surface-disabled); cursor: not-allowed; + --tk-radio-fill: transparent; + &:checked { + --tk-radio-fill: var(--text-disabled); + } } `; diff --git a/system/core/src/components/ScrollShadow.ts b/system/core/src/components/ScrollShadow.ts index 8797ac35f..7b9853317 100644 --- a/system/core/src/components/ScrollShadow.ts +++ b/system/core/src/components/ScrollShadow.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/react'; +import { css } from '../utils'; export const className = 'scroll-shadow'; @@ -9,18 +9,22 @@ export interface Props { 'data-overflow': 'x' | 'y'; } -export const baseStyles = css` +export const fullStyles = css` + --tk-scroll-shadow-background: var(--surface); background-repeat: no-repeat; - background-color: var(--surface); + background-color: var(--tk-scroll-shadow-background); /* Opera doesn't support this in the shorthand */ background-attachment: local, local, scroll, scroll; &[data-overflow='y'] { overflow-y: auto; background-image: /* Shadow covers */ linear-gradient( - var(--surface) 30%, - var(--surface) + var(--tk-scroll-shadow-background) 30%, + var(--tk-scroll-shadow-background) + ), + linear-gradient( + var(--tk-scroll-shadow-background), + var(--tk-scroll-shadow-background) 70% ), - linear-gradient(var(--surface), var(--surface) 70%), /* Shadows */ radial-gradient( farthest-side at 0% 0, @@ -38,10 +42,13 @@ export const baseStyles = css` &[data-overflow='x'] { overflow-x: auto; background-image: /* Shadow covers */ linear-gradient( - var(--surface) 30%, - var(--surface) + var(--tk-scroll-shadow-background) 30%, + var(--tk-scroll-shadow-background) + ), + linear-gradient( + var(--tk-scroll-shadow-background), + var(--tk-scroll-shadow-background) 70% ), - linear-gradient(var(--surface), var(--surface) 70%), /* Shadows */ radial-gradient( farthest-side at 0% 0%, diff --git a/system/core/src/components/Select.ts b/system/core/src/components/Select.ts index cb67b351c..8da91ed4f 100644 --- a/system/core/src/components/Select.ts +++ b/system/core/src/components/Select.ts @@ -1,41 +1,37 @@ -import { css } from '@emotion/react'; +import { themedCss, css } from '../utils'; -import { themedCss } from '../themeVariables/theme'; +import { fullStyles as inputfullStyles } from './InputCore'; -import { baseStyles as inputBaseStyles, Props as InputProps } from './Input'; +export type { Props, DefaultedProps } from './InputCore'; +export { configurableDefaultProps } from './InputCore'; export const element = 'select'; export const selectors = ['select']; export const className = 'select'; export const globalThemeVars = themedCss({ + selector: '', light: css` - --down-chevron-svg: url('data:image/svg+xml;charset=utf8, '); + --tk-down-chevron-svg: url('data:image/svg+xml;charset=utf8, '); `, dark: css` - --down-chevron-svg: url('data:image/svg+xml;charset=utf8, '); + --tk-down-chevron-svg: url('data:image/svg+xml;charset=utf8, '); ` }); -export type Props = InputProps; - -export const baseStyles = css` - ${inputBaseStyles}; - --select-chevron-size: 20px; - --select-padding-block: 12px; - --select-padding-inline: 16px; +export const fullStyles = css` + ${inputfullStyles}; + width: var(--tk-input-width); + --tk-select-chevron-size: 20px; + &[data-size='small'] { + --tk-select-chevron-size: 16px; + } appearance: none; - border: 1px solid var(--border-transparent); + border: 1px solid var(--border); border-radius: var(--border-radius-small); font: var(--body-1); - --width: 220px; - &[data-stretch] { - --width: 100%; - } - width: var(--width); - padding: var(--select-padding-block) var(--select-padding-inline); - padding-right: calc( - var(--select-padding-inline) + var(--select-chevron-size) + + padding-inline-end: calc( + var(--tk-input-horizontal-padding) + var(--tk-select-chevron-size) + var(--spacing-l1) ); cursor: pointer; @@ -43,11 +39,14 @@ export const baseStyles = css` &:disabled, &[data-variant='disabled'] { background-color: var(--surface); - background-image: var(--down-chevron-svg); - background-position: right var(--select-padding-inline) center; + background-image: var(--tk-down-chevron-svg); + background-position: right var(--tk-input-horizontal-padding) center; + [div='rtl'] & { + background-position: left var(--tk-input-horizontal-padding) center; + } background-clip: border-box; background-repeat: no-repeat; - background-size: var(--select-chevron-size) var(--select-chevron-size); + background-size: var(--tk-select-chevron-size) var(--tk-select-chevron-size); } &:disabled, &[data-variant='disabled'] { diff --git a/system/core/src/components/Skeleton.ts b/system/core/src/components/Skeleton.ts index 695fe87cf..3bbc1d06a 100644 --- a/system/core/src/components/Skeleton.ts +++ b/system/core/src/components/Skeleton.ts @@ -1,12 +1,14 @@ -import { css, keyframes } from '@emotion/react'; +import { css } from '../utils'; // This file is a replacement for https://github.com/dvtng/react-loading-skeleton export const className = 'skeleton'; -const loadingAnimation = keyframes` - to { - background-position: -200% 0; +export const keyframes = css` + @keyframes tk-skeleton { + to { + background-position: -200% 0; + } } `; @@ -23,7 +25,7 @@ export interface SkeletonCSSProperties { '--skeleton-border-radius': string; } -export const baseStyles = css` +export const fullStyles = css` --animation-duration: 2s; --animation-direction: normal; @@ -42,7 +44,7 @@ export const baseStyles = css` overflow: hidden; z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */ - &::after { + &:after { content: ' '; display: block; position: absolute; @@ -58,7 +60,7 @@ export const baseStyles = css` 0 0 / 200% 100%, var(--surface-raised); background-attachment: fixed; - animation-name: ${loadingAnimation}; + animation-name: tk-skeleton; animation-direction: var(--animation-direction); animation-duration: var(--animation-duration); animation-delay: var(--animation-delay); diff --git a/system/core/src/components/Spinner.ts b/system/core/src/components/Spinner.ts index d97fd18df..fa87c5043 100644 --- a/system/core/src/components/Spinner.ts +++ b/system/core/src/components/Spinner.ts @@ -1,4 +1,4 @@ -import { css, keyframes } from '@emotion/react'; +import { css } from '../utils'; /** * Adapted from https://github.com/picocss/pico/blob/master/scss/utilities/_loading.scss @@ -13,10 +13,12 @@ export interface Props { 'aria-busy': boolean; } -export const rotateAnimation = keyframes` -to { - transform: rotate(1turn); -} +export const keyframes = css` + @keyframes rotate { + to { + transform: rotate(1turn); + } + } `; const defaultSize = '20px'; @@ -34,7 +36,7 @@ export const beforeStyles = css` mask-image: url('data:image/svg+xml; utf8, '); -webkit-mask-size: cover; mask-size: cover; - animation: ${rotateAnimation} 800ms infinite linear; + animation: rotate 800ms infinite linear; background-color: currentColor; `; @@ -54,7 +56,7 @@ export const coreStyles = css` } `; -export const baseStyles = css` +export const fullStyles = css` ${coreStyles} ${positioningStyles} diff --git a/system/core/src/components/TabButton.ts b/system/core/src/components/TabButton.ts index 81bc02729..d63c3d12c 100644 --- a/system/core/src/components/TabButton.ts +++ b/system/core/src/components/TabButton.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/react'; +import { css } from '../utils'; export const element = 'button'; export const className = 'tab-button'; @@ -19,21 +19,26 @@ export const defaultProps = { role: 'tab' }; -export const baseStyles = css` +export const fullStyles = css` padding: var(--spacing-l3) var(--spacing-l4); position: relative; text-decoration: none !important; - color: var(--text); + --tk-tab-button-color: var(--text-subtle); + color: var(--tk-tab-button-color); font-weight: 400; white-space: nowrap; - cursor: pointer; - --underline-height: 4px; + display: inline-flex; + align-items: center; + justify-content: center; + &:not([aria-selected='true']) { + cursor: pointer; + } &:after { display: block; content: ''; position: absolute; bottom: 0; - height: var(--underline-height); + height: var(--tk-tabs-underline-height, 2px); left: 0; right: 0; background: var(--text); @@ -58,7 +63,7 @@ export const baseStyles = css` } } &[aria-selected='true'] { - font-weight: 600; + --tk-tab-button-color: var(--text); &:after { opacity: 1; transform: scale(1); diff --git a/system/core/src/components/TabContent.ts b/system/core/src/components/TabContent.ts index 46e503c35..5f83a7a53 100644 --- a/system/core/src/components/TabContent.ts +++ b/system/core/src/components/TabContent.ts @@ -1,6 +1,4 @@ -import { css } from '@emotion/react'; - -import { OptionalKeys } from '../typeUtils'; +import { OptionalKeys, css } from '../utils'; export const className = 'tab-content'; export interface Props { @@ -11,4 +9,4 @@ export interface Props { export type DefaultedProps = OptionalKeys; export const defaultProps = { role: 'tabpanel' }; -export const baseStyles = css``; +export const fullStyles = css``; diff --git a/system/core/src/components/Table.ts b/system/core/src/components/Table.ts index 6f3b65d48..c387a6eb0 100644 --- a/system/core/src/components/Table.ts +++ b/system/core/src/components/Table.ts @@ -1,51 +1,63 @@ -import { css } from '@emotion/react'; +import { css } from '../utils'; export const element = 'table'; export const selectors = ['table']; export const className = 'table'; -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface Props {} +export interface Props { + 'data-variant'?: 'default' | 'striped'; +} -export const baseStyles = css` +export const fullStyles = css` text-align: start; border-spacing: 0; border-collapse: separate; border: 1px solid var(--border); border-radius: var(--border-radius-small); + & tr { + background-color: var(--tk-table-row-background); + } & thead { font: var(--label); + + & tr { + --tk-table-row-background: var(--surface-raised); + } + } + + &[data-variant='striped'] tbody tr:not([data-active='true']):nth-child(even) { + --tk-table-row-background: var(--surface-low); + &:hover { + --tk-table-row-background: var(--surface-low-hover); + } } & tbody { font: var(--body-2); - & tr[data-pseudo=''], & tr:hover { - transition: none; - background-color: var(--surface-hover-transparent); + --tk-table-row-background: var(--surface-raised-hover); } - } - & tr { - transition: all 0.3s ease-in-out; + & tr[data-active='true'] { + --tk-table-row-background: var(--surface-raised-active); + } } & th, & td { - vertical-align: baseline; white-space: nowrap; overflow: hidden; - padding: var(--spacing-l4); } & th { + padding: 0px var(--spacing-l4); border-bottom: 1px solid var(--border); - text-align: left; - [dir='rtl'] & { - text-align: right; - } + text-align: start; + vertical-align: middle; + line-height: 44px; + height: 44px; & > .table-resizer { display: inline-block; @@ -58,7 +70,18 @@ export const baseStyles = css` } } - // For reference: https://unused-css.com/blog/css-rounded-table-corners/ + & td { + padding: var(--spacing-l3) var(--spacing-l4); + line-height: 24px; + vertical-align: top; + } + + & td[data-cell-type='button'] { + padding: var(--spacing-l2) var(--spacing-l4); + text-align: center; + } + + /* For reference: https://unused-css.com/blog/css-rounded-table-corners/ */ & thead > tr:not(:last-child) > th, & thead > tr:not(:last-child) > td, & tbody > tr:not(:last-child) > th, diff --git a/system/core/src/components/Tabs.ts b/system/core/src/components/Tabs.ts index febcf2917..73dc7e52a 100644 --- a/system/core/src/components/Tabs.ts +++ b/system/core/src/components/Tabs.ts @@ -1,6 +1,4 @@ -import { css } from '@emotion/react'; - -import { OptionalKeys } from '../typeUtils'; +import { OptionalKeys, css } from '../utils'; export const className = 'tabs'; export interface Props { @@ -11,10 +9,9 @@ export interface Props { export type DefaultedProps = OptionalKeys; export const defaultProps = { role: 'tablist' }; -export const baseStyles = css` +export const fullStyles = css` display: flex; flex-direction: row; - gap: var(--spacing-l2); &[data-wrap='true'] { flex-wrap: wrap; } diff --git a/system/core/src/components/TextArea.ts b/system/core/src/components/TextArea.ts deleted file mode 100644 index 27c8ad4da..000000000 --- a/system/core/src/components/TextArea.ts +++ /dev/null @@ -1,69 +0,0 @@ -import { css } from '@emotion/react'; - -export const element = 'textarea'; -export const selectors = ['textarea']; -export const className = 'textarea'; - -export const textareaSizingStyles = css` - padding: 12px 16px; - border: 1px solid var(--border-transparent); - border-radius: var(--border-radius-small); - font: var(--body-1); - min-height: var(--input-height); - --width: 220px; - &[data-stretch] { - --width: 100%; - } - width: var(--width); - resize: vertical; - outline: none; -`; - -export interface Props { - 'data-variant'?: 'error' | 'disabled'; - 'data-stretch'?: boolean; -} - -export const baseStyles = css` - ${textareaSizingStyles} - background: var(--surface); - - @supports (field-sizing: content) { - field-sizing: content; - resize: none; - } - - &, - &:focus-within, - &:focus { - outline: none; - } - - &[data-pseudo='focus'], - &:focus, - &:focus-within { - border-color: var(--focus); - box-shadow: 0 0 0 1px var(--focus); - } - - &[data-variant='error'] { - border-color: var(--error); - box-shadow: 0 0 0 1px var(--error); - } - - &:disabled, - &[data-variant='disabled'] { - color: var(--text-disabled); - border-color: var(--border-transparent); - box-shadow: none; - background: var(--surface-disabled); - cursor: default; - pointer-events: none; - } - - &::placeholder, - & ::placeholder, - .placeholder { - color: var(--text-placeholder); - } -`; diff --git a/system/core/src/components/TextAreaCore.ts b/system/core/src/components/TextAreaCore.ts new file mode 100644 index 000000000..64b6cf411 --- /dev/null +++ b/system/core/src/components/TextAreaCore.ts @@ -0,0 +1,93 @@ +import { css } from '../utils'; + +import { fullStyles as inputStyles } from './InputCore'; + +export type { Props, DefaultedProps } from './InputCore'; +export { configurableDefaultProps } from './InputCore'; + +export const element = 'textarea'; +export const selectors = ['textarea']; +export const className = 'textarea'; + +export const textareaSizingStyles = css` + ${inputStyles} + width: var(--tk-input-width); + --tk-textarea-height: calc( + var(--tk-input-height) - (var(--tk-input-border-width) * 2) + ); + min-height: var(--tk-textarea-height); + resize: vertical; + outline: none; + @supports (field-sizing: content) { + & { + field-sizing: content; + resize: none; + } + } +`; + +export const textareaWrapperStyles = css` + &[data-content]:after { + display: block; + content: attr(data-content) ' '; + white-space: pre-wrap; + visibility: hidden; + pointer-events: none; + align-self: stretch; + padding: calc( + var(--tk-input-vertical-padding) - var(--tk-input-border-width) + ) + var(--tk-input-horizontal-padding); + } + & > textarea { + resize: none; + overflow: hidden; + align-self: stretch; + } + @supports (field-sizing: content) { + &[data-content]:after { + display: none; + } + & > textarea { + field-sizing: content; + } + } +`; + +export const fullStyles = css` + ${textareaSizingStyles} + background: var(--surface); + + &, + &:focus-within, + &:focus { + outline: none; + } + + &[data-pseudo='focus'], + &:focus, + &:focus-within { + border-color: var(--focus); + box-shadow: 0 0 0 1px var(--focus); + } + + &[data-variant='error'] { + border-color: var(--error); + box-shadow: 0 0 0 1px var(--error); + } + + &:disabled, + &[data-variant='disabled'] { + color: var(--text-disabled); + box-shadow: none; + background: var(--surface-disabled); + cursor: default; + pointer-events: none; + } + + &::placeholder, + & ::placeholder, + .placeholder { + color: var(--text-placeholder); + } +`; diff --git a/system/core/src/components/TextAreaWithIcons.ts b/system/core/src/components/TextAreaWithIcons.ts index 64b7271dd..2d86b652e 100644 --- a/system/core/src/components/TextAreaWithIcons.ts +++ b/system/core/src/components/TextAreaWithIcons.ts @@ -1,21 +1,31 @@ -import { css } from '@emotion/react'; +import { css } from '../utils'; import { - baseStyles as textareaBaseStyles, - Props as TextareaProps, - textareaSizingStyles -} from './TextArea'; + fullStyles as textareaStyles, + textareaWrapperStyles +} from './TextAreaCore'; -export const className = 'textarea-with-icons'; +export type { Props, DefaultedProps } from './TextAreaCore'; +export { configurableDefaultProps } from './InputCore'; -export type Props = TextareaProps; +export const className = 'textarea-with-icons'; -export const baseStyles = css` - ${textareaBaseStyles}; +export const fullStyles = css` + ${textareaStyles}; + ${textareaWrapperStyles}; display: grid; - grid-template-columns: 8px 16px auto 16px 8px; - grid-template-rows: var(--input-height) auto; - grid-gap: 0 var(--spacing-l2); + --tk-input-icon-gap: var(--spacing-l2); + --tk-input-icon-end-padding: calc( + var(--tk-input-horizontal-padding) - var(--tk-input-border-width) - + var(--tk-input-icon-gap) + ); + grid-template-columns: + var(--tk-input-icon-end-padding) var(--tk-input-icon-size) auto var( + --tk-input-icon-size + ) + var(--tk-input-icon-end-padding); + grid-template-rows: var(--tk-textarea-height) auto; + gap: 0 var(--tk-input-icon-gap); align-items: center; cursor: text; padding: 0; @@ -36,21 +46,52 @@ export const baseStyles = css` } & > textarea { - ${textareaSizingStyles}; + &, + &[data-pseudo='focus'], + &:focus { + outline: none; + } + color: currentColor; + width: var(--tk-input-width); border: none; background: transparent; grid-area: 1/1/3/6; - // the 24 below is 16px width icon + 8px gap - &:first-child:not(:last-child) { - padding-left: calc(16px + (24 * var(--rtl-space))); - padding-right: calc(16px + (24 * var(--ltr-space))); - } - &:not(:first-child):last-child { - padding-left: calc(16px + (24 * var(--ltr-space))); - padding-right: calc(16px + (24 * var(--rtl-space))); + padding: calc( + var(--tk-input-vertical-padding) - var(--tk-input-border-width) + ) + var(--tk-input-horizontal-padding); + + &:first-child:not(:last-child), + &:not(:first-child):not(:last-child) { + padding-inline-end: calc( + var(--tk-input-horizontal-padding) + var(--tk-input-icon-size) + + var(--tk-input-icon-gap) + ); } + &:not(:first-child):last-child, &:not(:first-child):not(:last-child) { - padding: 12px calc(16px + 24px); + padding-inline-start: calc( + var(--tk-input-horizontal-padding) + var(--tk-input-icon-size) + + var(--tk-input-icon-gap) + ); } } + + &:after { + grid-area: 1/1/3/6; + } + &[data-with-icon='before']:after, + &[data-with-icon='both']:after { + padding-inline-start: calc( + var(--tk-input-horizontal-padding) + var(--tk-input-icon-size) + + var(--tk-input-icon-gap) + ); + } + &[data-with-icon='after']:after, + &[data-with-icon='both']:after { + padding-inline-end: calc( + var(--tk-input-horizontal-padding) + var(--tk-input-icon-size) + + var(--tk-input-icon-gap) + ); + } `; diff --git a/system/core/src/components/TextAreaWithPrefix.ts b/system/core/src/components/TextAreaWithPrefix.ts new file mode 100644 index 000000000..2ebf5fded --- /dev/null +++ b/system/core/src/components/TextAreaWithPrefix.ts @@ -0,0 +1,100 @@ +import { css } from '../utils'; + +import { + fullStyles as textareaStyles, + textareaWrapperStyles +} from './TextAreaCore'; + +export type { Props, DefaultedProps } from './TextAreaCore'; +export { configurableDefaultProps } from './InputCore'; + +export const className = 'textarea-with-prefix'; + +export const fullStyles = css` + ${textareaStyles}; + ${textareaWrapperStyles}; + display: grid; + --tk-input-icon-gap: var(--spacing-l2); + --tk-input-icon-end-padding: calc( + var(--tk-input-horizontal-padding) - var(--tk-input-border-width) - + var(--tk-input-icon-gap) + ); + grid-template-columns: + min-content + auto + var(--tk-input-icon-gap) + var(--tk-input-icon-size) + var(--tk-input-icon-gap) + var(--tk-input-icon-end-padding); + grid-template-rows: var(--tk-textarea-height) auto; + gap: 0; + align-items: center; + cursor: text; + padding: 0; + + & > :not(textarea) { + z-index: 1; + } + + & > :not(textarea):not(button):not(a) { + pointer-events: none; + } + + & > :nth-child(1) { + grid-area: 1/1/3/1; + border-inline-end: var(--tk-input-border-width) solid var(--border); + background: var(--surface-raised); + padding: 0 var(--spacing-l3); + display: flex; + align-items: flex-start; + align-self: stretch; + line-height: var(--tk-textarea-height); + white-space: nowrap; + [dir='rtl'] & { + border-top-right-radius: var(--border-radius-small); + border-bottom-right-radius: var(--border-radius-small); + } + [dir='ltr'] & { + border-top-left-radius: var(--border-radius-small); + border-bottom-left-radius: var(--border-radius-small); + } + } + + & > :nth-child(3) { + z-index: 1; + grid-area: 1/4; + } + + & > textarea { + color: currentColor; + &, + &[data-pseudo='focus'], + &:focus { + outline: none; + } + min-width: 0; + border: none; + background: transparent; + grid-area: 1/2/3/6; + padding: calc( + var(--tk-input-vertical-padding) - var(--tk-input-border-width) + ) + var(--tk-input-horizontal-padding); + + &:not(:last-child) { + padding-inline-end: calc( + var(--tk-input-horizontal-padding) + var(--tk-input-icon-size) + + var(--tk-input-icon-gap) + ); + } + } + &:after { + grid-area: 1/2/3/6; + } + &[data-with-icon='after']:after { + padding-inline-end: calc( + var(--tk-input-horizontal-padding) + var(--tk-input-icon-size) + + var(--tk-input-icon-gap) + ); + } +`; diff --git a/system/core/src/components/TextAreaWithSuffix.ts b/system/core/src/components/TextAreaWithSuffix.ts new file mode 100644 index 000000000..4526b72c7 --- /dev/null +++ b/system/core/src/components/TextAreaWithSuffix.ts @@ -0,0 +1,96 @@ +import { css } from '../utils'; + +import { + fullStyles as textareaStyles, + textareaWrapperStyles +} from './TextAreaCore'; + +export type { Props, DefaultedProps } from './TextAreaCore'; +export { configurableDefaultProps } from './InputCore'; + +export const className = 'textarea-with-suffix'; + +export const fullStyles = css` + ${textareaStyles}; + ${textareaWrapperStyles}; + display: grid; + --tk-input-icon-gap: var(--spacing-l2); + --tk-input-icon-end-padding: calc( + var(--tk-input-horizontal-padding) - var(--tk-input-border-width) - + var(--tk-input-icon-gap) + ); + grid-template-columns: + var(--tk-input-icon-end-padding) + var(--tk-input-icon-gap) + var(--tk-input-icon-size) + var(--tk-input-icon-gap) + auto + min-content; + grid-template-rows: var(--tk-textarea-height) auto; + gap: 0; + align-items: center; + cursor: text; + padding: 0; + + & > :nth-child(1):not(textarea) { + z-index: 1; + grid-area: 1/3; + } + + & > :not(textarea):not(button):not(a) { + pointer-events: none; + } + + & > textarea { + color: currentColor; + &, + &[data-pseudo='focus'], + &:focus { + outline: none; + } + min-width: 0; + border: none; + background: transparent; + grid-area: 1/2/3/6; + padding: calc( + var(--tk-input-vertical-padding) - var(--tk-input-border-width) + ) + var(--tk-input-horizontal-padding); + + &:not(:first-child) { + padding-inline-start: calc( + var(--tk-input-horizontal-padding) + var(--tk-input-icon-size) + + var(--tk-input-icon-gap) + ); + } + + & + * { + grid-area: 1/6/3/6; + border-inline-start: var(--tk-input-border-width) solid var(--border); + background: var(--surface-raised); + padding: 0 var(--spacing-l3); + display: flex; + align-items: flex-start; + align-self: stretch; + line-height: var(--tk-textarea-height); + white-space: nowrap; + [dir='rtl'] & { + border-top-left-radius: var(--border-radius-small); + border-bottom-left-radius: var(--border-radius-small); + } + [dir='ltr'] & { + border-top-right-radius: var(--border-radius-small); + border-bottom-right-radius: var(--border-radius-small); + } + } + } + &:after { + grid-area: 1/2/3/6; + } + &[data-with-icon='before']:after { + padding-inline-start: calc( + var(--tk-input-horizontal-padding) + var(--tk-input-icon-size) + + var(--tk-input-icon-gap) + ); + } +`; diff --git a/system/core/src/components/Toggle.ts b/system/core/src/components/Toggle.ts index df1621625..4c8f6fa7e 100644 --- a/system/core/src/components/Toggle.ts +++ b/system/core/src/components/Toggle.ts @@ -1,127 +1,99 @@ -import { css } from '@emotion/react'; - -import { OptionalKeys } from '../typeUtils'; +import { OptionalKeys, css } from '../utils'; export const element = 'input'; export const selectors = ['input[type="checkbox"].toggle']; export interface Props { type: 'checkbox'; - 'data-size'?: 'small' | 'regular'; + 'data-size'?: 'small' | 'medium' | 'large'; } export type DefaultedProps = OptionalKeys; export const defaultProps = { type: 'checkbox' }; -export const baseStyles = css` +export const configurableDefaultProps = { + 'data-size': 'controlSize' +}; + +export const fullStyles = css` position: relative; appearance: none; - border: 2px solid var(--border); - border-radius: 70px; - width: 68px; - height: 38px; + border-radius: var(--border-radius-full); + width: var(--tk-toggle-width); + height: var(--tk-toggle-height); transition: all 80ms linear; cursor: pointer; + background: var(--tk-toggle-background); &:before { - --size: 26px; position: absolute; top: 50%; transform: translateY(-50%); - left: var(--spacing-l1); + left: calc((var(--tk-toggle-height) - var(--tk-toggle-handle-size)) / 2); content: ''; - height: var(--size); - width: var(--size); + height: var(--tk-toggle-handle-size); + width: var(--tk-toggle-handle-size); border-radius: 50%; - background-color: var(--text); - } - - &:disabled:before { - background-color: var(--text-disabled); - } - - &[data-pseudo='hover'], - &:hover { - background-color: var(--surface-hover-transparent); - - &:disabled { - background-color: var(--surface); - - &:before { - background-color: var(--text); - } - } - } - - &:checked, - &:indeterminate { - background-color: var(--primary); - border: 2px solid var(--border-transparent); - - &:before { - background-color: var(--surface); - } - - &[data-pseudo='hover'], - &:hover { - background-color: var(--primary-hover); - } - - &:disabled { - background-color: var(--surface-disabled); - border: 2px solid var(--border); - - &[data-pseudo='hover'], - &:hover { - &::before { - background-color: var(--surface); - } - } - } + background-color: var(--tk-toggle-foreground); } &:checked:before { - right: var(--spacing-l1); + right: calc((var(--tk-toggle-height) - var(--tk-toggle-handle-size)) / 2); left: auto; } &:indeterminate { &:before { - width: 36px; - height: 6px; - background-color: var(--surface); + width: calc(var(--tk-toggle-height) - 2px); + height: calc( + (var(--tk-toggle-height) - var(--tk-toggle-handle-size)) / 2 + ); border-radius: 50px; left: 50%; transform: translate(-50%, -50%); } } + --tk-toggle-background: var(--toggle-inactive); + --tk-toggle-foreground: var(--surface-raised); + + &:checked, + &:indeterminate { + --tk-toggle-background: var(--brand-primary); + } + + &:disabled, + &:disabled:hover { + --tk-toggle-background: var(--toggle-disabled); + --tk-toggle-foreground: var(--surface-disabled); + cursor: not-allowed; + } + &[data-pseudo='focus'], &:focus, &:focus-visible { outline: none; - &:after { - content: ''; - position: absolute; - top: -4px; - bottom: -4px; - left: -4px; - right: -4px; - border: 2px solid var(--focus); - border-radius: 99px; - } + box-shadow: 0 0 0 2px var(--focus); + } + &:focus:not(:focus-visible) { + box-shadow: none !important; } - &[data-size='small'] { - width: 50px; - height: 26px; + &[data-size='medium'], + &:not([data-size]) { + --tk-toggle-width: 50px; + --tk-toggle-height: 26px; + --tk-toggle-handle-size: 18px; + } - &:before { - --size: 18px; - } + &[data-size='small'] { + --tk-toggle-width: 38px; + --tk-toggle-height: 20px; + --tk-toggle-handle-size: 15px; + } - &:indeterminate:before { - width: 26px; - height: 4px; - } + &[data-size='large'] { + --tk-toggle-width: 68px; + --tk-toggle-height: 38px; + --tk-toggle-handle-size: 26px; } `; diff --git a/system/core/src/components/Tooltip.ts b/system/core/src/components/Tooltip.ts index 47722138f..62b8601be 100644 --- a/system/core/src/components/Tooltip.ts +++ b/system/core/src/components/Tooltip.ts @@ -1,4 +1,4 @@ -import { css, keyframes } from '@emotion/react'; +import { css } from '../utils'; /** * Adapted from https://github.com/picocss/pico/blob/master/scss/utilities/_tooltip.scss @@ -11,18 +11,20 @@ export interface Props { 'data-tooltip': string; } -const slide = keyframes` - from { - transform: translate(-50%, .75rem); - opacity: 0; - } - to { - transform: translate(-50%, -.25rem); - opacity: 1; +export const keyframes = css` + @keyframes tk-tooltip { + from { + transform: translate(-50%, 0.75rem); + opacity: 0; + } + to { + transform: translate(-50%, -0.25rem); + opacity: 1; + } } `; -export const baseStyles = css` +export const fullStyles = css` --tooltip-background-color: var(--surface, #000); --tooltip-text-color: var(--text, #fff); position: relative; @@ -51,7 +53,6 @@ export const baseStyles = css` border: 1px solid var(--border); } - // Display &[data-pseudo='focus'], &[data-pseudo='hover'], &:focus, @@ -66,7 +67,7 @@ export const baseStyles = css` &:hover { &::before { animation-duration: 0.2s; - animation-name: ${slide}; + animation-name: tk-tooltip; } } } diff --git a/system/core/src/config.ts b/system/core/src/config.ts new file mode 100644 index 000000000..c03eeb046 --- /dev/null +++ b/system/core/src/config.ts @@ -0,0 +1,15 @@ +/** + * DO NOT EDIT: This file is generated, run 'npm update:exports' to update this. + * The exports here are generated from all ts/tsx files at the root level + */ +import type * as Core from './index'; + +export interface ConfigDefaults { + controlSize: NonNullable< + Core.button.Props['data-size'] & + Core.buttonGroup.Props['data-size'] & + Core.chip.Props['data-size'] & + Core.inputCore.Props['data-size'] & + Core.toggle.Props['data-size'] + >; +} diff --git a/system/core/src/globalStyles.ts b/system/core/src/globalStyles.ts index f6586794d..2b89c8462 100644 --- a/system/core/src/globalStyles.ts +++ b/system/core/src/globalStyles.ts @@ -1,8 +1,8 @@ -import { css } from '@emotion/react'; - import { constants } from './themeVariables/constants'; import { theme as themeStyles } from './themeVariables/theme'; +import { css } from './utils'; import { font } from './utils/font'; +import { keyframes } from './utils/keyframes'; import { ltrSupport } from './utils/ltrSupport'; import { resetCss } from './utils/resetCss'; import { typography } from './utils/typography'; @@ -13,5 +13,6 @@ export const globalStyles = css` ${ltrSupport}; ${themeStyles}; ${typography}; - ${constants} + ${constants}; + ${keyframes}; `; diff --git a/system/core/src/index.ts b/system/core/src/index.ts index 1a059487c..26c7b5d1d 100644 --- a/system/core/src/index.ts +++ b/system/core/src/index.ts @@ -14,11 +14,13 @@ export * as childAnchors from './components/ChildAnchors'; export * as chip from './components/Chip'; export * as chipRow from './components/ChipRow'; export * as iconButton from './components/IconButton'; -export * as input from './components/Input'; export * as inputAlert from './components/InputAlert'; +export * as inputCore from './components/InputCore'; export * as inputLikeButton from './components/InputLikeButton'; export * as inputStructure from './components/InputStructure'; export * as inputWithIcons from './components/InputWithIcons'; +export * as inputWithPrefix from './components/InputWithPrefix'; +export * as inputWithSuffix from './components/InputWithSuffix'; export * as menu from './components/Menu'; export * as menuItem from './components/MenuItem'; export * as menuList from './components/MenuList'; @@ -31,15 +33,20 @@ export * as tabButton from './components/TabButton'; export * as tabContent from './components/TabContent'; export * as table from './components/Table'; export * as tabs from './components/Tabs'; -export * as textArea from './components/TextArea'; +export * as textAreaCore from './components/TextAreaCore'; export * as textAreaWithIcons from './components/TextAreaWithIcons'; +export * as textAreaWithPrefix from './components/TextAreaWithPrefix'; +export * as textAreaWithSuffix from './components/TextAreaWithSuffix'; export * as toggle from './components/Toggle'; export * as tooltip from './components/Tooltip'; export { constants } from './themeVariables/constants'; export * from './themeVariables/theme'; export * from './themeVariables/types'; export { font } from './utils/font'; +export { keyframes } from './utils/keyframes'; export { ltrSupport } from './utils/ltrSupport'; export { resetCss } from './utils/resetCss'; export { typography } from './utils/typography'; +export * from './config'; export { globalStyles } from './globalStyles'; +export { themedCss } from './utils'; diff --git a/system/core/src/themeVariables/constants.ts b/system/core/src/themeVariables/constants.ts index 05a9122fa..f1b040fda 100644 --- a/system/core/src/themeVariables/constants.ts +++ b/system/core/src/themeVariables/constants.ts @@ -1,13 +1,11 @@ -import { css } from '@emotion/react'; - import { globalThemeVars as selectGlobalThemeVars } from '../components/Select'; +import { css } from '../utils'; export const constants = css` :root { --border-radius-small: 4px; --border-radius-large: 8px; --border-radius-full: 9999px; - --input-height: 48px; --spacing-l1: 4px; --spacing-l2: 8px; --spacing-l3: 12px; @@ -26,6 +24,7 @@ export const constants = css` --zindex-flag: 600; --zindex-spotlight: 700; --zindex-tooltip: 800; + --tk-input-icon-size: 20px; } ${selectGlobalThemeVars} diff --git a/system/core/src/themeVariables/theme.ts b/system/core/src/themeVariables/theme.ts index 13e653e42..5a8a6bec5 100644 --- a/system/core/src/themeVariables/theme.ts +++ b/system/core/src/themeVariables/theme.ts @@ -1,6 +1,6 @@ // eslint-disable-next-line eslint-comments/disable-enable-pair /* eslint-disable max-lines */ -import { css } from '@emotion/react'; +import { css, themedCss } from '../utils'; /** * DO NOT EDIT; File is generated from figma, see './updateFromFigma.mjs' for update instructions @@ -22,6 +22,14 @@ export const lightColors = css` --border: rgba(229, 229, 229, 1); --border-active: rgba(41, 41, 41, 1); --border-transparent: rgba(0, 0, 0, 0.1); + --brand-primary: rgba(142, 74, 231, 1); + --brand-primary-active: rgba(159, 96, 241, 1); + --brand-primary-hover: rgba(159, 96, 241, 1); + --brand-primary-text: rgba(255, 255, 255, 1); + --brand-secondary: rgba(226, 204, 255, 1); + --brand-secondary-active: rgba(220, 193, 255, 1); + --brand-secondary-hover: rgba(220, 193, 255, 1); + --brand-secondary-text: rgba(41, 41, 41, 1); --error: rgba(204, 0, 0, 1); --error-surface: rgba(254, 223, 223, 1); --error-surface-hover: rgba(254, 205, 205, 1); @@ -32,9 +40,9 @@ export const lightColors = css` --info-surface: rgba(223, 239, 254, 1); --info-surface-hover: rgba(205, 229, 254, 1); --info-text: rgba(0, 102, 204, 1); - --link: rgba(0, 102, 204, 1); + --link: rgba(142, 74, 231, 1); --link-disabled: rgba(206, 206, 206, 1); - --link-hover: rgba(27, 126, 225, 1); + --link-hover: rgba(159, 96, 241, 1); --link-visited: rgba(200, 0, 204, 1); --neutral: rgba(75, 75, 75, 1); --neutral-surface: rgba(238, 238, 238, 1); @@ -46,30 +54,34 @@ export const lightColors = css` --purple-surface: rgba(245, 216, 255, 1); --purple-surface-hover: rgba(240, 198, 254, 1); --purple-text: rgba(113, 0, 153, 1); - --secondary: rgba(41, 41, 41, 1); - --secondary-active: rgba(75, 75, 75, 1); - --secondary-hover: rgba(102, 102, 102, 1); - --secondary-surface: rgba(249, 249, 249, 1); --success: rgba(6, 121, 0, 1); --success-surface: rgba(233, 254, 223, 1); --success-surface-hover: rgba(220, 254, 205, 1); --success-text: rgba(6, 121, 0, 1); --surface: rgba(255, 255, 255, 1); - --surface-active: rgba(0, 0, 0, 0.14); - --surface-disabled: rgba(238, 238, 238, 1); - --surface-hover: rgba(238, 238, 238, 1); - --surface-hover-transparent: rgba(0, 0, 0, 0.06); + --surface-active: rgba(238, 238, 238, 1); + --surface-disabled: rgba(247, 247, 247, 1); + --surface-hover: rgba(247, 247, 247, 1); + --surface-hover-transparent: rgba(0, 0, 0, 0.04); --surface-low: rgba(252, 252, 252, 1); - --surface-raised: rgba(252, 252, 252, 1); + --surface-low-active: rgba(243, 242, 255, 1); + --surface-low-hover: rgba(247, 247, 247, 1); + --surface-low-hover-transparent: rgba(0, 0, 0, 0.03); + --surface-raised: rgba(249, 249, 249, 1); --surface-raised-active: rgba(243, 242, 255, 1); - --surface-raised-hover: rgba(249, 249, 249, 1); + --surface-raised-hover: rgba(247, 247, 247, 1); --surface-raised-hover-transparent: rgba(0, 0, 0, 0.03); + --surface-secondary: rgba(41, 41, 41, 1); + --surface-secondary-active: rgba(75, 75, 75, 1); + --surface-secondary-hover: rgba(75, 75, 75, 1); + --surface-secondary-text: rgba(255, 255, 255, 1); --text: rgba(41, 41, 41, 1); - --text-alt: rgba(132, 132, 132, 1); - --text-contrast: rgba(255, 255, 255, 1); --text-disabled: rgba(206, 206, 206, 1); --text-placeholder: rgba(191, 191, 191, 1); - --text-subtle: rgba(152, 152, 152, 1); + --text-secondary: rgba(255, 255, 255, 1); + --text-subtle: rgba(132, 132, 132, 1); + --toggle-disabled: rgba(238, 238, 238, 1); + --toggle-inactive: rgba(206, 206, 206, 1); --warning: rgba(232, 183, 47, 1); --warning-surface: rgba(255, 250, 223, 1); --warning-surface-hover: rgba(255, 248, 212, 1); @@ -80,6 +92,14 @@ export const lightColorsObject = { border: 'rgba(229, 229, 229, 1)', 'border-active': 'rgba(41, 41, 41, 1)', 'border-transparent': 'rgba(0, 0, 0, 0.1)', + 'brand-primary': 'rgba(142, 74, 231, 1)', + 'brand-primary-active': 'rgba(159, 96, 241, 1)', + 'brand-primary-hover': 'rgba(159, 96, 241, 1)', + 'brand-primary-text': 'rgba(255, 255, 255, 1)', + 'brand-secondary': 'rgba(226, 204, 255, 1)', + 'brand-secondary-active': 'rgba(220, 193, 255, 1)', + 'brand-secondary-hover': 'rgba(220, 193, 255, 1)', + 'brand-secondary-text': 'rgba(41, 41, 41, 1)', error: 'rgba(204, 0, 0, 1)', 'error-surface': 'rgba(254, 223, 223, 1)', 'error-surface-hover': 'rgba(254, 205, 205, 1)', @@ -90,9 +110,9 @@ export const lightColorsObject = { 'info-surface': 'rgba(223, 239, 254, 1)', 'info-surface-hover': 'rgba(205, 229, 254, 1)', 'info-text': 'rgba(0, 102, 204, 1)', - link: 'rgba(0, 102, 204, 1)', + link: 'rgba(142, 74, 231, 1)', 'link-disabled': 'rgba(206, 206, 206, 1)', - 'link-hover': 'rgba(27, 126, 225, 1)', + 'link-hover': 'rgba(159, 96, 241, 1)', 'link-visited': 'rgba(200, 0, 204, 1)', neutral: 'rgba(75, 75, 75, 1)', 'neutral-surface': 'rgba(238, 238, 238, 1)', @@ -104,30 +124,34 @@ export const lightColorsObject = { 'purple-surface': 'rgba(245, 216, 255, 1)', 'purple-surface-hover': 'rgba(240, 198, 254, 1)', 'purple-text': 'rgba(113, 0, 153, 1)', - secondary: 'rgba(41, 41, 41, 1)', - 'secondary-active': 'rgba(75, 75, 75, 1)', - 'secondary-hover': 'rgba(102, 102, 102, 1)', - 'secondary-surface': 'rgba(249, 249, 249, 1)', success: 'rgba(6, 121, 0, 1)', 'success-surface': 'rgba(233, 254, 223, 1)', 'success-surface-hover': 'rgba(220, 254, 205, 1)', 'success-text': 'rgba(6, 121, 0, 1)', surface: 'rgba(255, 255, 255, 1)', - 'surface-active': 'rgba(0, 0, 0, 0.14)', - 'surface-disabled': 'rgba(238, 238, 238, 1)', - 'surface-hover': 'rgba(238, 238, 238, 1)', - 'surface-hover-transparent': 'rgba(0, 0, 0, 0.06)', + 'surface-active': 'rgba(238, 238, 238, 1)', + 'surface-disabled': 'rgba(247, 247, 247, 1)', + 'surface-hover': 'rgba(247, 247, 247, 1)', + 'surface-hover-transparent': 'rgba(0, 0, 0, 0.04)', 'surface-low': 'rgba(252, 252, 252, 1)', - 'surface-raised': 'rgba(252, 252, 252, 1)', + 'surface-low-active': 'rgba(243, 242, 255, 1)', + 'surface-low-hover': 'rgba(247, 247, 247, 1)', + 'surface-low-hover-transparent': 'rgba(0, 0, 0, 0.03)', + 'surface-raised': 'rgba(249, 249, 249, 1)', 'surface-raised-active': 'rgba(243, 242, 255, 1)', - 'surface-raised-hover': 'rgba(249, 249, 249, 1)', + 'surface-raised-hover': 'rgba(247, 247, 247, 1)', 'surface-raised-hover-transparent': 'rgba(0, 0, 0, 0.03)', + 'surface-secondary': 'rgba(41, 41, 41, 1)', + 'surface-secondary-active': 'rgba(75, 75, 75, 1)', + 'surface-secondary-hover': 'rgba(75, 75, 75, 1)', + 'surface-secondary-text': 'rgba(255, 255, 255, 1)', text: 'rgba(41, 41, 41, 1)', - 'text-alt': 'rgba(132, 132, 132, 1)', - 'text-contrast': 'rgba(255, 255, 255, 1)', 'text-disabled': 'rgba(206, 206, 206, 1)', 'text-placeholder': 'rgba(191, 191, 191, 1)', - 'text-subtle': 'rgba(152, 152, 152, 1)', + 'text-secondary': 'rgba(255, 255, 255, 1)', + 'text-subtle': 'rgba(132, 132, 132, 1)', + 'toggle-disabled': 'rgba(238, 238, 238, 1)', + 'toggle-inactive': 'rgba(206, 206, 206, 1)', warning: 'rgba(232, 183, 47, 1)', 'warning-surface': 'rgba(255, 250, 223, 1)', 'warning-surface-hover': 'rgba(255, 248, 212, 1)', @@ -139,6 +163,14 @@ export const darkColors = css` --border: rgba(58, 58, 58, 1); --border-active: rgba(255, 255, 255, 1); --border-transparent: rgba(255, 255, 255, 0.17); + --brand-primary: rgba(142, 74, 231, 1); + --brand-primary-active: rgba(120, 50, 210, 1); + --brand-primary-hover: rgba(120, 50, 210, 1); + --brand-primary-text: rgba(255, 255, 255, 1); + --brand-secondary: rgba(85, 26, 163, 1); + --brand-secondary-active: rgba(63, 15, 126, 1); + --brand-secondary-hover: rgba(63, 15, 126, 1); + --brand-secondary-text: rgba(253, 253, 253, 1); --error: rgba(239, 72, 72, 1); --error-surface: rgba(140, 0, 0, 1); --error-surface-hover: rgba(159, 0, 0, 1); @@ -149,9 +181,9 @@ export const darkColors = css` --info-surface: rgba(0, 70, 140, 1); --info-surface-hover: rgba(0, 88, 175, 1); --info-text: rgba(223, 239, 254, 1); - --link: rgba(72, 155, 239, 1); + --link: rgba(176, 128, 238, 1); --link-disabled: rgba(152, 152, 152, 1); - --link-hover: rgba(27, 126, 225, 1); + --link-hover: rgba(165, 110, 236, 1); --link-visited: rgba(181, 11, 215, 1); --neutral: rgba(102, 102, 102, 1); --neutral-surface: rgba(58, 58, 58, 1); @@ -163,31 +195,34 @@ export const darkColors = css` --purple-surface: rgba(113, 0, 153, 1); --purple-surface-hover: rgba(136, 8, 182, 1); --purple-text: rgba(245, 216, 255, 1); - --secondary: rgba(255, 255, 255, 1); - --secondary-active: rgba(206, 206, 206, 1); - --secondary-hover: rgba(229, 229, 229, 1); - --secondary-surface: rgba(41, 41, 41, 1); --success: rgba(20, 175, 0, 1); --success-surface: rgba(3, 102, 0, 1); --success-surface-hover: rgba(6, 121, 0, 1); --success-text: rgba(233, 254, 223, 1); --surface: rgba(30, 30, 30, 1); - --surface-active: rgba(255, 255, 255, 0.17); + --surface-active: rgba(58, 58, 58, 1); --surface-disabled: rgba(75, 75, 75, 1); - --surface-hover: rgba(58, 58, 58, 1); - --surface-hover-transparent: rgba(255, 255, 255, 0.13); + --surface-hover: rgba(41, 41, 41, 1); + --surface-hover-transparent: rgba(255, 255, 255, 0.05); --surface-low: rgba(18, 18, 18, 1); - --surface-low-active: rgba(56, 39, 80, 1); + --surface-low-active: rgba(76, 68, 92, 1); --surface-low-hover: rgba(41, 41, 41, 1); - --surface-low-hover-transparent: rgba(255, 255, 255, 0.09); + --surface-low-hover-transparent: rgba(255, 255, 255, 0.05); --surface-raised: rgba(41, 41, 41, 1); + --surface-raised-active: rgba(76, 68, 92, 1); --surface-raised-hover: rgba(75, 75, 75, 1); + --surface-raised-hover-transparent: rgba(255, 255, 255, 0.2); + --surface-secondary: rgba(75, 75, 75, 1); + --surface-secondary-active: rgba(58, 58, 58, 1); + --surface-secondary-hover: rgba(58, 58, 58, 1); + --surface-secondary-text: rgba(253, 253, 253, 1); --text: rgba(253, 253, 253, 1); - --text-alt: rgba(229, 229, 229, 1); - --text-contrast: rgba(18, 18, 18, 1); --text-disabled: rgba(152, 152, 152, 1); --text-placeholder: rgba(152, 152, 152, 1); + --text-secondary: rgba(18, 18, 18, 1); --text-subtle: rgba(191, 191, 191, 1); + --toggle-disabled: rgba(58, 58, 58, 1); + --toggle-inactive: rgba(102, 102, 102, 1); --warning: rgba(239, 194, 72, 1); --warning-surface: rgba(140, 103, 0, 1); --warning-surface-hover: rgba(159, 116, 0, 1); @@ -198,6 +233,14 @@ export const darkColorsObject = { border: 'rgba(58, 58, 58, 1)', 'border-active': 'rgba(255, 255, 255, 1)', 'border-transparent': 'rgba(255, 255, 255, 0.17)', + 'brand-primary': 'rgba(142, 74, 231, 1)', + 'brand-primary-active': 'rgba(120, 50, 210, 1)', + 'brand-primary-hover': 'rgba(120, 50, 210, 1)', + 'brand-primary-text': 'rgba(255, 255, 255, 1)', + 'brand-secondary': 'rgba(85, 26, 163, 1)', + 'brand-secondary-active': 'rgba(63, 15, 126, 1)', + 'brand-secondary-hover': 'rgba(63, 15, 126, 1)', + 'brand-secondary-text': 'rgba(253, 253, 253, 1)', error: 'rgba(239, 72, 72, 1)', 'error-surface': 'rgba(140, 0, 0, 1)', 'error-surface-hover': 'rgba(159, 0, 0, 1)', @@ -208,9 +251,9 @@ export const darkColorsObject = { 'info-surface': 'rgba(0, 70, 140, 1)', 'info-surface-hover': 'rgba(0, 88, 175, 1)', 'info-text': 'rgba(223, 239, 254, 1)', - link: 'rgba(72, 155, 239, 1)', + link: 'rgba(176, 128, 238, 1)', 'link-disabled': 'rgba(152, 152, 152, 1)', - 'link-hover': 'rgba(27, 126, 225, 1)', + 'link-hover': 'rgba(165, 110, 236, 1)', 'link-visited': 'rgba(181, 11, 215, 1)', neutral: 'rgba(102, 102, 102, 1)', 'neutral-surface': 'rgba(58, 58, 58, 1)', @@ -222,31 +265,34 @@ export const darkColorsObject = { 'purple-surface': 'rgba(113, 0, 153, 1)', 'purple-surface-hover': 'rgba(136, 8, 182, 1)', 'purple-text': 'rgba(245, 216, 255, 1)', - secondary: 'rgba(255, 255, 255, 1)', - 'secondary-active': 'rgba(206, 206, 206, 1)', - 'secondary-hover': 'rgba(229, 229, 229, 1)', - 'secondary-surface': 'rgba(41, 41, 41, 1)', success: 'rgba(20, 175, 0, 1)', 'success-surface': 'rgba(3, 102, 0, 1)', 'success-surface-hover': 'rgba(6, 121, 0, 1)', 'success-text': 'rgba(233, 254, 223, 1)', surface: 'rgba(30, 30, 30, 1)', - 'surface-active': 'rgba(255, 255, 255, 0.17)', + 'surface-active': 'rgba(58, 58, 58, 1)', 'surface-disabled': 'rgba(75, 75, 75, 1)', - 'surface-hover': 'rgba(58, 58, 58, 1)', - 'surface-hover-transparent': 'rgba(255, 255, 255, 0.13)', + 'surface-hover': 'rgba(41, 41, 41, 1)', + 'surface-hover-transparent': 'rgba(255, 255, 255, 0.05)', 'surface-low': 'rgba(18, 18, 18, 1)', - 'surface-low-active': 'rgba(56, 39, 80, 1)', + 'surface-low-active': 'rgba(76, 68, 92, 1)', 'surface-low-hover': 'rgba(41, 41, 41, 1)', - 'surface-low-hover-transparent': 'rgba(255, 255, 255, 0.09)', + 'surface-low-hover-transparent': 'rgba(255, 255, 255, 0.05)', 'surface-raised': 'rgba(41, 41, 41, 1)', + 'surface-raised-active': 'rgba(76, 68, 92, 1)', 'surface-raised-hover': 'rgba(75, 75, 75, 1)', + 'surface-raised-hover-transparent': 'rgba(255, 255, 255, 0.2)', + 'surface-secondary': 'rgba(75, 75, 75, 1)', + 'surface-secondary-active': 'rgba(58, 58, 58, 1)', + 'surface-secondary-hover': 'rgba(58, 58, 58, 1)', + 'surface-secondary-text': 'rgba(253, 253, 253, 1)', text: 'rgba(253, 253, 253, 1)', - 'text-alt': 'rgba(229, 229, 229, 1)', - 'text-contrast': 'rgba(18, 18, 18, 1)', 'text-disabled': 'rgba(152, 152, 152, 1)', 'text-placeholder': 'rgba(152, 152, 152, 1)', + 'text-secondary': 'rgba(18, 18, 18, 1)', 'text-subtle': 'rgba(191, 191, 191, 1)', + 'toggle-disabled': 'rgba(58, 58, 58, 1)', + 'toggle-inactive': 'rgba(102, 102, 102, 1)', warning: 'rgba(239, 194, 72, 1)', 'warning-surface': 'rgba(140, 103, 0, 1)', 'warning-surface-hover': 'rgba(159, 116, 0, 1)', @@ -273,6 +319,7 @@ export const utilityColors = css` --black: rgba(0, 0, 0, 1); --grey: rgba(18, 18, 18, 1); --grey-100: rgba(249, 249, 249, 1); + --grey-150: rgba(247, 247, 247, 1); --grey-200: rgba(238, 238, 238, 1); --grey-300: rgba(229, 229, 229, 1); --grey-400: rgba(219, 219, 219, 1); @@ -293,6 +340,7 @@ export const utilityColorsObject = { black: 'rgba(0, 0, 0, 1)', grey: 'rgba(18, 18, 18, 1)', 'grey-100': 'rgba(249, 249, 249, 1)', + 'grey-150': 'rgba(247, 247, 247, 1)', 'grey-200': 'rgba(238, 238, 238, 1)', 'grey-300': 'rgba(229, 229, 229, 1)', 'grey-400': 'rgba(219, 219, 219, 1)', @@ -321,32 +369,9 @@ export const darkEffectStyles = css` --elevation-small: 0 0 3px 0 rgba(255, 255, 255, 0.1); `; -export function themedCss({ - light, - dark -}: { - light: ReturnType; - dark: ReturnType; -}): ReturnType { - return css` - [data-theme='light'], - :root { - ${light} - } - @media (prefers-color-scheme: dark) { - :root:not([data-theme='light']), - [data-theme='system'] { - ${dark} - } - } - [data-theme='dark'] { - ${dark} - } - `; -} - export const theme = css` ${themedCss({ + selector: '', light: css` ${lightColors}; ${lightEffectStyles} diff --git a/system/core/src/themeVariables/types.gen.ts b/system/core/src/themeVariables/types.gen.ts new file mode 100644 index 000000000..0e1b8000d --- /dev/null +++ b/system/core/src/themeVariables/types.gen.ts @@ -0,0 +1,99 @@ +/** + * DO NOT EDIT; File is generated from figma, see './updateFromFigma.mjs' for update instructions + */ + +export interface TableKitCSSProperties { + '--border'?: string; + '--border-active'?: string; + '--border-transparent'?: string; + '--brand-primary'?: string; + '--brand-primary-active'?: string; + '--brand-primary-hover'?: string; + '--brand-primary-text'?: string; + '--brand-secondary'?: string; + '--brand-secondary-active'?: string; + '--brand-secondary-hover'?: string; + '--brand-secondary-text'?: string; + '--error'?: string; + '--error-surface'?: string; + '--error-surface-hover'?: string; + '--error-text'?: string; + '--field'?: string; + '--focus'?: string; + '--info'?: string; + '--info-surface'?: string; + '--info-surface-hover'?: string; + '--info-text'?: string; + '--link'?: string; + '--link-disabled'?: string; + '--link-hover'?: string; + '--link-visited'?: string; + '--neutral'?: string; + '--neutral-surface'?: string; + '--neutral-surface-hover'?: string; + '--neutral-text'?: string; + '--orange-surface'?: string; + '--orange-surface-hover'?: string; + '--orange-text'?: string; + '--purple-surface'?: string; + '--purple-surface-hover'?: string; + '--purple-text'?: string; + '--success'?: string; + '--success-surface'?: string; + '--success-surface-hover'?: string; + '--success-text'?: string; + '--surface'?: string; + '--surface-active'?: string; + '--surface-disabled'?: string; + '--surface-hover'?: string; + '--surface-hover-transparent'?: string; + '--surface-low'?: string; + '--surface-low-active'?: string; + '--surface-low-hover'?: string; + '--surface-low-hover-transparent'?: string; + '--surface-raised'?: string; + '--surface-raised-active'?: string; + '--surface-raised-hover'?: string; + '--surface-raised-hover-transparent'?: string; + '--surface-secondary'?: string; + '--surface-secondary-active'?: string; + '--surface-secondary-hover'?: string; + '--surface-secondary-text'?: string; + '--text'?: string; + '--text-disabled'?: string; + '--text-placeholder'?: string; + '--text-secondary'?: string; + '--text-subtle'?: string; + '--toggle-disabled'?: string; + '--toggle-inactive'?: string; + '--warning'?: string; + '--warning-surface'?: string; + '--warning-surface-hover'?: string; + '--warning-text'?: string; + '--primary'?: string; + '--primary-active'?: string; + '--primary-hover'?: string; + '--primary-surface'?: string; + '--primary-text'?: string; + '--black'?: string; + '--grey'?: string; + '--grey-100'?: string; + '--grey-150'?: string; + '--grey-200'?: string; + '--grey-300'?: string; + '--grey-400'?: string; + '--grey-50'?: string; + '--grey-500'?: string; + '--grey-600'?: string; + '--grey-700'?: string; + '--grey-725'?: string; + '--grey-750'?: string; + '--grey-800'?: string; + '--grey-850'?: string; + '--grey-900'?: string; + '--grey-950'?: string; + '--white'?: string; + '--elevation-large'?: string; + '--elevation-medium'?: string; + '--elevation-small'?: string; +} diff --git a/system/core/src/themeVariables/types.ts b/system/core/src/themeVariables/types.ts index 05519689b..6ac68f3ee 100644 --- a/system/core/src/themeVariables/types.ts +++ b/system/core/src/themeVariables/types.ts @@ -1,85 +1,8 @@ -export interface TableKitCSSProperties { - '--border'?: string; - '--border-active'?: string; - '--border-transparent'?: string; - '--error'?: string; - '--error-surface'?: string; - '--error-surface-hover'?: string; - '--error-text'?: string; - '--field'?: string; - '--focus'?: string; - '--info'?: string; - '--info-surface'?: string; - '--info-surface-hover'?: string; - '--info-text'?: string; - '--link'?: string; - '--link-disabled'?: string; - '--link-hover'?: string; - '--link-visited'?: string; - '--neutral'?: string; - '--neutral-surface'?: string; - '--neutral-surface-hover'?: string; - '--neutral-text'?: string; - '--orange-surface'?: string; - '--orange-surface-hover'?: string; - '--orange-text'?: string; - '--purple-surface'?: string; - '--purple-surface-hover'?: string; - '--purple-text'?: string; - '--secondary'?: string; - '--secondary-active'?: string; - '--secondary-hover'?: string; - '--secondary-surface'?: string; - '--success'?: string; - '--success-surface'?: string; - '--success-surface-hover'?: string; - '--success-text'?: string; - '--surface'?: string; - '--surface-active'?: string; - '--surface-disabled'?: string; - '--surface-hover'?: string; - '--surface-hover-transparent'?: string; - '--surface-low'?: string; - '--surface-raised'?: string; - '--surface-raised-active'?: string; - '--surface-raised-hover'?: string; - '--surface-raised-hover-transparent'?: string; - '--text'?: string; - '--text-alt'?: string; - '--text-contrast'?: string; - '--text-disabled'?: string; - '--text-placeholder'?: string; - '--text-subtle'?: string; - '--warning'?: string; - '--warning-surface'?: string; - '--warning-surface-hover'?: string; - '--warning-text'?: string; - '--surface-low-active'?: string; - '--surface-low-hover'?: string; - '--surface-low-hover-transparent'?: string; - '--primary'?: string; - '--primary-active'?: string; - '--primary-hover'?: string; - '--primary-surface'?: string; - '--primary-text'?: string; - '--black'?: string; - '--grey'?: string; - '--grey-100'?: string; - '--grey-200'?: string; - '--grey-300'?: string; - '--grey-400'?: string; - '--grey-50'?: string; - '--grey-500'?: string; - '--grey-600'?: string; - '--grey-700'?: string; - '--grey-725'?: string; - '--grey-750'?: string; - '--grey-800'?: string; - '--grey-850'?: string; - '--grey-900'?: string; - '--grey-950'?: string; - '--white'?: string; - '--elevation-large'?: string; - '--elevation-medium'?: string; - '--elevation-small'?: string; +import type { TableKitCSSProperties } from './types.gen'; + +export type { TableKitCSSProperties } from './types.gen'; + +declare module 'csstype' { + // eslint-disable-next-line @typescript-eslint/no-empty-interface + interface Properties extends TableKitCSSProperties {} } diff --git a/system/core/src/typeUtils.ts b/system/core/src/typeUtils.ts deleted file mode 100644 index 2559c15a7..000000000 --- a/system/core/src/typeUtils.ts +++ /dev/null @@ -1,6 +0,0 @@ -export type OptionalKeys = Omit< - T, - TKeys -> & { - [K in keyof T as K extends TKeys ? K : never]?: T[K]; -}; diff --git a/system/core/src/utils.ts b/system/core/src/utils.ts new file mode 100644 index 000000000..4c87d3d33 --- /dev/null +++ b/system/core/src/utils.ts @@ -0,0 +1,109 @@ +import * as CSS from 'csstype'; + +export type OptionalKeys = Omit< + T, + TKeys +> & { + [K in keyof T as K extends TKeys ? K : never]?: T[K]; +}; + +export type CSSProperties = CSS.PropertiesFallback; +export type CSSPropertiesWithMultiValues = { + [K in keyof CSSProperties]: + | CSSProperties[K] + | Array>; +}; + +export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject }; + +// eslint-disable-next-line @typescript-eslint/no-empty-interface +export interface ArrayCSSInterpolation extends Array {} + +export type InterpolationPrimitive = + | null + | undefined + | boolean + | number + | string + | CSSObject; + +export type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation; + +export interface CSSOthersObject { + [propertiesName: string]: CSSInterpolation; +} + +export interface CSSObject + extends CSSPropertiesWithMultiValues, + CSSPseudos, + CSSOthersObject {} + +export function css( + first: TemplateStringsArray, + ...interpolations: Array +): string; +export function css(object: CSSObject): string; +export function css( + object: CSSObject | TemplateStringsArray, + ...interpolations: Array +): string { + if (Array.isArray(object)) + return String.raw(object as TemplateStringsArray, ...interpolations); + let styles = ''; + Object.entries(object).forEach(([camelCaseKey, unsafeValue]) => { + if (!unsafeValue) return; + if (typeof unsafeValue === 'object') { + if (Array.isArray(unsafeValue)) throw new Error('Array is not allowed'); + styles += `${camelCaseKey} { ${css(unsafeValue)} }`; + return; + } + const kebabCaseKey = camelCaseKey.replace( + /[A-Z]/g, + (match) => `-${match.toLowerCase()}` + ); + let value; + if (typeof unsafeValue === 'number') value = `${unsafeValue}px`; + else value = unsafeValue; + styles += `${kebabCaseKey}: ${value};`; + }); + return styles; +} + +interface SerializedStyles { + name: string; + styles: string; + map?: string; + next?: SerializedStyles; +} + +function handleInterpolation(value: ReturnType | SerializedStyles) { + if (typeof value === 'string') return value; + return value.styles; +} + +export function themedCss({ + selector, + light, + dark +}: { + selector: string; + light: ReturnType | SerializedStyles; + dark: ReturnType | SerializedStyles; +}): ReturnType { + return css` + [data-theme='light'] ${selector}, :root ${selector} { + ${handleInterpolation(light)} + } + @media (prefers-color-scheme: dark) { + :root:not([data-theme='light']) + ${selector}, + [data-theme='system'] + ${selector} { + ${handleInterpolation(dark)} + } + } + [data-theme='dark'] ${selector} { + ${handleInterpolation(dark)} + } + `; +} diff --git a/system/core/src/utils/font.ts b/system/core/src/utils/font.ts index 9fe3d188f..c345f2c52 100644 --- a/system/core/src/utils/font.ts +++ b/system/core/src/utils/font.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/react'; +import { css } from '../utils'; const SUFFIX = '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,"Fira Sans","Droid Sans","Helvetica Neue","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",sans-serif,system-ui'; diff --git a/system/core/src/utils/keyframes.ts b/system/core/src/utils/keyframes.ts new file mode 100644 index 000000000..707035b89 --- /dev/null +++ b/system/core/src/utils/keyframes.ts @@ -0,0 +1,10 @@ +import { keyframes as skeleton } from '../components/Skeleton'; +import { keyframes as spinner } from '../components/Spinner'; +import { keyframes as tooltip } from '../components/Tooltip'; +import { css } from '../utils'; + +export const keyframes = css` + ${skeleton} + ${spinner} + ${tooltip} +`; diff --git a/system/core/src/utils/ltrSupport.ts b/system/core/src/utils/ltrSupport.ts index 1b78c6b13..dce1d87ca 100644 --- a/system/core/src/utils/ltrSupport.ts +++ b/system/core/src/utils/ltrSupport.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/react'; +import { css } from '../utils'; export const ltrSupport = css` [dir='ltr'], diff --git a/system/core/src/utils/resetCss.ts b/system/core/src/utils/resetCss.ts index 7f15305c5..7d44ea106 100644 --- a/system/core/src/utils/resetCss.ts +++ b/system/core/src/utils/resetCss.ts @@ -1,4 +1,4 @@ -import { css } from '@emotion/react'; +import { css } from '../utils'; export const resetCss = css` * { diff --git a/system/core/src/utils/typography.ts b/system/core/src/utils/typography.ts index 09f92b51b..c0f6ceaae 100644 --- a/system/core/src/utils/typography.ts +++ b/system/core/src/utils/typography.ts @@ -1,16 +1,27 @@ -import { css } from '@emotion/react'; +import { css } from '../utils'; export const typography = css` :root { - --headline: 700 54px / 64px var(--font-family); - --h1: 600 36px / 48px var(--font-family); - --h2: 400 24px / 32px var(--font-family); - --h3: 600 20px / 24px var(--font-family); - --h4: 600 16px / 24px var(--font-family); - --body-1: 400 16px / 24px var(--font-family); - --body-2: 400 14px / 20px var(--font-family); - --small: 400 12px / 18px var(--font-family); - --label: 600 14px / 20px var(--font-family); + --headline-font-weight: 700; + --headline: var(--headline-font-weight) 54px / 64px var(--font-family); + --h1-font-weight: 600; + --h1: var(--h1-font-weight) 36px / 48px var(--font-family); + --h2-font-weight: 400; + --h2: var(--h2-font-weight) 24px / 32px var(--font-family); + --h3-font-weight: 600; + --h3: var(--h3-font-weight) 20px / 24px var(--font-family); + --h4-font-weight: 400; + --h4: var(--h4-font-weight) 20px / 24px var(--font-family); + --h5-font-weight: 600; + --h5: var(--h5-font-weight) 16px / 24px var(--font-family); + --body-1-font-weight: 400; + --body-1: var(--body-1-font-weight) 16px / 24px var(--font-family); + --body-2-font-weight: 400; + --body-2: var(--body-2-font-weight) 14px / 20px var(--font-family); + --small-font-weight: 400; + --small: var(--small-font-weight) 12px / 18px var(--font-family); + --label-font-weight: 600; + --label: var(--label-font-weight) 14px / 20px var(--font-family); } header h1 { font: var(--headline); @@ -27,6 +38,9 @@ export const typography = css` h4 { font: var(--h4); } + h5 { + font: var(--h5); + } body, p { font: var(--body-1); @@ -37,7 +51,8 @@ export const typography = css` small { font: var(--small); } - label { + label, + h6 { font: var(--label); } diff --git a/system/css/src/buildFile.ts b/system/css/src/buildFile.ts index 7b6f71d96..b07776dcc 100644 --- a/system/css/src/buildFile.ts +++ b/system/css/src/buildFile.ts @@ -2,7 +2,6 @@ /* eslint-disable max-classes-per-file, @typescript-eslint/explicit-module-boundary-types, class-methods-use-this */ import path from 'path'; -import { SerializedStyles } from '@emotion/react'; import chalk from 'chalk'; import { outputFile } from 'fs-extra'; import postcss from 'postcss'; @@ -101,7 +100,7 @@ export class UtilFileBuilder extends CssFileBuilder { `utils files must have a single export with the same name as the file` ); const [outputStyles, keyframes] = evaluateStyleElement( - this.fileContent[this.exportName].styles + this.fileContent[this.exportName] ); return this.buildCssFiles(outputStyles, keyframes); } @@ -120,8 +119,8 @@ interface ComponentFileContent { element?: string; className?: string; selectors?: string[]; - baseStyles: SerializedStyles; - variantStyles?: Record; + fullStyles: string; + variantStyles?: Record; } export class ComponentBuilder extends CssFileBuilder { @@ -147,11 +146,11 @@ export class ComponentBuilder extends CssFileBuilder { } async build() { - const { selectors = [], baseStyles, variantStyles } = this.fileContent; - if (!baseStyles) { + const { selectors = [], fullStyles, variantStyles } = this.fileContent; + if (typeof fullStyles !== 'string') { console.log( chalk.yellow( - `No export "baseStyles" found in "${this.folderName}/${this.fileName}", skipping file generation.` + `No export "fullStyles" found in "${this.folderName}/${this.fileName}", skipping file generation.` ) ); return { classy: [], classless: [] }; @@ -168,7 +167,7 @@ export class ComponentBuilder extends CssFileBuilder { )} does not export either a "className" or "selectors" value` ); } - const [outputStyles, keyframes] = evaluateStyleElement(baseStyles); + const [outputStyles, keyframes] = evaluateStyleElement(fullStyles); let variantOutputStyles; if (variantStyles) { variantOutputStyles = Object.entries(variantStyles).reduce( diff --git a/system/css/src/evaluateStyleElement.ts b/system/css/src/evaluateStyleElement.ts index 69a0b8ff0..a15086411 100644 --- a/system/css/src/evaluateStyleElement.ts +++ b/system/css/src/evaluateStyleElement.ts @@ -29,12 +29,15 @@ function recursiveEvaluateStyleElement( return style.toString(); } -export function evaluateStyleElement( - style: SerializedStyles -): [string, string] { +export function evaluateStyleElement(style: string): [string, string] { const keyframes: string[] = []; return [ - recursiveEvaluateStyleElement(style, keyframes) + recursiveEvaluateStyleElement( + css` + ${style} + `, + keyframes + ) .replace(/(^|;)label:[a-z]+;/gi, '$1') .replace(/;+|^;/gi, ';'), keyframes.join('') diff --git a/system/react-css/package.json b/system/react-css/package.json index 7fb48e9b7..feee7e177 100644 --- a/system/react-css/package.json +++ b/system/react-css/package.json @@ -14,7 +14,7 @@ "scripts": { "audit": "tablecheck-scripts auditjs", "audit:ci": "tablecheck-scripts auditjs --ci", - "build": "npm run update:components && npm run update:exports && SKIP_PREFLIGHT_CHECK=true tablecheck-scripts build-lib", + "build": "npm run update:exports && SKIP_PREFLIGHT_CHECK=true tablecheck-scripts build-lib", "coverage-summary": "tablecheck-scripts coverage-summary", "format": "tablecheck-scripts lint --fix --skip-typescript", "lint": "tablecheck-scripts lint", @@ -23,7 +23,6 @@ "test:watch": "tablecheck-scripts test --env=jsdom", "tsc": "tablecheck-scripts tsc", "tsc:watch": "tablecheck-scripts tsc -w", - "update:components": "node scripts/generateComponents.mjs && prettier -w src/components/*", "update:exports": "node scripts/generateIndex.mjs" }, "dependencies": { diff --git a/system/react-css/scripts/generateComponents.mjs b/system/react-css/scripts/generateComponents.mjs deleted file mode 100644 index 30abbc109..000000000 --- a/system/react-css/scripts/generateComponents.mjs +++ /dev/null @@ -1,158 +0,0 @@ -import path from 'path'; - -import fs from 'fs-extra'; - -if (process.env.CI) process.exit(0); - -const outputFolderPath = path.join(process.cwd(), 'src/components'); -fs.emptyDirSync(outputFolderPath); - -const structuredFileNames = fs.readdirSync( - path.join(process.cwd(), 'src/structuredComponents') -); - -function upperFirstChar(word) { - return `${word.substring(0, 1).toUpperCase()}${word.substring(1)}`; -} - -class ComponentBuilder { - get pascalImportKey() { - return upperFirstChar(this.importKey); - } - - get fileName() { - return `${this.pascalImportKey}.tsx`; - } - - get filePath() { - return path.join(outputFolderPath, this.fileName); - } - - constructor(importedKey, importedValues) { - this.importKey = importedKey; - this.element = importedValues.element || 'div'; - this.className = importedValues.className; - this.selectors = importedValues.selectors; - this.defaultProps = importedValues.defaultProps; - } - - async build() { - if (!this.isValidComponentImport()) return; - const fileContent = [ - `/** - * DO NOT EDIT: This file is generated, run 'npm update:components' to update this. - * The exports here are generated from @tablecheck/tablekit-core - * If you need to provide more "structure" to this component move it to the 'structuredComponents' folder - */`, - `import type { ${this.importKey} } from '@tablecheck/tablekit-core';`, - `import * as React from 'react';` - ]; - if (this.hasVariants()) { - fileContent.push( - `\nimport { buildVariantComponents } from '../buildVariantComponents';` - ); - } - fileContent.push(''); - fileContent.push( - `export type Props = ${this.importKey}.${ - this.defaultProps ? 'DefaultedProps' : 'Props' - }${ - this.element === 'button' - ? '& React.ButtonHTMLAttributes' - : '' - };` - ); - if (this.hasVariants()) { - fileContent.push( - `export type ${this.pascalImportKey}Variant = ${this.importKey}.${this.pascalImportKey}Variant;` - ); - } - const elementType = this.getHtmlElementType(); - const attributesTypePrefix = ['div', 'span', 'a'].includes(this.element) - ? '' - : upperFirstChar(this.element); - fileContent.push( - '', - `export const ${ - this.pascalImportKey - } = React.forwardRef<${elementType}, Props & React.${attributesTypePrefix}HTMLAttributes<${elementType}>>((props, ref) => <${ - this.element - } ${this.getDefaultAttributes()} {...props} ref={ref} className={\`\${(props.className || '')} ${this.getClassName()}\`} />);` - ); - - if (this.hasVariants()) { - fileContent.push(`export const Variant${ - this.pascalImportKey - } = buildVariantComponents( - ${this.importKey}.variantStyles, - '${this.getClassName()}', - ${this.importKey}.element -);`); - } - - await fs.outputFile(this.filePath, fileContent.join('\n')); - } - - getClassName() { - if (this.pascalImportKey === 'InputLikeButton') return 'input'; - return this.className || ''; - } - - getHtmlElementType() { - if (this.element === 'a') return 'HTMLAnchorElement'; - if (this.element === 'textarea') return 'HTMLTextAreaElement'; - return `HTML${upperFirstChar(this.element)}Element`; - } - - isValidComponentImport() { - if (!this.hasValidSelectors()) { - console.warn( - `Skipping ${this.importKey} as it does not export 'className' or has a 'defaultProps.type' value set` - ); - return false; - } - return !structuredFileNames.includes(this.fileName); - } - - hasValidSelectors() { - if (this.className) return true; - if (!this.element) return false; - const defaultProps = this.getDefaultProps(); - return defaultProps && !!defaultProps.type; - } - - hasVariants() { - return ( - typeof this.variantStyles === 'object' && - Object.keys(this.variantStyles).length - ); - } - - getDefaultAttributes() { - const defaultProps = this.getDefaultProps(); - return Object.entries(defaultProps || {}) - .map(([key, value]) => { - if (this.pascalImportKey === 'InputLikeButton' && key === 'role') - return ''; - if (typeof value === 'string') return `${key}="${value}"`; - return `${key}={${JSON.stringify(value)}}`; - }) - .join(' '); - } - - getDefaultProps() { - const defaultProps = this.defaultProps ? { ...this.defaultProps } : {}; - if (this.element === 'button') { - defaultProps.type = 'button'; - } - return Object.keys(defaultProps).length ? defaultProps : undefined; - } -} - -const coreExports = await import('@tablecheck/tablekit-core'); - -await Promise.all( - Object.entries(coreExports).map(([key, imports]) => - new ComponentBuilder(key, imports).build() - ) -); diff --git a/system/react-css/scripts/generateIndex.mjs b/system/react-css/scripts/generateIndex.mjs index a77bb7f50..8f438f499 100644 --- a/system/react-css/scripts/generateIndex.mjs +++ b/system/react-css/scripts/generateIndex.mjs @@ -143,8 +143,7 @@ Promise.all(filenames.map(getExport)).then((exportLines) => { * DO NOT EDIT: This file is generated, run 'npm update:exports' to update this. * The exports here are generated from all ts/tsx files at the root level */ - import './globalTypes'; - + export * from './config'; ${fileContent}`, { filepath, ...config } ) diff --git a/system/react-css/src/components/Anchor.tsx b/system/react-css/src/components/Anchor.tsx index d2e5b3042..45d5fe9ed 100644 --- a/system/react-css/src/components/Anchor.tsx +++ b/system/react-css/src/components/Anchor.tsx @@ -1,16 +1,17 @@ /** - * DO NOT EDIT: This file is generated, run 'npm update:components' to update this. - * The exports here are generated from @tablecheck/tablekit-core + * DO NOT EDIT: This file is generated in the post-build step of @tablecheck/tablekit-core * If you need to provide more "structure" to this component move it to the 'structuredComponents' folder */ -import type { anchor } from '@tablecheck/tablekit-core'; +import { anchor } from '@tablecheck/tablekit-core'; import * as React from 'react'; -export type Props = anchor.Props; +export type Props = anchor.Props & + React.AnchorHTMLAttributes; export const Anchor = React.forwardRef< HTMLAnchorElement, - Props & React.HTMLAttributes + Props & React.AnchorHTMLAttributes >((props, ref) => ( - + )); +Anchor.displayName = `Anchor`; diff --git a/system/react-css/src/components/Badge.tsx b/system/react-css/src/components/Badge.tsx index 4ecdec43c..8eb14c408 100644 --- a/system/react-css/src/components/Badge.tsx +++ b/system/react-css/src/components/Badge.tsx @@ -1,16 +1,16 @@ /** - * DO NOT EDIT: This file is generated, run 'npm update:components' to update this. - * The exports here are generated from @tablecheck/tablekit-core + * DO NOT EDIT: This file is generated in the post-build step of @tablecheck/tablekit-core * If you need to provide more "structure" to this component move it to the 'structuredComponents' folder */ -import type { badge } from '@tablecheck/tablekit-core'; +import { badge } from '@tablecheck/tablekit-core'; import * as React from 'react'; -export type Props = badge.Props; +export type Props = badge.Props & React.HTMLAttributes; export const Badge = React.forwardRef< HTMLSpanElement, Props & React.HTMLAttributes >((props, ref) => ( - + )); +Badge.displayName = `Badge`; diff --git a/system/react-css/src/components/Banner.tsx b/system/react-css/src/components/Banner.tsx index 48a82bbab..6035b4b47 100644 --- a/system/react-css/src/components/Banner.tsx +++ b/system/react-css/src/components/Banner.tsx @@ -1,16 +1,16 @@ /** - * DO NOT EDIT: This file is generated, run 'npm update:components' to update this. - * The exports here are generated from @tablecheck/tablekit-core + * DO NOT EDIT: This file is generated in the post-build step of @tablecheck/tablekit-core * If you need to provide more "structure" to this component move it to the 'structuredComponents' folder */ -import type { banner } from '@tablecheck/tablekit-core'; +import { banner } from '@tablecheck/tablekit-core'; import * as React from 'react'; -export type Props = banner.Props; +export type Props = banner.Props & React.HTMLAttributes; export const Banner = React.forwardRef< HTMLDivElement, Props & React.HTMLAttributes >((props, ref) => ( -
+
)); +Banner.displayName = `Banner`; diff --git a/system/react-css/src/components/Button.tsx b/system/react-css/src/components/Button.tsx index a7f4d4bda..d961714b5 100644 --- a/system/react-css/src/components/Button.tsx +++ b/system/react-css/src/components/Button.tsx @@ -1,12 +1,13 @@ /** - * DO NOT EDIT: This file is generated, run 'npm update:components' to update this. - * The exports here are generated from @tablecheck/tablekit-core + * DO NOT EDIT: This file is generated in the post-build step of @tablecheck/tablekit-core * If you need to provide more "structure" to this component move it to the 'structuredComponents' folder */ -import type { button } from '@tablecheck/tablekit-core'; +import { button } from '@tablecheck/tablekit-core'; import * as React from 'react'; -export type Props = button.Props & +import { getConfigDefault } from '../config'; + +export type Props = button.DefaultedProps & React.ButtonHTMLAttributes; export const Button = React.forwardRef< @@ -14,9 +15,11 @@ export const Button = React.forwardRef< Props & React.ButtonHTMLAttributes >((props, ref) => (