diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 3ef03c689..5e9798836 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,17 +1,8 @@ const COPYRIGHT_HEADER = `/* -Copyright %%CURRENT_YEAR%% New Vector Ltd +Copyright %%CURRENT_YEAR%% New Vector Ltd. -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. +SPDX-License-Identifier: AGPL-3.0-only +Please see LICENSE in the repository root for full details. */ `; diff --git a/.github/workflows/element-call.yaml b/.github/workflows/element-call.yaml index c6485e7f2..d41df03ba 100644 --- a/.github/workflows/element-call.yaml +++ b/.github/workflows/element-call.yaml @@ -39,7 +39,7 @@ jobs: VITE_APP_VERSION: ${{ inputs.vite_app_version }} NODE_OPTIONS: "--max-old-space-size=4096" - name: Upload Artifact - uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4 + uses: actions/upload-artifact@50769540e7f4bd5e21e526ee35c689e35e0d6874 # v4 with: name: build-output path: dist diff --git a/.github/workflows/translations-download.yaml b/.github/workflows/translations-download.yaml index 42a1cc69f..8bcc51814 100644 --- a/.github/workflows/translations-download.yaml +++ b/.github/workflows/translations-download.yaml @@ -39,7 +39,7 @@ jobs: - name: Create Pull Request id: cpr - uses: peter-evans/create-pull-request@c5a7806660adbe173f04e3e038b0ccdcd758773c # v6.1.0 + uses: peter-evans/create-pull-request@d121e62763d8cc35b5fb1710e887d6e69a52d3a4 # v7.0.2 with: token: ${{ secrets.ELEMENT_BOT_TOKEN }} branch: actions/localazy-download diff --git a/src/analytics/AnalyticsNotice.tsx b/src/analytics/AnalyticsNotice.tsx index 8df2d742e..9ba78f0d2 100644 --- a/src/analytics/AnalyticsNotice.tsx +++ b/src/analytics/AnalyticsNotice.tsx @@ -8,14 +8,20 @@ Please see LICENSE in the repository root for full details. import { FC } from "react"; import { Trans } from "react-i18next"; -import { Link } from "../typography/Typography"; +import { ExternalLink } from "../button/Link"; export const AnalyticsNotice: FC = () => ( By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our{" "} - Privacy Policy and our{" "} - Cookie Policy. + + Privacy Policy + {" "} + and our{" "} + + Cookie Policy + + . ); diff --git a/src/auth/RegisterPage.tsx b/src/auth/RegisterPage.tsx index 5ee1c9eb9..392f8a7ab 100644 --- a/src/auth/RegisterPage.tsx +++ b/src/auth/RegisterPage.tsx @@ -19,7 +19,7 @@ import { captureException } from "@sentry/react"; import { sleep } from "matrix-js-sdk/src/utils"; import { Trans, useTranslation } from "react-i18next"; import { logger } from "matrix-js-sdk/src/logger"; -import { Button } from "@vector-im/compound-web"; +import { Button, Text } from "@vector-im/compound-web"; import { FieldRow, InputField, ErrorMessage } from "../input/Input"; import { useClientLegacy } from "../ClientContext"; @@ -28,10 +28,10 @@ import styles from "./LoginPage.module.css"; import Logo from "../icons/LogoLarge.svg?react"; import { LoadingView } from "../FullScreenView"; import { useRecaptcha } from "./useRecaptcha"; -import { Caption, Link } from "../typography/Typography"; import { usePageTitle } from "../usePageTitle"; import { PosthogAnalytics } from "../analytics/PosthogAnalytics"; import { Config } from "../config/Config"; +import { ExternalLink, Link } from "../button/Link"; export const RegisterPage: FC = () => { const { t } = useTranslation(); @@ -201,24 +201,24 @@ export const RegisterPage: FC = () => { data-testid="register_confirm_password" /> - + This site is protected by ReCAPTCHA and the Google{" "} - + Privacy Policy - {" "} + {" "} and{" "} - + Terms of Service - {" "} + {" "} apply.
By clicking "Register", you agree to our{" "} - + End User Licensing Agreement (EULA) - + - + {error && ( diff --git a/src/button/Link.module.css b/src/button/Link.module.css new file mode 100644 index 000000000..6248bc407 --- /dev/null +++ b/src/button/Link.module.css @@ -0,0 +1,13 @@ +/* +Copyright 2024 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only +Please see LICENSE in the repository root for full details. +*/ + +.external { + /* By default links will be blue/purple (or whatever the user agent does), but + in our designs we generally want external links to be the same color as the + surrounding text */ + color: inherit; +} diff --git a/src/button/Link.tsx b/src/button/Link.tsx index 35c9af984..68c4dd136 100644 --- a/src/button/Link.tsx +++ b/src/button/Link.tsx @@ -15,10 +15,16 @@ import { import { Link as CpdLink } from "@vector-im/compound-web"; import { useHistory } from "react-router-dom"; import { createPath, LocationDescriptor, Path } from "history"; +import classNames from "classnames"; + +import { useLatest } from "../useLatest"; +import styles from "./Link.module.css"; export function useLink( to: LocationDescriptor, + state?: unknown, ): [Path, (e: MouseEvent) => void] { + const latestState = useLatest(state); const history = useHistory(); const path = useMemo( () => (typeof to === "string" ? to : createPath(to)), @@ -27,9 +33,9 @@ export function useLink( const onClick = useCallback( (e: MouseEvent) => { e.preventDefault(); - history.push(to); + history.push(to, latestState.current); }, - [history, to], + [history, to, latestState], ); return [path, onClick]; @@ -38,15 +44,37 @@ export function useLink( type Props = Omit< ComponentPropsWithoutRef, "href" | "onClick" -> & { to: LocationDescriptor }; +> & { to: LocationDescriptor; state?: unknown }; /** * A version of Compound's link component that integrates with our router setup. + * This is only for app-internal links. */ export const Link = forwardRef(function Link( - { to, ...props }, + { to, state, ...props }, ref, ) { - const [path, onClick] = useLink(to); + const [path, onClick] = useLink(to, state); return ; }); + +/** + * A link to an external web page, made to fit into blocks of text more subtly + * than the normal Compound link component. + */ +export const ExternalLink = forwardRef< + HTMLAnchorElement, + ComponentPropsWithoutRef<"a"> +>(function ExternalLink({ className, children, ...props }, ref) { + return ( + + {children} + + ); +}); diff --git a/src/home/CallList.module.css b/src/home/CallList.module.css index c7441b4a8..faa5bf2d7 100644 --- a/src/home/CallList.module.css +++ b/src/home/CallList.module.css @@ -50,6 +50,12 @@ Please see LICENSE in the repository root for full details. margin-bottom: 0; } +.callName { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .facePile { margin-top: 8px; } diff --git a/src/home/CallList.tsx b/src/home/CallList.tsx index 526bb7e84..72b7356a1 100644 --- a/src/home/CallList.tsx +++ b/src/home/CallList.tsx @@ -11,14 +11,13 @@ import { RoomMember } from "matrix-js-sdk/src/models/room-member"; import { Room } from "matrix-js-sdk/src/models/room"; import { FC, useCallback, MouseEvent, useState } from "react"; import { useTranslation } from "react-i18next"; -import { IconButton } from "@vector-im/compound-web"; +import { IconButton, Text } from "@vector-im/compound-web"; import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import classNames from "classnames"; import { Avatar, Size } from "../Avatar"; import styles from "./CallList.module.css"; import { getRelativeRoomUrl } from "../utils/matrix"; -import { Body } from "../typography/Typography"; import { GroupCallRoom } from "./useGroupCallRooms"; import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement"; @@ -78,9 +77,9 @@ const CallTile: FC = ({ name, avatarUrl, room, client }) => { <>
- + {name} - +
= ({ client }) => { {optInAnalytics === null && ( - + - + )} {error && ( diff --git a/src/home/UnauthenticatedView.tsx b/src/home/UnauthenticatedView.tsx index a1ea8514e..daafa9f81 100644 --- a/src/home/UnauthenticatedView.tsx +++ b/src/home/UnauthenticatedView.tsx @@ -9,7 +9,7 @@ import { FC, useCallback, useState, FormEventHandler } from "react"; import { useHistory } from "react-router-dom"; import { randomString } from "matrix-js-sdk/src/randomstring"; import { Trans, useTranslation } from "react-i18next"; -import { Button, Heading } from "@vector-im/compound-web"; +import { Button, Heading, Text } from "@vector-im/compound-web"; import { logger } from "matrix-js-sdk/src/logger"; import { useClient } from "../ClientContext"; @@ -25,7 +25,6 @@ import { import { useInteractiveRegistration } from "../auth/useInteractiveRegistration"; import { JoinExistingCallModal } from "./JoinExistingCallModal"; import { useRecaptcha } from "../auth/useRecaptcha"; -import { Body, Caption, Link } from "../typography/Typography"; import { Form } from "../form/Form"; import styles from "./UnauthenticatedView.module.css"; import commonStyles from "./common.module.css"; @@ -34,6 +33,7 @@ import { AnalyticsNotice } from "../analytics/AnalyticsNotice"; import { Config } from "../config/Config"; import { E2eeType } from "../e2ee/e2eeType"; import { useOptInAnalytics } from "../settings/settings"; +import { ExternalLink, Link } from "../button/Link"; export const UnauthenticatedView: FC = () => { const { setClient } = useClient(); @@ -178,18 +178,18 @@ export const UnauthenticatedView: FC = () => { /> {optInAnalytics === null && ( - + - + )} - + By clicking "Go", you agree to our{" "} - + End User Licensing Agreement (EULA) - + - + {error && ( @@ -207,19 +207,19 @@ export const UnauthenticatedView: FC = () => {
- - + + {t("unauthenticated_view_login_button")} - - + + Not registered yet?{" "} - + Create an account - +
{onFinished && ( diff --git a/src/index.css b/src/index.css index b416dcca9..02f335f92 100644 --- a/src/index.css +++ b/src/index.css @@ -237,16 +237,6 @@ body[data-platform="desktop"] { line-height: var(--font-size-title); } - a { - color: var(--cpd-color-text-action-accent); - text-decoration: none; - } - - a:hover, - a:active { - opacity: 0.8; - } - hr { width: calc(100% - 24px); border: none; diff --git a/src/main.tsx b/src/main.tsx index b3e10985d..f847e21ab 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -18,7 +18,7 @@ import "./index.css"; import { logger } from "matrix-js-sdk/src/logger"; import { setLogExtension as setLKLogExtension, - setLogLevel, + setLogLevel as setLKLogLevel, } from "livekit-client"; import { App } from "./App"; @@ -28,9 +28,11 @@ import { Initializer } from "./initializer"; initRageshake().catch((e) => { logger.error("Failed to initialize rageshake", e); }); - -setLogLevel("debug"); -setLKLogExtension(global.mx_rage_logger.log); +setLKLogLevel("debug"); +setLKLogExtension((level, msg, context) => { + // we pass a synthetic logger name of "livekit" to the rageshake to make it easier to read + global.mx_rage_logger.log(level, "livekit", msg, context); +}); logger.info(`Element Call ${import.meta.env.VITE_APP_VERSION || "dev"}`); diff --git a/src/room/CallEndedView.tsx b/src/room/CallEndedView.tsx index 296bf2fb3..556dc6e54 100644 --- a/src/room/CallEndedView.tsx +++ b/src/room/CallEndedView.tsx @@ -9,12 +9,11 @@ import { FC, FormEventHandler, ReactNode, useCallback, useState } from "react"; import { MatrixClient } from "matrix-js-sdk/src/client"; import { Trans, useTranslation } from "react-i18next"; import { useHistory } from "react-router-dom"; -import { Button } from "@vector-im/compound-web"; +import { Button, Heading, Text } from "@vector-im/compound-web"; import styles from "./CallEndedView.module.css"; import feedbackStyle from "../input/FeedbackInput.module.css"; import { useProfile } from "../profile/useProfile"; -import { Body, Headline } from "../typography/Typography"; import { Header, HeaderLogo, LeftNav, RightNav } from "../Header"; import { PosthogAnalytics } from "../analytics/PosthogAnalytics"; import { FieldRow, InputField } from "../input/Input"; @@ -139,11 +138,11 @@ export const CallEndedView: FC = ({ return ( <>
- + You were disconnected from the call - +
{!confineToRoom && ( - + {t("return_home_button")} - + )} ); @@ -164,7 +163,7 @@ export const CallEndedView: FC = ({ return ( <>
- + {surveySubmitted ? t("call_ended_view.headline", { displayName, @@ -174,16 +173,16 @@ export const CallEndedView: FC = ({ }) + "\n" + t("call_ended_view.survey_prompt")} - + {(!surveySubmitted || confineToRoom) && PosthogAnalytics.instance.isEnabled() ? qualitySurveyDialog : createAccountDialog}
{!confineToRoom && ( - + {t("call_ended_view.not_now_button")} - + )} ); diff --git a/src/room/GroupCallLoader.tsx b/src/room/GroupCallLoader.tsx index 36bdcc4c0..f843f3f40 100644 --- a/src/room/GroupCallLoader.tsx +++ b/src/room/GroupCallLoader.tsx @@ -5,13 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only Please see LICENSE in the repository root for full details. */ -import { useCallback } from "react"; import { MatrixClient } from "matrix-js-sdk/src/client"; import { useTranslation } from "react-i18next"; import { MatrixError } from "matrix-js-sdk/src/matrix"; -import { useHistory } from "react-router-dom"; -import { Heading, Link, Text } from "@vector-im/compound-web"; +import { Heading, Text } from "@vector-im/compound-web"; +import { Link } from "../button/Link"; import { useLoadGroupCall, GroupCallStatus, @@ -35,15 +34,6 @@ export function GroupCallLoader({ const { t } = useTranslation(); const groupCallState = useLoadGroupCall(client, roomIdOrAlias, viaServers); - const history = useHistory(); - const onHomeClick = useCallback( - (ev: React.MouseEvent) => { - ev.preventDefault(); - history.push("/"); - }, - [history], - ); - switch (groupCallState.kind) { case "loaded": case "waitForInvite": @@ -63,9 +53,7 @@ export function GroupCallLoader({ {t("group_call_loader.failed_text")} {/* XXX: A 'create it for me' button would be the obvious UX here. Two screens already have dupes of this flow, let's make a common component and put it here. */} - - {t("common.home")} - + {t("common.home")} ); } else if (groupCallState.error instanceof CallTerminatedMessage) { @@ -79,9 +67,7 @@ export function GroupCallLoader({ "{groupCallState.error.reason}" )} - - {t("common.home")} - + {t("common.home")} ); } else { diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx index f1986d4b2..6892262b0 100644 --- a/src/room/GroupCallView.tsx +++ b/src/room/GroupCallView.tsx @@ -15,7 +15,7 @@ import { import { logger } from "matrix-js-sdk/src/logger"; import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession"; import { JoinRule } from "matrix-js-sdk/src/matrix"; -import { Heading, Link, Text } from "@vector-im/compound-web"; +import { Heading, Text } from "@vector-im/compound-web"; import { useTranslation } from "react-i18next"; import type { IWidgetApiRequest } from "matrix-widget-api"; @@ -40,6 +40,7 @@ import { useJoinRule } from "./useJoinRule"; import { InviteModal } from "./InviteModal"; import { useUrlParams } from "../UrlParams"; import { E2eeType } from "../e2ee/e2eeType"; +import { Link } from "../button/Link"; declare global { interface Window { @@ -85,6 +86,14 @@ export const GroupCallView: FC = ({ }; }, [rtcSession]); + useEffect(() => { + // Sanity check the room object + if (client.getRoom(rtcSession.room.roomId) !== rtcSession.room) + logger.warn( + `We've ended up with multiple rooms for the same ID (${rtcSession.room.roomId}). This indicates a bug in the group call loading code, and may lead to incomplete room state.`, + ); + }, [client, rtcSession.room]); + const { displayName, avatarUrl } = useProfile(client); const roomName = useRoomName(rtcSession.room); const roomAvatar = useRoomAvatar(rtcSession.room); @@ -273,14 +282,6 @@ export const GroupCallView: FC = ({ ); const onShareClick = joinRule === JoinRule.Public ? onShareClickFn : null; - const onHomeClick = useCallback( - (ev: React.MouseEvent) => { - ev.preventDefault(); - history.push("/"); - }, - [history], - ); - const { t } = useTranslation(); if (!isE2EESupportedBrowser() && e2eeSystem.kind !== E2eeType.NONE) { @@ -289,9 +290,7 @@ export const GroupCallView: FC = ({ {t("browser_media_e2ee_unsupported_heading")} {t("browser_media_e2ee_unsupported")} - - {t("common.home")} - + {t("common.home")} ); } diff --git a/src/room/RageshakeRequestModal.tsx b/src/room/RageshakeRequestModal.tsx index 03b0c1c0a..d22b0bea8 100644 --- a/src/room/RageshakeRequestModal.tsx +++ b/src/room/RageshakeRequestModal.tsx @@ -7,12 +7,11 @@ Please see LICENSE in the repository root for full details. import { FC, useEffect } from "react"; import { useTranslation } from "react-i18next"; -import { Button } from "@vector-im/compound-web"; +import { Button, Text } from "@vector-im/compound-web"; import { Modal, Props as ModalProps } from "../Modal"; import { FieldRow, ErrorMessage } from "../input/Input"; import { useSubmitRageshake } from "../settings/submit-rageshake"; -import { Body } from "../typography/Typography"; interface Props extends Omit { rageshakeRequestId: string; @@ -40,7 +39,7 @@ export const RageshakeRequestModal: FC = ({ open={open} onDismiss={onDismiss} > - {t("rageshake_request_modal.body")} + {t("rageshake_request_modal.body")} )} + + {error && } + {sent && {t("settings.feedback_tab_thank_you")}} + ); diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx index 3dfbae659..c4ba24d16 100644 --- a/src/settings/SettingsModal.tsx +++ b/src/settings/SettingsModal.tsx @@ -8,13 +8,12 @@ Please see LICENSE in the repository root for full details. import { ChangeEvent, FC, ReactNode, useCallback } from "react"; import { Trans, useTranslation } from "react-i18next"; import { MatrixClient } from "matrix-js-sdk/src/matrix"; -import { Dropdown } from "@vector-im/compound-web"; +import { Dropdown, Text } from "@vector-im/compound-web"; import { Modal } from "../Modal"; import styles from "./SettingsModal.module.css"; import { Tab, TabContainer } from "../tabs/Tabs"; import { FieldRow, InputField } from "../input/Input"; -import { Caption } from "../typography/Typography"; import { AnalyticsNotice } from "../analytics/AnalyticsNotice"; import { ProfileSettingsTab } from "./ProfileSettingsTab"; import { FeedbackSettingsTab } from "./FeedbackSettingsTab"; @@ -102,14 +101,14 @@ export const SettingsModal: FC = ({ }; const optInDescription = ( - +
You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call. - + ); const devices = useMediaDevices(); diff --git a/src/settings/rageshake.ts b/src/settings/rageshake.ts index e0868b9ed..ea9805dfb 100644 --- a/src/settings/rageshake.ts +++ b/src/settings/rageshake.ts @@ -29,9 +29,9 @@ Please see LICENSE in the repository root for full details. import EventEmitter from "events"; import { throttle } from "lodash"; -import { logger } from "matrix-js-sdk/src/logger"; +import { Logger, logger } from "matrix-js-sdk/src/logger"; import { randomString } from "matrix-js-sdk/src/randomstring"; -import { LoggingMethod } from "loglevel"; +import loglevel, { LoggingMethod } from "loglevel"; // the length of log data we keep in indexeddb (and include in the reports) const MAX_LOG_SIZE = 1024 * 1024 * 5; // 5 MB @@ -467,7 +467,12 @@ declare global { */ export async function init(): Promise { global.mx_rage_logger = new ConsoleLogger(); - setLogExtension(global.mx_rage_logger.log); + setLogExtension(logger, global.mx_rage_logger.log); + // these are the child/prefixed loggers we want to capture from js-sdk + // there doesn't seem to be an easy way to capture all children + ["MatrixRTCSession", "MatrixRTCSessionManager"].forEach((loggerName) => { + setLogExtension(logger.getChild(loggerName), global.mx_rage_logger.log); + }); return tryInitStorage(); } @@ -580,10 +585,14 @@ type LogLevelString = keyof typeof LogLevel; * took loglevel's example honouring log levels). Adds a loglevel logging extension * in the recommended way. */ -export function setLogExtension(extension: LogExtensionFunc): void { - const originalFactory = logger.methodFactory; - - logger.methodFactory = function ( +function setLogExtension( + _loggerToExtend: Logger, + extension: LogExtensionFunc, +): void { + const loggerToExtend = _loggerToExtend as unknown as loglevel.Logger; + const originalFactory = loggerToExtend.methodFactory; + + loggerToExtend.methodFactory = function ( methodName, configLevel, loggerName, @@ -594,11 +603,14 @@ export function setLogExtension(extension: LogExtensionFunc): void { const needLog = logLevel >= configLevel && logLevel < LogLevel.silent; return (...args) => { + // we don't send the logger name to the raw method as some of them are already outputting the prefix rawMethod.apply(this, args); if (needLog) { - extension(logLevel, ...args); + // we prefix the logger name to the extension + // this makes sure that the rageshake contains the logger name + extension(logLevel, loggerName?.toString(), ...args); } }; }; - logger.setLevel(logger.getLevel()); // Be sure to call setLevel method in order to apply plugin + loggerToExtend.setLevel(loggerToExtend.getLevel()); // Be sure to call setLevel method in order to apply plugin } diff --git a/src/settings/submit-rageshake.ts b/src/settings/submit-rageshake.ts index 16b81d0b6..1ab906672 100644 --- a/src/settings/submit-rageshake.ts +++ b/src/settings/submit-rageshake.ts @@ -270,11 +270,17 @@ export function useSubmitRageshake(): { ); } - await fetch(Config.get().rageshake!.submit_url, { + const res = await fetch(Config.get().rageshake!.submit_url, { method: "POST", body, }); + if (res.status !== 200) { + throw new Error( + `Failed to submit feedback: receive HTTP ${res.status} ${res.statusText}`, + ); + } + setState({ sending: false, sent: true, error: undefined }); } catch (error) { setState({ sending: false, sent: false, error: error as Error }); diff --git a/src/state/CallViewModel.ts b/src/state/CallViewModel.ts index 219df600c..6cd8495bb 100644 --- a/src/state/CallViewModel.ts +++ b/src/state/CallViewModel.ts @@ -16,7 +16,11 @@ import { ParticipantEvent, RemoteParticipant, } from "livekit-client"; -import { Room as MatrixRoom, RoomMember } from "matrix-js-sdk/src/matrix"; +import { + Room as MatrixRoom, + RoomMember, + RoomStateEvent, +} from "matrix-js-sdk/src/matrix"; import { EMPTY, Observable, @@ -321,6 +325,8 @@ export class CallViewModel extends ViewModel { this.remoteParticipants, observeParticipantMedia(this.livekitRoom.localParticipant), duplicateTiles.value, + // Also react to changes in the list of members + fromEvent(this.matrixRoom, RoomStateEvent.Update).pipe(startWith(null)), ]).pipe( scan( ( diff --git a/src/typography/Typography.module.css b/src/typography/Typography.module.css deleted file mode 100644 index d9ce74760..000000000 --- a/src/typography/Typography.module.css +++ /dev/null @@ -1,47 +0,0 @@ -/* -Copyright 2022-2024 New Vector Ltd. - -SPDX-License-Identifier: AGPL-3.0-only -Please see LICENSE in the repository root for full details. -*/ - -.caption { - font-size: var(--font-size-caption); - line-height: var(--font-size-body); -} - -.micro { - font-size: var(--font-size-micro); - line-height: var(--font-size-caption); -} - -.regular { - font-weight: 400; -} - -.semiBold { - font-weight: 600; -} - -.bold { - font-weight: 700; -} - -.link { - color: var(--cpd-color-text-link-external); -} - -.link:hover { - text-decoration: underline; - opacity: initial; -} - -.primary { - color: var(--cpd-color-text-action-accent); -} - -.overflowEllipsis { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} diff --git a/src/typography/Typography.tsx b/src/typography/Typography.tsx deleted file mode 100644 index 48b5a7f27..000000000 --- a/src/typography/Typography.tsx +++ /dev/null @@ -1,262 +0,0 @@ -/* -Copyright 2022-2024 New Vector Ltd. - -SPDX-License-Identifier: AGPL-3.0-only -Please see LICENSE in the repository root for full details. -*/ - -import { createElement, forwardRef, ReactNode } from "react"; -import classNames from "classnames"; -import { Link as RouterLink } from "react-router-dom"; -import * as H from "history"; - -import styles from "./Typography.module.css"; - -interface TypographyProps { - children: ReactNode; - fontWeight?: string; - className?: string; - overflowEllipsis?: boolean; - as?: string; -} - -export const Headline = forwardRef( - ( - { - as: Component = "h1", - children, - className, - fontWeight, - overflowEllipsis, - ...rest - }, - ref, - ) => { - return createElement( - Component, - { - ...rest, - className: classNames( - styles[fontWeight ?? ""], - { [styles.overflowEllipsis]: overflowEllipsis }, - className, - ), - ref, - }, - children, - ); - }, -); - -Headline.displayName = "Headline"; - -export const Title = forwardRef( - ( - { - as: Component = "h2", - children, - className, - fontWeight, - overflowEllipsis, - ...rest - }, - ref, - ) => { - return createElement( - Component, - { - ...rest, - className: classNames( - styles[fontWeight ?? ""], - { [styles.overflowEllipsis]: overflowEllipsis }, - className, - ), - ref, - }, - children, - ); - }, -); - -Title.displayName = "Title"; - -export const Subtitle = forwardRef( - ( - { - as: Component = "h3", - children, - className, - fontWeight, - overflowEllipsis, - ...rest - }, - ref, - ) => { - return createElement( - Component, - { - ...rest, - className: classNames( - styles[fontWeight ?? ""], - { [styles.overflowEllipsis]: overflowEllipsis }, - className, - ), - ref, - }, - children, - ); - }, -); - -Subtitle.displayName = "Subtitle"; - -export const Body = forwardRef( - ( - { - as: Component = "p", - children, - className, - fontWeight, - overflowEllipsis, - ...rest - }, - ref, - ) => { - return createElement( - Component, - { - ...rest, - className: classNames( - styles[fontWeight ?? ""], - { [styles.overflowEllipsis]: overflowEllipsis }, - className, - ), - ref, - }, - children, - ); - }, -); - -Body.displayName = "Body"; - -export const Caption = forwardRef( - ( - { - as: Component = "p", - children, - className, - fontWeight, - overflowEllipsis, - ...rest - }, - ref, - ) => { - return createElement( - Component, - { - ...rest, - className: classNames( - styles.caption, - styles[fontWeight ?? ""], - { [styles.overflowEllipsis]: overflowEllipsis }, - className, - ), - ref, - }, - children, - ); - }, -); - -Caption.displayName = "Caption"; - -export const Micro = forwardRef( - ( - { - as: Component = "p", - children, - className, - fontWeight, - overflowEllipsis, - ...rest - }, - ref, - ) => { - return createElement( - Component, - { - ...rest, - className: classNames( - styles.micro, - styles[fontWeight ?? ""], - { [styles.overflowEllipsis]: overflowEllipsis }, - className, - ), - ref, - }, - children, - ); - }, -); - -Micro.displayName = "Micro"; - -interface LinkProps extends TypographyProps { - to?: H.LocationDescriptor; - color?: string; - href?: string; -} - -export const Link = forwardRef( - ( - { - as, - children, - className, - color = "link", - href, - to, - fontWeight, - overflowEllipsis, - ...rest - }, - ref, - ) => { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - const Component: string | RouterLink = as || (to ? RouterLink : "a"); - let externalLinkProps: { href: string; target: string; rel: string }; - - if (href) { - externalLinkProps = { - href, - target: "_blank", - rel: "noreferrer noopener", - }; - } - - return createElement( - Component, - { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - ...externalLinkProps, - ...rest, - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - to: to, - className: classNames( - styles[color], - styles[fontWeight ?? ""], - { [styles.overflowEllipsis]: overflowEllipsis }, - className, - ), - ref: ref, - }, - children, - ); - }, -); - -Link.displayName = "Link"; diff --git a/yarn.lock b/yarn.lock index 40c69d440..35f60ebb9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1864,21 +1864,21 @@ "@jridgewell/resolve-uri" "^3.1.0" "@jridgewell/sourcemap-codec" "^1.4.14" -"@livekit/components-core@0.11.2", "@livekit/components-core@^0.11.0": - version "0.11.2" - resolved "https://registry.yarnpkg.com/@livekit/components-core/-/components-core-0.11.2.tgz#fded2e207155e4737ed52830d48b75ae2eaaf449" - integrity sha512-rXQ1OvyGe9gY8BCpH5FTr4Il17/sS/ecJQbG3PoOXAkQVl5JP965eqUPyKXZTdxNKlVLef00AygrO2pPArwOTA== +"@livekit/components-core@0.11.4", "@livekit/components-core@^0.11.0": + version "0.11.4" + resolved "https://registry.yarnpkg.com/@livekit/components-core/-/components-core-0.11.4.tgz#33248bb750d6e2492cca919a2409d511ae0a73f0" + integrity sha512-8Dr/9WCEov5AW42KrTnLTuoEIK1yWHcdvvJl8znxx59uUVlE8o6IvsFnofNlfRJ2fCADSnw0K2yEpLQjwLel2Q== dependencies: "@floating-ui/dom" "1.6.8" loglevel "1.9.1" rxjs "7.8.1" "@livekit/components-react@^2.0.0": - version "2.4.3" - resolved "https://registry.yarnpkg.com/@livekit/components-react/-/components-react-2.4.3.tgz#634b507be2dfede2267f304fc5922d1b69e2be56" - integrity sha512-XhCvwFvNjhBJcoQHIY4Hk6MBp7mM9q0n0i7sN/xK3fB1DSjkxIkpc7lh/+Pjqdu6F6OJT3MjwNFYnftqy6kcmw== + version "2.5.3" + resolved "https://registry.yarnpkg.com/@livekit/components-react/-/components-react-2.5.3.tgz#49b53207ba5f25c738e21713d454c99a0c59f07f" + integrity sha512-RKqi2KDltsqTdw5xx0ahEfHtuFvQoTjmJ/M1pukqU7Eczcuwga4AuEESxWkq6ct7Zenabru4eYjFbScc60L3og== dependencies: - "@livekit/components-core" "0.11.2" + "@livekit/components-core" "0.11.4" clsx "2.1.1" usehooks-ts "3.1.0"