pingcap / autoflow

Library Outline

This library provides a collection of reusable UI components built using the Shadcn/ui library. The aim is to simplify the development of visually appealing and interactive elements while maintaining consistency across the application.

Usage

Installation

npm install @pingcap/autoflow-ui

Import Components

import { Button, Input, Modal } from '@pingcap/autoflow-ui';

Components

Button

The Button component provides a variety of styles and options for creating interactive buttons.

Options:

  • variant: Controls the button’s appearance. Options include primary, secondary, ghost, outline, destructive, and default.
  • size: Controls the button’s size. Options include sm, md, lg, and xl.
  • disabled: Disables the button.
  • onClick: Callback function triggered when the button is clicked.

Example:

<Button variant="primary" size="lg">
            Click Me
          </Button>

Input

The Input component provides a standard input field for user input.

Options:

  • type: Controls the input type. Options include text, email, password, and number.
  • placeholder: Sets the placeholder text for the input.
  • value: Sets the initial value of the input.
  • onChange: Callback function triggered when the input value changes.

Example:

<Input type="text" placeholder="Enter your name" onChange={(event) => console.log(event.target.value)} />

Modal

The Modal component provides a dialog box for displaying information or prompting user actions.

Options:

  • isOpen: Controls whether the modal is open or closed.
  • title: Sets the title of the modal.
  • onClose: Callback function triggered when the modal is closed.
  • children: Content to be displayed inside the modal.

Example:

<Modal isOpen={true} title="Modal Title" onClose={() => setIsOpen(false)}>
            <p>This is the modal content.</p>
          </Modal>

Contributing

Contributions to this library are welcome. Please refer to the contributing guidelines for more information.