🪟🧹 Introduce flex component (#20944)

airbyte-webapp/src/components/CreateConnection/CreateConnectionNameField.tsx

@@ -2,6 +2,7 @@ import { Field, FieldProps } from "formik";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { ControlLabels } from "components/LabeledControl";
+import { FlexContainer } from "components/ui/Flex";
 import { Heading } from "components/ui/Heading";
 import { Input } from "components/ui/Input";
 
@@ -16,7 +17,7 @@ export const CreateConnectionNameField = () => {
     <Section>
       <Field name="name">
         {({ field, meta }: FieldProps<string>) => (
-          <div className={styles.flexRow}>
+          <FlexContainer alignItems="flex-start">
             <div className={styles.leftFieldCol}>
               <ControlLabels
                 className={styles.connectionLabel}
@@ -42,7 +43,7 @@ export const CreateConnectionNameField = () => {
                 })}
               />
             </div>
-          </div>
+          </FlexContainer>
         )}
       </Field>
     </Section>

airbyte-webapp/src/components/CreateConnection/DataResidency.module.scss

@@ -1,13 +1,5 @@
 @use "scss/variables";
 
-.flexRow {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: variables.$spacing-md;
-}
-
 .leftFieldCol {
   flex: 1;
   max-width: 640px;

airbyte-webapp/src/components/CreateConnection/DataResidency.tsx

@@ -4,6 +4,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import { DataGeographyDropdown } from "components/common/DataGeographyDropdown";
 import { ControlLabels } from "components/LabeledControl";
+import { FlexContainer } from "components/ui/Flex";
 
 import { Geography } from "core/request/AirbyteClient";
 import { useAvailableGeographies } from "packages/cloud/services/geographies/GeographiesService";
@@ -25,7 +26,7 @@ export const DataResidency: React.FC<DataResidencyProps> = ({ name = "geography"
     <Section title={formatMessage({ id: "connection.geographyTitle" })}>
       <Field name={name}>
         {({ field, form }: FieldProps<Geography>) => (
-          <div className={styles.flexRow}>
+          <FlexContainer alignItems="flex-start">
             <div className={styles.leftFieldCol}>
               <ControlLabels
                 nextLine
@@ -57,7 +58,7 @@ export const DataResidency: React.FC<DataResidencyProps> = ({ name = "geography"
                 onChange={(geography) => setFieldValue(name, geography)}
               />
             </div>
-          </div>
+          </FlexContainer>
         )}
       </Field>
     </Section>

airbyte-webapp/src/components/ui/Flex/Flex.stories.tsx

@@ -0,0 +1,39 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { FlexContainer } from "./FlexContainer";
+import { FlexItem } from "./FlexItem";
+
+export default {
+  title: "Ui/Flex",
+  component: FlexContainer,
+} as ComponentMeta<typeof FlexContainer>;
+
+const Template: ComponentStory<typeof FlexContainer> = (args) => <FlexContainer {...args} />;
+
+const Item = ({ label, grow }: { label: string; grow?: boolean }) => (
+  <FlexItem grow={grow} style={{ backgroundColor: "#dddddd", borderRadius: 5, padding: 20 }}>{`<FlexItem${
+    grow ? " grow" : ""
+  }>${label}</FlexItem>`}</FlexItem>
+);
+
+export const NoGrow = Template.bind({});
+NoGrow.args = {
+  children: (
+    <>
+      <Item label="first" />
+      <Item label="second with a lot of content" />
+      <Item label="third" />
+      <Item label="forth" />
+    </>
+  ),
+};
+
+export const Grow = Template.bind({});
+Grow.args = {
+  children: (
+    <>
+      <Item label="first" grow />
+      <Item label="second" />
+    </>
+  ),
+};

airbyte-webapp/src/components/ui/Flex/FlexContainer.module.scss

@@ -0,0 +1,89 @@
+@use "scss/variables";
+
+.container {
+  display: flex;
+}
+
+.directionRow {
+  flex-direction: row;
+}
+
+.directionColumn {
+  flex-direction: column;
+}
+
+.directionColumnReverse {
+  flex-direction: column-reverse;
+}
+
+.directionRowReverse {
+  flex-direction: row-reverse;
+}
+
+.gapXs {
+  gap: variables.$spacing-xs;
+}
+
+.gapSm {
+  gap: variables.$spacing-sm;
+}
+
+.gapMd {
+  gap: variables.$spacing-md;
+}
+
+.gapLg {
+  gap: variables.$spacing-lg;
+}
+
+.gapXl {
+  gap: variables.$spacing-xl;
+}
+
+.gap2xl {
+  gap: variables.$spacing-2xl;
+}
+
+.alignItemsStart {
+  align-items: flex-start;
+}
+
+.alignItemsEnd {
+  align-items: flex-end;
+}
+
+.alignItemsCenter {
+  align-items: center;
+}
+
+.alignItemsBaseline {
+  align-items: baseline;
+}
+
+.alignItemsStretch {
+  align-items: stretch;
+}
+
+.justifyContentStart {
+  justify-content: flex-start;
+}
+
+.justifyContentEnd {
+  justify-content: flex-end;
+}
+
+.justifyContentCenter {
+  justify-content: center;
+}
+
+.justifyContentBetween {
+  justify-content: space-between;
+}
+
+.justifyContentAround {
+  justify-content: space-around;
+}
+
+.justifyContentEvenly {
+  justify-content: space-evenly;
+}

airbyte-webapp/src/components/ui/Flex/FlexContainer.tsx

@@ -0,0 +1,72 @@
+import classNames from "classnames";
+import React, { HTMLAttributes } from "react";
+
+import styles from "./FlexContainer.module.scss";
+
+interface FlexContainerProps {
+  className?: string;
+  /**
+   * The flex-direction css property
+   */
+  direction?: "row" | "column" | "row-reverse" | "column-reverse";
+  /**
+   * gap between the flex items - defaults to `md` if not provided. None means no gap is applied, the others map to the respective scss spacing variable.
+   */
+  gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+  /**
+   * The align-items css property
+   */
+  alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
+  /**
+   * The justify-content css property
+   */
+  justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
+}
+
+/**
+ * Renders a div element which layouts its children as flex items as specified by the props.
+ *  Children of a `FlexContainer` can but don't have to be `FlexItem` elements.
+ */
+export const FlexContainer: React.FC<React.PropsWithChildren<FlexContainerProps & HTMLAttributes<HTMLDivElement>>> = ({
+  className,
+  direction = "row",
+  gap = "md",
+  alignItems = "stretch",
+  justifyContent = "flex-start",
+  children,
+  ...otherProps
+}) => {
+  const fullClassName = classNames(
+    {
+      [styles.directionRow]: direction === "row",
+      [styles.directionColumn]: direction === "column",
+      [styles.directionRowReverse]: direction === "row-reverse",
+      [styles.directionColumnReverse]: direction === "column-reverse",
+      [styles.gapXs]: gap === "xs",
+      [styles.gapSm]: gap === "sm",
+      [styles.gapMd]: gap === "md",
+      [styles.gapLg]: gap === "lg",
+      [styles.gapXl]: gap === "xl",
+      [styles.gap2xl]: gap === "2xl",
+      [styles.alignItemsStart]: alignItems === "flex-start",
+      [styles.alignItemsEnd]: alignItems === "flex-end",
+      [styles.alignItemsCenter]: alignItems === "center",
+      [styles.alignItemsBaseline]: alignItems === "baseline",
+      [styles.alignItemsStretch]: alignItems === "stretch",
+      [styles.justifyContentStart]: justifyContent === "flex-start",
+      [styles.justifyContentEnd]: justifyContent === "flex-end",
+      [styles.justifyContentCenter]: justifyContent === "center",
+      [styles.justifyContentBetween]: justifyContent === "space-between",
+      [styles.justifyContentAround]: justifyContent === "space-around",
+      [styles.justifyContentEvenly]: justifyContent === "space-evenly",
+    },
+    styles.container,
+    className
+  );
+
+  return (
+    <div className={fullClassName} {...otherProps}>
+      {children}
+    </div>
+  );
+};

airbyte-webapp/src/components/ui/Flex/FlexItem.module.scss

@@ -0,0 +1,25 @@
+@use "scss/variables";
+
+.alignSelfStart {
+  align-items: flex-end;
+}
+
+.alignSelfEnd {
+  align-items: flex-end;
+}
+
+.alignSelfCenter {
+  align-items: center;
+}
+
+.alignSelfBaseline {
+  align-items: baseline;
+}
+
+.alignSelfStretch {
+  align-items: stretch;
+}
+
+.grow {
+  flex-grow: 1;
+}

airbyte-webapp/src/components/ui/Flex/FlexItem.tsx

@@ -0,0 +1,47 @@
+import classNames from "classnames";
+import React, { HTMLAttributes } from "react";
+
+import styles from "./FlexItem.module.scss";
+
+interface FlexItemProps {
+  className?: string;
+  /**
+   * Sets `flex-grow` to 1 if truthy
+   */
+  grow?: boolean;
+  /**
+   * The `align-self` css property
+   */
+  alignSelf?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
+}
+
+/**
+ * Renders a div element which sets css properties for flex children as given by the props.
+ * This component can be used within a `FlexContainer` parent if grow or self-align props should be set, but it can also be omitted
+ * in case no special flex properties are required.
+ */
+export const FlexItem: React.FC<React.PropsWithChildren<FlexItemProps & HTMLAttributes<HTMLDivElement>>> = ({
+  className,
+  grow,
+  alignSelf,
+  children,
+  ...otherProps
+}) => {
+  const fullClassName = classNames(
+    {
+      [styles.grow]: grow,
+      [styles.alignSelfStart]: alignSelf === "flex-start",
+      [styles.alignSelfEnd]: alignSelf === "flex-end",
+      [styles.alignSelfCenter]: alignSelf === "center",
+      [styles.alignSelfBaseline]: alignSelf === "baseline",
+      [styles.alignSelfStretch]: alignSelf === "stretch",
+    },
+    className
+  );
+
+  return (
+    <div className={fullClassName} {...otherProps}>
+      {children}
+    </div>
+  );
+};

airbyte-webapp/src/components/ui/Flex/index.ts

@@ -0,0 +1,2 @@
+export { FlexContainer } from "./FlexContainer";
+export { FlexItem } from "./FlexItem";

airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.module.scss

@@ -10,14 +10,6 @@
   pointer-events: none;
 }
 
-.flexRow {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: variables.$spacing-md;
-}
-
 .leftFieldCol {
   flex: 1;
   max-width: 640px;

airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.module.scss

@@ -11,14 +11,6 @@
   pointer-events: none;
 }
 
-.flexRow {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: variables.$spacing-md;
-}
-
 .leftFieldCol {
   flex: 1;
   max-width: 640px;