chore: migrate flex

app/src/components/ConfirmNavigation.tsx

@@ -1,9 +1,9 @@
 import React, { ReactNode } from "react";
 import { Blocker } from "react-router";
 
-import { Dialog, DialogContainer, Flex, Text } from "@arizeai/components";
+import { Dialog, DialogContainer, Text } from "@arizeai/components";
 
-import { Button, View } from "@phoenix/components";
+import { Button, Flex, View } from "@phoenix/components";
 
 function ConfirmNavigationDialogFooter({ blocker }: { blocker: Blocker }) {
   return (

app/src/components/ErrorBoundary.tsx

@@ -1,9 +1,9 @@
 import React, { ReactNode } from "react";
 import { css } from "@emotion/react";
 
-import { EmptyGraphic, Flex } from "@arizeai/components";
+import { EmptyGraphic } from "@arizeai/components";
 
-import { View } from "@phoenix/components";
+import { Flex, View } from "@phoenix/components";
 
 import { ExternalLink } from "./ExternalLink";
 type ErrorBoundaryProps = { children: ReactNode };

app/src/components/ViewSummaryAside.tsx

@@ -1,8 +1,6 @@
 import React, { PropsWithChildren } from "react";
 
-import { Flex } from "@arizeai/components";
-
-import { View, ViewProps } from "@phoenix/components";
+import { Flex, View, ViewProps } from "@phoenix/components";
 
 type ViewSummaryAsideProps = PropsWithChildren<{
   width?: ViewProps["width"];

app/src/components/annotation/AnnotationTooltip.tsx

@@ -1,14 +1,13 @@
 import React, { CSSProperties, ReactNode } from "react";
 
 import {
-  Flex,
   HelpTooltip,
   Text,
   TooltipTrigger,
   TriggerWrap,
 } from "@arizeai/components";
 
-import { View } from "@phoenix/components";
+import { Flex, View } from "@phoenix/components";
 import { floatFormatter } from "@phoenix/utils/numberFormatUtils";
 
 import { Annotation } from "./types";

app/src/components/auth/CreateAPIKeyDialog.tsx

@@ -3,9 +3,9 @@ import { Controller, useForm } from "react-hook-form";
 import { Form } from "react-router-dom";
 import { isValid as dateIsValid, parseISO } from "date-fns";
 
-import { Dialog, Flex, TextArea, TextField } from "@arizeai/components";
+import { Dialog, TextArea, TextField } from "@arizeai/components";
 
-import { Button, View } from "@phoenix/components";
+import { Button, Flex, View } from "@phoenix/components";
 
 export type APIKeyFormParams = {
   name: string;

app/src/components/auth/OneTimeAPIKeyDialog.tsx

@@ -1,16 +1,9 @@
 import React from "react";
 import { css } from "@emotion/react";
 
-import {
-  Alert,
-  Dialog,
-  Flex,
-  Heading,
-  Text,
-  TextField,
-} from "@arizeai/components";
+import { Alert, Dialog, Heading, Text, TextField } from "@arizeai/components";
 
-import { ExternalLink, View } from "@phoenix/components";
+import { ExternalLink, Flex, View } from "@phoenix/components";
 import { CodeWrap, PythonBlockWithCopy } from "@phoenix/components/code";
 import { CopyToClipboardButton } from "@phoenix/components/CopyToClipboardButton";
 

app/src/components/dataset/DatasetPicker.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { graphql, useLazyLoadQuery } from "react-relay";
 
-import { Flex, Item, Picker, PickerProps, Text } from "@arizeai/components";
+import { Item, Picker, PickerProps, Text } from "@arizeai/components";
+
+import { Flex } from "@phoenix/components";
 
 import { DatasetPickerQuery } from "./__generated__/DatasetPickerQuery.graphql";
 

app/src/components/index.tsx

@@ -11,3 +11,4 @@ export * from "./combobox";
 export * from "./button";
 export * from "./icon";
 export * from "./view";
+export * from "./layout";

app/src/components/layout/Flex.tsx

@@ -0,0 +1,105 @@
+import React, { forwardRef, ReactNode, Ref } from "react";
+import { filterDOMProps } from "@react-aria/utils";
+import { css } from "@emotion/react";
+
+import { DOMProps, FlexStyleProps } from "@phoenix/components/types";
+import {
+  passthroughStyle,
+  responsiveDimensionValue,
+  StyleHandlers,
+  useStyleProps,
+} from "@phoenix/components/utils";
+
+export interface FlexProps extends DOMProps, FlexStyleProps {
+  /** Children of the flex container. */
+  children: ReactNode;
+}
+
+const flexCSS = css`
+  display: flex;
+`;
+
+const flexStyleProps: StyleHandlers = {
+  direction: ["flexDirection", passthroughStyle],
+  wrap: ["flexWrap", flexWrapValue],
+  justifyContent: ["justifyContent", flexAlignValue],
+  alignItems: ["alignItems", flexAlignValue],
+  alignContent: ["alignContent", flexAlignValue],
+};
+
+function Flex(props: FlexProps, ref: Ref<HTMLDivElement>) {
+  const { children, ...otherProps } = props;
+
+  const matchedBreakpoints = ["base"];
+  const { styleProps } = useStyleProps(otherProps);
+  const { styleProps: flexStyle } = useStyleProps(otherProps, flexStyleProps);
+
+  // If no gaps, or native support exists, then we only need to render a single div.
+  const style = {
+    ...styleProps.style,
+    ...flexStyle.style,
+  };
+
+  if (props.gap != null) {
+    style.gap = responsiveDimensionValue(props.gap, matchedBreakpoints);
+  }
+
+  if (props.columnGap != null) {
+    style.columnGap = responsiveDimensionValue(
+      props.columnGap,
+      matchedBreakpoints
+    );
+  }
+
+  if (props.rowGap != null) {
+    style.rowGap = responsiveDimensionValue(props.rowGap, matchedBreakpoints);
+  }
+
+  return (
+    <div
+      css={flexCSS}
+      {...filterDOMProps(otherProps)}
+      className="flex"
+      style={style}
+      ref={ref}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'
+ * in flex containers for browser compatibility.
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function flexAlignValue(value: any) {
+  if (value === "start") {
+    return "flex-start";
+  }
+
+  if (value === "end") {
+    return "flex-end";
+  }
+
+  return value;
+}
+
+/**
+ * Takes a boolean and translates it to flex wrap or nowrap.
+ */
+function flexWrapValue(value: boolean | "wrap" | "nowrap") {
+  if (typeof value === "boolean") {
+    return value ? "wrap" : "nowrap";
+  }
+
+  return value;
+}
+
+/**
+ * A layout container using flexbox. Provides dimension values, and supports the gap
+ * property to define consistent spacing between items.
+ */
+const _Flex = forwardRef(Flex);
+export { _Flex as Flex };

app/src/components/layout/index.tsx

@@ -0,0 +1 @@
+export * from "./Flex";

app/src/components/pointcloud/ClusterItem.tsx

@@ -1,8 +1,9 @@
 import React, { useMemo } from "react";
 import { css } from "@emotion/react";
 
-import { Flex, Heading, Text } from "@arizeai/components";
+import { Heading, Text } from "@arizeai/components";
 
+import { Flex } from "@phoenix/components";
 import { InferencesRole } from "@phoenix/types";
 import { numberFormatter } from "@phoenix/utils/numberFormatUtils";
 

app/src/components/settings/UserForm.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import { Controller, useForm } from "react-hook-form";
 import { css } from "@emotion/react";
 
-import { Flex, Form, TextField } from "@arizeai/components";
+import { Form, TextField } from "@arizeai/components";
 
-import { Button, View } from "@phoenix/components";
+import { Button, Flex, View } from "@phoenix/components";
 import { UserRole } from "@phoenix/constants";
 
 import { RolePicker } from "./RolePicker";

app/src/components/trace/AnnotationActionMenu.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import { ActionMenu, Flex, Item, Text } from "@arizeai/components";
+import { ActionMenu, Item, Text } from "@arizeai/components";
 
-import { Icon, Icons } from "@phoenix/components";
+import { Flex, Icon, Icons } from "@phoenix/components";
 
 type AnnotationActionMenuProps = {
   onDelete: () => void;

app/src/components/trace/SpanAnnotationForm.tsx

@@ -2,9 +2,9 @@ import React, { useCallback } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { css } from "@emotion/react";
 
-import { Flex, Form, TextArea, TextField } from "@arizeai/components";
+import { Form, TextArea, TextField } from "@arizeai/components";
 
-import { Button, View } from "@phoenix/components";
+import { Button, Flex, View } from "@phoenix/components";
 export type AnnotationFormData = {
   name: string;
   score?: number | null;

app/src/components/trace/TraceTree.tsx

@@ -8,13 +8,12 @@ import { css } from "@emotion/react";
 
 import {
   classNames,
-  Flex,
   Tooltip,
   TooltipTrigger,
   TriggerWrap,
 } from "@arizeai/components";
 
-import { Button, Icon, Icons, View } from "@phoenix/components";
+import { Button, Flex, Icon, Icons, View } from "@phoenix/components";
 import { TokenCount } from "@phoenix/components/trace/TokenCount";
 import { usePreferencesContext } from "@phoenix/contexts/PreferencesContext";
 

app/src/pages/auth/ResetPasswordWithTokenPage.tsx

@@ -2,9 +2,7 @@ import React from "react";
 import { useNavigate } from "react-router";
 import { useSearchParams } from "react-router-dom";
 
-import { Flex } from "@arizeai/components";
-
-import { Link, View } from "@phoenix/components";
+import { Flex, Link, View } from "@phoenix/components";
 
 import { AuthLayout } from "./AuthLayout";
 import { PhoenixLogo } from "./PhoenixLogo";

app/src/pages/dataset/DatasetCodeDropdown.tsx

@@ -5,14 +5,19 @@ import {
   DropdownButton,
   DropdownMenu,
   DropdownTrigger,
-  Flex,
   Form,
   TabPane,
   Tabs,
   TextField,
 } from "@arizeai/components";
 
-import { CopyToClipboardButton, Icon, Icons, View } from "@phoenix/components";
+import {
+  CopyToClipboardButton,
+  Flex,
+  Icon,
+  Icons,
+  View,
+} from "@phoenix/components";
 import { PythonBlockWithCopy } from "@phoenix/components/code/PythonBlockWithCopy";
 import { BASE_URL } from "@phoenix/config";
 import { useDatasetContext } from "@phoenix/contexts/DatasetContext";

app/src/pages/datasets/DatasetsPage.tsx

@@ -6,12 +6,11 @@ import {
   ActionMenu,
   Dialog,
   DialogContainer,
-  Flex,
   Heading,
   Item,
 } from "@arizeai/components";
 
-import { Icon, Icons, Loading, View } from "@phoenix/components";
+import { Flex, Icon, Icons, Loading, View } from "@phoenix/components";
 import { CreateDatasetForm } from "@phoenix/components/dataset/CreateDatasetForm";
 import { useNotifyError, useNotifySuccess } from "@phoenix/contexts";
 

app/src/pages/dimension/DimensionPage.tsx

@@ -3,9 +3,9 @@ import { graphql, useLazyLoadQuery } from "react-relay";
 import { useLoaderData, useNavigate, useParams } from "react-router";
 import { css } from "@emotion/react";
 
-import { Dialog, DialogContainer, Flex } from "@arizeai/components";
+import { Dialog, DialogContainer } from "@arizeai/components";
 
-import { Loading, View, ViewSummaryAside } from "@phoenix/components";
+import { Loading, View, ViewSummaryAside, Flex } from "@phoenix/components";
 import { useInferences, useTimeRange } from "@phoenix/contexts";
 import { TimeSliceContextProvider } from "@phoenix/contexts/TimeSliceContext";
 

app/src/pages/embedding/EventDetails.tsx

@@ -11,12 +11,11 @@ import {
   Accordion,
   AccordionItem,
   Counter,
-  Flex,
   Heading,
   Label,
 } from "@arizeai/components";
 
-import { Icon, Icons, View } from "@phoenix/components";
+import { Flex, Icon, Icons, View } from "@phoenix/components";
 import { Empty } from "@phoenix/components/Empty";
 import { tableCSS } from "@phoenix/components/table/styles";
 import { numberFormatter } from "@phoenix/utils/numberFormatUtils";

app/src/pages/example/EditExampleDialog.tsx

@@ -3,16 +3,9 @@ import { Controller, useForm } from "react-hook-form";
 import { graphql, useMutation } from "react-relay";
 import { css } from "@emotion/react";
 
-import {
-  Alert,
-  Card,
-  CardProps,
-  Dialog,
-  Flex,
-  TextArea,
-} from "@arizeai/components";
+import { Alert, Card, CardProps, Dialog, TextArea } from "@arizeai/components";
 
-import { Button, Icon, Icons, View } from "@phoenix/components";
+import { Button, Flex, Icon, Icons, View } from "@phoenix/components";
 import { JSONEditor } from "@phoenix/components/code";
 import { isJSONObjectString } from "@phoenix/utils/jsonUtils";
 

app/src/pages/example/ExampleDetailsDialog.tsx

@@ -9,11 +9,10 @@ import {
   CardProps,
   Dialog,
   DialogContainer,
-  Flex,
   Heading,
 } from "@arizeai/components";
 
-import { Button, CopyToClipboardButton, View } from "@phoenix/components";
+import { Button, CopyToClipboardButton, Flex, View } from "@phoenix/components";
 import { JSONBlock } from "@phoenix/components/code";
 import { resizeHandleCSS } from "@phoenix/components/resize";
 import { useNotifySuccess } from "@phoenix/contexts";

app/src/pages/experiment/ExperimentCompareTable.tsx

@@ -24,7 +24,6 @@ import {
   CardProps,
   Dialog,
   DialogContainer,
-  Flex,
   Heading,
   Item,
   Text,
@@ -35,6 +34,7 @@ import {
 import {
   Button,
   CopyToClipboardButton,
+  Flex,
   Icon,
   Icons,
   View,