Merge pull request #54 from deriv-com/aizad/storybook-input

Aizad/ Adding Storybook to Input component

lib/components/Input/HelperMessage.scss

@@ -8,6 +8,7 @@ $error_field: #ec3f3f;
   font-style: normal;
   font-weight: 400;
   line-height: 18px;
+  color: $inactive_color;
   &--general {
     color: $inactive_color;
   }

lib/components/Input/Input.scss

@@ -97,6 +97,12 @@ $border: 1px solid;
   }
 }
 
+.deriv-input--general .deriv-input__field:disabled + .deriv-input__label,
+.deriv-input--error .deriv-input__field:disabled + .deriv-input__label,
+.deriv-input--success .deriv-input__field:disabled + .deriv-input__label {
+  color: $disabled_color;
+}
+
 .deriv-input--general .deriv-input__field:focus + .deriv-input__label {
   color: $active_color;
 }

lib/components/Input/index.tsx

@@ -9,8 +9,7 @@ export type InputVariants =
   | "error"
   | "warning"
   | "disabled";
-interface InputProps
-  extends Omit<ComponentProps<"input">, "style" | "placeholder"> {
+interface InputProps extends Omit<ComponentProps<"input">, "placeholder"> {
   label?: string;
   leftPlaceholder?: ReactNode;
   rightPlaceholder?: ReactNode;

src/stories/Input.stories.tsx

@@ -0,0 +1,179 @@
+import { StoryObj, Meta } from "@storybook/react";
+import { Input } from "../../lib/main";
+import { useState } from "react";
+
+const meta = {
+  title: "Components/Input",
+  component: Input,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  args: {
+    label: "Enter Password",
+    value: "",
+    variant: "general",
+    message: "This is a helper message",
+    error: false,
+    disabled: false,
+  },
+  argTypes: {
+    leftPlaceholder: {
+      control: {
+        disable: true,
+      },
+    },
+    rightPlaceholder: {
+      control: {
+        disable: true,
+      },
+    },
+    value: {
+      control: {
+        disable: true,
+      },
+    },
+    variant: {
+      options: ["general", "success", "warning", "error"],
+      control: {
+        type: "select",
+      },
+    },
+    message: {
+      control: {
+        type: "text",
+      },
+    },
+    error: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "Default Input",
+  args: {
+    label: "Enter name",
+    value: "",
+    message: "This is a helper message",
+  },
+  render: (args) => {
+    const [value, setValue] = useState("");
+
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    );
+  },
+};
+
+export const Disabled: Story = {
+  name: "Disabled Input",
+  args: {
+    label: "Enter name",
+    value: "",
+    message: "This is a helper message",
+    disabled: true,
+  },
+  render: (args) => {
+    const [value, setValue] = useState("");
+
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    );
+  },
+};
+
+export const Success: Story = {
+  name: "Success Input",
+  args: {
+    label: "Enter name",
+    value: "",
+    message: "This is a helper message",
+    variant: "success",
+  },
+  render: (args) => {
+    const [value, setValue] = useState("");
+
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    );
+  },
+};
+
+export const Error: Story = {
+  name: "Error Input",
+  args: {
+    label: "Enter name",
+    value: "",
+    message: "This is a helper message",
+    variant: "error",
+  },
+  render: (args) => {
+    const [value, setValue] = useState("");
+
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    );
+  },
+};
+
+export const Warning: Story = {
+  name: "Error Input",
+  args: {
+    label: "Enter name",
+    value: "",
+    message: "This is a helper message",
+    variant: "warning",
+  },
+  render: (args) => {
+    const [value, setValue] = useState("");
+
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    );
+  },
+};
+
+export const RightPlaceholder: Story = {
+  name: "Input with Right Placeholder",
+  args: {
+    label: "Enter name",
+    value: "",
+    message: "This is a helper message",
+    rightPlaceholder: "USD",
+  },
+  render: (args) => {
+    const [value, setValue] = useState("");
+
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    );
+  },
+};