API Overhaul: Generate Collection's Editor Fields from Component

As I was using storybook I realized that I really like the knobs API. All I need to do is import the knob type I want into my story, use it somewhere, and it shows up in my story (check it out [here](https://imgur.com/a/CfDg60x)). I think we might be able to learn from this.

We could do something similar where in our component, we were able to import a field type (or widget). We would then use it in our component and register it with the CMS. Then we would simply look at what has been used throughout the component.

Here is an example of how this could look…

```jsx
import React from 'react';
import { boolean, date, image, list, object, relation, select, string, text, markdown } from 'netlify-cms/fields';
import styled from "styled-components"
import { formatDate, formatMarkdown } from "../utils"

//...styled components

const Post = ({ title, datePosted, category, featuredImageSrc, body, sources }) => {
return (

{title}

{formatDate(datePosted)}
{category}
{formatMarkdown(body)}
{sources && (

{sources.map((source) => (


{source.label}


))}

)}

)
}

export default () => {
return (

)
}
```

This doesn’t need to only be for preview purposes. I’d imagine we could somehow pass each field function an id or slug and that is how we would supply it specific data to each entry.

I think this would make for a much simpler API. It combines configuring your fields, putting field data in your component, and registering a preview component all in a single step.