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

package/src/stories/buttons/Button.stories.tsx

@@ -1,5 +1,5 @@
 import { fn } from "@storybook/test";
-import { Button } from "../../components/buttons/Button";
+import { Button, ButtonProps } from "../../components/buttons/Button";
 import React from "react";
 import { Meta } from "@storybook/react";
 
@@ -43,16 +43,7 @@ export const PrimaryFill = {
     disabled: false,
     loading: false,
     variant: "primaryFill"
-  }
-};
-
-export const PrimaryInverted = {
-  args: {
-    ...BASE_ARGS,
-    disabled: false,
-    loading: false,
-    variant: "primaryInverted"
-  }
+  } satisfies ButtonProps
 };
 
 export const SecondaryFill = {
@@ -61,7 +52,7 @@ export const SecondaryFill = {
     disabled: false,
     loading: false,
     variant: "secondaryFill"
-  }
+  } satisfies ButtonProps
 };
 
 export const SecondaryInverted = {
@@ -70,7 +61,7 @@ export const SecondaryInverted = {
     disabled: false,
     loading: false,
     variant: "secondaryInverted"
-  }
+  } satisfies ButtonProps
 };
 
 export const AccentFill = {
@@ -79,7 +70,7 @@ export const AccentFill = {
     disabled: false,
     loading: false,
     variant: "accentFill"
-  }
+  } satisfies ButtonProps
 };
 
 export const AccentInverted = {
@@ -88,7 +79,7 @@ export const AccentInverted = {
     disabled: false,
     loading: false,
     variant: "accentInverted"
-  }
+  } satisfies ButtonProps
 };
 
 export const Disabled = {
@@ -97,7 +88,7 @@ export const Disabled = {
     disabled: true,
     loading: false,
     variant: "primaryFill"
-  }
+  } satisfies ButtonProps
 };
 
 export const Loading = {
@@ -106,5 +97,5 @@ export const Loading = {
     disabled: false,
     loading: true,
     variant: "primaryFill"
-  }
+  } satisfies ButtonProps
 };

package/src/stories/buttons/CommitButtonView.stories.tsx

@@ -1,7 +1,25 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 
-import { CommitButtonView } from "../../components/buttons/CommitButtonView";
+import { CommitButtonView } from "../../components/buttons/commit/CommitButtonView";
+import { BosonThemeProvider } from "../../components/widgets/BosonThemeProvider";
+import { withThemeFromJSXProvider } from "@storybook/addon-themes";
+import { getThemes } from "../../theme";
+import GlobalStyle from "../../components/styles/GlobalStyle";
+
+const themes = Object.keys({
+  light: getThemes({ roundness: "min" })["light"]
+}).reduce((acum, current) => {
+  acum[current] = current;
+  return acum;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+}, {}) as any;
+const WithLightThemeOnly = withThemeFromJSXProvider({
+  Provider: BosonThemeProvider,
+  GlobalStyles: GlobalStyle,
+  themes: themes,
+  defaultTheme: "light"
+});
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
@@ -20,15 +38,14 @@ export default {
       options: ["sharp", "rounded", "pill"],
       control: { type: "radio" }
     }
-  }
-} as ComponentMeta<typeof CommitButtonView>;
+  },
+  decorators: [WithLightThemeOnly]
+} as Meta<typeof CommitButtonView>;
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof CommitButtonView> = (args) => (
-  <CommitButtonView {...args} />
-);
+const Template = (args) => <CommitButtonView {...args} />;
 
-export const Base: ComponentStory<typeof CommitButtonView> = Template.bind({});
+export const Base = Template.bind({});
 
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 Base.args = {

package/src/stories/buttons/Upload.stories.tsx

@@ -52,10 +52,9 @@ export default {
                 <Story
                   args={{
                     ...args,
-                    saveButtonTheme: bosonButtonThemes({
-                      withBosonStyle: false
+                    saveButtonTheme:
                       // @ts-expect-error saveButtonThemeKey is not a valid prop name of Upload but saveButtonTheme is so we get the theme from the key
-                    })[args.saveButtonThemeKey]
+                      bosonButtonThemes()[args.saveButtonThemeKey]
                   }}
                 />
               </Formik>

package/src/stories/cta/offer/CommitButton.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 
 import { CommitButton } from "../../../components/cta/offer/CommitButton";
 
@@ -17,11 +17,9 @@ export default {
       }
     }
   }
-} as ComponentMeta<typeof CommitButton>;
+} as Meta<typeof CommitButton>;
 
-const Template: ComponentStory<typeof CommitButton> = (
-  args: Parameters<typeof CommitButton>[0]
-) => {
+const Template = (args: Parameters<typeof CommitButton>[0]) => {
   const buttonRef = useRef<HTMLButtonElement>(null);
   const provider = hooks.useProvider();
 
@@ -36,11 +34,9 @@ const Template: ComponentStory<typeof CommitButton> = (
   );
 };
 
-export const Simple: ComponentStory<typeof CommitButton> = Template.bind({});
-export const WithStep: ComponentStory<typeof CommitButton> = Template.bind({});
-export const WithMetaTx: ComponentStory<typeof CommitButton> = Template.bind(
-  {}
-);
+export const Simple = Template.bind({});
+export const WithStep = Template.bind({});
+export const WithMetaTx = Template.bind({});
 
 Simple.args = {
   coreSdkConfig: {

package/src/stories/form/BaseCheckbox.stories.tsx

@@ -2,9 +2,8 @@ import React from "react";
 import { BaseCheckbox, BaseCheckboxProps } from "../../components/form";
 import { Formik } from "formik";
 import type { Meta } from "@storybook/react";
-import { theme } from "../../theme";
+import { colors } from "../../theme";
 import { bosonCheckboxTheme } from "../../components/form/Checkbox";
-const colors = theme.colors.light;
 
 const inputName = "test";
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
@@ -69,8 +68,8 @@ export const CustomTheme = {
       borderRadius: "4px",
       hover: {
         borderColor: colors.red,
-        backgroundColor: colors.primary,
-        color: colors.darkRed
+        backgroundColor: colors.green,
+        color: colors.redDark
       },
       checked: {
         borderColor: "#ff00d4",

package/src/stories/form/BaseTagsInput.stories.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { BaseTagsInputProps, BaseTagsInput } from "../../components/form";
+import { Formik } from "formik";
+import * as yup from "yup";
+import type { Meta } from "@storybook/react";
+import { fn } from "@storybook/test";
+const inputWithErrors = "With error";
+const defaultHeightSize = "regular";
+const inputName = "test";
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Visual Components/Inputs/BaseTagsInput",
+  component: BaseTagsInput,
+  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"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    disabled: { control: "boolean" },
+    heightSize: {
+      control: "select",
+      options: ["small", "regular", "large"]
+    }
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+  decorators: [
+    (Story, { name }) => {
+      return (
+        <Formik<{ [inputName]: unknown }>
+          validationSchema={
+            name === inputWithErrors
+              ? yup.object({ [inputName]: yup.array(yup.string()).required() })
+              : undefined
+          }
+          onSubmit={() => {
+            //
+          }}
+          initialValues={{ [inputName]: "" }}
+          initialTouched={{ [inputName]: true }}
+        >
+          <Story />
+        </Formik>
+      );
+    }
+  ] satisfies Meta<typeof BaseTagsInput>["decorators"]
+} satisfies Meta<typeof BaseTagsInput>;
+
+const BASE_ARGS = {
+  name: inputName,
+  placeholder: "this is a placeholder",
+  label: "label",
+  onAddTag: (tag) => console.log("added tag", tag),
+  onRemoveTag: (tag) => console.log("removed tag", tag)
+} satisfies BaseTagsInputProps;
+
+export const Simple = {
+  args: {
+    ...BASE_ARGS,
+
+    heightSize: defaultHeightSize
+  } satisfies BaseTagsInputProps
+};
+
+export const InputWithError = {
+  name: "With error",
+  args: {
+    ...BASE_ARGS,
+    heightSize: defaultHeightSize
+  } satisfies BaseTagsInputProps
+};

package/src/stories/form/Phone.stories.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { Phone, PhoneProps } from "../../components/form";
+import { Formik } from "formik";
+import * as yup from "yup";
+import type { Meta } from "@storybook/react";
+import { fn } from "@storybook/test";
+const inputWithErrors = "With error";
+const inputName = "test";
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Visual Components/Inputs/Phone",
+  component: Phone,
+  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"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    disabled: { control: "boolean" }
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+  decorators: [
+    (Story, { args, name }) => {
+      return (
+        <Formik<{ [inputName]: unknown }>
+          validationSchema={
+            name === inputWithErrors
+              ? yup.object({ [inputName]: yup.array(yup.string()).required() })
+              : undefined
+          }
+          onSubmit={() => {
+            //
+          }}
+          initialValues={{ [inputName]: "" }}
+          initialTouched={{ [inputName]: true }}
+        >
+          {({ values }) => {
+            return (
+              <>
+                <Story args={{ ...args, name: inputName }} />
+                <div>selected value: {JSON.stringify(values)}</div>
+              </>
+            );
+          }}
+        </Formik>
+      );
+    }
+  ] satisfies Meta<typeof Phone>["decorators"]
+} satisfies Meta<typeof Phone>;
+
+const BASE_ARGS = {
+  name: inputName,
+  placeholder: "this is a placeholder"
+} satisfies PhoneProps;
+
+export const Simple = {
+  args: {
+    ...BASE_ARGS
+  } satisfies PhoneProps
+};
+
+export const InputWithError = {
+  name: "With error",
+  args: {
+    ...BASE_ARGS
+  } satisfies PhoneProps
+};

package/src/stories/helpers/connect-wallet.ts

@@ -12,6 +12,7 @@ export const connectWallet = async (chainId?: string) => {
   try {
     const currentChainId = window.ethereum
       ? Number(
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           await (window.ethereum as any)?.request({ method: "eth_chainId" })
         )
       : undefined;

package/src/stories/multisteps/MultiSteps.stories.tsx

@@ -1,8 +1,8 @@
 import { fn } from "@storybook/test";
-import { MultiSteps, theme } from "../../index";
+import { colors, MultiSteps } from "../../index";
 import React from "react";
 import { Meta } from "@storybook/react";
-const colors = theme.colors.light;
+
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
   title: "Visual Components/MultiSteps",
@@ -47,12 +47,12 @@ const BASE_ARGS = {
     { name: "Create profile", steps: 2 },
     { name: "Summary of profile creation", steps: 1 }
   ],
-  enabledArrowColor: colors.darkGrey,
-  disabledArrowColor: colors.lightArrowColor,
+  enabledArrowColor: colors.greyDark,
+  disabledArrowColor: colors.greyLight2,
   stepInactiveDotColor: "#d3d5db",
   stepInactiveBackgroundColor: colors.white,
-  stepInactiveHoverDotColor: colors.darkGrey,
-  stepInactiveHoverBackgroundColor: colors.lightGrey,
+  stepInactiveHoverDotColor: colors.greyDark,
+  stepInactiveHoverBackgroundColor: colors.greyLight,
   stepActiveBackgroundColor: colors.black,
   stepActiveDotsColor: colors.green,
   stepDoneBackgroundColor: colors.green,
@@ -70,12 +70,12 @@ export const BosonTheme = {
 export const CustomTheme = {
   args: {
     ...BASE_ARGS,
-    enabledArrowColor: colors.darkOrange,
+    enabledArrowColor: colors.orangeDark,
     disabledArrowColor: colors.orange,
     stepInactiveDotColor: colors.arsenic,
     stepInactiveBackgroundColor: colors.blue,
     stepInactiveHoverDotColor: colors.cyan,
-    stepInactiveHoverBackgroundColor: colors.darkRed,
+    stepInactiveHoverBackgroundColor: colors.redDark,
     stepActiveBackgroundColor: colors.torquise,
     stepActiveDotsColor: colors.froly,
     stepDoneBackgroundColor: "#eeee00",

package/src/stories/roblox/ConnectRoblox.stories.tsx

@@ -0,0 +1,83 @@
+import {
+  ConnectRoblox,
+  ConnectRobloxProps
+} from "../../components/widgets/roblox/components/ConnectRoblox";
+import React from "react";
+import { Meta } from "@storybook/react";
+import { createGlobalStyle } from "styled-components";
+import { EnvironmentType, getEnvConfigs } from "@bosonprotocol/core-sdk";
+import { CommitWidgetProviders } from "../../components/widgets/commit/CommitWidgetProviders";
+const envName =
+  (process.env.STORYBOOK_DATA_ENV_NAME as EnvironmentType) || "testing";
+const envConfig = getEnvConfigs(envName);
+const configId = envConfig[0].configId;
+const GlobalStyle = createGlobalStyle`
+    #storybook-root, [scale="1"] {
+        width: 100%;
+    }
+`;
+
+const ConnectRobloxWrapper = (props: ConnectRobloxProps) => {
+  return (
+    <CommitWidgetProviders
+      configId={configId}
+      envName={envName}
+      ipfsGateway={process.env.STORYBOOK_DATA_IPFS_GATEWAY}
+      ipfsProjectId={process.env.STORYBOOK_DATA_IPFS_PROJECT_ID}
+      ipfsProjectSecret={process.env.STORYBOOK_DATA_IPFS_PROJECT_SECRET}
+      walletConnectProjectId={
+        process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID ?? ""
+      }
+      withCustomReduxContext={false}
+      withReduxProvider={true}
+      withWeb3React={true}
+      withGlobalStyle={false}
+      sendDeliveryInfoThroughXMTP
+      roundness="min"
+    >
+      <ConnectRoblox {...props} />
+    </CommitWidgetProviders>
+  );
+};
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Visual Components/Roblox/ConnectRoblox",
+  component: ConnectRobloxWrapper,
+  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: {},
+  argTypes: {},
+  decorators: [
+    (Story) => {
+      return (
+        <>
+          <GlobalStyle />
+          <Story />
+        </>
+      );
+    }
+  ]
+} satisfies Meta<typeof ConnectRobloxWrapper>;
+
+const BASE_ARGS = {} as const;
+
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+export const Base = {
+  args: {
+    ...BASE_ARGS,
+    sellerId: "4",
+    step3: {
+      titleForMobile: "Exclusives",
+      buttonText: "Step 3 button text",
+      callback: () => {
+        console.log("Step 3 button clicked");
+      },
+      title: "Step 3 title",
+      subtitle: "Step 3 subtitle"
+    }
+  } satisfies ConnectRobloxProps
+};

package/src/stories/selects/CountrySelect.stories.tsx

@@ -1,9 +1,8 @@
-import { fn } from "@storybook/test";
 import {
   CountryCode,
   CountrySelect,
   CountrySelectProps,
-  theme
+  colors
 } from "../../index";
 import React from "react";
 import { Meta } from "@storybook/react";
@@ -28,7 +27,7 @@ const countries: CountryCode[] = [
   "KR",
   "LU"
 ];
-const colors = theme.colors.light;
+
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
   title: "Visual Components/Selects/CountrySelect",
@@ -39,7 +38,7 @@ export default {
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ["autodocs"],
-  args: { onClick: fn() },
+  // args: { onClick: fn() },
   argTypes: {
     name: {
       table: {

package/src/stories/selects/Select.stories.tsx

@@ -1,5 +1,5 @@
 import { fn } from "@storybook/test";
-import { Select, SelectProps, theme } from "../../index";
+import { colors, Select, SelectProps } from "../../index";
 import React from "react";
 import { Meta } from "@storybook/react";
 import { Formik } from "formik";
@@ -7,7 +7,6 @@ import { Formik } from "formik";
 const inputWithErrors = "With error";
 const inputName = "test";
 
-const colors = theme.colors.light;
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
   title: "Visual Components/Selects/Select",

package/src/stories/ui/ThemedButton.stories.tsx

@@ -56,8 +56,7 @@ export const Primary = {
     ...BASE_ARGS,
     disabled: false,
     isLoading: false,
-    themeVal: "primary",
-    withBosonStyle: false
+    themeVal: "primary"
   }
 };
 
@@ -66,8 +65,7 @@ export const BosonPrimary = {
     ...BASE_ARGS,
     disabled: false,
     isLoading: false,
-    themeVal: "bosonPrimary",
-    withBosonStyle: true
+    themeVal: "bosonPrimary"
   }
 };
 
@@ -76,8 +74,7 @@ export const Secondary = {
     ...BASE_ARGS,
     disabled: false,
     isLoading: false,
-    themeVal: "secondary",
-    withBosonStyle: false
+    themeVal: "secondary"
   }
 };
 
@@ -86,8 +83,7 @@ export const BosonSecondary = {
     ...BASE_ARGS,
     disabled: false,
     isLoading: false,
-    themeVal: "secondary",
-    withBosonStyle: true
+    themeVal: "secondary"
   }
 };
 
@@ -96,7 +92,6 @@ export const AccentFiil = {
     ...BASE_ARGS,
     disabled: false,
     isLoading: false,
-    themeVal: "accentFill",
-    withBosonStyle: true
+    themeVal: "accentFill"
   }
 };