wyl/jsonhero-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Start of the Command Palette using radix-ui Dialog

Browse Source
This commit is contained in:
Eric Allam
2022-03-23 10:21:33 +00:00
parent 904b64d781
commit 8caa11ba1c
4 changed files with 161 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/SearchBar.tsx
+36 -14
View File
@@ -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 (
<div className="flex justify-between items-center group w-44 rounded-sm bg-slate-300 transition hover:bg-slate-400 hover:bg-opacity-50 dark:bg-slate-800 dark:text-slate-400 hover:cursor-pointer hover:dark:bg-slate-700 hover:dark:bg-opacity-70">
<div className="flex items-center pl-2">
<SearchIcon className="w-4 h-4 mr-1" />
<Body>Search…</Body>
</div>
<div className="flex items-center gap-1 pr-2">
<ShortcutIcon className="w-4 h-4 text-sm bg-slate-200 transition group-hover:bg-slate-100 dark:bg-slate-700 dark:group-hover:bg-slate-600">
⌘
</ShortcutIcon>
<ShortcutIcon className="w-4 h-4 text-sm bg-slate-200 transition group-hover:bg-slate-100 dark:bg-slate-700 dark:group-hover:bg-slate-600">
K
</ShortcutIcon>
</div>
</div>
<Dialog>
<DialogTrigger>
<div className="flex justify-between items-center group w-44 rounded-sm bg-slate-300 transition hover:bg-slate-400 hover:bg-opacity-50 dark:bg-slate-800 dark:text-slate-400 hover:cursor-pointer hover:dark:bg-slate-700 hover:dark:bg-opacity-70">
<div className="flex items-center pl-2">
<SearchIcon className="w-4 h-4 mr-1" />
<Body>Search…</Body>
</div>
<div className="flex items-center gap-1 pr-2">
<ShortcutIcon className="w-4 h-4 text-sm bg-slate-200 transition group-hover:bg-slate-100 dark:bg-slate-700 dark:group-hover:bg-slate-600">
⌘
</ShortcutIcon>
<ShortcutIcon className="w-4 h-4 text-sm bg-slate-200 transition group-hover:bg-slate-100 dark:bg-slate-700 dark:group-hover:bg-slate-600">
K
</ShortcutIcon>
</div>
</div>
</DialogTrigger>
<DialogContent
className={classnames(
"fixed z-50",
"w-[95vw] max-w-md rounded-lg p-4 md:w-full",
"top-[30%] left-[50%] -translate-x-[50%] -translate-y-[50%]",
"bg-white dark:bg-gray-800",
"focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
)}
>
<SearchCommandPalette />
</DialogContent>
</Dialog>
);
}
export default function SearchCommandPalette() {
return <div className="text-center">Search Command Palette</div>;
}
app/components/UI/Dialog.tsx
+20
View File
@@ -0,0 +1,20 @@
import * as DialogPrimitive from "@radix-ui/react-dialog";
import React, { ComponentPropsWithoutRef } from "react";
export const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ children, ...props }, forwardedRef) => (
<DialogPrimitive.Portal>
<DialogPrimitive.Overlay
forceMount
className="fixed inset-0 z-20 bg-black/50"
/>
<DialogPrimitive.Content forceMount {...props} ref={forwardedRef}>
{children}
</DialogPrimitive.Content>
</DialogPrimitive.Portal>
));
export const Dialog = DialogPrimitive.Root;
export const DialogTrigger = DialogPrimitive.Trigger;
package-lock.json
Generated
+103
View File
@@ -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",
package.json
+2 -1
View File
@@ -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"
}
}