chore: migrate flex (#5835)

* chore: migrate flex

* chore: migrate flex component

* prettier

app/.eslintrc.js

@@ -57,22 +57,27 @@ module.exports = {
       {
         name: "Button",
         module: "@arizeai/components",
-        use: "@phoenix/components/button",
+        use: "@phoenix/components",
       },
       {
         name: "Icon",
         module: "@arizeai/components",
-        use: "@phoenix/components/icon",
+        use: "@phoenix/components",
       },
       {
         name: "Icons",
         module: "@arizeai/components",
-        use: "@phoenix/components/icon",
+        use: "@phoenix/components",
       },
       {
         name: "View",
         module: "@arizeai/components",
-        use: "@phoenix/components/view",
+        use: "@phoenix/components",
+      },
+      {
+        name: "Flex",
+        module: "@arizeai/components",
+        use: "@phoenix/components",
       },
     ],
     "no-duplicate-imports": "error",

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/AnnotationLabel.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { css } from "@emotion/react";
 
-import { Flex, Text } from "@arizeai/components";
+import { Text } from "@arizeai/components";
 
-import { Icon, Icons } from "@phoenix/components";
+import { Flex, Icon, Icons } from "@phoenix/components";
 import { assertUnreachable } from "@phoenix/typeUtils";
 import { formatFloat } from "@phoenix/utils/numberFormatUtils";
 

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/DeleteAPIKeyButton.tsx

@@ -1,8 +1,8 @@
 import React, { ReactNode, useState } from "react";
 
-import { Dialog, DialogContainer, Flex, Text } from "@arizeai/components";
+import { Dialog, DialogContainer, Text } from "@arizeai/components";
 
-import { Button, Icon, Icons, View } from "@phoenix/components";
+import { Button, Flex, Icon, Icons, View } from "@phoenix/components";
 
 export function DeleteAPIKeyButton({
   handleDelete,

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/DatasetForm.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { Controller, useForm } from "react-hook-form";
 
-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";
 import { CodeEditorFieldWrapper, JSONEditor } from "@phoenix/components/code";
 import { isJSONObjectString } from "@phoenix/utils/jsonUtils";
 

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/experiment/ExperimentActionMenu.tsx

@@ -7,12 +7,11 @@ import {
   ActionMenuProps,
   Dialog,
   DialogContainer,
-  Flex,
   Item,
   Text,
 } from "@arizeai/components";
 
-import { Icon, Icons } from "@phoenix/components";
+import { Flex, Icon, Icons } from "@phoenix/components";
 import { JSONBlock } from "@phoenix/components/code";
 import { useNotifySuccess } from "@phoenix/contexts";
 import { assertUnreachable } from "@phoenix/typeUtils";

app/src/components/generative/ToolChoiceSelector.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 
-import { Flex, Item, Label, Picker } from "@arizeai/components";
+import { Item, Label, Picker } from "@arizeai/components";
+
+import { Flex } from "@phoenix/components";
 
 type DefaultToolChoice = Extract<ToolChoice, "auto" | "required" | "none">;
 

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/LatencyText.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from "react";
 
-import { Flex, Text, TextProps } from "@arizeai/components";
+import { Text, TextProps } from "@arizeai/components";
 
-import { Icon, Icons } from "@phoenix/components";
+import { Flex, Icon, Icons } from "@phoenix/components";
 import { formatFloat } from "@phoenix/utils/numberFormatUtils";
 export function LatencyText({
   latencyMs,

app/src/components/trace/SpanAnnotationActionMenu.tsx

@@ -6,10 +6,10 @@ import React, {
 } from "react";
 import { graphql, useMutation } from "react-relay";
 
-import { Dialog, DialogContainer, Flex, Text } from "@arizeai/components";
+import { Dialog, DialogContainer, Text } from "@arizeai/components";
 import { NoticeConfig } from "@arizeai/components/dist/notification/types";
 
-import { Button, View } from "@phoenix/components";
+import { Button, Flex, View } from "@phoenix/components";
 
 import { SpanAnnotationActionMenuDeleteMutation } from "./__generated__/SpanAnnotationActionMenuDeleteMutation.graphql";
 import { AnnotationActionMenu } from "./AnnotationActionMenu";

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/TokenCount.tsx

@@ -2,15 +2,14 @@ import React from "react";
 import { css } from "@emotion/react";
 
 import {
-  Flex,
   Text,
   TextProps,
   Tooltip,
   TooltipTrigger,
   TriggerWrap,
 } from "@arizeai/components";
 
-import { Icon, Icons } from "@phoenix/components";
+import { Flex, Icon, Icons } from "@phoenix/components";
 
 type TokenCountProps = {
   /**

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";