Skip to content

Commit c346709

Browse files
streamichstreamich
committed
refactor: move files for basic Gibook setup
1 parent 090fb6e commit c346709

10 files changed

Lines changed: 571 additions & 9 deletions

File tree

‎README.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,6 @@ const MyComponent = mock();
4141
- [`<Counter>`](./docs/Counter.md), [`withCounter()`](./docs/Counter.md#withcounter-hoc) and [`@withCounter`](./docs/Counter.md#withcounter-decorator)
4242
- [`<List>`](./docs/List.md), [`withList()`](./docs/List.md#withlist-hoc), and [`@withList`](./docs/List.md#withlist-decorator)
4343
- [`<Map>`](./docs/Map.md), [`withMap()`](./docs/Map.md#withmap-hoc), and [`@withMap`](./docs/Map.md#withmap-decorator)
44-
- [Context](./docs/Context2.md)
45-
- [`<Provider>`](./docs/Provider.md#provider), [`<Consumer>`](./docs/Provider.md#consumer), [`withContext()`](./docs/Provider.md#withcontext), and `@withContext`
46-
- [`<Theme>`](./docs/theme.md#theme), [`<Themed>`](./docs/theme.md#themed), [`withTheme()`](./docs/theme.md#withtheme), and `@withTheme`
47-
- `<CssVars>`
48-
- [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`withRoute()`](./docs/route.md#withroute), `@withRoute`, `go()`, and `<Go>`
49-
- [`<Translations>`](./docs/translate.md#translations), [`<Translate>`](./docs/translate.md#translate-or-t), [`<T>`](./docs/translate.md#translate-or-t), [`withT()`](./docs/translate.md#witht-hoc), and [`@withT`](./docs/translate.md#witht-decorator)
5044
- [Sensors](./docs/Sensors.md)
5145
- [`<BatterySensor>`](./docs/BatterySensor.md), [`withBattery()`](./docs/BatterySensor.md#withbattery), and [`@withBattery`](./docs/BatterySensor.md#withbattery-1)
5246
- [`<GeoLocationSensor>`](./docs/GeoLocationSensor.md), [`withGeoLocation()`](./docs/GeoLocationSensor.md#withgeolocation-hoc), and [`@withGeoLocation`](./docs/GeoLocationSensor.md#withgeolocation-decorator)
@@ -68,6 +62,12 @@ const MyComponent = mock();
6862
- [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md), [`withWindowSize()`](./docs/WindowSizeSensor.md#withwindowsize-hoc), and [`@withWindowSize`](./docs/WindowSizeSensor.md#withwindowsize-decorator)
6963
- `ActiveSensor`, `withActive()`, and `@withActive`
7064
- `FocusSensor`, `withFocus()`, and `@withFocus`
65+
- [Context](./docs/Context2.md)
66+
- [`<Provider>`](./docs/Provider.md#provider), [`<Consumer>`](./docs/Provider.md#consumer), [`withContext()`](./docs/Provider.md#withcontext), and `@withContext`
67+
- [`<Theme>`](./docs/theme.md#theme), [`<Themed>`](./docs/theme.md#themed), [`withTheme()`](./docs/theme.md#withtheme), and `@withTheme`
68+
- `<CssVars>`
69+
- [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`withRoute()`](./docs/route.md#withroute), `@withRoute`, `go()`, and `<Go>`
70+
- [`<Translations>`](./docs/translate.md#translations), [`<Translate>`](./docs/translate.md#translate-or-t), [`<T>`](./docs/translate.md#translate-or-t), [`withT()`](./docs/translate.md#witht-hoc), and [`@withT`](./docs/translate.md#witht-decorator)
7171
- Generators
7272
- [`<Audio>`](./docs/Audio.md), [`<Video>`](./docs/Video.md), and `<Media>`
7373
- [`<LocalStorage>`](./docs/LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`

‎docs/LANGS.md‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
11
# Languages
22

33
* [English](en/)
4-
* [Español](es/)
5-
* [Русский](ru/)
6-
* [French](fr/)

docs/Dummies.md renamed to docs/en/Dummies.md

File renamed without changes.

‎docs/en/Introduction.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# Introduction
2+
3+
`libreact` is a collection of most essential React utilities you will probably need in any project.
4+
5+
[Render prop](#render-props) and [FaCC](#facc) notation is usually used interchangeably as most `libreact`
6+
components support both interfaces. Also, most render prop components support
7+
[component prop](#component-prop) interface, with the following precedence:
8+
9+
1. FaCC
10+
2. Render prop
11+
3. Component prop
12+
13+
14+
## Render props
15+
16+
*Render props* are components which have props that start with `render*` and accept a function that
17+
returns a React element, for example:
18+
19+
```jsx
20+
<App
21+
renderNavigation={() => <Navigation />}
22+
renderBody={() => <Body />}
23+
renderFooter={() => <Footer />}
24+
/>
25+
```
26+
27+
Where the function like `() => <Navigation />` *"renders"* the navigation.
28+
29+
Typically though a render prop component will have only one `render*` prop, in that case
30+
we simply call it `render`.
31+
32+
```jsx
33+
<MouseSensor render={({posX, posY}) => <div />} />
34+
```
35+
36+
37+
## FaCC
38+
39+
FaCC or *Function as a Child Component* is a special case of render prop where the single
40+
render prop is called `children` instead.
41+
42+
```jsx
43+
<MouseSensor children={({posX, posY}) => <div />} />
44+
```
45+
46+
FaCC notation is superior to a single render prop notation, because you can put the rendering function into props, as
47+
above, or place it as a child in JSX tree, which allows your *"HTML"* markup to have natural spacing.
48+
49+
```jsx
50+
<MouseSensor>{({posX, posY}) =>
51+
<div />
52+
}</MouseSensor>
53+
```
54+
55+
FaCCs are especially convenient when you use hyperscript function `h` to create your
56+
React elements, because you don't have to type the closing tag and create a props object unnecessarily.
57+
58+
```js
59+
h(MouseSensor, null, ({posX, posY}) => h('div')})
60+
```
61+
62+
63+
## Component prop
64+
65+
*Component prop* is when a component expects a `component` or `comp` prop that
66+
itself is a component.
67+
68+
```jsx
69+
<Route match='/home' comp={Home} />
70+
<Route match='/user' component={User} />
71+
```
72+
73+
`libreact` supports both ways of component prop (`comp` and `component`). Normally, when a component has a
74+
render prop interface it will also support the component prop interface.
75+
76+
77+
## HOC
78+
79+
HOC or *Higher Order Component* is a function that receives AND/OR returns React components.
80+
81+
82+
## Enhancer
83+
84+
*Enhancer* is a HOC that receives AND returns React components.

‎docs/en/README.md‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
![libreact logo](../libreact.png)
2+
3+
# libreact
4+
5+
[![][npm-badge]][npm-url] [![][travis-badge]][travis-url]
6+
7+
React standard library &mdash; must-have toolbox for any React project.
8+
9+
- Collection of React sensors, FaCCs, render props, HOCs, context providers, dummies, and [other goodies](#contents).
10+
- *Isomorphic* - all components work in browser and on server (and some in `react-native`).
11+
- See [demos](https://mailonline.github.io/libreact/) and [docs](#contents).
12+
13+
## Installation
14+
15+
<pre>
16+
npm i <a href="https://www.npmjs.com/package/libreact">libreact</a> --save
17+
</pre>
18+
19+
## Usage
20+
21+
Import each utility individually to decrease your bundle size
22+
23+
```js
24+
import {mock} from 'libreact/lib/mock';
25+
26+
const MyComponent = mock();
27+
```
28+
29+
## Contents
30+
31+
- [Introduction](./Introduction.md)
32+
- [Dummies](./docs/Dummies.md)
33+
- [`mock()`](./docs/mock.md) and [`loadable()`](./docs/loadable.md)
34+
- [`lazy()`](./docs/lazy.md), [`delayed()`](./docs/delayed.md), and [`viewport()`](./docs/viewport.md)
35+
- [Inversion](./docs/Inversion2.md)
36+
- [`invert()`](./docs/invert.md) and [`<Inverted>`](./docs/invert.md#inverted)
37+
- [`<State>`](./docs/State.md) and [`withState()`](./docs/State.md#withstate-hoc)
38+
- [`<Toggle>`](./docs/Toggle.md), [`withToggle()`](./docs/Toggle.md#withtoggle-hoc), and [`@withToggle`](./docs/Toggle.md#withtoggle-decorator)
39+
- [`<Flipflop>`](./docs/Flipflop.md), [`withFlipflop()`](./docs/Flipflop.md#withflipflop-hoc), and [`@withFlipflop`](./docs/Flipflop.md#withflipflop-decorator)
40+
- [`<Value>`](./docs/Value.md), [`withValue()`](./docs/Value.md#withvalue-hoc), and [`@withValue`](./docs/Value.md#withvalue-decorator)
41+
- [`<Counter>`](./docs/Counter.md), [`withCounter()`](./docs/Counter.md#withcounter-hoc) and [`@withCounter`](./docs/Counter.md#withcounter-decorator)
42+
- [`<List>`](./docs/List.md), [`withList()`](./docs/List.md#withlist-hoc), and [`@withList`](./docs/List.md#withlist-decorator)
43+
- [`<Map>`](./docs/Map.md), [`withMap()`](./docs/Map.md#withmap-hoc), and [`@withMap`](./docs/Map.md#withmap-decorator)
44+
- [Sensors](./docs/Sensors.md)
45+
- [`<BatterySensor>`](./docs/BatterySensor.md), [`withBattery()`](./docs/BatterySensor.md#withbattery), and [`@withBattery`](./docs/BatterySensor.md#withbattery-1)
46+
- [`<GeoLocationSensor>`](./docs/GeoLocationSensor.md), [`withGeoLocation()`](./docs/GeoLocationSensor.md#withgeolocation-hoc), and [`@withGeoLocation`](./docs/GeoLocationSensor.md#withgeolocation-decorator)
47+
- [`<HoverSensor>`](./docs/HoverSensor.md), [`withHover()`](./docs/HoverSensor.md#withhover-hoc), and [`@withHover`](./docs/HoverSensor.md#withhover-decorator)
48+
- [`<MediaDeviceSensor>`](./docs/MediaDeviceSensor.md), [`withMediaDevices()`](./docs/MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./docs/MediaDeviceSensor.md#withmediadevices-1)
49+
- [`<MediaSensor>`](./docs/MediaSensor.md), [`withMedia()`](./docs/MediaSensor.md#withmedia), and [`@withMedia`](./docs/MediaSensor.md#withmedia-1)
50+
- [`<MotionSensor>`](./docs/MotionSensor.md), [`withMotion()`](./docs/MotionSensor.md#withmotion-hoc), and [`@withMotion`](./docs/MotionSensor.md#withmotion-decorator)
51+
- [`<MouseSensor>`](./docs/MouseSensor.md), [`withMouse()`](./docs/MouseSensor.md#withmouse-hoc), and [`@withMouse`](./docs/MouseSensor.md#withmouse-decorator)
52+
- [`<NetworkSensor>`](./docs/NetworkSensor.md), [`withNetwork()`](./docs/NetworkSensor.md#withnetwork-hoc), and [`@withNetwork`](./docs/NetworkSensor.md#withnetwork-decorator)
53+
- [`<LightSensor>`](./docs/LightSensor.md), [`withLight()`](./docs/LightSensor.md#withlight-hoc), and [`@withLight`](./docs/LightSensor.md#withlight-decorator)
54+
- [`<LocationSensor>`](./docs/LocationSensor.md), [`withLocation()`](./docs/LocationSensor.md#withlocation-hoc), and [`@withLocation`](./docs/LocationSensor.md#withlocation-decora)
55+
- [`<OrientationSensor>`](./docs/OrientationSensor.md), [`withOrientation()`](./docs/OrientationSensor.md#withorientation-hoc), and [`@withOrientation`](./docs/OrientationSensor.md#withorientation-decorator)
56+
- [`<ScrollSensor>`](./docs/ScrollSensor.md)
57+
- [`<SizeSensor>`](./docs/SizeSensor.md), [`withSize()`](./docs/SizeSensor.md#withsize-hoc), and [`@withSize`](./docs/SizeSensor.md#withsize-decorator)
58+
- [`<WidthSensor>`](./docs/WidthSensor.md), [`withWidth()`](./docs/WidthSensor.md#withwidth-hoc-and-withwidth-decorator), and [`@withWidth`](./docs/WidthSensor.md#withwidth-hoc-and-withwidth-decorator)
59+
- [`<ViewportSensor>`](./docs/ViewportSensor.md), [`withViewport()`](./docs/ViewportSensor.md#withviewport-hoc), and [`@withViewport`](./docs/ViewportSensor.md#withviewport-decorator)
60+
- [`<ViewportScrollSensor>`](./docs/ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./docs/ViewportSensor.md#viewportobserversensor)
61+
- [`<WindowScrollSensor>`](./docs/WindowScrollSensor.md), [`withWindowScroll()`](./docs/WindowScrollSensor.md#withwindowscroll-hoc), and [`@withWindowScroll`](./docs/WindowScrollSensor.md#withwindowscroll-decorator)
62+
- [`<WindowSizeSensor>`](./docs/WindowSizeSensor.md), [`withWindowSize()`](./docs/WindowSizeSensor.md#withwindowsize-hoc), and [`@withWindowSize`](./docs/WindowSizeSensor.md#withwindowsize-decorator)
63+
- `ActiveSensor`, `withActive()`, and `@withActive`
64+
- `FocusSensor`, `withFocus()`, and `@withFocus`
65+
- [Context](./docs/Context2.md)
66+
- [`<Provider>`](./docs/Provider.md#provider), [`<Consumer>`](./docs/Provider.md#consumer), [`withContext()`](./docs/Provider.md#withcontext), and `@withContext`
67+
- [`<Theme>`](./docs/theme.md#theme), [`<Themed>`](./docs/theme.md#themed), [`withTheme()`](./docs/theme.md#withtheme), and `@withTheme`
68+
- `<CssVars>`
69+
- [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`withRoute()`](./docs/route.md#withroute), `@withRoute`, `go()`, and `<Go>`
70+
- [`<Translations>`](./docs/translate.md#translations), [`<Translate>`](./docs/translate.md#translate-or-t), [`<T>`](./docs/translate.md#translate-or-t), [`withT()`](./docs/translate.md#witht-hoc), and [`@withT`](./docs/translate.md#witht-decorator)
71+
- Generators
72+
- [`<Audio>`](./docs/Audio.md), [`<Video>`](./docs/Video.md), and `<Media>`
73+
- [`<LocalStorage>`](./docs/LocalStorage.md), `<SessionStorage>`, `<IndexedDb>`
74+
- [`<Speak>`](./docs/Speak.md), [`<Vibrate>`](./docs/Vibrate.md), [`<Alert>`](./docs/Alert.md), `<Prompt>`, `<Confirm>`
75+
- [`go()`](./docs/route.md#go), `<Redirect>`, `<Link>`, [`<Sms>`](./docs/Sms.md), [`<Mailto>`](./docs/Mailto.md), and `<Tel>`
76+
- [`<FullScreen>`](./docs/FullScreen.md)
77+
- UI
78+
- `<Overlay>`
79+
- [CSS resets](./docs/CSS-resets.md)
80+
- [`<CssResetEricMeyer>`](./docs/reset/CssResetEricMeyer.md) and [`<CssResetEricMeyerCondensed>`](./docs/reset/CssResetEricMeyerCondensed.md)
81+
- [`<CssResetMinimalistic>`](./docs/reset/CssResetMinimalistic.md), [`<CssResetMinimalistic2>`](./docs/reset/CssResetMinimalistic2.md), and [`<CssResetMinimalistic3>`](./docs/reset/CssResetMinimalistic3.md)
82+
- [`<CssResetPoorMan>`](./docs/reset/CssResetPoorMan.md)
83+
- [`<CssResetShaunInman>`](./docs/reset/CssResetShaunInman.md)
84+
- [`<CssResetSiolon>`](./docs/reset/CssResetSiolon.md)
85+
- [`<CssResetTantek>`](./docs/reset/CssResetTantek.md)
86+
- [`<CssResetUniversal>`](./docs/reset/CssResetUniversal.md)
87+
- [`<CssResetYahoo>`](./docs/reset/CssResetYahoo.md)
88+
- Other
89+
- [`<Resolve>`](./docs/Resolve.md), `<Fetch>`
90+
- [`getDisplayName()`](./docs/getDisplayName.md)
91+
- `<BrowserOnly>`, `<ServerOnly>`, and `<Environment>`
92+
- `<Locales>`
93+
- `<Draggable>`, `<Droppable>`, `<Parallax>`, `<Pin>`
94+
95+
96+
## License
97+
98+
[Unlicense](./LICENSE) - public domain.
99+
100+
101+
[npm-url]: https://www.npmjs.com/package/libreact
102+
[npm-badge]: https://img.shields.io/npm/v/libreact.svg
103+
[travis-url]: https://travis-ci.org/MailOnline/libreact
104+
[travis-badge]: https://travis-ci.org/MailOnline/libreact.svg?branch=master

‎docs/en/SUMMARY.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Summary
2+
3+
* [About](README.md)
4+
* [Introduction](Introduction.md)
5+
* [Dummies](Dummies.md)
6+
* [`mock()`](mock.md)
7+
* [`loadable()`](loadable.md)
8+
* [`lazy()`](lazy.md)

docs/lazy.md renamed to docs/en/lazy.md

File renamed without changes.

docs/loadable.md renamed to docs/en/loadable.md

File renamed without changes.

docs/mock.md renamed to docs/en/mock.md

File renamed without changes.

0 commit comments

Comments
 (0)