feat: add new splitBoxModelStyle utility

packages/render-html/src/helpers/splitBoxModelStyle.ts

@@ -0,0 +1,62 @@
+import { NativeStyleProp } from '../shared-types';
+
+/**
+ * A utility to separate box model styles and other styles. Useful when one wants
+ * to wrap a text element in a view to benefit from padding vertical,
+ * borders... etc.
+ *
+ * @param styles - The native styles to split.
+ */
+export default function splitBoxModelStyle({
+  backgroundColor,
+  borderBottomColor,
+  borderBottomLeftRadius,
+  borderBottomRightRadius,
+  borderBottomWidth,
+  borderLeftColor,
+  borderLeftWidth,
+  borderRightColor,
+  borderRightWidth,
+  borderStyle,
+  borderTopColor,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderTopWidth,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  marginTop,
+  ...rest
+}: NativeStyleProp<any>) {
+  return {
+    boxModel: {
+      backgroundColor,
+      borderBottomColor,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      borderBottomWidth,
+      borderLeftColor,
+      borderLeftWidth,
+      borderRightColor,
+      borderRightWidth,
+      borderStyle,
+      borderTopColor,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderTopWidth,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      paddingTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      marginTop
+    },
+    rest
+  };
+}

packages/render-html/src/index.ts

@@ -20,3 +20,4 @@ export { default as useTRenderEngine } from './hooks/useTRenderEngine';
 export { default as useTTree } from './hooks/useTTree';
 export { default as defaultRenderers } from './render/defaultRenderers';
 export { default as extendRenderer } from './render/extendRenderer';
+export { default as splitBoxModelStyle } from './helpers/splitBoxModelStyle';