open-index/open-npm huggingface dataset:
npm package: @helpdice/theme
Description: Theme provider for Helpdice UI library.
Latest version: 1.1.3

<p align="center" height="370">
<img align="center" height="370" src="">
</p>

> Modern and minimalist React UI library.

<br/>

## Quick Start

1. run `yarn add @helpdice/ui` or `npm i @helpdice/ui` install it.

2. import into project:

```jsx
import { UiProvider, CssBaseline } from '@helpdice/ui'

const Application = () => (
  <UiProvider>
    <CssBaseline /> // ---> Normalize styles
    <AppComponent /> // ---> Your App Component
  </UiProvider>
)
```

## Documentation

- [Document Site](https://ui.helpdice.com)

## Development

- [Contributing Guide](https://github.com/helpdice/helpdice-ui/blob/main/.github/CONTRIBUTING.md)
- [Create Issues](https://github.com/helpdice/helpdice-ui/issues/new)

## LICENSE

[MIT](./LICENSE)
npm package: @helpdice/ui
Description: Modern React UI library.
Latest version: 2.6.3

<p align="center" height="370">
<img align="center" height="370" src="">
</p>

> Modern and minimalist React UI library.

<br/>

## Quick Start

1. run `yarn add @helpdice/ui` or `npm i @helpdice/ui` install it.

2. import into project:

```jsx
import { UiProvider, CssBaseline } from '@helpdice/theme'

const Application = () => (
  <UiProvider>
    <CssBaseline /> // ---> Normalize styles
    <AppComponent /> // ---> Your App Component
  </UiProvider>
)
```

## Documentation

- [Document Site](https://ui.helpdice.com)

## Development

- [Contributing Guide](https://github.com/helpdice/helpdice-ui/blob/main/.github/CONTRIBUTING.md)
- [Create Issues](https://github.com/helpdice/helpdice-ui/issues/new)

## LICENSE

[MIT](./LICENSE)
npm package: @helpdotcom/build-ast
Description: Make building AST nodes easy
Author: Evan Lucas
Latest version: 2.3.4

# build-ast

Make build AST nodes easy

## Install

```bash
$ npm install [--save] @helpdotcom/build-ast
```

## Test

```bash
$ npm test
```

## Example

```js
'use strict'

const B = require('@helpdotcom/build-ast')
const toCode = require('escodegen').generate

// 'use strict'
const b = B().use('strict')

// `typeof opts.name`
const left = B.typeof('opts.name')

// `'string'`
const right = B.string('string')

// `typeof opts.name !== 'string'`
const check = B.notEquals(left, right)

// new TypeError('name must be a string')
const error = B.TypeError('name must be a string')

// const er = new TypeError('name must be a string')
// return setImmediate(cb, er)
const errorBlock = B()
  .declare('const', 'er', error)
  .returns(
    B.callFunction('setImmediate', [
      B.id('cb')
    , B.id('er')
    ])
  ).build()

// if (typeof opts.name !== 'string') {
//   const er = new TypeError('name must be a string')
//   return setImmediate(cb, er)
// }
const block = B()
block.if(check, B.block(errorBlock))
block.returns(
  B.callFunction('setImmediate', [
    B.id('cb')
  , B.ast.literal(null)
  , B.id('opts')
  ])
)

// module.exports = function validate(opts, cb) {}
b.module(B.function('validate', ['opts', 'cb'], block.build()))

console.log(toCode(b.program()))
```

which will print out:

```js
'use strict';
module.exports = function validate(opts, cb) {
  if (typeof opts.name !== 'string') {
    const er = new TypeError('name must be a string')
    return setImmediate(cb, er)
  }
  return setImmediate(cb, null, opts)
}
```

## API

See [`DOCS.md`](DOCS.md)

## Author

Evan Lucas

## License

MIT (See `LICENSE` for more info)
npm package: @helpdotcom/is
Description: isDate, isUUID, and isEmail for use with help-gen
Author: Evan Lucas
Latest version: 3.0.5

# is

> isDate, isUUID, and isEmail for use with [`help-gen`][]

## Install

```bash
$ npm install --save @helpdotcom/is
```

## Test

```bash
$ npm test
```

## Usage

```js
'use strict'

const is = require('@helpdotcom/is')
```

### isDate(d)

* `d` [`<String>`][] | [`<Date>`][] ISO formatted date string

Returns `true` if `d` is a valid ISO date string. Otherwise, returns `false`.

### isEmail(s)

* `s` [`<String>`][] The email string

Returns `true` if `s` is a valid email address. Otherwise, returns `false`.

### isEmailAllowName(s)

* `s` [`<String>`][] The email string

Returns `true` if `s` is a valid email address with an optional name.
Otherwise, returns `false`.

The following formats are supported:

* `evan.lucas@help.com`
* `Evan Lucas <evan.lucas@help.com>`
* `"Evan Lucas" <evan.lucas@help.com>`
* `"Help.com, LLC" <info@help.com>`
* `Help.com, LLC <info@help.com>`
* `Jane Doe (maiden name) <jane@doe.com>`

### isUUID(s)

* `s` [`<String>`][] The uuid to test.

Returns `true` if `s` is a valid v4 UUID. Otherwise, returns `false`.

### isUrl(s)

* `s` [`<String>`][] The url to test.

Returns `true` if `s` is a valid URL. Otherwise, returns `false`.

### isIpAllowCIDR(s)

* `s` [`<String>`][] The url to test.

Returns `true` if `s` is a valid ip with CIDR notation. Otherwise, returns `false`.


## Author

Evan Lucas

## License

MIT (See `LICENSE` for more info)

[`<String>`]: https://mdn.io/string
[`<Date>`]: https://mdn.io/date
[`help-gen`]: https://git.help.com/common-backend/help-gen
npm package: @helper-gdp/utils
Description: gdp小组共通工具库
Author: Agility
Latest version: 1.5.0

# helper-gdp-utils

> gdp小组工具库

## 使用文档

[Getting Started](./docs/index.html)

## 更新记录

[Getting History](./CHANGELOG.md)

## 提交规范

* 新增的内容在test对应路径下需要有指定的test文件
* 新增的内容单元测试尽量做到100%覆盖
* 新增的内容在doc文档内应有详细的说明
* 每一版的发布都应生成完成的测试覆盖报告

## 发布npm库

1. 确认当前npm源正确`https://registry.npmjs.org/`
2. 确认登录该源的账号正确,并具备发布库的权限
3. `yarn run build`及`yarn run docs` 打包生产代码及组件文档
4. 执行`git add -A`及`yarn run commit`提交更改
5. 发布命令为`yarn run release -- --release-as [major/minor/patch]` 根据更新程度决定采用的的release as值, 如果为内测或公测版本则补充prerelease参数 `yarn run release -- --release-as [major/minor/patch] --prerelease [alpha/beta]`
6. `git push --follow-tags origin dev` 推送到远程分支
7. `yarn publish`正式发布 or `yarn publish --tag [alpha/beta]`内测或公测发布
8. 切换至master, `git merge dev` 拉取更改
9. `git push origin master` 更新远程仓库

## cli 命令

* `yarn run clean`移除build文件目录
* `yarn run test`进行单元测试
* `yarn run docs`生成使用文档 HTML
* `yarn run build`执行打包构建
* `yarn run dev`执行打包构建并监听后需改动,同步build
* `yarn run commit`代码commit
* `yarn run release`发布release changelog

## TODO

* 为指定md文件生成目录: `doctoc [filename]`
npm package: @helper-ui/hooks
Description: Helper UI hooks
Latest version: 1.0.0

# 常见Hooks封装

> 文档地址：
> https://eric-leo.github.io/helper-hooks/

### Helper Hooks包含通用业务的Hooks实现，目前还比较简单：

```shell
安装方式：
npm install @helper-ui/hooks
或
yarn add @helper-ui/hooks
或
pnpm add @helper-ui/hooks
```
npm package: @helper-ui/icons
Description: Vue 3 Icon library for HelperUI
Latest version: 1.0.0

# 鸿鸾Vue 3 SVG Icons

### 鸿鸾Vue 3 SVG Icons包含300+个SVG图标，提供twotone，fill，file三个系列：

> 文档地址：https://eric-leo.github.io/helper-icons/

```shell
安装方式：
npm install @helper-ui/icons
或
yarn add @helper-ui/icons
或
pnpm add @helper-ui/icons
```
npm package: @helper-ui/vue-repl
Description: Vue component for editing Vue components
Author: Evan You
Latest version: 1.0.0

# @vue/repl

Vue SFC REPL as a Vue 3 component.

## Simple Usage

```vue
<script setup>
import { Repl } from '@vue/repl'
import '@vue/repl/style.css'
</script>

<template>
  <Repl />
</template>
```

## Advanced Usage

```vue
<script setup>
import { watchEffect } from 'vue'
import { Repl, ReplStore } from '@vue/repl'

const store = new ReplStore({
  // initialize repl with previously serialized state
  serializedState: location.hash.slice(1),

  // specify the default URL to import Vue runtime from in the sandbox
  // default is the CDN link from unpkg.com with version matching Vue's version
  // from peerDependency
  defaultVueRuntimeURL: 'cdn link to vue.runtime.esm-browser.js'
})

// persist state to URL hash
watchEffect(() => history.replaceState({}, '', store.serialize()))

// pre-set import map
store.setImportMap({
  imports: {
    myLib: 'cdn link to esm build of myLib'
  }
})

// use a specific version of Vue
store.setVueVersion('3.2.8')
</script>

<template>
  <Repl :store="store" :showCompileOutput="true" />
</template>
```
npm package: @helpful-hooks/use-bool
Description: Helpful React hook for storing boolean state
Author: taennan
Latest version: 1.0.6

# Use Bool

A simple React hook for storing `boolean` state

## Contents

- [Installation](#installation)
- [Usage](#usage)
- [Contributing](#contributing)
- [Licence](#licence)

## Installation

If using `yarn`

`yarn add @helpful-hooks/use-bool`

For `npm`

`npm install @helpful-hooks/use-bool`

## Usage

The hook returns an array similar to `React`'s `useState` hool. The first item contains the `boolean` state. The second item contains helper functions for setting the stored value.

```ts
const [
  state,         // Initially false by default
  stateHandlers   
] = useBool()

const {
  on,            // Set to true
  off,           // Set to false
  toggle,        // Switch between true and false
  set,           // Use like a React setState function
} = stateHandlers
```

Here is a simple example demonstrating how `useBool` can be used to show and hide a component

```ts
import { useBool } from '@helpful-hooks/use-bool'

// ...

const [show, showHandlers] = useBool()

return (
  <>
    <button onClick={stateHandlers.toggle}>
      TOGGLE
    </button>
    {show ? 'I am visible!' : null}
  </>
)
```

To set an initial value, pass it as the first argument. The intial value is false by default

```ts
const [state] = useBool(true)

// state === true
```

This hook also supports callbacks which are run when a change in state is made

```ts
const onTurnedOff = () => console.log('state === false')
const onTurnedOn = () => console.log('state === true')

const [state, stateHandlers] = useBool(
    // Or false for default behaviour
    true,
    // Pass the callbacks as the second argument
    { onTurnedOff, onTurnedOn },
)
```

## Contributing

All contributions are welcome! If you find a bug or have a feature request, open an issue in the [Github Repo](github-repo)

## Licence

This package uses the MIT licence. Use or modify it in any morally correct way you choose

[github-repo]: https://github.com/taennan/use-bool.git
npm package: @helpfulhuman/svg-to-component
Description: Quickly generate React components out of SVG files.
Author: Nick Glenn
Latest version: 1.0.0

# SVG to React Component

This is a command line tool for quickly generate React components from SVG files with customizable attributes (as props). Support for Preact and other component-based frameworks will be made available soon.

## Installation

```bash
npm i -g @helpfulhuman/svg-to-component
```

## Usage

```bash
svg2react my-graphic.svg
```

### Options

```bash
Usage: svg2react [options] <filename>

Options:

  -V, --version            output the version number
  -n, --componentName <n>  the desired name for the component
  -o, --output <n>         the desired filepath for output
  -t, --typescript         output as a Typescript .tsx file
  -h, --help               output usage information
```
npm package: @helpfulscripts/hsdata
Description: Helpful Scripts cross-framework data handling utilities 
Author: masterscripter
Latest version: 2.0.0

# Helpful Scripts Data Management functions
*hsdata* provides a simple data management and query mechanism.

Data is managed in a simple in-memory database that holds data in rows of columns. It autodetermines the types of data held in each column, along with the domain range for each column of data. A simple query language is
provided to filter matching data rows.

## Usage 
``` 

import { data } from 'hsdata';

// creating the data
const colNames = ['Name', 'Value', 'Start', 'End'];
const rows = [
   ['Harry', '100', '3/1/14', '11/20/14'], 
   ['Mary', '1500', '7/1/14',  '9/30/14'],
   ['Peter', '400', '5/20/14', '4/30/15'],  
   ['Jane', '700', '11/13/14', '8/15/15']
];
const data = new Data({colNames:colNames, rows:rows});

// querying the data
const query = {Name:["Peter", "Jane"]};           // query: Name is Peter or Jane
const result = data.filter(query);                // returns new dataset with matching rows
console.log(result.getColumn('Name').join(', ')); // > Peter, Jane
```
npm package: @helpgrid/core
Description: HelpGrid Signals SDK core - Shared foundation for error tracking and observability
Author: HelpGrid Team
Latest version: 0.1.2

# @helpgrid/core

Shared foundation for HelpGrid Signals error tracking SDK. Provides core error capture, transport, and scope management functionality.

## Installation

```bash
npm install @helpgrid/core
# or
pnpm add @helpgrid/core
```

## Quick Start

```typescript
import { SignalsClient, captureException } from '@helpgrid/core';

// Initialize SDK
SignalsClient.init({
  apiKey: 'your-api-key',
  environment: 'production'
});

// Capture exceptions
try {
  riskyOperation();
} catch (error) {
  captureException(error);
}
```

## API Reference

### SignalsClient.init(options)

Initialize the SDK with configuration options.

**Options:**
- `apiKey` (required): Your HelpGrid API key
- `endpoint`: API endpoint (default: `https://helpgrid.dev/api/signals/ingest`)
- `environment`: Environment name (default: `production`)
- `release`: Release version for tracking
- `sampleRate`: Sample rate 0-1 (default: `1` = 100%)
- `maxBreadcrumbs`: Max breadcrumbs to keep (default: `100`)
- `beforeSend`: Callback to modify events before sending
- `ignoreErrors`: Array of error patterns to ignore

### captureException(error, context?)

Capture an exception with optional context.

```typescript
captureException(new Error('Something failed'), {
  tags: { component: 'payment' },
  extra: { orderId: '123' }
});
```

### captureMessage(message, level?, context?)

Capture a message at specified severity level.

```typescript
captureMessage('User logged in', 'info', {
  tags: { userId: '456' }
});
```

### withScope(callback)

Execute callback within a new scope.

```typescript
withScope((scope) => {
  scope.setTag('feature', 'checkout');
  scope.setUser({ id: '789' });

  captureException(error);
});
```

### Scope Methods

```typescript
const scope = getScope();

scope.setTag(key, value);
scope.setTags({ key1: 'value1', key2: 'value2' });
scope.setExtra(key, value);
scope.setExtras({ key1: {}, key2: {} });
scope.setUser({ id: '123', email: 'user@example.com' });
scope.addBreadcrumb({ message: 'User clicked button', category: 'ui' });
scope.clearBreadcrumbs();
```

## Features

- ✅ Error fingerprinting (SHA-256)
- ✅ Stack trace parsing
- ✅ Scope management
- ✅ Breadcrumb tracking
- ✅ Event filtering and sampling
- ✅ Workers-compatible (no AsyncLocalStorage)
- ✅ Minimal overhead (no dependencies)

## Workers Compatibility

This SDK works in Cloudflare Workers and other edge runtimes:

```typescript
// Use manual scope management for Workers
SignalsClient.init({
  apiKey: env.HELPGRID_API_KEY,
  environment: 'production'
});

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    try {
      // Your handler
    } catch (error) {
      withScope((scope) => {
        scope.setTag('method', request.method);
        captureException(error);
      });
    }
  }
};
```

## Development

```bash
pnpm install
pnpm build
pnpm test
```

## License

MIT
npm package: @helpkite/js
Description: HelpKite JavaScript SDK for customer support chat widget
Author: HelpKite
Latest version: 1.0.0

# @helpkite/js

Official JavaScript SDK for HelpKite - Customer Support Chat Widget

## Installation

```bash
npm install @helpkite/js
```

Or with yarn:

```bash
yarn add @helpkite/js
```

## Quick Start

### React / Next.js

```typescript
import { helpkite } from '@helpkite/js';
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    helpkite.init({
      agentId: 'your-agent-id',
      hidden: false, // Optional: show widget by default
    });
  }, []);

  return <div>Your App</div>;
}
```

### Vanilla JavaScript

```javascript
import { helpkite } from '@helpkite/js';

helpkite.init({
  agentId: 'your-agent-id',
  hidden: false,
});
```

### TypeScript

Full TypeScript support is included:

```typescript
import { helpkite, type HelpKiteConfig } from '@helpkite/js';

const config: HelpKiteConfig = {
  agentId: 'your-agent-id',
  hidden: false,
};

helpkite.init(config);
```

## API Methods

### `helpkite.init(config)`

Initialize the HelpKite widget.

```typescript
helpkite.init({
  agentId: 'your-agent-id', // Required
  hidden: false, // Optional: show/hide widget on load
});
```

### `helpkite.show()`

Show the widget button.

```typescript
helpkite.show();
```

### `helpkite.hide()`

Hide the widget button.

```typescript
helpkite.hide();
```

### `helpkite.open()`

Open the chat widget.

```typescript
helpkite.open();
```

### `helpkite.close()`

Close the chat widget.

```typescript
helpkite.close();
```

### `helpkite.identify(user)`

Identify or update the current user.

```typescript
helpkite.identify({
  userId: '123',
  name: 'John Doe',
  email: 'john@example.com',
  company: 'Acme Corp',
});
```

### `helpkite.on(event, callback)`

Listen to widget events.

```typescript
helpkite.on('ready', () => {
  console.log('Widget is ready');
});

helpkite.on('open', () => {
  console.log('Widget opened');
});

helpkite.on('close', () => {
  console.log('Widget closed');
});
```

Available events:
- `ready` - Widget is ready
- `open` - Widget opened
- `close` - Widget closed
- `messageSent` - Message sent by user
- `messageReceived` - Message received from agent

## User Authentication

For logged-in users, you can pass user information for identity verification:

```typescript
helpkite.init({
  agentId: 'your-agent-id',
  user_id: 'user_123',
  user_hash: 'generated_hmac_hash', // Generated on your server
  user_metadata: {
    name: 'John Doe',
    email: 'john@example.com',
    company: 'Acme Corp',
  },
});
```

**Note:** The `user_hash` must be generated on your server using HMAC-SHA256. See the [HelpKite documentation](https://helpkite.com/docs) for details.

## License

MIT
npm package: @helpnest/mcp
Description: MCP server for HelpNest — expose your knowledge base to AI assistants
Latest version: 0.1.0

# @helpnest/mcp

MCP (Model Context Protocol) server for HelpNest. Exposes your knowledge base as tools for AI assistants like Claude Desktop, Cursor, and coding agents.

## Installation

```bash
npm install -g @helpnest/mcp
# or run directly
npx @helpnest/mcp
```

## Configuration

The server reads configuration from environment variables:

| Variable | Required | Description |
|----------|----------|-------------|
| `HELPNEST_API_KEY` | Yes | Your HelpNest API key (e.g., `hn_live_xxx`) |
| `HELPNEST_WORKSPACE` | Yes | Workspace slug (e.g., `acme`) |
| `HELPNEST_BASE_URL` | No | HelpNest instance URL (defaults to `https://helpnest.cloud`) |

### Claude Desktop

Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json`):

```json
{
  "mcpServers": {
    "helpnest": {
      "command": "npx",
      "args": ["@helpnest/mcp"],
      "env": {
        "HELPNEST_API_KEY": "hn_live_xxx",
        "HELPNEST_WORKSPACE": "acme",
        "HELPNEST_BASE_URL": "https://help.acme.com"
      }
    }
  }
}
```

### Cursor

Add to `.cursor/mcp.json` in your project:

```json
{
  "mcpServers": {
    "helpnest": {
      "command": "npx",
      "args": ["@helpnest/mcp"],
      "env": {
        "HELPNEST_API_KEY": "hn_live_xxx",
        "HELPNEST_WORKSPACE": "acme",
        "HELPNEST_BASE_URL": "https://help.acme.com"
      }
    }
  }
}
```

## Tools

| Tool | Input | Description |
|------|-------|-------------|
| `search_articles` | `{ query: string }` | Search help articles by keyword. Returns titles, slugs, and snippets. |
| `get_article` | `{ slug_or_id: string }` | Get full content of a specific article by slug or ID. |
| `list_collections` | none | List all collections (categories) with descriptions. |
| `ask_question` | `{ question: string }` | Search for relevant articles and return their full content (top 3 matches). |

## Architecture

The MCP server is a thin protocol wrapper around the `@helpnest/sdk`. It communicates with your HelpNest instance over HTTP using your API key — no direct database access. This means it works with both self-hosted and cloud instances.

```
AI Assistant (Claude, Cursor, etc.)
    │ stdio (MCP protocol)
    ▼
@helpnest/mcp
    │ HTTP (REST API)
    ▼
HelpNest instance
```

## Build

```bash
pnpm build      # compiles with tsup (CJS + ESM)
pnpm typecheck  # type-check without emitting
```

Built with `tsup` producing dual CJS and ESM output with a `#!/usr/bin/env node` shebang for CLI usage.
npm package: @helpnest/themes
Description: Community themes for HelpNest — the open-source help center
Latest version: 0.1.5

# HelpNest Themes

Community themes for [HelpNest](https://github.com/babble-open-source/helpnest) — the open-source help center.

## Available Themes

| Theme | Style | Dark |
|-------|-------|------|
| Default | Warm cream, serif headings | No |
| Dark | Charcoal, same warmth | Yes |
| Ocean | Blue/teal, corporate | No |
| Forest | Deep green, earthy | No |
| Aurora | Purple/violet, playful | No |
| Slate | Gray, minimal enterprise | No |
| Rose | Pink/rose, friendly | No |
| Midnight | Deep navy, premium | Yes |

## Install

```bash
npm install @helpnest/themes
```

## Usage

### Apply at runtime (client-side)

```ts
import { applyTheme, oceanTheme } from '@helpnest/themes'

applyTheme(oceanTheme)
```

### Get theme CSS variables (SSR)

```ts
import { themeToCSS, forestTheme } from '@helpnest/themes'

// In your Next.js layout:
const css = themeToCSS(forestTheme)
// Inject as <style>:root { ${css} }</style>
```

### Use a theme in HelpNest dashboard

In your workspace settings, select a theme from the dropdown. HelpNest stores the theme ID in the Workspace record and applies it on the public help center.

### List all themes

```ts
import { themes, getTheme } from '@helpnest/themes'

console.log(themes.map(t => t.id))
// ['default', 'dark', 'ocean', 'forest', 'aurora', 'slate', 'rose', 'midnight']

const theme = getTheme('aurora')
```

## Creating a Theme

1. Fork this repo
2. Copy `themes/default.ts` → `themes/my-theme.ts`
3. Update the colors, fonts, and metadata
4. Add your theme to `src/index.ts`
5. Submit a PR

See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines.

## Theme Structure

Each theme is a typed TypeScript object:

```ts
import type { HelpNestTheme } from '@helpnest/themes'

const myTheme: HelpNestTheme = {
  id: 'my-theme',           // unique slug, kebab-case
  name: 'My Theme',
  description: 'A short description for the marketplace.',
  author: 'Your Name',
  tags: ['minimal', 'light'],
  colors: {
    cream: '#F7F4EE',       // page/hero background
    ink: '#1A1814',         // primary text
    muted: '#7A756C',       // secondary text
    border: '#E2DDD5',      // borders and dividers
    accent: '#C8622A',      // brand color (links, buttons)
    green: '#2D6A4F',       // success / AI strip
    white: '#FFFFFF',       // card backgrounds
  },
  fonts: {
    heading: "'Instrument Serif', Georgia, serif",
    body: "'DM Sans', system-ui, sans-serif",
    headingUrl: 'https://fonts.googleapis.com/css2?family=Instrument+Serif&display=swap',
    bodyUrl: 'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap',
  },
  radius: 'md',             // 'none' | 'sm' | 'md' | 'lg' | 'xl'
  dark: false,
}

export default myTheme
```

## License

MIT
npm package: @helpscout/alfred-colorway
Description: Find and convert colors from HelpScout Colorway
Author: Juan Pablo Lomeli Diaz
Latest version: 1.0.0

## Alfred Colorway Workflow

This is an [Alfred](https://www.alfredapp.com/) Workflow to quickly interact with HSDS colors, using colorway.

## Install

`$ npm install --global @helpscout/alfred-colorway`

## Usage

To trigger the workflow, type `cw`

### Options

- `cw _hue_`: returns a list of all color shades for the particular _*hue*_. Example: `cw whaletail`
- `cw _hsds.color_`: returns the color code (HEX, RGB) of the HSDS color. Example: `cw blue.500`
- `cw find _color_`: returns the closest color from the HSDS palette for any given color. Accepts rgb, hex and css named colors. Example: `cw find dodgerblue`

### Interactions

- Selecting an item from the list copies the HEX (eg #BADA55) to the clipboard and pastes on the most front application (this last bit can be configured inside Alfred preferences).
- Selecting while pressing `⌥ option` will copy the hex code without the #
- Selecting while pressing `⌘ cmd` will copy the rgb code
npm package: @helpscout/artboard
Description: A tool kit for React UI development and design
Author: Jon Quach
Latest version: 0.2.0

# 🖼 Artboard

[![Build Status](https://travis-ci.org/helpscout/artboard.svg?branch=master)](https://travis-ci.org/helpscout/artboard)
[![npm version](https://badge.fury.io/js/%40helpscout%2Fartboard.svg)](https://badge.fury.io/js/%40helpscout%2Fartboard)

> A tool kit for React UI development and design

![Artboard screenshot](./images/artboard.jpg)

## Table of contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Usage](#usage)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

Project is still under development!

## Installation

```text
npm install --save-dev @helpscout/artboard
```

## Usage

Here's an example Storybook story with Artboard!

```jsx
import React from 'react'
import Artboard from '@helpscout/artboard'
import MyComponent from './MyComponent'

const stories = storiesOf('MyComponent', module)

stories.add('Example', () => (
  <Artboard>
    <MyComponent />
  </Artboard>
))
```
npm package: @helpscout/beacon-devtools
Description: DevTools for Help Scout's Beacon Embed
Latest version: 0.1.0

# Beacon DevTools

> DevTools for Help Scout's Beacon Embed

![Beacon DevTools](https://raw.githubusercontent.com/helpscout/beacon-devtools/master/images/beacon-devtools-prev.jpg)

## Table of contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Usage](#usage)
  - [Development](#development)
  - [In Browser](#in-browser)
- [Demo](#demo)
- [Props](#props)
  - [beaconIds example](#beaconids-example)
- [Check out Beacon](#check-out-beacon)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

```
npm install --save-dev @helpscout/beacon-devtools
```

## Usage

### Development

```jsx
import React from 'react'
import BeaconDevTools from '@helpscout/beacon-devtools'

class MyApp extends React.Component {
  render() {
    return (
      <div>
        ...
        <BeaconDevTools />
      </div>
    )
  }
}
```

### In Browser

To add Beacon DevTools to your page, copy/paste the following snippet into your HTML:

```html
<script
  crossorigin
  src="https://unpkg.com/@helpscout/beacon-devtools/dist/beacon-devtools.umd.js"
></script>
```

Alternatively, you can add this snippet:

```html
<script>
  ;(function() {
    var u =
      'https://unpkg.com/@helpscout/beacon-devtools/dist/beacon-devtools.umd.js'
    var s = document.createElement('script')
    s.type = 'text/javascript'
    s.charset = 'utf-8'
    s.src = u
    document.body.appendChild(s)
  })()
</script>
```

## Demo

Check out the demo on [Netlify](https://beacon-devtools.netlify.com/)!

## Props

```jsx
<BeaconDevTools />
```

| Prop       | Type            | Default | Description                                         |
| ---------- | --------------- | ------- | --------------------------------------------------- |
| isAutoOpen | `boolean`       | `false` | Automatically opens Beacon on load.                 |
| beaconIds  | `Array<Object>` | `[]`    | A collection of Beacon IDs to load into a `select`. |

### beaconIds example

```jsx
const beaconIds = [
  { id: '...', label: 'My Test Beacon 1' },
  { id: '...', label: 'Production Beacon' },
  { id: '...', label: 'Marketing Beacon' },
]

// ...

<BeaconDevTools beaconIds={beaconId} />
```

## Check out Beacon

**Beacon is way more than chat.**

Say farewell to overwhelming chat volume, staffing nightmares, and frustrated customers abandoned in chat windows. Ready to make your website more helpful?

👉 [Check it out](https://www.helpscout.net/live-chat/)
npm package: @helpscout/blue
Description: Help Scout's React component library
Author: Jon Quach
Latest version: 2.0.0

# 🔷 Blue

[![Build Status](https://travis-ci.org/helpscout/blue.svg?branch=master)](https://travis-ci.org/helpscout/blue) [![Coverage Status](https://coveralls.io/repos/github/helpscout/blue/badge.svg?branch=master)](https://coveralls.io/github/helpscout/blue?branch=master) [![npm version](https://badge.fury.io/js/%40helpscout%2Fblue.svg)](https://badge.fury.io/js/%40helpscout%2Fblue) ![node](https://img.shields.io/badge/node-8.11.3-blue.svg) ![npm](https://img.shields.io/badge/npm-6.4.1-blue.svg)

Help Scout's React component library

<img src="https://github.com/helpscout/blue/raw/master/images/Blue.png" width="250">

## Live Demo

Check out Blue's [Storybook](https://hsblue.surge.sh/):

https://hsblue.surge.sh/

## Install

```
npm install @helpscout/blue --save
```

## Getting Started

After cloning this repo down, run:

```
npm install
```

Once everything is installed, run:

```
npm start
```

Check out Blue's Storybook at http://localhost:8900/ in your browser!

## Testing

To run Jest in watch mode, run:

```
npm run dev
```

To execute all the tests (with Coverage reporting), run:

```
npm run test
```

## Publishing

To publish and release a new version of Blue, run the following command:

```
npm run release
```

You'll be presented with a CLI prompt with options.
Pick the one you want, and that's it! The script will take care of the rest (from testing to publishing).

## Deploying Storybook

To deploy the Storybook, run the following command:

```
npm run deploy
```

## Extras

![You're my boy, Blue!](./images/yourmyboyblue.gif)

> You're my boy, Blue!
npm package: @helpscout/brigade
Description: Backbone-controlled React components
Author: Nickolas Kenyeres
Latest version: 1.2.1

# ⛑️ Brigade

[![Build Status](https://travis-ci.org/helpscout/brigade.svg?branch=master)](https://travis-ci.org/helpscout/brigade) [![Coverage Status](https://coveralls.io/repos/github/helpscout/brigade/badge.svg?branch=master)](https://coveralls.io/github/%40helpscout%2Fbrigade?branch=master) [![npm version](https://badge.fury.io/js/%40helpscout%2Fbrigade.svg)](https://badge.fury.io/js/loggi)

> Backbone-controlled React components

## Table of Contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [What is Brigade?](#what-is-brigade)
- [Is Brigade for me?](#is-brigade-for-me)
- [Dependencies](#dependencies)
- [Installation](#installation)
- [Documentation](#documentation)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## What is Brigade?

Brigade is a library that enhances Backbone or Marionette views. It provides a
couple of abstractions for:

- Mounting one or more React components into a Backbone or Marionette view
- Keeping React components in sync with Backbone collections and models
- Using actions defined in a Backbone or Marionette view with a React component

## Is Brigade for me?

If you are integrating React components into a legacy Backbone/Marionette
application than Brigade may be a good fit for your project.

If you are simply looking for a state management solution for your React
project, then Brigade is not for you. In this case, try
[MobX](https://www.npmjs.com/package/mobx),
[Redux](https://www.npmjs.com/package/redux),
[Unistore](https://www.npmjs.com/package/unistore) or another solution.

## Dependencies

Brigade has the following peer dependencies:

- [Backbone](https://www.npmjs.com/package/backbone)
- [Marionette](https://www.npmjs.com/package/backbone.marionette) (Optional)
- [React](https://www.npmjs.com/package/react)
- [React DOM](https://www.npmjs.com/package/react-dom)

Marionette is optional. Backbone requires jQuery and Underscore.

## Installation

```
npm install @helpscout/brigade
```

## Documentation

- Docs: [https://brigade.netlify.com](https://brigade.netlify.com)
- Storybook: [https://brigade-storybook.netlify.com](https://brigade-storybook.netlify.com)
npm package: @helpscout/colorway
Description: A color management syncing system
Latest version: 0.10.0

# 🎨 Colorway

[![Build Status](https://travis-ci.org/helpscout/colorway.svg?branch=master)](https://travis-ci.org/helpscout/colorway)
[![npm version](https://badge.fury.io/js/%40helpscout%2Fcolorway.svg)](https://badge.fury.io/js/%40helpscout%2Fcolorway)

> A color management syncing system

## Table of Contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Usage](#usage)
- [find & Closest](#find--closest)
  - [Find](#find)
  - [Closest](#closest)
- [Documentation](#documentation)
- [Integrations](#integrations)
- [See Also](#see-also)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

```
npm install --save-dev @helpscout/colorway
```

## Usage

Run the `colorway` command with the manifest you wish to sync, example:

```
colorway --manifest=hsds-react
```

For a more automated/magical feed, we recommend you add this as a `prestart` or `prebuild` command in your `package.json`:

```
{
  ...
  "colorway": "colorway --manifest=hsds-react",
  "prestart": "colorway",
  ...
}
```

## find & Closest

Run the `colorway` command with `find` or `closest` as argument to:

### Find

Find will retrieve the HEX color code for a given color name. It will only use the HSDS-react manifest

```
colorway find blue.500

// blue.500: #1292EE
```

### Closest

Closest will find the color name from our palette that is the nearest from a given HEX code. It will only use the HSDS-react manifest

```
colorway closest #005500

// green.900: #23633e
```

## Documentation

Check out [our documentation](./docs) to see how you can use and integrate Colorway into your Application/project.

## Integrations

| Application / Project                                                 | Status     |
| --------------------------------------------------------------------- | ---------- |
| [doc-article-styles](https://github.com/helpscout/doc-article-styles) | Integrated |
| [hsds-react](https://github.com/helpscout/hsds-react)                 | Integrated |
| search-autocomplete                                                   | Integrated |
| [seed](https://github.com/helpscout/seed)                             | Integrated |
| hs-app                                                                | Integrated |
| beacon2                                                               | Integrated |
| developer                                                             | --         |
| styleguide                                                            | --         |

## See Also

- [colorway-sketch](https://github.com/helpscout/colorway-sketch)
npm package: @helpscout/colorway-sketch
Description: Generates a JSON color scheme from a Sketch file
Latest version: 0.0.1

# 🎨 Colorway (Sketch)

> Generates a JSON color scheme from a Sketch file

## Usage

Within your project directory, run this command:

```
npx @helpscout/colorway-sketch
```

If you have sketch files, you should see:

```
🎨  Colorway Sketch

Looking for sketch files...
test/test.sketch

Found sketch files!
Extracting colors from Sketch...
Examining /Users/Q/Sites/helpscout/colorway-sketch/sketch-json/document.json...
Color scheme found!
Generating color scheme JSON...
Generated /Users/Q/Sites/helpscout/colorway-sketch/data/colors.json
Cleaning up...

Colorway sketch complete!
Have a great day!
```
npm package: @helpscout/cyan
Description: Cypress-like Testing for React + JSDOM
Author: Jon Quach
Latest version: 0.12.1

# 🐱 Cyan

[![Build Status](https://travis-ci.org/helpscout/cyan.svg?branch=master)](https://travis-ci.org/helpscout/cyan)
[![Coverage Status](https://coveralls.io/repos/github/helpscout/cyan/badge.svg?branch=master)](https://coveralls.io/github/helpscout/cyan?branch=master)
[![npm version](https://badge.fury.io/js/%40helpscout%2Fcyan.svg)](https://badge.fury.io/js/%40helpscout%2Fcyan)

> Cypress-like Testing for React + JSDOM

## Table of Contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Example](#example)
- [Documentation](#documentation)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

```
npm install --save-dev @helpscout/cyan
```

## Example

```jsx
import React from 'react'
import { cy } from '@helpscout/cyan'
import Modal from '../Modal'

cy.useFakeTimers()

test('Can open/close a Modal', () => {
  cy.render(
    <Modal trigger={<button>Open</button>}>
      <div className="content">Content</div>
    </Modal>,
  )

  cy.get('button').click()

  expect(cy.get('.Modal').hasClass('is-open')).toBeTruthy()
  expect(cy.get('.content').exists()).toBeTruthy()

  cy.getByCy('CloseButton').click()

  expect(cy.get('.Modal').hasClass('is-open')).toBeFalsy()
  expect(cy.get('.content').exists()).toBeFalsy()
})
```

## Documentation

For additional information, check out [our documentation](https://cyan-testing.netlify.com)!
npm package: @helpscout/doc-article-styles
Description: Doc Article CSS for Web/Android/iOS
Author: ItsJonQ
Latest version: 0.1.6

# Doc Article Styles [![Build Status](https://travis-ci.org/helpscout/doc-article-styles.svg?branch=master)](https://travis-ci.org/helpscout/doc-article-styles)

Doc Article CSS for Web/Android/iOS

## Install

```
npm install @helpscout/doc-article-styles
```


## Get Started

After cloning this repo down, run:

```
npm install
```

Once everything is installed, run:

```
npm start
```

Check it out http://localhost:7008/ in your browser!


## Publishing

To publish and release a new version of this project, run the following command:

```
npm run release
```

That's it! The script will take care of the rest (from testing to publishing). This will patch bump the version on Github and npm.

#### Additional options

| Command | Description|
| --- | --- |
| `npm run release:major` | Publish with a major version bump. `1.0.0` -> `2.0.0` |
| `npm run release:minor` | Publish with a minor version bump. `0.1.0` -> `0.2.0`|
| `npm run release:patch` | Publish with a patch version bump. `0.0.1` -> `0.0.1` |
npm package: @helpscout/fancy
Description: A simple way to include CSS with React Components
Author: Jon Quach
Latest version: 2.2.8

# ❄️ Fancy

[![npm version](https://badge.fury.io/js/%40helpscout%2Ffancy.svg)](https://badge.fury.io/js/%40helpscout%2Ffancy) [![Build Status](https://travis-ci.org/helpscout/fancy.svg?branch=master)](https://travis-ci.org/helpscout/fancy) [![Coverage Status](https://coveralls.io/repos/github/helpscout/fancy/badge.svg?branch=master)](https://coveralls.io/github/helpscout/fancy?branch=master) [![npm version](https://badge.fury.io/js/%40helpscout%2Fblue.svg)](https://badge.fury.io/js/%40helpscout%2Fblue) ![node](https://img.shields.io/badge/node-8.11.3-blue.svg) ![npm](https://img.shields.io/badge/npm-5.6.0-blue.svg)

> A simple way to include CSS with React Components.

* [**Emotion**](https://github.com/emotion-js/emotion), under the hood.
* **Write** plain ol' CSS. Period.
* **Pre-processing** when you need it. Powered by [Stylis](https://github.com/thysultan/stylis.js).
* **Integrate** with ease into your existing setup. No fiddling with Webpack required.
* **iFrame** support, out-of-the-box!
* **Theming** support!
* **Scoping**, to integrate into older \(more hostile\) CSS systems.

## 🔧 Installation

```text
npm install --save @helpscout/fancy
```

## 🕹 Usage

Here's a quick example of how you can compose regular CSS with your React components.

```jsx
import React from 'react'
import styled from '@helpscout/fancy'

const Button = props => {
  const { children, styles, ...rest } = props

  <button className={styles.Button} {...rest}>
    {children}
  </button>
}

export default styled(Button)`
  background: white;
  border: 1px solid #eee;
`
```

## 📘 Documentation

[View the docs](docs/) to get started with Fancy!

## 💼 Migration

* [From v1.x to v2.x](docs/migration/migration-1x-2x.md)
* [From v0.x to v1.x](docs/migration/migration-0x-1x.md)

## ❤️ Credit

Many thanks to the folks who built [Emotion](https://github.com/emotion-js/emotion) and [Styled Components](https://github.com/styled-components/styled-components).
npm package: @helpscout/groovy
Description: A groovier development workflow experience
Author: Jon Quach
Latest version: 0.0.4

# 🕺 Groovy

[![Build Status](https://travis-ci.org/helpscout/groovy.svg?branch=master)](https://travis-ci.org/helpscout/groovy)
[![npm version](https://badge.fury.io/js/%40helpscout%2Fgroovy.svg)](https://badge.fury.io/js/%40helpscout%2Fgroovy)

> A groovier development workflow experience

## Table of Contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Usage](#usage)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

```
npm install -g @helpscout/groovy
```

## Usage

To start using Groovy, run either the `groovy` or `gv` in your Terminal:

```
gv
```

You should see this very groovy help text, with a list of handy commands:

```
🕺  Groovy
gv <command>

Example:
gv open

Options:
-V, --version       output the version number
-h, --help          output usage information

Commands:
config|c [options]  Configures Groovy
open|o [options]    Open somethin' in a browser
new|n [options]     Create somethin' new
```

Anytime you need help, just add `-h` at the end of your Groovy command 😎

![Groovy baby, yea!](https://raw.githubusercontent.com/helpscout/groovy/master/images/groovy.gif)
npm package: @helpscout/guard
Description: Guard Promise library
Author: Steven Wade
Latest version: 1.0.0

# Guard

Guard is a terminatable pub/sub utility.

Guard allows asynchronous, anonymous coupling of components. Components wanting to perform an action can be stopped by other components through Guard. The components are coupled to Guard rather than each other.

## Install

### NPM
`npm install @helpscout/guard`

## Usage

### CommonJS

```javascript
var Guard = require('@helpscout/guard');

var guard = new Guard();
```

### Example:

An online forum thread editor wants to save a block of text in its WYSIWYG editor. The code for this editor may want to perform a "save" action and it requests permission to do so.

```javascript

guard.ifICan('save')
	.then(function(){
    	// save the text
	})
	.catch(function(){
		// handle the error
	});
```

Now, before saving, there may be some steps you need to check first. Was the "subject" field filled out? Were any required fields left blank?

```
guard.respondTo('save', function(){
    if ($('#subject').val() === '') {
        return false;
    }

    return true;
});

guard.respondTo('save', function(){
    $('.required-field').each(function(){
        if ($(this).val() === '') {
            return false;
        }
    });

    return true;
});
```

The requested action (in this case, "save") can be stoped if even a single responder returns false.

### Responders

Responders must "respond to" a requested action. The two required parameters to `respondTo` are the name of the action, and a callback.

The callback must either return a boolean or a [Promise](https://promisesaplus.com).

## Local Build

- Clone this repo.
- Install dependencies with `npm install`
- Build project with `npm run build`
- Run Unit Tests with `npm test`

## License

MIT
npm package: @helpscout/helix
Description: A Faker-powered fixture generator for Javascript
Author: ItsJonQ
Latest version: 0.2.0

# Helix 💠

[![Build Status](https://travis-ci.org/helpscout/helix.svg?branch=master)](https://travis-ci.org/helpscout/helix) [![Coverage Status](https://coveralls.io/repos/github/helpscout/helix/badge.svg?branch=master)](https://coveralls.io/github/helpscout/helix?branch=master) [![npm version](https://badge.fury.io/js/%40helpscout%2Fhelix.svg)](https://badge.fury.io/js/%40helpscout%2Fhelix)

> A fixture generator for Javascript, powered by [Faker](https://github.com/marak/Faker.js/).

Helix allows you to quickly (and reliably) generate fixture data to be hydrated into Javascript components/views (like React, Vue, Backbone, etc…).

## Install

```
npm install @helpscout/helix --save-dev
```

## Documentation

Check out **[our documentation](./docs)** for more info!

## Basic usage

The `createSpec` function is used to define your fixture spec. Helix comes with an adjusted version of [Faker.js](https://github.com/marak/Faker.js/), which also needs to be imported. Note, the API for Helix's faker is the **exact** same as Faker.js.

```js
import { createSpec, faker } from '@helpscout/helix'

const CustomerSpec = createSpec({
  id: faker.datatype.number()
  fname: faker.name.firstName()
  lname: faker.name.lastName()
  company: faker.company.companyName()
})

const fixture = CustomerSpec.generate()

// Output
// {
//   id: 12339041,
//   fname: 'Alice',
//   lname: 'Konigsberg',
//   company: 'Smiths Co.'
// }
```

For a full list of Faker methods, check out [their documentation](https://github.com/marak/Faker.js/#api-methods).
npm package: @helpscout/hsds-illos
Description: Module generated with Zero
Latest version: 1.12.1

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [HSDS: Illos](#hsds-illos)
  - [Install](#install)
  - [Usage](#usage)
  - [Adding an Image](#adding-an-image)
  - [Getting Started](#getting-started)
  - [Publishing](#publishing)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

![](https://ddwva799xzrph.cloudfront.net/items/110k3c0l3v183J3J0g2I/hsds-logo-readme.png)

# HSDS: Illos

[![npm version](https://badge.fury.io/js/%40helpscout%2Fhsds-illos.svg)](https://badge.fury.io/js/%40helpscout%2Fhsds-illos)
[![Netlify Status](https://api.netlify.com/api/v1/badges/31df922d-e1f1-41e9-8d90-3c3c7972b431/deploy-status)](https://hsds-illos.netlify.com/)
![node](https://img.shields.io/badge/node-8.11.4-blue.svg)
![npm](https://img.shields.io/badge/npm-6.9.0-blue.svg)

Illustration for Help Scout's Design System

## Install

```
npm install @helpscout/hsds-illos --save
```

## Usage

Any illos can be imported in a react project

```
import SpacePlanet from '@helpscout/hsds-illos/space-planet'
```

Then you can render the illo component

```javascript
render(){
    return (
        <div>
            <SpacePlanet />
        </div>
    )
}
```

## Adding an Image

1 - Optimize the image by running it through https://jakearchibald.github.io/svgomg/

2 - Then add the image to the folder `src/svgs`

3 - Run `npm run generate:illos`

## Getting Started

After cloning this repo down, run:

```
npm install
```

Once everything is installed, run:

```
npm start
```

Check out HSDS's Storybook at http://localhost:8900/ in your browser!

## Publishing

To publish and release a new version of HSDS, run the following command:

```
npm run release
```

You'll be presented with a CLI prompt with options.
Pick the one you want, and that's it! The script will take care of the rest (from testing to publishing).