### Install and run React app dependencies

Source: https://github.com/nexxtway/react-rainbow/blob/master/examples/create-react-app/README.md

Install the necessary project dependencies and then start the development server for the React application. This can be achieved using either npm or yarn, providing flexibility based on the user's preferred package manager.

```bash
npm install
npm run start
```

```bash
yarn install
yarn run start
```

--------------------------------

### Navigate to Create React App example directory

Source: https://github.com/nexxtway/react-rainbow/blob/master/examples/create-react-app/README.md

Change the current working directory to the Create React App example folder within the react-rainbow-components repository. This step is necessary before installing dependencies or running the application.

```bash
cd examples/create-react-app
```

--------------------------------

### Run React Rainbow Components Locally

Source: https://github.com/nexxtway/react-rainbow/blob/master/README.md

These steps outline how to set up and run the React Rainbow Components project on a local machine. It involves cloning the repository, installing dependencies with Yarn, and starting the development server to access the demo application.

```bash
git clone https://github.com/nexxtway/react-rainbow.git
cd react-rainbow
yarn install
yarn start
navigate to http://localhost:6060/
```

--------------------------------

### Adding New Interactive Examples to React Rainbow Documentation

Source: https://github.com/nexxtway/react-rainbow/blob/master/CONTRIBUTING.md

Outlines the process for adding new interactive examples to the React Rainbow documentation, either via the 'Edit Interactive Example' button or by submitting a PR. Provides examples of Markdown and React JSX code to be added to the component's readme.md file, demonstrating how to include brand buttons.

```sh
#####Brand buttons
Sometimes, you need a Brand button to make your app looks **Brand**. Yea ...
```

```jsx
<Button
  label="Button Brand"
  onClick={() => alert('clicked!')}
  variant="brand" />
```

--------------------------------

### Render Basic Notification Component in React

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Notification/readme.md

Demonstrates how to render a basic Notification component from 'react-rainbow-components' with a title and description. It shows the minimal setup required for a simple notification display.

```javascript
import React from 'react';
import { Notification } from 'react-rainbow-components';

    <div className="rainbow-m-bottom_xx-large rainbow-p-bottom_xx-large">
        <GlobalHeader src="images/user/user3.jpg" className="rainbow-p-bottom_small" />
        <div className="rainbow-p-right_small rainbow-flex rainbow-justify_end">
            <Notification
                title="Notification title"
                description="This is the Notification description"
            />
        </div>
    </div>
```

--------------------------------

### Adding New React Rainbow Components

Source: https://github.com/nexxtway/react-rainbow/blob/master/CONTRIBUTING.md

Provides a step-by-step guide for adding a new component to the React Rainbow library. It details the required file structure, including main logic (index.js), styles (styled/index.js), documentation (readme.md), tests (_test_/componentName.spec.js), and page objects (pageObject/index.js). It also covers integration test setup and tutorial file creation, including a JSON snippet for tutorial.json.

```APIDOC
1. Following this directory `src/components/` create a folder with the component name. The component folder has to follow this convention `[ComponentName]` in camelcase.
    - Create all basic files for the components:
         - `index.js` This is the file where is the main logic of the component, props and methods showed in the documentation.
         - `styled` In this folder will be the file `index.js` with the styles of the component using `styled-components`
         - `readme.md` The have the Interactive Example for the component.
    - Depending on the functionality and complexity of the component it will be necessary also to add:
         - `_test_` In this folder will be the files `componentName.spec.js` with the tests of the component.
         - `pageObject` In this folder will be the file index.js with the Page Object of the component.(If the component need integrationTest)
2. If the component needs Integration Test then follow this directory `integration/specs/`, create a folder with the component name. The component folder has to follow this convention `[ComponentName]` in camelcase.
    - Create all necessary files and update the tutorial.json file for the components integration test:
         - `[componentName]-[number].spec.js` .The `[number]` is the assigned number to the Interactive Example to be tested. Numbers are assigned to the Interactive Example in consecutive odd numbers. I.e 1, 3, 5 etc.
         - Update the tutorial.json file. Add this code:
3. If the component needs Tutorial then following this directory `tutorial/` create a file with the component name. The component name has to follow this convention `[componentName]` in camelcase.
    - `componentName.md`
4. Add the code to the files
5. Submit the PR with the code of the new example
6. You are done🎉
Note: Depending on the functionality and complexity of the component it maybe necessary to add the Integration Test. If a component needs Integration Test then it needs Page Object and each Page Object needs a Tutorial.
```

```json
"componentName": {
     "title": "ComponentName page object"
}
```

--------------------------------

### React Component Usage Example

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Tab/readme.md

A simple JSX snippet demonstrating the direct usage of a `TabExample` component. This shows how a custom React component might be rendered in a parent component or application.

```javascript
    <TabExample />;
```

--------------------------------

### Simple React Component Usage: TabsetExample

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Tabset/readme.md

A concise example demonstrating how to render a `TabsetExample` React component. This snippet shows a typical standalone usage of a custom component within a React application.

```javascript
    <TabsetExample />;
```

--------------------------------

### Install React Rainbow Components with npm

Source: https://github.com/nexxtway/react-rainbow/blob/master/README.md

This command installs the React Rainbow Components library using npm, saving it as a dependency in your project. It's the standard way to add the library to a React application.

```bash
$ npm install react-rainbow-components --save
```

--------------------------------

### Render React Rainbow Tabset Example Component

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Tabset/readme.md

This line of JSX code demonstrates how to render an instance of the TabsetExample component. This component likely encapsulates the Tabset and Tab components, providing a complete example of their integration and usage within a React application.

```jsx
    <TabsetExample />;
```

--------------------------------

### Basic Usage of React PresenceMap Example Component

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/PresenceMap/readme.md

A simple JSX snippet demonstrating how to render the `PresenceMapExample` component within a React application, making the interactive map available.

```JSX
    <PresenceMapExample />
```

--------------------------------

### Install React Rainbow Components using Yarn

Source: https://github.com/nexxtway/react-rainbow/blob/master/README.md

This command installs the React Rainbow Components library into your project using Yarn, a popular package manager for JavaScript. It adds the 'react-rainbow-components' package to your project's dependencies.

```bash
$ yarn add react-rainbow-components
```

--------------------------------

### ButtonGroupPicker with Error State

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/ButtonGroupPicker/readme.md

This example demonstrates how to display an error message for the ButtonGroupPicker component. By setting the 'required' prop and providing an 'error' message, the component visually indicates that a selection is mandatory, guiding the user to make a choice.

```js
    import React from 'react';
    import { ButtonGroupPicker, ButtonOption } from 'react-rainbow-components';

    const ButtonGroupPickerTry = () => {
        const [value, setValue] = React.useState('');
        return (
            <div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
                <ButtonGroupPicker
                    label="Select view type"
                    value={value}
                    onChange={setValue}
                    name="date-filter"
                    error="This field is required"
                    required
                >
                    <ButtonOption label="Month" name="month" />
                    <ButtonOption label="Week" name="week" />
                    <ButtonOption label="Day" name="day" />
                </ButtonGroupPicker>
            </div>
        );
    };

        <ButtonGroupPickerTry />;
```

--------------------------------

### Implement CounterInput with Default Variant in React

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/CounterInput/readme.md

This example demonstrates how to use the `CounterInput` component from `react-rainbow-components` with its default appearance. It shows basic setup with state management for the counter value and includes `min` and `max` properties for basic range control.

```javascript
import React, { useState } from 'react';
import { CounterInput } from 'react-rainbow-components';

const containerStyles = {
    maxWidth: 220,
};

const CounterBase = () => {
    const [counter, setCounter] = useState();

    return(
        <CounterInput
            id="input-component-1"
            label="Passengers"
            placeholder="Only numbers"
            style={containerStyles}
            className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
            labelAlignment="center"
            value={counter}
            onChange={setCounter}
            min={10}
            max={100}
        />
    )
}

    <CounterBase />
```

--------------------------------

### Basic Usage of React Rainbow Button Component

Source: https://github.com/nexxtway/react-rainbow/blob/master/README.md

This example demonstrates how to import and use a Button component from the React Rainbow Components library. It renders a 'Hello World!' button that triggers an alert when clicked, showcasing a simple component integration.

```js
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-rainbow-components';

function App() {
    return <Button label="Hello World!" variant="brand" onClick={() => alert('Hello World!')} />;
}

ReactDOM.render(<App />, document.getElementById('container'));
```

```js
import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@bit/nexxtway.react-rainbow.button';

function App() {
    return <Button label="Hello World!" variant="brand" onClick={() => alert('Hello World!')} />;
}

ReactDOM.render(<App />, document.getElementById('container'));
```

--------------------------------

### React Component Instance

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Tab/readme.md

A simple JSX snippet demonstrating the instantiation of a `TabExample` React component.

```jsx
    <TabExample />;
```

--------------------------------

### React DatePickerModal Base Usage with Picklist

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/DatePickerModal/readme.md

This JavaScript code snippet illustrates the fundamental setup and interaction for the DatePickerModal component. It shows how to import necessary components, manage component state for modal visibility and selected values, handle changes from both a Picklist (for predefined date options) and the DatePickerModal itself, and format selected dates for display. The example includes logic for 'Custom' date range selection.

```javascript
import React from 'react';
import { Picklist, Option, DatePickerModal } from 'react-rainbow-components';

const initialState = { isOpen: false, selection: { name: '', label: '' } };

function handlePicklistChange(value) {
    if (value.name === 'Custom') {
        setState({
            isOpen: true,
            selectionType: 'range',
            value: null,
            title: 'Select a Date',
        });
    } else {
        setState({ selection: value });
    }
}

function formatDates(dates) {
    if (dates) {
        const startDay = new Intl.DateTimeFormat().format(dates[0]);
        if (dates.length > 1) {
            const endDay = new Intl.DateTimeFormat().format(dates[1]);
            return `${startDay  } - ${  endDay}`;
        }
        return startDay;
    }
    return '';
}

function handleDatePickerChange(value) {
    const formatedDate = formatDates(value);
    if (value.length > 1) {
        setState({
            value,
            selection: { name: 'Custom', label: formatedDate },
            title: formatedDate,
            isOpen: false,
        });
    } else {
        setState({
            value,
            selection: { name: 'Custom', label: formatedDate },
            title: formatedDate,
        });
    }
}

const containerStyles = {
    width: '160px',
};

    <div className="rainbow-m-bottom_xx-large rainbow-p-bottom_xx-large">
        <GlobalHeader src="images/user/user3.jpg">
            <div className="rainbow-flex rainbow-align_right">
                <Picklist
                    value={state.selection}
                    style={containerStyles}
                    placeholder="Select Date"
                    onChange={handlePicklistChange}
                >
                    <Option name="Custom" label="Custom" />
                    <Option name="Today" label="Today" />
                    <Option name="Yesterday" label="Yesterday" />
                    <Option name="This Week" label="This Week" />
                </Picklist>
            </div>
        </GlobalHeader>
        <DatePickerModal
            title={state.title}
            isOpen={state.isOpen}
            variant="double"
            value={state.value}
            selectionType="range"
            onChange={handleDatePickerChange}
            onRequestClose={() => setState({ isOpen: false })}
        />
    </div>
```

--------------------------------

### React Select Component with Error Message

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Select/readme.md

This example demonstrates how to display an error message beneath the `Select` component. By providing a string value to the `error` prop, a validation message appears, indicating an issue with the input. This helps guide users to correct invalid entries in forms.

```js
import React from 'react';
import { Select } from 'react-rainbow-components';

const containerStyles = {
    maxWidth: 700,
};

const options = [
    { value: 'option 1', label: 'Option with error 1' },
    { value: 'option 2', label: 'Option with error 2' },
    { value: 'option 3', label: 'Option with error 3' },
];

    <Select
        label="Select Label"
        required
        error="this field is required"
        options={options}
        style={containerStyles}
        className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
    />;
```

--------------------------------

### React Calendar: Date Constraints with minDate and maxDate

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Calendar/readme.md

This example illustrates how to restrict the selectable date range in the React Rainbow Calendar component using the `minDate` and `maxDate` props. It sets a predefined start and end date, ensuring users can only select dates within this specified period.

```javascript
import React from 'react';
import { Card, Calendar } from 'react-rainbow-components';

const initialState = { date: new Date('2019-11-11 00:00:00') };
const calendarContainerStyles = {
    width: '28rem',
    height: '27rem',
};

    <div>
        <div className="rainbow-align-content_center rainbow-p-vertical_xx-large rainbow-p-horizontal_medium">
            <Card style={calendarContainerStyles} className="rainbow-p-around_large">
                <Calendar
                    id="calendar-3"
                    value={state.date}
                    minDate={new Date(2018, 0, 4)}
                    maxDate={new Date(2020, 0, 4)}
                    onChange={value => setState({ date: value })}
                />
            </Card>
        </div>
    </div>
```

--------------------------------

### React Calendar: Date Range Selection

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Calendar/readme.md

This example demonstrates how to enable date range selection in the React Rainbow Calendar component by setting `selectionType='range'`. It allows users to select a start and end date, defining a period, and also shows how to combine this with the `disabledDays` prop to exclude specific dates from the range.

```javascript
import React from 'react';
import { Card, Calendar } from 'react-rainbow-components';

const initialState = { range: [
    new Date(2019, 0, 3),
    new Date(2019, 0, 15)
] };
const calendarContainerStyles = {
    width: '28rem',
    height: '27rem',
};

    <div>
        <div className="rainbow-align-content_center rainbow-p-vertical_xx-large rainbow-p-horizontal_medium">
            <Card style={calendarContainerStyles} className="rainbow-p-around_large">
                <Calendar
                    id="calendar-7"
                    selectionType="range"
                    value={state.range}
                    onChange={value => setState({ range: value })}
                    disabledDays={['2019/01/23']}
                />
            </Card>
        </div>
    </div>
```

--------------------------------

### React Application Page Layout with Rainbow Components

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Modal/readme.md

Demonstrates a typical React application page layout using GlobalHeader, Content, Title, Description, and a FormModal from React Rainbow Components. It sets up a basic reservation system UI.

```jsx
    <div>
        <GlobalHeader/>

        <Content className="rainbow-p-around_xx-large rainbow-flex rainbow-align-content_center">
            <div>
                <div className="rainbow-m-bottom_medium">
                    <Title>Make your reservation</Title>
                </div>

                <div className="rainbow-m-bottom_medium">
                    <Description>This is a reservation system UI practice. Hope you will let me know how you feel about this. Thanks</Description>
                </div>

                <FormModal />
            </div>

            <div>
                <img alt="traveler" className="rainbow-m-bottom_medium" src="/images/illustrations/Illustration-traveler.svg" />
            </div>
        </Content>

    </div>
```

--------------------------------

### Customizing Rating Component Color and Card Integration

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Rating/readme.md

This example demonstrates how to apply a custom color palette to the `Rating` component using `RainbowThemeContainer` and `styled-components` for theme overrides. It also showcases the integration of a `Rating` component within a `Card` with custom header and text styles, illustrating a comprehensive UI setup.

```jsx
import React from 'react';
import { Card, ButtonGroup, ButtonIcon, Rating, RainbowThemeContainer } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus, faEllipsisV } from '@fortawesome/free-solid-svg-icons';
import styled from 'styled-components';


const theme = {
    rainbow: {
        palette: {
            warning: '#ffdc7f',
        },
    },
};

const cardStyles = {
    width: 300,
};

const imageStyles = {
    borderTopLeftRadius: '0.875rem',
    borderTopRightRadius: '0.875rem',
    height: 170,
    width: '100%',
    backgroundImage: 'url(images/illustrations/Illustration-rainbow-4.svg)',
    backgroundSize: 'cover',
};

const StyledHeader = styled.h3.attrs(props => {
    return props.theme.rainbow.palette;
})`
    color: ${props => props.text.main};
`;

const StyledText = styled.h3.attrs(props => {
    return props.theme.rainbow.palette;
})`
    color: ${props => props.text.label};
`;

class SimpleRating extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '3',
        };
        this.handleOnChange = this.handleOnChange.bind(this);
    }

    handleOnChange(event) {
        return this.setState({ value: event.target.value });
    }

    render() {
        const { value } = this.state;
        return (
            <RainbowThemeContainer theme={theme}>
                <Rating value={value} onChange={this.handleOnChange} />
            </RainbowThemeContainer>
        )
    }
}

    <div className="rainbow-p-bottom_xx-large">
        <GlobalHeader className="rainbow-m-bottom_xx-large" src="images/user/user3.jpg">
            <ButtonGroup className="rainbow-m-right_medium">
                <ButtonIcon variant="border-filled" disabled icon={<FontAwesomeIcon icon={faPlus} />} />
                <ButtonIcon
                    variant="border-filled"
                    disabled
                    icon={<FontAwesomeIcon icon={faEllipsisV} />}
                />
            </ButtonGroup>
        </GlobalHeader>
        <div className="rainbow-align-content_center">
            <Card
                style={cardStyles}
                footer={
                    <div>
                        <div className="rainbow-flex rainbow-flex_column rainbow-align_start rainbow-m-bottom_x-small">
                            <StyledHeader className="rainbow-font-size-heading_medium">
                                Rainbow
                            </StyledHeader>
                            <StyledText>
                                Give us your rate about how you like this…
                            </StyledText>
                        </div>
                        <SimpleRating />
                    </div>
                }
            >
                <div style={imageStyles} />
            </Card>
        </div>
    </div>
```

--------------------------------

### Customize GoogleAddressLookup Border Radius in React

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/GoogleAddressLookup/readme.md

This React functional component example illustrates how to render multiple instances of the `GoogleAddressLookup` component, each configured with a distinct `borderRadius` prop value. It demonstrates the 'square', 'semi-square', 'semi-rounded', and 'rounded' styles, along with common props such as `label`, `onChange`, `value`, `placeholder`, `apiKey`, `style`, and `className` for basic setup and styling.

```javascript
import React from 'react';
import { GoogleAddressLookup } from 'react-rainbow-components';

const containerStyles = {
    maxWidth: 700,
};

const initialState = { value: null };

    <>
        <GoogleAddressLookup
            label="GoogleAddressLookup with border radius square"
            onChange={value => setState({ value })}
            value={state.value}
            placeholder="Enter location"
            apiKey={LIBRARY_GOOGLE_MAPS_APIKEY}
            style={containerStyles}
            className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
            borderRadius="square"
        />
        <GoogleAddressLookup
            label="GoogleAddressLookup with border radius semi-square"
            onChange={value => setState({ value })}
            value={state.value}
            placeholder="Enter location"
            apiKey={LIBRARY_GOOGLE_MAPS_APIKEY}
            style={containerStyles}
            className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
            borderRadius="semi-square"
        />
        <GoogleAddressLookup
            label="GoogleAddressLookup with border radius semi-rounded"
            onChange={value => setState({ value })}
            value={state.value}
            placeholder="Enter location"
            apiKey={LIBRARY_GOOGLE_MAPS_APIKEY}
            style={containerStyles}
            className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
            borderRadius="semi-rounded"
        />
        <GoogleAddressLookup
            label="GoogleAddressLookup with border radius rounded"
            onChange={value => setState({ value })}
            value={state.value}
            placeholder="Enter location"
            apiKey={LIBRARY_GOOGLE_MAPS_APIKEY}
            style={containerStyles}
            className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
            borderRadius="rounded"
        />
    </>;
    ;
```

--------------------------------

### Basic React CodeInput Component Usage

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/CodeInput/readme.md

Demonstrates the fundamental usage of the CodeInput component, including state management with useState and focusing the input on mount using useRef and useEffect.

```javascript
import React, { useEffect, useRef, useState } from 'react';
import { CodeInput } from 'react-rainbow-components';

function CodeInputBase() {
    const [code, setCode] = useState();
    const codeInputRef = useRef();

    useEffect(() => {
        codeInputRef.current.focus();
    }, []);

    return (
        <CodeInput
            id="codeinput-1"
            value={code}
            label="Enter your Code"
            onChange={setCode}
            ref={codeInputRef}
        />
    );
};
```

--------------------------------

### Instantiate React Modal Component

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Modal/readme.md

This snippet demonstrates how to render the `ModalWSize` React component, which encapsulates the logic for displaying modals of various sizes, within a larger application.

```jsx
    <ModalWSize />;
```

--------------------------------

### React Rainbow Modal with Custom Footer and Directional Buttons

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Modal/readme.md

This React component `ModalWFooterDirectional` demonstrates a modal dialog using `react-rainbow-components`. It includes state management for `isOpen`, methods to handle opening and closing the modal, and a custom footer with 'Previous' and 'Save' buttons, illustrating a common pattern for multi-step forms or confirmations within a modal. It requires `react-rainbow-components` to be installed.

```jsx
import React from 'react';
import { Modal, Button } from 'react-rainbow-components';

const textStyles = {
    textAlign: 'center',
    fontSize: 15,
    padding: '0 16px',
};

class ModalWFooterDirectional extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isOpen: false,
        };
        this.handleOnClick = this.handleOnClick.bind(this);
        this.handleOnClose = this.handleOnClose.bind(this);
    }

    handleOnClick() {
        return this.setState({ isOpen: true });
    }

    handleOnClose() {
        return this.setState({ isOpen: false });
    }

    render() {
        const { isOpen } = this.state;
        return (
            <div className="rainbow-m-bottom_xx-large rainbow-p-bottom_xx-large">
                <GlobalHeader className="rainbow-p-bottom_xx-large rainbow-m-bottom_xx-large">
                    <Button
                        variant="neutral"
                        label="Modal with footer"
                        onClick={this.handleOnClick}
                    />
                </GlobalHeader>
                <Modal
                    isOpen={isOpen}
                    onRequestClose={this.handleOnClose}
                    title="Modal Header"
                    footer={
                        <div className="rainbow-flex rainbow-justify_spread">
                            <Button label="Previous" variant="neutral" />
                            <Button label="Save" variant="brand" />
                        </div>
                    }
                >
                    <p style={textStyles}>
                        A rainbow is a meteorological phenomenon that is caused by reflection,
                        refraction and dispersion of light in water droplets resulting in a spectrum
                        of light appearing in the sky. It takes the form of a multicoloured circular
                        arc. Rainbows caused by sunlight always appear in the section of sky
                        directly opposite the sun. Rainbows can be full circles. However, the
                        observer normally sees only an arc formed by illuminated droplets above the
                        ground.
                    </p>
                </Modal>
            </div>
        );
    }
}

    <ModalWFooterDirectional />;
```

--------------------------------

### Render User List and Drawer with React Rainbow UI

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Drawer/readme.md

Demonstrates how to integrate 'UsersList' and 'Drawer' components from React Rainbow UI. It shows a flexible layout for displaying user data and a configurable drawer for editing, including header, footer with actions, and content forms.

```JSX
<div className="rainbow-m-around_xx-large rainbow-flex_column rainbow-align-content_center">
    <StyledExampleHeader className="rainbow-p-bottom_small">Contributors</StyledExampleHeader>
    <div className="rainbow-flex rainbow-flex_wrap">
        <UsersList values={users} />
    </div>
    <Drawer
        id="drawer-7"
        header="Edit Information"
        slideFrom="right"
        footer={
            <DrawerFooter
                onCancel={() => closeDrawer()}
                onSave={() => closeDrawer()}
            />
        }
        isOpen={state.isOpen}
        onRequestClose={() => closeDrawer()}
    >
        <Form
            contactInfo={state.info}
            initialValues={state.info}
        />
    </Drawer>
</div>
```

--------------------------------

### React ButtonMenu with Divider Example

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/ButtonMenu/readme.md

Illustrates how to include a MenuDivider within a ButtonMenu component, nested inside a ButtonGroup. This example shows how to separate menu items visually using a divider, enhancing menu organization.

```javascript
import React from 'react';
import {
    ButtonGroup,
    ButtonMenu,
    MenuItem,
    ButtonIcon,
    MenuDivider,
} from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
    faCog,
    faPaste,
    faPlus,
} from '@fortawesome/free-solid-svg-icons';

    <div className="rainbow-m-bottom_xx-large rainbow-p-bottom_xx-large">
        <GlobalHeader
            src="images/user/user3.jpg"
            className="rainbow-p-bottom_xx-large rainbow-m-bottom_xx-large"
        >
            <ButtonGroup>
                <ButtonIcon icon={<FontAwesomeIcon icon={faPlus} />} variant="border-filled" disabled />
                <ButtonIcon
                    icon={<FontAwesomeIcon icon={faPaste} />}
                    variant="border-filled"
                    disabled
                />
                <ButtonMenu
                    menuAlignment="right"
                    menuSize="x-small"
                    icon={<FontAwesomeIcon icon={faCog} />}
                >
                    <MenuItem label="Menu Item One" />
                    <MenuItem label="Menu Item Two" />
                    <MenuItem label="Menu Item Three" />

                    <MenuDivider variant="space" />
                    <MenuItem label="Menu Item Four" />
                </ButtonMenu>
            </ButtonGroup>
        </GlobalHeader>
    </div>
```

--------------------------------

### React Drawer Component with Various Predefined Sizes

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Drawer/readme.md

This snippet demonstrates how to render the `Drawer` component with different predefined sizes. It allows users to open drawers with 'small', 'medium', 'large', and 'full' sizes by setting the `size` prop dynamically. The example highlights the flexibility in controlling the drawer's dimensions.

```javascript
import React from 'react';
import { Button, Drawer } from 'react-rainbow-components';

const initialState = {
    isOpen: false,
    size: null,
};

    <div
        className="rainbow-m-vertical_large rainbow-p-horizontal_small rainbow-m_auto rainbow-flex_wrap"
    >
        <div className="rainbow-flex rainbow-flex_row">
            <div className="rainbow-align-content_center rainbow-p-medium rainbow-m_auto">
                <Button
                    className="rainbow-m-around_medium"
                    label="Drawer small"
                    onClick={() => setState({
                    isOpen: true,
                    size: 'small',
                })}
                />
            </div>
            <div className="rainbow-align-content_center rainbow-p-medium rainbow-m_auto">
                <Button
                    className="rainbow-m-around_medium"
                    label="Drawer medium"
                    onClick={() => setState({
                    isOpen: true,
                    size: 'medium',
                })}
                />
            </div>
            <div className="rainbow-align-content_center rainbow-p-medium rainbow-m_auto">
                <Button
                    className="rainbow-m-around_medium"
                    label="Drawer large"
                    onClick={() => setState({
                    isOpen: true,
                    size: 'large',
                })}
                />
            </div>
            <div className="rainbow-align-content_center rainbow-p-medium rainbow-m_auto">
                <Button
                    className="rainbow-m-around_medium"
                    label="Drawer Full"
                    onClick={() => setState({
                    isOpen: true,
                    size: 'full',
                })}
                />
            </div>
        </div>
        <Drawer
            id="drawer-3"
            header="This is a drawer"
            size={state.size}
            isOpen={state.isOpen}
            onRequestClose={() => setState({ isOpen : false })}
        />
    </div>
```

--------------------------------

### Display Required React Rainbow Lookup Component with Error

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Lookup/readme.md

This example shows a Lookup component configured as required, displaying an error message when validation fails. It includes the same data filtering and search functionality as the disabled example, ensuring the user provides input.

```javascript
import React from 'react';
import { Lookup } from 'react-rainbow-components';

const containerStyles = {
    maxWidth: 700,
};

const data = [
    { label: 'Paris' },
    { label: 'New York' },
    { label: 'San Fransisco' },
    { label: 'Madrid' },
    { label: 'Miami' },
    { label: 'London' },
    { label: 'Tokyo' },
    { label: 'Barcelona' },
    { label: 'La Habana' },
    { label: 'Buenos Aires' },
    { label: 'Sao Paulo' },
    { label: 'Toronto' },
];

function filter(query, options) {
    if (query) {
        return options.filter(item => {
            const regex = new RegExp(query, 'i');
            return regex.test(item.label);
        });
    }
    return [];
}

function search(value) {
    if (state.options && state.value && value.length > state.value.length) {
        setState({
            options: filter(value, state.options),
            value,
        });
    } else if (value) {
        setState({
            isLoading: true,
            value,
        });
        setTimeout(
            () =>
                setState({
                    options: filter(value, data),
                    isLoading: false,
                }),
            500,
        );
    } else {
        setState({
            isLoading: false,
            value: '',
            options: null,
        });
    }
}

const initialState = { options: null };

    <Lookup
        label="Lookup Label"
        placeholder="Find"
        options={state.options}
        value={state.option}
        onChange={option => setState({ option })}
        required
        error="This field is required"
        isLoading={state.isLoading}
        onSearch={search}
        style={containerStyles}
        className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
    />;
```

--------------------------------

### Basic Drawer Component Usage in React

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Drawer/readme.md

This snippet demonstrates the fundamental usage of the `Drawer` component from `react-rainbow-components`. It shows how to open and close a basic drawer by toggling its `isOpen` prop via a button click. The drawer includes a header and a close mechanism.

```javascript
import React from 'react';
import { Button, Drawer } from 'react-rainbow-components';

const initialState = {
    isOpen: false,
};

    <div
        className="rainbow-m-vertical_large rainbow-p-horizontal_small rainbow-m_auto rainbow-flex_wrap"
    >
        <div className="rainbow-flex rainbow-flex_row">
            <div className="rainbow-align-content_center rainbow-p-medium rainbow-m_auto">
                <Button
                    id="button-1"
                    className="rainbow-m-around_medium"
                    label="Open Drawer"
                    onClick={() => setState({
                    isOpen: true,
                })}
                />
            </div>
        </div>
        <Drawer
            id="drawer-1"
            header="This is a drawer"
            isOpen={state.isOpen}
            onRequestClose={() => setState({ isOpen : false })}
        />
    </div>
```

--------------------------------

### Render Basic React TimelineMarker Component

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/TimelineMarker/readme.md

This example demonstrates the basic usage of the `TimelineMarker` component within `ActivityTimeline`. It shows how to populate the marker with descriptive information using `label`, `icon`, `datetime`, and `description` properties, providing a simple event representation.

```javascript
import React from 'react';
import { ActivityTimeline, TimelineMarker } from 'react-rainbow-components';

const iconStyles = { width: 32, height: 32 };

    <div className="rainbow-m-around_xx-large">
        <ActivityTimeline>
            <TimelineMarker
                label="User Sign Up."
                icon={<UserSignUpIcon style={iconStyles} />}
                datetime="Yesterday"
                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua."
            />
        </ActivityTimeline>
    </div>
```

--------------------------------

### Markdown Embedded Code Block Examples

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/MarkdownOutput/readme.md

Examples of various programming languages embedded within a markdown string, demonstrating how `react-rainbow-components`' `MarkdownOutput` can render and highlight different code types.

```text
const data = 'Lorem ipsum....';

const doSomething = (param) => {
};

const xx = doSomething(data);
```

```js
const data = 'Lorem ipsum....';

const doSomething = (param) => {
};

const xx = doSomething(data);
```

```sh
$ node index.js;
```

```java
String foo = 5;
```

--------------------------------

### Basic Currency Input Usage in React

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/CurrencyInput/readme.md

Demonstrates the fundamental usage of the `CurrencyInput` component from `react-rainbow-components`, including state management with `useState` for its value and `onChange` handler.

```javascript
import React, { useState } from 'react';
import { CurrencyInput } from 'react-rainbow-components';

const containerStyles = {
    maxWidth: 700,
};
const SetValueInput = () => {
    const [ value, setValue ] = useState();

    return (
        <CurrencyInput
            label="Input Label"
            placeholder="Enter your amout"
            style={containerStyles}
            className="rainbow-m-vertical_x-large rainbow-m_auto"
            value={value}
            onChange={setValue}
        />
    )
}

    <SetValueInput />
```

--------------------------------

### Render Required Textarea Component in React

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Textarea/readme.md

Illustrates how to mark a `Textarea` component as required. This example sets the `required` prop, ensuring user input is mandatory before form submission.

```javascript
import React from 'react';
import { Textarea } from 'react-rainbow-components';

const containerStyles = {
    maxWidth: 700,
};

    <Textarea
        label="Textarea Label"
        required
        rows={4}
        placeholder="Placeholder Text Required"
        style={containerStyles}
        className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
    />;
```

--------------------------------

### Basic React Picklist Component Usage

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Picklist/readme.md

Demonstrates a basic React Picklist component from `react-rainbow-components`. It shows how to initialize the picklist with a pre-selected value and handle changes using the `onChange` prop. The component is rendered within a `GlobalHeader`.

```javascript
import React from 'react';
import { Picklist, Option } from 'react-rainbow-components';

const containerStyles = {
    width: '200px',
};

const initialState = { value: { name: 'option 3', label: 'Central Park' } };

    <div className="rainbow-m-bottom_xx-large rainbow-p-bottom_xx-large">
        <GlobalHeader
            src="images/user/user2.jpg"
            className="rainbow-p-bottom_xx-large rainbow-m-bottom_xx-large"
        >
            <div className="rainbow-flex rainbow-align_right">
                <Picklist
                    id="picklist-1"
                    style={containerStyles}
                    onChange={value => setState({ value })}
                    value={state.value}
                    label="Select Building"
                    hideLabel
                >
                    <Option name="header" label="Your Buildings" variant="header" />
                    <Option name="option 1" label="Experimental Building" />
                    <Option name="option 2" label="Empire State" />
                    <Option name="option 3" label="Central Park" />
                </Picklist>
            </div>
        </GlobalHeader>
    </div>;
```

--------------------------------

### Clone React Rainbow Repository Fork

Source: https://github.com/nexxtway/react-rainbow/blob/master/CONTRIBUTING.md

Instructions to clone your forked React Rainbow Components repository to your local machine using Git, initiating your local development environment.

```Git
git clone git@github.com:<yourname>/react-rainbow.git
```

--------------------------------

### Disable CounterInput Component in React

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/CounterInput/readme.md

This example shows how to disable the `CounterInput` component, making it non-interactive. This is achieved by simply adding the `disabled` boolean prop to the component, useful when the input should not be editable.

```javascript
import React, { useState } from 'react';
import { CounterInput } from 'react-rainbow-components';

const containerStyles = {
    maxWidth: 220,

};

const CounterDisabled = () => {
    const [counter, setCounter] = useState();

    return(
        <CounterInput
            id="input-component-1"
            label="Passengers"
            placeholder="Only numbers"
            style={containerStyles}
            className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
            labelAlignment="center"
            value={counter}
            onChange={setCounter}
            disabled
        />
    )
}

    <CounterDisabled />
```

--------------------------------

### React Accordion with Disabled Sections

Source: https://github.com/nexxtway/react-rainbow/blob/master/src/components/Accordion/readme.md

This example illustrates how to disable specific sections within a `react-rainbow-components` Accordion. By setting the `disabled` prop on `AccordionSection` components, users are prevented from interacting with those sections.

```js
import React from 'react';
import { Accordion, AccordionSection } from 'react-rainbow-components';

    <div className="rainbow-m-around_xx-large">
        <Accordion>
            <AccordionSection label="Rainbow Accordion">
                A rainbow is a meteorological phenomenon that is caused by reflection, refraction
                and dispersion of light in water droplets resulting in a spectrum of light appearing
                in the sky.
            </AccordionSection>
            <AccordionSection disabled label="Rainbow Accordion">
                A rainbow is a meteorological phenomenon that is caused by reflection, refraction
                and dispersion of light in water droplets resulting in a spectrum of light appearing
                in the sky.
            </AccordionSection>
            <AccordionSection disabled label="Rainbow Accordion">
                A rainbow is a meteorological phenomenon that is caused by reflection, refraction
                and dispersion of light in water droplets resulting in a spectrum of light appearing
                in the sky.
            </AccordionSection>
        </Accordion>
    </div>
```