Skip to content

Commit a83c97c

Browse files
renatoribrenatorib
authored
Add docz (#153)
* minimal setup docz * chore: remove and ignore docz build folder * chore: add logo and primary color * fix: update dependencies * add more mdx to docz * add Touch.mdx to docz * add Hover.mdx to docz * add Focus.mdx to docz * add Active.mdx to docz * add FocusManager.mdx to docz * add State.mdx and Interval.mdx to docz * add Form.mdx to docz * add Counter.mdx to docz * add Compose.mdx to docz * add compose.mdx and composeEvents.mdx to docz * add Introduction and Guide to docz * add ordering to menus * deployment scripts * add setOn setOff to Toggle docs * remove FocusManager.mdx * edit readme
1 parent 18d1365 commit a83c97c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+5659
-2560
lines changed

‎.eslintignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.flow

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
*.log
2+
.docz
23
node_modules
34
dist

‎README.md

Lines changed: 4 additions & 265 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@
1717
<br />
1818

1919
> **React PowerPlug is a set of pluggable renderless components and helpers** that provides different types of state and logic utilities that you can use with your dumb components. It creates state and passes down the logic to the children, so you can handle your data. Read about the [Render Props](https://reactjs.org/docs/render-props.html) pattern.
20-
21-
20+
2221
## Highlights
22+
2323
- :ok_hand: Dependency free
2424
- :electric_plug: Plug and play
2525
- :crystal_ball: Tree shaking friendly (ESM, no side effects)
@@ -58,270 +58,9 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents'
5858

5959
</details>
6060

61-
## ⚠️ Master is unstable
62-
63-
> This branch is **unstable** and is in **active development**.
64-
> For the latest stable version go to [0.1-stable branch](https://github.com/renatorib/react-powerplug/tree/0.1-stable)
65-
66-
## Components
67-
68-
> **_Note_** _This is a kind of a cheat sheet for fast search._
69-
> _If you want a more detailed **API Reference** and examples for each component see [full docs](/docs)_
70-
71-
| Component | Component Props | Render Props | |
72-
| ---------------------------- | ----------------------- | ---------------------------------------------- | --------------------------------------------------------------------------- |
73-
| <h6>STATE CONTAINERS</h6> |
74-
| **\<State>** | `{ initial, onChange }` | `{ state, setState }` | [:point_down:](#state) [:books:](docs/components/State.md) |
75-
| **\<Toggle>** | `{ initial, onChange }` | `{ on, toggle, set, setOn, setOff }` | [:point_down:](#toggle) [:books:](docs/components/Toggle.md) |
76-
| **\<Counter>** | `{ initial, onChange }` | `{ count, inc, dec, incBy, decBy, set }` | [:point_down:](#counter) [:books:](docs/components/Counter.md) |
77-
| **\<Value>** | `{ initial, onChange }` | `{ value, set }` | [:point_down:](#value) [:books:](docs/components/Value.md) |
78-
| **\<Map>** | `{ initial, onChange }` | `{ set, get, over, values }` | [:point_down:](#map) [:books:](docs/components/Map.md) |
79-
| **\<Set>** | `{ initial, onChange }` | `{ values, add, clear, remove, has }` | [:point_down:](#set) [:books:](docs/components/Set.md) |
80-
| **\<List>** | `{ initial, onChange }` | `{ list, first, last, push, pull, sort, set }` | [:point_down:](#list) [:books:](docs/components/List.md) |
81-
| <h6>FEEDBACK CONTAINERS</h6> |
82-
| **\<Hover>** | `{ onChange }` | `{ hovered, bind }` | [:point_down:](#hover) [:books:](docs/components/Hover.md) |
83-
| **\<Active>** | `{ onChange }` | `{ active, bind }` | [:point_down:](#active) [:books:](docs/components/Active.md) |
84-
| **\<Focus>** | `{ onChange }` | `{ focused, bind }` | [:point_down:](#focus) [:books:](docs/components/Focus.md) |
85-
| **\<Touch>** | `{ onChange }` | `{ touched, bind }` | [:point_down:](#touch) [:books:](docs/components/Touch.md) |
86-
| <h6>FORM CONTAINERS</h6> |
87-
| **\<Input>** | `{ initial, onChange }` | `{ set, value, bind }` | [:point_down:](#input) [:books:](docs/components/Input.md) |
88-
| **\<Form>** | `{ initial, onChange }` | `{ input, values }` | [:point_down:](#form) [:books:](docs/components/Form.md) |
89-
| <h6>OTHER</h6> |
90-
| **\<Interval>** | `{ delay }` | `{ stop, start, toggle }` | [:point_down:](#interval) [:books:](docs/components/Interval.md) |
91-
| **\<Compose>** | `{ components }` | _depends on components prop_ | [:point_down:](#composing-components) [:books:](docs/components/Compose.md) |
92-
93-
## Utilities
94-
95-
| Name | |
96-
| ----------------------------- | -------------------------------------- |
97-
| compose(...components) | [:books:](docs/utils/compose.md) |
98-
| composeEvents(...objOfEvents) | [:books:](docs/utils/composeEvents.md) |
99-
100-
## Examples
101-
102-
#### State
103-
104-
```jsx
105-
<State initial={{ loading: false, data: null }}>
106-
{({ state, setState }) => (
107-
<DataReceiver
108-
data={state.data}
109-
onStart={() => setState({ loading: true })}
110-
onFinish={data => setState({ data, loading: false })}
111-
/>
112-
)}
113-
</State>
114-
```
115-
116-
#### Toggle
117-
118-
```jsx
119-
<Toggle initial={true}>
120-
{({ on, toggle }) => <Checkbox checked={on} onChange={toggle} />}
121-
</Toggle>
122-
```
123-
124-
#### Counter
125-
126-
```jsx
127-
<Counter initial={0}>
128-
{({ count, inc, dec }) => (
129-
<CartItem
130-
productName="Lorem ipsum"
131-
unitPrice={19.9}
132-
count={count}
133-
onAdd={inc}
134-
onRemove={dec}
135-
/>
136-
)}
137-
</Counter>
138-
```
139-
140-
#### Value
141-
142-
```jsx
143-
<Value initial="React">
144-
{({ value, set }) => (
145-
<Select
146-
label="Choose one"
147-
options={['React', 'Angular', 'Vue']}
148-
value={value}
149-
onChange={set}
150-
/>
151-
)}
152-
</Value>
153-
```
154-
155-
#### Map
156-
157-
```jsx
158-
<Map initial={{ sounds: true, graphics: 'medium' }}>
159-
{({ set, get }) => (
160-
<Settings>
161-
<ToggleCheck checked={get('sounds')} onChange={c => set('sounds', c)}>
162-
Game Sounds
163-
</ToggleCheck>
164-
<Select
165-
label="Graphics"
166-
options={['low', 'medium', 'high']}
167-
selected={get('graphics')}
168-
onSelect={value => set('graphics', value)}
169-
/>
170-
</Settings>
171-
)}
172-
</Map>
173-
```
174-
175-
#### Set
176-
177-
```jsx
178-
<Set initial={['react', 'babel']}>
179-
{({ values, remove, add }) => (
180-
<TagManager>
181-
<FormInput onSubmit={add} />
182-
{values.map(tag => <Tag onRemove={() => remove(tag)}>{tag}</Tag>)}
183-
</TagManager>
184-
)}
185-
</Set>
186-
```
187-
188-
#### List
61+
## Guide & Documentation
18962

190-
```jsx
191-
<List initial={['Buy new shoes']}>
192-
{({ list, pull, push }) => (
193-
<Todo>
194-
<TodoFormInput onSubmit={push} />
195-
{list.map(todo => (
196-
<TodoItem onDelete={() => pull(i => i === todo)}>{todo}</TodoItem>
197-
))}
198-
</Todo>
199-
)}
200-
</List>
201-
```
202-
203-
#### Hover
204-
205-
```jsx
206-
<Hover>
207-
{({ hovered, bind }) => (
208-
<div {...bind}>
209-
You are {hovered ? 'hovering' : 'not hovering'} this div.
210-
</div>
211-
)}
212-
</Hover>
213-
```
214-
215-
#### Active
216-
217-
```jsx
218-
<Active>
219-
{({ active, bind }) => (
220-
<div {...bind}>
221-
You are {active ? 'clicking' : 'not clicking'} this div.
222-
</div>
223-
)}
224-
</Active>
225-
```
226-
227-
#### Touch
228-
229-
```jsx
230-
<Touch>
231-
{({ touched, bind }) => (
232-
<div {...bind}>
233-
You are {touched ? 'touching' : 'not touching'} this div.
234-
</div>
235-
)}
236-
</Touch>
237-
```
238-
239-
#### Focus
240-
241-
```jsx
242-
<Focus>
243-
{({ focused, bind }) => (
244-
<div>
245-
<input {...bind} placeholder="Focus me" />
246-
<div>You are {focused ? 'focusing' : 'not focusing'} input.</div>
247-
</div>
248-
)}
249-
</Focus>
250-
```
251-
252-
#### Input
253-
254-
```jsx
255-
<Input initial="hello world">
256-
{({ bind, value }) => (
257-
<div>
258-
<ControlledInput {...bind} />
259-
<div>You typed {value}</div>
260-
</div>
261-
)}
262-
</Input>
263-
```
264-
265-
#### Form
266-
267-
```jsx
268-
<Form initial={{ subject: '', message: '' }}>
269-
{({ input, values }) => (
270-
<form
271-
onSubmit={e => {
272-
e.preventDefault()
273-
console.log(values)
274-
}}
275-
>
276-
<ControlledInput placeholder="Subject" {...input('subject').bind} />
277-
<ControlledTextArea placeholder="Message" {...input('message').bind} />
278-
<Submit>Send</Submit>
279-
</form>
280-
)}
281-
</Form>
282-
```
283-
284-
### Interval
285-
286-
```jsx
287-
<Interval delay={1000}>
288-
{({ stop, start }) => (
289-
<>
290-
<div>The time is now {new Date().toLocaleTimeString()}</div>
291-
<button onClick={() => stop()}>Stop interval</button>
292-
<button onClick={() => start()}>Start interval</button>
293-
</>
294-
)}
295-
</Interval>
296-
```
297-
298-
# Composing Components
299-
300-
If you want to avoid 'render props hell' you can compose two or more components in a single one.
301-
**[:books: For complete guide, see docs](docs/components/Compose.md)**
302-
303-
```jsx
304-
import { Compose } from 'react-powerplug'
305-
306-
<Compose components={[Toggle, Counter]}>
307-
{(toggle, counter) => (/* ... */)}
308-
</Compose>
309-
```
310-
311-
```jsx
312-
import { compose } from 'react-powerplug'
313-
314-
const ToggleCounter = compose(
315-
<Counter initial={5} />,
316-
<Toggle initial={false} />
317-
)
318-
319-
<ToggleCounter>
320-
{(toggle, counter) => (
321-
<ProductCard {...} />
322-
)}
323-
</ToggleCounter>
324-
```
63+
http://rena.to/react-powerplug/
32564

32665
---
32766

‎docs/Guide.mdx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
name: Guide
3+
route: /guide
4+
order: 19
5+
---
6+
7+
# Guide
8+
9+
## Creating a Dumb Component
10+
11+
Dumb Component, Presentational Component or (sometimes) Controlled Component is a component
12+
responsible **only for displaying content without any logic behind**. Usually they
13+
receive specific props, and if they are interactive, it exposes events like onClick, onChange, etc.
14+
15+
A Styled Component a good example.
16+
17+
```jsx
18+
import React from "react";
19+
import styled from "styled-components";
20+
21+
const DumbCheckbox = styled("div")`
22+
cursor: pointer;
23+
&:before {
24+
content: '${props => (props.checked ? "■" : "□")} ';
25+
}
26+
`;
27+
28+
const App = () => (
29+
<DumbCheckbox>Check me</DumbCheckbox>
30+
);
31+
```
32+
33+
## Using React PowerPlug
34+
35+
Now that you have your Dumb Component, you can pass state to it.
36+
Using react-powerplug this step is trivial and pretty simple.
37+
38+
```jsx
39+
import { Toggle } from "react-powerplug";
40+
41+
<Toggle>
42+
{({ on, toggle }) => (
43+
<DumbCheckbox checked={on} onClick={toggle}>
44+
Check me
45+
</DumbCheckbox>
46+
)}
47+
</Toggle>
48+
```
49+

‎docs/Introduction.mdx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
name: Introduction
3+
route: /
4+
order: 20
5+
---
6+
7+
# Introduction
8+
9+
**React PowerPlug is a set of pluggable renderless components and utils** that provides
10+
different types of state and logics so you can use with your dumb components. It creates
11+
a state and pass down the logic to the children, so you can handle your data.
12+
Read about [Render Props](https://reactjs.org/docs/render-props.html) pattern.
13+
14+
- Dependency free
15+
- Super tiny (~3kb)
16+
- Plug and play
17+
- Tree shaking friendly (ESM, no side effects)
18+
- Well documented
19+
- Bunch of awesome utilities
20+
21+
## Quick Examples
22+
23+
```jsx
24+
import { State, Toggle } from 'react-powerplug'
25+
import { Pagination, Tabs, Checkbox } from './MyDumbComponents'
26+
```
27+
28+
```jsx
29+
<State initial={{ offset: 0, limit: 10, totalCount: 200 }}>
30+
{({ state, setState }) => (
31+
<Pagination {...state} onChange={(offset) => setState({ offset })} />
32+
)}
33+
</State>
34+
```
35+
36+
```jsx
37+
<Toggle initial={true}>
38+
{({ on, toggle }) => (
39+
<Checkbox checked={on} onChange={toggle} />
40+
)}
41+
</Toggle>
42+
```
43+
44+
You can also use a `render` prop instead
45+
46+
```jsx
47+
<Toggle
48+
initial={false}
49+
render={({ on, toggle }) => (
50+
<Checkbox checked={on} onChange={toggle} />
51+
)}
52+
/>
53+
```

0 commit comments

Comments
 (0)