refactor: Replace all Stack component usages with SpaceBetween (#6039)

packages/component-library/package.json

@@ -40,7 +40,6 @@
     "./popover": "./src/Popover.tsx",
     "./select": "./src/Select.tsx",
     "./space-between": "./src/SpaceBetween.tsx",
-    "./stack": "./src/Stack.tsx",
     "./styles": "./src/styles.ts",
     "./text": "./src/Text.tsx",
     "./text-one-line": "./src/TextOneLine.tsx",

packages/component-library/src/SpaceBetween.tsx

@@ -6,6 +6,7 @@ import { View } from './View';
 type SpaceBetweenProps = {
   direction?: 'horizontal' | 'vertical';
   gap?: number;
+  wrap?: boolean;
   style?: CSSProperties;
   children: ReactNode;
 };
@@ -13,18 +14,21 @@ type SpaceBetweenProps = {
 export const SpaceBetween = ({
   direction = 'horizontal',
   gap = 15,
+  wrap = true,
   style,
   children,
+  ...props
 }: SpaceBetweenProps) => {
   return (
     <View
       style={{
-        flexWrap: 'wrap',
+        flexWrap: wrap ? 'wrap' : 'nowrap',
         flexDirection: direction === 'horizontal' ? 'row' : 'column',
         alignItems: 'center',
         gap,
         ...style,
       }}
+      {...props}
     >
       {children}
     </View>

packages/component-library/src/Stack.tsx

@@ -1,105 +0,0 @@
-// @ts-strict-ignore
-import React, {
-  Children,
-  type ComponentProps,
-  Fragment,
-  cloneElement,
-  forwardRef,
-  type ReactNode,
-  type CSSProperties,
-} from 'react';
-
-import { Text } from './Text';
-import { View } from './View';
-
-function getChildren(key, children) {
-  return Children.toArray(children).reduce(
-    (list, child) => {
-      if (child) {
-        if (
-          typeof child === 'object' &&
-          'type' in child &&
-          child.type === Fragment
-        ) {
-          return list.concat(
-            getChildren(
-              child.key,
-              typeof child.props === 'object' && 'children' in child.props
-                ? child.props.children
-                : [],
-            ),
-          );
-        }
-        list.push({ key: key + child['key'], child });
-        return list;
-      }
-      return list;
-    },
-    [] as Array<{ key: string; child: ReactNode }>,
-  );
-}
-
-type StackProps = ComponentProps<typeof View> & {
-  direction?: CSSProperties['flexDirection'];
-  align?: string;
-  justify?: string;
-  spacing?: number;
-  debug?: boolean;
-};
-export const Stack = forwardRef<HTMLDivElement, StackProps>(
-  (
-    {
-      direction = 'column',
-      align,
-      justify,
-      spacing = 3,
-      children,
-      debug,
-      style,
-      ...props
-    },
-    ref,
-  ) => {
-    const isReversed = direction.endsWith('reverse');
-    const isHorizontal = direction.startsWith('row');
-    const validChildren = getChildren('', children);
-
-    return (
-      <View
-        style={{
-          flexDirection: direction,
-          alignItems: align,
-          justifyContent: justify,
-          ...style,
-        }}
-        innerRef={ref}
-        {...props}
-      >
-        {validChildren.map(({ key, child }, index) => {
-          const isLastChild = validChildren.length === index + 1;
-
-          let marginProp;
-          if (isHorizontal) {
-            marginProp = isReversed ? 'marginLeft' : 'marginRight';
-          } else {
-            marginProp = isReversed ? 'marginTop' : 'marginBottom';
-          }
-
-          return cloneElement(
-            typeof child === 'string' ? <Text>{child}</Text> : child,
-            {
-              key,
-              style: {
-                ...(debug && { borderWidth: 1, borderColor: 'red' }),
-                ...(isLastChild ? null : { [marginProp]: spacing * 5 }),
-                ...(child.props ? child.props.style : null),
-              },
-            },
-          );
-        })}
-      </View>
-    );
-  },
-);
-
-Stack.displayName = 'Stack';