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

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

@@ -0,0 +1,254 @@
+import {
+	forwardRef,
+	useCallback,
+	useContext,
+	useImperativeHandle,
+	useRef,
+} from 'react'
+
+import {
+	Pressable,
+	StyleSheet,
+	View,
+	type PressableProps,
+	type ViewProps,
+} from 'react-native'
+
+import {
+	SpacingConstant,
+} from '../../../constants'
+
+import {
+	ThemeContext,
+} from '../../../contexts'
+
+import {
+	CommonStyle,
+	FlexStyle,
+} from '../../../styles'
+
+import {
+	FormLabel,
+	type FormLabelProps,
+} from '../../form-label'
+
+import {
+	Text,
+	type TextProps,
+} from '../../text'
+
+import {
+	Switch,
+	type SwitchProps,
+	type SwitchRef,
+	type SwitchState,
+} from '../../switch'
+
+export interface BaseProps extends Omit<ViewProps, 'children'> {
+	state?: SwitchState,
+	/**
+	 * Control `value` prop
+	 */
+	controlled?: boolean,
+	value?: boolean,
+	label?: string,
+	actionText?: string,
+	onChange?: SwitchProps['onChange'],
+	formLabelProps?: Omit<
+		FormLabelProps,
+		| 'label'
+	>,
+	actionTextProps?: Omit<TextProps, 'children'>,
+	pressableProps?: Omit<
+		PressableProps,
+		| 'aria-checked'
+		| 'role'
+		| 'style'
+	> & {
+		style?: ViewProps['style'],
+	},
+	switchProps?: Omit<
+		SwitchProps,
+		| 'controlled'
+		| 'value'
+		| 'onChange'
+		| 'motion'
+		| 'role'
+		| 'aria-checked'
+	>,
+}
+
+interface _BaseRef {
+	readonly value: SwitchRef['value'],
+	/**
+	 * This method does nothing if `controlled` prop is true
+	 */
+	setValue: SwitchRef['setValue'],
+}
+
+export interface BaseRef extends View, _BaseRef {
+}
+
+export const Base = forwardRef<BaseRef, BaseProps>(
+	function Base(
+		{
+			state = 'normal',
+			controlled,
+			value,
+			label,
+			actionText,
+			onChange,
+			formLabelProps,
+			actionTextProps,
+			pressableProps,
+			switchProps,
+			style,
+			...viewProps
+		},
+		forwardedRef,
+	) {
+
+		const
+			themeContext =
+				useContext(ThemeContext),
+
+			viewRef =
+				useRef<View>(null),
+
+			switchRef =
+				useRef<SwitchRef>(null),
+
+			pressHandler: NonNullable<PressableProps['onPress']> =
+				useCallback(event => {
+					pressableProps?.onPress?.(event)
+					switchRef.current?.setValue(currentValue => !currentValue)
+				}, [
+					pressableProps,
+				])
+
+		useImperativeHandle(forwardedRef, () => {
+			return Object.assign<View, _BaseRef>(
+				(viewRef.current ?? {}) as View,
+				{
+					get value() {
+						return !!switchRef.current?.value
+					},
+					setValue(val) {
+						switchRef.current?.setValue(val)
+					},
+				},
+			)
+		}, [])
+
+		return (
+			<View
+				{ ...viewProps }
+				style={ [
+					FlexStyle.flex_row,
+					FlexStyle.flex_wrap,
+					FlexStyle.items_center,
+					style,
+				] }
+				ref={ viewRef }
+			>
+				<Pressable
+					{ ...pressableProps }
+					role="switch"
+					disabled={ state !== 'normal' }
+					aria-checked={ value }
+					aria-label={ pressableProps?.['aria-label'] || label }
+					onPress={ pressHandler }
+					style={ [
+						CommonStyle.absolute,
+						CommonStyle.w_full,
+						CommonStyle.h_full,
+						baseStyle.pressable,
+						pressableProps?.style,
+					] }
+				/>
+
+				{ !!label && (
+					<FormLabel
+						{ ...formLabelProps }
+						label={ label }
+						textProps={{
+							...formLabelProps?.textProps,
+							style: [
+								{ color: themeContext.color[mapLabelColorToken[state]] },
+								formLabelProps?.textProps?.style,
+							],
+						}}
+						style={ [
+							CommonStyle.w_full,
+							baseStyle.label,
+							formLabelProps?.style,
+						] }
+					/>
+				) }
+
+				<Switch
+					{ ...switchProps }
+					aria-label={ switchProps?.['aria-label'] || label }
+					state={ state }
+					disabled={ state !== 'normal' }
+					role="none"
+					controlled={ controlled }
+					value={ value }
+					onChange={ onChange }
+					onPress={ switchProps?.onPress ?? pressableProps?.onPress }
+					style={ [
+						baseStyle.switch,
+						switchProps?.style,
+					] }
+					ref={ switchRef }
+				/>
+
+				{ !!actionText && (
+					<Text
+						{ ...actionTextProps }
+						type={ actionTextProps?.type || 'body_compact_01' }
+						style={ [
+							baseStyle.actionText,
+							{ color: themeContext.color[mapActionTextColorToken[state]] },
+							actionTextProps?.style,
+						] }
+					>
+						{ actionText }
+					</Text>
+				) }
+			</View>
+		)
+
+	},
+)
+
+const
+	baseStyle =
+		StyleSheet.create({
+			pressable: {
+				zIndex: 1,
+			},
+			switch: {
+				zIndex: 2,
+			},
+			label: {
+				marginBottom: SpacingConstant.spacing_05,
+			},
+			actionText: {
+				marginLeft: SpacingConstant.spacing_03, // same for both size
+			},
+		}),
+
+	mapLabelColorToken: Record<SwitchState, keyof ThemeContext['color']> =
+		{
+			normal: 'text_secondary',
+			disabled: 'text_disabled',
+			read_only: 'text_secondary',
+		},
+
+	mapActionTextColorToken: Record<SwitchState, keyof ThemeContext['color']> =
+		{
+			normal: 'text_primary',
+			disabled: 'text_disabled',
+			read_only: 'text_primary',
+		}

package/src/components/toggle/default/index.tsx

@@ -0,0 +1,41 @@
+import {
+	forwardRef,
+} from 'react'
+
+import {
+	Base,
+	type BaseProps,
+	type BaseRef,
+} from '../base'
+
+export interface DefaultProps extends Omit<BaseProps, 'switchProps'> {
+	label: string,
+	actionText: string,
+	switchProps?: Omit<BaseProps['switchProps'], 'size'>,
+}
+
+export interface DefaultRef extends BaseRef {
+}
+
+export const Default = forwardRef<DefaultRef, DefaultProps>(
+	function Default(
+		{
+			switchProps,
+			...props
+		},
+		ref,
+	) {
+
+		return (
+			<Base
+				{ ...props }
+				switchProps={{
+					...switchProps,
+					size: 'default',
+				}}
+				ref={ ref }
+			/>
+		)
+
+	},
+)

package/src/components/toggle/index.tsx

@@ -0,0 +1,4 @@
+export * from './base'
+export * from './default'
+export * from './small'
+export * from './state'

package/src/components/toggle/small/index.tsx

@@ -0,0 +1,39 @@
+import {
+	forwardRef,
+} from 'react'
+
+import {
+	Base,
+	type BaseProps,
+	type BaseRef,
+} from '../base'
+
+export interface SmallProps extends Omit<BaseProps, 'switchProps'> {
+	switchProps?: Omit<BaseProps['switchProps'], 'size'>,
+}
+
+export interface SmallRef extends BaseRef {
+}
+
+export const Small = forwardRef<SmallRef, SmallProps>(
+	function Small(
+		{
+			switchProps,
+			...props
+		},
+		ref,
+	) {
+
+		return (
+			<Base
+				{ ...props }
+				switchProps={{
+					...switchProps,
+					size: 'small',
+				}}
+				ref={ ref }
+			/>
+		)
+
+	},
+)

package/src/components/toggle/state.ts

@@ -0,0 +1,4 @@
+export type ToggleState =
+	| 'normal'
+	| 'disabled'
+	| 'read_only'

package/src/constants/color/code.json

@@ -0,0 +1,273 @@
+{
+	"black": "#000000",
+	"black100": "#000000",
+	"blackHover": "#212100",
+
+	"white": "#ffffff",
+	"white0": "#ffffff",
+	"whiteHover": "#e8e8e8",
+
+	"yellow10": "#fcf4d6",
+	"yellow20": "#fddc69",
+	"yellow30": "#f1c21b",
+	"yellow40": "#d2a106",
+	"yellow50": "#b28600",
+	"yellow60": "#8e6a00",
+	"yellow70": "#684e00",
+	"yellow80": "#483700",
+	"yellow90": "#302400",
+	"yellow100": "#1c1500",
+
+	"yellow10Hover": "#f8e6a0",
+	"yellow20Hover": "#fccd27",
+	"yellow30Hover": "#ddb00e",
+	"yellow40Hover": "#bc9005",
+	"yellow50Hover": "#9e7700",
+	"yellow60Hover": "#755800",
+	"yellow70Hover": "#806000",
+	"yellow80Hover": "#5c4600",
+	"yellow90Hover": "#3d2e00",
+	"yellow100Hover": "#332600",
+
+	"orange10": "#fff2e8",
+	"orange20": "#ffd9be",
+	"orange30": "#ffb784",
+	"orange40": "#ff832b",
+	"orange50": "#eb6200",
+	"orange60": "#ba4e00",
+	"orange70": "#8a3800",
+	"orange80": "#5e2900",
+	"orange90": "#3e1a00",
+	"orange100": "#231000",
+
+	"orange10Hover": "#ffe2cc",
+	"orange20Hover": "#ffc69e",
+	"orange30Hover": "#ff9d57",
+	"orange40Hover": "#fa6800",
+	"orange50Hover": "#cc5500",
+	"orange60Hover": "#9e4200",
+	"orange70Hover": "#a84400",
+	"orange80Hover": "#753300",
+	"orange90Hover": "#522200",
+	"orange100Hover": "#421e00",
+
+	"red10": "#fff1f1",
+	"red20": "#ffd7d9",
+	"red30": "#ffb3b8",
+	"red40": "#ff8389",
+	"red50": "#fa4d56",
+	"red60": "#da1e28",
+	"red70": "#a2191f",
+	"red80": "#750e13",
+	"red90": "#520408",
+	"red100": "#2d0709",
+
+	"red100Hover": "#540d11",
+	"red90Hover": "#66050a",
+	"red80Hover": "#921118",
+	"red70Hover": "#c21e25",
+	"red60Hover": "#b81922",
+	"red50Hover": "#ee0713",
+	"red40Hover": "#ff6168",
+	"red30Hover": "#ff99a0",
+	"red20Hover": "#ffc2c5",
+	"red10Hover": "#ffe0e0",
+
+	"magenta10": "#fff0f7",
+	"magenta20": "#ffd6e8",
+	"magenta30": "#ffafd2",
+	"magenta40": "#ff7eb6",
+	"magenta50": "#ee5396",
+	"magenta60": "#d02670",
+	"magenta70": "#9f1853",
+	"magenta80": "#740937",
+	"magenta90": "#510224",
+	"magenta100": "#2a0a18",
+
+	"magenta100Hover": "#53142f",
+	"magenta90Hover": "#68032e",
+	"magenta80Hover": "#8e0b43",
+	"magenta70Hover": "#bf1d63",
+	"magenta60Hover": "#b0215f",
+	"magenta50Hover": "#e3176f",
+	"magenta40Hover": "#ff57a0",
+	"magenta30Hover": "#ff94c3",
+	"magenta20Hover": "#ffbdda",
+	"magenta10Hover": "#ffe0ef",
+
+	"purple10": "#f6f2ff",
+	"purple20": "#e8daff",
+	"purple30": "#d4bbff",
+	"purple40": "#be95ff",
+	"purple50": "#a56eff",
+	"purple60": "#8a3ffc",
+	"purple70": "#6929c4",
+	"purple80": "#491d8b",
+	"purple90": "#31135e",
+	"purple100": "#1c0f30",
+
+	"purple100Hover": "#341c59",
+	"purple90Hover": "#40197b",
+	"purple80Hover": "#5b24ad",
+	"purple70Hover": "#7c3dd6",
+	"purple60Hover": "#7822fb",
+	"purple50Hover": "#9352ff",
+	"purple40Hover": "#ae7aff",
+	"purple30Hover": "#c5a3ff",
+	"purple20Hover": "#dcc7ff",
+	"purple10Hover": "#ede5ff",
+
+	"blue10": "#edf5ff",
+	"blue20": "#d0e2ff",
+	"blue30": "#a6c8ff",
+	"blue40": "#78a9ff",
+	"blue50": "#4589ff",
+	"blue60": "#0f62fe",
+	"blue70": "#0043ce",
+	"blue80": "#002d9c",
+	"blue90": "#001d6c",
+	"blue100": "#001141",
+
+	"blue100Hover": "#001f75",
+	"blue90Hover": "#00258a",
+	"blue80Hover": "#0039c7",
+	"blue70Hover": "#0053ff",
+	"blue60Hover": "#0050e6",
+	"blue50Hover": "#1f70ff",
+	"blue40Hover": "#5c97ff",
+	"blue30Hover": "#8ab6ff",
+	"blue20Hover": "#b8d3ff",
+	"blue10Hover": "#dbebff",
+
+	"cyan10": "#e5f6ff",
+	"cyan20": "#bae6ff",
+	"cyan30": "#82cfff",
+	"cyan40": "#33b1ff",
+	"cyan50": "#1192e8",
+	"cyan60": "#0072c3",
+	"cyan70": "#00539a",
+	"cyan80": "#003a6d",
+	"cyan90": "#012749",
+	"cyan100": "#061727",
+
+	"cyan10Hover": "#cceeff",
+	"cyan20Hover": "#99daff",
+	"cyan30Hover": "#57beff",
+	"cyan40Hover": "#059fff",
+	"cyan50Hover": "#0f7ec8",
+	"cyan60Hover": "#005fa3",
+	"cyan70Hover": "#0066bd",
+	"cyan80Hover": "#00498a",
+	"cyan90Hover": "#013360",
+	"cyan100Hover": "#0b2947",
+
+	"teal10": "#d9fbfb",
+	"teal20": "#9ef0f0",
+	"teal30": "#3ddbd9",
+	"teal40": "#08bdba",
+	"teal50": "#009d9a",
+	"teal60": "#007d79",
+	"teal70": "#005d5d",
+	"teal80": "#004144",
+	"teal90": "#022b30",
+	"teal100": "#081a1c",
+
+	"teal10Hover": "#acf6f6",
+	"teal20Hover": "#57e5e5",
+	"teal30Hover": "#25cac8",
+	"teal40Hover": "#07aba9",
+	"teal50Hover": "#008a87",
+	"teal60Hover": "#006b68",
+	"teal70Hover": "#007070",
+	"teal80Hover": "#005357",
+	"teal90Hover": "#033940",
+	"teal100Hover": "#0f3034",
+
+	"green10": "#defbe6",
+	"green20": "#a7f0ba",
+	"green30": "#6fdc8c",
+	"green40": "#42be65",
+	"green50": "#24a148",
+	"green60": "#198038",
+	"green70": "#0e6027",
+	"green80": "#044317",
+	"green90": "#022d0d",
+	"green100": "#071908",
+
+	"green10Hover": "#b6f6c8",
+	"green20Hover": "#74e792",
+	"green30Hover": "#36ce5e",
+	"green40Hover": "#3bab5a",
+	"green50Hover": "#208e3f",
+	"green60Hover": "#166f31",
+	"green70Hover": "#11742f",
+	"green80Hover": "#05521c",
+	"green90Hover": "#033b11",
+	"green100Hover": "#0d300f",
+
+	"coolGray10": "#f2f4f8",
+	"coolGray20": "#dde1e6",
+	"coolGray30": "#c1c7cd",
+	"coolGray40": "#a2a9b0",
+	"coolGray50": "#878d96",
+	"coolGray60": "#697077",
+	"coolGray70": "#4d5358",
+	"coolGray80": "#343a3f",
+	"coolGray90": "#21272a",
+	"coolGray100": "#121619",
+
+	"coolGray10Hover": "#e4e9f1",
+	"coolGray20Hover": "#cdd3da",
+	"coolGray30Hover": "#adb5bd",
+	"coolGray40Hover": "#9199a1",
+	"coolGray50Hover": "#757b85",
+	"coolGray60Hover": "#585e64",
+	"coolGray70Hover": "#5d646a",
+	"coolGray80Hover": "#434a51",
+	"coolGray90Hover": "#2b3236",
+	"coolGray100Hover": "#222a2f",
+
+	"gray10": "#f4f4f4",
+	"gray20": "#e0e0e0",
+	"gray30": "#c6c6c6",
+	"gray40": "#a8a8a8",
+	"gray50": "#8D8D8D",
+	"gray60": "#6f6f6f",
+	"gray70": "#525252",
+	"gray80": "#393939",
+	"gray90": "#262626",
+	"gray100": "#161616",
+
+	"gray10Hover": "#e8e8e8",
+	"gray20Hover": "#d1d1d1",
+	"gray30Hover": "#b5b5b5",
+	"gray40Hover": "#999999",
+	"gray50Hover": "#7a7a7a",
+	"gray60Hover": "#5e5e5e",
+	"gray70Hover": "#636363",
+	"gray80Hover": "#474747",
+	"gray90Hover": "#333333",
+	"gray100Hover": "#292929",
+
+	"warmGray10": "#f7f3f2",
+	"warmGray20": "#e5e0df",
+	"warmGray30": "#cac5c4",
+	"warmGray40": "#ada8a8",
+	"warmGray50": "#8f8b8b",
+	"warmGray60": "#726e6e",
+	"warmGray70": "#565151",
+	"warmGray80": "#3c3838",
+	"warmGray90": "#272525",
+	"warmGray100": "#171414",
+
+	"warmGray10Hover": "#f0e8e6",
+	"warmGray20Hover": "#d8d0cf",
+	"warmGray30Hover": "#b9b3b1",
+	"warmGray40Hover": "#9c9696",
+	"warmGray50Hover": "#7f7b7b",
+	"warmGray60Hover": "#605d5d",
+	"warmGray70Hover": "#696363",
+	"warmGray80Hover": "#4c4848",
+	"warmGray90Hover": "#343232",
+	"warmGray100Hover": "#2c2626"
+}

package/src/constants/color/index.ts

@@ -0,0 +1,7 @@
+import Code from './code.json'
+import * as Tokens from './tokens'
+
+export {
+	Code,
+	Tokens,
+}