feat: create docs for @mainset/react

apps/docs/.env.example

@@ -0,0 +1 @@
+API_REMOTE_URL=https://httpbin.org

apps/docs/config/proxy.config.d.mts

@@ -0,0 +1,5 @@
+import type { SSRConfigParams } from '@mainset/cli/ssr-server';
+
+declare const proxyConfigByPath: SSRConfigParams['proxyConfigByPath'];
+
+export default proxyConfigByPath;

apps/docs/config/proxy.config.mjs

@@ -0,0 +1,10 @@
+const proxyConfigByPath = {
+  '/api-example/': {
+    context: ['/api-example/'],
+    target: process.env.API_REMOTE_URL,
+    pathRewrite: { '^/api-example/': '/' },
+    changeOrigin: true,
+  },
+};
+
+export default proxyConfigByPath;

apps/docs/config/serve-static.config.mjs

@@ -0,0 +1,7 @@
+import proxyConfigByPath from './proxy.config.mjs';
+
+const serveStaticConfig = {
+  proxyConfigByPath,
+};
+
+export default serveStaticConfig;

apps/docs/config/ssr-server.config.mts

@@ -0,0 +1,57 @@
+import { runtimePathById } from '@mainset/cli/runtime';
+import type { SSRConfigParams } from '@mainset/cli/ssr-server';
+import fs from 'fs';
+import path from 'path';
+import ReactDOMServer from 'react-dom/server';
+
+import provideServerReactApp from '../src/app.server';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import proxyConfigByPath from './proxy.config.mjs';
+
+const ssrServerConfig: SSRConfigParams = {
+  serveStatics: [
+    {
+      rootPath: path.join(runtimePathById.dist, 'public'),
+    },
+  ],
+  proxyConfigByPath,
+  renderSSRContentByPath: {
+    '/{*any}': ({ reqUrl, fullUrl }) =>
+      new Promise((resolve, reject) => {
+        fs.readFile(
+          path.join(runtimePathById.dist, 'public', 'server.html'),
+          'utf8',
+          async (err, htmlData) => {
+            if (err) {
+              return reject(err);
+            }
+
+            // Const context = {}; // Context to track SSR rendering information
+
+            try {
+              // Pass both requestUrl (relative) and fullUrl to provider of React App for server-side rendering
+              const appHtml = await provideServerReactApp({
+                reqUrl,
+                fullUrl,
+                // Context
+              });
+
+              const content = htmlData.replace(
+                '<div id="ui-stack--docs"></div>',
+                `<div id="ui-stack--docs">${ReactDOMServer.renderToString(
+                  appHtml,
+                )}</div>`,
+              );
+
+              return resolve(content);
+            } catch (error) {
+              return reject(error);
+            }
+          },
+        );
+      }),
+  },
+};
+
+export default ssrServerConfig;

apps/docs/package.json

@@ -0,0 +1,28 @@
+{
+  "engines": {
+    "node": ">=24.13.0"
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development ms-cli web-app --exec serve",
+    "dev:csr": "cross-env NODE_ENV=development ms-cli web-app --exec serve --serveMode csr",
+    "build": "ms-cli web-app --exec build",
+    "build:csr": "ms-cli web-app --exec build --serveMode csr",
+    "serve": "ms-cli web-app --exec serve-static",
+    "serve:csr": "ms-cli web-app --exec serve-static --serveMode csr",
+    "config": "ms-cli init -m config"
+  },
+  "dependencies": {
+    "@mainset/react": "workspace:^",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@mainset/bundler-webpack": "^0.3.3",
+    "@mainset/cli": "0.5.0",
+    "@mainset/dev-stack-fe": "^0.2.1",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "cross-env": "^10.1.0"
+  },
+  "packageManager": "pnpm@10.33.0"
+}

apps/docs/src/@types/bundler-webpack.d.ts

@@ -0,0 +1 @@
+/// <reference types="@mainset/bundler-webpack/global-types" />

apps/docs/src/app.browser.tsx

@@ -0,0 +1,12 @@
+import { MainSetProvider } from '@mainset/react/containers';
+import React from 'react';
+
+import { HomePage } from './pages';
+
+const BrowserReactApp = (
+  <MainSetProvider>
+    <HomePage />
+  </MainSetProvider>
+);
+
+export default BrowserReactApp;

apps/docs/src/app.server.tsx

@@ -0,0 +1,15 @@
+import BrowserReactApp from './app.browser';
+
+type ProvideServerReactAppParams = {
+  reqUrl: string;
+  fullUrl: string;
+  // Context?: Record<string, any>;
+};
+
+const provideServerReactApp = (params?: ProvideServerReactAppParams) => {
+  console.log({ params });
+
+  return BrowserReactApp;
+};
+
+export default provideServerReactApp;

apps/docs/src/components/Layout/Header.tsx

@@ -0,0 +1,54 @@
+import { Button } from '@mainset/react/components';
+import { Flex, Hr, ListBasic } from '@mainset/react/elements';
+import React from 'react';
+
+import { MainSetLogo } from '../mainset-logo';
+
+const Header = () => {
+  return (
+    <header>
+      <Flex layJustify="space-between" layAlign="center">
+        <Flex.Item>
+          <MainSetLogo />
+        </Flex.Item>
+        <Flex.Item>
+          <ListBasic>
+            <li>
+              <Button srfTheme="muted" srfVariant="ghost">
+                Products
+              </Button>
+            </li>
+            <li>
+              <Button srfTheme="muted" srfVariant="ghost">
+                Open Source
+              </Button>
+            </li>
+            <li>
+              <Button srfTheme="muted" srfVariant="ghost">
+                Features
+              </Button>
+            </li>
+            <li>
+              <Button srfTheme="muted" srfVariant="ghost">
+                GitHub
+              </Button>
+            </li>
+          </ListBasic>
+        </Flex.Item>
+        <Flex.Item>
+          <Flex>
+            <Button srfTheme="base" srfVariant="outlined">
+              Start on GitHub
+            </Button>
+            <Button srfTheme="base" srfVariant="solid">
+              Get started
+            </Button>
+          </Flex>
+        </Flex.Item>
+      </Flex>
+      <Hr hrColor="muted" />
+    </header>
+  );
+};
+
+export { Header };

apps/docs/src/components/Layout/index.ts

@@ -0,0 +1,7 @@
+import { Header } from './Header';
+
+const Layout = {
+  Header,
+};
+
+export { Layout };

apps/docs/src/components/index.ts

@@ -0,0 +1 @@
+export { Layout } from './Layout';

apps/docs/src/components/mainset-logo.tsx

@@ -0,0 +1,20 @@
+import { Badge, Flex, TextSection } from '@mainset/react/elements';
+import React from 'react';
+
+const MainSetLogo = () => {
+  return (
+    <Flex layGapSize="xs">
+      <Badge srfTheme="base" srfVariant="solid">
+        <TextSection txtColor="inverse" txtSize="small" txtWeight="bolder">
+          m
+        </TextSection>
+        <TextSection txtColor="tertiary" txtSize="small" txtWeight="bolder">
+          s
+        </TextSection>
+      </Badge>
+      <TextSection txtSize="large">mainset</TextSection>
+    </Flex>
+  );
+};
+
+export { MainSetLogo };

apps/docs/src/index.csr.ts

@@ -0,0 +1,9 @@
+import ReactDOMClient from 'react-dom/client';
+
+import BrowserReactApp from './app.browser';
+
+const targetContainer = document.getElementById('ui-stack--docs');
+
+if (targetContainer) {
+  ReactDOMClient.createRoot(targetContainer).render(BrowserReactApp);
+}

apps/docs/src/index.ssr.ts

@@ -0,0 +1,9 @@
+import ReactDOMClient from 'react-dom/client';
+
+import BrowserReactApp from './app.browser';
+
+const targetContainer = document.getElementById('ui-stack--docs');
+
+if (targetContainer) {
+  ReactDOMClient.hydrateRoot(targetContainer, BrowserReactApp);
+}

apps/docs/src/index.template.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+
+    <!-- styles -->
+  </head>
+
+  <body>
+    <div id="ui-stack--docs"></div>
+
+    <!-- SPA -->
+  </body>
+</html>

apps/docs/src/pages/Home/HomePage.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Layout } from '../../components';
+import { Hero } from './home-page.components';
+
+const HomePage = () => {
+  return (
+    <div>
+      <Layout.Header />
+      <main>
+        <Hero />
+      </main>
+    </div>
+  );
+};
+
+export { HomePage };

apps/docs/src/pages/Home/home-page.components.tsx

@@ -0,0 +1,21 @@
+import { Heading, Paragraph, Section } from '@mainset/react/elements';
+import React from 'react';
+
+const Hero = () => {
+  return (
+    <Section secMaxWidth="md">
+      <Heading txtWeight="bold" txtSize="xxx-large" txtAlign="center">
+        Productivity tools
+        <Paragraph txtColor="muted">built for the modern workflow</Paragraph>
+      </Heading>
+
+      <Paragraph txtSize="large" txtColor="muted" txtAlign="center">
+        We build open-source and proprietary software that helps you work
+        smarter. Cross-platform apps designed web-first, with native desktop and
+        mobile experiences.
+      </Paragraph>
+    </Section>
+  );
+};
+
+export { Hero };

apps/docs/src/pages/Home/index.ts

@@ -0,0 +1 @@
+export * from './HomePage';

apps/docs/src/pages/index.ts

@@ -0,0 +1 @@
+export { HomePage } from './Home';

apps/docs/src/styles/_theme.scss

@@ -0,0 +1,5 @@
+// theme name - aggregation of:
+// color scheme
+// font family
+// spacing scale
+// border radius scale

apps/docs/src/styles/global.scss

@@ -0,0 +1 @@
+@use '@mainset/react/styles/main.css';

apps/docs/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": [
+    "@mainset/dev-stack-fe/tsconfig--bundler",
+    "@mainset/dev-stack-fe/tschunk--react"
+  ],
+  "compilerOptions": {
+    "outDir": "./dist/esm"
+  }
+}

package.json

@@ -1,4 +1,7 @@
 {
+  "engines": {
+    "node": ">=24.13.0"
+  },
   "repository": "git@github.com:mainset/ui-stack.git",
   "author": "Yevhen Uzhva <yevhen.uzhva@gmail.com>",
   "license": "CC-BY-NC-4.0",