@bosonprotocol/react-kit 0.34.0-alpha.9 → 0.34.0

package/src/stories/ConnectWallet.stories.tsx

@@ -60,7 +60,10 @@ const Component = ({
   walletHoverFocusBackgroundColor,
   walletHoverColor,
   magicLoginButtonThemeKey,
+  connectionErrorTryAgainButtonThemeKey,
+  connectionErrorBackToWalletSelectionButtonThemeKey,
   magicLoginButtonBorderRadiusPx,
+  withMagicLogin,
   onUserDisconnect
 }: {
   showStatusIcon: boolean;
@@ -84,7 +87,10 @@ const Component = ({
   walletHoverFocusBackgroundColor: string | undefined;
   walletHoverColor: string | undefined;
   magicLoginButtonThemeKey: string | undefined;
+  connectionErrorTryAgainButtonThemeKey: string;
+  connectionErrorBackToWalletSelectionButtonThemeKey: string;
   magicLoginButtonBorderRadiusPx: string | undefined;
+  withMagicLogin: boolean | undefined;
   onUserDisconnect: () => unknown;
 }) => {
   return (
@@ -175,6 +181,7 @@ const Component = ({
                     disconnectColor={accountDrawerDisconnectColor}
                     onUserDisconnect={onUserDisconnect}
                     walletModalProps={{
+                      withMagicLogin,
                       optionProps: {
                         backgroundColor: walletBackgroundColor,
                         color: walletColor,
@@ -196,6 +203,19 @@ const Component = ({
                           }
                         }
                       },
+                      connectionErrorProps: {
+                        tryAgainTheme: connectionErrorTryAgainButtonThemeKey
+                          ? bosonButtonThemes({ withBosonStyle: false })[
+                              connectionErrorTryAgainButtonThemeKey
+                            ]
+                          : successButtonTheme,
+                        backToWalletSelectionTheme:
+                          connectionErrorBackToWalletSelectionButtonThemeKey
+                            ? bosonButtonThemes({ withBosonStyle: false })[
+                                connectionErrorBackToWalletSelectionButtonThemeKey
+                              ]
+                            : successButtonTheme
+                      },
                       PrivacyPolicy: () => <div>privacy policy</div>
                     }}
                   />
@@ -245,6 +265,14 @@ export default {
     magicLoginButtonThemeKey: {
       control: "select",
       options: bosonButtonThemeKeys
+    },
+    connectionErrorTryAgainButtonThemeKey: {
+      control: "select",
+      options: bosonButtonThemeKeys
+    },
+    connectionErrorBackToWalletSelectionButtonThemeKey: {
+      control: "select",
+      options: bosonButtonThemeKeys
     }
   },
   decorators: [
@@ -279,7 +307,9 @@ export const BosonTheme = {
     walletColor: colors.white,
     walletHoverFocusBackgroundColor: colors.black,
     walletHoverColor: colors.white,
-    magicLoginButtonThemeKey: undefined
+    magicLoginButtonThemeKey: undefined,
+    connectionErrorTryAgainButtonThemeKey: "orangeInverse",
+    connectionErrorBackToWalletSelectionButtonThemeKey: "orangeInverse"
   }
 };
 
@@ -304,7 +334,10 @@ export const CustomTheme = {
     walletHoverFocusBackgroundColor: "#e89f0e",
     walletHoverColor: "#ff0000",
     magicLoginButtonThemeKey: "orangeInverse",
+    connectionErrorTryAgainButtonThemeKey: "orangeInverse",
+    connectionErrorBackToWalletSelectionButtonThemeKey: "orangeInverse",
     magicLoginButtonBorderRadiusPx: "50",
+    withMagicLogin: true,
     showStatusIcon: false,
     connectWalletChild: <>Connect</>,
     rightConnectedChild: <Wallet />

package/src/stories/ProductCard.stories.tsx

@@ -39,13 +39,7 @@ ProductCardPrimary.args = {
     "https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80",
   avatarName: (
     <>
-      <span
-        style={{
-          color: "green"
-        }}
-      >
-        JSON Doe
-      </span>
+      <span>JSON Doe</span>
     </>
   ),
   asterisk: true,

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { Meta } from "@storybook/react";
-import { QueryClientProviderCustom, Upload } from "../..";
+import { BaseUploadProps, QueryClientProviderCustom, Upload } from "../..";
 import { EnvironmentProvider } from "../../components/environment/EnvironmentProvider";
 import { IpfsProvider } from "../../components/ipfs/IpfsProvider";
 import { Formik } from "formik";
@@ -20,7 +20,6 @@ export default {
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ["autodocs"],
-  // args: { onClick: fn() },
   argTypes: {
     name: {
       table: {
@@ -69,20 +68,31 @@ export default {
 } satisfies Meta<typeof Upload>;
 
 const BASE_ARGS = {
-  name
-} as const;
+  name,
+  placeholder: "",
+  withEditor: false,
+  saveButtonTheme: undefined
+} as const satisfies BaseUploadProps;
 
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 export const Base = {
   args: {
     ...BASE_ARGS
-  }
+  } satisfies BaseUploadProps
 };
 
 export const VideoOnly = {
   args: {
     ...BASE_ARGS,
     accept: "video/mp4",
-    withUpload: true
-  }
+    withUpload: false
+  } satisfies BaseUploadProps
+};
+
+export const PdfOnly = {
+  args: {
+    ...BASE_ARGS,
+    accept: "application/pdf",
+    placeholder: "Upload pdf"
+  } satisfies BaseUploadProps
 };

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

@@ -111,3 +111,11 @@ export const CustomThemeWithError = {
     } satisfies BaseCheckboxProps["theme"]
   }
 };
+
+export const SimpleWithChildren = {
+  name: "With error with children",
+  args: {
+    ...BASE_ARGS,
+    children: <div>text in paragraph</div>
+  }
+};

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

@@ -28,7 +28,8 @@ const BASE_ARGS = {
   envName,
   configId: envConfig[0].configId,
   walletConnectProjectId: process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID,
-  withCustomReduxContext: false
+  withCustomReduxContext: false,
+  withMagicLink: true
 } as const;
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 Commit.args = {

package/src/theme.ts

@@ -6,6 +6,7 @@ export const theme = {
       primary: "#02F3A2",
       secondary: "#7829F9",
       accent: "#7829F9",
+      darkNavy: "#1E1E1E",
       black: "#09182C",
       lightGrey: "#F1F3F9",
       darkGrey: "#556072",
@@ -30,7 +31,8 @@ export const theme = {
       cyan: "#00FFFF",
       lightArrowColor: "#dedfe3",
       darkGreyTimeStamp: "#E8EAF1",
-      lightGrey2: "#eff0f7"
+      lightGrey2: "#eff0f7",
+      greyText: "rgba(28, 13, 24, 0.75)"
     }
   },
   mobile: "768px",

package/src/types/helpers.ts

@@ -13,30 +13,6 @@ type Falsy = false | 0 | "" | null | undefined;
 
 export const isTruthy = <T>(x: T | Falsy): x is T => !!x;
 
-//#region Omit doesnt work well when using it with a type that has [x:string]: any, in that case there is no autocomplete: https://github.com/microsoft/TypeScript/issues/31153
-type KnownKeys<T> = {
-  [K in keyof T]: string extends K ? never : number extends K ? never : K;
-} extends { [_ in keyof T]: infer U }
-  ? {} extends U
-    ? never
-    : U
-  : never; // I don't know why not just U work here, but ({} extends U ? never : U) work
-
-type OmitFromKnownKeys<T, K extends keyof T> =
-  KnownKeys<T> extends infer U
-    ? [U] extends [keyof T]
-      ? Pick<T, Exclude<U, K>>
-      : never
-    : never;
-export type ExtendedOmit<T, K extends keyof T> = OmitFromKnownKeys<T, K> &
-  (string extends K
-    ? {}
-    : string extends keyof T
-      ? { [n: string]: T[Exclude<keyof T, number>] }
-      : {}) & // support number property
-  (number extends K
-    ? {}
-    : number extends keyof T
-      ? { [n: number]: T[Exclude<keyof T, string>] }
-      : {}); // support number property
-//#endregion
+export type AddDollarPrefixToKeys<T> = {
+  [K in keyof T as `$${string & K}`]: T[K];
+};