feat(DS-219): add @pxtrn/storybook-addon-docs-stencil and automate storybook docs generation

Tldr tiketistä ja miten päädyttiin tähän: Alunperin oli tarkoitus tehdä react-käyttöönotolle parempaa dokumentaatiota. Juttelin kehittäjien kanssa jotka oli ottamassa DS:ää käyttöön, ja tuli ilmi että käyttöönoton haasteissa ei ollut mitään react-spesifiä asiaa, vaan lähinnä, että nykyisessä storybookissa dokumentaatio ei ollut riittävää.

Joten:

  • Lisätty ja konfiguroitu käyttöön @pixtrn/storybook-addon-docs-stencil paketti
  • Komponenteista generoituu stencil dekoraattoreiden ja jsdoc pohjalta dokumentaatiota näkyväksi storybookiin asti
  • Lisäilty hieman alustavasti jsdoc kommentteja propseille ja eventeille
  • Poistettu suurin osa käsin määriteltyjä argTypes:jä, koska nyt ne generoituu suoraan komponentin koodista propsin tyypin mukaan
    • On kuitenkin mahdollista määritellä argTypes halutessaan yksittäiselle propsille käsin storybookia varten. Olen näin esim nyt tehnyt icon-propseille, jossa usein propsin tyyppi on string, mutta storybookissa tämä näytetään selectinä jossa vaihtoehtoina ovat DS:n ikonit

Demo: https://storybook-qa.it.helsinki.fi/ds-219-improve-storybook-docs/?path=/docs/introduction--docs

Tiketti: https://jira.it.helsinki.fi/browse/DS-219

Edited by Joel Kuronen

Merge request reports

Loading