@mr.dj2u/library-registry 0.0.0

package/assets/mds/src/features/exposition/exposition-screen.tsx

@@ -0,0 +1,191 @@
+import { Linking, Platform, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import {
+  AnimatedPressable,
+  ExpositionNotice,
+  GestureCard,
+  KeyboardForm,
+  PackageCard,
+  ScreensCard,
+  SoftwareMansionLogo,
+} from '../../components/exposition';
+import { useAppTheme } from '../../theme/provider';
+
+export default function ExpositionScreen() {
+  const theme = useAppTheme();
+  const colors = theme.activeColors;
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior="automatic"
+      contentContainerStyle={styles.content}
+      style={[styles.screen, { backgroundColor: colors.background }]}>
+      <Text
+        style={[
+          styles.title,
+          {
+            color: colors.text,
+            fontFamily: theme.typography.fontFamily,
+            fontWeight:
+              theme.typography.fontFamily === 'System' ||
+              theme.typography.fontFamily === 'monospace'
+                ? '800'
+                : 'normal',
+          },
+        ]}>
+        Package Exposition
+      </Text>
+      <Text style={[styles.intro, { color: colors.text }]}>
+        Browse the included Software Mansion packages, then keep only what your app needs.
+      </Text>
+      <ExpositionNotice />
+      <PackageCard
+        packageName="reanimated-color-picker"
+        title="Stylist color editing"
+        body="Stylist uses this package for the hue slider, color preview, and manual palette picker that writes theme tokens.">
+        <Text
+          style={styles.link}
+          onPress={() => Linking.openURL('https://github.com/alabsi91/reanimated-color-picker')}>
+          Reanimated Color Picker
+        </Text>
+      </PackageCard>
+      <PackageCard
+        packageName="@react-native-async-storage/async-storage"
+        title="Stylist local preferences"
+        body="Stylist stores local-only preferences such as the Google Fonts API key, dismissed banners, and editor settings with Async Storage.">
+        <Text
+          style={styles.link}
+          onPress={() =>
+            Linking.openURL('https://react-native-async-storage.github.io/async-storage/')
+          }>
+          Async Storage Docs
+        </Text>
+      </PackageCard>
+      <PackageCard
+        packageName="react-native-safe-area-context"
+        title="Stylist safe spacing"
+        body="Stylist reads safe-area insets so editor controls stay clear of cutouts, native tabs, and device navigation areas.">
+        <Text
+          style={styles.link}
+          onPress={() =>
+            Linking.openURL('https://docs.expo.dev/versions/latest/sdk/safe-area-context/')
+          }>
+          Expo SDK - SafeAreaContext
+        </Text>
+      </PackageCard>
+      <PackageCard
+        packageName="tailwindcss/colors"
+        title="Stylist palette families"
+        body="Stylist uses Tailwind color families and shade scales to drive the palette-family mode and accessible token previews.">
+        <Text
+          style={styles.link}
+          onPress={() => Linking.openURL('https://tailwindcss.com/docs/customizing-colors')}>
+          Tailwind CSS - Colors
+        </Text>
+      </PackageCard>
+      <PackageCard
+        packageName="expo-router API routes"
+        title="Stylist sync endpoint"
+        body="Stylist uses an Expo Router +api route so both native and web can sync theme output files by calling /exposition/stylist-sync.">
+        <Text
+          style={styles.link}
+          onPress={() => Linking.openURL('https://docs.expo.dev/router/web/api-routes/')}>
+          Expo Router - API Routes
+        </Text>
+      </PackageCard>
+      <PackageCard
+        packageName="react-native-reanimated + react-native-worklets"
+        title="Motion that feels native"
+        body="Press the button to see the Reanimated timing demo. Worklets make this kind of UI-thread animation possible.">
+        <AnimatedPressable label="Press and hold" />
+        <Text
+          style={styles.link}
+          onPress={() => Linking.openURL('https://docs.swmansion.com/react-native-reanimated')}>
+          Software Mansion - Reanimated
+        </Text>
+      </PackageCard>
+      <PackageCard
+        packageName="react-native-gesture-handler"
+        title="Gesture-first interactions"
+        body="Drag the card below. If your product does not need touch-heavy interactions, this demo helps you decide what to remove.">
+        <GestureCard title="Drag me" body="This card springs back when the gesture ends." />
+        <Text
+          style={styles.link}
+          onPress={() =>
+            Linking.openURL('https://docs.swmansion.com/react-native-gesture-handler')
+          }>
+          Software Mansion - Gesture Handler
+        </Text>
+      </PackageCard>
+      <PackageCard
+        packageName="react-native-screens"
+        title="Native navigation primitives"
+        body="Screens support the navigation layer with native lifecycle and memory behavior.">
+        <ScreensCard />
+        <Text
+          style={styles.link}
+          onPress={() => Linking.openURL('https://docs.swmansion.com/react-native-screens')}>
+          Software Mansion - Screens
+        </Text>
+      </PackageCard>
+      <PackageCard
+        packageName="react-native-svg"
+        title="Portable vector UI"
+        body="Use SVG for marks, badges, charts, and vector states that need to scale cleanly.">
+        <View style={styles.svgDemo}>
+          <SoftwareMansionLogo width={150} height={80} />
+        </View>
+        <Text
+          style={styles.link}
+          onPress={() => Linking.openURL('https://docs.expo.dev/versions/latest/sdk/svg')}>
+          Expo SDK - SVG
+        </Text>
+      </PackageCard>
+      <PackageCard
+        packageName="react-native-keyboard-controller"
+        title="Keyboard-heavy screens"
+        body="Use this when forms, chat, notes, or auth flows need better keyboard control than manual offsets.">
+        <KeyboardForm />
+        <Text
+          style={styles.link}
+          onPress={() =>
+            Linking.openURL('https://kirillzyusko.github.io/react-native-keyboard-controller/')
+          }>
+          Kirill Zyusko - Keyboard Controller
+        </Text>
+      </PackageCard>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    backgroundColor: '#f9fafb',
+    flex: 1,
+  },
+  content: {
+    gap: 16,
+    padding: 20,
+    paddingTop: Platform.OS === 'web' ? 92 : 20,
+  },
+  title: {
+    color: '#111827',
+    fontSize: 30,
+    fontWeight: '900',
+  },
+  intro: {
+    color: '#4b5563',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  link: {
+    color: '#1d4ed8',
+    fontSize: 14,
+    fontWeight: '800',
+    lineHeight: 20,
+  },
+  svgDemo: {
+    alignItems: 'center',
+    paddingVertical: 8,
+  },
+});

package/assets/mds/src/features/exposition/nativewindui-screen.tsx

@@ -0,0 +1,125 @@
+import { useMemo, useState } from 'react';
+import { Linking, Platform, ScrollView, StyleSheet, View } from 'react-native';
+
+import { ActivityIndicator } from '../../components/nativewindui/ActivityIndicator';
+import { Avatar, AvatarFallback } from '../../components/nativewindui/Avatar';
+import { Button } from '../../components/nativewindui/Button';
+import { DatePicker } from '../../components/nativewindui/DatePicker';
+import { Picker, PickerItem } from '../../components/nativewindui/Picker';
+import { ProgressIndicator } from '../../components/nativewindui/ProgressIndicator';
+import { Slider } from '../../components/nativewindui/Slider';
+import { Text } from '../../components/nativewindui/Text';
+import { ThemeToggle } from '../../components/nativewindui/ThemeToggle';
+import { Toggle } from '../../components/nativewindui/Toggle';
+import { ExpositionNotice } from '../../components/exposition';
+import { useAppTheme } from '../../theme/provider';
+
+export default function NativeWindUiScreen() {
+  const theme = useAppTheme();
+  const colors = theme.activeColors;
+  const [enabled, setEnabled] = useState(true);
+  const [intensity, setIntensity] = useState(0.64);
+  const [density, setDensity] = useState('balanced');
+  const [appointmentDate, setAppointmentDate] = useState<Date>(new Date());
+  const progress = useMemo(() => Math.round(intensity * 100), [intensity]);
+
+  return (
+    <ScrollView contentInsetAdjustmentBehavior="automatic" contentContainerStyle={styles.content} style={[styles.screen, { backgroundColor: colors.background }]}>
+      <View style={styles.header}>
+        <Text variant="largeTitle" className="font-black text-slate-950 dark:text-white">NativeWindUI Exposition</Text>
+        <Text variant="body" color="secondary">Generated when NativeWindUI is selected; this page exercises the local NativeWindUI primitives that create-expo-stack installs.</Text>
+      </View>
+      <ExpositionNotice />
+      <View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.primary, borderRadius: theme.layout.radius }]}>
+        <Text variant="heading">Interactive primitives</Text>
+        <View style={styles.feedbackRow}>
+          <Avatar className="h-12 w-12">
+            <AvatarFallback>
+              <Text variant="caption2">NW</Text>
+            </AvatarFallback>
+          </Avatar>
+          <View style={styles.feedbackBody}>
+            <Text variant="subhead">Theme preview controls</Text>
+            <Text variant="footnote" color="secondary">Avatar and ThemeToggle are local NativeWindUI primitives.</Text>
+          </View>
+          <ThemeToggle />
+        </View>
+        <View style={styles.row}>
+          <Button onPress={() => Linking.openURL('https://nativewindui.com')} variant="primary">
+            <Text>Open NativeWindUI docs</Text>
+          </Button>
+          <Button variant="tonal">
+            <Text>{density}</Text>
+          </Button>
+        </View>
+        <View style={styles.controlRow}>
+          <Text variant="callout">Enable generated theme bridge</Text>
+          <Toggle value={enabled} onValueChange={setEnabled} />
+        </View>
+        <Slider value={intensity} onValueChange={setIntensity} />
+        <ProgressIndicator value={progress} />
+        <Text variant="footnote" color="secondary">Progress {progress}% - Toggle {enabled ? 'on' : 'off'}</Text>
+      </View>
+      <View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.primary, borderRadius: theme.layout.radius }]}>
+        <Text variant="heading">Picker, DatePicker, and feedback</Text>
+        <Picker selectedValue={density} onValueChange={(value) => setDensity(String(value))}>
+          <PickerItem label="Compact density" value="compact" />
+          <PickerItem label="Balanced density" value="balanced" />
+          <PickerItem label="Spacious density" value="spacious" />
+        </Picker>
+        {Platform.OS !== "web" ? (
+          <DatePicker mode="date" value={appointmentDate} onChange={(_event, selected) => selected && setAppointmentDate(selected)} />
+        ) : (
+          <Text variant="footnote" color="secondary">DatePicker preview appears on native targets.</Text>
+        )}
+        <View style={styles.feedbackRow}>
+          <ActivityIndicator />
+          <View style={styles.feedbackBody}>
+            <Text variant="subhead" color="secondary">NativeWind class tokens, generated theme colors, and Expo web are rendering together.</Text>
+            <Text variant="footnote" color="secondary">Date: {appointmentDate.toDateString()}</Text>
+          </View>
+        </View>
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    backgroundColor: '#f8fafc',
+    flex: 1,
+  },
+  content: {
+    gap: 16,
+    padding: 20,
+    paddingTop: 84,
+  },
+  header: {
+    gap: 8,
+  },
+  card: {
+    borderWidth: 1,
+    gap: 16,
+    padding: 16,
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 10,
+  },
+  controlRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 12,
+    justifyContent: 'space-between',
+  },
+  feedbackRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 12,
+  },
+  feedbackBody: {
+    flex: 1,
+    gap: 4,
+  },
+});