-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(dashboard): Create workflow sheet
- Loading branch information
Showing
15 changed files
with
1,295 additions
and
746 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
146 changes: 146 additions & 0 deletions
146
apps/dashboard/src/components/create-workflow-button.tsx
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,146 @@ | ||
| import { Button } from '@/components/primitives/button'; | ||
| import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/primitives/form'; | ||
| import { Input, InputField } from '@/components/primitives/input'; | ||
| import { Separator } from '@/components/primitives/separator'; | ||
| import { | ||
| Sheet, | ||
| SheetContent, | ||
| SheetDescription, | ||
| SheetFooter, | ||
| SheetHeader, | ||
| SheetMain, | ||
| SheetTitle, | ||
| SheetTrigger, | ||
| } from '@/components/primitives/sheet'; | ||
| import { TagInput } from '@/components/primitives/tag-input'; | ||
| import { Textarea } from '@/components/primitives/textarea'; | ||
| import { zodResolver } from '@hookform/resolvers/zod'; | ||
| import { ComponentProps } from 'react'; | ||
| import { useForm } from 'react-hook-form'; | ||
| import { RiExternalLinkLine } from 'react-icons/ri'; | ||
|
|
||
| import { Link } from 'react-router-dom'; | ||
| import { z } from 'zod'; | ||
|
|
||
| const formSchema = z.object({ | ||
| name: z.string(), | ||
| identifier: z.string().regex(/^[a-z0-9-]+$/), | ||
| tags: z.array(z.string()).max(8), | ||
| description: z.string().max(200).optional(), | ||
| }); | ||
|
|
||
| type CreateWorkflowButtonProps = ComponentProps<typeof SheetTrigger>; | ||
| export const CreateWorkflowButton = (props: CreateWorkflowButtonProps) => { | ||
| const form = useForm<z.infer<typeof formSchema>>({ | ||
| resolver: zodResolver(formSchema), | ||
| defaultValues: { description: '', identifier: '', name: '', tags: [] }, | ||
| }); | ||
|
|
||
| return ( | ||
| <Sheet> | ||
| <SheetTrigger {...props} /> | ||
| <SheetContent> | ||
| <SheetHeader> | ||
| <SheetTitle>Create workflow</SheetTitle> | ||
| <div> | ||
| <SheetDescription> | ||
| Workflows manage event-driven notifications across multiple channels in a version-controlled flow, with | ||
| the ability to manage preference for each subscriber. | ||
| </SheetDescription> | ||
| <Link | ||
| target="_blank" | ||
| to="https://docs.novu.co/api-reference/workflows/create-workflow" | ||
| className="text-foreground-400 flex items-center text-sm underline" | ||
| > | ||
| Learn more <RiExternalLinkLine className="inline size-4" /> | ||
| </Link> | ||
| </div> | ||
| </SheetHeader> | ||
| <Separator /> | ||
| <SheetMain> | ||
| <Form {...form}> | ||
| <form | ||
| id="create-workflow" | ||
| onSubmit={form.handleSubmit((values) => { | ||
| console.log(values); | ||
| })} | ||
| className="flex flex-col gap-6" | ||
| > | ||
| <FormField | ||
| control={form.control} | ||
| name="name" | ||
| render={({ field }) => ( | ||
| <FormItem> | ||
| <FormLabel>Name</FormLabel> | ||
| <FormControl> | ||
| <InputField> | ||
| <Input placeholder="Untitled" {...field} /> | ||
| </InputField> | ||
| </FormControl> | ||
| <FormMessage /> | ||
| </FormItem> | ||
| )} | ||
| /> | ||
|
|
||
| <FormField | ||
| control={form.control} | ||
| name="identifier" | ||
| render={({ field }) => ( | ||
| <FormItem> | ||
| <FormLabel>Identifier</FormLabel> | ||
| <FormControl> | ||
| <InputField> | ||
| <Input placeholder="untitled" {...field} /> | ||
| </InputField> | ||
| </FormControl> | ||
| <FormMessage>Must be unique and all lowercase</FormMessage> | ||
| </FormItem> | ||
| )} | ||
| /> | ||
|
|
||
| <Separator className="bg-neutral-alpha-100" /> | ||
|
|
||
| <FormField | ||
| control={form.control} | ||
| name="tags" | ||
| render={({ field }) => ( | ||
| <FormItem> | ||
| <div className="flex items-center gap-1"> | ||
| <FormLabel>Add tags</FormLabel> | ||
| <FormMessage>(max. 8)</FormMessage> | ||
| </div> | ||
| <FormControl> | ||
| <TagInput {...field} /> | ||
| </FormControl> | ||
| </FormItem> | ||
| )} | ||
| /> | ||
|
|
||
| <FormField | ||
| control={form.control} | ||
| name="description" | ||
| render={({ field }) => ( | ||
| <FormItem> | ||
| <div className="flex items-center gap-1"> | ||
| <FormLabel optional>Description</FormLabel> | ||
| </div> | ||
| <FormControl> | ||
| <Textarea placeholder="Description of what this workflow does" {...field} /> | ||
| </FormControl> | ||
| <FormMessage /> | ||
| </FormItem> | ||
| )} | ||
| /> | ||
| </form> | ||
| </Form> | ||
| </SheetMain> | ||
| <Separator /> | ||
| <SheetFooter> | ||
| <Button variant="default" type="submit" form="create-workflow"> | ||
| Create workflow | ||
| </Button> | ||
| </SheetFooter> | ||
| </SheetContent> | ||
| </Sheet> | ||
| ); | ||
| }; |
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
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,24 @@ | ||
| import * as React from 'react'; | ||
| import * as SeparatorPrimitive from '@radix-ui/react-separator'; | ||
|
|
||
| import { cn } from '@/utils/ui'; | ||
|
|
||
| const Separator = React.forwardRef< | ||
| React.ElementRef<typeof SeparatorPrimitive.Root>, | ||
| React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> | ||
| >(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => ( | ||
| <SeparatorPrimitive.Root | ||
| ref={ref} | ||
| decorative={decorative} | ||
| orientation={orientation} | ||
| className={cn( | ||
| 'bg-neutral-alpha-200 shrink-0', | ||
| orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); | ||
| Separator.displayName = SeparatorPrimitive.Root.displayName; | ||
|
|
||
| export { Separator }; |
Oops, something went wrong.