Move Modal component to components/ui and fix imports (airbytehq#17165

)

* Move Modal component to components/ui and fix imports

* Update Modal storybook with more content, use UI component Buttons

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import Modal, { ModalProps } from "components/Modal";
+import { Modal, ModalProps } from "components/ui/Modal";
 
 import { ConnectionFormMode } from "views/Connection/ConnectionForm/ConnectionForm";
 

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

@@ -4,7 +4,7 @@ import styled from "styled-components";
 
 import { LoadingButton } from "components";
 import { Button } from "components/base/Button";
-import Modal from "components/Modal";
+import { Modal } from "components/ui/Modal";
 
 import useLoadingState from "../../hooks/useLoadingState";
 

airbyte-webapp/src/components/index.tsx

@@ -10,7 +10,6 @@ export * from "./LabeledSwitch";
 export * from "./Link";
 export * from "./LoadingPage";
 export * from "./MainPageWithScroll";
-export * from "./Modal";
 export * from "./PageTitle";
 export * from "./SimpleTableComponents";
 export * from "./StatusIcon";

airbyte-webapp/src/components/Modal/Modal.module.scss → airbyte-webapp/src/components/ui/Modal/Modal.module.scss

@@ -1,6 +1,6 @@
-@use "../../scss/colors";
-@use "../../scss/variables";
-@use "../../scss/z-indices";
+@use "../../../scss/colors";
+@use "../../../scss/variables";
+@use "../../../scss/z-indices";
 
 @keyframes fade-in-container {
   from {

airbyte-webapp/src/components/Modal/Modal.tsx → 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 "../../base/Card";
 import styles from "./Modal.module.scss";
 
 export interface ModalProps {
@@ -20,7 +20,14 @@ const cardStyleBySize = {
   xl: styles.xl,
 };
 
-const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({ children, title, size, onClose, cardless, testId }) => {
+export const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
+  children,
+  title,
+  size,
+  onClose,
+  cardless,
+  testId,
+}) => {
   const [isOpen, setIsOpen] = useState(true);
 
   const onModalClose = () => {
@@ -45,5 +52,3 @@ const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({ children, title,
     </Dialog>
   );
 };
-
-export default Modal;

airbyte-webapp/src/components/Modal/ModalBody.module.scss → airbyte-webapp/src/components/ui/Modal/ModalBody.module.scss

@@ -1,4 +1,4 @@
-@use "../../scss/variables";
+@use "../../../scss/variables";
 
 .modalBody {
   padding: variables.$spacing-lg variables.$spacing-xl;

airbyte-webapp/src/components/Modal/ModalFooter.module.scss → airbyte-webapp/src/components/ui/Modal/ModalFooter.module.scss

@@ -1,5 +1,5 @@
-@use "../../scss/colors";
-@use "../../scss/variables";
+@use "../../../scss/colors";
+@use "../../../scss/variables";
 
 .modalFooter {
   display: flex;

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

@@ -0,0 +1,48 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Button } from "components/base/Button";
+
+import { Modal, ModalBody, ModalFooter } from ".";
+
+export default {
+  title: "UI/Modal",
+  component: Modal,
+  argTypes: {
+    title: { type: { name: "string", required: false } },
+  },
+} as ComponentMeta<typeof Modal>;
+
+const Template: ComponentStory<typeof Modal> = (args) => {
+  if (args.cardless) {
+    return <Modal {...args} />;
+  }
+
+  return (
+    <Modal {...args}>
+      <ModalBody>{args.children}</ModalBody>
+      <ModalFooter>
+        <Button>Lorem</Button>
+        <Button>Ipsum</Button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  size: "md",
+  children: (
+    <div>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </div>
+  ),
+  title: "Modal Title",
+};

airbyte-webapp/src/components/Modal/index.tsx → airbyte-webapp/src/components/ui/Modal/index.ts

@@ -1,8 +1,3 @@
-import Modal from "./Modal";
-
 export * from "./Modal";
 export * from "./ModalBody";
 export * from "./ModalFooter";
-
-export { Modal };
-export default Modal;

airbyte-webapp/src/hooks/services/Modal/ModalService.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useMemo, useRef, useState } from "react";
 import { firstValueFrom, Subject } from "rxjs";
 
-import { Modal } from "components";
+import { Modal } from "components/ui/Modal";
 
 import { ModalOptions, ModalResult, ModalServiceContext } from "./types";
 

airbyte-webapp/src/hooks/services/Modal/types.ts

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ModalProps } from "components/Modal/Modal";
+import { ModalProps } from "components/ui/Modal";
 
 export interface ModalOptions<T> {
   title: ModalProps["title"];

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

@@ -6,8 +6,9 @@ import { FormattedMessage, useIntl } from "react-intl";
 import styled from "styled-components";
 import * as yup from "yup";
 
-import { Button, DropDown, H5, Input, LoadingButton, Modal } from "components";
+import { Button, DropDown, H5, Input, LoadingButton } from "components";
 import { Cell, Header, Row } from "components/SimpleTableComponents";
+import { Modal } from "components/ui/Modal";
 
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 import { useUserHook } from "packages/cloud/services/users/UseUserHook";

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx

@@ -5,8 +5,10 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { useAsyncFn, useUnmount } from "react-use";
 import styled from "styled-components";
 
-import { Button, LabeledSwitch, ModalBody, ModalFooter } from "components";
+import { Button } from "components/base/Button";
+import { LabeledSwitch } from "components/LabeledSwitch";
 import LoadingSchema from "components/LoadingSchema";
+import { ModalBody, ModalFooter } from "components/ui/Modal";
 
 import { toWebBackendConnectionUpdate } from "core/domain/connection";
 import { ConnectionStateType, ConnectionStatus } from "core/request/AirbyteClient";

airbyte-webapp/src/pages/OnboardingPage/components/VideoItem/components/ShowVideo.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import styled from "styled-components";
 
 import { Button } from "components/base";
-import Modal from "components/Modal";
+import { Modal } from "components/ui/Modal";
 
 interface ShowVideoProps {
   videoId?: string;

airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.tsx

@@ -4,7 +4,8 @@ import { FormattedMessage, useIntl } from "react-intl";
 import styled from "styled-components";
 import * as yup from "yup";
 
-import { Button, LabeledInput, Link, Modal, StatusIcon } from "components";
+import { Button, LabeledInput, Link, StatusIcon } from "components";
+import { Modal } from "components/ui/Modal";
 
 import { useConfig } from "config";
 

airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx

@@ -5,7 +5,7 @@ import { Button } from "components";
 
 import { AirbyteCatalog, CatalogDiff } from "core/request/AirbyteClient";
 
-import { ModalBody, ModalFooter } from "../../../components/Modal";
+import { ModalBody, ModalFooter } from "../../../components/ui/Modal";
 import styles from "./CatalogDiffModal.module.scss";
 import { DiffSection } from "./components/DiffSection";
 import { FieldSection } from "./components/FieldSection";

airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx

@@ -1,7 +1,7 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { FormattedMessage } from "react-intl";
 
-import Modal from "components/Modal";
+import { Modal } from "components/ui/Modal";
 
 import { CatalogDiffModal } from "./CatalogDiffModal";
 

airbyte-webapp/src/views/Connection/TransformationForm/TransformationForm.tsx

@@ -5,8 +5,12 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import * as yup from "yup";
 
-import { Button, ControlLabels, DropDown, Input, ModalBody, ModalFooter } from "components";
+import { Button } from "components/base/Button";
+import { DropDown } from "components/base/DropDown";
+import { Input } from "components/base/Input";
 import { FormChangeTracker } from "components/FormChangeTracker";
+import { ControlLabels } from "components/LabeledControl";
+import { ModalBody, ModalFooter } from "components/ui/Modal";
 
 import { useConfig } from "config";
 import { OperationService } from "core/domain/connection";

airbyte-webapp/src/views/Connector/RequestConnectorModal/RequestConnectorModal.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
-import { Modal } from "components";
+import { Modal } from "components/ui/Modal";
 
 import useRequestConnector from "hooks/services/useRequestConnector";
 import { useCurrentWorkspace } from "services/workspaces/WorkspacesService";

airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/VariableInputFieldForm.tsx

@@ -4,7 +4,8 @@ import { FormattedMessage } from "react-intl";
 import { useAsync, useEffectOnce } from "react-use";
 import * as yup from "yup";
 
-import { Button, ModalBody, ModalFooter } from "components";
+import { Button } from "components/base/Button";
+import { ModalBody, ModalFooter } from "components/ui/Modal";
 
 import { FormGroupItem, FormObjectArrayItem } from "core/form/types";