Skip to content

Commit 7b73ca1

Browse files
theKasheyrenatorib
theKashey
authored and
renatorib
committed
TypeScript definition, implements #86 (#88)
* TypeScript definition, impliments #86 * Add dtslint * TS tests * lint d.ts test * export types on npm * remove tsconfig and add type tests for Updater
1 parent eb0489f commit 7b73ca1

File tree

7 files changed

+745
-11
lines changed

7 files changed

+745
-11
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents'
7474
| **\<State>** | `{ initial, onChange }` | `{ state, setState }` | [:point_down:](#state) [:books:](docs/components/State.md) |
7575
| **\<Toggle>** | `{ initial, onChange }` | `{ on, toggle, set }` | [:point_down:](#toggle) [:books:](docs/components/Toggle.md) |
7676
| **\<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) |
77+
| **\<Value>** | `{ initial, onChange }` | `{ value, set }` | [:point_down:](#value) [:books:](docs/components/Value.md) |
7878
| **\<Map>** | `{ initial, onChange }` | `{ set, get, over, values }` | [:point_down:](#map) [:books:](docs/components/Map.md) |
7979
| **\<Set>** | `{ initial, onChange }` | `{ values, add, clear, remove, has }` | [:point_down:](#set) [:books:](docs/components/Set.md) |
8080
| **\<List>** | `{ initial, onChange }` | `{ list, first, last, push, pull, sort, set }` | [:point_down:](#list) [:books:](docs/components/List.md) |

‎package.json‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,19 @@
66
"license": "MIT",
77
"main": "dist/react-powerplug.cjs.js",
88
"module": "dist/react-powerplug.esm.js",
9+
"types": "types/index.d.ts",
910
"files": [
1011
"dist",
11-
"src"
12+
"src",
13+
"types"
1214
],
1315
"scripts": {
1416
"build:flow": "echo \"// @flow\n\nexport * from '../src'\" > dist/react-powerplug.cjs.js.flow",
1517
"build:code": "cross-env NODE_ENV=code rollup -c",
1618
"build": "npm run clean && npm run build:code && npm run build:flow",
1719
"clean": "rimraf dist",
1820
"typecheck:flow": "flow check --max-warnings=0",
21+
"typecheck:ts": "dtslint types",
1922
"lint": "eslint src test",
2023
"test:only": "jest",
2124
"test:umd": "jest --setupTestFrameworkScriptFile ./tests/jestUMDSetup.js",
@@ -27,7 +30,7 @@
2730
"contributors:generate": "all-contributors generate"
2831
},
2932
"lint-staged": {
30-
"*.{js,md}": [
33+
"*.{js,md,ts,tsx}": [
3134
"prettier --write",
3235
"git add"
3336
]
@@ -66,11 +69,13 @@
6669
"@babel/preset-env": "^7.0.0-beta.49",
6770
"@babel/preset-react": "^7.0.0-beta.49",
6871
"@babel/preset-stage-3": "^7.0.0-beta.49",
72+
"@types/react": "^16.3.13",
6973
"all-contributors-cli": "^4.11.2",
7074
"babel-core": "^7.0.0-bridge.0",
7175
"babel-eslint": "^8.2.3",
7276
"babel-jest": "^23.0.0",
7377
"cross-env": "^5.0.5",
78+
"dtslint": "^0.3.0",
7479
"eslint": "^4.19.1",
7580
"eslint-plugin-import": "^2.12.0",
7681
"eslint-plugin-react": "^7.9.1",

‎src/utils/compose.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const isElement = element => typeof element.type === 'function'
55

66
const compose = (...elements) => {
77
const reversedElements = elements.reverse()
8-
8+
99
return composedProps => {
1010
// Stack children arguments recursively and pass
1111
// it down until the last component that render children

‎types/index.d.ts‎

Lines changed: 279 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,279 @@
1+
// TypeScript Version: 2.4
2+
3+
import * as React from 'react'
4+
5+
/* Utils */
6+
7+
export type Updater<T> = (value: T | ((updater: T) => T)) => void
8+
export type Callback<T> = (value: T) => void
9+
export type RenderFn<T> = (value: T) => React.ReactNode
10+
11+
/* Active */
12+
13+
export type ActiveChange = (active: boolean) => void
14+
15+
export type ActiveRender = (
16+
argument: {
17+
active: boolean
18+
bind: { onMouseDown: () => void; onMouseUp: () => void }
19+
}
20+
) => React.ReactNode
21+
22+
export const Active: React.ComponentType<
23+
| { onChange?: ActiveChange; render: ActiveRender }
24+
| { onChange?: ActiveChange; children: ActiveRender }
25+
>
26+
27+
/* Compose */
28+
29+
export const Compose: React.ComponentType
30+
31+
/* Counter */
32+
33+
export type CounterChange = Callback<number>
34+
35+
export type CounterRender = RenderFn<{
36+
count: number
37+
inc: () => void
38+
dec: () => void
39+
incBy: (step: number) => void
40+
decBy: (step: number) => void
41+
}>
42+
43+
export const Counter: React.ComponentType<
44+
| { initial?: number; onChange?: CounterChange; render: CounterRender }
45+
| { initial?: number; onChange?: CounterChange; children: CounterRender }
46+
>
47+
48+
/* Focus */
49+
50+
export type FocusChange = Callback<boolean>
51+
52+
export type FocusRender = RenderFn<{
53+
focused: boolean
54+
bind: { onFocus: () => void; onBlur: () => void }
55+
}>
56+
57+
export const Focus: React.ComponentType<
58+
| { onChange?: FocusChange; render: FocusRender }
59+
| { onChange?: FocusChange; children: FocusRender }
60+
>
61+
62+
/* FocusManager */
63+
64+
export type FocusManagerChange = Callback<boolean>
65+
66+
export type FocusManagerRender = RenderFn<{
67+
focused: boolean
68+
blur: () => void
69+
bind: { tabIndex: number; onFocus: () => void; onBlur: () => void }
70+
}>
71+
72+
export const FocusManager: React.ComponentType<
73+
| { onChange?: FocusManagerChange; render: FocusManagerRender }
74+
| { onChange?: FocusManagerChange; children: FocusManagerRender }
75+
>
76+
77+
/* Form */
78+
79+
export type FormChange<T> = Callback<T>
80+
81+
export type FormRender<T, K extends keyof T> = RenderFn<{
82+
values: T
83+
input: (
84+
key: K
85+
) => {
86+
value: string
87+
set: Updater<string>
88+
bind: {
89+
value: string
90+
onChange: (argument: React.ChangeEvent<any>) => void
91+
}
92+
}
93+
}>
94+
95+
export type FormProps<T, K extends keyof T> =
96+
| { initial: T; onChange?: FormChange<T>; render: FormRender<T, K> }
97+
| { initial: T; onChange?: FormChange<T>; children: FormRender<T, K> }
98+
99+
export interface Hash {
100+
[key: string]: string
101+
}
102+
103+
export class Form<T extends Hash, K extends keyof T> extends React.Component<
104+
FormProps<T, K>,
105+
any
106+
> {}
107+
108+
/* Hover */
109+
110+
export type HoverChange = Callback<boolean>
111+
112+
export type HoverRender = RenderFn<{
113+
hovered: boolean
114+
bind: { onMouseEnter: () => void; onMouseLeave: () => void }
115+
}>
116+
117+
export const Hover: React.ComponentType<
118+
| { onChange?: HoverChange; render: HoverRender }
119+
| { onChange?: HoverChange; children: HoverRender }
120+
>
121+
122+
/* Input */
123+
124+
export type InputChange = Callback<string>
125+
126+
export type InputRender = RenderFn<{
127+
value: string
128+
set: Updater<string>
129+
bind: { value: string; onChange: (event: React.ChangeEvent<any>) => void }
130+
}>
131+
132+
export const Input: React.ComponentType<
133+
| { initial?: string; onChange?: InputChange; render: InputRender }
134+
| { initial?: string; onChange?: InputChange; children: InputRender }
135+
>
136+
137+
/* List */
138+
139+
export type ListChange<T> = Callback<ReadonlyArray<T>>
140+
141+
export type ListRender<T> = RenderFn<{
142+
list: ReadonlyArray<T>
143+
first: () => T | void
144+
last: () => T | void
145+
set: Updater<ReadonlyArray<T>>
146+
push: (value: T) => void
147+
pull: (predicate: (flag: T) => boolean) => void
148+
sort: (compare: (a: T, b: T) => -1 | 0 | 1) => void
149+
}>
150+
151+
export type ListProps<T> =
152+
| {
153+
initial: ReadonlyArray<T>
154+
onChange?: ListChange<T>
155+
render: ListRender<T>
156+
}
157+
| {
158+
initial: ReadonlyArray<T>
159+
onChange?: ListChange<T>
160+
children: ListRender<T>
161+
}
162+
163+
export class List<T> extends React.Component<ListProps<T>, any> {}
164+
165+
/* Set */
166+
167+
export type SetChange<T> = Callback<ReadonlyArray<T>>
168+
169+
export type SetRender<T> = RenderFn<{
170+
values: ReadonlyArray<T>
171+
add: (key: T) => void
172+
clear: () => void
173+
remove: (key: T) => void
174+
has: (key: T) => boolean
175+
}>
176+
177+
export type SetProps<T> =
178+
| {
179+
initial: ReadonlyArray<T>
180+
onChange?: SetChange<T>
181+
render: SetRender<T>
182+
}
183+
| {
184+
initial: ReadonlyArray<T>
185+
onChange?: SetChange<T>
186+
children: SetRender<T>
187+
}
188+
189+
export class Set<T> extends React.Component<SetProps<T>> {}
190+
191+
/* Map */
192+
193+
export type MapChange<T> = Callback<T>
194+
195+
export type MapRender<T, K extends keyof T> = RenderFn<{
196+
values: T
197+
set: (key: K, value: T[K]) => void
198+
over: (key: K, fn: (value: T[K]) => T[K]) => void
199+
get: (key: K) => T[K]
200+
}>
201+
202+
export type MapProps<T, K extends keyof T> =
203+
| { initial: T; onChange?: MapChange<T>; render: MapRender<T, K> }
204+
| { initial: T; onChange?: MapChange<T>; children: MapRender<T, K> }
205+
206+
export class Map<T extends {}, K extends keyof T> extends React.Component<
207+
MapProps<T, K>,
208+
any
209+
> {}
210+
211+
/* State */
212+
213+
export type StateChange<T> = Callback<T>
214+
215+
export type StateRender<T> = RenderFn<{
216+
state: T
217+
setState: (
218+
updated: Partial<T> | ((state: T) => Partial<T>),
219+
cb?: () => void
220+
) => void
221+
}>
222+
223+
export type StateProps<T> =
224+
| { initial: T; onChange?: StateChange<T>; render: StateRender<T> }
225+
| { initial: T; onChange?: StateChange<T>; children: StateRender<T> }
226+
227+
export class State<T extends {}> extends React.Component<StateProps<T>> {}
228+
229+
/* Toggle */
230+
231+
export type ToggleChange = Callback<boolean>
232+
233+
export type ToggleRender = RenderFn<{
234+
on: boolean
235+
toggle: () => void
236+
set: Updater<boolean>
237+
}>
238+
239+
export const Toggle: React.ComponentType<
240+
| { initial?: boolean; onChange?: ToggleChange; render: ToggleRender }
241+
| { initial?: boolean; onChange?: ToggleChange; children: ToggleRender }
242+
>
243+
244+
/* Touch */
245+
246+
export type TouchChange = Callback<boolean>
247+
248+
export type TouchRender = RenderFn<{
249+
touched: boolean
250+
bind: { onTouchStart: () => void; onTouchEnd: () => void }
251+
}>
252+
253+
export const Touch: React.ComponentType<
254+
| { onChange?: TouchChange; render: TouchRender }
255+
| { onChange?: TouchChange; children: TouchRender }
256+
>
257+
258+
/* Value */
259+
260+
export type ValueChange<T> = Callback<T>
261+
262+
export type ValueRender<T> = RenderFn<{
263+
value: T
264+
set: Updater<T>
265+
}>
266+
267+
export type ValueProps<T> =
268+
| { initial: T; onChange?: ValueChange<T>; render: ValueRender<T> }
269+
| { initial: T; onChange?: ValueChange<T>; children: ValueRender<T> }
270+
271+
export class Value<T> extends React.Component<ValueProps<T>> {}
272+
273+
/* composeEvents */
274+
275+
export interface Events {
276+
[name: string]: (event: any) => void
277+
}
278+
279+
export function composeEvents(...arguments: Events[]): Events

0 commit comments

Comments
 (0)