diff --git a/frontend/package-lock.json b/frontend/package-lock.json index fe8adb9cb..3a0cb7769 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -77,7 +77,6 @@ "vite-plugin-compression": "^0.5.1", "vite-plugin-graphql-codegen": "^3.3.8", "vite-plugin-manifest-sri": "^0.2.0", - "vite-plugin-svgr": "^4.2.0", "vitest": "^1.4.0" } }, @@ -7727,219 +7726,6 @@ "url": "https://opencollective.com/storybook" } }, - "node_modules/@svgr/babel-plugin-add-jsx-attribute": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz", - "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==", - "dev": true, - "engines": { - "node": ">=14" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/gregberge" - }, - "peerDependencies": { - "@babel/core": "^7.0.0-0" - } - }, - "node_modules/@svgr/babel-plugin-remove-jsx-attribute": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz", - "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==", - "dev": true, - "engines": { - "node": ">=14" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/gregberge" - }, - "peerDependencies": { - "@babel/core": "^7.0.0-0" - } - }, - "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz", - "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==", - "dev": true, - "engines": { - "node": ">=14" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/gregberge" - }, - "peerDependencies": { - "@babel/core": "^7.0.0-0" - } - }, - "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz", - "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==", - "dev": true, - "engines": { - "node": ">=14" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/gregberge" - }, - "peerDependencies": { - "@babel/core": "^7.0.0-0" - } - }, - "node_modules/@svgr/babel-plugin-svg-dynamic-title": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz", - "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==", - "dev": true, - "engines": { - "node": ">=14" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/gregberge" - }, - "peerDependencies": { - "@babel/core": "^7.0.0-0" - } - }, - "node_modules/@svgr/babel-plugin-svg-em-dimensions": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz", - "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==", - "dev": true, - "engines": { - "node": ">=14" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/gregberge" - }, - "peerDependencies": { - "@babel/core": "^7.0.0-0" - } - }, - "node_modules/@svgr/babel-plugin-transform-react-native-svg": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz", - "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==", - "dev": true, - "engines": { - "node": ">=14" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/gregberge" - }, - "peerDependencies": { - "@babel/core": "^7.0.0-0" - } - }, - "node_modules/@svgr/babel-plugin-transform-svg-component": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz", - "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==", - "dev": true, - "engines": { - "node": ">=12" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/gregberge" - }, - "peerDependencies": { - "@babel/core": "^7.0.0-0" - } - }, - "node_modules/@svgr/babel-preset": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz", - "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==", - "dev": true, - "dependencies": { - "@svgr/babel-plugin-add-jsx-attribute": "8.0.0", - "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0", - "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0", - "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0", - "@svgr/babel-plugin-svg-dynamic-title": "8.0.0", - "@svgr/babel-plugin-svg-em-dimensions": "8.0.0", - "@svgr/babel-plugin-transform-react-native-svg": "8.1.0", - "@svgr/babel-plugin-transform-svg-component": "8.0.0" - }, - "engines": { - "node": ">=14" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/gregberge" - }, - "peerDependencies": { - "@babel/core": "^7.0.0-0" - } - }, - "node_modules/@svgr/core": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz", - "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", - "dev": true, - "dependencies": { - "@babel/core": "^7.21.3", - "@svgr/babel-preset": "8.1.0", - "camelcase": "^6.2.0", - "cosmiconfig": "^8.1.3", - "snake-case": "^3.0.4" - }, - "engines": { - "node": ">=14" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/gregberge" - } - }, - "node_modules/@svgr/hast-util-to-babel-ast": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz", - "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==", - "dev": true, - "dependencies": { - "@babel/types": "^7.21.3", - "entities": "^4.4.0" - }, - "engines": { - "node": ">=14" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/gregberge" - } - }, - "node_modules/@svgr/plugin-jsx": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz", - "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==", - "dev": true, - "dependencies": { - "@babel/core": "^7.21.3", - "@svgr/babel-preset": "8.1.0", - "@svgr/hast-util-to-babel-ast": "8.0.0", - "svg-parser": "^2.0.4" - }, - "engines": { - "node": ">=14" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/gregberge" - }, - "peerDependencies": { - "@svgr/core": "*" - } - }, "node_modules/@tanstack/history": { "version": "1.41.0", "resolved": "https://registry.npmjs.org/@tanstack/history/-/history-1.41.0.tgz", @@ -10789,18 +10575,6 @@ "tslib": "^2.0.3" } }, - "node_modules/camelcase": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", - "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==", - "dev": true, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/camelcase-css": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", @@ -21000,12 +20774,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/svg-parser": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", - "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==", - "dev": true - }, "node_modules/swap-case": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/swap-case/-/swap-case-2.0.2.tgz", @@ -22448,20 +22216,6 @@ "integrity": "sha512-Zt5jt19xTIJ91LOuQTCtNG7rTFc5OziAjBz2H5NdCGqaOD1nxrWExLhcKW+W4/q8/jOPCg/n5ncYEQmqCxiGQQ==", "dev": true }, - "node_modules/vite-plugin-svgr": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-4.2.0.tgz", - "integrity": "sha512-SC7+FfVtNQk7So0XMjrrtLAbEC8qjFPifyD7+fs/E6aaNdVde6umlVVh0QuwDLdOMu7vp5RiGFsB70nj5yo0XA==", - "dev": true, - "dependencies": { - "@rollup/pluginutils": "^5.0.5", - "@svgr/core": "^8.1.0", - "@svgr/plugin-jsx": "^8.1.0" - }, - "peerDependencies": { - "vite": "^2.6.0 || 3 || 4 || 5" - } - }, "node_modules/vite/node_modules/@esbuild/aix-ppc64": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", diff --git a/frontend/package.json b/frontend/package.json index e66f21be3..7123c4a92 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -86,7 +86,6 @@ "vite-plugin-compression": "^0.5.1", "vite-plugin-graphql-codegen": "^3.3.8", "vite-plugin-manifest-sri": "^0.2.0", - "vite-plugin-svgr": "^4.2.0", "vitest": "^1.4.0" } } diff --git a/frontend/src/components/Dialog/Dialog.tsx b/frontend/src/components/Dialog/Dialog.tsx index 6c5e4ef19..c0d949521 100644 --- a/frontend/src/components/Dialog/Dialog.tsx +++ b/frontend/src/components/Dialog/Dialog.tsx @@ -21,7 +21,7 @@ import { Overlay as DialogOverlay, Content as DialogContent, } from "@radix-ui/react-dialog"; -import IconClose from "@vector-im/compound-design-tokens/icons/close.svg?react"; +import IconClose from "@vector-im/compound-design-tokens/assets/web/icons/close"; import { Glass, Tooltip } from "@vector-im/compound-web"; import { PropsWithChildren } from "react"; import { useTranslation } from "react-i18next"; diff --git a/frontend/src/components/GenericError.tsx b/frontend/src/components/GenericError.tsx index 9977a2a57..1ac3c8a53 100644 --- a/frontend/src/components/GenericError.tsx +++ b/frontend/src/components/GenericError.tsx @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import IconError from "@vector-im/compound-design-tokens/icons/error.svg?react"; +import IconError from "@vector-im/compound-design-tokens/assets/web/icons/error"; import { Button } from "@vector-im/compound-web"; import { useState } from "react"; import { Translation } from "react-i18next"; diff --git a/frontend/src/components/Session/DeviceTypeIcon.tsx b/frontend/src/components/Session/DeviceTypeIcon.tsx index 1ca448e00..b1cca9f40 100644 --- a/frontend/src/components/Session/DeviceTypeIcon.tsx +++ b/frontend/src/components/Session/DeviceTypeIcon.tsx @@ -12,10 +12,10 @@ // See the License for the specific language governing permissions and // limitations under the License. -import IconComputer from "@vector-im/compound-design-tokens/icons/computer.svg?react"; -import IconMobile from "@vector-im/compound-design-tokens/icons/mobile.svg?react"; -import IconUnknown from "@vector-im/compound-design-tokens/icons/unknown.svg?react"; -import IconBrowser from "@vector-im/compound-design-tokens/icons/web-browser.svg?react"; +import IconComputer from "@vector-im/compound-design-tokens/assets/web/icons/computer"; +import IconMobile from "@vector-im/compound-design-tokens/assets/web/icons/mobile"; +import IconUnknown from "@vector-im/compound-design-tokens/assets/web/icons/unknown"; +import IconBrowser from "@vector-im/compound-design-tokens/assets/web/icons/web-browser"; import { FunctionComponent, SVGProps } from "react"; import { useTranslation } from "react-i18next"; diff --git a/frontend/src/components/Session/EndSessionButton.tsx b/frontend/src/components/Session/EndSessionButton.tsx index 99620e2bd..d40793a1f 100644 --- a/frontend/src/components/Session/EndSessionButton.tsx +++ b/frontend/src/components/Session/EndSessionButton.tsx @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import IconSignOut from "@vector-im/compound-design-tokens/icons/sign-out.svg?react"; +import IconSignOut from "@vector-im/compound-design-tokens/assets/web/icons/sign-out"; import { Button } from "@vector-im/compound-web"; import { useState } from "react"; import { useTranslation } from "react-i18next"; diff --git a/frontend/src/components/Session/__snapshots__/SelectableSession.test.tsx.snap b/frontend/src/components/Session/__snapshots__/SelectableSession.test.tsx.snap deleted file mode 100644 index fe2bc6dd2..000000000 --- a/frontend/src/components/Session/__snapshots__/SelectableSession.test.tsx.snap +++ /dev/null @@ -1,39 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[` > renders an unselected session 1`] = ` -
-
-
- -
- -
-
-
- Test child -
-
-
-`; diff --git a/frontend/src/components/SessionCard/SessionCard.stories.tsx b/frontend/src/components/SessionCard/SessionCard.stories.tsx index 01eb791b8..5541e485e 100644 --- a/frontend/src/components/SessionCard/SessionCard.stories.tsx +++ b/frontend/src/components/SessionCard/SessionCard.stories.tsx @@ -13,7 +13,7 @@ // limitations under the License. import type { Meta, StoryObj } from "@storybook/react"; -import IconSignOut from "@vector-im/compound-design-tokens/icons/sign-out.svg?react"; +import IconSignOut from "@vector-im/compound-design-tokens/assets/web/icons/sign-out"; import { Button } from "@vector-im/compound-web"; import { useTranslation } from "react-i18next"; diff --git a/frontend/src/components/SessionDetail/SessionDetails.tsx b/frontend/src/components/SessionDetail/SessionDetails.tsx index 25a8da02e..4027abdf9 100644 --- a/frontend/src/components/SessionDetail/SessionDetails.tsx +++ b/frontend/src/components/SessionDetail/SessionDetails.tsx @@ -12,12 +12,12 @@ // See the License for the specific language governing permissions and // limitations under the License. -import IconChat from "@vector-im/compound-design-tokens/icons/chat.svg?react"; -import IconComputer from "@vector-im/compound-design-tokens/icons/computer.svg?react"; -import IconError from "@vector-im/compound-design-tokens/icons/error.svg?react"; -import IconInfo from "@vector-im/compound-design-tokens/icons/info.svg?react"; -import IconSend from "@vector-im/compound-design-tokens/icons/send.svg?react"; -import IconUserProfile from "@vector-im/compound-design-tokens/icons/user-profile.svg?react"; +import IconChat from "@vector-im/compound-design-tokens/assets/web/icons/chat"; +import IconComputer from "@vector-im/compound-design-tokens/assets/web/icons/computer"; +import IconError from "@vector-im/compound-design-tokens/assets/web/icons/error"; +import IconInfo from "@vector-im/compound-design-tokens/assets/web/icons/info"; +import IconSend from "@vector-im/compound-design-tokens/assets/web/icons/send"; +import IconUserProfile from "@vector-im/compound-design-tokens/assets/web/icons/user-profile"; import { Text } from "@vector-im/compound-web"; import { ReactNode } from "react"; import { useTranslation } from "react-i18next"; diff --git a/frontend/src/components/SessionDetail/SessionHeader.tsx b/frontend/src/components/SessionDetail/SessionHeader.tsx index 91e41fc30..2e78811ac 100644 --- a/frontend/src/components/SessionDetail/SessionHeader.tsx +++ b/frontend/src/components/SessionDetail/SessionHeader.tsx @@ -13,7 +13,7 @@ // limitations under the License. import { Link } from "@tanstack/react-router"; -import IconChevronLeft from "@vector-im/compound-design-tokens/icons/chevron-left.svg?react"; +import IconChevronLeft from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left"; import { H3 } from "@vector-im/compound-web"; import styles from "./SessionHeader.module.css"; diff --git a/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap b/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap index ac91f3030..43f77ec2b 100644 --- a/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap +++ b/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap @@ -13,7 +13,6 @@ exports[` > renders a compatability session details 1`] = ` href="/sessions" > > renders a compatability session details 1`] = ` class="_scope_040867" > > renders a compatability session details 1`] = ` class="_scope_040867" > > renders a compatability session details 1`] = ` class="_scope_040867" > > renders a compatability session without an ssoL href="/sessions" > > renders a compatability session without an ssoL class="_scope_040867" > > renders a compatability session without an ssoL class="_scope_040867" > > renders a compatability session without an ssoL class="_scope_040867" > > renders a finished compatability session detail href="/sessions" > > renders a finished compatability session detail class="_scope_040867" > > renders a finished compatability session detail class="_scope_040867" > > renders a finished compatability session detail class="_scope_040867" > > renders a finished session details 1`] = ` href="/sessions" > > renders a finished session details 1`] = ` class="_scope_040867" > > renders a finished session details 1`] = ` class="_scope_040867" > > renders a finished session details 1`] = ` class="_scope_040867" > > renders session details 1`] = ` href="/sessions" > > renders session details 1`] = ` class="_scope_040867" > > renders session details 1`] = ` class="_scope_040867" > > renders session details 1`] = ` class="_scope_040867" > > renders a session header 1`] = ` href="/" > ({ manifestSRI(), - svgr({ - esbuildOptions: { - // This makes sure we're using the same JSX runtime as React itself - jsx: "automatic", - jsxDev: env.mode === "development", - }, - - 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 - className: "cpd-icon", - }, - }, - }), - // Pre-compress the assets, so that the server can serve them directly compression({ algorithm: "gzip",