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

package/src/components/accordion/_styles.ts

@@ -0,0 +1,24 @@
+import {
+	StyleSheet,
+} from 'react-native'
+
+import {
+	SpacingConstant,
+} from '../../constants'
+
+/**
+ * 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: {
+			paddingRight: '25%',
+		},
+		range_420_640: {
+			paddingRight: SpacingConstant.spacing_10,
+		},
+		small: {
+			paddingRight: SpacingConstant.spacing_05,
+		},
+	})

package/src/components/accordion/index.tsx

@@ -0,0 +1,152 @@
+import {
+	forwardRef,
+	useCallback,
+	useRef,
+	useState,
+} from 'react'
+
+import {
+	Dimensions,
+	StyleSheet,
+	View,
+	type ViewProps,
+} from 'react-native'
+
+import {
+	Context,
+} from './_context'
+
+import type {
+	HeaderProps,
+} from './_header'
+
+import {
+	HeaderBorder,
+} from './_header-border'
+
+import {
+	Item,
+	type ItemProps,
+	type ItemRef,
+} from './_item'
+
+import type {
+	AccordionSize,
+} from './types'
+
+import {
+	MarginRightStyle,
+} from './_styles'
+
+export type {
+	HeaderProps as AccordionHeaderProps,
+	ItemProps as AccordionItemProps,
+	ItemRef as AccordionItemRef,
+	AccordionSize,
+}
+
+export interface AccordionProps extends Omit<ViewProps, 'children'> {
+	size?: AccordionSize,
+	flushAlignment?: boolean,
+	children?: React.ReactNode[],
+}
+
+export interface AccordionRef extends View {
+}
+
+const Accordion_ = forwardRef<AccordionRef, AccordionProps>(
+	function Accordion(
+		{
+			size,
+			flushAlignment,
+			children,
+			style,
+			onLayout,
+			...props
+		},
+		forwardedRef,
+	) {
+
+		const
+			ref =
+				useRef<{
+					marginRightStyleKey: keyof typeof MarginRightStyle,
+				}>({
+					marginRightStyleKey: getMarginRightStyleKey(windowWidth),
+				}),
+
+			[marginRightStyleKey, setMarginRightStyleKey] =
+				useState(ref.current.marginRightStyleKey),
+
+			handlerLayout: NonNullable<ViewProps['onLayout']> =
+				useCallback(event => {
+					onLayout?.(event)
+					/**
+					 * https://carbondesignsystem.com/components/accordion/style/#margin-right
+					 */
+
+					const key = getMarginRightStyleKey(windowWidth)
+
+					if(ref.current.marginRightStyleKey !== key) {
+						ref.current.marginRightStyleKey = key
+						setMarginRightStyleKey(key)
+					}
+				}, [
+					onLayout,
+				])
+
+		return (
+			<View
+				{ ...props }
+				style={ style }
+				onLayout={ handlerLayout }
+				ref={ forwardedRef }
+			>
+				<Context.Provider
+					value={{
+						size,
+						flushAlignment,
+						collapsibleContentContainerStyle: MarginRightStyle[marginRightStyleKey],
+					}}
+				>
+					{ children }
+
+					{ !!children?.length && (
+						<HeaderBorder
+							flushAlignment={ flushAlignment }
+							style={ baseStyle.lastAccordionHeaderBorder }
+						/>
+					) }
+				</Context.Provider>
+			</View>
+		)
+
+	},
+)
+
+export const Accordion = Object.assign(Accordion_, {
+	Item: Item,
+})
+
+const
+	baseStyle =
+		StyleSheet.create({
+			lastAccordionHeaderBorder: {
+				top: '100%',
+			},
+		}),
+
+	windowWidth =
+		Dimensions.get('window').width
+
+function getMarginRightStyleKey(width: number): keyof typeof MarginRightStyle {
+	if(width < 420) {
+		return 'small'
+	}
+
+	if(width <= 640) {
+		return 'range_420_640'
+	}
+
+	return 'large'
+}

package/src/components/accordion/types.ts

@@ -0,0 +1,4 @@
+export type AccordionSize =
+	| 'small'
+	| 'medium'
+	| 'large'

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

@@ -0,0 +1,270 @@
+import {
+	forwardRef,
+} from 'react'
+
+import {
+	Pressable,
+	StyleSheet,
+	View,
+	type PressableProps,
+	type ViewProps,
+} from 'react-native'
+
+import {
+	SpacingConstant,
+} from '../../../constants'
+
+import {
+	FlexStyle,
+} from '../../../styles'
+
+import type {
+	SharedType,
+} from '../../../types'
+
+import {
+	Icon,
+	type IconProps,
+} from '../../icon'
+
+import {
+	Text,
+	type TextProps,
+} from '../../text'
+
+import type {
+	ButtonSize,
+} from '../size'
+
+export interface BaseProps extends Omit<PressableProps, 'children' | 'style'> {
+	/**
+	 * Refer to https://carbondesignsystem.com/components/button/style/#sizes  
+	 * Default is `large_productive`
+	 */
+	size?: ButtonSize,
+	text?: string,
+	icon?: SharedType.CarbonIcon,
+	iconColor?: string,
+	/**
+	 * This prop is useful to custom render at the icon position.  
+	 * `iconNode` takes precedence even if {@linkcode icon} prop is present.
+	 */
+	iconNode?: (
+		/**
+		 * Use this param to resize icon view correctly according to each size of button
+		 */
+		iconSize: number,
+		/**
+		 * Use this param to keep icon style nicely center aligned vertically with text
+		 */
+		iconStyle: IconProps['style'],
+	) => React.ReactNode,
+	/**
+	 * Only for base-color button for Focus state UI purposes
+	 */
+	backgroundNode?: React.ReactNode,
+	style?: ViewProps['style'],
+	textStyle?: TextProps['style'],
+	iconStyle?: IconProps['style'],
+}
+
+export const Base = forwardRef<View, BaseProps>(
+	function Base(
+		{
+			size = 'large_productive',
+			text,
+			icon,
+			iconColor,
+			iconNode,
+			backgroundNode,
+			style,
+			textStyle,
+			iconStyle,
+			role = 'button',
+			'aria-label': ariaLabel,
+			...props
+		},
+		ref,
+	) {
+
+		const iconSize = getIconSize(size)
+
+		return (
+			<Pressable
+				{ ...props }
+				role={ role }
+				aria-label={ ariaLabel ?? text }
+				style={ [
+					sizeStyle[size],
+					baseStyle.container,
+					getContainerPaddingRight(!!text, !!icon || !!iconNode),
+					style,
+				] }
+				ref={ ref }
+			>
+				{ backgroundNode }{/* only for base-color button, and this is not valid HTML per se */}
+
+				{ !!text && (
+					<Text
+						type={ getTextType(size) }
+						style={ [baseStyle.text, textStyle] }
+					>
+						{ text }
+					</Text>
+				) }
+
+				{ (!!icon && !iconNode) ? (
+					<Icon
+						src={ icon }
+						width={ iconSize }
+						height={ iconSize }
+						color={ iconColor }
+						style={ [
+							getIconMarginTopStyle(size),
+							getIconMarginLeftStyle(!!text),
+							iconStyle,
+						] }
+					/>
+				) : iconNode?.(
+					iconSize!,
+					[
+						getIconMarginTopStyle(size),
+						getIconMarginLeftStyle(!!text),
+						iconStyle,
+					],
+				) }
+			</Pressable>
+		)
+
+	},
+)
+
+const
+	baseStyle =
+		StyleSheet.create({
+			container: {
+				...FlexStyle.self_start,
+				...FlexStyle.flex_row,
+				...FlexStyle.justify_between,
+				overflow: 'hidden',
+				paddingLeft: SpacingConstant.spacing_05,
+			},
+			containerPR16: {
+				paddingRight: SpacingConstant.spacing_05,
+			},
+			containerPR64: {
+				paddingRight: SpacingConstant.spacing_10,
+			},
+			contentContainer: {
+				...FlexStyle.flex_initial,
+				maxHeight: SpacingConstant.spacing_09,
+			},
+			text: {
+				verticalAlign: 'middle',
+				maxHeight: 48,
+			},
+			iconML32: {
+				marginLeft: SpacingConstant.spacing_07,
+			},
+		}),
+
+	sizeStyle =
+		StyleSheet.create<Record<ButtonSize, { height: number }>>({
+			small: {
+				height: 32,
+			},
+			medium: {
+				height: 40,
+			},
+			large_productive: {
+				height: 48,
+			},
+			large_expressive: {
+				height: 48,
+			},
+			extra_large: {
+				height: 64,
+			},
+			'2xl': {
+				height: 80,
+			},
+		}),
+
+	mapContainerPR: Record<string, { paddingRight: number }> =
+		{
+			'text[false]_icon[false]': baseStyle.containerPR16,
+			'text[true]_icon[false]': baseStyle.containerPR64,
+			'text[false]_icon[true]': baseStyle.containerPR16,
+			'text[true]_icon[true]': baseStyle.containerPR16,
+		},
+
+	/**
+	 * https://carbondesignsystem.com/components/button/style/#typography
+	 */
+	mapTextTypeByExpressive: Record<string, NonNullable<TextProps['type']>> =
+		{
+			false: 'body_compact_01',
+			true: 'body_compact_02',
+		},
+
+	mapIconSizeByExpressive: Record<string, number> =
+		{
+			false: 16,
+			true: 20,
+		},
+
+	mapIconMLByText: Record<string, { marginLeft: number } | null> =
+		{
+			false: null,
+			true: baseStyle.iconML32,
+		}
+
+/**
+ * Expressive only when button size is LARGE_EXPRESSIVE. You can see this link  
+ * https://carbondesignsystem.com/components/button/style/#sizes
+ */
+function isExpressive(
+	buttonSize: BaseProps['size'],
+) {
+	return buttonSize === 'large_expressive'
+}
+
+function getContainerPaddingRight(
+	text: boolean,
+	icon: boolean,
+) {
+	return mapContainerPR[`text[${text}]_icon[${icon}]`] as NonNullable<typeof mapContainerPR[keyof typeof mapContainerPR]>
+}
+
+/**
+ * Expressive only when button size is LARGE_EXPRESSIVE. You can see this link  
+ * https://carbondesignsystem.com/components/button/style/#sizes
+ */
+function getTextType(buttonSize: BaseProps['size']) {
+	return mapTextTypeByExpressive[`${isExpressive(buttonSize)}`]
+}
+
+/**
+ * Expressive only when button size is LARGE_EXPRESSIVE. You can see this link  
+ * https://carbondesignsystem.com/components/button/style/#sizes
+ */
+function getIconSize(buttonSize: BaseProps['size']) {
+	return mapIconSizeByExpressive[`${isExpressive(buttonSize)}`]
+}
+
+function getIconMarginTopStyle(buttonSize: NonNullable<BaseProps['size']>) {
+	const
+		iconSize =
+			mapIconSizeByExpressive[`${isExpressive(buttonSize)}`]!,
+
+		height =
+			Math.min(sizeStyle[buttonSize].height, sizeStyle.large_productive.height) // 48 at max
+
+	return {
+		marginTop: (height / 2) - (iconSize / 2),
+	}
+}
+
+function getIconMarginLeftStyle(hasText: boolean) {
+	return mapIconMLByText[`${hasText}`]
+}

package/src/components/button/base-color/index.tsx

@@ -0,0 +1,277 @@
+import {
+	useContext,
+	useCallback,
+	useState,
+} from 'react'
+
+import {
+	StyleSheet,
+	View,
+	type StyleProp,
+	type TextStyle,
+	type ViewStyle,
+} from 'react-native'
+
+import {
+	ColorConstant,
+} from '../../../constants'
+
+import {
+	GlobalConfigContext,
+	ThemeContext,
+} from '../../../contexts'
+
+import {
+	type ThemeType,
+} from '../../../types'
+
+import {
+	Base,
+	type BaseProps,
+} from '../base'
+
+export type BaseColorState =
+	| 'default'
+	| 'focused'
+	| 'hovered'
+	| 'pressed'
+	| 'disabled'
+
+export interface BaseColorProps extends Omit<BaseProps, 'backgroundNode' | 'iconColor' | 'iconNode'> {
+	android_rippleEffectColor: string,
+	colorStateStyle: {
+		background: Record<BaseColorState, StyleProp<ViewStyle>>,
+		text: Record<BaseColorState, StyleProp<TextStyle>>,
+		icon: Record<BaseColorState, string>,
+	},
+	/**
+	 * It extends `iconNode` prop from `BaseProps` to add one argument at start for icon coloring
+	 */
+	iconNode?: (
+		/**
+		 * Use this param to coloring an icon correctly according each variant of button and its state, like focused, disabled, etc.
+		 */
+		iconColorState: string,
+		...params: Parameters<NonNullable<BaseProps['iconNode']>>
+	) => React.ReactNode,
+}
+
+export function BaseColor({
+	disabled,
+	style,
+	textStyle,
+	android_rippleEffectColor,
+	colorStateStyle,
+	icon,
+	iconNode,
+	onBlur,
+	onFocus,
+	onHoverIn,
+	onHoverOut,
+	onPressIn,
+	onPressOut,
+	android_ripple,
+	...props
+}: BaseColorProps) {
+
+	const
+		globalConfigContext =
+			useContext(GlobalConfigContext),
+
+		themeContext =
+			useContext(ThemeContext),
+
+		[state, setState] =
+			useState({
+				focused: false,
+				hovered: false,
+				pressed: false,
+			}),
+
+		blurHandler: NonNullable<BaseProps['onBlur']> =
+			useCallback(event => {
+				onBlur?.(event)
+				setState(state_ => ({
+					...state_,
+					focused: false,
+				}))
+			}, [
+				onBlur,
+			]),
+
+		focusHandler: NonNullable<BaseProps['onFocus']> =
+			useCallback(event => {
+				onFocus?.(event)
+				setState(state_ => ({
+					...state_,
+					focused: true,
+				}))
+			}, [
+				onFocus,
+			]),
+
+		hoverInHandler: NonNullable<BaseProps['onHoverIn']> =
+			useCallback(event => {
+				onHoverIn?.(event)
+				setState(state_ => ({
+					...state_,
+					hovered: true,
+				}))
+			}, [
+				onHoverIn,
+			]),
+
+		hoverOutHandler: NonNullable<BaseProps['onHoverIn']> =
+			useCallback(event => {
+				onHoverOut?.(event)
+				setState(state_ => ({
+					...state_,
+					hovered: false,
+				}))
+			}, [
+				onHoverOut,
+			]),
+
+		pressInHandler: NonNullable<BaseProps['onPressIn']> =
+			useCallback(event => {
+				onPressIn?.(event)
+				setState(state_ => ({
+					...state_,
+					pressed: true,
+				}))
+			}, [
+				onPressIn,
+			]),
+
+		pressOutHandler: NonNullable<BaseProps['onPressOut']> =
+			useCallback(event => {
+				onPressOut?.(event)
+				setState(state_ => ({
+					...state_,
+					pressed: false,
+				}))
+			}, [
+				onPressOut,
+			]),
+
+		stateStyle =
+			getStateStyle(
+				colorStateStyle,
+				{
+					...state,
+					disabled: !!disabled,
+				},
+				android_ripple
+					? true
+					: android_ripple === null ? false : globalConfigContext.android_buttonRippleEffect,
+			)
+
+	return (
+		<Base
+			{ ...props }
+			android_ripple={ android_ripple ?? globalConfigContext.android_buttonRippleEffect ? {
+				// color: colorStateStyle.background.pressed.backgroundColor,
+				color: android_rippleEffectColor,
+			} : undefined }
+			backgroundNode={
+				<View
+					style={ [
+						styles.innerFocusBox,
+						state.focused
+							? mapInnerFocusBoxActiveStyle[themeContext.colorScheme]
+							: null,
+					] }
+				/>
+			}
+			disabled={ disabled }
+			onBlur={ blurHandler }
+			onFocus={ focusHandler }
+			onHoverIn={ hoverInHandler }
+			onHoverOut={ hoverOutHandler }
+			onPressIn={ pressInHandler }
+			onPressOut={ pressOutHandler }
+			iconColor={ stateStyle.icon }
+			icon={ !iconNode ? icon : undefined }
+			iconNode={
+				iconNode
+					? (...params) => iconNode(stateStyle.icon, ...params)
+					: undefined
+			}
+			style={ [
+				stateStyle.background,
+				style,
+			] }
+			textStyle={ [
+				stateStyle.text,
+				textStyle,
+			] }
+		/>
+	)
+
+}
+
+const
+	styles =
+		StyleSheet.create({
+			innerFocusBox: {
+				position: 'absolute',
+				top: 2,
+				right: 2,
+				bottom: 2,
+				left: 2,
+				borderWidth: 1,
+				borderColor: 'transparent',
+			},
+			innerFocusBoxActive_GRAY_10: {
+				borderColor: ColorConstant.Tokens.gray_10.focus_inset,
+			},
+			innerFocusBoxActive_GRAY_100: {
+				borderColor: ColorConstant.Tokens.gray_100.focus_inset,
+			},
+		}),
+
+	mapInnerFocusBoxActiveStyle: Record<ThemeType.ColorScheme, typeof styles['innerFocusBoxActive_GRAY_10']> =
+		{
+			gray_10: styles.innerFocusBoxActive_GRAY_10,
+			gray_100: styles.innerFocusBoxActive_GRAY_100,
+		}
+
+function getStateStyle(
+	colorStateStyle: BaseColorProps['colorStateStyle'],
+	states: Record<Exclude<BaseColorState, 'default'>, boolean>,
+	androidRipple?: boolean,
+): { background: StyleProp<ViewStyle>, text: StyleProp<TextStyle>, icon: string } {
+
+	if(!states.hovered && !states.pressed && !states.disabled) {
+		return {
+			background: colorStateStyle.background.default,
+			text: colorStateStyle.text.default,
+			icon: colorStateStyle.icon.default,
+		}
+	}
+
+	if(states.disabled) {
+		return {
+			background: colorStateStyle.background.disabled,
+			text: colorStateStyle.text.disabled,
+			icon: colorStateStyle.icon.disabled,
+		}
+	}
+
+	if(states.pressed) {
+		return {
+			background: androidRipple
+				? colorStateStyle.background.default
+				: colorStateStyle.background.pressed,
+			text: colorStateStyle.text.pressed,
+			icon: colorStateStyle.icon.pressed,
+		}
+	}
+
+	return {
+		background: colorStateStyle.background.hovered,
+		text: colorStateStyle.text.hovered,
+		icon: colorStateStyle.icon.hovered,
+	}
+
+}