open-index/open-npm huggingface dataset:
npm package: @ngx-p5/core
Description: This package provides an easy way to use p5 instance mode, working with classes and CSS selector to attach your sketch. Demo [here!](https://codepen.io/redfox-mx/pen/VwWaVgP)
Author: Diego Hernandez
Latest version: 0.2.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @ngx-p5/core

This package provides an easy way to use p5 instance mode, working with classes and CSS selector to attach your sketch. Demo [here!](https://codepen.io/redfox-mx/pen/VwWaVgP)

## Installation
```bash
npm install @ngx-p5/core p5
# or
yarn add @ngx-p5/core p5
```
Optional, you can install `@types/p5` 

## How to use

```javascript
const sketch = function (p: p5) {  // if you install @types/p5
  /* your awsome sketch */
  p.setup = function() {
    p.createCanvas(200, 400)
    /*  code */
  }

  p.draw = function() {
    p.line(p.width / 2, 0, p.width / 2, 0);
    /* motion and magic here */
  }
}

createCanvas(sketch, '#awsome-sketch');
```

Optionally you can create a class to manage complexity or integrate with another class base library.

```javascript
class AwsomeSketch {
    setup(p: any ) { // with typescript 
      /* your setup */
    }
    draw(p) { // with javascript
      /* magic here! */
      p.background(0) // black magic color
    }
}

const sketch = toSketch(new AwsomeSketch());
createCanvas(sketch, '#awsome-sketch');
```

__Example__: you can see in action in [codepen](https://codepen.io/redfox-mx/pen/VwWaVgP)

![Fractals](./.assets/example.png)

You can use defaul functionality and ommit second param to attach sketch to body `createCanvas(sketch)`.
npm package: @ngx-parcel/schematics
Description: A blank schematics
Latest version: 0.0.0-development.0

# Getting Started With Schematics

This repository is a basic Schematic implementation that serves as a starting point to create and publish Schematics to NPM.

### Testing

To test locally, install `@angular-devkit/schematics-cli` globally and use the `schematics` command line tool. That tool acts the same as the `generate` command of the Angular CLI, but also has a debug mode.

Check the documentation with
```bash
schematics --help
```

### Unit Testing

`npm run test` will run the unit tests, using Jasmine as a runner and test framework.

### Publishing

To publish, simply do:

```bash
npm run build
npm publish
```

That's it!
npm package: @ngx-performance-ui/core
Description: Ngx Performance UI - Core
Author: Mehmet Erim
Latest version: 0.0.16

# NGX PERFORMANCE UI

<p align="center">
  <a href="https://travis-ci.org/mehmet-erim/ngx-performance-ui"><img src="https://travis-ci.org/mehmet-erim/ngx-performance-ui.svg?branch=develop"/></a>
  <img src="https://img.shields.io/github/license/mehmet-erim/ngx-performance-ui.svg" />
  <img src="https://img.shields.io/codeclimate/maintainability-percentage/mehmet-erim/ngx-performance-ui.svg" />
  <a href="https://twitter.com/mehmterim"><img src="https://img.shields.io/twitter/follow/mehmterim.svg?label=Follow"/></a>
</p>

## Live demo

[Check out the demo page](https://ngx-performance-ui.firebaseapp.com)

## Installation

```bash
yarn add @ngx-performance-ui/core @ngx-performance-ui/ui
```

or

```bash
npm install @ngx-performance-ui/core @ngx-performance-ui/ui
```

Core Peer Dependencies:

```json
  "peerDependencies": {
    "@angular/core": ">=7.0.0 <8.0.0",
    "@angular/common": ">=7.0.0 <8.0.0",
    "@angular/forms": ">=7.0.0 <8.0.0",
    "angular2-text-mask": ">=9.0.0",
    "rxjs": ">=6.0.0",
    "@ngxs/store": ">=3.3.0",
    "just-compare": ">=1.3.0"
  }
```

UI Peer Dependencies:

```json
  "peerDependencies": {
    "@fortawesome/angular-fontawesome": ">=0.3.0",
    "@fortawesome/fontawesome-svg-core": ">=1.2.0",
    "@fortawesome/free-solid-svg-icons": ">=5.8.0",
    "@ngx-performance-ui/core": "^0.0.16",
    "angular2-text-mask": ">=9.0.0",
    "ng2-datepicker": ">=3.1.0",
    "ngx-perfect-scrollbar": ">=7.0.0",
    "ngx-slickjs": ">=1.3.0"
  },
```

### Installation Peer Dependencies

```bash
yarn add @ngxs/store just-compare @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons ng2-datepicker ngx-perfect-scrollbar ngx-slickjs
```

or

```bash
npm install @ngxs/store just-compare @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons ng2-datepicker ngx-perfect-scrollbar ngx-slickjs
```

## Usage

Import Core and UI module to your app.module

```typescript
import { CoreModule } from '@ngx-performance-ui/core';
import { UiModule } from '@ngx-performance-ui/ui';
import { NgxsModule } from '@ngxs/store';
import { NgxSlickJsModule } from 'ngx-slickjs';

@NgModule({
  imports: [
    NgxSlickJsModule.forRoot(),
    NgxsModule.forRoot(),
    CoreModule.forRoot(),
    UiModule,

    //...
  ]
```

Update 'styles' array from angular.json

```json
"styles": [
  "./node_modules/@ngx-performance-ui/ui/assets/bootstrap.min.css",
  "./node_modules/@ngx-performance-ui/ui/assets/main.css",
  //...
],
```

[See this readme on another page](https://nicedoc.io/mehmet-erim/ngx-performance-ui)
npm package: @ngx-performance-ui/ui
Description: Ngx Performance UI - UI
Author: Mehmet Erim
Latest version: 0.0.16

# NGX PERFORMANCE UI

<p align="center">
  <a href="https://travis-ci.org/mehmet-erim/ngx-performance-ui"><img src="https://travis-ci.org/mehmet-erim/ngx-performance-ui.svg?branch=develop"/></a>
  <img src="https://img.shields.io/github/license/mehmet-erim/ngx-performance-ui.svg" />
  <img src="https://img.shields.io/codeclimate/maintainability-percentage/mehmet-erim/ngx-performance-ui.svg" />
  <a href="https://twitter.com/mehmterim"><img src="https://img.shields.io/twitter/follow/mehmterim.svg?label=Follow"/></a>
</p>

## Live demo

[Check out the demo page](https://ngx-performance-ui.firebaseapp.com)

## Installation

```bash
yarn add @ngx-performance-ui/core @ngx-performance-ui/ui
```

or

```bash
npm install @ngx-performance-ui/core @ngx-performance-ui/ui
```

Core Peer Dependencies:

```json
  "peerDependencies": {
    "@angular/core": ">=7.0.0 <8.0.0",
    "@angular/common": ">=7.0.0 <8.0.0",
    "@angular/forms": ">=7.0.0 <8.0.0",
    "angular2-text-mask": ">=9.0.0",
    "rxjs": ">=6.0.0",
    "@ngxs/store": ">=3.3.0",
    "just-compare": ">=1.3.0"
  }
```

UI Peer Dependencies:

```json
  "peerDependencies": {
    "@fortawesome/angular-fontawesome": ">=0.3.0",
    "@fortawesome/fontawesome-svg-core": ">=1.2.0",
    "@fortawesome/free-solid-svg-icons": ">=5.8.0",
    "@ngx-performance-ui/core": "^0.0.16",
    "angular2-text-mask": ">=9.0.0",
    "ng2-datepicker": ">=3.1.0",
    "ngx-perfect-scrollbar": ">=7.0.0",
    "ngx-slickjs": ">=1.3.0"
  },
```

### Installation Peer Dependencies

```bash
yarn add @ngxs/store just-compare @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons ng2-datepicker ngx-perfect-scrollbar ngx-slickjs
```

or

```bash
npm install @ngxs/store just-compare @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons ng2-datepicker ngx-perfect-scrollbar ngx-slickjs
```

## Usage

Import Core and UI module to your app.module

```typescript
import { CoreModule } from '@ngx-performance-ui/core';
import { UiModule } from '@ngx-performance-ui/ui';
import { NgxsModule } from '@ngxs/store';
import { NgxSlickJsModule } from 'ngx-slickjs';

@NgModule({
  imports: [
    NgxSlickJsModule.forRoot(),
    NgxsModule.forRoot(),
    CoreModule.forRoot(),
    UiModule,

    //...
  ]
```

Update 'styles' array from angular.json

```json
"styles": [
  "./node_modules/@ngx-performance-ui/ui/assets/bootstrap.min.css",
  "./node_modules/@ngx-performance-ui/ui/assets/main.css",
  //...
],
```

[See this readme on another page](https://nicedoc.io/mehmet-erim/ngx-performance-ui)