open-index/open-npm huggingface dataset:
npm package: @lucasolivamorim/amazing-time-picker
Description: A visual time picker for angular 2+ projects. You can use this timepicker with Angular 2, 4, 5 and Angular Material. **This project doesn't require angular material or any other dependencies**
Latest version: 1.5.3

# Amazing Time Picker (Clock) ![Build Status](https://travis-ci.org/owsolutions/amazing-time-picker.svg?branch=master) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

A visual time picker for angular 2+ projects. You can use this timepicker with Angular 2, 4, 5 and Angular Material. **This project doesn't require angular material or any other dependencies**

## Install
You need to install this repository as dependency and import it to your `app.module.ts` in `imports` section.

```
npm install amazing-time-picker --save
```

then, open your `app.module.ts` or other module that you want to use timepicker among, and import and add it to the `imports` section:

```
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AmazingTimePickerModule } from 'amazing-time-picker'; // this line you need
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AmazingTimePickerModule // this line you need
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

This helps your angular project to build and compile it and let you use it.

## Using in component markup
After you have installed this module, you can use it within your html templates and give the directive to the any <input> tag. When user closes the dialog, it's gonna update the input value and will listen to input click event to open the dialog.

```html
<input atp-time-picker value="19:00"/>
```

## Opening component programmatically
You can also open a timepicker dialog programmatically. In order to open that, you need to import the service in your component:

```
import { AmazingTimePickerService } from 'amazing-time-picker';
```

Then add it inside your `app.component.ts` or any other component that you want to use timepicker inside of that.

```
import { Component } from '@angular/core';
import { AmazingTimePickerService } from 'amazing-time-picker'; // this line you need

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  
  constructor( private atp: AmazingTimePickerService, // this line you need
             ) { }

  open() {
    const amazingTimePicker = this.atp.open();
    amazingTimePicker.afterClose().subscribe(time => {
      console.log(time);
    });
  }
}
```


Online demo

![Amazing Time Picker | TimePicker | Materialize time picker | AmazingTimepicker | ClockPicker](time-picker.jpg)

https://owsolutions.github.io/amazing-time-picker/
npm package: @lucasols/dnd-kit-accessibility
Description: A generic toolkit to help with accessibility
Author: Claudéric Demers
Latest version: 0.1.3

# @dnd-kit/accessibility

[![Stable release](https://img.shields.io/npm/v/@dnd-kit/accessibility.svg)](https://npm.im/@dnd-kit/accessibility)

A generic set of components and hooks to help with live region announcements and screen reader instructions. This package is used internally by `@dnd-kit/core`.
npm package: @lucasols/dnd-kit-core
Description: dnd kit – a lightweight React library for building performant and accessible drag and drop experiences
Author: Claudéric Demers
Latest version: 0.1.4

# @dnd-kit/core

[![Stable release](https://img.shields.io/npm/v/@dnd-kit/core.svg)](https://npm.im/@dnd-kit/core)

@dnd-kit – a lightweight React library for building performant and accessible drag and drop experiences.

## Installation

To get started, install the `@dnd-kit/core` package via npm or yarn:

```
npm install @dnd-kit/core
```

## Usage

Visit [docs.dndkit.com](https://docs.dndkit.com) to learn how to get started with @dnd-kit.
npm package: @lucasols/dnd-kit-modifiers
Description: Translate modifier presets for use with `@dnd-kit` packages.
Author: Claudéric Demers
Latest version: 0.1.4

# @dnd-kit/modifiers

[![Stable release](https://img.shields.io/npm/v/@dnd-kit/modifiers.svg)](https://npm.im/@dnd-kit/sortable)

Modifiers let you dynamically modify the movement coordinates that are detected by sensors. They can be used for a wide range of use cases, for example:

- Restricting motion to a single axis
- Restricting motion to the draggable node container's bounding rectangle
- Restricting motion to the draggable node's scroll container bounding rectangle
- Applying resistance or clamping the motion

## Installation

To start using modifiers, install the modifiers package via yarn or npm:

```
npm install @dnd-kit/modifiers
```

## Usage

The modifiers repository contains a number of useful modifiers that can be applied on `DndContext` as well as `DragOverlay`.

```jsx
import {DndContext, DragOverlay} from '@dnd-kit';
import {
  restrictToVerticalAxis,
  restrictToWindowEdges,
} from '@dnd-kit/modifiers';

function App() {
  return (
    <DndContext modifiers={[restrictToVerticalAxis]}>
      {/* ... */}
      <DragOverlay modifiers={[restrictToWindowEdges]}>{/* ... */}</DragOverlay>
    </DndContext>
  );
}
```

As you can see from the example above, `DndContext` and `DragOverlay` can both have different modifiers.

## Built-in modifiers

### Restricting motion to an axis

#### `restrictToHorizontalAxis`

Restrict movement to only the horizontal axis.

#### `restrictToVerticalAxis`

Restrict movement to only the vertical axis.

### Restrict motion to a container's bounding rectangle

#### `restrictToWindowEdges`

Restrict movement to the edges of the window. This modifier can be useful to prevent the `DragOverlay` from being moved outside of the bounds of the window.

#### `restrictToParentElement`

Restrict movement to the parent element of the draggable item that is picked up.

#### `restrictToFirstScrollableAncestor`

Restrict movement to the first scrollable ancestor of the draggable item that is picked up.

### Snap to grid

#### `createSnapModifier`

Function to create modifiers to snap to a given grid size.

```javascript
import {createSnapModifier} from '@dnd-kit/modifiers';

const gridSize = 20; // pixels
const snapToGridModifier = createSnapModifier(gridSize);
```

### Snap to cursor

#### `snapCenterToCursor`

Snaps the center of the draggable item to the cursor when it is picked up. Has no effect when using the Keyboard sensor.

## Building custom modifiers

To build your own custom modifiers, refer to the implementation of the built-in modifiers of this package.

For example, here is an implementation to create a modifier to snap to grid:

```javascript
const gridSize = 20;

function snapToGrid(args) {
  const {transform} = args;

  return {
    ...transform,
    x: Math.ceil(transform.x / gridSize) * gridSize,
    y: Math.ceil(transform.y / gridSize) * gridSize,
  };
}
```
npm package: @lucasols/dnd-kit-sortable
Description: Official sortable preset and sensors for dnd kit
Author: Claudéric Demers
Latest version: 0.1.4

# @dnd-kit/sortable

[![Stable release](https://img.shields.io/npm/v/@dnd-kit/sortable.svg)](https://npm.im/@dnd-kit/sortable)

The sortable preset provides the building blocks to build sortable interfaces with @dnd-kit.

## Installation

To get started, install the sortable preset via npm or yarn:

```
npm install @dnd-kit/sortable
```

## Architecture

The sortable preset builds on top of the primitives exposed by `@dnd-kit/core` to help building sortable interfaces.

The sortable preset exposes two main concepts: `SortableContext` and the `useSortable` hook:

- The SortableContext provides information via context that is consumed by the `useSortable` hook.
- The useSortable hook is an abstraction that composes the `useDroppable` and `useDraggable` hooks.

![The useSortable hook is an abstraction that composes the useDroppable and useDraggable hooks](/.github/assets/use-sortable.png)

## Usage

Visit [docs.dndkit.com](https://docs.dndkit.com/presets/sortable) to learn how to use the Sortable preset.
npm package: @lucasols/dnd-kit-utilities
Description: Internal utilities to bee shared between `@dnd-kit` packages
Author: Claudéric Demers
Latest version: 0.1.3

# @dnd-kit/utilities

[![Stable release](https://img.shields.io/npm/v/@dnd-kit/utilities.svg)](https://npm.im/@dnd-kit/sortable)

Internal utilities to bee shared between `@dnd-kit` packages.
npm package: @lucasols/eslint-plugin-extended-lint
Description: To use any of these rules, you need to install the package:
Author: Lucas Santos
Latest version: 1.6.0

# Extended rules for eslint

To use any of these rules, you need to install the package:

```sh
pnpm add -D @lucasols/eslint-plugin-extended-lint
```

And then configure it in your eslint config:

```json
{
  "plugins": ["@lucasols/extended-lint"],
  "rules": {
    "@lucasols/extended-lint/no-unused-type-props-in-args": "error"
  }
}
```

## `no-unused-type-props-in-args`

Checks if there are unused type props in function arguments.

Examples

Bad

```ts
function foo({ a }: { a: string; b: string }) {
  /*                             ^ b is declared but not used in the function */
  // ...
}
```

Good

```ts
function foo({ a, b }: { a: string; b: string }) {
  // ...
}
```

It will also work with the react `FC` type:

Bad

```ts
const Foo: FC<{ a: string; b: string }> = ({ a }) => {
  /*                       ^ b is declared but not used in the component */
  // ...
}
```

Good

```
const Foo: FC<{ a: string; b: string }> = ({ a, b }) => {
  // ...
}
```

- This rule will not work in all situations, as it does not checks all possible usages of referenced types.

## `no-commented-out-code`

Checks if there are commented code. Block comments are ignored.

Examples

Bad:

```ts
// function foo() {
//   // ...
// }
```

Good:

```ts
/*
function foo() {
  // ...
}
*/
```

- This rule will not detect all possible commented code, and can give false negatives.

## `no-call-with-infered-generics`

This rule disallows calling functions with inferred generics.

The rule options types are as follows:

````ts
type Options = [
  {
    functions: Array<{
      name: string;
      minGenerics?: number;
      allowAny?: boolean;
      disallowTypes?: string[];
    }>;
    anyAliases?: string[];
  }
];

Examples:

Bad:

```ts
// @typescript-eslint/no-call-with-inferred-generics: ["error", { functions: ["foo"] }]

function foo<T>(arg: T) {
  // ...
}

foo('bar') // Error: Generics must be defined explicitly
foo<any>('bar') // Error: 'any' is not allowed in generics
````

Good:

```ts
// @typescript-eslint/no-call-with-inferred-generics: ["error", { functions: ["foo"] }]
function foo<T>(arg: T) {
  // ...
}

foo<string>('bar') // OK
```

## `rules-of-hooks`

A fork of the `eslint-plugin-react-hooks` `rules-of-hooks` rule, but with the following changes:

- Identifies hooks in camelCase namespaced functions (e.g. `test.useFoo()`)
npm package: @lucaspaganini/angular-utils
Description: Utilities for Angular projects
Author: Lucas Paganini
Latest version: 12.0.0

# Angular Utilities

Angular utilities presented in Lucas Paganini's [videos](https://www.youtube.com/channel/UCb2qfrlxS0kK9vca_fpjdNQ) and [articles](https://www.lucaspaganini.com/).

## Angular Compatibility

We support all [Angular active & LTS versions](https://angular.io/guide/releases#support-policy-and-schedule).

| Package version | Angular version |
| --------------: | --------------: |
|          12.x.x |          12.x.x |
|          11.x.x |          11.x.x |
|          10.x.x |          10.x.x |
|           9.x.x |           9.x.x |
npm package: @lucaspaganini/ts
Description: Utilities for TypeScript projects
Author: Lucas Paganini
Latest version: 0.0.0-alpha.2

# TypeScript Utilities

TypeScript utilities presented in Lucas Paganini's [videos](https://www.youtube.com/channel/UCb2qfrlxS0kK9vca_fpjdNQ) and [articles](https://www.lucaspaganini.com/learn).

- Exported in ES5
- Works on Node and browsers
- Full TypeScript coverage

## Contributing

Make sure you understand our [contributing guide](./CONTRIBUTING.md) before doing any work.