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

package/src/components/checkbox-group/CheckboxGroup.tsx

@@ -0,0 +1,227 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+	View,
+	type ViewStyle,
+} from "react-native"
+
+import {
+	Color,
+	Spacing,
+} from "@audira/carbon-react-native-elements"
+
+import IconWarningAltFilled from "@carbon/icons/svg/32/warning--alt--filled.svg"
+import IconWarningFilled from "@carbon/icons/svg/32/warning--filled.svg"
+
+import type {
+	SvgProps,
+} from "react-native-svg"
+
+import {
+	GlobalConfigContext,
+} from "../../_internal/contexts"
+
+import {
+	CommonStyleSheet,
+	FlexStyleSheet,
+} from "../../_internal/style-sheets"
+
+import {
+	ThemeContext,
+} from "../../contexts"
+
+import {
+	Checkbox,
+} from "../checkbox"
+
+import {
+	FormHelperText,
+} from "../form-helper-text"
+
+import {
+	FormLabel,
+} from "../form-label"
+
+import type {
+	CheckboxGroupProps,
+} from "./CheckboxGroupProps"
+
+import type {
+	CheckboxGroupRef,
+} from "./CheckboxGroupRef"
+
+const Component = forwardRef<CheckboxGroupRef, CheckboxGroupProps>(
+	function CheckboxGroup(
+		{
+			orientation = "vertical",
+			legend,
+			helperText,
+			helperTextMode,
+			helperTextModeIcon = true,
+			formHelperTextProps,
+			children,
+			style,
+			dir,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			globalConfigContext =
+				useContext(GlobalConfigContext)
+
+		return (
+			<View
+				{ ...props }
+				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
+				style={ [
+					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+					style,
+				] }
+				ref={ ref }
+			>
+				<FormLabel
+					label={ legend }
+					style={ baseStyle.legend }
+				/>
+
+				<View
+					style={ [
+						baseStyle.wrapper,
+						wrapperOrientationStyle[orientation],
+					] }
+				>
+					{ children }
+				</View>
+
+				{ !!helperText && (
+					<FormHelperText
+						{ ...formHelperTextProps }
+						error={ helperTextMode === "error" }
+						text={ helperText }
+						textLeading={
+							helperTextModeIcon && helperTextMode === "error" ? (
+								<IconErrorRenderer/>
+							) : helperTextModeIcon && helperTextMode === "warning" ? (
+								<IconWarningRenderer/>
+							) : formHelperTextProps?.textLeading
+						}
+						style={ [
+							baseStyle.formHelperText,
+							formHelperTextProps?.style,
+						] }
+					/>
+				) }
+			</View>
+		)
+
+	},
+)
+
+export const CheckboxGroup = Object.assign(Component, {
+	Item: Checkbox,
+})
+
+const
+	baseStyle =
+		StyleSheet.create({
+			wrapper: {
+				columnGap: Spacing.spacing_05,
+				rowGap: Spacing.spacing_03,
+			},
+			legend: {
+				marginBottom: Spacing.spacing_03,
+			},
+			formHelperText: {
+				marginTop: Spacing.spacing_03,
+			},
+		}),
+
+	wrapperOrientationStyle =
+		StyleSheet.create<Record<NonNullable<CheckboxGroupProps["orientation"]>, ViewStyle>>({
+			vertical: {
+				flexDirection: "column",
+			},
+			horizontal: {
+				...FlexStyleSheet.flex_wrap,
+				flexDirection: "row",
+			},
+		}),
+
+	mapIconErrorFillColor: Record<ThemeContext["colorScheme"], string> =
+		{
+			gray_10: Color.Token.gray_10.support_error,
+			gray_100: Color.Token.gray_10.support_error,
+		},
+
+	mapIconErrorStrokeColor: Record<ThemeContext["colorScheme"], string> =
+		{
+			gray_10: Color.Token.gray_10.background,
+			gray_100: Color.Token.gray_100.background,
+		},
+
+	mapIconWarningFillColor: Record<ThemeContext["colorScheme"], string> =
+		{
+			gray_10: Color.Token.gray_10.support_warning,
+			gray_100: Color.Token.gray_100.support_warning,
+		}
+
+interface IconRendererProps extends Omit<SvgProps, "src" | "fill" | "width" | "height"> {
+}
+
+function IconErrorRenderer(props: IconRendererProps) {
+
+	const themeContext = useContext(ThemeContext)
+
+	// return (
+	// 	<Icon
+	// 		{ ...props }
+	// 		src={ IconWarningFilled }
+	// 		fill={ mapIconErrorFillColor[themeContext.colorScheme] }
+	// 		stroke={ mapIconErrorStrokeColor[themeContext.colorScheme] }
+	// 		width={ 18 }
+	// 		height={ 18 }
+	// 	/>
+	// )
+	return (
+		<IconWarningFilled
+			{ ...props }
+			fill={ mapIconErrorFillColor[themeContext.colorScheme] }
+			stroke={ mapIconErrorStrokeColor[themeContext.colorScheme] }
+			width={ 18 }
+			height={ 18 }
+		/>
+	)
+
+}
+
+// // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+// IconWarningAltFilled.content[0].attrs.fill = 'black'
+function IconWarningRenderer(props: IconRendererProps) {
+
+	const themeContext = useContext(ThemeContext)
+
+	// return (
+	// 	<Icon
+	// 		{ ...props }
+	// 		src={ IconWarningAltFilled }
+	// 		fill={ mapIconWarningFillColor[themeContext.colorScheme] }
+	// 		width={ 18 }
+	// 		height={ 18 }
+	// 	/>
+	// )
+	return (
+		<IconWarningAltFilled
+			{ ...props }
+			fill={ mapIconWarningFillColor[themeContext.colorScheme] }
+			width={ 18 }
+			height={ 18 }
+		/>
+	)
+
+}

package/src/components/checkbox-group/CheckboxGroupHelperTextMode.ts

@@ -0,0 +1,4 @@
+export type CheckboxGroupHelperTextMode =
+	| "normal"
+	| "error"
+	| "warning"

package/src/components/checkbox-group/CheckboxGroupProps.ts

@@ -0,0 +1,28 @@
+import type {
+	ViewProps,
+} from "react-native"
+
+import type {
+	FormHelperTextProps,
+} from "../form-helper-text"
+
+import type {
+	CheckboxGroupHelperTextMode,
+} from "./CheckboxGroupHelperTextMode"
+
+export interface CheckboxGroupProps extends ViewProps {
+	orientation?: "vertical" | "horizontal",
+	legend: string,
+	helperText?: string,
+	helperTextMode?: CheckboxGroupHelperTextMode,
+	/**
+	 * Set to false if you only want to show your `textLeading` custom node  
+	 * Default value is true
+	 */
+	helperTextModeIcon?: boolean,
+	formHelperTextProps?: Omit<
+		FormHelperTextProps,
+		| "text"
+		| "error"
+	>,
+}

package/src/components/checkbox-group/CheckboxGroupRef.ts

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

package/src/components/checkbox-group/index.tsx

@@ -0,0 +1,4 @@
+export * from "./CheckboxGroup"
+export * from "./CheckboxGroupHelperTextMode"
+export * from "./CheckboxGroupProps"
+export * from "./CheckboxGroupRef"

package/src/components/checkbox-input/CheckboxInput.tsx

@@ -0,0 +1,340 @@
+import {
+	forwardRef,
+	useCallback,
+	useContext,
+	useEffect,
+	useImperativeHandle,
+	useRef,
+	useState,
+} from "react"
+
+import {
+	Pressable,
+	StyleSheet,
+	View,
+	type PressableProps,
+	type ViewStyle,
+} from "react-native"
+
+import {
+	Color,
+} from "@audira/carbon-react-native-elements"
+
+import IconCheckmark from "@carbon/icons/svg/32/checkmark.svg"
+import IconSubtract from "@carbon/icons/svg/32/subtract.svg"
+
+import {
+	CommonStyleSheet,
+	FlexStyleSheet,
+} from "../../_internal/style-sheets"
+
+import {
+	CarbonStyleSheet,
+} from "../../carbon-style-sheet"
+
+import {
+	ThemeContext,
+} from "../../contexts"
+
+import type {
+	CheckboxInputInteractiveState,
+} from "./CheckboxInputInteractiveState"
+
+import type {
+	CheckboxInputProps,
+} from "./CheckboxInputProps"
+
+import type {
+	CheckboxInputRef,
+} from "./CheckboxInputRef"
+
+import type {
+	CheckboxInputValue,
+} from "./CheckboxInputValue"
+
+import type {
+	RefBase,
+} from "./_RefBase"
+
+export const CheckboxInput = forwardRef<CheckboxInputRef, CheckboxInputProps>(
+	function CheckboxInput(
+		{
+			defaultValue,
+			value: valueProp,
+			interactiveState = "normal",
+			style,
+			role = "checkbox",
+			onBlur,
+			onChange,
+			onFocus,
+			onPress,
+			...props
+		},
+		forwardedRef,
+	) {
+
+		const
+			themeContext =
+				useContext(ThemeContext),
+
+			viewRef =
+				useRef<View>(null),
+
+			ref =
+				useRef({
+					onChangeEffect: false,
+					value: typeof valueProp == "boolean" || typeof valueProp == "object"
+						? valueProp
+						: typeof defaultValue == "boolean" || typeof defaultValue == "object"
+							? defaultValue
+							: false,
+				}),
+
+			[isFocused, setIsFocused] =
+				useState(false),
+
+			[valueSelf, setValueSelf] =
+				useState(() => {
+					if(typeof defaultValue == "boolean" || typeof defaultValue == "object") {
+						return defaultValue
+					}
+					return false
+				}),
+
+			controlled =
+				typeof valueProp !== "undefined",
+
+			value =
+				controlled ? valueProp : valueSelf,
+
+			indeterminate =
+				value === null,
+
+			blurHandler: NonNullable<PressableProps["onBlur"]> =
+				useCallback(event => {
+					onBlur?.(event)
+					setIsFocused(false)
+				}, [
+					onBlur,
+				]),
+
+			focusHandler: NonNullable<PressableProps["onFocus"]> =
+				useCallback(event => {
+					onFocus?.(event)
+					setIsFocused(true)
+				}, [
+					onFocus,
+				]),
+
+			pressHandler: NonNullable<PressableProps["onPress"]> =
+				useCallback(event => {
+					onPress?.(event)
+					if(interactiveState !== "read_only") {
+						if(!controlled) {
+							ref.current.onChangeEffect = true
+							setValueSelf(self => self === null ? true : !self)
+						} else {
+							onChange?.(ref.current.value === null ? true : !ref.current.value)
+						}
+					}
+				}, [
+					controlled,
+					interactiveState,
+					onPress,
+					onChange,
+				]),
+
+			iconColor =
+				mapIconColor[interactiveState][themeContext.colorScheme]
+
+		useEffect(() => {
+			ref.current.value = value
+			if(ref.current.onChangeEffect) {
+				ref.current.onChangeEffect = false
+				onChange?.(value)
+			}
+		}, [
+			value,
+			onChange,
+		])
+
+		useImperativeHandle(forwardedRef, () => {
+			return Object.assign<View, RefBase>(
+				viewRef.current as View,
+				{
+					get value() {
+						return value
+					},
+					setValue(value_) {
+						if(!controlled && interactiveState !== "read_only") {
+							ref.current.onChangeEffect = true
+							setValueSelf(self => {
+								if(typeof value_ === "function") {
+									ref.current.value = value_(self)
+								} else {
+									ref.current.value = value_
+								}
+								return ref.current.value
+							})
+						}
+					},
+				},
+			)
+		}, [
+			value,
+			controlled,
+			interactiveState,
+		])
+
+		return (
+			<Pressable
+				{ ...props }
+				disabled={ interactiveState === "disabled" }
+				role={ role }
+				onBlur={ blurHandler }
+				onFocus={ focusHandler }
+				onPress={ pressHandler }
+				style={ [
+					FlexStyleSheet.items_center,
+					FlexStyleSheet.justify_center,
+					CommonStyleSheet.relative,
+					baseStyle.checkbox,
+					getInteractiveStateStyle(interactiveState, value),
+					style,
+				] }
+				ref={ viewRef }
+			>
+				<View
+					style={ [
+						CommonStyleSheet.absolute,
+						CommonStyleSheet.overflow_hidden,
+						baseStyle.focusBox,
+						isFocused
+							? carbonStyle.focusBox
+							: null,
+					] }
+				/>
+
+				{ value && indeterminate ? (
+					<IconSubtract
+						width={ iconSize }
+						height={ iconSize }
+						fill={ iconColor }
+					/>
+				) : (
+					<IconCheckmark
+						width={ iconSize }
+						height={ iconSize }
+						fill={ iconColor }
+						style={ !value ? baseStyle.checkmarkHidden : null }
+					/>
+				) }
+			</Pressable>
+		)
+
+	},
+)
+
+const
+	size =
+		18,
+
+	iconSize =
+		size - 4,
+
+	baseStyle =
+		StyleSheet.create({
+			checkbox: {
+				width: size,
+				height: size,
+				borderWidth: 1,
+			},
+			focusBox: {
+				width: size + 6,
+				height: size + 6,
+				borderRadius: 4,
+				borderWidth: 2,
+				borderColor: "transparent",
+			},
+			checkmarkHidden: {
+				opacity: 0,
+			},
+		}),
+
+	interactiveStyle =
+		CarbonStyleSheet.create<
+			Record<`${CheckboxInputInteractiveState}_${"true" | "false"}`, ViewStyle>
+		>({
+			normal_false: {
+				borderColor: CarbonStyleSheet.color.icon_primary,
+			},
+			normal_true: {
+				backgroundColor: CarbonStyleSheet.color.icon_primary,
+				borderColor: CarbonStyleSheet.color.icon_primary,
+			},
+			disabled_false: {
+				borderColor: CarbonStyleSheet.color.icon_disabled,
+			},
+			disabled_true: {
+				backgroundColor: CarbonStyleSheet.color.icon_disabled,
+				borderColor: CarbonStyleSheet.color.icon_disabled,
+			},
+			error_false: {
+				borderColor: CarbonStyleSheet.color.support_error,
+			},
+			error_true: {
+				backgroundColor: CarbonStyleSheet.color.icon_primary,
+				borderColor: CarbonStyleSheet.color.support_error,
+			},
+			read_only_false: {
+				borderColor: CarbonStyleSheet.color.icon_disabled,
+			},
+			read_only_true: {
+				borderColor: CarbonStyleSheet.color.icon_disabled,
+			},
+			warning_false: {
+				borderColor: CarbonStyleSheet.color.icon_primary,
+			},
+			warning_true: {
+				backgroundColor: CarbonStyleSheet.color.icon_primary,
+				borderColor: CarbonStyleSheet.color.icon_primary,
+			},
+		}),
+
+	carbonStyle =
+		CarbonStyleSheet.create({
+			focusBox: {
+				borderColor: CarbonStyleSheet.color.focus,
+			},
+		}),
+
+	mapIconColor: Record<CheckboxInputInteractiveState, Record<ThemeContext["colorScheme"], string>> =
+		{
+			normal: {
+				gray_10: Color.Token.gray_10.icon_inverse,
+				gray_100: Color.Token.gray_100.icon_inverse,
+			},
+			disabled: {
+				gray_10: Color.Token.gray_10.icon_inverse,
+				gray_100: Color.Token.gray_100.icon_inverse,
+			},
+			error: {
+				gray_10: Color.Token.gray_10.icon_inverse,
+				gray_100: Color.Token.gray_100.icon_inverse,
+			},
+			read_only: {
+				gray_10: Color.Token.gray_10.icon_primary,
+				gray_100: Color.Token.gray_100.icon_primary,
+			},
+			warning: {
+				gray_10: Color.Token.gray_10.icon_inverse,
+				gray_100: Color.Token.gray_100.icon_inverse,
+			},
+		}
+
+function getInteractiveStateStyle(
+	interactiveState: CheckboxInputInteractiveState,
+	value: CheckboxInputValue,
+) {
+	return interactiveStyle[`${interactiveState}_${!!value}`]
+}

package/src/components/checkbox-input/CheckboxInputInteractiveState.ts

@@ -0,0 +1,6 @@
+export type CheckboxInputInteractiveState =
+	| "normal"
+	| "disabled"
+	| "read_only"
+	| "error"
+	| "warning"

package/src/components/checkbox-input/CheckboxInputProps.ts

@@ -0,0 +1,25 @@
+import type {
+	PressableProps,
+	ViewProps,
+} from "react-native"
+
+import type {
+	CheckboxInputInteractiveState,
+} from "./CheckboxInputInteractiveState"
+
+import type {
+	CheckboxInputValue,
+} from "./CheckboxInputValue"
+
+export interface CheckboxInputProps extends Omit<
+	PressableProps,
+	| "children"
+	| "disabled"
+	| "style"
+> {
+	defaultValue?: CheckboxInputValue,
+	value?: CheckboxInputValue,
+	interactiveState?: CheckboxInputInteractiveState,
+	onChange?: (value: CheckboxInputValue) => void,
+	style?: ViewProps["style"],
+}

package/src/components/checkbox-input/CheckboxInputRef.ts

@@ -0,0 +1,11 @@
+import type {
+	View,
+} from "react-native"
+
+import type {
+	RefBase,
+} from "./_RefBase"
+
+export interface CheckboxInputRef extends View, RefBase {
+}
+

package/src/components/checkbox-input/CheckboxInputValue.ts

@@ -0,0 +1,6 @@
+/**
+ * null = indeterminate
+ */
+export type CheckboxInputValue =
+	| boolean
+	| null

package/src/components/checkbox-input/_RefBase.ts

@@ -0,0 +1,11 @@
+import type {
+	CheckboxInputValue,
+} from "./CheckboxInputValue"
+
+export interface RefBase {
+	readonly value: CheckboxInputValue,
+	/**
+	 * This method does nothing when `controlled` prop is true
+	 */
+	setValue: (value: CheckboxInputValue | ((value: CheckboxInputValue) => CheckboxInputValue)) => void,
+}

package/src/components/checkbox-input/index.tsx

@@ -0,0 +1,5 @@
+export * from "./CheckboxInput"
+export * from "./CheckboxInputInteractiveState"
+export * from "./CheckboxInputProps"
+export * from "./CheckboxInputRef"
+export * from "./CheckboxInputValue"