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

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"}