@osano/osano-cmp-react-native 0.1.0

package/src/styles.ts

@@ -0,0 +1,203 @@
+import { Platform, StyleSheet } from 'react-native';
+import {
+	contrastRgb,
+	darken,
+	lighten,
+	luminosityGrayscale,
+	parseColor,
+} from './utils/Color';
+
+import type { Config } from './types/consent-config';
+import { DEFAULT_CONFIG } from './ConsentManager';
+
+type ColorLookupTableType = [
+	color: [r: number, g: number, b: number, a?: number],
+	contrast?: number,
+	disabledColor?: number,
+];
+
+const colorLookupTable: Record<string, ColorLookupTableType> = {};
+const ARIA_CONTRAST_AMOUNT = 0.08;
+/**
+ * @param {String} color
+ * @returns {[parsedColor: [red: Number, green: Number, blue: Number], contrast: Number, disabledColor: Number]}
+ */
+const lookupColor = (color: string) => {
+	const lookup = colorLookupTable[`${color}`] || [parseColor(color)];
+	lookup[1] = lookup[1] ?? contrastRgb(...lookup[0]);
+	lookup[2] = lookup[2] ?? luminosityGrayscale(...lookup[0]);
+	colorLookupTable[`${color}`] = lookup;
+	return lookup;
+};
+
+export const createContrastColor = (
+	color: string,
+	amount = ARIA_CONTRAST_AMOUNT,
+) => {
+	const [, contrast] = lookupColor(color);
+	return (amount < 0 ? !contrast : contrast)
+		? lighten(color, Math.abs(amount))
+		: darken(color, Math.abs(amount));
+};
+
+export const createSharedStyles = (config?: Config) => {
+	const {
+		buttonBackgroundColor,
+		buttonForegroundColor,
+		buttonDenyBackgroundColor,
+		buttonDenyForegroundColor,
+		dialogBackgroundColor,
+		dialogForegroundColor,
+		infoDialogBackgroundColor,
+		infoDialogForegroundColor,
+		infoDialogOverlayColor,
+		linkColor,
+		toggleOffBackgroundColor,
+		toggleButtonOffColor,
+		toggleOnBackgroundColor,
+		toggleButtonOnColor,
+	} = config?.palette || DEFAULT_CONFIG.palette;
+
+	const clearDialogBackground = `rgba(${parseColor(infoDialogBackgroundColor)
+		.slice(0, 3)
+		.join(',')},0)`;
+
+	return StyleSheet.create({
+		grow: {
+			flex: 1,
+		},
+		row: {
+			flexDirection: 'row',
+		},
+		rowReverse: {
+			flexDirection: 'row-reverse',
+		},
+		col: {
+			flexDirection: 'column',
+		},
+		colReverse: {
+			flexDirection: 'column-reverse',
+		},
+		ltr: {
+			textAlign: 'left',
+			writingDirection: Platform.OS !== 'web' ? 'ltr' : undefined,
+		},
+		rtl: {
+			textAlign: 'right',
+			writingDirection: Platform.OS !== 'web' ? 'rtl' : undefined,
+		},
+		alignStart: {
+			alignItems: 'flex-start',
+		},
+		alignCenter: {
+			alignItems: 'center',
+		},
+		alignEnd: {
+			alignItems: 'flex-end',
+		},
+		justifyStart: {
+			justifyContent: 'flex-start',
+		},
+		justifyCenter: {
+			justifyContent: 'center',
+		},
+		justifyEnd: {
+			justifyContent: 'flex-end',
+		},
+		dialog: {
+			backgroundColor: dialogBackgroundColor,
+		},
+		dialogText: {
+			color: dialogForegroundColor,
+		},
+		dialogClose: {
+			color: dialogForegroundColor,
+		},
+		dialogCloseFocus: {
+			backgroundColor: dialogForegroundColor,
+			borderColor: dialogForegroundColor,
+		},
+		dialogCloseHover: {
+			color: createContrastColor(dialogForegroundColor),
+		},
+		dialogOverlay: {
+			backgroundColor: infoDialogOverlayColor,
+		},
+		drawer: {
+			backgroundColor: infoDialogBackgroundColor,
+			borderColor: infoDialogForegroundColor,
+			flex: 1,
+			padding: 0,
+		},
+		drawerText: {
+			color: infoDialogForegroundColor,
+		},
+		drawerHeader: {
+			backgroundColor: `linear-gradient(180deg, ${infoDialogBackgroundColor} 2.5em, ${clearDialogBackground} 100%)`,
+		},
+		drawerClose: {
+			color: infoDialogForegroundColor,
+		},
+		drawerCloseFocus: {
+			backgroundColor: infoDialogForegroundColor,
+			borderColor: infoDialogForegroundColor,
+			color: infoDialogBackgroundColor,
+		},
+		drawerCloseHover: {
+			color: createContrastColor(infoDialogForegroundColor),
+		},
+		toggleOff: {
+			backgroundColor: toggleOffBackgroundColor,
+			color: toggleButtonOffColor,
+		},
+		toggleOn: {
+			backgroundColor: toggleOnBackgroundColor,
+			color: toggleButtonOnColor,
+		},
+		toggleOffDisabled: {
+			backgroundColor: createContrastColor(toggleOffBackgroundColor, 0.25),
+			color: createContrastColor(toggleButtonOffColor, 0.25),
+		},
+		toggleOnDisabled: {
+			backgroundColor: createContrastColor(toggleOnBackgroundColor, 0.25),
+			color: createContrastColor(toggleButtonOnColor, 0.25),
+		},
+		link: {
+			color: linkColor,
+		},
+		linkFocus: {
+			backgroundColor: linkColor,
+			color: createContrastColor(linkColor),
+		},
+		button: {
+			backgroundColor: buttonBackgroundColor,
+			borderColor: buttonForegroundColor,
+		},
+		buttonText: {
+			color: buttonForegroundColor,
+		},
+		buttonFocus: {
+			backgroundColor: createContrastColor(buttonBackgroundColor, 0.08),
+			borderColor: createContrastColor(buttonForegroundColor, 0.08),
+		},
+		buttonHover: {
+			backgroundColor: createContrastColor(buttonBackgroundColor, 0.16),
+			borderColor: createContrastColor(buttonForegroundColor, 0.16),
+		},
+		buttonDeny: {
+			backgroundColor: buttonDenyBackgroundColor,
+			borderColor: buttonDenyForegroundColor,
+		},
+		buttonDenyText: {
+			color: buttonDenyForegroundColor,
+		},
+		buttonDenyFocus: {
+			backgroundColor: createContrastColor(buttonDenyBackgroundColor, 0.08),
+			borderColor: createContrastColor(buttonDenyForegroundColor, 0.08),
+		},
+		buttonDenyHover: {
+			backgroundColor: createContrastColor(buttonDenyBackgroundColor, 0.16),
+			borderColor: createContrastColor(buttonDenyForegroundColor, 0.16),
+		},
+	});
+};

package/src/types/consent-config.d.ts

@@ -0,0 +1,72 @@
+import type { ConsentCategory } from '../constants';
+import type { Flavor } from '../flavors';
+import type { Iab } from '../iab/types';
+
+type DialogType = 'bar' | 'box';
+type DialogPosition =
+	| 'bottom'
+	| 'bottom-left'
+	| 'bottom-right'
+	| 'center'
+	| 'top'
+	| 'top-left'
+	| 'top-right';
+type WidgetDrawerPosition = 'left' | 'right';
+type Mode = '' | 'debug' | 'listener' | 'permissive' | 'production';
+
+type Palette = {
+	linkColor: string;
+	borderless: boolean;
+	dialogType: DialogType;
+	widgetPosition: WidgetDrawerPosition;
+	displayPosition: DialogPosition;
+	infoDialogPosition: WidgetDrawerPosition;
+	toggleButtonOnColor: string;
+	toggleOnBackgroundColor: string;
+	toggleButtonOffColor: string;
+	toggleOffBackgroundColor: string;
+	buttonBackgroundColor: string;
+	buttonForegroundColor: string;
+	dialogBackgroundColor: string;
+	dialogForegroundColor: string;
+	buttonDenyBackgroundColor: string;
+	buttonDenyForegroundColor: string;
+	infoDialogBackgroundColor: string;
+	infoDialogForegroundColor: string;
+	infoDialogOverlayColor: string;
+	widgetColor: string;
+	widgetOutlineColor: string;
+	widgetFillColor: string;
+};
+
+export type Config = {
+	allowTimeout: boolean;
+	gpcSupport: boolean;
+	categories: ConsentCategory[];
+	ccpaRelaxed: boolean;
+	crossDomain: boolean;
+	ccpaApplies: boolean;
+	forceManagePreferences: boolean;
+	forceReconsent?: Date;
+	googleConsent: boolean;
+	iframeBlocking: Mode;
+	scriptBlocking: Mode;
+	timeoutSeconds: number;
+	storagePolicyHref: string;
+	policyLinkText: string;
+	policyLinkInDrawer: boolean;
+	forcedClassifyEnabled: boolean;
+	managePreferencesEnabled: boolean;
+	customerId: string;
+	configId: string;
+	mode: Mode;
+	noTattle: boolean;
+	domains: Array<string>;
+	remoteConsent: boolean;
+	type?: Flavor;
+	variant: 'one' | 'two' | 'three' | 'four' | 'five' | 'six';
+	country: string;
+	region: string;
+	iab: Iab;
+	palette: Palette;
+};

package/src/types/env.d.ts

@@ -0,0 +1,2 @@
+declare let window: Window;
+declare let navigator: Navigator;

package/src/types/index.d.ts

@@ -0,0 +1,18 @@
+import type { FlavorKeys } from '../flavors';
+
+export type OsanoOverrides = {
+	flavor?: FlavorKeys;
+	locale?: string;
+	iabEnabled?: boolean;
+};
+
+export interface OsanoProps {
+	configId: string;
+	customerId: string;
+	hideDisclosures?: boolean;
+	onConfigLoadSuccess?:()=>void;
+	onConfigLoadFailure?:()=>void;
+	onLangLoadSuccess?:()=>void;
+	onLangLoadFailure?:()=>void;
+	overrides?: OsanoOverrides;
+}

package/src/types/store.d.ts

@@ -0,0 +1,43 @@
+import { ConsentConfig } from '../ConsentManager';
+import { ConsentCategory } from '../store';
+
+export type OsanoAction = {
+	type: string;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	payload?: any;
+};
+
+export type OsanoState = {
+	config?: ConsentConfig;
+	configId: string;
+	consent: Record<ConsentCategory, boolean | undefined>;
+	customerId: string;
+	dialogOpen: boolean;
+	disclosures: {
+		fetched: ConsentCategory[];
+		loading: boolean;
+		results: Partial<Record<ConsentCategory, Disclosure[]>>;
+	};
+	locale: string;
+	scrollToType: string;
+	scrollToId: number;
+	stack: string[];
+};
+
+export type DisclosureType =
+	| 'cookie'
+	| 'script'
+	| 'iframe'
+	| 'image'
+	| 'third-party'
+	| 'no-results'
+	| 'text';
+
+export type Disclosure = {
+	classification?: ConsentCategory;
+	type?: DisclosureType;
+	expiry?: string | number;
+	name: string;
+	provider?: string;
+	purpose?: string;
+};

package/src/utils/API.ts

@@ -0,0 +1,47 @@
+const makeFetch = (
+	method: string,
+	path: string,
+	params = {},
+	returnHeaders = false,
+): Promise<unknown | { json: object; headers: Headers }> => {
+	const url = new URL(path);
+	if (method.toLowerCase() === 'get') {
+		url.search = new URLSearchParams(params).toString();
+	}
+	// Remove trailing slash that is added by React Native polyfill
+	const href = url.toString().endsWith('/')
+		? url.toString().slice(0, -1)
+		: url.toString();
+	return fetch(href, {
+		method: method.toUpperCase(),
+		headers: {
+			'Accept': 'application/json',
+			'Content-Type': 'application/json',
+		},
+		mode: 'cors',
+		referrer: 'no-referrer',
+		body: method !== 'GET' ? JSON.stringify(params) : undefined,
+	}).then(response => {
+		if (response.status === 204 || response.type === 'opaque') {
+			return '';
+		}
+		return response.json().then(json => {
+			if (response.ok) {
+				return returnHeaders ? { headers: response.headers, json } : json;
+			} else {
+				return Promise.reject(response);
+			}
+		});
+	});
+};
+
+export default {
+	get: (path: string, queryObj?: object | boolean | undefined) =>
+		makeFetch(
+			'GET',
+			path,
+			typeof queryObj !== 'boolean' ? queryObj : undefined,
+			typeof queryObj === 'boolean',
+		),
+	post: (path: string, params?: object) => makeFetch('POST', path, params),
+};

package/src/utils/Color.ts

@@ -0,0 +1,127 @@
+export const parseColor = (
+	color = '',
+	defaultColor?: string,
+): [r: number, g: number, b: number, a?: number] => {
+	if (color.indexOf('rgb') === 0) {
+		try {
+			const colorArray = color
+				.replace(/[^\d,.]/g, '')
+				.split(',')
+				.map(value => {
+					const val = parseFloat(value);
+					if (isNaN(val)) {
+						throw new Error('Invalid color value');
+					}
+					return val;
+				});
+			return colorArray as [r: number, g: number, b: number, a?: number];
+		} catch (error) {
+			// Error parsing rgb color
+			return parseColor(defaultColor, 'rgba(0,0,0,1)');
+		}
+	}
+
+	let hex = `${color || ''}`.toLowerCase().replace(/[^0-9a-f]/, '');
+	if (hex.length === 3 || hex.length === 4) {
+		// HEX short code
+		hex = hex
+			.split('')
+			.map(c => `${c}${c}`)
+			.join('');
+	} else if (hex.length !== 6 && hex.length !== 8) {
+		return parseColor(defaultColor, 'rgba(0,0,0,1)');
+	}
+
+	const components = [];
+	let pointer = 0;
+	while (pointer < hex.length && components.length < 3) {
+		const colorInt = parseInt(hex.slice(pointer, pointer + 2), 16);
+		// eslint-disable-next-line no-bitwise
+		components.push(colorInt & 255);
+		pointer += 2;
+	}
+	if (pointer < hex.length && components.length === 3) {
+		// Parse the alpha channel of a hex
+		const colorInt = parseInt(hex.slice(pointer, pointer + 2), 16);
+		components.push(colorInt / 255);
+	}
+	return components as [r: number, g: number, b: number, a?: number];
+};
+
+export const intToHexInt = (...args: number[]) =>
+	args.map(i => ((i % 256) + 256) % 256);
+export const intToHexString = (...args: number[]) =>
+	// Only RGB on hex strings
+	args
+		.slice(0, 3)
+		.reduce((hex, i) => `${hex}${`00${i.toString(16)}`.slice(-2)}`, '');
+
+export const intToHue = (i: number) => ((i % 360) + 360) % 360;
+
+// eslint-disable-next-line no-bitwise
+export const floatToHexInt = (f: number) => ((~~(f * 255) % 256) + 256) % 256;
+export const floatToHexString = (...args: number[]) =>
+	args.reduce(
+		(hex, f) => `${hex}${`00${floatToHexInt(f).toString(16)}`.slice(-2)}`,
+		'',
+	);
+
+export const contrastRgb = (r: number, g: number, b: number, _a?: number) => {
+	// calculate contrast of color (standard grayscale algorithmic formula)
+	const contrast =
+		(Math.round(r * 299) + Math.round(g * 587) + Math.round(b * 114)) / 1000;
+	return contrast >= 128 ? 0 : 1;
+};
+
+export const luminosityGrayscale = (
+	r: number,
+	g: number,
+	b: number,
+	_a?: number,
+) => floatToHexInt(0.21 * r + 0.72 * g + 0.07 * b);
+export const LightenDarkenColor = (
+	col: string | number[],
+	percentage: number,
+) => {
+	const invert = Math.abs(percentage) !== percentage ? -1 : 1;
+	const isPercentage = Math.abs(percentage) <= 1;
+	let amt = Math.abs(percentage);
+	amt =
+		Math.floor(
+			Math.min(255, Math.max(-255, isPercentage ? Math.round(255 * amt) : amt)),
+		) * invert;
+
+	let [r = invert ? 255 : 0, g = invert ? 255 : 0, b = invert ? 255 : 0] =
+		typeof col === 'string' ? parseColor(col) : col;
+
+	r += amt;
+
+	if (r > 255) {
+		r = 255;
+	} else if (r < 0) {
+		r = 0;
+	}
+
+	b += amt;
+
+	if (b > 255) {
+		b = 255;
+	} else if (b < 0) {
+		b = 0;
+	}
+
+	g += amt;
+
+	if (g > 255) {
+		g = 255;
+	} else if (g < 0) {
+		g = 0;
+	}
+
+	return `#${intToHexString(r, g, b)}`;
+};
+
+export const darken = (col: string | number[], amt: number) =>
+	LightenDarkenColor(col, -amt);
+export const lighten = (col: string | number[], amt: number) =>
+	LightenDarkenColor(col, amt);

package/src/utils/EventEmitter.ts

@@ -0,0 +1,54 @@
+/* eslint-disable @typescript-eslint/ban-types */
+export class EventSubscription {
+	private _emitter: EventEmitter;
+	private _event: string;
+	private _listener: Function;
+
+	constructor(emitter: EventEmitter, event: string, listener: Function) {
+		this._emitter = emitter;
+		this._event = event;
+		this._listener = listener;
+	}
+
+	remove() {
+		this._emitter.off(this._event, this._listener);
+	}
+}
+
+export class EventEmitter {
+	private _events: Record<string, Function[]> = {};
+
+	on(event: string, listener: Function) {
+		// console.log('EventEmitter.on', event, listener);
+		if (typeof this._events[event] !== 'object') {
+			this._events[event] = [];
+		}
+		const subscription = new EventSubscription(this, event, listener);
+		this._events[event]!.push(listener);
+		return subscription;
+	}
+
+	off(event: string, listener: Function) {
+		// console.log('EventEmitter.off', event, listener);
+		if (typeof this._events[event] === 'object') {
+			const idx = this._events[event]!.indexOf(listener);
+			if (idx > -1) {
+				this._events[event]!.splice(idx, 1);
+			}
+		}
+	}
+
+	emit(event: string, ...args: unknown[]) {
+		if (typeof this._events[event] === 'object') {
+			this._events[event]?.forEach(listener => listener.apply(this, args));
+		}
+	}
+
+	once(event: string, listener: Function) {
+		const g = (...args: unknown[]) => {
+			this.off(event, g);
+			listener.apply(this, args);
+		};
+		return this.on(event, g);
+	}
+}