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:- https://github.com/SamagraX-Stencil/stencil-web/issues/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:- https://github.com/SamagraX-Stencil/stencil-web/issues/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:- https://github.com/SamagraX-Stencil/stencil-web/issues/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:- https://github.com/SamagraX-Stencil/stencil-web/issues/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:- https://github.com/SamagraX-Stencil/stencil-web/issues/153

Blinking Spinner

Props

• styles? <object>

Ticket:- https://github.com/SamagraX-Stencil/stencil-web/issues/154

FullPageLoader

Props

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

Ticket:- https://github.com/SamagraX-Stencil/stencil-web/issues/155

JsonToTable

Props

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

Ticket:- https://github.com/SamagraX-Stencil/stencil-web/issues/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:- https://github.com/SamagraX-Stencil/stencil-web/issues/157

OTP Input

Props

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

Ticket:- https://github.com/SamagraX-Stencil/stencil-web/issues/158

Transliteration Input

Props

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

Ticket:- https://github.com/SamagraX-Stencil/stencil-web/issues/159

Share Button

Props

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

Ticket:- https://github.com/SamagraX-Stencil/stencil-web/issues/160

Voice Record

Props

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

Ticket:- https://github.com/SamagraX-Stencil/stencil-web/issues/161

Modal

Props

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

Ticket:- https://github.com/SamagraX-Stencil/stencil-web/issues/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:- https://github.com/SamagraX-Stencil/stencil-web/issues/163

[ankitmlesmagico]

• [x] Login Input :- https://github.com/SamagraX-Stencil/stencil-web/issues/149

• [x] Login :- https://github.com/SamagraX-Stencil/stencil-web/issues/150

• [x] Language Picker :- https://github.com/SamagraX-Stencil/stencil-web/issues/151

• [x] Sidebar :- https://github.com/SamagraX-Stencil/stencil-web/issues/152

• [x] Navbar :- https://github.com/SamagraX-Stencil/stencil-web/issues/153

• [x] Blinking Spinner :- https://github.com/SamagraX-Stencil/stencil-web/issues/154

• [x] FullPageLoader :- https://github.com/SamagraX-Stencil/stencil-web/issues/155

• [ ] JsonToTable :- https://github.com/SamagraX-Stencil/stencil-web/issues/156

• [ ] List :- https://github.com/SamagraX-Stencil/stencil-web/issues/157

• [x] OTP Input :- https://github.com/SamagraX-Stencil/stencil-web/issues/158

• [x] Transliteration Input :- https://github.com/SamagraX-Stencil/stencil-web/issues/159

• [x] Share Button :- https://github.com/SamagraX-Stencil/stencil-web/issues/160

• [x] Voice Record :- https://github.com/SamagraX-Stencil/stencil-web/issues/161

• [ ] Modal :- https://github.com/SamagraX-Stencil/stencil-web/issues/162

• [x] Feedback :- https://github.com/SamagraX-Stencil/stencil-web/issues/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