@wakastellar/ui 2.4.0 → 3.1.0

package/src/components/waka-pagination/WakaPagination.stories.tsx

@@ -1,41 +1,52 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { WakaPagination, usePagination } from './index'
-import * as React from 'react'
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaPagination } from "./index"
+import { useState } from "react"
 
 const meta: Meta<typeof WakaPagination> = {
-  title: 'Components/Display/WakaPagination',
+  title: "Navigation/WakaPagination",
   component: WakaPagination,
   parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'A pagination component with page navigation, size selection, and item information display.',
-      },
-    },
+    layout: "centered",
   },
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Size of the buttons',
+    page: {
+      control: { type: "number", min: 1 },
+      description: "Page courante",
     },
-    variant: {
-      control: 'select',
-      options: ['default', 'outline', 'ghost'],
-      description: 'Visual variant',
+    totalPages: {
+      control: { type: "number", min: 1 },
+      description: "Nombre total de pages",
     },
-    showFirstLast: {
-      control: 'boolean',
-      description: 'Show first/last page buttons',
+    pageSize: {
+      control: "number",
+      description: "Nombre d'éléments par page",
+    },
+    totalItems: {
+      control: "number",
+      description: "Nombre total d'éléments",
     },
     showPageSizeSelector: {
-      control: 'boolean',
-      description: 'Show page size selector',
+      control: "boolean",
+      description: "Afficher le sélecteur de taille de page",
     },
     showItemsInfo: {
-      control: 'boolean',
-      description: 'Show items information',
+      control: "boolean",
+      description: "Afficher les infos sur les éléments",
+    },
+    showFirstLast: {
+      control: "boolean",
+      description: "Afficher les boutons premier/dernier",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Taille des boutons",
+    },
+    variant: {
+      control: "select",
+      options: ["default", "outline", "ghost"],
+      description: "Variante visuelle",
     },
   },
 }
@@ -43,286 +54,105 @@ const meta: Meta<typeof WakaPagination> = {
 export default meta
 type Story = StoryObj<typeof WakaPagination>
 
+const PaginationWrapper = (props: any) => {
+  const [page, setPage] = useState(props.page || 1)
+  const [pageSize, setPageSize] = useState(props.pageSize || 10)
+  return (
+    <WakaPagination
+      {...props}
+      page={page}
+      pageSize={pageSize}
+      onPageChange={setPage}
+      onPageSizeChange={setPageSize}
+    />
+  )
+}
+
 export const Default: Story = {
   args: {
+    page: 1,
     totalPages: 10,
+    totalItems: 100,
+    pageSize: 10,
+    showFirstLast: true,
+    showItemsInfo: true,
   },
-  render: (args) => {
-    const [page, setPage] = React.useState(1)
-    return (
-      <WakaPagination
-        {...args}
-        page={page}
-        onPageChange={setPage}
-      />
-    )
-  },
-}
-
-export const WithItemsInfo: Story = {
-  render: () => {
-    const [page, setPage] = React.useState(1)
-    return (
-      <WakaPagination
-        page={page}
-        totalPages={10}
-        totalItems={95}
-        pageSize={10}
-        onPageChange={setPage}
-        showItemsInfo
-      />
-    )
-  },
+  render: (args) => <PaginationWrapper {...args} />,
 }
 
 export const WithPageSizeSelector: Story = {
-  render: () => {
-    const [page, setPage] = React.useState(1)
-    const [pageSize, setPageSize] = React.useState(10)
-    const totalItems = 247
-    const totalPages = Math.ceil(totalItems / pageSize)
-
-    return (
-      <WakaPagination
-        page={page}
-        totalPages={totalPages}
-        totalItems={totalItems}
-        pageSize={pageSize}
-        onPageChange={setPage}
-        onPageSizeChange={(size) => {
-          setPageSize(size)
-          setPage(1)
-        }}
-        showPageSizeSelector
-        showItemsInfo
-      />
-    )
-  },
-}
-
-export const Sizes: Story = {
-  render: () => {
-    const [page, setPage] = React.useState(5)
-
-    return (
-      <div className="space-y-8">
-        <div>
-          <p className="text-sm text-muted-foreground mb-2">Small</p>
-          <WakaPagination
-            page={page}
-            totalPages={10}
-            onPageChange={setPage}
-            size="sm"
-          />
-        </div>
-        <div>
-          <p className="text-sm text-muted-foreground mb-2">Medium (Default)</p>
-          <WakaPagination
-            page={page}
-            totalPages={10}
-            onPageChange={setPage}
-            size="md"
-          />
-        </div>
-        <div>
-          <p className="text-sm text-muted-foreground mb-2">Large</p>
-          <WakaPagination
-            page={page}
-            totalPages={10}
-            onPageChange={setPage}
-            size="lg"
-          />
-        </div>
-      </div>
-    )
+  args: {
+    page: 1,
+    totalPages: 20,
+    totalItems: 200,
+    pageSize: 10,
+    pageSizeOptions: [5, 10, 20, 50],
+    showPageSizeSelector: true,
+    showItemsInfo: true,
+    showFirstLast: true,
   },
+  render: (args) => <PaginationWrapper {...args} />,
 }
 
-export const Variants: Story = {
-  render: () => {
-    const [page, setPage] = React.useState(5)
-
-    return (
-      <div className="space-y-8">
-        <div>
-          <p className="text-sm text-muted-foreground mb-2">Default</p>
-          <WakaPagination
-            page={page}
-            totalPages={10}
-            onPageChange={setPage}
-            variant="default"
-          />
-        </div>
-        <div>
-          <p className="text-sm text-muted-foreground mb-2">Outline</p>
-          <WakaPagination
-            page={page}
-            totalPages={10}
-            onPageChange={setPage}
-            variant="outline"
-          />
-        </div>
-        <div>
-          <p className="text-sm text-muted-foreground mb-2">Ghost</p>
-          <WakaPagination
-            page={page}
-            totalPages={10}
-            onPageChange={setPage}
-            variant="ghost"
-          />
-        </div>
-      </div>
-    )
+export const Simple: Story = {
+  args: {
+    page: 5,
+    totalPages: 10,
+    showFirstLast: false,
+    showItemsInfo: false,
   },
+  render: (args) => <PaginationWrapper {...args} />,
 }
 
 export const ManyPages: Story = {
-  render: () => {
-    const [page, setPage] = React.useState(50)
-    return (
-      <WakaPagination
-        page={page}
-        totalPages={100}
-        onPageChange={setPage}
-        maxVisiblePages={7}
-      />
-    )
+  args: {
+    page: 25,
+    totalPages: 100,
+    totalItems: 1000,
+    pageSize: 10,
+    showFirstLast: true,
+    showItemsInfo: true,
   },
+  render: (args) => <PaginationWrapper {...args} />,
 }
 
 export const FewPages: Story = {
-  render: () => {
-    const [page, setPage] = React.useState(2)
-    return (
-      <WakaPagination
-        page={page}
-        totalPages={3}
-        onPageChange={setPage}
-      />
-    )
-  },
-}
-
-export const NoFirstLast: Story = {
-  render: () => {
-    const [page, setPage] = React.useState(5)
-    return (
-      <WakaPagination
-        page={page}
-        totalPages={10}
-        onPageChange={setPage}
-        showFirstLast={false}
-      />
-    )
+  args: {
+    page: 2,
+    totalPages: 3,
+    totalItems: 25,
+    pageSize: 10,
+    showFirstLast: true,
+    showItemsInfo: true,
   },
+  render: (args) => <PaginationWrapper {...args} />,
 }
 
-export const WithHook: Story = {
-  render: () => {
-    const pagination = usePagination({
-      totalItems: 156,
-      initialPageSize: 10,
-      initialPage: 1,
-    })
-
-    return (
-      <div className="space-y-4">
-        <WakaPagination
-          page={pagination.page}
-          totalPages={pagination.totalPages}
-          totalItems={156}
-          pageSize={pagination.pageSize}
-          onPageChange={pagination.setPage}
-          onPageSizeChange={pagination.setPageSize}
-          showPageSizeSelector
-          showItemsInfo
-        />
-        <div className="text-sm text-muted-foreground">
-          Showing items {pagination.startIndex + 1} to {pagination.endIndex + 1}
-        </div>
-      </div>
-    )
+export const FirstPage: Story = {
+  args: {
+    page: 1,
+    totalPages: 10,
+    showFirstLast: true,
   },
+  render: (args) => <PaginationWrapper {...args} />,
 }
 
-export const TableExample: Story = {
-  render: () => {
-    const allData = Array.from({ length: 47 }, (_, i) => ({
-      id: i + 1,
-      name: `User ${i + 1}`,
-      email: `user${i + 1}@example.com`,
-      role: ['Admin', 'Editor', 'Viewer'][i % 3],
-    }))
-
-    const pagination = usePagination({
-      totalItems: allData.length,
-      initialPageSize: 10,
-    })
-
-    const visibleData = allData.slice(pagination.startIndex, pagination.endIndex + 1)
-
-    return (
-      <div className="w-[600px] border rounded-lg">
-        <table className="w-full">
-          <thead className="bg-muted">
-            <tr>
-              <th className="px-4 py-2 text-left text-sm">ID</th>
-              <th className="px-4 py-2 text-left text-sm">Name</th>
-              <th className="px-4 py-2 text-left text-sm">Email</th>
-              <th className="px-4 py-2 text-left text-sm">Role</th>
-            </tr>
-          </thead>
-          <tbody>
-            {visibleData.map((row) => (
-              <tr key={row.id} className="border-t">
-                <td className="px-4 py-2 text-sm">{row.id}</td>
-                <td className="px-4 py-2 text-sm">{row.name}</td>
-                <td className="px-4 py-2 text-sm text-muted-foreground">{row.email}</td>
-                <td className="px-4 py-2 text-sm">{row.role}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-        <div className="border-t p-4">
-          <WakaPagination
-            page={pagination.page}
-            totalPages={pagination.totalPages}
-            totalItems={allData.length}
-            pageSize={pagination.pageSize}
-            onPageChange={pagination.setPage}
-            onPageSizeChange={pagination.setPageSize}
-            showPageSizeSelector
-            showItemsInfo
-            pageSizeOptions={[5, 10, 20]}
-          />
-        </div>
-      </div>
-    )
+export const LastPage: Story = {
+  args: {
+    page: 10,
+    totalPages: 10,
+    showFirstLast: true,
   },
+  render: (args) => <PaginationWrapper {...args} />,
 }
 
-export const CustomLabels: Story = {
-  render: () => {
-    const [page, setPage] = React.useState(1)
-    return (
-      <WakaPagination
-        page={page}
-        totalPages={10}
-        totalItems={95}
-        pageSize={10}
-        onPageChange={setPage}
-        showItemsInfo
-        labels={{
-          page: 'Page',
-          of: 'of',
-          items: 'results',
-          itemsPerPage: 'Per page',
-          first: 'Go to first',
-          previous: 'Previous',
-          next: 'Next',
-          last: 'Go to last',
-        }}
-      />
-    )
+export const SinglePage: Story = {
+  args: {
+    page: 1,
+    totalPages: 1,
+    totalItems: 5,
+    pageSize: 10,
+    showItemsInfo: true,
   },
+  render: (args) => <PaginationWrapper {...args} />,
 }