Merge pull request #1 from RakaDoank/main

Update 1.0.5

Author: RakaDoank

.github/workflows/deploy-storybook.yml

@@ -4,9 +4,11 @@ on:
   push:
     branches:
       - deploy-storybook
-  pull_request:
+  pull_request_target:
     branches:
       - deploy-storybook
+    types:
+      - closed
 
 jobs:
   deploy-storybook:

.github/workflows/release.yml

@@ -4,9 +4,11 @@ on:
   push:
     branches:
       - release
-  pull_request:
+  pull_request_target:
     branches:
       - release
+    types:
+      - closed
 
 jobs:
   release:

packages/carbon-react-native/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@audira/carbon-react-native",
-	"version": "1.0.4",
+	"version": "1.0.5",
 	"license": "MIT",
 	"homepage": "https://rakadoank.github.io/carbon-react-native",
 	"repository": "https://github.com/RakaDoank/carbon-react-native",

packages/carbon-react-native/src/_internal/contexts/global-config/GlobalConfigContext.ts

@@ -2,6 +2,10 @@ import {
 	createContext,
 } from "react"
 
+import {
+	I18nManager,
+} from "react-native"
+
 import type {
 	NotificationColor,
 } from "../../../components/notification/NotificationColor"
@@ -26,5 +30,5 @@ export const GlobalConfigContext = createContext<GlobalConfigContext>({
 	android_buttonRippleEffect: true,
 	notificationColor: "high_contrast",
 	toastDuration: 5000,
-	rtl: false,
+	rtl: I18nManager.isRTL,
 })

packages/carbon-react-native/src/_internal/providers/global-config/GlobalConfigProvider.tsx

@@ -1,3 +1,7 @@
+import {
+	I18nManager,
+} from "react-native"
+
 import {
 	GlobalConfigContext,
 } from "../../contexts/global-config"
@@ -6,14 +10,20 @@ import type {
 	GlobalConfigProviderProps,
 } from "./GlobalConfigProviderProps"
 
+const isRtl = I18nManager.isRTL
+
 export function GlobalConfigProvider({
-	android_buttonRippleEffect,
-	notificationColor,
-	toastDuration,
-	rtl,
+	android_buttonRippleEffect = true,
+	notificationColor = "high_contrast",
+	toastDuration = 5000,
+	rtl: rtlProp,
 	children,
 }: GlobalConfigProviderProps) {
 
+	const
+		rtl =
+			rtlProp ?? isRtl
+
 	return (
 		<GlobalConfigContext.Provider
 			value={{

packages/carbon-react-native/src/_internal/providers/global-config/GlobalConfigProviderProps.ts

@@ -2,6 +2,6 @@ import type {
 	GlobalConfigContext,
 } from "../../contexts"
 
-export interface GlobalConfigProviderProps extends GlobalConfigContext {
+export interface GlobalConfigProviderProps extends Partial<GlobalConfigContext> {
 	children?: React.ReactNode,
 }

packages/carbon-react-native/src/carbon-react-native/CarbonReactNative.tsx

@@ -9,15 +9,15 @@ import type {
 } from "./CarbonReactNativeProps"
 
 export function CarbonReactNative({
-	// GlobalConfigProviderProps
-	android_buttonRippleEffect = true,
-	notificationColor = "high_contrast",
-	toastDuration = 5000,
-	rtl = false,
-
-	// ThemeProviderProps
+	// +++ GlobalConfigProviderProps +++
+	android_buttonRippleEffect,
+	notificationColor,
+	toastDuration,
+	rtl,
+	// --- GlobalConfigProviderProps ---
+	// +++ ThemeProviderProps +++
 	colorScheme,
-
+	// --- ThemeProviderProps ---
 	children,
 }: CarbonReactNativeProps) {
 

packages/carbon-react-native/src/carbon-react-native/CarbonReactNativeProps.ts

@@ -3,5 +3,5 @@ import type {
 	ThemeProviderProps,
 } from "../_internal/providers"
 
-export interface CarbonReactNativeProps extends Partial<GlobalConfigProviderProps>, ThemeProviderProps {
+export interface CarbonReactNativeProps extends GlobalConfigProviderProps, ThemeProviderProps {
 }

packages/carbon-react-native/src/components/box/Box.tsx

@@ -21,6 +21,12 @@ import type {
 	BoxRef,
 } from "./BoxRef"
 
+/**
+ * This component is a basic React Native `View` to solve
+ * RTL support for component level.
+ * 
+ * You may use this if your app provides custom localization options.
+ */
 export const Box = forwardRef<BoxRef, BoxProps>(
 	function Box(
 		{

packages/carbon-react-native/src/components/button/base/Base.tsx

@@ -73,7 +73,7 @@ export const Base = forwardRef<BaseRef, BaseProps>(
 				getIconSize(size),
 
 			iconMarginStyle =
-				mapIconMarginStyle[`${!!globalConfigContext.rtl}`][`${!!text}`]
+				mapIconMarginStyle[`${!!text}`]
 
 		return (
 			<Pressable
@@ -172,11 +172,8 @@ const
 				maxHeight: 48,
 			},
 
-			iconMarginLTR: {
-				marginLeft: Spacing.spacing_07,
-			},
-			iconMarginRTL: {
-				marginRight: Spacing.spacing_07,
+			iconMargin: {
+				marginStart: Spacing.spacing_07,
 			},
 
 			inlineLoading: {
@@ -241,19 +238,11 @@ const
 		},
 
 	mapIconMarginStyle: {
-		[RTL in `${boolean}`]: {
-			[HasText in `${boolean}`]: ViewProps["style"]
-		}
+		[HasText in `${boolean}`]: ViewProps["style"]
 	} =
 		{
-			false: {
-				false: null,
-				true: baseStyle.iconMarginLTR,
-			},
-			true: {
-				false: null,
-				true: baseStyle.iconMarginRTL,
-			},
+			false: null,
+			true: baseStyle.iconMargin,
 		},
 
 	mapStyleInButtonGroup: {