Setup docs and add sandbox

app/package.json

@@ -7,17 +7,18 @@
     "android": "expo run:android",
     "ios": "expo run:ios",
     "start": "expo start",
+    "typecheck": "tsc",
     "web": "expo start --web"
   },
   "dependencies": {
     "@react-native/normalize-colors": "0.76.3",
     "@react-universal/components": "workspace:*",
     "@react-universal/core": "workspace:*",
     "@react-universal/svg": "workspace:*",
-    "expo": "^52.0.14",
+    "expo": "^52.0.17",
     "expo-dev-client": "~5.0.5",
-    "expo-screen-orientation": "~8.0.0",
-    "expo-splash-screen": "~0.29.13",
+    "expo-screen-orientation": "~8.0.1",
+    "expo-splash-screen": "~0.29.16",
     "expo-status-bar": "~2.0.0",
     "react": "18.3.1",
     "react-native": "0.76.3",
@@ -29,6 +30,7 @@
     "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
     "@expo/metro-runtime": "~4.0.0",
-    "@types/babel__core": "^7.20.5"
+    "@types/babel__core": "^7.20.5",
+    "typescript": "~5.7.2"
   }
 }

app/tsconfig.json

@@ -2,7 +2,9 @@
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
     "customConditions": ["source"],
+    "jsx": "react-jsx",
     "moduleResolution": "Bundler",
     "strict": true
-  }
+  },
+  "include": ["**/*.ts", "**/*.tsx", "../@types/*.d.ts"]
 }

biome.json

@@ -39,6 +39,7 @@
       "correctness": {
         "noNewSymbol": "error",
         "noUndeclaredVariables": "error",
+        "noUnusedImports": "error",
         "noUnusedPrivateClassMembers": "error",
         "noUnusedVariables": "error",
         "useArrayLiterals": "error",

docs/.velite/docs.json

@@ -0,0 +1,48 @@
+[
+  {
+    "title": "Installation",
+    "slug": "getting-started/installation",
+    "description": "How to install and set up React Universal in your project",
+    "metadata": {
+      "readingTime": 1,
+      "wordCount": 193
+    },
+    "content": "<h2>Framework Guide</h2>\n<p>React Universal works in your favorite framework. We've put together step-by-step guides for these\nframeworks.</p>\n<card title=\"Next.js\" href=\"/getting-started/frameworks/next-app\">\n  Easily add React Universal with Next.js app\n</card>\n<card title=\"Vite\" href=\"/getting-started/frameworks/vite\">\n  Use React Universal with Vite\n</card>\n<blockquote>\n<p>The minimum Node.js version required is 18.x</p>\n</blockquote>\n<h2>Installation</h2>\n<p>To manually set up React Universal in your project, follow the steps below.</p>\n<h3>Install <code>@react-universal/core</code></h3>\n<pre><code class=\"language-bash\">yarn add @react-universal/core\n</code></pre>\n<h3>Setup provider</h3>\n<p>Wrap your application with the <code>Provider</code> component generated in the <code>components/ui/provider</code>\ncomponent at the root of your application.</p>\n<p>This provider composes the following:</p>\n<ul>\n<li><code>UniversalProvider</code> from <code>@react-universal/core</code> for the styling system</li>\n<li><code>ThemeProvider</code> from <code>next-themes</code> for color mode</li>\n</ul>\n<pre><code class=\"language-tsx\">import { Provider } from \"@/components/ui/provider\"\n\nfunction App({ Component, pageProps }) {\n  return (\n    &#x3C;Provider>\n      &#x3C;Component {...pageProps} />\n    &#x3C;/Provider>\n  )\n}\n</code></pre>\n<h3>Update tsconfig</h3>\n<p>If you're using TypeScript, you need to update the compilerOptions in the tsconfig file to include\nthe following options:</p>\n<pre><code class=\"language-json\">{\n  \"compilerOptions\": {\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"Bundler\",\n    \"skipLibCheck\": true,\n    \"paths\": {\n      \"@/*\": [\"./src/*\"]\n    }\n  }\n}\n</code></pre>\n<h3>Enjoy!</h3>\n<p>With the power of the snippets and the primitive components from React Universal, you can build your\nUI faster.</p>\n<pre><code class=\"language-tsx\">import { Button, Stack } from \"@react-universal/core\"\n\nfunction Demo() {\n  return (\n    &#x3C;Stack direction=\"row\">\n      &#x3C;Button>Click me&#x3C;/Button>\n      &#x3C;Button>Click me&#x3C;/Button>\n    &#x3C;/Stack>\n  )\n}\n</code></pre>",
+    "toc": [
+      {
+        "title": "Framework Guide",
+        "url": "#framework-guide",
+        "items": []
+      },
+      {
+        "title": "Installation",
+        "url": "#installation",
+        "items": [
+          {
+            "title": "Install @react-universal/core",
+            "url": "#install-react-universalcore",
+            "items": []
+          },
+          {
+            "title": "Setup provider",
+            "url": "#setup-provider",
+            "items": []
+          },
+          {
+            "title": "Update tsconfig",
+            "url": "#update-tsconfig",
+            "items": []
+          },
+          {
+            "title": "Enjoy!",
+            "url": "#enjoy",
+            "items": []
+          }
+        ]
+      }
+    ],
+    "code": "const{Fragment:e,jsx:l,jsxs:n}=arguments[0];function _createMdxContent(r){const s={blockquote:\"blockquote\",code:\"code\",h2:\"h2\",h3:\"h3\",li:\"li\",p:\"p\",pre:\"pre\",span:\"span\",ul:\"ul\",...r.components},{Card:c}=s;return c||function(e,l){throw new Error(\"Expected \"+(l?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}(\"Card\",!0),n(e,{children:[l(s.h2,{id:\"framework-guide\",children:\"Framework Guide\"}),\"\\n\",l(s.p,{children:\"React Universal works in your favorite framework. We've put together step-by-step guides for these\\nframeworks.\"}),\"\\n\",l(c,{title:\"Next.js\",href:\"/getting-started/frameworks/next-app\",children:l(s.p,{children:\"Easily add React Universal with Next.js app\"})}),\"\\n\",l(c,{title:\"Vite\",href:\"/getting-started/frameworks/vite\",children:l(s.p,{children:\"Use React Universal with Vite\"})}),\"\\n\",n(s.blockquote,{children:[\"\\n\",l(s.p,{children:\"The minimum Node.js version required is 18.x\"}),\"\\n\"]}),\"\\n\",l(s.h2,{id:\"installation\",children:\"Installation\"}),\"\\n\",l(s.p,{children:\"To manually set up React Universal in your project, follow the steps below.\"}),\"\\n\",n(s.h3,{id:\"install-react-universalcore\",children:[\"Install \",l(s.code,{children:\"@react-universal/core\"})]}),\"\\n\",l(s.pre,{className:\"shiki dark-plus\",style:{backgroundColor:\"#1E1E1E\",color:\"#D4D4D4\"},tabIndex:\"0\",children:l(s.code,{children:n(s.span,{className:\"line\",children:[l(s.span,{style:{color:\"#DCDCAA\"},children:\"yarn\"}),l(s.span,{style:{color:\"#CE9178\"},children:\" add\"}),l(s.span,{style:{color:\"#CE9178\"},children:\" @react-universal/core\"})]})})}),\"\\n\",l(s.h3,{id:\"setup-provider\",children:\"Setup provider\"}),\"\\n\",n(s.p,{children:[\"Wrap your application with the \",l(s.code,{children:\"Provider\"}),\" component generated in the \",l(s.code,{children:\"components/ui/provider\"}),\"\\ncomponent at the root of your application.\"]}),\"\\n\",l(s.p,{children:\"This provider composes the following:\"}),\"\\n\",n(s.ul,{children:[\"\\n\",n(s.li,{children:[l(s.code,{children:\"UniversalProvider\"}),\" from \",l(s.code,{children:\"@react-universal/core\"}),\" for the styling system\"]}),\"\\n\",n(s.li,{children:[l(s.code,{children:\"ThemeProvider\"}),\" from \",l(s.code,{children:\"next-themes\"}),\" for color mode\"]}),\"\\n\"]}),\"\\n\",l(s.pre,{className:\"shiki dark-plus\",style:{backgroundColor:\"#1E1E1E\",color:\"#D4D4D4\"},tabIndex:\"0\",children:n(s.code,{children:[n(s.span,{className:\"line\",children:[l(s.span,{style:{color:\"#C586C0\"},children:\"import\"}),l(s.span,{style:{color:\"#D4D4D4\"},children:\" { \"}),l(s.span,{style:{color:\"#9CDCFE\"},children:\"Provider\"}),l(s.span,{style:{color:\"#D4D4D4\"},children:\" } \"}),l(s.span,{style:{color:\"#C586C0\"},children:\"from\"}),l(s.span,{style:{color:\"#CE9178\"},children:' \"@/components/ui/provider\"'})]}),\"\\n\",l(s.span,{className:\"line\"}),\"\\n\",n(s.span,{className:\"line\",children:[l(s.span,{style:{color:\"#569CD6\"},children:\"function\"}),l(s.span,{style:{color:\"#DCDCAA\"},children:\" App\"}),l(s.span,{style:{color:\"#D4D4D4\"},children:\"({ \"}),l(s.span,{style:{color:\"#9CDCFE\"},children:\"Component\"}),l(s.span,{style:{color:\"#D4D4D4\"},children:\", \"}),l(s.span,{style:{color:\"#9CDCFE\"},children:\"pageProps\"}),l(s.span,{style:{color:\"#D4D4D4\"},children:\" }) {\"})]}),\"\\n\",n(s.span,{className:\"line\",children:[l(s.span,{style:{color:\"#C586C0\"},children:\"  return\"}),l(s.span,{style:{color:\"#D4D4D4\"},children:\" (\"})]}),\"\\n\",n(s.span,{className:\"line\",children:[l(s.span,{style:{color:\"#808080\"},children:\"    <\"}),l(s.span,{style:{color:\"#4EC9B0\"},children:\"Provider\"}),l(s.span,{style:{color:\"#808080\"},children:\">\"})]}),\"\\n\",n(s.span,{className:\"line\",children:[l(s.span,{style:{color:\"#808080\"},children:\"      <\"}),l(s.span,{style:{color:\"#4EC9B0\"},children:\"Component\"}),l(s.span,{style:{color:\"#569CD6\"},children:\" {\"}),l(s.span,{style:{color:\"#D4D4D4\"},children:\"...\"}),l(s.span,{style:{color:\"#9CDCFE\"},children:\"pageProps\"}),l(s.span,{style:{color:\"#569CD6\"},children:\"}\"}),l(s.span,{style:{color:\"#808080\"},children:\" />\"})]}),\"\\n\",n(s.span,{className:\"line\",children:[l(s.span,{style:{color:\"#808080\"},children:\"    </\"}),l(s.span,{style:{color:\"#4EC9B0\"},children:\"Provider\"}),l(s.span,{style:{color:\"#808080\"},children:\">\"})]}),\"\\n\",l(s.span,{className:\"line\",children:l(s.span,{style:{color:\"#D4D4D4\"},children:\"  )\"})}),\"\\n\",l(s.span,{className:\"line\",children:l(s.span,{style:{color:\"#D4D4D4\"},children:\"}\"})})]})}),\"\\n\",l(s.h3,{id:\"update-tsconfig\",children:\"Update tsconfig\"}),\"\\n\",l(s.p,{children:\"If you're using TypeScript, you need to update the compilerOptions in the tsconfig file to include\\nthe following options:\"}),\"\\n\",l(s.pre,{className:\"shiki dark-plus\",style:{backgroundColor:\"#1E1E1E\",color:\"#D4D4D4\"},tabIndex:\"0\",children:n(s.code,{children:[l(s.span,{className:\"line\",children:l(s.span,{style:{color:\"#D4D4D4\"},children:\"{\"})}),\"\\n\",n(s.span,{className:\"line\",children:[l(s.span,{style:{color:\"#9CDCFE\"},children:'  \"compilerOptions\"'}),l(s.span,{style:{color:\"#D4D4D4\"},children:\": {\"})]}),\"\\n\",n(s.span,{className:\"line\",children:[l(s.span,{style:{color:\"#9CDCFE\"},children:'    \"module\"'}),l(s.span,{style:{color:\"#D4D4D4\"},children:\": \"}),l(s.span,{style:{color:\"#CE9178\"},children:'\"ESNext\"'}),l(s.span,{style:{color:\"#D4D4D4\"},children:\",\"})]}),\"\\n\",n(s.span,{className:\"line\",children:[l(s.span,{style:{color:\"#9CDCFE\"},children:'    \"moduleResolution\"'}),l(s.span,{style:{color:\"#D4D4D4\"},children:\": \"}),l(s.span,{style:{color:\"#CE9178\"},children:'\"Bundler\"'}),l(s.span,{style:{color:\"#D4D4D4\"},children:\",\"})]}),\"\\n\",n(s.span,{className:\"line\",children:[l(s.span,{style:{color:\"#9CDCFE\"},children:'    \"skipLibCheck\"'}),l(s.span,{style:{color:\"#D4D4D4\"},children:\": \"}),l(s.span,{style:{color:\"#569CD6\"},children:\"true\"}),l(s.span,{style:{color:\"#D4D4D4\"},children:\",\"})]}),\"\\n\",n(s.span,{className:\"line\",children:[l(s.span,{style:{color:\"#9CDCFE\"},children:'    \"paths\"'}),l(s.span,{style:{color:\"#D4D4D4\"},children:\": {\"})]}),\"\\n\",n(s.span,{className:\"line\",children:[l(s.span,{style:{color:\"#9CDCFE\"},children:'      \"@/*\"'}),l(s.span,{style:{color:\"#D4D4D4\"},children:\": [\"}),l(s.span,{style:{color:\"#CE9178\"},children:'\"./src/*\"'}),l(s.span,{style:{color:\"#D4D4D4\"},children:\"]\"})]}),\"\\n\",l(s.span,{className:\"line\",children:l(s.span,{style:{color:\"#D4D4D4\"},children:\"    }\"})}),\"\\n\",l(s.span,{className:\"line\",children:l(s.span,{style:{color:\"#D4D4D4\"},children:\"  }\"})}),\"\\n\",l(s.span,{className:\"line\",children:l(s.span,{style:{color:\"#D4D4D4\"},children:\"}\"})})]})}),\"\\n\",l(s.h3,{id:\"enjoy\",children:\"Enjoy!\"}),\"\\n\",l(s.p,{children:\"With the power of the snippets and the primitive components from React Universal, you can build your\\nUI faster.\"}),\"\\n\",l(s.pre,{className:\"shiki dark-plus\",style:{backgroundColor:\"#1E1E1E\",color:\"#D4D4D4\"},tabIndex:\"0\",children:n(s.code,{children:[n(s.span,{className:\"line\",children:[l(s.span,{style:{color:\"#C586C0\"},children:\"import\"}),l(s.span,{style:{color:\"#D4D4D4\"},children:\" { \"}),l(s.span,{style:{color:\"#9CDCFE\"},children:\"Button\"}),l(s.span,{style:{color:\"#D4D4D4\"},children:\", \"}),l(s.span,{style:{color:\"#9CDCFE\"},children:\"Stack\"}),l(s.span,{style:{color:\"#D4D4D4\"},children:\" } \"}),l(s.span,{style:{color:\"#C586C0\"},children:\"from\"}),l(s.span,{style:{color:\"#CE9178\"},children:' \"@react-universal/core\"'})]}),\"\\n\",l(s.span,{className:\"line\"}),\"\\n\",n(s.span,{className:\"line\",children:[l(s.span,{style:{color:\"#569CD6\"},children:\"function\"}),l(s.span,{style:{color:\"#DCDCAA\"},children:\" Demo\"}),l(s.span,{style:{color:\"#D4D4D4\"},children:\"() {\"})]}),\"\\n\",n(s.span,{className:\"line\",children:[l(s.span,{style:{color:\"#C586C0\"},children:\"  return\"}),l(s.span,{style:{color:\"#D4D4D4\"},children:\" (\"})]}),\"\\n\",n(s.span,{className:\"line\",children:[l(s.span,{style:{color:\"#808080\"},children:\"    <\"}),l(s.span,{style:{color:\"#4EC9B0\"},children:\"Stack\"}),l(s.span,{style:{color:\"#9CDCFE\"},children:\" direction\"}),l(s.span,{style:{color:\"#D4D4D4\"},children:\"=\"}),l(s.span,{style:{color:\"#CE9178\"},children:'\"row\"'}),l(s.span,{style:{color:\"#808080\"},children:\">\"})]}),\"\\n\",n(s.span,{className:\"line\",children:[l(s.span,{style:{color:\"#808080\"},children:\"      <\"}),l(s.span,{style:{color:\"#4EC9B0\"},children:\"Button\"}),l(s.span,{style:{color:\"#808080\"},children:\">\"}),l(s.span,{style:{color:\"#D4D4D4\"},children:\"Click me\"}),l(s.span,{style:{color:\"#808080\"},children:\"</\"}),l(s.span,{style:{color:\"#4EC9B0\"},children:\"Button\"}),l(s.span,{style:{color:\"#808080\"},children:\">\"})]}),\"\\n\",n(s.span,{className:\"line\",children:[l(s.span,{style:{color:\"#808080\"},children:\"      <\"}),l(s.span,{style:{color:\"#4EC9B0\"},children:\"Button\"}),l(s.span,{style:{color:\"#808080\"},children:\">\"}),l(s.span,{style:{color:\"#D4D4D4\"},children:\"Click me\"}),l(s.span,{style:{color:\"#808080\"},children:\"</\"}),l(s.span,{style:{color:\"#4EC9B0\"},children:\"Button\"}),l(s.span,{style:{color:\"#808080\"},children:\">\"})]}),\"\\n\",n(s.span,{className:\"line\",children:[l(s.span,{style:{color:\"#808080\"},children:\"    </\"}),l(s.span,{style:{color:\"#4EC9B0\"},children:\"Stack\"}),l(s.span,{style:{color:\"#808080\"},children:\">\"})]}),\"\\n\",l(s.span,{className:\"line\",children:l(s.span,{style:{color:\"#D4D4D4\"},children:\"  )\"})}),\"\\n\",l(s.span,{className:\"line\",children:l(s.span,{style:{color:\"#D4D4D4\"},children:\"}\"})})]})})]})}return{default:function(e={}){const{wrapper:n}=e.components||{};return n?l(n,{...e,children:l(_createMdxContent,{...e})}):_createMdxContent(e)}};",
+    "links": {},
+    "category": "getting-started"
+  }
+]

docs/.velite/index.d.ts

@@ -0,0 +1,8 @@
+// This file is generated by Velite
+
+import type __vc from '../velite.config.ts';
+
+type Collections = typeof __vc.collections;
+
+export type Docs = Collections['docs']['schema']['_output'];
+export declare const docs: Docs[];

docs/.velite/index.js

@@ -0,0 +1,3 @@
+// This file is generated by Velite
+
+export { default as docs } from './docs.json';

docs/app/docs/[...slug]/page.tsx

@@ -0,0 +1,78 @@
+import { Show, Stack } from '@react-universal/components';
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { docs } from '#/.velite';
+import { MDXContent } from '#/components/MDXContent';
+import { PageHeader } from '#/components/PageHeader';
+import { Toc } from '#/components/Toc';
+import { flattenToc } from '#/lib/flattenToc';
+import { SidebarEnd } from '../sidebar';
+
+interface PageProps {
+  params: Promise<{ slug: string[] }>;
+}
+
+export default async function Page({ params }: PageProps) {
+  const { slug } = await params;
+  const page = docs.find((doc) => doc.slug === slug.join('/'));
+
+  if (!page) {
+    return notFound();
+  }
+
+  return (
+    <>
+      <Stack
+        sx={{
+          flexGrow: 1,
+          flexShrink: 1,
+          minH: 'var(--content-height)',
+          overflow: 'auto' as any,
+          pb: 16,
+          pt: 10,
+          px: { md: 12 },
+          w: '100%',
+        }}
+      >
+        <PageHeader title={page.title} description={page.description} links={page.links} />
+        <MDXContent code={page.code} />
+      </Stack>
+      <Show when={!page.hideToc}>
+        <SidebarEnd
+          id="toc"
+          sx={{
+            visibility: page.toc.length === 0 ? 'hidden' : undefined,
+          }}
+        >
+          <Toc items={flattenToc(page.toc)} />
+        </SidebarEnd>
+      </Show>
+    </>
+  );
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const page = docs.find((doc) => doc.slug === slug.join('/'));
+
+  const category = page?.slug
+    .split('/')
+    .slice(0, -1)
+    .join(' > ')
+    .replace('-', ' ')
+    .replace(/\b\w/g, (l) => l.toUpperCase());
+
+  return {
+    title: page?.title,
+    description: page?.description,
+    openGraph: {
+      images: `/og?title=${page?.title}&category=${category}`,
+    },
+  };
+}
+
+export function generateStaticParams() {
+  return docs.map((item) => ({
+    slug: item.slug.split('/').slice(1),
+  }));
+}

docs/app/docs/layout.tsx

@@ -0,0 +1,20 @@
+import { Container } from '@react-universal/components';
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+export default function Layout({ children }: LayoutProps) {
+  return (
+    <>
+      {/* <Header /> */}
+      <main>
+        <Container maxWidth="xl" sx={{ flexDir: 'row' }}>
+          {/* <SidebarStart /> */}
+          {/* <SkipNavContent /> */}
+          {children}
+        </Container>
+      </main>
+    </>
+  );
+}

docs/app/docs/sidebar.tsx

@@ -0,0 +1,26 @@
+import type { BoxProps } from '@react-universal/components';
+import { Stack } from '@react-universal/components';
+import { Aside } from '@react-universal/elements';
+
+export const SidebarEnd: React.FC<BoxProps> = ({ children, sx, ...props }) => (
+  <Aside
+    as="aside"
+    sx={{
+      display: { xs: 'none', xl: 'block' },
+      flexShrink: 0,
+      height: 'var(--content-height)',
+      overflowY: 'auto',
+      overscrollBehavior: 'contain',
+      pb: 8,
+      position: 'sticky' as any,
+      pt: 8,
+      px: 2,
+      top: 'var(--header-height)',
+      w: '16rem',
+      ...sx,
+    }}
+    {...props}
+  >
+    <Stack sx={{ alignItems: 'flex-start', gap: 4 }}>{children}</Stack>
+  </Aside>
+);

docs/app/globals.css

@@ -1,4 +1,7 @@
 :root {
+  --header-height: 64px;
+  --content-height: calc(100dvh - var(--header-height));
+
   --max-width: 1164px;
   --border-radius: 12px;
   --font-mono:
@@ -26,6 +29,12 @@
   --card-border-rgb: 131, 134, 135;
 }
 
+@media (min-width: 600px) {
+  :root {
+    --header-height: 104px;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --foreground-rgb: 255, 255, 255;

docs/app/layout.tsx

@@ -2,7 +2,7 @@ import { createTheme } from '@react-universal/core';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
-import { StylesProvider } from './styles-provider';
+import { AppRouterProdivder } from '@react-universal/next';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -19,7 +19,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <StylesProvider
+        <AppRouterProdivder
           theme={createTheme({
             fonts: {
               body: {
@@ -32,7 +32,7 @@ export default function RootLayout({
           })}
         >
           {children}
-        </StylesProvider>
+        </AppRouterProdivder>
       </body>
     </html>
   );