chore: button-stories

Author: Harman-singh-waraich

.storybook/main.ts

@@ -14,6 +14,28 @@ const config: StorybookConfig = {
   },
   typescript: {
     reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      propFilter: (prop) => {
+        if (prop.parent) {
+          const fileName = prop.parent.fileName;
+          // Include props from our own code (not in node_modules)
+          if (!fileName.includes("node_modules")) {
+            return true;
+          }
+          // Include props from react-aria-components and react-aria
+          if (
+            fileName.includes("react-aria-components") ||
+            fileName.includes("react-aria") ||
+            fileName.includes("node_modules/@react-types")
+          ) {
+            return true;
+          }
+          // Exclude all other props from node_modules
+          return false;
+        }
+        return true;
+      },
+    },
   },
 };
 export default config;

src/lib/button/index.tsx

@@ -9,22 +9,33 @@ import KlerosSymbol from "./KlerosSymbol";
 import ButtonIcon from "./ButtonIcon";
 
 export interface BaseButtonProps {
+  /** @default primary */
   variant?: "primary" | "secondary" | "tertiary";
+  /**
+   * Reduce the paddings on button
+   * @default false
+   */
   small?: boolean;
+  /**
+   * Indicate if button is in loading state
+   * @default false
+   */
   isLoading?: boolean;
 }
 
 export interface ButtonProps
   extends AriaButtonProps,
     Omit<BaseButtonProps, "$loading"> {
   text: string;
+  /** A React svg element to show as icon on button */
   Icon?: React.FC<React.SVGAttributes<SVGElement>>;
+  /** A React node element to show as is on button */
   icon?: React.ReactNode;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
   className?: string;
 }
 
-const Button: React.FC<ButtonProps> = ({
+function Button({
   text,
   variant,
   Icon,
@@ -34,7 +45,7 @@ const Button: React.FC<ButtonProps> = ({
   className,
   isDisabled,
   ...props
-}) => {
+}: ButtonProps): React.ReactElement {
   const isPrimary = variant === "primary" || variant === undefined;
   const isSecondary = variant === "secondary";
   const isTertiary = variant === "tertiary";
@@ -71,6 +82,6 @@ const Button: React.FC<ButtonProps> = ({
       <ButtonText {...{ isLoading, isDisabled, variant, text }} />
     </AriaButton>
   );
-};
+}
 
 export default Button;

src/stories/button.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { IPreviewArgs } from "./utils";
+
+import Button from "../lib/button/index";
+import Telegram from "../assets/svgs/telegram.svg";
+
+const meta = {
+  component: Button,
+  title: "Button",
+  tags: ["autodocs"],
+  argTypes: {
+    // by default storybook generates an inputType,
+    // https://storybook.js.org/docs/essentials/controls#choosing-the-control-type
+    variant: {
+      options: ["primary", "secondary", "tertiary"],
+      control: { type: "radio" },
+    },
+    isDisabled: {
+      control: "boolean",
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta> & IPreviewArgs;
+
+export const PrimaryButton: Story = {
+  args: {
+    variant: "primary",
+    text: "Primary",
+    themeUI: "dark",
+    backgroundUI: "light",
+  },
+};
+
+export const SecondaryButton: Story = {
+  args: {
+    variant: "secondary",
+    text: "Secondary",
+    themeUI: "dark",
+    backgroundUI: "light",
+  },
+};
+
+export const TertiaryButton: Story = {
+  args: {
+    variant: "tertiary",
+    text: "Tertiary",
+    themeUI: "dark",
+    backgroundUI: "light",
+  },
+};
+
+export const IconButton: Story = {
+  args: {
+    variant: "primary",
+    text: "Telegram",
+    Icon: Telegram,
+    themeUI: "dark",
+    backgroundUI: "light",
+  },
+};
+
+export const LoadingButton: Story = {
+  args: {
+    variant: "primary",
+    text: "Loading",
+    isLoading: true,
+    isDisabled: true,
+    themeUI: "dark",
+    backgroundUI: "light",
+  },
+};