feat: implement CSS variables

.gitignore

@@ -5,6 +5,7 @@ node_modules/
 
 # next.js
 .next/
+.velite/
 
 # Expo
 .expo/

.storybook/main.ts

@@ -1,3 +1,4 @@
+import { reactUniversal } from '@react-universal/vite-plugin';
 import type { StorybookConfig } from '@storybook/react-vite';
 import { mergeConfig } from 'vite';
 
@@ -15,6 +16,7 @@ const config: StorybookConfig = {
   // eslint-disable-next-line @typescript-eslint/no-shadow
   viteFinal: (config) =>
     mergeConfig(config, {
+      plugins: [reactUniversal()],
       resolve: {
         conditions: ['source'],
       },

.storybook/preview.tsx

@@ -1,4 +1,4 @@
-import { ThemeProvider } from '@react-universal/core';
+import { UniversalProvider } from '@react-universal/core';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import type { Preview } from '@storybook/react';
 
@@ -10,9 +10,9 @@ const preview: Preview = {
   },
   decorators: [
     (Story, context) => (
-      <ThemeProvider>
+      <UniversalProvider>
         <Story {...context} />
-      </ThemeProvider>
+      </UniversalProvider>
     ),
   ],
 };

app/App.tsx

@@ -6,7 +6,7 @@ import {
   Text,
   View,
 } from '@react-universal/components';
-import { ThemeProvider, isWeb, styled } from '@react-universal/core';
+import { UniversalProvider, isWeb, styled } from '@react-universal/core';
 import { Defs, G, Path, Svg, TSpan, Text as TextSvg, Use } from '@react-universal/svg';
 import * as ScreenOrientation from 'expo-screen-orientation';
 import { StatusBar } from 'expo-status-bar';
@@ -60,7 +60,7 @@ export default function App() {
   return (
     <SafeAreaProvider>
       <StatusBar style="auto" />
-      <ThemeProvider>
+      <UniversalProvider>
         <ScrollView>
           <Svg
             sx={{
@@ -297,7 +297,7 @@ export default function App() {
             ))}
           </Grid>
         </ScrollView>
-      </ThemeProvider>
+      </UniversalProvider>
     </SafeAreaProvider>
   );
 }

app/package.json

@@ -11,17 +11,18 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "@react-native/normalize-colors": "0.76.3",
+    "@react-native/normalize-colors": "0.76.5",
     "@react-universal/components": "workspace:*",
     "@react-universal/core": "workspace:*",
     "@react-universal/svg": "workspace:*",
-    "expo": "^52.0.17",
-    "expo-dev-client": "~5.0.5",
-    "expo-screen-orientation": "~8.0.1",
-    "expo-splash-screen": "~0.29.16",
+    "@types/react": "~18.3.18",
+    "expo": "^52.0.21",
+    "expo-dev-client": "~5.0.6",
+    "expo-screen-orientation": "~8.0.2",
+    "expo-splash-screen": "~0.29.18",
     "expo-status-bar": "~2.0.0",
     "react": "18.3.1",
-    "react-native": "0.76.3",
+    "react-native": "0.76.5",
     "react-native-safe-area-context": "4.12.0",
     "react-native-svg": "15.8.0",
     "react-native-unistyles": "^2.20.0"

docs/app/docs/layout.tsx

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

docs/app/docs/sidebar.tsx

@@ -1,8 +1,54 @@
-import type { BoxProps } from '@react-universal/components';
+'use client';
+
+import type { ViewProps, ViewType } from '@react-universal/components';
 import { Stack } from '@react-universal/components';
 import { Aside } from '@react-universal/elements';
+import { useRef } from 'react';
+import { SideNav } from '#/components/SideNav';
+import { useRoute } from '#/lib/useRoute';
+import { useScrollIntoView } from '#/lib/useScrollIntoView';
+
+export const SidebarStart: React.FC<ViewProps> = (props) => {
+  const containerRef = useRef<React.ElementRef<ViewType>>(null);
+  const route = useRoute();
+
+  useScrollIntoView(containerRef, '[aria-current="page"]', 'center');
+
+  return (
+    <Aside
+      ref={containerRef}
+      sx={{
+        display: { xs: 'none', md: 'block' },
+        flexShrink: 0,
+        fontSize: '0.875rem',
+        height: 'var(--content-height)',
+        ms: -3,
+        overflowY: 'auto',
+        overscrollBehavior: 'contain',
+        pe: 5,
+        position: 'sticky' as any,
+        py: 8,
+        top: 'var(--header-height)',
+        width: '16rem',
+      }}
+      {...props}
+    >
+      <Stack spacing={6}>
+        {route.getSidebarNavItems().map((group) => (
+          <SideNav
+            key={group.title}
+            currentUrl={route.currentUrl}
+            title={group.title}
+            items={group.items}
+            status={group.status}
+          />
+        ))}
+      </Stack>
+    </Aside>
+  );
+};
 
-export const SidebarEnd: React.FC<BoxProps> = ({ children, sx, ...props }) => (
+export const SidebarEnd: React.FC<ViewProps> = ({ children, sx, ...props }) => (
   <Aside
     as="aside"
     sx={{