Merge branch 'main' into feat/bottom-nav

themesberg · Apr 2, 2024 · 1243234 · 1243234
2 parents 8fa5082 + 65e7c89
commit 1243234
Show file tree

Hide file tree

Showing 14 changed files with 296 additions and 60 deletions.
diff --git a/.github/actions/setup/action.yml b/.github/actions/setup/action.yml
@@ -7,7 +7,7 @@ runs:
     - name: Setup Bun
       uses: oven-sh/setup-bun@v1
       with:
-        bun-version: 1.0.31
+        bun-version: 1.1.0
 
     - name: Setup Node
       uses: actions/setup-node@v4

diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@ node_modules
 
 # misc
 .DS_Store
+*.backup
 *.pem
 
 # typescript

diff --git a/apps/storybook/package.json b/apps/storybook/package.json
@@ -15,22 +15,22 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "8.0.2",
-    "@storybook/addon-interactions": "8.0.2",
-    "@storybook/addon-links": "8.0.2",
-    "@storybook/addon-themes": "8.0.2",
-    "@storybook/blocks": "8.0.2",
-    "@storybook/react": "8.0.2",
-    "@storybook/react-vite": "8.0.2",
-    "@storybook/test": "8.0.2",
-    "@types/react": "18.2.67",
-    "@types/react-dom": "18.2.22",
+    "@storybook/addon-essentials": "8.0.5",
+    "@storybook/addon-interactions": "8.0.5",
+    "@storybook/addon-links": "8.0.5",
+    "@storybook/addon-themes": "8.0.5",
+    "@storybook/blocks": "8.0.5",
+    "@storybook/react": "8.0.5",
+    "@storybook/react-vite": "8.0.5",
+    "@storybook/test": "8.0.5",
+    "@types/react": "18.2.73",
+    "@types/react-dom": "18.2.23",
     "@vitejs/plugin-react": "4.2.1",
-    "autoprefixer": "10.4.18",
-    "postcss": "8.4.37",
-    "storybook": "8.0.2",
-    "tailwindcss": "3.4.1",
-    "typescript": "5.4.2",
-    "vite": "5.2.2"
+    "autoprefixer": "10.4.19",
+    "postcss": "8.4.38",
+    "storybook": "8.0.5",
+    "tailwindcss": "3.4.3",
+    "typescript": "5.4.3",
+    "vite": "5.2.7"
   }
 }
diff --git a/apps/web/content/docs/typography/list.mdx b/apps/web/content/docs/typography/list.mdx
@@ -41,6 +41,12 @@ Use the `ordered` prop tag to create an ordered list of items with numbers.
 
 <Example name="list.ordered" />
 
+## Advanced layout
+
+This example can be used to show more details for each list item such as the user’s name, email and profile picture.
+
+<Example name="list.advanced" />
+
 ## Horizontal list
 
 Use this example to create a horizontally aligned list of items.

diff --git a/apps/web/examples/list/index.ts b/apps/web/examples/list/index.ts
@@ -1,3 +1,4 @@
+export { advanced } from "./list.advanced";
 export { horizontal } from "./list.horizontal";
 export { icon } from "./list.icon";
 export { nested } from "./list.nested";

diff --git a/apps/web/examples/list/list.advanced.tsx b/apps/web/examples/list/list.advanced.tsx
@@ -0,0 +1,201 @@
+import { Avatar, List, ListItem } from "flowbite-react";
+import { type CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { List, Avatar } from "flowbite-react";
+
+function Component() {
+  return (
+    <List unstyled className="max-w-md divide-y divide-gray-200 dark:divide-gray-700">
+      <ListItem className="pb-3 sm:pb-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar img="/images/people/profile-picture-1.jpg" alt="Neil image" rounded size="sm" />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Neil Sims</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$320</div>
+        </div>
+      </ListItem>
+      <ListItem className="py-3 sm:py-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar img="/images/people/profile-picture-3.jpg" alt="Neil image" rounded size="sm" />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Bonnie Green</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$3467</div>
+        </div>
+      </ListItem>
+      <ListItem className="py-3 sm:py-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar img="/images/people/profile-picture-2.jpg" alt="Neil image" rounded size="sm" />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Michael Gough</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$67</div>
+        </div>
+      </ListItem>
+      <ListItem className="py-3 sm:py-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar img="/images/people/profile-picture-5.jpg" alt="Neil image" rounded size="sm" />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Thomas Lean</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$2367</div>
+        </div>
+      </ListItem>
+      <ListItem className="pb-0 pt-3 sm:pt-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar img="/images/people/profile-picture-4.jpg" alt="Neil image" rounded size="sm" />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Lana Byrd</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$367</div>
+        </div>
+      </ListItem>
+    </List>
+  );
+}
+`;
+
+const codeRSC = `
+import { Avatar, List, ListItem } from "flowbite-react";
+
+function Component() {
+  return (
+    <List unstyled className="max-w-md divide-y divide-gray-200 dark:divide-gray-700">
+      <ListItem className="pb-3 sm:pb-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar img="/images/people/profile-picture-1.jpg" alt="Neil image" rounded size="sm" />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Neil Sims</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$320</div>
+        </div>
+      </ListItem>
+      <ListItem className="py-3 sm:py-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar img="/images/people/profile-picture-3.jpg" alt="Neil image" rounded size="sm" />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Bonnie Green</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$3467</div>
+        </div>
+      </ListItem>
+      <ListItem className="py-3 sm:py-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar img="/images/people/profile-picture-2.jpg" alt="Neil image" rounded size="sm" />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Michael Gough</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$67</div>
+        </div>
+      </ListItem>
+      <ListItem className="py-3 sm:py-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar img="/images/people/profile-picture-5.jpg" alt="Neil image" rounded size="sm" />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Thomas Lean</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$2367</div>
+        </div>
+      </ListItem>
+      <ListItem className="pb-0 pt-3 sm:pt-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar img="/images/people/profile-picture-4.jpg" alt="Neil image" rounded size="sm" />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Lana Byrd</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$367</div>
+        </div>
+      </ListItem>
+    </List>
+  );
+}
+`;
+
+function Component() {
+  return (
+    <List unstyled className="max-w-md divide-y divide-gray-200 dark:divide-gray-700">
+      <ListItem className="pb-3 sm:pb-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar img="/images/people/profile-picture-1.jpg" alt="Neil image" rounded size="sm" />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Neil Sims</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$320</div>
+        </div>
+      </ListItem>
+      <ListItem className="py-3 sm:py-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar img="/images/people/profile-picture-3.jpg" alt="Neil image" rounded size="sm" />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Bonnie Green</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$3467</div>
+        </div>
+      </ListItem>
+      <ListItem className="py-3 sm:py-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar img="/images/people/profile-picture-2.jpg" alt="Neil image" rounded size="sm" />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Michael Gough</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$67</div>
+        </div>
+      </ListItem>
+      <ListItem className="py-3 sm:py-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar img="/images/people/profile-picture-5.jpg" alt="Neil image" rounded size="sm" />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Thomas Lean</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$2367</div>
+        </div>
+      </ListItem>
+      <ListItem className="pb-0 pt-3 sm:pt-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar img="/images/people/profile-picture-4.jpg" alt="Neil image" rounded size="sm" />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Lana Byrd</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$367</div>
+        </div>
+      </ListItem>
+    </List>
+  );
+}
+
+export const advanced: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "list/list.advanced.tsx",
+  component: <Component />,
+};
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -21,25 +21,25 @@
   },
   "devDependencies": {
     "@docsearch/react": "3.6.0",
-    "@types/mdx": "2.0.11",
+    "@types/mdx": "2.0.12",
     "@types/prismjs": "1.26.3",
-    "@types/react": "18.2.67",
-    "@types/react-dom": "18.2.22",
-    "autoprefixer": "10.4.18",
+    "@types/react": "18.2.73",
+    "@types/react-dom": "18.2.23",
+    "autoprefixer": "10.4.19",
     "eslint-config-next": "14.1.4",
     "markdown-toc": "1.2.0",
     "next": "14.1.4",
     "next-contentlayer": "0.3.4",
-    "postcss": "8.4.37",
+    "postcss": "8.4.38",
     "prismjs": "1.29.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-markdown": "9.0.1",
     "rehype-autolink-headings": "7.1.0",
     "rehype-prism-plus": "2.0.0",
     "rehype-slug": "6.0.0",
-    "sharp": "0.33.2",
-    "tailwindcss": "3.4.1",
-    "typescript": "5.4.2"
+    "sharp": "0.33.3",
+    "tailwindcss": "3.4.3",
+    "typescript": "5.4.3"
   }
 }
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "dev:web": "turbo dev --filter=web",
     "format": "turbo format",
     "format:check": "turbo format:check",
+    "postinstall": "bun build:ui",
     "lint": "turbo lint",
     "lint:fix": "turbo lint:fix",
     "release": "changeset publish",
@@ -33,17 +34,18 @@
     "@changesets/changelog-github": "0.5.0",
     "@changesets/cli": "2.27.1",
     "@ianvs/prettier-plugin-sort-imports": "4.2.1",
-    "@types/bun": "1.0.10",
+    "@types/bun": "1.0.12",
     "@types/web": "0.0.142",
+    "clean-package": "2.2.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-tailwindcss": "3.15.1",
-    "npm-check-updates": "16.14.17",
+    "npm-check-updates": "16.14.18",
     "prettier": "3.2.5",
-    "prettier-plugin-packagejson": "2.4.12",
-    "prettier-plugin-tailwindcss": "0.5.12",
+    "prettier-plugin-packagejson": "2.4.14",
+    "prettier-plugin-tailwindcss": "0.5.13",
     "rimraf": "5.0.5",
     "turbo": "latest"
   },
-  "packageManager": "bun@1.0.31"
+  "packageManager": "bun@1.1.0"
 }
diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md
@@ -1,5 +1,11 @@
 # create-flowbite-react
 
+## 1.0.6
+
+### Patch Changes
+
+- [#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
+
 ## 1.0.5
 
 ### Patch Changes

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-flowbite-react",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Quickly scaffold Flowbite React application",
   "keywords": [
     "create-flowbite-react",
@@ -39,7 +39,6 @@
     "format": "prettier . --write",
     "format:check": "prettier . --check",
     "prepack": "clean-package",
-    "postpack": "clean-package restore",
     "prepublishOnly": "bun run build",
     "start": "bun run dist/index.js",
     "typecheck": "tsc --noEmit"
@@ -53,18 +52,21 @@
     "rimraf": "5.0.5"
   },
   "devDependencies": {
-    "clean-package": "2.2.0",
     "tsup": "8.0.2",
-    "typescript": "5.4.2"
+    "typescript": "5.4.3"
   },
   "engines": {
     "node": ">=18.0.0"
   },
   "clean-package": {
     "remove": [
-      "scripts",
       "devDependencies",
       "clean-package"
-    ]
+    ],
+    "replace": {
+      "scripts": {
+        "postpublish": "clean-package restore"
+      }
+    }
   }
 }