Skip to content

Commit

Permalink
Merge pull request #30 from myheritage/develop
Browse files Browse the repository at this point in the history
renaming to UiZoo.js to master
  • Loading branch information
NoamELB authored Aug 2, 2017
2 parents 20e75c6 + b1e5db1 commit 2875a18
Show file tree
Hide file tree
Showing 58 changed files with 238 additions and 245 deletions.
4 changes: 2 additions & 2 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ Follow to contribute:
1. Fork the repository and create your branch from *master*.
2. Do your changes in the fork.
2. (optional) update the documentation.
3. Ensure the test are passing or if needed adjust accordingly ([How to run the tests?](https://github.com/myheritage/react-bibliotheca#tests)).
3. Ensure the test are passing or if needed adjust accordingly ([How to run the tests?](https://github.com/myheritage/uizoo.js#tests)).
4. Submit a pull request with your fork. Please try to make the pull request message informative and clear.

Want to help but don't know what? [check the open issues](https://github.com/myheritage/react-bibliotheca/issues).
Want to help but don't know what? [check the open issues](https://github.com/myheritage/uizoo.js/issues).

Want to help but don't understand how to do it in github? [check out this guide](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github).
2 changes: 1 addition & 1 deletion Procfile
Original file line number Diff line number Diff line change
@@ -1 +1 @@
web: ./node_modules/.bin/rollup -c rollup-build.config.js -o dist/index.js -f iife -n Bibliotheca -g underscore:_,react:React,react-dom:ReactDOM,react-router-dom:ReactRouterDOM,doctrine:doctrine-standalone,babel-standalone:Babel && node server/main.js
web: ./node_modules/.bin/rollup -c rollup-build.config.js -o dist/index.js -f iife -n UiZoo -g underscore:_,react:React,react-dom:ReactDOM,react-router-dom:ReactRouterDOM,doctrine:doctrine-standalone,babel-standalone:Babel && node server/main.js
48 changes: 19 additions & 29 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
# 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..."
\- Troy and Abed.
# UiZoo.js - Dynamic React components library
Try our live example [here](https://uizoo.herokuapp.com/).

## 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 - **La Bibliotheca**
Well, no more! introducing - **UiZoo.js**

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!
Expand All @@ -17,47 +16,38 @@ This tool can be used for developing, for Product Managers to know what is possi

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

## How To Bibliotheca?
Either git clone by:
## How To UiZoo?
Git clone by:
```
git clone [email protected]:myheritage/react-bibliotheca.git
git clone [email protected]:myheritage/uizoo.js.git
```
then
```
cd react-bibliotheca && npm i
cd uizoo.js && 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.
This will start a server on http://localhost:5000 with the UiZoo
you can change the [components file](https://github.com/myheritage/uizoo.js/blob/master/client/components.js) and the [documentation file](https://github.com/myheritage/uizoo.js/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(bibliothecaDocumentation, bibliothecaComponents, rootElement);
```
*NPM module will be added soon*

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

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

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

**rootElement** - HTMLElement, will bootstrap the Bibliotheca on that Element. Default is an element with the id 'bibliotheca_root'
**rootElement** - HTMLElement, will bootstrap UiZoo 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/'.
**baseRoute** Route to be the base before the UiZoo routes. Default to '/'. for example if the UiZoo is on your site like so: 'www.mysite.com/my/zoo/', the base route should be '/my/zoo/'.

## 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/BibliothecaUI) and see its component documentation. Cool, right?
Check out our [example UI library](https://github.com/myheritage/uizoo.js/tree/master/client/Components/UI) and see its component documentation. Cool, right?

### Supported JSDoc Block Tags
#### @name (synonyms: @class, @type)
Expand Down Expand Up @@ -87,15 +77,15 @@ See video example:
## Contributing

Contributions and feedback are very welcome! Feel free to open issues.
See our [guidelines](https://github.com/myheritage/react-bibliotheca/blob/master/CONTRIBUTING.md).
See our [guidelines](https://github.com/myheritage/uizoo.js/blob/master/CONTRIBUTING.md).

---

## Tests

The tests package is isolated and located inside the /tests folder.
The target of the tests is to run locally before committing changes and to be a sanity indicator that everything is okay.
Tests are written in Protractor with Karma and they cover the Bibliotheca from end-to-end.
Tests are written in Protractor with Karma and they cover the project from end-to-end.

### Run the tests once
To perform the tests once, run:
Expand Down
10 changes: 5 additions & 5 deletions client/Components/App/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import './index.scss';

/**
* @class App
* Main component of the Bibliotheca
* Main component
*/
export default class App extends React.Component {
constructor(props) {
Expand All @@ -21,18 +21,18 @@ export default class App extends React.Component {
const showSideBarClassName = this.state.showSideBar ? ' show-side-bar' : '';

return (
<div className={`bibliotheca-app${showSideBarClassName}`}>
<div className={`library-_-app${showSideBarClassName}`}>
<button
className="bibliotheca-toggle-side-bar"
className="library-_-toggle-side-bar"
onClick={() => this.setState({showSideBar: !this.state.showSideBar})}/>
<div className="bibliotheca-side-bar">
<div className="library-_-side-bar">
<ComponentsSideBar
components={components}
componentsByModule={componentsByModule}
selectedComponentName={componentName}
goToUrl={(url) => this.props.history.push(`${baseRoute}${url}`)} />
</div>
<div className="bibliotheca-review">
<div className="library-_-review">
<ComponentReview
components={components}
documentations={documentations}
Expand Down
14 changes: 7 additions & 7 deletions client/Components/App/index.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.bibliotheca-app {
.library-_-app {
$side-bar-width: 210px;
.bibliotheca-side-bar {
.library-_-side-bar {
width: $side-bar-width;
position: fixed;
left: 0;
Expand All @@ -10,11 +10,11 @@
transition: all 0.3s ease;
transform: translateX(-100%);
}
.bibliotheca-review {
.library-_-review {
width: 100%;
transition: all 0.3s ease;
}
.bibliotheca-toggle-side-bar {
.library-_-toggle-side-bar {
border: 0;
outline: 0;
cursor: pointer;
Expand Down Expand Up @@ -50,14 +50,14 @@
}
}
&.show-side-bar {
.bibliotheca-side-bar {
.library-_-side-bar {
transform: translateX(0);
}
.bibliotheca-review {
.library-_-review {
width: calc(100% - #{$side-bar-width});
margin-left: $side-bar-width;
}
.bibliotheca-toggle-side-bar {
.library-_-toggle-side-bar {
position: fixed;
&:before,
&:after {
Expand Down
10 changes: 5 additions & 5 deletions client/Components/ComponentExamples/ComponentExample/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import RaisedButton from '../../BibliothecaUI/RaisedButton';
import CodeCard from '../../BibliothecaUI/CodeCard';
import RaisedButton from '../../UI/RaisedButton';
import CodeCard from '../../UI/CodeCard';
import './index.scss';

/**
Expand All @@ -25,9 +25,9 @@ export default class ComponentExample extends React.Component {
const code = this.props.example.description;

return (
<div className="bibliotheca-component-example">
<div className="bibliotheca-code-card-frame">
<a className="bibliotheca-try-it-button">
<div className="library-_-component-example">
<div className="library-_-code-card-frame">
<a className="library-_-try-it-button">
<RaisedButton onClick={e => this.loadExample(code)}>
Try it!
</RaisedButton>
Expand Down
10 changes: 5 additions & 5 deletions client/Components/ComponentExamples/ComponentExample/index.scss
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
.bibliotheca-component-example {
.bibliotheca-example-title {
.library-_-component-example {
.library-_-example-title {
margin: 0 0 10px;
font-size: 14px;
font-weight: 500;
display: inline-block;
}
.bibliotheca-code-card-frame {
.library-_-code-card-frame {
position: relative;
}
.bibliotheca-try-it-button {
.library-_-try-it-button {
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
.bibliotheca-code-card-wrapper {
.library-_-code-card-wrapper {
padding-right: 60px;
}
}
2 changes: 1 addition & 1 deletion client/Components/ComponentExamples/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default class ComponentExamples extends React.Component {
));

return (
<div className="bibliotheca-component-examples">
<div className="library-_-component-examples">
{examples}
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions client/Components/ComponentExamples/index.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.bibliotheca-component-examples {
.bibliotheca-component-example {
.library-_-component-examples {
.library-_-component-example {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';

import MenuItem from '../../../BibliothecaUI/MenuItem';
import Menu from '../../../BibliothecaUI/Menu';
import MenuItem from '../../../UI/MenuItem';
import Menu from '../../../UI/Menu';

/**
* @description
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {Component} from 'react';
import _ from 'underscore';

import TextField from '../../../BibliothecaUI/TextField';
import TextField from '../../../UI/TextField';
import {tryToEvalFunction} from './tryToEval';

/**
Expand Down Expand Up @@ -39,7 +39,7 @@ export default class ParamSelectorFunction extends Component {

render() {
return (
<div className="bibliotheca-function-selector-wrapper">
<div className="library-_-function-selector-wrapper">
<TextField
onChange={this.onChange}
placeholder="(e) => console.log.." />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import _ from 'underscore';

import TextField from '../../../BibliothecaUI/TextField';
import TextField from '../../../UI/TextField';
import tryToParseJson from './tryToParseJson';

/**
Expand Down Expand Up @@ -91,7 +91,7 @@ export default class ParamSelectorJSON extends React.Component {
*/
render() {
return (
<div className="bibliotheca-json-selector-wrapper">
<div className="library-_-json-selector-wrapper">
<TextField
value={this.state.value}
onChange={this.onChange}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import MenuItem from '../../../BibliothecaUI/MenuItem';
import Menu from '../../../BibliothecaUI/Menu';
import MenuItem from '../../../UI/MenuItem';
import Menu from '../../../UI/Menu';

/**
* @description
Expand Down
8 changes: 4 additions & 4 deletions client/Components/ComponentParams/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import Tooltip from '../BibliothecaUI/Tooltip';
import Tooltip from '../UI/Tooltip';
import ParamSelector from './ParamSelector';

import './index.scss';
Expand Down Expand Up @@ -29,9 +29,9 @@ export default class ComponentParams extends React.Component {
const isOptional = paramObj.type.type === "OptionalType";
const paramTitleStyle = paramObj.description ? {cursor: "pointer"} : null;
return (
<div className="bibliotheca-component-params-selector" data-param={paramObj.name} key={`param-name-${paramObj.name}-${this.props.componentName}`}>
<div className="library-_-component-params-selector" data-param={paramObj.name} key={`param-name-${paramObj.name}-${this.props.componentName}`}>
<Tooltip tooltip={paramObj.description}>
<p className="bibliotheca-param-name" style={paramTitleStyle}>
<p className="library-_-param-name" style={paramTitleStyle}>
{paramObj.name}
{!isOptional && <span>*</span>}
</p>
Expand All @@ -52,7 +52,7 @@ export default class ComponentParams extends React.Component {
render() {
const selectors = (this.props.params || []).map(paramObj => this.renderSelector(paramObj));
return (
<div className="bibliotheca-component-params">
<div className="library-_-component-params">
{selectors}
{selectors.length === 0 && 'None'}
</div>
Expand Down
12 changes: 6 additions & 6 deletions client/Components/ComponentParams/index.scss
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
.bibliotheca-component-params {
.library-_-component-params {
display: flex;
flex-wrap: wrap;
.bibliotheca-param-name {
.library-_-param-name {
margin: 0 0 10px;
font-size: 15px;
font-weight: 600;
}
.bibliotheca-component-params-selector {
.library-_-component-params-selector {
margin-right: 15px;
margin-bottom: 15px;
}

.bibliotheca-text-field,
.bibliotheca-menu-item {
.library-_-text-field,
.library-_-menu-item {
width: 135px;
}

.bibliotheca-menu-item {
.library-_-menu-item {
white-space: normal;
word-break: break-word;
word-wrap: break-word;
Expand Down
Loading

0 comments on commit 2875a18

Please sign in to comment.