From 3868acab34bdcb2b41966c73c70eac6103a0924d Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sat, 2 Mar 2019 10:10:14 +0200 Subject: [PATCH] Ran linter --- CONTRIBUTING.md | 8 +- README.md | 474 +++++++++++++++----------------- data/snippet_data.json | 121 ++------ scripts/build.js | 67 ++--- scripts/extract.js | 43 ++- scripts/util.js | 36 ++- snippet-template.md | 12 +- snippets/AutoLink.md | 8 +- snippets/Carousel.md | 13 +- snippets/Collapse.md | 15 +- snippets/CountDown.md | 20 +- snippets/DataList.md | 8 +- snippets/DataTable.md | 9 +- snippets/FileDrop.md | 33 +-- snippets/Input.md | 4 +- snippets/LimitedTextarea.md | 7 +- snippets/LimitedWordTextarea.md | 10 +- snippets/Mailto.md | 6 +- snippets/MappedTable.md | 13 +- snippets/MultiselectCheckbox.md | 21 +- snippets/PasswordRevealer.md | 7 +- snippets/Select.md | 14 +- snippets/StarRating.md | 20 +- snippets/Tabs.md | 24 +- snippets/TextArea.md | 13 +- snippets/Ticker.md | 12 +- snippets/Toggle.md | 11 +- snippets/Tooltip.md | 25 +- snippets/TreeView.md | 83 +++--- snippets_archive/ModalDialog.md | 133 ++++----- static-parts/README-end.md | 6 +- static-parts/README-start.md | 15 +- 32 files changed, 583 insertions(+), 708 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e7e82126a..f4f398398 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -19,7 +19,7 @@ Here's what you can do to help: - All snippet titles must be prefixed with `###` and be at the very first line of your snippet. - Snippet titles must be unique (although if you cannot find a better title, just add some placeholder at the end of the filename and title and we will figure it out). - Follow snippet titles with an empty line. -- **Snippet descriptions** must be short and to the point. Try to explain *what* the snippet does and *how* the snippet works and what Javascript/React features are used. Remember to include what functions you are using and why. +- **Snippet descriptions** must be short and to the point. Try to explain _what_ the snippet does and _how_ the snippet works and what Javascript/React features are used. Remember to include what functions you are using and why. - Follow snippet descriptions with an empty line. - **Snippet code** must be enclosed inside ` ```jsx ` and ` ``` `. - If your snippet is accompanied by CSS code, enclose it inside ` ```css ` and ` ``` ` and present it before the JS/JSX code. @@ -31,8 +31,8 @@ Here's what you can do to help: - All snippets must be followed by one (more if necessary) test case after the code, in a new block enclosed inside ` ```jsx ` and ` ``` `. The syntax for this is `ReactDOM.render(, document.getElementById("root"));`. Use multiline examples only if necessary. - Try to make your component name unique, so that it does not conflict with existing snippets. - Snippets should be as brief as possible, without sacrificing functionality. If your snippet seems longer than most, you can still submit it, and we can help you shorten it or figure out ways to improve it. -- Snippets *should* solve real-world problems, no matter how simple. -- Snippets *should* be abstract enough to be applied to different scenarios. +- Snippets _should_ solve real-world problems, no matter how simple. +- Snippets _should_ be abstract enough to be applied to different scenarios. - You can start creating a new snippet, by using the [snippet template](snippet-template.md) to format your snippets. ### Additional guidelines and conventions regarding snippets @@ -78,4 +78,4 @@ Here's what you can do to help: - Use semicolons whenever necessary. - Leave a single space after a comma (`,`) character. - Try to strike a balance between readability, brevity, and performance. -- Never use `eval()`. Your snippet will be disqualified immediately. \ No newline at end of file +- Never use `eval()`. Your snippet will be disqualified immediately. diff --git a/README.md b/README.md index 0918b5193..828b961da 100644 --- a/README.md +++ b/README.md @@ -4,13 +4,14 @@ > Curated collection of useful React snippets that you can understand in 30 seconds or less. -* Use Ctrl + F or command + F to search for a snippet. -* Contributions welcome, please read the [contribution guide](CONTRIBUTING.md). -* Snippets are written in React 16.8+, using hooks. +- Use Ctrl + F or command + F to search for a snippet. +- Contributions welcome, please read the [contribution guide](CONTRIBUTING.md). +- Snippets are written in React 16.8+, using hooks. ### Prerequisites To import a snippet into your project, you must import `React` and copy-paste the component's JavaScript code like this: + ```js import React from 'react'; @@ -20,89 +21,86 @@ function MyComponent(props) { ``` If there is any CSS related to your component, copy-paste it to a new file with the same name and the appropriate extension, then import it like this: + ```js import './MyComponent.css'; ``` To render your component, make sure there is a node with and id of `"root"` present in your element (preferrably a `
`) and that you have imported `ReactDOM`, like this: + ```js import ReactDOM from 'react-dom'; ``` #### Related projects -* [30 Seconds of Code](https://30secondsofcode.org) -* [30 Seconds of CSS](https://30-seconds.github.io/30-seconds-of-css/) -* [30 Seconds of Interviews](https://30secondsofinterviews.org/) +- [30 Seconds of Code](https://30secondsofcode.org) +- [30 Seconds of CSS](https://30-seconds.github.io/30-seconds-of-css/) +- [30 Seconds of Interviews](https://30secondsofinterviews.org/) ## Table of Contents - ### Array
View contents -* [DataList](#datalist) -* [DataTable](#datatable) -* [MappedTable](#mappedtable) -
- +- [DataList](#datalist) +- [DataTable](#datatable) +- [MappedTable](#mappedtable) + ### Input
View contents -* [Input](#input) -* [LimitedTextarea](#limitedtextarea) -* [LimitedWordTextarea](#limitedwordtextarea) -* [MultiselectCheckbox](#multiselectcheckbox) -* [PasswordRevealer](#passwordrevealer) -* [Select](#select) -* [TextArea](#textarea) -
- +- [Input](#input) +- [LimitedTextarea](#limitedtextarea) +- [LimitedWordTextarea](#limitedwordtextarea) +- [MultiselectCheckbox](#multiselectcheckbox) +- [PasswordRevealer](#passwordrevealer) +- [Select](#select) +- [TextArea](#textarea) + ### Object
View contents -* [TreeView](#treeview) -
- +- [TreeView](#treeview) + ### String
View contents -* [AutoLink](#autolink) -
- +- [AutoLink](#autolink) + ### Visual
View contents -* [Carousel](#carousel) -* [Collapse](#collapse) -* [CountDown](#countdown) -* [FileDrop](#filedrop) -* [Mailto](#mailto) -* [StarRating](#starrating) -* [Tab](#tab) -* [Ticker](#ticker) -* [Toggle](#toggle) -* [Tooltip](#tooltip) -
- +- [Carousel](#carousel) +- [Collapse](#collapse) +- [CountDown](#countdown) +- [FileDrop](#filedrop) +- [Mailto](#mailto) +- [StarRating](#starrating) +- [Tab](#tab) +- [Ticker](#ticker) +- [Toggle](#toggle) +- [Tooltip](#tooltip) + --- ## Array + ### DataList Renders a list of elements from an array of primitives. @@ -113,9 +111,7 @@ Omit the `isOrdered` prop to render a `
    ` list by default. ```jsx function DataList({ isOrdered, data }) { - const list = data.map((val, i) => ( -
  • {val}
    • - )); + const list = data.map((val, i) =>
  • {val}
    • ); return isOrdered ?
      {list}
    :
      {list}
    ; } ``` @@ -125,9 +121,10 @@ function DataList({ isOrdered, data }) { ```jsx const names = ['John', 'Paul', 'Mary']; -ReactDOM.render(, document.getElementById('root')); -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render(, document.getElementById('root')); +ReactDOM.render(, document.getElementById('root')); ``` +
    [⬆ Back to top](#table-of-contents) @@ -150,12 +147,12 @@ function DataTable({ data }) { - {data.map((val, i) => + {data.map((val, i) => ( {i} {val} - )} + ))} ); @@ -167,11 +164,9 @@ function DataTable({ data }) { ```jsx const people = ['John', 'Jesse']; -ReactDOM.render( - , - document.getElementById('root') -); +ReactDOM.render(, document.getElementById('root')); ``` +
    [⬆ Back to top](#table-of-contents) @@ -195,12 +190,18 @@ function MappedTable({ data, propertyNames }) { return ( - {propertyNames.map(val => )} + + {propertyNames.map(val => ( + + ))} + {filteredData.map((val, i) => ( - {propertyNames.map(p => )} + {propertyNames.map(p => ( + + ))} ))} @@ -208,6 +209,7 @@ function MappedTable({ data, propertyNames }) { ); } ``` + #### Notes This component does not work with nested objects and will break if there are nested objects inside any of the properties specified in `propertyNames`.,, @@ -226,12 +228,13 @@ ReactDOM.render( document.getElementById('root') ); ``` +
    [⬆ Back to top](#table-of-contents) - ## Input + ### Input Renders an `` element that uses a callback function to pass its value to the parent component. @@ -240,7 +243,7 @@ Use object destructuring to set defaults for certain attributes of the `` Render an `` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the input to the parent. ```jsx -function Input ({ callback, type = 'text', disabled = false, readOnly = false, placeholder = '' }) { +function Input({ callback, type = 'text', disabled = false, readOnly = false, placeholder = '' }) { return ( console.log(val)}/>, + console.log(val)} />, document.getElementById('root') ); ``` +
    [⬆ Back to top](#table-of-contents) @@ -307,11 +311,9 @@ function LimitedTextarea({ rows, cols, value, limit }) { Examples ```jsx -ReactDOM.render( - , - document.getElementById('root') -); +ReactDOM.render(, document.getElementById('root')); ``` +
    [⬆ Back to top](#table-of-contents) @@ -332,13 +334,13 @@ function LimitedWordTextarea({ rows, cols, value, limit }) { const [wordCount, setWordCount] = React.useState(0); const setFormattedContent = text => { - let words = text.split(" "); + let words = text.split(' '); if (words.filter(Boolean).length > limit) { setContent( text - .split(" ") + .split(' ') .slice(0, limit) - .join(" ") + .join(' ') ); setWordCount(limit); } else { @@ -372,10 +374,11 @@ function LimitedWordTextarea({ rows, cols, value, limit }) { ```jsx ReactDOM.render( - , + , document.getElementById('root') ); ``` +
    [⬆ Back to top](#table-of-contents) @@ -401,28 +404,23 @@ const style = { } }; -function MultiselectCheckbox ({ options, onChange }) { +function MultiselectCheckbox({ options, onChange }) { const [data, setData] = React.useState(options); - const toggle = (item) => { + const toggle = item => { data.map((_, key) => { - if (data[key].label === item.label) - data[key].checked = !item.checked; + if (data[key].label === item.label) data[key].checked = !item.checked; }); setData([...data]); onChange(data); - } + }; return (
      {data.map(item => { return ( -
    • toggle(item)} - > - +
    • toggle(item)}> + {item.label}
      • ); @@ -436,7 +434,7 @@ function MultiselectCheckbox ({ options, onChange }) { Examples ```jsx -const options = [{ label: "Item One" }, { label: "Item Two" }]; +const options = [{ label: 'Item One' }, { label: 'Item Two' }]; ReactDOM.render( , - document.getElementById("root") + document.getElementById('root') ); ``` +
      [⬆ Back to top](#table-of-contents) @@ -465,11 +464,7 @@ function PasswordRevealer({ value }) { return (
      - {}} - /> + {}} />
      ); @@ -482,6 +477,7 @@ function PasswordRevealer({ value }) { ```jsx ReactDOM.render(, document.getElementById('root')); ``` +
      [⬆ Back to top](#table-of-contents) @@ -492,17 +488,21 @@ Renders a `` element. Render a `` element. +Use destructuring on the `values` array to pass an array of `value` and `text` elements and the `selected` attribute to define the initial `value` of the ` callback(value)} + onChange={({ target: { value } }) => callback(value)} > - {values.map(([value, text]) => )} + {values.map(([value, text]) => ( + + ))} ); } @@ -519,10 +519,11 @@ let choices = [ ['mango', 'Mango'] ]; ReactDOM.render( - console.log(val)} />, document.getElementById('root') ); ``` +
      [⬆ Back to top](#table-of-contents) @@ -535,7 +536,14 @@ Use object destructuring to set defaults for certain attributes of the `` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent. ```jsx -function TextArea ({ callback, cols = 20, rows = 2, disabled = false, readOnly = false, placeholder='' }) { +function TextArea({ + callback, + cols = 20, + rows = 2, + disabled = false, + readOnly = false, + placeholder = '' +}) { return (
    {val}
    {val}
    {val[p]}{val[p]}