open-index/open-npm huggingface dataset:
npm package: @knotel/cinderblock
Description: Knotel branding approved UI components and assets for use alongside of the Priceline Design System.
Author: Will Laeri
Latest version: 2.3.2

# Knotel Cinderblock
Knotel branding approved UI components and assets for use alongside of the [Priceline Design System](https://priceline.github.io/design-system/).

## Installation

```bash
$ yarn add cinderblock
```

## Usage

Pass the theme object from `cinderblock` to the `<ThemeProvider />` component from `pcln-design-system` and Knotel styling will be applied to all of the `pcln-design-system` child components.

```jsx
import React from 'react'
import { theme } from 'cinderblock'
import { ThemeProvider } from 'pcln-design-system'

const App = () => (
  <ThemeProvider theme={theme}>
    <Page />
  </ThemeProvider>
)
```

## Assets
The `assets` directory is not included as part of the package build, but it can be a useful place to store commonly used branding assets such as favicons and logos.
npm package: @knotel/eslint-config-react
Description: Knotel global eslint configuration for React applications and components
Author: nicholasalanbrown@gmail.com
Latest version: 0.14.0

# @knotel/eslint-config-react
> Knotel shared eslint configuration for React-based applications and components

[![NPM Version][npm-image]][npm-url]
[![Build Status][travis-image]][travis-url]
[![Downloads Stats][npm-downloads]][npm-url]


## Installation

```sh
yarn add --dev @knotel/eslint-config-react
```

Also make sure to add the `peerDependencies`:

```sh
yarn add --dev eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
```


## Usage

In order to use the shared config simply add the following to your `package.json`:

```javascript
{
  "name": "@knotel/my-package",
  "version": "1.0.0",
  ...
  "eslintConfig": {
    "extends": [
      "@knotel/eslint-config-react"
    ]
  },
  "eslintIgnore": [
    "node_modules",
    "dist",
    ".cache"
  ],
  ...
}

```

You can also add it in an `.eslintrc` or `eslintrc.json` file but adding the config in your `package.json` will reduce unnecessary clutter.


## Configuring your VSCode workspace

For the best developer experience, follow these steps to configure VSCode:

1. Make sure you have `ESlint` configured in VSCode (Extensions > Search for "Eslint" > Install)
2. Install the [StandardJS extensions](https://marketplace.visualstudio.com/items?itemName=chenxsan.vscode-standardjs) for VSCode
3. Add these keys to your VScode settings `JSON`:

```
  "standard.autoFixOnSave": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],
```
4. Add some scripts to your `package.json`:
```
  "scripts": {
    ...
    "test:lint": "eslint --ext .js --ext .jsx src",
    "test:lint:fix": "eslint --ext .js --ext .jsx src --fix",
    ...
  },
```

## Contributing

Submit a pull request against the `mono` repo
npm package: @knotel/gdrive-lib
Description: Library for building/fetching Google Team Drive metadata in nested JSON format
Author: cfaruki@knotel.com
Latest version: 0.0.13

# gdrive-lib
Library for common Google Drive functionality.

# Get Started

```
yarn add @knotel/gdrive-lib --save
```

# Google Folders

1. Recursively generate an n-deep folder structure with files created using existing Google Drive templates.
2. Get all
  - Add metadata about children length (i.e. file count) (need).
  - Add meta data about file size of directory itself (love).
  - Hide data concerning user authorized to create files.
3. Get
4. Update
5. Delete

# Config Options

1. Specify credentials.json.

## Google Drive REST API Reference

* https://developers.google.com/drive/api/v3/reference/

## Supported MIME Types

* https://developers.google.com/drive/api/v3/mime-types


## Getting Started

```
const GDrive = require('@knotel/gdrive-lib')
gdrive.init() // set auth within internal state of gdrive instance
gdrive.getAll({
  rootFolderId: 'XXX'
}).then((files) =>
  console.log(files)
)
```
npm package: @knotel/icons
Description: A collection of reusable Icon components for Knotel applications
Latest version: 0.16.0

# @knotel/icons

Knotel React icons

```sh
yarn add @knotel/icons
yarn @knotel/icons

```

## Usage

```js
import React from 'react'

import HeartIcon from '@knotel/icons/lib/Heart'

export default props => <HeartIcon color="red" mr={2} />

```

For a complete list of all icons, see: [the iconography docs](https://knotel.github.io/cinderblock/iconography)

## Development

Custom icon SVGs are included in the `svg/` directory.

To build the icons locally, run:

```sh
yarn prepare
```

Run tests:

```sh
yarn test
```

### Directory Structure

```sh
svg/        Source for custom SVG icons
src/        Source for wrapper Icon component
components/ React components for icons
test/       Unit tests
lib/       Icon components compiled to commonjs format
```

Originally Forked and Heavily influenced by [Priceline One OSS Design System | https://github.com/pricelinelabs/design-system]
npm package: @knotel/intel
Description: React components for standardizing analytics implementation across Knotel apps
Author: nicholasalanbrown@gmail.com
Latest version: 1.11.0

# @knotel/intel

> React components for standardizing analytics implementation across Knotel apps

## Install

```bash
yarn add @knotel/intel
```

## Initializing Intel

In order to enable Heap Analytics in your app, you need to include the `<IntelProvider />` component somewhere in your project, ideally in the root component. You must include both the environment you're running (`local`, `test`, `stage`, or `prod`), as well as your `appName`. These props are used to correctly place the events you're sending in Heap.

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

import { IntelProvider } from '@knotel/intel'

class App extends Component {
  render () {
    return (
      <div>
        <IntelProvider environmnet="local" appName="atlas" />
        <MainPage />
      </div>
    )
  }
}
```

There is also a function `getIntelContent` that can be used to just get the script content, and just like `IntelProvider`, it accepts two arguments, `environment` and `appName`. This function can be used when an app uses something other than `react-helmet` to add tags to its `head` (for example, `next.js` uses its own `Head` component).


## License

MIT © [nicholasalanbrown](https://github.com/nicholasalanbrown)
0
npm package: @knotel/meteor-logger
Description: Override console.log with time stamps
Author: Gaurav Chikhale & Evgeny Lukianchikov
Latest version: 2.0.1

# meteor-logger
Prepends console functions with timestamp. Works for Meteor.


#### Install

```
npm install @knotel/meteor-logger
```

#### Init the logger

```
import MeteorLogger from '@knotel/meteor-logger';
MeteorLogger.init()
```


Example:

```
import MeteorLogger from '@knotel/meteor-logger';
MeteorLogger.init(options)
console.log('Hello World')
// APP LOG[1509812506800]: Hello World
```

#### Reset the logger

```
MeteorLogger.reset()
```
npm package: @knotel/rebar
Description: Knotel full stack utility library
Author: Knotel
Latest version: 0.11.0

# NPM Module Boilerplate

[![Build Status](https://travis-ci.org/flexdinesh/npm-module-boilerplate.svg?branch=master)](https://travis-ci.org/flexdinesh/npm-module-boilerplate) [![dependencies Status](https://david-dm.org/flexdinesh/npm-module-boilerplate/status.svg)](https://david-dm.org/flexdinesh/npm-module-boilerplate) [![devDependencies Status](https://david-dm.org/flexdinesh/npm-module-boilerplate/dev-status.svg)](https://david-dm.org/flexdinesh/npm-module-boilerplate?type=dev) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

**Start developing your NPM module in seconds** ✨

Readymade boilerplate setup with all the best practices to kick start your npm/node module development.

Happy hacking =)

# Features

* **ES6/ESNext** - Write _ES6_ code and _Babel_ will transpile it to ES5 for backwards compatibility
* **Test** - _Mocha_ with _Istanbul_ coverage
* **Lint** - Preconfigured _ESlint_ with _Airbnb_ config
* **CI** - _TravisCI_ configuration setup
* **Minify** - Built code will be minified for performance

# Commands
- `npm run clean` - Remove `lib/` directory
- `npm test` - Run tests with linting and coverage results.
- `npm test:only` - Run tests without linting or coverage.
- `npm test:watch` - You can even re-run tests on file changes!
- `npm test:prod` - Run tests with minified code.
- `npm run test:examples` - Test written examples on pure JS for better understanding module usage.
- `npm run lint` - Run ESlint with airbnb-config
- `npm run cover` - Get coverage report for your code.
- `npm run build` - Babel will transpile ES6 => ES5 and minify the code.
- `npm run prepublish` - Hook for npm. Do all the checks before publishing your module.

# Installation
Just clone this repo and remove `.git` folder.


# License

MIT © Dinesh Pandiyan

## Triggering a (nohup) Build (by changing the next line):
1
npm package: @knotel/toast
Description: Reusable Component in Knotel's Design System
Latest version: 0.2.0

# Cinderblock Toast

Reusable Component in Knotel's Design System

## How it's use
1. Add import
```
import Toast, { ToastService } from '@knotel/toast'
```

2. Insert in entry point of render (for example App.js)
```
<Toast ref={toastService.init} />
```

3. Use following code in any place of code
```
  import { ToastService } from '@knotel/toast'

  ...

    ToastService.showMessage('Some title', 'Some message')

  ...

```

## Available methods
- showMessage (title: string, message?: string)
- showError (title: string, message?: string)
- showWarning (title: string, message?: string)
- setConfig (config: object)

Config structure:
```
{
  message: {
    primaryColor: string,
    secondaryColor: string,
    duration: number,
    imageUrl?: string,
  },
  error: {
    primaryColor: string,
    secondaryColor: string,
    duration: number,
    imageUrl?: string,
  },
  warning: {
    primaryColor: string,
    secondaryColor: string,
    duration: number,
    imageUrl?: string,
  }
}
```

[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](http://knotel.github.io/cinderblock)
npm package: @knotel/transportation
Description: Reusable Component in Knotel's Design System
Latest version: 0.44.1

## Cinderblock Transportation Card

Reusable Component in Knotel's Design System

>[Import](##Import)<br/>
>[Required external dependencies](##Required%20external%20dependencies)<br/>
>[Usage](##Usage)<br/>
>[Properties](##Properties)

## Import
  ```js
    import TransitCard from '@knotel/transportation'
  ```

## Required external dependencies
  ```
  @knotel/cinderblock
  prop-types
  react-dom
  react-map-gl
  react
  styled-components
  ```

## Usage

  ```js
  <TransitCard
    mapboxToken="XXXX"
    clientID="XXXX"
    clientSecret="XXXX"
    lat={51.516}
    lng={-0.133}
    zoom={{ desktop: 10, mobile: 15 }}
  />
  ```

## Properties

| Prop | Type | Default | Note |
|---|---|---|---|
| `mapboxToken` | `string!` |  | Mapbox API access token for `MapboxGL`.
| `clientID` | `string!` |  | Client id for `Foursquare API`.
| `clientSecret` | `string!` |  | Client secret for `Foursquare API`. 
| `zoom`  | `number` or `object`  | 15 | Initial the zoom level of the map on desktop version. If passed a number, it's set as initial value on desktop and mobile version. If passed a object, you can set the zoom level as on mobile version as on desktop version separately. For example `{ desktop: 15, mobile: 15 }`
| `lat` | `number!` |  | The latitude of the center of the map.
| `lng` | `number!` |  | The longitude of the center of the map.

[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](http://knotel.github.io/cinderblock)

## Triggering a (nohup) Build (by changing the next line):
2
npm package: @knotes/nativescript-clipboard
Description: A clipboard plugin for use in NativeScript apps. You can copy and paste text from and to the clipboard.
Author: Eddy Verbruggen
Latest version: 2.1.0

# NativeScript Clipboard

[![Build Status][build-status]][build-url]
[![NPM version][npm-image]][npm-url]
[![Downloads][downloads-image]][npm-url]
[![TotalDownloads][total-downloads-image]][npm-url]
[![Twitter Follow][twitter-image]][twitter-url]

[build-status]:https://travis-ci.org/EddyVerbruggen/nativescript-clipboard.svg?branch=master
[build-url]:https://travis-ci.org/EddyVerbruggen/nativescript-clipboard
[npm-image]:http://img.shields.io/npm/v/nativescript-clipboard.svg
[npm-url]:https://npmjs.org/package/nativescript-clipboard
[downloads-image]:http://img.shields.io/npm/dm/nativescript-clipboard.svg
[total-downloads-image]:http://img.shields.io/npm/dt/nativescript-clipboard.svg?label=total%20downloads
[twitter-image]:https://img.shields.io/twitter/follow/eddyverbruggen.svg?style=social&label=Follow%20me
[twitter-url]:https://twitter.com/eddyverbruggen

A NativeScript plugin to copy and paste data from and to the device clipboard.

> 💡 Plugin version 2.0.0+ is compatible with NativeScript 7+. If you need to target older NativeScript versions, please stick to plugin version 1.2.0.

## Installation
Run the following command from the root of your project:

```
tns plugin add nativescript-clipboard
```

## Usage

> TIP: Check out the [demo app](/demo) for TypeScript examples.

To use this plugin you must first require() it:

```js
var clipboard = require("nativescript-clipboard");
```

### setText

```js
  clipboard.setText("Something relevant to put on the clipboard.").then(function() {
      console.log("OK, copied to the clipboard");
  })
```

### setTextSync
This is the synchronous version of `setText`, available since plugin version 1.2.0.

```js
  clipboard.setTextSync("Something relevant to put on the clipboard.");
```

### getText

```js
  clipboard.getText().then(function(content) {
      console.log("Read from clipboard: " + content);
  })
```

### getTextSync
This is the synchronous version of `getText`, available since plugin version 1.2.0.

```js
  var content = clipboard.getText();
  console.log("Read from clipboard: " + content);
```

## Future work
Implement support for storing data (image, etc) on the clipboard. Open an issue or PR in case you like to have that.