Molecules Redesign

[prtkjakhar]

Login Input

Props

• type <mobile | password | email | aadhaar>
• value <string | number>
• onChange <function>
• placeholder <string>

Keep in mind:

• Should support transliterated error messages.
• Variable names used in transliteration should be documented.
• Should manage localization out of the box
• Define structure for user to add new lang. files and implement useTranslation hook to use those files

Ticket:- #149

Login

Props

• Login Input props
• title? <string>
• onLogin <function>
• jwksUrl? <string>
• nextRoute? <string>
• styles? <object>

Keep in mind:

• Define error and success states for login API, should have sessionId in response
• Validate jwt token one time on login if jwks passed
• Move page to nextRoute if passed

Ticket:- #150

Language Picker

Props

• languages <array>
• activeLanguage <string>
• handleLanguageClick <function>
• styles? <object>

Keep in mind:

• Languages prop must be array of objects and should have code and values as object keys

Ticket:- #151

Sidebar

Props

• Language Picker props
• showProfileIcon? <boolean>
• showLangSwitcher? <boolean>
• profileText? <string>
• links <array>
• handleLogOutButton <function>
• onToggle <function>
• isOpen <boolean>
• styles? <object>

Keep in mind:

• links prop is an array of objects containing label, icon and route as keys

Ticket:- #152

Navbar

Props

• brandName? <string>
• showHamburgerMenu? <boolean>
• leftHomeIcon? <array>
• centerLogoIcons? <array>
• rightLogoIcons? <array>
• onToggle <function>
• isOpen <boolean>
• styles? <object>

Keep in mind:

• for leftHomeIcon, centerLogoIcons and rightLogoIcons props an array of objects containing id and src as keys need to be used

Ticket:- #153

Blinking Spinner

Props

• styles? <object>

Ticket:- #154

FullPageLoader

Props

• loading? <boolean>
• label <string>
• styles? <object>

Ticket:- #155

JsonToTable

Props

• json <any>
• id <string>
• styles? <object>

Ticket:- #156

List

Props

• items <array>
• noItem? <object>
• styles? <object>

Keep in mind:

• noItem prop should pass lable and icon as keys ob object
• items prop is an array of objects having label, id, icons, avatar as keys

Ticket:- #157

OTP Input

Props

• separator <React.ReactNode>
• length <number>
• value <string>
• onChange <function>
• styles? <object>

Ticket:- #158

Transliteration Input

Props

• placeholder? <string>
• multiline? <boolean>
• rows? <number>
• cols? <number>
• value <string>
• setValue <function>
• onEnter <function>
• styles? <object>

Ticket:- #159

Share Button

Props

• allowDownloadChat? <boolean>
• allowShareChat? <boolean>
• handleDownloadButton <function>
• handleShareButton <function>
• styles? <object>

Ticket:- #160

Voice Record

Props

• showVoiceRecorder? <boolean>
• delayBetweenDialogs <number>
• handleVoiceRecorder <function>
• styles? <object>

Ticket:- #161

Modal

Props

• showCrossIcon? <boolean>
• showModal <boolean>
• children <React.ReactNode>
• height? <string>
• width? <string>
• heading? <string>
• handleActionButton <function>
• handleCancelButton <function>
• styles? <object>

Ticket:- #162

Feedback

Props

• showReviewBox? <boolean>
• showRatingBox? <boolean>
• star <number>
• review <string>
• onChangeReview <function>
• onChangeRating <function>
• handleFeedback <function>
• styles? <object>

Keep in mind:

• if showReviewBox prop is true then review and onChangeReview props are mandatory to pass
• if showRatingBox prop is true then star and onChangeRating props are mandatory to pass

Ticket:- #163

[ankitmlesmagico]

• Login Input :- Login Input redesign #149

• Login :- Login redesign #150

• Language Picker :- Language Picker Redesign #151

• Sidebar :- Sidebar Redesign #152

• Navbar :- Navbar Redesign #153

• Blinking Spinner :- Blinking Spinner Redesign #154

• FullPageLoader :- FullPage Loader Redesign #155

• JsonToTable :- Json To Table Redesign #156

• List :- List Redesign #157

• OTP Input :- OTP Input Redesign #158

• Transliteration Input :- Transliteration Input Redesign #159

• Share Button :- Share Button Redesign #160

• Voice Record :- Voice Record Redesign #161

• Modal :- Modal Redesign #162

• Feedback :- Feedback Redesign #163

[ankitmlesmagico]

//priority
navbar, sidebar, tranlsation input , voice recorder, modal

[ankitmlesmagico]

• need to remove all bots and keep kisai bot
• need to remove all the unused components from kisai
• remove all the api calls and env
• remove pages package and update all molecules by directly using molecules
• update issues with all the current props
• update documentation

@riya-2206 @prtkjakhar

[ankitmlesmagico]

In above molecules
we merged the Login Input, Login and OTP Input and created a sinple molecule

Props:-

• title: string (optional) - The title of the component
• titleStyle: React.CSSProperties (optional) - Custom styles for the title
• type: InputType ('mobile' | 'password' | 'email' | 'aadhaar' | 'otp' | 'username')
• mainContainerStyle: React.CSSProperties (optional) - Custom styles for the main container
• buttonProps: ButtonProps - Properties for the submit button
• inputProps: InputProps (optional) - Properties for the input field
• otpProps: OtpProps (optional) - Properties for OTP functionality
• passwordProp: PasswordProps (optional) - Properties for password input and forgot password functionality

[ankitmlesmagico]

share button
list
otp input
voice reorder
this are pending