MKT UI

Giới thiệu

MKT UI là một thư viện UI components dành cho React, được xây dựng với Tailwind CSS và React Data Grid. Thư viện cung cấp các components dễ sử dụng và tùy biến cho việc hiển thị dữ liệu dạng bảng và các form elements.

Cài đặt

npm install mkt-ui

hoặc

yarn add mkt-ui

Peer Dependencies

Thư viện này yêu cầu các peer dependencies sau:

npm install react react-dom @tailwindcss/postcss7-compat tailwindcss

hoặc

yarn add react react-dom @tailwindcss/postcss7-compat tailwindcss

Các tính năng chính

• Bảng dữ liệu tùy chỉnh với nhiều tính năng
• Hỗ trợ phân trang phía client
• Tùy chọn hiển thị/ẩn cột
• Các form components dễ sử dụng
• Tích hợp sẵn với Tailwind CSS
• Hỗ trợ TypeScript đầy đủ
• Import trực tiếp các components và types

Sử dụng

Import components

import { InputField, SelectField, ReactTableGridCustom } from 'mkt-ui';

function App() {
  return (
    <div>
      <InputField name="username" label="Username" />
      <SelectField name="role" label="Role" options={roleOptions} />
      <ReactTableGridCustom columns={columns} data={data} />
    </div>
  );
}

Import types

import { InputFieldProps, IReactTableGridCustom } from 'mkt-ui';

// Sử dụng types
const customInput: React.FC<InputFieldProps> = (props) => {
  return <InputField {...props} className="custom-input" />;
};

Các components

Form Components

• FieldsetWrapper: Wrapper cho các form fields với title
• ErrorHelperText: Hiển thị thông báo lỗi
• WrapperLabelForm: Wrapper cho label và form field
• InputField: Input text field
• InputFieldEdit: Input field với chức năng edit
• InputPasswordField: Input password field
• SelectField: Select dropdown field
• RadioField: Radio button field
• CheckBoxField: Checkbox field
• TextAreaField: Textarea field
• SwitchField: Switch toggle field

Table Components

ReactTableGridCustom

Component bảng dữ liệu cơ bản với các tính năng tùy chỉnh.

import { ReactTableGridCustom } from 'mkt-ui';

const App = () => {
  const columns = [
    { key: 'id', name: 'ID' },
    { key: 'name', name: 'Name' },
    { key: 'age', name: 'Age' },
  ];

  const rows = [
    { id: 1, name: 'John', age: 20 },
    { id: 2, name: 'Jane', age: 21 },
    { id: 3, name: 'Joe', age: 22 },
  ];

  return <ReactTableGridCustom columns={columns} rows={rows} />;
};

ReactTableGridCustomPaginationClient

Component bảng dữ liệu với phân trang phía client.

import { ReactTableGridCustomPaginationClient } from 'mkt-ui';

const App = () => {
	const columns = [
		{ key: 'id', name: 'ID' },
		{ key: 'name', name: 'Name' },
		{ key: 'age', name: 'Age' },
	];

	const rows = [
		{ id: 1, name: 'John', age: 20 },
		{ id: 2, name: 'Jane', age: 21 },
		{ id: 3, name: 'Joe', age: 22 },
	];

	return <ReactTableGridCustomPaginationClient columns={columns} rows={rows} />;
};

useShowHideColumn

Hook để quản lý việc hiển thị/ẩn cột trong bảng dữ liệu.

import { useShowHideColumn, ReactTableGridCustom } from 'mkt-ui';

const App = () => {
	const columns = [
		{ key: 'id', name: 'ID' },
		{ key: 'name', name: 'Name' },
		{ key: 'age', name: 'Age' },
	];

	const rows = [
		{ id: 1, name: 'John', age: 20 },
		{ id: 2, name: 'Jane', age: 21 },
		{ id: 3, name: 'Joe', age: 22 },
	];

	const { newColumns, newShowhideColumns } = useShowHideColumn(columns);

	return (
		<div>
			<div>{newShowhideColumns}</div>
			<ReactTableGridCustom columns={newColumns} rows={rows} />
		</div>
	);
};

Yêu cầu hệ thống

• React 16.8.0 trở lên
• React DOM 16.8.0 trở lên

Đóng góp

Mọi đóng góp đều được hoan nghênh. Vui lòng tạo issue hoặc pull request trên GitHub repository.

Giấy phép

ISC - Xem file LICENSE để biết thêm chi tiết.

Giới thiệu

MKT-UI là thư viện component React được xây dựng với TypeScript, Tailwind CSS và React Data Grid. Thư viện cung cấp các component UI tái sử dụng cao, đặc biệt là component Table mạnh mẽ và linh hoạt.

Cài đặt

npm install mkt-ui
# hoặc
yarn add mkt-ui

Sử dụng

Import styles

Thư viện này sử dụng Tailwind CSS. Bạn cần cấu hình Tailwind CSS trong dự án của mình. Thư viện đã bao gồm các styles cần thiết, nhưng bạn cần đảm bảo rằng @tailwindcss/postcss7-compat và tailwindcss đã được cài đặt như peer dependencies.

Sử dụng component Table

Basic Table

import { ReactTableGridCustom } from 'mkt-ui';

const columns = [
  { key: 'id', name: 'ID' },
  { key: 'name', name: 'Tên' },
  { key: 'email', name: 'Email' },
];

const data = [
  { id: 1, name: 'Nguyễn Văn A', email: '[email protected]' },
  { id: 2, name: 'Trần Thị B', email: '[email protected]' },
];

const MyTable = () => {
  return (
    <ReactTableGridCustom
      columns={columns}
      data={data}
      total={data.length}
      page={1}
      pageSize={10}
    />
  );
};

Table với phân trang ở client

import { ReactTableGridCustomPaginationClient } from 'mkt-ui';

const columns = [
  { key: 'id', name: 'ID' },
  { key: 'name', name: 'Tên' },
  { key: 'email', name: 'Email' },
];

const data = [
  // ... nhiều dữ liệu
];

const MyTableWithPagination = () => {
  return (
    <ReactTableGridCustomPaginationClient
      columns={columns}
      data={data}
      initPage={1}
      initPageSize={10}
    />
  );
};

Sử dụng hook useShowHideColumn để ẩn/hiện cột

import { ReactTableGridCustom, useShowHideColumn } from 'mkt-ui';

const columns = [
  { key: 'id', name: 'ID' },
  { key: 'name', name: 'Tên' },
  { key: 'email', name: 'Email' },
];

const MyTableWithColumnToggle = () => {
  const { columnsTable, changeHiddenColumn } = useShowHideColumn({
    nameLocal: 'my-table',
    columns,
  });

  return (
    <div>
      <div>
        <button onClick={() => changeHiddenColumn('id')}>Toggle ID Column</button>
        <button onClick={() => changeHiddenColumn('name')}>Toggle Name Column</button>
        <button onClick={() => changeHiddenColumn('email')}>Toggle Email Column</button>
      </div>
      <ReactTableGridCustom
        columns={columnsTable}
        data={data}
        total={data.length}
        page={1}
        pageSize={10}
      />
    </div>
  );
};

Sử dụng các components khác

import { Checkbox, LoadingIcon } from 'mkt-ui';

const MyComponent = () => {
  return (
    <div>
      <Checkbox label="Chọn tôi" />
      <LoadingIcon isSpin size={24} />
    </div>
  );
};

Tùy chỉnh theme

MKT-UI sử dụng Tailwind CSS và có thể được tùy chỉnh thông qua file cấu hình Tailwind của dự án của bạn.

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/mkt-ui/**/*.{js,jsx,ts,tsx}'
  ],
  theme: {
    extend: {
      // Tùy chỉnh theme của bạn ở đây
    },
  },
  plugins: [],
}

API Reference

Table Components

ReactTableGridCustom

Component table cơ bản với nhiều tùy chọn.

| Prop | Type | Default | Description | |------|------|---------|-------------| | columns | TColumnsTable<T, SR> | required | Cấu hình các cột của bảng | | data | T[] | [] | Dữ liệu hiển thị trong bảng | | page | number | undefined | Trang hiện tại | | pageSize | number | undefined | Số lượng mục trên mỗi trang | | total | number | undefined | Tổng số mục dữ liệu | | hiddenPagination | boolean | undefined | Ẩn phân trang | | hiddenSTT | boolean | undefined | Ẩn cột số thứ tự | | rowKeyGetter | string | function | 'uid' | Khóa hoặc hàm để lấy khóa duy nhất cho mỗi hàng | | onChange | function | undefined | Callback khi trang thay đổi | | setConfigPagination | function | undefined | Hàm để cập nhật cấu hình phân trang |

ReactTableGridCustomPaginationClient

Component table với phân trang phía client.

| Prop | Type | Default | Description | |------|------|---------|-------------| | columns | TColumnsTable<T, SR> | required | Cấu hình các cột của bảng | | data | T[] | [] | Toàn bộ dữ liệu (sẽ được phân trang) | | initPage | number | 1 | Trang khởi tạo | | initPageSize | number | 200 | Kích thước trang khởi tạo | | refTable | MutableRefObject | undefined | Ref để truy cập các phương thức phân trang |

Hooks

useShowHideColumn

Hook để quản lý việc hiển thị/ẩn các cột trong bảng.

| Param | Type | Default | Description | |------|------|---------|-------------| | nameLocal | string | 'table' | Khóa để lưu trạng thái trong localStorage | | columns | TColumnsTable<T, SR> | required | Cấu hình các cột của bảng | | ignoreColumns | string[] | undefined | Các cột không thể ẩn |

useDataPagingClient

Hook để xử lý phân trang phía client.

| Param | Type | Default | Description | |------|------|---------|-------------| | data | T[] | [] | Toàn bộ dữ liệu | | page | number | undefined | Trang hiện tại | | pageSize | number | undefined | Kích thước trang |

import React from 'react';
import { Button, Card, TailwindLodashExample, _ } from 'mkt-ui';

const App = () => {
  // Sử dụng Lodash
  const items = _.uniq(['apple', 'banana', 'apple', 'orange']);
  
  return (
    <div>
      <h1>My App</h1>
      
      {/* Sử dụng components từ Flowbite */}
      <Button>Click me</Button>
      <Card>
        <p>This is a card</p>
      </Card>
      
      {/* Sử dụng component tùy chỉnh với Tailwind CSS */}
      <TailwindLodashExample items={items} title="Fruits" />
    </div>
  );
};

export default App;

Tối ưu hóa kích thước bundle

Thư viện này sử dụng các kỹ thuật sau để tối ưu hóa kích thước bundle:

1. Tree-shaking: Chỉ các components được sử dụng mới được đưa vào bundle cuối cùng.
2. Peer dependencies: React và React DOM được coi là peer dependencies, không được đóng gói cùng thư viện.
3. CSS optimization: Tailwind CSS được tối ưu hóa để chỉ bao gồm các classes được sử dụng.

Phát triển

Cài đặt dependencies

npm install

Build thư viện

npm run rollup

License

ISC