bi/uikit
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update README.md

Browse Source
This commit is contained in:
Mohamad Zade 2026-06-16 07:07:50 +00:00
parent 0a7510dd44
commit 717f3847b8
1 changed files with 22 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
README.md
View File

@ -1,67 +1,49 @@
# uikit # uikit
کتابخانه‌ی مشترک React برای استفاده بین پروژه‌های BI. Shared library for BI next.js projects.
این پکیج به چند entry جدا تقسیم شده تا پروژه‌ها فقط همان بخشی را import کنند که لازم دارند و مجبور نباشند برای یک helper ساده، dependencyهای سنگین مثل Chakra، Keycloak یا React Query نصب کنند.
--- ---
## نصب ## Install
```bash ```bash
yarn add git+https://git.d.aiengines.ir/bi/uikit.git yarn add git+https://git.d.aiengines.ir/bi/uikit.git
``` ```
یا اگر branch/tag خاصی لازم داری:
```bash
yarn add git+https://git.d.aiengines.ir/bi/uikit.git#main
```
--- ---
## آپدیت ## Update
```bash ```bash
yarn upgrade uikit yarn upgrade uikit
``` ```
اگر از git dependency استفاده می‌کنی و نسخه جدید نگرفتی، lockfile را هم بررسی کن:
```bash
yarn remove uikit
yarn add git+https://git.d.aiengines.ir/bi/uikit.git
```
--- ---
# ساختار importها # imports
| مسیر | کاربرد | dependency اضافی | | مسیر | کاربرد | dependency اضافی |
| ------------------ | ------------------------------------- | --------------------------------------- | | ------------------ | ------------------------------------- | --------------------------------------- |
| `uikit` | خروجی سبک، فعلاً فقط utils | ندارد | | `uikit` | utility functions | - |
| `uikit/utils` | helperهای ساده مثل تبدیل عدد | ندارد | | `uikit/utils` | utility functions | - |
| `uikit/pagination` | کامپوننت‌های pagination | Chakra + React + react-icons | | `uikit/pagination` | pagination | Chakra + React + react-icons |
| `uikit/layout` | کامپوننت‌های layout مثل Header | Chakra + React | | `uikit/layout` | Header | Chakra + React |
| `uikit/core` | API، BiProvider، Keycloak، Permission | Chakra + React Query + Axios + Keycloak | | `uikit/core` | API، BiProvider، Keycloak، Permission | Chakra + React Query + Axios + Keycloak |
| `uikit/table` | DataTable | Chakra + TanStack Table + Pagination | | `uikit/table` | DataTable | Chakra + TanStack Table + Pagination |
--- ---
# استفاده از utils # utils
برای helperهای ساده نیازی به نصب هیچ dependency اضافه‌ای نیست.
```js ```js
import { toFaDigits, toEnDigits, toFaNumber } from "uikit/utils"; import { toFaDigits, toEnDigits, toFaNumber } from "uikit/utils";
toFaDigits(123456); // ۱۲۳۴۵۶ toFaDigits(123456);
toEnDigits("۱۲۳۴۵۶"); // 123456 toEnDigits("۱۲۳۴۵۶");
toFaNumber(123456); // عدد فارسی‌شده toFaNumber(123456);
``` ```
or
همچنین چون root package فقط utils را export می‌کند، این هم قابل استفاده است:
```js ```js
import { toFaDigits } from "uikit"; import { toFaDigits } from "uikit";
@ -69,15 +51,15 @@ import { toFaDigits } from "uikit";
--- ---
# استفاده از pagination # pagination
اگر از pagination استفاده می‌کنی، این dependencyها باید در پروژه نصب باشند: required dependencies
```bash ```bash
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion react-icons yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion react-icons
``` ```
استفاده: using
```jsx ```jsx
import { Pagination, LightPagination, SimplePagination } from "uikit/pagination"; import { Pagination, LightPagination, SimplePagination } from "uikit/pagination";
@ -96,17 +78,15 @@ function Page() {
--- ---
# استفاده از Header # Header
`Header` داخل مسیر `uikit/layout` قرار دارد. required dependencies:
dependencyهای لازم:
```bash ```bash
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
``` ```
استفاده: using:
```jsx ```jsx
import { Header } from "uikit/layout"; import { Header } from "uikit/layout";
@ -129,18 +109,6 @@ function AppHeader() {
} }
``` ```
اجزای موجود:
```jsx
<Header />
<Header.BrandSection />
<Header.Logo />
<Header.Brand />
<Header.Title />
<Header.Description />
<Header.Bi />
```
--- ---
# استفاده از core # استفاده از core
@ -155,7 +123,7 @@ function AppHeader() {
* React Query provider * React Query provider
* Chakra provider * Chakra provider
برای استفاده از core این dependencyها باید در پروژه نصب باشند: Required dependencies:
```bash ```bash
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion @tanstack/react-query axios keycloak-js yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion @tanstack/react-query axios keycloak-js
@ -533,99 +501,3 @@ function UsersTable({ data, columns }) {
``` ```
--- ---
# dependencyهای پیشنهادی بر اساس نیاز
## فقط utils
نیازی به نصب dependency اضافه نیست.
```bash
yarn add git+https://git.d.aiengines.ir/bi/uikit.git
```
---
## pagination یا layout
```bash
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion react-icons
```
برای `layout` معمولاً `react-icons` لازم نیست، ولی اگر پروژه از pagination هم استفاده می‌کند، نصبش کن.
---
## core
```bash
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion @tanstack/react-query axios keycloak-js
```
---
## table
```bash
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion @tanstack/react-table react-icons
```
---
# نکات مهم توسعه
بعد از تغییر فایل‌ها، build بگیر:
```bash
yarn build
```
فایل‌های خروجی مورد انتظار:
```txt
dist/index.js
dist/utils.js
dist/pagination.js
dist/layout.js
dist/core.js
dist/table.js
```
اگر entry جدید اضافه شد، باید هم در `vite.config.js` و هم در `package.json > exports` ثبت شود.
---
# قانون کلی
هر چیزی که dependency سنگین ندارد:
```txt
uikit/utils
```
هر چیزی که UI سبک است و Chakra می‌خواهد:
```txt
uikit/pagination
uikit/layout
```
هر چیزی که مربوط به API، auth، permission و provider است:
```txt
uikit/core
```
هر چیزی که مربوط به table است:
```txt
uikit/table
```
Root package یعنی:
```txt
uikit
```
باید سبک بماند و فقط چیزهایی مثل utils را export کند.