From 95df61433a6ee73ff188a21a8639338cc136dab9 Mon Sep 17 00:00:00 2001 From: Suren Atoyan Date: Sat, 27 Jun 2020 16:03:32 +0400 Subject: [PATCH] update version to 1.0.0 --- CHANGELOG.md | 14 +++++++++++ README.md | 68 +++++++++++++++++++++++++++++++++++++++++++++------- package.json | 2 +- yarn.lock | 17 +++++++++++-- 4 files changed, 89 insertions(+), 12 deletions(-) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..f455182 --- /dev/null +++ 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 index 69e34d6..494ca39 100644 --- 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. - + ## Usage @@ -110,7 +160,7 @@ The last one will build your project (`yarn build`) and start express server (`y ## 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/) - + ## TODOs diff --git a/package.json b/package.json index 8d4fe90..2e6b326 100644 --- 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 index fc45796..b76b000 100644 --- 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"