fix: update font dependencies in visual-testing-app (#2870)

* fix: update font dependencies in visual-testing-app
commercetools · Aug 2, 2024 · 091c660 · 091c660
1 parent 11f6a01
commit 091c660
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 81 deletions.
diff --git a/.changeset/young-experts-type.md b/.changeset/young-experts-type.md
@@ -0,0 +1,5 @@
+---
+'visual-testing-app': patch
+---
+
+removed reliance on google-fonts in visual-testing-app
diff --git a/visual-testing-app/index.html b/visual-testing-app/index.html
@@ -6,18 +6,10 @@
       name="viewport"
       content="width=device-width, initial-scale=1, viewport-fit=cover"
     />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Open+Sans:ital,wght@0,300;0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
     <title>UI-Kit | Visual testing app</title>
-    <style>
-      :root {
-        --font-family-vrt: 'Open Sans', sans-serif;
-      }
-    </style>
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/index.jsx"></script>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/visual-testing-app/package.json b/visual-testing-app/package.json
@@ -12,6 +12,8 @@
     "@commercetools-uikit/design-system": "19.9.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@fontsource/inter": "5.0.20",
+    "@types/react": "17.0.2",
     "moment": "2.30.1",
     "moment-timezone": "0.5.45",
     "prop-types": "15.8.1",

diff --git a/visual-testing-app/src/App.jsx b/visual-testing-app/src/App.jsx
diff --git a/visual-testing-app/src/App.tsx b/visual-testing-app/src/App.tsx
@@ -0,0 +1,88 @@
+/// <reference types="vite/client" />
+import './globals.css';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { ThemeProvider } from '@commercetools-uikit/design-system';
+
+interface TRouteComponent {
+  routePath: string;
+  component: React.ComponentType;
+}
+
+type TRouteObject = {
+  [key: string]: TRouteComponent;
+};
+
+const pkgComponentsModules: TRouteObject = import.meta.glob(
+  '../../packages/**/*.visualroute.jsx',
+  { eager: true }
+);
+
+const designSystemComponentsModules: TRouteObject = import.meta.glob(
+  '../../design-system/**/*.visualroute.jsx',
+  { eager: true }
+);
+
+const allUniqueRouteComponents = Object.values({
+  ...pkgComponentsModules,
+  ...designSystemComponentsModules,
+}).reduce<Record<string, TRouteComponent>>((allComponents, RouteComponent) => {
+  // trim leading slash
+  const label = RouteComponent.routePath.substring(1);
+  if (allComponents[label]) {
+    // eslint-disable-next-line no-console
+    console.error(`Duplicate route generated for: /${label}`);
+  }
+  // eslint-disable-next-line no-param-reassign
+  allComponents[label] = RouteComponent;
+  return allComponents;
+}, {});
+
+const allSortedComponents = Object.keys(allUniqueRouteComponents)
+  .sort()
+  .map((key) => allUniqueRouteComponents[key]);
+
+const App = () => {
+  return (
+    <>
+      <ThemeProvider />
+      <Router>
+        <Switch>
+          <Route
+            path="/"
+            exact
+            component={() => (
+              <div>
+                <h1>Visual Testing App</h1>
+                <ul>
+                  {allSortedComponents.map((Component) => (
+                    <li key={Component.routePath}>
+                      <a href={Component.routePath}>{Component.routePath}</a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          />
+          {allSortedComponents.map((Component) => (
+            <Route
+              key={Component.routePath}
+              path={Component.routePath}
+              // eslint-disable-next-line react/jsx-pascal-case
+              render={() => <Component.component />}
+            />
+          ))}
+          <Route
+            component={() => (
+              <div>
+                <p>No route found</p>
+                <a href="/">Show all routes</a>
+              </div>
+            )}
+          />
+        </Switch>
+      </Router>
+    </>
+  );
+};
+
+export default App;
diff --git a/visual-testing-app/src/globals.css b/visual-testing-app/src/globals.css
@@ -1,7 +1,17 @@
+@import '@fontsource/inter/400.css';
+@import '@fontsource/inter/500.css';
+@import '@fontsource/inter/600.css';
+@import '@fontsource/inter/700.css';
 @import '@commercetools-uikit/design-system/materials/resets.css';
 
+:root {
+  --font-family-vrt: 'Inter', 'Inter Variable', system-ui, sans-serif;
+}
+
 html,
 body {
   font-size: var(--font-size-for-body);
   height: 100vh;
 }
+
+
diff --git a/visual-testing-app/src/index.jsx → visual-testing-app/src/index.tsx b/visual-testing-app/src/index.jsx → visual-testing-app/src/index.tsx
diff --git a/visual-testing-app/vite.config.js → visual-testing-app/vite.config.ts b/visual-testing-app/vite.config.js → visual-testing-app/vite.config.ts
diff --git a/yarn.lock b/yarn.lock
@@ -5510,6 +5510,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fontsource/inter@npm:5.0.20":
+  version: 5.0.20
+  resolution: "@fontsource/inter@npm:5.0.20"
+  checksum: 93fe0abd0d785af4d4dbd892463736f0710de707af39a6f7829e87d7f5c7849e1279f43cc008579a04a1f04a9b6070f03df96e806be6292f838a74af07c4737a
+  languageName: node
+  linkType: hard
+
 "@formatjs/cli@npm:6.2.12":
   version: 6.2.12
   resolution: "@formatjs/cli@npm:6.2.12"
@@ -20755,6 +20762,8 @@ __metadata:
     "@commercetools-uikit/design-system": 19.9.0
     "@emotion/react": ^11.10.5
     "@emotion/styled": ^11.10.5
+    "@fontsource/inter": 5.0.20
+    "@types/react": 17.0.2
     "@vitejs/plugin-react": 4.3.1
     moment: 2.30.1
     moment-timezone: 0.5.45