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

package/src/components/form-label/index.tsx

@@ -0,0 +1,66 @@
+import {
+	StyleSheet,
+	View,
+	type ViewProps,
+} from 'react-native'
+
+import {
+	FlexStyle,
+} from '../../styles'
+
+import {
+	Text,
+	type TextProps,
+} from '../text'
+
+export interface FormLabelProps extends Omit<ViewProps, 'children'> {
+	label: string,
+	labelLeading?: React.ReactNode,
+	labelTrailing?: React.ReactNode,
+	textProps?: Omit<
+		TextProps,
+		| 'aria-label'
+	>,
+}
+
+export function FormLabel({
+	label,
+	labelLeading,
+	labelTrailing,
+	textProps,
+	style,
+	...props
+}: FormLabelProps) {
+
+	return (
+		<View
+			{ ...props }
+			style={ [
+				FlexStyle.flex_row,
+				baseStyle.gap,
+				style,
+			] }
+		>
+			{ labelLeading }
+
+			<Text
+				{ ...textProps }
+				type={ textProps?.type || 'label_01' }
+				aria-label={ label }
+			>
+				{ label }
+			</Text>
+
+			{ labelTrailing }
+		</View>
+	)
+
+}
+
+const
+	baseStyle =
+		StyleSheet.create({
+			gap: {
+				columnGap: 8,
+			},
+		})

package/src/components/icon/index.tsx

@@ -0,0 +1,53 @@
+import {
+	Component,
+} from 'react'
+
+import * as IconHelper from '@carbon/icon-helpers'
+
+import {
+	SvgXml,
+	type XmlProps,
+} from 'react-native-svg'
+
+import type {
+	SharedType,
+} from '../../types'
+
+export interface IconProps extends Omit<XmlProps, 'xml'> {
+	src: SharedType.CarbonIcon,
+}
+
+/**
+ * Icon component is intentionally written in the form of React Class Component to support `Animated.createAnimatedComponent` API from React Native Reanimated
+ */
+export class Icon extends Component<IconProps> {
+
+	render() {
+		try {
+			return (
+				<SvgXml
+					{ ...this.props }
+					xml={ IconHelper.toString(this.props.src as never) }
+					width={ this.props.width || '100%' }
+					height={ this.props.height || '100%' }
+				/>
+			)
+		} catch{
+			return (
+				<SvgXml
+					{ ...this.props }
+					xml={ backupIcon }
+					width={ this.props.width || '100%' }
+					height={ this.props.height || '100%' }
+				/>
+			)
+		}
+	}
+
+}
+
+/**
+ * Copied from  
+ * https://github.com/carbon-design-system/carbon-react-native/blob/main/src/helpers/index.tsx
+ */
+const backupIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.17 13.69"><line x1="0.71" y1="0.97" x2="12.46" y2="12.72" fill="currentColor" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"/><line x1="1.02" y1="13.02" x2="12.15" y2="0.67" fill="currentColor" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"/></svg>'

package/src/components/index.tsx

@@ -0,0 +1,23 @@
+import * as Button from './button'
+import * as Notification from './notification'
+import * as Toggle from './toggle'
+
+export {
+	Button,
+	Notification,
+	Toggle,
+}
+
+export * from './accordion'
+export * from './checkbox'
+export * from './checkbox-group'
+export * from './checkbox-input'
+export * from './collapsible'
+export * from './form-helper-text'
+export * from './form-label'
+export * from './icon'
+export * from './radio-button'
+export * from './radio-button-group'
+export * from './radio-button-input'
+export * from './switch'
+export * from './text'

package/src/components/notification/_status-hooks/_base.tsx

@@ -0,0 +1,97 @@
+import {
+	useContext,
+} from 'react'
+
+import {
+	ThemeContext,
+} from '../../../contexts'
+
+import type {
+	ThemeType,
+} from '../../../types'
+
+import type {
+	BaseProps,
+} from '../base'
+
+import type {
+	NotificationColor,
+} from '../types'
+
+type ColorModifier = Record<NotificationColor, ThemeType.ColorToken>
+
+export interface UseBaseProps {
+	color?: NotificationColor,
+	backgroundColor: ColorModifier,
+	borderColor: ColorModifier,
+	leftBarColor: ColorModifier,
+	iconColor: ColorModifier,
+	iconCloseColor: ColorModifier,
+	titleColor: ColorModifier,
+	/**
+	 * true to use background color for top-right-bottom border.  
+	 * Currently for actionable variant
+	 */
+	transparentBorderColor?: boolean,
+}
+
+export interface UseBaseData {
+	iconProps: BaseProps['iconProps'],
+	iconCloseProps: BaseProps['iconCloseProps'],
+	titleStyle: BaseProps['titleStyle'],
+	leftBarStyle: BaseProps['leftBarStyle'],
+	style: BaseProps['style'],
+}
+
+export function useBase({
+	color = 'high_contrast',
+	backgroundColor,
+	borderColor,
+	leftBarColor,
+	iconColor,
+	iconCloseColor,
+	titleColor,
+	transparentBorderColor,
+}: UseBaseProps): UseBaseData {
+
+	const
+		themeContext =
+			useContext(ThemeContext),
+
+		borderColorStr =
+			themeContext.color[borderColor[color]],
+
+		backgroundColorStr =
+			themeContext.color[backgroundColor[color]]
+
+	return {
+		titleStyle: {
+			color: themeContext.color[titleColor[color]],
+		},
+		iconProps: {
+			color: themeContext.color[iconColor[color]],
+		},
+		iconCloseProps: {
+			color: themeContext.color[iconCloseColor[color]],
+		},
+		leftBarStyle: {
+			backgroundColor: themeContext.color[leftBarColor[color]],
+		},
+		style: {
+			backgroundColor: backgroundColorStr,
+			borderTopWidth: 1,
+			borderRightWidth: 1,
+			borderBottomWidth: 1,
+			...(!transparentBorderColor ? {
+				borderTopColor: borderColorStr,
+				borderRightColor: borderColorStr,
+				borderBottomColor: borderColorStr,
+			} : {
+				borderTopColor: backgroundColorStr,
+				borderRightColor: backgroundColorStr,
+				borderBottomColor: backgroundColorStr,
+			}),
+		},
+	}
+
+}

package/src/components/notification/_status-hooks/error/index.tsx

@@ -0,0 +1,61 @@
+import type {
+	BaseProps,
+} from '../../base'
+
+import {
+	useBase,
+	type UseBaseProps,
+	type UseBaseData,
+} from '../_base'
+
+import Icon from '@carbon/icons/es/error--filled/20'
+
+export interface UseErrorProps {
+	color?: UseBaseProps['color'],
+	transparentBorderColor?: UseBaseProps['transparentBorderColor'],
+}
+
+export interface UseErrorData extends UseBaseData {
+	icon: NonNullable<BaseProps['icon']>,
+}
+
+export function useError({
+	color,
+	transparentBorderColor,
+}: UseErrorProps): UseErrorData {
+
+	const data = useBase({
+		color,
+		transparentBorderColor,
+		titleColor: {
+			low_contrast: 'text_primary',
+			high_contrast: 'text_inverse',
+		},
+		backgroundColor: {
+			low_contrast: 'notification_error_background',
+			high_contrast: 'background_inverse',
+		},
+		borderColor: {
+			low_contrast: 'notification_error_border',
+			high_contrast: 'background_inverse',
+		},
+		leftBarColor: {
+			low_contrast: 'support_error',
+			high_contrast: 'support_error_inverse',
+		},
+		iconColor: {
+			low_contrast: 'support_error',
+			high_contrast: 'support_error_inverse',
+		},
+		iconCloseColor: {
+			low_contrast: 'icon_primary',
+			high_contrast: 'icon_inverse',
+		},
+	})
+
+	return {
+		...data,
+		icon: Icon,
+	}
+
+}

package/src/components/notification/_status-hooks/index.tsx

@@ -0,0 +1,4 @@
+export * from './error'
+export * from './informational'
+export * from './success'
+export * from './warning'

package/src/components/notification/_status-hooks/informational/index.tsx

@@ -0,0 +1,61 @@
+import type {
+	BaseProps,
+} from '../../base'
+
+import {
+	useBase,
+	type UseBaseProps,
+	type UseBaseData,
+} from '../_base'
+
+import Icon from '@carbon/icons/es/information--filled/20'
+
+export interface UseInformationalProps {
+	color?: UseBaseProps['color'],
+	transparentBorderColor?: UseBaseProps['transparentBorderColor'],
+}
+
+export interface UseInformationalData extends UseBaseData {
+	icon: NonNullable<BaseProps['icon']>,
+}
+
+export function useInformational({
+	color,
+	transparentBorderColor,
+}: UseInformationalProps): UseInformationalData {
+
+	const data = useBase({
+		color,
+		transparentBorderColor,
+		titleColor: {
+			low_contrast: 'text_primary',
+			high_contrast: 'text_inverse',
+		},
+		backgroundColor: {
+			low_contrast: 'notification_info_background',
+			high_contrast: 'background_inverse',
+		},
+		borderColor: {
+			low_contrast: 'notification_info_border',
+			high_contrast: 'background_inverse',
+		},
+		leftBarColor: {
+			low_contrast: 'support_info',
+			high_contrast: 'support_info_inverse',
+		},
+		iconColor: {
+			low_contrast: 'support_info',
+			high_contrast: 'support_info_inverse',
+		},
+		iconCloseColor: {
+			low_contrast: 'icon_primary',
+			high_contrast: 'icon_inverse',
+		},
+	})
+
+	return {
+		...data,
+		icon: Icon,
+	}
+
+}

package/src/components/notification/_status-hooks/success/index.tsx

@@ -0,0 +1,61 @@
+import type {
+	BaseProps,
+} from '../../base'
+
+import {
+	useBase,
+	type UseBaseProps,
+	type UseBaseData,
+} from '../_base'
+
+import Icon from '@carbon/icons/es/checkmark--filled/20'
+
+export interface UseSuccessProps {
+	color?: UseBaseProps['color'],
+	transparentBorderColor?: UseBaseProps['transparentBorderColor'],
+}
+
+export interface UseSuccessData extends UseBaseData {
+	icon: NonNullable<BaseProps['icon']>,
+}
+
+export function useSuccess({
+	color,
+	transparentBorderColor,
+}: UseSuccessProps): UseSuccessData {
+
+	const data = useBase({
+		color,
+		transparentBorderColor,
+		titleColor: {
+			low_contrast: 'text_primary',
+			high_contrast: 'text_inverse',
+		},
+		backgroundColor: {
+			low_contrast: 'notification_success_background',
+			high_contrast: 'background_inverse',
+		},
+		borderColor: {
+			low_contrast: 'notification_success_border',
+			high_contrast: 'background_inverse',
+		},
+		leftBarColor: {
+			low_contrast: 'support_success',
+			high_contrast: 'support_success_inverse',
+		},
+		iconColor: {
+			low_contrast: 'support_success',
+			high_contrast: 'support_success_inverse',
+		},
+		iconCloseColor: {
+			low_contrast: 'icon_primary',
+			high_contrast: 'icon_inverse',
+		},
+	})
+
+	return {
+		...data,
+		icon: Icon,
+	}
+
+}

package/src/components/notification/_status-hooks/warning/index.tsx

@@ -0,0 +1,61 @@
+import type {
+	BaseProps,
+} from '../../base'
+
+import {
+	useBase,
+	type UseBaseProps,
+	type UseBaseData,
+} from '../_base'
+
+import Icon from '@carbon/icons/es/warning--filled/20'
+
+export interface UseWarningProps {
+	color?: UseBaseProps['color'],
+	transparentBorderColor?: UseBaseProps['transparentBorderColor'],
+}
+
+export interface UseWarningData extends UseBaseData {
+	icon: NonNullable<BaseProps['icon']>,
+}
+
+export function useWarning({
+	color,
+	transparentBorderColor,
+}: UseWarningProps): UseWarningData {
+
+	const data = useBase({
+		color,
+		transparentBorderColor,
+		titleColor: {
+			low_contrast: 'text_primary',
+			high_contrast: 'text_inverse',
+		},
+		backgroundColor: {
+			low_contrast: 'notification_warning_background',
+			high_contrast: 'background_inverse',
+		},
+		borderColor: {
+			low_contrast: 'notification_warning_border',
+			high_contrast: 'background_inverse',
+		},
+		leftBarColor: {
+			low_contrast: 'support_warning',
+			high_contrast: 'support_warning_inverse',
+		},
+		iconColor: {
+			low_contrast: 'support_warning',
+			high_contrast: 'support_warning_inverse',
+		},
+		iconCloseColor: {
+			low_contrast: 'icon_primary',
+			high_contrast: 'icon_inverse',
+		},
+	})
+
+	return {
+		...data,
+		icon: Icon,
+	}
+
+}

package/src/components/notification/_variant-context.tsx

@@ -0,0 +1,35 @@
+import {
+	createContext,
+} from 'react'
+
+import type {
+	NotificationColor,
+} from './types'
+
+export interface VariantContext {
+	color: NotificationColor,
+}
+
+export const VariantContext = createContext<VariantContext>({
+	color: 'high_contrast',
+})
+
+export function VariantContextProvider({
+	color,
+	children,
+}: {
+	color: NotificationColor,
+	children?: React.ReactNode,
+}) {
+
+	return (
+		<VariantContext.Provider
+			value={{
+				color,
+			}}
+		>
+			{ children }
+		</VariantContext.Provider>
+	)
+
+}

package/src/components/notification/_variants/_button-ghost.tsx

@@ -0,0 +1,65 @@
+import {
+	StyleSheet,
+} from 'react-native'
+
+import {
+	SpacingConstant,
+} from '../../../constants'
+
+import {
+	ThemeContextProvider,
+	type ThemeContextProviderProps,
+} from '../../../contexts/theme/provider'
+
+import {
+	Ghost,
+	type GhostProps,
+} from '../../button/ghost'
+
+import type {
+	NotificationColor,
+} from '../types'
+
+export interface ButtonGhostProps extends GhostProps {
+	color: NotificationColor,
+}
+
+export function ButtonGhost({
+	color,
+	size = 'small',
+	style,
+	...props
+}: ButtonGhostProps) {
+
+	return (
+		/**
+		 * I don't know, is this a bad idea to nest the provider?
+		 */
+		<ThemeContextProvider colorScheme={ mapColorScheme[color] }>
+			<Ghost
+				{ ...props }
+				size={ size }
+				style={ [
+					baseStyle.buttonGhost,
+					style,
+				] }
+			/>
+		</ThemeContextProvider>
+	)
+
+}
+
+const
+	baseStyle =
+		StyleSheet.create({
+			buttonGhost: {
+				marginTop: SpacingConstant.spacing_03,
+				paddingRight: SpacingConstant.spacing_05,
+			},
+		}),
+
+	mapColorScheme: Record<NotificationColor, ThemeContextProviderProps['colorScheme']> =
+		{
+			low_contrast: 'gray_10',
+			high_contrast: 'gray_100',
+		}

package/src/components/notification/_variants/_button-tertiary.tsx

@@ -0,0 +1,65 @@
+import {
+	StyleSheet,
+} from 'react-native'
+
+import {
+	SpacingConstant,
+} from '../../../constants'
+
+import {
+	ThemeContextProvider,
+	type ThemeContextProviderProps,
+} from '../../../contexts/theme/provider'
+
+import {
+	Tertiary,
+	type TertiaryProps,
+} from '../../button/tertiary'
+
+import type {
+	NotificationColor,
+} from '../types'
+
+export interface ButtonTertiaryProps extends TertiaryProps {
+	color: NotificationColor,
+}
+
+export function ButtonTertiary({
+	color,
+	size = 'small',
+	style,
+	...props
+}: ButtonTertiaryProps) {
+
+	return (
+		/**
+		 * I don't know, is this a bad idea to nest the provider?
+		 */
+		<ThemeContextProvider colorScheme={ mapColorScheme[color] }>
+			<Tertiary
+				{ ...props }
+				size={ size }
+				style={ [
+					baseStyle.buttonTertiary,
+					style,
+				] }
+			/>
+		</ThemeContextProvider>
+	)
+
+}
+
+const
+	baseStyle =
+		StyleSheet.create({
+			buttonTertiary: {
+				marginTop: SpacingConstant.spacing_06,
+				paddingRight: SpacingConstant.spacing_05,
+			},
+		}),
+
+	mapColorScheme: Record<NotificationColor, ThemeContextProviderProps['colorScheme']> =
+		{
+			low_contrast: 'gray_10',
+			high_contrast: 'gray_100',
+		}