open-index/open-npm huggingface dataset:
npm package: @hawk-ui/pagination
Description: hawk-ui: Pagination Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/pagination --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/pagination/dist/index.min.css
```


## Usage


#### Pagination
[Demo](https://hawk.oncrypt.co/#!/Pagination/1)
```js static
import Pagination from '@hawk-ui/pagination';
```
```js
const [PAGE_RANGE_DISPLAYED, PAGE_SIZE, totalResults] = [5, 15, 1000];

initialState = {
  activePage: 1,
};

<Pagination
  pageRangeDisplayed={PAGE_RANGE_DISPLAYED}
  activePage={state.activePage}
  itemsCountPerPage={PAGE_SIZE}
  totalItemsCount={totalResults}
  renderPrevPage={() => (<i className="fa fa-chevron-left"></i>)}
  renderNextPage={() => (<i className="fa fa-chevron-right"></i>)}
  renderFirstPage={() => (<span>First</span>)}
  renderLastPage={() => (<span>Last</span>)}
  onChange={(pageNumber) => {
    setState({ activePage: pageNumber });
  }}
/>
```
npm package: @hawk-ui/parallax
Description: hawk-ui: Basic Parallax Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/parallax --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/parallax/dist/index.min.css
```


## Usage


#### With Close Button and background dark
[Demo](https://hawk.oncrypt.co/#!/Parallax/1)
```js static
import Parallax from '@hawk-ui/parallax';
```
```js
initialState = {};

<Parallax
  panes={[
    'https://cdn2.hubspot.net/hubfs/1951013/Parallax/SkyBG.png',
    'https://cdn2.hubspot.net/hubfs/1951013/Parallax/Clouds1.png',
    'https://cdn2.hubspot.net/hubfs/1951013/Parallax/Clouds2.png',
    'https://cdn2.hubspot.net/hubfs/1951013/Parallax/Clouds3.png',
    'https://cdn2.hubspot.net/hubfs/1951013/Parallax/Moon.png',
    'https://cdn2.hubspot.net/hubfs/1951013/Parallax/Hill.png',
  ]}
  style={{
    height: '320px',
  }}
/>
```
npm package: @hawk-ui/password-strength
Description: hawk-ui: Basic Password Strength Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/password-strength --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/password-strength/dist/index.min.css
```


## Usage


#### Password Strength
[Demo](https://hawk.oncrypt.co/#!/PasswordStrength/1)
```js static
import PasswordStrength from '@hawk-ui/password-strength';
```
```js
initialState = {
  password: ''
};

<div>
  <input
    type="password"
    className="hawk-input"
    placeholder="Enter a password"
    value={state.password}
    onChange={(event) => {
      setState({ password: event.target.value });
    }}
  />

  <PasswordStrength
    value={state.password}
  />
</div>
```
npm package: @hawk-ui/pill
Description: hawk-ui: Basic Pill Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/pill --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/pill/dist/index.min.css
```


## Usage


#### Pill:
[Demo](https://hawk.oncrypt.co/#!/Pill/1)
```js static
import Pill from '@hawk-ui/pill';
```
```js
<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <Pill>
    <span>Default</span>
  </Pill>

  <Pill
    variant="tab"
  >
    <span>Inactive</span>
  </Pill>

  <Pill
    variant="tab"
    icon="fa fa-file"
    isActive
  >
    <span>Active</span>
  </Pill>

  <Pill
    variant="counter"
  >
    <span>10</span>
  </Pill>

  <Pill
    variant="step"
    stepIndex="1"
  >
    <span>Inactive Pill</span>
  </Pill>

  <Pill
    variant="step"
    stepIndex="1"
    isActive
  >
    <span>Active Pill</span>
  </Pill>

  <Pill
    variant="step"
    icon="fa fa-file"
    iconPlacement="right"
    isActive
    onClick={(e) => { alert('Click on Actionable tag'); }}
    isHover
  >
    <span>Clickable</span>
  </Pill>
</div>
```
npm package: @hawk-ui/progress-bar
Description: hawk-ui: Basic Progress Bar Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/progress-bar --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/progress-bar/dist/index.min.css
```


## Usage


#### Progress Bar With Vary Color
[Demo](https://hawk.oncrypt.co/#!/ProgressBar/1)
```js static
import ProgressBar from '@hawk-ui/progress-bar';
```
```js
<ProgressBar
  value={7}
  maxRange={10}
/>
```


#### Progress Bar With Same Color
[Demo](https://hawk.oncrypt.co/#!/ProgressBar/3)
```js static
import ProgressBar from '@hawk-ui/progress-bar';
```
```js
<ProgressBar
  value={85}
  maxRange={100}
  isColorVary={false}
  isProgress
/>
```
npm package: @hawk-ui/radio
Description: hawk-ui: Basic Radio Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/radio --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/radio/dist/index.min.css
```


## Usage


#### Without Required
[Demo](https://hawk.oncrypt.co/#!/Radio/1)
```js static
import Radio from '@hawk-ui/radio';
```
```js
initialState = {
  fruits: [
    { key: 1, label: 'apple', value: 'apple' },
    { key: 1, label: 'mango', value: 'mango' },
    { key: 1, label: 'banana', value: 'banana' },
    { key: 1, label: 'orange', value: 'orange' },
    { key: 1, label: 'pineapple', value: 'pineapple' },
  ],
  selectedItem: '',
};

<Radio
  options={state.fruits}
  selectedItem={state.selectedItem}
  onChange={(event) => {
    setState({
      selectedItem: event.target.value
    });
  }}
/>
```


#### With Required
[Demo](https://hawk.oncrypt.co/#!/Radio/3)
```js static
import Radio from '@hawk-ui/radio';
```
```js
initialState = {
  fruits: [
    { key: 1, label: 'apple', value: 'apple' },
    { key: 1, label: 'mango', value: 'mango' },
    { key: 1, label: 'banana', value: 'banana' },
    { key: 1, label: 'orange', value: 'orange' },
    { key: 1, label: 'pineapple', value: 'pineapple' },
  ],
  selectedItem: '',
};

<Radio
  label="Select Fruit"
  options={state.fruits}
  selectedItem={state.selectedItem}
  onChange={(event) => {
    setState({
      selectedItem: event.target.value
    });
  }}
  isRequired
  isError
  errorMessage="This field is a compulsory field."
/>
```


#### Without object
[Demo](https://hawk.oncrypt.co/#!/Radio/5)
```js static
import Radio from '@hawk-ui/radio';
```
```js
initialState = {
  isChecked: false,
};

<Radio
  label="Select Radio"
  title="Title"
  value="title"
  isChecked={state.isChecked}
  onChange={(event) => {
    setState({
      isChecked: !state.isChecked,
    });
  }}
  htmlAttributes={{
    disabled: true,
  }}
/>
```
npm package: @hawk-ui/range-slider
Description: hawk-ui: Range Slider Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/range-slider --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/range-slider/dist/index.min.css
```


## Usage


#### Default Range Slider
[Demo](https://hawk.oncrypt.co/#!/RangeSlider/1)
```js static
import RangeSlider from '@hawk-ui/range-slider';
```
```js
initialState = {
  range: 50,
};

<RangeSlider
  valueId="rangeValue1"
  rangeId="range1"
  value={state.range}
  onChange={(value) => {
    setState({
      range: value,
    });
  }}
/>
```


#### Range Slider 0 - 50
[Demo](https://hawk.oncrypt.co/#!/RangeSlider/3)
```js static
import RangeSlider from '@hawk-ui/range-slider';
```
```js
initialState = {
  range: 20,
};

<RangeSlider
  valueId="rangeValue2"
  rangeId="range2"
  min={0}
  max={50}
  step={5}
  value={state.range}
  onChange={(value) => {
    setState({
      range: value,
    });
  }}
/>
```
npm package: @hawk-ui/rating
Description: hawk-ui: Basic Rating Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/rating --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/rating/dist/index.min.css
```


## Usage


#### Rating
[Demo](https://hawk.oncrypt.co/#!/Rating/1)
```js static
import Rating from '@hawk-ui/rating';
```
```js
<Rating
  active={3}
  onClick={(item) => { console.log('item', item); }}
/>
```
npm package: @hawk-ui/resizable
Description: hawk-ui: Resizable Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/resizable --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/resizable/dist/index.min.css
```


## Usage


#### Draggable And Resizable
[Demo](https://hawk.oncrypt.co/#!/Resizable/1)
```js static
import Resizable from '@hawk-ui/resizable';
```
```js
<div style={{ position: 'relative' }}>
  <Resizable
    config={{
      id: 'resizable',
      width: '350px',
      height: '100px',
    }}
  >
    <div id="resizable">
      <p>Move</p>
      <p>this</p>
      <p>DIV</p>
    </div>
  </Resizable>
</div>
```
npm package: @hawk-ui/rich-text-editor
Description: hawk-ui: Rich Text Editor Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/rich-text-editor --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/rich-text-editor/dist/index.min.css
```


## Usage


#### Rich Text Editor
[Demo](https://hawk.oncrypt.co/#!/RichTextEditor/1)
```js static
import RichTextEditor from '@hawk-ui/rich-text-editor';
```
```js
initialState = {
  body: '',
};

<RichTextEditor
  label="Rich Text Editor"
  toolbarClass="toolbar"
  editableClass="editable"
  editableId="containerEditable1"
  placeholder="Click here to start typing"
  toolbarItems={[
    'bold', 'italic', 'underline', 'link', 'unlink', 'strike through', 'ordered list'
    , 'unordered list', 'formatblock', 'cut', 'copy', 'print', 'preformatted text', 'header', 'font family'
    , 'font size', 'select all', 'text color picker', 'background color picker', 'remove format', 'clean', 'divider', 'left justify'
    , 'center justify', 'right justify', 'outdent', 'indent', 'undo', 'redo', 'image',
  ]}
  htmlAttributes={{
    rows: '5',
  }}
  value={state.body}
  onChange={({ html, text }) => {
    setState({ body: html });
  }}
  isBottomOptions
  description="Here rich text editor description"
/>
```
npm package: @hawk-ui/stepper
Description: hawk-ui: Basic Stepper Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/stepper --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/stepper/dist/index.min.css
```


## Usage


#### Horizontal Stepper
[Demo](https://hawk.oncrypt.co/#!/Stepper/1)
```js static
import Stepper from '@hawk-ui/stepper';
```
```js
const panes = [
  {
    title: '01',
    description: 'First',
  },
  {
    title: '02',
    description: 'Second',
  },
  {
    title: '03',
    description: 'Third',
  },
];

initialState = {
  activeIndex: 0,
};

<div>
  <Stepper
    panes={panes}
    activeIndex={state.activeIndex}
  />

  <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
    <button
      type="button"
      className="hawk-button"
      disabled={state.activeIndex === 0}
      onClick={() => {
        setState({ activeIndex: state.activeIndex - 1 });
      }}
      style={{ marginRight: '10px' }}
    >
      Prev
    </button>
    <button
      type="button"
      className="hawk-button"
      disabled={state.activeIndex === 3}
      onClick={() => {
        setState({ activeIndex: state.activeIndex + 1 });
      }}
    >
      Next
    </button>
  </div>
</div>
```
npm package: @hawk-ui/suggestions
Description: hawk-ui: Basic Suggestions Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/suggestions --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/suggestions/dist/index.min.css
```


## Usage


#### Suggestions
[Demo](https://hawk.oncrypt.co/#!/Suggestions/1)
```js static
import Suggestions from '@hawk-ui/suggestions';
```
```js
const countries = [
  {title: 'Argentina', value: 'argentina'},
  {title: 'Australia', value: 'australia'},
  {title: 'Belgium', value: 'belgium'},
  {title: 'Bhutan', value: 'bhutan' },
  {title: 'Brazil', value: 'brazil' },
  {title: 'Canada', value: 'canada' },
  {title: 'China', value: 'china' },
  {title: 'Colombia', value: 'colombia' },
  {title: 'Egypt', value: 'egypt' },
  {title: 'Finland', value: 'finland' },
  {title: 'Georgia', value: 'georgia' },
  {title: 'Germany', value: 'germany' },
  {title: 'India', value: 'india' },
  {title: 'Indonesia', value: 'indonesia' },
];

initialState = {
  value: '',
};

<Suggestions
  suggestions={countries}
  renderSuggestion={(suggestion) => suggestion.title}
  searchContent={['title']}
  onSuggestionSelect={(value, meta) => {
    if (meta.isSuggestion) {
      window.alert(value.title);
    } else {
      window.alert(value);
    }
  }}
>
  <p>Suggestions Input</p>
  <br />
  <Suggestions.INPUT
    placeholder="Search country name"
    value={state.value}
    onChange={(event) => {
      setState({
        value: event.target.value,
      });
    }}
  />
  <br />
  <p>Suggestions Wrap</p>
  <br />
  <Suggestions.CONTAINER
    children={(
      <>
        <Input
          type="text"
        />
        <Button>
          <span>Create</span>
        </Button>
      </>
    )}
    messageIfEmpty="No item Found"
    onSuggestionClick={(value) => {
      window.alert(value.title);
    }}
  />
</Suggestions>
```
npm package: @hawk-ui/tag
Description: hawk-ui: Basic Tag Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/tag --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/tag/dist/index.min.css
```


## Usage


#### Tags
[Demo](https://hawk.oncrypt.co/#!/Tag/1)
```js static
import Tag from '@hawk-ui/tag';
```
```js
<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <Tag>
    <span>Without icon</span>
  </Tag>

  <Tag
    icon="fa fa-plus"
  >
    <span>With left icon</span>
  </Tag>

  <Tag
    icon="fa fa-plus"
    iconPlacement="right"
  >
    <span>With right icon</span>
  </Tag>

  <Tag
    onClick={(e) => { alert('Click on Actionable tag'); }}
    isHover
  >
    <span>With clickable</span>
  </Tag>
</div>
```
npm package: @hawk-ui/tags-input
Description: hawk-ui: Basic Tags Input Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/tags-input --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/tags-input/dist/index.min.css
```


## Usage


#### Tags Input
[Demo](https://hawk.oncrypt.co/#!/TagsInput/1)
```js static
import TagsInput from '@hawk-ui/tags-input';
```
```js
const suggestions = [
  {title: 'Argentina', value: 'argentina'},
  {title: 'Australia', value: 'australia'},
  {title: 'Belgium', value: 'belgium'},
  {title: 'Bhutan', value: 'bhutan' },
  {title: 'Brazil', value: 'brazil' },
  {title: 'Canada', value: 'canada' },
  {title: 'China', value: 'china' },
  {title: 'Colombia', value: 'colombia' },
  {title: 'Egypt', value: 'egypt' },
  {title: 'Finland', value: 'finland' },
  {title: 'Georgia', value: 'georgia' },
  {title: 'Germany', value: 'germany' },
  {title: 'India', value: 'india' },
  {title: 'Indonesia', value: 'indonesia' },
];

initialState = {
  suggestionContent: suggestions,
  selectedItem: [],
  searchValue: '',
};

<TagsInput
  label="Tags Input"
  suggestions={state.suggestionContent}
  placeholder="Select anyone"
  searchValue={state.searchValue}
  onChange={(event) => {
    setState({
      searchValue: event.target.value,
    })
  }}
  searchContent={['title']}
  renderSuggestion={(suggestion) => suggestion.title}
  messageIfEmpty="No Item Found"
  onAddTag={(item, meta) => {
    if (meta.isSuggestion) {
      setState(prevState => ({
        selectedItem: [...prevState.selectedItem, item.value],
        searchValue: '',
      }));
    } else {
      setState(prevState => ({
        selectedItem: [...prevState.selectedItem, item],
        searchValue: '',
      }));
    }
  }}
  onRemoveTag={(item, index, meta) => {
    setState({
      selectedItem: state.selectedItem.filter((item, i) => i !== index),
    });
  }}
  tags={state.selectedItem}
  renderTag={tag => tag}
  isRequired
  isError
  errorMessage="This field is a compulsory field."
/>
```
npm package: @hawk-ui/time-picker
Description: hawk-ui: Basic Time Picker Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/time-picker --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/time-picker/dist/index.min.css
```


## Usage


#### Time Picker:
[Demo](https://hawk.oncrypt.co/#!/TimePicker/1)
```js static
import TimePicker from '@hawk-ui/time-picker';
```
```js
<TimePicker
  onSelect={(event) => { console.log('event', event); }}
  dateTime="2020-10-01T01:30:27+05:30"
/>
```
npm package: @hawk-ui/timeline
Description: hawk-ui: Basic Timeline Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/timeline --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/timeline/dist/index.min.css
```


## Usage


#### Timeline
[Demo](https://hawk.oncrypt.co/#!/Timeline/1)
```js static
import Timeline from '@hawk-ui/timeline';
```
```js
<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <Timeline
    panes={[
      {
        title: 'August 30, 2017',
        content: (
          <span>My first YouTube video was a tutorial on how to build a client-server sockets app in Java.</span>
        ),
      },
      {
        title: 'February 25, 2019',
        content: (
          <div>
            <p>To celebrate 5,000 subscribers, I published a video answering some of the most popular questions which my viewers had asked me since starting my YouTube channel.</p>
            <p>I didn't even remove the jumper in the background before recording that video</p>
          </div>
        ),
      },
      {
        title: 'June 3, 2020',
        content: (
          <span>In my first ever live stream, I couldn't put my cup of coffee down.</span>
        ),
      },
      {
        title: 'June 28, 2021',
        content: (
          <div>
            <span>Published this video.</span>
            <span>Link to code in description</span>
          </div>
        ),
      },
    ]}
  />
</div>
```
npm package: @hawk-ui/toggle
Description: hawk-ui: Basic Toggle Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/toggle --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/toggle/dist/index.min.css
```


## Usage


#### Without Required
[Demo](https://hawk.oncrypt.co/#!/Toggle/1)
```js static
import Toggle from '@hawk-ui/toggle';
```
```js
initialState = {
  name: 'fruits',
  value: 'apple',
  isChecked: false,
};

<Toggle
  name={state.name}
  value={state.value}
  isChecked={state.isChecked}
  onChange={(event) => {
    setState({
      isChecked: !state.isChecked,
    });
  }}
/>
```


#### With Required
[Demo](https://hawk.oncrypt.co/#!/Toggle/3)
```js static
import Toggle from '@hawk-ui/toggle';
```
```js
initialState = {
  name: 'fruits',
  value: 'apple',
  isChecked: false,
};

<Toggle
  label="Toggle"
  name={state.name}
  value={state.value}
  isChecked={state.isChecked}
  onChange={(event) => {
    setState({
      isChecked: !state.isChecked,
    });
  }}
  isRequired
  isError={!state.isChecked}
  errorMessage="This field is a compulsory field."
/>
```


#### With Disabled
[Demo](https://hawk.oncrypt.co/#!/Toggle/5)
```js static
import Toggle from '@hawk-ui/toggle';
```
```js
initialState = {
  name: 'fruits',
  isChecked: false,
};

<Toggle
  name={state.name}
  isChecked={state.isChecked}
  isDisabled
/>
```
npm package: @hawk-ui/tooltip
Description: hawk-ui: Basic Tooltip Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/tooltip --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/tooltip/dist/index.min.css
```


## Usage


#### Tooltip with content:
[Demo](https://hawk.oncrypt.co/#!/Tooltip/1)
```js static
import Tooltip from '@hawk-ui/tooltip';
```
```js
<Tooltip
  position="right"
  content="Tooltip"
>
  Hover me
</Tooltip>
```


#### Tooltip with options:
[Demo](https://hawk.oncrypt.co/#!/Tooltip/3)
```js static
import Tooltip from '@hawk-ui/tooltip';
```
```js
const panes = [
  <i class="fas fa-edit" />,
  <i class="fas fa-trash" />,
];

<Tooltip
  position="bottom"
  content={panes}
>
  Hover me
</Tooltip>
```


#### Tooltip disabled:
[Demo](https://hawk.oncrypt.co/#!/Tooltip/1)
```js static
import Tooltip from '@hawk-ui/tooltip';
```
```js
<Tooltip
  position="right"
  content="Tooltip"
  isDisabled
>
  Hover me
</Tooltip>
```
npm package: @hawk.so/nuxt
Description: Hawk error tracker integration to Nuxt app
Latest version: 1.0.1

# @hawk.so/nuxt

[![npm version][npm-version-src]][npm-version-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]

[Hawk](https://hawk.so) error tracker integration for Nuxt app

## Features

- 😋 Effortless installation
- 🦅 Track errors seamlessly across your Nuxt app
- 💼 Composable for manually sending errors and logs
- 💌 Sends release info with source maps

## Quick Setup

Install the module with one command:

```bash
npx nuxi module add @hawk.so/nuxt
```

Then connect and configure to your `nuxt.config.ts`. Pass there an Integration Token you got from Hawk project. 
You can pass it directly or use .env file wich is supported by Nuxt out of the box.

```ts
export default defineNuxtConfig({
  modules: [
    '@hawk.so/nuxt'
  ],
  hawk: {
    token: process.env.HAWK_TOKEN,
  },
})
```

## Passing additional options

You can pass `user`, `context`, `beforeSend` and other [JS Catcher options](https://github.com/codex-team/hawk.javascript?tab=readme-ov-file#usage) via `catcherOptions` config property.

```ts
export default defineNuxtConfig({
  modules: [
    '@hawk.so/nuxt'
  ],

  hawk: {
    token: process.env.HAWK_TOKEN,
    catcherOptions: {
      context: {
        // any data you want to send with all events
        appName: 'Hawk Nuxt Playground',
      },
      // method for filtering/modifying an event to be sent
      beforeSend: (event) => {
        event.context.appVersion = '1.0.0'

        return event
      },
    },
  },
})
```

## Contribution

<details>
  <summary>Local development</summary>

  <p>Copy .env.example to the .env file in /playground. Put Hawk Integration Token in there.</p>
  
  ```bash
  # Install dependencies
  yarn
  
  # Generate type stubs
  yarn run dev:prepare
  
  # Develop with the playground
  yarn run dev
  
  # Build the playground
  yarn run dev:build
  
  # Run ESLint
  yarn run lint
  
  # Run Vitest
  yarn run test
  yarn run test:watch
  
  # Release new version
  yarn run release
  ```

</details>


<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/@hawk.so/nuxt/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/@hawk.so/nuxt

[license-src]: https://img.shields.io/npm/l/@hawk.so/nuxt.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/@hawk.so/nuxt

[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com
npm package: @hawk.so/vite-plugin
Description: Vite plugin for sending source-maps to the Hawk
Author: CodeX
Latest version: 1.0.6

# Hawk Vite Plugin

Vite plugin for sending releases with sourcemaps to Hawk.

## Install

```shell
yarn add @hawk.so/vite-plugin -D
```

## Connect

Include the plugin to the plugins list of `vite.config` file

```js
import hawkVitePlugin from '@hawk.so/vite-plugin';

export default defineConfig({
  plugins: [
    ...,
    hawkVitePlugin({
      token: '' // Your project's Integration Token
    })
  ]
})
```

### Plugin options

| name | type | required | description |
| -- | -- | -- | -- |
| `token` | string | **required** | Your project's Integration Token |
| `release` | string/number | optional | Unique identifier of the release. Used for source map consuming (see below) |
| `removeSourceMaps` | boolean | optional | Shows if the plugin should remove emitted source map files. Default is `true` |
| `collectorEndpoint` | string | optional | Sourcemaps collector endpoint overwrite |

### Connect Release to JavaScript catcher

After plugin finish its work, it will export release information to the global scope. 
You can access release identifier via `window.HAWK_RELEASE` in browser and `global.HAWK_RELEASE` in NodeJS and pass this data to the JavaScript Catcher on initialization.

#### TypeScript

To make TypeScript see typings for `window.HAWK_RELEASE` and `global.HAWK_RELEASE` add their declaration in your "tsconfig.json"

```json
{
  "compilerOptions" : {
    "types": {
      "@hawk.so/vite-plugin/global"
    }
  }
}
```
npm package: @hawk1430/word-cli
Description: A CLI tool to count word frequency in a file
Author: Prashant Raj
Latest version: 1.0.1

# @hawk1430/word-cli

A lightweight Node.js CLI tool to count word frequency in a text file. It can either display the frequency of all words or return the count of a specific word.

---

## Features

- Counts frequency of all words in a file
- Searches for a specific word and returns its count
- Works with any plain text file
- Built using modern Node.js (ES Modules)
- Simple, fast, and dependency-free

---

## Installation

Install globally using npm:

npm install -g @hawk1430/word-cli

---

## Usage

### Count all words in a file

hawk-word-cli <file-path>

Example:

hawk-word-cli ./sample.txt

Output:

{
  "hello": 3,
  "world": 2,
  "node": 1
}

---

### Count a specific word

hawk-word-cli <file-path> <word>

Example:

hawk-word-cli ./sample.txt hello

Output:

3

If the word is not found:

The word is not present in the given file

---

## CLI Help

If the file path is missing:

✖ Usage: word-cli <file-path> [word]

---

## How It Works

- Reads the file using fs/promises
- Splits content using non-word characters (/\W+/)
- Stores word frequencies using a Map
- Outputs either:
  - A full word-frequency object, or
  - The count of a specific word

---

## Requirements

- Node.js v18 or later
- npm installed

---

## Author

Prashant Raj

---

## License

This project is licensed under the MIT License.