Skip to content

Commit 1243234

Browse files
dhavalveeradhavalveera
authored
Merge branch 'main' into feat/bottom-nav
2 parents 8fa5082 + 65e7c89 commit 1243234

File tree

14 files changed

+296
-60
lines changed

14 files changed

+296
-60
lines changed

‎.github/actions/setup/action.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ runs:
77
- name: Setup Bun
88
uses: oven-sh/setup-bun@v1
99
with:
10-
bun-version: 1.0.31
10+
bun-version: 1.1.0
1111

1212
- name: Setup Node
1313
uses: actions/setup-node@v4

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ node_modules
33

44
# misc
55
.DS_Store
6+
*.backup
67
*.pem
78

89
# typescript

‎apps/storybook/package.json

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,22 @@
1515
"react-dom": "18.2.0"
1616
},
1717
"devDependencies": {
18-
"@storybook/addon-essentials": "8.0.2",
19-
"@storybook/addon-interactions": "8.0.2",
20-
"@storybook/addon-links": "8.0.2",
21-
"@storybook/addon-themes": "8.0.2",
22-
"@storybook/blocks": "8.0.2",
23-
"@storybook/react": "8.0.2",
24-
"@storybook/react-vite": "8.0.2",
25-
"@storybook/test": "8.0.2",
26-
"@types/react": "18.2.67",
27-
"@types/react-dom": "18.2.22",
18+
"@storybook/addon-essentials": "8.0.5",
19+
"@storybook/addon-interactions": "8.0.5",
20+
"@storybook/addon-links": "8.0.5",
21+
"@storybook/addon-themes": "8.0.5",
22+
"@storybook/blocks": "8.0.5",
23+
"@storybook/react": "8.0.5",
24+
"@storybook/react-vite": "8.0.5",
25+
"@storybook/test": "8.0.5",
26+
"@types/react": "18.2.73",
27+
"@types/react-dom": "18.2.23",
2828
"@vitejs/plugin-react": "4.2.1",
29-
"autoprefixer": "10.4.18",
30-
"postcss": "8.4.37",
31-
"storybook": "8.0.2",
32-
"tailwindcss": "3.4.1",
33-
"typescript": "5.4.2",
34-
"vite": "5.2.2"
29+
"autoprefixer": "10.4.19",
30+
"postcss": "8.4.38",
31+
"storybook": "8.0.5",
32+
"tailwindcss": "3.4.3",
33+
"typescript": "5.4.3",
34+
"vite": "5.2.7"
3535
}
3636
}

‎apps/web/content/docs/typography/list.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,12 @@ Use the `ordered` prop tag to create an ordered list of items with numbers.
4141

4242
<Example name="list.ordered" />
4343

44+
## Advanced layout
45+
46+
This example can be used to show more details for each list item such as the user’s name, email and profile picture.
47+
48+
<Example name="list.advanced" />
49+
4450
## Horizontal list
4551

4652
Use this example to create a horizontally aligned list of items.

‎apps/web/examples/list/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
export { advanced } from "./list.advanced";
12
export { horizontal } from "./list.horizontal";
23
export { icon } from "./list.icon";
34
export { nested } from "./list.nested";

‎apps/web/examples/list/list.advanced.tsx

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
import { Avatar, List, ListItem } from "flowbite-react";
2+
import { type CodeData } from "~/components/code-demo";
3+
4+
const code = `
5+
"use client";
6+
7+
import { List, Avatar } from "flowbite-react";
8+
9+
function Component() {
10+
return (
11+
<List unstyled className="max-w-md divide-y divide-gray-200 dark:divide-gray-700">
12+
<ListItem className="pb-3 sm:pb-4">
13+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
14+
<Avatar img="/images/people/profile-picture-1.jpg" alt="Neil image" rounded size="sm" />
15+
<div className="min-w-0 flex-1">
16+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Neil Sims</p>
17+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
18+
</div>
19+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$320</div>
20+
</div>
21+
</ListItem>
22+
<ListItem className="py-3 sm:py-4">
23+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
24+
<Avatar img="/images/people/profile-picture-3.jpg" alt="Neil image" rounded size="sm" />
25+
<div className="min-w-0 flex-1">
26+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Bonnie Green</p>
27+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
28+
</div>
29+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$3467</div>
30+
</div>
31+
</ListItem>
32+
<ListItem className="py-3 sm:py-4">
33+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
34+
<Avatar img="/images/people/profile-picture-2.jpg" alt="Neil image" rounded size="sm" />
35+
<div className="min-w-0 flex-1">
36+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Michael Gough</p>
37+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
38+
</div>
39+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$67</div>
40+
</div>
41+
</ListItem>
42+
<ListItem className="py-3 sm:py-4">
43+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
44+
<Avatar img="/images/people/profile-picture-5.jpg" alt="Neil image" rounded size="sm" />
45+
<div className="min-w-0 flex-1">
46+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Thomas Lean</p>
47+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
48+
</div>
49+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$2367</div>
50+
</div>
51+
</ListItem>
52+
<ListItem className="pb-0 pt-3 sm:pt-4">
53+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
54+
<Avatar img="/images/people/profile-picture-4.jpg" alt="Neil image" rounded size="sm" />
55+
<div className="min-w-0 flex-1">
56+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Lana Byrd</p>
57+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
58+
</div>
59+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$367</div>
60+
</div>
61+
</ListItem>
62+
</List>
63+
);
64+
}
65+
`;
66+
67+
const codeRSC = `
68+
import { Avatar, List, ListItem } from "flowbite-react";
69+
70+
function Component() {
71+
return (
72+
<List unstyled className="max-w-md divide-y divide-gray-200 dark:divide-gray-700">
73+
<ListItem className="pb-3 sm:pb-4">
74+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
75+
<Avatar img="/images/people/profile-picture-1.jpg" alt="Neil image" rounded size="sm" />
76+
<div className="min-w-0 flex-1">
77+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Neil Sims</p>
78+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
79+
</div>
80+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$320</div>
81+
</div>
82+
</ListItem>
83+
<ListItem className="py-3 sm:py-4">
84+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
85+
<Avatar img="/images/people/profile-picture-3.jpg" alt="Neil image" rounded size="sm" />
86+
<div className="min-w-0 flex-1">
87+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Bonnie Green</p>
88+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
89+
</div>
90+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$3467</div>
91+
</div>
92+
</ListItem>
93+
<ListItem className="py-3 sm:py-4">
94+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
95+
<Avatar img="/images/people/profile-picture-2.jpg" alt="Neil image" rounded size="sm" />
96+
<div className="min-w-0 flex-1">
97+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Michael Gough</p>
98+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
99+
</div>
100+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$67</div>
101+
</div>
102+
</ListItem>
103+
<ListItem className="py-3 sm:py-4">
104+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
105+
<Avatar img="/images/people/profile-picture-5.jpg" alt="Neil image" rounded size="sm" />
106+
<div className="min-w-0 flex-1">
107+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Thomas Lean</p>
108+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
109+
</div>
110+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$2367</div>
111+
</div>
112+
</ListItem>
113+
<ListItem className="pb-0 pt-3 sm:pt-4">
114+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
115+
<Avatar img="/images/people/profile-picture-4.jpg" alt="Neil image" rounded size="sm" />
116+
<div className="min-w-0 flex-1">
117+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Lana Byrd</p>
118+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
119+
</div>
120+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$367</div>
121+
</div>
122+
</ListItem>
123+
</List>
124+
);
125+
}
126+
`;
127+
128+
function Component() {
129+
return (
130+
<List unstyled className="max-w-md divide-y divide-gray-200 dark:divide-gray-700">
131+
<ListItem className="pb-3 sm:pb-4">
132+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
133+
<Avatar img="/images/people/profile-picture-1.jpg" alt="Neil image" rounded size="sm" />
134+
<div className="min-w-0 flex-1">
135+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Neil Sims</p>
136+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
137+
</div>
138+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$320</div>
139+
</div>
140+
</ListItem>
141+
<ListItem className="py-3 sm:py-4">
142+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
143+
<Avatar img="/images/people/profile-picture-3.jpg" alt="Neil image" rounded size="sm" />
144+
<div className="min-w-0 flex-1">
145+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Bonnie Green</p>
146+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
147+
</div>
148+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$3467</div>
149+
</div>
150+
</ListItem>
151+
<ListItem className="py-3 sm:py-4">
152+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
153+
<Avatar img="/images/people/profile-picture-2.jpg" alt="Neil image" rounded size="sm" />
154+
<div className="min-w-0 flex-1">
155+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Michael Gough</p>
156+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
157+
</div>
158+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$67</div>
159+
</div>
160+
</ListItem>
161+
<ListItem className="py-3 sm:py-4">
162+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
163+
<Avatar img="/images/people/profile-picture-5.jpg" alt="Neil image" rounded size="sm" />
164+
<div className="min-w-0 flex-1">
165+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Thomas Lean</p>
166+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
167+
</div>
168+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$2367</div>
169+
</div>
170+
</ListItem>
171+
<ListItem className="pb-0 pt-3 sm:pt-4">
172+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
173+
<Avatar img="/images/people/profile-picture-4.jpg" alt="Neil image" rounded size="sm" />
174+
<div className="min-w-0 flex-1">
175+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Lana Byrd</p>
176+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
177+
</div>
178+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$367</div>
179+
</div>
180+
</ListItem>
181+
</List>
182+
);
183+
}
184+
185+
export const advanced: CodeData = {
186+
type: "single",
187+
code: [
188+
{
189+
fileName: "client",
190+
language: "tsx",
191+
code,
192+
},
193+
{
194+
fileName: "server",
195+
language: "tsx",
196+
code: codeRSC,
197+
},
198+
],
199+
githubSlug: "list/list.advanced.tsx",
200+
component: <Component />,
201+
};

‎apps/web/package.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,25 +21,25 @@
2121
},
2222
"devDependencies": {
2323
"@docsearch/react": "3.6.0",
24-
"@types/mdx": "2.0.11",
24+
"@types/mdx": "2.0.12",
2525
"@types/prismjs": "1.26.3",
26-
"@types/react": "18.2.67",
27-
"@types/react-dom": "18.2.22",
28-
"autoprefixer": "10.4.18",
26+
"@types/react": "18.2.73",
27+
"@types/react-dom": "18.2.23",
28+
"autoprefixer": "10.4.19",
2929
"eslint-config-next": "14.1.4",
3030
"markdown-toc": "1.2.0",
3131
"next": "14.1.4",
3232
"next-contentlayer": "0.3.4",
33-
"postcss": "8.4.37",
33+
"postcss": "8.4.38",
3434
"prismjs": "1.29.0",
3535
"react": "18.2.0",
3636
"react-dom": "18.2.0",
3737
"react-markdown": "9.0.1",
3838
"rehype-autolink-headings": "7.1.0",
3939
"rehype-prism-plus": "2.0.0",
4040
"rehype-slug": "6.0.0",
41-
"sharp": "0.33.2",
42-
"tailwindcss": "3.4.1",
43-
"typescript": "5.4.2"
41+
"sharp": "0.33.3",
42+
"tailwindcss": "3.4.3",
43+
"typescript": "5.4.3"
4444
}
4545
}

‎bun.lockb

-4.4 KB
Binary file not shown.

‎package.json

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"dev:web": "turbo dev --filter=web",
2222
"format": "turbo format",
2323
"format:check": "turbo format:check",
24+
"postinstall": "bun build:ui",
2425
"lint": "turbo lint",
2526
"lint:fix": "turbo lint:fix",
2627
"release": "changeset publish",
@@ -33,17 +34,18 @@
3334
"@changesets/changelog-github": "0.5.0",
3435
"@changesets/cli": "2.27.1",
3536
"@ianvs/prettier-plugin-sort-imports": "4.2.1",
36-
"@types/bun": "1.0.10",
37+
"@types/bun": "1.0.12",
3738
"@types/web": "0.0.142",
39+
"clean-package": "2.2.0",
3840
"eslint": "8.57.0",
3941
"eslint-config-prettier": "9.1.0",
4042
"eslint-plugin-tailwindcss": "3.15.1",
41-
"npm-check-updates": "16.14.17",
43+
"npm-check-updates": "16.14.18",
4244
"prettier": "3.2.5",
43-
"prettier-plugin-packagejson": "2.4.12",
44-
"prettier-plugin-tailwindcss": "0.5.12",
45+
"prettier-plugin-packagejson": "2.4.14",
46+
"prettier-plugin-tailwindcss": "0.5.13",
4547
"rimraf": "5.0.5",
4648
"turbo": "latest"
4749
},
48-
"packageManager": "bun@1.0.31"
50+
"packageManager": "bun@1.1.0"
4951
}

‎packages/cli/CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# create-flowbite-react
22

3+
## 1.0.6
4+
5+
### Patch Changes
6+
7+
- [#1336](https://github.com/themesberg/flowbite-react/pull/1336) [`b6ebb31`](https://github.com/themesberg/flowbite-react/commit/b6ebb312570630176bcc5adfed9b0d8598f93654) Thanks [@SutuSebastian](https://github.com/SutuSebastian)! - fix `clean-package` flow
8+
39
## 1.0.5
410

511
### Patch Changes

‎packages/cli/package.json

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "create-flowbite-react",
3-
"version": "1.0.5",
3+
"version": "1.0.6",
44
"description": "Quickly scaffold Flowbite React application",
55
"keywords": [
66
"create-flowbite-react",
@@ -39,7 +39,6 @@
3939
"format": "prettier . --write",
4040
"format:check": "prettier . --check",
4141
"prepack": "clean-package",
42-
"postpack": "clean-package restore",
4342
"prepublishOnly": "bun run build",
4443
"start": "bun run dist/index.js",
4544
"typecheck": "tsc --noEmit"
@@ -53,18 +52,21 @@
5352
"rimraf": "5.0.5"
5453
},
5554
"devDependencies": {
56-
"clean-package": "2.2.0",
5755
"tsup": "8.0.2",
58-
"typescript": "5.4.2"
56+
"typescript": "5.4.3"
5957
},
6058
"engines": {
6159
"node": ">=18.0.0"
6260
},
6361
"clean-package": {
6462
"remove": [
65-
"scripts",
6663
"devDependencies",
6764
"clean-package"
68-
]
65+
],
66+
"replace": {
67+
"scripts": {
68+
"postpublish": "clean-package restore"
69+
}
70+
}
6971
}
7072
}

0 commit comments

Comments
 (0)