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

package/src/index.tsx

@@ -33,6 +33,7 @@ export * from "./components/currencyDisplay/CurrencyDisplay";
 export * from "./components/exchangeCard/ExchangeCard";
 export * from "./components/image/Image";
 export * from "./components/ui/IpfsImage";
+export { Video, VideoProps } from "./components/ui/Video";
 export * from "./components/ui/loading/Loading";
 export * from "./components/productCard/ProductCard";
 export * from "./components/productCard/const";
@@ -71,6 +72,7 @@ export * from "./components/ui/MuteButton";
 export * from "./components/ui/CardCTA";
 export * from "./components/form";
 export * from "./lib/magicLink/logout";
+export * from "./lib/bytes/bytesToSize";
 export * from "./lib/magicLink/provider";
 export * from "./lib/const/networks";
 export * from "./lib/errors/transactions";

package/src/lib/bytes/bytesToSize.ts

@@ -1,4 +1,4 @@
-export default function bytesToSize(bytes: number) {
+export function bytesToSize(bytes: number) {
   const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
   const i = Math.floor(Math.log(bytes) / Math.log(1024));
   return `${Math.round(bytes / Math.pow(1024, i))} ${sizes[i]}`;

package/src/lib/const/chainInfo.ts

@@ -5,7 +5,7 @@ import polygonMaticLogo from "../../assets/svg/polygon-matic-logo.svg";
 import polygonSquareLogoUrl from "../../assets/svg/polygon_square_logo.svg";
 import ms from "ms";
 
-import { SupportedL1ChainId, SupportedL2ChainId } from "./chains";
+import { LocalChainId, SupportedL1ChainId, SupportedL2ChainId } from "./chains";
 
 export const AVERAGE_L1_BLOCK_TIME = ms(`12s`);
 
@@ -113,6 +113,15 @@ const CHAIN_INFO: ChainInfoMap = {
       symbol: "aMATIC",
       decimals: 18
     }
+  },
+  [LocalChainId]: {
+    networkType: NetworkType.L1,
+    docs: "https://docs.uniswap.org/",
+    explorer: "https://etherscan.io/",
+    infoLink: "https://info.uniswap.org/#/",
+    label: "Local",
+    logoUrl: ethereumLogoUrl,
+    nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 }
   }
 } as const;
 

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

@@ -80,3 +80,11 @@ export const Base = {
     ...BASE_ARGS
   }
 };
+
+export const VideoOnly = {
+  args: {
+    ...BASE_ARGS,
+    accept: "video/mp4",
+    withUpload: true
+  }
+};

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

@@ -0,0 +1,113 @@
+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 { 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
+export default {
+  title: "Visual Components/Inputs/BaseCheckbox",
+  component: BaseCheckbox,
+  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" },
+    text: { control: "text" }
+  },
+  // 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 }>
+          onSubmit={() => {
+            //
+          }}
+          initialErrors={
+            name.toLowerCase().includes("error")
+              ? { [inputName]: "Checkbox error!" }
+              : {}
+          }
+          initialValues={{ [inputName]: "" }}
+          initialTouched={{ [inputName]: true }}
+        >
+          <Story />
+        </Formik>
+      );
+    }
+  ] satisfies Meta<typeof BaseCheckbox>["decorators"]
+} satisfies Meta<typeof BaseCheckbox>;
+
+const BASE_ARGS = {
+  name: inputName,
+  text: "text next to checkbox via 'text' prop",
+  theme: bosonCheckboxTheme
+};
+
+export const Simple = {
+  args: {
+    ...BASE_ARGS
+  }
+};
+
+export const CustomTheme = {
+  name: "With custom theme",
+  args: {
+    ...BASE_ARGS,
+    theme: {
+      backgroundColor: colors.blue,
+      borderColor: colors.green,
+      color: colors.red,
+      borderRadius: "4px",
+      hover: {
+        borderColor: colors.red,
+        backgroundColor: colors.primary,
+        color: colors.darkRed
+      },
+      checked: {
+        borderColor: "#ff00d4",
+        color: "#ff00d4",
+        backgroundColor: "#ff00d444"
+      },
+      error: {
+        color: colors.orange,
+        borderColor: colors.bosonSkyBlue,
+        backgroundColor: colors.cyan
+      }
+    } satisfies BaseCheckboxProps["theme"]
+  }
+};
+export const InputWithError = {
+  name: "With error",
+  args: {
+    ...BASE_ARGS
+  }
+};
+
+export const CustomThemeWithError = {
+  name: "With custom theme and error",
+  args: {
+    ...BASE_ARGS,
+    theme: {
+      backgroundColor: colors.blue,
+      borderColor: colors.green,
+      hover: {
+        borderColor: colors.red,
+        backgroundColor: colors.grey
+      },
+      error: {
+        color: colors.orange,
+        borderColor: colors.bosonSkyBlue,
+        backgroundColor: colors.cyan
+      }
+    } satisfies BaseCheckboxProps["theme"]
+  }
+};

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

@@ -74,7 +74,14 @@ export default {
           initialValues={{ [inputName]: "" }}
           initialTouched={{ [inputName]: true }}
         >
-          <Story args={{ ...args, name: inputName }} />
+          {({ values }) => {
+            return (
+              <>
+                <Story args={{ ...args, name: inputName }} />
+                <div>selected value: {JSON.stringify(values)}</div>
+              </>
+            );
+          }}
         </Formik>
       );
     }
@@ -95,16 +102,47 @@ export const CustomTheme = {
   args: {
     ...BASE_ARGS,
     theme: {
-      controlHeight: "45px",
-      borderRadius: "30px",
-      controlBackground: colors.lightGrey,
-      controlFocusBorderColor: colors.blue,
-      controlHoverBorderColor: colors.red,
-      controlUnfocusedBorderColor: colors.border,
-      selectedOptionBackground: colors.lightGrey,
-      selectedOptionColor: colors.orange,
-      unselectedOptionBackground: colors.white,
-      unselectedOptionColor: colors.black
+      control: {
+        color: "yellow",
+        height: undefined,
+        background: colors.arsenic,
+        borderRadius: "16px",
+        padding: "3px",
+        boxShadow: "1px 2px 3px 4px blue",
+        borderWidth: undefined,
+        border: "1px solid green",
+        focus: {
+          border: "1px solid red"
+        },
+        hover: {
+          borderColor: "purple",
+          borderWidth: "1px"
+        },
+        error: {
+          border: "1px solid orange"
+        }
+      },
+      option: {
+        opacity: "1",
+        background: "pink",
+        color: "brown",
+        selected: {
+          background: "yellow",
+          color: "cyan"
+        },
+        disabled: {
+          opacity: "0.8"
+        }
+      },
+      placeholder: {
+        color: "red"
+      },
+      input: {
+        color: "cyan"
+      },
+      singleValue: {
+        color: "orange"
+      }
     }
   } satisfies CountrySelectProps
 };

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

@@ -0,0 +1,117 @@
+import { fn } from "@storybook/test";
+import { Select, SelectProps, theme } from "../../index";
+import React from "react";
+import { Meta } from "@storybook/react";
+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",
+  component: Select,
+  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: { onChange: fn() },
+  argTypes: {
+    name: {
+      table: {
+        disable: true // remove name input in controls
+      }
+    },
+    theme: {
+      table: {
+        disable: true // remove name input in controls
+      }
+    },
+    disabled: { control: "boolean" },
+    placeholder: { control: "text" }
+  },
+  decorators: [
+    (Story, { args, name }) => {
+      return (
+        <Formik<{ [inputName]: unknown }>
+          onSubmit={() => {
+            //
+          }}
+          initialErrors={
+            name === inputWithErrors
+              ? { [inputName]: "There has been an error!" }
+              : {}
+          }
+          initialValues={{ [inputName]: "" }}
+          initialTouched={{ [inputName]: true }}
+        >
+          <Story args={{ ...args, name: inputName }} />
+        </Formik>
+      );
+    }
+  ]
+} satisfies Meta<typeof Select>;
+
+const BASE_ARGS = {
+  name: inputName,
+  options: [
+    { label: "first option", value: "1" },
+    { label: "second option", value: "2" },
+    { label: "third option", value: "3" }
+  ]
+} as SelectProps;
+
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+export const Base = {
+  args: { ...BASE_ARGS } satisfies SelectProps
+};
+
+export const CustomTheme = {
+  args: {
+    ...BASE_ARGS,
+    theme: {
+      control: {
+        background: colors.arsenic,
+        borderRadius: "16px",
+        padding: "3px",
+        boxShadow: "1px 2px 3px 4px blue",
+        borderWidth: undefined,
+        border: "1px solid green",
+        focus: {
+          border: "1px solid red"
+        },
+        hover: {
+          borderColor: undefined,
+          borderWidth: undefined,
+          border: "1px solid purple"
+        },
+        error: {
+          border: "1px solid orange"
+        }
+      },
+      option: {
+        opacity: "1",
+        background: "pink",
+        color: "brown",
+        selected: {
+          background: "yellow",
+          color: "cyan"
+        },
+        disabled: {
+          opacity: "0.8"
+        }
+      }
+    }
+  } satisfies SelectProps
+};
+
+export const WithError = {
+  name: inputWithErrors,
+  args: {
+    ...BASE_ARGS,
+    placeholder: "this is a placeholder"
+  } satisfies SelectProps
+};