diff --git a/.changeset/young-experts-type.md b/.changeset/young-experts-type.md new file mode 100644 index 0000000000..255216732b --- /dev/null +++ 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 index 9153759a3e..c8490fdd45 100644 --- 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" /> - - - UI-Kit | Visual testing app -
- + diff --git a/visual-testing-app/package.json b/visual-testing-app/package.json index 1285306806..c18ae3952d 100644 --- 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 deleted file mode 100644 index 79e9d2f037..0000000000 --- a/visual-testing-app/src/App.jsx +++ /dev/null @@ -1,72 +0,0 @@ -import './globals.css'; -import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; -import { ThemeProvider } from '@commercetools-uikit/design-system'; - -const pkgComponentsModules = import.meta.glob( - '../../packages/**/*.visualroute.jsx', { eager: true } -); -const designSystemComponentsModules = import.meta.glob( - '../../design-system/**/*.visualroute.jsx', { eager: true } -); - -const allUniqueRouteComponents = Object.values({ - ...pkgComponentsModules, - ...designSystemComponentsModules, -}).reduce((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 = () => ( - <> - - - - ( -
-

Visual Testing App

- -
- )} - /> - {allSortedComponents.map((Component) => ( - } - /> - ))} - ( -
-

No route found

- Show all routes -
- )} - /> - - - -); - -export default App; diff --git a/visual-testing-app/src/App.tsx b/visual-testing-app/src/App.tsx new file mode 100644 index 0000000000..8fb8f4f1f1 --- /dev/null +++ b/visual-testing-app/src/App.tsx @@ -0,0 +1,88 @@ +/// +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>((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 ( + <> + + + + ( +
+

Visual Testing App

+ +
+ )} + /> + {allSortedComponents.map((Component) => ( + } + /> + ))} + ( +
+

No route found

+ Show all routes +
+ )} + /> + + + + ); +}; + +export default App; diff --git a/visual-testing-app/src/globals.css b/visual-testing-app/src/globals.css index d72e48af6f..ee564c3c46 100644 --- 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 b/visual-testing-app/src/index.tsx similarity index 100% rename from visual-testing-app/src/index.jsx rename to visual-testing-app/src/index.tsx diff --git a/visual-testing-app/vite.config.js b/visual-testing-app/vite.config.ts similarity index 100% rename from visual-testing-app/vite.config.js rename to visual-testing-app/vite.config.ts diff --git a/yarn.lock b/yarn.lock index 37a69c8ff6..065f18661d 100644 --- 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