open-index/open-npm huggingface dataset:
npm package: @rhc-shared-components/form
Description: Form component for certified technology apps
Author: gautamkrishnar
Latest version: 3.0.1

# @rhc-shared-components/form

> Form component for certified technology apps

[![NPM](https://img.shields.io/npm/v/@rhc-shared-components/form.svg)](https://www.npmjs.com/package/@rhc-shared-components/form) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @rhc-shared-components/form
```

## Usage

```tsx
import React, { Component } from 'react'

import FormContainer from '@rhc-shared-components/form'
import '@rhc-shared-components/form/dist/index.css'

class Example extends Component {
  render() {
    <Formik
      initialValues={{
        [FieldName]: 'this is a test text'
      }}
      enableReinitialize={true}
      onSubmit={() => {
      }}>
      <FormContainer gridSpan={12}>
        <!-- Form Elements -->
      </FormContainer>
    </Formik>
  }
}
```

## License

MIT © [authorGithubUsername](https://github.com/authorGithubUsername)
npm package: @rhc-shared-components/form-checkbox
Description: project description
Author: redhatofficial
Latest version: 3.0.0

# @rhc-shared-components/form-checkbox

> Form checkbox component

[![NPM](https://img.shields.io/npm/v/@rhc-shared-components/sample-project.svg)](https://www.npmjs.com/package/@rhc-shared-components/sample-project) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @rhc-shared-components/form-checkbox
```

## Usage

```tsx
import React from 'react';
import { Formik } from 'formik';
import { FormCheckbox } from '@rhc-shared-components/form-checkbox'

const App = () => {
  const FieldName = 'allowedRepo'
  return (
    <Formik
      initialValues={{
        [FieldName]: ''
      }}
      enableReinitialize={true}
      onSubmit={() => {
      }}>
      <FormCheckbox
        id="allow-hosted-container-registry"
        data-testid="allow-hosted-container-registry"
        name={FieldName}
        label=""
        helperText={"I need Red Hat to host my registry"}
      />
    </Formik>
  )
}

export default App;

```

## License

MIT © [authorGithubUsername](https://github.com/authorGithubUsername)
npm package: @rhc-shared-components/form-group-container
Description: Form group container for Red Hat certified technology apps
Author: gautamkrishnar
Latest version: 3.0.1

# @rhc-shared-components/form-group-container

> Form group container for Red Hat certified technology apps

[![NPM](https://img.shields.io/npm/v/@rhc-shared-components/form-group-container.svg)](https://www.npmjs.com/package/@rhc-shared-components/form-group-container) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
yarn add @rhc-shared-components/form-group-container
```

## Usage

```tsx
import React, { Component } from 'react'

import { FormGroupContainer } from '@rhc-shared-components/form-group-container'
// ...

class Example extends Component {
    // .....
    // when used with formik contexts
  render() {
    return <FormGroupContainer
      validated={meta.touched && meta.error ? ValidatedOptions.error : ValidatedOptions.default}
      helperTextInvalid={meta.error}
      isRequired={isRequired}
      fieldId={rest.name}
      label={label}
      helperText={helperText}
      {...(labelIcon && {labelIcon: labelIcon})}
      {...formGroupProps}
    >
      // your form item
    </FormGroupContainer>
  }
}
```

## License

MIT © [gautamkrishnar](https://github.com/gautamkrishnar)
npm package: @rhc-shared-components/form-multi-select-component
Description: project description
Author: shkale
Latest version: 1.0.7

# @rhc-shared-components/sample-project

> project description

[![NPM](https://img.shields.io/npm/v/@rhc-shared-components/sample-project.svg)](https://www.npmjs.com/package/@rhc-shared-components/sample-project) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @rhc-shared-components/form-multi-select-component
```

## Usage

```tsx
import React from 'react';

import { FormMultiSelectInput } from '@rhc-shared-components/form-multi-select-component';
import { IMultiSelectItem } from '../../dist/FormMultiSelect';
import { Form, Formik } from 'formik';

const App = () => {
  const FieldName = 'form multi select';
  const options = [
    'Accounting',
    'API Management',
    'Application Delivery',
    'Application Server',
    'Automation',
    'Backup & Recovery',
    'Business Intelligence',
    'Business Process Management',
    'Capacity Management'
  ];
  const getActions = () => {
    const getAllOptions: IMultiSelectItem[] = options.map((item) => ({
      value: item
    }));
    return getAllOptions;
  };

  return (
    <Formik
      initialValues={{
        [FieldName]: 'test'
      }}
      enableReinitialize={true}
      onSubmit={() => {}}
    >
      <Form>
        <FormMultiSelectInput
          name={FieldName}
          maxHeight={200}
          label='Industries'
          placeholder='Select'
          helperText='Select upto 3 industries'
          selectOptions={getActions()}
          isRequired
          maxItems={3}
        />
      </Form>
    </Formik>
  );
};

export default App;
```

## License

MIT © [authorGithubUsername](https://github.com/authorGithubUsername)
npm package: @rhc-shared-components/form-radio-select
Description: project description
Author: redhatofficial
Latest version: 1.0.1

# @rhc-shared-components/sample-project

> project description

[![NPM](https://img.shields.io/npm/v/@rhc-shared-components/sample-project.svg)](https://www.npmjs.com/package/@rhc-shared-components/sample-project) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @rhc-shared-components/sample-project
```

## Usage

```tsx
import React, { Component } from 'react'

import MyComponent from '@rhc-shared-components/sample-project'
import '@rhc-shared-components/sample-project/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [authorGithubUsername](https://github.com/authorGithubUsername)
npm package: @rhc-shared-components/form-select-component
Description: project description
Author: redhatofficial
Latest version: 0.2.10

# @rhc-shared-components/sample-project

> project description

[![NPM](https://img.shields.io/npm/v/@rhc-shared-components/sample-project.svg)](https://www.npmjs.com/package/@rhc-shared-components/sample-project) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @rhc-shared-components/form-select-component
```

## Usage

```tsx
import React from 'react';

import {
  FormSelect,
  ISelectItem
} from '@rhc-shared-components/form-select-component';
import { Form, Formik } from 'formik';

const App = () => {
  const FieldName = 'form multi select';
  const options = [
    'Accounting',
    'API Management',
    'Application Delivery',
    'Application Server',
    'Automation',
    'Backup & Recovery',
    'Business Intelligence',
    'Business Process Management',
    'Capacity Management'
  ];
  const getActions = () => {
    const getAllOptions: ISelectItem[] = options.map((item) => ({
      value: item
    }));
    return getAllOptions;
  };

  return (
    <Formik
      initialValues={{
        [FieldName]: 'test'
      }}
      enableReinitialize={true}
      onSubmit={() => {}}
    >
      <Form>
        <FormSelect
          name={FieldName}
          label='Types of business'
          placeholder='Select'
          selectOptions={getActions()}
          isRequired
        />
      </Form>
    </Formik>
  );
};

export default App;
```

## License

MIT © [authorGithubUsername](https://github.com/authorGithubUsername)
npm package: @rhc-shared-components/form-text-area
Description: project description
Author: redhatofficial
Latest version: 2.0.0

# @rhc-shared-components/sample-project

> project description

[![NPM](https://img.shields.io/npm/v/@rhc-shared-components/sample-project.svg)](https://www.npmjs.com/package/@rhc-shared-components/sample-project) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @rhc-shared-components/sample-project
```

## Usage

```tsx
import React, { Component } from 'react'

import MyComponent from '@rhc-shared-components/sample-project'
import '@rhc-shared-components/sample-project/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [authorGithubUsername](https://github.com/authorGithubUsername)
npm package: @rhc-shared-components/form-text-input
Description: Text input component for certified technology apps
Author: gautamkrishnar
Latest version: 4.0.0

# @rhc-shared-components/form-text-input

> Form Text Input for Red Hat certified technology apps

[![NPM](https://img.shields.io/npm/v/@rhc-shared-components/form-text-input.svg)](https://www.npmjs.com/package/@rhc-shared-components/form-text-input) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
yarn add @rhc-shared-components/form-text-input
```

## Usage

```tsx
import React from 'react';
import { Formik } from 'formik';
import { FormTextInput } from "@rhc-shared-components/form-text-input";

const Example = () => {
  const FieldName = 'helloWorld';
  return (
    <Formik
      initialValues={{
        [FieldName]: 'this is a test text'
      }}
      enableReinitialize={true}
      onSubmit={() => {
      }}>
      <FormTextInput
        name={FieldName}
        label={'helloWorld label'}
        helperText={'helloWorld helper'}
        isRequired={true}
      />
    </Formik> );
}
```

## License

MIT © [gautamkrishnar](https://github.com/gautamkrishnar)
npm package: @rhc-shared-components/phone-number-input
Description: project description
Author: gautamkrishnar
Latest version: 1.0.0

# @rhc-shared-components/phone-number-input

> Form Text Input for Red Hat certified technology apps

[![NPM](https://img.shields.io/npm/v/@rhc-shared-components/phone-number-input.svg)](https://www.npmjs.com/package/@rhc-shared-components/phone-number-input) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
yarn add @rhc-shared-components/phone-number-input
```

## Usage

```tsx
import React from 'react';
import { Formik } from 'formik';
import { Title } from "@patternfly/react-core";
import { FormTextInput } from "@rhc-shared-components/form-text-input";

const Component = () => {
  const FieldName = 'helloWorld';
  return (
    <div>
      <Title headingLevel={'h1'}>Text Input with formik</Title>
      <Formik
        initialValues={{
          [FieldName]: 'this is a test text'
        }}
        enableReinitialize={true}
        onSubmit={() => {
        }}>
        <FormTextInput
          name={FieldName}
          label={'helloWorld label'}
          helperText={'helloWorld helper'}
          isRequired={true}
        />
      </Formik>
    </div> );
}
```

## License

MIT © [gautamkrishnar](https://github.com/gautamkrishnar)
npm package: @rhc-shared-components/rhc-eddl
Description: > EDDL analytics for RHC SPAs
Latest version: 1.0.6

# @rhc-shared-components/rhc-eddl

> EDDL analytics for RHC SPAs

[![NPM](https://img.shields.io/npm/v/@rhc-shared-components/rhc-eddl.svg)](https://www.npmjs.com/package/@rhc-shared-components/rhc-eddl) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @rhc-shared-components/rhc-eddl
```

## Usage
Add the following to your index.html as first item inside `<head></head>`

```html
<script>
    (function () {
      // took inspiration from catalog EDDL code: https://red.ht/4aAG6E4
      function insertAnalyticsScript(doc, src) {
        var script = doc.createElement('script');
        script.src = src;
        var ref = doc.querySelector('script');
        ref.parentNode.insertBefore(script, ref);
      }
      var srcs = [];
      if ('querySelector' in document) {
        // Is this production?
        //  DPAL scripts needed for analytics/EDDL metrics; do not remove, please
        if (window.location.hostname === "connect.redhat.com") {
          srcs = ["https://www.redhat.com/ma/dpal.js", "https://static.redhat.com/libs/redhat/marketing/latest/trustarc/trustarc.js"];
        } else if (['connect.stage.redhat.com', 'connect.qa.redhat.com', `connect.uat.redhat.com`].indexOf(window.location.hostname) !== -1) {
          srcs = ["https://www.redhat.com/ma/dpal-staging.js", "https://static.redhat.com/libs/redhat/marketing/latest/trustarc/trustarc.stage.js"];
        }
        for (var i = 0; i < srcs.length; i++) {
          insertAnalyticsScript(document, srcs[i]);
        }
      }
    }())
  </script>
```
```tsx
import React from 'react';
import { useRHCAuthContext } from '@rhc-shared-components/rhc-sso';
import { Formik } from 'formik';
import { checkAndSendAnalytics } from '@rhc-shared-components/rhc-eddl';

const App = () => {
  const { isAuthenticated } = useRHCAuthContext(); // Auth status
  const { pathname } = useLocation();
  useEffect(() => {
    checkAndSendAnalytics({spaName: "demo-spa"});
  }, [pathname, isAuthenticated]);
  return (
    <div>
      Hello World
    </div>
  )
}
export default App;
```