Component and Component list
- Murali M
Components are the building blocks of any React app and a typical React app will have many of these. Simply put, a component is a JavaScript class or function that optionally accepts inputs i.e. properties(props), and returns a React element that describes how a section of the UI (User Interface) should appear.
Below the screen, we can see a number of components presented in the single page.
Components are divided into 3 category
Atoms - Small components are called atoms.
2. Molecules - Collection of atoms called molecules.
3. Containers - Whichever component connect with redux we will be called containers.
Note: we will support the user to create own atoms, molecules, and containers, but we should make sure it's not there in Egov framework, if you feel its common more than 2 modules please raise a pull request to the framework.
Below the screenshot, you can see the local components belong to the trade license.
List of Atoms
Phone number
{
"uiFramework":"custom-molecules",
"componentPath":"TextfieldWithIcon",
"props":{
"label":"Phone",
"type":"mobilenumber",
"margin":"normal",
"fullWidth":true,
"autoFocus":true,
"required":true,
"iconObj":{
"position":"end",
"iconName":"phone"
}
},
"required":true,
"jsonPath":"body.mihy.phonenumber",
"pattern":"^([0-9]){10}$"
}2. AppBar
{
uiFramework: "custom-atoms",
componentPath: "AppBar",
props: {
position: "static"
},
children: {
mihyToolbar: {
uiFramework: "custom-atoms",
componentPath: "Toolbar",
props: {
variant: "regular",
style: {
width: "maxContent"
},
},
children: {
mihyButton: {
uiFrameWork: "custom-atoms",
componentPath: "Button",
props: {
},
children: {
mihyIcon: {
uiFramework: "custom-atoms",
componentPath: "Icon",
props: {
iconName: "menu",
autoFocus: true,
}
}
}
},
mihyTypography: {
uiFramework: "custom-atoms",
componentPath: "Typegraphy",
children: {
mihyLoginButtonText: getLabel({
label: "Home"
})
},
props: {
variant: "h6",
color: "inherit",
style: {
fontSize: "large",
flexGrow: 1
}
}
},
mihyTypography1: {
uiFramework: "custom-atoms",
componentPath: "Typegraphy",
children: {
mihyButton: {
uiFrameWork: "custom-atoms",
componentPath: "Button",
props: {
},
children: {
mihyIcon: {
uiFramework: "custom-atoms",
componentPath: "Icon",
props: {
iconName: "email",
autoFocus: true,
}
}
}
}
},
props: {
variant: "h6",
color: "inherit"
}
}
}
}
}
}
3. Button
{
componentPath: "Button",
props: {
Buttoncolor: "primary"“
secondary”“ inherit”“
default”,
fullWidth: true,
href: “https: //www.googole.com”,
size: ”small”“ medium”“ large”,
Variant: “contained”“ text”“ outlined”,
disabled: “true”
},
children: {
mihyLoginButtonText: getLabel({
label: "Let's go"
})
},
onClickDefination: {
action: "submit",
method: "get",
endPoint: "afbc.com",
purpose: "authLogin",
redirectionUrl: "/"
}
}4. Card
5. CardContent
6. TextField
7. Typography
8. HTML Elements
9. Form
10. Iframe
11. Icon button
12. Container
13. MenuButton
14. Item
14. Break
15. UploadFile
16. Uploaded Document
17. ApplicationNo:
18. MenuButton:
19. Asterix:
List of Molecules
TextFieldWithIcon:
2. Landing Page Cards
3. SingleApplication
4. DocumentList:
5. UploadMultipleFiles:
6. Stepper
7. Search Results:
List of Containers
Auto Suggest Container:
2. Dialog Container
3. DocumentListContainer
4. DownloadFileContainer:
5. Payment Redirect Page
6. View Breakup Container:
7. ApplicationNoContainer:
Note: Many of the components(atoms, molecules, and containers) are local in the module, we need to plan for moving into the framework.