chore: pagination-stories

Author: tractorss

src/lib/pagination/compact.tsx

@@ -29,19 +29,20 @@ interface CompactPaginationProps {
   currentPage: number;
   numPages: number;
   callback: (newPage: number) => void;
+  /** Callback function called when end of pages has been reached */
   onCloseOnLastPage?: () => void;
   label?: ReactNode;
   className?: string;
 }
 
-const CompactPagination: React.FC<CompactPaginationProps> = ({
+function CompactPagination({
   currentPage,
   numPages,
   callback,
   onCloseOnLastPage,
   label,
   className,
-}) => {
+}: Readonly<CompactPaginationProps>) {
   const [{ incrementPage, decrementPage, minPageReached, maxPageReached }] =
     usePagination(currentPage, numPages, callback, onCloseOnLastPage);
 
@@ -51,7 +52,7 @@ const CompactPagination: React.FC<CompactPaginationProps> = ({
         {label}
       </small>
       <ArrowButton
-        className="ml-4"
+        className={clsx(label && "ml-4")}
         isDisabled={minPageReached}
         onPress={decrementPage}
       >
@@ -77,6 +78,6 @@ const CompactPagination: React.FC<CompactPaginationProps> = ({
       )}
     </div>
   );
-};
+}
 
 export default CompactPagination;

src/lib/pagination/standard.tsx

@@ -39,18 +39,20 @@ interface StandardPaginationProps {
   numPages: number;
   callback: (newPage: number) => void;
   className?: string;
+  /** Disables the number buttons, allowing only use of arrows */
   disableNumbers?: boolean;
+  /** Hides the number buttons */
   hideNumbers?: boolean;
 }
 
-const StandardPagination: React.FC<StandardPaginationProps> = ({
+function StandardPagination({
   currentPage,
   numPages,
   callback,
   disableNumbers,
   hideNumbers,
   className,
-}) => {
+}: Readonly<StandardPaginationProps>) {
   const [
     {
       incrementPage,
@@ -107,6 +109,6 @@ const StandardPagination: React.FC<StandardPaginationProps> = ({
       </PageButton>
     </div>
   );
-};
+}
 
 export default StandardPagination;

src/lib/pagination/tabs.tsx

@@ -15,13 +15,24 @@ import {
 } from "react-aria-components";
 
 interface TabsItem {
+  /** Unique id for each tab panel */
   id: Key;
   text: string;
+  /** Value associated with each tab. Passed as an arg to callback function. */
   value: any;
   Icon?: React.FC<React.SVGAttributes<SVGElement>>;
   icon?: React.ReactNode;
   disabled?: boolean;
+  /** Content to display when this tab is selected. */
   content: ReactNode;
+  /** Props for Tab
+   * {@link https://react-spectrum.adobe.com/react-aria/Tabs.html#tab | TabProps}
+   */
+  tabProps?: TabProps;
+  /**
+   * Can be used to provide separate styling for a TabPanel, apart from one passed in panelClassName parent props.
+   * {@link https://react-spectrum.adobe.com/react-aria/Tabs.html#tabpanel | TabListProps}
+   */
   tabPanelProps?: TabPanelProps;
 }
 
@@ -30,19 +41,24 @@ interface TabsProps extends Omit<AriaTabsProps, "orientation"> {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   callback?: Function;
   className?: string;
+  /** ClassName to provide a common style for all TabPanels */
   panelClassName?: string;
+  /**
+   * Can be used to override default style.
+   * {@link https://react-spectrum.adobe.com/react-aria/Tabs.html#tablist | TabListProps}
+   */
   tabListProps?: TabListProps<TabProps>;
 }
 
-const Tabs: React.FC<TabsProps> = ({
+function Tabs({
   items,
   className,
   tabListProps,
   panelClassName,
   callback,
   defaultSelectedKey,
   ...props
-}) => {
+}: Readonly<TabsProps>) {
   const [selectedKey, setSelectedKey] = useState<Key | undefined>(
     defaultSelectedKey,
   );
@@ -114,7 +130,7 @@ const Tabs: React.FC<TabsProps> = ({
             className={cn(
               "box-border h-fit w-full",
               panelClassName,
-              // custom style for a panel should override global style provided with panelClassName
+              // custom style for a panel should override parent style provided with panelClassName
               item?.tabPanelProps?.className,
             )}
             {...item.tabPanelProps}
@@ -125,6 +141,6 @@ const Tabs: React.FC<TabsProps> = ({
       </Collection>
     </AriaTabs>
   );
-};
+}
 
 export default Tabs;

src/stories/compactPagination.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { IPreviewArgs } from "./utils";
+
+import Pagination from "../lib/pagination/compact";
+import React, { useState } from "react";
+
+const meta = {
+  component: Pagination,
+  title: "Pagination/Compact Pagination",
+  tags: ["autodocs"],
+  argTypes: {
+    numPages: {
+      control: "number",
+    },
+    currentPage: {
+      control: "number",
+    },
+    className: {
+      control: "text",
+    },
+  },
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta> & IPreviewArgs;
+
+export const CompactPagination: Story = {
+  args: {
+    themeUI: "light",
+    backgroundUI: "light",
+    numPages: 6,
+    currentPage: 0,
+    callback: () => {},
+    className: "w-full",
+    label: "Label:",
+  },
+  render: function Render(args) {
+    const [currentPage, setCurrentPage] = useState(1);
+
+    return (
+      <Pagination
+        {...args}
+        currentPage={currentPage}
+        callback={setCurrentPage}
+      />
+    );
+  },
+};
+
+export const CompactPaginationWithCloseCallback: Story = {
+  args: {
+    themeUI: "light",
+    backgroundUI: "light",
+    numPages: 6,
+    currentPage: 0,
+    callback: () => {},
+    className: "w-full",
+    label: "Shows close button in end.",
+  },
+  render: function Render(args) {
+    const [currentPage, setCurrentPage] = useState(1);
+
+    return (
+      <Pagination
+        {...args}
+        currentPage={currentPage}
+        callback={setCurrentPage}
+        onCloseOnLastPage={() => {}}
+      />
+    );
+  },
+};

src/stories/standardPagination.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { IPreviewArgs } from "./utils";
+
+import Pagination from "../lib/pagination/standard";
+import React, { useState } from "react";
+
+const meta = {
+  component: Pagination,
+  title: "Pagination/Standard Pagination",
+  tags: ["autodocs"],
+  argTypes: {
+    numPages: {
+      control: "number",
+    },
+    currentPage: {
+      control: "number",
+    },
+    className: {
+      control: "text",
+    },
+    disableNumbers: {
+      control: "boolean",
+    },
+    hideNumbers: {
+      control: "boolean",
+    },
+  },
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta> & IPreviewArgs;
+
+export const StandardPagination: Story = {
+  args: {
+    themeUI: "light",
+    backgroundUI: "light",
+    numPages: 6,
+    currentPage: 0,
+    callback: () => {},
+    className: "w-full",
+    disableNumbers: false,
+    hideNumbers: false,
+  },
+  render: function Render(args) {
+    const [currentPage, setCurrentPage] = useState(1);
+
+    return (
+      <Pagination
+        {...args}
+        currentPage={currentPage}
+        callback={setCurrentPage}
+      />
+    );
+  },
+};

src/stories/tabs.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { IPreviewArgs } from "./utils";
+
+import TabsComponent from "../lib/pagination/tabs";
+import Telegram from "../assets/svgs/telegram.svg";
+
+const meta = {
+  component: TabsComponent,
+  title: "Pagination/Tabs",
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof TabsComponent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta> & IPreviewArgs;
+
+export const Tabs: Story = {
+  args: {
+    themeUI: "light",
+    backgroundUI: "light",
+    className: "w-[500px]",
+    defaultSelectedKey: "discord",
+    panelClassName: "bg-klerosUIComponentsLightBlue p-4",
+    items: [
+      { text: "Discord", value: 0, id: "discord", content: <p>Discord</p> },
+      {
+        text: "Telegram",
+        value: 1,
+        Icon: Telegram,
+        id: "telegram",
+        content: <p>Telegram</p>,
+      },
+      {
+        text: "Disabled",
+        value: 2,
+        disabled: true,
+        id: "disabled",
+        content: <p>Disabled</p>,
+      },
+    ],
+  },
+};