main-components-ui
v1.0.385
Published
![Logo](https://dev-kpi-cameral.soliq.uz/debt/static/media/logo.d6a328b8f0ff503240ea4b8874b6ecdc.svg)
Downloads
123
Readme
Main Shared Ui components of Front-end
With the help of this package users can use some accepted (By "some" persons ;) ) component in their own projects
Install
- Npm
npm i main-components-ui
- Yarn
yarn add main-components-ui
Components
Header
Usage
import { Header } from "main-components-ui";
<Header
projectTitle={`"Солиқ қарзини ундиришни ташкил қилиш тузилмалари KPI" ахборот тизими`}
logo={{
onClick: () => {
navigate("/");
},
img: logo
}}
language={{
options: langOptions,
onChange(val) {
i18n.changeLanguage(val);
}
}}
user={{
name: user?.name.toLowerCase(),
organizationName: user?.organizationName,
role: ""
}}
search={{
types: [
{ label: t("СТИР"), value: 1 },
{ label: t("ЖШШИР"), value: 2 },
{ label: t("Инспектор"), value: 3 }
],
defaultType: 1,
onSearch(val, type) {
console.log(val, type);
}
}}
/>
Navbar
Usage
import { Navbar } from "main-components-ui";
const links = [
{
id: 1,
onClick: () => navigate(`/?${stringify({ saldoDate: queryParams?.saldoDate })}`),
active: pathname === `/`,
name: t("Асосий ойна")
},
{
id: 2,
active: pathname.includes("/info"),
onClick: () => navigate(`//info/m0?${stringify({ saldoDate: queryParams?.saldoDate })}`),
name: t("Маълумотлар")
},
{
id: 3,
active: pathname.includes("/efficiency"),
onClick: () => navigate(`/efficiency/general?${stringify({ saldoDate: queryParams?.saldoDate })}`),
name: t("Самарадорлик")
},
{
id: 4,
active: pathname?.includes("diagramma"),
onClick: () => navigate(`/diagramma?showChart=true&isAll=true?${stringify({ saldoDate: queryParams?.saldoDate })}`),
name: t("Динамика")
}
];
<Navbar links={links} />
Footer
Usage
import { Footer } from "main-components-ui";
<Footer />
User List
Usage
import {InspectorList} from "main-components-ui";
<InspectorList
colHeight={0}
onChange={(values) => {
console.log(values);
}}
response={{
isLoading: false,
totalCount: 0,
users: [
{
firstRowDetail: "Toshkent, Qibray",
fullName: "Bekhzod Aliakbarov",
rating: 100,
id: 1,
img: "",
onClick() {
console.log(1);
},
positionName: "Programmer"
}
],
defaultPage: 0,
defaultPageSize: 10
}}
topButtons={{
list: []
}}
title={"Title"}
tableScoreTitle={"Some secondary title"}
/>
Used By
This project is used by the following companies:
- Солиқ қўмитаси
License
Tech Stack
Client: React, Ant, Design, Typescript, Scss, Rollup