Update README.md
This commit is contained in:
parent
0a7510dd44
commit
717f3847b8
172
README.md
172
README.md
@ -1,67 +1,49 @@
|
||||
|
||||
# uikit
|
||||
|
||||
کتابخانهی مشترک React برای استفاده بین پروژههای BI.
|
||||
Shared library for BI next.js projects.
|
||||
|
||||
این پکیج به چند entry جدا تقسیم شده تا پروژهها فقط همان بخشی را import کنند که لازم دارند و مجبور نباشند برای یک helper ساده، dependencyهای سنگین مثل Chakra، Keycloak یا React Query نصب کنند.
|
||||
|
||||
---
|
||||
|
||||
## نصب
|
||||
## Install
|
||||
|
||||
```bash
|
||||
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
|
||||
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/utils` | helperهای ساده مثل تبدیل عدد | ندارد |
|
||||
| `uikit/pagination` | کامپوننتهای pagination | Chakra + React + react-icons |
|
||||
| `uikit/layout` | کامپوننتهای layout مثل Header | Chakra + React |
|
||||
| `uikit/core` | API، BiProvider، Keycloak، Permission | Chakra + React Query + Axios + Keycloak |
|
||||
| `uikit` | utility functions | - |
|
||||
| `uikit/utils` | utility functions | - |
|
||||
| `uikit/pagination` | pagination | Chakra + React + react-icons |
|
||||
| `uikit/layout` | Header | Chakra + React |
|
||||
| `uikit/core` | API، BiProvider، Keycloak، Permission | Chakra + React Query + Axios + Keycloak |
|
||||
| `uikit/table` | DataTable | Chakra + TanStack Table + Pagination |
|
||||
|
||||
---
|
||||
|
||||
# استفاده از utils
|
||||
|
||||
برای helperهای ساده نیازی به نصب هیچ dependency اضافهای نیست.
|
||||
# utils
|
||||
|
||||
```js
|
||||
import { toFaDigits, toEnDigits, toFaNumber } from "uikit/utils";
|
||||
|
||||
toFaDigits(123456); // ۱۲۳۴۵۶
|
||||
toEnDigits("۱۲۳۴۵۶"); // 123456
|
||||
toFaNumber(123456); // عدد فارسیشده
|
||||
toFaDigits(123456);
|
||||
toEnDigits("۱۲۳۴۵۶");
|
||||
toFaNumber(123456);
|
||||
```
|
||||
|
||||
همچنین چون root package فقط utils را export میکند، این هم قابل استفاده است:
|
||||
or
|
||||
|
||||
```js
|
||||
import { toFaDigits } from "uikit";
|
||||
@ -69,15 +51,15 @@ import { toFaDigits } from "uikit";
|
||||
|
||||
---
|
||||
|
||||
# استفاده از pagination
|
||||
# pagination
|
||||
|
||||
اگر از pagination استفاده میکنی، این dependencyها باید در پروژه نصب باشند:
|
||||
required dependencies
|
||||
|
||||
```bash
|
||||
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion react-icons
|
||||
```
|
||||
|
||||
استفاده:
|
||||
using
|
||||
|
||||
```jsx
|
||||
import { Pagination, LightPagination, SimplePagination } from "uikit/pagination";
|
||||
@ -96,17 +78,15 @@ function Page() {
|
||||
|
||||
---
|
||||
|
||||
# استفاده از Header
|
||||
# Header
|
||||
|
||||
`Header` داخل مسیر `uikit/layout` قرار دارد.
|
||||
|
||||
dependencyهای لازم:
|
||||
required dependencies:
|
||||
|
||||
```bash
|
||||
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
|
||||
```
|
||||
|
||||
استفاده:
|
||||
using:
|
||||
|
||||
```jsx
|
||||
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
|
||||
@ -155,7 +123,7 @@ function AppHeader() {
|
||||
* React Query provider
|
||||
* Chakra provider
|
||||
|
||||
برای استفاده از core این dependencyها باید در پروژه نصب باشند:
|
||||
Required dependencies:
|
||||
|
||||
```bash
|
||||
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 کند.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user