open-index/open-npm huggingface dataset:
npm package: @repicco/webcomponent-js
Description: componente de utilização JS
Author: Renato
Latest version: 1.0.2

# webcomponentJs

Criamos um repositorio
Criamos uma conta NPM

No repositorio executamos:

```
npm set init.author.email 'seu email'
npm set init.author.name 'seu nome'
npm set init.license MIT

npm adduser (acessar o user NPM)
```

Registrar o package.json:

```
npm init (Registrar o package Json)
```

Instalar o Babel:

```
npm install babel-cli babel-preset-env --save-dev
npm install nodemon -g
```

Publicando npm:

```
npm publish --access=public

```

Instalar a lib

```
yarn add -D @repicco/webcomponent-js@1.0.1 (versão)
```
npm package: @repick/react
Description: Primitives to build simple, flexible, WAI-ARIA compliant React date picker.
Latest version: 1.2.1

# repick

Primitives to build simple, flexible, WAI-ARIA compliant React date picker.

## Installation

You can install Repick with NPM, Yarn

```
npm install @repick/react --save
```

or

```
yarn add @repick/react
```

## Basic Usage

Package exports three hooks `useDatePicker`, `UseMultiDatePicker`, `useRangeDatePicker`. Usage of these hooks are mostly identical, only being difference type of `Selected`.

> [Try it out in the browser](https://codesandbox.io/s/repick-react-basic-example-5mbkk)

```js
import { useDatePicker } from '@repick/react'

function DatePicker() {
  const {
    getCalendarProps,
    getDateProps,
    getDialogProps,
    getInputProps,
    getLabelProps,
    getNextMonthProps,
    getPrevMonthProps,
    isOpen,
    monthLong,
    weekdays,
    weeks,
    year,
  } = useDatePicker()

  return (
    <>
      <label {...getLabelProps()}>Date</label>
      <input {...getInputProps()} />
      <div {...getDialogProps()}>
        {isOpen && (
          <>
            <nav>
              <button {...getPrevMonthProps()}>Next Month</button>
              {monthLong} {year}
              <button {...getNextMonthProps()}>Previous month</button>
            </nav>
            <table {...getCalendarProps()}>
              <thead>
                <tr>
                  {weekdays.map(weekday => (
                    <th key={`weekday-${weekday.short}`} abbr={weekday.long}>
                      {weekday.short}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {weeks.map(({ weekNumber, year, days }) => (
                  <tr key={`week-${year}-${weekNumber}`}>
                    {days.map(calendarDay => (
                      <td key={`date-${calendarDay.date.toDateString()}`}>
                        <button
                          {...getDateProps(calendarDay)}
                          style={{
                            color:
                              calendarDay.nextMonth || calendarDay.prevMonth
                                ? '#ccc'
                                : 'unset',
                            background: calendarDay.selected ? 'cyan' : 'unset',
                          }}
                        >
                          {calendarDay.day}
                        </button>
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </>
        )}
      </div>
    </>
  )
}
```