Add Layout Components (47) (#737)

* Deprecate old layout components

* Added Center, Circle, and Square components

* Added AspectRatio, HStack, VStack, ZStack components

* Fixed aspect ratio component

* Address feedback

Author: YoussefHenna

example/src/LayoutExample.js

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { Text } from "react-native";
+import {
+  AspectRatio,
+  HStack,
+  VStack,
+  ZStack,
+  Center,
+  Circle,
+  Square,
+} from "@draftbit/ui";
+import Section, { Container } from "./Section";
+
+const LayoutExample = () => {
+  return (
+    <Container style={{}}>
+      <Section title="Center" style={{}}>
+        <Center
+          style={{
+            width: 200,
+            height: 50,
+            borderColor: "red",
+            borderWidth: 1,
+          }}
+        >
+          <Text>Centered Text</Text>
+        </Center>
+      </Section>
+      <Section title="Circle" style={{}}>
+        <Circle
+          style={{
+            width: 100,
+            borderColor: "red",
+            borderWidth: 1,
+          }}
+        />
+      </Section>
+      <Section title="Square" style={{}}>
+        <Square
+          style={{
+            width: 100,
+            borderColor: "red",
+            borderWidth: 1,
+          }}
+        />
+      </Section>
+      <Section title="Aspect Ratio" style={{}}>
+        <AspectRatio
+          style={{
+            width: 200,
+            borderColor: "red",
+            borderWidth: 1,
+          }}
+          aspectRatio={16 / 9}
+        />
+      </Section>
+      <Section title="HStack" style={{}}>
+        <HStack>
+          <Text>HStack 1</Text>
+          <Text>HStack 2</Text>
+        </HStack>
+      </Section>
+      <Section title="VStack" style={{}}>
+        <VStack>
+          <Text>VStack 1</Text>
+          <Text>VStack 2</Text>
+        </VStack>
+      </Section>
+      <Section title="ZStack" style={{}}>
+        <ZStack>
+          <Text>ZStack 1</Text>
+          <Text>ZStack 2</Text>
+        </ZStack>
+      </Section>
+    </Container>
+  );
+};
+
+export default LayoutExample;

example/src/LayoutExample.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { View, ViewProps } from "react-native";
+
+interface AspectRatioProps extends ViewProps {
+  aspectRatio?: number;
+}
+
+const AspectRatio: React.FC<AspectRatioProps> = ({
+  aspectRatio = 1,
+  style,
+  ...rest
+}) => {
+  return <View {...rest} style={[{ aspectRatio }, style]} />;
+};
+
+export default AspectRatio;

packages/core/src/components/Layout/AspectRatio.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { View, ViewProps, StyleSheet } from "react-native";
+
+const Center: React.FC<ViewProps> = ({ style, ...rest }) => {
+  return <View {...rest} style={[styles.center, style]} />;
+};
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
+
+export default Center;

packages/core/src/components/Layout/Center.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { ViewProps, StyleSheet } from "react-native";
+import Square from "./Square";
+
+interface CircleProps extends ViewProps {
+  size?: number;
+}
+
+const Circle: React.FC<CircleProps> = ({ size, style, ...rest }) => {
+  return <Square {...rest} size={size} style={[style, styles.circle]} />;
+};
+
+const styles = StyleSheet.create({
+  circle: {
+    borderRadius: 1000, // Border radius maxes out as a circle, use an overly large number to ensure circle in all cases
+  },
+});
+
+export default Circle;

packages/core/src/components/Layout/Circle.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { View, ViewProps, StyleSheet } from "react-native";
+
+const HStack: React.FC<ViewProps> = ({ style, ...rest }) => {
+  return <View {...rest} style={[styles.hStack, style]} />;
+};
+
+const styles = StyleSheet.create({
+  hStack: {
+    flexDirection: "row",
+  },
+});
+
+export default HStack;

packages/core/src/components/Layout/HStack.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { ViewProps } from "react-native";
+import Center from "./Center";
+
+interface SquareProps extends ViewProps {
+  size?: number;
+}
+
+const Square: React.FC<SquareProps> = ({ size, style, onLayout, ...rest }) => {
+  const [calculatedSize, setCalculatedSize] = React.useState(0);
+
+  return (
+    <Center
+      onLayout={(e) => {
+        const layout = e.nativeEvent.layout;
+        setCalculatedSize(Math.max(layout.width, layout.height));
+        onLayout?.(e);
+      }}
+      {...rest}
+      style={[
+        style,
+        size != undefined ? { width: size, height: size } : {},
+        calculatedSize > 0
+          ? {
+              width: calculatedSize,
+              height: calculatedSize,
+            }
+          : {},
+      ]}
+    />
+  );
+};
+
+export default Square;

packages/core/src/components/Layout/Square.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { View, ViewProps, StyleSheet } from "react-native";
+
+const VStack: React.FC<ViewProps> = ({ style, ...rest }) => {
+  return <View {...rest} style={[styles.vStack, style]} />;
+};
+
+const styles = StyleSheet.create({
+  vStack: {
+    flexDirection: "column",
+  },
+});
+
+export default VStack;

packages/core/src/components/Layout/VStack.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { View, ViewProps } from "react-native";
+
+interface ZStackProps extends ViewProps {
+  reversed?: boolean;
+}
+
+const ZStack: React.FC<ZStackProps> = ({ reversed, children, ...rest }) => {
+  const absoluteChildren = React.useMemo(() => {
+    let childrenArray = React.Children.toArray(
+      children
+    ) as React.ReactElement[];
+
+    if (reversed) {
+      childrenArray = childrenArray.reverse();
+    }
+
+    return childrenArray.map((child, index) => {
+      const props = child.props || {};
+      return React.cloneElement(
+        child,
+        {
+          ...props,
+          style: { position: "absolute", zIndex: index + 1, ...props.style },
+        },
+        props.children
+      );
+    });
+  }, [children, reversed]);
+
+  return <View {...rest}>{absoluteChildren}</View>;
+};
+
+export default ZStack;

packages/core/src/components/Layout/ZStack.tsx

@@ -0,0 +1,7 @@
+export { default as AspectRatio } from "./AspectRatio";
+export { default as Circle } from "./Circle";
+export { default as Center } from "./Center";
+export { default as HStack } from "./HStack";
+export { default as VStack } from "./VStack";
+export { default as ZStack } from "./ZStack";
+export { default as Square } from "./Square";