Merge branch 'main' into update-editor-ui

.eslintrc

@@ -1,6 +1,6 @@
 {
   "plugins": ["matrix-org"],
-  "extends": ["plugin:matrix-org/typescript", "plugin:matrix-org/react", "prettier"],
+  "extends": ["plugin:matrix-org/typescript", "plugin:matrix-org/react", "plugin:storybook/recommended", "prettier"],
   "parserOptions": {
     "project": ["./tsconfig.json", "./packages/*/tsconfig.json"]
   },

.storybook/base.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import "@fontsource/inter/variable.css";
+import "@fontsource/noto-serif/latin.css";
+import "../src/ui/App.css";
+import Storybook from "../src/ui/storybook/Storybook";
+
+export const baseDecorator = (Story) => {
+  return (
+    <Storybook>
+      <Story />
+    </Storybook>
+  );
+};

.storybook/main.ts

@@ -0,0 +1,34 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const EXCLUDED_VITE_PLUGIN = ["vite-plugin-mpa-router", "vite-plugin-service-worker"];
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
+  core: {
+    builder: "@storybook/builder-vite",
+  },
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  async viteFinal(config) {
+    return {
+      ...config,
+      appType: undefined,
+      base: "/storybook",
+      plugins: config.plugins?.filter((p) => {
+        if (p && "name" in p && typeof p.name === "string") {
+          const exclude = EXCLUDED_VITE_PLUGIN.includes(p.name);
+          return !exclude;
+        }
+        return true;
+      }),
+      test: undefined,
+    };
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,18 @@
+import type { Preview } from "@storybook/react";
+import { baseDecorator } from "./base";
+
+export const decorators = [baseDecorator];
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

netlify.toml

@@ -17,6 +17,11 @@
   to = "/logviewer/index.html"
   status = 200
 
+[[redirects]]
+  from = "/storybook"
+  to = "/storybook/index.html"
+  status = 200
+
 [[redirects]]
   from = "/*"
   to = "/index.html"

package.json

@@ -9,7 +9,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build && npm run docs:build",
+    "build": "tsc && vite build && npm run docs:build && npm run build-storybook",
     "build:scripting-runtime": "./src/engine/scripting/emscripten/build.sh",
     "build:examples": "./examples/build.sh",
     "typecheck": "tsc --noEmit",
@@ -23,7 +23,9 @@
     "docs:dev": "npm run docs:build-api && vitepress dev docs",
     "docs:build": "npm run docs:build-api && vitepress build docs",
     "docs:preview": "vitepress preview docs",
-    "docs:build-api": "typedoc"
+    "docs:build-api": "typedoc",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o dist/storybook"
   },
   "dependencies": {
     "3d-tiles-renderer": "https://github.com/matrix-org/3DTilesRendererJS.git#v0.3.9-patch",
@@ -80,6 +82,14 @@
     "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "^7.0.20",
+    "@storybook/addon-interactions": "^7.0.20",
+    "@storybook/addon-links": "^7.0.20",
+    "@storybook/blocks": "^7.0.20",
+    "@storybook/builder-vite": "^7.0.21",
+    "@storybook/react": "^7.0.20",
+    "@storybook/react-vite": "^7.0.20",
+    "@storybook/testing-library": "^0.0.14-next.2",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react-hooks": "^8.0.0",
     "@types/babel__core": "^7.1.19",
@@ -113,13 +123,15 @@
     "eslint-plugin-matrix-org": "^1.1.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.4.0",
+    "eslint-plugin-storybook": "^0.6.12",
     "eslint-plugin-unicorn": "^46.0.0",
     "husky": "^8.0.3",
     "jsdom": "^21.1.0",
     "postcss": "^8.4.12",
     "postcss-preset-env": "^8.0.1",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.6.1",
+    "storybook": "^7.0.20",
     "stylelint": "^15.2.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^30.0.1",

src/ui/App.tsx

@@ -1,4 +1,4 @@
-import { lazy, ReactNode, Suspense, useEffect } from "react";
+import { lazy, Suspense, useEffect } from "react";
 import { Route, Routes } from "react-router-dom";
 import { useFocusVisible } from "@react-aria/interactions";
 import { serviceWorkerFile } from "virtual:vite-plugin-service-worker";
@@ -32,23 +32,6 @@ function FocusOutlineManager() {
   return <></>;
 }
 
-let storybookRoute: ReactNode = null;
-
-if (import.meta.env.VITE_NETLIFY_DEPLOY_CONTEXT !== "production") {
-  const Storybook = lazy(() => import("./storybook/Storybook"));
-
-  storybookRoute = (
-    <Route
-      path="/storybook"
-      element={
-        <Suspense fallback="Loading...">
-          <Storybook />
-        </Suspense>
-      }
-    />
-  );
-}
-
 const LandingPage = lazy(() => import("./site/LandingPage"));
 const PreviewBlog = lazy(() => import("./site/PreviewBlog"));
 const LoginView = lazy(() => import("./views/login/LoginView"));
@@ -147,7 +130,6 @@ export function App() {
             </Suspense>
           }
         />
-        {storybookRoute}
         <Route path="*" element={<PageNotFound />} />
       </SentryRoutes>
     </JotaiProvider>

src/ui/atoms/avatar/Avatar.stories.tsx

@@ -1,12 +1,17 @@
+import { Meta } from "@storybook/react";
+
 import { Avatar } from "./Avatar";
 import { AvatarPile } from "./AvatarPile";
 import { AvatarBadgeWrapper } from "./AvatarBadgeWrapper";
 import { AvatarOutline } from "./AvatarOutline";
 import { StatusBadge } from "../badge/StatusBadge";
 
-export const title = "Avatar";
+export default {
+  title: "Avatar",
+  component: Avatar,
+} as Meta<typeof Avatar>;
 
-export default function AvatarStories() {
+export const AvatarStories = () => {
   const imgSrc = "https://cdn.britannica.com/92/80592-050-86EF29F3/Mouflon-ram.jpg";
 
   return (
@@ -104,4 +109,4 @@ export default function AvatarStories() {
       </div>
     </div>
   );
-}
+};

src/ui/atoms/badge/NotificationBadge.stories.tsx

@@ -1,8 +1,13 @@
+import { Meta } from "@storybook/react";
+
 import { NotificationBadge } from "./NotificationBadge";
 
-export const title = "NotificationBadge";
+export default {
+  title: "NotificationBadge",
+  component: NotificationBadge,
+} as Meta<typeof NotificationBadge>;
 
-export default function NotificationBadgeStories() {
+export const NotificationBadgeStories = () => {
   return (
     <div className="flex">
       <NotificationBadge />
@@ -11,4 +16,4 @@ export default function NotificationBadgeStories() {
       <NotificationBadge content="99+" variant="danger" />
     </div>
   );
-}
+};

src/ui/atoms/badge/StatusBadge.stories.tsx

@@ -1,8 +1,13 @@
+import { Meta } from "@storybook/react";
+
 import { StatusBadge } from "./StatusBadge";
 
-export const title = "StatusBadge";
+export default {
+  title: "StatusBadge",
+  component: StatusBadge,
+} as Meta<typeof StatusBadge>;
 
-export default function StatusBadgeStories() {
+export function StatusBadgeStories() {
   return (
     <div className="flex">
       <StatusBadge status="offline" />

src/ui/atoms/button/Button.stories.tsx

@@ -1,10 +1,15 @@
+import { Meta } from "@storybook/react";
+
 import { Button } from "./Button";
 import { Icon } from "../icon/Icon";
 import HomeIC from "../../../../res/ic/home.svg";
 
-export const title = "Button";
+export default {
+  title: "Button",
+  component: Button,
+} as Meta<typeof Button>;
 
-export default function ButtonStories() {
+export function ButtonStories() {
   return (
     <div className="flex flex-wrap">
       <div>

src/ui/atoms/button/IconButton.stories.tsx

@@ -1,9 +1,14 @@
+import { Meta } from "@storybook/react";
+
 import { IconButton } from "./IconButton";
 import HomeIC from "../../../../res/ic/home.svg";
 
-export const title = "IconButton";
+export default {
+  title: "IconButton",
+  component: IconButton,
+} as Meta<typeof IconButton>;
 
-export default function IconButtonStories() {
+export function IconButtonStories() {
   return (
     <div className="flex">
       <div>

src/ui/atoms/button/Switch.stories.tsx

@@ -1,8 +1,13 @@
+import { Meta } from "@storybook/react";
+
 import { Switch } from "./Switch";
 
-export const title = "Switch";
+export default {
+  title: "Switch",
+  component: Switch,
+} as Meta<typeof Switch>;
 
-export default function SwitchStories() {
+export function SwitchStories() {
   return (
     <div className="flex">
       <Switch onCheckedChange={(v) => console.log(v)} />

src/ui/atoms/checkbox/Checkbox.stories.tsx

@@ -1,8 +1,13 @@
+import { Meta } from "@storybook/react";
+
 import { Checkbox } from "./Checkbox";
 
-export const title = "Checkbox";
+export default {
+  title: "Checkbox",
+  component: Checkbox,
+} as Meta<typeof Checkbox>;
 
-export default function CheckboxStories() {
+export function CheckboxStories() {
   return (
     <div className="flex">
       <Checkbox onCheckedChange={(v) => console.log(v)} />

src/ui/atoms/chip/Chip.stories.tsx

@@ -1,10 +1,15 @@
+import { Meta } from "@storybook/react";
+
 import { Chip } from "./Chip";
 import { Text } from "../text/Text";
 import { Avatar } from "../avatar/Avatar";
 
-export const title = "Chip";
+export default {
+  title: "Chip",
+  component: Chip,
+} as Meta<typeof Chip>;
 
-export default function ChipStories() {
+export function ChipStories() {
   return (
     <div>
       <Chip>

src/ui/atoms/content/Content.stories.tsx

@@ -1,8 +1,13 @@
+import { Meta } from "@storybook/react";
+
 import { Content } from "./Content";
 
-export const title = "Content";
+export default {
+  title: "Content",
+  component: Content,
+} as Meta<typeof Content>;
 
-export default function ContentStories() {
+export function ContentStories() {
   return (
     <div>
       <Content top="header" bottom="footer">

src/ui/atoms/dialog/Dialog.stories.tsx

@@ -1,11 +1,16 @@
+import { Meta } from "@storybook/react";
+
 import { Dialog } from "./Dialog";
 import { Button } from "../button/Button";
 import { Header } from "../header/Header";
 import { HeaderTitle } from "../header/HeaderTitle";
 
-export const title = "Dialog";
+export default {
+  title: "Dialog",
+  component: Dialog,
+} as Meta<typeof Dialog>;
 
-export default function DialogStories() {
+export function DialogStories() {
   return (
     <Dialog trigger={<Button>Open Dialog</Button>}>
       <Header left={<HeaderTitle size="lg">Dialog</HeaderTitle>} />

src/ui/atoms/footer/Footer.stories.tsx

@@ -1,8 +1,13 @@
+import { Meta } from "@storybook/react";
+
 import { Footer } from "./Footer";
 
-export const title = "Footer";
+export default {
+  title: "Footer",
+  component: Footer,
+} as Meta<typeof Footer>;
 
-export default function FooterStories() {
+export function FooterStories() {
   return (
     <div>
       <Footer left="left" center="center" right="right" />

src/ui/atoms/header/Header.stories.tsx

@@ -1,11 +1,16 @@
+import { Meta } from "@storybook/react";
+
 import { Header } from "./Header";
 import { HeaderTitle } from "./HeaderTitle";
 import { Icon } from "../icon/Icon";
 import ExploreIC from "../../../../res/ic/explore.svg";
 
-export const title = "Header";
+export default {
+  title: "Header",
+  component: Header,
+} as Meta<typeof Header>;
 
-export default function HeaderStories() {
+export function HeaderStories() {
   return (
     <div>
       <Header left={<HeaderTitle>Explore</HeaderTitle>} />