open-index/open-npm huggingface dataset:
npm package: @mkennedy3000/grid
Description: Typescript Immutable 2d grid with transformation functions
Author: mkennedy3000@gmail.com
Latest version: 0.1.0

# Grid

Typescript Immutable 2d grid with transformation functions.

## Install
```
npm install @mkennedy3000/grid
```

## Usage

[Create](#create)
* [constructor](#constructor)
* [`Grid.withRows(rows)`](#withrows)
* [`Grid.withCols(cols)`](#withcols)


[Reading the Grid](#reading-the-grid)
* [`get(x,y)`](#get)
* [`height`](#height)
* [`numRows`](#numrows)
* [`rows`](#rows)
* [`width`](#width)
* [`cols`](#cols)

[Transforms](#transforms)
* [`transpose()`](#transpose)
* Mirror
    * [`flipX()`](#flipx)
    * [`flipY()`](#flipy)
* Rotate
    * [`rotate90()`](#rotate90)
    * [`rotate180()`](#rotate180)
    * [`rotate270()`](#rotate270)

### Create

#### constructor
```typescript
const grid = new Grid([1,2,3,4,5,6], 3, 2);
```
```
1 2 3
4 5 6
```

#### `withRows()`
```typescript
const grid = Grid.withRows([[1,2,3],[4,5,6]]);
```
```
1 2 3
4 5 6
```

#### `withCols()`
```typescript
const grid = Grid.withCols([[1,4],[2,5],[3,6]]);
```
```
1 2 3
4 5 6
```

### Reading the Grid

#### `get`
```typescript
const grid = Grid.withRows([[1,2,3],[4,5,6]]);
grid.get(0,1); // => 4
grid.get(1,0); // => 2
```
#### `height`
```typescript
const grid = Grid.withRows([[1,2,3],[4,5,6]]);
grid.height; // => 2
```
#### `numRows`
```typescript
const grid = Grid.withRows([[1,2,3],[4,5,6]]);
grid.numRows; // => 2
```
#### `rows`
```typescript
const grid = Grid.withRows([[1,2,3],[4,5,6]]);
grid.rows; // => [[1,2,3],[4,5,6]]
```
#### `width`
```typescript
const grid = Grid.withRows([[1,2,3],[4,5,6]]);
grid.width; // => 3
```
#### `numCols`
```typescript
const grid = Grid.withRows([[1,2,3],[4,5,6]]);
grid.numCols; // => 3
```
#### `cols`
```typescript
const grid = Grid.withRows([[1,2,3],[4,5,6]]);
grid.numRows; // => [[1,4],[2,5],[3,6]]
```

### Transforms

Transforms return an entirely new Grid. The grid the transform was called on is unaffected.

#### `transpose()`
```typescript
const grid = Grid.withRows([[1,2,3],[4,5,6]]).transpose().transpose();
```
```
1 2 3 => 1 4 => 1 2 3
4 5 6    2 5    4 5 6
         3 6
```

#### `flipX()`
```typescript
const grid = Grid.withRows([[1,2,3],[4,5,6]]).flipX();
```
```
1 2 3 => 3 2 1
4 5 6    6 5 4
```

#### `flipY()`
```typescript
const grid = Grid.withRows([[1,2,3],[4,5,6]]).flipY();
```
```
1 2 3 => 4 5 6
4 5 6    1 2 3
```

#### `rotate90()`
```typescript
const grid = Grid.withRows([[1,2,3],[4,5,6]]).rotate90();
```
```
1 2 3 => 4 1
4 5 6    5 2
         6 3
```

#### `rotate180()`
```typescript
const grid = Grid.withRows([[1,2,3],[4,5,6]]).rotate180();
```
```
1 2 3 => 6 5 4
4 5 6    3 2 1
```

#### `rotate270()`
```typescript
const grid = Grid.withRows([[1,2,3],[4,5,6]]).rotate270();
```
```
1 2 3 => 3 6
4 5 6    2 5
         1 4
```
npm package: @mkennedy3000/ng-semantic-ui
Description: [![Build Status](https://travis-ci.org/mkennedy3000/ng-semantic-ui.svg?branch=master)](https://travis-ci.org/mkennedy3000/ng-semantic-ui) <p align="center">   <img src="https://github.com/mkennedy3000/Semantic-UI-Angular-2/blob/master/logo.png" width="128
Latest version: 1.0.0-alpha.1

[![Build Status](https://travis-ci.org/mkennedy3000/ng-semantic-ui.svg?branch=master)](https://travis-ci.org/mkennedy3000/ng-semantic-ui)
<p align="center">
  <img src="https://github.com/mkennedy3000/Semantic-UI-Angular-2/blob/master/logo.png" width="128">
</p>

# ng-semantic-ui

Pure Semantic UI Angular Components
npm package: @mkenzo_8/puffin
Description: A reusable components library for web.
Author: Marc Espín Sanz
Latest version: 1.1.8

## 🐧 PuffinJS

### 🤔 About

PuffinJS is a JavaScript library for creating reusable components for web.

### 🔬 Status

Pretty stable but, be careful when using on production. (WIP)

What does it have?
* Reusable components
	* Async rendering
	* Events binding
* Components styling
* State manager
* Events emitter
* Router
* Addons middlewares
* Language addon

### ⚽ Usage

Installing:
```shell
npm install @mkenzo_8/puffin
```

Importing:
```javascript
import { element, style, state, render, routerBox, routerLink, lang } from "@mkenzo_8/puffin"
```

**Example projects are located under /samples.**

Example:
```javascript
import { element, style, render } from '@mkenzo_8/puffin'

const myStyles = style`
	& {
		color: rgb(100,100,100);
	}
`

const App = () => {
	return element`
		<div class="${myStyles}">
			<h1>Hello World</h1>
			<button :click="${clickMe}">Click me</button>
		</div>
	`
}

function clickMe(){
	alert("Hello World!")
}

render(App(),document.body)

```

### 📜 License

MIT License

Copyright (c) Marc Espín Sanz

[Full license](LICENSE.md)
npm package: @mkenzo_8/puffin-drac
Description: Drac Design System for PuffinJS
Author: Marc Espín Sanz
Latest version: 0.3.1

### 💅🏻 Drac

Drac is the Design system used in [Graviton Editor](https://github.com/Graviton-Code-Editor/Graviton-App). 
This package is a set of [PuffinJS](https://github.com/PuffinJS/puffin) components.

## 🌱 Components
* Button
* Card
* Radio Group
* Navigation Bar
* Text
* H1...H6 titles
* Input
* TextArea

## 🍜 Usage

Installation:
```sh
npm install @mkenzo_8/puffin-drac
```

Example:
```javascript 
import { element } from '@mkenzo_8/puffin'
import { Button } from '@mkenzo_8/puffin-drac'

const helloButton = () => {
	return element({
		components: {
			Button
		}
	})`
		<Button>Hello World</Button>
	`
}
```

## ⚠ Warning
I do not consider myself an UI designer.

## 🤔 Testing
Clone the repository:
```shell
git clone https://github.com/Graviton-Code-Editor/drac.git
```

Install dependencies:
```shell
npm install
```

Test it:
```shell 
npm test
```