open-index/open-npm huggingface dataset:
npm package: @redsift/d3-rs-schedule
Description: Generates a calendar like schedule using D3v4.
Author: Rahul Powar
Latest version: 0.2.2

# d3-rs-schedule

[![Circle CI](https://img.shields.io/circleci/project/redsift/d3-rs-schedule.svg?style=flat-square)](https://circleci.com/gh/redsift/d3-rs-schedule)
[![npm](https://img.shields.io/npm/v/@redsift/d3-rs-schedule.svg?style=flat-square)](https://www.npmjs.com/package/@redsift/d3-rs-schedule)
[![MIT](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/redsift/d3-rs-schedule/master/LICENSE)

`d3-rs-schedule` generate a schedule / calander like presentation via the D3 reusable chart convention.

## Example

[View @redsift/d3-rs-schedule on Codepen](http://codepen.io/rahulpowar/pen/rWmgde)

### Empty

![Empty](https://bricks.redsift.cloud/reusable/d3-rs-schedule.svg])


### Single Entry

![Single Entry](https://bricks.redsift.cloud/reusable/d3-rs-schedule.svg?_datum=[{%22s%22:1469723575941,%22e%22:1469726870991,%22t%22:%22Initial%20Event%22},{%22s%22:1469723575941,%22e%22:1469729870991,%22t%22:%22Event%20Two%22,%22u%22:%22proposed%22}]&prefixDurationFormat=%25H:%25M)

## Usage

### Browser
	
	<script src="//static.redsift.io/reusable/d3-rs-schedule/latest/d3-rs-schedule.umd-es2015.min.js"></script>
	<script>
		var chart = d3_rs_schedule.html();
		d3.select('body').datum([ { s: 1469723575941, e: 1469726870991, t: "Text to display", u: "proposed" } ]).call(chart);
	</script>

### ES6

	import { chart } from "@redsift/d3-rs-schedule";
	let eml = chart.html();
	...
	
### Require

	var chart = require("@redsift/d3-rs-schedule");
	var eml = chart.html();
	...

### Datum

[{ s: 1469723575941, e: 1469726870991, t: "Text to display", u: "proposed" } ...]

`s` start timestamp for the event (epoch UTC ms)
`e` start timestamp for the event (epoch UTC ms)
`t` text to display
`u` status text for the event. This is used by the default fill function to highlight events. The known values are `proposed`, `conflict` and `provisional`.

### Parameters

Property|Description|Transition|Preview
----|-----------|----------|-------
`classed`|*String* SVG custom class|N
`width`, `height`, `size`, `scale`|*Integer* SVG container sizes|Y
`style`|*String* Custom CSS to inject into chart|N
`indexFormat`|*String, Function* Change the time presentation on the axis. If string, utilises [d3-time-format](https://github.com/d3/d3-time-format#locale_format). If a function, must be a comptabile formatter. Default `%Hh`
`language`|*String* Change the language, affects time formats. Typically auto detected from the browser.
`timezone`|*String* Set the timezone for display e.g. `Asia/Colombo`
`prefixDurationFormat`|*String* Prefix the event text with start and end time
`tickInterval`|*Array* Interval of the ticks, typically an [interval and a specifier](https://github.com/d3/d3-axis#axis_ticks) e.g. `d3.timeMinute.every(15)`
`eventWidth`|*Integer* Width to use for the event rects

### Know isues

Timezones that differ from UTC with 30 or 45 min offsets do not present the correct boundaries.
npm package: @redsift/d3-rs-svg
Description: Creates a SVG element using D3v4.
Author: Rahul Powar
Latest version: 0.8.0

# d3-rs-svg

`d3-rs-svg` is a component for creating a SVG 1.1 root element that is compatable with the D3 [margin convention](https://bl.ocks.org/mbostock/3019563). This component is dependent on D3 v4 (Alpha).

## Builds

[![Circle CI](https://circleci.com/gh/Redsift/d3-rs-svg.svg?style=svg)](https://circleci.com/gh/Redsift/d3-rs-svg)

UMD from //static.redsift.io/reusable/d3-rs-svg/latest/d3-rs-svg.umd-es2015.min.js

## Usage

### Browser
	
	<script src="//static.redsift.io/reusable/d3-rs-svg/latest/d3-rs-svg.umd-es2015.min.js"></script>
	<script>
		var svg = d3_rs_svg.html();
		...
	</script>

### ES6

	import * as svg from "@redsift/d3-rs-svg";
	let eml = svg.html();
	...

If using rollup.js for a browser target, ensure `d3-rs-svg` is part of the global map.
	
### Require

	var svg = require("@redsift/d3-rs-svg");
	var eml = svg.html();
	...
	
By convention, the SVG element is meant to be hosted in a HTML node, hence `svg.html()`

### Parameters

Name|Description|Transition
----|-----------|----------
width,height|SVG viewport size, px|Y
scale|SVG scaling factor, floating point|Y
margin|margin convention, Object or integer px|Y
classed|SVG custom class|N
style|SVG CSS embed|N
background|Rect background color|Y
title||N
role|https://www.w3.org/TR/wai-aria/roles#img|N

Parameters that support transition can be animated and chained.

	d3.select('#elm')
		.call(svg)					// draw the SVG at default (1x) scale
	.transition().duration(1000)
		.call(svg.scale(2.0))		// scale the SVG by 2x
	.transition().duration(333)
		.call(svg.scale(1.0))		// bounce back after 333ms

Note, this form of chaining does not work for parameters that do not support transition. Use the `on('end', ...` event for them.

	var el = d3.select('#elm')
		.call(svg.style('rect{fill: yellow;}'));
	
  	el.select(svg.self()).select(svg.child())
      	.append('rect')				// add a rect to the SVG we can paint with CSS
        	.attr('width', svg.childWidth())
        	.attr('height', svg.childHeight());
  
	el.transition().delay(1000).duration(0).on('end', function() {
		 el.transition().duration(1000).delay(500)
          	.call(svg.scale(2.0).style('rect{fill: green;}'));	// this green is applied after 1s of delay but 500ms before the scale changes
	});
	
## Accessible features

This module implements some of the [features described here](https://www.sitepoint.com/tips-accessible-svg/).
npm package: @redsift/d3-rs-text-icon
Description: Generates a square text icon using D3v4.
Author: Rahul Powar
Latest version: 0.0.5

# d3-rs-text-icon

`d3-rs-text-icon` easily generate a single character icon.

## Builds

[![Circle CI](https://circleci.com/gh/Redsift/d3-rs-text-icon.svg?style=svg)](https://circleci.com/gh/Redsift/d3-rs-text-icon)

## Example

[View @redsift/d3-rs-text-icon on Codepen](https://....)

## Usage

### Browser
	
	<script src="//static.redsift.io/reusable/d3-rs-text-icon/latest/d3-rs-text-icon.umd-es2015.min.js"></script>
	<script>
		var text = d3_rs_text_icon.text();
		...
	</script>

### ES6

	import { text } from "@redsift/d3-rs-text-icon";
	let eml = text.html();
	...
	
### Require

	var text = require("@redsift/d3-rs-text-icon");
	var eml = text.text();
	...

### Parameters

|Name|Description|Transition|
|----|-----------|----------|
|classed|SVG custom class|N|
npm package: @redsift/d3-rs-text-multiline
Description: Creates a text element using D3v4.
Author: Rahul Powar
Latest version: 0.1.1

# d3-rs-text-multiline

`d3-rs-text-multiline` is a component for creating animateable multi-line text elements in a SVG container.

## Builds

[![Circle CI](https://circleci.com/gh/Redsift/d3-rs-text-multiline.svg?style=svg)](https://circleci.com/gh/Redsift/d3-rs-text-multiline)

## Example

[View @redsift/d3-rs-text-multiline on Codepen](https://codepen.io/rahulpowar/pen/ONqZOQ/)

## Usage

### Browser
	
	<script src="//static.redsift.io/reusable/d3-rs-text-multiline/latest/d3-rs-text-multiline.umd-es2015.min.js"></script>
	<script>
		var text = d3_rs_text_multiline.svg();
		...
	</script>

### ES6

	import { text } from "@redsift/d3-rs-text-multiline";
	let eml = text.svg();
	...
	
### Require

	var text = require("@redsift/d3-rs-text-multiline");
	var eml = text.svg();
	...

### Parameters

|Name|Description|Transition|
|----|-----------|----------|
|classed|SVG custom class|N|
|text|text accessor function|N|
|tweenText|text tween function|N|
|lineHeight|custom line height. if 0 (default), calculated using getBBox()|N|
npm package: @redsift/d3-rs-tip
Description: Tip for graphs using D3v4.
Author: Christos Vontas
Latest version: 0.11.0

# d3-rs-tip

`d3-rs-tip` is a component for adding tooltips in charts made with D3, an extension of Justin Palmer's [d3-tip](https://github.com/Caged/d3-tip). This component is dependent on D3 v4 (Alpha).

## Builds

[![Circle CI](https://circleci.com/gh/Redsift/d3-rs-tip.svg?style=svg)](https://circleci.com/gh/Redsift/d3-rs-tip)

UMD from //static.redsift.io/reusable/d3-rs-tip/latest/d3-rs-tip.umd-es2015.min.js

## Usage

### ES6
```
  import { body as tip } from "@redsift/d3-rs-tip";
  
  var rtip = tip()
      .html(d => d.text)
  elmS.call(rtip);

  node.on('mouseover', rtip.show)
    .on('mouseout', rtip.hide)
  ...
```
If using rollup.js for a browser target, ensure `d3-rs-tip` is part of the global map.
  
### Require
```
  var d3Tip = require("@redsift/d3-rs-tip");
  var eml = d3Tip.body();
  ...
  
```
### Parameters

|Name|Description| Expected Value|
|----|-----------| --------------|
|attr|Sets or gets attribute value| same as d3 e.g. attr('key',`value|function`)
|style| Sets or gets a style value| same as d3 e.g. style('key',`value|function`)
|direction| Sets or gets direction of the tooltip| one of `n`,`s`,`e`,`w`,`nw`,`sw`,`ne`,`se`
|style| Sets or gets the CSS wrapped with the component| string of CSS properties
|parent| Sets or gets the parent element the tip will be appended to| DOM Node (default: `body`)
transition| Causes the tip to fade in `boolean|number`. If a number, the value is set at the time for the fade
npm package: @redsift/d3-rs-tree
Description: Generates tree charts using D3v4.
Author: Rahul Powar
Latest version: 0.3.0

# d3-rs-tree

[![Circle CI](https://img.shields.io/circleci/project/redsift/d3-rs-tree.svg?style=flat-square)](https://circleci.com/gh/redsift/d3-rs-tree)
[![npm](https://img.shields.io/npm/v/@redsift/d3-rs-tree.svg?style=flat-square)](https://www.npmjs.com/package/@redsift/d3-rs-tree)
[![MIT](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/redsift/d3-rs-tree/master/LICENSE)

`d3-rs-tree` generate a Reingold–Tilford tree via the D3 reusable chart convention.

## Example

[View @redsift/d3-rs-tree on Codepen](http://codepen.io/collection/DgkEpa/)

### Line chart

![Sample bars with a bottom orientation](https://bricks.redsift.cloud/reusable/d3-rs-tree.svg?_datum=[1,200,3100,1000]&orientation=bottom)

### Multiple series

![Sample bars with a left orientation](https://bricks.redsift.cloud/reusable/d3-rs-tree.svg?_datum=[[1,2,4],[0,1]])

## Usage

### Browser

    <script src="//static.redsift.io/reusable/d3-rs-tree/latest/d3-rs-tree.umd-es2015.min.js"></script>
    <script>
        var chart = d3_rs_tree.html();
        d3.select('body').datum([ 1, 2, 3, 10, 100 ]).call(chart);
    </script>

### ES6

    import { html as chart } from "@redsift/d3-rs-tree";
    let eml = chart();
    ...

### Require

    var chart = require("@redsift/d3-rs-tree");
    var eml = chart.html();
    ...

## TODO
npm package: @redsift/d3-rs-treemap
Description: A TreeMap visual component made with D3v4.
Author: Christos Vontas
Latest version: 0.1.9

# d3-rs-treemap

`d3-rs-treemap` A TreeMap visual component made with D3v4

## Builds

[![Circle CI](https://circleci.com/gh/redsift/d3-rs-treemap.svg?style=svg)](https://circleci.com/gh/Redsift/d3-rs-treemap)
[![npm](https://img.shields.io/npm/v/@redsift/d3-rs-treemap.svg?style=flat-square)](https://www.npmjs.com/package/@redsift/d3-rs-treemap)
[![MIT](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/redsift/d3-rs-treemap/master/LICENSE)


## Example

[View @redsift/d3-rs-treemap on Codepen](https://....)

### Treemap chart

![Sample treemp with text](https://bricks.redsift.io/reusable/d3-rs-treemap.svg?_datum={%22name%22:%22root%22,%22children%22:[{%22l%22:%22a%22,%22v%22:%2020},{%22l%22:%22b%22,%22v%22:%2030},{%22l%22:%22c%22,%22v%22:%2010}]}&appendText=true&width=400)

## Usage

### Browser
  
  <script src="//static.redsift.io/reusable/d3-rs-treemap/latest/d3-rs-treemap.umd-es2015.min.js"></script>
  <script>
    var treemap = d3_rs_treemap.html();
  </script>

### ES6

  import { chart } from "@redsift/d3-rs-treemap";
  let eml = chart.html();
  ...
  
### Require

  var chart = require("@redsift/d3-rs-treemap");
  var eml = chart.html();
  ...

### Data layout

Data need to be in a hierarchical form as it is described in [d3-hierarchy](https://github.com/d3/d3-hierarchy#hierarchy). The basic criteria is to have the *children* property. If your data are not in a hierarchical form you can use the [stratify](https://github.com/d3/d3-hierarchy#stratify) method in d3-hierarchy to manipulate them.

    {
      name:'root',
      children: [
        {
          l: 'children1',
          v: 10
        },
        {
          l: 'children1',
          v: 10,
          u: 'http://www.google.com/children2'
        }
      ]
    }

For this visualization objects inside the *children* array are expected to have the above layout. The `u` property is optional, only if you want to display images so you need to provide a link.

### Parameters

|Name|Description|Transition|
|----|----------|----------|
|`classed`| SVG custom class|N|
|`width`, `height`, `size`, `scale`, `margin`| *Integer* SVG container sizes|Y
|`style`| *String* Custom CSS to inject into chart| N
|`fill`| *String, Array, Function* Colour palette for the data. Available options from [d3-rs-theme](https://github.com/Redsift/d3-rs-theme#presentation-color-palette) | Y|
|`theme`| *String* `dark` or `light`(default)| |
|`appendText`| *Boolean* Append a text element inside the rect| |
|`textValue` | *String, Function* for the value of the text element that will be displayed| |
|`appendImage`| *Boolean* Append an image element inside the rect | Y |
|`imageFallbackLink`| *String* Helper link of asset to display as a fall back solution when an image fails to load| |
|`filter`| *String* Filter to be applied on an image as described in [d3-rs-theme#filters](https://github.com/redsift/d3-rs-theme#filters) e.g. `'emboss'`, `'greyscale'`, `'shadow'` |
npm package: @redsift/d3-rs-tspan-wrap
Description: Wraps a text element by creating tspans using D3v4.
Author: Rahul Powar
Latest version: 0.1.0

# d3-rs-tspan-wrap

`d3-rs-tspan-wrap` is a component for breaking up text into tspans in a Text container.

## Builds

[![Circle CI](https://circleci.com/gh/Redsift/d3-rs-tspan-wrap.svg?style=svg)](https://circleci.com/gh/Redsift/d3-rs-tspan-wrap)

## Example

[View @redsift/d3-rs-tspan-wrap on Codepen](https://codepen.io/rahulpowar/pen/ZWxKdJ/)

## Usage

### Browser
	
	<script src="//static.redsift.io/reusable/d3-rs-tspan-wrap/latest/d3-rs-tspan-wrap.umd-es2015.min.js"></script>
	<script>
		var text = d3_rs_tspan_wrap.text();
		...
	</script>

### ES6

	import { text } from "@redsift/d3-rs-tspan-wrap";
	let eml = text.text();
	...
	
### Require

	var text = require("@redsift/d3-rs-tspan-wrap");
	var eml = text.text();
	...

### Data

Data can either be provided in the text node element itself or bound to the selection.

### Parameters

|Name|Description|Transition|
|----|-----------|----------|
|classed|SVG custom class|N|
npm package: @redsift/d3-rs-venn
Description: Generates venn charts using D3v4.
Author: Rahul Powar
Latest version: 0.0.3

# d3-rs-venn

[![Circle CI](https://img.shields.io/circleci/project/redsift/d3-rs-venn.svg?style=flat-square)](https://circleci.com/gh/redsift/d3-rs-venn)
[![npm](https://img.shields.io/npm/v/@redsift/d3-rs-venn.svg?style=flat-square)](https://www.npmjs.com/package/@redsift/d3-rs-venn)
[![MIT](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/redsift/d3-rs-venn/master/LICENSE)

`d3-rs-venn` generate a venn via the D3 reusable chart convention. Code adapted from https://github.com/benfred/venn.js

## Example

[View @redsift/d3-rs-venn on Codepen](http://codepen.io/collection/DgkEpa/)

### Line chart

![Sample bars with a bottom orientation](https://bricks.redsift.cloud/reusable/d3-rs-venn.svg?_datum=[1,200,3100,1000]&orientation=bottom)

### Multiple series

![Sample bars with a left orientation](https://bricks.redsift.cloud/reusable/d3-rs-venn.svg?_datum=[[1,2,4],[0,1]])

## Usage

### Browser

    <script src="//static.redsift.io/reusable/d3-rs-venn/latest/d3-rs-venn.umd-es2015.min.js"></script>
    <script>
        var chart = d3_rs_venn.html();
        d3.select('body').datum([ 1, 2, 3, 10, 100 ]).call(chart);
    </script>

### ES6

    import { html as chart } from "@redsift/d3-rs-venn";
    let eml = chart();
    ...

### Require

    var chart = require("@redsift/d3-rs-venn");
    var eml = chart.html();
    ...
npm package: @redsift/gulp-compressedimages
Description: Photo compression gulp task.
Author: Rahul Powar
Latest version: 0.0.1

# gulp-compressedimages

[![Circle CI](https://img.shields.io/circleci/project/redsift/gulp-compressedimages.svg?style=flat-square)](https://circleci.com/gh/redsift/gulp-compressedimages)
[![npm](https://img.shields.io/npm/v/@redsift/gulp-compressedimages.svg?style=flat-square)](https://www.npmjs.com/package/@redsift/gulp-compressedimages)
[![MIT](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/redsift/gulp-compressedimages/master/LICENSE)

Processes images with ImageMagick to resize and compress them carefully as JPEG or WEBP files.

## Installation

`gulp-compressedimages` requires ImageMagick (tested with ImageMagick 6.9.2) compiled with the jpeg, lcms and webp delegates.

Verify this via `convert -version`. If you receive a `Stream yields empty buffer` error while reading or writing WEBP, most likely your ImageMagick binary was not built with WEBP support.

Running the pipe will also typically require an sRGB ICC profile [downloaded locally](http://www.color.org/srgbprofiles.xalter) to correctly perform the color conversion.

## Usage

`require('gulp-compressedimages').resampler` can be used in the gulp stream to process images.

```js
// Multiple files to an auto compressed JPEG
var gulp = require('gulp'),
    photos = require('@redsift/gulp-compressedimages');

gulp.task('images', function() {
    return gulp.src([ 'photo1.jpg', ... ])
        .pipe(photos.resampler({ size: 200 }))
        .pipe(gulp.dest('dist/'));
});
```

```js
// Multiple files to a heavily compressed WebP
var gulp = require('gulp'),
    photos = require('@redsift/gulp-compressedimages');

gulp.task('images', function() {
    return gulp.src([ 'photo1.jpg', ... ])
        .pipe(photos.resampler({ size: 200, webp: true, quality: 50 }))
        .pipe(gulp.dest('dist/'));
});
```

## Usage - Standard Sizes

`require('gulp-compressedimages').common` provides a list of standard sizes to generate asset files for common use.

The common sizes also have small amounts of sharpening built into the pipeline and are best served by processing original assets at original (> 3000 pixels) resolutions.

```js
var gulp = require('gulp'),
    photos = require('@redsift/gulp-compressedimages'),
    merge = require('merge-stream');

gulp.task('common', function() {
    var all = photos.common.map(function (o) {
        return gulp.src('photo.jpg')
            .pipe(photos.resampler(o))
            .pipe(gulp.dest('dist/'));
    });

    return merge.apply(this, all);
});
```

## Stripping

This plugin strips color profiles and comments to reduce image size.

## Colorspace conversion

As a result of stripping profiles, the image needs to be converted to sRGB. If required, the plugin with change the colorspace with a Perceptual intent.

## Gamma correct scaling

The scaling operations are done in a linear manner to avoid scaling errors. Reference [this article](http://www.4p8.com/eric.brasseur/gamma.html) for the issues addressed.
npm package: @redsift/rollup-plugin-imagedata
Description: Import image data and metadata into a rollup JavaScript bundle.
Author: Rahul Powar
Latest version: 1.0.1

# rollup-plugin-imagedata

[![Circle CI](https://img.shields.io/circleci/project/redsift/rollup-plugin-imagedata.svg?style=flat-square)](https://circleci.com/gh/redsift/rollup-plugin-imagedata)
[![npm](https://img.shields.io/npm/v/@redsift/rollup-plugin-imagedata.svg?style=flat-square)](https://www.npmjs.com/package/@redsift/rollup-plugin-imagedata)
[![MIT](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/redsift/rollup-plugin-imagedata/master/LICENSE)

Import metadata and base64 encoded image content from JPG, PNG, GIF, WEBP and SVG.

## Installation

```bash
$ npm install --save-dev "@redsift/rollup-plugin-imagedata"
```

## Building via ES6 modules

```js
// rollup.config.js
import image from '@redsift/rollup-plugin-imagedata';

export default {
  entry: './index.js',
  dest: 'distribution/my-lib.js',
  plugins: [
    image()
  ]
};
```

## Building via require()

```js
// gulpfile.js
var imagedata = require('@redsift/rollup-plugin-imagedata')
gulp.task('task', () => {  
  return rollup({
            ...
            plugins: [ 
                        imagedata.image(),
                        ...
                      ]
        })
        .pipe(source('index.js', 'src'))
```

## Usage

```js
// use.js
import { width, height, base64 } from './tests/test.png';

console.log(`My image is ${width} pixels wide`);
...

```

Note that base64 makes the images 33% larger than the size on disk.

Tree shaking via rollup will ensure large payloads such as the base64 string will be stripped from the bundle if not imported or used by your code.

## Options

You may pass a few options to image().

```js
  image({
    include: [ ... ], // files to include
    exclude:[ ... ], // files to exclude
    patch: false,   // attempt to fix up non compliant assets e.g. SVG files with no XML headers
    ignoreParsingErrors: true   // Warn but do not fail if files cannot be parsed as images. 
                                // In this case metadata will be missing
  });
```

## ImageMagick

This plugin relies on having ImageMagick installed and in the path as this tool is used to extract metadata from the images. If you wish to use WebP, ensure your binary has support for the format. You can verify your binary by inspecting the built in delegates.

```bash
$ convert -version
Version: ImageMagick 6.9.3-7 Q16 x86_64 2016-04-13 http://www.imagemagick.org
Copyright: Copyright (C) 1999-2016 ImageMagick Studio LLC
License: http://www.imagemagick.org/script/license.php
Features: Cipher DPC HDRI Modules
Delegates (built-in): bzlib freetype jng jp2 jpeg lcms ltdl lzma png tiff webp xml zlib
```

Tested on OS-X with `ImageMagick-6.9.3-7`

### OS-X & Homebrew

To reinstall imagemagick with WebP support `brew reinstall imagemagick --with-webp`

## Acknowledgements

This plugin is derived from [rollup-plugin-image](https://github.com/rollup/rollup-plugin-image).
npm package: @redsift/tape-reel
Description: Tape + JSDOM + CircleCI
Author: Rahul Powar
Latest version: 0.1.1

# tape-reel

[![Circle CI](https://img.shields.io/circleci/project/redsift/tape-reel.svg?style=flat-square)](https://circleci.com/gh/redsift/tape-reel)
[![npm](https://img.shields.io/npm/v/@redsift/tape-reel.svg?style=flat-square)](https://www.npmjs.com/package/@redsift/tape-reel)
[![MIT](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/redsift/tape-reel/master/LICENSE)

Simple [tape](https://github.com/substack/tape) wrapper to better integrate server side JSDOM testing and CircleCI.

## Usage

Where you typically use Tape e.g.

    var tape = require("tape");

Simply

    var tape = require("@redsift/tape-reel")("<div id='test'></div>");

The HTML sets the JSDOM for environment for each test invocation. This document is provided in the global scope for easy integration with browser JavaScript components and passed as the second parameter to the function under test.

## Features

Compared to a naked Tape setup, this wrapper provides the following pre-configurations:

1. Setup and teardown a fresh JSDOM for each test.
1. When run on CircleCI, produce a JUnit.xml compatible output in `$CIRCLE_TEST_REPORTS/junit/junit.xml`.
1. When not run on CircleCI, pretty print with tap-diff and dump the DOM for failing tests. You may manually get a string representation of the DOM using `tape.dumpJSDOM(document)`.

## Options

    var tape = require("@redsift/tape-reel")(JSDOM-HTML, SUPRESS-DOM, REPORT-NAME);

Parameter|Purpose|Default
---------|-------|-------
`JSDOM-HTML`|May be null if no JSDOM environment is required|`null`
`SUPRESS-DOM`|By default, a failing test will dump the state of the DOM|`false`
`REPORT-NAME`|Names the test report when generating `junit.xml` files on CircleCI|`junit`

## Known Issues

Currently, `REPORT-NAME` does not produce multiple junit.xml files due to a bug in the imported `tap-xunit` module.
npm package: @redsift/text-utilities
Description: Tiny library wrapping text processing code snippets.
Author: Rahul Powar
Latest version: 0.1.4

# text-utilities

[![Circle CI](https://img.shields.io/circleci/project/redsift/js-text-utilities.svg?style=flat-square)](https://circleci.com/gh/redsift/text-utilities)
[![npm](https://img.shields.io/npm/v/@redsift/text-utilities.svg?style=flat-square)](https://www.npmjs.com/package/@redsift/text-utilities)
[![MIT](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/redsift/text-utilities/master/LICENSE)

`text-utilities` tiny library wrapping text processing code snippets.

## Usage

### Browser

    <script src="//static.redsift.io/reusable/text-utilities/latest/text-utilities.umd-es2015.min.js">
    </script>
    <script>
        var words = text_utilities.html('split this   into.words');
        console.log(words);
    </script>

### ES6

    import { splitWords } from "@redsift/text-utilities";
    let words = splitWords('split this   into.words');
    ...

### Require

    var textUtilities = require("@redsift/text-utilities");
    var words = textUtilities.splitWords('split this   into.words');
    ...

Function|Signature|Returns|Description 
--------|---------|-------|-----------
splitWords|*string*|*Array*|Splits words based on common boundary characters 
trimEmailThreads|*string*|*string*|Clip text to exclude common reply styles
npm package: @redsift/ui-rs-core
Description: Common CSS styles and Javascript functionality for RedsiftUI.
Author: Rahul Powar
Latest version: 0.9.1

# ui-rs-core

Core library with common functionality to be used by UI components.

`ui-rs-core` contains

1. the common CSS style theme for [RedsiftUI](https://github.com/redsift/redsift-ui) and
2. common Javascript functionality used by RedsiftUI components (living in the `ui-rs-*` repositories).

For a description of the RedsiftUI and its components see [official RedsiftUI documentation](https://docs.redsift.io/docs/client-code-redsift-ui).

## Builds

[![Circle CI](https://circleci.com/gh/Redsift/ui-rs-core.svg?style=svg)](https://circleci.com/gh/Redsift/ui-rs-core)

A UMD build is available from //static.redsift.io/reusable/ui-rs-core/latest/ui-rs-core.umd-es2015.min.js.

To build locally checkout this repository and

```bash
> cd ui-rs-core
> npm install
> npm run build
```

This will create a `./dist` folder with the Javascript and CSS files.

## Browser Usage

First include the CSS file in the `<head>` of your page:

```html
<link rel="stylesheet" href="//static.redsift.io/reusable/ui-rs-core/latest/css/ui-rs-core.min.css">
```

Additionally include the Javascript on the bottom of the `<body>`, if you want to use its functionality directly:

```html
<script src="//static.redsift.io/reusable/ui-rs-core/latest/js/ui-rs-core.umd-es2015.min.js"></script>
```
npm package: @redsift/ui-rs-loader
Description: The Red Sift loader as a web component
Author: Christos Vontas
Latest version: 0.3.1

# ui-rs-loader

`ui-rs-loader` is the Red Sift loader as a component for your application. It is provided as a [custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements) for easy integration into your projects.

> If your browser does *NOT* support *custom elements* natively (see [caniuse](http://caniuse.com/#feat=custom-elements)) you have to install the [web components shim](http://webcomponents.org/) and include it in your project before including this component!

The component is part of the [RedsiftUI](https://github.com/redsift/redsift-ui) library.

## Builds

[![Circle CI](https://circleci.com/gh/Redsift/ui-rs-loader.svg?style=svg)](https://circleci.com/gh/Redsift/ui-rs-loader)

A UMD build is available from //static.redsift.io/reusable/ui-rs-loader/latest/ui-rs-loader.umd-es2015.min.js.

To build locally checkout this repository and

```bash
> cd ui-rs-loader
> npm install
> npm run build
```

This will create a `./dist` folder with the Javascript and CSS files.

## Browser Usage

Include the Javascript at the bottom of the `<body>`:

```html
<script src="//static.redsift.io/reusable/ui-rs-loader/latest/js/ui-rs-loader.umd-es2015.min.js"></script>
```

Including the Javascript already registers the custom element `rs-loader` with the browser.

Use the following HTML code to embed the `rs-loader` element:

```html
<rs-loader animate></rs-loader>
```

The `animate` attribute starts and stops the animation, but probably you will hide the loader with the `display:none` property when not in use.

`rs-loader` contains an SVG inside with the `loader-opts` CSS class, whose attributes can be overriden with normal CSS. An example of changing the `width` is here:

```css
rs-loader > .loader-opts {
  width: 100px;
}
```

CSS file to include in the `<head>` of your page: (for legacy purposes, the script injects the CSS)

```html
<link rel="stylesheet" href="//static.redsift.io/reusable/ui-rs-loader/latest/css/ui-rs-loader.min.css">
```

# Development Setup

For development run

```bash
> npm run serve
```

within the repository folder. It will start a web server serving the content of `./samples` and supports live-reloading when a source file is changed.
npm package: @redskytech/core-utils
Description: A collection of utility functions for use in RedSky Engineering projects
Author: Joshua Hintze
Latest version: 1.2.4

# RedSky Core Utilities

A number of core utilities functions presented in Pure Static Classes that can be easily tree-shaken. This does not include any
utility methods that are specific to front-end of backend. Such as database routines or web browser utilities. Those are best left
in projects or a different library

## Usage

Simply install this node module directly from npmjs.com and start importing method you need.

`pnpm add -D @redskytech/core-utils`

Then import

```typescript
import { StringUtils, ObjectUtils, DateUtils } from '@redskytech/core-utils';

// Use utility below
StringUtils.capitalizeFirst('jim bob');
```

## Dependencies

The one dependency that this project does bring in is lodash.clonedeep(). We have not yet been able to write a better algorithm for cloning a JSON object that might have all sorts of weird nested stuff.

## Building

To build run the following command

`pnpm build`

This will generate both commonjs modules and es modules in the lib folder under main and module respectively.

## Publishing

**_FIRST: Make sure your build is working and you have committed all your changes to master and pushed them up to remote._**

You need to be a member of the @redskytech organization with publishing capability. Then you need to run the
following command:

`pnpm release:xxx` - where xxx is either (major, minor, patch, pre:alpha)

This uses the npm package standard-version which will automatically increment the package.json version
as well as git tag the commit and put all commit notes into the CHANGELOG.md

Push up the changes and tags to master branch on remote, make sure to include tags

`git push --follow-tags origin master`

Finally, publish to npmjs.com with the command

`pnpm publish`

## Commit Messages

Commit messages should follow guidelines specified at [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/).
This helps with auto changelog generated file.
npm package: @redskytech/framework
Description: RedSky Framework V2
Author: Joshua Hintze
Latest version: 1.7.0

# RedSky Framework

A UI component kit for building React projects. Includes React components, custom hooks, and utilities functions.

## Usage

In order to be able to use this framework in your projects you will need to install the peer dependencies. This includes

-   react@17
-   react-dom@17

In addition to peer dependencies you will also need to import the compiled CSS used throughout the framework into your project just once.
You can do this by putting the following in your App.tsx

`import "@redskytech/framework/index.css"`

Some components might require extra integration. For example if you make use of the popupController you will need to add the
`popupController.instance` to your App.tsx. See the individual stories for examples.

### Animate on scroll

To initialize AoS component you need to import the custom hook useInitAnimateOnScroll and call it once in App.tsx

## Demo

RedSky Framework utilizes storybook to demonstrate available components. Please make sure to adequately document your components
in storybook mdx files.

## Playground

When working on the framework it is often useful to quickly fire up a simple structured playground. You can do so by navigating
to the /playground folder and running the simple Vite project with `yarn dev`

## Building

To build run the following command

`yarn build`

This will output a self-contained publishable folder in the root/dist folder.

## Publishing

**_Make sure your build is working first_**

You first need to be a member of the @redskytech organization with publishing capability. Then you need to run the
following command:

`yarn release:xxx` - where xxx is either (major, minor, patch, pre:alpha)

This uses the npm package standard-version which will automatically increment the package.json version
as well as git tag the commit and put all commit notes into the CHANGELOG.md

Push up the changes and tags to master branch on remote, make sure to include tags

`git push --follow-tags origin master`

Finally, publish to npmjs.org with the command

`yarn build:publish`

## Commit Messages

Commit messages should follow guidelines specified at [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/).
This helps with auto changelog generated file.