e74c285b70
Major feature migration from dt-shopify-storefront into the design system: - Card system: per-card color modes (normal/emphasis/warning/success/other), progress bars, full-bleed card body (card-body-flush), image bevel clip-paths, and visible structural borders at bevel corners - Badge system: dt-card-badge with position-aware offsets for cards vs media frames - Media frames: dt-bevel-media with inner surface fill, image clipping, and "MISSING MEDIA" placeholder for empty containers - Interactive bevel buttons: dt-btn with hover/selected states and pulse animation - Menu items: dt-menu-item with active states and level indentation - Animations: scale-in, fade-in, slide-up, pulse, ping, spin keyframes - Feature legend: CSS grid for product feature icons with state colors - Scrollbar styling for DT brand - New @dangerousthings/react package wrapping web CSS components - New @dangerousthings/tailwind-preset package - New @dangerousthings/hex-background package - Desktop showcase rewritten in React with Tailwind CSS - Mobile showcase updated with new screens (animations, filters, advanced cards) - Tokens: added mode color tokens, RGB variants, and selected-state tokens Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
|
import { useDTTheme } from '@dangerousthings/react-native';
|
|
import type { RootStackParamList } from './types';
|
|
|
|
import { HomeScreen } from '../screens/HomeScreen';
|
|
import { ButtonsScreen } from '../screens/ButtonsScreen';
|
|
import { CardsScreen } from '../screens/CardsScreen';
|
|
import { FormsScreen } from '../screens/FormsScreen';
|
|
import { FeedbackScreen } from '../screens/FeedbackScreen';
|
|
import { OverlaysScreen } from '../screens/OverlaysScreen';
|
|
import { ThemeScreen } from '../screens/ThemeScreen';
|
|
import { AnimationsScreen } from '../screens/AnimationsScreen';
|
|
import { CardsAdvancedScreen } from '../screens/CardsAdvancedScreen';
|
|
import { FiltersScreen } from '../screens/FiltersScreen';
|
|
|
|
const Stack = createNativeStackNavigator<RootStackParamList>();
|
|
|
|
export function RootNavigator() {
|
|
const theme = useDTTheme();
|
|
|
|
return (
|
|
<Stack.Navigator
|
|
initialRouteName="Home"
|
|
screenOptions={{
|
|
headerStyle: { backgroundColor: theme.colors.background },
|
|
headerTintColor: theme.custom.modeNormal,
|
|
headerTitleStyle: { fontWeight: '600' },
|
|
contentStyle: { backgroundColor: theme.colors.background },
|
|
animation: 'slide_from_right',
|
|
}}
|
|
>
|
|
<Stack.Screen
|
|
name="Home"
|
|
component={HomeScreen}
|
|
options={{ headerShown: false }}
|
|
/>
|
|
<Stack.Screen
|
|
name="Buttons"
|
|
component={ButtonsScreen}
|
|
options={{ title: 'BUTTONS & ACTIONS' }}
|
|
/>
|
|
<Stack.Screen
|
|
name="Cards"
|
|
component={CardsScreen}
|
|
options={{ title: 'CARDS & LABELS' }}
|
|
/>
|
|
<Stack.Screen
|
|
name="CardsAdvanced"
|
|
component={CardsAdvancedScreen}
|
|
options={{ title: 'ADVANCED CARDS' }}
|
|
/>
|
|
<Stack.Screen
|
|
name="Forms"
|
|
component={FormsScreen}
|
|
options={{ title: 'FORM CONTROLS' }}
|
|
/>
|
|
<Stack.Screen
|
|
name="Feedback"
|
|
component={FeedbackScreen}
|
|
options={{ title: 'PROGRESS & FEEDBACK' }}
|
|
/>
|
|
<Stack.Screen
|
|
name="Overlays"
|
|
component={OverlaysScreen}
|
|
options={{ title: 'OVERLAYS & NAV' }}
|
|
/>
|
|
<Stack.Screen
|
|
name="Animations"
|
|
component={AnimationsScreen}
|
|
options={{ title: 'ANIMATIONS' }}
|
|
/>
|
|
<Stack.Screen
|
|
name="Filters"
|
|
component={FiltersScreen}
|
|
options={{ title: 'FILTERS & FEATURES' }}
|
|
/>
|
|
<Stack.Screen
|
|
name="Theme"
|
|
component={ThemeScreen}
|
|
options={{ title: 'THEME REFERENCE' }}
|
|
/>
|
|
</Stack.Navigator>
|
|
);
|
|
}
|