From 8caa11ba1ce888d808fb56aaf2ccca31279bff50 Mon Sep 17 00:00:00 2001 From: Eric Allam Date: Wed, 23 Mar 2022 10:21:33 +0000 Subject: [PATCH] Start of the Command Palette using radix-ui Dialog --- app/components/SearchBar.tsx | 50 ++++++++++++----- app/components/UI/Dialog.tsx | 20 +++++++ package-lock.json | 103 +++++++++++++++++++++++++++++++++++ package.json | 3 +- 4 files changed, 161 insertions(+), 15 deletions(-) create mode 100644 app/components/UI/Dialog.tsx diff --git a/app/components/SearchBar.tsx b/app/components/SearchBar.tsx index 78fbb63..f897de2 100644 --- a/app/components/SearchBar.tsx +++ b/app/components/SearchBar.tsx @@ -1,26 +1,48 @@ import { SearchIcon } from "@heroicons/react/outline"; import { ShortcutIcon } from "./Icons/ShortcutIcon"; import { Body } from "./Primitives/Body"; +import { Dialog, DialogTrigger, DialogContent } from "./UI/Dialog"; export type SearchBarProps = { className?: string; }; +import classnames from "~/utilities/classnames"; + export function SearchBar({ className }: SearchBarProps) { return ( -
-
- - Search… -
-
- - ⌘ - - - K - -
-
+ + +
+
+ + Search… +
+
+ + ⌘ + + + K + +
+
+ + + + + ); } + +export default function SearchCommandPalette() { + return
Search Command Palette
; +} diff --git a/app/components/UI/Dialog.tsx b/app/components/UI/Dialog.tsx new file mode 100644 index 0000000..27519ff --- /dev/null +++ b/app/components/UI/Dialog.tsx @@ -0,0 +1,20 @@ +import * as DialogPrimitive from "@radix-ui/react-dialog"; +import React, { ComponentPropsWithoutRef } from "react"; + +export const DialogContent = React.forwardRef< + React.ElementRef, + ComponentPropsWithoutRef +>(({ children, ...props }, forwardedRef) => ( + + + + {children} + + +)); + +export const Dialog = DialogPrimitive.Root; +export const DialogTrigger = DialogPrimitive.Trigger; diff --git a/package-lock.json b/package-lock.json index 37992d4..01dde43 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@jsonhero/json-schema-fns": "^0.0.1", "@jsonhero/path": "^1.0.17", "@jsonhero/schema-infer": "^0.1.x", + "@radix-ui/react-dialog": "^0.1.7", "@radix-ui/react-popover": "^0.1.5", "@radix-ui/react-tabs": "^0.1.5", "@remix-run/cloudflare-workers": "^1.2.3", @@ -2151,6 +2152,61 @@ "react": "^16.8 || ^17.0" } }, + "node_modules/@radix-ui/react-dialog": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-0.1.7.tgz", + "integrity": "sha512-jXt8srGhHBRvEr9jhEAiwwJzWCWZoGRJ030aC9ja/gkRJbZdy0iD3FwXf+Ff4RtsZyLUMHW7VUwFOlz3Ixe1Vw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "0.1.0", + "@radix-ui/react-compose-refs": "0.1.0", + "@radix-ui/react-context": "0.1.1", + "@radix-ui/react-dismissable-layer": "0.1.5", + "@radix-ui/react-focus-guards": "0.1.0", + "@radix-ui/react-focus-scope": "0.1.4", + "@radix-ui/react-id": "0.1.5", + "@radix-ui/react-portal": "0.1.4", + "@radix-ui/react-presence": "0.1.2", + "@radix-ui/react-primitive": "0.1.4", + "@radix-ui/react-slot": "0.1.2", + "@radix-ui/react-use-controllable-state": "0.1.0", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "^2.4.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0", + "react-dom": "^16.8 || ^17.0" + } + }, + "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-dismissable-layer": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-0.1.5.tgz", + "integrity": "sha512-J+fYWijkX4M4QKwf9dtu1oC0U6e6CEl8WhBp3Ad23yz2Hia0XCo6Pk/mp5CAFy4QBtQedTSkhW05AdtSOEoajQ==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "0.1.0", + "@radix-ui/react-compose-refs": "0.1.0", + "@radix-ui/react-primitive": "0.1.4", + "@radix-ui/react-use-body-pointer-events": "0.1.1", + "@radix-ui/react-use-callback-ref": "0.1.0", + "@radix-ui/react-use-escape-keydown": "0.1.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0" + } + }, + "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-use-body-pointer-events": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-body-pointer-events/-/react-use-body-pointer-events-0.1.1.tgz", + "integrity": "sha512-R8leV2AWmJokTmERM8cMXFHWSiv/fzOLhG/JLmRBhLTAzOj37EQizssq4oW0Z29VcZy2tODMi9Pk/htxwb+xpA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-layout-effect": "0.1.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0" + } + }, "node_modules/@radix-ui/react-dismissable-layer": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-0.1.4.tgz", @@ -15119,6 +15175,53 @@ "@babel/runtime": "^7.13.10" } }, + "@radix-ui/react-dialog": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-0.1.7.tgz", + "integrity": "sha512-jXt8srGhHBRvEr9jhEAiwwJzWCWZoGRJ030aC9ja/gkRJbZdy0iD3FwXf+Ff4RtsZyLUMHW7VUwFOlz3Ixe1Vw==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "0.1.0", + "@radix-ui/react-compose-refs": "0.1.0", + "@radix-ui/react-context": "0.1.1", + "@radix-ui/react-dismissable-layer": "0.1.5", + "@radix-ui/react-focus-guards": "0.1.0", + "@radix-ui/react-focus-scope": "0.1.4", + "@radix-ui/react-id": "0.1.5", + "@radix-ui/react-portal": "0.1.4", + "@radix-ui/react-presence": "0.1.2", + "@radix-ui/react-primitive": "0.1.4", + "@radix-ui/react-slot": "0.1.2", + "@radix-ui/react-use-controllable-state": "0.1.0", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "^2.4.0" + }, + "dependencies": { + "@radix-ui/react-dismissable-layer": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-0.1.5.tgz", + "integrity": "sha512-J+fYWijkX4M4QKwf9dtu1oC0U6e6CEl8WhBp3Ad23yz2Hia0XCo6Pk/mp5CAFy4QBtQedTSkhW05AdtSOEoajQ==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "0.1.0", + "@radix-ui/react-compose-refs": "0.1.0", + "@radix-ui/react-primitive": "0.1.4", + "@radix-ui/react-use-body-pointer-events": "0.1.1", + "@radix-ui/react-use-callback-ref": "0.1.0", + "@radix-ui/react-use-escape-keydown": "0.1.0" + } + }, + "@radix-ui/react-use-body-pointer-events": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-body-pointer-events/-/react-use-body-pointer-events-0.1.1.tgz", + "integrity": "sha512-R8leV2AWmJokTmERM8cMXFHWSiv/fzOLhG/JLmRBhLTAzOj37EQizssq4oW0Z29VcZy2tODMi9Pk/htxwb+xpA==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-layout-effect": "0.1.0" + } + } + } + }, "@radix-ui/react-dismissable-layer": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-0.1.4.tgz", diff --git a/package.json b/package.json index f5fcc3f..8a746f9 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "@jsonhero/json-schema-fns": "^0.0.1", "@jsonhero/path": "^1.0.17", "@jsonhero/schema-infer": "^0.1.x", + "@radix-ui/react-dialog": "^0.1.7", "@radix-ui/react-popover": "^0.1.5", "@radix-ui/react-tabs": "^0.1.5", "@remix-run/cloudflare-workers": "^1.2.3", @@ -99,4 +100,4 @@ }, "sideEffects": false, "main": "dist/worker.js" -} \ No newline at end of file +}