@bosonprotocol/react-kit 0.32.0-alpha.8 → 0.32.0

package/src/hooks/images/useFileImage.ts

@@ -0,0 +1,24 @@
+import { useQuery } from "react-query";
+import { loadAndSetImagePromise } from "../../lib/base64/base64";
+
+type UseFileImageProps = {
+  file: File | undefined;
+};
+
+export function useFileImage(
+  { file }: UseFileImageProps,
+  options: { enabled: boolean }
+) {
+  return useQuery(
+    ["useFileImage", file],
+    async () => {
+      if (!file) {
+        return;
+      }
+      return await loadAndSetImagePromise(file);
+    },
+    {
+      enabled: !!file && options.enabled
+    }
+  );
+}

package/src/hooks/images/useIpfsImage.ts

@@ -0,0 +1,27 @@
+import { useQuery } from "react-query";
+import { fetchImageAsBase64 } from "../../lib/base64/base64";
+import { getImageMetadata } from "../../lib/images/images";
+
+type UseIpfsImageProps = {
+  url: string;
+};
+
+export function useIpfsImage(
+  { url }: UseIpfsImageProps,
+  options: { enabled: boolean }
+) {
+  return useQuery(
+    ["useIpfsImage", url],
+    async () => {
+      const result = await fetchImageAsBase64(url);
+      const metadata = await getImageMetadata(result.base64);
+      return {
+        ...result,
+        ...metadata
+      };
+    },
+    {
+      enabled: options.enabled
+    }
+  );
+}

package/src/index.tsx

@@ -82,3 +82,6 @@ export * from "./components/wallet2/web3Provider/index";
 export * from "./components/wallet2/accountDrawer/index";
 export * from "./components/portal/Portal";
 export * from "./components/error/ErrorMessage";
+export * from "./components/error/SimpleError";
+export * from "./components/step/MultiSteps";
+export * from "./components/ipfs/IpfsProvider";

package/src/lib/base64/base64.ts

@@ -3,7 +3,7 @@ import { IpfsMetadataStorage } from "@bosonprotocol/ipfs-storage";
 export async function fetchImageAsBase64(imageUrl: string) {
   const response = await fetch(imageUrl);
   const blob = await response.blob();
-  return blobToBase64(blob);
+  return { base64: await blobToBase64(blob), blob };
 }
 
 export function fromBase64ToBinary(base64: string): Buffer {

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

@@ -0,0 +1,82 @@
+import { fn } from "@storybook/test";
+import React from "react";
+import { Meta } from "@storybook/react";
+import { Upload } from "../..";
+import { EnvironmentProvider } from "../../components/environment/EnvironmentProvider";
+import { IpfsProvider } from "../../components/ipfs/IpfsProvider";
+import { Formik } from "formik";
+import { QueryClientProviderCustom } from "../../components/queryClient/withQueryClientProvider";
+import {
+  bosonButtonThemeKeys,
+  bosonButtonThemes
+} from "../../components/ui/ThemedButton";
+const name = "upload";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Visual Components/Buttons/Upload",
+  component: Upload,
+  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: {
+    name: {
+      table: {
+        disabled: true
+      }
+    },
+    accept: {
+      control: "select",
+      options: ["image/*", "video/*", "image/*,video/*"]
+    },
+    disabled: { control: "boolean" },
+    withEditor: { control: "boolean" },
+    // @ts-expect-error saveButtonThemeKey is not a valid prop name of Upload but saveButtonTheme is so we get the theme from the key
+    saveButtonThemeKey: {
+      control: "select",
+      options: bosonButtonThemeKeys
+    },
+    placeholder: { control: "text" },
+    width: { control: "number" },
+    height: { control: "number" },
+    borderRadius: { control: "number" }
+  },
+  decorators: [
+    (Story, { args }) => {
+      return (
+        <QueryClientProviderCustom>
+          <EnvironmentProvider configId="testing-80002-0" envName="testing">
+            <IpfsProvider>
+              <Formik initialValues={{ [name]: [] }} onSubmit={console.log}>
+                <Story
+                  args={{
+                    ...args,
+                    saveButtonTheme: bosonButtonThemes({
+                      withBosonStyle: false
+                      // @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]
+                  }}
+                />
+              </Formik>
+            </IpfsProvider>
+          </EnvironmentProvider>
+        </QueryClientProviderCustom>
+      );
+    }
+  ]
+} satisfies Meta<typeof Upload>;
+
+const BASE_ARGS = {
+  name
+} as const;
+
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+export const Base = {
+  args: {
+    ...BASE_ARGS
+  }
+};

package/src/stories/form/{Input.stories.tsx → BaseInput.stories.tsx}

@@ -8,7 +8,7 @@ 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/Input",
+  title: "Visual Components/Inputs/BaseInput",
   component: Input,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout

package/src/stories/form/BaseTextArea.stories.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { BaseTextArea } from "../../components/form";
+import { Formik } from "formik";
+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/BaseTextArea",
+  component: BaseTextArea,
+  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, { name }) => {
+      return (
+        <Formik<{ [inputName]: unknown }>
+          onSubmit={() => {
+            //
+          }}
+          initialErrors={
+            name === inputWithErrors
+              ? { [inputName]: "Input error before typing!" }
+              : {}
+          }
+          initialValues={{ [inputName]: "" }}
+          initialTouched={{ [inputName]: true }}
+        >
+          <Story />
+        </Formik>
+      );
+    }
+  ] satisfies Meta<typeof BaseTextArea>["decorators"]
+} satisfies Meta<typeof BaseTextArea>;
+
+export const Simple = {
+  args: {
+    name: inputName,
+    placeholder: "this is a placeholder"
+  }
+};
+
+export const TextAreaWithError = {
+  name: "With error",
+  args: {
+    name: inputName,
+    placeholder: "this is a placeholder"
+  }
+};

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

@@ -0,0 +1,86 @@
+import { fn } from "@storybook/test";
+import { MultiSteps, theme } 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",
+  component: MultiSteps,
+  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: {
+    callback: fn()
+  },
+  argTypes: {
+    disableInactiveSteps: { control: "boolean" },
+    isRightArrowEnabled: { control: "boolean" },
+    hideArrows: { control: "boolean" },
+    active: { control: "number" },
+    enabledArrowColor: { control: "color" },
+    disabledArrowColor: { control: "color" },
+    stepInactiveDotColor: { control: "color" },
+    stepInactiveBackgroundColor: { control: "color" },
+    stepInactiveHoverDotColor: { control: "color" },
+    stepInactiveHoverBackgroundColor: { control: "color" },
+    stepActiveBackgroundColor: { control: "color" },
+    stepActiveDotsColor: { control: "color" },
+    stepDoneBackgroundColor: { control: "color" },
+    stepDoneCheckColor: { control: "color" },
+    stepDoneHoverBackgroundColor: { control: "color" },
+    stepDoneHoverCheckColor: { control: "color" }
+  },
+  decorators: [
+    (Story) => {
+      return <Story />;
+    }
+  ]
+} satisfies Meta<typeof MultiSteps>;
+
+const BASE_ARGS = {
+  active: 1,
+  data: [
+    { name: "Create profile", steps: 2 },
+    { name: "Summary of profile creation", steps: 1 }
+  ],
+  enabledArrowColor: colors.darkGrey,
+  disabledArrowColor: colors.lightArrowColor,
+  stepInactiveDotColor: "#d3d5db",
+  stepInactiveBackgroundColor: colors.white,
+  stepInactiveHoverDotColor: colors.darkGrey,
+  stepInactiveHoverBackgroundColor: colors.lightGrey,
+  stepActiveBackgroundColor: colors.black,
+  stepActiveDotsColor: colors.green,
+  stepDoneBackgroundColor: colors.green,
+  stepDoneCheckColor: colors.black,
+  stepDoneHoverBackgroundColor: colors.black,
+  stepDoneHoverCheckColor: colors.green
+} as const;
+
+export const BosonTheme = {
+  args: {
+    ...BASE_ARGS
+  }
+};
+
+export const CustomTheme = {
+  args: {
+    ...BASE_ARGS,
+    enabledArrowColor: colors.darkOrange,
+    disabledArrowColor: colors.orange,
+    stepInactiveDotColor: colors.arsenic,
+    stepInactiveBackgroundColor: colors.blue,
+    stepInactiveHoverDotColor: colors.cyan,
+    stepInactiveHoverBackgroundColor: colors.darkRed,
+    stepActiveBackgroundColor: colors.torquise,
+    stepActiveDotsColor: colors.froly,
+    stepDoneBackgroundColor: "#eeee00",
+    stepDoneCheckColor: "#00ff00",
+    stepDoneHoverBackgroundColor: "#123456",
+    stepDoneHoverCheckColor: "#034f80"
+  }
+};

package/dist/cjs/components/form/Textarea.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { TextareaProps } from "./types";
-export default function Textarea({ name, ...props }: TextareaProps): JSX.Element;
-//# sourceMappingURL=Textarea.d.ts.map

package/dist/cjs/components/form/Textarea.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Textarea.tsx"],"names":[],"mappings":";AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,eAWjE"}

package/dist/cjs/components/form/Textarea.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../src/components/form/Textarea.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,mCAAkC;AAClC,kDAA0B;AAE1B,oDAA4B;AAC5B,iDAA+C;AAG/C,SAAwB,QAAQ,CAAC,EAAiC;QAAjC,EAAE,IAAI,OAA2B,EAAtB,KAAK,cAAhB,QAAkB,CAAF;IAC/C,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,IAAA,iBAAQ,EAAC,IAAI,CAAC,CAAC;IACrC,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IAClE,MAAM,YAAY,GAChB,OAAO,YAAY,KAAK,OAAO,QAAQ,IAAI,YAAY,KAAK,EAAE,CAAC;IACjE,OAAO,CACL;QACE,8BAAC,4BAAa,kBAAC,KAAK,EAAE,YAAY,IAAM,KAAK,EAAM,KAAK,EAAI;QAC5D,8BAAC,eAAK,IAAC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,GAAI,CACtD,CACJ,CAAC;AACJ,CAAC;AAXD,2BAWC"}

package/dist/esm/components/form/Textarea.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { TextareaProps } from "./types";
-export default function Textarea({ name, ...props }: TextareaProps): JSX.Element;
-//# sourceMappingURL=Textarea.d.ts.map

package/dist/esm/components/form/Textarea.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Textarea.tsx"],"names":[],"mappings":";AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,eAWjE"}

package/dist/esm/components/form/Textarea.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../src/components/form/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAG/C,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAiB;IAChE,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IAClE,MAAM,YAAY,GAChB,OAAO,YAAY,KAAK,OAAO,QAAQ,IAAI,YAAY,KAAK,EAAE,CAAC;IACjE,OAAO,CACL;QACE,oBAAC,aAAa,IAAC,KAAK,EAAE,YAAY,KAAM,KAAK,KAAM,KAAK,GAAI;QAC5D,oBAAC,KAAK,IAAC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,GAAI,CACtD,CACJ,CAAC;AACJ,CAAC"}