158 lines
3.1 KiB
Markdown
158 lines
3.1 KiB
Markdown
# کتابخانه uikit
|
|
|
|
یک کتابخانهی React برای استفادهی مشترک بین پروژهها.
|
|
|
|
این پکیج شامل این موارد است:
|
|
|
|
* base api config
|
|
* keycloak config
|
|
* permissions config
|
|
* BiProvider
|
|
|
|
---
|
|
|
|
## نصب
|
|
|
|
```bash
|
|
yarn add git+https://git.d.aiengines.ir/bi/uikit.git
|
|
```
|
|
|
|
اگر این پکیج روی پروژه نصب شد ولی خطای dependency گرفتی، اینها را هم نصب کن:
|
|
|
|
```bash
|
|
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion keycloak-js axios @tanstack/react-query react-icons
|
|
```
|
|
|
|
---
|
|
|
|
## آپدیت
|
|
|
|
```bash
|
|
yarn upgrade uikit
|
|
```
|
|
|
|
---
|
|
|
|
## استفاده اصلی
|
|
|
|
```jsx
|
|
import { BiProvider } from "uikit";
|
|
|
|
export default function App() {
|
|
return (
|
|
<BiProvider
|
|
apiBaseUrl="https://api.example.com"
|
|
keycloakClientId="client_id"
|
|
permissionClientId="client_id"
|
|
>
|
|
<YourApp />
|
|
</BiProvider>
|
|
);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## پراپس های `BiProvider`
|
|
|
|
| Prop | توضیح |
|
|
| -------------------- | ----------------------------------------------- |
|
|
| `apiBaseUrl` | آدرس اصلی API |
|
|
| `keycloakClientId` | client id مربوط به Keycloak |
|
|
| `permissionClientId` | client id مربوط به Permission |
|
|
| `keycloakUrl` | آدرس Keycloak |
|
|
| `keycloakRealm` | realm مربوط به Keycloak |
|
|
| `permissionUrl` | آدرس API مربوط به permission |
|
|
| `loading` | کامپوننت loading |
|
|
| `updateChecker` | فعال یا غیرفعال کردن بررسی آپدیت |
|
|
| `updateCheckerProps` | props مربوط به UpdateChecker |
|
|
|
|
---
|
|
|
|
## مقدارهای پیشفرض
|
|
|
|
```js
|
|
keycloakUrl = "https://auth.ibagher.ir"
|
|
keycloakRealm = "bi"
|
|
permissionUrl = "https://api.d.aiengines.ir/user_api/v1/permissions/list"
|
|
updateChecker = true
|
|
```
|
|
|
|
---
|
|
|
|
## غیرفعال کردن `UpdateChecker`
|
|
|
|
اگر پروژه فایل نیاز به چک کردن مداوم نسخه ندارد، بهتر است `updateChecker` را خاموش کنی:
|
|
|
|
```jsx
|
|
<BiProvider
|
|
apiBaseUrl="https://api.example.com"
|
|
keycloakClientId="front-client"
|
|
permissionClientId="permission-client"
|
|
updateChecker={false}
|
|
>
|
|
<YourApp />
|
|
</BiProvider>
|
|
```
|
|
|
|
و اگر `true` باشد نیاز هست تا فایل `write-version.js` در روت پروژه گذاشته شود و اسکریپت `prebuild` نیز به `package.json` اضافه شود.
|
|
|
|
---
|
|
|
|
## استفاده از `Header`
|
|
|
|
```jsx
|
|
<Header>
|
|
<Header.BrandSection>
|
|
<Header.Logo src="/logo.png" />
|
|
<Header.Brand>
|
|
<Header.Title>Title</Header.Title>
|
|
<Header.Description>Description</Header.Description>
|
|
</Header.Brand>
|
|
</Header.BrandSection>
|
|
|
|
<Header.Bi />
|
|
</Header>
|
|
```
|
|
|
|
---
|
|
|
|
## موارد دیگر `js`
|
|
|
|
```js
|
|
toFaDigits();
|
|
toEnDigits();
|
|
toFaNumber();
|
|
```
|
|
|
|
---
|
|
|
|
## موارد دیگر `jsx`
|
|
|
|
```jsx
|
|
<Pagination />
|
|
<LightPagination />
|
|
<SimplePagination />
|
|
```
|
|
|
|
---
|
|
|
|
## موارد دیگر `keycloak`
|
|
|
|
```js
|
|
const token = getKeycloakToken();
|
|
logoutKeycloak();
|
|
loginKeycloak();
|
|
```
|
|
|
|
---
|
|
|
|
## موارد دیگر `permission`
|
|
|
|
```js
|
|
<Can permission="users.list">
|
|
<L />
|
|
</Can>
|
|
```
|
|
---
|