@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-number-input/WakaNumberInput.stories.tsx

@@ -0,0 +1,282 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaNumberInput } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaNumberInput> = {
+  title: 'Components/Forms/WakaNumberInput',
+  component: WakaNumberInput,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A number input component with increment/decrement buttons and various layouts.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the component',
+    },
+    buttonPosition: {
+      control: 'select',
+      options: ['sides', 'right', 'none'],
+      description: 'Position of increment/decrement buttons',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the component',
+    },
+    error: {
+      control: 'boolean',
+      description: 'Show error state',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaNumberInput>
+
+export const Default: Story = {
+  render: function NumberInputDemo() {
+    const [value, setValue] = React.useState<number | undefined>(0)
+
+    return (
+      <div className="w-[200px]">
+        <WakaNumberInput value={value} onChange={setValue} />
+      </div>
+    )
+  },
+}
+
+export const WithMinMax: Story = {
+  render: function MinMaxDemo() {
+    const [value, setValue] = React.useState<number | undefined>(5)
+
+    return (
+      <div className="w-[200px]">
+        <WakaNumberInput
+          value={value}
+          onChange={setValue}
+          min={0}
+          max={10}
+          placeholder="0-10"
+        />
+        <p className="text-xs text-muted-foreground mt-2">Range: 0 to 10</p>
+      </div>
+    )
+  },
+}
+
+export const WithStep: Story = {
+  render: function StepDemo() {
+    const [value, setValue] = React.useState<number | undefined>(0)
+
+    return (
+      <div className="w-[200px]">
+        <WakaNumberInput
+          value={value}
+          onChange={setValue}
+          step={5}
+          placeholder="Step: 5"
+        />
+        <p className="text-xs text-muted-foreground mt-2">Step: 5</p>
+      </div>
+    )
+  },
+}
+
+export const DecimalPrecision: Story = {
+  render: function DecimalDemo() {
+    const [value, setValue] = React.useState<number | undefined>(0.5)
+
+    return (
+      <div className="w-[200px]">
+        <WakaNumberInput
+          value={value}
+          onChange={setValue}
+          step={0.1}
+          precision={2}
+          min={0}
+          max={1}
+        />
+        <p className="text-xs text-muted-foreground mt-2">
+          Decimal with 2 digit precision
+        </p>
+      </div>
+    )
+  },
+}
+
+export const ButtonPositions: Story = {
+  render: function ButtonPositionsDemo() {
+    const [value1, setValue1] = React.useState<number | undefined>(0)
+    const [value2, setValue2] = React.useState<number | undefined>(0)
+    const [value3, setValue3] = React.useState<number | undefined>(0)
+
+    return (
+      <div className="space-y-4 w-[200px]">
+        <div>
+          <p className="text-sm text-muted-foreground mb-1">Sides (default)</p>
+          <WakaNumberInput
+            value={value1}
+            onChange={setValue1}
+            buttonPosition="sides"
+          />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-1">Right</p>
+          <WakaNumberInput
+            value={value2}
+            onChange={setValue2}
+            buttonPosition="right"
+          />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-1">No buttons</p>
+          <WakaNumberInput
+            value={value3}
+            onChange={setValue3}
+            buttonPosition="none"
+          />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const Sizes: Story = {
+  render: function SizesDemo() {
+    const [value, setValue] = React.useState<number | undefined>(42)
+
+    return (
+      <div className="space-y-4 w-[200px]">
+        <div>
+          <p className="text-sm text-muted-foreground mb-1">Small</p>
+          <WakaNumberInput value={value} onChange={setValue} size="sm" />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-1">Medium</p>
+          <WakaNumberInput value={value} onChange={setValue} size="md" />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-1">Large</p>
+          <WakaNumberInput value={value} onChange={setValue} size="lg" />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const CurrencyFormat: Story = {
+  render: function CurrencyDemo() {
+    const [value, setValue] = React.useState<number | undefined>(1999.99)
+
+    return (
+      <div className="w-[200px]">
+        <WakaNumberInput
+          value={value}
+          onChange={setValue}
+          precision={2}
+          step={0.01}
+          min={0}
+          formatValue={(v) => `$${v.toFixed(2)}`}
+          parseValue={(v) => parseFloat(v.replace(/[^0-9.-]/g, ''))}
+        />
+        <p className="text-xs text-muted-foreground mt-2">
+          Currency formatting
+        </p>
+      </div>
+    )
+  },
+}
+
+export const PercentFormat: Story = {
+  render: function PercentDemo() {
+    const [value, setValue] = React.useState<number | undefined>(75)
+
+    return (
+      <div className="w-[200px]">
+        <WakaNumberInput
+          value={value}
+          onChange={setValue}
+          min={0}
+          max={100}
+          formatValue={(v) => `${v}%`}
+          parseValue={(v) => parseFloat(v.replace('%', ''))}
+        />
+        <p className="text-xs text-muted-foreground mt-2">
+          Percentage formatting
+        </p>
+      </div>
+    )
+  },
+}
+
+export const AllowEmpty: Story = {
+  render: function AllowEmptyDemo() {
+    const [value, setValue] = React.useState<number | undefined>()
+
+    return (
+      <div className="w-[200px]">
+        <WakaNumberInput
+          value={value}
+          onChange={setValue}
+          allowEmpty
+          placeholder="Optional"
+        />
+        <p className="text-xs text-muted-foreground mt-2">
+          Value: {value === undefined ? 'empty' : value}
+        </p>
+      </div>
+    )
+  },
+}
+
+export const WithError: Story = {
+  render: () => (
+    <div className="w-[200px]">
+      <WakaNumberInput value={150} error />
+      <p className="text-sm text-destructive mt-1">
+        Value must be less than 100
+      </p>
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-[200px]">
+      <WakaNumberInput value={42} disabled />
+    </div>
+  ),
+}
+
+export const QuantitySelector: Story = {
+  render: function QuantitySelectorDemo() {
+    const [quantity, setQuantity] = React.useState<number | undefined>(1)
+
+    return (
+      <div className="flex items-center gap-4 p-4 border rounded-lg">
+        <img
+          src="https://via.placeholder.com/80"
+          alt="Product"
+          className="w-20 h-20 rounded"
+        />
+        <div className="flex-1">
+          <h4 className="font-medium">Product Name</h4>
+          <p className="text-sm text-muted-foreground">$29.99</p>
+        </div>
+        <WakaNumberInput
+          value={quantity}
+          onChange={setQuantity}
+          min={1}
+          max={99}
+          className="w-[120px]"
+        />
+      </div>
+    )
+  },
+}

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

@@ -0,0 +1,328 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaPagination, usePagination } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaPagination> = {
+  title: 'Components/Display/WakaPagination',
+  component: WakaPagination,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A pagination component with page navigation, size selection, and item information display.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the buttons',
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'outline', 'ghost'],
+      description: 'Visual variant',
+    },
+    showFirstLast: {
+      control: 'boolean',
+      description: 'Show first/last page buttons',
+    },
+    showPageSizeSelector: {
+      control: 'boolean',
+      description: 'Show page size selector',
+    },
+    showItemsInfo: {
+      control: 'boolean',
+      description: 'Show items information',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaPagination>
+
+export const Default: Story = {
+  args: {
+    totalPages: 10,
+  },
+  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
+      />
+    )
+  },
+}
+
+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>
+    )
+  },
+}
+
+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 ManyPages: Story = {
+  render: () => {
+    const [page, setPage] = React.useState(50)
+    return (
+      <WakaPagination
+        page={page}
+        totalPages={100}
+        onPageChange={setPage}
+        maxVisiblePages={7}
+      />
+    )
+  },
+}
+
+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}
+      />
+    )
+  },
+}
+
+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 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 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',
+        }}
+      />
+    )
+  },
+}