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

package/src/components/modal/Modal.tsx

@@ -0,0 +1,397 @@
+import {
+	forwardRef,
+	useContext,
+	useMemo,
+} from "react"
+
+import {
+	StyleSheet,
+	View,
+	type ViewStyle,
+} from "react-native"
+
+import {
+	Spacing,
+	type BreakpointToken,
+	type ColorLayerLevel,
+} from "@audira/carbon-react-native-elements"
+
+import IconClose from "@carbon/icons/svg/32/close.svg"
+
+import {
+	GlobalConfigContext,
+	ModalContext,
+} from "../../_internal/contexts"
+
+import {
+	CommonStyleSheet,
+} from "../../_internal/style-sheets"
+
+import {
+	CarbonStyleSheet,
+} from "../../carbon-style-sheet"
+
+import {
+	BreakpointContext,
+} from "../../contexts"
+
+import {
+	GhostIcon as ButtonGhostIcon,
+} from "../button/ghost-icon"
+
+import {
+	LayerContext,
+} from "../layer/LayerContext"
+
+import {
+	Text,
+} from "../text"
+
+import type {
+	ModalProps,
+} from "./ModalProps"
+
+import type {
+	ModalRef,
+} from "./ModalRef"
+
+import type {
+	ModalSize,
+} from "./ModalSize"
+
+/**
+ * This is a pure component of Carbon Modal. It's not including with the dialog or any alert utility.
+ * You can use `DialogContext`, call the `show` method, and then give this component to the method argument.
+ * 
+ * You can also use this component with other libraries like `@gorhom/bottom-sheet`, `@lodev09/react-native-true-sheet`, and other libraries, even with the core `Modal` component of React Native
+ */
+export const Modal = forwardRef<ModalRef, ModalProps>(
+	function Modal(
+		{
+			size = "medium",
+			label: labelProp,
+			title,
+			children,
+			buttonCloseProps,
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			style,
+			dir,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			breakpoint =
+				useContext(BreakpointContext),
+
+			globalConfigContext =
+				useContext(GlobalConfigContext),
+
+			/**
+			 * Based on carbon modal spec, the background color is based on the current layer level.  
+			 * Should i follow this spec?
+			 */
+			layerContextLevel =
+				useContext(LayerContext),
+
+			label =
+				labelProp ?? ariaLabel ?? ariaLabelledBy,
+
+			styleSheetBySizeAndBreakpoint =
+				useMemo(() => {
+					return mapStyleSheetBySizeAndBreakpoint[size][breakpoint]
+				}, [
+					size,
+					breakpoint,
+				])
+
+		return (
+			<ModalContext.Provider
+				value={{
+					size,
+				}}
+			>
+				<View
+					ref={ ref }
+					{ ...props }
+					aria-label={ ariaLabel ?? label }
+					aria-labelledBy={ ariaLabelledBy ?? label }
+					dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
+					style={ [
+						bgLayerStyleSheet[`bg_${layerContextLevel}`],
+						styleSheetBySizeAndBreakpoint.modal,
+						globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+						style,
+					] }
+				>
+					<LayerContext.Provider
+						// children of modal are in layer 2
+						value={ 2 }
+					>
+						<View
+							style={ [
+								styleSheet.headerText,
+								styleSheetBySizeAndBreakpoint.headerTextContainer,
+							] }
+						>
+							{ !!label && (
+								<Text
+									type="label_01"
+								>
+									{ label }
+								</Text>
+							) }
+							<Text
+								type="heading_03"
+							>
+								{ title }
+							</Text>
+						</View>
+
+						<ButtonGhostIcon
+							{ ...buttonCloseProps }
+							Icon={ IconClose }
+							style={ [
+								CommonStyleSheet.absolute,
+								styleSheet.iconClose,
+								globalConfigContext.rtl ? styleSheet.iconCloseRtl : styleSheet.iconCloseLtr,
+								buttonCloseProps?.style,
+							] }
+						/>
+
+						{ children }
+					</LayerContext.Provider>
+				</View>
+			</ModalContext.Provider>
+		)
+
+	},
+)
+
+const
+	styleSheet =
+		StyleSheet.create({
+			headerText: {
+				paddingTop: Spacing.spacing_05,
+				marginBottom: Spacing.spacing_05,
+				rowGap: Spacing.spacing_02,
+			},
+			iconClose: {
+				top: 0,
+				backgroundColor: "transparent",
+			},
+			iconCloseLtr: {
+				right: 0,
+			},
+			iconCloseRtl: {
+				left: 0,
+			},
+		}),
+
+	mapStyleSheetBySizeAndBreakpoint: {
+		[Size in ModalSize]: {
+			[Token in BreakpointToken]: {
+				modal: ViewStyle,
+				headerTextContainer: ViewStyle,
+			}
+		}
+	} =
+		{
+			extra_small: {
+				small: StyleSheet.create({
+					modal: {
+						width: "100%",
+						height: "100%",
+					},
+					headerTextContainer: {
+						paddingHorizontal: Spacing.spacing_05,
+					},
+				}),
+				medium: StyleSheet.create({
+					modal: {
+						width: "48%",
+					},
+					headerTextContainer: {
+						paddingHorizontal: Spacing.spacing_05,
+					},
+				}),
+				large: StyleSheet.create({
+					modal: {
+						width: "32%",
+					},
+					headerTextContainer: {
+						paddingHorizontal: Spacing.spacing_05,
+					},
+				}),
+				x_large: StyleSheet.create({
+					modal: {
+						width: "24%",
+					},
+					headerTextContainer: {
+						paddingHorizontal: Spacing.spacing_05,
+					},
+				}),
+				max: StyleSheet.create({
+					modal: {
+						width: "24%",
+					},
+					headerTextContainer: {
+						paddingHorizontal: Spacing.spacing_05,
+					},
+				}),
+			},
+			small: {
+				small: StyleSheet.create({
+					modal: {
+						width: "100%",
+						height: "100%",
+					},
+					headerTextContainer: {
+						paddingHorizontal: Spacing.spacing_05,
+					},
+				}),
+				medium: StyleSheet.create({
+					modal: {
+						width: "60%",
+					},
+					headerTextContainer: {
+						paddingHorizontal: Spacing.spacing_05,
+					},
+				}),
+				large: StyleSheet.create({
+					modal: {
+						width: "42%",
+					},
+					headerTextContainer: {
+						paddingHorizontal: Spacing.spacing_05,
+					},
+				}),
+				x_large: StyleSheet.create({
+					modal: {
+						width: "36%",
+					},
+					headerTextContainer: {
+						paddingStart: Spacing.spacing_05,
+						paddingEnd: "20%",
+					},
+				}),
+				max: StyleSheet.create({
+					modal: {
+						width: "36%",
+					},
+					headerTextContainer: {
+						paddingStart: Spacing.spacing_05,
+						paddingEnd: "20%",
+					},
+				}),
+			},
+			medium: {
+				small: StyleSheet.create({
+					modal: {
+						width: "100%",
+						height: "100%",
+					},
+					headerTextContainer: {
+						paddingHorizontal: Spacing.spacing_05,
+					},
+				}),
+				medium: StyleSheet.create({
+					modal: {
+						width: "84%",
+					},
+					headerTextContainer: {
+						paddingStart: Spacing.spacing_05,
+						paddingEnd: "20%",
+					},
+				}),
+				large: StyleSheet.create({
+					modal: {
+						width: "60%",
+					},
+					headerTextContainer: {
+						paddingStart: Spacing.spacing_05,
+						paddingEnd: "20%",
+					},
+				}),
+				x_large: StyleSheet.create({
+					modal: {
+						width: "48%",
+					},
+					headerTextContainer: {
+						paddingStart: Spacing.spacing_05,
+						paddingEnd: "20%",
+					},
+				}),
+				max: StyleSheet.create({
+					modal: {
+						width: "48%",
+					},
+					headerTextContainer: {
+						paddingStart: Spacing.spacing_05,
+						paddingEnd: "20%",
+					},
+				}),
+			},
+			large: {
+				small: StyleSheet.create({
+					modal: {
+						width: "100%",
+						height: "100%",
+					},
+					headerTextContainer: {
+						paddingHorizontal: Spacing.spacing_05,
+					},
+				}),
+				medium: StyleSheet.create({
+					modal: {
+						width: "96%",
+					},
+					headerTextContainer: {
+						paddingStart: Spacing.spacing_05,
+						paddingEnd: "20%",
+					},
+				}),
+				large: StyleSheet.create({
+					modal: {
+						width: "84%",
+					},
+					headerTextContainer: {
+						paddingStart: Spacing.spacing_05,
+						paddingEnd: "20%",
+					},
+				}),
+				x_large: StyleSheet.create({
+					modal: {
+						width: "72%",
+					},
+					headerTextContainer: {
+						paddingStart: Spacing.spacing_05,
+						paddingEnd: "20%",
+					},
+				}),
+				max: StyleSheet.create({
+					modal: {
+						width: "72%",
+					},
+					headerTextContainer: {
+						paddingStart: Spacing.spacing_05,
+						paddingEnd: "20%",
+					},
+				}),
+			},
+		},
+
+	bgLayerStyleSheet =
+		CarbonStyleSheet.create<Record<`bg_${ColorLayerLevel}`, ViewStyle>>({
+			bg_1: {
+				backgroundColor: CarbonStyleSheet.color.layer_01,
+			},
+			bg_2: {
+				backgroundColor: CarbonStyleSheet.color.layer_02,
+			},
+			bg_3: {
+				backgroundColor: CarbonStyleSheet.color.layer_03,
+			},
+		})

package/src/components/modal/ModalProps.ts

@@ -0,0 +1,24 @@
+import type {
+	ViewProps,
+} from "react-native"
+
+import type {
+	GhostIconProps,
+} from "../button/ghost-icon/GhostIconProps"
+
+import type {
+	ModalSize,
+} from "./ModalSize"
+
+export interface ModalProps extends ViewProps {
+	label?: string,
+	title: string,
+	/**
+	 * @default 'medium'
+	 */
+	size?: ModalSize,
+	buttonCloseProps?: Omit<
+		GhostIconProps,
+		| "icon"
+	>,
+}

package/src/components/modal/ModalRef.ts

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

package/src/components/modal/ModalSize.ts

@@ -0,0 +1,5 @@
+export type ModalSize =
+	| "extra_small"
+	| "small"
+	| "medium"
+	| "large"

package/src/components/modal/index.tsx

@@ -0,0 +1,4 @@
+export * from "./Modal"
+export type * from "./ModalProps"
+export type * from "./ModalRef"
+export type * from "./ModalSize"

package/src/components/modal-content/ModalContent.tsx

@@ -0,0 +1,182 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+	View,
+	type ViewStyle,
+} from "react-native"
+
+import {
+	Spacing,
+	type BreakpointToken,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	GlobalConfigContext,
+	ModalContext,
+} from "../../_internal/contexts"
+
+import {
+	CommonStyleSheet,
+} from "../../_internal/style-sheets"
+
+import {
+	BreakpointContext,
+} from "../../contexts"
+
+import type {
+	ModalContentProps,
+} from "./ModalContentProps"
+
+import type {
+	ModalContentRef,
+} from "./ModalContentRef"
+
+export const ModalContent = forwardRef<ModalContentRef, ModalContentProps>(
+	function ModalContent(
+		{
+			fullWidth,
+			style,
+			dir,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			breakpoint =
+				useContext(BreakpointContext),
+
+			modalContext =
+				useContext(ModalContext),
+
+			globalConfigContext =
+				useContext(GlobalConfigContext)
+
+		return (
+			<View
+				ref={ ref }
+				{ ...props }
+				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
+				style={ [
+					styleSheet.modalContent,
+					mapStyleSheetBySizeAndBreakpoint[modalContext.size][breakpoint],
+					fullWidth ? styleSheet.fullWidth : undefined,
+					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+					style,
+				] }
+			/>
+		)
+
+	},
+)
+
+const
+	styleSheet =
+		StyleSheet.create({
+			modalContent: {
+				marginBottom: Spacing.spacing_09,
+			},
+			fullWidth: {
+				paddingEnd: Spacing.spacing_05,
+			},
+		}),
+
+	mapStyleSheetBySizeAndBreakpoint: {
+		[Size in ModalContext["size"]]: {
+			[Breakpoint in BreakpointToken]: ViewStyle
+		}
+	} =
+		{
+			extra_small: StyleSheet.create({
+				small: {
+					paddingStart: Spacing.spacing_05,
+					paddingEnd: Spacing.spacing_05,
+				},
+				medium: {
+					paddingStart: Spacing.spacing_05,
+					paddingEnd: Spacing.spacing_05,
+				},
+				large: {
+					paddingStart: Spacing.spacing_05,
+					paddingEnd: Spacing.spacing_05,
+				},
+				x_large: {
+					paddingStart: Spacing.spacing_05,
+					paddingEnd: Spacing.spacing_05,
+				},
+				max: {
+					paddingStart: Spacing.spacing_05,
+					paddingEnd: Spacing.spacing_05,
+				},
+			}),
+			small: {
+				small: {
+					paddingStart: Spacing.spacing_05,
+					paddingEnd: Spacing.spacing_05,
+				},
+				medium: {
+					paddingStart: Spacing.spacing_05,
+					paddingEnd: Spacing.spacing_05,
+				},
+				large: {
+					paddingStart: Spacing.spacing_05,
+					paddingEnd: Spacing.spacing_05,
+				},
+				x_large: {
+					paddingStart: Spacing.spacing_05,
+					paddingEnd: "20%",
+				},
+				max: {
+					paddingStart: Spacing.spacing_05,
+					paddingEnd: "20%",
+				},
+			},
+			medium: {
+				small: {
+					paddingStart: Spacing.spacing_05,
+					paddingEnd: Spacing.spacing_05,
+				},
+				medium: {
+					paddingStart: Spacing.spacing_05,
+					paddingEnd: "20%",
+				},
+				large: {
+					paddingStart: Spacing.spacing_05,
+					paddingEnd: "20%",
+				},
+				x_large: {
+					paddingStart: Spacing.spacing_05,
+					paddingEnd: "20%",
+				},
+				max: {
+					paddingStart: Spacing.spacing_05,
+					paddingEnd: "20%",
+				},
+			},
+			large: {
+				small: {
+					paddingStart: Spacing.spacing_05,
+					paddingEnd: Spacing.spacing_05,
+				},
+				medium: {
+					paddingStart: Spacing.spacing_05,
+					paddingEnd: "20%",
+				},
+				large: {
+					paddingStart: Spacing.spacing_05,
+					paddingEnd: "20%",
+				},
+				x_large: {
+					paddingStart: Spacing.spacing_05,
+					paddingEnd: "20%",
+				},
+				max: {
+					paddingStart: Spacing.spacing_05,
+					paddingEnd: "20%",
+				},
+			},
+		}

package/src/components/modal-content/ModalContentProps.ts

@@ -0,0 +1,7 @@
+import type {
+	ViewProps,
+} from "react-native"
+
+export interface ModalContentProps extends ViewProps {
+	fullWidth?: boolean,
+}

package/src/components/modal-content/ModalContentRef.ts

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

package/src/components/modal-content/index.tsx

@@ -0,0 +1,3 @@
+export * from "./ModalContent"
+export type * from "./ModalContentProps"
+export type * from "./ModalContentRef"

package/src/components/notification/NotificationColor.ts

@@ -0,0 +1,3 @@
+export type NotificationColor =
+	| "low_contrast"
+	| "high_contrast"

package/src/components/notification/_VariantContextProvider.tsx

@@ -0,0 +1,39 @@
+import {
+	useContext,
+} from "react"
+
+import {
+	GlobalConfigContext,
+} from "../../_internal/contexts"
+
+import type {
+	NotificationColor,
+} from "./NotificationColor"
+import {
+	VariantContext,
+} from "./_variant-context"
+
+
+export function VariantContextProvider({
+	color,
+	children,
+}: {
+	color?: NotificationColor,
+	children?: React.ReactNode,
+}) {
+
+	const
+		globalConfigContext =
+			useContext(GlobalConfigContext)
+
+	return (
+		<VariantContext.Provider
+			value={{
+				color: color ?? globalConfigContext.notificationColor,
+			}}
+		>
+			{ children }
+		</VariantContext.Provider>
+	)
+
+}

package/src/components/notification/_status-hooks/_base/UseBaseData.ts

@@ -0,0 +1,11 @@
+import type {
+	BaseProps,
+} from "../../base/BaseProps"
+
+export interface UseBaseData {
+	iconProps: BaseProps["iconProps"],
+	iconCloseProps: BaseProps["iconCloseProps"],
+	titleStyle: BaseProps["titleStyle"],
+	leftBarStyle: BaseProps["leftBarStyle"],
+	style: BaseProps["style"],
+}

package/src/components/notification/_status-hooks/_base/UseBaseProps.ts

@@ -0,0 +1,21 @@
+import type {
+	NotificationColor,
+} from "../../NotificationColor"
+
+export interface UseBaseProps {
+	color?: NotificationColor,
+	style: Record<NotificationColor, Record<"backgroundColor" | "borderTopColor" | "borderRightColor" | "borderBottomColor", string>>,
+	leftBarStyle: Record<NotificationColor, {
+		backgroundColor: string
+	}>,
+	titleStyle: Record<NotificationColor, {
+		color: string
+	}>,
+	iconColor: Record<NotificationColor, string>,
+	iconCloseColor: Record<NotificationColor, string>,
+	/**
+	 * true to use background color for top-right-bottom border.  
+	 * Currently for actionable variant
+	 */
+	transparentBorderColor?: boolean,
+}