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

package/src/components/form/index.ts

@@ -7,5 +7,5 @@ export { default as Input, InputProps } from "./Input";
 export { default as Phone } from "./Phone";
 export { default as Select } from "./Select";
 export * from "./BaseTagsInput";
-export { default as Textarea } from "./Textarea";
+export * from "./BaseTextArea";
 export { default as Upload } from "./Upload/Upload";

package/src/components/form/types.ts

@@ -1,4 +1,5 @@
 import { SingleValue } from "react-select";
+import type { TextAreaTheme } from "./Field.styles";
 
 export interface BaseProps {
   name: string;
@@ -19,7 +20,7 @@ export interface CheckboxProps extends BaseProps {
 }
 
 export type TextareaProps = BaseProps &
-  React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+  React.TextareaHTMLAttributes<HTMLTextAreaElement> & { theme?: TextAreaTheme };
 
 export interface ErrorProps {
   display?: boolean;

package/src/components/license/License.tsx

@@ -7,7 +7,7 @@ import remarkGfm from "remark-gfm";
 import { useRenderTemplate } from "../../hooks/useRenderTemplate";
 import { ProgressStatus } from "../../lib/progress/progressStatus";
 import { useBosonContext } from "../boson/BosonProvider";
-import SimpleError from "../error/SimpleError";
+import { SimpleError } from "../error/SimpleError";
 import Loading from "../ui/loading/LoadingWrapper";
 
 interface Props {

package/src/components/modal/components/Redeem/Confirmation/Confirmation.tsx

@@ -24,7 +24,7 @@ import {
   IRedeemButton
 } from "../../../../cta/exchange/RedeemButton";
 import { useEnvContext } from "../../../../environment/EnvironmentContext";
-import SimpleError from "../../../../error/SimpleError";
+import { SimpleError } from "../../../../error/SimpleError";
 import SuccessTransactionToast from "../../../../toasts/SuccessTransactionToast";
 import { Grid } from "../../../../ui/Grid";
 import { Spinner } from "../../../../ui/loading/Spinner";

package/src/components/modal/components/Redeem/ExchangeView/cancellation/CancelExchange.tsx

@@ -18,7 +18,7 @@ import {
   ICancelButton
 } from "../../../../../cta/exchange/CancelButton";
 import { useEnvContext } from "../../../../../environment/EnvironmentContext";
-import SimpleError from "../../../../../error/SimpleError";
+import { SimpleError } from "../../../../../error/SimpleError";
 import SuccessTransactionToast from "../../../../../toasts/SuccessTransactionToast";
 import { Grid } from "../../../../../ui/Grid";
 import ThemedButton from "../../../../../ui/ThemedButton";

package/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucher.tsx

@@ -16,7 +16,7 @@ import {
   IExpireButton
 } from "../../../../../cta/exchange/ExpireButton";
 import { useEnvContext } from "../../../../../environment/EnvironmentContext";
-import SimpleError from "../../../../../error/SimpleError";
+import { SimpleError } from "../../../../../error/SimpleError";
 import { Grid } from "../../../../../ui/Grid";
 import ThemedButton from "../../../../../ui/ThemedButton";
 import { Typography } from "../../../../../ui/Typography";

package/src/components/modal/components/common/VariationSelects.tsx

@@ -12,7 +12,7 @@ import { isNumeric } from "../../../../lib/numbers/numbers";
 import { theme } from "../../../../theme";
 import { isTruthy } from "../../../../types/helpers";
 import { VariantV1, Variation } from "../../../../types/variants";
-import SimpleError from "../../../error/SimpleError";
+import { SimpleError } from "../../../error/SimpleError";
 import { Select } from "../../../form";
 import { SelectDataProps } from "../../../form/types";
 import { Grid } from "../../../ui/Grid";

package/src/components/step/MultiSteps.tsx

@@ -0,0 +1,187 @@
+import { ArrowLeft, ArrowRight } from "phosphor-react";
+import React, { useEffect, useRef, useState } from "react";
+
+import { Grid } from "../ui/Grid";
+import { Step, StepColorProps, StepState } from "./Step";
+import { MultiStepStyle, MultiStepWrapper, StepWrapper } from "./Step.styles";
+import { useBreakpoints } from "../../hooks/useBreakpoints";
+import { CSSProperties } from "styled-components";
+import { theme } from "../../theme";
+const colors = theme.colors.light;
+type StepData = {
+  name?: string;
+  steps: number;
+};
+
+export type MultiStepsProps = {
+  disableInactiveSteps?: boolean;
+  active?: number;
+  data: Array<StepData> | Readonly<Array<StepData>>;
+  callback?: (cur: number) => void;
+  isRightArrowEnabled?: boolean;
+  enabledArrowColor?: CSSProperties["color"];
+  disabledArrowColor?: CSSProperties["color"];
+  hideArrows?: boolean;
+} & StepColorProps;
+const dataStepsWrapper = "data-steps-wrapper";
+export function MultiSteps({
+  data,
+  active,
+  callback,
+  disableInactiveSteps = false,
+  isRightArrowEnabled = false,
+  hideArrows = false,
+  enabledArrowColor = colors.darkGrey,
+  disabledArrowColor = colors.lightArrowColor,
+  stepInactiveDotColor = "#d3d5db",
+  stepInactiveBackgroundColor = colors.white,
+  stepInactiveHoverDotColor = colors.darkGrey,
+  stepInactiveHoverBackgroundColor = colors.lightGrey,
+  stepActiveBackgroundColor = colors.black,
+  stepActiveDotsColor = colors.green, // TODO: var(--primary) in boson Dapp
+  stepDoneBackgroundColor = colors.green, // TODO: var(--primary) in boson Dapp
+  stepDoneCheckColor = colors.black,
+  stepDoneHoverBackgroundColor = colors.black,
+  stepDoneHoverCheckColor = colors.green, // TODO: var(--primary) in boson Dapp
+  ...props
+}: MultiStepsProps) {
+  const [current, setCurrent] = useState<number>(active || 0);
+  const { isLteS } = useBreakpoints();
+
+  useEffect(() => {
+    setCurrent(active || 0);
+  }, [active]);
+  const stepWidthRef = useRef<number>(50);
+  return (
+    <Grid
+      justifyContent="space-evenly"
+      ref={(element) => {
+        const children = element?.querySelectorAll(`[${dataStepsWrapper}] > *`);
+        children?.forEach((child) => {
+          const isVisible = child.checkVisibility({ checkVisibilityCSS: true });
+          if (isVisible) {
+            if (
+              child.clientWidth &&
+              stepWidthRef.current !== child.clientWidth
+            ) {
+              stepWidthRef.current = child.clientWidth;
+            }
+          }
+        });
+      }}
+    >
+      {isLteS && !hideArrows && (
+        <Grid alignItems="center" width="auto">
+          <ArrowLeft
+            size={32}
+            style={{ cursor: active && callback ? "pointer" : "not-allowed" }}
+            color={active === 0 ? disabledArrowColor : enabledArrowColor}
+            onClick={() => {
+              if (active && callback) {
+                callback(active - 1);
+              }
+            }}
+          />
+        </Grid>
+      )}
+      <div
+        style={{
+          width: `${stepWidthRef.current}px`
+        }}
+      />
+      <MultiStepStyle
+        {...props}
+        {...{ [dataStepsWrapper]: true }}
+        $isLteS={isLteS}
+      >
+        {data.map((el, i) => {
+          const steps = Array.from(Array(el.steps).keys());
+          const newData = data.slice(0, i);
+          const previousLength = newData.reduce(
+            (acc, cur) => (acc += cur.steps),
+            0
+          );
+          if (
+            (isLteS &&
+              current >= previousLength &&
+              current <= previousLength + steps.length) ||
+            !isLteS
+          ) {
+            return (
+              <MultiStepWrapper $isLteS={isLteS} key={`multi_${i}`}>
+                <StepWrapper>
+                  {steps.map((_: number, key: number) => {
+                    const currentKey = previousLength + key;
+                    const state =
+                      currentKey === current
+                        ? StepState.Active
+                        : currentKey < current
+                          ? StepState.Done
+                          : StepState.Inactive;
+
+                    const isStepDisabled =
+                      !callback ||
+                      (disableInactiveSteps && StepState.Inactive === state);
+
+                    if ((isLteS && active === currentKey) || !isLteS) {
+                      return (
+                        <Step
+                          disabled={isStepDisabled}
+                          state={state}
+                          onClick={() => {
+                            if (!isStepDisabled) {
+                              setCurrent(currentKey);
+                              callback(currentKey);
+                            }
+                          }}
+                          key={`multi-step_${currentKey}`}
+                          stepInactiveDotColor={stepInactiveDotColor}
+                          stepInactiveBackgroundColor={
+                            stepInactiveBackgroundColor
+                          }
+                          stepInactiveHoverDotColor={stepInactiveHoverDotColor}
+                          stepInactiveHoverBackgroundColor={
+                            stepInactiveHoverBackgroundColor
+                          }
+                          stepActiveBackgroundColor={stepActiveBackgroundColor}
+                          stepActiveDotsColor={stepActiveDotsColor}
+                          stepDoneBackgroundColor={stepDoneBackgroundColor}
+                          stepDoneCheckColor={stepDoneCheckColor}
+                          stepDoneHoverBackgroundColor={
+                            stepDoneHoverBackgroundColor
+                          }
+                          stepDoneHoverCheckColor={stepDoneHoverCheckColor}
+                        />
+                      );
+                    }
+                    return null;
+                  })}
+                </StepWrapper>
+                <p>{el.name}</p>
+              </MultiStepWrapper>
+            );
+          }
+          return null;
+        })}
+      </MultiStepStyle>
+      {isLteS && !hideArrows && (
+        <Grid alignItems="flex-end" width="auto">
+          <ArrowRight
+            size={32}
+            color={isRightArrowEnabled ? enabledArrowColor : disabledArrowColor}
+            style={{ cursor: isRightArrowEnabled ? "pointer" : "not-allowed" }}
+            onClick={() => {
+              if (
+                isRightArrowEnabled &&
+                typeof active === "number" &&
+                callback
+              ) {
+                callback(active + 1);
+              }
+            }}
+          />
+        </Grid>
+      )}
+    </Grid>
+  );
+}

package/src/components/step/Step.styles.ts

@@ -0,0 +1,209 @@
+import styled, { CSSProperties, css } from "styled-components";
+
+import { transition } from "../../components/ui/styles";
+import { StepState } from "./Step";
+import { theme } from "../../theme";
+const colors = theme.colors.light;
+type StepColorProps = {
+  $stepInactiveDotColor?: CSSProperties["color"];
+  $stepInactiveBackgroundColor?: CSSProperties["color"];
+  $stepInactiveHoverDotColor?: CSSProperties["color"];
+  $stepInactiveHoverBackgroundColor?: CSSProperties["color"];
+  $stepActiveBackgroundColor?: CSSProperties["color"];
+  $stepActiveDotsColor?: CSSProperties["color"];
+  $stepDoneBackgroundColor?: CSSProperties["color"];
+  $stepDoneCheckColor?: CSSProperties["color"];
+  $stepDoneHoverBackgroundColor?: CSSProperties["color"];
+  $stepDoneHoverCheckColor?: CSSProperties["color"];
+};
+export const StepStyle = styled.div<
+  {
+    $state: StepState;
+    disabled: boolean;
+    $isLteS?: boolean;
+  } & StepColorProps
+>`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+
+  min-width: 6rem;
+  height: 1.25rem;
+  ${({ $state, disabled }) =>
+    $state !== StepState.Active &&
+    !disabled &&
+    css`
+      &:hover {
+        cursor: pointer;
+      }
+    `}
+
+  ${({
+    $state,
+    disabled,
+    $stepInactiveBackgroundColor,
+    $stepInactiveDotColor,
+    $stepInactiveHoverBackgroundColor,
+    $stepInactiveHoverDotColor
+  }) =>
+    $state === StepState.Inactive &&
+    css`
+      background: ${$stepInactiveBackgroundColor};
+      ${transition}
+
+      &:before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        border-radius: 50%;
+        background: ${$stepInactiveDotColor};
+
+        ${transition}
+
+        width: 0.25rem;
+        height: 0.25rem;
+      }
+      ${!disabled &&
+      css`
+        &:hover {
+          background: ${$stepInactiveHoverBackgroundColor};
+          &:before {
+            background: ${$stepInactiveHoverDotColor};
+            width: 0.5rem;
+            height: 0.5rem;
+          }
+        }
+      `}
+
+      > div {
+        display: none;
+      }
+    `}
+
+  ${({ $state, $stepActiveBackgroundColor, $stepActiveDotsColor }) =>
+    $state === StepState.Active &&
+    css`
+      background: ${$stepActiveBackgroundColor};
+
+      &:before {
+        margin-left: -0.75rem;
+      }
+      &:after {
+        margin-left: 0.75rem;
+      }
+      > div,
+      &:before,
+      &:after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        ${transition}
+        width: 0.25rem;
+        height: 0.25rem;
+        border-radius: 50%;
+        background: ${$stepActiveDotsColor};
+      }
+    `}
+
+  ${({
+    $state,
+    disabled,
+    $stepDoneBackgroundColor,
+    $stepDoneCheckColor,
+    $stepDoneHoverBackgroundColor,
+    $stepDoneHoverCheckColor
+  }) =>
+    $state === StepState.Done &&
+    css`
+      background: ${$stepDoneBackgroundColor};
+
+      &:before,
+      &:after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        ${transition}
+        background: ${$stepDoneCheckColor};
+      }
+      &:before {
+        width: 0.35rem;
+        height: 0.125rem;
+        transform: translate(calc(-50% - 0.35rem), calc(-50% + 0.15rem))
+          rotate(-135deg);
+      }
+      &:after {
+        width: 0.75rem;
+        height: 0.125rem;
+        transform: translate(-50%, -50%) rotate(-45deg);
+      }
+
+      > div {
+        display: none;
+      }
+      ${!disabled &&
+      css`
+        &:hover {
+          background: ${$stepDoneHoverBackgroundColor};
+          &:before,
+          &:after {
+            background: ${$stepDoneHoverCheckColor};
+          }
+        }
+      `}
+    `}
+`;
+
+export const MultiStepStyle = styled.div<{ $isLteS: boolean }>`
+  display: flex;
+  gap: 1rem;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  width: 100%;
+  align-items: center;
+  div div {
+    display: ${({ $isLteS }) => $isLteS && "none"};
+  }
+
+  p {
+    text-align: center;
+    margin: 0;
+    font-weight: 600;
+    font-size: 0.75rem;
+    line-height: 1.5;
+    color: ${colors.darkGrey};
+  }
+`;
+
+export const MultiStepWrapper = styled.div<{ $isLteS: boolean }>`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  position: ${({ $isLteS }) => $isLteS && "absolute"};
+  left: ${({ $isLteS }) => $isLteS && "50%"};
+  transform: ${({ $isLteS }) => $isLteS && "translate(-50%, 0)"};
+`;
+
+export const StepWrapper = styled.div`
+  display: flex;
+  gap: 0;
+  flex-grow: 1;
+
+  flex-direction: row;
+  flex-wrap: nowrap;
+  border: 1px solid ${colors.border};
+  &:empty + p {
+    display: none;
+  }
+  &:empty {
+    display: none;
+  }
+`;

package/src/components/step/Step.tsx

@@ -0,0 +1,67 @@
+import { CSSProperties } from "styled-components";
+import { StepStyle } from "./Step.styles";
+import React from "react";
+
+export enum StepState {
+  Inactive = "inactive",
+  Active = "active",
+  Done = "done"
+}
+
+export type StepColorProps = {
+  stepInactiveDotColor?: CSSProperties["color"];
+  stepInactiveBackgroundColor?: CSSProperties["color"];
+  stepInactiveHoverDotColor?: CSSProperties["color"];
+  stepInactiveHoverBackgroundColor?: CSSProperties["color"];
+  stepActiveBackgroundColor?: CSSProperties["color"];
+  stepActiveDotsColor?: CSSProperties["color"];
+  stepDoneBackgroundColor?: CSSProperties["color"];
+  stepDoneCheckColor?: CSSProperties["color"];
+  stepDoneHoverBackgroundColor?: CSSProperties["color"];
+  stepDoneHoverCheckColor?: CSSProperties["color"];
+};
+
+type StepProps = StepColorProps & {
+  className?: string;
+  onClick?: () => void;
+  state?: StepState;
+  disabled?: boolean;
+};
+
+export function Step({
+  state = StepState.Inactive,
+  className,
+  disabled,
+  onClick,
+  stepInactiveDotColor,
+  stepInactiveBackgroundColor,
+  stepInactiveHoverDotColor,
+  stepInactiveHoverBackgroundColor,
+  stepActiveBackgroundColor,
+  stepActiveDotsColor,
+  stepDoneBackgroundColor,
+  stepDoneCheckColor,
+  stepDoneHoverBackgroundColor,
+  stepDoneHoverCheckColor,
+  ...props
+}: StepProps) {
+  return (
+    <StepStyle
+      $state={state}
+      {...props}
+      $stepInactiveDotColor={stepInactiveDotColor}
+      $stepInactiveBackgroundColor={stepInactiveBackgroundColor}
+      $stepInactiveHoverDotColor={stepInactiveHoverDotColor}
+      $stepInactiveHoverBackgroundColor={stepInactiveHoverBackgroundColor}
+      $stepActiveBackgroundColor={stepActiveBackgroundColor}
+      $stepActiveDotsColor={stepActiveDotsColor}
+      $stepDoneBackgroundColor={stepDoneBackgroundColor}
+      $stepDoneCheckColor={stepDoneCheckColor}
+      $stepDoneHoverBackgroundColor={stepDoneHoverBackgroundColor}
+      $stepDoneHoverCheckColor={stepDoneHoverCheckColor}
+      disabled={!!disabled}
+    >
+      <div />
+    </StepStyle>
+  );
+}

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/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"
+  }
+};