@audira/carbon-react-native 0.0.1-alpha.1

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

@@ -0,0 +1,319 @@
+import {
+	forwardRef,
+	useContext,
+} from 'react'
+
+import {
+	StyleSheet,
+	View,
+	type ViewProps,
+} from 'react-native'
+
+import {
+	SpacingConstant,
+} from '../../../constants'
+
+import {
+	ThemeContext,
+} from '../../../contexts'
+
+import {
+	FlexStyle,
+} from '../../../styles'
+
+import {
+	BaseColor as ButtonBaseColor,
+	type BaseColorProps,
+} from '../../button/base-color'
+
+import {
+	Icon,
+	type IconProps,
+} from '../../icon'
+
+import {
+	Text,
+	type TextProps,
+} from '../../text'
+
+import IconClose from '@carbon/icons/es/close/20'
+
+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?: IconProps['src'],
+	iconProps?: Omit<IconProps, 'src' | 'width' | 'height'>,
+	iconContainerStyle?: ViewProps['style'],
+
+	iconClose?: boolean,
+	onPressIconClose?: BaseColorProps['onPress'],
+	iconCloseProps?: Omit<
+		IconProps,
+		| 'src'
+		| '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'],
+}
+
+export interface BaseRef extends View {
+}
+
+export const Base = forwardRef<BaseRef, BaseProps>(
+	function Base(
+		{
+			title,
+			body,
+			inline,
+
+			icon,
+			iconProps,
+			iconContainerStyle,
+
+			iconClose,
+			onPressIconClose,
+			iconCloseProps,
+			iconCloseButtonProps,
+
+			nodes,
+
+			titleStyle,
+			leftBarStyle,
+			leftContainerStyle,
+			contentContainerStyle,
+
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const themeContext = useContext(ThemeContext)
+
+		return (
+			<View
+				{ ...props }
+				style={ [
+					FlexStyle.flex_row,
+					style,
+				] }
+				ref={ ref }
+			>
+				<View
+					style={ [
+						baseStyle.leftBar,
+						leftBarStyle,
+					] }
+				/>
+
+				<View
+					style={ [
+						FlexStyle.flex_auto,
+						FlexStyle.flex_row,
+						!inline
+							? baseStyle.leftContainerNonInline
+							: FlexStyle.items_center,
+						leftContainerStyle,
+					] }
+				>
+					{ !!icon && (
+						<View
+							style={ [
+								baseStyle.iconContainer,
+								iconContainerStyle,
+							] }
+						>
+							<Icon
+								{ ...iconProps }
+								src={ icon }
+								width={ 20 }
+								height={ 20 }
+							/>
+						</View>
+					) }
+
+					{ nodes?.beforeContentContainer }
+
+					{ (!!title || !!body) && (
+						<View
+							style={ [
+								FlexStyle.flex_auto,
+								contentContainerStyle,
+							] }
+						>
+							{ !inline ? (<>
+
+								<Text
+									type="heading_compact_01"
+									style={ titleStyle }
+								>
+									{ title }
+								</Text>
+
+								{ body }
+
+							</>) : (
+
+								<Text
+									type="heading_compact_01"
+									style={ [baseStyle.inlineTextWrapper, titleStyle] }
+								>
+									{ title }{ title && body ? ' ' : '' }{ body }
+								</Text>
+
+							) }
+
+							{ nodes?.beforeContentContainerEnd }
+						</View>
+					) }
+
+					{ nodes?.afterContentContainer }
+				</View>
+
+				{ nodes?.beforeButtonClose }
+
+				{ !!iconClose && (
+					<ButtonBaseColor
+						{ ...iconCloseButtonProps }
+						text=""
+						android_rippleEffectColor={ themeContext.color.background_active }
+						size="large_expressive"
+						iconNode={ (iconColorState, iconSize, iconStyle) => iconCloseRenderer(iconCloseProps, iconColorState, iconSize, iconStyle) }
+						onPress={ onPressIconClose }
+						colorStateStyle={{
+							background: {
+								default: {
+									backgroundColor: 'transparent',
+								},
+								focused: {
+									borderWidth: 1,
+									borderColor: themeContext.color.focus,
+								},
+								hovered: { backgroundColor: themeContext.color.background_hover },
+								pressed: { backgroundColor: themeContext.color.background_active },
+								disabled: { backgroundColor: 'transparent' },
+							},
+							text: {
+								default: { color: 'transparent' },
+								focused: { color: 'transparent' },
+								hovered: { color: 'transparent' },
+								pressed: { color: 'transparent' },
+								disabled: { color: 'transparent' },
+							},
+							/**
+							 * Means nothing since we used `iconNode` prop
+							 */
+							icon: {
+								default: 'transparent',
+								focused: 'transparent',
+								hovered: 'transparent',
+								pressed: 'transparent',
+								disabled: 'transparent',
+							},
+						}}
+						style={ [
+							FlexStyle.justify_center,
+							baseStyle.buttonIconClose,
+							iconCloseButtonProps?.style,
+						] }
+					/>
+				) }
+			</View>
+		)
+
+	},
+)
+
+const
+	baseStyle =
+		StyleSheet.create({
+			leftBar: {
+				position: 'absolute',
+				top: -1,
+				bottom: -1,
+				width: 3,
+			},
+			iconContainer: {
+				marginLeft: SpacingConstant.spacing_05,
+				marginRight: SpacingConstant.spacing_05,
+			},
+			leftContainerNonInline: {
+				marginTop: SpacingConstant.spacing_05,
+				marginBottom: SpacingConstant.spacing_05,
+			},
+			inlineTextWrapper: {
+				marginTop: SpacingConstant.spacing_04,
+				marginBottom: SpacingConstant.spacing_04,
+			},
+			buttonIconClose: {
+				width: 48,
+				height: 48,
+				minWidth: 48,
+				minHeight: 48,
+				paddingTop: 0,
+				paddingRight: 0,
+				paddingBottom: 0,
+				paddingLeft: 0,
+			},
+		}),
+
+	iconCloseRenderer: (
+		iconCloseProps: BaseProps['iconCloseProps'],
+		...params: Parameters<NonNullable<BaseColorProps['iconNode']>>
+	) => React.ReactNode =
+		(
+			iconCloseProps,
+			___iconColorState,
+			___iconSize,
+			iconStyle,
+		) => {
+			return (
+				<IconClosePart
+					{ ...iconCloseProps }
+					style={ [
+						iconStyle,
+						iconCloseProps?.style,
+					] }
+				/>
+			)
+		}
+
+interface IconClosePartProps extends NonNullable<BaseProps['iconCloseProps']> {
+}
+function IconClosePart(props: IconClosePartProps) {
+	return (
+		<Icon
+			{ ...props }
+			src={ IconClose }
+			width={ 20 }
+			height={ 20 }
+		/>
+	)
+}

package/src/components/notification/callout/error/index.tsx

@@ -0,0 +1,86 @@
+import {
+	forwardRef,
+} from 'react'
+
+import {
+	useError,
+} from '../../_status-hooks'
+
+import {
+	CalloutVariant,
+	type CalloutVariantProps,
+	type CalloutVariantRef,
+} from '../../_variants'
+
+export interface ErrorProps extends Omit<CalloutVariantProps, 'icon'> {
+	iconProps?: Omit<
+		NonNullable<CalloutVariantProps['iconProps']>,
+		| 'color'
+	>,
+	iconCloseProps?: Omit<
+		NonNullable<CalloutVariantProps['iconCloseProps']>,
+		| 'color'
+	>,
+}
+
+export interface ErrorRef extends CalloutVariantRef {
+}
+
+export const Error = forwardRef<ErrorRef, ErrorProps>(
+	function Error(
+		{
+			color,
+			iconProps,
+			iconCloseProps,
+			titleStyle: titleStyleProp,
+			leftBarStyle: leftBarStyleProp,
+			style: styleProp,
+			...props
+		},
+		ref,
+	) {
+
+		const {
+			icon,
+			iconProps: iconPropsData,
+			iconCloseProps: iconClosePropsData,
+			titleStyle,
+			leftBarStyle,
+			style,
+		} =
+			useError({
+				color,
+				transparentBorderColor: true,
+			})
+
+		return (
+			<CalloutVariant
+				{ ...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/callout/index.tsx

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

package/src/components/notification/callout/informational/index.tsx

@@ -0,0 +1,86 @@
+import {
+	forwardRef,
+} from 'react'
+
+import {
+	useInformational,
+} from '../../_status-hooks'
+
+import {
+	CalloutVariant,
+	type CalloutVariantProps,
+	type CalloutVariantRef,
+} from '../../_variants'
+
+export interface InformationalProps extends Omit<CalloutVariantProps, 'icon'> {
+	iconProps?: Omit<
+		NonNullable<CalloutVariantProps['iconProps']>,
+		| 'color'
+	>,
+	iconCloseProps?: Omit<
+		NonNullable<CalloutVariantProps['iconCloseProps']>,
+		| 'color'
+	>,
+}
+
+export interface InformationalRef extends CalloutVariantRef {
+}
+
+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,
+				transparentBorderColor: true,
+			})
+
+		return (
+			<CalloutVariant
+				{ ...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/callout/success/index.tsx

@@ -0,0 +1,86 @@
+import {
+	forwardRef,
+} from 'react'
+
+import {
+	useSuccess,
+} from '../../_status-hooks'
+
+import {
+	CalloutVariant,
+	type CalloutVariantProps,
+	type CalloutVariantRef,
+} from '../../_variants'
+
+export interface SuccessProps extends Omit<CalloutVariantProps, 'icon'> {
+	iconProps?: Omit<
+		NonNullable<CalloutVariantProps['iconProps']>,
+		| 'color'
+	>,
+	iconCloseProps?: Omit<
+		NonNullable<CalloutVariantProps['iconCloseProps']>,
+		| 'color'
+	>,
+}
+
+export interface SuccessRef extends CalloutVariantRef {
+}
+
+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,
+				transparentBorderColor: true,
+			})
+
+		return (
+			<CalloutVariant
+				{ ...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/callout/warning/index.tsx

@@ -0,0 +1,86 @@
+import {
+	forwardRef,
+} from 'react'
+
+import {
+	useWarning,
+} from '../../_status-hooks'
+
+import {
+	CalloutVariant,
+	type CalloutVariantProps,
+	type CalloutVariantRef,
+} from '../../_variants'
+
+export interface WarningProps extends Omit<CalloutVariantProps, 'icon'> {
+	iconProps?: Omit<
+		NonNullable<CalloutVariantProps['iconProps']>,
+		| 'color'
+	>,
+	iconCloseProps?: Omit<
+		NonNullable<CalloutVariantProps['iconCloseProps']>,
+		| 'color'
+	>,
+}
+
+export interface WarningRef extends CalloutVariantRef {
+}
+
+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,
+				transparentBorderColor: true,
+			})
+
+		return (
+			<CalloutVariant
+				{ ...props }
+				color={ color }
+				icon={ icon }
+				iconProps={{
+					...iconProps,
+					...iconPropsData,
+				}}
+				iconCloseProps={{
+					...iconCloseProps,
+					...iconClosePropsData,
+				}}
+				titleStyle={ [
+					titleStyle,
+					titleStyleProp,
+				] }
+				leftBarStyle={ [
+					leftBarStyle,
+					leftBarStyleProp,
+				] }
+				style={ [
+					style,
+					styleProp,
+				] }
+				ref={ ref }
+			/>
+		)
+
+	},
+)