Make shared component build work in isolation (#31066)

* Make shared component build work in isolation

 * Add deps that were missing because they were getting picked up
   from element-web main but shared-components needs itself
 * Exclude test files from dts generation
 * Bump version

* Change all the shared-component import to be the built artifact

* Don't randomly inhale eslint configs in parent dirs please

* maybe we don't need this anymore?

* maybe fix build

* Maybe fix docker build

* More build faff

 * build:res on the parent as part of shared component prepare
 * link shared component repo inn docker build

* 💅

* 💅x2

* Try converting the translation keys to a .d.ts file manually

so it gets bundled rather than left as a relative import to the json
file

* add the script

* Add this back for 2nd time now I think

* Shouldn't need this anymore

* patch-package on prepare

because we're patching a dev dependency so it won't be there if we're
installed as a dependency

* Unused import

* Prettier compliance

* Only use counterpart from shared components

as per comment

* Import shared components CSS

* Prettier

* Call the one from shared components

rather than recurse infinitely

* Hopefully make tests work

* wake up, comment goes before import

* Fix lint errors

* Fix dupe TranslationKey export

* Update compound-web to fix type error

An update to @types.react adds the 'hint' value to the enum of the
'popover' attribute and this version of compound-web uses the maching
verson of @types/react so they don't conflict.

* Maybe, hopefully, get the types working?

Please?

* Add copyright header to i18nkeys

as eslint complains otherwise since it's now in src

* prettier

* stop running shared-component tests in EW

* update snapshots

because flex is now from an external stylesheet I guess

* More snapshots

* Manual class update

* Avoid bundling compound bits

Because a) it's silly and b) it means we end up bundling a copy of
floating-ui too which causes absolute madness with its useDelayGroup
contexts.

* ignore test util files for coverage

* Add !important

because the styles are being applied in a different order now

* Another !important because css order has changed

* Try adding it here to make the test files ignored

* More !important

* commit yarn lock change

* Add shared components coverage file

* Update snapshots

Because the line height was being overridden to 22.5px somehow by
something I can't find, and now isn't: surely the normal 1.5rem is
more sensible.

* Update snapshots, attempt 2

* Another !important

* More snapshot updates

* Add test for i18n wrappers

& add test script

* lint

* Prettier

* Hopefully run shared component tests

* don't need this bit for non-matrix

* install ew deps

* rigfht coverage location

* Rename job here too

* Try different coverage filename

* Fix copyrights & comment

* Typo

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

src/DateUtils.ts

@@ -13,7 +13,7 @@ import { type Optional } from "matrix-events-sdk";
 import { _t, getUserLanguage } from "./languageHandler";
 import { getUserTimezone } from "./TimezoneHandler";
 
-export { formatSeconds } from "../packages/shared-components/src/utils/DateUtils";
+export { formatSeconds } from "@element-hq/web-shared-components";
 
 export const MINUTE_MS = 60000;
 export const HOUR_MS = MINUTE_MS * 60;

src/accessibility/KeyboardShortcuts.ts

@@ -9,7 +9,8 @@ Please see LICENSE files in the repository root for full details.
 */
 
 // Import i18n.tsx instead of languageHandler to avoid circular deps
-import { _td, type TranslationKey } from "../../packages/shared-components/src/utils/i18n";
+import { _td, type TranslationKey } from "@element-hq/web-shared-components";
+
 import { IS_MAC, IS_ELECTRON, Key } from "../Keyboard";
 import { type IBaseSetting } from "../settings/Settings";
 import { type KeyCombo } from "../KeyBindingsManager";

src/async-components/structures/ErrorView.tsx

@@ -8,9 +8,9 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX, type ReactNode } from "react";
 import { Text, Heading, Button, Separator } from "@vector-im/compound-web";
 import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out";
+import { Flex } from "@element-hq/web-shared-components";
 
 import SdkConfig from "../../SdkConfig";
-import { Flex } from "../../../packages/shared-components/src/utils/Flex";
 import { _t } from "../../languageHandler";
 import { Icon as AppleIcon } from "../../../res/themes/element/img/compound/apple.svg";
 import { Icon as MicrosoftIcon } from "../../../res/themes/element/img/compound/microsoft.svg";

src/audio/Playback.ts

@@ -9,13 +9,13 @@ Please see LICENSE files in the repository root for full details.
 import EventEmitter from "events";
 import { SimpleObservable } from "matrix-widget-api";
 import { logger } from "matrix-js-sdk/src/logger";
+import { clamp } from "@element-hq/web-shared-components";
 
 import { UPDATE_EVENT } from "../stores/AsyncStore";
 import { arrayFastResample } from "../utils/arrays";
 import { type IDestroyable } from "../utils/IDestroyable";
 import { PlaybackClock } from "./PlaybackClock";
 import { createAudioContext, decodeOgg } from "./compat";
-import { clamp } from "../../packages/shared-components/src/utils/numbers";
 import { DEFAULT_WAVEFORM, PLAYBACK_WAVEFORM_SAMPLES } from "./consts";
 import { PlaybackEncoder } from "../PlaybackEncoder";
 

src/audio/RecorderWorklet.ts

@@ -1,16 +1,14 @@
 /*
-Copyrimport { type IAmplitudePayload, type ITimingPayload, PayloadEvent, WORKLET_NAME } from "./consts";
-import { percentageOf } from "../../packages/shared-components/src/utils/numbers";
-
-// from AudioWorkletGlobalScope: https://developer.mozilla.org/en-US/docs/Web/API/AudioWorkletGlobalScope" 2024 New Vector Ltd.
+Copyright 2024 New Vector Ltd.
 Copyright 2021 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
+import { percentageOf } from "@element-hq/web-shared-components";
+
 import { type IAmplitudePayload, type ITimingPayload, PayloadEvent, WORKLET_NAME } from "./consts";
-import { percentageOf } from "../../packages/shared-components/src/utils/numbers";
 
 // from AudioWorkletGlobalScope: https://developer.mozilla.org/en-US/docs/Web/API/AudioWorkletGlobalScope
 declare const currentTime: number;

src/audio/VoiceRecording.ts

@@ -11,6 +11,7 @@ import encoderPath from "opus-recorder/dist/encoderWorker.min.js";
 import { SimpleObservable } from "matrix-widget-api";
 import EventEmitter from "events";
 import { logger } from "matrix-js-sdk/src/logger";
+import { clamp } from "@element-hq/web-shared-components";
 
 import MediaDeviceHandler from "../MediaDeviceHandler";
 import { type IDestroyable } from "../utils/IDestroyable";
@@ -19,7 +20,6 @@ import { PayloadEvent, WORKLET_NAME } from "./consts";
 import { UPDATE_EVENT } from "../stores/AsyncStore";
 import { createAudioContext } from "./compat";
 import { FixedRollingArray } from "../utils/FixedRollingArray";
-import { clamp } from "../../packages/shared-components/src/utils/numbers";
 import recorderWorkletFactory from "./recorderWorkletFactory";
 
 const CHANNELS = 1; // stereo isn't important

src/components/views/audio_messages/LegacySeekBar.tsx

@@ -7,10 +7,10 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type ChangeEvent, type CSSProperties, type ReactNode } from "react";
+import { percentageOf } from "@element-hq/web-shared-components";
 
 import { type PlaybackInterface } from "../../../audio/Playback";
 import { MarkedExecution } from "../../../utils/MarkedExecution";
-import { percentageOf } from "../../../../packages/shared-components/src/utils/numbers";
 import { _t } from "../../../languageHandler";
 
 interface IProps {

src/components/views/audio_messages/LiveRecordingClock.tsx

@@ -7,9 +7,9 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
+import { Clock } from "@element-hq/web-shared-components";
 
 import { type IRecordingUpdate } from "../../../audio/VoiceRecording";
-import { Clock } from "../../../../packages/shared-components/src/audio/Clock";
 import { MarkedExecution } from "../../../utils/MarkedExecution";
 import { type VoiceMessageRecording } from "../../../audio/VoiceMessageRecording";
 

src/components/views/audio_messages/PlaybackClock.tsx

@@ -7,8 +7,8 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
+import { Clock } from "@element-hq/web-shared-components";
 
-import { Clock } from "../../../../packages/shared-components/src/audio/Clock";
 import { type Playback, PlaybackState } from "../../../audio/Playback";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 

src/components/views/audio_messages/PlaybackWaveform.tsx

@@ -7,11 +7,11 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
+import { percentageOf } from "@element-hq/web-shared-components";
 
 import { arraySeed, arrayTrimFill } from "../../../utils/arrays";
 import Waveform from "./Waveform";
 import { type Playback } from "../../../audio/Playback";
-import { percentageOf } from "../../../../packages/shared-components/src/utils/numbers";
 import { PLAYBACK_WAVEFORM_SAMPLES } from "../../../audio/consts";
 
 interface IProps {

src/components/views/beacon/BeaconListItem.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type HTMLProps, useContext } from "react";
 import { type Beacon, BeaconEvent, LocationAssetType } from "matrix-js-sdk/src/matrix";
+import { humanizeTime } from "@element-hq/web-shared-components";
 
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { useEventEmitterState } from "../../../hooks/useEventEmitter";
@@ -18,7 +19,6 @@ import BeaconStatus from "./BeaconStatus";
 import { BeaconDisplayStatus } from "./displayStatus";
 import StyledLiveBeaconIcon from "./StyledLiveBeaconIcon";
 import ShareLatestLocation from "./ShareLatestLocation";
-import { humanizeTime } from "../../../../packages/shared-components/src/utils/humanize";
 
 interface Props {
     beacon: Beacon;

src/components/views/dialogs/InviteDialog.tsx

@@ -12,6 +12,7 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
 import { type MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 import { logger } from "matrix-js-sdk/src/logger";
 import { uniqBy } from "lodash";
+import { RichList, RichItem, PillInput, Pill } from "@element-hq/web-shared-components";
 
 import { Icon as EmailPillAvatarIcon } from "../../../../res/img/icon-email-pill-avatar.svg";
 import { _t, _td } from "../../../languageHandler";
@@ -63,10 +64,6 @@ import AskInviteAnywayDialog, { type UnknownProfiles } from "./AskInviteAnywayDi
 import { SdkContextClass } from "../../../contexts/SDKContext";
 import { type UserProfilesStore } from "../../../stores/UserProfilesStore";
 import InviteProgressBody from "./InviteProgressBody.tsx";
-import { RichList } from "../../../../packages/shared-components/src/rich-list/RichList";
-import { RichItem } from "../../../../packages/shared-components/src/rich-list/RichItem";
-import { PillInput } from "../../../../packages/shared-components/src/pill-input/PillInput";
-import { Pill } from "../../../../packages/shared-components/src/pill-input/Pill";
 
 // we have a number of types defined from the Matrix spec which can't reasonably be altered here.
 /* eslint-disable camelcase */

src/components/views/dialogs/security/AccessSecretStorageDialog.tsx

@@ -12,8 +12,8 @@ import { debounce } from "lodash";
 import classNames from "classnames";
 import React, { type ChangeEvent, type FormEvent } from "react";
 import { type SecretStorage } from "matrix-js-sdk/src/matrix";
+import { Flex } from "@element-hq/web-shared-components";
 
-import { Flex } from "../../../../../packages/shared-components/src/utils/Flex";
 import { _t } from "../../../../languageHandler";
 import { EncryptionCard } from "../../settings/encryption/EncryptionCard";
 import { EncryptionCardButtons } from "../../settings/encryption/EncryptionCardButtons";

src/components/views/elements/SettingsDropdown.tsx

@@ -6,13 +6,13 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type JSX, useCallback, useId, useState } from "react";
+import { _t } from "@element-hq/web-shared-components";
 
 import SettingsStore from "../../../settings/SettingsStore";
 import { type SettingLevel } from "../../../settings/SettingLevel";
 import { SETTINGS, type StringSettingKey } from "../../../settings/Settings";
 import { useSettingValueAt } from "../../../hooks/useSettings.ts";
 import Dropdown, { type DropdownProps } from "./Dropdown.tsx";
-import { _t } from "../../../../packages/shared-components/src/utils/i18n.tsx";
 
 interface Props {
     settingKey: StringSettingKey;

src/components/views/emojipicker/EmojiPicker.tsx

@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type Dispatch } from "react";
 import { DATA_BY_CATEGORY, getEmojiFromUnicode, type Emoji as IEmoji } from "@matrix-org/emojibase-bindings";
+import { clamp } from "@element-hq/web-shared-components";
 import classNames from "classnames";
 
 import { _t } from "../../../languageHandler";
@@ -27,7 +28,6 @@ import {
     Type,
 } from "../../../accessibility/RovingTabIndex";
 import { Key } from "../../../Keyboard";
-import { clamp } from "../../../../packages/shared-components/src/utils/numbers";
 import { type ButtonEvent } from "../elements/AccessibleButton";
 
 export const CATEGORY_HEADER_HEIGHT = 20;

src/components/views/messages/LegacyCallEvent.tsx

@@ -10,6 +10,7 @@ import React, { type JSX, createRef } from "react";
 import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { CallErrorCode, CallState } from "matrix-js-sdk/src/webrtc/call";
 import classNames from "classnames";
+import { Clock } from "@element-hq/web-shared-components";
 
 import { _t } from "../../../languageHandler";
 import MemberAvatar from "../avatars/MemberAvatar";
@@ -18,7 +19,6 @@ import { LegacyCallEventGrouperEvent } from "../../structures/LegacyCallEventGro
 import AccessibleButton from "../elements/AccessibleButton";
 import InfoTooltip, { InfoTooltipKind } from "../elements/InfoTooltip";
 import { formatPreciseDuration } from "../../../DateUtils";
-import { Clock } from "../../../../packages/shared-components/src/audio/Clock";
 
 const MAX_NON_NARROW_WIDTH = (450 / 70) * 100;
 

src/components/views/messages/MAudioBody.tsx

@@ -10,6 +10,7 @@ import React, { type JSX, useEffect, useMemo } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type IContent } from "matrix-js-sdk/src/matrix";
 import { type MediaEventContent } from "matrix-js-sdk/src/types";
+import { AudioPlayerView } from "@element-hq/web-shared-components";
 
 import { type Playback } from "../../../audio/Playback";
 import InlineSpinner from "../elements/InlineSpinner";
@@ -20,7 +21,6 @@ import { PlaybackManager } from "../../../audio/PlaybackManager";
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
 import MediaProcessingError from "./shared/MediaProcessingError";
 import { AudioPlayerViewModel } from "../../../viewmodels/audio/AudioPlayerViewModel";
-import { AudioPlayerView } from "../../../../packages/shared-components/src/audio/AudioPlayerView";
 
 interface IState {
     error?: boolean;

src/components/views/right_panel/EmptyState.tsx

@@ -8,8 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type ComponentType } from "react";
 import { Text } from "@vector-im/compound-web";
-
-import { Flex } from "../../../../packages/shared-components/src/utils/Flex";
+import { Flex } from "@element-hq/web-shared-components";
 
 interface Props {
     Icon: ComponentType<React.SVGAttributes<SVGElement>>;

src/components/views/right_panel/RoomSummaryCardView.tsx

@@ -39,6 +39,7 @@ import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error"
 import ErrorSolidIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
 import ChevronDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-down";
 import { JoinRule, type Room } from "matrix-js-sdk/src/matrix";
+import { Box, Flex } from "@element-hq/web-shared-components";
 
 import BaseCard from "./BaseCard.tsx";
 import { _t } from "../../../languageHandler.tsx";
@@ -46,9 +47,7 @@ import RoomAvatar from "../avatars/RoomAvatar.tsx";
 import { E2EStatus } from "../../../utils/ShieldUtils.ts";
 import { type RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks.ts";
 import RoomName from "../elements/RoomName.tsx";
-import { Flex } from "../../../../packages/shared-components/src/utils/Flex";
 import { Linkify, topicToHtml } from "../../../HtmlUtils.tsx";
-import { Box } from "../../../../packages/shared-components/src/utils/Box";
 import { useRoomSummaryCardViewModel } from "../../viewmodels/right_panel/RoomSummaryCardViewModel.tsx";
 import { useRoomTopicViewModel } from "../../viewmodels/right_panel/RoomSummaryCardTopicViewModel.tsx";
 

src/components/views/right_panel/user_info/UserInfoHeaderVerificationView.tsx

@@ -9,10 +9,10 @@ import React from "react";
 import { type User, type RoomMember } from "matrix-js-sdk/src/matrix";
 import { Text, Button, InlineSpinner, Badge } from "@vector-im/compound-web";
 import { VerifiedIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Flex } from "@element-hq/web-shared-components";
 
 import { useUserInfoVerificationViewModel } from "../../../viewmodels/right_panel/user_info/UserInfoHeaderVerificationViewModel";
 import { type IDevice } from "../UserInfo";
-import { Flex } from "../../../../../packages/shared-components/src/utils/Flex";
 import { _t } from "../../../../languageHandler";
 
 export const UserInfoHeaderVerificationView: React.FC<{

src/components/views/right_panel/user_info/UserInfoHeaderView.tsx

@@ -8,11 +8,11 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX } from "react";
 import { type User, type RoomMember } from "matrix-js-sdk/src/matrix";
 import { Heading, Tooltip, Text } from "@vector-im/compound-web";
+import { Flex } from "@element-hq/web-shared-components";
 
 import { useUserfoHeaderViewModel } from "../../../viewmodels/right_panel/user_info/UserInfoHeaderViewModel";
 import MemberAvatar from "../../avatars/MemberAvatar";
 import { Container, type Member, type IDevice } from "../UserInfo";
-import { Flex } from "../../../../../packages/shared-components/src/utils/Flex";
 import PresenceLabel from "../../rooms/PresenceLabel";
 import CopyableText from "../../elements/CopyableText";
 import { UserInfoHeaderVerificationView } from "./UserInfoHeaderVerificationView";

src/components/views/rooms/AppsDrawer.tsx

@@ -11,6 +11,7 @@ import classNames from "classnames";
 import { Resizable, type Size } from "re-resizable";
 import { type Room } from "matrix-js-sdk/src/matrix";
 import { type IWidget } from "matrix-widget-api";
+import { clamp, percentageOf, percentageWithin } from "@element-hq/web-shared-components";
 
 import AppTile from "../elements/AppTile";
 import dis from "../../../dispatcher/dispatcher";
@@ -22,7 +23,6 @@ import ResizeHandle from "../elements/ResizeHandle";
 import Resizer, { type IConfig } from "../../../resizer/resizer";
 import PercentageDistributor from "../../../resizer/distributors/percentage";
 import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
-import { clamp, percentageOf, percentageWithin } from "../../../../packages/shared-components/src/utils/numbers";
 import UIStore from "../../../stores/UIStore";
 import { type ActionPayload } from "../../../dispatcher/payloads";
 import Spinner from "../elements/Spinner";

src/components/views/rooms/MemberList/MemberListHeaderView.tsx

@@ -9,8 +9,8 @@ import { Search, Text, Button, Tooltip, InlineSpinner } from "@vector-im/compoun
 import React from "react";
 import InviteIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add";
 import { UserAddIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Flex } from "@element-hq/web-shared-components";
 
-import { Flex } from "../../../../../packages/shared-components/src/utils/Flex";
 import { type MemberListViewState } from "../../../viewmodels/memberlist/MemberListViewModel";
 import { _t } from "../../../../languageHandler";
 

src/components/views/rooms/MemberList/MemberListView.tsx

@@ -7,8 +7,8 @@ Please see LICENSE files in the repository root for full details.
 
 import { Form } from "@vector-im/compound-web";
 import React, { type JSX, useCallback } from "react";
+import { Flex } from "@element-hq/web-shared-components";
 
-import { Flex } from "../../../../../packages/shared-components/src/utils/Flex";
 import {
     type MemberWithSeparator,
     SEPARATOR,

src/components/views/rooms/MemberList/tiles/common/InvitedIconView.tsx

@@ -8,8 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX } from "react";
 import EmailIcon from "@vector-im/compound-design-tokens/assets/web/icons/email-solid";
 import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add-solid";
-
-import { Flex } from "../../../../../../../packages/shared-components/src/utils/Flex";
+import { Flex } from "@element-hq/web-shared-components";
 
 interface Props {
     isThreePid: boolean;

src/components/views/rooms/NotificationDecoration.tsx

@@ -12,8 +12,8 @@ import NotificationOffIcon from "@vector-im/compound-design-tokens/assets/web/ic
 import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
 import EmailIcon from "@vector-im/compound-design-tokens/assets/web/icons/email-solid";
 import { UnreadCounter, Unread } from "@vector-im/compound-web";
+import { Flex } from "@element-hq/web-shared-components";
 
-import { Flex } from "../../../../packages/shared-components/src/utils/Flex";
 import { type RoomNotificationState } from "../../../stores/notifications/RoomNotificationState";
 import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
 import { NotificationStateEvents } from "../../../stores/notifications/NotificationState";

src/components/views/rooms/RoomHeader/RoomHeader.tsx

@@ -19,14 +19,13 @@ import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-
 import PublicIcon from "@vector-im/compound-design-tokens/assets/web/icons/public";
 import { JoinRule, type Room } from "matrix-js-sdk/src/matrix";
 import { type ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";
+import { Flex, Box } from "@element-hq/web-shared-components";
 
 import { useRoomName } from "../../../../hooks/useRoomName.ts";
 import { RightPanelPhases } from "../../../../stores/right-panel/RightPanelStorePhases.ts";
 import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext.tsx";
 import { useRoomMemberCount, useRoomMembers } from "../../../../hooks/useRoomMembers.ts";
 import { _t } from "../../../../languageHandler.tsx";
-import { Flex } from "../../../../../packages/shared-components/src/utils/Flex";
-import { Box } from "../../../../../packages/shared-components/src/utils/Box";
 import { getPlatformCallTypeProps, useRoomCall } from "../../../../hooks/room/useRoomCall.tsx";
 import { useRoomThreadNotifications } from "../../../../hooks/room/useRoomThreadNotifications.ts";
 import { useGlobalNotificationState } from "../../../../hooks/useGlobalNotificationState.ts";

src/components/views/rooms/RoomListPanel/EmptyRoomList.tsx

@@ -9,9 +9,9 @@ import React, { type JSX, type PropsWithChildren } from "react";
 import { Button } from "@vector-im/compound-web";
 import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat";
 import RoomIcon from "@vector-im/compound-design-tokens/assets/web/icons/room";
+import { Flex } from "@element-hq/web-shared-components";
 
 import type { RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
-import { Flex } from "../../../../../packages/shared-components/src/utils/Flex";
 import { _t } from "../../../../languageHandler";
 import { FilterKey } from "../../../../stores/room-list-v3/skip-list/filters";
 import { type PrimaryFilter } from "../../../viewmodels/roomlist/useFilteredRooms";

src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx

@@ -15,9 +15,9 @@ import PreferencesIcon from "@vector-im/compound-design-tokens/assets/web/icons/
 import SettingsIcon from "@vector-im/compound-design-tokens/assets/web/icons/settings";
 import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call";
 import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat";
+import { Flex } from "@element-hq/web-shared-components";
 
 import { _t } from "../../../../languageHandler";
-import { Flex } from "../../../../../packages/shared-components/src/utils/Flex";
 import {
     type RoomListHeaderViewState,
     useRoomListHeaderViewModel,

src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx

@@ -19,9 +19,9 @@ import NotificationIcon from "@vector-im/compound-design-tokens/assets/web/icons
 import NotificationOffIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications-off-solid";
 import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
 import { type Room } from "matrix-js-sdk/src/matrix";
+import { Flex } from "@element-hq/web-shared-components";
 
 import { _t } from "../../../../languageHandler";
-import { Flex } from "../../../../../packages/shared-components/src/utils/Flex";
 import {
     type RoomListItemMenuViewState,
     useRoomListItemMenuViewModel,

src/components/views/rooms/RoomListPanel/RoomListItemView.tsx

@@ -8,9 +8,9 @@
 import React, { type JSX, memo, useCallback, useEffect, useRef, useState } from "react";
 import { type Room } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
+import { Flex } from "@element-hq/web-shared-components";
 
 import { useRoomListItemViewModel } from "../../../viewmodels/roomlist/RoomListItemViewModel";
-import { Flex } from "../../../../../packages/shared-components/src/utils/Flex";
 import { RoomListItemMenuView } from "./RoomListItemMenuView";
 import { NotificationDecoration } from "../NotificationDecoration";
 import { RoomAvatarView } from "../../avatars/RoomAvatarView";

src/components/views/rooms/RoomListPanel/RoomListPanel.tsx

@@ -6,13 +6,13 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { useState, useCallback } from "react";
+import { Flex } from "@element-hq/web-shared-components";
 
 import { shouldShowComponent } from "../../../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../../../settings/UIFeature";
 import { RoomListSearch } from "./RoomListSearch";
 import { RoomListHeaderView } from "./RoomListHeaderView";
 import { RoomListView } from "./RoomListView";
-import { Flex } from "../../../../../packages/shared-components/src/utils/Flex";
 import { _t } from "../../../../languageHandler";
 import { getKeyBindingsManager } from "../../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../../accessibility/KeyboardShortcuts";

src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx

@@ -8,9 +8,9 @@
 import React, { type JSX, useEffect, useId, useRef, useState, type RefObject } from "react";
 import { ChatFilter, IconButton } from "@vector-im/compound-web";
 import ChevronDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-down";
+import { Flex } from "@element-hq/web-shared-components";
 
 import type { RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
-import { Flex } from "../../../../../packages/shared-components/src/utils/Flex";
 import { _t } from "../../../../languageHandler";
 
 interface RoomListPrimaryFiltersProps {

src/components/views/rooms/RoomListPanel/RoomListSearch.tsx

@@ -10,6 +10,7 @@ import { Button } from "@vector-im/compound-web";
 import ExploreIcon from "@vector-im/compound-design-tokens/assets/web/icons/explore";
 import SearchIcon from "@vector-im/compound-design-tokens/assets/web/icons/search";
 import DialPadIcon from "@vector-im/compound-design-tokens/assets/web/icons/dial-pad";
+import { Flex } from "@element-hq/web-shared-components";
 
 import { IS_MAC, Key } from "../../../../Keyboard";
 import { _t } from "../../../../languageHandler";
@@ -20,7 +21,6 @@ import { MetaSpace } from "../../../../stores/spaces";
 import { Action } from "../../../../dispatcher/actions";
 import PosthogTrackers from "../../../../PosthogTrackers";
 import defaultDispatcher from "../../../../dispatcher/dispatcher";
-import { Flex } from "../../../../../packages/shared-components/src/utils/Flex";
 import { useTypedEventEmitterState } from "../../../../hooks/useEventEmitter";
 import LegacyCallHandler, { LegacyCallHandlerEvent } from "../../../../LegacyCallHandler";
 

src/components/views/rooms/ThirdPartyMemberInfo.tsx

@@ -10,6 +10,7 @@ import React, { type JSX } from "react";
 import { EventType, type MatrixEvent, type Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 import { Button, Text } from "@vector-im/compound-web";
+import { Flex } from "@element-hq/web-shared-components";
 
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { _t } from "../../../languageHandler";
@@ -19,7 +20,6 @@ import { isValid3pidInvite } from "../../../RoomInvite";
 import { Action } from "../../../dispatcher/actions";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import BaseCard from "../right_panel/BaseCard";
-import { Flex } from "../../../../packages/shared-components/src/utils/Flex";
 
 interface IProps {
     event: MatrixEvent;

src/components/views/settings/UserProfileSettings.tsx

@@ -11,6 +11,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { EditInPlace, Alert, ErrorMessage } from "@vector-im/compound-web";
 import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out";
 import SignOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/sign-out";
+import { Flex } from "@element-hq/web-shared-components";
 
 import { _t } from "../../../languageHandler";
 import { OwnProfileStore } from "../../../stores/OwnProfileStore";
@@ -26,7 +27,6 @@ import AccessibleButton from "../elements/AccessibleButton";
 import LogoutDialog, { shouldShowLogoutDialog } from "../dialogs/LogoutDialog";
 import Modal from "../../../Modal";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import { Flex } from "../../../../packages/shared-components/src/utils/Flex";
 
 const SpinnerToast: React.FC<{ children?: ReactNode }> = ({ children }) => (
     <>

src/components/views/settings/encryption/EncryptionCardEmphasisedContent.tsx

@@ -6,8 +6,7 @@
  */
 
 import React, { type JSX, type PropsWithChildren } from "react";
-
-import { Flex } from "../../../../../packages/shared-components/src/utils/Flex";
+import { Flex } from "@element-hq/web-shared-components";
 
 /**
  * A component for emphasised text within an {@link EncryptionCard}

src/events/EventTileFactory.tsx

@@ -18,6 +18,7 @@ import {
     M_POLL_START,
 } from "matrix-js-sdk/src/matrix";
 import { type Optional } from "matrix-events-sdk";
+import { TextualEventView } from "@element-hq/web-shared-components";
 
 import SettingsStore from "../settings/SettingsStore";
 import type LegacyCallEventGrouper from "../components/structures/LegacyCallEventGrouper";
@@ -43,7 +44,6 @@ import { shouldDisplayAsBeaconTile } from "../utils/beacon/timeline";
 import { type IBodyProps } from "../components/views/messages/IBodyProps";
 import { ModuleApi } from "../modules/Api";
 import { TextualEventViewModel } from "../viewmodels/event-tiles/TextualEventViewModel";
-import { TextualEventView } from "../../packages/shared-components/src/event-tiles/TextualEventView";
 import { ElementCallEventType } from "../call-types";
 
 // Subset of EventTile's IProps plus some mixins

src/languageHandler.tsx

@@ -5,19 +5,11 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import counterpart from "counterpart";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type Optional } from "matrix-events-sdk";
 import { MapWithDefault } from "matrix-js-sdk/src/utils";
 import { type TranslationStringsObject } from "@matrix-org/react-sdk-module-api";
 import _ from "lodash";
-
-import SettingsStore from "./settings/SettingsStore";
-import PlatformPeg from "./PlatformPeg";
-import { SettingLevel } from "./settings/SettingLevel";
-import { retry } from "./utils/promise";
-import SdkConfig from "./SdkConfig";
-import { ModuleRunner } from "./modules/ModuleRunner";
 import {
     _t,
     normalizeLanguageKey,
@@ -25,7 +17,18 @@ import {
     type IVariables,
     KEY_SEPARATOR,
     getLangsJson,
-} from "../packages/shared-components/src/utils/i18n";
+    registerTranslations,
+    setLocale,
+    getLocale,
+    setMissingEntryGenerator as setMissingEntryGeneratorSharedComponents,
+} from "@element-hq/web-shared-components";
+
+import SettingsStore from "./settings/SettingsStore";
+import PlatformPeg from "./PlatformPeg";
+import { SettingLevel } from "./settings/SettingLevel";
+import { retry } from "./utils/promise";
+import SdkConfig from "./SdkConfig";
+import { ModuleRunner } from "./modules/ModuleRunner";
 
 export {
     _t,
@@ -40,7 +43,7 @@ export {
     normalizeLanguageKey,
     getNormalizedLanguageKeys,
     substitute,
-} from "../packages/shared-components/src/utils/i18n";
+} from "@element-hq/web-shared-components";
 
 const i18nFolder = "i18n/";
 
@@ -100,7 +103,7 @@ export function getUserLanguage(): string {
 // Currently only used in unit tests to avoid having to load
 // the translations in element-web
 export function setMissingEntryGenerator(f: (value: string) => void): void {
-    counterpart.setMissingEntryGenerator(f);
+    setMissingEntryGeneratorSharedComponents(f);
 }
 
 export async function setLanguage(...preferredLangs: string[]): Promise<void> {
@@ -116,8 +119,8 @@ export async function setLanguage(...preferredLangs: string[]): Promise<void> {
 
     const languageData = await getLanguageRetry(i18nFolder + availableLanguages[chosenLanguage]);
 
-    counterpart.registerTranslations(chosenLanguage, languageData);
-    counterpart.setLocale(chosenLanguage);
+    registerTranslations(chosenLanguage, languageData);
+    setLocale(chosenLanguage);
 
     await SettingsStore.setValue("language", null, SettingLevel.DEVICE, chosenLanguage);
     // Adds a lot of noise to test runs, so disable logging there.
@@ -128,7 +131,7 @@ export async function setLanguage(...preferredLangs: string[]): Promise<void> {
     // Set 'en' as fallback language:
     if (chosenLanguage !== "en") {
         const fallbackLanguageData = await getLanguageRetry(i18nFolder + availableLanguages["en"]);
-        counterpart.registerTranslations("en", fallbackLanguageData);
+        registerTranslations("en", fallbackLanguageData);
     }
 
     await registerCustomTranslations();
@@ -166,7 +169,7 @@ export function getLanguageFromBrowser(): string {
 }
 
 export function getCurrentLanguage(): string {
-    return counterpart.getLocale();
+    return getLocale();
 }
 
 /**
@@ -258,7 +261,7 @@ function doRegisterTranslations(customTranslations: TranslationStringsObject): v
 
     // Finally, tell counterpart about our translations
     for (const [lang, translations] of langs) {
-        counterpart.registerTranslations(lang, translations);
+        registerTranslations(lang, translations);
     }
 }
 

src/modules/I18nApi.ts

@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type I18nApi as II18nApi, type Variables, type Translations } from "@element-hq/element-web-module-api";
-import counterpart from "counterpart";
+import { registerTranslations } from "@element-hq/web-shared-components";
 
 import { _t, getCurrentLanguage, type TranslationKey } from "../languageHandler.tsx";
 
@@ -32,7 +32,7 @@ export class I18nApi implements II18nApi {
 
         // Finally, tell counterpart about our translations
         for (const lang in langs) {
-            counterpart.registerTranslations(lang, langs[lang]);
+            registerTranslations(lang, langs[lang]);
         }
     }
 

src/settings/Settings.tsx

@@ -9,10 +9,10 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type ReactNode } from "react";
 import { STABLE_MSC4133_EXTENDED_PROFILES, UNSTABLE_MSC4133_EXTENDED_PROFILES } from "matrix-js-sdk/src/matrix";
+// Import these directly from shared-components to avoid circular deps
+import { _t, _td, type TranslationKey } from "@element-hq/web-shared-components";
 
 import { type MediaPreviewConfig } from "../@types/media_preview.ts";
-// Import i18n.tsx instead of languageHandler to avoid circular deps
-import { _t, _td, type TranslationKey } from "../../packages/shared-components/src/utils/i18n";
 import DeviceIsolationModeController from "./controllers/DeviceIsolationModeController.ts";
 import {
     NotificationBodyEnabledController,

src/stores/widgets/WidgetLayoutStore.ts

@@ -10,11 +10,11 @@ import { type Room, RoomStateEvent, type MatrixEvent } from "matrix-js-sdk/src/m
 import { type Optional } from "matrix-events-sdk";
 import { MapWithDefault, recursiveMapToObject } from "matrix-js-sdk/src/utils";
 import { type IWidget } from "matrix-widget-api";
+import { clamp, defaultNumber, sum } from "@element-hq/web-shared-components";
 
 import SettingsStore from "../../settings/SettingsStore";
 import WidgetStore, { type IApp } from "../WidgetStore";
 import { WidgetType } from "../../widgets/WidgetType";
-import { clamp, defaultNumber, sum } from "../../../packages/shared-components/src/utils/numbers";
 import defaultDispatcher from "../../dispatcher/dispatcher";
 import { ReadyWatchingStore } from "../ReadyWatchingStore";
 import { SettingLevel } from "../../settings/SettingLevel";

src/toasts/IncomingCallToast.tsx

@@ -14,6 +14,7 @@ import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check"
 import CrossIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type IRTCNotificationContent } from "matrix-js-sdk/src/matrixrtc";
+import { AvatarWithDetails } from "@element-hq/web-shared-components";
 
 import { _t } from "../languageHandler";
 import RoomAvatar from "../components/views/avatars/RoomAvatar";
@@ -35,7 +36,6 @@ import { type Call, CallEvent } from "../models/Call";
 import LegacyCallHandler, { AudioID } from "../LegacyCallHandler";
 import { useEventEmitter } from "../hooks/useEventEmitter";
 import { CallStore, CallStoreEvent } from "../stores/CallStore";
-import { AvatarWithDetails } from "../../packages/shared-components/src/avatar/AvatarWithDetails";
 
 /**
  * Get the key for the incoming call toast. A combination of the event ID and room ID.

src/utils/FormattingUtils.ts

@@ -13,7 +13,7 @@ import { useIdColorHash } from "@vector-im/compound-web";
 import { _t, getCurrentLanguage, getUserLanguage } from "../languageHandler";
 import { jsxJoin } from "./ReactUtils";
 
-export { formatBytes } from "../../packages/shared-components/src/utils/FormattingUtils";
+export { formatBytes } from "@element-hq/web-shared-components";
 
 const locale = getCurrentLanguage();
 

src/utils/arrays.ts

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { percentageOf, percentageWithin } from "../../packages/shared-components/src/utils/numbers";
+import { percentageOf, percentageWithin } from "@element-hq/web-shared-components";
 
 /**
  * Quickly resample an array to have less/more data points. If an input which is larger

src/vector/index.ts

@@ -17,6 +17,9 @@ import { shouldPolyfill as shouldPolyFillIntlSegmenter } from "@formatjs/intl-se
 import { parseQsFromFragment } from "./url_utils";
 import "./modernizr";
 
+// Import shared components CSS
+import "@element-hq/web-shared-components/dist/element-web-shared-components.css";
+
 // Require common CSS here; this will make webpack process it into bundle.css.
 // Our own CSS (which is themed) is imported via separate webpack entry points
 // in webpack.config.js

src/viewmodels/audio/AudioPlayerViewModel.ts

@@ -7,17 +7,17 @@
 
 import { type ChangeEvent, type KeyboardEvent } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
-
 import {
+    percentageOf,
+    BaseViewModel,
     type AudioPlayerViewSnapshot,
     type AudioPlayerViewModel as AudioPlayerViewModelInterface,
-} from "../../../packages/shared-components/src/audio/AudioPlayerView";
+} from "@element-hq/web-shared-components";
+
 import { type Playback } from "../../audio/Playback";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
-import { percentageOf } from "../../../packages/shared-components/src/utils/numbers";
 import { getKeyBindingsManager } from "../../KeyBindingsManager";
 import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
-import { BaseViewModel } from "../../../packages/shared-components/src/viewmodel";
 
 /**
  * The number of seconds to skip when the user presses the left or right arrow keys.

src/viewmodels/event-tiles/TextualEventViewModel.ts

@@ -6,12 +6,11 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { MatrixEventEvent } from "matrix-js-sdk/src/matrix";
+import { type TextualEventViewSnapshot, BaseViewModel } from "@element-hq/web-shared-components";
 
 import { type EventTileTypeProps } from "../../events/EventTileFactory";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 import { textForEvent } from "../../TextForEvent";
-import { type TextualEventViewSnapshot } from "../../../packages/shared-components/src/event-tiles/TextualEventView/TextualEventView";
-import { BaseViewModel } from "../../../packages/shared-components/src/viewmodel";
 
 export class TextualEventViewModel extends BaseViewModel<TextualEventViewSnapshot, EventTileTypeProps> {
     public constructor(props: EventTileTypeProps) {