[Documentation] Review our documentation package

[diogofscmariano]

Description
With the spike #1259, we unveiled that we should move our storybook to a more recent version, and also leverage some capabilities which will enable the removal of customizations on our side. A couple of key things we will be able to tackle this work:

• potentially one single storybook which can be used for doc, dev and robot tests
• usage of docs plugin to have a better documentation
• move stories closer to its components and not have several folders that need to be changed when developing a component
• ...

These are the todo items in this work:

• Install and configure the updated version of Storybook (tackled in the scope of the spike)
  • Decide location (inside or outside packages folder)
  • Either create new package or clean existing, update lerna.json's "packages" property if needed
  • Install Storybook (npx -p @storybook/cli sb init)
  • Install Storybook Docs add-on (npm install @storybook/addon-docs --save-dev)
  • Install ui-kit as dependencies
  • Configure webpack in .storybook/main.js
    • Copy defaultPropsHandler.js and defaultValuePropsHandler
    • Patch addon-docs/dist/frameworks/react/propTypes/sortProps.js using webpack's NormalModuleReplacementPlugin
  • Add ui-kit Provider as a decorator at .storybook/preview.js
• Create DocsPage template and setup it globally at .storybook/preview.js
  • Modify Props block and customize extractProps logic
  • Configure Docs add-on theme, via Storybook's theme
  • Allow toggling Dawn / Wicked ui-kit theme
• Convert stories to Component Story Format and move it next to components' code
• Convert and review static pages
• Configure build pipeline to use the new storybook and publish only Docs pages

Acceptance Criteria

• Have the new documentation package tackling the described items

[eliofreitas]

• Don't add multiple pages per component
• Always use named imports (try to get rid of dist?)
• Keep the Hv prefix
• Shorter example titles
• Non-mandatory example descriptions, only if necessary
• Think about creating categories of components instead of folders
• Keep stories in a separare stories folder, together with eventual assets - name the file like the component, same case
• Sub-components descriptions go into the main component description (in the source file)

---

• Templates (Diogo)

Getting Started:

• Colors (Tiago)
• Icons (Bruno)
• Typography (Francisco)
• Supported Components (Julio)

Foundation/Components

• Provider (Francisco)

Components:

• AssetInventory (Bruno)
  •  Fix sample - Elio
• Badge (Julio)
• Button (Julio)
• Grid (Julio)
• Actions
• Banner (Bruno)
• Barchart (Bruno)
• BreadCrumb (Bruno)
• Card (Julio)
• Chart (Bruno)
• DatePicker (Bruno)
• DropDownMenu (Bruno)
• Dropdown (Bruno)
• EmptyState (Bruno)
• FileUploader (Bruno)
• Header (Bruno)
• Input - Elio
• KPI - Elio
• Linechart (Bruno)
• Link
• List (Bruno)
• Login (Bruno)
• Modal (Bruno)
• MultiButton (Bruno)
• OldVerticalNavigation
• Pagination (Bruno)
• SearchBox - Elio
• Selectors
  • Checkbox - Elio
  • Radio - Elio
• Snackbar (Bruno)
• Switch - Elio
• Tab (Bruno)
• Table - Elio
• Tabs (Bruno)
• TextArea - Elio
• ToggleButton - Elio
• Tooltip Tiago
• VerticalNavigation (Bruno)

Discover More

• Roadmap - Elio

Extras

• Delete Examples and Generator (Francisco)
• Check artifact publish