Shared Components Restructure, Cherry Picked | Core (#32914)

* refactor(shared-components): move core primitives under core

* refactor(shared-components): restore i18n strings path

* fix(shared-components): repair typedoc story imports

* fix(shared-components): align newer imports with core paths

* test(shared-components): add core visual baselines

* refactor(shared-components): move virtualized list to core root

packages/shared-components/.storybook/preview.tsx

@@ -7,7 +7,7 @@ import "@fontsource/inter/700.css";
 import "./compound.css";
 import "./preview.css";
 import React, { useLayoutEffect } from "react";
-import { setLanguage } from "../src/utils/i18n";
+import { setLanguage } from "../src/core/i18n/i18n";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { StoryContext } from "storybook/internal/csf";
 import { I18nApi, I18nContext } from "../src";

packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.stories.tsx

@@ -10,7 +10,7 @@ import { fn } from "storybook/test";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { AudioPlayerView, type AudioPlayerViewActions, type AudioPlayerViewSnapshot } from "./AudioPlayerView";
-import { useMockedViewModel } from "../../viewmodel";
+import { useMockedViewModel } from "../../core/viewmodel";
 import { withViewDocs } from "../../../.storybook/withViewDocs";
 
 type AudioPlayerProps = AudioPlayerViewSnapshot & AudioPlayerViewActions;

packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.test.tsx

@@ -14,8 +14,8 @@ import { describe, it, vi, afterEach, expect } from "vitest";
 
 import * as stories from "./AudioPlayerView.stories.tsx";
 import { AudioPlayerView, type AudioPlayerViewActions, type AudioPlayerViewSnapshot } from "./AudioPlayerView";
-import { MockViewModel } from "../../viewmodel/MockViewModel.ts";
-import { I18nContext } from "../../utils/i18nContext.ts";
+import { MockViewModel } from "../../core/viewmodel/MockViewModel.ts";
+import { I18nContext } from "../../core/i18n/i18nContext.ts";
 import { I18nApi } from "../../index.ts";
 
 const { Default, NoMediaName, NoSize, HasError } = composeStories(stories);

packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.tsx

@@ -7,14 +7,14 @@
 
 import React, { type ChangeEventHandler, type JSX, type KeyboardEventHandler, type MouseEventHandler } from "react";
 
-import { type ViewModel, useViewModel } from "../../viewmodel";
+import { type ViewModel, useViewModel } from "../../core/viewmodel";
 import { MediaBody } from "../../message-body/MediaBody";
-import { Flex } from "../../utils/Flex";
+import { Flex } from "../../core/utils/Flex";
 import styles from "./AudioPlayerView.module.css";
 import { PlayPauseButton } from "../PlayPauseButton";
 import { type PlaybackState } from "../playback";
-import { useI18n } from "../../utils/i18nContext";
-import { formatBytes } from "../../utils/FormattingUtils";
+import { useI18n } from "../../core/i18n/i18nContext";
+import { formatBytes } from "../../core/utils/FormattingUtils";
 import { Clock } from "../Clock";
 import { SeekBar } from "../SeekBar";
 

packages/shared-components/src/audio/Clock/Clock.tsx

@@ -9,7 +9,7 @@ import React, { type JSX, type HTMLProps, useMemo } from "react";
 import { Temporal } from "temporal-polyfill";
 import classNames from "classnames";
 
-import { formatSeconds } from "../../utils/DateUtils";
+import { formatSeconds } from "../../core/utils/DateUtils";
 
 export interface Props extends Pick<HTMLProps<HTMLSpanElement>, "aria-live" | "role" | "className"> {
     /**

packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.tsx

@@ -11,7 +11,7 @@ import Play from "@vector-im/compound-design-tokens/assets/web/icons/play-solid"
 import Pause from "@vector-im/compound-design-tokens/assets/web/icons/pause-solid";
 
 import styles from "./PlayPauseButton.module.css";
-import { useI18n } from "../../utils/i18nContext";
+import { useI18n } from "../../core/i18n/i18nContext";
 
 export interface PlayPauseButtonProps extends HTMLAttributes<HTMLButtonElement> {
     /**

packages/shared-components/src/audio/SeekBar/SeekBar.tsx

@@ -10,7 +10,7 @@ import { throttle } from "lodash";
 import classNames from "classnames";
 
 import style from "./SeekBar.module.css";
-import { useI18n } from "../../utils/i18nContext";
+import { useI18n } from "../../core/i18n/i18nContext";
 
 export interface SeekBarProps extends React.InputHTMLAttributes<HTMLInputElement> {
     /**

packages/shared-components/src/composer/Banner/Banner.tsx

@@ -20,7 +20,7 @@ import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error"
 import InfoIcon from "@vector-im/compound-design-tokens/assets/web/icons/info";
 
 import styles from "./Banner.module.css";
-import { _t } from "../../utils/i18n";
+import { _t } from "../../core/i18n/i18n";
 
 interface BannerProps {
     /**

packages/shared-components/src/core/i18n/I18nApi.ts

@@ -7,7 +7,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 { humanizeTime } from "./humanize";
+import { humanizeTime } from "../utils/humanize";
 import { _t, getLocale, registerTranslations } from "./i18n";
 
 export class I18nApi implements II18nApi {

packages/shared-components/src/core/pill-input/Pill/Pill.tsx

@@ -12,7 +12,7 @@ import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close"
 
 import { Flex } from "../../utils/Flex";
 import styles from "./Pill.module.css";
-import { useI18n } from "../../utils/i18nContext";
+import { useI18n } from "../../i18n/i18nContext";
 
 export interface PillProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
     /**

packages/shared-components/src/core/rich-list/RichItem/RichItem.tsx

@@ -10,7 +10,7 @@ import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check"
 
 import styles from "./RichItem.module.css";
 import { Flex } from "../../utils/Flex";
-import { useI18n } from "../../utils/i18nContext";
+import { useI18n } from "../../i18n/i18nContext";
 
 export interface RichItemProps extends HTMLAttributes<HTMLLIElement> {
     /**

packages/shared-components/src/core/utils/FormattingUtils.stories.tsx

@@ -9,8 +9,8 @@ import React from "react";
 import { Markdown } from "@storybook/addon-docs/blocks";
 
 import type { Meta } from "@storybook/react-vite";
-import formatBytesDoc from "../../typedoc/functions/formatBytes.md?raw";
-import formatSecondsDoc from "../../typedoc/functions/formatSeconds.md?raw";
+import formatBytesDoc from "../../../typedoc/functions/formatBytes.md?raw";
+import formatSecondsDoc from "../../../typedoc/functions/formatSeconds.md?raw";
 
 const meta = {
     title: "utils/FormattingUtils",

packages/shared-components/src/core/utils/humanize.stories.tsx

@@ -9,7 +9,7 @@ import React from "react";
 import { Markdown } from "@storybook/addon-docs/blocks";
 
 import type { Meta } from "@storybook/react-vite";
-import humanizeTimeDoc from "../../typedoc/functions/humanizeTime.md?raw";
+import humanizeTimeDoc from "../../../typedoc/functions/humanizeTime.md?raw";
 
 const meta = {
     title: "utils/humanize",

packages/shared-components/src/core/utils/humanize.ts

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { type I18nApi } from "@element-hq/element-web-module-api";
 
-import { _t as _tFromModule } from "./i18n";
+import { _t as _tFromModule } from "../i18n/i18n";
 
 // These are the constants we use for when to break the text
 const MILLISECONDS_RECENT = 15000;

packages/shared-components/src/core/utils/linkify.stories.tsx

@@ -9,13 +9,13 @@ import React from "react";
 import { Markdown } from "@storybook/addon-docs/blocks";
 
 import type { Meta } from "@storybook/react-vite";
-import LinkifyMatrixOpaqueIdType from "../../typedoc/enumerations/LinkifyMatrixOpaqueIdType.md?raw";
-import findLinksInString from "../../typedoc/functions/findLinksInString.md?raw";
-import isLinkable from "../../typedoc/functions/isLinkable.md?raw";
-import linkifyHtml from "../../typedoc/functions/linkifyHtml.md?raw";
-import linkifyString from "../../typedoc/functions/linkifyString.md?raw";
-import generateLinkedTextOptions from "../../typedoc/functions/generateLinkedTextOptions.md?raw";
-import LinkedTextOptions from "../../typedoc/interfaces/LinkedTextOptions.md?raw";
+import LinkifyMatrixOpaqueIdType from "../../../typedoc/enumerations/LinkifyMatrixOpaqueIdType.md?raw";
+import findLinksInString from "../../../typedoc/functions/findLinksInString.md?raw";
+import isLinkable from "../../../typedoc/functions/isLinkable.md?raw";
+import linkifyHtml from "../../../typedoc/functions/linkifyHtml.md?raw";
+import linkifyString from "../../../typedoc/functions/linkifyString.md?raw";
+import generateLinkedTextOptions from "../../../typedoc/functions/generateLinkedTextOptions.md?raw";
+import LinkedTextOptions from "../../../typedoc/interfaces/LinkedTextOptions.md?raw";
 
 const meta = {
     title: "utils/linkify",

packages/shared-components/src/core/utils/numbers.stories.tsx

@@ -9,11 +9,11 @@ import React from "react";
 import { Markdown } from "@storybook/addon-docs/blocks";
 
 import type { Meta } from "@storybook/react-vite";
-import clampDoc from "../../typedoc/functions/clamp.md?raw";
-import defaultNumberDoc from "../../typedoc/functions/defaultNumber.md?raw";
-import percentageOfDoc from "../../typedoc/functions/percentageOf.md?raw";
-import percentageWithinDoc from "../../typedoc/functions/percentageWithin.md?raw";
-import sumDoc from "../../typedoc/functions/sum.md?raw";
+import clampDoc from "../../../typedoc/functions/clamp.md?raw";
+import defaultNumberDoc from "../../../typedoc/functions/defaultNumber.md?raw";
+import percentageOfDoc from "../../../typedoc/functions/percentageOf.md?raw";
+import percentageWithinDoc from "../../../typedoc/functions/percentageWithin.md?raw";
+import sumDoc from "../../../typedoc/functions/sum.md?raw";
 
 const meta = {
     title: "utils/numbers",