@duffel/components 3.1.2--prototype.2 → 3.1.3--prototype.2

package/src/components/ShowData/ShowData.tsx

@@ -1,38 +0,0 @@
-import { Button } from "@components/shared/Button";
-import React from "react";
-
-function isJsonString(dataString: string) {
-  try {
-    JSON.parse(dataString);
-  } catch (e) {
-    return false;
-  }
-  return true;
-}
-
-export interface ShowDataProps {
-  data: any;
-  onFinished: (newData: any) => void;
-}
-
-export const ShowData: React.FC<ShowDataProps> = ({ data, onFinished }) => {
-  const [textareaData, setTextareaData] = React.useState("{}");
-  const isValid = isJsonString(textareaData);
-
-  return (
-    <div>
-      <pre>{JSON.stringify(data, null, 2)}</pre>
-      <textarea
-        value={textareaData}
-        onChange={(e) => setTextareaData(e.target.value)}
-      />
-      <Button
-        disabled={!isValid}
-        onClick={() => onFinished(JSON.parse(textareaData))}
-      >
-        Click me to trigger `onFinished` event
-      </Button>
-      {!isValid && <p style={{ color: "tomato" }}>Invalid JSON</p>}
-    </div>
-  );
-};

package/src/components/ShowData/ShowDataCustomElement.tsx

@@ -1,85 +0,0 @@
-import { createRoot, Root } from "react-dom/client";
-import { ShowData, ShowDataProps } from "./ShowData";
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    interface IntrinsicElements {
-      "show-data": React.DetailedHTMLProps<
-        React.HTMLAttributes<HTMLElement>,
-        HTMLElement
-      >;
-    }
-  }
-}
-
-const CUSTOM_ELEMENT_TAG = "show-data";
-
-type ShowDataRenderArguments = Pick<ShowDataProps, "data">;
-
-class ShowDataCustomElement extends HTMLElement {
-  /**
-   * The React root for displaying content inside a browser DOM element.
-   */
-  private root!: Root;
-
-  /**
-   * `connectedCallback` is called to initialise the custom element
-   */
-  connectedCallback() {
-    const container = document.createElement("div");
-    this.appendChild(container);
-
-    this.root = createRoot(container);
-  }
-
-  /**
-   * When this function is called, it will render/re-render
-   * the `DuffelPayments` component with the given props.
-   */
-  public render(withProps: ShowDataRenderArguments) {
-    if (!this.root) {
-      throw "It was not possible to render `duffel-payments` because `this.root` is missing.";
-    }
-
-    this.root.render(
-      <ShowData
-        {...withProps}
-        onFinished={() => {
-          this.dispatchEvent(
-            new CustomEvent("onFinished", {
-              composed: true,
-            })
-          );
-        }}
-      />
-    );
-  }
-}
-
-window.customElements.get(CUSTOM_ELEMENT_TAG) ||
-  window.customElements.define(CUSTOM_ELEMENT_TAG, ShowDataCustomElement);
-
-function tryToGetShowData(caller: string): ShowDataCustomElement {
-  const element =
-    document.querySelector<ShowDataCustomElement>(CUSTOM_ELEMENT_TAG);
-  if (!element) {
-    throw new Error(
-      `Could not find duffel-payments element in the DOM. Maybe you need to call ${caller} after 'window.onload'?`
-    );
-  }
-  return element;
-}
-
-export function renderShowDataCustomElement(props: ShowDataRenderArguments) {
-  const element = tryToGetShowData("renderShowData");
-  element.render(props);
-}
-
-export function onShowDataFinished(onFinished: ShowDataProps["onFinished"]) {
-  const element = tryToGetShowData("onShowDataFinished");
-
-  // using `as EventListener` here because typescript doesn't know the event type for `onPayloadReady`
-  // There's a few different suggestions to resolve this seemed good enough
-  // You can learn more here: https://github.com/microsoft/TypeScript/issues/28357
-  element.addEventListener("onFinished", onFinished as EventListener);
-}

package/src/stories/ShowData.stories.tsx

@@ -1,16 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { ShowData, ShowDataProps } from "../components/ShowData/ShowData";
-
-export default {
-  title: "ShowData",
-  component: ShowData,
-} as Meta;
-
-const defaultProps: ShowDataProps = {
-  data: { heres: "some test data" },
-  onFinished: console.log,
-};
-
-export const AllServices: StoryObj<typeof ShowData> = {
-  args: defaultProps,
-};