open-index/open-npm huggingface dataset:
npm package: @morph-ui/core
Description: Morph es un sistema de diseño web hecho en CSS que permite desarrollar componentes para Interfaces Gráficas de Usuario en la Web. Asi mismo, permite hacerlo sin depender de ningun framework de forma exclusiva en JS.
Author: techfano
Latest version: 2.0.6

![Morph Logo](https://i.ibb.co/zJkJJxZ/Morph-new-logo.png)

## ¿Qué es Morph?

Morph es un Sistema de Diseño web hecho en CSS que permite desarrollar componentes para Interfaces Gráficas de Usuario. Así mismo, permite hacerlo sin depender de ningun framework de forma exclusiva en JS.

## ¿Como instalar para desarrollar?

**Requisitos para trabajar en el proyecto**

- [Instalar NodeJS](https://nodejs.org/es/download/)

**Después de clonar el repositorio, debes ejecutar los siguientes comandos**

- npm start - permite iniciar el proyecto
- npm run build - permite construir el empaquetado de CSS

**Para desarrollo web puedes agregar el core CSS de morph via npm**

 ``` [language]
 npm i @morph-ui/core
 ```

**Luego en tu proyecto de JS puedes importarlo asi**

 ``` [language]
 import '@morph-ui/core/morph-2.0.0.css';
 ```

## ¿Que tecnologías usa Morph?

- [Webpack](https://webpack.js.org)
- [PostCSS](https://postcss.org/)

## Reporte de bugs o comunicación con el Equipo

 - Estefano Castañeda (conecta@peru-dev.org)

## Documento de diseño en DRIVE

En el siguiente documento podras ver los componentes que estamos trabajando y en que estado se encuentran

[Documento en DRIVE](https://docs.google.com/spreadsheets/d/1upglq53m6xZUzN35i2-XfHkaHwmktH4aqBwMqToDD04/edit?usp=sharing)
npm package: @morphatic/charts
Description: A charting library for Angular 5+ that uses d3 and d3kit.
Author: Morgan Benton
Latest version: 0.1.3

# Morphatic Charts

This is a library of [Angular](https://angular.io) components that can create data visualizations using the powerful [d3](https://d3js.org) framework, and the [d3Kit](https://github.com/twitter/d3kit) library, which is designed to make it easier to create reusable d3 code. These charts should also work within [Ionic](https://ionicframework.com) projects, as well.

## Installation

To install, from the root directory of your project type:

```
npm i -S d3 d3kit @morphatic/charts
```

The `d3` and `d3Kit` libraries are listed as `peerDependencies` so you have to explicitly install them separately.

Then in the `app.module.ts` file in your project, `import` the `MorphaticChartsModule` and add it to the `imports` array of your `@NgModule` decorator as follows:

```
import { BrowserModule         } from '@angular/platform-browser';
import { NgModule              } from '@angular/core';
import { AppComponent          } from './app.component';
import { MorphaticChartsModule } from '@morphatic/charts';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    BrowserModule,
    MorphaticChartsModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule {}
```

At this point, the various different chart components will be available to your templates.

## Using the Chart Components

To use the chart components, all you need to do is add the right tag to the appropriate template, and provide it with data in the correct format. The format of the expected data will differ for each type of chart and will be explained below.

### Bar Charts

Bar charts consist of vertical bars representing the numeric values of a collection of categories or dates.

![Example Bar Chart created with Morphatic Charts](https://i.imgur.com/j8K7nfa.png?1)

In your template you should add a tag as follows:

```
<bar-chart [data]="barData"></bar-chart>
```

The variable `barData` is an array of `BarDatum` objects which have a pre-defined signature. In your component's `.ts` file, you should have something like:

```
import { Component } from '@angular/core';
import { BarDatum  } from '@morphatic/charts';

@Component({
  selector: 'home-page',
  templateUrl: './home.html'
})
export class HomePage {

  barData: BarDatum[];

  constructor() {
    this.barData = [
      {
        category: "apples",
        value: 12
      },
      {
        category: "oranges",
        value: 7
      },
      {
        category: "pears",
        value: 15
      }
    ];
  }
}
```

This code would generate a bar chart with three bars with the labels shown in the categories. Of course, data can be generated any way you like, e.g. retrieved from a database, pulled from a REST API, etc. It's also possible to change the chart, just by changing the data. The charts are fully styleable with CSS.
npm package: @morphcms/collections-module
Description: ## Installation
Author: Codrin Axinte
Latest version: 1.0.2

# Collections Module

## Installation

```shell
npm install @morphcms/collections-module
```

## Basic Usage

```javascript
import {Collection} from "lib/models/collection.js"

Collection.$query().get();
```


For more usage methods please refer to the [orion documentation](https://tailflow.github.io/laravel-orion-docs/v2.x/guide/typescript-sdk/models.html#operations).