Semantic-ui-react: refactor(docs): rename file name to be the same as class name, etc

[dpkwhan]

Proposed changes:

1. Rename file name to be consistent with class name
2. Use stateless component whenever possible
3. Rename class. For example, rename ButtonButtonExample to ButtonExampleButton and ButtonBasicExample to ButtonExampleBasic
4. Use index.js whenever it is possible

---

Elements

• [x] #756 Button
• [x] #713 Container
• [x] #715 Divider
• [x] #722 Flag
• [x] #725 Header
• [x] #685 Icon
• [x] #726 Image
• [x] #679 Input
• [x] #576 Label
• [x] #551 List
• [x] #654 Loader
• [x] #658 Rail
• [x] #751 Segment

• [x] #668 Step

  Collections

• [x] #671 Breadcrumb

• [x] #767 Form
• [x] #656 Grid
• [x] #835 Menu
• [x] #789 Message

• [x] #771 Table

  Views

• [x] #667 Card

• [x] #575 Feed
• [x] #881 Item

• [x] #866 Statistic

  Modules

• [x] #838 Accordion

• [x] #839 Checkbox
• [x] #682 Dropdown
• [x] #800 Modal
• [x] #664 Progress
• [x] #640 Rating

• [x] #840 Search

  Addons

• [x] #630 Confirm

• [x] #662 Radio

[levithomason]

Yes! Thank you very much. This has been on my bucket list. Note the List PR, #311 #551 handles number 4 for the List examples. So we should wait for that PR to be merged before updating the List examples.

Lastly, the other goal is to allow the code snippets to be live edited and have the example update. This may affect how we name things as well. I'll start a trial of that right now and see what I find. Either way, having consistent class/filenames will make any refactors far more sane. So we can move forward on this immediately.

[dpkwhan]

@levithomason I will start to work on this in the next few days.

[levithomason]

Update, I'm able to handle the live example code editing with any export name. So no issues or limitations there.

[layershifter]

I'm renamed doc files to this naming pattern in #551, LGTM :+1:

I think we need create dedicated section for shorthand examples in docs:

• Types
• Content
• Shorhands

[levithomason]

I think we need create dedicated section for shorthand examples in docs:

I agree this should be standardized. I'm not sure what order/pattern is most optimal.

Mix Shorthand In

Some examples show shorthand immediately after the regular version:

Separate Shorthand

Some example have a section for Shorthand:

---

I think I lean toward mixing them together, showing shorthand use immediately after showing the regular use. Shorthand props are the power and most likely use of all components IMO. I'm worried that if we separate them in their own section, it will have more chance of getting looked over or seeming like an after thought. I want the examples to be pervasive. Open to other ideas as well.

[layershifter]

I think we need make global documention cleanup that will standardize filenames and shorthand usage. Also, it must cover missing examples from SUI docs.

In latest PRs I started on it.

[levithomason]

Great, I've started the Feed updates #575 and updated the task list.

---

Here's the final spec on what I think we should do:

1. Do not destructure sub components const { Label } = Feed. Let's just show the sub component usage. Keeping Feed.Label prevents name conflicts and helps drive home the idea of sub components.
2. Show shorthand use immediately after each sub component example.
   
   
   
   • Add Props Shorthand to shorthand filenames:
     
     FeedExampleEvent.js FeedExampleEventShorthand.js
   
   
   • Add a description to all shorthand ComponentExample's
   
   

 ``` jsx
 // FeedExampleImageLabel.js
 description='An event can contain an image label'
 // FeedExampleImageLabelShorthand.js
 description='You can also configure an image label via props'
 ```

1. Split example to keep the files as short as possible. It is hard to view code for long examples. Let's try to keep them ~30 LOC or less.
2. When possible, return an expression instead of adding a function body/return statement

jsx const FeedExampleEvent = () => ( // ... )

Instead of:

jsx const FeedExampleEvent = () => { return ( // ... ) }

[dpkwhan]

First PR #587

[layershifter]

I've updated TODO-list, we're almost there :smile_cat: Thanks, @dpkwhan

[levithomason]

Awesome, thanks @layershifter! That is a big help.

[levithomason]

Item and Statistic were merged, looks like we're all done here 🎉 Massive thanks to @dpkwhan for sticking with this all the way through!