Setup embed package

packages/client/src/view/StepOnePreview.tsx

@@ -7,13 +7,10 @@ import {
 } from "@membership/flow/index";
 import { MembershipDefinitionCard } from "./shared/membership-card/membership-definition/MembershipDefinitionCard";
 
-import {
-  getMembershipStatus,
-  MembershipStatus,
-  useFlow,
-} from "@membership/client";
 import { Button } from "./shared/button/Button";
 import { Header } from "./shared/header/Header";
+import { useFlow } from "../providers/flow.provider";
+import { getMembershipStatus, MembershipStatus } from "../utils";
 
 export interface StepOnePreviewProps {
   onCompleteStep: () => void;

packages/client/src/view/shared/Modal.tsx

@@ -1,4 +1,4 @@
-import { IoMdClose } from "react-icons/io";
+// import { IoMdClose } from "react-icons/io";
 import ReactModal from "react-modal";
 import { UnstyledButton } from "./UnstyledButton";
 import { colors } from "../../theme";
@@ -54,7 +54,7 @@ export function CenterModal({
     >
       <div>
         <CloseButton onClick={reactModalProps.onRequestClose}>
-          <IoMdClose size={20} />
+          {/*<IoMdClose size={20} />*/}X
         </CloseButton>
         {children}
       </div>

packages/embed/package.json

@@ -10,17 +10,22 @@
     "dev": "rollup --config --watch"
   },
   "devDependencies": {
-    "@rollup/plugin-typescript": "^8.5.0",
     "@types/react": "^18.0.22",
     "eslint": "^7.32.0",
     "eslint-config-custom": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^2.79.0",
     "tsconfig": "*",
-    "typescript": "^4.5.2",
-    "@rollup/plugin-babel": "^6.0.3"
+    "typescript": "^4.5.2"
   },
   "dependencies": {
+    "@membership/client": "*",
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-image": "^3.0.2",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.34.1"
   }
 }

packages/embed/rollup.config.js

@@ -1,16 +1,31 @@
-import typescript from "@rollup/plugin-typescript";
-import babel from "@rollup/plugin-babel";
+import ts from "rollup-plugin-typescript2";
+import json from "@rollup/plugin-json";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import postcss from "rollup-plugin-postcss";
+// TODO: Do we need this
+// import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import image from "@rollup/plugin-image";
+
+// TODO: We need to config polyfills, but that causes other problems.
+//  See: https://github.com/ionic-team/rollup-plugin-node-polyfills/issues/11
 
 export default {
   input: "src/index.ts",
   output: {
     file: "dist/index.js",
-    format: "cjs",
+    format: "es",
   },
   plugins: [
-    typescript(),
-    babel({
-      presets: ["@babel/preset-react"],
-    }),
+    // peerDepsExternal(),
+    json(),
+    image(),
+    resolve(),
+    commonjs(),
+    ts(),
+    postcss(),
+    // babel({
+    //   presets: ["@babel/preset-react"],
+    // }),
   ],
 };

packages/embed/src/index.ts

@@ -1,18 +1,15 @@
-// import { MembershipCheckout } from "@membership/client";
+import { MembershipCheckout } from "@membership/client";
 import { createRoot } from "react-dom/client";
 
 const rootContainer = document.getElementsByTagName("body")[0];
 
 const reactRoot = createRoot(rootContainer);
 
-// TODO: Add support for using our our React library
-// reactRoot.render(
-// MembershipCheckout({
-//   adminAddress: "",
-//   isOpenModal: true,
-//   membershipDefinitionId: 0,
-//   onCloseModal: () => null,
-// })
-// );
-
-reactRoot.render("Hello World");
+reactRoot.render(
+  MembershipCheckout({
+    adminAddress: "",
+    isOpenModal: true,
+    membershipDefinitionId: 0,
+    onCloseModal: () => null,
+  })
+);

packages/embed/tsconfig.json

@@ -1,8 +1,26 @@
 {
-  "extends": "tsconfig/react-library.json",
-  "include": ["."],
-  "exclude": ["dist", "build", "node_modules"],
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "React Library",
   "compilerOptions": {
-    "lib": ["dom"]
-  }
+    "jsx": "react-jsx",
+    "lib": ["ES2015", "dom"],
+    "module": "ESNext",
+    "target": "es6",
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "inlineSources": false,
+    // Must set isolated modules to false
+    "isolatedModules": false,
+    "moduleResolution": "node",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noImplicitAny": true
+  },
+  "exclude": ["node_modules"]
 }