-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #5 from bleu-fi/jose/click-557-deploy-new-app-prod…
…-version feat(components): add components
- Loading branch information
Showing
74 changed files
with
6,363 additions
and
139 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -40,3 +40,6 @@ storybook-static | |
| !.yarn/releases | ||
| !.yarn/sdks | ||
| !.yarn/versions | ||
|
|
||
| .yalc/* | ||
| yalc.lock | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import { CircleIcon, FileIcon } from "@radix-ui/react-icons"; | ||
| import * as React from "react"; | ||
| import { useNavigate } from "react-router-dom"; | ||
| import { | ||
| Button, | ||
| CommandDialog, | ||
| CommandEmpty, | ||
| CommandGroup, | ||
| CommandInput, | ||
| CommandItem, | ||
| CommandList, | ||
| CommandSeparator, | ||
| } from "@/components/ui"; | ||
| import { cn } from "@/lib/utils"; | ||
|
|
||
| export function CommandMenu({ commands, ...props }) { | ||
| const navigate = useNavigate(); | ||
| const [open, setOpen] = React.useState(false); | ||
|
|
||
| React.useEffect(() => { | ||
| const down = (e) => { | ||
| if (e.key === "k" && (e.metaKey || e.ctrlKey)) { | ||
| e.preventDefault(); | ||
| // eslint-disable-next-line no-shadow | ||
| setOpen((open) => !open); | ||
| } | ||
| }; | ||
|
|
||
| document.addEventListener("keydown", down); | ||
| return () => document.removeEventListener("keydown", down); | ||
| }, []); | ||
|
|
||
| const runCommand = React.useCallback((command) => { | ||
| setOpen(false); | ||
| command(); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <> | ||
| <Button | ||
| variant="outline" | ||
| className={cn( | ||
| "text-muted-foreground relative w-full justify-start text-sm sm:pr-12 md:w-40 lg:w-64" | ||
| )} | ||
| onClick={() => setOpen(true)} | ||
| {...props} | ||
| > | ||
| <span className="inline-flex">Busca global</span> | ||
| <kbd className="bg-muted top- pointer-events-none absolute right-1.5 hidden h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex"> | ||
| <span className="text-xs">⌘</span>K | ||
| </kbd> | ||
| </Button> | ||
| <CommandDialog open={open} onOpenChange={setOpen}> | ||
| <CommandInput placeholder="Type a command or search..." /> | ||
| <CommandList> | ||
| <CommandEmpty>No results found.</CommandEmpty> | ||
| <CommandGroup heading="Links"> | ||
| {commands.mainNav | ||
| .filter((navitem) => !navitem.external) | ||
| .map((navItem) => ( | ||
| <CommandItem | ||
| key={navItem.href} | ||
| value={navItem.title} | ||
| onSelect={() => { | ||
| runCommand(() => navigate(navItem.href)); | ||
| }} | ||
| > | ||
| <FileIcon className="mr-2 h-2 w-2" /> | ||
| {navItem.title} | ||
| </CommandItem> | ||
| ))} | ||
| </CommandGroup> | ||
| <CommandSeparator /> | ||
| {commands.sidebarNav?.map((group) => ( | ||
| <CommandGroup key={group.title} heading={group.title}> | ||
| {group.items.map((navItem) => ( | ||
| <CommandItem | ||
| key={navItem.href} | ||
| value={navItem.title} | ||
| onSelect={() => { | ||
| runCommand(() => navigate(navItem.href)); | ||
| }} | ||
| > | ||
| <div className="mr-2 flex h-4 w-4 items-center justify-center"> | ||
| <CircleIcon className="h-3 w-3" /> | ||
| </div> | ||
| {navItem.title} | ||
| </CommandItem> | ||
| ))} | ||
| </CommandGroup> | ||
| ))} | ||
| </CommandList> | ||
| </CommandDialog> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| /* eslint-disable consistent-return */ | ||
| import { ClipboardCopyIcon } from "@radix-ui/react-icons"; | ||
| import copy from "copy-to-clipboard"; | ||
| import React, { PropsWithChildren, useCallback, useLayoutEffect } from "react"; | ||
| import { cn } from "@/lib/utils"; | ||
| import { useToast } from "@/hooks/useToast"; | ||
|
|
||
| export function ClickToCopy({ | ||
| text, | ||
| className, | ||
| children, | ||
| }: PropsWithChildren<{ | ||
| className?: string; | ||
| text: string; | ||
| }>) { | ||
| const [copied, setCopied] = React.useState(false); | ||
| const { toast } = useToast(); | ||
|
|
||
| useLayoutEffect(() => { | ||
| if (copied) { | ||
| const timeout = setTimeout(() => { | ||
| setCopied(false); | ||
| }, 2000); | ||
|
|
||
| toast({ | ||
| title: "Copied to clipboard", | ||
| variant: "default", | ||
| }); | ||
|
|
||
| return () => clearTimeout(timeout); | ||
| } | ||
| }, [copied]); | ||
|
|
||
| return ( | ||
| <div> | ||
| <CopyToClipboard | ||
| text={text} | ||
| onCopy={() => setCopied(true)} | ||
| className={cn("flex flex-row items-center", className)} | ||
| > | ||
| <> | ||
| <span className="mr-1">{children}</span> | ||
| <ClipboardCopyIcon | ||
| width={18} | ||
| height={18} | ||
| className="text-foreground" | ||
| /> | ||
| </> | ||
| </CopyToClipboard> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function CopyToClipboard({ text, className, onCopy, children }) { | ||
| const [copied, setCopied] = React.useState(false); | ||
|
|
||
| useLayoutEffect(() => { | ||
| if (copied) { | ||
| const timeout = setTimeout(() => { | ||
| setCopied(false); | ||
| }, 1000); | ||
|
|
||
| return () => clearTimeout(timeout); | ||
| } | ||
| }, [copied]); | ||
|
|
||
| const handleCopy = useCallback(() => { | ||
| copy(text); | ||
| onCopy?.(); | ||
| }, [text, onCopy]); | ||
|
|
||
| return ( | ||
| // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions | ||
| <div className={cn("cursor-pointer", className)} onClick={handleCopy}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import { | ||
| ArrowDownIcon, | ||
| ArrowUpIcon, | ||
| CaretSortIcon, | ||
| EyeNoneIcon, | ||
| } from "@radix-ui/react-icons"; | ||
| import React from "react"; | ||
| import { | ||
| Button, | ||
| DropdownMenu, | ||
| DropdownMenuContent, | ||
| DropdownMenuItem, | ||
| DropdownMenuSeparator, | ||
| DropdownMenuTrigger, | ||
| } from "@/components/ui"; | ||
| import { cn } from "@/lib/utils"; | ||
|
|
||
| export function DataTableColumnHeader({ column, title, className }) { | ||
| if (!column.getCanSort()) { | ||
| return <div className={cn(className)}>{title}</div>; | ||
| } | ||
|
|
||
| return ( | ||
| <div className={cn("flex items-center space-x-2", className)}> | ||
| <DropdownMenu> | ||
| <DropdownMenuTrigger asChild> | ||
| <Button | ||
| variant="ghost" | ||
| size="sm" | ||
| className="data-[state=open]:bg-accent -ml-3 h-8" | ||
| > | ||
| <span>{title}</span> | ||
| {column.getIsSorted() === "desc" ? ( | ||
| <ArrowDownIcon className="ml-2 h-4 w-4" /> | ||
| ) : column.getIsSorted() === "asc" ? ( | ||
| <ArrowUpIcon className="ml-2 h-4 w-4" /> | ||
| ) : ( | ||
| <CaretSortIcon className="ml-2 h-4 w-4" /> | ||
| )} | ||
| </Button> | ||
| </DropdownMenuTrigger> | ||
| <DropdownMenuContent align="start"> | ||
| <DropdownMenuItem onClick={() => column.toggleSorting(false)}> | ||
| <ArrowUpIcon className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" /> | ||
| Asc | ||
| </DropdownMenuItem> | ||
| <DropdownMenuItem onClick={() => column.toggleSorting(true)}> | ||
| <ArrowDownIcon className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" /> | ||
| Desc | ||
| </DropdownMenuItem> | ||
| <DropdownMenuSeparator /> | ||
| <DropdownMenuItem onClick={() => column.toggleVisibility(false)}> | ||
| <EyeNoneIcon className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" /> | ||
| Hide | ||
| </DropdownMenuItem> | ||
| </DropdownMenuContent> | ||
| </DropdownMenu> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.