@audira/carbon-react-native 1.0.0-beta.7 → 1.0.0-beta.8

package/src/components/notification/_status-hooks/_base/index.tsx

@@ -0,0 +1,3 @@
+export * from "./useBase"
+export * from "./UseBaseData"
+export * from "./UseBaseProps"

package/src/components/notification/_status-hooks/_base/useBase.tsx

@@ -0,0 +1,77 @@
+import {
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+} from "react-native"
+
+import {
+	GlobalConfigContext,
+} from "../../../../_internal/contexts"
+
+import {
+	ThemeContext,
+} from "../../../../contexts"
+
+import type {
+	UseBaseData,
+} from "./UseBaseData"
+
+import type {
+	UseBaseProps,
+} from "./UseBaseProps"
+
+export function useBase({
+	color: colorProp,
+	style,
+	leftBarStyle,
+	iconCloseColor,
+	iconColor,
+	titleStyle,
+	transparentBorderColor,
+}: UseBaseProps): UseBaseData {
+
+	useContext(ThemeContext) // Keep it reactive
+
+	const
+		globalConfigContext =
+			useContext(GlobalConfigContext),
+
+		color =
+			colorProp || globalConfigContext.notificationColor
+
+	return {
+		iconProps: {
+			fill: iconColor[color],
+		},
+		iconCloseProps: {
+			fill: iconCloseColor[color],
+		},
+		titleStyle: titleStyle[color],
+		leftBarStyle: leftBarStyle[color],
+		style: [
+			styleSheet.base,
+			style[color],
+			transparentBorderColor
+				? styleSheet.baseTransparentBorder
+				: null,
+		],
+	}
+
+}
+
+const
+	styleSheet =
+		StyleSheet.create({
+			base: {
+				borderTopWidth: 1,
+				borderRightWidth: 1,
+				borderBottomWidth: 1,
+			},
+			baseTransparentBorder: {
+				borderTopColor: "transparent",
+				borderRightColor: "transparent",
+				borderBottomColor: "transparent",
+			},
+		})

package/src/components/notification/_status-hooks/error/UseErrorData.ts

@@ -0,0 +1,11 @@
+import type {
+	BaseProps,
+} from "../../base/BaseProps"
+
+import type {
+	UseBaseData,
+} from "../_base/UseBaseData"
+
+export interface UseErrorData extends UseBaseData {
+	Icon: NonNullable<BaseProps["Icon"]>,
+}

package/src/components/notification/_status-hooks/error/UseErrorProps.ts

@@ -0,0 +1,8 @@
+import type {
+	UseBaseProps,
+} from "../_base/UseBaseProps"
+
+export interface UseErrorProps {
+	color?: UseBaseProps["color"],
+	transparentBorderColor?: UseBaseProps["transparentBorderColor"],
+}

package/src/components/notification/_status-hooks/error/index.tsx

@@ -0,0 +1,3 @@
+export * from "./useError"
+export * from "./UseErrorData"
+export * from "./UseErrorProps"

package/src/components/notification/_status-hooks/error/useError.tsx

@@ -0,0 +1,122 @@
+import {
+	useContext,
+} from "react"
+
+import {
+	Color,
+} from "@audira/carbon-react-native-elements"
+
+import Icon from "@carbon/icons/svg/32/error--filled.svg"
+
+import {
+	CarbonStyleSheet,
+} from "../../../../carbon-style-sheet"
+
+import {
+	ThemeContext,
+} from "../../../../contexts"
+
+import type {
+	NotificationColor,
+} from "../../NotificationColor"
+
+import {
+	useBase,
+	type UseBaseProps,
+} from "../_base"
+
+import type {
+	UseErrorData,
+} from "./UseErrorData"
+
+import type {
+	UseErrorProps,
+} from "./UseErrorProps"
+
+export function useError({
+	color,
+	transparentBorderColor,
+}: UseErrorProps): UseErrorData {
+
+	const
+		themeContext =
+			useContext(ThemeContext),
+
+		data =
+			useBase({
+				color,
+				transparentBorderColor,
+				style: statusStyle,
+				titleStyle,
+				leftBarStyle,
+				iconColor: mapIconColor[themeContext.colorScheme],
+				iconCloseColor: mapIconCloseColor[themeContext.colorScheme],
+			})
+
+	return {
+		...data,
+		Icon,
+	}
+
+}
+
+const
+	statusStyle =
+		CarbonStyleSheet.create<Record<NotificationColor, UseBaseProps["style"][NotificationColor]>>({
+			low_contrast: {
+				backgroundColor: CarbonStyleSheet.color.notification_error_background,
+				borderTopColor: CarbonStyleSheet.color.notification_error_border,
+				borderRightColor: CarbonStyleSheet.color.notification_error_border,
+				borderBottomColor: CarbonStyleSheet.color.notification_error_border,
+			},
+			high_contrast: {
+				backgroundColor: CarbonStyleSheet.color.background_inverse,
+				borderTopColor: CarbonStyleSheet.color.background_inverse,
+				borderRightColor: CarbonStyleSheet.color.background_inverse,
+				borderBottomColor: CarbonStyleSheet.color.background_inverse,
+			},
+		}),
+
+	titleStyle =
+		CarbonStyleSheet.create<Record<NotificationColor, UseBaseProps["titleStyle"][NotificationColor]>>({
+			low_contrast: {
+				color: CarbonStyleSheet.color.text_primary,
+			},
+			high_contrast: {
+				color: CarbonStyleSheet.color.text_inverse,
+			},
+		}),
+
+	leftBarStyle =
+		CarbonStyleSheet.create<Record<NotificationColor, UseBaseProps["leftBarStyle"][NotificationColor]>>({
+			low_contrast: {
+				backgroundColor: CarbonStyleSheet.color.support_error,
+			},
+			high_contrast: {
+				backgroundColor: CarbonStyleSheet.color.support_error_inverse,
+			},
+		}),
+
+	mapIconColor: Record<ThemeContext["colorScheme"], UseBaseProps["iconCloseColor"]> =
+		{
+			gray_10: {
+				low_contrast: Color.Token.gray_10.support_error,
+				high_contrast: Color.Token.gray_10.support_error_inverse,
+			},
+			gray_100: {
+				low_contrast: Color.Token.gray_100.support_error,
+				high_contrast: Color.Token.gray_100.support_error_inverse,
+			},
+		},
+
+	mapIconCloseColor: Record<ThemeContext["colorScheme"], UseBaseProps["iconCloseColor"]> =
+		{
+			gray_10: {
+				low_contrast: Color.Token.gray_10.icon_primary,
+				high_contrast: Color.Token.gray_10.icon_inverse,
+			},
+			gray_100: {
+				low_contrast: Color.Token.gray_100.icon_primary,
+				high_contrast: Color.Token.gray_100.icon_inverse,
+			},
+		}

package/src/components/notification/_status-hooks/index.tsx

@@ -0,0 +1,4 @@
+export * from "./error"
+export * from "./informational"
+export * from "./success"
+export * from "./warning"

package/src/components/notification/_status-hooks/informational/UseInformationalData.ts

@@ -0,0 +1,11 @@
+import type {
+	BaseProps,
+} from "../../base/BaseProps"
+
+import type {
+	UseBaseData,
+} from "../_base/UseBaseData"
+
+export interface UseInformationalData extends UseBaseData {
+	Icon: NonNullable<BaseProps["Icon"]>,
+}

package/src/components/notification/_status-hooks/informational/UseInformationalProps.ts

@@ -0,0 +1,8 @@
+import type {
+	UseBaseProps,
+} from "../_base/UseBaseProps"
+
+export interface UseInformationalProps {
+	color?: UseBaseProps["color"],
+	transparentBorderColor?: UseBaseProps["transparentBorderColor"],
+}

package/src/components/notification/_status-hooks/informational/index.tsx

@@ -0,0 +1,3 @@
+export * from "./useInformational"
+export * from "./UseInformationalData"
+export * from "./UseInformationalProps"

package/src/components/notification/_status-hooks/informational/useInformational.tsx

@@ -0,0 +1,122 @@
+import {
+	useContext,
+} from "react"
+
+import {
+	Color,
+} from "@audira/carbon-react-native-elements"
+
+import Icon from "@carbon/icons/svg/32/information--filled.svg"
+
+import {
+	CarbonStyleSheet,
+} from "../../../../carbon-style-sheet"
+
+import {
+	ThemeContext,
+} from "../../../../contexts"
+
+import type {
+	NotificationColor,
+} from "../../NotificationColor"
+
+import {
+	useBase,
+	type UseBaseProps,
+} from "../_base"
+
+import type {
+	UseInformationalData,
+} from "./UseInformationalData"
+
+import type {
+	UseInformationalProps,
+} from "./UseInformationalProps"
+
+export function useInformational({
+	color,
+	transparentBorderColor,
+}: UseInformationalProps): UseInformationalData {
+
+	const
+		themeContext =
+			useContext(ThemeContext),
+
+		data =
+			useBase({
+				color,
+				transparentBorderColor,
+				style: statusStyle,
+				titleStyle,
+				leftBarStyle,
+				iconColor: mapIconColor[themeContext.colorScheme],
+				iconCloseColor: mapIconCloseColor[themeContext.colorScheme],
+			})
+
+	return {
+		...data,
+		Icon,
+	}
+
+}
+
+const
+	statusStyle =
+		CarbonStyleSheet.create<Record<NotificationColor, UseBaseProps["style"][NotificationColor]>>({
+			low_contrast: {
+				backgroundColor: CarbonStyleSheet.color.notification_info_background,
+				borderTopColor: CarbonStyleSheet.color.notification_info_border,
+				borderRightColor: CarbonStyleSheet.color.notification_info_border,
+				borderBottomColor: CarbonStyleSheet.color.notification_info_border,
+			},
+			high_contrast: {
+				backgroundColor: CarbonStyleSheet.color.background_inverse,
+				borderTopColor: CarbonStyleSheet.color.background_inverse,
+				borderRightColor: CarbonStyleSheet.color.background_inverse,
+				borderBottomColor: CarbonStyleSheet.color.background_inverse,
+			},
+		}),
+
+	titleStyle =
+		CarbonStyleSheet.create<Record<NotificationColor, UseBaseProps["titleStyle"][NotificationColor]>>({
+			low_contrast: {
+				color: CarbonStyleSheet.color.text_primary,
+			},
+			high_contrast: {
+				color: CarbonStyleSheet.color.text_inverse,
+			},
+		}),
+
+	leftBarStyle =
+		CarbonStyleSheet.create<Record<NotificationColor, UseBaseProps["leftBarStyle"][NotificationColor]>>({
+			low_contrast: {
+				backgroundColor: CarbonStyleSheet.color.support_info,
+			},
+			high_contrast: {
+				backgroundColor: CarbonStyleSheet.color.support_info_inverse,
+			},
+		}),
+
+	mapIconColor: Record<ThemeContext["colorScheme"], UseBaseProps["iconCloseColor"]> =
+		{
+			gray_10: {
+				low_contrast: Color.Token.gray_10.support_info,
+				high_contrast: Color.Token.gray_10.support_info_inverse,
+			},
+			gray_100: {
+				low_contrast: Color.Token.gray_100.support_info,
+				high_contrast: Color.Token.gray_100.support_info_inverse,
+			},
+		},
+
+	mapIconCloseColor: Record<ThemeContext["colorScheme"], UseBaseProps["iconCloseColor"]> =
+		{
+			gray_10: {
+				low_contrast: Color.Token.gray_10.icon_primary,
+				high_contrast: Color.Token.gray_10.icon_inverse,
+			},
+			gray_100: {
+				low_contrast: Color.Token.gray_100.icon_primary,
+				high_contrast: Color.Token.gray_100.icon_inverse,
+			},
+		}

package/src/components/notification/_status-hooks/success/UseSuccessData.ts

@@ -0,0 +1,11 @@
+import type {
+	BaseProps,
+} from "../../base/BaseProps"
+
+import type {
+	UseBaseData,
+} from "../_base/UseBaseData"
+
+export interface UseSuccessData extends UseBaseData {
+	Icon: NonNullable<BaseProps["Icon"]>,
+}

package/src/components/notification/_status-hooks/success/UseSuccessProps.ts

@@ -0,0 +1,8 @@
+import type {
+	UseBaseProps,
+} from "../_base/UseBaseProps"
+
+export interface UseSuccessProps {
+	color?: UseBaseProps["color"],
+	transparentBorderColor?: UseBaseProps["transparentBorderColor"],
+}

package/src/components/notification/_status-hooks/success/index.tsx

@@ -0,0 +1,3 @@
+export * from "./useSuccess"
+export * from "./UseSuccessData"
+export * from "./UseSuccessProps"

package/src/components/notification/_status-hooks/success/useSuccess.tsx

@@ -0,0 +1,122 @@
+import {
+	useContext,
+} from "react"
+
+import {
+	Color,
+} from "@audira/carbon-react-native-elements"
+
+import Icon from "@carbon/icons/svg/32/checkmark--filled.svg"
+
+import {
+	CarbonStyleSheet,
+} from "../../../../carbon-style-sheet"
+
+import {
+	ThemeContext,
+} from "../../../../contexts"
+
+import type {
+	NotificationColor,
+} from "../../NotificationColor"
+
+import {
+	useBase,
+	type UseBaseProps,
+} from "../_base"
+
+import type {
+	UseSuccessData,
+} from "./UseSuccessData"
+
+import type {
+	UseSuccessProps,
+} from "./UseSuccessProps"
+
+export function useSuccess({
+	color,
+	transparentBorderColor,
+}: UseSuccessProps): UseSuccessData {
+
+	const
+		themeContext =
+			useContext(ThemeContext),
+
+		data =
+			useBase({
+				color,
+				transparentBorderColor,
+				style: statusStyle,
+				titleStyle,
+				leftBarStyle,
+				iconColor: mapIconColor[themeContext.colorScheme],
+				iconCloseColor: mapIconCloseColor[themeContext.colorScheme],
+			})
+
+	return {
+		...data,
+		Icon,
+	}
+
+}
+
+const
+	statusStyle =
+		CarbonStyleSheet.create<Record<NotificationColor, UseBaseProps["style"][NotificationColor]>>({
+			low_contrast: {
+				backgroundColor: CarbonStyleSheet.color.notification_success_background,
+				borderTopColor: CarbonStyleSheet.color.notification_success_border,
+				borderRightColor: CarbonStyleSheet.color.notification_success_border,
+				borderBottomColor: CarbonStyleSheet.color.notification_success_border,
+			},
+			high_contrast: {
+				backgroundColor: CarbonStyleSheet.color.background_inverse,
+				borderTopColor: CarbonStyleSheet.color.background_inverse,
+				borderRightColor: CarbonStyleSheet.color.background_inverse,
+				borderBottomColor: CarbonStyleSheet.color.background_inverse,
+			},
+		}),
+
+	titleStyle =
+		CarbonStyleSheet.create<Record<NotificationColor, UseBaseProps["titleStyle"][NotificationColor]>>({
+			low_contrast: {
+				color: CarbonStyleSheet.color.text_primary,
+			},
+			high_contrast: {
+				color: CarbonStyleSheet.color.text_inverse,
+			},
+		}),
+
+	leftBarStyle =
+		CarbonStyleSheet.create<Record<NotificationColor, UseBaseProps["leftBarStyle"][NotificationColor]>>({
+			low_contrast: {
+				backgroundColor: CarbonStyleSheet.color.support_success,
+			},
+			high_contrast: {
+				backgroundColor: CarbonStyleSheet.color.support_success_inverse,
+			},
+		}),
+
+	mapIconColor: Record<ThemeContext["colorScheme"], UseBaseProps["iconCloseColor"]> =
+		{
+			gray_10: {
+				low_contrast: Color.Token.gray_10.support_success,
+				high_contrast: Color.Token.gray_10.support_success_inverse,
+			},
+			gray_100: {
+				low_contrast: Color.Token.gray_100.support_success,
+				high_contrast: Color.Token.gray_100.support_success_inverse,
+			},
+		},
+
+	mapIconCloseColor: Record<ThemeContext["colorScheme"], UseBaseProps["iconCloseColor"]> =
+		{
+			gray_10: {
+				low_contrast: Color.Token.gray_10.icon_primary,
+				high_contrast: Color.Token.gray_10.icon_inverse,
+			},
+			gray_100: {
+				low_contrast: Color.Token.gray_100.icon_primary,
+				high_contrast: Color.Token.gray_100.icon_inverse,
+			},
+		}

package/src/components/notification/_status-hooks/warning/UseWarningData.ts

@@ -0,0 +1,11 @@
+import type {
+	BaseProps,
+} from "../../base/BaseProps"
+
+import type {
+	UseBaseData,
+} from "../_base/UseBaseData"
+
+export interface UseWarningData extends UseBaseData {
+	Icon: NonNullable<BaseProps["Icon"]>,
+}

package/src/components/notification/_status-hooks/warning/UseWarningProps.ts

@@ -0,0 +1,8 @@
+import type {
+	UseBaseProps,
+} from "../_base/UseBaseProps"
+
+export interface UseWarningProps {
+	color?: UseBaseProps["color"],
+	transparentBorderColor?: UseBaseProps["transparentBorderColor"],
+}

package/src/components/notification/_status-hooks/warning/index.tsx

@@ -0,0 +1,3 @@
+export * from "./useWarning"
+export * from "./UseWarningData"
+export * from "./UseWarningProps"

package/src/components/notification/_status-hooks/warning/useWarning.tsx

@@ -0,0 +1,122 @@
+import {
+	useContext,
+} from "react"
+
+import {
+	Color,
+} from "@audira/carbon-react-native-elements"
+
+import Icon from "@carbon/icons/svg/32/warning--filled.svg"
+
+import {
+	CarbonStyleSheet,
+} from "../../../../carbon-style-sheet"
+
+import {
+	ThemeContext,
+} from "../../../../contexts"
+
+import type {
+	NotificationColor,
+} from "../../NotificationColor"
+
+import {
+	useBase,
+	type UseBaseProps,
+} from "../_base"
+
+import type {
+	UseWarningData,
+} from "./UseWarningData"
+
+import type {
+	UseWarningProps,
+} from "./UseWarningProps"
+
+export function useWarning({
+	color,
+	transparentBorderColor,
+}: UseWarningProps): UseWarningData {
+
+	const
+		themeContext =
+			useContext(ThemeContext),
+
+		data =
+			useBase({
+				color,
+				transparentBorderColor,
+				style: statusStyle,
+				titleStyle,
+				leftBarStyle,
+				iconColor: mapIconColor[themeContext.colorScheme],
+				iconCloseColor: mapIconCloseColor[themeContext.colorScheme],
+			})
+
+	return {
+		...data,
+		Icon,
+	}
+
+}
+
+const
+	statusStyle =
+		CarbonStyleSheet.create<Record<NotificationColor, UseBaseProps["style"][NotificationColor]>>({
+			low_contrast: {
+				backgroundColor: CarbonStyleSheet.color.notification_warning_background,
+				borderTopColor: CarbonStyleSheet.color.notification_warning_border,
+				borderRightColor: CarbonStyleSheet.color.notification_warning_border,
+				borderBottomColor: CarbonStyleSheet.color.notification_warning_border,
+			},
+			high_contrast: {
+				backgroundColor: CarbonStyleSheet.color.background_inverse,
+				borderTopColor: CarbonStyleSheet.color.background_inverse,
+				borderRightColor: CarbonStyleSheet.color.background_inverse,
+				borderBottomColor: CarbonStyleSheet.color.background_inverse,
+			},
+		}),
+
+	titleStyle =
+		CarbonStyleSheet.create<Record<NotificationColor, UseBaseProps["titleStyle"][NotificationColor]>>({
+			low_contrast: {
+				color: CarbonStyleSheet.color.text_primary,
+			},
+			high_contrast: {
+				color: CarbonStyleSheet.color.text_inverse,
+			},
+		}),
+
+	leftBarStyle =
+		CarbonStyleSheet.create<Record<NotificationColor, UseBaseProps["leftBarStyle"][NotificationColor]>>({
+			low_contrast: {
+				backgroundColor: CarbonStyleSheet.color.support_warning,
+			},
+			high_contrast: {
+				backgroundColor: CarbonStyleSheet.color.support_warning_inverse,
+			},
+		}),
+
+	mapIconColor: Record<ThemeContext["colorScheme"], UseBaseProps["iconCloseColor"]> =
+		{
+			gray_10: {
+				low_contrast: Color.Token.gray_10.support_warning,
+				high_contrast: Color.Token.gray_10.support_warning_inverse,
+			},
+			gray_100: {
+				low_contrast: Color.Token.gray_100.support_warning,
+				high_contrast: Color.Token.gray_100.support_warning_inverse,
+			},
+		},
+
+	mapIconCloseColor: Record<ThemeContext["colorScheme"], UseBaseProps["iconCloseColor"]> =
+		{
+			gray_10: {
+				low_contrast: Color.Token.gray_10.icon_primary,
+				high_contrast: Color.Token.gray_10.icon_inverse,
+			},
+			gray_100: {
+				low_contrast: Color.Token.gray_100.icon_primary,
+				high_contrast: Color.Token.gray_100.icon_inverse,
+			},
+		}

package/src/components/notification/_variant-context.ts

@@ -0,0 +1,15 @@
+import {
+	createContext,
+} from "react"
+
+import type {
+	NotificationColor,
+} from "./NotificationColor"
+
+export interface VariantContext {
+	color: NotificationColor,
+}
+
+export const VariantContext = createContext<VariantContext>({
+	color: "high_contrast",
+})