update version to 1.0.0

suren-atoyan · Jun 27, 2020 · 95df614 · 95df614
1 parent 3395e94
commit 95df614
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,14 @@
+### Releases
+
+## v1.0.0
+###### *June 19, 2020*
+
+It's the first stable version of the template. It's going to become a solid foundation for your next React project.
+
+- features: add notifications 🎉
+- readme: update bundle size, fix image titles, add section for notifications, add examples
+
+## v0.1.0
+###### *June 19, 2020*
+
+🎉 First release 🎉
diff --git a/README.md b/README.md
@@ -20,8 +20,9 @@ By the same philosophy, there are other routines above the basic configuration,
 * [CRA](#cra)
 * [React Router](#react-router)
 * [Material UI](#material-ui)
-* [Theme](#theme)
 * [Store](#store)
+* [Theme](#theme)
+* [Notifications](#notifications)
 * [Error Handling](#error-handling)
 * [Service Worker](#service-worker)
 * [SEO](#seo)
@@ -38,15 +39,64 @@ The latest version of `react-router-dom` is integrated. Routes are defined in [/
 
 #### Material UI
 
-The latest version of `Material-UI` is integrated. The whole layout of the application is made by `Material-UI` components. In the demonstrated components/sections you can notice how MUI components can be customized. The styling system is also inherited from MUI.
+The latest version of [Material-UI](https://material-ui.com/) is integrated. The whole layout of the application is made by `Material-UI` components. In the demonstrated components/sections you can notice how MUI components can be customized. The styling system is also inherited from MUI.
+
+#### Store
+
+For store management [overmind](https://github.com/cerebral/overmind) has been used. It's a simple store management tool. Here you can find its [implementation and integration](https://github.com/suren-atoyan/react-pwa/tree/master/src/store).
+
+You can use `useStore` hook exported from `store`. It'll give you `state`, `actions` and `effects`, which you can use.
+
+```js
+// ...
+import { useStore } from 'store';
+
+function SomeCoolComponent() {
+  const { state, actions, effects } = useStore();
+
+  // ...
+}
+```
 
 #### Theme
 
-The [theme system](https://github.com/suren-atoyan/react-pwa/blob/master/src/theme/ThemeProvider.js) is based on MUI theme. There are two themes' styles that are defined in the [config file](https://github.com/suren-atoyan/react-pwa/blob/master/src/config/index.js). The theme provider, which is based on MUI is integrated with app and store.
+The [theme system](https://github.com/suren-atoyan/react-pwa/blob/master/src/theme/ThemeProvider.js) is based on MUI theme. It's integrated with store, so, see how you can use it:
 
-#### Store
+```js
+// ...
+import { useStore } from 'store';
 
-For store management `overmind` has been used. It's a simple store management tool. Here you can find its [implementation and integration](https://github.com/suren-atoyan/react-pwa/tree/master/src/store).
+function SomeCoolComponent() {
+  const { state, actions } = useStore();
+
+  // let's see what is the current theme mode
+  console.log(state.theme.mode);
+
+  // and if you want to change the theme, call appropriate action
+  function toggleTheme() {
+    actions.theme.toggle();
+  }
+}
+```
+
+Also you can modify predefined theme parameters in [config](https://github.com/suren-atoyan/react-pwa/blob/master/src/config/index.js#L29) file.
+
+#### Notifications
+
+Here we've used [notistack](https://github.com/iamhosseindhv/notistack). It's integrated with store and to show a notification you just need to call the appropriate action; look how you can do it:
+
+```js
+// ...
+import { useStore } from 'store';
+
+function SomeCoolComponent() {
+  const { actions } = useStore();
+
+  function showNiceWarning() {
+    actions.notifications.push({ message: 'Heeeeey, something went wrong I guess' });
+  }
+}
+```
 
 #### Error Handling
 
@@ -76,9 +126,9 @@ There is a simple express server `/hoster/server`, which plays the role of a sta
 
 ## Size
 
-After all these integrations the biggest bundle size is **~59KB**. It means even first load will be pretty fast (in my case it's 1.1s), further loads (already cached by service worker and workbox) will take ~0.25s.
+After all these integrations the biggest bundle size is **~66KB**. It means even first load will be pretty fast (in my case it's 1.1s), further loads (already cached by service worker and workbox) will take ~0.25s.
 
-<img src="./public/images/readme/build.png" width="300" title="build">
+<img src="./public/images/readme/build.png" width="300" title="Build">
 
 ## Usage
 
@@ -110,7 +160,7 @@ The last one will build your project (`yarn build`) and start express server (`y
 
 ## Structure
 
-<img src="./public/images/readme/structure.png" width="200" title="index.js file">
+<img src="./public/images/readme/structure.png" width="200" title="Structure">
 
 Initial files:
 
@@ -137,7 +187,7 @@ Initial files:
 NOTE: The performance is not 100 because of demo server.
 Check the results in the [live demo](https://react-pwa.surenatoyan.com/)
 
-<img src="./public/images/readme/audit.png" width="500" title="audit results">
+<img src="./public/images/readme/audit.png" width="500" title="Audit results">
 
 ## TODOs
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-pwa",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.10.2",

diff --git a/yarn.lock b/yarn.lock
@@ -3008,7 +3008,7 @@ clone-deep@^4.0.1:
     kind-of "^6.0.2"
     shallow-clone "^3.0.0"
 
-clsx@^1.0.4:
+clsx@^1.0.4, clsx@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
@@ -5102,7 +5102,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -7257,6 +7257,14 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
+notistack@^0.9.17:
+  version "0.9.17"
+  resolved "https://registry.yarnpkg.com/notistack/-/notistack-0.9.17.tgz#dcb827f268013356f198ee7143ffda9f48a0f06f"
+  integrity sha512-nypTN6sEe+q98wMaxF/UwatA1yAq948+bZOo9JKYR+tU65DW0ipWyx8DseJ3UJYvb6VDD+Fqo83qwayQ46bEEA==
+  dependencies:
+    clsx "^1.1.0"
+    hoist-non-react-statics "^3.3.0"
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -10654,6 +10662,11 @@ uuid@^3.0.1, uuid@^3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
+uuid@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.2.0.tgz#cb10dd6b118e2dada7d0cd9730ba7417c93d920e"
+  integrity sha512-CYpGiFTUrmI6OBMkAdjSDM0k5h8SkkiTP4WAjQgDgNB1S3Ou9VBEvr6q0Kv2H1mMk7IWfxYGpMH5sd5AvcIV2Q==
+
 v8-compile-cache@^2.0.3:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"