react-native-varia 0.0.1 → 0.2.1

package/lib/components/layoutTest.tsx

@@ -0,0 +1,74 @@
+import {VStack, HStack} from '../patterns'
+import Text from './Text'
+
+const LayoutTest = () => {
+  return (
+    <VStack
+      // flex={1}
+      style={{
+        flexGrow: 1,
+        // flexShrink: 1,
+        alignSelf: 'stretch',
+        alignItems: 'stretch',
+        backgroundColor: 'red',
+        gap: 10,
+      }}>
+      <VStack
+        style={{
+          // flexGrow: 1,
+          // flexShrink: 1,
+          // alignSelf: 'stretch',
+          backgroundColor: 'pink',
+        }}>
+        <Component />
+        <Component />
+      </VStack>
+      <VStack
+        style={{
+          borderWidth: 5,
+          borderColor: 'yellow',
+          // flexGrow: 1,
+          // flexShrink: 1,
+          // alignSelf: 'stretch',
+          backgroundColor: 'pink',
+        }}>
+        <Component />
+        <Component />
+      </VStack>
+    </VStack>
+  )
+}
+
+const Component = () => {
+  return (
+    <VStack
+      style={{
+        borderWidth: 1,
+        borderColor: 'black',
+        // flexGrow: 1,
+        alignSelf: 'stretch',
+        backgroundColor: 'blue',
+        // flexShrink: 0,
+        // alignSelf: 'flex-start',
+      }}>
+      <Text>hola</Text>
+      <HStack
+        style={{
+          flexShrink: 0,
+          flexGrow: 1,
+          backgroundColor: 'green',
+          minHeight: 50,
+          maxHeight: 50,
+          width: '100%',
+          // opacity: 0.5,
+        }}
+      />
+      <VStack>
+        <Text>hola</Text>
+        <Text>hola</Text>
+      </VStack>
+    </VStack>
+  )
+}
+
+export default LayoutTest

package/lib/patterns/index.tsx

@@ -1,21 +1,57 @@
-import React from 'react';
-import { Children, useLayoutEffect, useRef, useState } from 'react';
-import type { ReactNode } from 'react';
-import { ScrollView, View } from 'react-native';
-import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
-import { StyleSheet, UnistylesRuntime } from 'react-native-unistyles';
+import React from 'react'
+import {Children, useLayoutEffect, useRef, useState} from 'react'
+import type {ReactNode} from 'react'
+import {ScrollView, View} from 'react-native'
+import type {StyleProp, ViewProps, ViewStyle} from 'react-native'
+import {StyleSheet, UnistylesRuntime} from 'react-native-unistyles'
 
-export type RowProps = {
-  children?: ReactNode;
-  style?: StyleProp<ViewStyle>;
-  center?: boolean;
-  vCenter?: boolean;
-  hCenter?: boolean;
-  flex?: number;
-  gap?: number;
-} & ViewProps;
+type SpacingValue = number | string
 
-const Row: React.FC<RowProps> = ({
+export interface SpacingProps {
+  m?: SpacingValue
+  mt?: SpacingValue
+  mb?: SpacingValue
+  ml?: SpacingValue
+  mr?: SpacingValue
+  mx?: SpacingValue
+  my?: SpacingValue
+  p?: SpacingValue
+  pt?: SpacingValue
+  pb?: SpacingValue
+  pl?: SpacingValue
+  pr?: SpacingValue
+  px?: SpacingValue
+  py?: SpacingValue
+
+  alignSelf?: ViewStyle['alignSelf']
+
+  alignItems?: ViewStyle['alignItems']
+  justifyContent?: ViewStyle['justifyContent']
+}
+
+type LayoutProps = {
+  center?: boolean
+  vCenter?: boolean
+  hCenter?: boolean
+  flex?: number
+  gap?: number
+}
+
+export type HStackProps = SpacingProps &
+  LayoutProps &
+  Omit<React.ComponentProps<'View'>, keyof SpacingProps | keyof LayoutProps>
+
+export type HstackProps = {
+  children?: ReactNode
+  style?: StyleProp<ViewStyle>
+  center?: boolean
+  vCenter?: boolean
+  hCenter?: boolean
+  flex?: number
+  gap?: number
+} & ViewProps
+
+const HStack: React.FC<HstackProps> = ({
   children,
   style,
   center,
@@ -27,14 +63,13 @@ const Row: React.FC<RowProps> = ({
 }) => {
   return (
     <View
-      style={[styles.row(center, vCenter, hCenter, gap, flex), style]}
-      {...props}
-    >
+      style={[styles.hStack(center, vCenter, hCenter, gap, flex), style]}
+      {...props}>
       {children}
     </View>
-  );
-};
-const Column: React.FC<RowProps> = ({
+  )
+}
+const VStack: React.FC<HstackProps> = ({
   children,
   style,
   center,
@@ -46,15 +81,14 @@ const Column: React.FC<RowProps> = ({
 }) => {
   return (
     <View
-      style={[styles.column(center, vCenter, hCenter, gap, flex), style]}
-      {...props}
-    >
+      style={[styles.vStack(center, vCenter, hCenter, gap, flex), style]}
+      {...props}>
       {children}
     </View>
-  );
-};
+  )
+}
 
-export const VSpacer = ({ size }: { size?: number }) => {
+export const VSpacer = ({size}: {size?: number}) => {
   return (
     <View
       style={{
@@ -63,9 +97,9 @@ export const VSpacer = ({ size }: { size?: number }) => {
         flex: size ? 0 : 1,
       }}
     />
-  );
-};
-export const HSpacer = ({ size }: { size?: number }) => {
+  )
+}
+export const HSpacer = ({size}: {size?: number}) => {
   return (
     <View
       style={{
@@ -74,50 +108,50 @@ export const HSpacer = ({ size }: { size?: number }) => {
         flex: size ? 0 : 1,
       }}
     />
-  );
-};
+  )
+}
 export const FlexSpacer = () => {
   return (
     <View
-      style={{ flex: 1, width: '100%', borderWidth: 1, borderColor: 'lime' }}
+      style={{flex: 1, width: '100%', borderWidth: 1, borderColor: 'lime'}}
     />
-  );
-};
+  )
+}
 const styles = StyleSheet.create(() => ({
-  row: (center, vCenter, hCenter, gap, flex) => ({
+  hStack: (center, vCenter, hCenter, gap, flex) => ({
     flex,
     gap,
     flexDirection: 'row',
     alignItems: center ? 'center' : vCenter ? 'center' : 'stretch',
     justifyContent: center ? 'center' : hCenter ? 'center' : 'flex-start',
   }),
-  column: (center, vCenter, hCenter, gap, flex) => ({
+  vStack: (center, vCenter, hCenter, gap, flex) => ({
     flex,
     gap,
     flexDirection: 'column',
     alignItems: center ? 'center' : vCenter ? 'center' : 'flex-start',
     justifyContent: center ? 'center' : hCenter ? 'center' : 'flex-start',
   }),
-}));
+}))
 
-export { Row, Column };
+export {HStack, VStack}
 
 export const gap = (size: number) => ({
   gap: size,
-});
+})
 
 type FullHeightLayoutProps = {
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>
   justifyContent?:
     | 'center'
     | 'flex-start'
     | 'flex-end'
     | 'space-between'
     | 'space-around'
-    | 'space-evenly';
-  alignItems?: 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch';
-  children: ReactNode;
-};
+    | 'space-evenly'
+  alignItems?: 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch'
+  children: ReactNode
+}
 
 export const FullHeightLayout = ({
   style,
@@ -130,12 +164,11 @@ export const FullHeightLayout = ({
       style={[
         fullHeightLayoutStyles.fullHeightLayout(justifyContent, alignItems),
         style,
-      ]}
-    >
+      ]}>
       {children}
     </View>
-  );
-};
+  )
+}
 
 /* Layout with "100%" height on portrait and scrollable in landscape
  * use case: as Children of KeyboardAwareScrollView it wraps in a scroll view
@@ -151,10 +184,9 @@ const fullHeightLayoutStyles = StyleSheet.create((_, rt) => ({
     justifyContent,
     alignItems,
   }),
-}));
+}))
 
 export const FLayout = ({
-  // style,
   justifyContent = 'space-between',
   alignItems = 'flex-start',
   children,
@@ -164,16 +196,17 @@ export const FLayout = ({
       contentContainerStyle={{
         flexDirection: 'column',
         alignItems: 'center',
-      }}
-    >
+      }}>
       <View
-        style={fHeightLayoutStyles.fullHeightLayout(justifyContent, alignItems)}
-      >
+        style={fHeightLayoutStyles.fullHeightLayout(
+          justifyContent,
+          alignItems,
+        )}>
         {children}
       </View>
     </ScrollView>
-  );
-};
+  )
+}
 const fHeightLayoutStyles = StyleSheet.create((_, rt) => ({
   fullHeightLayout: (justifyContent, alignItems) => ({
     width: '100%',
@@ -183,7 +216,7 @@ const fHeightLayoutStyles = StyleSheet.create((_, rt) => ({
     justifyContent,
     alignItems,
   }),
-}));
+}))
 
 const GridChild = ({
   parentGap,
@@ -191,14 +224,14 @@ const GridChild = ({
   width,
   children,
 }: {
-  parentGap: number;
-  columns: number;
-  width: number;
-  children: ReactNode;
+  parentGap: number
+  columns: number
+  width: number
+  children: ReactNode
 }) => {
-  if (width === 0) return null;
+  if (width === 0) return null
   const flexBasis =
-    width / columns - ((columns - 1) / columns) * parentGap - 0.1;
+    width / columns - ((columns - 1) / columns) * parentGap - 0.1
   return (
     width > 0 && (
       <View
@@ -207,13 +240,12 @@ const GridChild = ({
           {
             width: flexBasis,
           },
-        ]}
-      >
+        ]}>
         {children}
       </View>
     )
-  );
-};
+  )
+}
 
 const gridChildStyles = StyleSheet.create({
   container: {
@@ -222,17 +254,7 @@ const gridChildStyles = StyleSheet.create({
     flex: 0,
     flexShrink: 1,
   },
-});
-
-// type Sizes = {
-//   xxs: number;
-//   xs: number;
-//   sm: number;
-//   md: number;
-//   lg: number;
-//   xl: number;
-//   xxl: number;
-// };
+})
 
 export const FlexGrid = ({
   gap = 0,
@@ -241,51 +263,47 @@ export const FlexGrid = ({
   style,
   children,
 }: {
-  gap?: number;
-  columns: number | {};
-  flex?: number;
-  style?: any;
-  children: ReactNode;
+  gap?: number
+  columns: number | {}
+  flex?: number
+  style?: any
+  children: ReactNode
 }) => {
-  const viewRef = useRef(null);
-  const gridItems = Children.toArray(children);
-  const [parentWidth, setParentWidth] = useState(0);
+  const viewRef = useRef(null)
+  const gridItems = Children.toArray(children)
+  const [parentWidth, setParentWidth] = useState(0)
 
   useLayoutEffect(() => {
-    // TODO: fix types
     // @ts-ignore
     viewRef.current?.measure((x, y, width, height, pageX, pageY) => {
-      setParentWidth(width);
-    });
-  }, [UnistylesRuntime.breakpoint]);
+      setParentWidth(width)
+    })
+  }, [UnistylesRuntime.breakpoint])
 
-  let cols: any;
+  let cols: any
   if (columns instanceof Object) {
-    // TODO: fix types
     // @ts-ignore
-    cols = getBreakpointColumns(columns, UnistylesRuntime.breakpoint);
-  } else cols = columns;
+    cols = getBreakpointColumns(columns, UnistylesRuntime.breakpoint)
+  } else cols = columns
 
   return (
     <View
       ref={viewRef}
-      style={[flexGridStyles.container(gap, flex), flexGridStyles.sx(style)]}
-    >
+      style={[flexGridStyles.container(gap, flex), flexGridStyles.sx(style)]}>
       {gridItems.map((Item, index) => {
         return (
           <GridChild
             key={index}
             parentGap={gap}
             columns={cols}
-            width={parentWidth}
-          >
+            width={parentWidth}>
             {Item}
           </GridChild>
-        );
+        )
       })}
     </View>
-  );
-};
+  )
+}
 
 const flexGridStyles = StyleSheet.create({
   sx: (sx: any) => ({
@@ -298,101 +316,24 @@ const flexGridStyles = StyleSheet.create({
     flexWrap: 'wrap',
     width: '100%',
   }),
-});
-
-// For components with flex: 1, this prevents them from taking up all the available height.
-// Instead, their height will adjust based on the height of their children.
-// Additionally, it can be used as a Row layout for such components.
-export const Inline = ({
-  children,
-  align = 'center',
-  gap = 0,
-}: {
-  children: ReactNode;
-  align?: 'center' | 'flex-start' | 'flex-end';
-  gap?: number;
-}) => {
-  return (
-    <View
-      style={{
-        flexDirection: 'row',
-        gap,
-        justifyContent: align,
-      }}
-    >
-      {children}
-    </View>
-  );
-};
-
-export const InlineAbsolute = ({
-  children,
-  gap = 0,
-}: {
-  children: ReactNode;
-  gap?: number;
-}) => {
-  return (
-    <View
-      style={{
-        flexDirection: 'row',
-        width: '100%',
-        height: '100%',
-        backgroundColor: 'transparent',
-        position: 'absolute',
-        gap,
-      }}
-    >
-      {children}
-    </View>
-  );
-};
-export const BlockAbsolute = ({
-  children,
-  gap = 0,
-}: {
-  children: ReactNode;
-  gap?: number;
-}) => {
-  return (
-    <View
-      style={{
-        flexDirection: 'column',
-        width: '100%',
-        height: '100%',
-        backgroundColor: 'transparent',
-        position: 'absolute',
-        gap,
-      }}
-    >
-      {children}
-    </View>
-  );
-};
+})
 
 const getBreakpointColumns = (
   columns: Record<string, number>,
-  breakpoint: string
+  breakpoint: string,
 ) => {
-  // Define the order of breakpoints
-  const breakpointOrder = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+  const breakpointOrder = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl']
 
-  // Find the index of the current breakpoint
-  const currentIndex = breakpointOrder.indexOf(breakpoint);
+  const currentIndex = breakpointOrder.indexOf(breakpoint)
 
-  // Traverse backwards to find the nearest available value
   for (let i = currentIndex; i >= 0; i--) {
-    // TODO: fix types
-    // @ts-ignore
     if (columns[breakpointOrder[i]] !== undefined) {
-      // @ts-ignore
-      return columns[breakpointOrder[i]];
+      return columns[breakpointOrder[i]]
     }
   }
 
-  // If no breakpoints match, return a default value (optional)
-  return undefined;
-};
+  return undefined
+}
 
 export const Grid = ({
   cols,
@@ -402,25 +343,25 @@ export const Grid = ({
   columnGap,
   ...props
 }: {
-  cols: number;
-  children: React.ReactNode;
-  gap?: number;
-  rowGap?: number;
-  columnGap?: number;
+  cols: number
+  children: React.ReactNode
+  gap?: number
+  rowGap?: number
+  columnGap?: number
 }) => {
-  const gridItems = React.Children.toArray(children);
+  const gridItems = React.Children.toArray(children)
 
-  const columns = Array.from({ length: cols }, (_, i) =>
-    gridItems.filter((_, index) => index % cols === i)
-  );
+  const columns = Array.from({length: cols}, (_, i) =>
+    gridItems.filter((_, index) => index % cols === i),
+  )
 
   return (
-    <Row gap={gap && gap} {...props}>
+    <HStack gap={gap && gap} {...props}>
       {columns.map((column, index) => (
-        <Column style={{ flex: 1 }} key={index} gap={gap && gap}>
+        <VStack style={{flex: 1}} key={index} gap={gap && gap}>
           {column}
-        </Column>
+        </VStack>
       ))}
-    </Row>
-  );
-};
+    </HStack>
+  )
+}