Absorb the matrix-react-sdk repository (#28192)

Co-authored-by: github-merge-queue <118344674+github-merge-queue@users.noreply.github.com>
Co-authored-by: github-merge-queue <github-merge-queue@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
Co-authored-by: Kim Brose <kim.brose@nordeck.net>
Co-authored-by: Florian Duros <florianduros@element.io>
Co-authored-by: R Midhun Suresh <hi@midhun.dev>
Co-authored-by: dbkr <986903+dbkr@users.noreply.github.com>
Co-authored-by: ElementRobot <releases@riot.im>
Co-authored-by: dbkr <dbkr@users.noreply.github.com>
Co-authored-by: David Baker <dbkr@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
Co-authored-by: David Langley <davidl@element.io>
Co-authored-by: Michael Weimann <michaelw@matrix.org>
Co-authored-by: Timshel <Timshel@users.noreply.github.com>
Co-authored-by: Sahil Silare <32628578+sahil9001@users.noreply.github.com>
Co-authored-by: Will Hunt <will@half-shot.uk>
Co-authored-by: Hubert Chathi <hubert@uhoreg.ca>
Co-authored-by: Andrew Ferrazzutti <andrewf@element.io>
Co-authored-by: Robin <robin@robin.town>
Co-authored-by: Tulir Asokan <tulir@maunium.net>

scripts/make-react-component.js

@@ -0,0 +1,152 @@
+#!/usr/bin/env node
+const fs = require("fs/promises");
+const path = require("path");
+
+/**
+ * Unsophisticated script to create a styled, unit-tested react component.
+ * -filePath / -f : path to the component to be created, including new component name, excluding extension, relative to src
+ * -withStyle / -s : optional, flag to create a style file for the component. Defaults to false.
+ *
+ * eg:
+ * ```
+ * node srcipts/make-react-component.js -f components/toasts/NewToast -s
+ * ```
+ * creates files:
+ * - src/components/toasts/NewToast.tsx
+ * - test/components/toasts/NewToast-test.tsx
+ * - res/css/components/toasts/_NewToast.pcss
+ *
+ */
+
+const TEMPLATES = {
+    COMPONENT: `
+import React from 'react';
+
+interface Props {}
+
+const %%ComponentName%%: React.FC<Props> = () => {
+    return <div className='mx_%%ComponentName%%' />;
+};
+
+export default %%ComponentName%%;
+`,
+    TEST: `
+import React from "react";
+import { render } from "@testing-library/react";
+
+import %%ComponentName%% from '%%RelativeComponentPath%%';
+
+describe("<%%ComponentName%% />", () => {
+    const defaultProps = {};
+    const getComponent = (props = {}) =>
+        render(<%%ComponentName%% {...defaultProps} {...props} />);
+
+    it("matches snapshot", () => {
+        const { asFragment } = getComponent();
+        expect(asFragment()).toMatchSnapshot()();
+    });
+});
+`,
+    STYLE: `
+.mx_%%ComponentName%% {
+
+}
+`,
+};
+
+const options = {
+    alias: {
+        filePath: "f",
+        withStyle: "s",
+    },
+};
+
+const args = require("minimist")(process.argv, options);
+
+const ensureDirectoryExists = async (filePath) => {
+    const dirName = path.parse(filePath).dir;
+
+    try {
+        await fs.access(dirName);
+        return;
+    } catch (error) {}
+
+    await fs.mkdir(dirName, { recursive: true });
+};
+
+const makeFile = async ({ filePath, componentName, extension, base, template, prefix, componentFilePath }) => {
+    const newFilePath = path.join(
+        base,
+        path.dirname(filePath),
+        `${prefix || ""}${path.basename(filePath)}${extension}`,
+    );
+    await ensureDirectoryExists(newFilePath);
+
+    const relativePathToComponent = path.parse(path.relative(path.dirname(newFilePath), componentFilePath || ""));
+    const importComponentPath = path.join(relativePathToComponent.dir, relativePathToComponent.name);
+
+    try {
+        await fs.writeFile(newFilePath, fillTemplate(template, componentName, importComponentPath), { flag: "wx" });
+        console.log(`Created ${path.relative(process.cwd(), newFilePath)}`);
+        return newFilePath;
+    } catch (error) {
+        if (error.code === "EEXIST") {
+            console.log(`File already exists ${path.relative(process.cwd(), newFilePath)}`);
+            return newFilePath;
+        } else {
+            throw error;
+        }
+    }
+};
+
+const fillTemplate = (template, componentName, relativeComponentFilePath, skinnedSdkPath) =>
+    template
+        .replace(/%%ComponentName%%/g, componentName)
+        .replace(/%%RelativeComponentPath%%/g, relativeComponentFilePath);
+
+const makeReactComponent = async () => {
+    const { filePath, withStyle } = args;
+
+    if (!filePath) {
+        throw new Error("No file path provided, did you forget -f?");
+    }
+
+    const componentName = filePath.split("/").slice(-1).pop();
+
+    const componentFilePath = await makeFile({
+        filePath,
+        componentName,
+        base: "src",
+        extension: ".tsx",
+        template: TEMPLATES.COMPONENT,
+    });
+    await makeFile({
+        filePath,
+        componentFilePath,
+        componentName,
+        base: "test",
+        extension: "-test.tsx",
+        template: TEMPLATES.TEST,
+        componentName,
+    });
+    if (withStyle) {
+        await makeFile({
+            filePath,
+            componentName,
+            base: "res/css",
+            prefix: "_",
+            extension: ".pcss",
+            template: TEMPLATES.STYLE,
+        });
+    }
+};
+
+// Wrapper since await at the top level is not well supported yet
+function run() {
+    (async function () {
+        await makeReactComponent();
+    })();
+}
+
+run();
+return;