<commit_before># React Bibliotheca - Dynamic React components library
Try our live example [here](http://react-bibliotheca.herokuapp.com).
> "Donde, está, la biblioteca. Me llamo T-Bone La araña discoteca. Discoteca, muñeca, La biblioteca..."
\- <NAME>.
## About
How many times did you create a new component just to find later someone already did the exact same?
How many times did you find out that a "generic" component you wanted to use is actually tightly-coupled to the environment it was developed upon?
Well, no more! introducing - **the Bibliotheca**

It will showcase **your components**, letting you develop in a sterile environment and browse what you already have and can use, to better re-use your components.
And all this with almost no effort!

![React Bibliotheca 1](https://media.giphy.com/media/pF8cbzzIGJWO4/giphy.gif "React Bibliotheca 1")

We use JSDoc parsing from your current components to showcase them, with all of their possible properties, examples, and descriptions.
This tool can be used for developing, for Product Managers to know what is possible, for UX to see what we have so far, and it can be a playground for co-operation between all of the above.

![React Bibliotheca 3](https://media.giphy.com/media/MqhUcIhANah9e/giphy.gif)

## How To Bibliotheca?
Either git clone by:
```
git clone <EMAIL>:myheritage/react-bibliotheca.git
```
then
```
cd react-bibliotheca && npm i
gulp
```
This will start a server on http://localhost:5000 with the Bibliotheca
you can change the [components file](https://github.com/myheritage/react-bibliotheca/blob/master/client/components.js) and the [documentation file](https://github.com/myheritage/react-bibliotheca/blob/master/client/documentation.js) to start rapidly.
We recommend updating those files by a script automatically when files are changing (we plan to create plugins to help with this in the next future).

**or** npm install by:
```
npm i -S bibliotheca
```
then in your code, add:
```
import 'bibliotheca/dist/index.css';
import Bibliotheca from 'bibliotheca';
Bibliotheca.init(documentation, components, rootElement);
```

### init
```
Bibliotheca.init(documentation, components, rootElement):
```

**documentation** - Object, mapping of component name to its documentation. See [example](https://github.com/myheritage/react-bibliotheca/blob/master/client/documentation.js).

**components** - Object, mapping of components name to components. See [example](https://github.com/myheritage/react-bibliotheca/blob/master/client/components.js). 

**rootElement** - HTMLElement, will bootstrap the Bibliotheca on that Element. Default is an element with the id 'library-_-root'

**baseRoute** Route to be the base before the Bibliotheca routes. Default to '/'. for example if the Bibliotheca is on your site like so: 'www.mysite.com/my/bib/', the base route should be '/my/bib/'.

## JSDoc support
We support many [JSDoc](http://usejsdoc.org/) conventions.
Check out our [example UI library](https://github.com/myheritage/react-bibliotheca/tree/master/client/Components/UI) and see its component documentation. Cool, right?

### Supported JSDoc Block Tags
#### @name (synonyms: @class, @type)
The component name
#### @module (synonyms: @namespace, @memberOf)
The section of the component. Will put the component inside this section on the SideBar.<commit_msg>removing npm repo from the readme<commit_after># React Bibliotheca - Dynamic React components library
Try our live example [here](http://react-bibliotheca.herokuapp.com).
> "Donde, está, la biblioteca. Me llamo T-Bone La araña discoteca. Discoteca, muñeca, La biblioteca..."
\- <NAME>.
## About
How many times did you create a new component just to find later someone already did the exact same?
How many times did you find out that a "generic" component you wanted to use is actually tightly-coupled to the environment it was developed upon?
Well, no more! introducing - **the Bibliotheca**

It will showcase **your components**, letting you develop in a sterile environment and browse what you already have and can use, to better re-use your components.
And all this with almost no effort!

![React Bibliotheca 1](https://media.giphy.com/media/pF8cbzzIGJWO4/giphy.gif "React Bibliotheca 1")

We use JSDoc parsing from your current components to showcase them, with all of their possible properties, examples, and descriptions.
This tool can be used for developing, for Product Managers to know what is possible, for UX to see what we have so far, and it can be a playground for co-operation between all of the above.

![React Bibliotheca 3](https://media.giphy.com/media/MqhUcIhANah9e/giphy.gif)

## How To Bibliotheca?
Git clone by:
```
git clone <EMAIL>:myheritage/react-bibliotheca.git
```
then
```
cd react-bibliotheca && npm i
gulp
```
This will start a server on http://localhost:5000 with the Bibliotheca
you can change the [components file](https://github.com/myheritage/react-bibliotheca/blob/master/client/components.js) and the [documentation file](https://github.com/myheritage/react-bibliotheca/blob/master/client/documentation.js) to start rapidly.
We recommend updating those files by a script automatically when files are changing (we plan to create plugins to help with this in the next future).

*NPM module will be added soon*

### init
```
Bibliotheca.init(documentation, components, rootElement):
```

**documentation** - Object, mapping of component name to its documentation. See [example](https://github.com/myheritage/react-bibliotheca/blob/master/client/documentation.js).

**components** - Object, mapping of components name to components. See [example](https://github.com/myheritage/react-bibliotheca/blob/master/client/components.js). 

**rootElement** - HTMLElement, will bootstrap the Bibliotheca on that Element. Default is an element with the id 'library-_-root'

**baseRoute** Route to be the base before the Bibliotheca routes. Default to '/'. for example if the Bibliotheca is on your site like so: 'www.mysite.com/my/bib/', the base route should be '/my/bib/'.

## JSDoc support
We support many [JSDoc](http://usejsdoc.org/) conventions.
Check out our [example UI library](https://github.com/myheritage/react-bibliotheca/tree/master/client/Components/UI) and see its component documentation. Cool, right?

### Supported JSDoc Block Tags
#### @name (synonyms: @class, @type)
The component name
#### @module (synonyms: @namespace, @memberOf)
The section of the component. Will put the component inside this section on the SideBar.
{'fraction_non_alphanumeric': 0.10311971722760105, 'fraction_numerical': 0.0030736130321192563, 'mean_word_length': 4.884267631103074, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 9, 'https://': 14, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5719022', 'n_tokens_mistral': 1921, 'n_tokens_neox': 1877, 'n_words': 759}