fill docs

docs/rules/jsx-no-leaked-zero.md

@@ -1,35 +1,159 @@
 # Prevent zero from being rendered on numerical condition (react/jsx-no-leaked-zero)
 
-Please describe the origin of the rule here.
+When rendering an element in JSX based on a numerical condition, it might be possible to end up rendering a 0 to the DOM.
+
+The number 0 is a special case for JSX inline conditions, since it's the only falsy expression that it's returned by the render method.
 
 ## Rule Details
 
-This rule aims to...
+This rule aims to prevent potential numerical condition from rendering a 0 value to the DOM. Since the rule doesn't know if the condition is based on numbers or something else due to the lack of types, it will report all sorts of conditionals within a JSX expression.
+
+This can be avoided by:
+- casting the condition to bool
+- transforming the binary expression into a ternary expression which returns `null` for falsy values
+
+This rule is autofixable, check the Options section to read more about the different strategies available.
 
 Examples of **incorrect** code for this rule:
 
-```js
+```jsx
+const Component = ({ count, title }) => {
+  return <div>{count && title}</div>
+}
+```
+
+```jsx
+const Component = ({ count }) => {
+  return <div>{count && <span>There are {count} results</span>}</div>
+}
+```
+
+```jsx
+const Component = ({ elements }) => {
+  return <div>{elements.length && <List elements={elements}/>}</div>
+}
+```
 
-// fill me in
+```jsx
+const Component = ({ nestedCollection }) => {
+  return (
+    <div>
+      {nestedCollection.elements.length && <List elements={nestedCollection.elements} />}
+    </div>
+  )
+}
+```
+
+```jsx
+const Component = ({ elements }) => {
+  return <div>{elements[0] && <List elements={elements}/>}</div>
+}
+```
+
+```jsx
+const Component = ({ numberA, numberB }) => {
+  return <div>{(numberA || numberB) && <Results>{numberA+numberB}</Results>}</div>
+}
+```
 
+```jsx
+// If the condition is a boolean value, this rule will report the logical expression
+// since it can't guess the type of the condition.
+const Component = ({ someBool }) => {
+  return <div>{someBool && <Results>{numberA+numberB}</Results>}</div>
+}
 ```
 
 Examples of **correct** code for this rule:
 
-```js
+```jsx
+const Component = ({ elements }) => {
+  return <div>{elements}</div>
+}
+```
 
-// fill me in
+```jsx
+// An OR condition it's considered valid since it's assumed as a way
+// to render some fallback if the first value is falsy, not to render something conditionally.
+const Component = ({ customTitle }) => {
+  return <div>{customTitle || defaultTitle}</div>
+}
+```
 
+```jsx
+const Component = ({ elements }) => {
+  return <div>There are {elements.length} elements</div>
+}
+```
+
+```jsx
+const Component = ({ elements, count }) => {
+  return <div>{!count && 'No results found'}</div>
+}
+```
+
+```jsx
+const Component = ({ elements }) => {
+  return <div>{!!elements.length && <List elements={elements}/>}</div>
+}
+```
+
+```jsx
+const Component = ({ elements }) => {
+  return <div>{Boolean(elements.length) && <List elements={elements}/>}</div>
+}
+```
+
+```jsx
+const Component = ({ elements }) => {
+  return <div>{elements.length > 0 && <List elements={elements}/>}</div>
+}
+```
+
+```jsx
+const Component = ({ elements }) => {
+  return <div>{elements.length ? <List elements={elements}/> : null}</div>
+}
 ```
 
 ### Options
 
-If there are any options, describe them here. Otherwise, delete this section.
+The supported options are:
+
+### `fixStrategy`
+`"cast"` or `"ternary"` (default: `"ternary"`) - Decide the strategy to autofix the rule. The "cast" option will cast to boolean the condition of the JSX expression. The "ternary" option transforms the binary expression into a ternary expression returning `null` for falsy values.
+
+It can be set like:
+```js
+// ...
+"react/jsx-no-leaked-zero": [<enabled>, { "fixStrategy": <"cast" | "ternary"> }]
+// ...
+```
+
+Assuming the following incorrect code:
+```jsx
+const Component = ({ count, title }) => {
+  return <div>{count && title}</div>
+}
+```
+
+These are the fixes depending on the strategy selected:
+```jsx
+// fixStrategy: "cast"
+const Component = ({ count, title }) => {
+  return <div>{!!count && title}</div>
+}
+
+// fixStrategy: "ternary"
+const Component = ({ count, title }) => {
+  return <div>{count ? title : null}</div>
+}
+```
 
 ## When Not To Use It
 
-Give a short description of when it would be appropriate to turn off this rule.
+If you are working in a typed-codebase which encourages you to always use boolean conditions, this rule can be disabled.
 
 ## Further Reading
 
-If there are other links that describe the issue this rule addresses, please include them here in a bulleted list.
+- [React docs: Inline If with Logical && Operator](https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator)

lib/rules/jsx-no-leaked-zero.js

@@ -44,8 +44,8 @@ module.exports = {
           fixStrategy: {
             type: 'string',
             enum: [
-              'cast',
-              'ternary',
+              CAST_FIX_STRATEGY,
+              TERNARY_FIX_STRATEGY,
             ],
             default: DEFAULT_FIX_STRATEGY,
           },

tests/lib/rules/jsx-no-leaked-zero.js

@@ -53,7 +53,7 @@ ruleTester.run('jsx-no-leaked-zero', rule, {
     {
       code: `
       const Component = ({ elements, count }) => {
-        return <div>{!count && <List elements={elements}/>}</div>
+        return <div>{!count && 'No results found'}</div>
       }
       `,
     },