avihang-react-design-system

List Of Tailwind Material Design React Components

import "avihang-react-design-system/src/theme/output.css"; into main.tsx file

• Header

• Avatar

<Avatar size='large' style='info' radius='round' variant='bold' />

• Logo

<Logo src={aviLogo} className='w-16 animate-scale' />

• Button

<Button
   label='مشاهده کاربر'
   onClick={() => console.log("clicked here")}
   rightIcon={<IconName iconName='UserSearch' />}
/>

• Oval Button

<OvalButton
   radius='curve'
   size='large'
   onClick={() => console.log("clicked here!")}
   icon={<IconName iconName={"UserSearch"} />}
   style='danger'
/>

• Badge

<Badge
   label={"3"}
   size='small'
   btnType='subtle'
   style='primary'
   radius='curve'
/>

• Tab view

import { TabView } from "avihang-react-design-system";
import { Outlet, Route, Routes } from "react-router";

const TabViewPreview = () => {
   const array = [
      { title: "قرارداد", key: "2", route: "Contracts" },
      { title: "همکار", key: "1", route: "Cparty" },
      { title: "شریک کاری", key: "5", route: "Partner" },
   ];

   return (
      <>
         <TabView
            selectedItemClassName='!border-success-700 !text-success-700'
            data={array}
         />
         <Outlet />
      </>
   );
};

const TabsContent = () => {
   return (
      <>
         <Routes>
            <Route path='/' element={<TabViewPreview />}>
               <Route path='/Cparty' element={<p>همکار</p>} />
               <Route path='/Contracts' element={<>قرارداد</>} />
               <Route path='/Partner' element={<>شریک کاری</>} />
            </Route>
         </Routes>
      </>
   );
};

export default TabsContent;

• Segment Control

• Divider

<div className='bg-background-300 rounded-md gap-2 p-3 mb-7 flex'>
   <Divider className='w-full' />
</div>

• Stepper

<Stepper
   steps={clearingSteps}
   activeStep={activeStep}
   lastStepButtonTitle='ثبت'
   nextButtonTitle='ادامه'
   prevButtonTitle='بازگشت'
   stepperMode='horizontal'
   onClickNext={() => setActiveStep(activeStep + 1)}
   onClickPrev={() => setActiveStep(activeStep - 1)}
   onLastStepButton={() => console.log("last step button")}
/>

• Breadcrumb

<Breadcrumbs mainTitle={"تاریخچه فعالیت"} links={[{ text: "اسم فعالیت" }]} />

• Toggle Button

<Toggle
   label='نمایش پیش فرض'
   enabledValue={isPin}
   onClick={() => setIsPin(!isPin)}
/>

• Checkbox

<>
   <div className='flex gap-4' style={{ direction: "rtl" }}>
      <input
         id={"id"}
         type='checkbox'
         className='cursor-pointer'
         defaultChecked
         checked={checked}
         onChange={(e) => setChecked(e.target.checked)}
      />
      <Typography variant='Caption'>متن پیش فرض</Typography>
   </div>
</>

• Radio Button

<InputRadioItem
   key={index}
   data={item}
   onCardModeChange={(value) => setCardMode(value)}
   checked={cardMode}
/>

• Pagination

• Toast Notification

showToast({
   message: "متن فرضی در این قسمت نوشته می‌شود.",
   type: "error",
   position: "bottomLeft",
   description: "متن فرضی در این قسمت نوشته می‌شود.",
});

• Tooltip

<TooltipComponent title='متن پیشفرض' state='top'>
   <div className='w-fit'>
      <Typography variant='Button01'> Hover Here</Typography>
   </div>
</TooltipComponent>

• Input Box

<>
   <input
      disabled={false}
      onChange={(e) => setValue(e.target.value)}
      value={value}
      maxLength={2}
      min={1}
      max={99}
      type='number'
      className='w-full'
      placeholder='کد پستی'
   />
   <br />
   <div className='w-full flex py-2 mt-8'>
      <InputIcon
         // debounceTime={30}
         leftIcon={
            <IconName iconName='SearchNormal1' className='text-warning-700' />
         }
         onEnter={(e) =>
            showToast({
               message: e,
               type: "info",
               position: "bottomLeft",
            })
         }
         placeholder={"جستجوی شماره ملی "}
         className='w-full'
         refInput={referralSearchInputRef}
         isDigit={true}
         maxLength={12}
      />
   </div>
   <br />
   <div className='relative'>
      <InputAnimatedPlaceHolder
         className='w-full'
         maxLength={5}
         //    isDigit
         onEnter={(e) =>
            showToast({
               message: e,
               type: "info",
               position: "bottomLeft",
            })
         }
         onChangeText={(text) => setValue(text)}
         value={value}
         placeholder='توضیحات'
      />
   </div>
</>

• Pop Up

<PopoverMenu dataRenders={array} position={"right"} />

• Modal

<Modal
   isOpen={show}
   title={"عنوان"}
   onOk={() => setShow(false)}
   onClose={() => setShow(false)}
   okText='عنوان دکمه'
   cancelText='عنوان دکمه'
>
   جمله فرضی جهت شفافیت اینپوت باکس است.
</Modal>

• Side Bar

• Uploading File

<Attachment
   showPreview={(event) => showPreview(event)}
   onFileRemover={(item) => onFileRemover(item)}
   attachmentItem={attachment ?? []}
   children={
      <div className='flex items-center gap-1 cursor-pointer border border-primary rounded-md p-2'>
         <IconName iconName='MdOutlineAttachment' />
         <Typography variant='Label02' className='text-primary'>
            بارگزاری تصویر چک
         </Typography>
      </div>
   }
/>

• Form Generator

{
   formData.map((item) => (
      <AdditionalProperty properties={item} key={item.id} />
   ));
}

• User Switcher

• Accordion Menu

• Progress Bar

<>
   <Loading />
   <LinearProgress />
</>

• Table

• Skeleton

<div className='flex items-center justify-center gap-1'>
   <Skeleton className='w-10 h-3' fill='gray'></Skeleton>
   <Skeleton
      className='w-6 h-6 mx-3 border-2 border-solid border-gray-600'
      rounded='full'
   ></Skeleton>
</div>

• Map

• Button Group

<ButtonGroup
   buttons={prsTypGroup}
   onClickItem={(button) => handleFilterItem(button)}
   variant='outline'
   // onClick={() => console.log("reception")}
   color='primary'
   fontSize='text-xs'
>
   {prsTypeFilterName?.title ?? "نمایش همه"}
</ButtonGroup>

• Geographical Level

• Typography

• select

<Select
   inputRef={inputRef}
   value={keyword}
   onChangeText={(text) => setSearchVal(text)}
   onClickOnRightIcon={(text) => setSearchVal(text)}
   groups={dataTemp ?? []}
   onEnter={(val) => console.log(val)}
   onClickTextField={onClickTextField}
   onFocus={onClickTextField}
   rightIcon={<IconName iconName='search' />}
   placeholder={{
      input: "placeholder",
   }}
   pin={[
      { id: 1, fullName: "covid19" },
      { id: 2, fullName: "covid19" },
   ]}
   isLoading={false}
   // icons={icons}
   /*             renders={(item: any, index, group, value?: string) => {
               return (
                  <li
                     key={index}
                     onClick={() => {
                        onRow(item, group);
                        setKeyword("");
                     }}
                     className='p-2 hover:bg-red-200 transition ease-in-out delay-300 cursor-pointer text-right flex gap-1'
                  >
                     <HilightText
                        group={group}
                        keyword={value ?? ""}
                        item={{
                           id: item.nationalNumber ?? "",
                           name: item.fullName ?? "",
                        }}
                     />
                  </li>
               );
            }} */
   inputProps={{ className: "w-full" }}
   rendersGroup={(item: any, index) => {
      return (
         <>
            <div key={index} className='sticky z-20 -top-1 p-2 text-right'>
               <Typography type='h4' className='whitespace-nowrap'>
                  {item.key}
               </Typography>
            </div>
         </>
      );
   }}
/>

• Tree

• Date picker

<PersianDatePicker
   pickerMode='onlyDay'
   placeholder='روز'
   onChange={getDay}
   onDateClear={() => onClearBirthDateValues({ dateField: "day" })}
/>

• Time picker

<PersianTimePicker />

step by step guid

1. change version in package.json
2. npm run build
3. npm publish
4. yarn build storybook
5. yarn chromatic