refactor: Rename components and group them on Storybook

[WesSouza]

Following up on #285, I'd like to propose the following changes:

• Rename various components to align with Win32 and react95-native
• Categorize components into controls, environment, layout, typography and other
• Add documentation pages from /docs to Storybook
• Customize Storybook

The following components were renamed:

• Bar to Handle
• Cutout to ScrollView
• Desktop to Monitor
• Divider to Separator
• Fieldset to GroupBox
• List to MenuList
• ListItem to MenuListItem
• LoadingIndicator was deleted
• Panel to Frame
• Progress to ProgressBar
• TextField to TextInput
• Tree to TreeView

The following components were moved (not altering any exports):

• Tab, TabBody alongside Tabs
• TableBody, TableDataCell, TableHead, TableHeadCell, TableRow alongside Table
• WindowContent, WindowHeader alongside Window

Additionally, this was changed:

• createBorderStyles was refactored with all possible border styles, aligned with Windows 95 terminology
• SwitchBase: moved to common folder
• Exposed all component names under Component.displayName to improve React debugging
• Removed all .mdx files, given they were almost identical to the already existing stories

All changes are backward compatible by exporting the previous names with files on src/legacy, and marked as @deprecated, with the exception of LoadingIndicator.

Closes #285.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
react95	✅ Ready (Inspect)	Visit Preview	Aug 5, 2022 at 2:20PM (UTC)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e151203:

Sandbox	Source
React95 template	Configuration

[arturbien]

Sheesh, that's a big PR. I think we should first rename the components and then later on rework their APIs if needed.

But first let's take care of component names.
I went through the win95 design guidelines and have some thoughts:

• 🔴 Anchor to Link - I'd stay with Anchor. React apps are almost always used with react router and it's better to avoid name clash with react routers <Link /> component
• 🔴 Bar to MenuBarHandle: I'd name itHandle, more versatile as it can be used for more things than just Menu
• 🔴 ColorInput to ColorPicker - I'd stay with ColorInput. ColorPicker would be more appropriate to somehting like this:

• 🟢 Cutout to ScrollView
• 🟢 Desktop to Monitor
• 🔴 List to MenuList, ListItem to MenuItem- I'd go with MenuList and MenuList.Item
• 🔴 NumberField to SpinBox - I'd name it NumberInput. I know it's called SpinBox in the guideline but most devs and designers are not familiar with that name.
• 🗑 LoadingIndicator to a variant of ProgressBar - let's actually remove the LoadingIndicator from the library
• 🟢 Progress to ProgressBar
• 🔴 Select to ComboBox - the ComboBox is actually totally different component - It's a mix of a textinput and a select component. The design guidelines refer to our Select component as a "Dropdown list" (see page 131 and 137). I think I'd stay with Select here as it's the most common name for such component
• 🟡 TabBody to TabContent - not sure about that rename. any particular reason for name change here?
• 🔴 TextField to TextBox - I know it's called TextBox in the guideline, but I'd rather make it consistent with other inputs we have and call it TextInput (would look nice along ColorInput and NumberInput
• 🗑 Toolbar to MenuBar - I think the toolbar right now is terrible, I think we should rethink it and improve it or remove it from the library
• 🟢 Tree to TreeView
• 🔴 WindowHeader to WindowTitle - Right now Window has terrible API, we should rethink it. As for naming I think we should name its subcomponents WindowFrame, TitleBar, TitleText.. (see page 86 onwards)

Additional renames we need that I've found in the guideline:

• Fieldset to GroupBox (page 35, 140)
• Panel to Frame (page 85)
• Divider to Separator (page 116)

[WesSouza]

@arturbien thanks for the thorough review. Following your notes, I moved Storybook and property changes to individual PRs, and adjusted all component names.

Additionally:

• This PR still groups the components on Storybook (the groups sorting ended up on the other PR so don't pay too much attention to that).
• TabContents was aligned to WindowContents, as it's the closest I could think of. TabFrame would be best if we consider WindowFrame.
• Toolbar: what do you have in mind to enhance this component?
• Window: I reverted to WindowHeader, but I'm not sure if your intent is to rename WindowContent to WindowFrame and WindowHeader to WindowTitle, or to have a new WindowTitle inside WindowHeader, alongside WindowControls? What do you have in mind to enhance this component?

[github-actions]

🎉 This PR is included in version 4.0.0-beta.12 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This PR is included in version 4.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀