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

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

@@ -0,0 +1,368 @@
+import {
+	forwardRef,
+	useCallback,
+	useContext,
+	useEffect,
+	useImperativeHandle,
+	useRef,
+	useState,
+} from 'react'
+
+import {
+	Pressable,
+	StyleSheet,
+	View,
+	type PressableProps,
+	type ViewProps,
+	type ViewStyle,
+} from 'react-native'
+
+import {
+	StyleSheet as StyleSheetColor,
+} from '../../_style-sheet'
+
+import {
+	ThemeContext,
+} from '../../contexts'
+
+import {
+	CommonStyle,
+	FlexStyle,
+} from '../../styles'
+
+import {
+	Icon,
+	type IconProps,
+} from '../icon'
+
+import IconCheckmark from '@carbon/icons/es/checkmark/20'
+import IconSubtract from '@carbon/icons/es/subtract/20'
+
+export type CheckboxInputInteractiveState =
+	| 'normal'
+	| 'disabled'
+	| 'read_only'
+	| 'error'
+	| 'warning'
+
+export interface CheckboxInputProps extends Omit<
+	PressableProps,
+	| 'children'
+	| 'disabled'
+	| 'style'
+> {
+	/**
+	 * Control `value` and `indeterminate` prop
+	 */
+	controlled?: boolean,
+	value?: boolean,
+	indeterminate?: boolean,
+	interactiveState?: CheckboxInputInteractiveState,
+	onChange?: (value: boolean) => void,
+	style?: ViewProps['style'],
+}
+
+interface CheckboxInputRefBase {
+	readonly value: boolean,
+	/**
+	 * This method does nothing when `controlled` prop is true
+	 */
+	setValue: (value: boolean | ((value: boolean, indeterminate: boolean) => boolean)) => void,
+}
+
+export interface CheckboxInputRef extends View, CheckboxInputRefBase {
+}
+
+export const CheckboxInput = forwardRef<CheckboxInputRef, CheckboxInputProps>(
+	function CheckboxInput(
+		{
+			controlled,
+			value: valueProp,
+			indeterminate: indeterminateProp,
+			interactiveState = 'normal',
+			style,
+			role = 'checkbox',
+			onBlur,
+			onChange,
+			onFocus,
+			onPress,
+			...props
+		},
+		forwardedRef,
+	) {
+
+		const
+			themeContext =
+				useContext(ThemeContext),
+
+			viewRef =
+				useRef<View>(null),
+
+			ref =
+				useRef({
+					isMounted: false,
+					value: !!valueProp,
+				}),
+
+			[isFocused, setIsFocused] =
+				useState(false),
+
+			[state, setState] =
+				useState({
+					value: !!valueProp,
+					indeterminate: !!indeterminateProp,
+				}),
+
+			value =
+				controlled ? !!valueProp : state.value,
+
+			indeterminate =
+				controlled
+					? indeterminateProp
+					: state.indeterminate,
+
+			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(!controlled && interactiveState !== 'read_only') {
+						setState(state_ => {
+							return {
+								value: state_.indeterminate ? true : !state_.value,
+								indeterminate: false,
+							}
+						})
+					}
+				}, [
+					controlled,
+					interactiveState,
+					onPress,
+				]),
+
+			iconColor =
+				getIconColor(interactiveState, themeContext.color)
+
+		useEffect(() => {
+			if(!ref.current.isMounted) {
+				ref.current.isMounted = true
+			} else {
+				ref.current.value = value
+				onChange?.(value)
+			}
+		}, [
+			value,
+			onChange,
+		])
+
+		useImperativeHandle(forwardedRef, () => {
+			return Object.assign<View, CheckboxInputRefBase>(
+				viewRef.current as View,
+				{
+					get value() {
+						return ref.current.value
+					},
+					setValue(value_) {
+						if(!controlled) {
+							setState(state_ => {
+								if(typeof value_ === 'function') {
+									ref.current.value = value_(state_.value, state_.indeterminate)
+								} else {
+									ref.current.value = value_
+								}
+								return {
+									value: ref.current.value,
+									indeterminate: false,
+								}
+							})
+						}
+					},
+				},
+			)
+		}, [
+			controlled,
+		])
+
+		return (
+			<Pressable
+				{ ...props }
+				disabled={ interactiveState === 'disabled' }
+				role={ role }
+				onBlur={ blurHandler }
+				onFocus={ focusHandler }
+				onPress={ pressHandler }
+				style={ [
+					FlexStyle.items_center,
+					FlexStyle.justify_center,
+					CommonStyle.relative,
+					baseStyle.checkbox,
+					// getInteractiveStateStyle(interactiveState, value, themeContext.color),
+					getInteractiveStateStyle(interactiveState, value),
+					style,
+				] }
+				ref={ viewRef }
+			>
+				<View
+					style={ [
+						CommonStyle.absolute,
+						CommonStyle.overflow_hidden,
+						baseStyle.focusBox,
+						isFocused
+							? { borderColor: themeContext.color.focus }
+							: null,
+					] }
+				/>
+
+				{ value && indeterminate ? (
+					<IconSubtractComponent
+						color={ iconColor }
+						stroke={ iconColor }
+					/>
+				) : (
+					<IconCheckmarkComponent
+						color={ iconColor }
+						stroke={ 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 =
+		StyleSheetColor.create<
+			Record<`${CheckboxInputInteractiveState}_${'true' | 'false'}`, ViewStyle>
+		>(color => {
+			return {
+				normal_false: {
+					borderColor: color.icon_primary,
+				},
+				normal_true: {
+					backgroundColor: color.icon_primary,
+					borderColor: color.icon_primary,
+				},
+				disabled_false: {
+					borderColor: color.icon_disabled,
+				},
+				disabled_true: {
+					backgroundColor: color.icon_disabled,
+					borderColor: color.icon_disabled,
+				},
+				error_false: {
+					borderColor: color.support_error,
+				},
+				error_true: {
+					backgroundColor: color.icon_primary,
+					borderColor: color.support_error,
+				},
+				read_only_false: {
+					borderColor: color.icon_disabled,
+				},
+				read_only_true: {
+					borderColor: color.icon_disabled,
+				},
+				warning_false: {
+					borderColor: color.icon_primary,
+				},
+				warning_true: {
+					backgroundColor: color.icon_primary,
+					borderColor: color.icon_primary,
+				},
+			}
+		})
+
+function getInteractiveStateStyle(
+	interactiveState: CheckboxInputInteractiveState,
+	value: boolean,
+) {
+	return interactiveStyle[`${interactiveState}_${value}`]
+}
+
+function getIconColor(
+	interactiveState: CheckboxInputInteractiveState,
+	color: ThemeContext['color'],
+) {
+	if(interactiveState === 'read_only') {
+		return color.icon_primary
+	}
+	return color.icon_inverse
+}
+
+interface IconComponentProps extends Omit<IconProps, 'src'> {
+}
+
+function IconCheckmarkComponent({
+	width = iconSize,
+	height = iconSize,
+	...props
+}: IconComponentProps) {
+
+	return (
+		<Icon
+			{ ...props }
+			src={ IconCheckmark }
+			width={ width }
+			height={ height }
+		/>
+	)
+
+}
+
+function IconSubtractComponent({
+	width = iconSize,
+	height = iconSize,
+	...props
+}: IconComponentProps) {
+
+	return (
+		<Icon
+			{ ...props }
+			src={ IconSubtract }
+			width={ width }
+			height={ height }
+		/>
+	)
+
+}

package/src/components/collapsible/index.tsx

@@ -0,0 +1,289 @@
+import {
+	forwardRef,
+	useCallback,
+	useEffect,
+	useImperativeHandle,
+	useRef,
+	useState,
+} from 'react'
+
+import {
+	View,
+	type ViewProps,
+} from 'react-native'
+
+import Animated, {
+	Easing,
+	interpolate,
+	runOnJS,
+	useAnimatedStyle,
+	useSharedValue,
+	withTiming,
+	type WithTimingConfig,
+} from 'react-native-reanimated'
+
+import {
+	MotionConstant,
+} from '../../constants'
+
+import {
+	CommonStyle,
+	FlexStyle,
+} from '../../styles'
+
+type AnimatedViewProps = Animated.View['props']
+
+export interface CollapsibleProps extends AnimatedViewProps {
+	/**
+	 * Control `open` prop
+	 */
+	controlled?: boolean,
+	open?: boolean,
+	motion?: Record<'toOpen' | 'toClose', WithTimingConfig>,
+	contentContainerStyle?: ViewProps['style'],
+	onToggle?: (value: boolean) => void,
+	onOpened?: () => void,
+	onClosed?: () => void,
+}
+
+interface CollapsibleRefBase {
+	/**
+	 * This method does nothing when `controlled` prop is true
+	 */
+	setOpen: (value: boolean | ((value: boolean) => boolean)) => void,
+}
+
+export interface CollapsibleRef extends View, CollapsibleRefBase {
+}
+
+export const Collapsible = forwardRef<CollapsibleRef, CollapsibleProps>(
+	function Collapsible(
+		{
+			controlled,
+			open,
+			motion = {
+				toOpen: {
+					duration: MotionConstant.Durations.fast_02,
+					easing: Easing.bezier(
+						MotionConstant.Easings.entrance.productive.x1,
+						MotionConstant.Easings.entrance.productive.y1,
+						MotionConstant.Easings.entrance.productive.x2,
+						MotionConstant.Easings.entrance.productive.y2,
+					),
+				},
+				toClose: {
+					duration: MotionConstant.Durations.fast_02,
+					easing: Easing.bezier(
+						MotionConstant.Easings.exit.productive.x1,
+						MotionConstant.Easings.exit.productive.y1,
+						MotionConstant.Easings.exit.productive.x2,
+						MotionConstant.Easings.exit.productive.y2,
+					),
+				},
+			},
+			children,
+			style,
+			contentContainerStyle,
+			onToggle,
+			onOpened,
+			onClosed,
+			...props
+		},
+		forwardedRef,
+	) {
+
+		const
+			viewRef =
+				useRef<Animated.View>(null),
+
+			ref =
+				useRef<{
+					/**
+					 * To compare `positionView` value to avoid unnecessary set state with the same value
+					 */
+					positionView: 'absolute' | 'relative',
+					contentHeight: number,
+					openSelf: boolean,
+				}>({
+					positionView: open ? 'relative' : 'absolute',
+					contentHeight: 0,
+					openSelf: !!open,
+				}),
+
+			[openSelf, setOpenSelf] =
+				useState(!!open),
+
+			/**
+			 * Absolute position is required to keep content being rendered as it is when the container is not open (zero height)  
+			 *
+			 * We need 'relative' position when the collapsible is initially opened due to heightAnimated initial value is zero and only will be calculated after content is rendered  
+			 *
+			 * This state will be changed once only from 'relative' to 'absolute'  
+			 */
+			[positionView, setPositionView] =
+				useState<'absolute' | 'relative'>(ref.current.positionView),
+
+			heightAnimated =
+				useSharedValue(0),
+
+			/**
+			 * Initially, just using the current heightAnimated value, and interpolate it.  
+			 * But React Native Reanimated doesn't know the max input even we use the ref.current.contentHeight  
+			 * If someone have better idea about this without using React State for the max input of interpolate, it might be better
+			 * 0 -> Closed
+			 * 1 -> Opened
+			 */
+			contentContainerAnimated =
+				useSharedValue(0),
+
+			/**
+			 * When i wrote this, i can't find any information about motion specifically for Accordion to animate the content.  
+			 * So, i just tried to make it as similar as possible how the React Carbon Design System animation behaviour that using `transition-behaviour: allow-discrete`
+			 */
+			contentContainerAnimatedStyle =
+				useAnimatedStyle(() => {
+					return {
+						opacity: interpolate(
+							contentContainerAnimated.value,
+							contentContainerInterpolationRange,
+							[0, 1],
+						),
+						transform: [{
+							translateY: interpolate(
+								contentContainerAnimated.value,
+								contentContainerInterpolationRange,
+								[-12, 0],
+							),
+						}],
+					}
+				}),
+
+			isOpen =
+				controlled ? !!open : openSelf,
+
+			setPositionViewToAbsolute =
+				useCallback(() => {
+					if(ref.current.positionView === 'relative') {
+						ref.current.positionView = 'absolute'
+						setPositionView('absolute')
+					}
+				}, []),
+
+			onLayoutContent: NonNullable<AnimatedViewProps['onLayout']> =
+				useCallback(({ nativeEvent }) => {
+					if(ref.current.contentHeight !== nativeEvent.layout.height) {
+						ref.current.contentHeight = nativeEvent.layout.height
+						if(isOpen) {
+							heightAnimated.value =
+								withTiming(
+									ref.current.contentHeight,
+									undefined,
+									() => runOnJS(setPositionViewToAbsolute)(),
+								)
+						}
+					}
+				}, [
+					heightAnimated,
+					isOpen,
+					setPositionViewToAbsolute,
+				])
+
+		useEffect(() => {
+			if(ref.current.contentHeight) {
+				if(isOpen) {
+					heightAnimated.value =
+						withTiming(
+							ref.current.contentHeight,
+							motion.toOpen,
+							onOpened
+								? () => runOnJS(onOpened)()
+								: undefined,
+						)
+					contentContainerAnimated.value =
+						withTiming(
+							1,
+							motion.toOpen,
+						)
+				} else {
+					heightAnimated.value =
+						withTiming(
+							0,
+							motion.toClose,
+							onClosed
+								? () => runOnJS(onClosed)()
+								: undefined,
+						)
+					contentContainerAnimated.value =
+						withTiming(
+							0,
+							motion.toClose,
+						)
+				}
+				onToggle?.(isOpen)
+			}
+		}, [
+			isOpen,
+			heightAnimated,
+			contentContainerAnimated,
+			motion,
+			onToggle,
+			onOpened,
+			onClosed,
+		])
+
+		useImperativeHandle(forwardedRef, () => {
+			return Object.assign<View, CollapsibleRefBase>(
+				viewRef.current as View,
+				{
+					setOpen(value) {
+						if(!controlled) {
+							if(typeof value === 'boolean') {
+								ref.current.openSelf = value
+							} else {
+								ref.current.openSelf = value(ref.current.openSelf)
+							}
+							setOpenSelf(ref.current.openSelf)
+						}
+					},
+				},
+			)
+		}, [
+			controlled,
+		])
+
+		return (
+			<Animated.View
+				{ ...props }
+				style={ [
+					CommonStyle.overflow_hidden,
+					positionView === 'absolute'
+						? { height: heightAnimated }
+						: null,
+					style,
+				] }
+				ref={ viewRef }
+			>
+				<View
+					style={ [
+						CommonStyle.w_full,
+						{ position: positionView },
+					] }
+				>
+					<Animated.View
+						style={ [
+							FlexStyle.flex_initial,
+							contentContainerAnimatedStyle,
+							contentContainerStyle,
+						] }
+						onLayout={ onLayoutContent }
+					>
+						{ children }
+					</Animated.View>
+				</View>
+			</Animated.View>
+		)
+
+	},
+)
+
+const contentContainerInterpolationRange = [0, 1]

package/src/components/form-helper-text/index.tsx

@@ -0,0 +1,84 @@
+import {
+	useContext,
+} from 'react'
+
+import {
+	StyleSheet,
+	View,
+	type ViewProps,
+} from 'react-native'
+
+import {
+	ThemeContext,
+} from '../../contexts'
+
+import {
+	FlexStyle,
+} from '../../styles'
+
+import {
+	Text,
+	type TextProps,
+} from '../text'
+
+export interface FormHelperTextProps extends Omit<ViewProps, 'children'> {
+	error?: boolean,
+	text: string,
+	textLeading?: React.ReactNode,
+	textTrailing?: React.ReactNode,
+	textProps?: Omit<TextProps, 'children'>,
+}
+
+export function FormHelperText({
+	error,
+	text,
+	textLeading,
+	textTrailing,
+	textProps,
+	style,
+	...props
+}: FormHelperTextProps) {
+
+	const
+		themeContext =
+			useContext(ThemeContext)
+
+	return (
+		<View
+			{ ...props }
+			style={ [
+				FlexStyle.flex_row,
+				baseStyle.container,
+				style,
+			] }
+		>
+			{ textLeading }
+
+			<Text
+				{ ...textProps }
+				type={ textProps?.type || 'helper_text_01' }
+				style={ [
+					{
+						color: error
+							? themeContext.color.text_error
+							: themeContext.color.text_primary,
+					},
+					textProps?.style,
+				] }
+			>
+				{ text }
+			</Text>
+
+			{ textTrailing }
+		</View>
+	)
+
+}
+
+const
+	baseStyle =
+		StyleSheet.create({
+			container: {
+				gap: 8,
+			},
+		})