npm package: @licuido-ui/ui_sign-up
Description: The SignUp component is a reusable React component that provides a signup form with various options. It allows users to sign up using either their email with a password, mobile number, or through social media accounts.
Latest version: 0.0.2

# SignUp

The SignUp component is a reusable React component that provides a signup form with various options. It allows users to sign up using either their email with a password, mobile number, or through social media accounts.

### Author

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

## Link

[Story Book Link SignUp](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_sign-up"
```

## Import component

```jsx
import { SignUp } from '@licuido-ui/ui_sign-up';
```

## Usage

```jsx
<SignUp variant='emailWithPasswordSignup' />
```

## Image

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

## Sample Code

```jsx
<SignUp  variant= 'emailWithPasswordSignup'
    mainArea= {
      breakpoints: { xs: 6, md: 6, sm: 6, lg: 6 },
    }
    imageSection={
      breakpoints:{ xs: 6, md: 6, sm: 6, lg: 6 },
      src=''
    }
    onSubmit={(data: any) =>{
      console.log(data);
    }}
    cardLogoAltTxt='logo'
    logoSrc= {<Logo />}
    logoHeight= '100%'
    logoWidth= '100%'
    rootStyle= {}
    cardTitle= 'Welcome!'
    cardDescription= 'One positive feedback per day or week can make us grow exponentially'
    cardTitleStyle={}
    buttonText='Sign Up'
    actionText= 'You have an account?'
    actionLink= 'Log in'
    cardStyle= { p: 3 }
    onLoginClick={ () =>{
      console.log('login');
    }}
    actionStyle= { fontSize: { xs: '12px', md: '14px', sm: '14px', lg: '14px' } }
    actionLinkStyle={ fontSize: { xs: '12px', md: '14px', sm: '14px', lg: '14px' } }
    btnStyle={}
    mobileLabelText='Mobile Number'
    mobileLabelStyle= {}
    mobileFieldstyle= {}
    dropDownStyle={}
    mobNumberFontSize=''
    countryCodeFontWeight= ''
    contryCodefontSize= ''
    socialMediaList={[
      {
        label: 'SignUp with google',
        icon: <Google />,
        onSocialmediaSignUp: () => {
          console.log('SignUp with google');
        },
        style: {
          textAlign: 'center',
          width: '100%',
          color: '#3B3B3B',
          fontSize: '14px',
        },
        // SocialMediaButtonStyle: { p: 1 },
      },
      {
        label: 'SignUp with outlook',
        icon: <Google />,
        onSocialmediaSignUp: () => {
          console.log('SignUp with google');
        },
        style: {
          textAlign: 'center',
          width: '100%',
          color: '#3B3B3B',
          fontSize: '14px',
        },
        // SocialMediaButtonStyle: { p: 1 },
      },
    ]}
    emailFieldstyle={}
    emailInputvariant= 'outlined'
    emailLabelStyle= {}
    emailLabel= 'Email'
    passwordLabelStyle= {}
    passwordLabel='Password'
    pwdInputVariant= 'outlined'
    invisibleIcon= {<VisibilityOffOutlinedIcon />}
    visbleIcon= {<VisibilityOutlinedIcon />}
    pwdFieldstyle= {}
    variantContainerSx= {}
    cardHeight= 'auto'
    cardWidth= '400px'
    cardBoxShadow= '0px 8px 20px #0000000A'
    cardBgColor=''
    nameStyle= {}
    fNameLabel= 'First Name'
    fNameLabelStyle= {}
    fnameFieldStyle= {}
    fNameInputVariant='outlined'
    lNameLabel= 'Last Name'
    lNameLabelStyle= {}
    lNameFieldStyle={}/>
```

## Props

| Prop Name               | Type                | Default Value                   | Description                                                                                                       |
| ----------------------- | ------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| `signUpId`              | string              | `'signUp'`                      | A unique identifier for the `SignUp` component.                                                                   |
| `className`             | string              | `''`                            | CSS class name to apply to the root element of the component.                                                     |
| `sx`                    | object              | `{}`                            | Custom styling using the MUI `SxProps` type.                                                                      |
| `variant`               | string              | `'emailWithPasswordSignup'`     | The type of signup variant. Can be `'emailWithPasswordSignup'`, `'mobileNumberSignup'`, or `'socialMediaSignup'`. |
| `onSubmit`              | function            | `(detail: object) => undefined` | A callback function called when the user submits the form. Receives an object with user details.                  |
| `mainArea`              | object              | See below                       | Configuration for the main area of the component.                                                                 |
| `imageSection`          | object              | See below                       | Configuration for an optional image section.                                                                      |
| `rootStyle`             | object              | `{}`                            | Custom styling for the root container.                                                                            |
| `logoStyle`             | object              | `{}`                            | Custom styling for the logo image.                                                                                |
| `cardLogoAltTxt`        | string              | `'logo'`                        | Alternative text for the logo image.                                                                              |
| `cardDescription`       | string              | `''`                            | Description text displayed below the card title.                                                                  |
| `logoWidth`             | string              | `''`                            | Width of the logo image.                                                                                          |
| `logoHeight`            | string              | `''`                            | Height of the logo image.                                                                                         |
| `logoSrc`               | string or ReactNode | `''`                            | Source URL or ReactNode for the logo image.                                                                       |
| `cardTitle`             | string or any       | `''`                            | Title text displayed at the top of the card.                                                                      |
| `variantContainerSx`    | object              | `{}`                            | Custom styling for the container of variant-specific content.                                                     |
| `cardTitleStyle`        | object              | `{}`                            | Custom styling for the card title.                                                                                |
| `buttonText`            | string              | `''`                            | Text displayed on the primary action button.                                                                      |
| `actionText`            | string              | `''`                            | Text displayed below the primary action button.                                                                   |
| `cardStyle`             | object              | `{}`                            | Custom styling for the card container.                                                                            |
| `cardBoxShadow`         | string              | `''`                            | Box shadow CSS property for the card.                                                                             |
| `cardBgColor`           | string              | `''`                            | Background color for the card.                                                                                    |
| `cardHeight`            | string              | `'auto'`                        | Height of the card container.                                                                                     |
| `cardWidth`             | string              | `'auto'`                        | Width of the card container.                                                                                      |
| `btnStyle`              | object              | `{}`                            | Custom styling for the primary action button.                                                                     |
| `actionLink`            | string              | `''`                            | URL or link to navigate to when clicking the action text.                                                         |
| `actionLinkStyle`       | object              | `{}`                            | Custom styling for the action link.                                                                               |
| `actionStyle`           | object              | `{}`                            | Custom styling for the action text.                                                                               |
| `onLoginClick`          | function            | `() => undefined`               | Callback function called when clicking the action text.                                                           |
| `socialMediaList`       | array of objects    | `[]`                            | List of social media buttons and their configurations.                                                            |
| `mobileLabelStyle`      | object              | `{}`                            | Custom styling for the mobile number label.                                                                       |
| `mobileLabelText`       | string              | `'Mobile Number'`               | Label text for the mobile number input field.                                                                     |
| `countryCodeFontWeight` | string or number    | `''`                            | Font weight for the country code dropdown.                                                                        |
| `contryCodefontSize`    | string or number    | `''`                            | Font size for the country code dropdown.                                                                          |
| `mobileFieldstyle`      | object              | `{}`                            | Custom styling for the mobile number input field.                                                                 |
| `mobNumberFontSize`     | string or number    | `''`                            | Font size for the mobile number input field.                                                                      |
| `dropDownStyle`         | object              | `{}`                            | Custom styling for the country code dropdown.                                                                     |
| `nameStyle`             | object              | `{}`                            | Custom styling for the name input fields (first name and last name).                                              |
| `fNameLabel`            | string              | `'First Name'`                  | Label for the first name input field.                                                                             |
| `fNameLabelStyle`       | object              | `{}`                            | Custom styling for the first name label.                                                                          |
| `fnameFieldStyle`       | object              | `{}`                            | Custom styling for the first name input field.                                                                    |
| `fNameInputVariant`     | string              | `'outlined'`                    | Input variant for the first name field.                                                                           |
| `lNameLabel`            | string              | `'Last Name'`                   | Label for the last name input field.                                                                              |
| `lNameLabelStyle`       | object              | `{}`                            | Custom styling for the last name label.                                                                           |
| `lNameFieldStyle`       | object              | `{}`                            | Custom styling for the last name input field.                                                                     |
| `emailLabel`            | string              | `'Email'`                       | Label for the email input field.                                                                                  |
| `emailInputvariant`     | string              | `'outlined'`                    | Input variant for the email field.                                                                                |
| `emailFieldstyle`       | object              | `{}`                            | Custom styling for the email input field.                                                                         |
| `emailLabelStyle`       | object              | `{}`                            | Custom styling for the email label.                                                                               |
| `pwdFieldstyle`         | object              | `{}`                            | Custom styling for the password input field.                                                                      |
| `passwordLabelStyle`    | object              | `{}`                            | Custom styling for the password label.                                                                            |
| `passwordLabel`         | string              | `'Password'`                    | Label for the password input field.                                                                               |
| `pwdInputVariant`       | string              | `'outlined'`                    | Input variant for the password field.                                                                             |
| `invisibleIcon`         | ReactNode           | `VisibilityOffOutlinedIcon`     | React node for the icon indicating invisible password.                                                            |
| `visbleIcon`            | ReactNode           | `VisibilityOutlinedIcon`        | React node for the icon indicating visible password.                                                              |

### Image Section Properties

| **Property**          | **Type**  | **Default Value** | **Description**                                         |
| --------------------- | --------- | ----------------- | ------------------------------------------------------- |
| `breakpoints`         | Object    | `{}`              | Breakpoints for customizing the image section.          |
| `src`                 | string    | `''`              | Source URL for the image in the image section.          |
| `height`              | string    | `''`              | Height of the image in the image section.               |
| `width`               | string    | `''`              | Width of the image in the image section.                |
| `style`               | Object    | `{}`              | Custom styling for the image section.                   |
| `backgroundWrapStyle` | Object    | `{}`              | Custom styling for the background of the image section. |
| `component`           | ReactNode | `null`            | A React component to be used in place of the image.     |

### Main Area Properties:

| **Property**      | **Type** | **Default Value**   | **Description**                                                                                                 |
| ----------------- | -------- | ------------------- | --------------------------------------------------------------------------------------------------------------- |
| `breakpoints`     | Object   | `{ xs: 12, md: 6 }` | Responsive breakpoints for the main area. Specifies the number of columns to display at different screen sizes. |
| `WraperStyle`     | Object   | `{}`                | Custom styling for the main area wrapper using Material-UI's `SxProps<Theme>`.                                  |
| `cardParentStyle` | Object   | `{}`                | Custom styling for the card parent container within the main area using Material-UI's `SxProps<Theme>`.         |