feat: updated examples (#1417)

* feat: updated examples

* feat: updated examples

docs/package.json

@@ -14,7 +14,7 @@
     "clean": "rimraf ./.next ./out /coverage ./tsconfig.tsbuildinfo"
   },
   "dependencies": {
-    "next": "14.2.7",
+    "next": "14.2.8",
     "nextra": "2.13.4",
     "nextra-theme-docs": "2.13.4",
     "react": "18.3.1",
@@ -23,9 +23,9 @@
   "devDependencies": {
     "@belgattitude/eslint-config-bases": "5.17.0",
     "eslint": "8.57.0",
-    "eslint-config-next": "14.2.7",
+    "eslint-config-next": "14.2.8",
     "eslint-plugin-tailwindcss": "3.17.4",
-    "postcss": "8.4.44",
+    "postcss": "8.4.45",
     "postcss-nesting": "13.0.0",
     "prettier": "3.3.3",
     "rimraf": "6.0.1",

examples/nextjs-app/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

examples/nextjs-app/package.json

@@ -27,9 +27,9 @@
     "@httpx/treeu": "workspace:^",
     "axios": "1.7.7",
     "clsx": "2.1.1",
-    "ky": "1.7.1",
-    "next": "14.2.7",
-    "pino": "9.3.2",
+    "ky": "1.7.2",
+    "next": "14.2.8",
+    "pino": "9.4.0",
     "primeicons": "7.0.0",
     "primereact": "10.8.2",
     "react": "18.3.1",
@@ -40,21 +40,21 @@
   },
   "devDependencies": {
     "@belgattitude/eslint-config-bases": "5.17.0",
-    "@types/node": "22.5.2",
+    "@types/node": "22.5.4",
     "@types/react": "18.3.5",
     "@types/react-dom": "18.3.0",
     "@vitejs/plugin-react-swc": "3.7.0",
     "@vitest/coverage-v8": "2.0.5",
     "@vitest/ui": "2.0.5",
     "cross-env": "7.0.3",
     "eslint": "8.57.0",
-    "eslint-config-next": "14.2.7",
+    "eslint-config-next": "14.2.8",
     "happy-dom": "15.7.3",
-    "postcss": "8.4.44",
+    "postcss": "8.4.45",
     "rimraf": "6.0.1",
     "tailwindcss": "3.4.10",
     "typescript": "5.5.4",
-    "vite": "5.4.2",
+    "vite": "5.4.3",
     "vite-plugin-svgr": "4.2.0",
     "vite-tsconfig-paths": "5.0.1",
     "vitest": "2.0.5",

examples/nextjs-app/src/app/treeu/page.tsx

@@ -1,12 +1,14 @@
 'use client';
 
 import { CityMultiSelect } from '../../components/prime/CityMultiSelect';
+import { FolderTreeSelect } from '../../components/prime/FolderTreeSelect';
 
 export default function TreeUDemoPage() {
   return (
     <div className={'p-10'}>
-      <div className={'flex gap-5 max-w-3'}>
-        <CityMultiSelect className={'w-[200px]'} />
+      <div className={'flex flex-col gap-5 w-[200px]'}>
+        <CityMultiSelect />
+        <FolderTreeSelect />
       </div>
     </div>
   );

examples/nextjs-app/src/components/prime/CityMultiSelect.tsx

@@ -32,7 +32,8 @@ export const CityMultiSelect: FC<Props> = (props) => {
         display="chip"
         placeholder="Select Cities"
         maxSelectedLabels={3}
-        className="w-full md:w-20rem"
+        filter={true}
+        className="w-full"
       />
     </div>
   );

examples/nextjs-app/src/components/prime/FolderTreeSelect.tsx

@@ -0,0 +1,42 @@
+import { TreeSelect, type TreeSelectChangeEvent } from 'primereact/treeselect';
+import React, { type FC, useEffect, useState } from 'react';
+
+import { cn } from '../utils';
+import { NodeService } from './NodeService';
+
+type Props = {
+  className?: string | undefined;
+};
+
+type Data = Awaited<ReturnType<typeof NodeService.getTreeNodes>>;
+
+export const FolderTreeSelect: FC<Props> = (props) => {
+  const [nodes, setNodes] = useState<Data>([]);
+  const [selectedNodeKeys, setSelectedNodeKeys] =
+    useState<TreeSelectChangeEvent['value']>(null);
+  const { className } = props;
+
+  useEffect(() => {
+    NodeService.getTreeNodes()
+      .then((data) => setNodes(data))
+      .catch((e) => {
+        console.error('Error fetching nodes:', e);
+      });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <div className={cn('', className)}>
+      <TreeSelect
+        value={selectedNodeKeys}
+        options={nodes}
+        onChange={(e) => setSelectedNodeKeys(e.value)}
+        metaKeySelection={false}
+        selectionMode="checkbox"
+        display="chip"
+        filter={true}
+        className="w-full"
+        placeholder="Select Items"
+      />
+    </div>
+  );
+};