@mr.dj2u/library-registry 0.0.0 → 0.2.0

package/assets/mds/src/features/legal/legal-agreement-screen.tsx

@@ -0,0 +1,198 @@
+import { useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { useAppTheme } from '../../theme/provider';
+import { LegalDocumentModal } from './legal-document-modal';
+import { getLegalDocument, type LegalDocumentId } from './legal-documents';
+import { useLegalAcceptance } from './use-legal-acceptance';
+
+interface LegalAgreementScreenProps {
+  continueLabel?: string;
+  onComplete?: () => void;
+}
+
+function AgreementRow({
+  documentId,
+  accepted,
+  onOpen,
+}: {
+  documentId: LegalDocumentId;
+  accepted: boolean;
+  onOpen: () => void;
+}) {
+  const theme = useAppTheme();
+  const colors = theme.activeColors;
+  const document = getLegalDocument(documentId);
+
+  return (
+    <View
+      style={[
+        styles.card,
+        {
+          backgroundColor: colors.surface,
+          borderColor: accepted ? colors.success : colors.primary,
+          borderRadius: theme.layout.radius,
+        },
+      ]}>
+      <View style={styles.cardText}>
+        <Text style={[styles.cardTitle, { color: colors.text }]}>{document.title}</Text>
+        <Text style={[styles.cardSummary, { color: colors.text }]}>
+          Last updated {document.lastUpdated}
+        </Text>
+      </View>
+      <Pressable
+        accessibilityRole="button"
+        onPress={onOpen}
+        style={[
+          styles.reviewButton,
+          {
+            backgroundColor: accepted ? colors.success : colors.primary,
+            borderRadius: Math.max(8, theme.layout.radius - 4),
+          },
+        ]}>
+        <Text style={styles.reviewButtonText}>{accepted ? 'Accepted' : 'Review'}</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+export function LegalAgreementScreen({
+  continueLabel = 'Continue',
+  onComplete,
+}: LegalAgreementScreenProps) {
+  const theme = useAppTheme();
+  const colors = theme.activeColors;
+  const [activeDocument, setActiveDocument] = useState<LegalDocumentId | null>(null);
+  const {
+    acceptedDocuments,
+    acceptDocument,
+    hasAcceptedRequiredDocuments,
+  } = useLegalAcceptance();
+  const canContinue = hasAcceptedRequiredDocuments && Boolean(onComplete);
+
+  const closeModal = () => setActiveDocument(null);
+  const acceptActiveDocument = () => {
+    if (activeDocument) {
+      acceptDocument(activeDocument);
+    }
+    closeModal();
+  };
+
+  return (
+    <View style={[styles.screen, { backgroundColor: colors.background }]}>
+      <View style={styles.header}>
+        <Text style={[styles.title, { color: colors.text }]}>Legal agreements</Text>
+        <Text style={[styles.body, { color: colors.text }]}>
+          Review and accept the Terms of Service and Privacy Policy before continuing.
+        </Text>
+      </View>
+
+      <View style={styles.stack}>
+        <AgreementRow
+          accepted={acceptedDocuments.terms}
+          documentId="terms"
+          onOpen={() => setActiveDocument('terms')}
+        />
+        <AgreementRow
+          accepted={acceptedDocuments.privacy}
+          documentId="privacy"
+          onOpen={() => setActiveDocument('privacy')}
+        />
+      </View>
+
+      <Pressable
+        accessibilityRole="button"
+        disabled={!canContinue}
+        onPress={onComplete}
+        style={[
+          styles.continueButton,
+          {
+            backgroundColor: canContinue ? colors.primary : colors.surface,
+            borderRadius: theme.layout.radius,
+          },
+        ]}>
+        <Text
+          style={[
+            styles.continueButtonText,
+            { color: canContinue ? '#ffffff' : colors.text },
+          ]}>
+          {continueLabel}
+        </Text>
+      </Pressable>
+
+      {activeDocument ? (
+        <LegalDocumentModal
+          documentId={activeDocument}
+          onClose={closeModal}
+          onPrimaryAction={acceptActiveDocument}
+          primaryActionLabel={`Accept ${getLegalDocument(activeDocument).title}`}
+          visible
+        />
+      ) : null}
+    </View>
+  );
+}
+
+export default LegalAgreementScreen;
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    gap: 18,
+    padding: 20,
+    paddingTop: 72,
+  },
+  header: {
+    gap: 8,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '900',
+  },
+  body: {
+    fontSize: 15,
+    lineHeight: 22,
+  },
+  stack: {
+    gap: 12,
+  },
+  card: {
+    alignItems: 'center',
+    borderWidth: 1,
+    flexDirection: 'row',
+    gap: 12,
+    padding: 14,
+  },
+  cardText: {
+    flex: 1,
+    gap: 4,
+  },
+  cardTitle: {
+    fontSize: 17,
+    fontWeight: '900',
+  },
+  cardSummary: {
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  reviewButton: {
+    alignItems: 'center',
+    minWidth: 94,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+  },
+  reviewButtonText: {
+    color: '#ffffff',
+    fontSize: 13,
+    fontWeight: '900',
+  },
+  continueButton: {
+    alignItems: 'center',
+    marginTop: 'auto',
+    paddingVertical: 15,
+  },
+  continueButtonText: {
+    fontSize: 15,
+    fontWeight: '900',
+  },
+});

package/assets/mds/src/features/legal/legal-document-links.tsx

@@ -0,0 +1,85 @@
+import { Link } from 'expo-router';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { useAppTheme } from '../../theme/provider';
+
+interface LegalDocumentLinksProps {
+  orientation?: 'horizontal' | 'vertical';
+  showDescription?: boolean;
+}
+
+const legalLinks = [
+  {
+    href: '/terms',
+    label: 'Terms of Service',
+    description: 'Review app usage, account, and service terms.',
+  },
+  {
+    href: '/privacy',
+    label: 'Privacy Policy',
+    description: 'Review data processing, retention, and user choices.',
+  },
+] as const;
+
+export function LegalDocumentLinks({
+  orientation = 'vertical',
+  showDescription = true,
+}: LegalDocumentLinksProps) {
+  const theme = useAppTheme();
+  const colors = theme.activeColors;
+
+  return (
+    <View style={[styles.group, orientation === 'horizontal' && styles.horizontal]}>
+      {legalLinks.map((item) => (
+        <Link key={item.href} href={item.href} asChild>
+          <Pressable
+            accessibilityRole="link"
+            style={[
+              styles.linkCard,
+              {
+                backgroundColor: colors.surface,
+                borderColor: colors.primary,
+                borderRadius: theme.layout.radius,
+              },
+              orientation === 'horizontal' && styles.horizontalCard,
+            ]}>
+            <Text style={[styles.linkLabel, { color: colors.text }]}>{item.label}</Text>
+            {showDescription ? (
+              <Text style={[styles.linkDescription, { color: colors.text }]}>
+                {item.description}
+              </Text>
+            ) : null}
+          </Pressable>
+        </Link>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  group: {
+    gap: 10,
+  },
+  horizontal: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  linkCard: {
+    borderWidth: 1,
+    gap: 4,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+  },
+  horizontalCard: {
+    flex: 1,
+    minWidth: 180,
+  },
+  linkLabel: {
+    fontSize: 15,
+    fontWeight: '900',
+  },
+  linkDescription: {
+    fontSize: 13,
+    lineHeight: 18,
+  },
+});

package/assets/mds/src/features/legal/legal-document-modal.tsx

@@ -0,0 +1,117 @@
+import { Modal, Pressable, SafeAreaView, StyleSheet, Text, View } from 'react-native';
+
+import { useAppTheme } from '../../theme/provider';
+import { LegalDocumentView } from './legal-document-view';
+import { getLegalDocument, type LegalDocumentId } from './legal-documents';
+
+interface LegalDocumentModalProps {
+  documentId: LegalDocumentId;
+  visible: boolean;
+  onClose: () => void;
+  onPrimaryAction?: () => void;
+  primaryActionLabel?: string;
+}
+
+export function LegalDocumentModal({
+  documentId,
+  visible,
+  onClose,
+  onPrimaryAction,
+  primaryActionLabel = 'Done',
+}: LegalDocumentModalProps) {
+  const theme = useAppTheme();
+  const colors = theme.activeColors;
+  const document = getLegalDocument(documentId);
+
+  return (
+    <Modal animationType="slide" presentationStyle="pageSheet" visible={visible}>
+      <SafeAreaView style={[styles.screen, { backgroundColor: colors.background }]}>
+        <View style={[styles.header, { borderBottomColor: colors.surface }]}>
+          <View style={styles.headerText}>
+            <Text style={[styles.title, { color: colors.text }]}>{document.title}</Text>
+            <Text style={[styles.updated, { color: colors.text }]}>
+              Last updated: {document.lastUpdated}
+            </Text>
+          </View>
+          <Pressable
+            accessibilityLabel={`Close ${document.title}`}
+            accessibilityRole="button"
+            onPress={onClose}
+            style={[
+              styles.closeButton,
+              {
+                backgroundColor: colors.surface,
+                borderRadius: Math.max(8, theme.layout.radius - 4),
+              },
+            ]}>
+            <Text style={[styles.closeText, { color: colors.text }]}>X</Text>
+          </Pressable>
+        </View>
+        <LegalDocumentView document={document} showHeader={false} />
+        <View style={[styles.footer, { borderTopColor: colors.surface }]}>
+          <Pressable
+            accessibilityRole="button"
+            onPress={onPrimaryAction ?? onClose}
+            style={[
+              styles.primaryButton,
+              {
+                backgroundColor: colors.primary,
+                borderRadius: theme.layout.radius,
+              },
+            ]}>
+            <Text style={styles.primaryButtonText}>{primaryActionLabel}</Text>
+          </Pressable>
+        </View>
+      </SafeAreaView>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+  },
+  header: {
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    flexDirection: 'row',
+    gap: 12,
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+  },
+  headerText: {
+    flex: 1,
+    gap: 3,
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: '900',
+  },
+  updated: {
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  closeButton: {
+    alignItems: 'center',
+    height: 40,
+    justifyContent: 'center',
+    width: 40,
+  },
+  closeText: {
+    fontSize: 15,
+    fontWeight: '900',
+  },
+  footer: {
+    borderTopWidth: 1,
+    padding: 20,
+  },
+  primaryButton: {
+    alignItems: 'center',
+    paddingVertical: 14,
+  },
+  primaryButtonText: {
+    color: '#ffffff',
+    fontSize: 15,
+    fontWeight: '900',
+  },
+});

package/assets/mds/src/features/legal/legal-document-view.tsx

@@ -0,0 +1,230 @@
+import type { ReactNode } from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { useAppTheme } from '../../theme/provider';
+import {
+  legalDocumentReplacementWarning,
+  type LegalDocument,
+} from './legal-documents';
+
+interface LegalDocumentViewProps {
+  document: LegalDocument;
+  footer?: ReactNode;
+  showHeader?: boolean;
+}
+
+function LegalDocumentMeta({ label, value }: { label: string; value: string }) {
+  const theme = useAppTheme();
+  const colors = theme.activeColors;
+
+  return (
+    <View
+      style={[
+        styles.metaItem,
+        {
+          backgroundColor: colors.surface,
+          borderColor: colors.surface,
+          borderRadius: theme.layout.radius,
+        },
+      ]}>
+      <Text style={[styles.metaLabel, { color: colors.text }]}>{label}</Text>
+      <Text style={[styles.metaValue, { color: colors.text }]}>{value}</Text>
+    </View>
+  );
+}
+
+function LegalSectionItem({ title, body }: { title: string; body: string[] }) {
+  const theme = useAppTheme();
+  const colors = theme.activeColors;
+
+  return (
+    <View
+      style={[
+        styles.section,
+        {
+          backgroundColor: colors.surface,
+          borderColor: colors.primary,
+          borderRadius: theme.layout.radius,
+        },
+      ]}>
+      <Text
+        style={[
+          styles.sectionTitle,
+          {
+            color: colors.text,
+            fontFamily: theme.typography.fontFamily,
+          },
+        ]}>
+        {title}
+      </Text>
+      <View style={styles.paragraphs}>
+        {body.map((paragraph, index) => (
+          <Text
+            key={`${title}-${index}`}
+            style={[
+              styles.sectionBody,
+              {
+                color: colors.text,
+                fontFamily: theme.typography.fontBody,
+                fontSize: theme.typography.bodySize,
+              },
+            ]}>
+            {paragraph}
+          </Text>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+export function LegalDocumentView({
+  document,
+  footer,
+  showHeader = true,
+}: LegalDocumentViewProps) {
+  const theme = useAppTheme();
+  const colors = theme.activeColors;
+
+  return (
+    <ScrollView
+      contentContainerStyle={styles.content}
+      style={[styles.screen, { backgroundColor: colors.background }]}>
+      <View style={styles.document}>
+        {showHeader ? (
+          <View style={styles.header}>
+            <Text
+              style={[
+                styles.title,
+                {
+                  color: colors.text,
+                  fontFamily: theme.typography.fontFamily,
+                },
+              ]}>
+              {document.title}
+            </Text>
+            <Text
+              style={[
+                styles.summary,
+                {
+                  color: colors.text,
+                  fontFamily: theme.typography.fontBody,
+                  fontSize: theme.typography.bodySize,
+                },
+              ]}>
+              {document.summary}
+            </Text>
+            <View style={styles.metaRow}>
+              <LegalDocumentMeta label="Effective" value={document.effectiveDate} />
+              <LegalDocumentMeta label="Last updated" value={document.lastUpdated} />
+            </View>
+          </View>
+        ) : null}
+
+        <View
+          style={[
+            styles.warning,
+            {
+              backgroundColor: colors.surface,
+              borderColor: colors.warning,
+              borderRadius: theme.layout.radius,
+            },
+          ]}>
+          <Text style={[styles.warningTitle, { color: colors.text }]}>Replacement required</Text>
+          <Text
+            style={[
+              styles.warningBody,
+              {
+                color: colors.text,
+                fontFamily: theme.typography.fontBody,
+              },
+            ]}>
+            {legalDocumentReplacementWarning}
+          </Text>
+        </View>
+
+        {document.sections.map((section) => (
+          <LegalSectionItem key={section.id} title={section.title} body={section.body} />
+        ))}
+        {footer}
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+  },
+  content: {
+    alignItems: 'center',
+    flexGrow: 1,
+    padding: 24,
+    paddingBottom: 48,
+    paddingTop: 48,
+  },
+  document: {
+    gap: 16,
+    maxWidth: 920,
+    width: '100%',
+  },
+  header: {
+    gap: 12,
+  },
+  title: {
+    fontSize: 30,
+    fontWeight: '900',
+  },
+  summary: {
+    fontSize: 15,
+    lineHeight: 22,
+  },
+  metaRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 10,
+  },
+  metaItem: {
+    borderWidth: 1,
+    gap: 2,
+    paddingHorizontal: 12,
+    paddingVertical: 9,
+  },
+  metaLabel: {
+    fontSize: 11,
+    fontWeight: '800',
+    textTransform: 'uppercase',
+  },
+  metaValue: {
+    fontSize: 13,
+    fontWeight: '800',
+  },
+  warning: {
+    borderWidth: 1,
+    gap: 6,
+    padding: 14,
+  },
+  warningTitle: {
+    fontSize: 14,
+    fontWeight: '900',
+  },
+  warningBody: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  section: {
+    borderWidth: 1,
+    gap: 10,
+    padding: 16,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '900',
+  },
+  paragraphs: {
+    gap: 10,
+  },
+  sectionBody: {
+    fontSize: 15,
+    lineHeight: 23,
+  },
+});