diff --git a/101.md b/101.md index 09daef3a69..40d6166e1e 100644 --- a/101.md +++ b/101.md @@ -1,9 +1,26 @@ --- title: 101 category: JavaScript libraries +layout: 2017/sheet +updated: 2017-09-21 +intro: | + [101](https://www.npmjs.com/package/101) is a JavaScript library for dealing with immutable data in a functional manner. --- +### Usage + +```js +const isObject = require('101/isObject') +isObject({}) // → true ``` + +Every function is exposed as a module. + +See: [101](https://github.com/tjmehta/101) + +### Type checking + +```js isObject({}) isString('str') isRegExp(/regexp/) @@ -15,69 +32,172 @@ isNumber(10.1) instanceOf(obj, 'string') ``` -## Function composition +## Objects +{: .-three-column} + +### Example +{: .-prime} +```js +let obj = {} ``` -compose(f, g) // x => f(g(x)) -curry(f) // x => y => f(x, y) -flip(f) // f(x, y) --> f(y, x) -passAll(f, g) // x => f(x) && g(x) -passAny(f, g) // x => f(x) || g(x) +#### Update -converge(and, [pluck('a'), pluck('b')])(x) -// and(pluck(x, 'a'), pluck(x, 'b')) +```js +obj = put(obj, 'user.name', 'John') +// → { user: { name: 'John' } } ``` -## Objects +#### Read + +```js +pluck(name, 'user.name') +// → 'John' +``` + +#### Delete + +```js +obj = del(obj, 'user') +// → { } +``` + +### Getting ```js -del(state, 'user.profile') -put(state, 'user.profile.name', 'john') pluck(state, 'user.profile.name') +``` -omit(state, 'user.profile') +```js pick(state, ['user', 'ui']) pick(state, /^_/) +``` + +`pluck` returns values, `pick` returns subsets of objects. + +See: +[pluck](https://github.com/tjmehta/101#pluck), +[pick](https://github.com/tjmehta/101#pick) + +### Setting + +```js +put(state, 'user.profile.name', 'john') +``` + +See: +[put](https://github.com/tjmehta/101#put) + +### Deleting + +```js +del(state, 'user.profile') +omit(state, ['user', 'data']) +``` + +`omit` is like `del`, but supports multiple keys to be deleted. +See: +[omit](https://github.com/tjmehta/101#omit), +[del](https://github.com/tjmehta/101#del) + +### Keypath check + +```js hasKeypaths(state, ['user']) hasKeypaths(state, { 'user.profile.name': 'john' }) +``` + +See: +[hasKeypaths](https://github.com/tjmehta/101#haskeypaths) + +### Get values +```js values(state) ``` +## Functions + +### Simple functions + +| `and(x, y)` | `x && y` | +| `or(x, y)` | `x || y` | +| `xor(x, y)` | `!(!x && !y) && !(x && y)` | +| `equals(x, y)` | `x === y` | +| `exists(x)` | `!!x` | +| `not(x)` | `!x` | + +Useful for function composition. + +See: +[and](https://github.com/tjmehta/101#and), +[equals](https://github.com/tjmehta/101#equals), +[exists](https://github.com/tjmehta/101#exists) + +### Composition + +```js +compose(f, g) // x => f(g(x)) +curry(f) // x => y => f(x, y) +flip(f) // f(x, y) --> f(y, x) +``` + +See: +[compose](https://github.com/tjmehta/101#compose), +[curry](https://github.com/tjmehta/101#curry), +[flip](https://github.com/tjmehta/101#flip) + +### And/or + +```js +passAll(f, g) // x => f(x) && g(x) +passAny(f, g) // x => f(x) || g(x) +``` + +See: +[passAll](https://github.com/tjmehta/101#passall), +[passAny](https://github.com/tjmehta/101#passany) + +### Converge + +```js +converge(and, [pluck('a'), pluck('b')])(x) +``` + +```js +// → and(pluck(x, 'a'), pluck(x, 'b')) +``` + +See: +[converge](https://github.com/tjmehta/101#converge) + ## Arrays +### Finding + ```js find(list, x => x.y === 2) findIndex(list, x => ...) includes(list, 'item') last(list) - -groupBy(list, 'id') -indexBy(list, 'id') ``` ```js find(list, hasProps('id')) ``` -## Simple - -Useful for function composition. +### Grouping ```js -and(x, y) // x && y -or(x, y) // x || y -xor(x, y) // !(!x && !y) && !(x && y) -equal(x, y) // x === y -exists(x) // !!x -not(x) // !x +groupBy(list, 'id') +indexBy(list, 'id') ``` ## Examples -Function composition: +### Function composition ```js isFloat = passAll(isNumber, compose(isInteger, not)) @@ -92,4 +212,4 @@ doStuffForce = curry(flip(doStuff))({ force: true }) ## Reference - +- diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 0414c88f3f..167bff237b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -43,6 +43,14 @@ make {: .-four-column} {: .-six-column} +`h3` sections can have: + + pre + p + ul + table + h4 + ## Frontmatter Each sheet supports these metadata: diff --git a/_sass/2017/components/h3-section.scss b/_sass/2017/components/h3-section.scss index a70ae29fb2..dc30c84068 100644 --- a/_sass/2017/components/h3-section.scss +++ b/_sass/2017/components/h3-section.scss @@ -111,6 +111,20 @@ margin: 0; } + /* Headings in between bodies */ + & > h4 { + @include font-size(-1); + margin: 0; + padding: 4px 16px; + font-weight: normal; + background: $gray-bg; + color: $gray-text; + + & + * { + border-top: solid 1px $line-color; + } + } + /* Description paragraphs */ & > pre ~ p, & > ul ~ p, diff --git a/react.md b/react.md index 2b50bab336..e8aa2aef8e 100644 --- a/react.md +++ b/react.md @@ -394,30 +394,40 @@ import PropTypes from 'prop-types' See: [Typechecking with PropTypes](https://facebook.github.io/react/docs/typechecking-with-proptypes.html) -| PropType | Description | -| --- | --- | | `any` | Anything | -| --- | --- | + +#### Basic + | `string` | | | `number` | | | `func` | Function | | `bool` | True or false | -| --- | --- | + +#### Enum + | `oneOf`_(any)_ | Enum types | | `oneOfType`_(type array)_ | Union | -| --- | --- | + +#### Array + | `array` | | | `arrayOf`_(...)_ | | -| --- | --- | + +#### Object + | `object` | | | `objectOf`_(...)_ | Object with values of a certain type | | `instanceOf`_(...)_ | Instance of a class | | `shape`_(...)_ | | -| --- | --- | + +#### Elements + | `element` | React element | | `node` | DOM node | -| --- | --- | -| `.isRequired` | Required | + +#### Required + +| `(···).isRequired` | Required | ### Basic types