Build the published shared components (#30986)

* Move shared components to a packages/ directory

so they can be publish more sensibly

* Iterate towards split out shared-components module

 * Move shared component source into src/ subdir
 * Fix up imports
 * Include shared components in babel-ing (again)

* Remove now unused dependencies

* Update import in storybook preview

* ...except of course they aren't unused

if we import the shared components by source

* Ignore shared components deps

* Add shared-components to i18n paths

and upgrade web-i18n to version that supports doing so

* Move storybook stuff to shared-components

* Seems we don't need this anymore...

* Remove unused deps

and remove storybook plugin from eslint

* Presumably working-directory is only valid on run steps

* Ignore dep & run prettier

* Prettier on knips.ts

* Hopefully run in right dir

* Remember how to software write

* Okay... how about THIS way?

* Oh right, they were git ignored. Sigh.

* Add concurrently

* Ignore in knip

* Better?

* Paaaaaaaackageeeeeeees

* More packages

* Move playwright snapshots

* Still need a custom snapshots dir

* Build shared components in their separate package

Port https://github.com/element-hq/element-web/pull/30963
to https://github.com/element-hq/element-web/pull/30962

* Add prepare script

* try making it a postinstall

* no, this probably does want to be prepare

postinstall doesn't really make sense since you would not have the
dev dependencies at that point

* Add workflow to publish shared components

* Put in the namespace

* Add eslint back

* Oh, now knip sees them

* Fix another import

* Don't lint shared-components with everything else

Okay, eslint & tsconfig are tied too closely for this to work and
running tsc on the shared components will need its deps installing

* Maybe lint shared components

please?

* Not quite

* Fix name, add main, move patch-package to dependencies

Although the only patched package is a dev dependency, but the postinstall
will fail if patch-package isn't there.

* Switch to npm for publishing

Mostly because knip seems to this that yarn publish doesn't exist,
although actually it seems super confused about versioning so let's
just skip it.

* Also hopefully enable provenance

because why not

* Maybe get exports right

* Add richlist

* Yeah, of course the keys are ordered

why would the keys not be ordered

* Build web resources first

Otherwise yarn prepare won't work

* Fix exports

and add web-i18n as a dep

* prettier

* build res for static analysis

* more build:res

* ViewModel is only an interface

so export type

* Prettier

* Bump to 5

as I'll do at least one test with the publish action

.github/workflows/shared-component-publish.yaml

@@ -0,0 +1,49 @@
+name: Publish shared component npm package
+on:
+    workflow_dispatch:
+        inputs:
+            version-bump:
+                description: The scale of the version bump required for semver compatibility
+                required: true
+                default: patch
+                type: choice
+                options:
+                    - patch
+                    - minor
+                    - major
+concurrency: release
+jobs:
+    publish:
+        name: "Release & Publish"
+        runs-on: ubuntu-latest
+        permissions:
+            contents: write
+            id-token: write
+
+        steps:
+            - name: 🧮 Checkout code
+              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+
+            - name: 🔧 Set up node environment
+              uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+              with:
+                  cache: "yarn"
+                  node-version-file: ".node-version"
+
+            - name: 🛠️ Setup
+              # When running `install` it also calls the `prepare` step which generates
+              # a build
+              run: yarn --cwd packages/shared-components install --pure-lockfile
+
+            - name: 👊 Bump version
+              run: |
+                  cd packages/shared-components
+                  yarn version --no-git-tag-version --${{ github.event.inputs.version-bump }}
+                  git config --global user.name 'ElementRobot'
+                  git config --global user.email 'releases@riot.im'
+                  git commit -am "Shared components: ${{ github.event.inputs.version-bump }} version bump"
+                  git push
+
+            - name: 🚀 Publish to npm
+              working-directory: packages/shared-components
+              run: npm publish --access public --provenance

.github/workflows/shared-component-visual-tests.yaml

@@ -34,6 +34,10 @@ jobs:
             - name: Install element web dependencies
               run: yarn install --frozen-lockfile
 
+            - name: Build Element Web resources
+              # Needed to prepare language files
+              run: "yarn build:res"
+
             - name: Install dependencies
               working-directory: packages/shared-components
               run: yarn install --frozen-lockfile
@@ -55,10 +59,6 @@ jobs:
               if: steps.playwright-cache.outputs.cache-hit != 'true'
               run: "yarn playwright install --with-deps --only-shell"
 
-            - name: Build Element Web resources
-              # Needed to prepare language files
-              run: "yarn build:res"
-
             - name: Build storybook dependencies
               # When the first test is ran, it will fail because the dependencies are not yet built.
               # This step is to ensure that the dependencies are built before running the tests.

.github/workflows/static_analysis.yaml

@@ -35,6 +35,10 @@ jobs:
             - name: Typecheck
               run: "yarn run lint:types"
 
+            - name: Build Element Web resources
+              # Needed to prepare language files for shared components
+              run: "yarn build:res"
+
             - name: Install Shared Component Dependencies
               run: "yarn --cwd packages/shared-components install"
 
@@ -87,6 +91,10 @@ jobs:
             - name: Run Linter
               run: "yarn run lint:js"
 
+            - name: Build Element Web resources
+              # Needed to prepare language files for shared components
+              run: "yarn build:res"
+
             - name: Install Shared Component Deps
               run: "yarn --cwd packages/shared-components install --frozen-lockfile"