main-components-ui v1.0.385

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

MIT

Tech Stack

Client: React, Ant, Design, Typescript, Scss, Rollup