open-index/open-npm huggingface dataset:
npm package: @snowbound/virtualviewer-alfresco-content-app
Description: To install this library, run:
Author: Nathan Popham
Latest version: 0.1.1

# VirtualViewer for Alfresco Example Content Application

## Installation

To install this library, run:

```bash
$ npm install @snowbound/virtualviewer-alfresco-content-app --save
```

## Extending the Content Application

There are three steps to connecting the VirtualViewer extension to the Alfresco Content App.

1. Import the VVContentModule (and optionally configure the VirtualViewer module's URL from the default 'http://localhost:8080/virtualviewer'): 

  app.module.ts
  ```typescript

  //Import the base config object VirtualViewerConfig if you wish to change default configuration
  import { VVContentAppModule, VirtualViewerConfig } from '@snowbound/virtualviewer-alfresco-content-app';

  //To change configuration, create a VirtualViewerConfig with your desired configuration
  const myVirtualViewerConfig: VirtualViewerConfig = {
      baseUrl: "http://my-virtual-viewer-url:8080";
  }

  @NgModule({
    imports: [
          //...
          //import VirtualViewer
          //VirtualViewerConfig can be provided as an optional parameter
          VVContentAppModule.forRoot(myVirtualViewerConfig);
    ],
    //...
  })
  export class AppModule { }
  ```

2. Modify angular.json to copy the VirtualViewer extension json into the assets folder:

  angular.json (minimal version to show where JSON should be added)
  ```json
  {
      "projects": {
          "app": {
              "architect": {
                  "build": {
                      "options": {
                          "assets":[ 
                              "src/assets",
                              //This entry copies the VirtualViewer extension JSON into the build's assets 
                              {
                                  "glob": "**/*.json",
                                  "input": "node_modules/@snowbound/virtualviewer-alfresco-content-app/assets",
                                  "output": "./assets/plugins"    
                              }
                          ]
                      }
                  }
              }
          }
      }
  }
  ```

3. Add VirtualViewer extension JSON as reference in extension JSON:

  app.extensions.json
  ```json
  {
      "$schema": "../../extension.schema.json",
      "$name": "app",
      "$version": "1.0.0",
      "$references": [
          "plugin1.json",
          "plugin2.json",
          "dev.tools.json",
          "virtualviewer-alfresco-content-app.json"
      ],
      //...
  }
  ```

The Alfresco Viewer will now use VirtualViewer to open supported file formats.

## Development

To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:

```bash
$ npm run build
```

To lint all `*.ts` files:

```bash
$ npm run lint
```
npm package: @snowcoders/react-checkbox
Description: [![npm (scoped)](https://img.shields.io/npm/v/@snowcoders/react-checkbox.svg)](https://www.npmjs.com/package/@snowcoders/react-checkbox) [![CircleCI branch](https://img.shields.io/circleci/project/github/snowcoders/react-checkbox.svg)](https://circleci.c
Author: Snowcoders
Latest version: 1.0.1
Deprecated: Use the css property `all: unset`. See https://github.com/snowcoders/react-ui-base.

# An unstyled React checkbox

[![npm (scoped)](https://img.shields.io/npm/v/@snowcoders/react-checkbox.svg)](https://www.npmjs.com/package/@snowcoders/react-checkbox)
[![CircleCI branch](https://img.shields.io/circleci/project/github/snowcoders/react-checkbox.svg)](https://circleci.com/gh/snowcoders/react-checkbox)

# Use it

`npm install --save @snowcoders/react-checkbox save-prefix "~"`

# Parent Library

This component is part of a larger components library, [react-ui-base](https://github.com/snowcoders/react-ui-base). The goal is to keep all the core logic and base css styles in a single location, that way building out new UI component libraries cheaper and faster (and less buggy).

We highly recommend visiting the react-ui-base repository to understand how to customize the css along with see examples.

You can also view all the components on our demo site https://snowcoders.github.io/react-ui-base/

# This component

Renders a simple checkbox component with a button as the main visual element that triggers a checkbox element. This allows for greater css customizations while maintaining the same API as a checkbox.
npm package: @snowcoders/react-dialog
Description: [![npm (scoped)](https://img.shields.io/npm/v/@snowcoders/react-dialog.svg)](https://www.npmjs.com/package/@snowcoders/react-dialog)  [![CircleCI branch](https://img.shields.io/circleci/project/github/snowcoders/react-dialog.svg)](https://circleci.com/gh
Author: Snowcoders
Latest version: 1.0.0
Deprecated: Use the HTML Dialog element (requires polyfill for certain browsers). See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog. See https://github.com/snowcoders/react-ui-base.

[![npm (scoped)](https://img.shields.io/npm/v/@snowcoders/react-dialog.svg)](https://www.npmjs.com/package/@snowcoders/react-dialog) 
[![CircleCI branch](https://img.shields.io/circleci/project/github/snowcoders/react-dialog.svg)](https://circleci.com/gh/snowcoders/react-dialog)

# Use it
`npm install --save @snowcoders/react-dialog save-prefix ~` 

# Parent Library
This component is part of a larger components library, [react-ui-base](https://github.com/snowcoders/react-ui-base). The goal is to keep all the core logic and base css styles in a single location, that way building out new UI component libraries cheaper and faster (and less buggy). 

We highly recommend visiting the react-ui-base repository to understand how to customize the css along with see examples.

You can also view all the components on our demo site https://snowcoders.github.io/react-ui-base/

# This component
This component renders it's children in a HTMLDivElement centered within the entire page. Other features provided by this component:
 - Tabbing within the dialog component will stay within the dialog component
 - Clicking the background will fire onBackgroundClick allowing you to close the dialog
 - Pressing the Escape key will also run the onBackgroundClick
 - When the dialog closes, it will set the active element back to whatever it was before it opened
npm package: @snowcoders/react-popover
Description: Wrapper around react-popper that handles ~95% of popper scenarios
Author: Snowcoders
Latest version: 1.2.1
Deprecated: Use react-popper's new hooks API instead. You can reference this repository's code base for insight of how to implement certain scenarios. See https://github.com/snowcoders/react-ui-base.

Wrapper around react-popper that handles ~95% of popper scenarios

[![npm (scoped)](https://img.shields.io/npm/v/@snowcoders/react-popover.svg)](https://www.npmjs.com/package/@snowcoders/react-popover)
[![CircleCI branch](https://img.shields.io/circleci/project/github/snowcoders/react-popover/master.svg)](https://circleci.com/gh/snowcoders/react-popover)

# Use it

`npm install --save @snowcoders/react-popover save-prefix "~"`

# Parent Library

This component is part of a larger components library, [react-ui-base](https://github.com/snowcoders/react-ui-base). The goal is to keep all the core logic and base css styles in a single location, that way building out new UI component libraries cheaper and faster (and less buggy).

We highly recommend visiting the react-ui-base repository to understand how to customize the css along with see examples.

You can also view all the components on our demo site https://snowcoders.github.io/react-ui-base/

# This component

~95% of popovers fall into a basic category of I have a target that opens a popover and I want a popover that dismisses after a user action. This library summarizes that logic by providing Target types and Popover types that are interchangable. Currently, the available types are

- Target
  - Click - Popover opens when the user clicks on the target
  - Hover - Popover opens when the user hovers on the target
- Popover
  - Click - Popover closes when the user clicks anything except the popover. This click is not sent to the document.
  - Blur - Popover closes when the user clicks anything except the popover. This click is sent to the document.
  - Hover - Popover closes when the user hovers off of the popover

# Basic usage

To see a live example, go to our demo site https://snowcoders.github.io/react-ui-base/

```
<Popover
  isOpen={false}
  popperContent={"I'm inside the popover"}
  popperOptions={{
      placement: "bottom"
  }}
  popperType={"hover"}
  targetContent={"I'm the target text"}
  targetType={"hover"}
/>
```
npm package: @snowcoders/react-popper
Description: Deprecated - React wrapper around PopperJS.
Author: snowcoders
Latest version: 0.9.3
Deprecated: No longer maintained... Use https://github.com/FezVrasta/react-popper instead

## Deprecation Notice
The official version of react-popper has reached 1.0.0 and this library is now deprecated and will not receive new updates. Please contribute to and use https://github.com/FezVrasta/react-popper instead!

[![npm (scoped)](https://img.shields.io/npm/v/@snowcoders/react-popper.svg)](https://www.npmjs.com/package/@snowcoders/react-popper) 
[![CircleCI branch](https://img.shields.io/circleci/project/github/snowcoders/react-popper.svg)](https://circleci.com/gh/snowcoders/react-popper)

## React Popper - Typescript

React wrapper around [PopperJS](https://github.com/FezVrasta/popper.js/)
Fork of [React-Popper](https://github.com/souporserious/react-popper) and now has the following additional functionality
 - More type-safe than before
 - Allows you to use whatever version of popper.js you want to use
 - Written in typescript so your *.d.ts will be correct
 - Able to install directly from github (though not suggested)
 - Developing is easier
 - Test coverage coming soon!

## Install

`npm install @snowcoders/react-popper --save`
`npm install popper.js[@version-of-choice] --save`

```html
<script src="https://unpkg.com/@snowcoders/react-popper/dist/index.js"></script>
(UMD library exposed as `ReactPopper`)
```

## Usage

See our [example](./example/) for more details

```js
import { Manager, Target, Popper, Arrow } from '@snowcoders/react-popper'

const PopperExample = () => (
    <Manager>
        <div>
            <span>I am text before the</span>{" "}
            <Target
                componentFactory={(targetProps) => (
                    <span {...targetProps}>
                        Target Box
                    </span>
                )}
            />
            <Popper
                placement="right"
                componentFactory={(popperProps) => (
                    <span {...popperProps}>
                        I am the tooltip
                        <Arrow
                            componentFactory={(arrowProps) => (
                                <span {...arrowProps} />
                            )}
                        />
                    </span>
                )}
            />{" "}
            <span>for the popover</span>
        </div>
    </Manager>
)
```

## Running Locally

1. `git clone https://github.com/snowcoders/react-popper`
1. `cd react-popper`
1. `npm install`
1. `npm run start`
npm package: @snowcoders/react-tabs
Description: React component that uses tabs to navigate between different sections
Author: Snowcoders
Latest version: 0.1.3
Deprecated: Very quickly I found that there are many ways to do tabs and that in very few of them it's smart to combine both the tab selection and the content of the tabs into one component. Instead have a common component to render the tab buttons but the content should be more flexible. See https://github.com/snowcoders/react-ui-base.

[![npm (scoped)](https://img.shields.io/npm/v/@snowcoders/react-tabs.svg)](https://www.npmjs.com/package/@snowcoders/react-tabs) 
[![CircleCI branch](https://img.shields.io/circleci/project/github/snowcoders/react-tabs.svg)](https://circleci.com/gh/snowcoders/react-tabs)

# Use it
`npm install --save @snowcoders/react-tabs save-prefix ~` 

# Parent Library
This component is part of a larger components library, [react-ui-base](https://github.com/snowcoders/react-ui-base). The goal is to keep all the core logic and base css styles in a single location, that way building out new UI component libraries cheaper and faster (and less buggy). 

We highly recommend visiting the react-ui-base repository to understand how to customize the css along with see examples.

You can also view all the components on our demo site https://snowcoders.github.io/react-ui-base/

# This component
This component has a single content view which can display different content at any time by selecting elements in a list above the view.
npm package: @snowcoders/react-ui-base
Description: Mega-package and website of react-ui-base components
Author: Snowcoders
Latest version: 1.0.0
Deprecated: There are now modern alternatives to everything in this project. See https://github.com/snowcoders/react-ui-base.

# React UI Base
React UI base is just that... the base pieces of UI that you need to build out a custom UI components library of your own. 

The concept for this library came from a website http://www.csszengarden.com/. The basic idea is that if you treat React components like a Model (HTML), View (CSS) and Controller (JavaScript) this simplifies building out UI libraries considerably. Because honestly, most of our UI component libraries pretty much have the same Model and Controller, we are really just customizing the View.

That's what this library is, a collection of shared Models and Controllers, all driven by React, with template css so that you can implement your own views.

# Demo
See our demo website at [https://snowcoders.github.io/react-ui-base/](https://snowcoders.github.io/react-ui-base/)

# But how?
All of our components have two outputs
 - @snowcoders/{componentName} - The React.js component
 - @snowcoders/{componentName}/styles.css - The base css styling

 So let's say you wish to customize our react-unstyled-button component

 If you only want the core logic and will style the whole thing yourself
 ```
 import { UnstyledButton } from "@snowcoders/react-unstyled-button";
 ```
 
 If you want the logic and the button to look unstyled
 ```
 import "@snowcoders/react-unstyled-button/styles.css";
 import { UnstyledButton } from "@snowcoders/react-unstyled-button";
 ```
 
 If you want to further customize the component
 ```
 import "@snowcoders/react-unstyled-button/styles.css";
 import "your-custom-styles.css";
 import { UnstyledButton } from "@snowcoders/react-unstyled-button";
 ```

For the latter case, we highly suggest wrapping it into a component in your own system instead of having multiple duplicate import statements. More information about overrides can be found in the [overrides documentation](./docs/overrides.md).

This repository is full of working examples, feel free to wander and ask questions through Github Issues!

# Recommendations
We don't recommend pulling in this bigger library directly. We don't upgrade the npm packages in here as often as we should and you'll likely be out of date faster. The better option is to depend on the components directly. Not only will you put less strain on your tree-shaking algorithm, it's much easier to know what dependencies are getting upgraded and how.

# Other interesting pages
 - [Contributing](./docs/contributing.md)
 - [Developing](./docs/developing.md)
 - [Overriding our styles](./docs/overrides.md)
 - [Upgrading our packages](./docs/upgrading.md)
npm package: @snowcoders/react-unstyled-input
Description: [![npm (scoped)](https://img.shields.io/npm/v/@snowcoders/react-unstyled-input.svg)](https://www.npmjs.com/package/@snowcoders/react-unstyled-input)  [![CircleCI branch](https://img.shields.io/circleci/project/github/snowcoders/react-unstyled-input.svg)]
Author: Snowcoders
Latest version: 0.2.0
Deprecated: Use the css property `all: unset`. See https://github.com/snowcoders/react-ui-base.

[![npm (scoped)](https://img.shields.io/npm/v/@snowcoders/react-unstyled-input.svg)](https://www.npmjs.com/package/@snowcoders/react-unstyled-input) 
[![CircleCI branch](https://img.shields.io/circleci/project/github/snowcoders/react-unstyled-input.svg)](https://circleci.com/gh/snowcoders/react-unstyled-input)

# Use it
`npm install --save @snowcoders/react-unstyled-input save-prefix ~` 

# Parent Library
This component is part of a larger components library, [react-ui-base](https://github.com/snowcoders/react-ui-base). The goal is to keep all the core logic and base css styles in a single location, that way building out new UI component libraries cheaper and faster (and less buggy). 

We highly recommend visiting the react-ui-base repository to understand how to customize the css along with see examples.

You can also view all the components on our demo site https://snowcoders.github.io/react-ui-base/

# This component
This component takes the normal HTMLInputElement and removes all styling from it. Default browser functionality (ex. using the arrow keys to increase and decrease the number if the `type="number"`) along with width is maintained.
npm package: @snowcoders/sortier
Description: An opionated code sorter
Author: Snowcoders
Latest version: 3.3.0
Deprecated: Renamed to just sortier (no organization). npm i sortier.

# Sortier

An opinionated Code Sorter

[![npm (scoped)](https://img.shields.io/npm/v/@snowcoders/sortier.svg)](https://www.npmjs.com/package/@snowcoders/sortier) [![CircleCI branch](https://img.shields.io/circleci/project/github/snowcoders/sortier/master.svg)](https://circleci.com/gh/snowcoders/sortier) [![Coverage Status](https://coveralls.io/repos/github/snowcoders/sortier/badge.svg?branch=master)](https://coveralls.io/github/snowcoders/sortier?branch=master)

Sortier is an opinionated code sorter similar to how Prettier is a opinionated code formatter. Given a file, it parses then figures out how to sort and rearrange source code in a consistent way.

[Documentation](http://snowcoders.github.io/sortier)

Examples of what sortier will sort in JavaScript:

- Import statements
- Import specifiers
- Union types
- Keys and properties within objects and types
- React JSX properties
- And more!

It should work with JavaScript ES6, Flow, Typescript, HTML and Json but if you find a piece of code that after sorting doesn't look as expected, feel free to open an issue in Github!

## How to run it

```
sortier "[glob-file-path]"
```

## General things to keep in mind

- Blank lines are treated as context breaks... Sortier will not sort through them
- Comments will stay with the line they comment (see Props example below)

### Example Input

```
import {
        a2,
        a1 }
        from "./a";
import {
       /*Absolute imports move to the top*/ c2
} from "c";
import { b3, b1 } from "./b";

// Blank lines act like context barriers and will divide sorting blocks
import { b2 } from "b1";

export type Props = {
  // Prop3 comment
  prop3: string,
  callback2: () => void,
  // Prop1 comment
  prop1: number,
  callback1(): void,
}
```

### Example Output

```
import {
       /*Absolute imports move to the top*/ c2
} from "c";
import {
        a1,
        a2 }
        from "./a";
import { b1, b3 } from "./b";

// Blank lines act like context barriers and will divide sorting blocks
import { b2 } from "b1";

export type Props = {
  // Prop1 comment
  prop1: number,
  // Prop3 comment
  prop3: string,
  callback1(): void,
  callback2: () => void,
}
```

## Options

- [Configuration](https://snowcoders.github.io/sortier/#/configuration)

- [General options](https://snowcoders.github.io/sortier/#/options-general)

- [Javascript/Flow/Typescript options](https://snowcoders.github.io/sortier/#/options-js)

- [Css/Scss/Less options](https://snowcoders.github.io/sortier/#/options-css)

And more to come!

## Pre-commit Hook

See our [Install](https://snowcoders.github.io/sortier/#/install) documentation
npm package: @snowcoders/sortier-documentation
Description: Documentation site for Sortier
Author: Snowcoders
Latest version: 1.0.4
Deprecated: Documentation is now in the docs folder of sortier

# Sortier Documentation

This is the documentation site for [Sortier](https://github.com/snowcoders/sortier/) which can be seen at http://snowcoders.github.io/sortier.

Overall this library contains information and examples related to sortier to help understand some core concepts behind it.