open-index/open-npm huggingface dataset:
npm package: @redrob-ui/icons
Description: Icon library for Redrob AI Design System
Author: Redrob AI
Latest version: 0.1.2

# @redrob/icons

Icon library for Redrob AI Design System. Customizable SVG icons for React applications.

## 🎨 Live Demo

**[View All Icons →](https://redrob-ai-design-system-cvls2l74a-mckinleyrice.vercel.app/)**

## Installation

```bash
npm install @redrob/icons
```

## Usage

```tsx
import { SearchIcon, HomeIcon, UserIcon } from '@redrob/icons';

function MyComponent() {
  return (
    <div>
      <SearchIcon size={24} />
      <HomeIcon size={32} color="#007bff" />
      <UserIcon size={20} className="text-blue-500" />
    </div>
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `number \| string` | `24` | Icon size |
| `color` | `string` | `'currentColor'` | Icon color |
| `className` | `string` | `''` | CSS classes |
| `strokeWidth` | `number` | `2` | Stroke width |

## Available Icons

**Navigation**: HomeIcon, SearchIcon, MenuIcon  
**Chevrons**: ChevronDown, ChevronUp, ChevronLeft, ChevronRight  
**Actions**: CloseIcon, CheckIcon, PlusIcon, MinusIcon, EditIcon, TrashIcon  
**User**: UserIcon, SettingsIcon  
**Status**: InfoIcon, AlertIcon

## License

MIT
npm package: @redrob-ui/tailwind-config
Description: Shared Tailwind CSS configuration for Redrob AI Design System
Author: Redrob AI
Latest version: 0.1.4

# @redrob/tailwind-config

Shared Tailwind CSS configuration for the Redrob AI Design System.

## 🎨 Live Demo

**[View Design Tokens →](https://redrob-ai-design-system-cvls2l74a-mckinleyrice.vercel.app/)**

## Installation

```bash
npm install @redrob/tailwind-config tailwindcss
```

## Usage

```javascript
// tailwind.config.js
import redrobConfig from '@redrob/tailwind-config';

export default {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@redrob/components/**/*.{js,ts,jsx,tsx}',
  ],
  presets: [redrobConfig],
};
```

## What's Included

- Custom color palette from `@redrob/tokens`
- Spacing scale
- Typography settings
- Border radius values
- Box shadows

## License

MIT
npm package: @redrob-ui/tokens
Description: Design tokens for Redrob AI Design System
Author: Redrob AI
Latest version: 0.1.3

# @redrob/tokens

Design tokens for the Redrob AI Design System. Foundational design values for colors, spacing, and typography.

## 🎨 Live Demo

**[View Design System Demo →](https://redrob-ai-design-system-cvls2l74a-mckinleyrice.vercel.app/)**

## Installation

```bash
npm install @redrob/tokens
```

## Usage

```typescript
import { colors, spacing, fontFamily } from '@redrob/tokens';

// Or import specific modules
import { colors } from '@redrob/tokens/colors';
import { spacing } from '@redrob/tokens/spacing';
import { fontFamily, fontSize } from '@redrob/tokens/typography';
```

## What's Included

- **Colors**: Primary, secondary, neutral, semantic colors (success, warning, error, info)
- **Spacing**: Consistent spacing scale from 0 to 96
- **Typography**: Font families, sizes, weights, line heights, and letter spacing

## Example

```typescript
import { colors, spacing } from '@redrob/tokens';

const styles = {
  backgroundColor: colors.primary[500],
  padding: `${spacing[4]} ${spacing[6]}`,
  color: colors.white,
};
```

## License

MIT
npm package: @redrob/components
Description: React components for Redrob AI Design System
Author: Redrob AI
Latest version: 0.1.4

# @redrob/components

React components for the Redrob AI Design System. Built with React, TypeScript, and Tailwind CSS.

## 🎨 Live Demo

**[View Interactive Demo →](https://redrob-ai-design-system-cvls2l74a-mckinleyrice.vercel.app/)**

## Installation

```bash
npm install @redrob/components
```

## Quick Start

```tsx
import { Button, Card, Input } from '@redrob/components';
import '@redrob/components/styles.css';

function App() {
  return (
    <Card>
      <h2>Sign Up</h2>
      <Input label="Email" type="email" placeholder="your@email.com" />
      <Input label="Password" type="password" />
      <Button variant="primary">Create Account</Button>
    </Card>
  );
}
```

## Available Components

### Button
Interactive button with multiple variants and sizes.

```tsx
<Button variant="primary" size="md">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="outline">Outline Button</Button>
```

### Card
Container component with optional header and footer.

```tsx
<Card>
  <h3>Card Title</h3>
  <p>Card content goes here</p>
</Card>
```

### Input
Text input with label, error state, and helper text support.

```tsx
<Input 
  label="Username" 
  placeholder="Enter username"
  helperText="Choose a unique username"
/>

<Input 
  label="Email" 
  type="email"
  error="Invalid email address"
/>
```

## Tailwind Configuration (Optional)

For consistent styling across your app:

```bash
npm install @redrob/tailwind-config
```

```javascript
// tailwind.config.js
import redrobConfig from '@redrob/tailwind-config';

export default {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@redrob/components/**/*.{js,ts,jsx,tsx}',
  ],
  presets: [redrobConfig],
};
```

## TypeScript Support

Full TypeScript support included with type definitions for all components.

## Next.js 13+ Compatible

Works seamlessly with Next.js App Router. Components are client-side by default.

```tsx
import { Button } from '@redrob/components';

export default function Page() {
  return <Button>Click me</Button>;
}
```

## License

MIT
npm package: @redrob/icons
Description: Icon library for Redrob AI Design System
Author: Redrob AI
Latest version: 0.1.1

# @redrob/icons

Icon library for Redrob AI Design System. Customizable SVG icons for React applications.

## 🎨 Live Demo

**[View All Icons →](https://redrob-ai-design-system-cvls2l74a-mckinleyrice.vercel.app/)**

## Installation

```bash
npm install @redrob/icons
```

## Usage

```tsx
import { SearchIcon, HomeIcon, UserIcon } from '@redrob/icons';

function MyComponent() {
  return (
    <div>
      <SearchIcon size={24} />
      <HomeIcon size={32} color="#007bff" />
      <UserIcon size={20} className="text-blue-500" />
    </div>
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `number \| string` | `24` | Icon size |
| `color` | `string` | `'currentColor'` | Icon color |
| `className` | `string` | `''` | CSS classes |
| `strokeWidth` | `number` | `2` | Stroke width |

## Available Icons

**Navigation**: HomeIcon, SearchIcon, MenuIcon  
**Chevrons**: ChevronDown, ChevronUp, ChevronLeft, ChevronRight  
**Actions**: CloseIcon, CheckIcon, PlusIcon, MinusIcon, EditIcon, TrashIcon  
**User**: UserIcon, SettingsIcon  
**Status**: InfoIcon, AlertIcon

## License

MIT
npm package: @redrob/tailwind-config
Description: Shared Tailwind CSS configuration for Redrob AI Design System
Author: Redrob AI
Latest version: 0.1.3

# @redrob/tailwind-config

Shared Tailwind CSS configuration for the Redrob AI Design System.

## 🎨 Live Demo

**[View Design Tokens →](https://redrob-ai-design-system-cvls2l74a-mckinleyrice.vercel.app/)**

## Installation

```bash
npm install @redrob/tailwind-config tailwindcss
```

## Usage

```javascript
// tailwind.config.js
import redrobConfig from '@redrob/tailwind-config';

export default {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@redrob/components/**/*.{js,ts,jsx,tsx}',
  ],
  presets: [redrobConfig],
};
```

## What's Included

- Custom color palette from `@redrob/tokens`
- Spacing scale
- Typography settings
- Border radius values
- Box shadows

## License

MIT
npm package: @redrob/tokens
Description: Design tokens for Redrob AI Design System
Author: Redrob AI
Latest version: 0.1.2

# @redrob/tokens

Design tokens for the Redrob AI Design System. Foundational design values for colors, spacing, and typography.

## 🎨 Live Demo

**[View Design System Demo →](https://redrob-ai-design-system-cvls2l74a-mckinleyrice.vercel.app/)**

## Installation

```bash
npm install @redrob/tokens
```

## Usage

```typescript
import { colors, spacing, fontFamily } from '@redrob/tokens';

// Or import specific modules
import { colors } from '@redrob/tokens/colors';
import { spacing } from '@redrob/tokens/spacing';
import { fontFamily, fontSize } from '@redrob/tokens/typography';
```

## What's Included

- **Colors**: Primary, secondary, neutral, semantic colors (success, warning, error, info)
- **Spacing**: Consistent spacing scale from 0 to 96
- **Typography**: Font families, sizes, weights, line heights, and letter spacing

## Example

```typescript
import { colors, spacing } from '@redrob/tokens';

const styles = {
  backgroundColor: colors.primary[500],
  padding: `${spacing[4]} ${spacing[6]}`,
  color: colors.white,
};
```

## License

MIT
npm package: @redrob/ui
Description: React components for Redrob AI Design System
Author: Redrob AI
Latest version: 0.1.1

# @redrob/components

React components for the Redrob AI Design System. Built with React, TypeScript, and Tailwind CSS.

## Installation

```bash
npm install @redrob/components
# or
yarn add @redrob/components
```

## Setup

### 1. Import the CSS

In your app's root file (e.g., `_app.tsx` or `layout.tsx`):

```typescript
import '@redrob/components/styles.css';
```

### 2. Configure Tailwind (Optional)

If you want to use the same Tailwind configuration:

```javascript
// tailwind.config.js
import redrobConfig from '@redrob/tailwind-config';

export default {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@redrob/components/**/*.{js,ts,jsx,tsx}',
  ],
  presets: [redrobConfig],
};
```

## Usage

```typescript
import { Button, Card, Input } from '@redrob/components';

function App() {
  return (
    <Card>
      <Input label="Email" type="email" />
      <Button variant="primary">Submit</Button>
    </Card>
  );
}
```

## Components

- **Button**: Interactive button with multiple variants and sizes
- **Card**: Container component with header, body, and footer
- **Input**: Text input with label, error, and helper text support

## Next.js 13+ (App Router)

This package is compatible with Next.js 13+ and the App Router. All components are marked with `"use client"` directive.

```typescript
import { Button } from '@redrob/components';

export default function Page() {
  return <Button>Click me</Button>;
}
```
npm package: @redrobotsystems/unity-library
Description: A set of components used within the unity systems
Author: @robo-luke
Latest version: 1.0.0

# unity-library

> A set of components used within the unity systems

[![NPM](https://img.shields.io/npm/v/unity-library.svg)](https://www.npmjs.com/package/unity-library) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save unity-library
```

## Usage

```jsx
import React, { Component } from 'react'

import MyComponent from 'unity-library'
import 'unity-library/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [@robo-luke](https://github.com/@robo-luke)
npm package: @redrobui/tailwind-config
Description: Shared Tailwind CSS configuration for Redrob AI Design System
Author: Redrob AI
Latest version: 0.4.0

# @redrobui/tailwind-config

Shared Tailwind CSS v4 configuration for the Redrob AI Design System.

## 🎨 Live Demo

**[View Design System in Storybook →](https://redrob-ai-design-system.vercel.app/)**

See the Tailwind configuration in action with live component examples and design tokens.

## Installation

```bash
npm install @redrobui/tailwind-config tailwindcss@^4.0.0 @tailwindcss/postcss
```

## Usage

### 1. Tailwind Config

```javascript
// tailwind.config.js
const redrobConfig = require('@redrobui/tailwind-config');

module.exports = {
  presets: [redrobConfig],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@redrobui/react/**/*.{js,ts,jsx,tsx,mjs}',
    // Or for Vue:
    // './node_modules/@redrobui/vue/**/*.{vue,js,ts,jsx,tsx,mjs}',
  ],
};
```

### 2. PostCSS Config

```javascript
// postcss.config.js
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
};
```

### 3. CSS Import

```css
/* src/index.css */
@import 'tailwindcss';
```

## What's Included

- Custom color palette from `@redrobui/tokens`
- Spacing scale
- Typography settings
- Border radius values
- Box shadows

## License

MIT
npm package: @redrobui/tokens
Description: Design tokens for Redrob AI Design System
Author: Redrob AI
Latest version: 0.4.0

# @redrobui/tokens

Design tokens for the Redrob AI Design System. Foundational design values for colors, spacing, and typography.

## 🎨 Live Demo

**[View Design Tokens in Storybook →](https://redrob-ai-design-system.vercel.app/?path=/docs/design-tokens-colors--docs)**

Explore all colors, typography, spacing, and other design tokens in our interactive Storybook.

## Installation

```bash
npm install @redrobui/tokens
```

## Usage

### JavaScript/TypeScript

```typescript
import { colors, spacing, fontFamily } from '@redrobui/tokens';

// Or import specific modules
import { colors } from '@redrobui/tokens/colors';
import { spacing } from '@redrobui/tokens/spacing';
import { fontFamily, fontSize } from '@redrobui/tokens/typography';
```

### Tailwind CSS v4 Theme

**Option 1: Use Pre-built Utilities (Easiest)**

Just import the utilities file to get all color classes ready to use:

```css
/* Your app's main CSS */
@import '@redrobui/tokens/utilities.css';
```

Now you can use all color utilities directly:
```jsx
<button className="bg-primary-600 text-white hover:bg-primary-700">
  Click me
</button>

<div className="bg-secondary-600 text-white">
  Secondary color
</div>

<span className="text-error-600 border-error-600">
  Error message
</span>
```

**Option 2: Custom Build (Advanced)**

If you want to customize or extend the theme:

```css
/* Import the theme and build with your own Tailwind config */
@import '@redrobui/tokens/theme.css';
@import 'tailwindcss';
```

Available color utilities:
- **Primary**: `bg-primary-50` through `bg-primary-600`
- **Secondary**: `bg-secondary-50` through `bg-secondary-600`
- **Neutral**: `bg-neutral-50` through `bg-neutral-950`
- **Error**: `bg-error-50` through `bg-error-900`
- **Success**: `bg-success-50` through `bg-success-900`
- **Warning**: `bg-warning-50` through `bg-warning-900`
- **Info**: `bg-info-50` through `bg-info-900`

All colors work with `bg-`, `text-`, `border-`, etc.

## What's Included

- **Colors**: Primary, secondary, neutral, semantic colors (success, warning, error, info)
- **Spacing**: Consistent spacing scale from 0 to 96
- **Typography**: Font families, sizes, weights, line heights, and letter spacing

## Example

```typescript
import { colors, spacing } from '@redrobui/tokens';

const styles = {
  backgroundColor: colors.primary[500],
  padding: `${spacing[4]} ${spacing[6]}`,
  color: colors.white,
};
```

## License

MIT
npm package: @redrockfe/rrfe
Description: redrockfe utils
Author: sunsunmonkey
Latest version: 0.5.2

<p align="center">
    <h1 align="center">@redrockfe/rrfe 🚀</h1>
</p>
<p align="center">
    <img src="./assets/logo.png" alt="logo" width="50%"/>
</p>
<p align="center">
    <img src="https://img.shields.io/badge/utils-redrock-red?labelColor=gray&style=flat" alt="cli" />
    <img src="https://img.shields.io/badge/template-vite-green?labelColor=gray&style=flat" alt="template" />
    <img src="https://img.shields.io/badge/md-apiTransform-blue?labelColor=gray&style=flat" alt="apiTransform" />
    <a href="https://www.npmjs.com/package/@redrockfe/rrfe"><img src=https://img.shields.io/npm/v/@redrockfe/rrfe.svg  alt="npm package"></a>
</p>

## 特点

- 💡 由 vite 构建的多种模板
- ⚡️ 快速启动
- 📦 开箱即用，集成多种工具链 `eslint`,`prettier`,`husky`
- 🛠️ 使用 `tinypng` 进行批量图片压缩
- 🚀 根据特定格式的 md 自动生成 TS 接口类型和网络请求代码以及 Mock 数据

## 使用指南

### 安装

脚手架下载，任意一个包管理器都可以，个人比较喜欢 pnpm

```shell
pnpm i @redrockfe/rrfe -g
```

### 创建新项目

```shell
rrfe create [project]
```

### 压缩图片

```shell
rrfe tinypng [root]
```

会按照 **./assets/imgs** 或 **./assets/img** 或 **./assets/imges** 或 **./assets/imge** 寻找文件位置

### 根据模板生成 TS 类型以及调用函数

```shell
rrfe api
```

可以自己选择**解析格式**

```shell
rrfe api --type=apifox
```

不使用**mock**

```shell
rrfe api --mock=false
```

#### 使用说明

需要把`api.md`或者`api.mdx`放在根目录下

自动解析生成 ts 和 api 请求,

同时也会自动生成基于`json-server`的数据`mock`的`routes.json`,`db.json`

关键参数一定要写对

- 切分文件: `## Page:xxx`
- 读取 URL:  `### URL：`
- 请求方式:  `### 请求参数：`
- 请求参数:  `### 返回参数：`

> 注意请求方式以及返回参数使用 JSON 格式

推荐用法使用 mdx 的 snippet
直接复制如下代码即可在用户代码片段的 mdx 里即可

````json
"rrfeApi": {
  "prefix": "rrfemd",
  "body": [
    "",
    "## ${1}",
    "",
    "",
    "## 简要描述：",
    "",
    "",
    "",
    "### URL",
    "",
    "${2}",
    "",
    "### 请求方式：",
    "",
    "${3}",
    "",
    "### 请求参数：",
    "",
    "``` json",
    "{",
    "${4}",
    "}",
    "```",
    "### 请求参数说明：",
    "",
    "",
    "### 返回参数：",
    "",
    "``` json",
    "{",
    "${5}",
    "}",
    "```",
    "",
    "### 返回参数说明"
  ],
  "description": "rrfe api md"
}
````

然后鼠标输入 rrfeApi 就会自动生成按 tab 即可快速输入

目前处于 mvp 版后续会进行继续迭代，提供更加丰富的选项

#### 常见问题

JSON 格式错误

❌

```json
{
  "a": "test",
}
```

✔️

```
{
  "a": "test"
}
```

## TODO

- 提供更加丰富的配置
- 可能引入插件系统
- 完善边界情况
- 优化生成产物
- 完善单测
- 完善 logger
npm package: @redrockfe/rrfe-cli
Description: cli for redrockfe
Author: sunsunmonkey
Latest version: 0.8.5
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<p align="center">
    <h1 align="center">@redrockfe/rrfe-cli 🚀</h1>
</p>
<p align="center">
    <img src="https://img.shields.io/badge/cli-redrock-red?labelColor=gray&style=flat" alt="cli" />
    <img src="https://img.shields.io/badge/template-vite-green?labelColor=gray&style=flat" alt="template" />
    <a href="https://www.npmjs.com/package/@redrockfe/rrfe-cli"><img src=https://img.shields.io/npm/v/@redrockfe/rrfe-cli.svg  alt="npm package"></a>
</p>

## feature

- 💡 实验 vite 构建
- ⚡️ 快速启动
- 🛠️ 集成多种工具链 eslint,prettier,husky
- 📦 开箱即用

## 使用指南

脚手架下载，任意一个包管理器都可以，个人比较喜欢 pnpm

```shell
pnpm i @redrockfe/rrfe-cli -g
```

### 创建新项目

```shell
rrfe-cli create [project]
```
npm package: @redroot/react-vimeo
Description: React component to load video from Vimeo
Author: Berkeley Martinez
Latest version: 0.1.3

# React Vimeo

[![NPM](https://nodei.co/npm/react-vimeo.png?downloads=true)](https://nodei.co/npm/react-vimeo/)

## Usage

```javascript
  var Vimeo = require('react-vimeo');

  React.render(
    <Vimeo videoId={ videoId } />,
    $mountNode
  );
```

To handle errors, you can pass a function to the `onError` prop:

```js
  function onError(err) {
    console.error(err);
  };

  React.render(
    <Video onError={ onError } videoId={ videoId } />
    document.querySelector('#your-div')
  );
```

## Behind the Scene

There are some things that you should know about the component. The first one is the structure created inside by the component if you wish to stylize it.

So, the semantic HTML structure will be something like this:

```html
  <div class='vimeo'>
    <div class='vimeo-loading'>
      <svg>...</svg>
    </div>
    <div class='vimeo-image'>
      <button type='button' class='vimeo-play-button'>
        <svg>...</svg>
      </button>
    </div>
    <div class='video-embed'>
      <iframe>...</iframe>
    </div>
  </div>
```

This is a very simple structure to stylize however you want. So, if you are lost, don't panic, there is an [example live here](http://freecodecamp.github.io/react-vimeo/) that you can follow.

For more details, check out the API

## API

[API](docs/README.md)

## License

MIT

See the [License](LICENSE.md) file.
npm package: @redsdev/common-functions
Description: Library of common functionalities for web projects like String, Object, Calendar Options, and other functions
Author: RedsDev
Latest version: 1.0.15

# Welcome to @redsdev/common-functions 👋
![Version](https://img.shields.io/badge/version-1.0.0-blue.svg?cacheSeconds=2592000)
[![License: ISC](https://img.shields.io/badge/License-ISC-yellow.svg)](#)

> Library of common functionalities for web projects like String, Object, Calendar Options, and other functions

## Install

```sh
npm install --save @redsdev/common-functions
```

## Run tests

```sh
npm test
```

## Usage Example
```js
import { ObjectUtils } from '@redsdev/common-functions';

const number = 0;
console.log(ObjectUtils.isObject(number)); // false
```

## Utilities
* [CommonFunctions](./docs/CommonFunctions.md)
* [ObjectUtils](./docs/ObjectUtils.md)
* [StringUtils](./docs/StringUtils.md)
* [Calendar](./docs/Calendar.md)


## Author

👤 **RedsDev**


## Show your support

Give a ⭐️ if this project helped you!


***
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
npm package: @redserenity/ghost-storage-back-blaze
Description: A storage adapter for Ghost that supports BackBlaze B2 cloud storage.
Author: Tyler Andersen
Latest version: 1.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Ghost Storage Adapter - BackBlaze B2

**_This storage adapter works with Ghost 5.x_**

[![npm (scoped)](https://img.shields.io/npm/v/@redserenity/ghost-storage-back-blaze?style=for-the-badge)](https://www.npmjs.com/package/@redserenity/ghost-storage-back-blaze)
[![Docker Image Size (tag)](https://img.shields.io/docker/image-size/redserenity/ghost-b2/alpine?label=Docker%20Image%20Size&style=for-the-badge)](https://hub.docker.com/r/redserenity/ghost-b2)

## Installation

Via Yarn (Recommended)
```shell
cd <ghost install dir>/current
yarn add ghost-storage-back-blaze@npm:@redserenity/ghost-storage-back-blaze
```

Via NPM
```shell
cd <ghost install dir>/current
npm install --save ghost-storage-back-blaze@npm:@redserenity/ghost-storage-back-blaze
```

Via GIT
```shell
mkdir -p <ghost install dir>/content/adapters/storage
cd <ghost install dir>/content/adapters/storage
git clone git@gitlab.com:RedSerenity/Ghost/Adapters/ghost-storage-back-blaze.git
```

## Configuration
#### Configuration file

Edit your `config.<environment>.js` file

```json
{
  ..., // Existing configuration
  "storage": {
    "active": "ghost-storage-back-blaze",
    "ghost-storage-back-blaze": {
      "keyId": '<Your Key Id Here>',
      "secretKey": '<Your Secret Key Here>'
    }
  }
}
```


#### Using environment variables
| Name                                         | Value             |
|----------------------------------------------|-------------------|
| storage__ghost-storage-back-blaze__keyId     | [your key id]     |
| storage__ghost-storage-back-blaze__secretKey | [your secret key] |


#### Notes
The bucket that gets used is the one tied to your `keyId`. Make sure you create your application key for a specific bucket.


## BackBlaze
Login to your [BackBlaze account](https://secure.backblaze.com/user_signin.htm) and go to [App Keys](https://secure.backblaze.com/app_keys.htm). Create a new application key and be sure to select the bucket this key is for (do not create the key for ALL buckets).

![screenshot1.png](https://gitlab.com/RedSerenity/Ghost/Adapters/ghost-storage-back-blaze/-/raw/master/images/screenshot1.png)
![screenshot2.png](https://gitlab.com/RedSerenity/Ghost/Adapters/ghost-storage-back-blaze/-/raw/master/images/screenshot2.png)
npm package: @redshank/native
Description: @redshank/native is a UI components library specifically designed for React Native. This library is not only aesthetically pleasing but also extremely powerful, allowing developers to create stunning and highly functional mobile applications with ease. Ju
Author: Kevin Rivas
Latest version: 4.2.14

# @redshank/native

The objective of this project is to create a complete and advanced framework such as Antd for the web, I want to be able
to offer a set of reusable components that are native and beautiful in such a way that we all love to use it in our
projects

# Documentation

[Documentation](https://www.redshank.app) under construction, launch scheduled for November 30, 2022.

## Installation

```sh
npm install @redshank/native
```

# Usage

Make sure you have react-native>=0.65.0

## Documentation

Documentation [here](https://redshank.app)

![img.png](img.png)

## Code Example

```js
import {
  Button,
  Space,
  Text,
  ThemeProvider,
} from '@redshank/native';

export default function App() {
  // automic dark mode
  return (
    <ThemeProvider>
      <ScrollView contentContainerStyle={styles.view}>
        <View style={styles.container}>
          <View>
            <Text>Buttons</Text>
            <Text level={4}>Default buttons</Text>
            <Space justify="center">
              <Button>Primary</Button>
              <Button color="success">Success</Button>
              <Button type="link" color="warning">
                Warning
              </Button>
              <Button type="outline" color="error">
                Error
              </Button>
            </Space>
          </View>
          <View>
            <Text level={4}>Circle buttons</Text>
            <Space justify="center">
              <Button shape="circle">Primary</Button>
              <Button shape="circle" color="success">
                Success
              </Button>
              <Button type="link" shape="circle" color="warning">
                Warning
              </Button>
              <Button type="outline" shape="circle" color="error">
                Error
              </Button>
            </Space>
          </View>
          <View>
            <Text level={4}>Custom color buttons</Text>
            <Space justify="center">
              <Button color="magenta">Magenta</Button>
              <Button color="orangered">Orangered</Button>
              <Button color="green">Green</Button>
              <Button color="purple">Purple</Button>
            </Space>
          </View>
        </View>
      </ScrollView>
    </ThemeProvider>
  );
}
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @redshift-ui/react
Description: ## Usage
Author: Burh
Latest version: 2.3.4

# Redshift UI **React**

## Usage

To start using the components, please follow these steps:

- 1 Wrap your application with the `RedshiftProvider` provided by
   **@redshift-ui/react**.

```jsx
import { RedshiftProvider } from "@redshift-ui/react"

// Do this at the root of your application
function App({ children }) {
  return <RedshiftProvider>{children}</RedshiftProvider>
}
```

- 2 Now you can start using components like so!:

```jsx
import { Button } from "@redshift-ui/react"

function Example() {
  return <Button>I just consumed some ⚡️Redshift!</Button>
}
```
npm package: @redsift/d3-rs-calendar-chart
Description: Generates a calendar chart using D3v4.
Author: Christos Vontas
Latest version: 0.3.8

# d3-rs-calendar-chart

`d3-rs-calendar-chart` easily generate a single character icon.

## Builds

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

## Example

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

## Usage

### Browser
	
	<script src="//static.redsift.io/reusable/d3-rs-calendar-chart/latest/d3-rs-calendar-chart.umd-es2015.min.js"></script>
	<script>
		var chart = d3_rs_calendar_chart.html().lastWeeks(12);
		...
	</script>

### ES6

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

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

### Parameters

|Name|Description|Transition|
|----|-----------|----------|
|classed|SVG custom class|N|
|width| Width of the calendar| Y|
|height| Height of the calendar| Y|
|scale | Scale of the calendar | Y|
|lastWeeks| Number of weeks in the past from now| Y|
|nextWeeks| Number of weeks in the future from now | Y |
|colours| Colour palette for the data. Expected values `green\|blue\|purple`, or an array of RGB values e.g. `['#b0e288', ... ]` preferably length >= 5 | Y|
npm package: @redsift/d3-rs-circlepack
Description: Generates circlepack charts using D3v4.
Author: Rahul Powar
Latest version: 0.3.0

# d3-rs-circlepack

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

`d3-rs-circlepack` generate a circlepack flow via the D3 reusable chart convention.

## Example

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

## Usage

### Browser

    <script src="//static.redsift.io/reusable/d3-rs-circlepack/latest/d3-rs-circlepack.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-circlepack";
    let eml = chart();
    ...

### Require

    var chart = require("@redsift/d3-rs-circlepack");
    var eml = chart.html();
    ...
npm package: @redsift/d3-rs-console
Description: Creates a console / terminal frame using D3v4.
Author: Rahul Powar
Latest version: 0.0.3

# d3-rs-console

`d3-rs-console` is a component for creating animateable terminal frame in a SVG container.

## Builds

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

## Example

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

## Usage

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

### ES6

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

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

### Parameters

|Name|Description|Transition|
|----|-----------|----------|
|classed|SVG custom class|N|
|x,y,width,height|px values|Y|
|appearance|theme|N|
npm package: @redsift/d3-rs-intl
Description: Internationalization toolkit for D3v4.
Author: Rahul Powar
Latest version: 0.4.0

# d3-rs-intl

`d3-rs-intl` is a module that includes a few Internationalization tools for D3v4.

## Builds

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

## Example

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

## Usage

### Browser
	
	<script src="//static.redsift.io/reusable/d3-rs-intl/latest/d3-rs-intl.umd-es2015.min.js"></script>
	<script>
		var l = d3_rs_intl.time();
		var t = d3.timeFormatLocale(l.d3).format('%c')(new Date());
	</script>

### ES6

	import { units } from "@redsift/d3-rs-intl";
	let l = units([ 'en-GB', 'en' ]);
	...
	
### Require

	var intl = require("@redsift/d3-rs-intl");
	var l = intl.units(intl.lookup('Catalan'));
	...

The main helpers in this module are `time()` and `units()` which can optionally take an array of preferred ISO 639 `language-CULTURE` or `language` values and return the appropriate formatter. This formatter can be used by [d3-format](https://github.com/d3/d3-format#locale_format) and [d3-time-format](https://github.com/d3/d3-time-format#locale_format) to emit localized values such as decimal separators, currency and day names.

If no parameters are supplied, both methods attempt to use the browser preferences.

## Building

As this package builds the node using imported JSON locales from d3-format and d3-time-format, you will need a JSON -> JS convesion helper in your build process if you are using a tool like Rollup, e.g. `rollup-plugin-json`.
npm package: @redsift/d3-rs-legends
Description: Generates legends for charts using D3v4.
Author: Rahul Powar
Latest version: 0.5.0

# d3-rs-legends

`d3-rs-legends` generate a legend for charts.

## Builds

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

## Example

[View @redsift/d3-rs-legends on Codepen](http:...)

### Default

![Default bottom orientation](https://bricks.redsift.io/reusable/d3-rs-legends.svg?_datum=['A', 'B', 'C'])

### Left

![Left orientation](https://bricks.redsift.io/reusable/d3-rs-legends.svg?_datum=['A', 'B', 'C']&orientation=left)

### Right

![Right orientation](https://bricks.redsift.io/reusable/d3-rs-legends.svg?_datum=['A Short', 'B', 'C Long']&orientation=right)

### Top, rounded and spaced out

![Top orientation](https://bricks.redsift.io/reusable/d3-rs-legends.svg?_datum=['A', 'B', 'C']&orientation=top&radius=10&padding=40)

## Usage

### Browser
	
	<script src="//static.redsift.io/reusable/d3-rs-legends/latest/d3-rs-legends.umd-es2015.min.js"></script>
	<script>
		var chart = d3_rs_legends.html();
		d3.select('body').datum([ 'A', 'B' ]).call(chart);
	</script>

### ES6

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

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

### Datum

- Simplest form, array of strings: `['A', 'B', 'C', ...]`

### Parameters

Property|Description|Transition|Preview
----|-----------|----------|-------
`classed`|*String* SVG custom class|N
`width`, `height`, `size`, `scale`|*Integer* SVG container sizes. Typically, use `size` to scale the chart|Y
`margin`|*Object, Number* Margin affecting all chart elements
`inset`|*Object, Number* Margin affecting the legend
`style`|*String* Custom CSS to inject into chart|N
`background`|*Color*
`theme`|*light|dark*
`orientation`|*String* Location of the legend, one of `top`, `bottom`, `left`, `right`|N
`legendSize`|*Integer* Size of the color sample|N
`spacing`|*Integer* Estimator of the amount of space to resere of each char in the text label
`padding`|*Integer* Pixels between each legend element
`radius`|*Integer* Radius of the legend rectangle. Rounds the element
`fill`|*Array, Function* Colors to assign to legend in order
`toggleable`|*Boolean* If true will add a new Checkbox on the left side of the color square to add capability to enable/disable legend items.|N
`onEnabledLegendItemsChange`|*Function* To be called whenever enabled legend items changed. It's called passing an array of the enabled legend indexes|N
`tintColor`|*String* Color to use for checkbox|N
npm package: @redsift/d3-rs-network
Description: Generates network charts using D3v4.
Author: Rahul Powar
Latest version: 0.2.0

# d3-rs-network

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

`d3-rs-network` 

## Usage

### Browser

    <script src="//static.redsift.io/reusable/d3-rs-network/latest/d3-rs-network.umd-es2015.min.js"></script>
    <script>
      let VIZ = {
      "nodes": [
        { id: "grandparent1", strata: 0 },
        {id: "parent1", strata: 1},
        {id: "child1", strata: 2},
        {id: "child2", strata: 2},
        {id: "child3", strata: 2, friendlyName: "napoleon"},
        {id: "child4", strata: 2},
        { id: "grandparent2", strata: 0 }
        // ...
      ],
      "links": [
        { source: "grandparent1", target: "grandparent2", value: 40, color: 'red' },
        { source: "child1", target: "child3", value: 10.34, color: 'red' },
        { source: "child2", target: "child3", value: 10.34, color: 'red' }
        // ...
      ],
      "owns": [
        { parent: "grandparent1", child: "parent1" },
        { parent: "parent1", child: "child1" },
        { parent: "parent1", child: "child2" },
        // ...
      ]
      };

      var chart = d3_rs_network.html('blank').category(category)
      .tryGetChildren(tryGetChildren).tryGetParent(tryGetParent)
      .tryGetIndexBrothers(tryGetIndexBrothers).tryGetNumberOfBrothers(tryGetNumberOfBrothers)
      .textDisplay(textDisplay)
      ;

      d3.select('body').datum(VIZ).call(chart);
    </script>

### ES6

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

### Require

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

### TODO
Additional functions for customisation of the visualizations.
    - Size of circles depending of given parameter as input
    - Color of circles depending on strata
    - Width of lines depending of given parameter as input
    - Color of lines depending of given parameter as input
    - Saturation of lines depending of given parameter as input
    - Possibility to display different hierarchy of links
npm package: @redsift/d3-rs-pies
Description: Generates pie charts using D3v4.
Author: Rahul Powar
Latest version: 0.4.0

# d3-rs-pies

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

`d3-rs-pies` generate a range of pie charts via the D3 reusable chart convention.

## Example

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

### Simple pie chart

![Simple pie chart](https://bricks.redsift.cloud/reusable/d3-rs-pies.svg?_datum=%5B%7B%22l%22%3A%22(direct)%22%2C%22v%22%3A108%7D%2C%7B%22l%22%3A%22google%22%2C%22v%22%3A105%7D%2C%7B%22l%22%3A%22crunchbase.com%22%2C%22v%22%3A19%7D%2C%7B%22l%22%3A%22techcrunch.com%22%2C%22v%22%3A16%7D%2C%7B%22l%22%3A%22Others%22%2C%22v%22%3A77%7D%5D)

### Pie chart with legend

![With legend](https://bricks.redsift.cloud/reusable/d3-rs-pies.svg?_datum=[20,200,3100,1000]&legend=20&legend=200)

### Inner radius and padded

![Inner radius](https://bricks.redsift.cloud/reusable/d3-rs-pies.svg?_datum=[1,4,6,2,8,9,7,6,4]&innerRadius=-0.2&padAngle=0.05)

## Usage

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

### ES6

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

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

### Datum

- Simplest form, array of numbers: `[1,2,3,4...]`

### 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
`outerRadius`|*Integer* Radius of the pie
`innerRadius`|*Number* > 0 the radius of the inner region in pixels. < 0, the unit inner radius as a function of the outerRadius
npm package: @redsift/d3-rs-polars
Description: Generates polar charts using D3v4.
Author: Rahul Powar
Latest version: 0.0.2

# d3-rs-polars

`d3-rs-polars` generate a range of pie charts.

## Builds

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

## Example

[View @redsift/d3-rs-polars on Codepen](http:...)

### Line chart

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

### Area chart

![Sample bars with a left orientation](https://bricks.redsift.io/reusable/d3-rs-polars.svg?_datum=[1,200,3100,1000]&orientation=left&fill=global)

### Combination

![Sample bars with a top orientation and time label](https://bricks.redsift.io/reusable/d3-rs-polars.svg?_datum=[{%22v%22:1,%22l%22:1466424812000},{%22v%22:2,%22l%22:1466511212000},{%22v%22:3,%22l%22:1466597612000},{%22v%22:300.5,%22l%22:1466684012000},{%22v%22:4000,%22l%22:1466770412000},{%22v%22:40000,%22l%22:1466856812000}]&orientation=top&labelTime=%25a%20%25d)

## Usage

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

### ES6

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

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

### Datum

- Simplest form, array of unit numbers: `[0.1, 1, 0.5 ,0.3...]`

### Parameters

Property|Description|Transition|Preview
----|-----------|----------|-------
`classed`|*String* SVG custom class|N
`width`, `height`, `size`, `scale`|*Integer* SVG container sizes. Typically, use `size` to scale the chart|Y
`margin`|*Object, Number* Margin affecting all chart elements
`inset`|*Number* Margin affecting primary chart element
`style`|*String* Custom CSS to inject into chart|N
`background`|*Color*
`theme`|*light|dark*
`language`|*String*
`outerRadius`|*Integer* Radius of the largest arc. Default is `null` and is set automatically as a funciton of the size|
`padding`|*Number* Pixels between polar arcs|
`thickness`|*Number* Pixel thickness of the arc|
`cornerRadius`|*Number* Pixel rounding of the arc ends|
`reverse`|*Boolean* Reverse the arc fill computation|
`padAngle`|*Number* Radians to pad between the data values 0 and 1. By default, an arc between 0 and 1 will form a complete circle|
`startAngle`|*Number* Radian position of 0|
`displayValue`|
`displayFormatValue`|
`fill`|
`displayTip`|
`legend`|*Array*
npm package: @redsift/d3-rs-progress
Description: Generates an animated D3v4.
Author: Rahul Powar
Latest version: 0.4.0

# d3-rs-progress

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

`d3-rs-progress` presents a progress indicator.

## Example

### Show / Hide

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

### Custom Icon

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

## Usage

```bash    
    npm i @redsift/d3-rs-progress
```

### Browser

```javascript
    <script src="//static.redsift.io/reusable/d3-rs-progress/latest/d3-rs-progress.umd-es2015.min.js">
    </script>
    <script>
        var hide = d3_rs_geo.show('#parent');
        setTimeout(() => {
            hide().then(() => console.log('hidden'))
        }, 1000);
    </script>
```

### ES6

```javascript
    import { show } from "@redsift/d3-rs-progress";
    let hide = show('#parent');
    ...
```

### Require

```javascript
    var progress = require("@redsift/d3-rs-progress");
    var hide = progress.show();
    ...
```

## API

The helper function `show(location, icon)` creates an SVG and animates it till the caller hides the icon.

Parameter|Detail
---------|------
`location`|Optional, defaults to body *String, D3 Selection* CSS selection where the icon should be injected.
`icon`|Optional, defaults to the standard size *Reusable* Chart to render as the animated Icon.

Returns   |Detail
----------|------
`function()`|Function to call to hide the icon. A call to the hide function returns a Promise that will resolve when the hide animation is finished.

## Icon

You may optionally supply an icon to `show()` that customizes the apperance of the animated icon or render it yourself as a standard reusable chart.

### Parameters

Property|Description|Transition
----|-----------|----------|-------
`classed`|*String* SVG custom class|N
`width`, `height`, `size`|*Integer* SVG container sizes|Y
`scale`|*Float* SVG container scale|Y
`zoom`|*Float* Zoom on the elements inside the SVG|Y
`inset`|*Float* Pixel inset of the arc|N
`rotation`|*Float* Degree rotation of the arc|Y
`angle`|*Float* Radian size of the arc|Y
`icon`|*Float* Scale of the internal icon|Y
`colors`|*String*, *String* Background color string and foreground color string, if used both required. **Note this will add a border to icon**| N
`border`|*Boolean* Adds border to icon and keeps center solid. **If colors used this will default to true**  | N
npm package: @redsift/d3-rs-sankey
Description: Generates sankey charts using D3v4.
Author: Rahul Powar
Latest version: 0.4.0

# d3-rs-sankey

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

`d3-rs-sankey` generate a sankey flow via the D3 reusable chart convention.

## Example

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

### Line chart

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

### Multiple series

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

## Usage

### Browser

    <script src="//static.redsift.io/reusable/d3-rs-sankey/latest/d3-rs-sankey.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-sankey";
    let eml = chart();
    ...

### Require

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

## Test
To run the examples:
`npm run serve`