@licuido-ui/ui_profile
v0.0.2
Published
The Profile component can be used to create an interactive user profile editing interface. It displays profile information, supports image upload, and can be customized using the provided properties.
Readme
Profile
The Profile component can be used to create an interactive user profile editing interface. It displays profile information, supports image upload, and can be customized using the provided properties.
Author
- @author Akila Kalaiyarasan [email protected]
Link
PlayGround
Installation
npm i @licuido-ui/ui_profileImport component
import { Profile } from '@licuido-ui/ui_profile';Usage
<Profile titleOptions= {
title: 'My Profile',
sxProps: {
fontSize: '16px',
fontWeight: '600',
color: '#11111199',
},
}/>Image
Sample Code
<Profile
titleOptions= {
title: 'My Profile',
sxProps: {
fontSize: '16px',
fontWeight: '600',
color: '#11111199',
},
}
uploadOptions= {
imgScr:
'https://static.vecteezy.com/system/resources/thumbnails/019/900/322/small/happy-young-cute-illustration-face-profile-png.png',
buttonEnabled: true,
deleteProfile: () => console.log('delete'),
uploadProfile: (data: any) => console.log('img', data),
variant: 'rounded',
}
afterProfileComponent={<></>}
overallSxProps= {
backgroundColor: '#DAE8FC',
padding: '20px 0',
}
cardSxProps= {}
gridContainerProps= { columnSpacing: 3, spacing: 0 },
renderForm= {
formButtonContainerStyle: {},
submitButton: {
visible: true,
title: 'Save',
onClick: (data: object) => console.log(data),
sx: {},
},
cancelButton: {
visible: true,
title: 'Cancel',
onClick: (data: object) => console.log(data),
sx: {},
variant: 'outlined',
},
customButton: {
component: <></>,
},
yupSchemaValidation: undefined,
defaultValues: {
address1: 'My Address 1',
address2: 'My Address 2',
designation: 'Developer',
email: '[email protected]',
dob: '12/06/2022',
firstName: 'Hari',
gender: 'Male',
lastName: 'Haran',
mobileNumber: { mobile: '845678906789', mobile_code: '+91' },
},
formList: [
{
type: 'heading',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 12,
md: 12,
lg: 12,
lx: 12,
},
inputProps: {
id: 'basic-detail',
value: 'Basic Details Hw',
sx: {
fontSize: '16px',
color: '#111111',
fontWeight: '500',
margin: '0 0 8px 0',
},
},
},
{
type: 'input',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 6,
md: 6,
lg: 6,
lx: 6,
},
inputProps: {
id: 'First-Name',
type: 'text',
label: 'First Name',
name: 'firstName',
labelVariant: 'standard',
},
},
{
type: 'input',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 6,
md: 6,
lg: 6,
lx: 6,
},
inputProps: {
id: 'last-name',
type: 'text',
label: 'Last Name',
name: 'lastName',
labelVariant: 'standard',
rules: {
required: 'Please enter Last name',
minLength: {
value: 5,
message: 'min length is 4',
},
maxLength: {
value: 15,
message: 'min length is 14',
},
},
},
},
{
type: 'date',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 6,
md: 6,
lg: 6,
lx: 6,
},
inputProps: {
id: 'birth-date',
type: 'text',
label: 'DOB',
name: 'dob',
labelVariant: 'standard',
rules: {
required: 'Please enter DOB',
},
inputFormat: 'dd-MM-yyyy',
},
},
{
type: 'chipSelect',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 6,
md: 6,
lg: 6,
lx: 6,
},
inputProps: {
label: 'Gender',
name: 'gender',
labelVariant: 'standard',
rules: {
required: 'Please enter Gender',
},
options: [
{ label: 'Male', value: 'Male' },
{ label: 'Female', value: 'Female' },
{ label: 'Others', value: 'Others' },
],
},
},
{
type: 'dropDown',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 6,
md: 6,
lg: 6,
lx: 6,
},
inputProps: {
id: 'designation',
type: 'text',
label: 'Designation',
name: 'designation',
labelVariant: 'standard',
rules: {
required: 'Please enter Designation',
},
selectOption: [
{ label: 'Developer', value: 'Developer' },
{ label: 'Designer', value: 'Designer' },
{ label: 'designation', value: 'designation' },
],
},
},
{
type: 'heading',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 12,
md: 12,
lg: 12,
lx: 12,
},
inputProps: {
value: 'Contact Information',
sx: {
fontSize: '16px',
color: '#111111',
fontWeight: '500',
margin: '18px 0 8px 0',
},
},
},
{
type: 'mobileNumberInput',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 6,
md: 6,
lg: 6,
lx: 6,
},
inputProps: {
label: 'Mobile Number',
name: 'mobileNumber',
labelVariant: 'standard',
required: true,
},
},
{
type: 'input',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 6,
md: 6,
lg: 6,
lx: 6,
},
inputProps: {
type: 'text',
label: 'Email ID',
name: 'email',
labelVariant: 'standard',
rules: {
required: 'Please enter Email',
minLength: {
value: 5,
message: 'min length is 4',
},
maxLength: {
value: 15,
message: 'min length is 14',
},
},
errorMessage: 'Please enter Email Id',
},
},
{
type: 'input',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 6,
md: 6,
lg: 6,
lx: 6,
},
inputProps: {
type: 'text',
label: 'Address Line 1',
name: 'address1',
labelVariant: 'standard',
rules: {
required: 'Please enter Address 1',
minLength: {
value: 5,
message: 'min length is 4',
},
maxLength: {
value: 15,
message: 'min length is 14',
},
},
errorMessage: 'Please enter Address Line 1',
},
},
{
type: 'input',
containerStyle: {},
gridStyle: {},
breakPoint: {
xs: 12,
sm: 6,
md: 6,
lg: 6,
lx: 6,
},
inputProps: {
type: 'text',
label: 'Address Line 2',
name: 'address2',
labelVariant: 'standard',
rules: {
required: 'Please enter Address 2',
minLength: {
value: 5,
message: 'min length is 4',
},
maxLength: {
value: 15,
message: 'min length is 14',
},
},
errorMessage: 'Please enter Address Line 2',
},
},
],
}
/>Props
| Property | Description | Default Value |
| ----------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| className | Additional CSS class for the component. | '' |
| sx | Custom styling using MUI's SxProps. | {} |
| titleOptions | Configuration for the title section, including title, styling, and icon. | { title: '', sxProps: {}, icon: <></> } |
| overallSxProps | Custom styling for the overall component. | {} |
| renderForm | Configuration for the RenderForm component. | { formList: [], gridStyle: {}, gridContainerProps: {}, defaultValues: undefined, yupSchemaValidation: undefined } |
| uploadOptions | Configuration for profile image upload, including source, buttons, and methods. | { imgScr: '', buttonEnabled: true, deleteProfile: () => undefined, uploadProfile: () => undefined, variant: 'square' } |
| cardSxProps | Custom styling for the profile card container. | {} |
| gridContainerProps | Additional props for the Grid container. | {} |
| afterProfileComponent | Additional React component to be displayed after the profile section. | null |