Skip to content

Commit bc30900

Browse files
SutuSebastianSutuSebastian
authored
Merge branch 'main' into 1559-cant-resolve-tailwindcssversionjs
2 parents f733a0a + 557d233 commit bc30900

20 files changed

+492
-73
lines changed

‎apps/storybook/src/Pagination.stories.tsx

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { Meta, StoryFn } from "@storybook/react";
22
import type { PaginationProps } from "flowbite-react";
3-
import { Pagination } from "flowbite-react";
3+
import { DefaultPaginationProps, Pagination, TablePaginationProps } from "flowbite-react";
44
import { useEffect, useState } from "react";
55

66
export default {
@@ -15,7 +15,9 @@ export default {
1515
],
1616
} as Meta;
1717

18-
const Template: StoryFn<PaginationProps> = ({ currentPage = 1, layout = "pagination", totalPages = 100, ...rest }) => {
18+
const Template: StoryFn<PaginationProps> = (props) => {
19+
const { currentPage = 1, layout = "pagination" } = props;
20+
1921
const [page, setPage] = useState(currentPage);
2022

2123
const onPageChange = (page: number) => {
@@ -26,6 +28,21 @@ const Template: StoryFn<PaginationProps> = ({ currentPage = 1, layout = "paginat
2628
setPage(currentPage);
2729
}, [currentPage]);
2830

31+
if (layout === "table") {
32+
const { itemsPerPage = 10, totalItems = 100, ...rest } = props as TablePaginationProps;
33+
return (
34+
<Pagination
35+
{...rest}
36+
currentPage={page}
37+
layout={layout}
38+
onPageChange={onPageChange}
39+
itemsPerPage={itemsPerPage}
40+
totalItems={totalItems}
41+
/>
42+
);
43+
}
44+
45+
const { totalPages = 100, ...rest } = props as DefaultPaginationProps;
2946
return (
3047
<Pagination {...rest} currentPage={page} layout={layout} onPageChange={onPageChange} totalPages={totalPages} />
3148
);
@@ -54,11 +71,15 @@ NavWithIcons.args = {
5471
export const Table = Template.bind({});
5572
Table.args = {
5673
layout: "table",
74+
itemsPerPage: 10,
75+
totalItems: 100,
5776
};
5877

5978
export const TableWithIcons = Template.bind({});
6079
TableWithIcons.storyName = "Table with icons";
6180
TableWithIcons.args = {
6281
layout: "table",
6382
showIcons: true,
83+
itemsPerPage: 10,
84+
totalItems: 100,
6485
};

‎apps/web/examples/modal/modal.dismissible.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export function Component() {
3333
</ModalBody>
3434
<ModalFooter>
3535
<Button onClick={() => setOpenModal(false)}>I accept</Button>
36-
<Button color="gray" onClick={() => setOpenModal(false)}>
36+
<Button color="alternative" onClick={() => setOpenModal(false)}>
3737
Decline
3838
</Button>
3939
</ModalFooter>
@@ -66,7 +66,7 @@ export function Component() {
6666
</ModalBody>
6767
<ModalFooter>
6868
<Button onClick={() => setOpenModal(false)}>I accept</Button>
69-
<Button color="gray" onClick={() => setOpenModal(false)}>
69+
<Button color="alternative" onClick={() => setOpenModal(false)}>
7070
Decline
7171
</Button>
7272
</ModalFooter>

‎apps/web/examples/modal/modal.initialFocus.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export function Component() {
3939
<Checkbox id="remember" />
4040
<Label htmlFor="remember">Remember me</Label>
4141
</div>
42-
<a href="#" className="text-sm text-cyan-700 hover:underline dark:text-cyan-500">
42+
<a href="#" className="text-sm text-primary-700 hover:underline dark:text-primary-500">
4343
Lost Password?
4444
</a>
4545
</div>
@@ -48,7 +48,7 @@ export function Component() {
4848
</div>
4949
<div className="flex justify-between text-sm font-medium text-gray-500 dark:text-gray-300">
5050
Not registered?&nbsp;
51-
<a href="#" className="text-cyan-700 hover:underline dark:text-cyan-500">
51+
<a href="#" className="text-primary-700 hover:underline dark:text-primary-500">
5252
Create account
5353
</a>
5454
</div>
@@ -89,7 +89,7 @@ export function Component() {
8989
<Checkbox id="remember" />
9090
<Label htmlFor="remember">Remember me</Label>
9191
</div>
92-
<a href="#" className="text-sm text-cyan-700 hover:underline dark:text-cyan-500">
92+
<a href="#" className="text-sm text-primary-700 hover:underline dark:text-primary-500">
9393
Lost Password?
9494
</a>
9595
</div>
@@ -98,7 +98,7 @@ export function Component() {
9898
</div>
9999
<div className="flex justify-between text-sm font-medium text-gray-500 dark:text-gray-300">
100100
Not registered?&nbsp;
101-
<a href="#" className="text-cyan-700 hover:underline dark:text-cyan-500">
101+
<a href="#" className="text-primary-700 hover:underline dark:text-primary-500">
102102
Create account
103103
</a>
104104
</div>

‎apps/web/examples/modal/modal.popup.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export function Component() {
3030
<Button color="red" onClick={() => setOpenModal(false)}>
3131
Yes, I'm sure
3232
</Button>
33-
<Button color="gray" onClick={() => setOpenModal(false)}>
33+
<Button color="alternative" onClick={() => setOpenModal(false)}>
3434
No, cancel
3535
</Button>
3636
</div>
@@ -60,7 +60,7 @@ export function Component() {
6060
<Button color="red" onClick={() => setOpenModal(false)}>
6161
Yes, I'm sure
6262
</Button>
63-
<Button color="gray" onClick={() => setOpenModal(false)}>
63+
<Button color="alternative" onClick={() => setOpenModal(false)}>
6464
No, cancel
6565
</Button>
6666
</div>

‎apps/web/examples/modal/modal.position.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export function Component() {
4949
</ModalBody>
5050
<ModalFooter>
5151
<Button onClick={() => setOpenModal(false)}>I accept</Button>
52-
<Button color="gray" onClick={() => setOpenModal(false)}>
52+
<Button color="alternative" onClick={() => setOpenModal(false)}>
5353
Decline
5454
</Button>
5555
</ModalFooter>
@@ -98,7 +98,7 @@ export function Component() {
9898
</ModalBody>
9999
<ModalFooter>
100100
<Button onClick={() => setOpenModal(false)}>I accept</Button>
101-
<Button color="gray" onClick={() => setOpenModal(false)}>
101+
<Button color="alternative" onClick={() => setOpenModal(false)}>
102102
Decline
103103
</Button>
104104
</ModalFooter>

‎apps/web/examples/modal/modal.root.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export function Component() {
3333
</ModalBody>
3434
<ModalFooter>
3535
<Button onClick={() => setOpenModal(false)}>I accept</Button>
36-
<Button color="gray" onClick={() => setOpenModal(false)}>
36+
<Button color="alternative" onClick={() => setOpenModal(false)}>
3737
Decline
3838
</Button>
3939
</ModalFooter>
@@ -66,7 +66,7 @@ export function Component() {
6666
</ModalBody>
6767
<ModalFooter>
6868
<Button onClick={() => setOpenModal(false)}>I accept</Button>
69-
<Button color="gray" onClick={() => setOpenModal(false)}>
69+
<Button color="alternative" onClick={() => setOpenModal(false)}>
7070
Decline
7171
</Button>
7272
</ModalFooter>

‎apps/web/examples/modal/modal.sizes.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export function Component() {
5050
</ModalBody>
5151
<ModalFooter>
5252
<Button onClick={() => setOpenModal(false)}>I accept</Button>
53-
<Button color="gray" onClick={() => setOpenModal(false)}>
53+
<Button color="alternative" onClick={() => setOpenModal(false)}>
5454
Decline
5555
</Button>
5656
</ModalFooter>
@@ -100,7 +100,7 @@ export function Component() {
100100
</ModalBody>
101101
<ModalFooter>
102102
<Button onClick={() => setOpenModal(false)}>I accept</Button>
103-
<Button color="gray" onClick={() => setOpenModal(false)}>
103+
<Button color="alternative" onClick={() => setOpenModal(false)}>
104104
Decline
105105
</Button>
106106
</ModalFooter>

‎apps/web/examples/modal/modal.withFormElements.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export function Component() {
5050
<Checkbox id="remember" />
5151
<Label htmlFor="remember">Remember me</Label>
5252
</div>
53-
<a href="#" className="text-sm text-cyan-700 hover:underline dark:text-cyan-500">
53+
<a href="#" className="text-sm text-primary-700 hover:underline dark:text-primary-500">
5454
Lost Password?
5555
</a>
5656
</div>
@@ -59,7 +59,7 @@ export function Component() {
5959
</div>
6060
<div className="flex justify-between text-sm font-medium text-gray-500 dark:text-gray-300">
6161
Not registered?&nbsp;
62-
<a href="#" className="text-cyan-700 hover:underline dark:text-cyan-500">
62+
<a href="#" className="text-primary-700 hover:underline dark:text-primary-500">
6363
Create account
6464
</a>
6565
</div>
@@ -111,7 +111,7 @@ export function Component() {
111111
<Checkbox id="remember" />
112112
<Label htmlFor="remember">Remember me</Label>
113113
</div>
114-
<a href="#" className="text-sm text-cyan-700 hover:underline dark:text-cyan-500">
114+
<a href="#" className="text-sm text-primary-700 hover:underline dark:text-primary-500">
115115
Lost Password?
116116
</a>
117117
</div>
@@ -120,7 +120,7 @@ export function Component() {
120120
</div>
121121
<div className="flex justify-between text-sm font-medium text-gray-500 dark:text-gray-300">
122122
Not registered?&nbsp;
123-
<a href="#" className="text-cyan-700 hover:underline dark:text-cyan-500">
123+
<a href="#" className="text-primary-700 hover:underline dark:text-primary-500">
124124
Create account
125125
</a>
126126
</div>

‎apps/web/examples/pagination/pagination.table.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export function Component() {
1717
1818
return (
1919
<div className="flex overflow-x-auto sm:justify-center">
20-
<Pagination layout="table" currentPage={currentPage} totalPages={100} onPageChange={onPageChange} />
20+
<Pagination layout="table" currentPage={currentPage} itemsPerPage={10} totalItems={100} onPageChange={onPageChange} />
2121
</div>
2222
);
2323
}
@@ -30,7 +30,13 @@ export function Component() {
3030

3131
return (
3232
<div className="flex overflow-x-auto sm:justify-center">
33-
<Pagination layout="table" currentPage={currentPage} totalPages={100} onPageChange={onPageChange} />
33+
<Pagination
34+
layout="table"
35+
currentPage={currentPage}
36+
itemsPerPage={10}
37+
totalItems={100}
38+
onPageChange={onPageChange}
39+
/>
3440
</div>
3541
);
3642
}

‎apps/web/examples/pagination/pagination.tableWithIcons.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export function Component() {
1717
1818
return (
1919
<div className="flex overflow-x-auto sm:justify-center">
20-
<Pagination layout="table" currentPage={currentPage} totalPages={100} onPageChange={onPageChange} showIcons />
20+
<Pagination layout="table" currentPage={currentPage} itemsPerPage={10} totalItems={100} onPageChange={onPageChange} showIcons />
2121
</div>
2222
);
2323
}
@@ -30,7 +30,14 @@ export function Component() {
3030

3131
return (
3232
<div className="flex overflow-x-auto sm:justify-center">
33-
<Pagination layout="table" currentPage={currentPage} totalPages={100} onPageChange={onPageChange} showIcons />
33+
<Pagination
34+
layout="table"
35+
currentPage={currentPage}
36+
itemsPerPage={10}
37+
totalItems={100}
38+
onPageChange={onPageChange}
39+
showIcons
40+
/>
3441
</div>
3542
);
3643
}

0 commit comments

Comments
 (0)