@audira/carbon-react-native 0.0.1-alpha.9 → 1.0.0-beta.2

package/src/components/accordion/_header.tsx

@@ -1,269 +0,0 @@
-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

@@ -1,186 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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,
-		},
-	}

package/src/components/accordion/_styles.ts

@@ -1,24 +0,0 @@
-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

@@ -1,152 +0,0 @@
-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

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