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

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

@@ -0,0 +1,73 @@
+import {
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+} from "react-native"
+
+import {
+	Spacing,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	ThemeProvider,
+	type ThemeProviderProps,
+} from "../../../_internal/providers/theme"
+
+import {
+	Ghost,
+	type GhostProps,
+} from "../../button/ghost"
+
+import type {
+	NotificationColor,
+} from "../NotificationColor"
+
+import {
+	VariantContext,
+} from "../_variant-context"
+
+export interface ButtonGhostProps extends GhostProps {
+}
+
+export function ButtonGhost({
+	size = "small",
+	style,
+	...props
+}: ButtonGhostProps) {
+
+	const variantContext = useContext(VariantContext)
+
+	return (
+		/**
+		 * I don't know, is this a bad idea to nest the provider?
+		 */
+		<ThemeProvider colorScheme={ mapColorScheme[variantContext.color] }>
+			<Ghost
+				{ ...props }
+				size={ size }
+				style={ [
+					baseStyle.buttonGhost,
+					style,
+				] }
+			/>
+		</ThemeProvider>
+	)
+
+}
+
+const
+	baseStyle =
+		StyleSheet.create({
+			buttonGhost: {
+				marginTop: Spacing.spacing_03,
+				paddingRight: Spacing.spacing_05,
+			},
+		}),
+
+	mapColorScheme: Record<NotificationColor, ThemeProviderProps["colorScheme"]> =
+		{
+			low_contrast: "gray_10",
+			high_contrast: "gray_100",
+		}

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

@@ -0,0 +1,73 @@
+import {
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+} from "react-native"
+
+import {
+	Spacing,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	ThemeProvider,
+	type ThemeProviderProps,
+} from "../../../_internal/providers/theme"
+
+import {
+	Tertiary,
+	type TertiaryProps,
+} from "../../button/tertiary"
+
+import type {
+	NotificationColor,
+} from "../NotificationColor"
+
+import {
+	VariantContext,
+} from "../_variant-context"
+
+export interface ButtonTertiaryProps extends TertiaryProps {
+}
+
+export function ButtonTertiary({
+	size = "small",
+	style,
+	...props
+}: ButtonTertiaryProps) {
+
+	const variantContext = useContext(VariantContext)
+
+	return (
+		/**
+		 * I don't know, is this a bad idea to nest the provider?
+		 */
+		<ThemeProvider colorScheme={ mapColorScheme[variantContext.color] }>
+			<Tertiary
+				{ ...props }
+				size={ size }
+				style={ [
+					baseStyle.buttonTertiary,
+					style,
+				] }
+			/>
+		</ThemeProvider>
+	)
+
+}
+
+const
+	baseStyle =
+		StyleSheet.create({
+			buttonTertiary: {
+				marginTop: Spacing.spacing_06,
+				paddingRight: Spacing.spacing_05,
+			},
+		}),
+
+	mapColorScheme: Record<NotificationColor, ThemeProviderProps["colorScheme"]> =
+		{
+			low_contrast: "gray_10",
+			high_contrast: "gray_100",
+		}

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

@@ -0,0 +1,70 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	VariantContextProvider,
+} from "../../_VariantContextProvider"
+
+import {
+	Base,
+} from "../../base"
+
+import {
+	Subtitle,
+} from "../../subtitle"
+
+import {
+	ButtonTertiary,
+} from "../_ButtonTertiary"
+
+import type {
+	ActionableVariantProps,
+} from "./ActionableVariantProps"
+
+import type {
+	ActionableVariantRef,
+} from "./ActionableVariantRef"
+
+export const ActionableVariant = forwardRef<ActionableVariantRef, ActionableVariantProps>(
+	function ActionableVariant(
+		{
+			color,
+			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 }
+							/>
+						) : undefined,
+					}}
+					ref={ ref }
+				/>
+			</VariantContextProvider>
+		)
+
+	},
+
+)

package/src/components/notification/_variants/actionable/ActionableVariantProps.ts

@@ -0,0 +1,46 @@
+import type {
+	NotificationColor,
+} from "../../NotificationColor"
+import type {
+	BaseProps,
+} from "../../base"
+
+
+import type {
+	SubtitleProps,
+} from "../../subtitle/SubtitleProps"
+
+import type {
+	ButtonTertiaryProps,
+} from "../_ButtonTertiary"
+
+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"],
+}

package/src/components/notification/_variants/actionable/ActionableVariantRef.ts

@@ -0,0 +1,6 @@
+import type {
+	BaseRef,
+} from "../../base/BaseRef"
+
+export interface ActionableVariantRef extends BaseRef {
+}

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

@@ -0,0 +1,3 @@
+export * from "./ActionableVariant"
+export * from "./ActionableVariantProps"
+export * from "./ActionableVariantRef"

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

@@ -0,0 +1,70 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	VariantContextProvider,
+} from "../../_VariantContextProvider"
+
+import {
+	Base,
+} from "../../base"
+
+import {
+	Subtitle,
+} from "../../subtitle"
+
+import {
+	ButtonGhost,
+} from "../_ButtonGhost"
+
+import type {
+	ActionableInlineVariantProps,
+} from "./ActionableInlineVariantProps"
+
+import type {
+	ActionableInlineVariantRef,
+} from "./ActionableInlineVariantRef"
+
+export const ActionableInlineVariant = forwardRef<ActionableInlineVariantRef, ActionableInlineVariantProps>(
+	function ActionableInlineVariant(
+		{
+			color,
+			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 }
+							/>
+						) : undefined,
+					}}
+					ref={ ref }
+				/>
+			</VariantContextProvider>
+		)
+
+	},
+
+)

package/src/components/notification/_variants/actionable-inline/ActionableInlineVariantProps.ts

@@ -0,0 +1,46 @@
+import type {
+	NotificationColor,
+} from "../../NotificationColor"
+import type {
+	BaseProps,
+} from "../../base/BaseProps"
+
+
+import type {
+	SubtitleProps,
+} from "../../subtitle/SubtitleProps"
+
+import type {
+	ButtonGhostProps,
+} from "../_ButtonGhost"
+
+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"],
+}

package/src/components/notification/_variants/actionable-inline/ActionableInlineVariantRef.ts

@@ -0,0 +1,6 @@
+import type {
+	BaseRef,
+} from "../../base/BaseRef"
+
+export interface ActionableInlineVariantRef extends BaseRef {
+}

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

@@ -0,0 +1,3 @@
+export * from "./ActionableInlineVariant"
+export * from "./ActionableInlineVariantProps"
+export * from "./ActionableInlineVariantRef"

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

@@ -0,0 +1,59 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	VariantContextProvider,
+} from "../../_VariantContextProvider"
+
+import {
+	Base,
+} from "../../base"
+
+import {
+	Subtitle,
+} from "../../subtitle"
+
+import type {
+	CalloutVariantProps,
+} from "./CalloutVariantProps"
+
+import type {
+	CalloutVariantRef,
+} from "./CalloutVariantRef"
+
+export const CalloutVariant = forwardRef<CalloutVariantRef, CalloutVariantProps>(
+	function CalloutVariant(
+		{
+			color,
+			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/CalloutVariantProps.ts

@@ -0,0 +1,26 @@
+import type {
+	NotificationColor,
+} from "../../NotificationColor"
+import type {
+	BaseProps,
+} from "../../base/BaseProps"
+
+
+import type {
+	SubtitleProps,
+} from "../../subtitle/SubtitleProps"
+
+export interface CalloutVariantProps extends Omit<
+	BaseProps,
+	| "inline"
+	| "body"
+	| "icon"
+	| "iconClose"
+	| "nodes"
+	| "leftContainerStyle"
+> {
+	color?: NotificationColor,
+	Icon: NonNullable<BaseProps["Icon"]>,
+	subtitle: React.ReactNode,
+	subtitleStyle?: SubtitleProps["style"],
+}

package/src/components/notification/_variants/callout/CalloutVariantRef.ts

@@ -0,0 +1,6 @@
+import type {
+	BaseRef,
+} from "../../base/BaseRef"
+
+export interface CalloutVariantRef extends BaseRef {
+}

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

@@ -0,0 +1,3 @@
+export * from "./CalloutVariant"
+export * from "./CalloutVariantProps"
+export * from "./CalloutVariantRef"

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

@@ -0,0 +1,59 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	VariantContextProvider,
+} from "../../_VariantContextProvider"
+
+import {
+	Base,
+} from "../../base"
+
+import {
+	Subtitle,
+} from "../../subtitle"
+
+import type {
+	CalloutInlineVariantProps,
+} from "./CalloutInlineVariantProps"
+
+import type {
+	CalloutInlineVariantRef,
+} from "./CalloutInlineVariantRef"
+
+export const CalloutInlineVariant = forwardRef<CalloutInlineVariantRef, CalloutInlineVariantProps>(
+	function CalloutInlineVariant(
+		{
+			color,
+			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/callout-inline/CalloutInlineVariantProps.ts

@@ -0,0 +1,26 @@
+import type {
+	NotificationColor,
+} from "../../NotificationColor"
+import type {
+	BaseProps,
+} from "../../base/BaseProps"
+
+
+import type {
+	SubtitleProps,
+} from "../../subtitle/SubtitleProps"
+
+export interface CalloutInlineVariantProps extends Omit<
+	BaseProps,
+	| "inline"
+	| "body"
+	| "icon"
+	| "iconClose"
+	| "nodes"
+	| "leftContainerStyle"
+> {
+	color?: NotificationColor,
+	Icon: NonNullable<BaseProps["Icon"]>,
+	subtitle: React.ReactNode,
+	subtitleStyle?: SubtitleProps["style"],
+}

package/src/components/notification/_variants/callout-inline/CalloutInlineVariantRef.ts

@@ -0,0 +1,6 @@
+import type {
+	BaseRef,
+} from "../../base/BaseRef"
+
+export interface CalloutInlineVariantRef extends BaseRef {
+}

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

@@ -0,0 +1,3 @@
+export * from "./CalloutInlineVariant"
+export * from "./CalloutInlineVariantProps"
+export * from "./CalloutInlineVariantRef"

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"