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:19:26 +00:00
parent 717f3847b8
commit 1ff37fcc6f
1 changed files with 43 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

254
README.md
View File

@ -111,19 +111,9 @@ function AppHeader() {
--- ---
# استفاده از core # Core
بخش core شامل این موارد است: required dependencies:
* API config
* `createApi`
* `BiProvider`
* Keycloak
* Permission
* React Query provider
* Chakra provider
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
@ -131,7 +121,7 @@ yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion @tanstack
--- ---
## استفاده از BiProvider ## BiProvider
```jsx ```jsx
import { BiProvider } from "uikit/core"; import { BiProvider } from "uikit/core";
@ -149,37 +139,27 @@ export default function App() {
} }
``` ```
`BiProvider` به صورت داخلی این کارها را انجام می‌دهد: ---
* تنظیم base url برای API ## BiProvider props
* راه‌اندازی Keycloak در صورت فعال بودن
* گرفتن permissionها در صورت فعال بودن | Prop |
* اضافه کردن `ChakraProvider` | -------------------- |
* اضافه کردن `QueryClientProvider` | `apiBaseUrl` |
* اضافه کردن فونت و theme داخلی | `keycloakClientId` |
* فعال کردن اختیاری `UpdateChecker` | `permissionClientId` |
| `loading` |
| `updateChecker` |
| `updateCheckerProps` |
| `keycloakUrl` |
| `keycloakRealm` |
| `permissionUrl` |
| `keycloakEnabled` |
| `permissionEnabled` |
--- ---
## props مربوط به BiProvider ## BiProvider defaults
| Prop | توضیح |
| -------------------- | ------------------------------------------------------ |
| `apiBaseUrl` | آدرس اصلی API |
| `keycloakClientId` | client id مربوط به Keycloak |
| `permissionClientId` | client id مربوط به Permission |
| `loading` | کامپوننت loading هنگام init شدن Keycloak یا Permission |
| `updateChecker` | فعال یا غیرفعال کردن بررسی آپدیت |
| `updateCheckerProps` | props مربوط به UpdateChecker |
| `keycloakUrl` | آدرس Keycloak |
| `keycloakRealm` | realm مربوط به Keycloak |
| `permissionUrl` | آدرس API مربوط به permission |
| `keycloakEnabled` | فعال یا غیرفعال کردن Keycloak به صورت دستی |
| `permissionEnabled` | فعال یا غیرفعال کردن Permission به صورت دستی |
---
## مقدارهای پیش‌فرض BiProvider
```js ```js
keycloakUrl = "https://auth.ibagher.ir"; keycloakUrl = "https://auth.ibagher.ir";
@ -188,42 +168,9 @@ permissionUrl = "https://api.d.aiengines.ir/user_api/v1/permissions/list";
updateChecker = false; updateChecker = false;
``` ```
نکته: اگر `keycloakClientId` داده شود، Keycloak فعال می‌شود. اگر `permissionClientId` داده شود، Permission فعال می‌شود.
برای کنترل دستی:
```jsx
<BiProvider
apiBaseUrl="https://api.example.com"
keycloakEnabled={false}
permissionEnabled={false}
>
<YourApp />
</BiProvider>
```
--- ---
# UpdateChecker To enable `updateChecker` you should have a script `write-version.js` in the root of the project and in the `package.json` of the target project, run before the build:
به صورت پیش‌فرض `updateChecker` خاموش است.
برای فعال کردن:
```jsx
<BiProvider
apiBaseUrl="https://api.example.com"
keycloakClientId="front-client"
permissionClientId="permission-client"
updateChecker
>
<YourApp />
</BiProvider>
```
اگر `updateChecker` را فعال می‌کنی، پروژه باید فایل version تولید کند. معمولاً باید یک اسکریپت مثل `write-version.js` در root پروژه داشته باشی و در `package.json` پروژه target، قبل از build اجرا شود.
نمونه:
```json ```json
{ {
@ -236,23 +183,18 @@ updateChecker = false;
--- ---
# استفاده از API پایه # API
```js ```js
import { api, fetcher, configureApi, getApi } from "uikit/core"; import { api, fetcher, configureApi, getApi } from "uikit/core";
``` ```
اگر از `BiProvider` استفاده می‌کنی، معمولاً نیازی نیست دستی `configureApi` را صدا بزنی، چون `BiProvider` این کار را انجام می‌دهد.
نمونه استفاده مستقیم:
```js ```js
import { api } from "uikit/core"; import { api } from "uikit/core";
const response = await api.get("/users"); const response = await api.get("/users");
``` ```
or
یا:
```js ```js
import { fetcher } from "uikit/core"; import { fetcher } from "uikit/core";
@ -262,35 +204,39 @@ const data = await fetcher("/users");
--- ---
# استفاده از createApi # createApi
`createApi` برای ساختن یک API ساده بر پایه React Query استفاده می‌شود.
```js ```js
import { createApi } from "uikit/core"; import { createApi } from "uikit/core";
export const profileApi = createApi({ export const sampleApi = createApi({
key: "profile", key: "sample",
url: "/content/rokn/profiles", url: "/...",
actions: { actions: {
create: {
method: "post",
url: "/...",
},
update: { update: {
method: "patch", method: "patch",
url: (id) => `/content/rokn/profiles/${id}`, url: (id) => `/.../${id}`,
}, },
delete: { delete: {
method: "delete", method: "delete",
url: (id) => `/.../${id}`,
}, },
generate: { confirm: {
method: "post", method: "post",
url: "/content/rokn/generate/profile", url: "/...",
}, },
updateImages: { updateImage: {
method: "post", method: "post",
url: (id) => `/content/rokn/profile-update/${id}/images`, url: (id) => `/.../${id}/image`,
body: ({ formData }) => formData, body: ({ formData }) => formData,
}, },
}, },
@ -299,120 +245,17 @@ export const profileApi = createApi({
--- ---
## گرفتن لیست # Keycloak
```jsx
const { data, isLoading, error } = profileApi.useGet({
page: 1,
size: 20,
is_confirmed: true,
});
```
این request ساخته می‌شود:
```txt
GET /content/rokn/profiles?page=1&size=20&is_confirmed=true
```
---
## اجرای action
```jsx
const updateProfile = profileApi.useAction("update");
await updateProfile.mutateAsync({
id: 10,
username: "new_username",
});
```
در این حالت:
```txt
PATCH /content/rokn/profiles/10
```
body:
```js
{
username: "new_username"
}
```
`id` به صورت پیش‌فرض از body حذف می‌شود، چون برای ساختن URL استفاده شده است.
---
## action با همان URL اصلی
اگر action همان URL اصلی را لازم دارد، نیازی نیست `url` را دوباره بنویسی.
```js
export const identityGenerateApi = createApi({
key: "identity-generate",
url: "/content/rokn/identity-generate/logs",
actions: {
delete: {
method: "delete",
},
},
});
```
یعنی:
```txt
DELETE /content/rokn/identity-generate/logs
```
---
## action با FormData
```js
const updateImages = profileApi.useAction("updateImages");
const formData = new FormData();
formData.append("image", file);
await updateImages.mutateAsync({
id: 10,
formData,
});
```
در تعریف action:
```js
updateImages: {
method: "post",
url: (id) => `/content/rokn/profile-update/${id}/images`,
body: ({ formData }) => formData,
}
```
`body` مشخص می‌کند چه چیزی واقعاً به عنوان body ارسال شود.
---
# استفاده از Keycloak
```js ```js
import { import {
getKeycloakToken, getKeycloakToken,
loginKeycloak, loginKeycloak,
logoutKeycloak, logoutKeycloak,
updateKeycloakToken,
} from "uikit/core"; } from "uikit/core";
const token = getKeycloakToken(); const token = getKeycloakToken();
await updateKeycloakToken(30);
loginKeycloak(); loginKeycloak();
logoutKeycloak({ logoutKeycloak({
@ -422,7 +265,7 @@ logoutKeycloak({
--- ---
# استفاده از Permission # Permission
```jsx ```jsx
import { Can, usePermission } from "uikit/core"; import { Can, usePermission } from "uikit/core";
@ -442,27 +285,16 @@ function Page() {
} }
``` ```
نکته: prop کامپوننت `Can` برابر `perm` است.
```jsx
<Can perm="users:list">
<UsersList />
</Can>
```
--- ---
# استفاده از DataTable # DataTable
`DataTable` داخل مسیر `uikit/table` قرار دارد. required dependencies:
dependencyهای لازم:
```bash ```bash
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion @tanstack/react-table react-icons yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion @tanstack/react-table react-icons
``` ```
using:
استفاده:
```jsx ```jsx
import { DataTable } from "uikit/table"; import { DataTable } from "uikit/table";