<commit_before># react-ciscospark

[![CircleCI](https://img.shields.io/circleci/project/github/webex/react-ciscospark/master.svg)](https://circleci.com/gh/webex/react-ciscospark)
[![license](https://img.shields.io/github/license/webex/react-ciscospark.svg)](https://github.com/webex/react-ciscospark/blob/master/LICENSE)
[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)

> Cisco Spark for React

The Cisco Spark for React library allows developers to easily incorporate Spark functionality into an application.

## Table of Contents

- [Background](#background)
- [Widgets](#widgets)
- [Install](#install)
  - [Build from Source](#build-from-source)
- [Version](#version)
- [Development](#development)
- [Coding Style](#coding-style)
- [Coding Style](#coding-style)
- [Code Verification](#code-verification)
- [Contributing](#contributing)
- [License](#license)

## Background

This library allows React developers to quickly and easily create a Cisco Spark experience within their apps. Here we provide basic components (e.g. buttons, text fields, icons) that reflect the styles and aesthetics of Spark, along with more complex, complete widgets, such as the Spark Space Widget.

The basic components are just presentational React <https://github.com/facebook/react> components, while our widgets leverage Redux <https://github.com/reactjs/redux> and the Spark Javascript SDK <https://github.com/webex/spark-js-sdk>.

## Widgets

While many of our components are purely presentational, some have extended functionality that provide a piece of the full Cisco Spark experience. These fully self contained elements are called `Widgets` and are available here:

- [Space Widget](./packages/node_modules/@ciscospark/widget-space)
- [Recents Widget](./packages/node_modules/@ciscospark/widget-recents)

## Install

### Build From Source

1. Clone this repo using a git client (e.g. `git clone https://github.com/webex/react-ciscospark.git`)
1. Run `npm install` from the root of the repo. You will want to run this every time you pull down any new updates.
1. From the root of the repo, run the following to build the widget:
    ```sh
    npm run build
    ```
1. The built bundles are located at `packages/node_modules/@ciscospark/PACKAGE_NAME/dist`.

## Version

Once a widget is bundled, the version number is available in the following ways:

- A comment at the top of each bundled file
- Programmatic access after a widget has been registered: `window.ciscospark.widgetFn.{widgetName}.version` (e.g. `window.ciscospark.widgetFn.spaceWidget.version`)
- Access after a widget has been instantiated: `window.ciscospark.widget({widgetEl}).version` (e.g. `window.ciscospark.widget(document.getElementById('myWidget')).version`)

## Development<commit_msg>docs(README): add basic usage guide<commit_after># react-ciscospark

[![CircleCI](https://img.shields.io/circleci/project/github/webex/react-ciscospark/master.svg)](https://circleci.com/gh/webex/react-ciscospark)
[![license](https://img.shields.io/github/license/webex/react-ciscospark.svg)](https://github.com/webex/react-ciscospark/blob/master/LICENSE)
[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)

> Cisco Spark for React

The Cisco Spark for React library allows developers to easily incorporate Spark functionality into an application.

## Table of Contents

- [Background](#background)
- [Widgets](#widgets)
- [Usage](#usage)
- [Install](#install)
  - [Build from Source](#build-from-source)
- [Version](#version)
- [Development](#development)
- [Coding Style](#coding-style)
- [Code Verification](#code-verification)
- [Contributing](#contributing)
- [License](#license)

## Background

This library allows React developers to quickly and easily create a Cisco Spark experience within their apps. Here we provide basic components (e.g. buttons, text fields, icons) that reflect the styles and aesthetics of Spark, along with more complex, complete widgets, such as the Spark Space Widget.

The basic components are just presentational React <https://github.com/facebook/react> components, while our widgets leverage Redux <https://github.com/reactjs/redux> and the Spark Javascript SDK <https://github.com/webex/spark-js-sdk>.

## Widgets

While many of our components are purely presentational, some have extended functionality that provide a piece of the full Cisco Spark experience. These fully self contained elements are called `Widgets` and are available here:

- [Space Widget](./packages/node_modules/@ciscospark/widget-space)
- [Recents Widget](./packages/node_modules/@ciscospark/widget-recents)

## Usage

A functional demo of both Space and Recents widgets can be loaded by
simply running:

```sh
$ npm start
```

## Install

### Build From Source

1. Clone this repo using a git client (e.g. `git clone https://github.com/webex/react-ciscospark.git`)
1. Run `npm install` from the root of the repo. You will want to run this every time you pull down any new updates.
1. From the root of the repo, run the following to build the widget:
    ```sh
    npm run build
    ```
1. The built bundles are located at `packages/node_modules/@ciscospark/PACKAGE_NAME/dist`.

## Version

Once a widget is bundled, the version number is available in the following ways:

- A comment at the top of each bundled file
- Programmatic access after a widget has been registered: `window.ciscospark.widgetFn.{widgetName}.version` (e.g. `window.ciscospark.widgetFn.spaceWidget.version`)
- Access after a widget has been instantiated: `window.ciscospark.widget({widgetEl}).version` (e.g. `window.ciscospark.widget(document.getElementById('myWidget')).version`)

## Development
{'fraction_non_alphanumeric': 0.11780963897046122, 'fraction_numerical': 0.003109345310070824, 'mean_word_length': 4.981404958677686, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 11, 'https://': 20, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5336058', 'n_tokens_mistral': 1768, 'n_tokens_neox': 1658, 'n_words': 551}