Many frontend fixes & deps bumps

2025-11-20 12:02:22 +03:00 · 2023-06-19 17:16:21 +02:00
parent 4ec134a996
commit ebb87f0a5e
12 changed files with 1776 additions and 1231 deletions
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@@ -41,6 +41,7 @@ module.exports = {
      plugins: ["jsx-a11y", "matrix-org"],
      parserOptions: {
        project: ["./tsconfig.node.json", "./tsconfig.json"],
+        warnOnUnsupportedTypeScriptVersion: false,
      },
      files: ["*.ts", "*.tsx", "*.cjs", "*.js"],
      rules: {
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,13 +19,13 @@
    "@emotion/react": "^11.11.1",
    "@urql/core": "^4.0.10",
    "@urql/devtools": "^2.0.3",
-    "@urql/exchange-graphcache": "^6.1.3",
+    "@urql/exchange-graphcache": "^6.1.4",
    "@urql/exchange-refocus": "^1.0.2",
    "@urql/exchange-request-policy": "^1.0.2",
-    "@vector-im/compound-web": "https://github.com/vector-im/compound-web.git#c3f760ae02499897b9315feee51310cb739e7257",
+    "@vector-im/compound-web": "https://github.com/vector-im/compound-web.git#48eefccb388cb643ad82815559b3a08c8cc9ce7a",
    "date-fns": "^2.30.0",
    "graphql": "^16.6.0",
-    "jotai": "^2.2.0",
+    "jotai": "^2.2.1",
    "jotai-devtools": "^0.5.3",
    "jotai-location": "^0.5.1",
    "jotai-urql": "^0.7.1",
@@ -34,28 +34,28 @@
  },
  "devDependencies": {
    "@graphql-codegen/cli": "^4.0.1",
-    "@graphql-codegen/client-preset": "^4.0.0",
+    "@graphql-codegen/client-preset": "^4.0.1",
    "@graphql-codegen/urql-introspection": "^2.2.1",
    "@graphql-eslint/eslint-plugin": "^3.19.1",
-    "@storybook/addon-actions": "^7.0.20",
-    "@storybook/addon-backgrounds": "^7.0.20",
-    "@storybook/addon-controls": "^7.0.20",
-    "@storybook/addon-docs": "^7.0.20",
-    "@storybook/addon-essentials": "^7.0.20",
-    "@storybook/addon-measure": "^7.0.20",
-    "@storybook/addon-outline": "^7.0.20",
-    "@storybook/addon-toolbars": "^7.0.20",
-    "@storybook/addon-viewport": "^7.0.20",
-    "@storybook/react": "^7.0.20",
-    "@storybook/react-vite": "^7.0.20",
+    "@storybook/addon-actions": "^7.0.22",
+    "@storybook/addon-backgrounds": "^7.0.22",
+    "@storybook/addon-controls": "^7.0.22",
+    "@storybook/addon-docs": "^7.0.22",
+    "@storybook/addon-essentials": "^7.0.22",
+    "@storybook/addon-measure": "^7.0.22",
+    "@storybook/addon-outline": "^7.0.22",
+    "@storybook/addon-toolbars": "^7.0.22",
+    "@storybook/addon-viewport": "^7.0.22",
+    "@storybook/react": "^7.0.22",
+    "@storybook/react-vite": "^7.0.22",
    "@types/node": "^20.3.1",
-    "@types/react": "^18.2.12",
-    "@types/react-dom": "^18.2.5",
+    "@types/react": "^18.2.13",
+    "@types/react-dom": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "@vitejs/plugin-react": "^4.0.0",
-    "@vitest/coverage-c8": "^0.32.0",
+    "@vitest/coverage-c8": "^0.32.2",
    "autoprefixer": "^10.4.14",
-    "eslint": "^8.42.0",
+    "eslint": "^8.43.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-import-resolver-typescript": "^3.5.5",
@@ -63,15 +63,14 @@
    "eslint-plugin-matrix-org": "^1.2.0",
    "eslint-plugin-prettier": "^4.2.1",
    "postcss": "^8.4.24",
+    "postcss-prune-var": "^1.1.1",
    "prettier": "2.8.0",
    "react-test-renderer": "^18.2.0",
-    "storybook": "^7.0.20",
+    "storybook": "^7.0.22",
    "tailwindcss": "^3.3.2",
-    "typescript": "5.0.4",
+    "typescript": "5.1.3",
    "vite": "^4.3.9",
-    "vite-plugin-eslint": "^1.8.1",
    "vite-plugin-graphql-codegen": "^3.2.2",
-    "vite-plugin-svgr": "^3.2.0",
-    "vitest": "^0.32.0"
+    "vitest": "^0.32.2"
  }
 }
--- a/frontend/postcss.config.cjs
+++ b/frontend/postcss.config.cjs
@@ -17,5 +17,9 @@
 /** @type {import('postcss-load-config').Config} */

 module.exports = {
-  plugins: [require("tailwindcss"), require("autoprefixer")],
+  plugins: [
+    require("tailwindcss"),
+    require("autoprefixer"),
+    require("postcss-prune-var"),
+  ],
 };
--- a/frontend/src/components/BrowserSession.tsx
+++ b/frontend/src/components/BrowserSession.tsx
@@ -43,12 +43,9 @@ const BrowserSession: React.FC<Props> = ({ session, isCurrent }) => {
  const createdAt = data.createdAt;

  return (
-    <Block className="my-2">
-      <IconWebBrowser
-        className="session-icon float-left mr-2"
-        width="24"
-        height="24"
-      />
+    <Block className="my-4 flex items-center">
+      <IconWebBrowser className="mr-4 session-icon" />
+      <div className="flex-1">
        <Body size="md" weight="medium">
          {isCurrent ? (
            <>
@@ -58,14 +55,19 @@ const BrowserSession: React.FC<Props> = ({ session, isCurrent }) => {
            <>Browser Session</>
          )}
        </Body>
-      <div className="flex flex-row justify-between">
-        <Body size="sm" className="secondary-text">
+        <Body size="sm" className="text-secondary">
          Signed in <DateTime datetime={createdAt} />
        </Body>
-        <Body as="a" size="sm" weight="medium" href="#" data-kind="critical">
+      </div>
+      <Body
+        as="a"
+        size="sm"
+        weight="medium"
+        href="#"
+        className="text-critical underline hover:no-underline"
+      >
        Sign out
      </Body>
-      </div>
    </Block>
  );
 };
--- a/frontend/src/components/NavBar.tsx
+++ b/frontend/src/components/NavBar.tsx
@@ -17,7 +17,7 @@ const NavBar: React.FC<{
  children: React.ReactNode;
 }> = ({ className, children }) => (
  <nav className={className}>
-    <ul className="flex flex-row gap-4 justify-center	">{children}</ul>
+    <ul className="flex flex-row gap-4 justify-center">{children}</ul>
  </nav>
 );

--- a/frontend/src/components/UserGreeting.tsx
+++ b/frontend/src/components/UserGreeting.tsx
@@ -46,7 +46,7 @@ const UserGreeting: React.FC<{ userId: string }> = ({ userId }) => {

  if (result.data?.user) {
    return (
-      <header className="oidc_Header">
+      <header className="text-center">
        <Heading size="xl" weight="semibold">
          {result.data.user.matrix.displayName || result.data.user.username}
        </Heading>
--- a/frontend/src/gql/graphql.ts
+++ b/frontend/src/gql/graphql.ts
@@ -22,7 +22,7 @@ export type Incremental<T> =
    };
 /** All built-in and custom scalars, mapped to their actual values */
 export type Scalars = {
-  ID: { input: string | number; output: string };
+  ID: { input: string; output: string };
  String: { input: string; output: string };
  Boolean: { input: boolean; output: boolean };
  Int: { input: number; output: number };
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -13,7 +13,7 @@
 * limitations under the License.
 */

-@import "@vector-im/compound-web/dist/style.css";
+@import "@vector-im/compound-web/dist/index.css";

@tailwind base;
@tailwind components;
@@ -27,30 +27,6 @@ body {
  margin: var(--cpd-space-10x) auto var(--cpd-space-6x) auto;
 }

-.oidc_Header {
-  text-align: center;
-}
-
-.oidc_Header > * {
-  margin: 0;
-}
-
-.secondary-text {
-  color: var(--cpd-color-text-secondary);
-}
-
-a {
-  text-decoration: underline;
-}
-
-a:hover {
-  text-decoration: none;
-}
-
-[data-kind="critical"] {
-  color: var(--cpd-color-text-critical-primary);
-}
-
 .nav-bar a {
  color: var(--cpd-color-text-action-primary);
 }
@@ -73,6 +49,8 @@ hr {
 .session-icon {
  color: var(--cpd-color-icon-secondary);
  background: var(--cpd-color-bg-subtle-secondary);
-  padding: var(--cpd-space-1x);
-  border-radius: 4px;
+  height: var(--cpd-space-10x);
+  width: var(--cpd-space-10x);
+  padding: var(--cpd-space-2x);
+  border-radius: var(--cpd-space-1x);
 }
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -28,7 +28,7 @@ const Home: React.FC = () => {
    return (
      <>
        <UserGreeting userId={currentUserId} />
-        <div className="mt-4 grid lg:grid-cols-3 gap-1">
+        <div className="mt-4 grid gap-1">
          <OAuth2SessionList userId={currentUserId} />
          <CompatSsoLoginList userId={currentUserId} />
          <BrowserSessionList userId={currentUserId} />
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -23,6 +23,8 @@ module.exports = {
  theme: {
    colors: {
      white: "#FFFFFF",
+      secondary: "var(--cpd-color-text-secondary)",
+      critical: "var(--cpd-color-text-critical-primary)",
      accent: "#0DBD8B",
      alert: "#FF5B55",
      links: "#0086E6",
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -15,9 +15,7 @@
 /// <reference types="vitest" />
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
-import eslint from "vite-plugin-eslint";
 import codegen from "vite-plugin-graphql-codegen";
-import svgr from "vite-plugin-svgr";

 export default defineConfig({
  base: "/app/",
@@ -36,22 +34,6 @@ export default defineConfig({
        ],
      },
    }),
-    eslint({
-      // Explicitly set the config file, else storybook gets confused
-      overrideConfigFile: "./.eslintrc.cjs",
-    }),
-    svgr({
-      exportAsDefault: true,
-      svgrOptions: {
-        // Using 1em in order to make SVG size inherits from text size.
-        icon: "1em",
-        svgProps: {
-          // Adding a class in case we want to add global overrides, but one
-          // should probably stick to using CSS modules most of the time
-          class: "cpd-icon",
-        },
-      },
-    }),
  ],
  server: {
    proxy: {