Merge pull request #4 from Spyna/develop

updated documentation and examples
Spyna · Feb 2, 2019 · a89d7e4 · a89d7e4
2 parents d703a8d + 22ba0e9
commit a89d7e4
Show file tree

Hide file tree

Showing 18 changed files with 405 additions and 199 deletions.
diff --git a/README.md b/README.md
@@ -1,23 +1,14 @@
-# spyna-react-store
+# @spyna/react-store
 
 > React app state management that uses a storage
 
-
-
-[![NPM](https://img.shields.io/npm/v/spyna-react-store.svg)](https://www.npmjs.com/package/spyna-react-store) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
-
+[![NPM](https://img.shields.io/npm/v/@spyna/react-store.svg)](https://www.npmjs.com/package/@spyna/react-store) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 [![CircleCI](https://img.shields.io/circleci/project/github/Spyna/react-store/master.svg?style=flat-square)](https://img.shields.io/circleci/project/github/Spyna/react-store/master.svg?style=flat-square)
-
-[![Bundle Phobia](https://img.shields.io/bundlephobia/minzip/spyna-react-store.svg?style=flat-square)](https://img.shields.io/bundlephobia/minzip/spyna-react-store.svg?style=flat-square)
-
-[![Npm version](https://img.shields.io/npm/v/spyna-react-store.svg?style=flat-square)](https://img.shields.io/npm/v/spyna-react-store.svg?style=flat-square)
-
-[![Npm downloads](https://img.shields.io/npm/dt/spyna-react-store.svg?style=flat-square)](https://img.shields.io/npm/dt/spyna-react-store.svg)
-
-[![React Version](https://img.shields.io/npm/dependency-version/spyna-react-store/peer/react.svg?style=flat-square)](https://img.shields.io/npm/dependency-version/spyna-react-store/peer/react.svg?style=flat-square)
-
+[![Bundle Phobia](https://img.shields.io/bundlephobia/minzip/@spyna/react-store.svg?style=flat-square)](https://img.shields.io/bundlephobia/minzip/@spyna/react-store.svg?style=flat-square)
+[![Npm version](https://img.shields.io/npm/v/@spyna/react-store.svg?style=flat-square)](https://img.shields.io/npm/v/@spyna/react-store.svg?style=flat-square)
+[![Npm downloads](https://img.shields.io/npm/dt/@spyna/react-store.svg?style=flat-square)](https://img.shields.io/npm/dt/@spyna/react-store.svg)
+[![React Version](https://img.shields.io/npm/dependency-version/@spyna/react-store/peer/react.svg?style=flat-square)](https://img.shields.io/npm/dependency-version/@spyna/react-store/peer/react.svg?style=flat-square)
 [![codecov](https://codecov.io/gh/Spyna/react-store/branch/master/graph/badge.svg)](https://codecov.io/gh/Spyna/react-store)
-
 [![codefactor](https://www.codefactor.io/repository/github/Spyna/react-store/badge?style=flat-square)](https://www.codefactor.io/repository/github/spyna/react-store/overview/master)
 
 
@@ -29,39 +20,29 @@ https://spyna.github.io/react-store/
 ## Install
 
 ```bash
-npm install --save spyna-react-store
+npm install --save @spyna/react-store
 ```
 
 ## Usage
 
-TODO 
+
+### Create store
 
 ```jsx
+// App.js
 import React, { Component } from 'react'
-import { createStore, withStore } from 'spyna-react-store'
-
-class MyComponent extends Component {
-   render() {
-     return (
-       <p>My Store: {this.props.store.amount}</p>
-     )
-   }
-}
-
-const ConnectedComponent = withStore(MyComponent);
+import { createStore } from '@spyna/react-store'
 
 class App extends Component {
   render() {
     return (
       <div>
         <h1>My App</h1>
-        <p>
-          Uses a store to share data between different Components, Routes,
-          Views, etc...
-        </p>
-        <div className="container">
-          <ConnectedComponent />
-        </div>
+        {/*
+        children here
+        <ConnectedComponent />
+        */}
+
       </div>
     )
   }
@@ -75,10 +56,68 @@ const initialValue = {
   }
 }
 
-export default createStore(initialValue)(App)
+export default createStore(App, initialValue)
+```
+
+You can pass the *initial store value* as the second argumento of the function `createStore`.
+
+### connect a component to the store
+
+```jsx
+// MyComponent
+import React, { Component } from 'react'
+import { withStore } from '@spyna/react-store'
+
+class MyComponent extends Component {
+   render() {
+     return (
+       <p>My Amount: {this.props.store.get('amount')}</p>
+     )
+   }
+}
+
+const ConnectedComponent = withStore(MyComponent);
+```
+
+### Set data in store 
+
+```jsx
+this.props.store.set('a_key', 'a value')
+this.props.store.set('another_key', {name: 'another value'})
+```
+
+### Read data from the store
 
+```jsx
+const a_key  = this.props.store.get('a_key')
+const another_key = this.props.store.get('another_key')
 ```
 
+### Remove data from the store 
+
+```jsx
+this.props.store.remove('a_key', 'a value')
+```
+
+### Get all data from the store
+
+```jsx
+const store = this.props.store.getState()
+```
+
+## Contributing
+
+Pull request and contributions are welcome. 
+The `develop` branch is the one where you want to develope your changes. 
+The `master` branch is the source code of the current release. 
+The `gh-pages` branch is mainteined by CI and contains the documentation and example. You don't need to use it.
+
+
+* Add test for your changes
+* Add documentation and examples of your changes under the folder `example`
+* Run `yarn prettier` or `npm run prettier` to format the source of the project
+* Thank you
+
 ## License
 
 MIT © [Spyna](https://github.com/Spyna)
diff --git a/example/package.json b/example/package.json
@@ -1,15 +1,17 @@
 {
-  "name": "spyna-react-store-example",
+  "name": "@spyna/react-store-example",
   "homepage": "https://Spyna.github.io/react-store",
   "version": "0.0.0",
   "license": "MIT",
   "private": true,
   "dependencies": {
+    "@spyna/react-store": "link:..",
+    "axios": "^0.18.0",
+    "prismjs": "^1.15.0",
     "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-scripts": "^1.1.4",
-    "spyna-react-store": "link:.."
+    "react-scripts": "^1.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/example/public/index.html b/example/public/index.html
@@ -9,14 +9,79 @@
     <meta name="theme-color" content="#000000" />
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"
+    />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/mustard-ui@latest/dist/css/mustard-ui.min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"
+    />
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/themes/prism.min.css"
+    />
 
-    <title>spyna-react-store</title>
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.0.9/css/solid.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.0.9/css/fontawesome.css"
+    />
+
+    <title>@spyna/react-store</title>
   </head>
 
   <body>
-    <h1>React shared store</h1>
+      <section>
+        <div class="panel">
+          <div class="panel-head">
+            <p class="panel-title">@spyna/react-store <a href="https://github.com/Spyna/react-store">View on GitHub</a></p>
+          </div>
+          <div class="panel-body">
+              <p>
+                <a href="https://www.npmjs.com/package/@spyna/react-store" rel="nofollow" class="rich-diff-level-one"><img src="https://camo.githubusercontent.com/c6f2dacadd965745d3fe511bf0b70ff48899fe87/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f407370796e612f72656163742d73746f72652e737667" alt="NPM" data-canonical-src="https://img.shields.io/npm/v/@spyna/react-store.svg" style="max-width:100%;"></a> 
+                <a href="https://standardjs.com" rel="nofollow" class="rich-diff-level-one"><img src="https://camo.githubusercontent.com/58fbab8bb63d069c1e4fb3fa37c2899c38ffcd18/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f636f64655f7374796c652d7374616e646172642d627269676874677265656e2e737667" alt="JavaScript Style Guide" data-canonical-src="https://img.shields.io/badge/code_style-standard-brightgreen.svg" style="max-width:100%;"></a> 
+<a href="https://circleci.com/gh/Spyna/workflows/react-store" rel="nofollow" class="rich-diff-level-one"><img src="https://camo.githubusercontent.com/ab44337af01686c437ad2c6f5a65c5b84e2fef73/68747470733a2f2f696d672e736869656c64732e696f2f636972636c6563692f70726f6a6563742f6769746875622f5370796e612f72656163742d73746f72652f6d61737465722e7376673f7374796c653d666c61742d737175617265" alt="CircleCI" data-canonical-src="https://img.shields.io/circleci/project/github/Spyna/react-store/master.svg?style=flat-square" style="max-width:100%;"></a> 
+
+<a href="https://bundlephobia.com/result?p=@spyna/[email protected]" rel="nofollow" class="rich-diff-level-one"><img src="https://camo.githubusercontent.com/e4fe09f4723077eb76e1a4422105b0d234536e8b/68747470733a2f2f696d672e736869656c64732e696f2f62756e646c6570686f6269612f6d696e7a69702f407370796e612f72656163742d73746f72652e7376673f7374796c653d666c61742d737175617265" alt="Bundle Phobia" data-canonical-src="https://img.shields.io/bundlephobia/minzip/@spyna/react-store.svg?style=flat-square" style="max-width:100%;"></a> 
+
+<a href="https://www.npmjs.com/package/@spyna/react-store" rel="nofollow" class="rich-diff-level-one"><img src="https://camo.githubusercontent.com/727dca580c0a91df8989ed41b39d8d3635e02f97/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f407370796e612f72656163742d73746f72652e7376673f7374796c653d666c61742d737175617265" alt="Npm downloads" data-canonical-src="https://img.shields.io/npm/dt/@spyna/react-store.svg?style=flat-square" style="max-width:100%;"></a> 
+
+<a href="https://www.npmjs.com/package/@spyna/react-store" rel="nofollow" class="rich-diff-level-one"><img src="https://camo.githubusercontent.com/c6b45bda4b0c38375a226eceaa4e05e205226a5d/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646570656e64656e63792d76657273696f6e2f407370796e612f72656163742d73746f72652f706565722f72656163742e7376673f7374796c653d666c61742d737175617265" alt="React Version" data-canonical-src="https://img.shields.io/npm/dependency-version/@spyna/react-store/peer/react.svg?style=flat-square" style="max-width:100%;"></a> 
 
-    <p>React app state management that uses a shared storage</p>
+<a href="https://codecov.io/gh/Spyna/react-store" rel="nofollow" class="rich-diff-level-one"><img src="https://camo.githubusercontent.com/39c03f0d43b53932417dc8935468ca8dbdaa69fd/68747470733a2f2f636f6465636f762e696f2f67682f5370796e612f72656163742d73746f72652f6272616e63682f6d61737465722f67726170682f62616467652e737667" alt="codecov" data-canonical-src="https://codecov.io/gh/Spyna/react-store/branch/master/graph/badge.svg" style="max-width:100%;"></a> 
+<a href="https://www.codefactor.io/repository/github/spyna/react-store/overview/master" rel="nofollow" class="rich-diff-level-one"><img src="https://camo.githubusercontent.com/3a66876f30d1a4f5d9e1007ae6bd17af80d5b017/68747470733a2f2f7777772e636f6465666163746f722e696f2f7265706f7369746f72792f6769746875622f5370796e612f72656163742d73746f72652f62616467653f7374796c653d666c61742d737175617265" alt="codefactor" data-canonical-src="https://www.codefactor.io/repository/github/Spyna/react-store/badge?style=flat-square" style="max-width:100%;"></a>
+              </p>
+            <p>
+              This library gives you the ability to manage the state of a React app. It
+              uses a global store, shared with all the bound components of the
+              application.
+            </p>
+            <p>
+              The <code>store</code> is created using the function
+              <code>createStore</code>. This function is similar to the
+              <em>redux Provider</em>.
+            </p>
+            <p>
+              To bind a Component to the store you use the function
+              <code>withStore</code>. This function injects in the Component a
+              <em>prop</em> called <code>store</code>, whereby you can read, write,
+              and remove data globally within the application.
+            </p>
+          </div>
+        </section>
     <div id="root">
       <noscript> You need to enable JavaScript to run this app. </noscript>
     </div>

diff --git a/example/public/manifest.json b/example/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "spyna-react-store",
-  "name": "spyna-react-store",
+  "short_name": "@spyna/react-store",
+  "name": "@spyna/react-store",
   "start_url": "./index.html",
   "display": "standalone",
   "theme_color": "#000000",

diff --git a/example/src/App.js b/example/src/App.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { createStore } from 'spyna-react-store'
+import { createStore } from '@spyna/react-store'
 
 import DisplayAmount from './DisplayAmount'
 import IncrementAmount from './IncrementAmount'
@@ -11,14 +11,27 @@ import NotPermittedOperations from './NotPermittedOperations'
 class App extends Component {
   render() {
     return (
-      <div className="container">
-        <DisplayAmount />
-        <IncrementAmount />
-        <DecrementAmount />
-        <SetDataInStore />
-        <GetDataFromStore />
-        <NotPermittedOperations />
-      </div>
+      <section>
+        <h2>DEMO</h2>
+        <section className="section-secondary">
+          <h1 className="h2">createStore(App)</h1>
+          <p>
+            The demo demostrate that you can access the data stored in the{' '}
+            <strong>Store</strong> from any <em>Component</em> in the App. The
+            boxes you see below are differents <em>React Components</em>.
+          </p>
+          <div className="row">
+            <DisplayAmount />
+            <div className="col col-md-6">
+              <IncrementAmount />
+              <DecrementAmount />
+            </div>
+            <SetDataInStore />
+            <GetDataFromStore />
+            <NotPermittedOperations />
+          </div>
+        </section>
+      </section>
     )
   }
 }
@@ -31,8 +44,4 @@ const initialValue = {
   }
 }
 
-const config = {
-  debug: true
-}
-
-export default createStore(App, initialValue, config)
+export default createStore(App, initialValue)
diff --git a/example/src/DecrementAmount.js b/example/src/DecrementAmount.js
@@ -1,6 +1,6 @@
 import React from 'react'
-
-import { withStore } from 'spyna-react-store'
+import Card from './layout/Card'
+import { withStore } from '@spyna/react-store'
 
 class DecrementAmount extends React.Component {
   displayName = 'DecrementAmount'
@@ -12,13 +12,18 @@ class DecrementAmount extends React.Component {
 
   render() {
     return (
-      <div className="component component3">
-        <h2>{this.displayName}.js</h2>
-        <button onClick={this.decrement}>Decrement</button>
+      <Card title={this.displayName} size={12}>
         <p>
           This component decrements <strong>amount</strong> in store
         </p>
-      </div>
+        <ul className="card-actions">
+          <li>
+            <button className="button-primary" onClick={this.decrement}>
+              Decrement
+            </button>
+          </li>
+        </ul>
+      </Card>
     )
   }
 }

diff --git a/example/src/DisplayAmount.js b/example/src/DisplayAmount.js
@@ -1,27 +1,30 @@
 import React from 'react'
+import Card from './layout/Card'
+import { withStore } from '@spyna/react-store'
 
-import { withStore } from 'spyna-react-store'
-
-class DisplaystoreData extends React.Component {
-  displayName = 'DisplaystoreData'
+class DisplaystoreData extends Card {
+  displayName = 'DisplayAmount'
   render() {
     const { store } = this.props
     return (
-      <div className="component component1">
-        <h2>{this.displayName}.js</h2>
+      <Card title={this.displayName}>
         <p>
           <strong>amount</strong>.<br />
           <span className="amount">{store.get('amount')}</span>
         </p>
         <div>
-          Amount, accessed using
-          <pre>store.get('amount', 0)</pre>
+          Amount, accessed using{' '}
+          <code className="language-javascript">store.get('amount', 0)</code>
         </div>
         <div>
-          <h2>store data</h2>
-          <pre>{JSON.stringify(store.getState(), null, ' ')}</pre>
+          <h2>All data stored </h2>
+          <pre className="language-json">
+            <code className="language-json">
+              {JSON.stringify(store.getState(), null, ' ')}
+            </code>
+          </pre>
         </div>
-      </div>
+      </Card>
     )
   }
 }