@dloizides/legal-ui 1.0.1

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+## 1.0.0
+
+Initial release (Capability Wave C1, batch 4). Extracted the proven (erevna+katalogos identical) GDPR
+legal UI: `CookieConsentBanner` + `useCookieConsent` + `ConsentButton`, `PrivacyPolicyModal`,
+`TermsOfServiceModal`, `LegalSection`. Shares the `@dloizides/ui-feedback` context (`useUi`) and
+`@dloizides/ui-icons`. `LegalPage` deferred (app-specific landing/SEO coupling).

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 dloizides
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,43 @@
+# @dloizides/legal-ui
+
+GDPR **cookie-consent banner** + **privacy/terms modals** (RN-web) for the dloizides.com portfolio.
+Reads theme + translations from the shared `@dloizides/ui-feedback` context (`useUi`) and icons from
+`@dloizides/ui-icons`.
+
+## Components
+
+| Export | Purpose |
+|--------|---------|
+| `CookieConsentBanner` | Bottom-of-screen GDPR banner: accept all / reject all / customise; persists in localStorage. |
+| `useCookieConsent` | Hook: `{ consent, showBanner, acceptAll, rejectAll, savePreferences }`. |
+| `PrivacyPolicyModal` / `TermsOfServiceModal` | Full-screen legal modals built from translated sections. |
+| `LegalSection` | Title + body block used inside the modals. |
+| `ConsentButton` | The banner's button primitive. |
+| `LEGAL_TEST_IDS`, `COOKIE_CONSENT_STORAGE_KEY`, `CONSENT_VERSION`, `CookieConsent` | constants/types. |
+
+`LegalPage` (the full standalone legal screen) is intentionally NOT here — it couples to app-specific
+landing layout + SEO; extract when shared.
+
+## Install
+
+```bash
+npm install @dloizides/legal-ui @dloizides/ui-feedback @dloizides/ui-icons react-native-svg
+```
+
+## Usage
+
+Mount a `FeedbackUiProvider` / `UiProvider` (from `@dloizides/ui-feedback`) at the app root, then render
+the banner once:
+
+```tsx
+import { CookieConsentBanner } from '@dloizides/legal-ui';
+
+<CookieConsentBanner />
+```
+
+The components call the injected `t(key)` with `cookieConsent.*`, `legal.privacyPolicy.*`,
+`legal.termsOfService.*` and `common.close*` keys — provide them in your locale files.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,124 @@
+import React from 'react';
+
+/**
+ * GDPR Cookie Consent Banner.
+ *
+ * Appears at the bottom of the screen on first visit. Allows the user to accept all,
+ * reject all, or customise analytics/marketing cookies. Consent is persisted in
+ * localStorage (via useCookieConsent) so the banner only shows once.
+ */
+
+declare const CookieConsentBanner: () => React.ReactElement | null;
+
+/**
+ * Reusable button for the cookie consent banner.
+ * Supports primary (filled) and secondary (outlined) variants. Colours are passed in.
+ */
+
+interface ConsentButtonProps {
+    label: string;
+    testID: string;
+    textColor: string;
+    onPress: () => void;
+    a11yHint: string;
+    primary?: boolean;
+    primaryColor?: string;
+    borderColor?: string;
+}
+declare const ConsentButton: ({ label, testID, textColor, onPress, a11yHint, primary, primaryColor, borderColor, }: ConsentButtonProps) => React.ReactElement;
+
+/**
+ * Types for the GDPR cookie consent system.
+ */
+/** Current version of the consent schema. Bump when consent categories change. */
+declare const CONSENT_VERSION = "1.0";
+/** Shape of the consent record persisted in localStorage. */
+interface CookieConsent {
+    /** Always true — essential cookies cannot be disabled. */
+    necessary: true;
+    /** Whether the user opted in to analytics cookies. */
+    analytics: boolean;
+    /** Whether the user opted in to marketing cookies. */
+    marketing: boolean;
+    /** ISO-8601 timestamp of when consent was given. */
+    consentedAt: string;
+    /** Schema version that was active when consent was captured. */
+    version: string;
+}
+
+interface UseCookieConsentReturn {
+    /** Current consent record, or null if user has not yet responded. */
+    consent: CookieConsent | null;
+    /** Whether the banner should be shown (no consent recorded yet). */
+    showBanner: boolean;
+    /** Accept all cookie categories. */
+    acceptAll: () => void;
+    /** Reject all optional cookie categories. */
+    rejectAll: () => void;
+    /** Save custom category preferences. */
+    savePreferences: (analytics: boolean, marketing: boolean) => void;
+}
+declare function useCookieConsent(): UseCookieConsentReturn;
+
+/**
+ * Privacy Policy modal — full-screen scrollable legal text built from translated sections.
+ * Content keys live in the consuming app's locale files (legal.privacyPolicy.*).
+ */
+
+interface PrivacyPolicyModalProps {
+    visible: boolean;
+    onClose: () => void;
+    /** ISO date shown in the "last updated" line. Defaults to the bundled placeholder. */
+    lastUpdated?: string;
+}
+declare const PrivacyPolicyModal: ({ visible, onClose, lastUpdated, }: PrivacyPolicyModalProps) => React.ReactElement;
+
+/**
+ * Terms of Service modal — full-screen scrollable legal text built from translated sections.
+ * Content keys live in the consuming app's locale files (legal.termsOfService.*).
+ */
+
+interface TermsOfServiceModalProps {
+    visible: boolean;
+    onClose: () => void;
+    /** ISO date shown in the "last updated" line. Defaults to the bundled placeholder. */
+    lastUpdated?: string;
+}
+declare const TermsOfServiceModal: ({ visible, onClose, lastUpdated, }: TermsOfServiceModalProps) => React.ReactElement;
+
+/**
+ * A single section within a legal page (title + body text).
+ */
+
+interface LegalSectionProps {
+    title: string;
+    body: string;
+}
+declare const LegalSection: ({ title, body }: LegalSectionProps) => React.ReactElement;
+
+/**
+ * localStorage key for the persisted consent record. Kept as the exact string the
+ * apps already used so existing visitors' stored consent is preserved after migration.
+ */
+declare const COOKIE_CONSENT_STORAGE_KEY = "COOKIE_CONSENT";
+/**
+ * Default testID strings — match the values the consuming apps already used so existing
+ * Playwright selectors keep working.
+ */
+declare const LEGAL_TEST_IDS: {
+    readonly cookieBanner: "cookie-consent-banner";
+    readonly cookieAcceptAll: "cookie-consent-accept-all";
+    readonly cookieRejectAll: "cookie-consent-reject-all";
+    readonly cookieCustomize: "cookie-consent-customize";
+    readonly cookieSavePreferences: "cookie-consent-save-preferences";
+    readonly cookieEssentialToggle: "cookie-consent-essential-toggle";
+    readonly cookieAnalyticsToggle: "cookie-consent-analytics-toggle";
+    readonly cookieMarketingToggle: "cookie-consent-marketing-toggle";
+    readonly cookiePrivacyLink: "cookie-consent-privacy-link";
+    readonly privacyPolicyScreen: "privacy-policy-screen";
+    readonly privacyPolicyClose: "privacy-policy-close";
+    readonly termsOfServiceScreen: "terms-of-service-screen";
+    readonly termsOfServiceClose: "terms-of-service-close";
+};
+
+export { CONSENT_VERSION, COOKIE_CONSENT_STORAGE_KEY, ConsentButton, type ConsentButtonProps, type CookieConsent, CookieConsentBanner, LEGAL_TEST_IDS, LegalSection, type LegalSectionProps, PrivacyPolicyModal, type PrivacyPolicyModalProps, TermsOfServiceModal, type TermsOfServiceModalProps, type UseCookieConsentReturn, useCookieConsent };

package/dist/index.d.ts

@@ -0,0 +1,124 @@
+import React from 'react';
+
+/**
+ * GDPR Cookie Consent Banner.
+ *
+ * Appears at the bottom of the screen on first visit. Allows the user to accept all,
+ * reject all, or customise analytics/marketing cookies. Consent is persisted in
+ * localStorage (via useCookieConsent) so the banner only shows once.
+ */
+
+declare const CookieConsentBanner: () => React.ReactElement | null;
+
+/**
+ * Reusable button for the cookie consent banner.
+ * Supports primary (filled) and secondary (outlined) variants. Colours are passed in.
+ */
+
+interface ConsentButtonProps {
+    label: string;
+    testID: string;
+    textColor: string;
+    onPress: () => void;
+    a11yHint: string;
+    primary?: boolean;
+    primaryColor?: string;
+    borderColor?: string;
+}
+declare const ConsentButton: ({ label, testID, textColor, onPress, a11yHint, primary, primaryColor, borderColor, }: ConsentButtonProps) => React.ReactElement;
+
+/**
+ * Types for the GDPR cookie consent system.
+ */
+/** Current version of the consent schema. Bump when consent categories change. */
+declare const CONSENT_VERSION = "1.0";
+/** Shape of the consent record persisted in localStorage. */
+interface CookieConsent {
+    /** Always true — essential cookies cannot be disabled. */
+    necessary: true;
+    /** Whether the user opted in to analytics cookies. */
+    analytics: boolean;
+    /** Whether the user opted in to marketing cookies. */
+    marketing: boolean;
+    /** ISO-8601 timestamp of when consent was given. */
+    consentedAt: string;
+    /** Schema version that was active when consent was captured. */
+    version: string;
+}
+
+interface UseCookieConsentReturn {
+    /** Current consent record, or null if user has not yet responded. */
+    consent: CookieConsent | null;
+    /** Whether the banner should be shown (no consent recorded yet). */
+    showBanner: boolean;
+    /** Accept all cookie categories. */
+    acceptAll: () => void;
+    /** Reject all optional cookie categories. */
+    rejectAll: () => void;
+    /** Save custom category preferences. */
+    savePreferences: (analytics: boolean, marketing: boolean) => void;
+}
+declare function useCookieConsent(): UseCookieConsentReturn;
+
+/**
+ * Privacy Policy modal — full-screen scrollable legal text built from translated sections.
+ * Content keys live in the consuming app's locale files (legal.privacyPolicy.*).
+ */
+
+interface PrivacyPolicyModalProps {
+    visible: boolean;
+    onClose: () => void;
+    /** ISO date shown in the "last updated" line. Defaults to the bundled placeholder. */
+    lastUpdated?: string;
+}
+declare const PrivacyPolicyModal: ({ visible, onClose, lastUpdated, }: PrivacyPolicyModalProps) => React.ReactElement;
+
+/**
+ * Terms of Service modal — full-screen scrollable legal text built from translated sections.
+ * Content keys live in the consuming app's locale files (legal.termsOfService.*).
+ */
+
+interface TermsOfServiceModalProps {
+    visible: boolean;
+    onClose: () => void;
+    /** ISO date shown in the "last updated" line. Defaults to the bundled placeholder. */
+    lastUpdated?: string;
+}
+declare const TermsOfServiceModal: ({ visible, onClose, lastUpdated, }: TermsOfServiceModalProps) => React.ReactElement;
+
+/**
+ * A single section within a legal page (title + body text).
+ */
+
+interface LegalSectionProps {
+    title: string;
+    body: string;
+}
+declare const LegalSection: ({ title, body }: LegalSectionProps) => React.ReactElement;
+
+/**
+ * localStorage key for the persisted consent record. Kept as the exact string the
+ * apps already used so existing visitors' stored consent is preserved after migration.
+ */
+declare const COOKIE_CONSENT_STORAGE_KEY = "COOKIE_CONSENT";
+/**
+ * Default testID strings — match the values the consuming apps already used so existing
+ * Playwright selectors keep working.
+ */
+declare const LEGAL_TEST_IDS: {
+    readonly cookieBanner: "cookie-consent-banner";
+    readonly cookieAcceptAll: "cookie-consent-accept-all";
+    readonly cookieRejectAll: "cookie-consent-reject-all";
+    readonly cookieCustomize: "cookie-consent-customize";
+    readonly cookieSavePreferences: "cookie-consent-save-preferences";
+    readonly cookieEssentialToggle: "cookie-consent-essential-toggle";
+    readonly cookieAnalyticsToggle: "cookie-consent-analytics-toggle";
+    readonly cookieMarketingToggle: "cookie-consent-marketing-toggle";
+    readonly cookiePrivacyLink: "cookie-consent-privacy-link";
+    readonly privacyPolicyScreen: "privacy-policy-screen";
+    readonly privacyPolicyClose: "privacy-policy-close";
+    readonly termsOfServiceScreen: "terms-of-service-screen";
+    readonly termsOfServiceClose: "terms-of-service-close";
+};
+
+export { CONSENT_VERSION, COOKIE_CONSENT_STORAGE_KEY, ConsentButton, type ConsentButtonProps, type CookieConsent, CookieConsentBanner, LEGAL_TEST_IDS, LegalSection, type LegalSectionProps, PrivacyPolicyModal, type PrivacyPolicyModalProps, TermsOfServiceModal, type TermsOfServiceModalProps, type UseCookieConsentReturn, useCookieConsent };