Add Box component to fix RTL Direction Automatically, Provide Style Sheets

Author: RakaDoank

packages/carbon-react-native/package.json

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

packages/carbon-react-native/src/_internal/style-sheets/common-style-sheet.ts

@@ -12,10 +12,6 @@ import {
 	Color,
 } from "@audira/carbon-react-native-elements"
 
-import {
-	FlexStyleSheet,
-} from "../../_internal/style-sheets"
-
 import {
 	CarbonStyleSheet,
 } from "../../carbon-style-sheet"
@@ -24,6 +20,10 @@ import {
 	ThemeContext,
 } from "../../contexts"
 
+import {
+	FlexStyleSheet,
+} from "../../style-sheets"
+
 import type {
 	Size as ButtonSize,
 } from "../button/Size"

packages/carbon-react-native/src/_internal/style-sheets/index.ts

@@ -12,10 +12,6 @@ import {
 	Spacing,
 } from "@audira/carbon-react-native-elements"
 
-import {
-	CommonStyleSheet,
-} from "../../_internal/style-sheets"
-
 import {
 	CarbonStyleSheet,
 } from "../../carbon-style-sheet"
@@ -24,6 +20,11 @@ import {
 	ThemeContext,
 } from "../../contexts"
 
+import {
+	PositionStyleSheet,
+	WidthStyleSheet,
+} from "../../style-sheets"
+
 export interface HeaderBorderProps {
 	/**
 	 * https://carbondesignsystem.com/components/accordion/style/#flush-alignment
@@ -42,15 +43,15 @@ export function HeaderBorder({
 	return (
 		<View
 			style={ [
-				CommonStyleSheet.absolute,
+				PositionStyleSheet.absolute,
 				style.borderBox,
 				carbonStyle.borderBox,
 				flushAlignment
 					? {
 						left: Spacing.spacing_05,
 						right: Spacing.spacing_05,
 					}
-					: CommonStyleSheet.w_full,
+					: WidthStyleSheet.w_full,
 				styleProp,
 			] }
 		/>

packages/carbon-react-native/src/components/accordion/_Header.tsx

@@ -21,8 +21,8 @@ import {
 } from "../../_internal/contexts"
 
 import {
-	CommonStyleSheet,
-} from "../../_internal/style-sheets"
+	DirectionStyleSheet,
+} from "../../style-sheets"
 
 import {
 	Collapsible,
@@ -151,7 +151,7 @@ export const Item = forwardRef<AccordionItemRef, AccordionItemProps>(
 					open={ open }
 					dir={ globalConfigContext.rtl ? "rtl" : undefined }
 					contentContainerStyle={ [
-						globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+						globalConfigContext.rtl ? DirectionStyleSheet.rtl : undefined,
 						accordionContext.collapsibleContentContainerStyle,
 						style.panel,
 					] }

packages/carbon-react-native/src/components/accordion/_HeaderBorder.tsx

@@ -0,0 +1,57 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	View,
+} from "react-native"
+
+import {
+	GlobalConfigContext,
+} from "../../_internal/contexts"
+
+import {
+	DirectionStyleSheet,
+} from "../../style-sheets"
+
+import type {
+	BoxProps,
+} from "./BoxProps"
+
+import type {
+	BoxRef,
+} from "./BoxRef"
+
+export const Box = forwardRef<BoxRef, BoxProps>(
+	function Box(
+		{
+			dir: dirProp,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			globalConfigContext =
+				useContext(GlobalConfigContext),
+
+			dir =
+				dirProp ??
+				globalConfigContext.rtl ? "rtl" : "ltr"
+
+		return (
+			<View
+				ref={ ref }
+				{ ...props }
+				dir={ dir }
+				style={ [
+					dir == "rtl" ? DirectionStyleSheet.rtl : undefined,
+					style,
+				] }
+			/>
+		)
+
+	},
+)

packages/carbon-react-native/src/components/accordion/_Item.tsx

@@ -0,0 +1,6 @@
+import type {
+	ViewProps,
+} from "react-native"
+
+export interface BoxProps extends ViewProps {
+}

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

@@ -0,0 +1,6 @@
+import type {
+	View,
+} from "react-native"
+
+export interface BoxRef extends View {
+}

packages/carbon-react-native/src/components/box/BoxProps.ts

@@ -0,0 +1,3 @@
+export * from "./Box"
+export type * from "./BoxProps"
+export type * from "./BoxRef"