Pikas UI

@pikas-ui/dialog

This package contains a dialog component that can be used to show a modal.

This library is based on Radix Ui.

Change Log

Requirements

To use this package, you must install the @pikas-ui/styles package.

Installation

You can install this package using npm, yarn, or pnpm.

npm install @pikas-ui/dialog

yarn add @pikas-ui/dialog

pnpm add @pikas-ui/dialog

Usage

DefaultDialog

This is the default dialog component. It can be used to show a modal with a title, a content, and a validate button.

import { DefaultDialog } from '@pikas-ui/dialog';
import { useState } from 'react';
import { Button } from '@pikas-ui/button';

const Example: React.FC = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <DefaultDialog
        visible={visible}
        onClose={(): void => setVisible(false)}
        content="Hello world!"
        title="Hello"
      />

      <Button onClick={(): void => setVisible((lastState) => !lastState)}>
        {visible ? 'Hide' : 'Show'}
      </Button>
    </>
  );
};

Props

Prop	Description	Type	Default
`visible`	Sets the visibility of the dialog	`boolean`	required
`onOpen`	Callback when the dialog is opened	`function`	-
`onClose`	Callback when the dialog is closed	`function`	-
`title`	Sets the title of the dialog	`string`	-
`content`	Sets the content of the dialog	`ReactNode`	-
`validateButtonLabel`	Sets the label of the validate button	`string`	`"Ok"`
`onValidate`	Callback when the dialog is validated	`() => void`	-
`validateButtonColorName`	Sets the color of the validate button	`PikasColors`	`"primary"`
`validateButtonDisabled`	Sets the disabled state of the validate button	`boolean`	-
`validateButtonLoading`	Sets the loading state of the validate button	`boolean`	-

SuccessDialog

This is the success dialog component. It can be used to show a modal with a title, a content, and a validate button.

import { SuccessDialog } from '@pikas-ui/dialog';
import { useState } from 'react';
import { Button } from '@pikas-ui/button';

const Example: React.FC = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <SuccessDialog
        visible={visible}
        onClose={(): void => setVisible(false)}
        content="You have successfully completed the task."
      />

      <Button onClick={(): void => setVisible((lastState) => !lastState)}>
        {visible ? 'Hide' : 'Show'}
      </Button>
    </>
  );
};

Props

Prop	Description	Type	Default
`visible`	Sets the visibility of the dialog	`boolean`	required
`onOpen`	Callback when the dialog is opened	`function`	-
`onClose`	Callback when the dialog is closed	`function`	-
`title`	Sets the title of the dialog	`string`	`"Yeah ! You did it !"`
`content`	Sets the content of the dialog	`ReactNode`	required
`validateButtonLabel`	Sets the label of the validate button	`string`	`"Ok"`
`onValidate`	Callback when the dialog is validated	`() => void`	-
`validateButtonColorName`	Sets the color of the validate button	`PikasColors`	`"primary"`
`validateButtonDisabled`	Sets the disabled state of the validate button	`boolean`	-
`validateButtonLoading`	Sets the loading state of the validate button	`boolean`	-

ValidateDialog

This is the validate dialog component. It can be used to show a modal with a title, a content, a validate button, and a cancel button.

import { ValidateDialog } from '@pikas-ui/dialog';
import { useState } from 'react';
import { Button } from '@pikas-ui/button';

const Example: React.FC = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <ValidateDialog
        visible={visible}
        onClose={(): void => setVisible(false)}
        content="Are you sure you want to do this ?"
      />

      <Button onClick={(): void => setVisible((lastState) => !lastState)}>
        {visible ? 'Hide' : 'Show'}
      </Button>
    </>
  );
};

Props

Prop	Description	Type	Default
`visible`	Sets the visibility of the dialog	`boolean`	required
`onOpen`	Callback when the dialog is opened	`function`	-
`onClose`	Callback when the dialog is closed	`function`	-
`title`	Sets the title of the dialog	`string`	`"Are you sure ?"`
`content`	Sets the content of the dialog	`ReactNode`	required
`validateButtonLabel`	Sets the label of the validate button	`string`	`"Ok"`
`onValidate`	Callback when the dialog is validated	`() => void`	-
`cancelButtonLabel`	Sets the label of the cancel button	`string`	`"Cancel"`
`onCancel`	Callback when the dialog is canceled	`() => void`	-
`validateButtonColorName`	Sets the color of the validate button	`PikasColors`	`"success"`
`cancelButtonColorName`	Sets the color of the cancel button	`PikasColors`	`"danger"`
`validateButtonDisabled`	Sets the disabled state of the validate button	`boolean`	-
`cancelButtonDisabled`	Sets the disabled state of the cancel button	`boolean`	-
`validateButtonLoading`	Sets the loading state of the validate button	`boolean`	-
`cancelButtonLoading`	Sets the loading state of the cancel button	`boolean`	-

ErrorDialog

This is the error dialog component. It can be used to show a modal with a title, a content, and a validate button.

import { ErrorDialog } from '@pikas-ui/dialog';
import { useState } from 'react';
import { Button } from '@pikas-ui/button';

const Example: React.FC = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <ErrorDialog
        visible={visible}
        onClose={(): void => setVisible(false)}
        content="Please try again later."
      />

      <Button onClick={(): void => setVisible((lastState) => !lastState)}>
        {visible ? 'Hide' : 'Show'}
      </Button>
    </>
  );
};

Props

Prop	Description	Type	Default
`visible`	Sets the visibility of the dialog	`boolean`	required
`onOpen`	Callback when the dialog is opened	`function`	-
`onClose`	Callback when the dialog is closed	`function`	-
`title`	Sets the title of the dialog	`string`	`"Oops ! A error occurred..."`
`content`	Sets the content of the dialog	`ReactNode`	required
`validateButtonLabel`	Sets the label of the validate button	`string`	`"Ok"`
`onValidate`	Callback when the dialog is validated	`() => void`	-
`validateButtonColorName`	Sets the color of the validate button	`PikasColors`	`"danger"`
`validateButtonDisabled`	Sets the disabled state of the validate button	`boolean`	-
`validateButtonLoading`	Sets the loading state of the validate button	`boolean`	-

InfoDialog

This is the info dialog component. It can be used to show a modal with a title, a content, and a validate button.

import { InfoDialog } from '@pikas-ui/dialog';
import { useState } from 'react';
import { Button } from '@pikas-ui/button';

const Example: React.FC = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <InfoDialog
        visible={visible}
        onClose={(): void => setVisible(false)}
        content="You have successfully completed the task."
      />

      <Button onClick={(): void => setVisible((lastState) => !lastState)}>
        {visible ? 'Hide' : 'Show'}
      </Button>
    </>
  );
};

Props

Prop	Description	Type	Default
`visible`	Sets the visibility of the dialog	`boolean`	required
`onOpen`	Callback when the dialog is opened	`function`	-
`onClose`	Callback when the dialog is closed	`function`	-
`title`	Sets the title of the dialog	`string`	`"We have a information for you !"`
`content`	Sets the content of the dialog	`ReactNode`	required
`validateButtonLabel`	Sets the label of the validate button	`string`	`"Ok"`
`onValidate`	Callback when the dialog is validated	`() => void`	-
`validateButtonColorName`	Sets the color of the validate button	`PikasColors`	`"primary"`
`validateButtonDisabled`	Sets the disabled state of the validate button	`boolean`	-
`validateButtonLoading`	Sets the loading state of the validate button	`boolean`	-

CustomDialog

This is the custom dialog component. It can be used to show a modal with a custom header, content, and footer.

import { CustomDialog } from '@pikas-ui/dialog';
import { useState } from 'react';
import { Button } from '@pikas-ui/button';

const Example: React.FC = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <CustomDialog
        visible={visible}
        onClose={(): void => setVisible(false)}
        header={<h2>Hello world !</h2>}
        content={<p>This is a custom dialog.</p>}
        footer={
          <Button onClick={(): void => setVisible(false)} width="auto">
            Ok
          </Button>
        }
        padding={{
          container: 'md',
        }}
        gap={{
          container: 'md',
        }}
      />

      <Button onClick={(): void => setVisible((lastState) => !lastState)}>
        {visible ? 'Hide' : 'Show'}
      </Button>
    </>
  );
};

Props

Prop	Description	Type	Default
`visible`	Sets the visibility of the dialog	`boolean`	required
`onOpen`	Callback when the dialog is opened	`function`	-
`onClose`	Callback when the dialog is closed	`function`	-
`closeIfClickOutside`	Closes the dialog if the user clicks outside of it	`boolean`	`false`
`hasCloseIcon`	Adds a close icon to the dialog	`boolean`	`true`
`css`	Custom CSS of the dialog	`CustomDialogCSS`	-
`width`	Sets the width of the dialog	`string or number`	`500`
`height`	Sets the height of the dialog	`string or number`	-
`padding`	Sets the padding of the dialog	`CustomDialogPadding`	-
`gap`	Sets the gap of the dialog	`CustomDialogGap`	-
`header`	Sets the header of the dialog	`ReactNode`	-
`content`	Sets the content of the dialog	`ReactNode`	-
`footer`	Sets the footer of the dialog	`ReactNode`	-

SelectImageDialog

This is the select image dialog component. You can use it to select an image from your computer. It will return the image as a base64 string compressed.

import { SelectImageDialog } from '@pikas-ui/dialog';

const Example: React.FC = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <SelectImageDialog
        visible={visible}
        onClose={(): void => setVisible(false)}
      />

      <Button onClick={(): void => setVisible((lastState) => !lastState)}>
        {visible ? 'Hide' : 'Show'}
      </Button>
    </>
  );
};

Props

Prop	Description	Type	Default
`visible`	Sets the visibility of the dialog	`boolean`	required
`onOpen`	Callback when the dialog is opened	`function`	-
`onClose`	Callback when the dialog is closed	`function`	-
`title`	Sets the title of the dialog	`string`	`"Image selection"`
`selectImageLabel`	Sets the label of the select image button	`string`	`"Select an image"`
`defaultImage`	Sets the default image	`string`	-
`defaultImageFull`	Sets the default image (full)	`string`	-
`cancelButtonLabel`	Sets the label of the cancel button	`string`	`"Cancel"`
`validateButtonLabel`	Sets the label of the validate button	`string`	`"Validate"`
`cancelButtonColorName`	Sets the color of the cancel button	`PikasColors`	`"danger"`
`validateButtonColorName`	Sets the color of the validate button	`PikasColors`	`"success"`
`cancelButtonDisabled`	Sets the disabled state of the cancel button	`boolean`	-
`validateButtonDisabled`	Sets the disabled state of the validate button	`boolean`	-
`cancelButtonLoading`	Sets the loading state of the cancel button	`boolean`	-
`validateButtonLoading`	Sets the loading state of the validate button	`boolean`	-
`onCancel`	Callback when the cancel button is clicked	`function`	-
`onValidate`	Callback when the validate button is clicked	`function`	-
`maxZoom`	Sets the max zoom of the image	`number`	`5`
`minZoom`	Sets the min zoom of the image	`number`	`1`
`defaultZoom`	Sets the default zoom of the image	`number`	`1`
`aspect`	Sets the aspect of the image	`number`	`1 / 1`
`cropShape`	Sets the shape of the crop	`string`	`"rect"`
`cropSize`	Sets the size of the crop	`object`	-

Contributing

This documentation can be edited on GitHub here