@audira/carbon-react-native 1.0.0-beta.7 → 1.0.0-beta.8

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

@@ -0,0 +1,3 @@
+export * from "./Small"
+export * from "./SmallProps"
+export * from "./SmallRef"

package/src/const/dialog-animation-configs/carbon-react.ts

@@ -0,0 +1,53 @@
+import {
+	Easing,
+} from "react-native"
+
+import {
+	Motion,
+	Spacing,
+} from "@audira/carbon-react-native-elements"
+
+import type {
+	DialogProviderAnimationConfig,
+} from "../../providers/dialog/DialogProviderAnimationConfig"
+
+/**
+ * Same animation style like `@carbon/react` library
+ */
+export const CarbonReact = {
+	duration: Motion.Duration.moderate_02,
+	modalStyleFactory(animatedValue, inputRange) {
+		return {
+			opacity: animatedValue.interpolate({
+				inputRange,
+				outputRange: [0, 1, 0],
+			}),
+			transform: [{
+				translateY: animatedValue.interpolate({
+					inputRange,
+					outputRange: [-Spacing.spacing_06, 0, -Spacing.spacing_06],
+				}),
+			}],
+		}
+	},
+	modalEasing: [
+		Easing.bezier(
+			Motion.Easing.exit.expressive.x1,
+			Motion.Easing.exit.expressive.y1,
+			Motion.Easing.exit.expressive.x2,
+			Motion.Easing.exit.expressive.y2,
+		),
+		Easing.bezier(
+			Motion.Easing.entrance.expressive.x1,
+			Motion.Easing.entrance.expressive.y1,
+			Motion.Easing.entrance.expressive.x2,
+			Motion.Easing.entrance.expressive.y2,
+		),
+		Easing.bezier(
+			Motion.Easing.exit.expressive.x1,
+			Motion.Easing.exit.expressive.y1,
+			Motion.Easing.exit.expressive.x2,
+			Motion.Easing.exit.expressive.y2,
+		),
+	],
+} as const satisfies Required<DialogProviderAnimationConfig>

package/src/const/dialog-animation-configs/fade-bottom-up-2.ts

@@ -0,0 +1,36 @@
+import {
+	Easing,
+} from "react-native"
+
+import {
+	Motion,
+	Spacing,
+} from "@audira/carbon-react-native-elements"
+
+import type {
+	DialogProviderAnimationConfig,
+} from "../../providers/dialog/DialogProviderAnimationConfig"
+
+export const FadeBottomUp2 = {
+	duration: Motion.Duration.moderate_02,
+	modalStyleFactory(animatedValue, inputRange) {
+		return {
+			opacity: animatedValue.interpolate({
+				inputRange,
+				outputRange: [0, 1, 0],
+			}),
+			transform: [{
+				translateY: animatedValue.interpolate({
+					inputRange,
+					outputRange: [Spacing.spacing_04, 0, -Spacing.spacing_04],
+				}),
+			}],
+		}
+	},
+	modalEasing: Easing.bezier(
+		Motion.Easing.entrance.expressive.x1,
+		Motion.Easing.entrance.expressive.y1,
+		Motion.Easing.entrance.expressive.x2,
+		Motion.Easing.entrance.expressive.y2,
+	),
+} as const satisfies Required<DialogProviderAnimationConfig>

package/src/const/dialog-animation-configs/fade-bottom-up.ts

@@ -0,0 +1,36 @@
+import {
+	Easing,
+} from "react-native"
+
+import {
+	Motion,
+	Spacing,
+} from "@audira/carbon-react-native-elements"
+
+import type {
+	DialogProviderAnimationConfig,
+} from "../../providers/dialog/DialogProviderAnimationConfig"
+
+export const FadeBottomUp = {
+	duration: Motion.Duration.moderate_02,
+	modalStyleFactory(animatedValue, inputRange) {
+		return {
+			opacity: animatedValue.interpolate({
+				inputRange,
+				outputRange: [0, 1, 0],
+			}),
+			transform: [{
+				translateY: animatedValue.interpolate({
+					inputRange,
+					outputRange: [Spacing.spacing_04, 0, Spacing.spacing_04],
+				}),
+			}],
+		}
+	},
+	modalEasing: Easing.bezier(
+		Motion.Easing.entrance.expressive.x1,
+		Motion.Easing.entrance.expressive.y1,
+		Motion.Easing.entrance.expressive.x2,
+		Motion.Easing.entrance.expressive.y2,
+	),
+} as const satisfies Required<DialogProviderAnimationConfig>

package/src/const/dialog-animation-configs/index.ts

@@ -0,0 +1,3 @@
+export * from "./carbon-react"
+export * from "./fade-bottom-up"
+export * from "./fade-bottom-up-2"

package/src/const/index.ts

@@ -0,0 +1,5 @@
+import * as DialogAnimationConfigs from "./dialog-animation-configs"
+
+export {
+	DialogAnimationConfigs,
+}

package/src/contexts/breakpoint/BreakpointContext.ts

@@ -0,0 +1,19 @@
+import {
+	createContext,
+} from "react"
+
+import {
+	Dimensions,
+} from "react-native"
+
+import type {
+	BreakpointToken,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	BreakpointHelper,
+} from "../../helpers"
+
+export const BreakpointContext = createContext<BreakpointToken>(
+	BreakpointHelper.getToken(Dimensions.get("window").width),
+)

package/src/contexts/breakpoint/index.ts

@@ -0,0 +1 @@
+export * from "./BreakpointContext"

package/src/contexts/dialog/DialogContext.ts

@@ -0,0 +1,27 @@
+import {
+	createContext,
+} from "react"
+
+import type {
+	DialogData,
+} from "./DialogData"
+
+export interface DialogContext {
+	show: (data: DialogData) => void,
+	dismiss: () => Promise<void>,
+	dismissAll: () => Promise<void>,
+}
+
+const error = new Error("Unitialized `<DialogProvider>`. Make sure you wrap your React app with `<DialogProvider>`")
+
+export const DialogContext = createContext<DialogContext>({
+	show() {
+		throw error
+	},
+	dismiss() {
+		throw error
+	},
+	dismissAll() {
+		throw error
+	},
+})

package/src/contexts/dialog/DialogData.ts

@@ -0,0 +1,27 @@
+// import type {
+// 	DialogType,
+// } from './DialogType'
+
+export interface DialogData {
+	component: React.ReactNode,
+	/**
+	 * You can open another next dialog while keeping the previous dialog mounted. When you close the next dialog, the previous dialog will be appeared again
+	 */
+	stack?: boolean,
+	/**
+	 * A `modal` dialog triggers a state (or mode) that focuses the user’s attention exclusively on one task or piece of relevant information. When a modal dialog is active, the content of the underneath page is obscured and inaccessible until the user completes the task or dismisses the modal.
+	 * 
+	 * When a `non_modal` dialog is active the user can continue viewing and interacting with the main page while the dialog is open. Non-modal dialogs are commonly used to present non-critical information or optional user tasks.
+	 * 
+	 * Remember! If you use `stack` dialog, the first and subsequent dialogs will use the first `type` value. You can't change the type for the next dialog.
+	 * 
+	 * @default 'modal'
+	 * @see https://carbondesignsystem.com/patterns/dialog-pattern/#dialog-types
+	 */
+	// type?: DialogType,
+	/**
+	 * User can touch/click any area in the overlay to dismiss the dialog
+	 * @default 'false'
+	 */
+	overlayTouchDismiss?: boolean,
+}

package/src/contexts/dialog/DialogType.ts

@@ -0,0 +1,7 @@
+/**
+ * I don't have time to implement the `non_modal`
+ * @see https://carbondesignsystem.com/patterns/dialog-pattern/#dialog-types
+ */
+// export type DialogType =
+// 	| 'modal'
+// 	| 'non_modal'

package/src/contexts/dialog/index.ts

@@ -0,0 +1,2 @@
+export * from "./DialogContext"
+export type * from "./DialogData"

package/src/contexts/index.ts

@@ -0,0 +1,4 @@
+export * from "./breakpoint"
+export * from "./dialog"
+export * from "./theme"
+export * from "./toast"

package/src/contexts/theme/ThemeContext.ts

@@ -0,0 +1,24 @@
+// Probably better to move to the `GlobalContext`
+// Historically, it also holds all the Carbon color tokens based on what the `colorScheme` is.
+// Holding an object with 150+ properties in the app runtime seems ridiculous
+
+import {
+	createContext,
+} from "react"
+
+import {
+	ColorSchemeGlobal,
+} from "../../_internal/globals"
+
+import type {
+	ThemeType,
+} from "../../types"
+
+export interface ThemeContext {
+	colorScheme: ThemeType.ColorScheme,
+}
+
+export const ThemeContext =
+	createContext<ThemeContext>({
+		colorScheme: ColorSchemeGlobal.get(),
+	})

package/src/contexts/theme/index.ts

@@ -0,0 +1 @@
+export * from "./ThemeContext"

package/src/contexts/toast/ToastContext.ts

@@ -0,0 +1,24 @@
+import {
+	createContext,
+} from "react"
+
+import type {
+	ToastContextShowConfig,
+} from "./ToastContextShowConfig"
+
+export interface ToastContext {
+	show: (
+		fn: (id: number) => React.ReactNode,
+		config?: ToastContextShowConfig,
+	) => void,
+	dismiss: (id: number) => void,
+}
+
+export const ToastContext = createContext<ToastContext>({
+	show() {
+		throw new Error("Uninitialized ToastProvider")
+	},
+	dismiss() {
+		throw new Error("Uninitialized ToastProvider")
+	},
+})

package/src/contexts/toast/ToastContextShowConfig.ts

@@ -0,0 +1,6 @@
+export interface ToastContextShowConfig {
+	/**
+	 * Duration per component in milliseconds
+	 */
+	duration?: number,
+}

package/src/contexts/toast/index.ts

@@ -0,0 +1,2 @@
+export * from "./ToastContext"
+export * from "./ToastContextShowConfig"

package/src/helpers/breakpoint/get-token.ts

@@ -0,0 +1,20 @@
+import {
+	Breakpoint,
+	type BreakpointToken,
+} from "@audira/carbon-react-native-elements"
+
+export function getToken(
+	windowWidth: number,
+): BreakpointToken {
+	return windowWidth < Breakpoint.medium.value.px ? (
+		"small"
+	) : windowWidth < Breakpoint.large.value.px ? (
+		"medium"
+	) : windowWidth < Breakpoint.x_large.value.px ? (
+		"large"
+	) : windowWidth < Breakpoint.max.value.px ? (
+		"x_large"
+	) : (
+		"max"
+	)
+}

package/src/helpers/breakpoint/index.ts

@@ -0,0 +1 @@
+export * from "./get-token"

package/src/helpers/color/get-color-scheme.ts

@@ -0,0 +1,19 @@
+import {
+	Appearance,
+	type ColorSchemeName,
+} from "react-native"
+
+import type * as ThemeType from "../../types/theme"
+
+export function getColorScheme(
+	appearanceColorScheme?: ColorSchemeName,
+): ThemeType.ColorScheme {
+	return mapScheme[ appearanceColorScheme || Appearance.getColorScheme() || "light" ]
+}
+
+const
+	mapScheme: Record<Extract<ColorSchemeName, string>, ThemeType.ColorScheme> =
+		{
+			light: "gray_10",
+			dark: "gray_100",
+		}

package/src/helpers/color/get-color-token.ts

@@ -0,0 +1,23 @@
+import type {
+	Color,
+	ColorToken,
+} from "@audira/carbon-react-native-elements"
+
+import type {
+	ThemeType,
+} from "../../types"
+
+export function getColorToken(
+	colorScheme: ThemeType.ColorScheme,
+) {
+	return mapSchemeToColorToken[ colorScheme ]()
+}
+
+const mapSchemeToColorToken: Record<ThemeType.ColorScheme, () => Record<ColorToken, string>> = {
+	gray_10: () => (require("@audira/carbon-react-native-elements") as unknown as {
+		Color: typeof Color
+	}).Color.Token.gray_10.all,
+	gray_100: () => (require("@audira/carbon-react-native-elements") as unknown as {
+		Color: typeof Color
+	}).Color.Token.gray_100.all,
+}

package/src/helpers/color/hex-to-rgba.ts

@@ -0,0 +1,11 @@
+export function hexToRgba(
+	hexCode: string,
+	opacity: string,
+): string {
+	const values = [
+		hexCode.substring(1, 3),
+		hexCode.substring(3, 5),
+		hexCode.substring(5, 7),
+	].map((string) => parseInt(string, 16))
+	return `rgba(${values[0]},${values[1]},${values[2]},${opacity})`
+}

package/src/helpers/color/index.ts

@@ -0,0 +1,3 @@
+export * from "./get-color-scheme"
+export * from "./get-color-token"
+export * from "./hex-to-rgba"

package/src/helpers/index.ts

@@ -0,0 +1,7 @@
+import * as BreakpointHelper from "./breakpoint"
+import * as ColorHelper from "./color"
+
+export {
+	BreakpointHelper,
+	ColorHelper,
+}

package/src/hooks/breakpoint/index.tsx

@@ -0,0 +1 @@
+export * from "./use"

package/src/hooks/breakpoint/use.tsx

@@ -0,0 +1,30 @@
+import {
+	useContext,
+} from "react"
+
+import {
+	Breakpoint,
+	type BreakpointData,
+	type BreakpointToken,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	BreakpointContext,
+} from "../../contexts"
+
+export interface Use extends BreakpointData {
+	breakpoint: BreakpointToken,
+}
+
+export function use(): Use {
+
+	const
+		breakpoint =
+			useContext(BreakpointContext)
+
+	return {
+		breakpoint,
+		...Breakpoint[breakpoint],
+	}
+
+}

package/src/hooks/index.tsx

@@ -0,0 +1,9 @@
+import * as BreakpointHook from "./breakpoint"
+
+export {
+	BreakpointHook,
+}
+
+export {
+	use as useBreakpoint,
+} from "./breakpoint/use"

package/src/index.ts

@@ -0,0 +1,9 @@
+export * from "./carbon-react-native"
+export * from "./carbon-style-sheet"
+export * from "./components"
+export * from "./const"
+export * from "./contexts"
+export * from "./helpers"
+export * from "./hooks"
+export * from "./providers"
+export * from "./types"

package/src/providers/dialog/DialogProvider.tsx

@@ -0,0 +1,122 @@
+import {
+	forwardRef,
+	useCallback,
+	useImperativeHandle,
+	useRef,
+	useState,
+} from "react"
+
+import {
+	DialogContext,
+	type DialogData,
+} from "../../contexts/dialog"
+
+import type {
+	DialogProviderProps,
+} from "./DialogProviderProps"
+
+import type {
+	DialogProviderRef,
+} from "./DialogProviderRef"
+
+import {
+	Controller,
+	type ControllerRef,
+} from "./_controller"
+
+export const DialogProvider = forwardRef<DialogProviderRef, DialogProviderProps>(
+	function DialogProvider(
+		{
+			children,
+			animationConfig,
+			modalProps,
+			overlayProps,
+			overlayTouchDismiss,
+		},
+		ref,
+	) {
+
+		const
+			controllerRef =
+				useRef<ControllerRef>(null),
+
+			dialogDataQueue =
+				useRef<DialogData>(null),
+
+			[mountController, setMountController] =
+				useState(false),
+
+			setControllerRef: React.RefCallback<ControllerRef> =
+				useCallback(ref => {
+					controllerRef.current = ref
+
+					if(controllerRef.current && dialogDataQueue.current) {
+						controllerRef.current.show({ ...dialogDataQueue.current })
+						dialogDataQueue.current = null
+					}
+				}, []),
+
+			show: DialogContext["show"] =
+				useCallback(data => {
+					if(!controllerRef.current) {
+						dialogDataQueue.current = { ...data }
+						setMountController(true)
+					} else {
+						controllerRef.current?.show(data)
+					}
+				}, []),
+
+			dismiss: DialogContext["dismiss"] =
+				useCallback(async () => {
+					return controllerRef.current?.dismiss()
+				}, []),
+
+			dismissAll: DialogContext["dismissAll"] =
+				useCallback(async () => {
+					return controllerRef.current?.dismissAll()
+				}, []),
+
+			onEmpty =
+				useCallback(() => {
+					if(!dialogDataQueue.current) {
+						setMountController(false)
+					}
+				}, [])
+
+		useImperativeHandle(ref, () => {
+			return {
+				show,
+				dismiss,
+				dismissAll,
+			}
+		}, [
+			show,
+			dismiss,
+			dismissAll,
+		])
+
+		return (
+			<DialogContext.Provider
+				value={{
+					show,
+					dismiss,
+					dismissAll,
+				}}
+			>
+				{ children }
+
+				{ mountController && (
+					<Controller
+						ref={ setControllerRef }
+						animationConfig={ animationConfig }
+						modalProps={ modalProps }
+						overlayProps={ overlayProps }
+						overlayTouchDismiss={ overlayTouchDismiss }
+						onEmpty={ onEmpty }
+					/>
+				) }
+			</DialogContext.Provider>
+		)
+
+	},
+)

package/src/providers/dialog/DialogProviderAnimationConfig.ts

@@ -0,0 +1,49 @@
+import type {
+	Animated,
+	EasingFunction,
+	ViewStyle,
+} from "react-native"
+
+export interface DialogProviderAnimationConfig {
+	/**
+	 * You can pass a single duration or consists of three durations of array
+	 * 
+	 * Indexes:
+	 * - `0` -> Unmounted easing
+	 * - `1` -> Mounted easing
+	 * - `2` -> Unmounted easing for being stacked behind of the next dialog
+	 * 
+	 * Value in milliseconds
+	 * @default DialogAnimationConfigs.CarbonReact.duration
+	 */
+	readonly duration?: number | [number, number, number],
+	/**
+	 * Input range interpolation:
+	 * - `0` -> Unmounted style
+	 * - `1` -> Mounted style
+	 * - `2` -> Hidden behind of the next dialog
+	 * 
+	 * @default DialogAnimationConfigs.CarbonReact.modalStyleFactory
+	 */
+	readonly modalStyleFactory: (
+		animatedValue: Animated.Value,
+		/**
+		 * @example [0, 1, 2]
+		 */
+		interpolationInputRange: number[],
+	) => ViewStyle,
+
+	/**
+	 * You can pass a single easing or consists of three easings of array
+	 * 
+	 * Indexes:
+	 * - `0` -> Unmounted easing
+	 * - `1` -> Mounted easing
+	 * - `2` -> Unmounted easing for being stacked behind of the next dialog
+	 * 
+	 * @default DialogAnimationConfigs.CarbonReact.modalEasing
+	 */
+	readonly modalEasing?:
+		| EasingFunction
+		| [EasingFunction, EasingFunction, EasingFunction],
+}

package/src/providers/dialog/DialogProviderProps.ts

@@ -0,0 +1,28 @@
+import type {
+	DialogProviderAnimationConfig,
+} from "./DialogProviderAnimationConfig"
+
+import type {
+	ModalProps,
+} from "./_controller/_modal/ModalProps"
+
+import type {
+	OverlayProps,
+} from "./_controller/_overlay/OverlayProps"
+
+export interface DialogProviderProps {
+	overlayProps?: Omit<OverlayProps, "animationConfig">,
+	/**
+	 * @default DialogAnimationConfigs.CarbonReact
+	 */
+	animationConfig?: DialogProviderAnimationConfig,
+	modalProps?: Omit<ModalProps, "animationConfig">,
+	children?: React.ReactNode,
+	/**
+	 * User can touch/click any area in the overlay to dismiss the dialog
+	 * 
+	 * `overlayTouchDismiss` boolean value in the `.show` method parameter will takes precedence
+	 * @default 'false'
+	 */
+	overlayTouchDismiss?: boolean,
+}

package/src/providers/dialog/DialogProviderRef.ts

@@ -0,0 +1,6 @@
+import type {
+	DialogContext,
+} from "../../contexts/dialog"
+
+export interface DialogProviderRef extends DialogContext {
+}