├── src
    ├── vite-env.d.ts
    ├── lib
    │   └── utils.ts
    ├── main.tsx
    ├── pages
    │   ├── orama
    │   │   ├── oramaWorkerInstance.ts
    │   │   ├── main.tsx
    │   │   ├── App.tsx
    │   │   ├── useSearch.ts
    │   │   ├── oramaWorker.ts
    │   │   └── useDataTableOrama.ts
    │   ├── facets
    │   │   ├── main.tsx
    │   │   ├── App.tsx
    │   │   └── useDataTableFacets.ts
    │   ├── itemsjs
    │   │   ├── main.tsx
    │   │   ├── App.tsx
    │   │   └── useDataTableItemsjs.ts
    │   └── tanstack
    │   │   ├── main.tsx
    │   │   ├── App.tsx
    │   │   └── useDataTable.ts
    ├── components
    │   ├── useData.ts
    │   ├── ui
    │   │   ├── separator.tsx
    │   │   ├── input.tsx
    │   │   ├── checkbox.tsx
    │   │   ├── badge.tsx
    │   │   ├── popover.tsx
    │   │   ├── slider.tsx
    │   │   ├── scroll-area.tsx
    │   │   ├── button.tsx
    │   │   ├── card.tsx
    │   │   ├── table.tsx
    │   │   ├── dialog.tsx
    │   │   ├── select.tsx
    │   │   ├── command.tsx
    │   │   └── dropdown-menu.tsx
    │   ├── FacetedFilterSlider.tsx
    │   ├── data-table-toolbar.tsx
    │   ├── data-table-view-options.tsx
    │   ├── columns.tsx
    │   ├── data-table-column-header.tsx
    │   ├── data-table.tsx
    │   ├── FacetedFilterCheckboxes.tsx
    │   ├── sidebar.tsx
    │   ├── data-table-pagination.tsx
    │   └── data-table-faceted-filter.tsx
    ├── index.css
    ├── App.tsx
    └── data
    │   └── schema.ts
├── postcss.config.js
├── tsconfig.node.json
├── .gitignore
├── components.json
├── index.html
├── pages
    ├── facets
    │   └── index.html
    ├── orama
    │   └── index.html
    ├── itemsjs
    │   └── index.html
    └── tanstack
    │   └── index.html
├── .eslintrc.cjs
├── vite.config.ts
├── tsconfig.json
├── README.md
├── README_vite.md
├── public
    └── vite.svg
├── package.json
└── tailwind.config.js


/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 |  
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "skipLibCheck": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "bundler",
 7 |     "allowSyntheticDefaultImports": true
 8 |   },
 9 |   "include": ["vite.config.ts"]
10 | }
11 | 


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import App from './App.tsx'
 4 | import './index.css'
 5 | 
 6 | ReactDOM.createRoot(document.getElementById('root')!).render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 | )
11 | 


--------------------------------------------------------------------------------
/src/pages/orama/oramaWorkerInstance.ts:
--------------------------------------------------------------------------------
1 | import { wrap } from "comlink";
2 | import { OramaWorker } from "./oramaWorker";
3 | 
4 | const worker = new Worker(new URL("./oramaWorker.ts", import.meta.url), {
5 |   type: "module",
6 | });
7 | 
8 | export const oramaWorker = wrap<OramaWorker>(worker);
9 | 


--------------------------------------------------------------------------------
/src/pages/facets/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import App from './App.tsx'
 4 | import '@/index.css'
 5 | 
 6 | ReactDOM.createRoot(document.getElementById('root')!).render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 | )
11 | 


--------------------------------------------------------------------------------
/src/pages/itemsjs/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import App from './App.tsx'
 4 | import '@/index.css'
 5 | 
 6 | ReactDOM.createRoot(document.getElementById('root')!).render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 | )
11 | 


--------------------------------------------------------------------------------
/src/pages/orama/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import App from './App.tsx'
 4 | import '@/index.css'
 5 | 
 6 | ReactDOM.createRoot(document.getElementById('root')!).render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 | )
11 | 


--------------------------------------------------------------------------------
/src/pages/tanstack/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import App from './App.tsx'
 4 | import '@/index.css'
 5 | 
 6 | ReactDOM.createRoot(document.getElementById('root')!).render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 | )
11 | 


--------------------------------------------------------------------------------
/src/components/useData.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | import { Product, defaultLimit, loadData } from "../data/schema";
 3 | 
 4 | export const useData = () => {
 5 |   const [data, setData] = useState([] as Product[]);
 6 |   useEffect(() => {
 7 |     loadData(defaultLimit).then(setData);
 8 |   }, []);
 9 |   return data;
10 | };
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": false,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "src/index.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true
11 |   },
12 |   "aliases": {
13 |     "components": "@/components",
14 |     "utils": "@/lib/utils"
15 |   }
16 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Faceted search demo</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.tsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/pages/facets/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Tanstack table with Facets</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/pages/facets/main.tsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/pages/orama/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Tanstack table with Orama</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/pages/orama/main.tsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/pages/itemsjs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Tanstack table with ItemsJS</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/pages/itemsjs/main.tsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/pages/tanstack/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Tanstack table with native faceting functionality</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/pages/tanstack/main.tsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true },
 4 |   extends: [
 5 |     'eslint:recommended',
 6 |     'plugin:@typescript-eslint/recommended',
 7 |     'plugin:react-hooks/recommended',
 8 |   ],
 9 |   ignorePatterns: ['dist', '.eslintrc.cjs'],
10 |   parser: '@typescript-eslint/parser',
11 |   plugins: ['react-refresh'],
12 |   rules: {
13 |     'react-refresh/only-export-components': [
14 |       'warn',
15 |       { allowConstantExport: true },
16 |     ],
17 |   },
18 | }
19 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import path from "path";
 2 | import react from "@vitejs/plugin-react";
 3 | import { defineConfig } from "vite";
 4 | 
 5 | export default defineConfig({
 6 |   plugins: [react()],
 7 |   resolve: {
 8 |     alias: {
 9 |       "@": path.resolve(__dirname, "./src"),
10 |     },
11 |   },
12 |   build: {
13 |     sourcemap: true,
14 |     rollupOptions: {
15 |       input: {
16 |         main: path.resolve(__dirname, "index.html"),
17 |         facets: path.resolve(__dirname, "pages/facets/index.html"),
18 |         tanstack: path.resolve(__dirname, "pages/tanstack/index.html"),
19 |         itemsjs: path.resolve(__dirname, "pages/itemsjs/index.html"),
20 |         orama: path.resolve(__dirname, "pages/orama/index.html"),
21 |       },
22 |     },
23 |   },
24 | });
25 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "bundler",
11 |     "allowImportingTsExtensions": true,
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "noEmit": true,
15 |     "jsx": "react-jsx",
16 | 
17 |     /* Linting */
18 |     "strict": true,
19 |     "noUnusedLocals": true,
20 |     "noUnusedParameters": true,
21 |     "noFallthroughCasesInSwitch": true,
22 | 
23 |     "baseUrl": ".",
24 |     "paths": {
25 |       "@/*": ["./src/*"]
26 |     }
27 |   },
28 |   "include": ["src"],
29 |   "references": [{ "path": "./tsconfig.node.json" }]
30 | }
31 | 


--------------------------------------------------------------------------------
/src/pages/orama/App.tsx:
--------------------------------------------------------------------------------
 1 | import { columnsProduct } from "@/components/columns";
 2 | import { DataTable } from "@/components/data-table";
 3 | import { Sidebar } from "@/components/sidebar";
 4 | 
 5 | import { useDataTableOrama } from "@/pages/orama/useDataTableOrama";
 6 | 
 7 | export default function App() {
 8 |   const table = useDataTableOrama({ columns: columnsProduct });
 9 | 
10 |   return (
11 |     <div className="border-t">
12 |       <div className="bg-background">
13 |         <div className="grid lg:grid-cols-5">
14 |           <Sidebar table={table} />
15 |           <div className="col-span-3 lg:col-span-4 lg:border-l">
16 |             <div className="h-full px-4 py-6 lg:px-8">
17 |               <DataTable table={table} columns={columnsProduct} />
18 |             </div>
19 |           </div>
20 |         </div>
21 |       </div>
22 |     </div>
23 |   );
24 | }
25 | 


--------------------------------------------------------------------------------
/src/components/ui/separator.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Separator = React.forwardRef<
 7 |   React.ElementRef<typeof SeparatorPrimitive.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
 9 | >(
10 |   (
11 |     { className, orientation = "horizontal", decorative = true, ...props },
12 |     ref
13 |   ) => (
14 |     <SeparatorPrimitive.Root
15 |       ref={ref}
16 |       decorative={decorative}
17 |       orientation={orientation}
18 |       className={cn(
19 |         "shrink-0 bg-border",
20 |         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
21 |         className
22 |       )}
23 |       {...props}
24 |     />
25 |   )
26 | )
27 | Separator.displayName = SeparatorPrimitive.Root.displayName
28 | 
29 | export { Separator }
30 | 


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
15 |           className
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     )
21 |   }
22 | )
23 | Input.displayName = "Input"
24 | 
25 | export { Input }
26 | 


--------------------------------------------------------------------------------
/src/pages/tanstack/App.tsx:
--------------------------------------------------------------------------------
 1 | import { columnsProduct } from "@/components/columns";
 2 | import { DataTable } from "@/components/data-table";
 3 | import { Sidebar } from "@/components/sidebar";
 4 | 
 5 | import { useDataTable } from "@/pages/tanstack/useDataTable";
 6 | import { useData } from "@/components/useData";
 7 | 
 8 | export default function App() {
 9 |   const data = useData();
10 |   const table = useDataTable({ data, columns: columnsProduct });
11 | 
12 |   return (
13 |     <div className="border-t">
14 |       <div className="bg-background">
15 |         <div className="grid lg:grid-cols-5">
16 |           <Sidebar table={table} />
17 |           <div className="col-span-3 lg:col-span-4 lg:border-l">
18 |             <div className="h-full px-4 py-6 lg:px-8">
19 |               <DataTable table={table} columns={columnsProduct} />
20 |             </div>
21 |           </div>
22 |         </div>
23 |       </div>
24 |     </div>
25 |   );
26 | }
27 | 


--------------------------------------------------------------------------------
/src/pages/facets/App.tsx:
--------------------------------------------------------------------------------
 1 | import { columnsProduct } from "@/components/columns";
 2 | import { DataTable } from "@/components/data-table";
 3 | import { Sidebar } from "@/components/sidebar";
 4 | 
 5 | import { useDataTableFacets } from "@/pages/facets/useDataTableFacets";
 6 | import { useData } from "@/components/useData";
 7 | 
 8 | export default function App() {
 9 |   const data = useData();
10 |   const table = useDataTableFacets({ data, columns: columnsProduct });
11 | 
12 |   return (
13 |     <div className="border-t">
14 |       <div className="bg-background">
15 |         <div className="grid lg:grid-cols-5">
16 |           <Sidebar table={table} />
17 |           <div className="col-span-3 lg:col-span-4 lg:border-l">
18 |             <div className="h-full px-4 py-6 lg:px-8">
19 |               <DataTable table={table} columns={columnsProduct} />
20 |             </div>
21 |           </div>
22 |         </div>
23 |       </div>
24 |     </div>
25 |   );
26 | }
27 | 


--------------------------------------------------------------------------------
/src/pages/itemsjs/App.tsx:
--------------------------------------------------------------------------------
 1 | import { columnsProduct } from "@/components/columns";
 2 | import { DataTable } from "@/components/data-table";
 3 | import { Sidebar } from "@/components/sidebar";
 4 | 
 5 | import { useDataTableItemsjs } from "@/pages/itemsjs/useDataTableItemsjs";
 6 | import { useData } from "@/components/useData";
 7 | 
 8 | export default function App() {
 9 |   const data = useData();
10 |   const table = useDataTableItemsjs({ data, columns: columnsProduct });
11 | 
12 |   return (
13 |     <div className="border-t">
14 |       <div className="bg-background">
15 |         <div className="grid lg:grid-cols-5">
16 |           <Sidebar table={table} />
17 |           <div className="col-span-3 lg:col-span-4 lg:border-l">
18 |             <div className="h-full px-4 py-6 lg:px-8">
19 |               <DataTable table={table} columns={columnsProduct} />
20 |             </div>
21 |           </div>
22 |         </div>
23 |       </div>
24 |     </div>
25 |   );
26 | }
27 | 


--------------------------------------------------------------------------------
/src/components/FacetedFilterSlider.tsx:
--------------------------------------------------------------------------------
 1 | import { Column } from "@tanstack/react-table";
 2 | import { Slider } from "@/components/ui/slider";
 3 | import { useMemo } from "react";
 4 | 
 5 | interface FacetedFilterSliderProps<TData, TValue> {
 6 |   column?: Column<TData, TValue>;
 7 |   title?: string;
 8 | }
 9 | 
10 | export function FacetedFilterSlider<TData, TValue>({
11 |   column,
12 | }: FacetedFilterSliderProps<TData, TValue>) {
13 |   const facetsMemo = useMemo(
14 |     () => column?.getFacetedMinMaxValues(),
15 |     [column?.getFacetedMinMaxValues()?.length]
16 |   );
17 |   const facets = column?.getFacetedMinMaxValues();
18 |   if (!facets || !facetsMemo) return null;
19 | 
20 |   const [min, max] = facetsMemo;
21 |   return (
22 |     <Slider
23 |       // @ts-expect-error xxx
24 |       value={column?.getFilterValue() || facets}
25 |       onValueChange={(x) => {
26 |         column?.setFilterValue(x);
27 |       }}
28 |       max={max}
29 |       min={min}
30 |       step={0.01}
31 |       defaultValue={facets}
32 |       minStepsBetweenThumbs={100}
33 |     />
34 |   );
35 | }
36 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Faceted search experiments
 2 | 
 3 | - Read more about experiment [here](https://stereobooster.com/posts/faceted-search/)
 4 | - Checkout online demo [here](https://faceted.stereobooster.com/)
 5 | 
 6 | ## Development
 7 | 
 8 | ```
 9 | pnpm i
10 | pnpm run dev
11 | ```
12 | 
13 | ## Experiments
14 | 
15 | ### Tanstack
16 | 
17 | - [source code](src/pages/tanstack/)
18 | - [demo](https://faceted.stereobooster.com/pages/tanstack/)
19 | 
20 | ### Orama
21 | 
22 | - [source code](src/pages/orama/)
23 | - [demo](https://faceted.stereobooster.com/pages/orama/)
24 | 
25 | ### ItemsJS
26 | 
27 | - [source code](src/pages/itemsjs/)
28 | - [demo](https://faceted.stereobooster.com/pages/itemsjs/)
29 | 
30 | **Note**: production build for ItemsJS is broken, but it work in development mode. Most likely it is brokwn here:
31 | 
32 | ```ts
33 | chain(items)
34 |     .map((item) => {
35 |       fields.forEach((field) => {
36 | ```
37 | 
38 | This demo is very similar to Facets demo. So use it meantime
39 | 
40 | ### Facets
41 | 
42 | - [source code](src/pages/facets/)
43 | - [demo](https://faceted.stereobooster.com/pages/facets/)
44 | 


--------------------------------------------------------------------------------
/src/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 3 | import { Check } from "lucide-react"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const Checkbox = React.forwardRef<
 8 |   React.ElementRef<typeof CheckboxPrimitive.Root>,
 9 |   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
10 | >(({ className, ...props }, ref) => (
11 |   <CheckboxPrimitive.Root
12 |     ref={ref}
13 |     className={cn(
14 |       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
15 |       className
16 |     )}
17 |     {...props}
18 |   >
19 |     <CheckboxPrimitive.Indicator
20 |       className={cn("flex items-center justify-center text-current")}
21 |     >
22 |       <Check className="h-4 w-4" />
23 |     </CheckboxPrimitive.Indicator>
24 |   </CheckboxPrimitive.Root>
25 | ))
26 | Checkbox.displayName = CheckboxPrimitive.Root.displayName
27 | 
28 | export { Checkbox }
29 | 


--------------------------------------------------------------------------------
/src/components/ui/badge.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const badgeVariants = cva(
 7 |   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default:
12 |           "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
13 |         secondary:
14 |           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15 |         destructive:
16 |           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
17 |         outline: "text-foreground",
18 |       },
19 |     },
20 |     defaultVariants: {
21 |       variant: "default",
22 |     },
23 |   }
24 | )
25 | 
26 | export interface BadgeProps
27 |   extends React.HTMLAttributes<HTMLDivElement>,
28 |     VariantProps<typeof badgeVariants> {}
29 | 
30 | function Badge({ className, variant, ...props }: BadgeProps) {
31 |   return (
32 |     <div className={cn(badgeVariants({ variant }), className)} {...props} />
33 |   )
34 | }
35 | 
36 | export { Badge, badgeVariants }
37 | 


--------------------------------------------------------------------------------
/src/components/ui/popover.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as PopoverPrimitive from "@radix-ui/react-popover"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Popover = PopoverPrimitive.Root
 7 | 
 8 | const PopoverTrigger = PopoverPrimitive.Trigger
 9 | 
10 | const PopoverContent = React.forwardRef<
11 |   React.ElementRef<typeof PopoverPrimitive.Content>,
12 |   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
13 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
14 |   <PopoverPrimitive.Portal>
15 |     <PopoverPrimitive.Content
16 |       ref={ref}
17 |       align={align}
18 |       sideOffset={sideOffset}
19 |       className={cn(
20 |         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
21 |         className
22 |       )}
23 |       {...props}
24 |     />
25 |   </PopoverPrimitive.Portal>
26 | ))
27 | PopoverContent.displayName = PopoverPrimitive.Content.displayName
28 | 
29 | export { Popover, PopoverTrigger, PopoverContent }
30 | 


--------------------------------------------------------------------------------
/README_vite.md:
--------------------------------------------------------------------------------
 1 | # React + TypeScript + Vite
 2 | 
 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 4 | 
 5 | Currently, two official plugins are available:
 6 | 
 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 9 | 
10 | ## Expanding the ESLint configuration
11 | 
12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13 | 
14 | - Configure the top-level `parserOptions` property like this:
15 | 
16 | ```js
17 |    parserOptions: {
18 |     ecmaVersion: 'latest',
19 |     sourceType: 'module',
20 |     project: ['./tsconfig.json', './tsconfig.node.json'],
21 |     tsconfigRootDir: __dirname,
22 |    },
23 | ```
24 | 
25 | - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
26 | - Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
27 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
28 | 


--------------------------------------------------------------------------------
/src/components/ui/slider.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as SliderPrimitive from "@radix-ui/react-slider"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Slider = React.forwardRef<
 7 |   React.ElementRef<typeof SliderPrimitive.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
 9 | >(({ className, ...props }, ref) => (
10 |   <SliderPrimitive.Root
11 |     ref={ref}
12 |     className={cn(
13 |       "relative flex w-full touch-none select-none items-center",
14 |       className
15 |     )}
16 |     {...props}
17 |   >
18 |     <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
19 |       <SliderPrimitive.Range className="absolute h-full bg-primary" />
20 |     </SliderPrimitive.Track>
21 |     <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
22 |     <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
23 |   </SliderPrimitive.Root>
24 | ))
25 | Slider.displayName = SliderPrimitive.Root.displayName
26 | 
27 | export { Slider }
28 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/components/data-table-toolbar.tsx:
--------------------------------------------------------------------------------
 1 | import { Cross2Icon } from "@radix-ui/react-icons"
 2 | import { Table } from "@tanstack/react-table"
 3 | 
 4 | import { Button } from "@/components/ui/button"
 5 | import { Input } from "@/components/ui/input"
 6 | import { DataTableViewOptions } from "./data-table-view-options"
 7 | 
 8 | interface DataTableToolbarProps<TData> {
 9 |   table: Table<TData>
10 | }
11 | 
12 | export function DataTableToolbar<TData>({
13 |   table,
14 | }: DataTableToolbarProps<TData>) {
15 |   const isFiltered = table.getState().columnFilters.length > 0
16 | 
17 |   return (
18 |     <div className="flex items-center justify-between">
19 |       <div className="flex flex-1 items-center space-x-2">
20 |         <Input
21 |           placeholder="Filter products..."
22 |           value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
23 |           onChange={(event) =>
24 |             table.getColumn("name")?.setFilterValue(event.target.value)
25 |           }
26 |           className="h-8 w-[150px] lg:w-[250px]"
27 |         />
28 |         {isFiltered && (
29 |           <Button
30 |             variant="ghost"
31 |             onClick={() => table.resetColumnFilters()}
32 |             className="h-8 px-2 lg:px-3"
33 |           >
34 |             Reset
35 |             <Cross2Icon className="ml-2 h-4 w-4" />
36 |           </Button>
37 |         )}
38 |       </div>
39 |       <DataTableViewOptions table={table} />
40 |     </div>
41 |   )
42 | }
43 | 


--------------------------------------------------------------------------------
/src/pages/orama/useSearch.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef, useState } from "react";
 2 | import { oramaWorker } from "./oramaWorkerInstance";
 3 | import { proxy } from "comlink";
 4 | import { ResultsOramaWorker, SearchParamsOramaWorker } from "./oramaWorker";
 5 | 
 6 | export const useSearch = ({
 7 |   term,
 8 |   where,
 9 |   sortBy,
10 |   limit,
11 |   offset,
12 | }: SearchParamsOramaWorker) => {
13 |   const [results, setResults] = useState<ResultsOramaWorker | null>(null);
14 |   const counter = useRef(0);
15 | 
16 |   useEffect(() => {
17 |     oramaWorker.load();
18 | 
19 |     oramaWorker.onLoadProgress(
20 |       proxy((percentage, total) => {
21 |         console.log(percentage, total);
22 |         if (counter.current > 1) return;
23 |         oramaWorker
24 |           .search({ term, where, signalId: -1 })
25 |           .then(({ signalId, ...rest }) => {
26 |             if (signalId === -1) setResults(rest);
27 |           });
28 |       })
29 |     );
30 | 
31 |     return () => {
32 |       // @ts-expect-error Comlink TS signature doesn't support optional params
33 |       oramaWorker.onLoadProgress();
34 |       counter.current = -1;
35 |     };
36 |   }, []);
37 | 
38 |   useEffect(() => {
39 |     counter.current += 1;
40 |     oramaWorker
41 |       .search({ term, where, sortBy, limit, offset, signalId: counter.current })
42 |       .then(({ signalId, ...rest }) => {
43 |         if (signalId === counter.current) setResults(rest);
44 |       });
45 |   }, [term, where, sortBy, limit, offset]);
46 | 
47 |   return results;
48 | };
49 | 


--------------------------------------------------------------------------------
/src/pages/tanstack/useDataTable.ts:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import {
 3 |   ColumnDef,
 4 |   ColumnFiltersState,
 5 |   SortingState,
 6 |   VisibilityState,
 7 |   getCoreRowModel,
 8 |   getFacetedRowModel,
 9 |   getFacetedUniqueValues,
10 |   getFilteredRowModel,
11 |   getPaginationRowModel,
12 |   getSortedRowModel,
13 |   getFacetedMinMaxValues,
14 |   useReactTable,
15 | } from "@tanstack/react-table";
16 | import { defaultVisibilityFilter } from "@/data/schema";
17 | 
18 | interface DataTableProps<TData, TValue> {
19 |   data: TData[];
20 |   columns: ColumnDef<TData, TValue>[];
21 | }
22 | 
23 | export const useDataTable = <TData, TValue>({
24 |   columns,
25 |   data,
26 | }: DataTableProps<TData, TValue>) => {
27 |   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(defaultVisibilityFilter);
28 |   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
29 |   const [sorting, setSorting] = useState<SortingState>([]);
30 | 
31 |   return useReactTable({
32 |     data,
33 |     columns,
34 |     state: {
35 |       sorting,
36 |       columnVisibility,
37 |       columnFilters,
38 |     },
39 |     onSortingChange: setSorting,
40 |     onColumnFiltersChange: setColumnFilters,
41 |     onColumnVisibilityChange: setColumnVisibility,
42 |     getCoreRowModel: getCoreRowModel(),
43 |     getFilteredRowModel: getFilteredRowModel(),
44 |     getPaginationRowModel: getPaginationRowModel(),
45 |     getSortedRowModel: getSortedRowModel(),
46 |     getFacetedRowModel: getFacetedRowModel(),
47 |     getFacetedUniqueValues: getFacetedUniqueValues(),
48 |     getFacetedMinMaxValues: getFacetedMinMaxValues(),
49 |   });
50 | };
51 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 |  
 5 | @layer base {
 6 |   :root {
 7 |     --background: 0 0% 100%;
 8 |     --foreground: 222.2 84% 4.9%;
 9 | 
10 |     --card: 0 0% 100%;
11 |     --card-foreground: 222.2 84% 4.9%;
12 |  
13 |     --popover: 0 0% 100%;
14 |     --popover-foreground: 222.2 84% 4.9%;
15 |  
16 |     --primary: 222.2 47.4% 11.2%;
17 |     --primary-foreground: 210 40% 98%;
18 |  
19 |     --secondary: 210 40% 96.1%;
20 |     --secondary-foreground: 222.2 47.4% 11.2%;
21 |  
22 |     --muted: 210 40% 96.1%;
23 |     --muted-foreground: 215.4 16.3% 46.9%;
24 |  
25 |     --accent: 210 40% 96.1%;
26 |     --accent-foreground: 222.2 47.4% 11.2%;
27 |  
28 |     --destructive: 0 84.2% 60.2%;
29 |     --destructive-foreground: 210 40% 98%;
30 | 
31 |     --border: 214.3 31.8% 91.4%;
32 |     --input: 214.3 31.8% 91.4%;
33 |     --ring: 222.2 84% 4.9%;
34 |  
35 |     --radius: 0.5rem;
36 |   }
37 |  
38 |   .dark {
39 |     --background: 222.2 84% 4.9%;
40 |     --foreground: 210 40% 98%;
41 |  
42 |     --card: 222.2 84% 4.9%;
43 |     --card-foreground: 210 40% 98%;
44 |  
45 |     --popover: 222.2 84% 4.9%;
46 |     --popover-foreground: 210 40% 98%;
47 |  
48 |     --primary: 210 40% 98%;
49 |     --primary-foreground: 222.2 47.4% 11.2%;
50 |  
51 |     --secondary: 217.2 32.6% 17.5%;
52 |     --secondary-foreground: 210 40% 98%;
53 |  
54 |     --muted: 217.2 32.6% 17.5%;
55 |     --muted-foreground: 215 20.2% 65.1%;
56 |  
57 |     --accent: 217.2 32.6% 17.5%;
58 |     --accent-foreground: 210 40% 98%;
59 |  
60 |     --destructive: 0 62.8% 30.6%;
61 |     --destructive-foreground: 210 40% 98%;
62 |  
63 |     --border: 217.2 32.6% 17.5%;
64 |     --input: 217.2 32.6% 17.5%;
65 |     --ring: 212.7 26.8% 83.9%;
66 |   }
67 | }
68 |  
69 | @layer base {
70 |   * {
71 |     @apply border-border;
72 |   }
73 |   body {
74 |     @apply bg-background text-foreground;
75 |   }
76 | }


--------------------------------------------------------------------------------
/src/components/data-table-view-options.tsx:
--------------------------------------------------------------------------------
 1 | import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
 2 | import { MixerHorizontalIcon } from "@radix-ui/react-icons";
 3 | import { Table } from "@tanstack/react-table";
 4 | 
 5 | import { Button } from "@/components/ui/button";
 6 | import {
 7 |   DropdownMenu,
 8 |   DropdownMenuCheckboxItem,
 9 |   DropdownMenuContent,
10 |   DropdownMenuLabel,
11 |   DropdownMenuSeparator,
12 | } from "@/components/ui/dropdown-menu";
13 | 
14 | interface DataTableViewOptionsProps<TData> {
15 |   table: Table<TData>;
16 | }
17 | 
18 | export function DataTableViewOptions<TData>({
19 |   table,
20 | }: DataTableViewOptionsProps<TData>) {
21 |   return (
22 |     <DropdownMenu>
23 |       <DropdownMenuTrigger asChild>
24 |         <Button
25 |           variant="outline"
26 |           size="sm"
27 |           className="ml-auto hidden h-8 lg:flex"
28 |         >
29 |           <MixerHorizontalIcon className="mr-2 h-4 w-4" />
30 |           View
31 |         </Button>
32 |       </DropdownMenuTrigger>
33 |       <DropdownMenuContent align="end" className="w-[150px]">
34 |         <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
35 |         <DropdownMenuSeparator />
36 |         {table
37 |           .getAllColumns()
38 |           .filter(
39 |             (column) =>
40 |               typeof column.accessorFn !== "undefined" && column.getCanHide()
41 |           )
42 |           .map((column) => {
43 |             return (
44 |               <DropdownMenuCheckboxItem
45 |                 key={column.id}
46 |                 className="capitalize"
47 |                 checked={column.getIsVisible()}
48 |                 onCheckedChange={(value) => column.toggleVisibility(!!value)}
49 |               >
50 |                 {column.id}
51 |               </DropdownMenuCheckboxItem>
52 |             );
53 |           })}
54 |       </DropdownMenuContent>
55 |     </DropdownMenu>
56 |   );
57 | }
58 | 


--------------------------------------------------------------------------------
/src/components/columns.tsx:
--------------------------------------------------------------------------------
 1 | import { ColumnDef } from "@tanstack/react-table";
 2 | import { Product } from "../data/schema";
 3 | import { DataTableColumnHeader } from "./data-table-column-header";
 4 | 
 5 | export const columnsProduct: ColumnDef<Product>[] = [
 6 |   {
 7 |     accessorKey: "name",
 8 |     header: ({ column }) => (
 9 |       <DataTableColumnHeader column={column} title="Name" />
10 |     ),
11 |   },
12 |   {
13 |     accessorKey: "shortDescription",
14 |     header: ({ column }) => (
15 |       <DataTableColumnHeader column={column} title="Description" />
16 |     ),
17 |   },
18 |   {
19 |     accessorKey: "salePrice",
20 |     header: ({ column }) => (
21 |       <DataTableColumnHeader column={column} title="Price" />
22 |     ),
23 |   },
24 |   {
25 |     accessorKey: "bestSellingRank",
26 |     header: ({ column }) => (
27 |       <DataTableColumnHeader column={column} title="Rank" />
28 |     ),
29 |   },
30 |   {
31 |     accessorKey: "manufacturer",
32 |     header: ({ column }) => (
33 |       <DataTableColumnHeader column={column} title="Manufacturer" />
34 |     ),
35 |     filterFn: (row, id, value) => {
36 |       return value.includes(row.getValue(id));
37 |     },
38 |   },
39 |   {
40 |     accessorKey: "type",
41 |     header: ({ column }) => (
42 |       <DataTableColumnHeader column={column} title="Type" />
43 |     ),
44 |     filterFn: (row, id, value) => {
45 |       return value.includes(row.getValue(id));
46 |     },
47 |   },
48 |   {
49 |     accessorKey: "categories",
50 |     header: ({ column }) => (
51 |       <DataTableColumnHeader column={column} title="Categories" />
52 |     ),
53 |     filterFn: (row, id, value) => {
54 |       const rowValue = row.getValue(id) as string[];
55 |       if (value.length === 0 || rowValue.length === 0) return false;
56 |       return rowValue.some((x) => value.includes(x));
57 |     },
58 |     getUniqueValues: (rowData) => rowData["categories"],
59 |   },
60 | ];
61 | 


--------------------------------------------------------------------------------
/src/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const ScrollArea = React.forwardRef<
 7 |   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 9 | >(({ className, children, ...props }, ref) => (
10 |   <ScrollAreaPrimitive.Root
11 |     ref={ref}
12 |     className={cn("relative overflow-hidden", className)}
13 |     {...props}
14 |   >
15 |     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
16 |       {children}
17 |     </ScrollAreaPrimitive.Viewport>
18 |     <ScrollBar />
19 |     <ScrollAreaPrimitive.Corner />
20 |   </ScrollAreaPrimitive.Root>
21 | ))
22 | ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
23 | 
24 | const ScrollBar = React.forwardRef<
25 |   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
26 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
27 | >(({ className, orientation = "vertical", ...props }, ref) => (
28 |   <ScrollAreaPrimitive.ScrollAreaScrollbar
29 |     ref={ref}
30 |     orientation={orientation}
31 |     className={cn(
32 |       "flex touch-none select-none transition-colors",
33 |       orientation === "vertical" &&
34 |         "h-full w-2.5 border-l border-l-transparent p-[1px]",
35 |       orientation === "horizontal" &&
36 |         "h-2.5 flex-col border-t border-t-transparent p-[1px]",
37 |       className
38 |     )}
39 |     {...props}
40 |   >
41 |     <ScrollAreaPrimitive.ScrollAreaThumb
42 |       className={cn(
43 |         "relative rounded-full bg-border",
44 |         orientation === "vertical" && "flex-1"
45 |       )}
46 |     />
47 |   </ScrollAreaPrimitive.ScrollAreaScrollbar>
48 | ))
49 | ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
50 | 
51 | export { ScrollArea, ScrollBar }
52 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "faceted-search",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "tsc && vite build",
 9 |     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@orama/orama": "2.0.0-beta.1",
14 |     "@radix-ui/react-avatar": "^1.0.4",
15 |     "@radix-ui/react-checkbox": "^1.0.4",
16 |     "@radix-ui/react-dialog": "^1.0.5",
17 |     "@radix-ui/react-dropdown-menu": "^2.0.6",
18 |     "@radix-ui/react-icons": "^1.3.0",
19 |     "@radix-ui/react-popover": "^1.0.7",
20 |     "@radix-ui/react-scroll-area": "^1.0.5",
21 |     "@radix-ui/react-select": "^2.0.0",
22 |     "@radix-ui/react-separator": "^1.0.3",
23 |     "@radix-ui/react-slider": "^1.1.2",
24 |     "@radix-ui/react-slot": "^1.0.2",
25 |     "@stereobooster/facets": "^0.1.1",
26 |     "@stereobooster/itemsjs": "^2.1.22",
27 |     "@tanstack/react-table": "^8.10.7",
28 |     "class-variance-authority": "^0.7.0",
29 |     "clsx": "^2.0.0",
30 |     "cmdk": "^0.2.0",
31 |     "comlink": "^4.4.1",
32 |     "lucide-react": "^0.289.0",
33 |     "quick-score": "^0.2.0",
34 |     "react": "^18.2.0",
35 |     "react-dom": "^18.2.0",
36 |     "zod": "^3.22.4"
37 |   },
38 |   "devDependencies": {
39 |     "@types/fastbitset": "^0.2.2",
40 |     "@types/node": "^20.8.6",
41 |     "@types/react": "^18.2.15",
42 |     "@types/react-dom": "^18.2.7",
43 |     "@typescript-eslint/eslint-plugin": "^6.0.0",
44 |     "@typescript-eslint/parser": "^6.0.0",
45 |     "@vitejs/plugin-react": "^4.3.0",
46 |     "autoprefixer": "^10.4.16",
47 |     "eslint": "^8.45.0",
48 |     "eslint-plugin-react-hooks": "^4.6.0",
49 |     "eslint-plugin-react-refresh": "^0.4.3",
50 |     "postcss": "^8.4.31",
51 |     "tailwind-merge": "^1.14.0",
52 |     "tailwindcss": "^3.3.5",
53 |     "tailwindcss-animate": "^1.0.7",
54 |     "typescript": "^5.4.5",
55 |     "vite": "^5.2.11"
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-xl border bg-card text-card-foreground shadow",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn("font-semibold leading-none tracking-tight", className)}
39 |     {...props}
40 |   />
41 | ))
42 | CardTitle.displayName = "CardTitle"
43 | 
44 | const CardDescription = React.forwardRef<
45 |   HTMLParagraphElement,
46 |   React.HTMLAttributes<HTMLParagraphElement>
47 | >(({ className, ...props }, ref) => (
48 |   <p
49 |     ref={ref}
50 |     className={cn("text-sm text-muted-foreground", className)}
51 |     {...props}
52 |   />
53 | ))
54 | CardDescription.displayName = "CardDescription"
55 | 
56 | const CardContent = React.forwardRef<
57 |   HTMLDivElement,
58 |   React.HTMLAttributes<HTMLDivElement>
59 | >(({ className, ...props }, ref) => (
60 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
61 | ))
62 | CardContent.displayName = "CardContent"
63 | 
64 | const CardFooter = React.forwardRef<
65 |   HTMLDivElement,
66 |   React.HTMLAttributes<HTMLDivElement>
67 | >(({ className, ...props }, ref) => (
68 |   <div
69 |     ref={ref}
70 |     className={cn("flex items-center p-6 pt-0", className)}
71 |     {...props}
72 |   />
73 | ))
74 | CardFooter.displayName = "CardFooter"
75 | 
76 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
77 | 


--------------------------------------------------------------------------------
/src/pages/orama/oramaWorker.ts:
--------------------------------------------------------------------------------
 1 | import { expose } from "comlink";
 2 | import {
 3 |   Product,
 4 |   defaultLimit,
 5 |   loadData,
 6 |   oramaFacets,
 7 |   oramaSchema,
 8 |   searchFields,
 9 | } from "@/data/schema";
10 | import {
11 |   SearchParams,
12 |   TypedDocument,
13 |   Results,
14 |   create,
15 |   insertMultiple,
16 |   search,
17 |   Orama,
18 | } from "@orama/orama";
19 | 
20 | // Module format "iife" does not support top-level await. Use the "es" or "system" output formats rather.
21 | let ecomerceDB: Orama<typeof oramaSchema>;
22 | const ecomerceDBPromise = create({ schema: oramaSchema }).then((x) => {
23 |   ecomerceDB = x;
24 | });
25 | 
26 | type ProgressCB = (percentage: number, total: number) => void;
27 | 
28 | const batch = 200;
29 | let total = 0;
30 | let loading = 0;
31 | let callback: ProgressCB | undefined;
32 | 
33 | const load = (limit = defaultLimit) => {
34 |   if (loading > 0) return false;
35 |   loading = 1;
36 | 
37 |   return ecomerceDBPromise.then(() =>
38 |     loadData(limit).then(async (data) => {
39 |       let tmp = [];
40 |       for (let i = 0; i < limit; i++) {
41 |         tmp.push(data[i]);
42 |         if (tmp.length >= batch || i === limit - 1) {
43 |           // @ts-expect-error Orama TS signature is wrong
44 |           await insertMultiple(ecomerceDB, tmp);
45 |           total += tmp.length;
46 |           tmp = [];
47 |           if (callback) callback(i / (limit - 1), total);
48 |         }
49 |       }
50 |       loading = 2;
51 | 
52 |       return true;
53 |     })
54 |   );
55 | };
56 | 
57 | type EcomerceDB = typeof ecomerceDB;
58 | 
59 | export type SearchParamsOramaWorker = SearchParams<
60 |   EcomerceDB,
61 |   TypedDocument<EcomerceDB>
62 | > & {
63 |   signalId?: number;
64 | };
65 | 
66 | export type ResultsOramaWorker = Results<Product> & {
67 |   signalId?: number;
68 | };
69 | 
70 | const api = {
71 |   load,
72 |   onLoadProgress(cb: ProgressCB) {
73 |     callback = cb;
74 |   },
75 |   search({ signalId, ...rest }: SearchParamsOramaWorker) {
76 |     return ecomerceDBPromise.then(() => {
77 |       return search(ecomerceDB, {
78 |         ...rest,
79 |         properties: searchFields,
80 |         facets: oramaFacets,
81 |       }).then((res: ResultsOramaWorker) => {
82 |         res.signalId = signalId;
83 |         return res;
84 |       });
85 |     });
86 |   },
87 | };
88 | 
89 | export type OramaWorker = typeof api;
90 | 
91 | expose(api);
92 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   darkMode: ["class"],
 4 |   content: [
 5 |     './pages/**/*.{ts,tsx}',
 6 |     './components/**/*.{ts,tsx}',
 7 |     './app/**/*.{ts,tsx}',
 8 |     './src/**/*.{ts,tsx}',
 9 | 	],
10 |   theme: {
11 |     container: {
12 |       center: true,
13 |       padding: "2rem",
14 |       screens: {
15 |         "2xl": "1400px",
16 |       },
17 |     },
18 |     extend: {
19 |       colors: {
20 |         border: "hsl(var(--border))",
21 |         input: "hsl(var(--input))",
22 |         ring: "hsl(var(--ring))",
23 |         background: "hsl(var(--background))",
24 |         foreground: "hsl(var(--foreground))",
25 |         primary: {
26 |           DEFAULT: "hsl(var(--primary))",
27 |           foreground: "hsl(var(--primary-foreground))",
28 |         },
29 |         secondary: {
30 |           DEFAULT: "hsl(var(--secondary))",
31 |           foreground: "hsl(var(--secondary-foreground))",
32 |         },
33 |         destructive: {
34 |           DEFAULT: "hsl(var(--destructive))",
35 |           foreground: "hsl(var(--destructive-foreground))",
36 |         },
37 |         muted: {
38 |           DEFAULT: "hsl(var(--muted))",
39 |           foreground: "hsl(var(--muted-foreground))",
40 |         },
41 |         accent: {
42 |           DEFAULT: "hsl(var(--accent))",
43 |           foreground: "hsl(var(--accent-foreground))",
44 |         },
45 |         popover: {
46 |           DEFAULT: "hsl(var(--popover))",
47 |           foreground: "hsl(var(--popover-foreground))",
48 |         },
49 |         card: {
50 |           DEFAULT: "hsl(var(--card))",
51 |           foreground: "hsl(var(--card-foreground))",
52 |         },
53 |       },
54 |       borderRadius: {
55 |         lg: "var(--radius)",
56 |         md: "calc(var(--radius) - 2px)",
57 |         sm: "calc(var(--radius) - 4px)",
58 |       },
59 |       keyframes: {
60 |         "accordion-down": {
61 |           from: { height: 0 },
62 |           to: { height: "var(--radix-accordion-content-height)" },
63 |         },
64 |         "accordion-up": {
65 |           from: { height: "var(--radix-accordion-content-height)" },
66 |           to: { height: 0 },
67 |         },
68 |       },
69 |       animation: {
70 |         "accordion-down": "accordion-down 0.2s ease-out",
71 |         "accordion-up": "accordion-up 0.2s ease-out",
72 |       },
73 |     },
74 |   },
75 |   plugins: [require("tailwindcss-animate")],
76 | }


--------------------------------------------------------------------------------
/src/components/data-table-column-header.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   ArrowDownIcon,
 3 |   ArrowUpIcon,
 4 |   CaretSortIcon,
 5 |   EyeNoneIcon,
 6 | } from "@radix-ui/react-icons";
 7 | import { Column } from "@tanstack/react-table";
 8 | 
 9 | import { cn } from "@/lib/utils";
10 | import { Button } from "@/components/ui/button";
11 | import {
12 |   DropdownMenu,
13 |   DropdownMenuContent,
14 |   DropdownMenuItem,
15 |   DropdownMenuSeparator,
16 |   DropdownMenuTrigger,
17 | } from "@/components/ui/dropdown-menu";
18 | 
19 | interface DataTableColumnHeaderProps<TData, TValue>
20 |   extends React.HTMLAttributes<HTMLDivElement> {
21 |   column: Column<TData, TValue>;
22 |   title: string;
23 | }
24 | 
25 | export function DataTableColumnHeader<TData, TValue>({
26 |   column,
27 |   title,
28 |   className,
29 | }: DataTableColumnHeaderProps<TData, TValue>) {
30 |   if (!column.getCanSort()) {
31 |     return <div className={cn(className)}>{title}</div>;
32 |   }
33 | 
34 |   return (
35 |     <div className={cn("flex items-center space-x-2", className)}>
36 |       <DropdownMenu>
37 |         <DropdownMenuTrigger asChild>
38 |           <Button
39 |             variant="ghost"
40 |             size="sm"
41 |             className="-ml-3 h-8 data-[state=open]:bg-accent"
42 |           >
43 |             <span>{title}</span>
44 |             {column.getIsSorted() === "desc" ? (
45 |               <ArrowDownIcon className="ml-2 h-4 w-4" />
46 |             ) : column.getIsSorted() === "asc" ? (
47 |               <ArrowUpIcon className="ml-2 h-4 w-4" />
48 |             ) : (
49 |               <CaretSortIcon className="ml-2 h-4 w-4" />
50 |             )}
51 |           </Button>
52 |         </DropdownMenuTrigger>
53 |         <DropdownMenuContent align="start">
54 |           <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
55 |             <ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
56 |             Asc
57 |           </DropdownMenuItem>
58 |           <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
59 |             <ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
60 |             Desc
61 |           </DropdownMenuItem>
62 |           <DropdownMenuSeparator />
63 |           <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
64 |             <EyeNoneIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
65 |             Hide
66 |           </DropdownMenuItem>
67 |         </DropdownMenuContent>
68 |       </DropdownMenu>
69 |     </div>
70 |   );
71 | }
72 | 


--------------------------------------------------------------------------------
/src/components/data-table.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   ColumnDef,
 3 |   flexRender,
 4 |   Table as TableType,
 5 | } from "@tanstack/react-table";
 6 | 
 7 | import {
 8 |   Table,
 9 |   TableBody,
10 |   TableCell,
11 |   TableHead,
12 |   TableHeader,
13 |   TableRow,
14 | } from "@/components/ui/table";
15 | 
16 | import { DataTablePagination } from "./data-table-pagination";
17 | import { DataTableToolbar } from "./data-table-toolbar";
18 | 
19 | interface DataTableProps<TData, TValue> {
20 |   table: TableType<TData>;
21 |   columns: ColumnDef<TData, TValue>[];
22 | }
23 | 
24 | export function DataTable<TData, TValue>({
25 |   table,
26 |   columns,
27 | }: DataTableProps<TData, TValue>) {
28 |   return (
29 |     <div className="space-y-4">
30 |       <DataTableToolbar table={table} />
31 |       <div className="rounded-md border">
32 |         <Table>
33 |           <TableHeader>
34 |             {table.getHeaderGroups().map((headerGroup) => (
35 |               <TableRow key={headerGroup.id}>
36 |                 {headerGroup.headers.map((header) => {
37 |                   return (
38 |                     <TableHead key={header.id}>
39 |                       {header.isPlaceholder
40 |                         ? null
41 |                         : flexRender(
42 |                             header.column.columnDef.header,
43 |                             header.getContext()
44 |                           )}
45 |                     </TableHead>
46 |                   );
47 |                 })}
48 |               </TableRow>
49 |             ))}
50 |           </TableHeader>
51 |           <TableBody>
52 |             {table.getRowModel().rows?.length ? (
53 |               table.getRowModel().rows.map((row) => (
54 |                 <TableRow
55 |                   key={row.id}
56 |                   data-state={row.getIsSelected() && "selected"}
57 |                 >
58 |                   {row.getVisibleCells().map((cell) => (
59 |                     <TableCell key={cell.id}>
60 |                       {flexRender(
61 |                         cell.column.columnDef.cell,
62 |                         cell.getContext()
63 |                       )}
64 |                     </TableCell>
65 |                   ))}
66 |                 </TableRow>
67 |               ))
68 |             ) : (
69 |               <TableRow>
70 |                 <TableCell
71 |                   colSpan={columns.length}
72 |                   className="h-24 text-center"
73 |                 >
74 |                   No results.
75 |                 </TableCell>
76 |               </TableRow>
77 |             )}
78 |           </TableBody>
79 |         </Table>
80 |       </div>
81 |       <DataTablePagination table={table} />
82 |     </div>
83 |   );
84 | }
85 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 2 | import { Separator } from "@/components/ui/separator";
 3 | 
 4 | export default function App() {
 5 |   return (
 6 |     <div className="bg-background flex items-center justify-center h-screen">
 7 |       <Card>
 8 |         <CardHeader>
 9 |           <CardTitle>Faceted search experiments</CardTitle>
10 |         </CardHeader>
11 |         <CardContent>
12 |           <p>
13 |             <a href="/pages/facets/" className="underline">
14 |               Facets
15 |             </a>
16 |           </p>
17 |           <p className="text-sm text-muted-foreground">
18 |             Tanstack table with{" "}
19 |             <a
20 |               href="https://github.com/stereobooster/facets"
21 |               className="underline"
22 |             >
23 |               Facets for faceting
24 |             </a>
25 |           </p>
26 |           <Separator className="my-2" />
27 |           <p>
28 |             <a href="/pages/tanstack/" className="underline">
29 |               Tanstack
30 |             </a>
31 |           </p>
32 |           <p className="text-sm text-muted-foreground">
33 |             Tanstack table with{" "}
34 |             <a
35 |               href="https://tanstack.com/table/v8/docs/api/features/filters#getfacetedrowmodel"
36 |               className="underline"
37 |             >
38 |               native faceting functionality
39 |             </a>
40 |           </p>
41 |           <Separator className="my-2" />
42 |           <p>
43 |             <a href="/pages/orama/" className="underline">
44 |               Orama
45 |             </a>
46 |           </p>
47 |           <p className="text-sm text-muted-foreground">
48 |             Tanstack table with Orama{" "}
49 |             <a
50 |               href="https://docs.oramasearch.com/usage/search/introduction"
51 |               className="underline"
52 |             >
53 |               full text search
54 |             </a>{" "}
55 |             and{" "}
56 |             <a
57 |               href="https://docs.oramasearch.com/usage/search/facets"
58 |               className="underline"
59 |             >
60 |               faceting
61 |             </a>
62 |           </p>
63 |           <Separator className="my-2" />
64 |           <p>
65 |             <a href="/pages/itemsjs/" className="underline">
66 |               ItemsJS
67 |             </a>
68 |           </p>
69 |           <p className="text-sm text-muted-foreground">
70 |             Tanstack table with{" "}
71 |             <a href="https://github.com/itemsapi/itemsjs" className="underline">
72 |               ItemsJS for faceting
73 |             </a>
74 |           </p>
75 |         </CardContent>
76 |       </Card>
77 |     </div>
78 |   );
79 | }
80 | 


--------------------------------------------------------------------------------
/src/pages/orama/useDataTableOrama.ts:
--------------------------------------------------------------------------------
  1 | import { useMemo, useRef, useState } from "react";
  2 | import {
  3 |   ColumnDef,
  4 |   ColumnFiltersState,
  5 |   SortingState,
  6 |   VisibilityState,
  7 |   PaginationState,
  8 |   getCoreRowModel,
  9 |   getFacetedRowModel,
 10 |   getFacetedMinMaxValues,
 11 |   useReactTable,
 12 |   Table,
 13 | } from "@tanstack/react-table";
 14 | import { useSearch } from "./useSearch";
 15 | import { Product, defaultVisibilityFilter } from "@/data/schema";
 16 | import { Orama, SorterParams } from "@orama/orama";
 17 | 
 18 | interface DataTableProps {
 19 |   columns: ColumnDef<Product>[];
 20 | }
 21 | 
 22 | export const useDataTableOrama = ({ columns }: DataTableProps) => {
 23 |   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(
 24 |     defaultVisibilityFilter
 25 |   );
 26 |   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 27 |   const [sorting, setSorting] = useState<SortingState>([]);
 28 |   const [pagination, setPagination] = useState<PaginationState>({
 29 |     pageIndex: 0,
 30 |     pageSize: 10,
 31 |   });
 32 | 
 33 |   const where = useMemo(
 34 |     () =>
 35 |       columnFilters
 36 |         .filter((x) => x.id !== "name")
 37 |         .reduce((prev, next) => {
 38 |           prev[next.id] = next.value as string[];
 39 |           return prev;
 40 |         }, {} as Record<string, string[]>),
 41 |     [columnFilters]
 42 |   );
 43 | 
 44 |   const sortBy = useMemo(() => {
 45 |     if (sorting.length === 0) return;
 46 |     return {
 47 |       property: sorting[0].id,
 48 |       order: sorting[0].desc ? "DESC" : "ASC",
 49 |     } as SorterParams<Orama<Product>>;
 50 |   }, [sorting]);
 51 | 
 52 |   const term = useMemo(
 53 |     () => (columnFilters.find((x) => x.id === "name")?.value as string) || "",
 54 |     [columnFilters]
 55 |   );
 56 | 
 57 |   const result = useSearch({
 58 |     term,
 59 |     where,
 60 |     sortBy,
 61 |     limit: pagination.pageSize,
 62 |     offset: pagination.pageIndex,
 63 |   });
 64 |   const resultRef = useRef(result);
 65 |   try {
 66 |     resultRef.current = result;
 67 |   } catch (e) {
 68 |     // do nothing
 69 |   }
 70 |   const data = useMemo(
 71 |     () => result?.hits?.map((x) => x.document) || [],
 72 |     [result]
 73 |   );
 74 |   const count = result?.count;
 75 |   const pageCount =
 76 |     count !== undefined ? Math.ceil(count / pagination.pageSize) : -1;
 77 | 
 78 |   return useReactTable({
 79 |     data,
 80 |     columns,
 81 |     state: {
 82 |       sorting,
 83 |       columnVisibility,
 84 |       columnFilters,
 85 |       pagination,
 86 |     },
 87 |     pageCount,
 88 |     manualPagination: true,
 89 |     onPaginationChange: setPagination,
 90 |     onSortingChange: setSorting,
 91 |     onColumnFiltersChange: setColumnFilters,
 92 |     onColumnVisibilityChange: setColumnVisibility,
 93 |     getCoreRowModel: getCoreRowModel(),
 94 |     getFacetedUniqueValues:
 95 |       <TData>(_table: Table<TData>, columnId: string) =>
 96 |       () =>
 97 |         new Map(
 98 |           Object.entries(resultRef.current?.facets![columnId]?.values || {})
 99 |         ),
100 |     // TODO: replace those
101 |     getFacetedRowModel: getFacetedRowModel(),
102 |     getFacetedMinMaxValues: getFacetedMinMaxValues(),
103 |   });
104 | };
105 | 


--------------------------------------------------------------------------------
/src/components/FacetedFilterCheckboxes.tsx:
--------------------------------------------------------------------------------
 1 | import { CheckIcon } from "@radix-ui/react-icons";
 2 | import { Column } from "@tanstack/react-table";
 3 | 
 4 | import { cn } from "@/lib/utils";
 5 | import {
 6 |   Command,
 7 |   CommandEmpty,
 8 |   CommandGroup,
 9 |   CommandInput,
10 |   CommandItem,
11 |   CommandList,
12 |   CommandSeparator,
13 | } from "@/components/ui/command";
14 | 
15 | interface FacetedFilterCheckboxesProps<TData, TValue> {
16 |   column?: Column<TData, TValue>;
17 |   title?: string;
18 | }
19 | 
20 | export function FacetedFilterCheckboxes<TData, TValue>({
21 |   column,
22 |   title,
23 | }: FacetedFilterCheckboxesProps<TData, TValue>) {
24 |   // const facets = useMemo(
25 |   //   () =>
26 |   //     [...(column?.getFacetedUniqueValues().entries() || [])].sort(
27 |   //       (a, b) => b[1] - a[1]
28 |   //     ),
29 |   //   [column]
30 |   // );
31 |   const facets = [...(column?.getFacetedUniqueValues().entries() || [])];
32 | 
33 |   const selectedValuesArr = column?.getFilterValue() as string[];
34 |   const selectedValues = new Set(selectedValuesArr);
35 | 
36 |   return (
37 |     <Command>
38 |       {facets.length > 5 && <CommandInput placeholder={title} />}
39 |       <CommandList className="max-h-[130px] px-1">
40 |         <CommandEmpty>No results found.</CommandEmpty>
41 |         <CommandGroup>
42 |           {facets.map(([option, count]) => {
43 |             const isSelected = selectedValues.has(option);
44 |             return (
45 |               <CommandItem
46 |                 key={option}
47 |                 disabled={count === 0 && !isSelected}
48 |                 onSelect={() => {
49 |                   if (isSelected) {
50 |                     selectedValues.delete(option);
51 |                   } else {
52 |                     selectedValues.add(option);
53 |                   }
54 |                   const filterValues = Array.from(selectedValues);
55 |                   column?.setFilterValue(
56 |                     filterValues.length ? filterValues : undefined
57 |                   );
58 |                 }}
59 |               >
60 |                 <div
61 |                   className={cn(
62 |                     "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
63 |                     isSelected
64 |                       ? "bg-primary text-primary-foreground"
65 |                       : "opacity-50 [&_svg]:invisible"
66 |                   )}
67 |                 >
68 |                   <CheckIcon className={cn("h-4 w-4")} />
69 |                 </div>
70 |                 <span>{option}</span>
71 |                 <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
72 |                   {count}
73 |                 </span>
74 |               </CommandItem>
75 |             );
76 |           })}
77 |         </CommandGroup>
78 |         {selectedValues.size > 0 && (
79 |           <>
80 |             <CommandSeparator />
81 |             <CommandGroup>
82 |               <CommandItem
83 |                 onSelect={() => column?.setFilterValue(undefined)}
84 |                 className="justify-center text-center"
85 |               >
86 |                 Clear filters
87 |               </CommandItem>
88 |             </CommandGroup>
89 |           </>
90 |         )}
91 |       </CommandList>
92 |     </Command>
93 |   );
94 | }
95 | 


--------------------------------------------------------------------------------
/src/components/ui/table.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | 
  3 | import { cn } from "@/lib/utils"
  4 | 
  5 | const Table = React.forwardRef<
  6 |   HTMLTableElement,
  7 |   React.HTMLAttributes<HTMLTableElement>
  8 | >(({ className, ...props }, ref) => (
  9 |   <div className="relative w-full overflow-auto">
 10 |     <table
 11 |       ref={ref}
 12 |       className={cn("w-full caption-bottom text-sm", className)}
 13 |       {...props}
 14 |     />
 15 |   </div>
 16 | ))
 17 | Table.displayName = "Table"
 18 | 
 19 | const TableHeader = React.forwardRef<
 20 |   HTMLTableSectionElement,
 21 |   React.HTMLAttributes<HTMLTableSectionElement>
 22 | >(({ className, ...props }, ref) => (
 23 |   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
 24 | ))
 25 | TableHeader.displayName = "TableHeader"
 26 | 
 27 | const TableBody = React.forwardRef<
 28 |   HTMLTableSectionElement,
 29 |   React.HTMLAttributes<HTMLTableSectionElement>
 30 | >(({ className, ...props }, ref) => (
 31 |   <tbody
 32 |     ref={ref}
 33 |     className={cn("[&_tr:last-child]:border-0", className)}
 34 |     {...props}
 35 |   />
 36 | ))
 37 | TableBody.displayName = "TableBody"
 38 | 
 39 | const TableFooter = React.forwardRef<
 40 |   HTMLTableSectionElement,
 41 |   React.HTMLAttributes<HTMLTableSectionElement>
 42 | >(({ className, ...props }, ref) => (
 43 |   <tfoot
 44 |     ref={ref}
 45 |     className={cn("bg-primary font-medium text-primary-foreground", className)}
 46 |     {...props}
 47 |   />
 48 | ))
 49 | TableFooter.displayName = "TableFooter"
 50 | 
 51 | const TableRow = React.forwardRef<
 52 |   HTMLTableRowElement,
 53 |   React.HTMLAttributes<HTMLTableRowElement>
 54 | >(({ className, ...props }, ref) => (
 55 |   <tr
 56 |     ref={ref}
 57 |     className={cn(
 58 |       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
 59 |       className
 60 |     )}
 61 |     {...props}
 62 |   />
 63 | ))
 64 | TableRow.displayName = "TableRow"
 65 | 
 66 | const TableHead = React.forwardRef<
 67 |   HTMLTableCellElement,
 68 |   React.ThHTMLAttributes<HTMLTableCellElement>
 69 | >(({ className, ...props }, ref) => (
 70 |   <th
 71 |     ref={ref}
 72 |     className={cn(
 73 |       "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
 74 |       className
 75 |     )}
 76 |     {...props}
 77 |   />
 78 | ))
 79 | TableHead.displayName = "TableHead"
 80 | 
 81 | const TableCell = React.forwardRef<
 82 |   HTMLTableCellElement,
 83 |   React.TdHTMLAttributes<HTMLTableCellElement>
 84 | >(({ className, ...props }, ref) => (
 85 |   <td
 86 |     ref={ref}
 87 |     className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
 88 |     {...props}
 89 |   />
 90 | ))
 91 | TableCell.displayName = "TableCell"
 92 | 
 93 | const TableCaption = React.forwardRef<
 94 |   HTMLTableCaptionElement,
 95 |   React.HTMLAttributes<HTMLTableCaptionElement>
 96 | >(({ className, ...props }, ref) => (
 97 |   <caption
 98 |     ref={ref}
 99 |     className={cn("mt-4 text-sm text-muted-foreground", className)}
100 |     {...props}
101 |   />
102 | ))
103 | TableCaption.displayName = "TableCaption"
104 | 
105 | export {
106 |   Table,
107 |   TableHeader,
108 |   TableBody,
109 |   TableFooter,
110 |   TableHead,
111 |   TableRow,
112 |   TableCell,
113 |   TableCaption,
114 | }
115 | 


--------------------------------------------------------------------------------
/src/components/sidebar.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils";
 2 | // import { ScrollArea } from "@/components/ui/scroll-area";
 3 | import { Table as TableType } from "@tanstack/react-table";
 4 | import { FacetedFilterCheckboxes } from "./FacetedFilterCheckboxes";
 5 | import { FacetedFilterSlider } from "./FacetedFilterSlider";
 6 | import { useEffect, useState } from "react";
 7 | 
 8 | interface SidebarProps<TData> {
 9 |   className?: string;
10 |   table: TableType<TData>;
11 | }
12 | 
13 | export function Sidebar<TData>({ className, table }: SidebarProps<TData>) {
14 |   const [loaded, setLoaded] = useState(false);
15 |   const length = table.getRowModel().rows.length;
16 |   useEffect(() => {
17 |     if (length > 0) setLoaded(true)
18 |   }, [length]);
19 | 
20 |   return (
21 |     <div className={cn("pb-12", className)}>
22 |       <div className="space-y-4 py-4">
23 |         {table.getColumn("salePrice") && (
24 |           <div className="px-3 py-2">
25 |             <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">
26 |               Price
27 |             </h2>
28 |             <div className="space-y-1">
29 |               {loaded && (
30 |                 <FacetedFilterSlider
31 |                   column={table.getColumn("salePrice")}
32 |                   title="Price"
33 |                 />
34 |               )}
35 |             </div>
36 |           </div>
37 |         )}
38 |         {table.getColumn("manufacturer") && (
39 |           <div className="px-3 py-2">
40 |             <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">
41 |               Manufacturer
42 |             </h2>
43 |             <div className="space-y-1">
44 |               {loaded && (
45 |                 <FacetedFilterCheckboxes
46 |                   column={table.getColumn("manufacturer")}
47 |                   title="Manufacturer"
48 |                 />
49 |               )}
50 |             </div>
51 |           </div>
52 |         )}
53 |         {table.getColumn("type") && (
54 |           <div className="px-3 py-2">
55 |             <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">
56 |               Type
57 |             </h2>
58 |             <div className="space-y-1">
59 |               {loaded && (
60 |                 <FacetedFilterCheckboxes
61 |                   column={table.getColumn("type")}
62 |                   title="Type"
63 |                 />
64 |               )}
65 |             </div>
66 |           </div>
67 |         )}
68 |         {table.getColumn("categories") && (
69 |           <div className="px-3 py-2">
70 |             <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">
71 |               Category
72 |             </h2>
73 |             <div className="space-y-1">
74 |               {length != 0 && (
75 |                 <FacetedFilterCheckboxes
76 |                   column={table.getColumn("categories")}
77 |                   title="Category"
78 |                 />
79 |               )}
80 |             </div>
81 |           </div>
82 |         )}
83 |         {/* <div className="px-3 py-2">
84 |           <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">
85 |             Categories
86 |           </h2>
87 |           <ScrollArea className="h-[300px] px-1">
88 |             <div className="space-y-1 p-2">Checkboxes</div>
89 |           </ScrollArea>
90 |         </div> */}
91 |       </div>
92 |     </div>
93 |   );
94 | }
95 | 


--------------------------------------------------------------------------------
/src/components/data-table-pagination.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   ChevronLeftIcon,
 3 |   ChevronRightIcon,
 4 |   DoubleArrowLeftIcon,
 5 |   DoubleArrowRightIcon,
 6 | } from "@radix-ui/react-icons";
 7 | import { Table } from "@tanstack/react-table";
 8 | 
 9 | import { Button } from "@/components/ui/button";
10 | import {
11 |   Select,
12 |   SelectContent,
13 |   SelectItem,
14 |   SelectTrigger,
15 |   SelectValue,
16 | } from "@/components/ui/select";
17 | 
18 | interface DataTablePaginationProps<TData> {
19 |   table: Table<TData>;
20 | }
21 | 
22 | export function DataTablePagination<TData>({
23 |   table,
24 | }: DataTablePaginationProps<TData>) {
25 |   return (
26 |     <div className="flex items-center justify-between px-2">
27 |       <div className="flex-1 text-sm text-muted-foreground"></div>
28 |       <div className="flex items-center space-x-6 lg:space-x-8">
29 |         <div className="flex items-center space-x-2">
30 |           <p className="text-sm font-medium">Rows per page</p>
31 |           <Select
32 |             value={`${table.getState().pagination.pageSize}`}
33 |             onValueChange={(value) => {
34 |               table.setPageSize(Number(value));
35 |             }}
36 |           >
37 |             <SelectTrigger className="h-8 w-[70px]">
38 |               <SelectValue placeholder={table.getState().pagination.pageSize} />
39 |             </SelectTrigger>
40 |             <SelectContent side="top">
41 |               {[10, 20, 30, 40, 50].map((pageSize) => (
42 |                 <SelectItem key={pageSize} value={`${pageSize}`}>
43 |                   {pageSize}
44 |                 </SelectItem>
45 |               ))}
46 |             </SelectContent>
47 |           </Select>
48 |         </div>
49 |         <div className="flex w-[100px] items-center justify-center text-sm font-medium">
50 |           Page {table.getState().pagination.pageIndex + 1} of{" "}
51 |           {table.getPageCount()}
52 |         </div>
53 |         <div className="flex items-center space-x-2">
54 |           <Button
55 |             variant="outline"
56 |             className="hidden h-8 w-8 p-0 lg:flex"
57 |             onClick={() => table.setPageIndex(0)}
58 |             disabled={!table.getCanPreviousPage()}
59 |           >
60 |             <span className="sr-only">Go to first page</span>
61 |             <DoubleArrowLeftIcon className="h-4 w-4" />
62 |           </Button>
63 |           <Button
64 |             variant="outline"
65 |             className="h-8 w-8 p-0"
66 |             onClick={() => table.previousPage()}
67 |             disabled={!table.getCanPreviousPage()}
68 |           >
69 |             <span className="sr-only">Go to previous page</span>
70 |             <ChevronLeftIcon className="h-4 w-4" />
71 |           </Button>
72 |           <Button
73 |             variant="outline"
74 |             className="h-8 w-8 p-0"
75 |             onClick={() => table.nextPage()}
76 |             disabled={!table.getCanNextPage()}
77 |           >
78 |             <span className="sr-only">Go to next page</span>
79 |             <ChevronRightIcon className="h-4 w-4" />
80 |           </Button>
81 |           <Button
82 |             variant="outline"
83 |             className="hidden h-8 w-8 p-0 lg:flex"
84 |             onClick={() => table.setPageIndex(table.getPageCount() - 1)}
85 |             disabled={!table.getCanNextPage()}
86 |           >
87 |             <span className="sr-only">Go to last page</span>
88 |             <DoubleArrowRightIcon className="h-4 w-4" />
89 |           </Button>
90 |         </div>
91 |       </div>
92 |     </div>
93 |   );
94 | }
95 | 


--------------------------------------------------------------------------------
/src/data/schema.ts:
--------------------------------------------------------------------------------
  1 | import { z } from "zod";
  2 | import { Schema } from "@stereobooster/facets";
  3 | 
  4 | export const productSchema = z.object({
  5 |   name: z.string(),
  6 |   shortDescription: z.string(),
  7 |   salePrice: z.number(),
  8 |   bestSellingRank: z.number(),
  9 |   manufacturer: z.string(),
 10 |   type: z.string(),
 11 |   categories: z.array(z.string()),
 12 |   // salePrice_range: z.string(),
 13 |   // thumbnailImage: z.string(),
 14 |   // url: z.string(),
 15 |   // image: z.string(),
 16 |   // objectID: z.string(),
 17 |   // shipping: z.string(),
 18 |   // customerReviewCount: z.number(),
 19 | });
 20 | 
 21 | export type Product = z.infer<typeof productSchema>;
 22 | 
 23 | export const defaultVisibilityFilter = {
 24 |   name: true,
 25 |   shortDescription: true,
 26 |   salePrice: true,
 27 |   bestSellingRank: false,
 28 |   manufacturer: false,
 29 |   type: false,
 30 |   categories: false,
 31 | };
 32 | 
 33 | export const oramaSchema = {
 34 |   name: "string",
 35 |   shortDescription: "string",
 36 |   salePrice: "number",
 37 |   bestSellingRank: "number",
 38 |   manufacturer: "string",
 39 |   type: "string",
 40 |   categories: "string[]",
 41 | };
 42 | 
 43 | export const searchFields = [
 44 |   "name",
 45 |   "shortDescription",
 46 |   "manufacturer",
 47 | ] as Array<keyof Product>;
 48 | 
 49 | export const itemsJsFacets = {
 50 |   manufacturer: {
 51 |     title: "Manufacturer",
 52 |     size: 10,
 53 |     conjunction: false,
 54 |   },
 55 |   type: {
 56 |     title: "Type",
 57 |     size: 10,
 58 |     conjunction: false,
 59 |   },
 60 |   categories: {
 61 |     title: "Categories",
 62 |     size: 10,
 63 |     conjunction: false,
 64 |   },
 65 |   salePrice: {
 66 |     title: "Price",
 67 |     show_facet_stats: true,
 68 |   },
 69 | };
 70 | 
 71 | export const facetsSchema = {
 72 |   name: {
 73 |     type: "string",
 74 |     text: true,
 75 |   },
 76 |   shortDescription: {
 77 |     type: "string",
 78 |     text: true,
 79 |   },
 80 |   salePrice: {
 81 |     type: "number",
 82 |     facet: true,
 83 |   },
 84 |   bestSellingRank: {
 85 |     type: "number",
 86 |     facet: true,
 87 |   },
 88 |   manufacturer: {
 89 |     type: "string",
 90 |     facet: true,
 91 |   },
 92 |   type: {
 93 |     type: "string",
 94 |     facet: true,
 95 |   },
 96 |   categories: {
 97 |     type: "string",
 98 |     facet: true,
 99 |     isArray: true,
100 |   },
101 | } satisfies Schema;
102 | 
103 | export const oramaFacets = {
104 |   manufacturer: {},
105 |   type: {},
106 |   categories: {},
107 | };
108 | 
109 | export const defaultLimit = 1000;
110 | 
111 | export const loadData = (limit = -1) =>
112 |   fetch("/ecommerce/bestbuy_seo.json")
113 |     .then((res) => res.json())
114 |     .then((data) => {
115 |       if (!Array.isArray(data)) return [];
116 |       const result = [];
117 |       for (const i in data) {
118 |         try {
119 |           const {
120 |             name,
121 |             shortDescription,
122 |             salePrice,
123 |             bestSellingRank,
124 |             manufacturer,
125 |             type,
126 |             categories,
127 |           } = productSchema.parse(data[i]);
128 | 
129 |           result.push({
130 |             name,
131 |             shortDescription,
132 |             salePrice,
133 |             bestSellingRank,
134 |             manufacturer,
135 |             type,
136 |             categories,
137 |           });
138 |         } catch (e) {
139 |           // do nothing
140 |         }
141 |         if (result.length === limit) break;
142 |       }
143 | 
144 |       return result;
145 |     });
146 | 


--------------------------------------------------------------------------------
/src/pages/facets/useDataTableFacets.ts:
--------------------------------------------------------------------------------
  1 | import { useMemo, useRef, useState } from "react";
  2 | import {
  3 |   ColumnDef,
  4 |   ColumnFiltersState,
  5 |   PaginationState,
  6 |   SortingState,
  7 |   VisibilityState,
  8 |   getCoreRowModel,
  9 |   useReactTable,
 10 |   Table,
 11 | } from "@tanstack/react-table";
 12 | import { defaultVisibilityFilter, facetsSchema } from "@/data/schema";
 13 | import { Facets, TQuickscoreIndex } from "@stereobooster/facets";
 14 | 
 15 | interface DataTableProps<TData, TValue> {
 16 |   data: TData[];
 17 |   columns: ColumnDef<TData, TValue>[];
 18 | }
 19 | 
 20 | export const useDataTableFacets = <
 21 |   TData extends Record<string, unknown>,
 22 |   TValue
 23 | >({
 24 |   columns,
 25 |   data,
 26 | }: DataTableProps<TData, TValue>) => {
 27 |   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(
 28 |     defaultVisibilityFilter
 29 |   );
 30 |   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 31 |   const [sorting, setSorting] = useState<SortingState>([]);
 32 |   const [pagination, setPagination] = useState<PaginationState>({
 33 |     pageIndex: 0,
 34 |     pageSize: 10,
 35 |   });
 36 | 
 37 |   const where = useMemo(
 38 |     () =>
 39 |       columnFilters
 40 |         .filter((x) => x.id !== "name")
 41 |         .reduce((prev, next) => {
 42 |           if (next.id === "salePrice" && Array.isArray(next.value)) {
 43 |             // @ts-expect-error xxx
 44 |             prev[next.id] = { from: next.value[0], to: next.value[1] };
 45 |           } else {
 46 |             prev[next.id] = next.value as string[];
 47 |           }
 48 |           return prev;
 49 |         }, {} as Record<string, string[]>),
 50 |     [columnFilters]
 51 |   );
 52 | 
 53 |   const term = useMemo(
 54 |     () => (columnFilters.find((x) => x.id === "name")?.value as string) || "",
 55 |     [columnFilters]
 56 |   );
 57 | 
 58 |   const facets = useMemo(
 59 |     () =>
 60 |       new Facets(
 61 |         {
 62 |           textIndex: TQuickscoreIndex,
 63 |           schema: facetsSchema,
 64 |         },
 65 |         data
 66 |       ),
 67 |     [data]
 68 |   );
 69 | 
 70 |   const result = useMemo(
 71 |     () =>
 72 |       facets.search({
 73 |         query: term,
 74 |         facetFilter: where,
 75 |         sort: sorting.length
 76 |           ? [sorting[0].id, sorting[0].desc ? "desc" : "asc"]
 77 |           : undefined,
 78 |         page: pagination.pageIndex,
 79 |         perPage: pagination.pageSize,
 80 |       }),
 81 |     [term, where, sorting, pagination.pageSize, pagination.pageIndex, facets]
 82 |   );
 83 | 
 84 |   const resultRef = useRef(result);
 85 |   try {
 86 |     resultRef.current = result;
 87 |   } catch (e) {
 88 |     // do nothing
 89 |   }
 90 | 
 91 |   const dataNew = useMemo(
 92 |     () => result.items || [],
 93 |     [result]
 94 |   ) as unknown as TData[];
 95 |   const count = result?.pagination.total;
 96 |   const pageCount =
 97 |     count !== undefined ? Math.ceil(count / pagination.pageSize) : -1;
 98 | 
 99 |   return useReactTable({
100 |     data: dataNew,
101 |     columns,
102 |     state: {
103 |       sorting,
104 |       columnVisibility,
105 |       columnFilters,
106 |       pagination,
107 |     },
108 |     pageCount,
109 |     manualPagination: true,
110 |     onPaginationChange: setPagination,
111 |     onSortingChange: setSorting,
112 |     onColumnFiltersChange: setColumnFilters,
113 |     onColumnVisibilityChange: setColumnVisibility,
114 |     getCoreRowModel: getCoreRowModel(),
115 |     getFacetedUniqueValues:
116 |       <TData>(_table: Table<TData>, columnId: keyof TData & string) =>
117 |       () =>
118 |         new Map(
119 |           resultRef.current?.facets[columnId]?.items.map((x) => [x[0], x[1]])
120 |         ),
121 |     getFacetedMinMaxValues:
122 |       <TData>(_table: Table<TData>, columnId: keyof TData & string) =>
123 |       () => {
124 |         const facet_stats = resultRef.current?.facets[columnId]?.stats;
125 |         // @ts-expect-error xxx
126 |         if (!facet_stats) return [] as [number, number];
127 |         return [facet_stats.min, facet_stats.max];
128 |       },
129 |   });
130 | };
131 | 


--------------------------------------------------------------------------------
/src/pages/itemsjs/useDataTableItemsjs.ts:
--------------------------------------------------------------------------------
  1 | import { useMemo, useRef, useState } from "react";
  2 | import {
  3 |   ColumnDef,
  4 |   ColumnFiltersState,
  5 |   PaginationState,
  6 |   SortingState,
  7 |   VisibilityState,
  8 |   getCoreRowModel,
  9 |   useReactTable,
 10 |   Table,
 11 | } from "@tanstack/react-table";
 12 | import ItemsJS from "@stereobooster/itemsjs";
 13 | import {
 14 |   defaultVisibilityFilter,
 15 |   itemsJsFacets,
 16 |   searchFields,
 17 | } from "@/data/schema";
 18 | 
 19 | interface DataTableProps<TData, TValue> {
 20 |   data: TData[];
 21 |   columns: ColumnDef<TData, TValue>[];
 22 | }
 23 | 
 24 | export const useDataTableItemsjs = <
 25 |   TData extends Record<string, unknown>,
 26 |   TValue
 27 | >({
 28 |   columns,
 29 |   data,
 30 | }: DataTableProps<TData, TValue>) => {
 31 |   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(
 32 |     defaultVisibilityFilter
 33 |   );
 34 |   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 35 |   const [sorting, setSorting] = useState<SortingState>([]);
 36 |   const [pagination, setPagination] = useState<PaginationState>({
 37 |     pageIndex: 0,
 38 |     pageSize: 10,
 39 |   });
 40 | 
 41 |   const where = useMemo(
 42 |     () =>
 43 |       columnFilters
 44 |         .filter((x) => x.id !== "name")
 45 |         .reduce((prev, next) => {
 46 |           prev[next.id] = next.value as string[];
 47 |           return prev;
 48 |         }, {} as Record<string, string[]>),
 49 |     [columnFilters]
 50 |   );
 51 | 
 52 |   const term = useMemo(
 53 |     () => (columnFilters.find((x) => x.id === "name")?.value as string) || "",
 54 |     [columnFilters]
 55 |   );
 56 | 
 57 |   const itemsjs = useMemo(
 58 |     () =>
 59 |       ItemsJS(data, {
 60 |         searchableFields: searchFields,
 61 |         aggregations: itemsJsFacets,
 62 |       }),
 63 |     [data]
 64 |   );
 65 | 
 66 |   const result = useMemo(
 67 |     () =>
 68 |       itemsjs.search({
 69 |         query: term.length < 2 ? "" : term,
 70 |         filters: where,
 71 |         sort: sorting.length
 72 |           ? {
 73 |               field: sorting[0].id,
 74 |               order: sorting[0].desc ? "desc" : "asc",
 75 |             }
 76 |           : undefined,
 77 |         page: pagination.pageIndex + 1,
 78 |         per_page: pagination.pageSize,
 79 |       }),
 80 |     [term, where, sorting, pagination.pageSize, pagination.pageIndex, itemsjs]
 81 |   );
 82 | 
 83 |   const resultRef = useRef(result);
 84 |   try {
 85 |     resultRef.current = result;
 86 |   } catch (e) {
 87 |     // do nothing
 88 |   }
 89 | 
 90 |   const dataNew = useMemo(
 91 |     () => result.data.items || [],
 92 |     [result]
 93 |   ) as unknown as TData[];
 94 |   const count = result?.pagination.total;
 95 |   const pageCount =
 96 |     count !== undefined ? Math.ceil(count / pagination.pageSize) : -1;
 97 | 
 98 |   return useReactTable({
 99 |     data: dataNew,
100 |     columns,
101 |     state: {
102 |       sorting,
103 |       columnVisibility,
104 |       columnFilters,
105 |       pagination,
106 |     },
107 |     pageCount,
108 |     manualPagination: true,
109 |     onPaginationChange: setPagination,
110 |     onSortingChange: setSorting,
111 |     onColumnFiltersChange: setColumnFilters,
112 |     onColumnVisibilityChange: setColumnVisibility,
113 |     getCoreRowModel: getCoreRowModel(),
114 |     getFacetedUniqueValues:
115 |       <TData>(_table: Table<TData>, columnId: keyof TData & string) =>
116 |       () =>
117 |         new Map(
118 |           // @ts-expect-error xxx
119 |           resultRef.current?.data.aggregations[columnId]?.buckets.map((x) => [
120 |             x["key"],
121 |             x["doc_count"],
122 |           ])
123 |         ),
124 |     getFacetedMinMaxValues:
125 |       <TData>(_table: Table<TData>, columnId: keyof TData & string) =>
126 |       () => {
127 |         const facet_stats =
128 |           // @ts-expect-error xxx
129 |           resultRef.current?.data.aggregations[columnId]?.facet_stats;
130 |         // @ts-expect-error xxx
131 |         if (!facet_stats) return [] as [number, number];
132 |         return [facet_stats.min, facet_stats.max];
133 |       },
134 |   });
135 | };
136 | 


--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  3 | import { X } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | const Dialog = DialogPrimitive.Root
  8 | 
  9 | const DialogTrigger = DialogPrimitive.Trigger
 10 | 
 11 | const DialogPortal = DialogPrimitive.Portal
 12 | 
 13 | const DialogClose = DialogPrimitive.Close
 14 | 
 15 | const DialogOverlay = React.forwardRef<
 16 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 17 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 18 | >(({ className, ...props }, ref) => (
 19 |   <DialogPrimitive.Overlay
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   />
 27 | ))
 28 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 29 | 
 30 | const DialogContent = React.forwardRef<
 31 |   React.ElementRef<typeof DialogPrimitive.Content>,
 32 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 33 | >(({ className, children, ...props }, ref) => (
 34 |   <DialogPortal>
 35 |     <DialogOverlay />
 36 |     <DialogPrimitive.Content
 37 |       ref={ref}
 38 |       className={cn(
 39 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
 40 |         className
 41 |       )}
 42 |       {...props}
 43 |     >
 44 |       {children}
 45 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 46 |         <X className="h-4 w-4" />
 47 |         <span className="sr-only">Close</span>
 48 |       </DialogPrimitive.Close>
 49 |     </DialogPrimitive.Content>
 50 |   </DialogPortal>
 51 | ))
 52 | DialogContent.displayName = DialogPrimitive.Content.displayName
 53 | 
 54 | const DialogHeader = ({
 55 |   className,
 56 |   ...props
 57 | }: React.HTMLAttributes<HTMLDivElement>) => (
 58 |   <div
 59 |     className={cn(
 60 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 61 |       className
 62 |     )}
 63 |     {...props}
 64 |   />
 65 | )
 66 | DialogHeader.displayName = "DialogHeader"
 67 | 
 68 | const DialogFooter = ({
 69 |   className,
 70 |   ...props
 71 | }: React.HTMLAttributes<HTMLDivElement>) => (
 72 |   <div
 73 |     className={cn(
 74 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 75 |       className
 76 |     )}
 77 |     {...props}
 78 |   />
 79 | )
 80 | DialogFooter.displayName = "DialogFooter"
 81 | 
 82 | const DialogTitle = React.forwardRef<
 83 |   React.ElementRef<typeof DialogPrimitive.Title>,
 84 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 85 | >(({ className, ...props }, ref) => (
 86 |   <DialogPrimitive.Title
 87 |     ref={ref}
 88 |     className={cn(
 89 |       "text-lg font-semibold leading-none tracking-tight",
 90 |       className
 91 |     )}
 92 |     {...props}
 93 |   />
 94 | ))
 95 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 96 | 
 97 | const DialogDescription = React.forwardRef<
 98 |   React.ElementRef<typeof DialogPrimitive.Description>,
 99 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
100 | >(({ className, ...props }, ref) => (
101 |   <DialogPrimitive.Description
102 |     ref={ref}
103 |     className={cn("text-sm text-muted-foreground", className)}
104 |     {...props}
105 |   />
106 | ))
107 | DialogDescription.displayName = DialogPrimitive.Description.displayName
108 | 
109 | export {
110 |   Dialog,
111 |   DialogPortal,
112 |   DialogOverlay,
113 |   DialogClose,
114 |   DialogTrigger,
115 |   DialogContent,
116 |   DialogHeader,
117 |   DialogFooter,
118 |   DialogTitle,
119 |   DialogDescription,
120 | }
121 | 


--------------------------------------------------------------------------------
/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as SelectPrimitive from "@radix-ui/react-select"
  3 | import { Check, ChevronDown } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | const Select = SelectPrimitive.Root
  8 | 
  9 | const SelectGroup = SelectPrimitive.Group
 10 | 
 11 | const SelectValue = SelectPrimitive.Value
 12 | 
 13 | const SelectTrigger = React.forwardRef<
 14 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 15 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 16 | >(({ className, children, ...props }, ref) => (
 17 |   <SelectPrimitive.Trigger
 18 |     ref={ref}
 19 |     className={cn(
 20 |       "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 21 |       className
 22 |     )}
 23 |     {...props}
 24 |   >
 25 |     {children}
 26 |     <SelectPrimitive.Icon asChild>
 27 |       <ChevronDown className="h-4 w-4 opacity-50" />
 28 |     </SelectPrimitive.Icon>
 29 |   </SelectPrimitive.Trigger>
 30 | ))
 31 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 32 | 
 33 | const SelectContent = React.forwardRef<
 34 |   React.ElementRef<typeof SelectPrimitive.Content>,
 35 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 36 | >(({ className, children, position = "popper", ...props }, ref) => (
 37 |   <SelectPrimitive.Portal>
 38 |     <SelectPrimitive.Content
 39 |       ref={ref}
 40 |       className={cn(
 41 |         "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 42 |         position === "popper" &&
 43 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 44 |         className
 45 |       )}
 46 |       position={position}
 47 |       {...props}
 48 |     >
 49 |       <SelectPrimitive.Viewport
 50 |         className={cn(
 51 |           "p-1",
 52 |           position === "popper" &&
 53 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 54 |         )}
 55 |       >
 56 |         {children}
 57 |       </SelectPrimitive.Viewport>
 58 |     </SelectPrimitive.Content>
 59 |   </SelectPrimitive.Portal>
 60 | ))
 61 | SelectContent.displayName = SelectPrimitive.Content.displayName
 62 | 
 63 | const SelectLabel = React.forwardRef<
 64 |   React.ElementRef<typeof SelectPrimitive.Label>,
 65 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 66 | >(({ className, ...props }, ref) => (
 67 |   <SelectPrimitive.Label
 68 |     ref={ref}
 69 |     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
 70 |     {...props}
 71 |   />
 72 | ))
 73 | SelectLabel.displayName = SelectPrimitive.Label.displayName
 74 | 
 75 | const SelectItem = React.forwardRef<
 76 |   React.ElementRef<typeof SelectPrimitive.Item>,
 77 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
 78 | >(({ className, children, ...props }, ref) => (
 79 |   <SelectPrimitive.Item
 80 |     ref={ref}
 81 |     className={cn(
 82 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 83 |       className
 84 |     )}
 85 |     {...props}
 86 |   >
 87 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
 88 |       <SelectPrimitive.ItemIndicator>
 89 |         <Check className="h-4 w-4" />
 90 |       </SelectPrimitive.ItemIndicator>
 91 |     </span>
 92 | 
 93 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
 94 |   </SelectPrimitive.Item>
 95 | ))
 96 | SelectItem.displayName = SelectPrimitive.Item.displayName
 97 | 
 98 | const SelectSeparator = React.forwardRef<
 99 |   React.ElementRef<typeof SelectPrimitive.Separator>,
100 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
101 | >(({ className, ...props }, ref) => (
102 |   <SelectPrimitive.Separator
103 |     ref={ref}
104 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
105 |     {...props}
106 |   />
107 | ))
108 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
109 | 
110 | export {
111 |   Select,
112 |   SelectGroup,
113 |   SelectValue,
114 |   SelectTrigger,
115 |   SelectContent,
116 |   SelectLabel,
117 |   SelectItem,
118 |   SelectSeparator,
119 | }
120 | 


--------------------------------------------------------------------------------
/src/components/data-table-faceted-filter.tsx:
--------------------------------------------------------------------------------
  1 | import { CheckIcon, PlusCircledIcon } from "@radix-ui/react-icons";
  2 | import { Column } from "@tanstack/react-table";
  3 | 
  4 | import { cn } from "@/lib/utils";
  5 | import { Badge } from "@/components/ui/badge";
  6 | import { Button } from "@/components/ui/button";
  7 | import {
  8 |   Command,
  9 |   CommandEmpty,
 10 |   CommandGroup,
 11 |   CommandInput,
 12 |   CommandItem,
 13 |   CommandList,
 14 |   CommandSeparator,
 15 | } from "@/components/ui/command";
 16 | import {
 17 |   Popover,
 18 |   PopoverContent,
 19 |   PopoverTrigger,
 20 | } from "@/components/ui/popover";
 21 | import { Separator } from "@/components/ui/separator";
 22 | 
 23 | interface DataTableFacetedFilterProps<TData, TValue> {
 24 |   column?: Column<TData, TValue>;
 25 |   title?: string;
 26 | }
 27 | 
 28 | export function DataTableFacetedFilter<TData, TValue>({
 29 |   column,
 30 |   title,
 31 | }: DataTableFacetedFilterProps<TData, TValue>) {
 32 |   const facets = [...(column?.getFacetedUniqueValues()?.entries() || [])];
 33 |   const selectedValuesArr = column?.getFilterValue() as string[];
 34 |   const selectedValues = new Set(selectedValuesArr);
 35 | 
 36 |   return (
 37 |     <Popover>
 38 |       <PopoverTrigger asChild>
 39 |         <Button variant="outline" size="sm" className="h-8 border-dashed">
 40 |           <PlusCircledIcon className="mr-2 h-4 w-4" />
 41 |           {title}
 42 |           {selectedValues?.size > 0 && (
 43 |             <>
 44 |               <Separator orientation="vertical" className="mx-2 h-4" />
 45 |               <Badge
 46 |                 variant="secondary"
 47 |                 className="rounded-sm px-1 font-normal lg:hidden"
 48 |               >
 49 |                 {selectedValues.size}
 50 |               </Badge>
 51 |               <div className="hidden space-x-1 lg:flex">
 52 |                 {selectedValues.size > 2 ? (
 53 |                   <Badge
 54 |                     variant="secondary"
 55 |                     className="rounded-sm px-1 font-normal"
 56 |                   >
 57 |                     {selectedValues.size} selected
 58 |                   </Badge>
 59 |                 ) : (
 60 |                   selectedValuesArr.map((option) => (
 61 |                     <Badge
 62 |                       variant="secondary"
 63 |                       key={option}
 64 |                       className="rounded-sm px-1 font-normal"
 65 |                     >
 66 |                       {option}
 67 |                     </Badge>
 68 |                   ))
 69 |                 )}
 70 |               </div>
 71 |             </>
 72 |           )}
 73 |         </Button>
 74 |       </PopoverTrigger>
 75 |       <PopoverContent className="w-[200px] p-0" align="start">
 76 |         <Command>
 77 |           <CommandInput placeholder={title} />
 78 |           <CommandList>
 79 |             <CommandEmpty>No results found.</CommandEmpty>
 80 |             <CommandGroup>
 81 |               {facets.map(([option, count]) => {
 82 |                 const isSelected = selectedValues.has(option);
 83 |                 return (
 84 |                   <CommandItem
 85 |                     key={option}
 86 |                     onSelect={() => {
 87 |                       if (isSelected) {
 88 |                         selectedValues.delete(option);
 89 |                       } else {
 90 |                         selectedValues.add(option);
 91 |                       }
 92 |                       const filterValues = Array.from(selectedValues);
 93 |                       column?.setFilterValue(
 94 |                         filterValues.length ? filterValues : undefined
 95 |                       );
 96 |                     }}
 97 |                   >
 98 |                     <div
 99 |                       className={cn(
100 |                         "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
101 |                         isSelected
102 |                           ? "bg-primary text-primary-foreground"
103 |                           : "opacity-50 [&_svg]:invisible"
104 |                       )}
105 |                     >
106 |                       <CheckIcon className={cn("h-4 w-4")} />
107 |                     </div>
108 |                     <span>{option}</span>
109 |                     <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
110 |                       {count}
111 |                     </span>
112 |                   </CommandItem>
113 |                 );
114 |               })}
115 |             </CommandGroup>
116 |             {selectedValues.size > 0 && (
117 |               <>
118 |                 <CommandSeparator />
119 |                 <CommandGroup>
120 |                   <CommandItem
121 |                     onSelect={() => column?.setFilterValue(undefined)}
122 |                     className="justify-center text-center"
123 |                   >
124 |                     Clear filters
125 |                   </CommandItem>
126 |                 </CommandGroup>
127 |               </>
128 |             )}
129 |           </CommandList>
130 |         </Command>
131 |       </PopoverContent>
132 |     </Popover>
133 |   );
134 | }
135 | 


--------------------------------------------------------------------------------
/src/components/ui/command.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { DialogProps } from "@radix-ui/react-dialog"
  3 | import { Command as CommandPrimitive } from "cmdk"
  4 | import { Search } from "lucide-react"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | import { Dialog, DialogContent } from "@/components/ui/dialog"
  8 | 
  9 | const Command = React.forwardRef<
 10 |   React.ElementRef<typeof CommandPrimitive>,
 11 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive>
 12 | >(({ className, ...props }, ref) => (
 13 |   <CommandPrimitive
 14 |     ref={ref}
 15 |     className={cn(
 16 |       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 17 |       className
 18 |     )}
 19 |     {...props}
 20 |   />
 21 | ))
 22 | Command.displayName = CommandPrimitive.displayName
 23 | 
 24 | interface CommandDialogProps extends DialogProps {}
 25 | 
 26 | const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 27 |   return (
 28 |     <Dialog {...props}>
 29 |       <DialogContent className="overflow-hidden p-0 shadow-lg">
 30 |         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 31 |           {children}
 32 |         </Command>
 33 |       </DialogContent>
 34 |     </Dialog>
 35 |   )
 36 | }
 37 | 
 38 | const CommandInput = React.forwardRef<
 39 |   React.ElementRef<typeof CommandPrimitive.Input>,
 40 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 41 | >(({ className, ...props }, ref) => (
 42 |   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
 43 |     <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
 44 |     <CommandPrimitive.Input
 45 |       ref={ref}
 46 |       className={cn(
 47 |         "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
 48 |         className
 49 |       )}
 50 |       {...props}
 51 |     />
 52 |   </div>
 53 | ))
 54 | 
 55 | CommandInput.displayName = CommandPrimitive.Input.displayName
 56 | 
 57 | const CommandList = React.forwardRef<
 58 |   React.ElementRef<typeof CommandPrimitive.List>,
 59 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 60 | >(({ className, ...props }, ref) => (
 61 |   <CommandPrimitive.List
 62 |     ref={ref}
 63 |     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
 64 |     {...props}
 65 |   />
 66 | ))
 67 | 
 68 | CommandList.displayName = CommandPrimitive.List.displayName
 69 | 
 70 | const CommandEmpty = React.forwardRef<
 71 |   React.ElementRef<typeof CommandPrimitive.Empty>,
 72 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 73 | >((props, ref) => (
 74 |   <CommandPrimitive.Empty
 75 |     ref={ref}
 76 |     className="py-6 text-center text-sm"
 77 |     {...props}
 78 |   />
 79 | ))
 80 | 
 81 | CommandEmpty.displayName = CommandPrimitive.Empty.displayName
 82 | 
 83 | const CommandGroup = React.forwardRef<
 84 |   React.ElementRef<typeof CommandPrimitive.Group>,
 85 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
 86 | >(({ className, ...props }, ref) => (
 87 |   <CommandPrimitive.Group
 88 |     ref={ref}
 89 |     className={cn(
 90 |       "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
 91 |       className
 92 |     )}
 93 |     {...props}
 94 |   />
 95 | ))
 96 | 
 97 | CommandGroup.displayName = CommandPrimitive.Group.displayName
 98 | 
 99 | const CommandSeparator = React.forwardRef<
100 |   React.ElementRef<typeof CommandPrimitive.Separator>,
101 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
102 | >(({ className, ...props }, ref) => (
103 |   <CommandPrimitive.Separator
104 |     ref={ref}
105 |     className={cn("-mx-1 h-px bg-border", className)}
106 |     {...props}
107 |   />
108 | ))
109 | CommandSeparator.displayName = CommandPrimitive.Separator.displayName
110 | 
111 | const CommandItem = React.forwardRef<
112 |   React.ElementRef<typeof CommandPrimitive.Item>,
113 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
114 | >(({ className, ...props }, ref) => (
115 |   <CommandPrimitive.Item
116 |     ref={ref}
117 |     className={cn(
118 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
119 |       className
120 |     )}
121 |     {...props}
122 |   />
123 | ))
124 | 
125 | CommandItem.displayName = CommandPrimitive.Item.displayName
126 | 
127 | const CommandShortcut = ({
128 |   className,
129 |   ...props
130 | }: React.HTMLAttributes<HTMLSpanElement>) => {
131 |   return (
132 |     <span
133 |       className={cn(
134 |         "ml-auto text-xs tracking-widest text-muted-foreground",
135 |         className
136 |       )}
137 |       {...props}
138 |     />
139 |   )
140 | }
141 | CommandShortcut.displayName = "CommandShortcut"
142 | 
143 | export {
144 |   Command,
145 |   CommandDialog,
146 |   CommandInput,
147 |   CommandList,
148 |   CommandEmpty,
149 |   CommandGroup,
150 |   CommandItem,
151 |   CommandShortcut,
152 |   CommandSeparator,
153 | }
154 | 


--------------------------------------------------------------------------------
/src/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
  3 | import { Check, ChevronRight, Circle } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | const DropdownMenu = DropdownMenuPrimitive.Root
  8 | 
  9 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 10 | 
 11 | const DropdownMenuGroup = DropdownMenuPrimitive.Group
 12 | 
 13 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 14 | 
 15 | const DropdownMenuSub = DropdownMenuPrimitive.Sub
 16 | 
 17 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 18 | 
 19 | const DropdownMenuSubTrigger = React.forwardRef<
 20 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 21 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 22 |     inset?: boolean
 23 |   }
 24 | >(({ className, inset, children, ...props }, ref) => (
 25 |   <DropdownMenuPrimitive.SubTrigger
 26 |     ref={ref}
 27 |     className={cn(
 28 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
 29 |       inset && "pl-8",
 30 |       className
 31 |     )}
 32 |     {...props}
 33 |   >
 34 |     {children}
 35 |     <ChevronRight className="ml-auto h-4 w-4" />
 36 |   </DropdownMenuPrimitive.SubTrigger>
 37 | ))
 38 | DropdownMenuSubTrigger.displayName =
 39 |   DropdownMenuPrimitive.SubTrigger.displayName
 40 | 
 41 | const DropdownMenuSubContent = React.forwardRef<
 42 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 43 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 44 | >(({ className, ...props }, ref) => (
 45 |   <DropdownMenuPrimitive.SubContent
 46 |     ref={ref}
 47 |     className={cn(
 48 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 49 |       className
 50 |     )}
 51 |     {...props}
 52 |   />
 53 | ))
 54 | DropdownMenuSubContent.displayName =
 55 |   DropdownMenuPrimitive.SubContent.displayName
 56 | 
 57 | const DropdownMenuContent = React.forwardRef<
 58 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 59 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 60 | >(({ className, sideOffset = 4, ...props }, ref) => (
 61 |   <DropdownMenuPrimitive.Portal>
 62 |     <DropdownMenuPrimitive.Content
 63 |       ref={ref}
 64 |       sideOffset={sideOffset}
 65 |       className={cn(
 66 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 67 |         className
 68 |       )}
 69 |       {...props}
 70 |     />
 71 |   </DropdownMenuPrimitive.Portal>
 72 | ))
 73 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 74 | 
 75 | const DropdownMenuItem = React.forwardRef<
 76 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 77 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 78 |     inset?: boolean
 79 |   }
 80 | >(({ className, inset, ...props }, ref) => (
 81 |   <DropdownMenuPrimitive.Item
 82 |     ref={ref}
 83 |     className={cn(
 84 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 85 |       inset && "pl-8",
 86 |       className
 87 |     )}
 88 |     {...props}
 89 |   />
 90 | ))
 91 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 92 | 
 93 | const DropdownMenuCheckboxItem = React.forwardRef<
 94 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
 95 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 96 | >(({ className, children, checked, ...props }, ref) => (
 97 |   <DropdownMenuPrimitive.CheckboxItem
 98 |     ref={ref}
 99 |     className={cn(
100 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
101 |       className
102 |     )}
103 |     checked={checked}
104 |     {...props}
105 |   >
106 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
107 |       <DropdownMenuPrimitive.ItemIndicator>
108 |         <Check className="h-4 w-4" />
109 |       </DropdownMenuPrimitive.ItemIndicator>
110 |     </span>
111 |     {children}
112 |   </DropdownMenuPrimitive.CheckboxItem>
113 | ))
114 | DropdownMenuCheckboxItem.displayName =
115 |   DropdownMenuPrimitive.CheckboxItem.displayName
116 | 
117 | const DropdownMenuRadioItem = React.forwardRef<
118 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
119 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
120 | >(({ className, children, ...props }, ref) => (
121 |   <DropdownMenuPrimitive.RadioItem
122 |     ref={ref}
123 |     className={cn(
124 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
125 |       className
126 |     )}
127 |     {...props}
128 |   >
129 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
130 |       <DropdownMenuPrimitive.ItemIndicator>
131 |         <Circle className="h-2 w-2 fill-current" />
132 |       </DropdownMenuPrimitive.ItemIndicator>
133 |     </span>
134 |     {children}
135 |   </DropdownMenuPrimitive.RadioItem>
136 | ))
137 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
138 | 
139 | const DropdownMenuLabel = React.forwardRef<
140 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
141 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
142 |     inset?: boolean
143 |   }
144 | >(({ className, inset, ...props }, ref) => (
145 |   <DropdownMenuPrimitive.Label
146 |     ref={ref}
147 |     className={cn(
148 |       "px-2 py-1.5 text-sm font-semibold",
149 |       inset && "pl-8",
150 |       className
151 |     )}
152 |     {...props}
153 |   />
154 | ))
155 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
156 | 
157 | const DropdownMenuSeparator = React.forwardRef<
158 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
159 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
160 | >(({ className, ...props }, ref) => (
161 |   <DropdownMenuPrimitive.Separator
162 |     ref={ref}
163 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
164 |     {...props}
165 |   />
166 | ))
167 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
168 | 
169 | const DropdownMenuShortcut = ({
170 |   className,
171 |   ...props
172 | }: React.HTMLAttributes<HTMLSpanElement>) => {
173 |   return (
174 |     <span
175 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
176 |       {...props}
177 |     />
178 |   )
179 | }
180 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
181 | 
182 | export {
183 |   DropdownMenu,
184 |   DropdownMenuTrigger,
185 |   DropdownMenuContent,
186 |   DropdownMenuItem,
187 |   DropdownMenuCheckboxItem,
188 |   DropdownMenuRadioItem,
189 |   DropdownMenuLabel,
190 |   DropdownMenuSeparator,
191 |   DropdownMenuShortcut,
192 |   DropdownMenuGroup,
193 |   DropdownMenuPortal,
194 |   DropdownMenuSub,
195 |   DropdownMenuSubContent,
196 |   DropdownMenuSubTrigger,
197 |   DropdownMenuRadioGroup,
198 | }
199 | 


--------------------------------------------------------------------------------