Initial structure for shared component views (#30216)

* Very first pass at shared component views Turn the trivial TextualEvent into a shared component with a separate view model for element web. Args to view model will probably change to be more specific and VM typer needs abstracting out into an interface, but should give the general idea. * Remove old TextualEvent * Pass showHiddenEvents Because we used it anyway, we just cheated by getting it from the context * Factor out common view model stuff * Move ViewModel interface into the shared components * Add tiny wrapper hook * Move showHiddenEvents into props fully * Fill in stories / test * chore: setup storybook cherry pick edc5e8705674b8708d986910b02b5d2545777fb3 from florianduros/storybook * Add TextualEvent component to storybook * Add mock view model & snapshot * Remove old style stories entry * Change import * Change import * Prettier * Add paxckage patch to @types/mdx for React 19 compat * Pass getSnapshot as getServerSnapshot too * Maybe make sonar regognise tests as tests * Typo * Use storybook reacvt-vite There's no reason to use the react-webpack plugin just because our app is stuck on webpack, it just means we have vite as a dependency too. * Change here too * Workaround for incomatible types in rollup https://github.com/rollup/rollup/issues/5199 * Remove webpack styling addon Not necessary now we're using vite * Hopefully do screenshot testing... * need newer node * quote issues * Make it an npm script * colons * use right port * Install playwright browsers * Try without the if * Oh right, we need the headless shell * Pass flag to store received screenshots and upload diffs too * Update snapshot from received * Include platform in snapshot / received dir because font rendering differs between platforms * Suffix snapshots with platform instead like we do for playwright * Remove unnecessary env vars and better name * Add some comments * Prettier * Fix yarn.lock * Memoise vm creation Co-authored-by: Florian Duros <florianduros@element.io> * Add implements Co-authored-by: Florian Duros <florianduros@element.io> * Fix listener interface * Add implements Co-authored-by: Florian Duros <florianduros@element.io> * Fix types * Fix more types * Revert useMemo as this isn't a hook * Unused import * Add missing playwright step * Add return type annotation * Change to add / remove subscription callback * Change to 'add' rather than 'subs.subscribe' * Add cache specifier for only shell playwright browsers * Add copyright headers --------- Co-authored-by: Florian Duros <florian.duros@ormaz.fr> Co-authored-by: Florian Duros <florianduros@element.io>
2025-07-14 14:13:02 +01:00
parent 361d36272e
commit 4bbcb8bb5d
32 changed files with 2293 additions and 175 deletions
--- a/patches/@types+mdx+2.0.13.patch
+++ b/patches/@types+mdx+2.0.13.patch
@@ -0,0 +1,46 @@
+diff --git a/node_modules/@types/mdx/types.d.ts b/node_modules/@types/mdx/types.d.ts
+index 498bb69..4e89216 100644
+--- a/node_modules/@types/mdx/types.d.ts
+++ b/node_modules/@types/mdx/types.d.ts
+@@ -5,7 +5,7 @@
+  */
+ // @ts-ignore JSX runtimes may optionally define JSX.ElementType. The MDX types need to work regardless whether this is
+ // defined or not.
+-type ElementType = any extends JSX.ElementType ? never : JSX.ElementType;
+type ElementType = any extends JSX.ElementType ? never : React.JSX.ElementType;
+ 
+ /**
+  * This matches any function component types that ar part of `ElementType`.
+@@ -20,12 +20,12 @@ type ClassElementType = Extract<ElementType, new(props: Record<string, any>) =>
+ /**
+  * A valid JSX string component.
+  */
+-type StringComponent = Extract<keyof JSX.IntrinsicElements, ElementType extends never ? string : ElementType>;
+type StringComponent = Extract<keyof React.JSX.IntrinsicElements, ElementType extends never ? string : ElementType>;
+ 
+ /**
+  * A JSX element returned by MDX content.
+  */
+-export type Element = JSX.Element;
+export type Element = React.JSX.Element;
+ 
+ /**
+  * A valid JSX function component.
+@@ -44,7 +44,7 @@ type FunctionComponent<Props> = ElementType extends never
+  */
+ type ClassComponent<Props> = ElementType extends never
+     // If JSX.ElementType isn’t defined, the valid return type is a constructor that returns JSX.ElementClass
+-    ? new(props: Props) => JSX.ElementClass
+    ? new(props: Props) => React.JSX.ElementClass
+     : ClassElementType extends never
+     // If JSX.ElementType is defined, but doesn’t allow constructors, function components are disallowed.
+         ? never
+@@ -70,7 +70,7 @@ interface NestedMDXComponents {
+ export type MDXComponents =
+     & NestedMDXComponents
+     & {
+-        [Key in StringComponent]?: Component<JSX.IntrinsicElements[Key]>;
+        [Key in StringComponent]?: Component<React.JSX.IntrinsicElements[Key]>;
+     }
+     & {
+         /**