@realizejs/ui

@realizejs/ui is a React component library built with shadcn/ui and Tailwind CSS. 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:

/** @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:

npm install @realizejs/ui

Basic Usage

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

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: "[email protected]",
  },
  {
    id: "5825ede4b9934a785828a28a",
    age: 29,
    name: "Schroeder Zamora",
    company: "KOFFEE",
    email: "[email protected]",
  },
  {
    id: "5825ede422d772548e00e557",
    age: 29,
    name: "Lynne Ortiz",
    company: "CANDECOR",
    email: "[email protected]",
  },
  {
    id: "5825ede4bbbd274e299b1156",
    age: 34,
    name: "Mayra Stout",
    company: "UNISURE",
    email: "[email protected]",
  },
  {
    id: "5825ede4de3762d3e6394d3b",
    age: 26,
    name: "Lupe Wade",
    company: "GLOBOIL",
    email: "[email protected]",
  },
  {
    id: "5825ede4b7914c13cc0d71eb",
    age: 36,
    name: "Eula Peck",
    company: "ZANILLA",
    email: "[email protected]",
  },
  {
    id: "5825ede48b6eadd8dc9fd5be",
    age: 32,
    name: "Martha Merritt",
    company: "EXERTA",
    email: "[email protected]",
  },
  {
    id: "5825ede4ce2bc3ba29462890",
    age: 29,
    name: "Andrews Mann",
    company: "TALENDULA",
    email: "[email protected]",
  }
];

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

export default App;

Contributing

Contributions are welcome! Please read our contributing guide to get started.

License

This project is licensed under the MIT License. See the LICENSE file for details.

For more information and documentation, visit our official website or check out our GitHub repository.