@mr.dj2u/library-registry 0.2.0 → 0.3.0

package/assets/mds/src/features/onboarding/legal-review-screen.tsx

@@ -0,0 +1,242 @@
+import { useRouter } from 'expo-router';
+import { useState } from 'react';
+import { Platform, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { LegalDocumentModal } from '../legal/legal-document-modal';
+import { getLegalDocument, type LegalDocumentId } from '../legal/legal-documents';
+import {
+  getRequiredMaterialLegalDocuments,
+  useLegalUpdateGateSnapshot,
+} from '../legal/legal-acceptance-adapter';
+import { getReadableTextColor } from '../../theme/color-utils';
+import { useAppTheme } from '../../theme/provider';
+import { markOnboardingComplete } from '../onboarding-state/onboarding-state';
+import { onboardingConfig } from './onboarding-config';
+
+const requiredDocuments = getRequiredMaterialLegalDocuments();
+
+function LegalRow({
+  documentId,
+  accepted,
+  onOpen,
+}: {
+  documentId: LegalDocumentId;
+  accepted: boolean;
+  onOpen: () => void;
+}) {
+  const theme = useAppTheme();
+  const colors = theme.activeColors;
+  const document = getLegalDocument(documentId);
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      onPress={onOpen}
+      style={[
+        styles.documentCard,
+        {
+          backgroundColor: colors.surface,
+          borderColor: accepted ? colors.success : colors.primary,
+          borderRadius: theme.layout.radius,
+        },
+      ]}
+    >
+      <View style={styles.documentText}>
+        <Text style={[styles.documentTitle, { color: colors.text }]}>{document.title}</Text>
+        <Text style={[styles.documentMeta, { color: colors.text }]}>
+          Last updated {document.lastUpdated}
+        </Text>
+      </View>
+      <Text style={[styles.documentAction, { color: accepted ? colors.success : colors.primary }]}>
+        {accepted ? 'Accepted' : 'Review'}
+      </Text>
+    </Pressable>
+  );
+}
+
+export default function OnboardingLegalReviewScreen() {
+  const router = useRouter();
+  const theme = useAppTheme();
+  const colors = theme.activeColors;
+  const primaryForeground = getReadableTextColor(colors.primary, theme.colors.light.text);
+  const [activeDocument, setActiveDocument] = useState<LegalDocumentId | null>(null);
+  const [completionError, setCompletionError] = useState<string | null>(null);
+  const [isCompleting, setIsCompleting] = useState(false);
+  const { snapshot, acceptDocument, savingDocumentId } = useLegalUpdateGateSnapshot();
+  const missingDocumentIds = new Set(
+    snapshot.requiredDocuments.map((document) => document.documentId)
+  );
+  const hasAcceptedRequiredDocuments = snapshot.status === 'complete';
+  const canContinue = hasAcceptedRequiredDocuments && !savingDocumentId && !isCompleting;
+
+  const closeModal = () => setActiveDocument(null);
+  const acceptActiveDocument = async () => {
+    if (activeDocument) {
+      const document = requiredDocuments.find((item) => item.documentId === activeDocument);
+      if (document) {
+        await acceptDocument(document);
+      }
+    }
+    closeModal();
+  };
+  const finishOnboarding = async () => {
+    if (!canContinue) {
+      return;
+    }
+    setIsCompleting(true);
+    setCompletionError(null);
+    try {
+      await markOnboardingComplete();
+      setTimeout(() => router.replace(onboardingConfig.completion.route), 0);
+    } catch (error) {
+      setCompletionError(
+        error instanceof Error ? error.message : 'Unable to finish onboarding. Please try again.'
+      );
+    } finally {
+      setIsCompleting(false);
+    }
+  };
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior="automatic"
+      contentContainerStyle={styles.content}
+      style={[styles.screen, { backgroundColor: colors.background }]}
+    >
+      <View style={styles.header}>
+        <Text style={[styles.kicker, { color: colors.primary }]}>Legal</Text>
+        <Text
+          style={[
+            styles.title,
+            {
+              color: colors.text,
+              fontFamily: theme.typography.fontTitle,
+            },
+          ]}
+        >
+          {onboardingConfig.legal.title}
+        </Text>
+        <Text style={[styles.body, { color: colors.text }]}>{onboardingConfig.legal.body}</Text>
+      </View>
+
+      <View style={styles.stack}>
+        {requiredDocuments.map((document) => (
+          <LegalRow
+            accepted={!missingDocumentIds.has(document.documentId)}
+            documentId={document.documentId}
+            key={document.documentId}
+            onOpen={() => setActiveDocument(document.documentId)}
+          />
+        ))}
+      </View>
+
+      <Pressable
+        accessibilityRole="button"
+        disabled={!canContinue}
+        onPress={() => void finishOnboarding()}
+        style={[
+          styles.primaryButton,
+          {
+            backgroundColor: canContinue ? colors.primary : colors.surface,
+            borderRadius: theme.layout.radius,
+          },
+        ]}
+      >
+        <Text
+          style={[
+            styles.primaryButtonText,
+            {
+              color: canContinue ? primaryForeground : colors.text,
+            },
+          ]}
+        >
+          {isCompleting ? 'Completing...' : onboardingConfig.completion.label}
+        </Text>
+      </Pressable>
+      {completionError ? (
+        <Text style={[styles.errorText, { color: colors.warning }]}>{completionError}</Text>
+      ) : null}
+
+      {activeDocument ? (
+        <LegalDocumentModal
+          documentId={activeDocument}
+          onClose={closeModal}
+          onPrimaryAction={acceptActiveDocument}
+          primaryActionLabel={`Accept ${getLegalDocument(activeDocument).title}`}
+          visible
+        />
+      ) : null}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+  },
+  content: {
+    flexGrow: 1,
+    gap: 18,
+    justifyContent: 'center',
+    padding: 20,
+    paddingTop: Platform.OS === 'web' ? 84 : 28,
+  },
+  header: {
+    gap: 8,
+  },
+  kicker: {
+    fontSize: 13,
+    fontWeight: '900',
+    textTransform: 'uppercase',
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '900',
+    lineHeight: 34,
+  },
+  body: {
+    fontSize: 15,
+    lineHeight: 22,
+    maxWidth: 720,
+  },
+  stack: {
+    gap: 12,
+  },
+  documentCard: {
+    alignItems: 'center',
+    borderWidth: 1,
+    flexDirection: 'row',
+    gap: 12,
+    padding: 16,
+  },
+  documentText: {
+    flex: 1,
+    gap: 4,
+  },
+  documentTitle: {
+    fontSize: 17,
+    fontWeight: '900',
+  },
+  documentMeta: {
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  documentAction: {
+    fontSize: 13,
+    fontWeight: '900',
+  },
+  primaryButton: {
+    alignItems: 'center',
+    marginTop: 4,
+    paddingVertical: 15,
+  },
+  primaryButtonText: {
+    fontSize: 15,
+    fontWeight: '900',
+  },
+  errorText: {
+    fontSize: 13,
+    fontWeight: '800',
+    lineHeight: 19,
+  },
+});

package/assets/mds/src/features/onboarding/onboarding-config-with-legal.ts

@@ -0,0 +1,104 @@
+import type { Href } from 'expo-router';
+
+export type OnboardingCompletionMode = 'enter-app' | 'auth' | 'account-setup' | 'custom';
+
+export interface OnboardingValueProp {
+  title: string;
+  body: string;
+}
+
+export interface OnboardingFeatureHighlight {
+  id: string;
+  title: string;
+  body: string;
+  badge?: string;
+}
+
+export interface OnboardingCompletionConfig {
+  mode: OnboardingCompletionMode;
+  route: Href;
+  label: string;
+  helperText: string;
+}
+
+export interface OnboardingConfig {
+  appName: string;
+  welcomeEyebrow: string;
+  welcomeTitle: string;
+  welcomeBody: string;
+  valueProps: OnboardingValueProp[];
+  nextRouteAfterWelcome: Href;
+  featuresEyebrow: string;
+  featuresTitle: string;
+  featuresBody: string;
+  featureHighlights: OnboardingFeatureHighlight[];
+  nextRouteAfterFeatures: Href;
+  legal: {
+    title: string;
+    body: string;
+  };
+  completeTitle: string;
+  completeBody: string;
+  completion: OnboardingCompletionConfig;
+}
+
+export const onboardingConfig: OnboardingConfig = {
+  appName: '__MDS_APP_NAME__',
+  welcomeEyebrow: 'Welcome',
+  welcomeTitle: 'A quick tour before you begin',
+  welcomeBody:
+    'See the core workflow, review what the app can do, and continue when you are ready.',
+  valueProps: [
+    {
+      title: 'Start with the main job',
+      body: 'The first screen should explain the app in plain customer-facing language.',
+    },
+    {
+      title: 'Show real value',
+      body: 'Use the second screen to highlight features, integrations, or product moments that matter.',
+    },
+    {
+      title: 'Hand off cleanly',
+      body: 'The final action is editable for app entry, auth, account setup, or a custom route.',
+    },
+  ],
+  nextRouteAfterWelcome: '/onboarding/features' as Href,
+  featuresEyebrow: 'Features',
+  featuresTitle: 'What you can do next',
+  featuresBody:
+    'These highlights are informational by default, so users are not asked to make choices before those choices affect the app.',
+  featureHighlights: [
+    {
+      id: 'workflow',
+      title: 'Follow the core workflow',
+      body: 'Explain the shortest path from the user arriving to getting meaningful work done.',
+      badge: 'Core',
+    },
+    {
+      id: 'integrations',
+      title: 'Introduce optional integrations',
+      body: 'Mention connected services only when they expand the product value without blocking setup.',
+      badge: 'Optional',
+    },
+    {
+      id: 'control',
+      title: 'Keep the user in control',
+      body: 'Avoid collecting preferences until the app stores them or changes behavior from them.',
+      badge: 'Simple',
+    },
+  ],
+  nextRouteAfterFeatures: '/onboarding/legal' as Href,
+  legal: {
+    title: 'Review legal documents',
+    body: 'Review the Terms of Service and Privacy Policy before continuing.',
+  },
+  completeTitle: 'You are ready to begin',
+  completeBody:
+    'Continue into the next step of the app. Wire this final action to auth, account setup, or the main product route.',
+  completion: {
+    mode: 'enter-app',
+    route: '/' as Href,
+    label: "Let's begin",
+    helperText: 'Persist or replace this choice when real onboarding state is ready.',
+  },
+};

package/assets/mds/src/features/onboarding/onboarding-config.ts

@@ -0,0 +1,104 @@
+import type { Href } from 'expo-router';
+
+export type OnboardingCompletionMode = 'enter-app' | 'auth' | 'account-setup' | 'custom';
+
+export interface OnboardingValueProp {
+  title: string;
+  body: string;
+}
+
+export interface OnboardingFeatureHighlight {
+  id: string;
+  title: string;
+  body: string;
+  badge?: string;
+}
+
+export interface OnboardingCompletionConfig {
+  mode: OnboardingCompletionMode;
+  route: Href;
+  label: string;
+  helperText: string;
+}
+
+export interface OnboardingConfig {
+  appName: string;
+  welcomeEyebrow: string;
+  welcomeTitle: string;
+  welcomeBody: string;
+  valueProps: OnboardingValueProp[];
+  nextRouteAfterWelcome: Href;
+  featuresEyebrow: string;
+  featuresTitle: string;
+  featuresBody: string;
+  featureHighlights: OnboardingFeatureHighlight[];
+  nextRouteAfterFeatures: Href;
+  legal: {
+    title: string;
+    body: string;
+  };
+  completeTitle: string;
+  completeBody: string;
+  completion: OnboardingCompletionConfig;
+}
+
+export const onboardingConfig: OnboardingConfig = {
+  appName: '__MDS_APP_NAME__',
+  welcomeEyebrow: 'Welcome',
+  welcomeTitle: 'A quick tour before you begin',
+  welcomeBody:
+    'See the core workflow, review what the app can do, and continue when you are ready.',
+  valueProps: [
+    {
+      title: 'Start with the main job',
+      body: 'The first screen should explain the app in plain customer-facing language.',
+    },
+    {
+      title: 'Show real value',
+      body: 'Use the second screen to highlight features, integrations, or product moments that matter.',
+    },
+    {
+      title: 'Hand off cleanly',
+      body: 'The final action is editable for app entry, auth, account setup, or a custom route.',
+    },
+  ],
+  nextRouteAfterWelcome: '/onboarding/features' as Href,
+  featuresEyebrow: 'Features',
+  featuresTitle: 'What you can do next',
+  featuresBody:
+    'These highlights are informational by default, so users are not asked to make choices before those choices affect the app.',
+  featureHighlights: [
+    {
+      id: 'workflow',
+      title: 'Follow the core workflow',
+      body: 'Explain the shortest path from the user arriving to getting meaningful work done.',
+      badge: 'Core',
+    },
+    {
+      id: 'integrations',
+      title: 'Introduce optional integrations',
+      body: 'Mention connected services only when they expand the product value without blocking setup.',
+      badge: 'Optional',
+    },
+    {
+      id: 'control',
+      title: 'Keep the user in control',
+      body: 'Avoid collecting preferences until the app stores them or changes behavior from them.',
+      badge: 'Simple',
+    },
+  ],
+  nextRouteAfterFeatures: '/onboarding/complete' as Href,
+  legal: {
+    title: 'Review legal documents',
+    body: 'Review the Terms of Service and Privacy Policy before continuing.',
+  },
+  completeTitle: 'You are ready to begin',
+  completeBody:
+    'Continue into the next step of the app. Wire this final action to auth, account setup, or the main product route.',
+  completion: {
+    mode: 'enter-app',
+    route: '/' as Href,
+    label: "Let's begin",
+    helperText: 'Persist or replace this choice when real onboarding state is ready.',
+  },
+};

package/assets/mds/src/features/onboarding/onboarding-persistence-sync.tsx

@@ -0,0 +1 @@
+export { OnboardingPersistenceSync } from '../onboarding-state/onboarding-state-adapter';

package/assets/mds/src/features/onboarding/welcome-screen.tsx

@@ -0,0 +1,130 @@
+import { Link } from 'expo-router';
+import { Platform, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { getReadableTextColor } from '../../theme/color-utils';
+import { useAppTheme } from '../../theme/provider';
+import { onboardingConfig } from './onboarding-config';
+
+export default function OnboardingWelcomeScreen() {
+  const theme = useAppTheme();
+  const colors = theme.activeColors;
+  const primaryForeground = getReadableTextColor(colors.primary, theme.colors.light.text);
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior="automatic"
+      contentContainerStyle={styles.content}
+      style={[styles.screen, { backgroundColor: colors.background }]}>
+      <View style={styles.header}>
+        <Text style={[styles.eyebrow, { color: colors.primary }]}>
+          {onboardingConfig.welcomeEyebrow}
+        </Text>
+        <Text
+          style={[
+            styles.title,
+            {
+              color: colors.text,
+              fontFamily: theme.typography.fontTitle,
+              fontSize: Math.max(28, theme.typography.displaySize),
+            },
+          ]}>
+          {onboardingConfig.appName}
+        </Text>
+        <Text style={[styles.subtitle, { color: colors.text }]}>
+          {onboardingConfig.welcomeTitle}
+        </Text>
+        <Text style={[styles.body, { color: colors.text }]}>{onboardingConfig.welcomeBody}</Text>
+      </View>
+
+      <View style={styles.stack}>
+        {onboardingConfig.valueProps.map((item) => (
+          <View
+            key={item.title}
+            style={[
+              styles.card,
+              {
+                backgroundColor: colors.surface,
+                borderColor: colors.primary,
+                borderRadius: theme.layout.radius,
+              },
+            ]}>
+            <Text style={[styles.cardTitle, { color: colors.text }]}>{item.title}</Text>
+            <Text style={[styles.cardBody, { color: colors.text }]}>{item.body}</Text>
+          </View>
+        ))}
+      </View>
+
+      <Link href={onboardingConfig.nextRouteAfterWelcome} asChild>
+        <Pressable
+          accessibilityRole="button"
+          style={StyleSheet.flatten([
+            styles.primaryButton,
+            { backgroundColor: colors.primary, borderRadius: theme.layout.radius },
+          ])}>
+          <Text style={[styles.primaryButtonText, { color: primaryForeground }]}>Get started</Text>
+        </Pressable>
+      </Link>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+  },
+  content: {
+    flexGrow: 1,
+    gap: 18,
+    justifyContent: 'center',
+    padding: 20,
+    paddingTop: Platform.OS === 'web' ? 84 : 28,
+  },
+  header: {
+    gap: 8,
+  },
+  eyebrow: {
+    fontSize: 13,
+    fontWeight: '900',
+    textTransform: 'uppercase',
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: '900',
+    lineHeight: 38,
+  },
+  subtitle: {
+    fontSize: 20,
+    fontWeight: '800',
+    lineHeight: 26,
+  },
+  body: {
+    fontSize: 15,
+    lineHeight: 22,
+    maxWidth: 680,
+  },
+  stack: {
+    gap: 12,
+  },
+  card: {
+    borderWidth: 1,
+    gap: 6,
+    padding: 16,
+  },
+  cardTitle: {
+    fontSize: 17,
+    fontWeight: '900',
+  },
+  cardBody: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  primaryButton: {
+    alignItems: 'center',
+    marginTop: 4,
+    paddingVertical: 15,
+  },
+  primaryButtonText: {
+    fontSize: 15,
+    fontWeight: '900',
+  },
+});

package/assets/mds/src/features/onboarding-state/adapters/memory-onboarding-state-adapter.ts

@@ -0,0 +1,15 @@
+import { configureLegalAcceptanceAdapter } from '../legal/legal-acceptance-config';
+import { configureOnboardingStateAdapter } from './onboarding-state-core';
+import { createMemoryOnboardingPersistence } from './onboarding-state-memory';
+
+const persistence = createMemoryOnboardingPersistence();
+
+configureOnboardingStateAdapter(persistence.onboarding);
+configureLegalAcceptanceAdapter(persistence.legal);
+
+export const onboardingStateAdapter = persistence.onboarding;
+export const legalAcceptanceAdapter = persistence.legal;
+
+export function OnboardingPersistenceSync() {
+  return null;
+}

package/assets/mds/src/features/onboarding-state/adapters/supabase-onboarding-state-adapter.ts

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+
+import { useAuth } from '../auth/auth-provider';
+import {
+  configureLegalAcceptanceAdapter,
+  setLegalAcceptanceUserId,
+} from '../legal/legal-acceptance-config';
+import { getSupabaseClient } from '../../services/supabase';
+import {
+  configureOnboardingStateAdapter,
+  getOnboardingStateAdapter,
+  setOnboardingStateUserId,
+} from './onboarding-state-core';
+import {
+  createSupabaseLegalAcceptanceAdapter,
+  createSupabaseOnboardingStateAdapter,
+  type SupabaseOnboardingClient,
+  type SupabaseClientFactory,
+} from './onboarding-state-supabase';
+
+const getClient: SupabaseClientFactory = () =>
+  getSupabaseClient() as unknown as SupabaseOnboardingClient;
+
+export const onboardingStateAdapter = createSupabaseOnboardingStateAdapter(getClient);
+export const legalAcceptanceAdapter = createSupabaseLegalAcceptanceAdapter(getClient);
+
+configureOnboardingStateAdapter(onboardingStateAdapter);
+configureLegalAcceptanceAdapter(legalAcceptanceAdapter);
+
+export function OnboardingPersistenceSync() {
+  const auth = useAuth();
+
+  useEffect(() => {
+    const userId = auth.user?.id;
+    setOnboardingStateUserId(userId);
+    setLegalAcceptanceUserId(userId);
+
+    if (!userId) {
+      return;
+    }
+    void getOnboardingStateAdapter().syncPending?.(userId);
+  }, [auth.user?.id]);
+
+  return null;
+}

package/assets/mds/src/features/onboarding-state/adapters/zustand-onboarding-state-adapter.ts

@@ -0,0 +1,16 @@
+import { configureLegalAcceptanceAdapter } from '../legal/legal-acceptance-config';
+import { configureOnboardingStateAdapter } from './onboarding-state-core';
+import {
+  createZustandLegalAcceptanceAdapter,
+  createZustandOnboardingStateAdapter,
+} from './onboarding-state-zustand';
+
+export const onboardingStateAdapter = createZustandOnboardingStateAdapter();
+export const legalAcceptanceAdapter = createZustandLegalAcceptanceAdapter();
+
+configureOnboardingStateAdapter(onboardingStateAdapter);
+configureLegalAcceptanceAdapter(legalAcceptanceAdapter);
+
+export function OnboardingPersistenceSync() {
+  return null;
+}