npm package: @licuido-ui/ui_language-choice
Description: The LanguageChoice component is implemented to select the language get use of it. It also suggest through suggestion language and we can switch language by the select component
Latest version: 1.0.1

# LanguageChoice

The LanguageChoice component is implemented to select the language get use of it. It also suggest through suggestion language and we can switch language by the select component

### Author

- @author G Balaji <balaji.g@crayond.co>

## Link

[Story Book Link language](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_language-choice
```

## Import component

```jsx
import { LanguageChoice } from '@licuido-ui/ui_language-choice';
```

## Usage

```jsx
<LanguageChoice
  title='Select your language'
  titleStyle={{}}
  selectId='select'
  allLangArray={allData}
  allLangState={allLangState}
  suggestedLangArray={suggestionData}
  suggestedLangState={suggestedLangState}
  languagesBoxStyle={{}}
  languageCardProps={{
    allLangTitle: 'All languages',
    suggestedLangTitle: 'Suggested for you',
    languageId: 'language-id',
    languageTitleStyle: {},
    cardStyle: {},
    selectedCardSx: {},
    cardTitleStyle: {},
    cardSubtitleStyle: {},
    handleClick: (val, index, parent) => handleClick(val, index, parent),
  }}
  selectProps={{
    componentStylePropSx: {
      paddingRight: '3px',
    },
    label: '',
    labelPropsSx: {},
    selectParentSx: {
      display: 'flex',
      justifyContent: 'end',
    },
    rootStyleSx: {
      background: '#fff',
      paddingLeft: '6px',
    },
    inputRootStyleSx: {
      '& div': {
        paddingRight: '3px',
      },
    },
    value: optionValue,
    options: options,
    handleChange: handleChange,
    islabel: false,
    inputMaxWidth: '200px',
    inputMinHeight: '',
    inputMinWidth: '200px',
    inputMaxHeight: '',
    dropdownMaxHeight: '',
    dropdownMaxWidth: '200px',
    dropdownMinHeight: '',
    dropdownMinWidth: '200px',
    inputBackgroundColor: '',
    inputBorder: '',
    inputBorderRadius: '8px',
    inputColor: '',
    inputPropsSx: {
      fontWeight: '500',
    },
    inputStartEndornment: <GlobeSvg />,
    inputEndEndornment: <ArrowDown width='18px' color='red' />,
  }}
/>
```

## Image

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

## Sample Code

```jsx

import { LanguageChoice} from '@licuido-ui/ui_language-choice';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { useState } from 'react';
import ArrowDown from './assets/arrowDown';
import SearchIcon from './assets/searchIcon';
import GlobeSvg from './assets/globleSvg';

function App() {

  // Update the selected options when the user makes a selection
  const handleSelectChange = (event: any, newValue: any) => {
    setSelectedOptions(newValue);
  };

  // Selected options state
  const [selectedOptions, setSelectedOptions] = useState([]);

  // All language selected state
  const [allLangState, setAllLangState] = useState({ langName: '', langText: '' });

  // Suggested language selected state
  const [suggestedLangState, setSuggestedLangState] = useState({ langName: '', langText: '' });

  const [optionValue, setOptionValue] = useState<any | any[]>([]);

  const allData = [
    {
      langName: 'Hindi',
      langText: 'हिन्दी',
    },
    {
      langName: 'Tamil',
      langText: 'தமிழ்',
    },
    {
      langName: 'Malayalam',
      langText: 'മലയാളം',
    },
    {
      langName: 'English',
      langText: 'English',
    },
    {
      langName: 'Arabic',
      langText: 'اَلْعَرَبِيَّةُ',
    },
    {
      langName: 'Sanskrit',
      langText: 'संस्कृत ',
    },
    {
      langName: 'Greek',
      langText: 'Ελληνικά',
    },
    {
      langName: 'Chinese',
      langText: '中國人',
    },
    {
      langName: 'Russian',
      langText: 'французский',
    },
    {
      langName: 'Marathi',
      langText: 'मराठी',
    },
  ];

  const suggestionData = [
    {
      langName: 'Hindi',
      langText: 'हिन्दी',
    },
    {
      langName: 'Tamil',
      langText: 'தமிழ்',
    },
    {
      langName: 'Malayalam',
      langText: 'മലയാളം',
    },
    {
      langName: 'English',
      langText: 'English',
    },
    {
      langName: 'Arabic',
      langText: 'اَلْعَرَبِيَّةُ',
    },
  ];

  const handleClick = (val: { langName: string; langText: string }, index: number, parent: string) => {
    // if all languages, set into all language selected state; otherwise, set in suggested language selected state
    if (parent === 'allData') {
      setAllLangState(val);
    } else {
      setSuggestedLangState(val);
    }
  };

  // This function maps your language data into options
  const options = allData.map((val) => {
    return {
      label: val.langName,
      value: val.langText,
    };
  });

  // handleChange function for the Select component
  const handleChange = (e: React.SyntheticEvent, val: any | any[]) => {
    const newValue = Array.isArray(val) ? val[0] : val;
    setOptionValue(val); // Update the optionValue state

    setAllLangState({
      langName: newValue.label as string,
      langText: newValue.value as string,
    });
  };

  return (
        <LanguageChoice
        title='Select your language'
        titleStyle={{ color: 'red' }}
        selectId='select'
        allLangArray={allData}
        allLangState={allLangState}
        suggestedLangArray={suggestionData}
        suggestedLangState={suggestedLangState}
        languagesBoxStyle={{}}
        languageCardProps={{
          allLangTitle: 'All languages',
          suggestedLangTitle: 'Suggested for you',
          languageId: 'language-id',
          languageTitleStyle: {},
          cardStyle: {},
          selectedCardSx: {},
          cardTitleStyle: {},
          cardSubtitleStyle: {},
          handleClick: (val, index, parent) => handleClick(val, index, parent),
        }}
        selectProps={{
          componentStylePropSx: {},
          label: '',
          labelPropsSx: {},
          selectParentSx: {
            display: 'flex',
            justifyContent: 'end',
          },
          rootStyleSx: {
            background: '#fff',
            paddingLeft: '6px',
          },
          inputRootStyleSx: {},
          value: optionValue,
          options: options,
          handleChange: handleChange,
          islabel: false,
          inputMaxWidth: '160px',
          inputMinHeight: '',
          inputMinWidth: '160px',
          inputMaxHeight: '500px',
          dropdownMaxHeight: '',
          dropdownMaxWidth: '150px',
          dropdownMinHeight: '',
          dropdownMinWidth: '150px',
          inputBackgroundColor: 'red',
          inputBorder: '',
          inputBorderRadius: '8px',
          inputColor: '',
          inputPropsSx: {
            fontWeight: '500',
            padding: '0 !important',
          },
          inputStartEndornment: <GlobeSvg />,
          inputEndEndornment: <ArrowDown width='18px' color='red' />,
        }}
      />

  );
}

export default App;

```

### Props

| Prop                 | Type              | Description                                                          | Default Value                  |
| -------------------- | ----------------- | -------------------------------------------------------------------- | ------------------------------ |
| `className`          | string            | The className of the container.                                      | '' (empty string)              |
| `sx`                 | SxProps<Theme>    | Style props for Material-UI components.                              | {} (empty object)              |
| `selectId`           | string            | The unique identifier for the select component.                      | '' (empty string)              |
| `title`              | string            | The title of the component.                                          | '' (empty string)              |
| `titleStyle`         | SxProps           | Style for the component's title.                                     | {} (empty object)              |
| `languagesBoxStyle`  | SxProps           | Styles for the parent box containing language cards.                 | {} (empty object)              |
| `allLangArray`       | LanguageArray[]   | An array of objects representing all languages.                      | [] (empty array)               |
| `allLangState`       | languageItemProps | The selected language state for all languages.                       | { langName: '', langText: '' } |
| `suggestedLangArray` | LanguageArray[]   | An array of objects representing suggested languages.                | [] (empty array)               |
| `suggestedLangState` | languageItemProps | The selected language state for suggested languages.                 | { langName: '', langText: '' } |
| `languageCardProps`  | LanguageCardProps | Props related to language cards. Includes styles and other settings. | {} (empty object)              |
| `selectProps`        | SelectProps       | Props for the select dropdown component.                             | {} (empty object)              |

**select** props contains,

| Prop                   | Type                       | Description                                                         | Default Value                                         |
| ---------------------- | -------------------------- | ------------------------------------------------------------------- | ----------------------------------------------------- |
| `componentStylePropSx` | SxProps                    | Styles for the entire component parent box.                         | {} (empty object)                                     |
| `multiple`             | boolean                    | Whether the select allows multiple selections.                      | false                                                 |
| `rootStyleSx`          | SxProps                    | Styles for the select root.                                         | {} (empty object)                                     |
| `selectParentSx`       | SxProps                    | Styles for the select parent.                                       | {} (empty object)                                     |
| `inputRootStyleSx`     | SxProps                    | Styles for the input root.                                          | {} (empty object)                                     |
| `selectId`             | string                     | Unique identifier for the select component, useful for BDD testing. | '' (empty string)                                     |
| `handleChange`         | function                   | A callback function to handle changes in the select component.      | () => null                                            |
| `value`                | OptionType or OptionType[] | The selected value(s) of the select component.                      | OptionType: undefined, OptionType[]: [] (empty array) |
| `options`              | OptionType[]               | An array of options for the select component.                       | [] (empty array)                                      |
| `label`                | string                     | Label for the select component.                                     | '' (empty string)                                     |
| `labelPropsSx`         | object                     | Styles for the label heading.                                       | {} (empty object)                                     |
| `islabel`              | boolean                    | Whether a label is displayed.                                       | false                                                 |
| `dropdownMinHeight`    | string                     | Minimum height for the dropdown.                                    | '' (empty string)                                     |
| `dropdownMaxWidth`     | string                     | Maximum width for the dropdown.                                     | '' (empty string)                                     |
| `dropdownMinWidth`     | string                     | Minimum width for the dropdown.                                     | '' (empty string)                                     |
| `dropdownMaxHeight`    | string                     | Maximum height for the dropdown.                                    | '' (empty string)                                     |
| `inputMinHeight`       | string                     | Minimum height for the input.                                       | '' (empty string)                                     |
| `inputMaxWidth`        | string                     | Maximum width for the input.                                        | '' (empty string)                                     |
| `inputMinWidth`        | string                     | Minimum width for the input.                                        | '' (empty string)                                     |
| `inputMaxHeight`       | string                     | Maximum height for the input.                                       | '' (empty string)                                     |
| `inputBackgroundColor` | string                     | Background color for the input.                                     | '' (empty string)                                     |
| `inputColor`           | string                     | Color for the input text.                                           | '' (empty string)                                     |
| `inputBorder`          | string                     | Border style for the input.                                         | '' (empty string)                                     |
| `inputBorderRadius`    | string                     | Border radius for the input.                                        | '' (empty string)                                     |
| `inputPropsSx`         | object                     | Custom styles for the input.                                        | {} (empty object)                                     |
| `inputStartEndornment` | JSX.Element                | The element to be displayed at the start of the input.              | <></> (empty JSX element)                             |
| `inputEndEndornment`   | JSX.Element                | The element to be displayed at the end of the input.                | <></> (empty JSX element)                             |