Skip to content

Commit ead448d

Browse files
hoangdevnullhoangdevnull
committed
feat: update pagination
1 parent f2e1bd8 commit ead448d

18 files changed

Lines changed: 232 additions & 370 deletions

‎apps/web/src/stories/card-pagination.stories.tsx‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎apps/web/src/stories/layout.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ const DefaultTemplate: StoryFn<typeof Layout> = ({ ...args }) => {
213213
return (
214214
<div className="bg-background-secondary border-border relative min-h-[50vh] border">
215215
<Layout>
216-
<Sidebar className="border-border border" {...args}>
216+
<Sidebar {...args}>
217217
<Sidebar.Head>
218218
<Sidebar.Head.Toggle />
219219

‎apps/web/src/stories/pagination.stories.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
22
import type { Meta, StoryFn } from '@storybook/react';
3-
import { Pagination, type PaginationProps } from '@var-ui/core';
3+
import { Pagination } from '@var-ui/core';
44

55
const meta: Meta = {
6-
title: 'Components/Pagination/Pagination',
6+
title: 'Components/Pagination',
77
component: Pagination,
88
tags: ['autodocs'],
99
args: {
@@ -12,13 +12,14 @@ const meta: Meta = {
1212
siblings: 1,
1313
boundaries: 1,
1414
withControls: true,
15+
shape: 'square',
1516
},
1617
};
1718

1819
export default meta;
1920

20-
const DefaultTemplate: StoryFn<PaginationProps> = ({ ...args }: any) => {
21-
return <Pagination {...args} />;
21+
const DefaultTemplate: StoryFn<typeof Pagination> = ({ ...args }: any) => {
22+
return <Pagination {...args}></Pagination>;
2223
};
2324

2425
export const Default: StoryFn<typeof Pagination> = DefaultTemplate.bind({});

‎apps/web/src/stories/table.stories.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import type { Meta, StoryFn } from '@storybook/react';
33
import {
4-
Pagination,
54
Table,
65
TableBody,
76
TableCaption,
@@ -51,46 +50,44 @@ const DefaultTemplate: StoryFn<TableProps> = ({ header, ...args }) => {
5150
</TableHeader>
5251
<TableBody>
5352
<TableRow>
54-
<TableCell className="font-medium">INV001</TableCell>
53+
<TableCell>INV001</TableCell>
5554
<TableCell>Paid</TableCell>
5655
<TableCell>Credit Card</TableCell>
5756
<TableCell className="text-right">$250.00</TableCell>
5857
</TableRow>
5958
<TableRow>
60-
<TableCell className="font-medium">INV001</TableCell>
59+
<TableCell>INV001</TableCell>
6160
<TableCell>Paid</TableCell>
6261
<TableCell>Credit Card</TableCell>
6362
<TableCell className="text-right">$250.00</TableCell>
6463
</TableRow>
6564
<TableRow>
66-
<TableCell className="font-medium">INV001</TableCell>
65+
<TableCell>INV001</TableCell>
6766
<TableCell>Paid</TableCell>
6867
<TableCell>Credit Card</TableCell>
6968
<TableCell className="text-right">$250.00</TableCell>
7069
</TableRow>
7170
<TableRow>
72-
<TableCell className="font-medium">INV001</TableCell>
71+
<TableCell>INV001</TableCell>
7372
<TableCell>Paid</TableCell>
7473
<TableCell>Credit Card</TableCell>
7574
<TableCell className="text-right">$250.00</TableCell>
7675
</TableRow>
7776
<TableRow>
78-
<TableCell className="font-medium">INV001</TableCell>
77+
<TableCell>INV001</TableCell>
7978
<TableCell>Paid</TableCell>
8079
<TableCell>Credit Card</TableCell>
8180
<TableCell className="text-right">$250.00</TableCell>
8281
</TableRow>
8382
<TableRow>
84-
<TableCell className="font-medium">INV001</TableCell>
83+
<TableCell>INV001</TableCell>
8584
<TableCell>Paid</TableCell>
8685
<TableCell>Credit Card</TableCell>
8786
<TableCell className="text-right">$250.00</TableCell>
8887
</TableRow>
8988
</TableBody>
9089

91-
<TableCaption>
92-
<Pagination total={10} />
93-
</TableCaption>
90+
<TableCaption></TableCaption>
9491
</Table>
9592
);
9693
};

‎packages/ui/src/components/navigation/navigation-item.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ const NavigationItem = forwardRef<ElementRef<'div'>, NavigationItemProps>(
8989
) : (
9090
<>
9191
<div className="flex flex-1 items-center gap-3">
92-
<div className="min-w-5">{icon}</div>
92+
{icon}
9393
<div className="flex-1 whitespace-nowrap">{label}</div>
9494
</div>
9595
<div className="ml-2">{children}</div>

‎packages/ui/src/components/pagination/card-pagination.tsx‎

Lines changed: 0 additions & 95 deletions
This file was deleted.

‎packages/ui/src/components/pagination/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
export { CardPagination, type CardPaginationProps } from './card-pagination';
21
export { Pagination, type PaginationProps } from './pagination';
2+
export { PaginationMain, type PaginationMainProps } from './pagination-main';
33
export { PaginationControl, type PaginationControlProps } from './pagination-control';
44
export { PaginationDot, type PaginationDotProps } from './pagination-dot';
55
export {
@@ -10,4 +10,4 @@ export {
1010
PaginationPrevious,
1111
} from './pagination-edge';
1212
export { PaginationItems, type PaginationItemsProps } from './pagination-item';
13-
export { PaginationRoot, type PaginationRootProps } from './pagination-root';
13+
export { PaginationProvider, type PaginationProviderProps } from './pagination-provider';

‎packages/ui/src/components/pagination/pagination-context.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ interface PaginationContext {
1111
onPrevious: () => void;
1212
onFirst: () => void;
1313
onLast: () => void;
14+
shape?: 'square' | 'circle' | 'button';
1415
}
1516

1617
export const [PaginationProvider, usePaginationContext] = createSafeContext<PaginationContext>(

‎packages/ui/src/components/pagination/pagination-control.tsx‎

Lines changed: 27 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,59 @@
11
import { forwardRef, type ElementRef } from 'react';
2-
import { cva, type VariantProps } from 'class-variance-authority';
2+
import { tv, type VariantProps } from 'tailwind-variants';
33

44
import { type ElementProps } from '../../types';
55
import { cn } from '../../utils/cn';
66
import { usePaginationContext } from './pagination-context';
77

8-
const paginationControlVariants = cva(
9-
[
8+
const paginationControlVariants = tv({
9+
base: [
1010
'flex items-center justify-center',
11-
'h-[var(--pagination-control-size)] min-w-[var(--pagination-control-size)]',
11+
'h-[var(--pagination-control-size)] w-[var(--pagination-control-size)]',
1212
'focus:shadow-gray hover:bg-background-tertiary outline-none focus:z-[1] ',
1313
'disabled:text-disabled disabled:cursor-not-allowed disabled:opacity-50',
14-
'text-foreground gap-1.5 text-center text-sm font-medium',
14+
'text-foreground gap-1.5 text-center text-sm',
1515
],
16-
{
17-
variants: {
18-
variant: {
19-
square: 'rounded-md bg-transparent',
20-
circle: 'rounded-full bg-transparent',
21-
button: 'bg-background',
22-
},
23-
state: {
24-
default: '',
25-
active: 'bg-background-tertiary',
26-
},
27-
rounded: {
28-
default: '',
29-
sm: 'rounded-sm',
30-
md: 'rounded-md',
31-
lg: 'rounded-lg',
32-
},
16+
variants: {
17+
variant: {
18+
square: 'rounded-sm bg-transparent',
19+
circle: 'rounded-full bg-transparent',
20+
button: 'bg-background',
3321
},
34-
defaultVariants: {
35-
variant: 'square',
36-
state: 'default',
37-
rounded: 'default',
22+
state: {
23+
default: '',
24+
active: 'bg-background-tertiary',
3825
},
39-
}
40-
);
26+
rounded: {
27+
default: '',
28+
sm: 'rounded-sm',
29+
md: 'rounded-md',
30+
lg: 'rounded-lg',
31+
},
32+
},
33+
defaultVariants: {
34+
variant: 'square',
35+
state: 'default',
36+
rounded: 'default',
37+
},
38+
});
4139

4240
export interface PaginationControlProps extends ElementProps<'button'>, VariantProps<typeof paginationControlVariants> {
4341
/** Determines whether control should have active styles */
4442
active?: boolean;
4543

46-
/** Determines whether control should have padding, false by default */
47-
withPadding?: boolean;
48-
4944
/** Determines whether control should have border, false by default */
5045
withBorder?: boolean;
5146
}
5247

5348
const PaginationControl = forwardRef<ElementRef<'button'>, PaginationControlProps>((props, ref) => {
54-
const { variant, active, className, withPadding, rounded, withBorder, disabled, ...etc } = props;
49+
const { variant, active, className, rounded, withBorder = true, disabled, ...etc } = props;
5550

5651
const ctx = usePaginationContext();
5752
const _disabled = disabled || ctx.disabled;
5853

5954
return (
6055
<button
6156
className={cn(
62-
{ 'px-2.5': withPadding },
6357
{ 'border-border border': withBorder },
6458
paginationControlVariants({
6559
variant,

0 commit comments

Comments
 (0)