open-index/open-npm huggingface dataset:
npm package: @nylas/nylas-js
Description: JavaScript SDK for the Nylas Platform API
Author: Nylas, Inc.
Latest version: 0.2.0

<a href="https://www.nylas.com/">
    <img src="https://brand.nylas.com/assets/downloads/logo_horizontal_png/Nylas-Logo-Horizontal-Blue_.png" alt="Aimeos logo" title="Aimeos" align="right" height="60" />
</a>

# Nylas JavaScript SDK

![npm](https://img.shields.io/npm/v/@nylas/nylas-js)

This is the GitHub repository for the Nylas JavaScript SDK. The Nylas Communications Platform provides REST APIs for [Email](https://developer.nylas.com/docs/connectivity/email/), [Calendar](https://developer.nylas.com/docs/connectivity/calendar/), and [Contacts](https://developer.nylas.com/docs/connectivity/contacts/), and the Nylas Javascript SDK is the quickest way to build your integration using JavaScript.

Here are some resources to help you get started:

- [Quickstart](https://developer.nylas.com/docs/the-basics/quickstart/)
- [Nylas API Reference](https://developer.nylas.com/docs/api/)


## ⚙️ Install

To install the Nylas JavaScript SDK, you will first need to have [npm](https://www.npmjs.com/get-npm) installed on your machine.

Then, head to the nearest command line and run the following:
```bash
npm install @nylas/nylas-js
```

To install this package from source, clone this repo and run `npm install` from inside the project directory:

```bash
git clone https://github.com/nylas/nylas-js.git
cd nylas-js
npm install
```

## ⚡️ Usage

The entrypoint for the SDK is `Nylas`, which can be imported as an ES module and instantiated:

```javascript
import Nylas from 'nylas-js'

const nylas = new Nylas({
  // Config
});
```

### Configuration options
These are the following options that can be passed in to configure an instance of the Nylas JS SDK

#### `serverBaseUrl`
The URL of the backend server configured with the Nylas middleware or Nylas routes implemented.

## 💙 Contributing

Interested in contributing to the Nylas JavaScript SDK project? Thanks so much for your interest! We are always looking for improvements to the project and contributions from open-source developers are greatly appreciated.

Please refer to [Contributing](Contributing.md) for information about how to make contributions to this project. We welcome questions, bug reports, and pull requests.

## 📝 License

This project is licensed under the terms of the MIT license. Please refer to [LICENSE](LICENSE.txt) for the full terms.
npm package: @nylestroke/store
Description: Simple, light-way state library for JS/TS
Author: Vladyslav Potapenko
Latest version: 0.2.1

## @nylestroke/store

@nylestroke/store is a simple state container for JavaScript apps.

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

## Installation

```
npm install @nylestroke/store
```

For more details, see [the NPM page](https://npmjs.com/package/@nylestroke/store).

## Basic Example

```js
import { Store } from '@nylestroke/store';

const store = new Store();

const firstCallback = state => {
  console.log('first callback ', state); // callback function
};
const firstConfig = state => { // there you can state, as you want
  return state;
};

const secondCallback = state => {
  console.log('second callback ', state);
};
const secondConfig = state => {
  return [state];
};

store.subscribe(firstCallback, firstConfig); // call subscription with callback and configuration
store.subscribe(secondCallback, secondConfig);

store.setState({ a: 1 }); // add value to state (not set)
store.clearState(); // clear the state
store.setState({ a: 2 });
store.setState({ b: 1 });
store.cutState('b'); // delete key from a state
store.setState({ b: 2 });
```

## License

[MIT](https://github.com/nylestroke/store/blob/master/LICENSE)
npm package: @nylira/vue-article-body
Description: Article body component for Vue 2.
Author: Peng Zhong
Latest version: 3.5.0

# vue-article-body
Article body component for Vue 2

## Installation

    npm install @nylira/vue-article-body

## Usage

    <template>
      <article-body>
        <p><strong>Whoops!</strong> The page you visited either does not exist or has been deleted in a website reshuffle. We're sorry for the inconvenience. Try visiting one of these pages below:</p>
        <ul>
          <li><router-link :to="'/'">Dashboard</router-link></li>
          <li><router-link :to="'/signup'">Sign Up</router-link></li>
          <li><router-link :to="'/signin'">Sign In</router-link></li>
        </ul>
      </article-body>
    </template>

    <script>
      import ArticleBody from '@nylira/vue-article-body'
      export default {
        components: {
          ArticleBody
        }
      }
    </script>

    <style>
      .ny-article-body {
        width: 320px;
      }
    </style>
npm package: @nylira/vue-button
Description: Flexible component for Vue 2 that works for `<a>`, `<button>` and  `<router-link>`. Icons require Material Icons from Google.
Author: Peng Zhong
Latest version: 4.4.3

# vue-button
Button component for Vue 2.

## Installation

    npm install @nylira/vue-button

## Usage

    <template>
      <btn date="February 28, 2017"></btn>
    </template>

    <script>
      import Btn from '@nylira/vue-button'
      export default {
        components: {
          Btn
        }
      }
    </script>

    <style>
      .ni-btn-wrapper {
        display: inline-block;
      }
      .ni-btn {
        background: #f00;
      }
    </style>

## Props

    value=""
    // The label of the button
    // Options: Any valid string

    icon=""
    // If you're using FontAwesome, places an icon to the left of the label
    // Options: Check http://fontawesome.io/icons

    icon-pos=""
    // Move the icon to the right side instead of the left
    // Options: "right"

    size=""
    // Chanage the size of the button
    // Options: "lg", "sm"

    theme="tendermint"
    // Adds a custom button theme
    // Options: "tendermint", "alpha-black"

    type="button"
    // Button type (mainly used for HTML forms)
    // Options: "button", "submit"
npm package: @nylira/vue-countdown
Description: Countdown component for Vue 2.
Author: Peng Zhong
Latest version: 2.1.1

# vue-countdown
Countdown component for Vue 2.

## Installation

    npm install @nylira/vue-countdown

## Usage

    <template>
      <countdown date="February 28, 2017"></countdown>
    </template>

    <script>
      import Countdown from '@nylira/vue-countdown'
      export default {
        components: {
          Countdown
        }
      }
    </script>

    <style>
      .ny-countdown {
        width: 320px;
      }
    </style>

## Parameters

    <countdown units="short"></countdown>
    // for D, H, M, S labels instead of Days, Hours, Minutes, Seconds
npm package: @nylira/vue-field
Description: Flexible field, textarea, and select component for Vue.
Author: Peng Zhong
Latest version: 1.5.0

# vue-field
Flexible input, textarea, and select component for Vue 2.

## Installation

    npm install @nylira/vue-field

## Usage

    <template>
      <field v-model="email" placeholder="Enter your email"></field>
    </template>

    <script>
      import Field from '@nylira/vue-field'
      export default {
        components: {
          Field
        },
        data () {
          return {
            email: ''
          }
        }
      }
    </script>

    <style>
      .ni-field {
        width: 320px;
      }
    </style>

## Props

    value=""
    // The value of the field field, also can be used with v-model
    // Options: Any valid string

    placeholder=""
    // The field field placeholder
    // Options: Any valid string

    size=""
    // Chanage the size of the field field
    // Options: "lg", "sm"

    required
    // Self-explanatory

    theme="tendermint"
    // Adds a custom field field theme
    // Options: "tendermint"

    type="text"
    // Input field type (mainly used for HTML forms)
    // Options: "text", "email", "tel", "num", "password", "textarea"
npm package: @nylira/vue-form-msg
Description: Form input error and desc component for Vue 2.
Author: Peng Zhong
Latest version: 1.0.3

# vue-form-msg
Form input errors and descriptions for Vue 2.

## Installation

    npm install @nylira/vue-form-msg

## Usage

    <template>
      <form-msg name="Display Name" type="required" v-if="!$v.fields.displayName.required"></form-msg>
      <form-msg name="Display Name" type="length" min="2" max="20" v-if="!$v.fields.displayName.menLength || !$v.fields.displayName.maxLength"></form-msg>
    </template>

    <script>
      import FormMsg from '@nylira/vue-form-msg'
      export default {
        components: {
          FormMsg
        }
      }
    </script>

    <style>
      .ni-form-msg {
        font-size 1.25rem;
      }
    </style>

## Props
TODO! For now, read the `./src/index.vue` file.
npm package: @nylira/vue-input
Description: Flexible input, textarea, and select component for Vue 2.
Author: Peng Zhong
Latest version: 3.4.0

# vue-input
Flexible input field component for Vue 2.

## Installation

    npm install @nylira/vue-input

## Usage

    <template>
      <field v-model="email" placeholder="Enter your email"></field>
    </template>

    <script>
      import Field from '@nylira/vue-input'
      export default {
        components: {
          Field
        },
        data () {
          return {
            email: ''
          }
        }
      }
    </script>

    <style>
      .ni-field {
        width: 320px;
      }
    </style>

## Props

    value=""
    // The value of the input field, also can be used with v-model
    // Options: Any valid string

    placeholder=""
    // The input field placeholder
    // Options: Any valid string

    size=""
    // Chanage the size of the input field
    // Options: "lg", "sm"

    required
    // Self-explanatory

    theme="tendermint"
    // Adds a custom input field theme
    // Options: "tendermint"

    type="text"
    // Input field type (mainly used for HTML forms)
    // Options: "text", "email", "tel", "num", "password", "textarea"
npm package: @nylira/vue-key-values
Description: KeyValue component and KeyValues wrapper component for Vue 2.
Author: Peng Zhong
Latest version: 1.1.1

# vue-key-values
KeyValue component and KeyValues wrapper component for Vue 2.

## Installation

    npm install @nylira/vue-key-values

## Usage

    <template>
      <key-values>
        <key-value>
          <div slot="value">1337</div>
          <div slot="key">People</div>
        </key-value>
        <key-value>
          <div slot="value">506</div>
          <div slot="key">Incidents</div>
        </key-value>
      </key-values>
    </template>

    <script>
      import { KeyValue, KeyValues } from '@nylira/vue-key-values'
      export default {
        name: 'key-values-demo',
        components: {
          KeyValue, KeyValues
        }
      }
    </script>
npm package: @nylira/vue-modules
Description: Module component and Modules wrapper component for Vue 2.
Author: Peng Zhong
Latest version: 1.1.1

# vue-modules
Module component and Modules wrapper component for Vue 2.

## Installation

    npm install @nylira/vue-modules

## Usage

    <template>
      <modules>
        <module>
          <div slot="title">Module Header Title</div>
          <div slot="menu"><a href="#">Random Link</a></div>
          <div>
            This is the main body area.
          </div>
          <div slot="footer">Here is the module footer</div>
        </module>
        <module>
          <div slot="title">Module Two</div>
          <div>
            This is the other body area.
          </div>
          <div slot="footer">Here is the other footer</div>
        </module>
      </modules>
    </template>

    <script>
      import { Module, Modules } from '@nylira/vue-modules'
      export default {
        name: 'key-values-demo',
        components: {
          Module, Modules
        }
      }
    </script>
npm package: @nylira/vue-page-header
Description: Page header component for Vue 2.
Author: Peng Zhong
Latest version: 2.3.0

# vue-page-header
Page header component for Vue 2.

## Installation

    npm install @nylira/vue-page-header

## Usage

    <template>
      <page-header title="Cool Article" subtitle="Why you should read this now."></btn>
    </template>

    <script>
      import PageHeader from '@nylira/vue-page-header'
      export default {
        components: {
          PageHeader
        }
      }
    </script>

    <style>
      .ni-page-header {
        background: #f00;
      }
    </style>

## Props

    title=""
    // The label of the button
    // Options: Any valid string

    subtitle=""
    // If you're using FontAwesome, places an icon to the left of the label
    // Options: Any valid string

    theme="tendermint"
    // Adds a custom button theme
    // Options: "tendermint"

    type="default
    // Page header alignment type
    // Options: "default", "center", "split"
npm package: @nylira/vue-page-split
Description: Split page component for Vue 2.
Author: Peng Zhong
Latest version: 2.2.0

# vue-page-split
Header and content split page component for Vue 2.

## Installation

    npm install @nylira/vue-page-split

## Usage

    <template>
      <page-split>
        <header>Just a cool header!</header>
        <div class="body">Just some body text.</div>
      </page-split>
    </template>

    <script>
      import PageSplit from '@nylira/vue-page-split'
      export default {
        components: {
          PageSplit
        }
      }
    </script>

    <style>
      .ni-page-split {
        background: #f00;
      }
    </style>
npm package: @nylira/vue-user-pages
Description: User pages compnonents for Vue 2.
Author: Peng Zhong
Latest version: 1.1.5

# vue-user-pages
User pages components for Vue 2. (Sign In, Sign Up, Reset Password, Settings)

Relies on Firebase, Vuelidate, and Vuex. Reducing dependencies is the next step.

## Installation

    npm install @nylira/vue-user-pages

## Usage

    import VueRouter from 'vue-router'
    import { SignUp, SignIn, Reset, Settings } from '@nylira/vue-user-pages'

    const routes = [
      { path: '/signup', name: 'signup', SignUp },
      { path: '/signin', name: 'signin', SignIn },
      { path: '/reset', name: 'reset', Reset },
      { path: '/settings', name: 'settings', Settings },
    ]

    const router = new VueRouter({
      routes,
    })

    export default router
npm package: @nymag/cid
Description: Generates a unique id on the client. Uses timestamp, random number, and increments.
Author: New York Media
Latest version: 1.0.1

# cid

[![Circle CI](https://circleci.com/gh/nymag/cid.svg?style=svg)](https://circleci.com/gh/nymag/cid)

🎲 Generates a unique id on the client. Uses timestamp, random number, and increments.

## Install

```
npm install --save @nymag/cid
```

## Usage

This library exports both [es2015-style modules](http://www.2ality.com/2014/09/es6-modules-final.html) and regular old commonjs modules, so you can use browserify, rollup, or webpack to include it client-side.

## Contributing

Please do! Create a pull request with a failing unit test, and we'll figure out what's up.
npm package: @nymag/dom
Description: Tiny DOM manipulation library, good for minification!
Author: New York Media
Latest version: 1.3.2

# dom

[![Circle CI](https://circleci.com/gh/nymag/dom.svg?style=svg)](https://circleci.com/gh/nymag/dom)

🔎 Tiny DOM manipulation library, good for minification!

## Install

```
npm install --save @nymag/dom
```

## Usage

This library exports everything with commonjs, so you should use browserify, rollup, or webpack to include it client-side.

## Contributing

Please do! Create a pull request with a failing unit test, and we'll figure out what's up. Create an issue if you think of a good feature to add.
npm package: @nymdev/clay-component-list
Description: A component that embeds other components!
Author: New York Media
Latest version: 0.0.2

# clay-component-list
A component that embeds other components!

## Install

```
npm install --save @nymdev/clay-component-list
```

This component relies on the `getContent` filter from [nunjucks-filters](https://www.npmjs.com/package/nunjucks-filters), the `embed` function from [multiplex-templates](https://www.npmjs.com/package/multiplex-templates), and the `getTemplate` method added by `amphora` itself.

`multiplex-templates` is a dependency of `amphora`, but `nunjucks-filters` needs to be added to your project (and passed into `amphora` when it instantiates) to use it.

## Usage

Once you install it, it will be automatically recognized by `amphora`. Embed a list of components by passing them into this one, e.g.

```
<section class="primary">{{ embed(state.getTemplate('clay-component-list'), primary, state) | safe }}</section>
```

Where `primary` is an array of component objects or page areas:

```js
[{
  _ref: '/components/header',
  title: 'My Cool Blog'
}, {
  _ref: '/components/article/instances/first-article',
  more: 'data',
  goes: 'here'
}]
```
npm package: @nymdev/clay-meta-description
Description: Meta, Twitter, and OG descriptions
Author: New York Media
Latest version: 0.0.2

# clay-meta-description
Meta, Twitter, and OG descriptions

## Install

```
npm install --save @nymdev/clay-meta-description
```

Adds `<meta name="description">`, `twitter:description`, and `og:description` tags to the head.

## Usage

Once you install it, it will be automatically recognized by `amphora`. It has a single property, `description`.

### A Note On Head Components

This component lives in the head of the page, and isn't editable directly. Use the `componentRef` behavior to affect it when you edit other components on the page.
npm package: @nymdev/clay-meta-keywords
Description: Meta keywords, news_keywords, and article:tag
Author: New York Media
Latest version: 0.0.2

# clay-meta-keywords
Meta keywords, news_keywords, and article:tag

## Install

```
npm install --save @nymdev/clay-meta-keywords
```

Adds `<meta name="keywords">`, `news_keywords`, and `article:tag` tags to the head.

## Usage

Once you install it, it will be automatically recognized by `amphora`. It has a single property, `tags`, which should be an array of strings.

### A Note On Head Components

This component lives in the head of the page, and isn't editable directly. Use the `componentRef` behavior to affect it when you edit other components on the page.
npm package: @nymdev/clay-meta-site
Description: twitter:site, og:site_name, and og:type tags
Author: New York Media
Latest version: 0.1.1

# clay-meta-site
twitter:site, fb:app_id, og:site_name, and og:type tags!

## Install

```
npm install --save @nymdev/clay-meta-site
```

Adds site-specific tags to the head:

* `twitter:site`
* `og:site_name`
* `og:type`
* `apple-mobile-web-app-title` (using site name)
* `format-detection` (to kill telephone links on mobile browsers)
* `icon` (square site icon)
* `mask-icon`
* `icon sizes="196x196"`
* `article:publisher` (for facebook)
* `fb:app_id`

## Usage

Once you install it, it will be automatically recognized by `amphora`. It has the following properties:

* `twitter` should be a twitter handle (without an @-sign)
* `facebook` should be your site's facebook name
* `facebookID` should be a [facebook app id](https://developers.facebook.com/docs/reference/opengraph/object-type/website/)
* `siteName` should be a human-readable site name, which will appear in Google search results and Facebook posts
* `ogType` should identify the type of page for sharing, per the [Open Graph protocol](http://ogp.me/)
* `detectTel` is "yes" or "no" to detect telephone links in mobile browsers
* `icon`, `maskIcon`, and `196pxIcon` should be links to your icons
* `maskColor` should be a hex color value, e.g. `#FF5656`

### A Note On Head Components

This component lives in the head of the page, and isn't editable directly. Use the `componentRef` behavior to affect it when you edit other components on the page.
npm package: @nymdev/clay-meta-title
Description: Title, twitter:title, and og:title tags
Author: New York Media
Latest version: 0.0.7

# clay-meta-title
Title, twitter:title, and og:title tags

## Install

```
npm install --save @nymdev/clay-meta-title
```

## Usage

Once you install it, it will be automatically recognized by `amphora`. It has three properties, `title`, `twitterTitle`, and `ogTitle`.

### A Note On Head Components

This component lives in the head of the page, and isn't editable directly. Use the `componentRef` behavior to affect it when you edit other components on the page.
npm package: @nymdev/clay-meta-url
Description: Canonical url and og:url tags
Author: New York Media
Latest version: 0.0.9

# clay-meta-url
Canonical url and og:url tags

## Install

```
npm install --save @nymdev/clay-meta-url
```

Adds `<link rel="canonical">` and `og:url` tags to the head.

## Usage

Once you install it, it will be automatically recognized by `amphora`. It has a single property, `url`, which should be the full canonical url for a page.

### A Note On Head Components

This component lives in the head of the page, and isn't editable directly. Use the `componentRef` behavior to affect it when you edit other components on the page.
npm package: @nymdev/clay-newsletter-signup
Description: A simple newsletter signup component
Author: New York Media
Latest version: 0.0.5

# clay-newsletter-signup
A simple newsletter signup component

## Install

```
npm install --save @nymdev/clay-newsletter-signup
```

Adds a newsletter signup component that links to a signup form.

## Usage

Once you install it, it will be automatically recognized by `amphora`. It has three editable fields, `message`, `link`, and `cta`.

To include it, create an instance of it and add a reference to a component list (for example, in your sidebar).

```yaml
components:
  layout:
    instances:
      article:
        sidebar:
          -
            _ref: /components/clay-newsletter-signup/instances/latest-news-signup
  clay-newsletter-signup:
    instances:
      latest-news-signup:
        message: Join our email list
        link: http://a.google.form
        cta: Sign Up Now
```
npm package: @nymdev/clay-paragraph
Description: A simple paragraph component
Author: New York Media
Latest version: 0.0.6

# clay-paragraph
A simple paragraph component

## Install

```
npm install --save @nymdev/clay-paragraph
```

Adds a paragraph component.

## Usage

Once you install it, it will be automatically recognized by `amphora`. It has one editable field, `text`. When saving, all text is sent through the [`typogr`](https://www.npmjs.com/package/typogr) library, which adds smart quotes and other typographic niceties.

To include it, create an instance of it and add a reference to a component list (for example, in an `article` component's body or main content area).

```yaml
components:
  article:
    instances:
      first-article:
        content:
          -
            _ref: /components/clay-paragraph/instances/0
            -
              _ref: /components/clay-paragraph/instances/1
  clay-paragraph:
    instances:
      -
        text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      -
        text: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
```
npm package: @nymdev/clay-share
Description: A simple social media share component
Author: New York Media
Latest version: 0.3.1

# clay-share
A simple social media share component

## Install

```
npm install --save @nymdev/clay-share
```

Adds a share component.

## Usage

Once you install it, it will be automatically recognized by `amphora`. It has multiple fields:

* `enabled` - an object containing toggles for each service
  * Facebook
  * Twitter
  * LinkedIn
  * Google Plus
  * Pinterest
  * Tumblr
  * Email
  * Print
* `url` - the url to share (you should set this from another component specific to the page)
* `title` - the title to share (set from another component)
* `siteSlug` - the site slug, should be set in your `bootstrap.yaml`
* `twitterHandle` - twitter handle for your site, should be set in your `bootstrap.yaml`
* `description` - description of the shared item (set from another component)
* `pinImage` - image of the item, if using Pinterest (set from another component)
* `emailPrefix` - short message that will be sent in emails, should be set in your `bootstrap.yaml` (or you could use our default message)
* `orientation` - `horizontal` or `vertical`, depending on where you want to place the component.

We recommend using `horizontal` for mobile and tablet share components, with `vertical` being reserved for use on desktop and in sidebars.

To include it, create an instance of it and add a reference inside another component (for example, in an `article`).

```yaml
components:
  article:
    instances:
      first-article:
        sideShare:
          _ref: /components/clay-share/instances/first-article
  clay-share:
    instances:
      first-article:
        url: 'first-article.html'
        title: 'First Article'
        siteSlug: 'my-site'
        twitterHandle: 'mysitedotcom'
        description: 'The first article on my site'
        pinImage: 'http://imgs.my-site.com/first-image.jpg'
        emailPrefix: 'I saw this on My Site and thought you might be interested...'
        orientation: 'horizontal'
        # toggles
        enabled:
          facebook: true
          twitter: true
          linkedin: false
          gplus: false
          pinterest: true
          tumblr: false
          email: true
          print: true
```