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

package/src/components/notification/actionable-inline/informational/Informational.tsx

@@ -0,0 +1,77 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	useInformational,
+} from "../../_status-hooks"
+
+import {
+	ActionableInlineVariant,
+} from "../../_variants"
+
+import type {
+	InformationalProps,
+} from "./InformationalProps"
+
+import type {
+	InformationalRef,
+} from "./InformationalRef"
+
+export const Informational = forwardRef<InformationalRef, InformationalProps>(
+	function Informational(
+		{
+			color,
+			iconProps,
+			iconCloseProps,
+			titleStyle: titleStyleProp,
+			leftBarStyle: leftBarStyleProp,
+			style: styleProp,
+			...props
+		},
+		ref,
+	) {
+
+		const {
+			Icon,
+			iconProps: iconPropsData,
+			iconCloseProps: iconClosePropsData,
+			titleStyle,
+			leftBarStyle,
+			style,
+		} =
+			useInformational({
+				color,
+			})
+
+		return (
+			<ActionableInlineVariant
+				{ ...props }
+				color={ color }
+				Icon={ Icon }
+				iconProps={{
+					...iconProps,
+					...iconPropsData,
+				}}
+				iconCloseProps={{
+					...iconCloseProps,
+					...iconClosePropsData,
+				}}
+				titleStyle={ [
+					titleStyle,
+					titleStyleProp,
+				] }
+				leftBarStyle={ [
+					leftBarStyle,
+					leftBarStyleProp,
+				] }
+				style={ [
+					style,
+					styleProp,
+				] }
+				ref={ ref }
+			/>
+		)
+
+	},
+)

package/src/components/notification/actionable-inline/informational/InformationalProps.ts

@@ -0,0 +1,14 @@
+import type {
+	ActionableInlineVariantProps,
+} from "../../_variants/actionable-inline"
+
+export interface InformationalProps extends Omit<ActionableInlineVariantProps, "icon"> {
+	iconProps?: Omit<
+		NonNullable<ActionableInlineVariantProps["iconProps"]>,
+		| "color"
+	>,
+	iconCloseProps?: Omit<
+		NonNullable<ActionableInlineVariantProps["iconCloseProps"]>,
+		| "color"
+	>,
+}

package/src/components/notification/actionable-inline/informational/InformationalRef.ts

@@ -0,0 +1,6 @@
+import type {
+	ActionableInlineVariantRef,
+} from "../../_variants/actionable-inline"
+
+export interface InformationalRef extends ActionableInlineVariantRef {
+}

package/src/components/notification/actionable-inline/informational/index.tsx

@@ -0,0 +1,3 @@
+export * from "./Informational"
+export * from "./InformationalProps"
+export * from "./InformationalRef"

package/src/components/notification/actionable-inline/success/Success.tsx

@@ -0,0 +1,77 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	useSuccess,
+} from "../../_status-hooks"
+
+import {
+	ActionableInlineVariant,
+} from "../../_variants"
+
+import type {
+	SuccessProps,
+} from "./SuccessProps"
+
+import type {
+	SuccessRef,
+} from "./SuccessRef"
+
+export const Success = forwardRef<SuccessRef, SuccessProps>(
+	function Success(
+		{
+			color,
+			iconProps,
+			iconCloseProps,
+			titleStyle: titleStyleProp,
+			leftBarStyle: leftBarStyleProp,
+			style: styleProp,
+			...props
+		},
+		ref,
+	) {
+
+		const {
+			Icon,
+			iconProps: iconPropsData,
+			iconCloseProps: iconClosePropsData,
+			titleStyle,
+			leftBarStyle,
+			style,
+		} =
+			useSuccess({
+				color,
+			})
+
+		return (
+			<ActionableInlineVariant
+				{ ...props }
+				color={ color }
+				Icon={ Icon }
+				iconProps={{
+					...iconProps,
+					...iconPropsData,
+				}}
+				iconCloseProps={{
+					...iconCloseProps,
+					...iconClosePropsData,
+				}}
+				titleStyle={ [
+					titleStyle,
+					titleStyleProp,
+				] }
+				leftBarStyle={ [
+					leftBarStyle,
+					leftBarStyleProp,
+				] }
+				style={ [
+					style,
+					styleProp,
+				] }
+				ref={ ref }
+			/>
+		)
+
+	},
+)

package/src/components/notification/actionable-inline/success/SuccessProps.ts

@@ -0,0 +1,14 @@
+import type {
+	ActionableInlineVariantProps,
+} from "../../_variants/actionable-inline"
+
+export interface SuccessProps extends Omit<ActionableInlineVariantProps, "icon"> {
+	iconProps?: Omit<
+		NonNullable<ActionableInlineVariantProps["iconProps"]>,
+		| "color"
+	>,
+	iconCloseProps?: Omit<
+		NonNullable<ActionableInlineVariantProps["iconCloseProps"]>,
+		| "color"
+	>,
+}

package/src/components/notification/actionable-inline/success/SuccessRef.ts

@@ -0,0 +1,6 @@
+import type {
+	ActionableInlineVariantRef,
+} from "../../_variants/actionable-inline"
+
+export interface SuccessRef extends ActionableInlineVariantRef {
+}

package/src/components/notification/actionable-inline/success/index.tsx

@@ -0,0 +1,3 @@
+export * from "./Success"
+export * from "./SuccessProps"
+export * from "./SuccessRef"

package/src/components/notification/actionable-inline/warning/Warning.tsx

@@ -0,0 +1,77 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	useWarning,
+} from "../../_status-hooks"
+
+import {
+	ActionableInlineVariant,
+} from "../../_variants"
+
+import type {
+	WarningProps,
+} from "./WarningProps"
+
+import type {
+	WarningRef,
+} from "./WarningRef"
+
+export const Warning = forwardRef<WarningRef, WarningProps>(
+	function Warning(
+		{
+			color,
+			iconProps,
+			iconCloseProps,
+			titleStyle: titleStyleProp,
+			leftBarStyle: leftBarStyleProp,
+			style: styleProp,
+			...props
+		},
+		ref,
+	) {
+
+		const {
+			Icon,
+			iconProps: iconPropsData,
+			iconCloseProps: iconClosePropsData,
+			titleStyle,
+			leftBarStyle,
+			style,
+		} =
+			useWarning({
+				color,
+			})
+
+		return (
+			<ActionableInlineVariant
+				{ ...props }
+				color={ color }
+				Icon={ Icon }
+				iconProps={{
+					...iconProps,
+					...iconPropsData,
+				}}
+				iconCloseProps={{
+					...iconCloseProps,
+					...iconClosePropsData,
+				}}
+				titleStyle={ [
+					titleStyle,
+					titleStyleProp,
+				] }
+				leftBarStyle={ [
+					leftBarStyle,
+					leftBarStyleProp,
+				] }
+				style={ [
+					style,
+					styleProp,
+				] }
+				ref={ ref }
+			/>
+		)
+
+	},
+)

package/src/components/notification/actionable-inline/warning/WarningProps.ts

@@ -0,0 +1,14 @@
+import type {
+	ActionableInlineVariantProps,
+} from "../../_variants/actionable-inline"
+
+export interface WarningProps extends Omit<ActionableInlineVariantProps, "icon"> {
+	iconProps?: Omit<
+		NonNullable<ActionableInlineVariantProps["iconProps"]>,
+		| "color"
+	>,
+	iconCloseProps?: Omit<
+		NonNullable<ActionableInlineVariantProps["iconCloseProps"]>,
+		| "color"
+	>,
+}

package/src/components/notification/actionable-inline/warning/WarningRef.ts

@@ -0,0 +1,6 @@
+import type {
+	ActionableInlineVariantRef,
+} from "../../_variants/actionable-inline"
+
+export interface WarningRef extends ActionableInlineVariantRef {
+}

package/src/components/notification/actionable-inline/warning/index.tsx

@@ -0,0 +1,3 @@
+export * from "./Warning"
+export * from "./WarningProps"
+export * from "./WarningRef"

package/src/components/notification/base/Base.tsx

@@ -0,0 +1,292 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+	View,
+	type ViewStyle,
+} from "react-native"
+
+import {
+	Color,
+	Spacing,
+} from "@audira/carbon-react-native-elements"
+
+import IconClose from "@carbon/icons/svg/32/close.svg"
+
+import {
+	GlobalConfigContext,
+} from "../../../_internal/contexts"
+
+import {
+	CommonStyleSheet,
+	FlexStyleSheet,
+} from "../../../_internal/style-sheets"
+
+import {
+	CarbonStyleSheet,
+} from "../../../carbon-style-sheet"
+
+import {
+	ThemeContext,
+} from "../../../contexts"
+
+import {
+	BaseColor as ButtonBaseColor,
+	type BaseColorProps,
+} from "../../button/base-color"
+
+import {
+	Text,
+} from "../../text"
+
+import type {
+	BaseProps,
+} from "./BaseProps"
+
+import type {
+	BaseRef,
+} from "./BaseRef"
+
+
+export const Base = forwardRef<BaseRef, BaseProps>(
+	function Base(
+		{
+			title,
+			body,
+			inline,
+
+			Icon,
+			iconProps,
+			iconContainerStyle,
+
+			iconClose,
+			onPressIconClose,
+			iconCloseProps,
+			iconCloseButtonProps,
+
+			nodes,
+
+			titleStyle,
+			leftBarStyle,
+			leftContainerStyle,
+			contentContainerStyle,
+
+			style,
+			dir,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			globalConfigContext =
+				useContext(GlobalConfigContext),
+
+			themeContext =
+				useContext(ThemeContext)
+
+		return (
+			<View
+				{ ...props }
+				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
+				style={ [
+					FlexStyleSheet.flex_row,
+					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+					style,
+				] }
+				ref={ ref }
+			>
+				<View
+					style={ [
+						baseStyle.leftBar,
+						leftBarStyle,
+					] }
+				/>
+
+				<View
+					style={ [
+						FlexStyleSheet.flex_auto,
+						FlexStyleSheet.flex_row,
+						!inline
+							? baseStyle.leftContainerNonInline
+							: FlexStyleSheet.items_center,
+						leftContainerStyle,
+					] }
+				>
+					{ !!Icon && (
+						<View
+							style={ [
+								baseStyle.iconContainer,
+								iconContainerStyle,
+							] }
+						>
+							<Icon
+								{ ...iconProps }
+								width={ 20 }
+								height={ 20 }
+							/>
+						</View>
+					) }
+
+					{ nodes?.beforeContentContainer }
+
+					{ (!!title || !!body) && (
+						<View
+							style={ [
+								FlexStyleSheet.flex_auto,
+								contentContainerStyle,
+							] }
+						>
+							{ !inline ? (<>
+
+								{ !!title && (
+									<Text
+										type="heading_compact_01"
+										style={ titleStyle }
+									>
+										{ title }
+									</Text>
+								) }
+
+								{ body }
+
+							</>) : (
+
+								<Text
+									type="heading_compact_01"
+									style={ [baseStyle.inlineTextWrapper, titleStyle] }
+								>
+									{ !globalConfigContext.rtl
+										? (
+											<>{ title }{ title && body ? " " : "" }{ body }</>
+										)
+										: (
+											<>{ body }{ title && body ? " " : "" }{ title }</>
+										) }
+								</Text>
+
+							) }
+
+							{ nodes?.beforeContentContainerEnd }
+						</View>
+					) }
+
+					{ nodes?.afterContentContainer }
+				</View>
+
+				{ nodes?.beforeButtonClose }
+
+				{ !!iconClose && (
+					<ButtonBaseColor
+						{ ...iconCloseButtonProps }
+						text=""
+						android_rippleEffectColor={ mapAndroidRippleEffectColor[themeContext.colorScheme] }
+						size="large_expressive"
+						Icon={ IconClose }
+						iconProps={ iconCloseProps }
+						onPress={ onPressIconClose }
+						colorStateStyle={{
+							background: {
+								default: backgroundStyleSheet.default,
+								focused: backgroundStyleSheet.focused,
+								hovered: backgroundStyleSheet.hovered,
+								pressed: backgroundStyleSheet.pressed,
+								disabled: backgroundStyleSheet.disabled,
+							},
+							text: {
+								default: baseStyle.text,
+								focused: baseStyle.text,
+								hovered: baseStyle.text,
+								pressed: baseStyle.text,
+								disabled: baseStyle.text,
+							},
+							/**
+							 * Means nothing since we used `iconNode` prop
+							 */
+							icon: {
+								default: "transparent",
+								focused: "transparent",
+								hovered: "transparent",
+								pressed: "transparent",
+								disabled: "transparent",
+							},
+						}}
+						style={ [
+							FlexStyleSheet.justify_center,
+							baseStyle.buttonIconClose,
+							iconCloseButtonProps?.style,
+						] }
+					/>
+				) }
+			</View>
+		)
+
+	},
+)
+
+const
+	baseStyle =
+		StyleSheet.create({
+			leftBar: {
+				position: "absolute",
+				top: -1,
+				bottom: -1,
+				width: 3,
+			},
+			iconContainer: {
+				marginStart: Spacing.spacing_05,
+				marginEnd: Spacing.spacing_05,
+			},
+			leftContainerNonInline: {
+				marginTop: Spacing.spacing_05,
+				marginBottom: Spacing.spacing_05,
+			},
+			inlineTextWrapper: {
+				marginTop: Spacing.spacing_04,
+				marginBottom: Spacing.spacing_04,
+			},
+			buttonIconClose: {
+				width: 48,
+				height: 48,
+				minWidth: 48,
+				minHeight: 48,
+				paddingTop: 0,
+				paddingRight: 0,
+				paddingBottom: 0,
+				paddingLeft: 0,
+			},
+			text: {
+				color: "transparent",
+			},
+		}),
+
+	backgroundStyleSheet =
+		CarbonStyleSheet.create<
+			Record<keyof BaseColorProps["colorStateStyle"]["background"], ViewStyle>
+		>({
+			default: {
+				backgroundColor: "transparent",
+			},
+			focused: {
+				borderWidth: 1,
+				borderColor: CarbonStyleSheet.color.focus,
+			},
+			hovered: {
+				backgroundColor: CarbonStyleSheet.color.background_hover,
+			},
+			pressed: {
+				backgroundColor: CarbonStyleSheet.color.background_active,
+			},
+			disabled: {
+				backgroundColor: "transparent",
+			},
+		}),
+
+	mapAndroidRippleEffectColor: Record<ThemeContext["colorScheme"], string> =
+		{
+			gray_10: Color.Token.gray_10.background_active,
+			gray_100: Color.Token.gray_100.background_active,
+		}

package/src/components/notification/base/BaseProps.ts

@@ -0,0 +1,59 @@
+import type {
+	ViewProps,
+} from "react-native"
+
+import type {
+	SvgProps,
+} from "react-native-svg"
+
+import type {
+	BaseColorProps,
+} from "../../button/base-color"
+
+import type {
+	TextProps,
+} from "../../text/TextProps"
+
+export interface BaseProps extends Omit<ViewProps, "children"> {
+	title?: string,
+	/**
+	 * You can fill it with string or number to render quickly useful message.  
+	 * Alternatively, you can use `<Notification.Subtitle>` with `<Notification.SubtitleLink>` if necessary
+	 */
+	body?: React.ReactNode,
+	inline?: boolean,
+
+	Icon?: BaseColorProps["Icon"],
+	iconProps?: Omit<SvgProps, "width" | "height">,
+	iconContainerStyle?: ViewProps["style"],
+
+	iconClose?: boolean,
+	onPressIconClose?: BaseColorProps["onPress"],
+	iconCloseProps?: Omit<
+		SvgProps,
+		| "width"
+		| "height"
+	>,
+	iconCloseButtonProps?: Omit<
+		BaseColorProps,
+		| "text"
+		| "size"
+		| "icon"
+		| "iconNode"
+		| "colorStateStyle"
+		| "onPress"
+	>,
+
+	nodes?: Partial<Record<
+		| "beforeContentContainer"
+		| "beforeButtonClose"
+		| "afterContentContainer"
+		| "beforeContentContainerEnd",
+		React.ReactNode
+	>>,
+
+	titleStyle?: TextProps["style"],
+	leftBarStyle?: ViewProps["style"],
+	leftContainerStyle?: ViewProps["style"],
+	contentContainerStyle?: ViewProps["style"],
+}

package/src/components/notification/base/BaseRef.ts

@@ -0,0 +1,6 @@
+import type {
+	View,
+} from "react-native"
+
+export interface BaseRef extends View {
+}

package/src/components/notification/base/index.tsx

@@ -0,0 +1,3 @@
+export * from "./Base"
+export * from "./BaseProps"
+export * from "./BaseRef"