[feat]: Dialog

[allandiegoasilva]

Feature: Enhanced Dialog Component Styling with Tailwind CSS and Radix

This pull request add the Dialog component based on Radix UI attributes. This addition will enable consistent and accessible styling of open, closed, and other relevant states.

Dependencies added

• radix-ui/react-visually-hidden
• radix-ui/react-dialog
• tailwindcss-animate

Button component changes

Was included React.forwardFor to Button.tsx, it was necessary for trigger dialog with native library button.

Usage example:

import {
  Button,
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTrigger,
  Text,
} from "@/packages/ui";

export default function DialogStyleDefault() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <Text as="h5">Confirm your action?</Text>
        </DialogHeader>
        <section className="flex flex-col gap-4 p-4">
          <section className="text-xl">
            <p>Are you sure you want to delete this item?</p>
            <p>This action cannout be undone.</p>
          </section>
          <section className="flex w-full justify-end">
            <DialogTrigger asChild>
              <Button>Confirm</Button>
            </DialogTrigger>
          </section>
        </section>
      </DialogContent>
    </Dialog>
  );
}

[ariflogs]

Damn! that's some some really good work! thank you 🙏

Can you put the dialog related components in one file Dialog.tsx? Something like

const Dialog = ...
const DialogOverlay = ...
const DialogContent = ...

const DialogComponent = Object.assign(Dialog, {
  content: DialogContent,
  ....
}

export {DialogComponent as Dialog}

this will let us use the component like 👇

import {
  Button,
  Dialog
} from "@/packages/ui";

export default function DialogStyleDefault() {
  return (
    <Dialog>
      <Dialog.Trigger asChild>
        <Button>Open Dialog</Button>
      </Dialog.Trigger>
      <Dialog.Content>
        ...
      </Dialog.Content>
    </Dialog>
  );
}

reference:

• https://tamagui.dev/ui/dialog?subpath=dialog
• https://www.retroui.dev/docs/components/card

[ariflogs]

by including them in same file you can also showcase the component source in the docs, so users can copy the code form the installation.

Ex:

## Installation
...

#### 2 Copy the code 👇 into your project:
<ComponentSource name="dialog" />

[allandiegoasilva]

Updated as requested.

Doc updates

1 - Was included copy-paste component like was requested.

Updates on component

1 - All components is moved for Dialog.tsx
2 - Call dialog component has changed for:

Example new mode for call Dialog:

import { Button, Dialog, Text } from "@/packages/ui";

export default function DialogStyleDefault() {
  return (
    <Dialog>
      <Dialog.Trigger asChild>
        <Button>Open Dialog</Button>
      </Dialog.Trigger>
      <Dialog.Content>
        <Dialog.Header>
          <Text as="h5">Confirm your action?</Text>
        </Dialog.Header>
        <section className="flex flex-col gap-4 p-4">
          <section className="text-xl">
            <p>Are you sure you want to delete this item?</p>
            <p>This action cannout be undone.</p>
          </section>
          <section className="flex w-full justify-end">
            <Dialog.Trigger asChild>
              <Button>Confirm</Button>
            </Dialog.Trigger>
          </section>
        </section>
      </Dialog.Content>
    </Dialog>
  );
}