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

package/src/components/text-input-fluid/TextInputFluid.tsx

@@ -0,0 +1,166 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+} 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 {
+	FlexStyleSheet,
+} from "../../_internal/style-sheets"
+
+import {
+	ThemeContext,
+} from "../../contexts"
+
+import type {
+	ThemeType,
+} from "../../types"
+
+import {
+	FormHelperText,
+} from "../form-helper-text"
+
+import {
+	FormLabel,
+} from "../form-label"
+
+import {
+	TextInputField,
+} from "../text-input-field"
+
+import type {
+	TextInputFluidProps,
+} from "./TextInputFluidProps"
+
+import type {
+	TextInputFluidRef,
+} from "./TextInputFluidRef"
+
+export const TextInputFluid = forwardRef<TextInputFluidRef, TextInputFluidProps>(
+	function TextInputFluid(
+		{
+			label,
+			helperText,
+			interactiveState,
+			style,
+			textInputStyle,
+			...textInputFieldProps
+		},
+		ref,
+	) {
+
+		const
+			themeContext =
+				useContext(ThemeContext)
+
+		return (
+			<TextInputField
+				ref={ ref }
+				{ ...textInputFieldProps }
+				size="medium"
+				interactiveState={ interactiveState }
+				hideInteractiveStateIcon
+				blockStartNode={
+					<FormLabel
+						label={ label }
+						style={ styleSheet.label }
+					/>
+				}
+				blockEndNode={
+					!!helperText?.length && (
+						<FormHelperText
+							text={ helperText }
+							style={ [
+								FlexStyleSheet.flex_initial,
+								styleSheet.helperText,
+							] }
+							textTrailing={
+								interactiveState === "invalid" ? (
+									<IconWarningFilled
+										width={ 16 }
+										height={ 16 }
+										fill={ mapIconInvalidColor[themeContext.colorScheme] }
+									/>
+								) : interactiveState === "warning" ? (
+									<IconWarningAltFilled
+										width={ 16 }
+										height={ 16 }
+										fill={ mapIconWarningColor[themeContext.colorScheme] }
+									/>
+								) : undefined
+							}
+						/>
+					)
+				}
+				style={ [
+					styleSheet.textInputFluid,
+					helperText?.length
+						? styleSheet.textInputFieldHeight96
+						: styleSheet.textInputFieldHeight64,
+					style,
+				] }
+				textInputStyle={ [
+					helperText?.length
+						? styleSheet.rnTextInputNoBorderBottom
+						: undefined,
+					textInputStyle,
+				] }
+			/>
+		)
+
+	},
+)
+
+const
+	styleSheet =
+		StyleSheet.create({
+			textInputFluid: {
+				paddingTop: 13,
+			},
+			textInputFieldHeight64: {
+				height: Spacing.spacing_10,
+			},
+			textInputFieldHeight96: {
+				minHeight: Spacing.spacing_12,
+			},
+			label: {
+				paddingLeft: Spacing.spacing_05,
+				paddingRight: Spacing.spacing_05,
+			},
+			rnTextInputNoBorderBottom: {
+				marginLeft: Spacing.spacing_05,
+				marginRight: Spacing.spacing_05,
+				paddingLeft: 0,
+				paddingRight: 0,
+			},
+			helperText: {
+				justifyContent: "space-between",
+				paddingTop: Spacing.spacing_03,
+				paddingBottom: Spacing.spacing_03,
+				paddingLeft: Spacing.spacing_05,
+				paddingRight: Spacing.spacing_05,
+			},
+		}),
+
+	mapIconInvalidColor: Record<ThemeType.ColorScheme, string> =
+		{
+			gray_10: Color.Token.gray_10.support_error,
+			gray_100: Color.Token.gray_100.support_error,
+		},
+
+	mapIconWarningColor: Record<ThemeType.ColorScheme, string> =
+		{
+			gray_10: Color.Token.gray_10.support_warning,
+			gray_100: Color.Token.gray_100.support_warning,
+		}

package/src/components/text-input-fluid/TextInputFluidProps.ts

@@ -0,0 +1,14 @@
+import type {
+	TextInputFieldProps,
+} from "../text-input-field/TextInputFieldProps"
+
+export interface TextInputFluidProps extends Omit<
+	TextInputFieldProps,
+	| "size"
+	| "hideInteractiveStateIcon"
+	| "blockStartNodes"
+	| "blockEndNodes"
+> {
+	label: string,
+	helperText?: string,
+}

package/src/components/text-input-fluid/TextInputFluidRef.ts

@@ -0,0 +1,6 @@
+import type {
+	TextInputFieldRef,
+} from "../text-input-field/TextInputFieldRef"
+
+export interface TextInputFluidRef extends TextInputFieldRef {
+}

package/src/components/text-input-fluid/index.tsx

@@ -0,0 +1,3 @@
+export * from "./TextInputFluid"
+export type * from "./TextInputFluidProps"
+export type * from "./TextInputFluidRef"

package/src/components/toggle/State.ts

@@ -0,0 +1,5 @@
+import type {
+	SwitchState,
+} from "../switch/SwitchState"
+
+export type State = SwitchState

package/src/components/toggle/base/Base.tsx

@@ -0,0 +1,302 @@
+import {
+	forwardRef,
+	useCallback,
+	useContext,
+	useImperativeHandle,
+	useRef,
+} from "react"
+
+import {
+	Pressable,
+	StyleSheet,
+	View,
+	type PressableProps,
+	type TextStyle,
+} from "react-native"
+
+import {
+	Color,
+	Spacing,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	GlobalConfigContext,
+} from "../../../_internal/contexts"
+
+import {
+	CommonStyleSheet,
+	FlexStyleSheet,
+} from "../../../_internal/style-sheets"
+
+import {
+	ThemeContext,
+} from "../../../contexts"
+
+import {
+	FormLabel,
+} from "../../form-label"
+
+import {
+	Switch,
+	type SwitchRef,
+	type SwitchState,
+} from "../../switch"
+
+import {
+	Text,
+} from "../../text"
+
+import type {
+	BaseProps,
+} from "./BaseProps"
+
+import type {
+	BaseRef,
+} from "./BaseRef"
+
+import type {
+	RefBase,
+} from "./_RefBase"
+
+export const Base = forwardRef<BaseRef, BaseProps>(
+	function Base(
+		{
+			state = "normal",
+			defaultValue,
+			value,
+			label,
+			actionText,
+			onChange,
+			formLabelProps,
+			actionTextProps,
+			pressableProps,
+			switchProps,
+			style,
+			dir,
+			...viewProps
+		},
+		forwardedRef,
+	) {
+
+		const
+			viewRef =
+				useRef<View>(null),
+
+			switchRef =
+				useRef<SwitchRef>(null),
+
+			themeContext =
+				useContext(ThemeContext),
+
+			globalConfigContext =
+				useContext(GlobalConfigContext),
+
+			pressHandler: NonNullable<PressableProps["onPress"]> =
+				useCallback(event => {
+					pressableProps?.onPress?.(event)
+					switchRef.current?.setValue(currentValue => !currentValue)
+				}, [
+					pressableProps,
+				])
+
+		useImperativeHandle(forwardedRef, () => {
+			return Object.assign<View, RefBase>(
+				(viewRef.current ?? {
+				}) as View,
+				{
+					get value() {
+						return !!switchRef.current?.value
+					},
+					setValue(val) {
+						switchRef.current?.setValue(val)
+					},
+				},
+			)
+		}, [])
+
+		return (
+			<View
+				{ ...viewProps }
+				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
+				style={ [
+					FlexStyleSheet.flex_row,
+					FlexStyleSheet.flex_wrap,
+					FlexStyleSheet.items_center,
+					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+					style,
+				] }
+				ref={ viewRef }
+			>
+				<Pressable
+					{ ...pressableProps }
+					role="switch"
+					disabled={ state !== "normal" }
+					aria-checked={ value }
+					aria-label={ pressableProps?.["aria-label"] || label }
+					onPress={ pressHandler }
+					style={ [
+						CommonStyleSheet.absolute,
+						CommonStyleSheet.w_full,
+						CommonStyleSheet.h_full,
+						baseStyle.pressable,
+						pressableProps?.style,
+					] }
+				/>
+
+				{ !!label && (
+					<FormLabel
+						{ ...formLabelProps }
+						label={ label }
+						textProps={{
+							...formLabelProps?.textProps,
+							style: [
+								mapFormLabelTextStyle[themeContext.colorScheme][state],
+								formLabelProps?.textProps?.style,
+							],
+						}}
+						style={ [
+							CommonStyleSheet.w_full,
+							baseStyle.label,
+							formLabelProps?.style,
+						] }
+					/>
+				) }
+
+				<Switch
+					{ ...switchProps }
+					aria-label={ switchProps?.["aria-label"] || label }
+					state={ state }
+					disabled={ state !== "normal" }
+					role="none"
+					defaultValue={ defaultValue }
+					value={ value }
+					onChange={ onChange }
+					onPress={ switchProps?.onPress ?? pressableProps?.onPress }
+					dir={ switchProps?.dir ?? globalConfigContext.rtl ? "ltr" : undefined } // Fix
+					style={ [
+						baseStyle.switch,
+						globalConfigContext.rtl ? baseStyle.ltr : undefined, // Fix
+						switchProps?.style,
+					] }
+					ref={ switchRef }
+				/>
+
+				{ !!actionText && (
+					<Text
+						{ ...actionTextProps }
+						type={ actionTextProps?.type || "body_compact_01" }
+						style={ [
+							baseStyle.actionText,
+							mapActionTextStyle[themeContext.colorScheme][state],
+							actionTextProps?.style,
+						] }
+					>
+						{ actionText }
+					</Text>
+				) }
+			</View>
+		)
+
+	},
+)
+
+const
+	baseStyle =
+		StyleSheet.create({
+			pressable: {
+				zIndex: 1,
+			},
+			switch: {
+				zIndex: 2,
+			},
+			label: {
+				marginBottom: Spacing.spacing_05,
+			},
+			actionText: {
+				marginStart: Spacing.spacing_03, // same for both size
+			},
+			/**
+			 * Fix
+			 */
+			ltr: {
+				direction: "ltr",
+			},
+		}),
+
+	coloringStyle: {
+		[ColorScheme in ThemeContext["colorScheme"]]: Record<`${"formLabel" | "actionText"}_${SwitchState}`, TextStyle>
+	} =
+		{
+			gray_10: {
+				formLabel_normal: {
+					color: Color.Token.gray_10.text_primary,
+				},
+				formLabel_disabled: {
+					color: Color.Token.gray_10.text_disabled,
+				},
+				formLabel_read_only: {
+					color: Color.Token.gray_10.text_primary,
+				},
+				actionText_normal: {
+					color: Color.Token.gray_10.text_primary,
+				},
+				actionText_disabled: {
+					color: Color.Token.gray_10.text_disabled,
+				},
+				actionText_read_only: {
+					color: Color.Token.gray_10.text_primary,
+				},
+			},
+			gray_100: {
+				formLabel_normal: {
+					color: Color.Token.gray_100.text_primary,
+				},
+				formLabel_disabled: {
+					color: Color.Token.gray_100.text_disabled,
+				},
+				formLabel_read_only: {
+					color: Color.Token.gray_100.text_primary,
+				},
+				actionText_normal: {
+					color: Color.Token.gray_100.text_primary,
+				},
+				actionText_disabled: {
+					color: Color.Token.gray_100.text_disabled,
+				},
+				actionText_read_only: {
+					color: Color.Token.gray_100.text_primary,
+				},
+			},
+		},
+
+	mapFormLabelTextStyle: {
+		[ColorScheme in ThemeContext["colorScheme"]]: Record<SwitchState, TextStyle>
+	} =
+		{
+			gray_10: {
+				normal: coloringStyle.gray_10.formLabel_normal,
+				disabled: coloringStyle.gray_10.formLabel_disabled,
+				read_only: coloringStyle.gray_10.formLabel_read_only,
+			},
+			gray_100: {
+				normal: coloringStyle.gray_100.formLabel_normal,
+				disabled: coloringStyle.gray_100.formLabel_disabled,
+				read_only: coloringStyle.gray_100.formLabel_read_only,
+			},
+		},
+
+	mapActionTextStyle: {
+		[ColorScheme in ThemeContext["colorScheme"]]: Record<SwitchState, TextStyle>
+	} =
+		{
+			gray_10: {
+				normal: coloringStyle.gray_10.actionText_normal,
+				disabled: coloringStyle.gray_10.actionText_disabled,
+				read_only: coloringStyle.gray_10.actionText_read_only,
+			},
+			gray_100: {
+				normal: coloringStyle.gray_100.actionText_normal,
+				disabled: coloringStyle.gray_100.actionText_disabled,
+				read_only: coloringStyle.gray_100.actionText_read_only,
+			},
+		}

package/src/components/toggle/base/BaseProps.ts

@@ -0,0 +1,54 @@
+import type {
+	PressableProps,
+	ViewProps,
+} from "react-native"
+
+import type {
+	FormLabelProps,
+} from "../../form-label/FormLabelProps"
+
+import type {
+	SwitchProps,
+} from "../../switch/SwitchProps"
+
+import type {
+	TextProps,
+} from "../../text/TextProps"
+
+import type {
+	State,
+} from "../State"
+
+export interface BaseProps extends Omit<ViewProps, "children"> {
+	/**
+	 * @default 'normal'
+	 */
+	state?: State,
+	defaultValue?: boolean,
+	value?: boolean,
+	label?: string,
+	actionText?: string,
+	onChange?: SwitchProps["onChange"],
+	formLabelProps?: Omit<
+		FormLabelProps,
+		| "label"
+	>,
+	actionTextProps?: Omit<TextProps, "children">,
+	pressableProps?: Omit<
+		PressableProps,
+		| "aria-checked"
+		| "role"
+		| "style"
+	> & {
+		style?: ViewProps["style"],
+	},
+	switchProps?: Omit<
+		SwitchProps,
+		| "controlled"
+		| "value"
+		| "onChange"
+		| "motion"
+		| "role"
+		| "aria-checked"
+	>,
+}

package/src/components/toggle/base/BaseRef.ts

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

package/src/components/toggle/base/_RefBase.ts

@@ -0,0 +1,11 @@
+import type {
+	SwitchRef,
+} from "../../switch/SwitchRef"
+
+export interface RefBase {
+	readonly value: SwitchRef["value"],
+	/**
+	 * This method does nothing if `controlled` prop is true
+	 */
+	setValue: SwitchRef["setValue"],
+}

package/src/components/toggle/base/index.tsx

@@ -0,0 +1,3 @@
+export * from "./Base"
+export * from "./BaseProps"
+export * from "./BaseRef"

package/src/components/toggle/default/Default.tsx

@@ -0,0 +1,38 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	Base,
+} from "../base"
+
+import type {
+	DefaultProps,
+} from "./DefaultProps"
+
+import type {
+	DefaultRef,
+} from "./DefaultRef"
+
+export const Default = forwardRef<DefaultRef, DefaultProps>(
+	function Default(
+		{
+			switchProps,
+			...props
+		},
+		ref,
+	) {
+
+		return (
+			<Base
+				{ ...props }
+				switchProps={{
+					...switchProps,
+					size: "default",
+				}}
+				ref={ ref }
+			/>
+		)
+
+	},
+)

package/src/components/toggle/default/DefaultProps.ts

@@ -0,0 +1,9 @@
+import type {
+	BaseProps,
+} from "../base/BaseProps"
+
+export interface DefaultProps extends Omit<BaseProps, "switchProps"> {
+	label: string,
+	actionText: string,
+	switchProps?: Omit<BaseProps["switchProps"], "size">,
+}

package/src/components/toggle/default/DefaultRef.ts

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

package/src/components/toggle/default/index.tsx

@@ -0,0 +1,3 @@
+export * from "./Default"
+export * from "./DefaultProps"
+export * from "./DefaultRef"

package/src/components/toggle/index.tsx

@@ -0,0 +1,4 @@
+export * from "./base"
+export * from "./default"
+export * from "./small"
+export * from "./State"

package/src/components/toggle/small/Small.tsx

@@ -0,0 +1,38 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	Base,
+} from "../base"
+
+import type {
+	SmallProps,
+} from "./SmallProps"
+
+import type {
+	SmallRef,
+} from "./SmallRef"
+
+export const Small = forwardRef<SmallRef, SmallProps>(
+	function Small(
+		{
+			switchProps,
+			...props
+		},
+		ref,
+	) {
+
+		return (
+			<Base
+				{ ...props }
+				switchProps={{
+					...switchProps,
+					size: "small",
+				}}
+				ref={ ref }
+			/>
+		)
+
+	},
+)

package/src/components/toggle/small/SmallProps.ts

@@ -0,0 +1,7 @@
+import type {
+	BaseProps,
+} from "../base/BaseProps"
+
+export interface SmallProps extends Omit<BaseProps, "switchProps"> {
+	switchProps?: Omit<BaseProps["switchProps"], "size">,
+}

package/src/components/toggle/small/SmallRef.ts

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