npm package: @realizejs/ui
Description: @realizejs/ui is a React component library built with [shadcn/ui](https://shadcn.dev/) and [Tailwind CSS](https://tailwindcss.com/). The goal of this library is to simplify the construction of generic interfaces such as listing screens with tables, filter
Latest version: 2.0.9

# @realizejs/ui

@realizejs/ui is a React component library built with [shadcn/ui](https://shadcn.dev/) and [Tailwind CSS](https://tailwindcss.com/). The goal of this library is to simplify the construction of generic interfaces such as listing screens with tables, filters, pagination, and generic forms with built-in and automatic validation.

## Features

- **Generic Listing Screens**: Easily create listing screens with tables, filters, and pagination.
- **Generic Forms**: Pre-built form components with built-in validation.
- **Tailwind CSS**: Styled using Tailwind CSS for easy customization.
- **shadcn/ui**: Built using the shadcn/ui component framework.

## Installation

Before installing the @realizejs/ui library, you need to configure Tailwind CSS in your project.

### Tailwind CSS Configuration

Ensure your `tailwind.config.js` file is set up as follows:

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@realizejs/ui/dist/**/*.{js,jsx}",
  ],
  prefix: "",
  theme: {},
  plugins: [require("tailwindcss-animate")],
};
```

### Install the Library

After configuring Tailwind CSS, you can install the @realizejs/ui library via npm:

```bash
npm install @realizejs/ui
```

## Basic Usage

Import the components you need from @realizejs/ui and use them in your React application:

```javascript
import { DataTable, Form } from "@realizejs/ui";
import { DataTableConfig } from "@realizejs/ui/dist/components/ui/DataTable/models";

const config: DataTableConfig = {
  selectable: true,

  actionMenuConfig: {
    label: "Ações",
    actionsSubtitle: "Subtitulo",
    separator: true,
  },
  filters: [
    {
      column: "age",
      label: "Idade",
      placeholder: "Digite a idade",
      type: "number",
    },
    {
      column: "name",
      label: "Nome",
      placeholder: "Digite um nome",
      type: "text",
    },
    {
      column: "email",
      label: "Email",
      placeholder: "Digite um email",
      type: "text",
    },
    {
      column: "company",
      label: "Empresa",
      placeholder: "Digite o nome de uma empresa",
      type: "selector",
    },
  ],
  columns: [
    {
      accessorKey: "id",
      headerLabel: "Id",
      enableHiding: false,
      enableSorting: false,
    },
    {
      accessorKey: "age",
      headerLabel: "Age",
      enableHiding: true,
      enableSorting: true,
      filter: "equals",
    },
    {
      accessorKey: "name",
      headerLabel: "Name",
      enableHiding: true,
      enableSorting: true,
    },
    {
      accessorKey: "company",
      headerLabel: "Company",
      enableHiding: true,
      enableSorting: true,
    },
    {
      accessorKey: "email",
      headerLabel: "Email",
      enableHiding: true,
      enableSorting: true,
    },
  ],
  actions: [
    {
      label: "Get Data",
      onClick: (a) => console.log(a), // Any logic
      separator: true,
    },
  ],
};

const data = [
  {
    id: "5825ede44d83241068b37aab",
    age: 40,
    name: "Bridges Long",
    company: "DOGSPA",
    email: "bridgeslong@dogspa.com",
  },
  {
    id: "5825ede4b9934a785828a28a",
    age: 29,
    name: "Schroeder Zamora",
    company: "KOFFEE",
    email: "schroederzamora@koffee.com",
  },
  {
    id: "5825ede422d772548e00e557",
    age: 29,
    name: "Lynne Ortiz",
    company: "CANDECOR",
    email: "lynneortiz@candecor.com",
  },
  {
    id: "5825ede4bbbd274e299b1156",
    age: 34,
    name: "Mayra Stout",
    company: "UNISURE",
    email: "mayrastout@unisure.com",
  },
  {
    id: "5825ede4de3762d3e6394d3b",
    age: 26,
    name: "Lupe Wade",
    company: "GLOBOIL",
    email: "lupewade@globoil.com",
  },
  {
    id: "5825ede4b7914c13cc0d71eb",
    age: 36,
    name: "Eula Peck",
    company: "ZANILLA",
    email: "eulapeck@zanilla.com",
  },
  {
    id: "5825ede48b6eadd8dc9fd5be",
    age: 32,
    name: "Martha Merritt",
    company: "EXERTA",
    email: "marthamerritt@exerta.com",
  },
  {
    id: "5825ede4ce2bc3ba29462890",
    age: 29,
    name: "Andrews Mann",
    company: "TALENDULA",
    email: "andrewsmann@talendula.com",
  }
];

function App() {
  return (
    <div className="App">
      <DataTable config={config} data={data} />
    </div>
  );
}

export default App;
```

## Contributing

Contributions are welcome! Please read our [contributing guide](CONTRIBUTING.md) to get started.

## License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

---

For more information and documentation, visit our [official website](https://realizejs.com/ui) or check out our [GitHub repository](https://github.com/realizejs/ui).