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

package/src/components/notification/_variants/actionable/index.tsx

@@ -0,0 +1,105 @@
+import {
+	forwardRef,
+} from 'react'
+
+import {
+	Base,
+	type BaseProps,
+	type BaseRef,
+} from '../../base'
+
+import {
+	Subtitle,
+	type SubtitleProps,
+} from '../../subtitle'
+
+import type {
+	NotificationColor,
+} from '../../types'
+
+import {
+	VariantContextProvider,
+} from '../../_variant-context'
+
+import {
+	ButtonTertiary,
+	type ButtonTertiaryProps,
+} from '../_button-tertiary'
+
+export interface ActionableVariantProps extends Omit<
+	BaseProps,
+	| 'inline'
+	| 'body'
+	| 'icon'
+	| 'iconClose'
+	| 'nodes'
+	| 'leftContainerStyle'
+> {
+	color?: NotificationColor,
+	icon: NonNullable<BaseProps['icon']>,
+	/**
+	 * Fill the button prop to render an button action in the notification component  
+	 * Props are similar like you're calling an button component `<Button.Ghost text="button"/>`, just without the JSX
+	 * @example
+	 * <Notification.Actionable.Informational
+	 * 	title="Title goes here"
+	 * 	subtitle="Subtitle goes here"
+	 * 	buttonProps={{
+	 * 		text: 'Action',
+	 * 		onPress: event => {
+	 * 			// your function
+	 * 		},
+	 * 	}}
+	 * />
+	 */
+	buttonProps?: Omit<ButtonTertiaryProps, 'color'>,
+	subtitle: React.ReactNode,
+	subtitleStyle?: SubtitleProps['style'],
+}
+
+export interface ActionableVariantRef extends BaseRef {
+}
+
+export const ActionableVariant = forwardRef<ActionableVariantRef, ActionableVariantProps>(
+	function ActionableVariant(
+		{
+			color = 'high_contrast',
+			icon,
+			subtitle,
+			subtitleStyle,
+			buttonProps,
+			...props
+		},
+		ref,
+	) {
+
+		return (
+			<VariantContextProvider color={ color }>
+				<Base
+					{ ...props }
+					inline={ false }
+					icon={ icon }
+					iconClose
+					body={
+						subtitle && (typeof subtitle === 'string' || typeof subtitle === 'number') ? (
+							<Subtitle style={ subtitleStyle }>
+								{ subtitle }
+							</Subtitle>
+						) : subtitle
+					}
+					nodes={{
+						beforeContentContainerEnd: buttonProps ? (
+							<ButtonTertiary
+								{ ...buttonProps }
+								color={ color }
+							/>
+						) : undefined,
+					}}
+					ref={ ref }
+				/>
+			</VariantContextProvider>
+		)
+
+	},
+
+)

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

@@ -0,0 +1,105 @@
+import {
+	forwardRef,
+} from 'react'
+
+import {
+	Base,
+	type BaseProps,
+	type BaseRef,
+} from '../../base'
+
+import {
+	Subtitle,
+	type SubtitleProps,
+} from '../../subtitle'
+
+import type {
+	NotificationColor,
+} from '../../types'
+
+import {
+	VariantContextProvider,
+} from '../../_variant-context'
+
+import {
+	ButtonGhost,
+	type ButtonGhostProps,
+} from '../_button-ghost'
+
+export interface ActionableInlineVariantProps extends Omit<
+	BaseProps,
+	| 'inline'
+	| 'body'
+	| 'icon'
+	| 'iconClose'
+	| 'nodes'
+	| 'leftContainerStyle'
+> {
+	color?: NotificationColor,
+	icon: NonNullable<BaseProps['icon']>,
+	/**
+	 * Fill the button prop to render an button action in the notification component  
+	 * Props are similar like you're calling an button component `<Button.Ghost text="button"/>`, just without the JSX
+	 * @example
+	 * <Notification.ActionableInline.Informational
+	 * 	title="Title goes here"
+	 * 	subtitle="Subtitle goes here"
+	 * 	buttonProps={{
+	 * 		text: 'Action',
+	 * 		onPress: event => {
+	 * 			// your function
+	 * 		},
+	 * 	}}
+	 * />
+	 */
+	buttonProps?: Omit<ButtonGhostProps, 'color'>,
+	subtitle: React.ReactNode,
+	subtitleStyle?: SubtitleProps['style'],
+}
+
+export interface ActionableInlineVariantRef extends BaseRef {
+}
+
+export const ActionableInlineVariant = forwardRef<ActionableInlineVariantRef, ActionableInlineVariantProps>(
+	function ActionableInlineVariant(
+		{
+			color = 'high_contrast',
+			icon,
+			subtitle,
+			subtitleStyle,
+			buttonProps,
+			...props
+		},
+		ref,
+	) {
+
+		return (
+			<VariantContextProvider color={ color }>
+				<Base
+					{ ...props }
+					inline
+					icon={ icon }
+					iconClose
+					body={
+						subtitle && (typeof subtitle === 'string' || typeof subtitle === 'number') ? (
+							<Subtitle style={ subtitleStyle }>
+								{ subtitle }
+							</Subtitle>
+						) : subtitle
+					}
+					nodes={{
+						beforeButtonClose: buttonProps ? (
+							<ButtonGhost
+								{ ...buttonProps }
+								color={ color }
+							/>
+						) : undefined,
+					}}
+					ref={ ref }
+				/>
+			</VariantContextProvider>
+		)
+
+	},
+
+)

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

@@ -0,0 +1,76 @@
+import {
+	forwardRef,
+} from 'react'
+
+import {
+	Base,
+	type BaseProps,
+	type BaseRef,
+} from '../../base'
+
+import {
+	Subtitle,
+	type SubtitleProps,
+} from '../../subtitle'
+
+import type {
+	NotificationColor,
+} from '../../types'
+
+import {
+	VariantContextProvider,
+} from '../../_variant-context'
+
+export interface CalloutVariantProps extends Omit<
+	BaseProps,
+	| 'inline'
+	| 'body'
+	| 'icon'
+	| 'iconClose'
+	| 'nodes'
+	| 'leftContainerStyle'
+> {
+	color?: NotificationColor,
+	icon: NonNullable<BaseProps['icon']>,
+	subtitle: React.ReactNode,
+	subtitleStyle?: SubtitleProps['style'],
+}
+
+export interface CalloutVariantRef extends BaseRef {
+}
+
+export const CalloutVariant = forwardRef<CalloutVariantRef, CalloutVariantProps>(
+	function CalloutVariant(
+		{
+			color = 'high_contrast',
+			icon,
+			subtitle,
+			subtitleStyle,
+			...props
+		},
+		ref,
+	) {
+
+		return (
+			<VariantContextProvider color={ color }>
+				<Base
+					{ ...props }
+					inline={ false }
+					icon={ icon }
+					iconClose={ false }
+					body={
+						subtitle && (typeof subtitle === 'string' || typeof subtitle === 'number') ? (
+							<Subtitle style={ subtitleStyle }>
+								{ subtitle }
+							</Subtitle>
+						) : subtitle
+					}
+					nodes={ undefined }
+					ref={ ref }
+				/>
+			</VariantContextProvider>
+		)
+
+	},
+
+)

package/src/components/notification/_variants/callout-inline/index.tsx

@@ -0,0 +1,76 @@
+import {
+	forwardRef,
+} from 'react'
+
+import {
+	Base,
+	type BaseProps,
+	type BaseRef,
+} from '../../base'
+
+import {
+	Subtitle,
+	type SubtitleProps,
+} from '../../subtitle'
+
+import type {
+	NotificationColor,
+} from '../../types'
+
+import {
+	VariantContextProvider,
+} from '../../_variant-context'
+
+export interface CalloutInlineVariantProps extends Omit<
+	BaseProps,
+	| 'inline'
+	| 'body'
+	| 'icon'
+	| 'iconClose'
+	| 'nodes'
+	| 'leftContainerStyle'
+> {
+	color?: NotificationColor,
+	icon: NonNullable<BaseProps['icon']>,
+	subtitle: React.ReactNode,
+	subtitleStyle?: SubtitleProps['style'],
+}
+
+export interface CalloutInlineVariantRef extends BaseRef {
+}
+
+export const CalloutInlineVariant = forwardRef<CalloutInlineVariantRef, CalloutInlineVariantProps>(
+	function CalloutInlineVariant(
+		{
+			color = 'high_contrast',
+			icon,
+			subtitle,
+			subtitleStyle,
+			...props
+		},
+		ref,
+	) {
+
+		return (
+			<VariantContextProvider color={ color }>
+				<Base
+					{ ...props }
+					inline
+					icon={ icon }
+					iconClose={ false }
+					body={
+						subtitle && (typeof subtitle === 'string' || typeof subtitle === 'number') ? (
+							<Subtitle style={ subtitleStyle }>
+								{ subtitle }
+							</Subtitle>
+						) : subtitle
+					}
+					nodes={ undefined }
+					ref={ ref }
+				/>
+			</VariantContextProvider>
+		)
+
+	},
+
+)

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

@@ -0,0 +1,5 @@
+export * from './actionable'
+export * from './actionable-inline'
+export * from './callout'
+export * from './callout-inline'
+export * from './toast'

package/src/components/notification/_variants/toast/index.tsx

@@ -0,0 +1,135 @@
+import {
+	forwardRef,
+} from 'react'
+
+import {
+	StyleSheet,
+} from 'react-native'
+
+import {
+	SpacingConstant,
+} from '../../../../constants'
+
+import {
+	Base,
+	type BaseProps,
+	type BaseRef,
+} from '../../base'
+
+import {
+	Subtitle,
+	type SubtitleProps,
+} from '../../subtitle'
+
+import type {
+	NotificationColor,
+} from '../../types'
+
+import {
+	VariantContextProvider,
+} from '../../_variant-context'
+
+export interface ToastVariantProps extends Omit<
+	BaseProps,
+	| 'inline'
+	| 'body'
+	| 'icon'
+	| 'iconClose'
+	| 'nodes'
+	| 'leftContainerStyle'
+> {
+	color?: NotificationColor,
+	icon: NonNullable<BaseProps['icon']>,
+	/**
+	 * Override timestamp text with this prop
+	 */
+	timestamp?: string,
+	subtitle: React.ReactNode,
+	subtitleStyle?: SubtitleProps['style'],
+}
+
+export interface ToastVariantRef extends BaseRef {
+}
+
+export const ToastVariant = forwardRef<ToastVariantRef, ToastVariantProps>(
+	function ToastVariant(
+		{
+			color = 'high_contrast',
+			icon,
+			timestamp,
+			subtitle,
+			subtitleStyle,
+			...props
+		},
+		ref,
+	) {
+
+		return (
+			<VariantContextProvider color={ color }>
+				<Base
+					{ ...props }
+					inline={ false }
+					icon={ icon }
+					iconClose
+					body={
+						subtitle && (typeof subtitle === 'string' || typeof subtitle === 'number') ? (
+							<Subtitle style={ subtitleStyle }>
+								{ subtitle }
+							</Subtitle>
+						) : subtitle
+					}
+					nodes={{
+						beforeContentContainerEnd: timestamp ? (
+							<Subtitle style={ baseStyle.timestamp }>
+								{ timestamp }
+							</Subtitle>
+						) : (
+							<Timestamp/>
+						),
+					}}
+					ref={ ref }
+				/>
+			</VariantContextProvider>
+		)
+
+	},
+
+)
+
+const
+	baseStyle =
+		StyleSheet.create({
+			timestamp: {
+				marginTop: SpacingConstant.spacing_06,
+			},
+		})
+
+interface TimestampProps extends Omit<SubtitleProps, 'children'> {
+}
+
+function Timestamp({
+	style,
+	...props
+}: TimestampProps) {
+
+	return (
+		<Subtitle
+			{ ...props }
+			style={ [
+				baseStyle.timestamp,
+				style,
+			] }
+		>
+			{ new Date().toLocaleString(
+				'en-US',
+				{
+					hour: '2-digit',
+					minute: '2-digit',
+					second: '2-digit',
+					hour12: true,
+				},
+			) }
+		</Subtitle>
+	)
+
+}

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

@@ -0,0 +1,86 @@
+import {
+	forwardRef,
+} from 'react'
+
+import {
+	useError,
+} from '../../_status-hooks'
+
+import {
+	ActionableVariant,
+	type ActionableVariantProps,
+	type ActionableVariantRef,
+} from '../../_variants'
+
+export interface ErrorProps extends Omit<ActionableVariantProps, 'icon'> {
+	iconProps?: Omit<
+		NonNullable<ActionableVariantProps['iconProps']>,
+		| 'color'
+	>,
+	iconCloseProps?: Omit<
+		NonNullable<ActionableVariantProps['iconCloseProps']>,
+		| 'color'
+	>,
+}
+
+export interface ErrorRef extends ActionableVariantRef {
+}
+
+export const Error = forwardRef<ActionableVariantRef, 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 (
+			<ActionableVariant
+				{ ...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/index.tsx

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

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

@@ -0,0 +1,86 @@
+import {
+	forwardRef,
+} from 'react'
+
+import {
+	useInformational,
+} from '../../_status-hooks'
+
+import {
+	ActionableVariant,
+	type ActionableVariantProps,
+	type ActionableVariantRef,
+} from '../../_variants'
+
+export interface InformationalProps extends Omit<ActionableVariantProps, 'icon'> {
+	iconProps?: Omit<
+		NonNullable<ActionableVariantProps['iconProps']>,
+		| 'color'
+	>,
+	iconCloseProps?: Omit<
+		NonNullable<ActionableVariantProps['iconCloseProps']>,
+		| 'color'
+	>,
+}
+
+export interface InformationalRef extends ActionableVariantRef {
+}
+
+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 (
+			<ActionableVariant
+				{ ...props }
+				color={ color }
+				icon={ icon }
+				iconProps={{
+					...iconProps,
+					...iconPropsData,
+				}}
+				iconCloseProps={{
+					...iconCloseProps,
+					...iconClosePropsData,
+				}}
+				titleStyle={ [
+					titleStyle,
+					titleStyleProp,
+				] }
+				leftBarStyle={ [
+					leftBarStyle,
+					leftBarStyleProp,
+				] }
+				style={ [
+					style,
+					styleProp,
+				] }
+				ref={ ref }
+			/>
+		)
+
+	},
+)