@bitrise/bitkit 9.3.0-alpha.4 → 9.4.0

package/lib/esn/variables.css

@@ -9,146 +9,146 @@
   --size--x10: 2.5rem;
   --size--x12: 3rem;
   --size--x16: 4rem;
-/*
-  --bitkit-colors-white: #FFFFFF;
-  --bitkit-colors-black: #222222;
-
-  --bitkit-colors-gray-1: #F8F8F8;
-  --bitkit-colors-gray-2: #ECECEC;
-  --bitkit-colors-gray-3: #DDDDDD;
-  --bitkit-colors-gray-4: #CCCCCC;
-  --bitkit-colors-gray-5: #ACACAC;
-  --bitkit-colors-gray-6: #777777;
-  --bitkit-colors-gray-7: #616161;
-  --bitkit-colors-gray-8: #444444;
-
-  --bitkit-colors-aqua-1: #E6FAF9;
-  --bitkit-colors-aqua-2: #86E9E2;
-  --bitkit-colors-aqua-3: #0DD3C5;
-  --bitkit-colors-aqua-4: #0EC7BA;
-  --bitkit-colors-aqua-5: #00968C;
-
-  --bitkit-colors-grape-1: #F8F0FF;
-  --bitkit-colors-grape-2: #B88ADB;
-  --bitkit-colors-grape-3: #760FC3;
-  --bitkit-colors-grape-4: #492F5C;
-  --bitkit-colors-grape-5: #351D48;
-
-  --bitkit-colors-eggplant: #683D87;
-
-  --bitkit-colors-red-1: #FFE8EE;
-  --bitkit-colors-red-2: #FF8FAB;
-  --bitkit-colors-red-3: #FF2158;
-  --bitkit-colors-red-4: #EE003B;
-  --bitkit-colors-red-5: #C02048;
-
-  --bitkit-colors-orange-1: #FFECE5;
-  --bitkit-colors-orange-2: #FFA17F;
-  --bitkit-colors-orange-3: #FF4400;
-  --bitkit-colors-orange-4: #E73E00;
-  --bitkit-colors-orange-5: #D33D07;
-
-  --bitkit-colors-yellow-1: #FFF9E5;
-  --bitkit-colors-yellow-2: #FFE27F;
-  --bitkit-colors-yellow-3: #FFC500;
-  --bitkit-colors-yellow-4: #ECB600;
-  --bitkit-colors-yellow-5: #795E00;
-
-  --bitkit-colors-green-1: #E7F9F3;
-  --bitkit-colors-green-2: #87E1C3;
-  --bitkit-colors-green-3: #0FC389;
-  --bitkit-colors-green-4: #0FB37D;
-  --bitkit-colors-green-5: #117D59;
-
-  --bitkit-colors-blue-1: #E6F2FA;
-  --bitkit-colors-blue-2: #86C1E6;
-  --bitkit-colors-blue-3: #0D83CD;
-  --bitkit-colors-blue-4: #0C70AE;
-  --bitkit-colors-blue-5: #095C90;
-
-  --bitkit-colors-darkblue-1: #E6ECF7;
-  --bitkit-colors-darkblue-2: #82A4D7;
-  --bitkit-colors-darkblue-3: #054AB0;
-  --bitkit-colors-darkblue-4: #043E94;
-  --bitkit-colors-darkblue-5: #033175;
-
-  --bitkit-colors-violet-1: #F4E7F9;
-  --bitkit-colors-violet-2: #CB8ADF;
-  --bitkit-colors-violet-3: #990FC3;
-  --bitkit-colors-violet-4: #8512A8;
-  --bitkit-colors-violet-5: #741492;
+
+  --color-white: #FFFFFF;
+  --color-black: #222222;
+
+  --color-gray--1: #F8F8F8;
+  --color-gray--2: #ECECEC;
+  --color-gray--3: #DDDDDD;
+  --color-gray--4: #CCCCCC;
+  --color-gray--5: #ACACAC;
+  --color-gray--6: #777777;
+  --color-gray--7: #616161;
+  --color-gray--8: #444444;
+
+  --color-aqua--1: #E6FAF9;
+  --color-aqua--2: #86E9E2;
+  --color-aqua--3: #0DD3C5;
+  --color-aqua--4: #0EC7BA;
+  --color-aqua--5: #00968C;
+
+  --color-grape--1: #F8F0FF;
+  --color-grape--2: #B88ADB;
+  --color-grape--3: #760FC3;
+  --color-grape--4: #492F5C;
+  --color-grape--5: #351D48;
+
+  --color-eggplant: #683D87;
+
+  --color-red--1: #FFE8EE;
+  --color-red--2: #FF8FAB;
+  --color-red--3: #FF2158;
+  --color-red--4: #EE003B;
+  --color-red--5: #C02048;
+
+  --color-orange--1: #FFECE5;
+  --color-orange--2: #FFA17F;
+  --color-orange--3: #FF4400;
+  --color-orange--4: #E73E00;
+  --color-orange--5: #D33D07;
+
+  --color-yellow--1: #FFF9E5;
+  --color-yellow--2: #FFE27F;
+  --color-yellow--3: #FFC500;
+  --color-yellow--4: #ECB600;
+  --color-yellow--5: #795E00;
+
+  --color-green--1: #E7F9F3;
+  --color-green--2: #87E1C3;
+  --color-green--3: #0FC389;
+  --color-green--4: #0FB37D;
+  --color-green--5: #117D59;
+
+  --color-blue--1: #E6F2FA;
+  --color-blue--2: #86C1E6;
+  --color-blue--3: #0D83CD;
+  --color-blue--4: #0C70AE;
+  --color-blue--5: #095C90;
+
+  --color-darkblue--1: #E6ECF7;
+  --color-darkblue--2: #82A4D7;
+  --color-darkblue--3: #054AB0;
+  --color-darkblue--4: #043E94;
+  --color-darkblue--5: #033175;
+
+  --color-violet--1: #F4E7F9;
+  --color-violet--2: #CB8ADF;
+  --color-violet--3: #990FC3;
+  --color-violet--4: #8512A8;
+  --color-violet--5: #741492;
 
   --rgb-white: 255, 255, 255;
   --rgb-black: 34, 34, 34;
 
-  --rgb-gray-1: 248, 248, 248;
-  --rgb-gray-2: 236, 236, 236;
-  --rgb-gray-3: 221, 221, 221;
-  --rgb-gray-4: 204, 204, 204;
-  --rgb-gray-5: 172, 172, 172;
-  --rgb-gray-6: 119, 119, 119;
-  --rgb-gray-7: 97, 97, 97;
-  --rgb-gray-8: 68, 68, 68;
-
-  --rgb-aqua-1: 230, 250, 249;
-  --rgb-aqua-2: 134, 233, 226;
-  --rgb-aqua-3: 13, 211, 197;
-  --rgb-aqua-4: 14, 199, 186;
-  --rgb-aqua-5: 0, 150, 140;
-
-  --rgb-grape-1: 248, 240, 255;
-  --rgb-grape-2: 184, 138, 219;
-  --rgb-grape-3: 118, 15, 195;
-  --rgb-grape-4: 73, 47, 92;
-  --rgb-grape-5: 53, 29, 72;
+  --rgb-gray--1: 248, 248, 248;
+  --rgb-gray--2: 236, 236, 236;
+  --rgb-gray--3: 221, 221, 221;
+  --rgb-gray--4: 204, 204, 204;
+  --rgb-gray--5: 172, 172, 172;
+  --rgb-gray--6: 119, 119, 119;
+  --rgb-gray--7: 97, 97, 97;
+  --rgb-gray--8: 68, 68, 68;
+
+  --rgb-aqua--1: 230, 250, 249;
+  --rgb-aqua--2: 134, 233, 226;
+  --rgb-aqua--3: 13, 211, 197;
+  --rgb-aqua--4: 14, 199, 186;
+  --rgb-aqua--5: 0, 150, 140;
+
+  --rgb-grape--1: 248, 240, 255;
+  --rgb-grape--2: 184, 138, 219;
+  --rgb-grape--3: 118, 15, 195;
+  --rgb-grape--4: 73, 47, 92;
+  --rgb-grape--5: 53, 29, 72;
 
   --rgb-eggplant: 104, 61, 135;
 
-  --rgb-red-1: 255, 232, 238;
-  --rgb-red-2: 255, 143, 171;
-  --rgb-red-3: 255, 33, 88;
-  --rgb-red-4: 238, 0, 59;
-  --rgb-red-5: 192, 32, 72;
-
-  --rgb-orange-1: 255, 236, 229;
-  --rgb-orange-2: 255, 161, 127;
-  --rgb-orange-3: 255, 68, 0;
-  --rgb-orange-4: 231, 62, 0;
-  --rgb-orange-5: 211, 61, 7;
-
-  --rgb-yellow-1: 255, 249, 229;
-  --rgb-yellow-2: 255, 226, 127;
-  --rgb-yellow-3: 255, 197, 0;
-  --rgb-yellow-4: 236, 182, 0;
-  --rgb-yellow-5: 121, 94, 0;
-
-  --rgb-green-1: 231, 249, 243;
-  --rgb-green-2: 135, 225, 195;
-  --rgb-green-3: 15, 195, 137;
-  --rgb-green-4: 15, 179, 125;
-  --rgb-green-5: 17, 125, 89;
-
-  --rgb-blue-1: 230, 242, 250;
-  --rgb-blue-2: 134, 193, 230;
-  --rgb-blue-3: 13, 131, 205;
-  --rgb-blue-4: 12, 112, 174;
-  --rgb-blue-5: 9, 92, 144;
-
-  --rgb-darkblue-1: 230, 236, 247;
-  --rgb-darkblue-2: 130, 164, 215;
-  --rgb-darkblue-3: 5, 74, 176;
-  --rgb-darkblue-4: 4, 62, 148;
-  --rgb-darkblue-5: 3, 49, 117;
-
-  --rgb-violet-1: 244, 231, 249;
-  --rgb-violet-2: 203, 138, 223;
-  --rgb-violet-3: 153, 15, 195;
-  --rgb-violet-4: 133, 18, 168;
-  --rgb-violet-5: 116, 20, 146;
-
-  --bitkit-colors-overlay--black: rgba(34, 34, 34, 0.8);
-  --bitkit-colors-overlay--grape: rgba(53, 29, 72, 0.8);
-*/
+  --rgb-red--1: 255, 232, 238;
+  --rgb-red--2: 255, 143, 171;
+  --rgb-red--3: 255, 33, 88;
+  --rgb-red--4: 238, 0, 59;
+  --rgb-red--5: 192, 32, 72;
+
+  --rgb-orange--1: 255, 236, 229;
+  --rgb-orange--2: 255, 161, 127;
+  --rgb-orange--3: 255, 68, 0;
+  --rgb-orange--4: 231, 62, 0;
+  --rgb-orange--5: 211, 61, 7;
+
+  --rgb-yellow--1: 255, 249, 229;
+  --rgb-yellow--2: 255, 226, 127;
+  --rgb-yellow--3: 255, 197, 0;
+  --rgb-yellow--4: 236, 182, 0;
+  --rgb-yellow--5: 121, 94, 0;
+
+  --rgb-green--1: 231, 249, 243;
+  --rgb-green--2: 135, 225, 195;
+  --rgb-green--3: 15, 195, 137;
+  --rgb-green--4: 15, 179, 125;
+  --rgb-green--5: 17, 125, 89;
+
+  --rgb-blue--1: 230, 242, 250;
+  --rgb-blue--2: 134, 193, 230;
+  --rgb-blue--3: 13, 131, 205;
+  --rgb-blue--4: 12, 112, 174;
+  --rgb-blue--5: 9, 92, 144;
+
+  --rgb-darkblue--1: 230, 236, 247;
+  --rgb-darkblue--2: 130, 164, 215;
+  --rgb-darkblue--3: 5, 74, 176;
+  --rgb-darkblue--4: 4, 62, 148;
+  --rgb-darkblue--5: 3, 49, 117;
+
+  --rgb-violet--1: 244, 231, 249;
+  --rgb-violet--2: 203, 138, 223;
+  --rgb-violet--3: 153, 15, 195;
+  --rgb-violet--4: 133, 18, 168;
+  --rgb-violet--5: 116, 20, 146;
+
+  --color-overlay--black: rgba(34, 34, 34, 0.8);
+  --color-overlay--grape: rgba(53, 29, 72, 0.8);
+
   --font-family: 'TT Norms Pro', sans-serif;
   --font-family-monospace: 'Source Code Pro', monospace;
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.3.0-alpha.4",
+  "version": "9.4.0",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "lib/cjs/index.js",
   "esnext": "lib/esn/index.js",
@@ -19,7 +19,7 @@
     "commitlint": "commitlint",
     "lint": "yarn lint:js && yarn lint:css",
     "lint:css": "stylelint src/**/*.css site/**/*.css",
-    "lint:js": "eslint src/**/*.tsx site/**/*.tsx",
+    "lint:js": "eslint src/**/*.tsx",
     "lint:fix-icons": "eslint --fix src/Icon/tsx/**",
     "semantic-release": "semantic-release",
     "serve": "superstatic ./dist --port 4001 -c superstatic.json",
@@ -30,84 +30,85 @@
     "test": "jest ./src"
   },
   "alias": {
-    "@bitrise/bitkit": "./src",
-    "framer-motion": "./node_modules/framer-motion/dist/cjs"
+    "@bitrise/bitkit": "./src"
   },
   "dependencies": {
-    "@chakra-ui/react": "^1.8.6",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
-    "@popperjs/core": "^2.11.2",
+    "@juggle/resize-observer": "^3.3.1",
     "classnames": "^2.3.1",
     "clipboard": "^2.0.10",
-    "framer-motion": "^6",
-    "luxon": "^2.3.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-popper": "^1.3.3",
-    "react-transition-group": "^4.4.2",
-    "src": "^1.1.2"
+    "luxon": "^1.28.0",
+    "normalize.css": "^8.0.1",
+    "popper.js": "^1.14.4",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-popper": "^1.3.11",
+    "react-transition-group": "^2.9.0"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.5",
-    "@commitlint/cli": "^8.1.0",
-    "@commitlint/config-conventional": "^8.1.0",
+    "@bitrise/eslint-plugin": "^2.1.0",
+    "@commitlint/cli": "^8.3.6",
+    "@commitlint/config-conventional": "^8.3.6",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",
     "@svgr/cli": "^6.2.1",
-    "@types/classnames": "^2.3.0",
+    "@types/cheerio": "^0.22.31",
     "@types/clipboard": "^2.0.1",
     "@types/enzyme": "^3.10.11",
     "@types/jest": "^27.4.1",
     "@types/lodash.sample": "^4.2.6",
     "@types/lodash.shuffle": "^4.2.6",
-    "@types/luxon": "^2.3.0",
+    "@types/luxon": "^1.27.1",
     "@types/prismjs": "^1.26.0",
-    "@types/react": "17.0.39",
-    "@types/react-dom": "17.0.13",
+    "@types/react": "^17.0.40",
+    "@types/react-dom": "^17.0.13",
     "@types/react-router": "^5.1.18",
     "@types/react-router-dom": "^5.3.3",
-    "@types/react-transition-group": "^4.4.4",
-    "@types/vfile": "^4.0.0",
-    "@typescript-eslint/eslint-plugin": "^1.4.2",
-    "@typescript-eslint/parser": "^1.4.2",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
-    "autoprefixer": "^9.4.10",
+    "@types/react-transition-group": "^2.9.2",
+    "@types/vfile-message": "^2.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.15.0",
+    "@typescript-eslint/parser": "^5.15.0",
+    "autoprefixer": "^9.8.8",
     "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.2.3",
     "chokidar-cli": "^3.0.0",
-    "concurrently": "^4.1.0",
+    "concurrently": "^4.1.2",
     "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "^5.15.1",
-    "eslint-plugin-react": "^7.29.3",
+    "eslint": "^8.11.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jest": "^26.1.1",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-testing-library": "^5.1.0",
     "fscreen": "^1.2.0",
-    "husky": "^3.0.2",
+    "husky": "^3.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
-    "jsdom": "^14.0.0",
+    "jsdom": "^19.0.0",
     "lodash.sample": "^4.2.1",
     "lodash.shuffle": "^4.2.0",
-    "node-watch": "^0.6.2",
+    "node-watch": "^0.7.3",
     "parcel-bundler": "^1.12.0",
-    "postcss-cli": "^6.1.2",
-    "postcss-preset-env": "^6.6.0",
+    "postcss-cli": "^6.1.3",
+    "postcss-preset-env": "^6.7.1",
+    "prettier": "^2.6.0",
     "prismjs": "^1.27.0",
     "react-docgen": "5.4.0",
     "react-router": "^5.2.1",
-    "react-router-dom": "^5.2.1",
-    "semantic-release": "^18.0.0",
-    "stylelint": "^9.2.1",
+    "react-router-dom": "^5.3.0",
+    "semantic-release": "^18.0.1",
+    "stylelint": "^9.10.1",
     "stylelint-order": "^0.8.1",
     "superstatic": "^6.0.4",
     "ts-jest": "^27.1.3",
-    "ts-node": "^8.1.0",
+    "ts-node": "^10.7.0",
     "typescript": "^4.6.2"
   },
   "publishConfig": {
@@ -126,12 +127,7 @@
       "./jest.setup.js"
     ],
     "transform": {
-      "\\.ts?$": "ts-jest",
       "\\.tsx?$": "ts-jest"
     }
-  },
-  "resolutions": {
-    "@types/react": "17.0.39",
-    "@types/react-router": "5.1.18"
   }
 }

package/release.config.js

@@ -1,31 +1,31 @@
 module.exports = {
   branches: ['master', { name: 'alpha', prerelease: true }],
   plugins: [
-    ['@semantic-release/commit-analyzer', {
-      releaseRules: [
-        { breaking: true, release: 'major' },
-        { type: 'feat', release: 'minor' },
-        { type: 'fix', release: 'patch' },
-        { type: 'perf', release: 'patch' },
-        { type: 'style', release: 'patch' },
-        { type: 'chore', release: 'patch' },
-      ],
-    }],
+    [
+      '@semantic-release/commit-analyzer',
+      {
+        releaseRules: [
+          { breaking: true, release: 'major' },
+          { type: 'feat', release: 'minor' },
+          { type: 'fix', release: 'patch' },
+          { type: 'perf', release: 'patch' },
+          { type: 'style', release: 'patch' },
+          { type: 'chore', release: 'patch' },
+        ],
+      },
+    ],
     '@semantic-release/release-notes-generator',
     '@semantic-release/npm',
     '@semantic-release/github',
   ],
-  verifyConditions: [
-    '@semantic-release/changelog',
-    '@semantic-release/npm',
-    '@semantic-release/git',
-  ],
+  verifyConditions: ['@semantic-release/changelog', '@semantic-release/npm', '@semantic-release/git'],
   prepare: [
     '@semantic-release/changelog',
     '@semantic-release/npm',
     {
       path: '@semantic-release/git',
       assets: ['CHANGELOG.md'],
+      // eslint-disable-next-line no-template-curly-in-string
       message: 'chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}',
     },
   ],

package/scripts/build-docs.ts

@@ -15,28 +15,28 @@ const exclude = ['Portal'];
 
 const getExportedComponents = (node: ts.Node) => {
   if (node.kind === ts.SyntaxKind.ExportDeclaration) {
-    const decl = node as any;
+    const decl = node as ts.ExportDeclaration;
 
     if (decl.exportClause) {
-      const defaultExport = decl.exportClause.elements.find(({ propertyName }: { propertyName: any}) =>
-        !!propertyName && propertyName.getText() === 'default');
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      const defaultExport = decl.exportClause.elements.find(
+        ({ propertyName }: { propertyName: any }) => !!propertyName && propertyName.getText() === 'default',
+      );
 
       if (decl.moduleSpecifier && defaultExport) {
-        exportedComponents[defaultExport.name.getText()] =
-          ((decl.moduleSpecifier as unknown) as { text: string }).text;
+        exportedComponents[defaultExport.name.getText()] = (decl.moduleSpecifier as unknown as { text: string }).text;
       }
     }
   }
 
-  ts.forEachChild(node, (node) =>
-    getExportedComponents(node));
+  ts.forEachChild(node, (n) => getExportedComponents(n));
 };
 
 const buildDocs = () => {
   getExportedComponents(indexSourceFile);
 
-  Object
-    .entries(exportedComponents)
+  Object.entries(exportedComponents)
     .filter(([exportName]) => !exclude.includes(exportName))
     .forEach(([exportName, exportPath]) => {
       try {
@@ -51,10 +51,7 @@ const buildDocs = () => {
       }
     });
 
-  fs.writeFileSync(
-    path.resolve(__dirname, '../documentation.json'),
-    JSON.stringify(documentation, null, 2),
-  );
+  fs.writeFileSync(path.resolve(__dirname, '../documentation.json'), JSON.stringify(documentation, null, 2));
 };
 
 buildDocs();

package/site/components/CodeBlock/CodeBlock.css

@@ -1,6 +1,6 @@
 pre[class*='language-'] {
   width: 100%;
-  color: var(--bitkit-colors-gray-1);
+  color: var(--color-gray--1);
   overflow: auto;
 }
 
@@ -23,25 +23,25 @@ code[class*='language-'] {
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: var(--bitkit-colors-gray-5);
+  color: var(--color-gray--5);
 }
 
 .token.tag {
-  color: var(--bitkit-colors-red-1);
+  color: var(--color-red--1);
 }
 
 .token.punctuation {
-  color: var(--bitkit-colors-gray-3);
+  color: var(--color-gray--3);
 }
 
 .token.function,
 .token.attr-name,
 .token.selector {
-  color: var(--bitkit-colors-aqua-3);
+  color: var(--color-aqua--3);
 }
 
 .token.string {
-  color: var(--bitkit-colors-green-3);
+  color: var(--color-green--3);
 }
 
 .token.attr-value,
@@ -49,11 +49,11 @@ code[class*='language-'] {
 .token.keyword,
 .token.number,
 .token.property {
-  color: var(--bitkit-colors-grape-2);
+  color: var(--color-grape--2);
 }
 
 .token.function {
-  color: var(--bitkit-colors-yellow-3);
+  color: var(--color-yellow--3);
 }
 
 /*

package/site/components/CodeBlock/CodeBlock.tsx

@@ -22,10 +22,10 @@ const CodeBlock: React.FunctionComponent<Props> = (props: Props) => {
   }, [children]);
 
   return (
-    <Window { ...rest } backgroundColor="grape-5" margin="x12" textColor="grape-1" title={ title }>
+    <Window {...rest} backgroundColor="grape-5" margin="x12" textColor="grape-1" title={title}>
       <Base paddingHorizontal="x4" paddingVertical="x3">
-        <pre className={ `language-${language}` }>
-          <code dangerouslySetInnerHTML={ { __html } }></code>
+        <pre className={`language-${language}`}>
+          <code dangerouslySetInnerHTML={{ __html }} />
         </pre>
       </Base>
     </Window>