@bosonprotocol/react-kit 0.36.0-alpha.1 → 0.36.0-alpha.11

package/src/stories/widgets/Commit.stories.tsx

@@ -1,20 +1,21 @@
-import React from "react";
-import { ComponentMeta, ComponentStory, Story } from "@storybook/react";
+import React, { ReactElement } from "react";
+import { Meta } from "@storybook/react";
 
-import { CommitWidget } from "../../components/widgets/commit/CommitWidget";
+import {
+  CommitWidget,
+  CommitWidgetProps
+} from "../../components/widgets/commit/CommitWidget";
 import { EnvironmentType, getEnvConfigs } from "@bosonprotocol/core-sdk";
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
   title: "Widgets/Commit",
   component: CommitWidget
-} as ComponentMeta<typeof CommitWidget>;
+} as Meta<typeof CommitWidget>;
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof CommitWidget> = (args) => (
-  <CommitWidget {...args} />
-);
+const Template = (args) => <CommitWidget {...args} />;
 
-const wrapper = (Story: Story) => (
+const wrapper = (Story: () => ReactElement) => (
   <div>
     <Story />
   </div>
@@ -23,13 +24,18 @@ const envName =
   (process.env.STORYBOOK_DATA_ENV_NAME as EnvironmentType) || "testing";
 const envConfig = getEnvConfigs(envName);
 
-export const Commit: ComponentStory<typeof CommitWidget> = Template.bind({});
+export const Commit = Template.bind({});
 const BASE_ARGS = {
   envName,
   configId: envConfig[0].configId,
-  walletConnectProjectId: process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID,
+  walletConnectProjectId: process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID || "",
   withCustomReduxContext: false,
-  withMagicLink: true
+  withExternalSigner: false,
+  lookAndFeel: "modal",
+  withMagicLink: true,
+  roundness: "min",
+  sendDeliveryInfoThroughXMTP: true,
+  withGlobalStyle: true
 } as const;
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 Commit.args = {
@@ -43,10 +49,8 @@ Commit.args = {
   ipfsGateway: process.env.STORYBOOK_DATA_IPFS_GATEWAY,
   ipfsProjectId: process.env.STORYBOOK_DATA_IPFS_PROJECT_ID,
   ipfsProjectSecret: process.env.STORYBOOK_DATA_IPFS_PROJECT_SECRET,
-  offerId: "",
   defaultSelectedOfferId: "",
   disableVariationsSelects: false,
-  bundleUuid: "",
   productUuid: "f4bb0f8-2f2c-d151-2801-0d3c6250461", // with size variations
   sellerId: "4",
   metaTx: {
@@ -60,13 +64,13 @@ Commit.args = {
   //   console.log("onAlreadyOwnOfferClick");
   // },
   forcedAccount: "",
-  showBosonLogo: false
-};
+  showBosonLogo: false,
+  withWeb3React: true
+} satisfies CommitWidgetProps;
 
 Commit.decorators = [(Story) => wrapper(Story)];
 
-export const CommitTokenGated_ERC20: ComponentStory<typeof CommitWidget> =
-  Template.bind({});
+export const CommitTokenGated_ERC20 = Template.bind({});
 
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 CommitTokenGated_ERC20.args = {
@@ -97,21 +101,17 @@ CommitTokenGated_ERC20.args = {
     console.log("onAlreadyOwnOfferClick");
   },
   forcedAccount: "",
-  showBosonLogo: false
-};
+  showBosonLogo: false,
+  withWeb3React: true
+} satisfies CommitWidgetProps;
 
 CommitTokenGated_ERC20.decorators = [(Story) => wrapper(Story)];
 
-export const CommitWithColorAndSizeVariations: ComponentStory<
-  typeof CommitWidget
-> = Template.bind({});
+export const CommitWithColorAndSizeVariations = Template.bind({});
 
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 CommitWithColorAndSizeVariations.args = {
   ...BASE_ARGS,
-  dateFormat: "YYYY/MM/DD",
-  defaultCurrencySymbol: "$",
-  defaultCurrencyTicker: "USD",
   contactSellerForExchangeUrl: "https://bosonapp.io/#/chat/{id}",
   fairExchangePolicyRules:
     "ipfs://QmX8Wnq1eWbf7pRhEDQqdAqWp17YSKXQq8ckZVe4YdqAvt",
@@ -135,13 +135,13 @@ CommitWithColorAndSizeVariations.args = {
     console.log("onAlreadyOwnOfferClick");
   },
   forcedAccount: "",
-  showBosonLogo: false
-};
+  showBosonLogo: false,
+  withWeb3React: true
+} satisfies CommitWidgetProps;
 
 CommitWithColorAndSizeVariations.decorators = [(Story) => wrapper(Story)];
 
-export const CommitTokenGated_ERC721: ComponentStory<typeof CommitWidget> =
-  Template.bind({});
+export const CommitTokenGated_ERC721 = Template.bind({});
 
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 CommitTokenGated_ERC721.args = {
@@ -172,13 +172,13 @@ CommitTokenGated_ERC721.args = {
     console.log("onAlreadyOwnOfferClick");
   },
   forcedAccount: "",
-  showBosonLogo: false
-};
+  showBosonLogo: false,
+  withWeb3React: true
+} satisfies CommitWidgetProps;
 
 CommitTokenGated_ERC721.decorators = [(Story) => wrapper(Story)];
 
-export const CommitTokenGated_ERC721_2: ComponentStory<typeof CommitWidget> =
-  Template.bind({});
+export const CommitTokenGated_ERC721_2 = Template.bind({});
 
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 CommitTokenGated_ERC721_2.args = {
@@ -209,13 +209,13 @@ CommitTokenGated_ERC721_2.args = {
     console.log("onAlreadyOwnOfferClick");
   },
   forcedAccount: "",
-  showBosonLogo: false
-};
+  showBosonLogo: false,
+  withWeb3React: true
+} satisfies CommitWidgetProps;
 
 CommitTokenGated_ERC721_2.decorators = [(Story) => wrapper(Story)];
 
-export const CommitTokenGated_ERC1155: ComponentStory<typeof CommitWidget> =
-  Template.bind({});
+export const CommitTokenGated_ERC1155 = Template.bind({});
 
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 CommitTokenGated_ERC1155.args = {
@@ -246,20 +246,18 @@ CommitTokenGated_ERC1155.args = {
     console.log("onAlreadyOwnOfferClick");
   },
   forcedAccount: "",
-  showBosonLogo: false
-};
+  showBosonLogo: false,
+  withWeb3React: true
+} satisfies CommitWidgetProps;
 
 CommitTokenGated_ERC1155.decorators = [(Story) => wrapper(Story)];
 
-export const CommitBundle: ComponentStory<typeof CommitWidget> = Template.bind(
-  {}
-);
+export const CommitBundle = Template.bind({});
 
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 CommitBundle.args = {
   ...BASE_ARGS,
   configId: "testing-11155111-0",
-  dateFormat: "YYYY/MM/DD",
   defaultCurrencySymbol: "$",
   defaultCurrencyTicker: "USD",
   contactSellerForExchangeUrl: "https://bosonapp.io/#/chat/{id}",
@@ -285,7 +283,8 @@ CommitBundle.args = {
     console.log("onAlreadyOwnOfferClick");
   },
   forcedAccount: "",
-  showBosonLogo: false
-};
+  showBosonLogo: false,
+  withWeb3React: true
+} satisfies CommitWidgetProps;
 
 CommitBundle.decorators = [(Story) => wrapper(Story)];

package/src/stories/widgets/Finance.stories.tsx

@@ -1,7 +1,10 @@
 import React from "react";
 import { ComponentMeta, ComponentStory, Story } from "@storybook/react";
 
-import { FinanceWidget } from "../../components/widgets/finance/FinanceWidget";
+import {
+  FinanceWidget,
+  FinanceWidgetProps
+} from "../../components/widgets/finance/FinanceWidget";
 import { EnvironmentType, getEnvConfigs } from "@bosonprotocol/core-sdk";
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
@@ -29,13 +32,15 @@ Finance.args = {
   sellerId: process.env.STORYBOOK_DATA_SELLER_ID || "25",
   envName,
   configId: envConfig[0].configId,
-  walletConnectProjectId: process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID,
+  walletConnectProjectId: process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID || "",
   metaTx: {
     apiKey: process.env.STORYBOOK_DATA_META_TX_API_KEY as string,
     apiIds: process.env.STORYBOOK_DATA_META_TX_API_IDS as string
   },
   withExternalSigner: false,
-  withCustomReduxContext: false
-};
+  withCustomReduxContext: false,
+  withWeb3React: true,
+  withReduxProvider: true
+} satisfies FinanceWidgetProps;
 
 Finance.decorators = [(Story) => wrapper(Story)];

package/src/stories/widgets/Redemption.stories.tsx

@@ -1,44 +1,48 @@
-import React from "react";
-import { ComponentMeta, ComponentStory, Story } from "@storybook/react";
+import React, { ReactElement } from "react";
+import { Meta } from "@storybook/react";
 
-import { RedemptionWidget } from "../../components/widgets/redemption/RedemptionWidget";
+import {
+  RedemptionWidget,
+  RedemptionWidgetProps
+} from "../../components/widgets/redemption/RedemptionWidget";
 import {
   EnvironmentType,
   getEnvConfigs,
   subgraph
 } from "@bosonprotocol/core-sdk";
-import { RedemptionWidgetAction } from "../../components/widgets/redemption/provider/RedemptionContext";
+import { RedemptionWidgetAction } from "../../components/widgets";
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
   title: "Widgets/Redemption",
   component: RedemptionWidget
-} as ComponentMeta<typeof RedemptionWidget>;
+} as Meta<typeof RedemptionWidget>;
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof RedemptionWidget> = (args) => (
-  <RedemptionWidget {...args} />
-);
+const Template = (args) => <RedemptionWidget {...args} />;
 
-const wrapper = (Story: Story) => (
+const wrapper = (Story: () => ReactElement) => (
   <div>
     <Story />
   </div>
 );
 
-export const Redemption: ComponentStory<typeof RedemptionWidget> =
-  Template.bind({});
+export const Redemption = Template.bind({});
 
 const envName =
   (process.env.STORYBOOK_DATA_ENV_NAME as EnvironmentType) || "testing";
 const envConfig = getEnvConfigs(envName);
 const BASE_ARGS = {
-  withCustomReduxContext: false
-};
+  withCustomReduxContext: false,
+  raiseDisputeForExchangeUrl: "https://domain.com/{id}",
+  lookAndFeel: "modal",
+  withWeb3React: true,
+  withReduxProvider: true
+} as const;
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 Redemption.args = {
   envName,
   configId: envConfig[0].configId,
-  walletConnectProjectId: process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID,
+  walletConnectProjectId: process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID || "",
   dateFormat: "YYYY/MM/DD",
   defaultCurrencySymbol: "$",
   defaultCurrencyTicker: "USD",
@@ -66,12 +70,11 @@ Redemption.args = {
   sellerIds: undefined,
   signatures: undefined,
   ...BASE_ARGS
-};
+} satisfies RedemptionWidgetProps;
 
 Redemption.decorators = [(Story) => wrapper(Story)];
 
-export const RedemptionCallbacks: ComponentStory<typeof RedemptionWidget> =
-  Template.bind({});
+export const RedemptionCallbacks = Template.bind({});
 
 RedemptionCallbacks.args = {
   ...Redemption.args,
@@ -85,11 +88,9 @@ RedemptionCallbacks.args = {
     "0x8357f1aabd7b1811c4b7e30ed867471b9d813614ebb56ce0a90d9bae0b86c4a5272a1b9749c1cf9ad6823eb6fe5a0367c0f727b68bd411eec02167080d28d3a21c"
   ],
   ...BASE_ARGS
-};
+} satisfies RedemptionWidgetProps;
 
-export const RedemptionCallbacksThenClose: ComponentStory<
-  typeof RedemptionWidget
-> = Template.bind({});
+export const RedemptionCallbacksThenClose = Template.bind({});
 
 RedemptionCallbacksThenClose.args = {
   ...Redemption.args,
@@ -98,11 +99,9 @@ RedemptionCallbacksThenClose.args = {
   postRedemptionSubmittedUrl: "http://localhost:3666/submitted",
   postRedemptionConfirmedUrl: "http://localhost:3666/confirmed",
   ...BASE_ARGS
-};
+} satisfies RedemptionWidgetProps;
 
-export const RedemptionCallbacksRedeemConfirm: ComponentStory<
-  typeof RedemptionWidget
-> = Template.bind({});
+export const RedemptionCallbacksRedeemConfirm = Template.bind({});
 
 RedemptionCallbacksRedeemConfirm.args = {
   ...Redemption.args,
@@ -117,11 +116,9 @@ RedemptionCallbacksRedeemConfirm.args = {
   postRedemptionSubmittedUrl: "http://localhost:3666/submitted",
   postRedemptionConfirmedUrl: "http://localhost:3666/confirmed",
   ...BASE_ARGS
-};
+} satisfies RedemptionWidgetProps;
 
-export const RedemptionCallbacksFailure: ComponentStory<
-  typeof RedemptionWidget
-> = Template.bind({});
+export const RedemptionCallbacksFailure = Template.bind({});
 
 RedemptionCallbacksFailure.args = {
   ...Redemption.args,
@@ -130,11 +127,9 @@ RedemptionCallbacksFailure.args = {
   postRedemptionSubmittedUrl: "http://localhost:3666/submitted",
   postRedemptionConfirmedUrl: "http://localhost:3666/confirmed",
   ...BASE_ARGS
-};
+} satisfies RedemptionWidgetProps;
 
-export const RedemptionCallbacksFailure2: ComponentStory<
-  typeof RedemptionWidget
-> = Template.bind({});
+export const RedemptionCallbacksFailure2 = Template.bind({});
 
 RedemptionCallbacksFailure2.args = {
   ...Redemption.args,
@@ -146,11 +141,9 @@ RedemptionCallbacksFailure2.args = {
   postRedemptionSubmittedUrl: "http://localhost:3666/submitted",
   postRedemptionConfirmedUrl: "http://localhost:3666/confirmed",
   ...BASE_ARGS
-};
+} satisfies RedemptionWidgetProps;
 
-export const RedemptionCallbacksFailure3: ComponentStory<
-  typeof RedemptionWidget
-> = Template.bind({});
+export const RedemptionCallbacksFailure3 = Template.bind({});
 
 RedemptionCallbacksFailure3.args = {
   ...Redemption.args,
@@ -172,11 +165,9 @@ RedemptionCallbacksFailure3.args = {
   postRedemptionSubmittedUrl: "http://localhost:3666/fail3",
   postRedemptionConfirmedUrl: "http://localhost:3666/confirmed",
   ...BASE_ARGS
-};
+} satisfies RedemptionWidgetProps;
 
-export const RedemptionCallbacksFailure4: ComponentStory<
-  typeof RedemptionWidget
-> = Template.bind({});
+export const RedemptionCallbacksFailure4 = Template.bind({});
 
 RedemptionCallbacksFailure4.args = {
   ...Redemption.args,
@@ -198,10 +189,9 @@ RedemptionCallbacksFailure4.args = {
   postRedemptionSubmittedUrl: "http://localhost:3666/submitted",
   postRedemptionConfirmedUrl: "http://localhost:3666/fail4",
   ...BASE_ARGS
-};
+} satisfies RedemptionWidgetProps;
 
-export const RedemptionHandlers: ComponentStory<typeof RedemptionWidget> =
-  Template.bind({});
+export const RedemptionHandlers = Template.bind({});
 
 RedemptionHandlers.args = {
   ...Redemption.args,
@@ -229,11 +219,9 @@ RedemptionHandlers.args = {
     };
   },
   ...BASE_ARGS
-};
+} satisfies RedemptionWidgetProps;
 
-export const RedemptionHandlersNoResume: ComponentStory<
-  typeof RedemptionWidget
-> = Template.bind({});
+export const RedemptionHandlersNoResume = Template.bind({});
 
 RedemptionHandlersNoResume.args = {
   ...Redemption.args,
@@ -246,11 +234,9 @@ RedemptionHandlersNoResume.args = {
     };
   },
   ...BASE_ARGS
-};
+} satisfies RedemptionWidgetProps;
 
-export const RedemptionHandlersFailure1: ComponentStory<
-  typeof RedemptionWidget
-> = Template.bind({});
+export const RedemptionHandlersFailure1 = Template.bind({});
 
 RedemptionHandlersFailure1.args = {
   ...Redemption.args,
@@ -263,11 +249,9 @@ RedemptionHandlersFailure1.args = {
     };
   },
   ...BASE_ARGS
-};
+} satisfies RedemptionWidgetProps;
 
-export const RedemptionHandlersFailure2: ComponentStory<
-  typeof RedemptionWidget
-> = Template.bind({});
+export const RedemptionHandlersFailure2 = Template.bind({});
 
 RedemptionHandlersFailure2.args = {
   ...Redemption.args,
@@ -276,11 +260,9 @@ RedemptionHandlersFailure2.args = {
     throw new Error("Redemption handler is throwing an exception");
   },
   ...BASE_ARGS
-};
+} satisfies RedemptionWidgetProps;
 
-export const RedemptionHandlersFailure3: ComponentStory<
-  typeof RedemptionWidget
-> = Template.bind({});
+export const RedemptionHandlersFailure3 = Template.bind({});
 
 RedemptionHandlersFailure3.args = {
   ...Redemption.args,
@@ -298,11 +280,9 @@ RedemptionHandlersFailure3.args = {
     throw new Error("Redemption handler is throwing an exception");
   },
   ...BASE_ARGS
-};
+} satisfies RedemptionWidgetProps;
 
-export const RedemptionHandlersFailure4: ComponentStory<
-  typeof RedemptionWidget
-> = Template.bind({});
+export const RedemptionHandlersFailure4 = Template.bind({});
 
 RedemptionHandlersFailure4.args = {
   ...Redemption.args,
@@ -320,4 +300,4 @@ RedemptionHandlersFailure4.args = {
     throw new Error("Redemption handler is throwing an exception");
   },
   ...BASE_ARGS
-};
+} satisfies RedemptionWidgetProps;

package/src/stories/widgets/Roblox.stories.tsx

@@ -0,0 +1,85 @@
+import {
+  RobloxWidget,
+  RobloxWidgetProps
+} from "../../components/widgets/roblox/RobloxWidget";
+import React from "react";
+import { Meta } from "@storybook/react";
+import { createGlobalStyle } from "styled-components";
+
+const GlobalStyle = createGlobalStyle`
+    #storybook-root,[data-rk], [scale="1"] {
+        width: 100%;
+        padding: 0 !important;
+    }
+`;
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Widgets/Roblox",
+  component: RobloxWidget,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered"
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  args: {
+    // onClick: fn()
+  },
+  argTypes: {
+    // disabled: { control: "boolean" },
+    // size: {
+    //   control: "select",
+    //   options: ["small", "regular", "large"]
+    // },
+    // children: { control: "text" },
+    // tooltip: { control: "text" }
+  },
+  decorators: [
+    (Story) => {
+      return (
+        <>
+          <GlobalStyle />
+          <Story />
+        </>
+      );
+    }
+  ]
+} satisfies Meta<typeof RobloxWidget>;
+
+const BASE_ARGS = {} as const;
+
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+export const Base = {
+  args: {
+    ...BASE_ARGS,
+
+    configProps: {
+      configId: "testing-80002-0",
+      envName: "testing",
+      sellerId: "6",
+      walletConnectProjectId:
+        process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID ?? "",
+      ipfsGateway: process.env.STORYBOOK_DATA_IPFS_GATEWAY,
+      ipfsProjectId: process.env.STORYBOOK_DATA_IPFS_PROJECT_ID,
+      ipfsProjectSecret: process.env.STORYBOOK_DATA_IPFS_PROJECT_SECRET,
+      sendDeliveryInfoThroughXMTP: true,
+      raiseDisputeForExchangeUrl:
+        "https://drcenter-staging.on-fleek.app/#/exchange/{id}/raise-dispute",
+      showProductsPreLogin: true,
+      roundness: "mid",
+      layout: "vertical"
+    },
+    connectProps: {
+      step3: {
+        titleForMobile: "Exclusives",
+        title: "Get access to exclusives!",
+        subtitle: `Now you can purchase GYMSHARK exclusives that are available to you.`,
+        buttonText: "Sign up",
+        callback: async () => {
+          console.log("callback");
+        }
+      }
+    }
+  } satisfies RobloxWidgetProps
+};