npm package: @licuido-ui/ui_profile
Description: 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.
Latest version: 0.0.2

# 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 <akila@crayond.co>

## Link

[Story Book Link Profile](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_profile
```

## Import component

```jsx
import { Profile } from '@licuido-ui/ui_profile';
```

## Usage

```jsx
<Profile   titleOptions= {
      title: 'My Profile',
      sxProps: {
        fontSize: '16px',
        fontWeight: '600',
        color: '#11111199',
      },
    }/>
```

## Image

![alt text](./profilePage.png)

## Sample Code

```jsx
<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: 'hari@gmail.co',
        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`                                                                                                                   |