initial-commit

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+dist

bro.config.js

@@ -0,0 +1,24 @@
+const pkg = require("./package");
+
+module.exports = {
+  apiPath: "stubs/api",
+  webpackConfig: {
+    output: {
+      publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`,
+    },
+  },
+  navigations: {
+    "hello.main": "/",
+  },
+  features: {
+    hello: {
+      enableRedirectNowButton: {
+        value: "true",
+      },
+    },
+  },
+  config: {
+    "hello.redirectTarget": "https://example.com",
+    "hello.redirectDelayMs": "5000",
+  },
+};

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "ui-sample-project",
+  "version": "0.0.0",
+  "main": "./src/index.tsx",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "brojs server --port=8099",
+    "build": "npm run clean && brojs build --dev",
+    "build:prod": "npm run clean && brojs build",
+    "clean": "rimraf dist"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@brojs/cli": "1.8.4",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "babel-loader": "^10.0.0",
+    "express": "^4.21.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.27.0",
+    "rimraf": "^6.0.0",
+    "webpack-hot-middleware": "^2.26.1"
+  }
+}

src/app.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { ThemeProvider } from "@emotion/react";
+import { RedirectPage } from "./pages/redirect-page";
+import { featureFlags } from "./config/feature-flags";
+
+const theme = {
+  colors: {
+    background: "#ffffff",
+    text: "#000000",
+    accent: "#000000"
+  }
+};
+
+export default function App(): JSX.Element {
+  return (
+    <ThemeProvider theme={theme}>
+      <RedirectPage enableRedirectNowButton={featureFlags.enableRedirectNowButton} />
+    </ThemeProvider>
+  );
+}

src/config/feature-flags.ts

@@ -0,0 +1,7 @@
+export type FeatureFlags = {
+  enableRedirectNowButton: boolean;
+};
+
+export const featureFlags: FeatureFlags = {
+  enableRedirectNowButton: true
+};

src/index.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { createRoot, Root } from "react-dom/client";
+import App from "./app";
+
+export default function RootComponent(): JSX.Element {
+  return <App />;
+}
+
+let rootElement: Root | null = null;
+
+export function mount(
+  Component: React.ComponentType,
+  element: HTMLElement | null = document.getElementById("app")
+): void {
+  if (!element) {
+    return;
+  }
+
+  rootElement = createRoot(element);
+  rootElement.render(<Component />);
+}
+
+export function unmount(): void {
+  if (!rootElement) {
+    return;
+  }
+
+  rootElement.unmount();
+  rootElement = null;
+}

src/pages/redirect-page.tsx

@@ -0,0 +1,81 @@
+import React, { useCallback, useEffect, useState } from "react";
+
+type RedirectPageProps = {
+  enableRedirectNowButton: boolean;
+};
+
+const REDIRECT_DELAY_MS = 5000;
+const TARGET_URL = "https://example.com";
+
+export function RedirectPage({
+  enableRedirectNowButton
+}: RedirectPageProps): JSX.Element {
+  const [remainingMs, setRemainingMs] = useState<number>(REDIRECT_DELAY_MS);
+
+  useEffect(() => {
+    const redirectTimeoutId = window.setTimeout(() => {
+      window.location.assign(TARGET_URL);
+    }, REDIRECT_DELAY_MS);
+
+    const intervalId = window.setInterval(() => {
+      setRemainingMs(previous => {
+        const next = previous - 1000;
+        if (next <= 0) {
+          window.clearInterval(intervalId);
+          return 0;
+        }
+        return next;
+      });
+    }, 1000);
+
+    return () => {
+      window.clearTimeout(redirectTimeoutId);
+      window.clearInterval(intervalId);
+    };
+  }, []);
+
+  const handleRedirectNow = useCallback((): void => {
+    window.location.assign(TARGET_URL);
+  }, []);
+
+  const secondsRemaining = Math.ceil(remainingMs / 1000);
+
+  return (
+    <main
+      style={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#ffffff",
+        color: "#000000",
+        fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
+      }}
+    >
+      <div style={{ textAlign: "center" }}>
+        <h1 style={{ fontSize: "1.5rem", marginBottom: "0.5rem" }}>
+          Hello
+        </h1>
+        <p style={{ marginBottom: enableRedirectNowButton ? "1rem" : 0 }}>
+          Redirecting to {TARGET_URL} in {secondsRemaining} seconds.
+        </p>
+        {enableRedirectNowButton && (
+          <button
+            type="button"
+            onClick={handleRedirectNow}
+            style={{
+              marginTop: "0.5rem",
+              padding: "0.5rem 1rem",
+              borderRadius: "4px",
+              border: "1px solid #000000",
+              backgroundColor: "#ffffff",
+              cursor: "pointer"
+            }}
+          >
+            Redirect now
+          </button>
+        )}
+      </div>
+    </main>
+  );
+}

tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "es2017"
+    ],
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "noImplicitAny": false,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "target": "es6",
+    "jsx": "react",
+    "typeRoots": [
+      "node_modules/@types",
+      "src/typings",
+      "./types"
+    ],
+    "types": [
+      "webpack-env",
+      "node"
+    ],
+    "resolveJsonModule": true
+  },
+  "exclude": [
+    "node_modules",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "node_modules/@types/jest"
+  ]
+}