diff --git a/apps/docs/pages/ui/overview.mdx b/apps/docs/pages/ui/overview.mdx index 3e7f749..a3169c2 100644 --- a/apps/docs/pages/ui/overview.mdx +++ b/apps/docs/pages/ui/overview.mdx @@ -1,13 +1,106 @@ # Davstack UI -Plans for this package: +In the coming weeks I will be releasing a wide range of reusable UI component snippets that I have built while working on [Ream](https://reamapp.com). -- Extension of shadcn/ui -- Makes react-hook-form + shadcn/ui much more easier to use, WITHOUT sacrificing flexibility -- Comprensive library of snippets for common form components -- Dialog manager -- Slot components +This includes a comprehensive form library that is built on top of [shadcn/ui](https://ui.shadcn.com/) and [react-hook-form](https://react-hook-form.com/). -Much of the code in this package has already been written while building [Ream](https://reamapp.com), but it is currently in a private repository. +Example usage: + +```tsx +'use client'; + +import { useRouter } from 'next/navigation'; +import { + Button, + ButtonProps, + dialog, + Field, + Form, + PlusCircleIcon, + toast, +} from '@ui'; +import { z } from 'zod'; + +import { api } from '@ream/api/react'; + +export const createRitualFormSchema = z.object({ + title: z.string().min(1, 'Name is required'), + description: z.string().optional(), + frequency: FrequencySchema.optional(), + timeOfDay: z.string().optional(), +}); + +export interface CreateRitualFormProps {} + +export function CreateRitualForm(props: CreateRitualFormProps) { + const {} = props; + + const createRitualMutation = api.ritual.createRitual.useMutation(); + + return ( + <> + createRitualMutation?.mutateAsync(d)} + mode="onSubmit" + > + + Create ritual + + + + + + + + + create + + + ); +} + +export const openCreateRitualModal = () => { + dialog.open(); +}; + +export type CreateRitualButtonProps = ButtonProps & {}; + +export function CreateRitualButton(props: CreateRitualButtonProps) { + const { ...buttonProps } = props; + return ( + + ); +} +``` I will be working on this package in the coming weeks. If you are interested in this package, please join the discord server and let me know!