npm package: @licuido-ui/ui_viewer
Description: The Viewer component is a versatile and customizable UI element designed to showcase user profiles, information, or forms with a modern and consistent look. It's built using the Material-UI library and offers flexible configuration options to suit a varie
Latest version: 0.0.2

# Viewer

The Viewer component is a versatile and customizable UI element designed to showcase user profiles, information, or forms with a modern and consistent look. It's built using the Material-UI library and offers flexible configuration options to suit a variety of use cases.

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

### Author

- @author Akila K <akila@crayond.co>

## Link

[Story Book Link EmptyPage](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)

## Import component

```jsx
import { Viewer } from '@licuido-ui/ui_viewer';
```

## Usage

```jsx
<Viewer   rootStyle= { backgroundColor: '' }
    headerOptions= {
      title: 'My Profile',
      fontSize: '20px',
      fontWeight: 'bold',
      color: '#111111',
      titleBoxStyle: { backgroundColor: '' },
    }
    viewBody= {
      viewBodyStyle: {},
      gridStyle: { justifyContent: 'center' },
      profileimage: {
        breakpoints: { xs: 12, sm: 3.5, md: 3, lg: 2 },
        profileImgStyle: {},
        imgSrc: '',
        variant: 'rounded',
        profileimgContainer: {},
        avatarconStyle: {},
        profileImgEditStyle: {},
        profileImgEditIcon: <EditIcon color='#fff' />,
        onClick: () => {
          console.log('Profile Edit');
        },
      },
      form: {
        breakpoints: { xs: 12, sm: 6, md: 6, lg: 4.5, xl: 4.5 },
        title: 'Michael Bloomberg',
        subTitle: 'Male',
        description: 'Senior Graphic Designer',
        titleStyle: {},
        descriptionStyle: {},
        subTitleStyle: {},
        formContainer: {},
        formList: [
          {
            icon: <DocsIcon color='#665CD7' />,
            label: 'Email',
            value: 'Michaelbloomberg@email.com',
            breakPoint: {
              xs: 12,
              sm: 12,
              md: 12,
              lg: 12,
              lx: 12,
            },
            iconStyle: { backgroundColor: '#FAFAFA' },
            labelStyle: {},
            valueStyle: {},
            listWraper: { py: 1 },
          },
          {
            icon: <DocsIcon />,
            label: 'Date Of Birth',
            value: '01/06/1990',
            breakPoint: {
              xs: 12,
              sm: 12,
              md: 12,
              lg: 12,
              lx: 12,
            },
            iconStyle: { backgroundColor: '#FAFAFA' },
            labelStyle: {},
            valueStyle: {},
            listWraper: { py: 1 },
          },
          {
            icon: <DocsIcon />,
            label: 'Mobile Number',
            value: '+1 9999999999',
            breakPoint: {
              xs: 12,
              sm: 12,
              md: 12,
              lg: 12,
              lx: 12,
            },
            iconStyle: { backgroundColor: '#FAFAFA' },
            labelStyle: {},
            valueStyle: {},
            listWraper: { py: 1 },
          },
          {
            icon: <DocsIcon />,
            label: 'Desgination',
            value: 'Developer',
            breakPoint: {
              xs: 12,
              sm: 12,
              md: 12,
              lg: 12,
              lx: 12,
            },
            iconStyle: { backgroundColor: '#FAFAFA' },
            labelStyle: {},
            valueStyle: {},
            listWraper: { py: 1 },
          },
        ],
      },
      btnList: [
        {
          buttonText: 'Edit',
          onClick: () => {
            console.log('Edit');
          },
          breakPoint: {
            xs: 12,
            sm: 12,
            md: 12,
            lg: 12,
            lx: 12,
          },
          btnStyle: { backgroundColor: '#665CD7' },
          btnListConStyle: { mt: 3, display: 'flex', justifyContent: 'center' },
        },
      ],
    } />
```

## Image

#### Variant1

1.  ![alt text](./viewer1.png)

#### Variant2

2.  ![alt text](./viewer2.png)

## Props

| Prop Name       | Type           | Description                                               | Default Value |
| --------------- | -------------- | --------------------------------------------------------- | ------------- |
| `id`            | string         | A unique identifier for the component.                    | 'viewer'      |
| `className`     | string         | Overrides or extends the applied styles.                  | ''            |
| `sx`            | SxProps<Theme> | System overrides and additional CSS styles.               | {}            |
| `rootStyle`     | object         | Wrapping style for the viewer.                            | {}            |
| `viewBody`      | object         | Configuration for the content displayed below the header. | {}            |
| `headerOptions` | object         | Header properties for the profile viewer.                 | {}            |

### `viewBody` Configuration:

| Prop Name       | Type   | Description                                                      | Default Value |
| --------------- | ------ | ---------------------------------------------------------------- | ------------- |
| `viewBodyStyle` | object | Style for the content area.                                      | {}            |
| `gridStyle`     | object | Style for the grid splitting the profile image and content area. | {}            |
| `profileimage`  | object | Configuration for the profile image section.                     | {}            |
| `form`          | object | Configuration for the profile detail area.                       | {}            |
| `btnList`       | array  | List of buttons to be displayed.                                 | []            |

#### `profileimage` Configuration:

| Prop Name             | Type                                | Description                                       | Default Value   |
| --------------------- | ----------------------------------- | ------------------------------------------------- | --------------- |
| `breakpoints`         | object                              | Breakpoints for different screen sizes.           | {}              |
| `profileImgStyle`     | object                              | Styles for the profile image.                     | {}              |
| `imgSrc`              | string or any                       | Path or source of the profile image.              | ''              |
| `variant`             | 'circular' \| 'rounded' \| 'square' | Profile image variant.                            | 'rounded'       |
| `profileimgContainer` | object                              | Container styles for the profile image.           | {}              |
| `profileImgEditIcon`  | React.ReactNode or any              | Icon for editing or removing the profile image.   | <></>           |
| `customComp`          | React.ReactNode or any              | Custom component to be displayed.                 | <></>           |
| `avatarconStyle`      | object                              | Styles for the avatar container.                  | {}              |
| `profileImgEditStyle` | object                              | Styles for the background of the edit icon.       | {}              |
| `onClick`             | () => void                          | Callback fired when the profile image is clicked. | () => undefined |

#### `form` Configuration:

| Prop Name           | Type   | Description                                    | Default Value |
| ------------------- | ------ | ---------------------------------------------- | ------------- |
| `breakpoints`       | object | Breakpoints for different screen sizes.        | {}            |
| `title`             | string | Profile title.                                 | ''            |
| `subTitle`          | string | Profile subtitle.                              | ''            |
| `description`       | string | Description of the profile.                    | ''            |
| `titleStyle`        | object | Styles for the title.                          | {}            |
| `descriptionStyle`  | object | Styles for the description.                    | {}            |
| `subTitleStyle`     | object | Styles for the subtitle.                       | {}            |
| `formContainer`     | object | Overall container styles for the form content. | {}            |
| `formListContainer` | object | Container styles for the list of profile data. | {}            |
| `formList`          | array  | List of profile data like name, email, etc.    | []            |

##### `formList` Configuration:

| Prop Name    | Type                   | Description                             | Default Value |
| ------------ | ---------------------- | --------------------------------------- | ------------- |
| `breakPoint` | object                 | Breakpoints for different screen sizes. | {}            |
| `icon`       | React.ReactNode or any | Icon for the profile data.              | <></>         |
| `iconStyle`  | object                 | Styles for the icon.                    | {}            |
| `label`      | string                 | Label for the profile data.             | ''            |
| `labelStyle` | object                 | Styles for the label.                   | {}            |
| `value`      | string                 | Value for the profile data.             | ''            |
| `valueStyle` | object                 | Styles for the value.                   | {}            |
| `customComp` | React.ReactNode or any | Custom component to be displayed.       | <></>         |

#### `btnList` Configuration:

| Prop Name    | Type         | Description                                              | Default Value     |
| ------------ | ------------ | -------------------------------------------------------- | ----------------- |
| `breakPoint` | `object`     | Breakpoints for different screen sizes.                  | `{}`              |
| `buttonText` | `string`     | Text to display on the button.                           | `''`              |
| `btnStyle`   | `object`     | Styles for the button.                                   | `{}`              |
| `onClick`    | `() => void` | Callback function to execute when the button is clicked. | `() => undefined` |

### `headerOptions` Configuration:

| Prop Name       | Type   | Description                        | Default Value |
| --------------- | ------ | ---------------------------------- | ------------- |
| `title`         | string | Main title for the profile viewer. | ''            |
| `fontSize`      | string | Font size for the header.          | ''            |
| `fontWeight`    | string | Font weight for the header.        | ''            |
| `color`         | string | Color of the header.               | ''            |
| `titleBoxStyle` | object | Header container style.            | {}            |