From b8be2f600eb5c29425265c1ed43aa71716c86130 Mon Sep 17 00:00:00 2001 From: Mirjam Aulbach Date: Fri, 21 Oct 2022 08:55:37 +0200 Subject: [PATCH 1/3] Add aiven design system as package. Configure vite to enable us to use it. --- coral/package.json | 12 +++-- coral/pnpm-lock.yaml | 106 ++++++++++++++++++++++++++++++++++++++++--- coral/vite.config.ts | 20 ++++++-- 3 files changed, 122 insertions(+), 16 deletions(-) diff --git a/coral/package.json b/coral/package.json index 31c4f1dcd3..8beee4924a 100644 --- a/coral/package.json +++ b/coral/package.json @@ -19,6 +19,7 @@ "test-dev": "jest --watch" }, "dependencies": { + "@aivenio/design-system": "^18.4.3", "react": "^18.2.0", "react-dom": "^18.2.0" }, @@ -29,18 +30,19 @@ "@types/node": "*", "@types/react": "^18.0.17", "@types/react-dom": "^18.0.6", + "@types/testing-library__jest-dom": "^5.14.5", "@typescript-eslint/eslint-plugin": "^5.40.1", "@typescript-eslint/parser": "^5.40.1", - "@types/testing-library__jest-dom": "^5.14.5", "@vitejs/plugin-react": "^2.1.0", - "jest": "^29.2.1", - "jest-environment-jsdom": "^29.2.1", - "ts-jest": "^29.0.3", - "ts-node": "^10.9.1", "eslint": "^8.25.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-react": "^7.31.10", + "jest": "^29.2.1", + "jest-environment-jsdom": "^29.2.1", + "lodash": "4.x", "prettier": "^2.7.1", + "ts-jest": "^29.0.3", + "ts-node": "^10.9.1", "typescript": "^4.6.4", "vite": "^3.1.0" } diff --git a/coral/pnpm-lock.yaml b/coral/pnpm-lock.yaml index e438a69a4b..b60bc32634 100644 --- a/coral/pnpm-lock.yaml +++ b/coral/pnpm-lock.yaml @@ -1,6 +1,7 @@ lockfileVersion: 5.4 specifiers: + '@aivenio/design-system': ^18.4.3 '@testing-library/jest-dom': ^5.16.5 '@testing-library/react': ^13.4.0 '@types/jest': ^29.2.0 @@ -16,6 +17,7 @@ specifiers: eslint-plugin-react: ^7.31.10 jest: ^29.2.1 jest-environment-jsdom: ^29.2.1 + lodash: 4.x prettier: ^2.7.1 react: ^18.2.0 react-dom: ^18.2.0 @@ -25,6 +27,7 @@ specifiers: vite: ^3.1.0 dependencies: + '@aivenio/design-system': 18.4.3_pvnihi4muhoy7kenlmiyxwzuqy react: 18.2.0 react-dom: 18.2.0_react@18.2.0 @@ -44,6 +47,7 @@ devDependencies: eslint-plugin-react: 7.31.10_eslint@8.25.0 jest: 29.2.1_5uyhgycj63wuqgvl4exdnr442q jest-environment-jsdom: 29.2.1 + lodash: 4.17.21 prettier: 2.7.1 ts-jest: 29.0.3_7yfpbkrrkkmtlepb2un4d37cti ts-node: 10.9.1_id5sxmpllzol2kp2zgqrnepaum @@ -56,6 +60,25 @@ packages: resolution: {integrity: sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==} dev: true + /@aivenio/design-system/18.4.3_pvnihi4muhoy7kenlmiyxwzuqy: + resolution: {integrity: sha512-zwVQR1JM7PuUPsyLBcsANqA61ikKEp+HmMn0RTh94lOMZogOPGF919GltF0uDUTKmZyRYTQnno4K/ldQ6c1uiw==} + peerDependencies: + lodash: 4.x + react: 16.x || 17.x + react-dom: 16.x || 17.x + dependencies: + '@iconify/react': 3.2.2_react@18.2.0 + '@iconify/types': 1.1.0 + '@popperjs/core': 2.11.6 + classnames: 2.3.2 + downshift: 6.1.12_react@18.2.0 + lodash: 4.17.21 + match-sorter: 6.3.1 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + react-popper: 2.3.0_r6q5zrenym2zg7je7hgi674bti + dev: false + /@ampproject/remapping/2.2.0: resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==} engines: {node: '>=6.0.0'} @@ -411,7 +434,6 @@ packages: engines: {node: '>=6.9.0'} dependencies: regenerator-runtime: 0.13.10 - dev: true /@babel/template/7.18.10: resolution: {integrity: sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==} @@ -515,6 +537,18 @@ packages: resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==} dev: true + /@iconify/react/3.2.2_react@18.2.0: + resolution: {integrity: sha512-z3+Jno3VcJzgNHsN5mEvYMsgCkOZkydqdIwOxjXh45+i2Vs9RGH68Y52vt39izwFSfuYUXhaW+1u7m7+IhCn/g==} + peerDependencies: + react: '>=16' + dependencies: + react: 18.2.0 + dev: false + + /@iconify/types/1.1.0: + resolution: {integrity: sha512-Jh0llaK2LRXQoYsorIH8maClebsnzTcve+7U3rQUSnC11X4jtPnFuyatqFLvMxZ8MLG8dB4zfHsbPfuvxluONw==} + dev: false + /@istanbuljs/load-nyc-config/1.1.0: resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==} engines: {node: '>=8'} @@ -810,6 +844,10 @@ packages: fastq: 1.13.0 dev: true + /@popperjs/core/2.11.6: + resolution: {integrity: sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==} + dev: false + /@sinclair/typebox/0.24.47: resolution: {integrity: sha512-J4Xw0xYK4h7eC34MNOPQi6IkNxGRck6n4VJpWDzXIFVTW8I/D43Gf+NfWz/v/7NHlzWOPd3+T4PJ4OqklQ2u7A==} dev: true @@ -1486,6 +1524,10 @@ packages: resolution: {integrity: sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==} dev: true + /classnames/2.3.2: + resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==} + dev: false + /cliui/8.0.1: resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==} engines: {node: '>=12'} @@ -1532,6 +1574,10 @@ packages: delayed-stream: 1.0.0 dev: true + /compute-scroll-into-view/1.0.17: + resolution: {integrity: sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg==} + dev: false + /concat-map/0.0.1: resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} dev: true @@ -1674,6 +1720,19 @@ packages: webidl-conversions: 7.0.0 dev: true + /downshift/6.1.12_react@18.2.0: + resolution: {integrity: sha512-7XB/iaSJVS4T8wGFT3WRXmSF1UlBHAA40DshZtkrIscIN+VC+Lh363skLxFTvJwtNgHxAMDGEHT4xsyQFWL+UA==} + peerDependencies: + react: '>=16.12.0' + dependencies: + '@babel/runtime': 7.19.4 + compute-scroll-into-view: 1.0.17 + prop-types: 15.8.1 + react: 18.2.0 + react-is: 17.0.2 + tslib: 2.4.0 + dev: false + /electron-to-chromium/1.4.284: resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==} dev: true @@ -3270,7 +3329,6 @@ packages: /lodash/4.17.21: resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} - dev: true /loose-envify/1.4.0: resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} @@ -3314,6 +3372,13 @@ packages: tmpl: 1.0.5 dev: true + /match-sorter/6.3.1: + resolution: {integrity: sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==} + dependencies: + '@babel/runtime': 7.19.4 + remove-accents: 0.4.2 + dev: false + /merge-stream/2.0.0: resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==} dev: true @@ -3400,7 +3465,6 @@ packages: /object-assign/4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} - dev: true /object-inspect/1.12.2: resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==} @@ -3650,7 +3714,6 @@ packages: loose-envify: 1.4.0 object-assign: 4.1.1 react-is: 16.13.1 - dev: true /psl/1.9.0: resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==} @@ -3678,18 +3741,34 @@ packages: react: 18.2.0 scheduler: 0.23.0 + /react-fast-compare/3.2.0: + resolution: {integrity: sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==} + dev: false + /react-is/16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} - dev: true /react-is/17.0.2: resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==} - dev: true /react-is/18.2.0: resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==} dev: true + /react-popper/2.3.0_r6q5zrenym2zg7je7hgi674bti: + resolution: {integrity: sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==} + peerDependencies: + '@popperjs/core': ^2.0.0 + react: ^16.8.0 || ^17 || ^18 + react-dom: ^16.8.0 || ^17 || ^18 + dependencies: + '@popperjs/core': 2.11.6 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + react-fast-compare: 3.2.0 + warning: 4.0.3 + dev: false + /react-refresh/0.14.0: resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} engines: {node: '>=0.10.0'} @@ -3711,7 +3790,6 @@ packages: /regenerator-runtime/0.13.10: resolution: {integrity: sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==} - dev: true /regexp.prototype.flags/1.4.3: resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==} @@ -3727,6 +3805,10 @@ packages: engines: {node: '>=8'} dev: true + /remove-accents/0.4.2: + resolution: {integrity: sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==} + dev: false + /require-directory/2.1.1: resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==} engines: {node: '>=0.10.0'} @@ -4123,6 +4205,10 @@ packages: resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==} dev: true + /tslib/2.4.0: + resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==} + dev: false + /tsutils/3.21.0_typescript@4.8.4: resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==} engines: {node: '>= 6'} @@ -4259,6 +4345,12 @@ packages: makeerror: 1.0.12 dev: true + /warning/4.0.3: + resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==} + dependencies: + loose-envify: 1.4.0 + dev: false + /webidl-conversions/7.0.0: resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==} engines: {node: '>=12'} diff --git a/coral/vite.config.ts b/coral/vite.config.ts index b1b5f91e5f..86302e5cc6 100644 --- a/coral/vite.config.ts +++ b/coral/vite.config.ts @@ -1,7 +1,19 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react()] -}) + plugins: [react()], + define: { + // Vite does not use process.env (see https://vitejs.dev/guide/env-and-mode.html). + // If a library depends on process.env (like "@aivenio/design-system"), + // the needed env variable can be set here like with EXAMPLE. + // ⛔ Note: there are stackoverflow answers / github issues that recommend e.g + // ⛔ 'process.env': process.env or + // ⛔ 'process.env': { ...process.env} + // ⛔️ Don't do that! This can expose unwanted env vars in production builds. + "process.env": { + EXAMPLE: "", + }, + }, +}); From 54323bfa7e86b362623c886aed91981df96eeb89 Mon Sep 17 00:00:00 2001 From: Mirjam Aulbach Date: Fri, 21 Oct 2022 08:56:39 +0200 Subject: [PATCH 2/3] Import css in main.tsx to enable usage. Add component form lib using components from the design system. --- coral/src/App.test.tsx | 7 +++++++ coral/src/App.tsx | 10 +++++++++- coral/src/main.tsx | 1 + 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/coral/src/App.test.tsx b/coral/src/App.test.tsx index a80317e508..7720989801 100644 --- a/coral/src/App.test.tsx +++ b/coral/src/App.test.tsx @@ -8,4 +8,11 @@ describe("App.tsx", () => { expect(heading).toBeVisible(); }); + + it("informs user that it uses the aiven design system ", () => { + render(); + const text = screen.getByText("This uses the aiven design system!"); + + expect(text).toBeVisible(); + }); }); diff --git a/coral/src/App.tsx b/coral/src/App.tsx index d61c9f4ace..7ce161ae55 100644 --- a/coral/src/App.tsx +++ b/coral/src/App.tsx @@ -1,7 +1,15 @@ +import { Flexbox, TagLabel, Typography } from "@aivenio/design-system"; + function App() { return (
-

Hello Klaw 👋

+ + Hello Klaw 👋 + + +

This uses the aiven design system!  

+ +
); } diff --git a/coral/src/main.tsx b/coral/src/main.tsx index 3fd3a69d39..2fdbc3c95b 100644 --- a/coral/src/main.tsx +++ b/coral/src/main.tsx @@ -1,6 +1,7 @@ import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; +import "@aivenio/design-system/dist/styles.css"; ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( From c0c8352cc018a795893f47d2114c66725a64fe68 Mon Sep 17 00:00:00 2001 From: Mirjam Aulbach Date: Fri, 21 Oct 2022 10:51:03 +0200 Subject: [PATCH 3/3] Import font for design system. --- coral/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/coral/index.html b/coral/index.html index 353987eb64..bdd40f0538 100644 --- a/coral/index.html +++ b/coral/index.html @@ -3,6 +3,7 @@ + Klaw