feat: useStyled for web

Author: marklawlor

src/components/Text/Text.tsx

@@ -1,6 +1,11 @@
 import { Text as RNText, type TextProps } from 'react-native';
 import { copyComponentProperties } from '../../utils';
+import { useStyled } from '../../web/useStyled';
 
-export const Text = copyComponentProperties(RNText, (props: TextProps) => {
-  return <RNText {...props} />;
-});
+export const Text = copyComponentProperties(
+  RNText,
+  ({ className, style, ...props }: TextProps) => {
+    const nextStyle = useStyled(className, style);
+    return <RNText {...props} style={nextStyle} />;
+  }
+);

src/components/View.native.tsx src/components/View/View.native.tsxsrc/components/View.native.tsx renamed to src/components/View/View.native.tsx

@@ -1,9 +1,9 @@
 import { View as RNView, type ViewProps } from 'react-native';
-import { copyComponentProperties, getDeepKeys } from '../utils';
-import { useStyled } from '../native/useStyled';
+import { copyComponentProperties, getDeepKeys } from '../../utils';
+import { useStyled } from '../../native/useStyled';
 import { useId } from 'react';
-import { useRef } from '../native/useRef';
-import { StyleRegistry } from '../specs/StyleRegistry';
+import { useRef } from '../../native/useRef';
+import { StyleRegistry } from '../../specs/StyleRegistry';
 
 export const View = copyComponentProperties(RNView, (props: ViewProps) => {
   const componentId = useId();

src/components/View/View.tsx

@@ -0,0 +1,11 @@
+import { View as RNView, type ViewProps } from 'react-native';
+import { copyComponentProperties } from '../../utils';
+import { useStyled } from '../../web/useStyled';
+
+export const View = copyComponentProperties(
+  RNView,
+  ({ className, style, ...props }: ViewProps) => {
+    const nextStyle = useStyled(className, style);
+    return <RNView {...props} style={nextStyle} />;
+  }
+);

src/components/View/index.ts

@@ -1,4 +1,4 @@
-import { View } from '../View.native';
-export * from '../View.native';
+import { View } from './View';
+export * from './View';
 
 export default View;

src/web/useStyled.ts

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+
+export function useStyled(className?: string, style?: any): any {
+  return useMemo(() => {
+    if (className && style) {
+      return [{ $$css: true, className }, style];
+    } else if (className) {
+      return { $$css: true, className };
+    } else if (style) {
+      return style;
+    } else {
+      return undefined;
+    }
+  }, [className, style]);
+}