docs: improve docs

Author: streamich

README.md

@@ -76,13 +76,12 @@ const MyComponent = mock();
      - [`<Portal>`](./docs/en/Portal.md) and [`<Overlay>`](./docs/en/Overlay.md)
      - [`<FullScreen>`](./docs/en/FullScreen.md)
      - [`<Slider>`](./docs/en/Slider.md)
-  - Side effects
+     - [`<Audio>`](./docs/en/Audio.md) and [`<Video>`](./docs/en/Video.md)
+     - [`<Speak>`](./docs/en/Speak.md), [`<Vibrate>`](./docs/en/Vibrate.md), [`<Alert>`](./docs/en/Alert.md), `<Prompt>`, `<Confirm>`
+  - [Side Effects](./docs/en/Side-effects.md)
      - [`<LocalStorage>`](./docs/en/LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`
      - `<Title>`, `<Favicon>`
      - [`go()`](./docs/en/routing.md#go), `<Redirect>`, `<Link>`, [`<Sms>`](./docs/en/Sms.md), [`<Mailto>`](./docs/en/Mailto.md), and `<Tel>`
-  - Generators
-     - [`<Audio>`](./docs/en/Audio.md), [`<Video>`](./docs/en/Video.md), and `<Media>`
-     - [`<Speak>`](./docs/en/Speak.md), [`<Vibrate>`](./docs/en/Vibrate.md), [`<Alert>`](./docs/en/Alert.md), `<Prompt>`, `<Confirm>`
   - [Boundaries](./docs/en/Boundaries.md)
      - [`<BrowserOnly>`](./docs/en/BrowserOnly.md), [`<ServerOnly>`](./docs/en/ServerOnly.md), and [`<ElectronOnly>`](./docs/en/ElectronOnly.md)
      - [`<ErrorBoundary>`](./docs/en/ErrorBoundary.md) and [`withErrorBoundary()`](./docs/en/ErrorBoundary.md#witherrorboundary-hoc)

docs/en/Generators.md

@@ -41,20 +41,20 @@
      - [`<CssVarsProvider>`](./cssvars.md), [`<CssVars>`](./cssvars.md#cssvars), [`withCssVars()`](./cssvars.md#withcssvars-hoc), and [`@withCssVars`](./cssvars.md#withcssvars-decorator)
      - [`<Router>`](./routing.md#router), [`<Route>`](./routing.md#route), [`withRoute()`](./routing.md#withroute), `@withRoute`, `go()`, and `<Go>`
      - [`<Translations>`](./translate.md#translations), [`<Translate>`](./translate.md#translate-or-t), [`<T>`](./translate.md#translate-or-t), [`withT()`](./translate.md#witht-hoc), and [`@withT`](./translate.md#witht-decorator)
-  - Generators
-     - [`<Audio>`](./Audio.md), [`<Video>`](./Video.md), and `<Media>`
-     - [`<LocalStorage>`](./LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`
+  - [UI](./UI.md)
+     - [`<Portal>`](./Portal.md) and [`<Overlay>`](./Overlay.md)
+     - [`<FullScreen>`](./FullScreen.md)
+     - [`<Slider>`](./Slider.md)
+     - [`<Audio>`](./Audio.md) and [`<Video>`](./Video.md)
      - [`<Speak>`](./Speak.md), [`<Vibrate>`](./Vibrate.md), [`<Alert>`](./Alert.md), `<Prompt>`, `<Confirm>`
+  - [Side Effects](./Side-effects.md)
+     - [`<LocalStorage>`](./LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`
+     - `<Title>`, `<Favicon>`
      - [`go()`](./routing.md#go), `<Redirect>`, `<Link>`, [`<Sms>`](./Sms.md), [`<Mailto>`](./Mailto.md), and `<Tel>`
   - [Boundaries](./Boundaries.md)
      - [`<BrowserOnly>`](./BrowserOnly.md), [`<ServerOnly>`](./ServerOnly.md), and [`<ElectronOnly>`](./ElectronOnly.md)
      - [`<ErrorBoundary>`](./ErrorBoundary.md) and [`withErrorBoundary()`](./ErrorBoundary.md#witherrorboundary-hoc)
      - `<CacheBoundary>`
-  - [UI](./UI.md)
-     - [`<Portal>`](./Portal.md) and [`<Overlay>`](./Overlay.md)
-     - [`<FullScreen>`](./FullScreen.md)
-     - [`<Slider>`](./Slider.md)
-     - `<Overlay>`
   - [CSS resets](./CSS-resets.md)
      - [`<CssResetEricMeyer>`](./reset/CssResetEricMeyer.md) and [`<CssResetEricMeyerCondensed>`](./reset/CssResetEricMeyerCondensed.md)
      - [`<CssResetMinimalistic>`](./reset/CssResetMinimalistic.md), [`<CssResetMinimalistic2>`](./reset/CssResetMinimalistic2.md), and [`<CssResetMinimalistic3>`](./reset/CssResetMinimalistic3.md)

docs/en/README.md

@@ -49,24 +49,24 @@
   * [CSS Variables](cssvars.md)
   * [Router](routing.md)
   * [Translations](translate.md)
-* [Generators](Generators.md)
+* [UI](UI.md)
+  * [Portal](Portal.md)
+  * [Overlay](Overlay.md)
+  * [FullScreen](FullScreen.md)
+  * [Slider](Slider.md)
   * [Audio](Audio.md)
   * [Video](Video.md)
-  * [LocalStorage](LocalStorage.md)
   * [Speak](Speak.md)
   * [Vibrate](Vibrate.md)
   * [Alert](Alert.md)
   * [Sms](Sms.md)
   * [Mailto](Mailto.md)
+* [Side Effects](Side-effects.md)
+  * [LocalStorage](LocalStorage.md)
 * [Boundaries](Boundaries.md)
   * [BrowserOnly](BrowserOnly.md)
   * [ServerOnly](ServerOnly.md)
   * [ElectronOnly](ElectronOnly.md)
-* [UI](UI.md)
-  * [Portal](Portal.md)
-  * [Overlay](Overlay.md)
-  * [FullScreen](FullScreen.md)
-  * [Slider](Slider.md)
 * [CSS resets](CSS-resets.md)
   * [CssResetEricMeyer](./reset/CssResetEricMeyer.md)
   * [CssResetEricMeyerCondensed](./reset/CssResetEricMeyerCondensed.md)

docs/en/SUMMARY.md

@@ -0,0 +1,6 @@
+# Side Effects
+
+Components with side effects are ones that use global environment APIs to modify environment state.
+
+- [`<LocalStorage>`](./LocalStorage.md) &mdash; saves and retrieves objects from `localStorage`.
+

docs/en/Side-effects.md

@@ -7,7 +7,7 @@ import ShowDocs from '../../../.storybook/ShowDocs'
 
 const src = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3';
 
-storiesOf('Generators/Audio', module)
+storiesOf('UI/Audio', module)
   .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Audio.md')}))
   .add('Example', () =>
     <Audio autoPlay src={src}>{(audio) =>

src/Audio/__story__/story.tsx

@@ -7,7 +7,7 @@ import ShowDocs from '../../../.storybook/ShowDocs'
 
 const src = 'http://dailym.ai/2rG7TBS';
 
-storiesOf('Generators/Video', module)
+storiesOf('UI/Video', module)
   .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Video.md')}))
   .add('Example', () =>
     <Video autoPlay style={{