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

package/src/components/accordion/_Header.tsx

@@ -0,0 +1,201 @@
+import {
+	useContext,
+} from "react"
+
+import {
+	View,
+	type TextStyle,
+	type ViewStyle,
+} from "react-native"
+
+import {
+	Color,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	FlexStyleSheet,
+} from "../../_internal/style-sheets"
+
+import {
+	CarbonStyleSheet,
+} from "../../carbon-style-sheet"
+
+import {
+	ThemeContext,
+} from "../../contexts"
+
+import type {
+	Size as ButtonSize,
+} from "../button/Size"
+
+import {
+	BaseColor as ButtonColor,
+	type BaseColorProps as ButtonColorProps,
+	type BaseColorState as ButtonColorState,
+} from "../button/base-color"
+
+import type {
+	AccordionHeaderProps,
+} from "./AccordionHeaderProps"
+
+import type {
+	AccordionSize,
+} from "./AccordionSize"
+
+import {
+	HeaderBorder,
+} from "./_HeaderBorder"
+
+import {
+	Chevron,
+} from "./_chevron"
+
+export function Header({
+	size = "medium",
+	open,
+	flushAlignment = false,
+	text,
+	style: styleProp,
+	...buttonProps
+}: AccordionHeaderProps) {
+
+	const
+		themeContext =
+			useContext(ThemeContext)
+
+	return (
+		<View
+			style={ styleProp }
+		>
+			{ /* The Border Box */ }
+			<HeaderBorder
+				flushAlignment={ flushAlignment }
+			/>
+
+			<ButtonColor
+				{ ...buttonProps }
+				size={ mapSizeToButtonSize[size] }
+				text={ text }
+				android_rippleEffectColor={ mapAndroidRippleEffectColor[themeContext.colorScheme] }
+				colorStateStyle={{
+					background: {
+						default: backgroundStyleSheet.default,
+						focused: backgroundStyleSheet.focused,
+						hovered: backgroundStyleSheet.hovered,
+						pressed: backgroundStyleSheet.pressed,
+						disabled: backgroundStyleSheet.disabled,
+					},
+					text: {
+						default: textStyleSheet.default,
+						focused: textStyleSheet.focused,
+						hovered: textStyleSheet.hovered,
+						pressed: textStyleSheet.pressed,
+						disabled: textStyleSheet.disabled,
+					},
+					icon: mapIconColor[themeContext.colorScheme],
+				}}
+				iconNode={
+					(...params) =>
+						iconNodeRenderer(!!open, ...params)
+				}
+				style={ FlexStyleSheet.self_stretch }
+			/>
+		</View>
+	)
+
+}
+
+const
+	backgroundStyleSheet =
+		CarbonStyleSheet.create<
+			Record<keyof ButtonColorProps["colorStateStyle"]["background"], ViewStyle>
+		>({
+			default: {
+				backgroundColor: "transparent",
+			},
+			focused: {
+				backgroundColor: "transparent",
+				borderWidth: 1,
+				borderColor: CarbonStyleSheet.color.focus,
+			},
+			hovered: {
+				backgroundColor: CarbonStyleSheet.color.layer_hover_01,
+			},
+			pressed: {
+				backgroundColor: CarbonStyleSheet.color.layer_hover_01,
+			},
+			disabled: {
+				backgroundColor: "transparent",
+			},
+		}),
+
+	textStyleSheet =
+		CarbonStyleSheet.create<
+			Record<keyof ButtonColorProps["colorStateStyle"]["text"], TextStyle>
+		>({
+			default: {
+				color: CarbonStyleSheet.color.text_primary,
+			},
+			focused: {
+				color: CarbonStyleSheet.color.text_primary,
+			},
+			hovered: {
+				color: CarbonStyleSheet.color.text_primary,
+			},
+			pressed: {
+				color: CarbonStyleSheet.color.text_primary,
+			},
+			disabled: {
+				color: CarbonStyleSheet.color.text_disabled,
+			},
+		}),
+
+	mapIconColor: Record<ThemeContext["colorScheme"], Record<ButtonColorState, string>> =
+		{
+			gray_10: {
+				default: Color.Token.gray_10.icon_primary,
+				focused: Color.Token.gray_10.icon_primary,
+				hovered: Color.Token.gray_10.icon_primary,
+				pressed: Color.Token.gray_10.icon_primary,
+				disabled: Color.Token.gray_10.icon_disabled,
+			},
+			gray_100: {
+				default: Color.Token.gray_100.icon_primary,
+				focused: Color.Token.gray_100.icon_primary,
+				hovered: Color.Token.gray_100.icon_primary,
+				pressed: Color.Token.gray_100.icon_primary,
+				disabled: Color.Token.gray_100.icon_disabled,
+			},
+		},
+
+	mapAndroidRippleEffectColor: Record<ThemeContext["colorScheme"], string> =
+		{
+			gray_10: Color.Token.gray_10.layer_hover_01,
+			gray_100: Color.Token.gray_100.layer_hover_01,
+		},
+
+	/**
+	 * Coincidentally (or not) use same value of height  
+	 * https://carbondesignsystem.com/components/accordion/style/#sizes
+	 */
+	mapSizeToButtonSize: Record<AccordionSize, ButtonSize> =
+		{
+			small: "small",
+			medium: "medium",
+			large: "large_productive",
+		},
+
+	iconNodeRenderer: (
+		open: boolean,
+		...params: Parameters<NonNullable<ButtonColorProps["iconNode"]>>
+	) => React.ReactNode =
+		(open, iconColorState, iconSize, iconStyle) => {
+			return (
+				<Chevron
+					open={ open }
+					color={ iconColorState }
+					size={ iconSize }
+					style={ iconStyle }
+				/>
+			)
+		}

package/src/components/accordion/_HeaderBorder.tsx

@@ -0,0 +1,75 @@
+import {
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+	View,
+	type ViewProps,
+} from "react-native"
+
+import {
+	Spacing,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	CommonStyleSheet,
+} from "../../_internal/style-sheets"
+
+import {
+	CarbonStyleSheet,
+} from "../../carbon-style-sheet"
+
+import {
+	ThemeContext,
+} from "../../contexts"
+
+export interface HeaderBorderProps {
+	/**
+	 * https://carbondesignsystem.com/components/accordion/style/#flush-alignment
+	 */
+	flushAlignment?: boolean,
+	style?: ViewProps["style"],
+}
+
+export function HeaderBorder({
+	flushAlignment,
+	style: styleProp,
+}: HeaderBorderProps) {
+
+	useContext(ThemeContext)
+
+	return (
+		<View
+			style={ [
+				CommonStyleSheet.absolute,
+				style.borderBox,
+				carbonStyle.borderBox,
+				flushAlignment
+					? {
+						left: Spacing.spacing_05,
+						right: Spacing.spacing_05,
+					}
+					: CommonStyleSheet.w_full,
+				styleProp,
+			] }
+		/>
+	)
+
+}
+
+const
+	style =
+		StyleSheet.create({
+			borderBox: {
+				height: 1,
+				borderTopWidth: 1,
+			},
+		}),
+
+	carbonStyle =
+		CarbonStyleSheet.create({
+			borderBox: {
+				borderColor: CarbonStyleSheet.color.border_subtle_00,
+			},
+		})

package/src/components/accordion/_Item.tsx

@@ -0,0 +1,175 @@
+import {
+	forwardRef,
+	useCallback,
+	useContext,
+	useImperativeHandle,
+	useRef,
+	useState,
+} from "react"
+
+import {
+	StyleSheet,
+	View,
+} from "react-native"
+
+import {
+	Spacing,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	GlobalConfigContext,
+} from "../../_internal/contexts"
+
+import {
+	CommonStyleSheet,
+} from "../../_internal/style-sheets"
+
+import {
+	Collapsible,
+} from "../collapsible"
+
+import type {
+	AccordionHeaderProps,
+} from "./AccordionHeaderProps"
+
+import type {
+	AccordionItemProps,
+} from "./AccordionItemProps"
+
+import type {
+	AccordionItemRef,
+} from "./AccordionItemRef"
+
+import {
+	Header,
+} from "./_Header"
+
+import type {
+	ItemRefBase,
+} from "./_ItemRefBase"
+
+import {
+	Context,
+} from "./_context"
+
+import {
+	Motion,
+} from "./_motion"
+
+export const Item = forwardRef<AccordionItemRef, AccordionItemProps>(
+	function Item(
+		{
+			defaultOpen,
+			open: openProp,
+			title,
+			children,
+			style: styleProp,
+			onPressHeader,
+			headerProps,
+			...props
+		},
+		forwardedRef,
+	) {
+
+		const
+			globalConfigContext =
+				useContext(GlobalConfigContext),
+
+			accordionContext =
+				useContext(Context),
+
+			ref =
+				useRef({
+					allowOnChangeEffect: false,
+					open: !!defaultOpen,
+				}),
+
+			viewRef =
+				useRef<View>(null),
+
+			[openSelf, setOpenSelf] =
+				useState(ref.current.open),
+
+			controlled =
+				typeof openProp !== "undefined",
+
+			open =
+				controlled ? !!openProp : openSelf,
+
+			pressHandler: NonNullable<AccordionHeaderProps["onPress"]> =
+				useCallback(event => {
+					onPressHeader?.(event)
+					if(!controlled) {
+						ref.current.allowOnChangeEffect = true
+						setOpenSelf(state => !state)
+					}
+				}, [
+					controlled,
+					onPressHeader,
+				])
+
+		useImperativeHandle(forwardedRef, () => {
+			return Object.assign<View, ItemRefBase>(
+				(viewRef.current ?? {
+				}) as View,
+				{
+					get open() {
+						return ref.current.open
+					},
+					setOpen(value) {
+						if(!controlled) {
+							if(typeof value === "boolean") {
+								ref.current.open = value
+							} else {
+								ref.current.open = value(ref.current.open)
+							}
+							setOpenSelf(ref.current.open)
+						}
+					},
+				},
+			)
+		}, [
+			controlled,
+		])
+
+		return (
+			<View
+				{ ...props }
+				style={ styleProp }
+			>
+				<Header
+					{ ...headerProps }
+					open={ open }
+					size={ accordionContext.size }
+					text={ title }
+					flushAlignment={ accordionContext.flushAlignment }
+					onPress={ pressHandler }
+				/>
+
+				<Collapsible
+					motion={ Motion }
+					open={ open }
+					dir={ globalConfigContext.rtl ? "rtl" : undefined }
+					contentContainerStyle={ [
+						globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+						accordionContext.collapsibleContentContainerStyle,
+						style.panel,
+					] }
+				>
+					{ children }
+				</Collapsible>
+			</View>
+		)
+
+	},
+)
+
+const
+	style =
+		StyleSheet.create({
+			panel: {
+				paddingTop: Spacing.spacing_03,
+				paddingBottom: Spacing.spacing_06,
+				paddingLeft: Spacing.spacing_05,
+			},
+		})

package/src/components/accordion/_ItemRefBase.ts

@@ -0,0 +1,7 @@
+export interface ItemRefBase {
+	readonly open: boolean,
+	/**
+	 * This method does nothing if `controlled` prop is true
+	 */
+	setOpen: (value: boolean | ((value: boolean) => boolean)) => void,
+}

package/src/components/accordion/_chevron/Chevron.tsx

@@ -0,0 +1,97 @@
+import {
+	useEffect,
+	useRef,
+} from "react"
+
+import {
+	Animated as RNAnimated,
+	type EasingFunction,
+} from "react-native"
+
+import ChevronDown from "@carbon/icons/svg/32/chevron--down.svg"
+
+import {
+	Motion,
+} from "../_motion"
+
+import type {
+	ChevronProps,
+} from "./ChevronProps"
+
+const
+	AnimatedSvgChevronDown =
+		RNAnimated.createAnimatedComponent(ChevronDown)
+
+export function Chevron({
+	open,
+	color,
+	size,
+	style,
+}: ChevronProps) {
+
+	const
+		isMounted =
+			useRef(false),
+
+		/**
+		 * To animate degree unit, we have to animate it through interpolation
+		 * 
+		 * - 0 = 0deg (original)
+		 * - 1 = 180deg (become to chevron up)
+		 */
+		rotateZ =
+			useRef(
+				new RNAnimated.Value(open ? 1 : 0),
+			)
+
+	useEffect(() => {
+		if(isMounted.current) {
+			if(open) {
+				RNAnimated.timing(
+					rotateZ.current,
+					{
+						toValue: 1,
+						duration: Motion.toOpen.duration,
+						easing: Motion.toOpen.easing as EasingFunction,
+						useNativeDriver: true,
+					},
+				).start()
+			} else {
+				RNAnimated.timing(
+					rotateZ.current,
+					{
+						toValue: 0,
+						duration: Motion.toClose.duration,
+						easing: Motion.toClose.easing as EasingFunction,
+						useNativeDriver: true,
+					},
+				).start()
+			}
+		} else {
+			isMounted.current = true
+		}
+	}, [
+		open,
+		rotateZ,
+	])
+
+	return (
+		<AnimatedSvgChevronDown
+			fill={ color }
+			width={ size }
+			height={ size }
+			style={ [
+				{
+					transform: [{
+						rotateZ: rotateZ.current.interpolate({
+							inputRange: [0, 1],
+							outputRange: ["0deg", "180deg"],
+						}),
+					}],
+				},
+				style,
+			] }
+		/>
+	)
+
+}

package/src/components/accordion/_chevron/ChevronProps.ts

@@ -0,0 +1,10 @@
+import type {
+	SvgProps,
+} from "react-native-svg"
+
+export interface ChevronProps {
+	open: boolean,
+	color: string,
+	size: number,
+	style?: SvgProps["style"],
+}

package/src/components/accordion/_chevron/index.ts

@@ -0,0 +1,2 @@
+export * from "./Chevron"
+export type * from "./ChevronProps"

package/src/components/accordion/_context.ts

@@ -0,0 +1,20 @@
+import {
+	createContext,
+} from "react"
+
+import type {
+	CollapsibleProps,
+} from "../collapsible"
+
+import type {
+	AccordionHeaderProps,
+} from "./AccordionHeaderProps"
+
+export interface Context {
+	size?: AccordionHeaderProps["size"],
+	flushAlignment?: AccordionHeaderProps["flushAlignment"],
+	collapsibleContentContainerStyle?: CollapsibleProps["contentContainerStyle"],
+}
+
+export const Context = createContext<Context>({
+})

package/src/components/accordion/_motion.ts

@@ -0,0 +1,27 @@
+import {
+	Easing,
+} from "react-native"
+
+import {
+	Motion as Motion_,
+} from "@audira/carbon-react-native-elements"
+
+import type {
+	CollapsibleProps,
+} from "../collapsible/CollapsibleProps"
+
+export const Motion: NonNullable<CollapsibleProps["motion"]> =
+	{
+		toOpen: {
+			duration: Motion_.Duration.fast_02,
+			easing: Easing.bezier(
+				Motion_.Easing.entrance.productive.x1,
+				Motion_.Easing.entrance.productive.y1,
+				Motion_.Easing.entrance.productive.x2,
+				Motion_.Easing.entrance.productive.y2,
+			),
+		},
+		toClose: {
+			duration: 0,
+		},
+	}

package/src/components/accordion/_styles.ts

@@ -0,0 +1,24 @@
+import {
+	StyleSheet,
+} from "react-native"
+
+import {
+	Spacing,
+} from "@audira/carbon-react-native-elements"
+
+/**
+ * Sorry for named it %margin% but it is actually using padding  
+ * https://carbondesignsystem.com/components/accordion/style/#margin-right
+ */
+export const MarginRightStyle =
+	StyleSheet.create({
+		large: {
+			paddingEnd: "25%",
+		},
+		range_420_640: {
+			paddingEnd: Spacing.spacing_10,
+		},
+		small: {
+			paddingEnd: Spacing.spacing_05,
+		},
+	})

package/src/components/accordion/index.tsx

@@ -0,0 +1,7 @@
+export * from "./Accordion"
+export * from "./AccordionHeaderProps"
+export * from "./AccordionItemProps"
+export * from "./AccordionItemRef"
+export * from "./AccordionProps"
+export * from "./AccordionRef"
+export * from "./AccordionSize"

package/src/components/button/Size.ts

@@ -0,0 +1,7 @@
+export type Size =
+	| "small"
+	| "medium"
+	| "large_productive"
+	| "large_expressive"
+	| "extra_large"
+	| "2xl"