Merge pull request #130 from aiven/113-ui-rewrite-add-setup-for-styling

Add aiven design system component library to klaw
Aiven-Open · Oct 21, 2022 · 84a984f · 84a984f
2 parents 857e051 + c0c8352
commit 84a984f
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 17 deletions.
diff --git a/coral/index.html b/coral/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter" />
     <title>Klaw</title>
   </head>
   <body>

diff --git 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
diff --git 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(<App />);
+    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
@@ -1,7 +1,15 @@
+import { Flexbox, TagLabel, Typography } from "@aivenio/design-system";
+
 function App() {
   return (
     <div>
-      <h1>Hello Klaw 👋</h1>
+      <Typography htmlTag={"h1"} variant={"heading-2xl"}>
+        Hello Klaw 👋
+      </Typography>
+      <Flexbox alignItems={"center"}>
+        <p>This uses the aiven design system! &nbsp; </p>
+        <TagLabel title="yey" />
+      </Flexbox>
     </div>
   );
 }

diff --git 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(
   <React.StrictMode>

diff --git 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: "",
+    },
+  },
+});