@mr.dj2u/library-registry 0.1.0 → 0.3.0

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

@@ -0,0 +1,121 @@
+import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { getReadableTextColor } from '../../theme/color-utils';
+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);
+  const primaryForeground = getReadableTextColor(colors.primary, theme.colors.light.text);
+
+  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, { color: primaryForeground }]}>
+              {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: {
+    fontSize: 15,
+    fontWeight: '900',
+  },
+});

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

@@ -0,0 +1,231 @@
+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} />
+              <LegalDocumentMeta label="Acceptance version" value={document.acceptanceVersion} />
+            </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,
+  },
+});

package/assets/mds/src/features/legal/legal-documents.ts

@@ -0,0 +1,148 @@
+export type LegalDocumentId = 'terms' | 'privacy';
+
+export interface LegalDocumentSection {
+  id: string;
+  title: string;
+  body: string[];
+}
+
+export interface LegalDocument {
+  id: LegalDocumentId;
+  title: string;
+  summary: string;
+  effectiveDate: string;
+  lastUpdated: string;
+  acceptanceVersion: string;
+  requiresReacceptance: boolean;
+  changeSummary: string;
+  sections: LegalDocumentSection[];
+}
+
+export const legalDocumentReplacementWarning =
+  'This placeholder legal text is not legal advice. Replace it with documents reviewed by qualified counsel before production use.';
+
+export const legalDocuments: Record<LegalDocumentId, LegalDocument> = {
+  terms: {
+    id: 'terms',
+    title: 'Terms of Service',
+    summary:
+      'Starter terms for __MDS_APP_NAME__ with common sections your legal reviewer can replace.',
+    effectiveDate: '2026-08-10',
+    lastUpdated: '2026-08-10',
+    acceptanceVersion: '2026-08-10',
+    requiresReacceptance: true,
+    changeSummary:
+      'Initial material Terms of Service version that should be accepted before protected app access.',
+    sections: [
+      {
+        id: 'acceptance',
+        title: 'Acceptance of Terms',
+        body: [
+          'By accessing or using __MDS_APP_NAME__, you agree to these Terms of Service.',
+          'If you do not agree to these terms, do not use the app or service.',
+        ],
+      },
+      {
+        id: 'service-scope',
+        title: 'Service Scope',
+        body: [
+          '__MDS_APP_NAME__ provides the app features, content, workflows, and connected services described in your product documentation.',
+          'Replace this section with a specific description of what your app does and what it does not provide.',
+        ],
+      },
+      {
+        id: 'accounts',
+        title: 'Accounts and Responsibilities',
+        body: [
+          'You are responsible for the accuracy of information you provide and for activity that occurs through your account or device.',
+          'If your app does not use accounts, replace this section with your guest, device, or local-profile expectations.',
+        ],
+      },
+      {
+        id: 'acceptable-use',
+        title: 'Acceptable Use',
+        body: [
+          'Do not misuse the service, attempt unauthorized access, interfere with app operation, or use the app for unlawful activity.',
+          'Add any app-specific content, community, billing, safety, or platform rules before release.',
+        ],
+      },
+      {
+        id: 'third-parties',
+        title: 'Third-Party Services',
+        body: [
+          'The app may link to, integrate with, or depend on third-party services that are governed by their own terms and policies.',
+          'List the providers your app actually uses, including payment, analytics, authentication, storage, or AI services.',
+        ],
+      },
+      {
+        id: 'changes-contact',
+        title: 'Changes and Contact',
+        body: [
+          'These terms may be updated as product functionality, business requirements, or legal obligations change.',
+          '__MDS_LEGAL_BUSINESS_NAME__ is the business responsible for these terms. Direct legal questions to __MDS_LEGAL_CONTACT_EMAIL__ and replace this line with your reviewed notice workflow.',
+          'Replace this placeholder with your business address, jurisdiction, and local notice requirements: __MDS_LEGAL_ADDRESS_OR_REGION_NOTE__.',
+        ],
+      },
+    ],
+  },
+  privacy: {
+    id: 'privacy',
+    title: 'Privacy Policy',
+    summary:
+      'Starter privacy policy for __MDS_APP_NAME__ with common data and rights sections to replace.',
+    effectiveDate: '2026-08-10',
+    lastUpdated: '2026-08-10',
+    acceptanceVersion: '2026-08-10',
+    requiresReacceptance: true,
+    changeSummary:
+      'Initial material Privacy Policy version that should be accepted before protected app access.',
+    sections: [
+      {
+        id: 'data-processed',
+        title: 'Data We Process',
+        body: [
+          '__MDS_APP_NAME__ may process information needed to provide app functionality, support, security, and product improvement.',
+          'Replace this placeholder with the exact categories of personal, device, account, payment, analytics, and content data your app processes.',
+        ],
+      },
+      {
+        id: 'use-of-data',
+        title: 'How Data Is Used',
+        body: [
+          'Data should be used only to operate the app, provide requested features, maintain security, support users, and meet legal obligations.',
+          'Document any analytics, personalization, AI processing, advertising, or business communications that apply to your app.',
+        ],
+      },
+      {
+        id: 'sharing',
+        title: 'Sharing and Third Parties',
+        body: [
+          'Do not claim data is never shared unless that is true for every provider and operational workflow.',
+          'List the third-party processors, infrastructure providers, payment providers, analytics tools, and integrations your app uses.',
+        ],
+      },
+      {
+        id: 'retention-security',
+        title: 'Retention and Security',
+        body: [
+          'Explain how long data is kept, what controls protect it, and how users or administrators can delete data when appropriate.',
+          'Replace this section with retention periods, backup behavior, account deletion behavior, and incident-response commitments.',
+        ],
+      },
+      {
+        id: 'rights-contact',
+        title: 'Your Choices and Contact',
+        body: [
+          'Users may have rights to access, correct, delete, export, restrict, or object to processing depending on jurisdiction, including GDPR and comparable privacy laws.',
+          'For GDPR-facing flows, document your lawful bases, cross-border transfer process, retention rules, and response timelines for data-subject requests.',
+          'Route privacy requests to __MDS_LEGAL_CONTACT_EMAIL__ on behalf of __MDS_LEGAL_BUSINESS_NAME__, and replace this placeholder workflow before production use.',
+          'Replace this location or jurisdiction note with the reviewed business address, EU representative, or regional contact process that applies: __MDS_LEGAL_ADDRESS_OR_REGION_NOTE__.',
+        ],
+      },
+    ],
+  },
+};
+
+export function getLegalDocument(documentId: LegalDocumentId): LegalDocument {
+  return legalDocuments[documentId];
+}

package/assets/mds/src/features/legal/legal-page-route.tsx

@@ -0,0 +1,10 @@
+import { LegalDocumentView } from './legal-document-view';
+import { getLegalDocument, type LegalDocumentId } from './legal-documents';
+
+interface LegalDocumentRouteProps {
+  documentId: LegalDocumentId;
+}
+
+export function LegalDocumentRoute({ documentId }: LegalDocumentRouteProps) {
+  return <LegalDocumentView document={getLegalDocument(documentId)} />;
+}