From a79ae4d41c315351a242bdf2b3e6d10085d8bb72 Mon Sep 17 00:00:00 2001 From: Christopher Seven Phiri Date: Sun, 18 Aug 2024 23:44:39 +0200 Subject: [PATCH] update --- package.json | 2 + pnpm-lock.yaml | 51 +++++++ src/app/(dashboard)/layout.tsx | 5 +- src/app/(dashboard)/patients/page.tsx | 18 +-- src/components/filters/toolbar.tsx | 207 ++++++++++++++++++++------ src/components/ui/drawer.tsx | 118 +++++++++++++++ src/components/ui/textarea.tsx | 24 +++ src/components/ui/tooltip.tsx | 30 ++++ 8 files changed, 399 insertions(+), 56 deletions(-) create mode 100644 src/components/ui/drawer.tsx create mode 100644 src/components/ui/textarea.tsx create mode 100644 src/components/ui/tooltip.tsx diff --git a/package.json b/package.json index 4f38854..1f814b3 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@radix-ui/react-select": "^2.1.1", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", + "@radix-ui/react-tooltip": "^1.1.2", "@smile-cdr/fhirts": "^2.0.7", "@tanstack/react-query": "^4.33.0", "@types/node": "20.5.7", @@ -52,6 +53,7 @@ "tailwindcss": "3.3.3", "tailwindcss-animate": "^1.0.7", "typescript": "5.2.2", + "vaul": "^0.9.1", "zod": "^3.22.2" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3ff3f60..df7cbf9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -35,6 +35,9 @@ dependencies: '@radix-ui/react-slot': specifier: ^1.0.2 version: 1.0.2(@types/react@18.2.21)(react@18.3.1) + '@radix-ui/react-tooltip': + specifier: ^1.1.2 + version: 1.1.2(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.3.1)(react@18.3.1) '@smile-cdr/fhirts': specifier: ^2.0.7 version: 2.0.7 @@ -134,6 +137,9 @@ dependencies: typescript: specifier: 5.2.2 version: 5.2.2 + vaul: + specifier: ^0.9.1 + version: 0.9.1(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.3.1)(react@18.3.1) zod: specifier: ^3.22.2 version: 3.22.2 @@ -1521,6 +1527,37 @@ packages: react: 18.3.1 dev: false + /@radix-ui/react-tooltip@1.1.2(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-9XRsLwe6Yb9B/tlnYCPVUd/TFS4J7HuOZW345DCeC6vKIxQGMZdx21RK4VoZauPD5frgkXTYVS5y90L+3YBn4w==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.21)(react@18.3.1) + '@radix-ui/react-context': 1.1.0(@types/react@18.2.21)(react@18.3.1) + '@radix-ui/react-dismissable-layer': 1.1.0(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-id': 1.1.0(@types/react@18.2.21)(react@18.3.1) + '@radix-ui/react-popper': 1.2.0(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-portal': 1.1.1(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-slot': 1.1.0(@types/react@18.2.21)(react@18.3.1) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.21)(react@18.3.1) + '@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.3.1)(react@18.3.1) + '@types/react': 18.2.21 + '@types/react-dom': 18.2.7 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: false + /@radix-ui/react-use-callback-ref@1.0.0(react@18.3.1): resolution: {integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==} peerDependencies: @@ -5169,6 +5206,20 @@ packages: hasBin: true dev: false + /vaul@0.9.1(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-fAhd7i4RNMinx+WEm6pF3nOl78DFkAazcN04ElLPFF9BMCNGbY/kou8UMhIcicm0rJCNePJP0Yyza60gGOD0Jw==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@radix-ui/react-dialog': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.3.1)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + transitivePeerDependencies: + - '@types/react' + - '@types/react-dom' + dev: false + /which-boxed-primitive@1.0.2: resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==} dependencies: diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx index f4d84c6..fbb4830 100644 --- a/src/app/(dashboard)/layout.tsx +++ b/src/app/(dashboard)/layout.tsx @@ -1,5 +1,6 @@ import Navbar from "@/components/navbar"; -import NextTopLoader from 'nextjs-toploader'; +import { TooltipProvider } from "@/components/ui/tooltip"; +import NextTopLoader from "nextjs-toploader"; export default function DashboardLayout({ children, @@ -10,7 +11,7 @@ export default function DashboardLayout({
- {children} + {children}
); } diff --git a/src/app/(dashboard)/patients/page.tsx b/src/app/(dashboard)/patients/page.tsx index 5d670cf..0b8a4a4 100644 --- a/src/app/(dashboard)/patients/page.tsx +++ b/src/app/(dashboard)/patients/page.tsx @@ -10,15 +10,13 @@ export default async function Page({ }) { const data = await fetchRequiredData(); return ( -
- - - -
+ + + ); } diff --git a/src/components/filters/toolbar.tsx b/src/components/filters/toolbar.tsx index 33ac658..00dfba8 100644 --- a/src/components/filters/toolbar.tsx +++ b/src/components/filters/toolbar.tsx @@ -5,14 +5,63 @@ import { DataFacetedFilter } from "./input-filter"; import { Filter, FilterFormData, patientFilters } from "@/model/filters"; import { Separator } from "@/components/ui/separator"; import FilterCard from "./filter-card"; -import { useForm, FormProvider, Control, useFieldArray } from "react-hook-form"; -import { Button } from "@/components/ui/button"; +import { + useForm, + FormProvider, + Control, + useFieldArray, + UseFormReturn, +} from "react-hook-form"; import { GenericContextProvider, useGenericContext } from "./context"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "../ui/collapsible"; +import { + Bird, + Book, + Bot, + Code2, + CornerDownLeft, + LifeBuoy, + Mic, + Paperclip, + Rabbit, + Settings, + Settings2, + Share, + Square as SquareTerminal, + User as SquareUser, + Triangle, + Turtle, +} from "lucide-react"; + +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { + Drawer, + DrawerContent, + DrawerDescription, + DrawerHeader, + DrawerTitle, + DrawerTrigger, +} from "@/components/ui/drawer"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { Textarea } from "@/components/ui/textarea"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/components/ui/tooltip"; import { CaretSortIcon } from "@radix-ui/react-icons"; import { cn } from "@/lib/utils"; @@ -24,19 +73,25 @@ type Props = { children?: React.ReactElement; }; +type FilterToolbarContainerProps = { + methods: UseFormReturn; + isOpen: boolean; + setIsOpen: (open: boolean) => void; + filters: Filter[]; + prefillData?: any; + onSubmit: (data: FilterFormData) => void; +}; + const FilterToolbar = (props: Props) => { return ( - + ); }; - -const FilterToolbarContainer = ({ - action, - filters, +const FilterToolbarWRapper = ({ children, - prefillData, + ...props }: Props) => { const methods = useForm({ defaultValues: { @@ -52,48 +107,112 @@ const FilterToolbarContainer = ({ setLoading(true); const form = new FormData(); form.append("data", JSON.stringify(data)); - const responses = await action(form); + const responses = await props.action(form); setData(responses); setIsOpen(false); setLoading(false); }; - return ( -
- -
-
-

Search filters

- -
-
-
- - -
+
+ +
+
+

Playground

+ + + + + + + Configuration + + Configure the settings for the model and messages. + + +
+ + + +
+ + +
+
+
+ {children}
- )} - {children} +
+
+
+ ); +}; + +const FilterToolbarContainer = ({ + methods, + isOpen, + setIsOpen, + filters, + prefillData, + onSubmit, +}: FilterToolbarContainerProps) => { + return ( +
+
+

Search filters

+ +
+
+
+ +
); @@ -130,7 +249,7 @@ const FormContainer = ({ {fields.map((filter, index) => { const data = filters.find((f) => f.id == filter.filterId); - console.log(JSON.stringify(filter)); + console.log(JSON.stringify(filter), JSON.stringify(data ?? {})); return ( ) => ( + +) +Drawer.displayName = "Drawer" + +const DrawerTrigger = DrawerPrimitive.Trigger + +const DrawerPortal = DrawerPrimitive.Portal + +const DrawerClose = DrawerPrimitive.Close + +const DrawerOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName + +const DrawerContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + +
+ {children} + + +)) +DrawerContent.displayName = "DrawerContent" + +const DrawerHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +DrawerHeader.displayName = "DrawerHeader" + +const DrawerFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +DrawerFooter.displayName = "DrawerFooter" + +const DrawerTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DrawerTitle.displayName = DrawerPrimitive.Title.displayName + +const DrawerDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DrawerDescription.displayName = DrawerPrimitive.Description.displayName + +export { + Drawer, + DrawerPortal, + DrawerOverlay, + DrawerTrigger, + DrawerClose, + DrawerContent, + DrawerHeader, + DrawerFooter, + DrawerTitle, + DrawerDescription, +} diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx new file mode 100644 index 0000000..9f9a6dc --- /dev/null +++ b/src/components/ui/textarea.tsx @@ -0,0 +1,24 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +export interface TextareaProps + extends React.TextareaHTMLAttributes {} + +const Textarea = React.forwardRef( + ({ className, ...props }, ref) => { + return ( +