# کتابخانه 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>
```
---