🪟 🔧 Move UI components from base to ui (#17323)

* Move AlertBanner from base to ui

* Move components from base to ui
* Update imports to leave Titles in base folder

airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorRow.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 import { Button } from "components";
-import { Tooltip } from "components/base/Tooltip";
 import { CrossIcon } from "components/icons/CrossIcon";
 import { PencilIcon } from "components/icons/PencilIcon";
+import { Tooltip } from "components/ui/Tooltip";
 
 import styles from "./EditorRow.module.scss";
 

airbyte-webapp/src/components/CenteredPageComponents/PaddedCard.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-import { Card } from "components/base/Card";
+import { Card } from "components/ui/Card";
 
 const PaddedCard = styled(Card)`
   width: 100%;

airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
-import { Button } from "components/base/Button";
+import { Button } from "components/ui/Button";
 import { Modal } from "components/ui/Modal";
 
 import useLoadingState from "../../hooks/useLoadingState";

airbyte-webapp/src/components/ConnectionBlock/ConnectionBlock.tsx

@@ -3,7 +3,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
 import React from "react";
 
-import { Card } from "../base/Card";
+import { Card } from "components/ui/Card";
+
 import { ConnectionBlockItem, Content } from "./components/ConnectionBlockItem";
 import styles from "./ConnectionBlock.module.scss";
 

airbyte-webapp/src/components/ConnectorBlocks/TableItemTitle.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { Button, DropDownRow } from "components";
-import { Popout } from "components/base/Popout/Popout";
-import { Text } from "components/base/Text";
 import { ReleaseStageBadge } from "components/ReleaseStageBadge";
+import { Popout } from "components/ui/Popout";
+import { Text } from "components/ui/Text";
 
 import { ReleaseStage } from "core/request/AirbyteClient";
 import { FeatureItem, useFeature } from "hooks/services/Feature";

airbyte-webapp/src/components/CreateConnectionContent/components/TryAfterErrorBlock.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import { Button } from "components/base/Button";
-import { Text } from "components/base/Text";
 import { StatusIcon } from "components/StatusIcon";
+import { Button } from "components/ui/Button";
+import { Text } from "components/ui/Text";
 
 import styles from "./TryAfterErrorBlock.module.scss";
 

airbyte-webapp/src/components/DeleteBlock/DeleteBlock.tsx

@@ -3,12 +3,12 @@ import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 
-import { Button, H5 } from "components";
+import { H5 } from "components/base/Titles";
+import { Button } from "components/ui/Button";
+import { Card } from "components/ui/Card";
 
 import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
 
-import { Card } from "../base/Card";
-
 interface IProps {
   type: "source" | "destination" | "connection";
   onDelete: () => Promise<unknown>;

airbyte-webapp/src/components/EmptyResourceListView/EmptyResourceListView.tsx

@@ -2,8 +2,8 @@ import classNames from "classnames";
 import { useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 
-import { Button } from "components/base/Button";
-import { Text } from "components/base/Text";
+import { Button } from "components/ui/Button";
+import { Text } from "components/ui/Text";
 
 import styles from "./EmptyResourceListView.module.scss";
 

airbyte-webapp/src/components/GroupControls/index.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
-import { Card } from "components/base";
+import { Card } from "components/ui/Card";
 
 import { FormBlock, FormConditionItem } from "core/form/types";
 import { GroupLabel } from "views/Connector/ServiceForm/components/Sections/GroupLabel";

airbyte-webapp/src/components/JobItem/components/LinkToAttemptButton.tsx

@@ -4,8 +4,8 @@ import React, { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useDebounce } from "react-use";
 
-import { Button } from "components";
-import { Tooltip } from "components/base/Tooltip";
+import { Button } from "components/ui/Button";
+import { Tooltip } from "components/ui/Tooltip";
 
 import { copyToClipboard } from "utils/clipboard";
 

airbyte-webapp/src/components/JobItem/components/ResetStreamDetails.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import React from "react";
 
-import { Text } from "components/base/Text";
+import { Text } from "components/ui/Text";
 
 import styles from "./ResetStreamDetails.module.scss";
 

airbyte-webapp/src/components/LabeledControl/ControlLabels.tsx

@@ -2,9 +2,9 @@ import className from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import { Text } from "components/base/Text";
-import { InfoTooltip } from "components/base/Tooltip";
 import Label from "components/Label";
+import { Text } from "components/ui/Text";
+import { InfoTooltip } from "components/ui/Tooltip";
 
 import styles from "./ControlLabels.module.scss";
 

airbyte-webapp/src/components/LabeledInput/LabeledInput.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { Input, InputProps } from "components/base";
 import { ControlLabels, ControlLabelsProps } from "components/LabeledControl";
+import { Input, InputProps } from "components/ui/Input";
 
 type LabeledInputProps = Pick<ControlLabelsProps, "success" | "message" | "label" | "labelAdditionLength"> & InputProps;
 

airbyte-webapp/src/components/LabeledSwitch/LabeledSwitch.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import React from "react";
 
-import { CheckBox, Switch } from "components/base";
+import { CheckBox, Switch } from "components/ui";
 
 import styles from "./LabeledSwitch.module.scss";
 

airbyte-webapp/src/components/PageTitle/PageTitle.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { H3 } from "components";
+import { H3 } from "components/base/Titles";
 
 interface PageTitleProps {
   withLine?: boolean;

airbyte-webapp/src/components/ReleaseStageBadge/ReleaseStageBadge.tsx

@@ -1,8 +1,8 @@
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
-import { Tooltip } from "components/base/Tooltip";
 import { GAIcon } from "components/icons/GAIcon";
+import { Tooltip } from "components/ui/Tooltip";
 
 import { ReleaseStage } from "core/request/AirbyteClient";
 

airbyte-webapp/src/components/index.tsx

@@ -1,4 +1,4 @@
-export * from "./base";
+export * from "./ui";
 
 export * from "./ArrayOfObjectsEditor";
 export * from "./DefaultLogoCatalog";

airbyte-webapp/src/components/ui/Banner/index.stories.tsx

@@ -0,0 +1,16 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { AlertBanner } from "./AlertBanner";
+
+export default {
+  title: "UI/AlertBanner",
+  component: AlertBanner,
+  argTypes: {},
+} as ComponentMeta<typeof AlertBanner>;
+
+const Template: ComponentStory<typeof AlertBanner> = (args) => <AlertBanner {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  message: "This is the AlertBanner component!",
+};

airbyte-webapp/src/components/base/Button/index.stories.tsx → airbyte-webapp/src/components/ui/Button/index.stories.tsx

@@ -5,7 +5,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { Button } from "./Button";
 
 export default {
-  title: "Ui/Button",
+  title: "UI/Button",
   component: Button,
   argTypes: {
     backgroundColor: { control: "color" },

airbyte-webapp/src/components/ui/Button/index.tsx

@@ -0,0 +1,2 @@
+export * from "./Button";
+export * from "./types";

airbyte-webapp/src/components/base/Card/Card.tsx → airbyte-webapp/src/components/ui/Card/Card.tsx

@@ -1,7 +1,8 @@
 import classNames from "classnames";
 import React from "react";
 
-import { H5 } from "../Titles";
+import { H5 } from "components/base/Titles";
+
 import styles from "./Card.module.scss";
 
 export interface CardProps {

airbyte-webapp/src/components/base/CheckBox/CheckBox.tsx → airbyte-webapp/src/components/ui/CheckBox/CheckBox.tsx

@@ -33,7 +33,7 @@ const CheckBoxContainer = styled.label<{
   position: relative;
 `;
 
-const CheckBox: React.FC<React.InputHTMLAttributes<HTMLInputElement> & { indeterminate?: boolean }> = ({
+export const CheckBox: React.FC<React.InputHTMLAttributes<HTMLInputElement> & { indeterminate?: boolean }> = ({
   indeterminate,
   ...props
 }) => (
@@ -47,5 +47,3 @@ const CheckBox: React.FC<React.InputHTMLAttributes<HTMLInputElement> & { indeter
     {indeterminate ? <FontAwesomeIcon icon={faMinus} /> : props.checked && <FontAwesomeIcon icon={faCheck} />}
   </CheckBoxContainer>
 );
-
-export default CheckBox;

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

@@ -0,0 +1 @@
+export { CheckBox } from "./CheckBox";

airbyte-webapp/src/components/base/DropDown/components/Option.tsx → airbyte-webapp/src/components/ui/DropDown/components/Option.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { components, OptionProps } from "react-select";
 import styled from "styled-components";
 
-import CheckBox from "components/base/CheckBox";
+import { CheckBox } from "components/ui/CheckBox";
 
 import { OptionType } from "../DropDown";
 import Text from "./Text";

airbyte-webapp/src/components/ui/Modal/Modal.tsx

@@ -2,7 +2,7 @@ import { Dialog } from "@headlessui/react";
 import classNames from "classnames";
 import React, { useState } from "react";
 
-import { Card } from "../../base/Card";
+import { Card } from "../Card";
 import styles from "./Modal.module.scss";
 
 export interface ModalProps {

airbyte-webapp/src/components/ui/Modal/index.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
-import { Button } from "components/base/Button";
+import { Button } from "components/ui/Button";
 
 import { Modal, ModalBody, ModalFooter } from ".";
 

airbyte-webapp/src/components/base/Popout/Popout.tsx → airbyte-webapp/src/components/ui/Popout/Popout.tsx

@@ -4,7 +4,7 @@ import { useToggle } from "react-use";
 import styled from "styled-components";
 
 import { DropDown } from "components";
-import { DropdownProps } from "components/base/DropDown";
+import { DropdownProps } from "components/ui/DropDown";
 
 const OutsideClickListener = styled.div`
   bottom: 0;
@@ -33,7 +33,7 @@ interface PopoutProps extends DropdownProps {
   title?: string;
 }
 
-const Popout: React.FC<PopoutProps> = ({ onChange, targetComponent, ...props }) => {
+export const Popout: React.FC<PopoutProps> = ({ onChange, targetComponent, ...props }) => {
   const [isOpen, toggleOpen] = useToggle(false);
 
   const onSelectChange = (value: Value, meta: ActionMeta<Value>) => {
@@ -88,5 +88,3 @@ const Popout: React.FC<PopoutProps> = ({ onChange, targetComponent, ...props })
     </>
   );
 };
-
-export { Popout };

airbyte-webapp/src/components/ui/SlickSlider/SlickSlider.tsx

@@ -4,7 +4,7 @@ import classnames from "classnames";
 import React, { useMemo } from "react";
 import Slider, { CustomArrowProps, Settings as SliderProps } from "react-slick";
 
-import { Text } from "components/base/Text";
+import { Text } from "components/ui/Text";
 
 import styles from "./SlickSlider.module.scss";
 

airbyte-webapp/src/components/ui/Table/Table.tsx

@@ -2,7 +2,7 @@ import React, { memo, useMemo } from "react";
 import { Cell, Column, ColumnInstance, SortingRule, useSortBy, useTable } from "react-table";
 import styled from "styled-components";
 
-import { Card } from "components";
+import { Card } from "../Card";
 
 interface PaddingProps {
   left?: number;

airbyte-webapp/src/components/ui/Toast/Toast.tsx

@@ -3,8 +3,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 import styled, { keyframes } from "styled-components";
 
-import { Button, H5 } from "components";
+import { H5 } from "components/base/Titles";
 
+import { Button } from "../Button";
 import ErrorSign from "./ErrorSign";
 import styles from "./SingletonCard.module.scss";
 

airbyte-webapp/src/components/base/index.tsx → airbyte-webapp/src/components/ui/index.tsx

@@ -9,4 +9,3 @@ export * from "./RadioButton";
 export * from "./TagInput";
 export * from "./Switch";
 export * from "./TextArea";
-export * from "./Titles";

airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import { Text } from "components/base/Text";
 import HeadTitle from "components/HeadTitle";
+import { Text } from "components/ui/Text";
 
 import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics";
 

airbyte-webapp/src/packages/cloud/views/auth/components/CheckBoxControl.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { CheckBox } from "components/base";
+import { CheckBox } from "components/ui/CheckBox";
 
 type IProps = {
   message?: React.ReactNode;

airbyte-webapp/src/packages/cloud/views/auth/components/FormTitle/FormTitle.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Text } from "components/base/Text";
+import { Text } from "components/ui/Text";
 
 import styles from "./FormTitle.module.scss";
 

airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx

@@ -2,8 +2,8 @@ import React, { useMemo } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import styled from "styled-components";
 
-import { Card } from "components/base/Card";
 import { BarChart } from "components/ui/BarChart";
+import { Card } from "components/ui/Card";
 
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 import { useGetCloudWorkspaceUsage } from "packages/cloud/services/workspaces/CloudWorkspacesService";

airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.tsx

@@ -4,7 +4,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { Link, Outlet } from "react-router-dom";
 
 import { LoadingPage } from "components";
-import { AlertBanner } from "components/base/Banner/AlertBanner";
+import { AlertBanner } from "components/ui/Banner/AlertBanner";
 
 import { CloudRoutes } from "packages/cloud/cloudRoutes";
 import { CreditStatus } from "packages/cloud/lib/domain/cloudWorkspaces/types";

airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx

@@ -7,8 +7,8 @@ import { FormattedMessage, FormattedNumber } from "react-intl";
 import { NavLink } from "react-router-dom";
 
 import { Link } from "components";
-import { Text } from "components/base/Text";
 import { CreditsIcon } from "components/icons/CreditsIcon";
+import { Text } from "components/ui/Text";
 
 import { useConfig } from "config";
 import { FeatureItem, IfFeatureEnabled } from "hooks/services/Feature";

airbyte-webapp/src/packages/cloud/views/users/InviteUsersModal/InviteUsersModal.tsx

@@ -6,7 +6,8 @@ import { FormattedMessage, useIntl } from "react-intl";
 import styled from "styled-components";
 import * as yup from "yup";
 
-import { Button, DropDown, H5, Input } from "components";
+import { Button, DropDown, Input } from "components";
+import { H5 } from "components/base/Titles";
 import { Cell, Header, Row } from "components/SimpleTableComponents";
 import { Modal } from "components/ui/Modal";
 

airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/UsersSettingsView.tsx

@@ -5,7 +5,8 @@ import { FormattedMessage } from "react-intl";
 import { CellProps } from "react-table";
 import { useToggle } from "react-use";
 
-import { Button, H5 } from "components";
+import { H5 } from "components/base/Titles";
+import { Button } from "components/ui/Button";
 import { Table } from "components/ui/Table";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";