Update all snippets to new format

snippets/Accordion.md

@@ -1,4 +1,7 @@
-### Accordion
+---
+title:  Accordion
+tags: visual,children,state,advanced
+---
 
 Renders an accordion menu with multiple collapsible content components.
 
@@ -77,7 +80,3 @@ ReactDOM.render(
   document.getElementById('root')
 );
 ```
-
-<!-- tags: visual,children,state -->
-
-<!-- expertise: 2 -->

snippets/AutoLink.md

@@ -1,4 +1,7 @@
-### AutoLink
+---
+title:  AutoLink
+tags: string,fragment,regexp,advanced
+---
 
 Renders a string as plaintext, with URLs converted to appropriate `<a>` elements.
 
@@ -30,7 +33,3 @@ ReactDOM.render(
   document.getElementById('root')
 );
 ```
-
-<!-- tags: string,fragment,regexp -->
-
-<!-- expertise: 2 -->

snippets/Carousel.md

@@ -1,4 +1,7 @@
-### Carousel
+---
+title:  Carousel
+tags: visual,children,state,effect,intermediate
+---
 
 Renders a carousel component.
 
@@ -60,7 +63,3 @@ ReactDOM.render(
   document.getElementById('root')
 );
 ```
-
-<!-- tags: visual,children,state,effect -->
-
-<!-- expertise: 2 -->

snippets/ClickOutAndInside.md

@@ -1,4 +1,7 @@
-### ClickInside and ClickOutside
+---
+title:  ClickInside and ClickOutside
+tags: hooks,effect,event,intermediate
+---
 
 Two handy hooks to handle the click outside and inside event on the wrapped component.
 

snippets/Collapse.md

@@ -1,4 +1,7 @@
-### Collapse
+---
+title:  Collapse
+tags: visual,children,state,intermediate
+---
 
 Renders a component with collapsible content.
 
@@ -51,7 +54,3 @@ ReactDOM.render(
   document.getElementById('root')
 );
 ```
-
-<!-- tags: visual,children,state -->
-
-<!-- expertise: 2 -->

snippets/CountDown.md

@@ -1,4 +1,7 @@
-### CountDown
+---
+title:  CountDown
+tags: visual,state,advanced
+---
 
 Renders a countdown timer that prints a message when it reaches zero.
 
@@ -75,7 +78,3 @@ function CountDown({ hours = 0, minutes = 0, seconds = 0 }) {
 ```jsx
 ReactDOM.render(<CountDown hours="1" minutes="45" />, document.getElementById('root'));
 ```
-
-<!-- tags: visual,state -->
-
-<!-- expertise: 2 -->

snippets/DataList.md

@@ -1,4 +1,7 @@
-### DataList
+---
+title:  DataList
+tags:  array,beginner
+---
 
 Renders a list of elements from an array of primitives.
 
@@ -18,7 +21,3 @@ const names = ['John', 'Paul', 'Mary'];
 ReactDOM.render(<DataList data={names} />, document.getElementById('root'));
 ReactDOM.render(<DataList data={names} isOrdered />, document.getElementById('root'));
 ```
-
-<!-- tags: array -->
-
-<!-- expertise: 0 -->

snippets/DataTable.md

@@ -1,4 +1,7 @@
-### DataTable
+---
+title:  DataTable
+tags: array,beginner
+---
 
 Renders a table with rows dynamically created from an array of primitives.
 
@@ -32,7 +35,3 @@ function DataTable({ data }) {
 const people = ['John', 'Jesse'];
 ReactDOM.render(<DataTable data={people} />, document.getElementById('root'));
 ```
-
-<!-- tags: array -->
-
-<!-- expertise: 0 -->

snippets/FileDrop.md

@@ -1,4 +1,7 @@
-### FileDrop
+---
+title:  FileDrop
+tags: visual,input,state,effect,event,intermediate
+---
 
 Renders a file drag and drop component for a single file.
 
@@ -96,7 +99,3 @@ function FileDrop(props) {
 ```jsx
 ReactDOM.render(<FileDrop handleDrop={console.log} />, document.getElementById('root'));
 ```
-
-<!-- tags: visual,input,state,effect -->
-
-<!-- expertise: 2 -->

snippets/LimitedTextarea.md

@@ -1,4 +1,7 @@
-### LimitedTextarea
+---
+title:  LimitedTextarea
+tags: input,state,effect,event,beginner
+---
 
 Renders a textarea component with a character limit.
 
@@ -38,7 +41,3 @@ function LimitedTextarea({ rows, cols, value, limit }) {
 ```jsx
 ReactDOM.render(<LimitedTextarea limit={32} value="Hello!" />, document.getElementById('root'));
 ```
-
-<!-- tags: input,state,effect -->
-
-<!-- expertise: 0 -->

snippets/LimitedWordTextarea.md

@@ -1,4 +1,7 @@
-### LimitedWordTextarea
+---
+title:  LimitedWordTextarea
+tags: input,state,effect,event,beginner
+---
 
 Renders a textarea component with a word limit.
 
@@ -55,7 +58,3 @@ ReactDOM.render(
   document.getElementById('root')
 );
 ```
-
-<!-- tags: input,state,effect -->
-
-<!-- expertise: 0 -->

snippets/Mailto.md

@@ -1,4 +1,7 @@
-### Mailto
+---
+title:  Mailto
+tags: viual,beginner
+---
 
 Renders a link formatted to send an email.
 
@@ -21,7 +24,3 @@ ReactDOM.render(
   document.getElementById('root')
 );
 ```
-
-<!-- tags: visual -->
-
-<!-- expertise: 0 -->

snippets/MappedTable.md

@@ -1,4 +1,7 @@
-### MappedTable
+---
+title:  MappedTable
+tags: array,object,intermediate
+---
 
 Renders a table with rows dynamically created from an array of objects and a list of property names.
 
@@ -7,6 +10,8 @@ Renders a table with rows dynamically created from an array of objects and a lis
 * Use `Array.prototype.map` to render each value in the `propertyNames` array as a `<th>` element.
 * Use `Array.prototype.map` to render each object in the `filteredData` array as a `<tr>` element, containing a `<td>` for each key in the object.
 
+*This component does not work with nested objects and will break if there are nested objects inside any of the properties specified in `propertyNames`*
+
 ```jsx
 function MappedTable({ data, propertyNames }) {
   let filteredData = data.map(v =>
@@ -48,11 +53,3 @@ ReactDOM.render(
   document.getElementById('root')
 );
 ```
-
-#### 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`.
-
-<!-- tags: array,object -->
-
-<!-- expertise: 1 -->

snippets/Modal.md

@@ -1,4 +1,7 @@
-### Modal
+---
+title:  Modal
+tags: visual,effect,intermediate
+---
 
 Renders a Modal component, controllable through events.
 To use the component, import `Modal` only once and then display it by passing a boolean value to the `isVisible` attribute.
@@ -131,7 +134,3 @@ function App() {
 
 ReactDOM.render( <App/>, document.getElementById('root'));
 ```
-
-<!-- tags: visual,effect -->
-
-<!-- expertise: 2 -->

snippets/MultiselectCheckbox.md

@@ -1,4 +1,7 @@
-### MultiselectCheckbox
+---
+title:  MultiselectCheckbox
+tags: input,state,array,intermediate
+---
 
 Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component.
 
@@ -58,7 +61,3 @@ ReactDOM.render(
   document.getElementById('root')
 );
 ```
-
-<!-- tags: input,state,array -->
-
-<!-- expertise: 1 -->

snippets/PasswordRevealer.md

@@ -1,4 +1,7 @@
-### PasswordRevealer
+---
+title:  PasswordRevealer
+tags: input,state,beginner
+---
 
 Renders a password input field with a reveal button.
 
@@ -21,7 +24,3 @@ function PasswordRevealer({ value }) {
 ```jsx
 ReactDOM.render(<PasswordRevealer />, document.getElementById('root'));
 ```
-
-<!--tags: input,state -->
-
-<!--expertise: 0 -->

snippets/Select.md

@@ -1,4 +1,7 @@
-### Select
+---
+title:  Select
+tags: input,beginner
+---
 
 Renders a `<select>` element that uses a callback function to pass its value to the parent component.
 
@@ -36,7 +39,3 @@ ReactDOM.render(
   document.getElementById('root')
 );
 ```
-
-<!-- tags: input -->
-
-<!-- expertise: 0 -->

snippets/Slider.md

@@ -1,4 +1,7 @@
-### Slider
+---
+title:  Slider
+tags: input,beginner
+---
 
 Renders a slider element that uses a callback function to pass its value to the parent component.
 
@@ -21,7 +24,3 @@ function Slider({ callback, disabled = false, readOnly = false }) {
 ```jsx
 ReactDOM.render(<Slider callback={val => console.log(val)} />, document.getElementById('root'));
 ```
-
-<!-- tags: input -->
-
-<!-- expertise: 0 -->

snippets/StarRating.md

@@ -1,4 +1,7 @@
-### StarRating
+---
+title:  StarRating
+tags: visual,children,input,state,intermediate
+---
 
 Renders a star rating component.
 
@@ -48,7 +51,3 @@ function StarRating(props) {
 ReactDOM.render(<StarRating />, document.getElementById('root'));
 ReactDOM.render(<StarRating rating={2} />, document.getElementById('root'));
 ```
-
-<!-- tags: visual,children,input,state -->
-
-<!-- expertise: 2 -->

snippets/Tabs.md

@@ -1,4 +1,7 @@
-### Tabs
+---
+title:  Tabs
+tags: visual,state,children,intermediate
+---
 
 Renders a tabbed menu and view component.
 
@@ -74,7 +77,3 @@ ReactDOM.render(
   document.getElementById('root')
 );
 ```
-
-<!-- tags: visual,state,children -->
-
-<!-- expertise: 1 -->

snippets/TextArea.md

@@ -1,4 +1,7 @@
-### TextArea
+---
+title:  TextArea
+tags: input,beginner
+---
 
 Renders a `<textarea>` element that uses a callback function to pass its value to the parent component.
 
@@ -33,7 +36,3 @@ ReactDOM.render(
   document.getElementById('root')
 );
 ```
-
-<!-- tags: input -->
-
-<!-- expertise: 0 -->

snippets/Ticker.md

@@ -1,4 +1,7 @@
-### Ticker
+---
+title:  Ticker
+tags: visual,state,beginner
+---
 
 Renders a ticker component.
 
@@ -37,7 +40,3 @@ function Ticker(props) {
 ```jsx
 ReactDOM.render(<Ticker times={5} interval={1000} />, document.getElementById('root'));
 ```
-
-<!-- tags: visual,state -->
-
-<!-- expertise: 1 -->

snippets/Toggle.md

@@ -1,4 +1,7 @@
-### Toggle
+---
+title:  Toggle
+tags: visual,state,beginner
+---
 
 Renders a toggle component.
 
@@ -29,7 +32,3 @@ function Toggle(props) {
 ```jsx
 ReactDOM.render(<Toggle />, document.getElementById('root'));
 ```
-
-<!-- tags: visual,state  -->
-
-<!-- expertise: 0 -->

snippets/Tooltip.md

@@ -1,4 +1,7 @@
-### Tooltip
+---
+title:  Tooltip
+tags: visual,state,children,beginner
+---
 
 Renders a tooltip component.
 
@@ -51,7 +54,3 @@ ReactDOM.render(
   document.getElementById('root')
 );
 ```
-
-<!-- tags: visual,state,children -->
-
-<!-- expertise: 1 -->

snippets/TreeView.md

@@ -1,4 +1,7 @@
-### TreeView
+---
+title:  TreeView
+tags: object,visual,state,recursion,advanced
+---
 
 Renders a tree view of a JSON object or array with collapsible content.
 
@@ -121,7 +124,3 @@ let data = {
 };
 ReactDOM.render(<TreeView data={data} name="data" />, document.getElementById('root'));
 ```
-
-<!-- tags: object,visual,state,recursion -->
-
-<!-- expertise: 2 -->

snippets/UncontrolledInput.md

@@ -1,4 +1,7 @@
-### Input
+---
+title:  UncontrolledInput
+tags: input,beginner
+---
 
 Renders an `<input>` element that uses a callback function to pass its value to the parent component.
 
@@ -6,7 +9,7 @@ Renders an `<input>` element that uses a callback function to pass its value to
 * Render an `<input>` 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 UncontrolledInput({ callback, type = 'text', disabled = false, readOnly = false, placeholder = '' }) {
   return (
     <input
       type={type}
@@ -21,11 +24,7 @@ function Input({ callback, type = 'text', disabled = false, readOnly = false, pl
 
 ```jsx
 ReactDOM.render(
-  <Input type="text" placeholder="Insert some text here..." callback={val => console.log(val)} />,
+  <UncontrolledInput type="text" placeholder="Insert some text here..." callback={val => console.log(val)} />,
   document.getElementById('root')
 );
 ```
-
-<!-- tags: input -->
-
-<!-- expertise: 0 -->