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

package/src/_style-sheet/create.ts

@@ -0,0 +1,145 @@
+import {
+	StyleSheet,
+	type ImageStyle,
+	type TextStyle,
+	type ViewStyle,
+} from 'react-native'
+
+import {
+	ColorConstant,
+} from '../constants'
+
+import {
+	ColorSchemeGlobal,
+} from '../globals'
+
+import type {
+	ThemeType,
+} from '../types'
+
+type Style = ViewStyle | TextStyle | ImageStyle
+
+export function create<Styles extends Record<string, Style> = Record<string, Style>>(
+	fn: (
+		color: Record<ThemeType.ColorToken, ThemeType.ColorToken>,
+	) => Styles,
+): Styles {
+	const
+		styleRef =
+			fn(colorTokenStrings),
+
+		baseStyle: Record<string, Style> =
+			{},
+
+		coloredStyle: Record<string, Style> =
+			{}
+
+	for(const styleName in styleRef) {
+		const style = styleRef[styleName]
+
+		for(const styleProp_ in style) {
+			const styleProp = styleProp_ as keyof Style
+
+			if(colorStyleProps.indexOf(styleProp) > -1) {
+				const
+					coloredStyleName_G10 =
+						`${prefixColorStyleName.gray_10}${styleName}`,
+
+					coloredStyleName_G100 =
+						`${prefixColorStyleName.gray_100}${styleName}`
+
+				if(!coloredStyle[coloredStyleName_G10]) {
+					coloredStyle[coloredStyleName_G10] = {}
+				}
+				if(!coloredStyle[coloredStyleName_G100]) {
+					coloredStyle[coloredStyleName_G100] = {}
+				}
+
+				const
+					colorStr =
+						style[styleProp] as string
+
+				coloredStyle[coloredStyleName_G10][styleProp] =
+					ColorConstant.Tokens.gray_10[colorStr as ThemeType.ColorToken] as never ||
+					colorStr
+
+				coloredStyle[coloredStyleName_G100][styleProp] =
+					ColorConstant.Tokens.gray_100[colorStr as ThemeType.ColorToken] as never ||
+					colorStr
+			} else {
+				baseStyle[styleName] = style
+			}
+		}
+	}
+
+	const
+		baseStyleSheet =
+			StyleSheet.create<Record<string, Style>>(baseStyle),
+
+		coloredStyleSheet =
+			StyleSheet.create<Record<string, Style>>(coloredStyle)
+
+	return Object.keys(styleRef)
+		.reduce<Styles>((
+			acc,
+			styleName,
+		) => {
+			Object.defineProperty(acc, styleName, {
+				get() {
+					const colorScheme = ColorSchemeGlobal.get()
+
+					if(colorScheme == 'gray_10') {
+						return [
+							baseStyleSheet[styleName],
+							coloredStyleSheet[`${prefixColorStyleName.gray_10}${styleName}`],
+						]
+					}
+
+					return [
+						baseStyle[styleName],
+						coloredStyleSheet[`${prefixColorStyleName.gray_100}${styleName}`],
+					]
+				},
+			})
+			return acc
+		}, {} as never)
+}
+
+const
+	colorStyleProps: ((keyof ViewStyle) | (keyof TextStyle) | (keyof ImageStyle))[] =
+		[
+			'color',
+			'backgroundColor',
+			'tintColor',
+			'shadowColor',
+			'textDecorationColor',
+			'textShadowColor',
+			'overlayColor',
+			'borderColor',
+			'borderEndColor',
+			'borderStartColor',
+			'borderTopColor',
+			'borderBottomColor',
+			'borderLeftColor',
+			'borderRightColor',
+			'borderBlockColor',
+			'borderBlockEndColor',
+			'borderBlockStartColor',
+		],
+
+	colorTokenStrings =
+		Object
+			.keys(ColorConstant.Tokens.gray_10)
+			.reduce<Partial<Record<ThemeType.ColorToken, ThemeType.ColorToken>>>((
+				acc,
+				key,
+			) => {
+				acc[key as ThemeType.ColorToken] = key as ThemeType.ColorToken
+				return acc
+			}, {}) as Required<Record<ThemeType.ColorToken, ThemeType.ColorToken>>,
+
+	prefixColorStyleName: Record<ThemeType.ColorScheme, string> =
+		{
+			gray_10: 'gray_10__',
+			gray_100: 'gray_100__',
+		}

package/src/_style-sheet/index.ts

@@ -0,0 +1,9 @@
+import {
+	create as _create,
+} from './create'
+
+export namespace StyleSheet {
+
+	export const create = _create
+
+}

package/src/components/accordion/_context.tsx

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

package/src/components/accordion/_header-border.tsx

@@ -0,0 +1,68 @@
+import {
+	useContext,
+} from 'react'
+
+import {
+	StyleSheet,
+	View,
+	type ViewProps,
+} from 'react-native'
+
+import {
+	SpacingConstant,
+} from '../../constants'
+
+import {
+	ThemeContext,
+} from '../../contexts'
+
+import {
+	CommonStyle,
+} from '../../styles'
+
+export interface HeaderBorderProps {
+	/**
+	 * https://carbondesignsystem.com/components/accordion/style/#flush-alignment
+	 */
+	flushAlignment?: boolean,
+	style?: ViewProps['style'],
+}
+
+export function HeaderBorder({
+	flushAlignment,
+	style: styleProp,
+}: HeaderBorderProps) {
+
+	const
+		themeContext =
+			useContext(ThemeContext)
+
+	return (
+		<View
+			style={ [
+				CommonStyle.absolute,
+				style.borderBox,
+				{
+					borderColor: themeContext.color.border_subtle_00,
+				},
+				flushAlignment
+					? {
+						left: SpacingConstant.spacing_05,
+						right: SpacingConstant.spacing_05,
+					}
+					: CommonStyle.w_full,
+				styleProp,
+			] }
+		/>
+	)
+
+}
+
+const
+	style =
+		StyleSheet.create({
+			borderBox: {
+				height: 1,
+				borderTopWidth: 1,
+			},
+		})

package/src/components/accordion/_header.tsx

@@ -0,0 +1,269 @@
+import {
+	useContext,
+	useEffect,
+	useRef,
+} from 'react'
+
+import {
+	View,
+	type TextStyle,
+	type ViewStyle,
+} from 'react-native'
+
+import Animated, {
+	useAnimatedStyle,
+	useSharedValue,
+	withTiming,
+} from 'react-native-reanimated'
+
+import ChevronDown from '@carbon/icons/es/chevron--down/20'
+
+import {
+	StyleSheet,
+} from '../../_style-sheet'
+
+import {
+	ThemeContext,
+} from '../../contexts'
+
+import {
+	FlexStyle,
+} from '../../styles'
+
+import {
+	BaseColor as ButtonColor,
+	type BaseColorProps as ButtonColorProps,
+} from '../button/base-color'
+
+import type {
+	ButtonSize as ButtonSize,
+} from '../button/size'
+
+import {
+	Icon,
+	type IconProps,
+} from '../icon'
+
+import {
+	HeaderBorder,
+} from './_header-border'
+
+import {
+	Motion,
+} from './_motion'
+
+import type {
+	AccordionSize,
+} from './types'
+
+export interface HeaderProps extends Omit<ButtonColorProps, 'android_rippleEffectColor' | 'size' | 'text' | 'icon' | 'colorStateStyle'> {
+	size?: AccordionSize,
+	/**
+	 * https://carbondesignsystem.com/components/accordion/style/#flush-alignment
+	 */
+	open?: boolean,
+	flushAlignment?: boolean,
+	text?: string,
+}
+
+export function Header({
+	size = 'medium',
+	open,
+	flushAlignment = false,
+	text,
+	style: styleProp,
+	...buttonProps
+}: HeaderProps) {
+
+	const
+		themeContext =
+			useContext(ThemeContext)
+
+	return (
+		<View
+			style={ styleProp }
+		>
+			{ /** The Border Box */}
+			<HeaderBorder
+				flushAlignment={ flushAlignment }
+			/>
+
+			<ButtonColor
+				{ ...buttonProps }
+				size={ mapSizeToButtonSize[size] }
+				text={ text }
+				android_rippleEffectColor={ themeContext.color.layer_hover_01 }
+				colorStateStyle={{
+					background: {
+						default: style.background_default,
+						focused: style.background_pressed,
+						hovered: style.background_hovered,
+						pressed: style.background_pressed,
+						disabled: style.background_disabled,
+					},
+					text: {
+						default: style.text_default,
+						focused: style.text_focused,
+						hovered: style.text_hovered,
+						pressed: style.text_pressed,
+						disabled: style.text_disabled,
+					},
+					icon: {
+						default: themeContext.color.icon_primary,
+						focused: themeContext.color.icon_primary,
+						hovered: themeContext.color.icon_primary,
+						pressed: themeContext.color.icon_primary,
+						disabled: themeContext.color.icon_disabled,
+					},
+				}}
+				iconNode={
+					(...params) =>
+						iconNodeRenderer(!!open, ...params)
+				}
+				style={ FlexStyle.self_stretch }
+			/>
+		</View>
+	)
+
+}
+
+const
+	style =
+		StyleSheet.create<
+			Record<
+				`${'background' | 'text'}_${keyof ButtonColorProps['colorStateStyle']['text']}`,
+				ViewStyle | TextStyle
+			>
+		>(color => {
+			return {
+				background_default: {
+					backgroundColor: 'transparent',
+				},
+				background_focused: {
+					backgroundColor: 'transparent',
+					borderWidth: 1,
+					borderColor: color.focus,
+				},
+				background_hovered: {
+					backgroundColor: color.layer_hover_01,
+				},
+				background_pressed: {
+					backgroundColor: color.layer_hover_01,
+				},
+				background_disabled: {
+					backgroundColor: 'transparent',
+				},
+
+				text_default: {
+					color: color.text_primary,
+				},
+				text_focused: {
+					color: color.text_primary,
+				},
+				text_hovered: {
+					color: color.text_primary,
+				},
+				text_pressed: {
+					color: color.text_primary,
+				},
+				text_disabled: {
+					color: color.text_disabled,
+				},
+			}
+		}),
+
+	/**
+	 * 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',
+		},
+
+	IconAnimated =
+		Animated.createAnimatedComponent(Icon),
+
+	iconNodeRenderer: (
+		open: boolean,
+		...params: Parameters<NonNullable<ButtonColorProps['iconNode']>>
+	) => React.ReactNode =
+		(open, iconColorState, iconSize, iconStyle) => {
+			return (
+				<IconNode
+					open={ open }
+					color={ iconColorState }
+					size={ iconSize }
+					style={ iconStyle }
+				/>
+			)
+		}
+
+interface IconNodeProps {
+	open: boolean,
+	color: string,
+	size: number,
+	style?: IconProps['style'],
+}
+function IconNode({
+	open,
+	color,
+	size,
+	style,
+}: IconNodeProps) {
+
+	const
+		isMounted =
+			useRef(false),
+
+		rotateZ =
+			useSharedValue(open ? 180 : 0),
+
+		animatedStyle =
+			useAnimatedStyle(() => {
+				return {
+					transform: [{
+						rotateZ: `${rotateZ.value}deg`,
+					}],
+				}
+			})
+
+	useEffect(() => {
+		if(isMounted.current) {
+			if(open) {
+				rotateZ.value =
+					withTiming(
+						180,
+						Motion.toOpen,
+					)
+			} else {
+				rotateZ.value =
+					withTiming(
+						0,
+						Motion.toClose,
+					)
+			}
+		} else {
+			isMounted.current = true
+		}
+	}, [
+		open,
+		rotateZ,
+	])
+
+	return (
+		<IconAnimated
+			src={ ChevronDown }
+			color={ color }
+			width={ size }
+			height={ size }
+			style={ [
+				animatedStyle,
+				style,
+			] }
+		/>
+	)
+
+}

package/src/components/accordion/_item.tsx

@@ -0,0 +1,186 @@
+import {
+	forwardRef,
+	useCallback,
+	useContext,
+	useEffect,
+	useImperativeHandle,
+	useRef,
+	useState,
+} from 'react'
+
+import {
+	StyleSheet,
+	View,
+	type ViewProps,
+} from 'react-native'
+
+import {
+	SpacingConstant,
+} from '../../constants'
+
+import {
+	Collapsible,
+} from '../collapsible'
+
+import {
+	Context,
+} from './_context'
+
+import {
+	Header,
+	type HeaderProps,
+} from './_header'
+
+import {
+	Motion,
+} from './_motion'
+
+export interface ItemProps extends ViewProps {
+	controlled?: boolean,
+	open?: boolean,
+	title?: string,
+	children?: React.ReactNode,
+	onChange?: (open: boolean) => void,
+	onPressHeader?: HeaderProps['onPress'],
+	headerProps?: Omit<
+		HeaderProps,
+		| 'open'
+		| 'size'
+		| 'text'
+		| 'flushAlignment'
+		| 'onPress'
+	>
+}
+
+interface AccordionItemRefBase {
+	readonly open: boolean,
+	/**
+	 * This method does nothing if `controlled` prop is true
+	 */
+	setOpen: (value: boolean | ((value: boolean) => boolean)) => void,
+}
+
+export interface ItemRef extends View, AccordionItemRefBase {
+}
+
+export const Item = forwardRef<ItemRef, ItemProps>(
+	function Item(
+		{
+			controlled,
+			open: openProp,
+			title,
+			children,
+			style: styleProp,
+			onChange,
+			onPressHeader,
+			headerProps,
+			...props
+		},
+		forwardedRef,
+	) {
+
+		const
+			accordionContext =
+				useContext(Context),
+
+			ref =
+				useRef({
+					isMounted: false,
+					open: !!openProp,
+				}),
+
+			viewRef =
+				useRef<View>(null),
+
+			[openSelf, setOpenSelf] =
+				useState(!!openProp),
+
+			open =
+				controlled ? !!openProp : openSelf,
+
+			pressHandler: NonNullable<HeaderProps['onPress']> =
+				useCallback(event => {
+					onPressHeader?.(event)
+					if(!controlled) {
+						setOpenSelf(state => !state)
+					}
+				}, [
+					controlled,
+					onPressHeader,
+				])
+
+		useEffect(() => {
+			if(!ref.current.isMounted) {
+				ref.current.isMounted = true
+			} else {
+				ref.current.open = open
+				onChange?.(open)
+			}
+		}, [
+			open,
+			onChange,
+		])
+
+		useImperativeHandle(forwardedRef, () => {
+			return Object.assign<View, AccordionItemRefBase>(
+				(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 }
+					controlled
+					open={ open }
+					contentContainerStyle={ [
+						accordionContext.collapsibleContentContainerStyle,
+						style.panel,
+					] }
+				>
+					{ children }
+				</Collapsible>
+			</View>
+		)
+
+	},
+)
+
+const
+	style =
+		StyleSheet.create({
+			panel: {
+				paddingTop: SpacingConstant.spacing_03,
+				paddingBottom: SpacingConstant.spacing_06,
+				paddingLeft: SpacingConstant.spacing_05,
+			},
+		})

package/src/components/accordion/_motion.ts

@@ -0,0 +1,27 @@
+import {
+	Easing,
+} from 'react-native-reanimated'
+
+import {
+	MotionConstant,
+} from '../../constants'
+
+import type {
+	CollapsibleProps,
+} from '../collapsible'
+
+export const Motion: NonNullable<CollapsibleProps['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: 0,
+		},
+	}