Storybook pour votre design system
Un conte de fées ?
Il était une fois...
Fleur Ettwiller
UX Designer
@fleurettwiller
Michèle Legait
Front-end developer
@mlegait
Design System, où en sommes-nous?
6 décembre 2018
Fleur
Michèle
Quels problèmes aujourd'hui?
Une hétérogénéité au sein de l'entreprise
Design system
+
guidelines globaux
Component library
+
Sandbox
Styleguide
guidelines
Produit
Communauté
Contributeurs
Champions
Utilisateurs
Sponsors
Process
Client
Concepteurs
(Sketch+
guidelines)
Développeurs
(Code)
DS comité
(Validation)
Application
Design System
Organisation
Equipe transverse
Equipe dédiée
on va plus vite
moins intégré à la vie des équipes
plus de risques de faire un produit fantôme
on couvre plus de besoins
plus de gens sensibilisés
besoin de plus de coordination
contributeurs à temps partiel
Maxime
Bénéfices
UX / Produit
Bénéfices
techniques
Est-ce que c'est pour moi?
Pourquoi pas
Tout à fait!
Certainement
1 appli / 1 techno
plusieurs applis / 1 techno
plusieurs applis / plusieurs technos
Quelques exemples...
Euuuh ...
Ma boite n’acceptera jamais de
développer un outil maison pour
toute la partie documentation 😞
Nouvel addon @storybook/addon-docs
Storybook makes it dead simple
to create design systems
“
”
04/2019
Un front-end moderne est un assemblage de composants
Un conte de fées ?
Les composants introduisent de nouveaux défis
nouvelles galères
Un (très) grand nombre de
composants
Un (encore plus) grand nombre de
uses cases, situations et états
Storybook provides a sandbox to build UI components in isolation so you can develop hard-to-reach states and edge cases.
“
”
A frontend tool for building components faster and easier
Catalogue des composants
Addons
“Sandbox”
Storybook vit à côté de votre application
Application
Utilise les composants
Bibliothèque de composants
Tous les composants UI
Aide à cataloguer et construire les composants
Storybook vit à côté de votre application
> cd components-library
> npx -p @storybook/cli sb init
[...]
> npm run storybook
info @storybook/react v5.2.0
info
info => Loading presets
info => Loading presets
info => Loading custom addons config.
info => Using default Webpack setup.
info => Using base config because react-scripts is not installed.
webpack built 1456fff9d87e56ae7bc3 in 27819ms
╭──────────────────────────╮
│ │
│ Storybook 5.2.0 started │
│ 33 s for manager and 30 s for preview │
│ │
│ Local: http://localhost:6006/ │
│ On your network: http://172.24.42.4:6006/ │
│ │
╰──────────────────────────╯
Storybook vit à côté de votre application
Configuration
Stories
import { configure } from '@storybook/react';
// automatically import all files ending in *.stories.js
configure(
require.context('../src', true, /\.stories\.js$/),
module
);
.storybook/config.js
Permet de visualiser les composants de manière isolée
import React from 'react';
import { Button } from './Button';
export default {
title: 'Button',
component: Button,
};
export const primary = () => (
<Button appearance="primary">Primary</Button>
);
export const secondary = () => (
<Button appearance="secondary">Secondary</Button>
);
export const tertiary = () => (
<Button appearance="tertiary">Tertiary</Button>
);
Story
Button.stories.js
Permet d’atteindre des cas d’usages rares
import React from 'react';
import { Button } from './Button';
import { Icon } from './Icon';
export default {
title: 'Button',
component: Button,
};
[...]
export const edgeCase = () => (
<Button appearance="outline"
size="small"
containsIcon
isDisabled>
<Icon icon="link" aria-label="Link" />
Read more
</Button>
);
De nombreux addons pour plus de fonctionnalités
Knobs
Actions
Viewport
Accessibility
+20 disponibles
1ère version stable : 14/09/2019
Docs
Nouvel addon @storybook/addon-docs
C’est parti !!!
React
> npm install @storybook/addon-docs --save-dev
module.exports = ['@storybook/addon-docs/react/preset'];
.storybook/presets.js
1.
2.
Installation du plugin addon-docs
Docs mode
"scripts": {
"storybook": "start-storybook -p 9009 -s public --docs",
"build-storybook": "build-storybook -s public --docs"
},
Nous ne voulons plus de l’onglet Canvas
package.json
Wishlist
#1
Pages éditoriales globales
DOC STATIQUE
import { configure } from '@storybook/react';
// automatically import all files ending in *.stories.js
configure(
require.context('../src', true, /\.stories\.(js|mdx)$/),
module
);
import { Meta } from '@storybook/addon-docs/blocks';
import textStyles1 from '../images/text-styles-1.png';
<Meta title="Get started/Design" />
[...]
## Text styles
Text styles are based on typography rules defined by the [IBM Design Language](https://www.ibm.com/design/lang...).
<img src={textStyles1} alt="Text styles navigation" />
[...]
From the main menu select `Insert → Text Styles → Carbon Design System`
[...]
- The first text style level displays [...]
- The second level shows the [...]
- The third level selects the type color [...]
[...]
Design.stories.mdx
.storybook/config.js
Markdown + JSX
Alors le markdown ok.
Mais il faut déjà que j'ai accès à l'environnement de développement!
Et que j'apprenne à m'en servir... 😅
Euuuh ...
Issue GitHub pour pour faire marcher addon-links et addon-docs ensemble :
https://github.com/storybookjs/storybook/issues/7799
Planifié pour la prochaine release 5.3 🤞
Récapitulons ...
MISE EN FORME
“AVANCÉE”
Content.stories.mdx
import { CardsGrid, ExampleCard, GRID_GAP_LARGE} from 'design-system-utils';
[...]
<CardsGrid gridGap={GRID_GAP_LARGE}>
<ExampleCard
isCorrect
text="Next, the admin configures access privileges."
caption="Do use active voice when appropriate."
/>
<ExampleCard
text="Next, access privileges are configured by the admin."
caption="Don’t use passive voice when active voice will suffice."
/>
</CardsGrid>
Vous pouvez enrichir la mise en forme avec vos propres composants :
La seule limite,
c’est vous 😉
Wishlist
#2
Intégration des ressources
Resources.stories.mdx
import { CardsGrid, ResourceCard, RESOURCE_TYPE_SKETCH } from 'design-system-utils';
[...]
<CardsGrid>
<ResourceCard
title="White theme"
type={RESOURCE_TYPE_SKETCH}
url="sketch://add-library/cloud/JaVzz"
/>
<ResourceCard
title="Gray 10 theme"
type={RESOURCE_TYPE_SKETCH}
url="sketch://add-library/cloud/Onwv2"
/>
[...]
</CardsGrid>
Il suffit de créer de nouveaux composants :
Wishlist
#3
Guidelines par composants
DOC COMPOSANT
Human touch
DOC AUTOMATIQUE
DOC MANUELLE
“Rien” à faire
Doc statique
+
nouveaux “blocs”
DOC AUTOMATIQUE (DocsPage)
Titre
Sous-titre
Description du composant
Story primaire
(démo + code)
DOC AUTOMATIQUE (DocsPage)
Props
(paramètres du composant)
DOC AUTOMATIQUE (DocsPage)
Autres stories
Libellé
Description
Démo + code
Stories suivantes
DatePicker.js
/**
* Date pickers allow users to select a single or a
* range of dates.
*/
export default class DatePicker extends Component {
[...]
DOC AUTOMATIQUE (DocsPage)
Description du composant
DatePicker.js
DatePicker.propTypes = {
/** `true` to use the short version. */
short: PropTypes.bool,
/** `true` to use the light version. */
light: PropTypes.bool,
/** The date format. */
dateFormat: PropTypes.string,
/** The language locale used to format the
* days of the week, months, and numbers. */
locale: PropTypes.oneOf(['ar', 'at', ...]),
[...]
};
DatePicker.defaultProps = {
short: false,
light: false,
dateFormat: 'm/d/Y',
locale: 'en',
};
DOC AUTOMATIQUE (DocsPage)
Props table
DatePicker.stories.js
export default {
title: 'Components/Date picker',
component: DatePicker,
parameters: {
componentSubtitle: 'Here is a nice subtitle',
},
};
export const primary = () => (
<DatePicker
{...props.datePicker()}
datePickerType="single"
dateFormat={'m/d/Y'}
>
<DatePickerInput {...props.datePickerInput()} />
</DatePicker>
);
DOC AUTOMATIQUE (DocsPage)
Titre
, story primaire
, sous-titre
DatePicker.stories.js
export const simple = () => (
<DatePicker {...props.datePicker()}>
<DatePickerInput
{...props.datePickerInput()} />
</DatePicker>
);
simple.story = {
parameters: {
docs: {
storyDescription: `
**The simple date picker** is a text input without a calendar. [...] The default regex pattern that ships with the simple date picker is \`\d{1,2}/\d{4}\` ('dd/yyyy' for short date [...]
`,
},
},
};
DOC AUTOMATIQUE (DocsPage)
Libellé
, description
, demo + code
DOC MANUELLE (MDX)
DatePicker.stories.mdx
import { Meta, Description, Props, Preview, Story }
from '@storybook/addon-docs/blocks';
import DatePicker from '../../components/DatePicker';
<Meta title="Components/Date picker (MDX)"
component={DatePicker} />
# DatePicker (MDX)
**Here is a nice subtitle**
<Description of="." />
<Preview withToolbar>
<Story id="components-date-picker--primary" />
</Preview>
<Props of="." />
## Stories
### Simple
The simple date picker\*\* is a text input without a calendar...
<Preview>
<Story name="Simple (MDX)">
<DatePicker
id="date-picker"
...
/>
</Story>
</Preview>
DOC AUTOMATIQUE
DOC MANUELLE
Récapitulons ...
Wishlist
#4
Design tokens
DESIGN TOKENS
Cette feature n’est pas encore disponible dans addon-docs 😭
MAIS ...
Récapitulons ...
Wishlist
#5
Navigation structurée
NAVIGATION
export default {
title: 'Components/Accordion',
component: Accordion,
};
import { configure } from '@storybook/react';
// All stories related to the components
const componentStories = require.context(
'../src/DesignSystem/Components/', true, /\.stories\.(js|mdx)$/);
// We want to force the files to load in a specific order.
const loaderFn = () => [
require('../src/DesignSystem/GetStarted/About.stories.mdx'),
require('../src/DesignSystem/GetStarted/Design.stories.mdx'),
// [...]
// Some magic to load component stories sorted alphabetically
...componentStories.keys().map(filename => componentStories(filename)),
require('../src/DesignSystem/Patterns/Overview.stories.mdx'),
// [...]
];
configure(loaderFn, module);
Accordion.stories.js
.storybook/config.js
Arborescence
ordonnée
Wishlist
#6
Progression des tickets
#7
Updates & changelog
RELEASING & VERSIONING
Release
Code source
Design System
"scripts": {
"build-storybook": "build-storybook -s public --docs"
},
package.json
Sketch
Styleguide
Update
Composants
Bibliothèque
à publier sur npm
Storybook
Site statique
à déployer
Wishlist
#8
Différentes technos
MULTI-TECHNOS
Une instance de storybook ne peut gérer qu’une seule techno à la fois.
Main Storybook
addon-docs
Toutes les guidelines
Storybook
classic stories
Storybook
classic stories
Storybook
classic stories
Storybook
classic stories
MAIS …
Il est tout à fait possible d’avoir une instance par techno !
C’est ce que fait
Carbon 😉
...
Demo time !!!
Il était une fois ...
Epilogue
Alors, faire un design system avec Storybook, est-ce uniquement dans les contes de fées?
NON
Storybook c'est top!
Démarrer avec un pilote
Les questions à se poser
Mais gardons en tête...
THANK YOU
Questions ?
RESSOURCES
Site officiel de Storybook : https://storybook.js.org/
Article “Docs sneak peek” : https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a
Carbon Design System : https://www.carbondesignsystem.com/
POC / démo : https://github.com/mlegait/design-system-storybook-react
Design token addon : https://github.com/UX-and-I/storybook-design-token
Design system: Pilots & scorecards - Dan Mall :
https://superfriendlydesign.systems/articles/design-systems-pilots-scorecards/
The Technical Side of Design Systems - Brad Frost : https://www.youtube.com/watch?v=TgWyyoofKIA
Salesforce : https://www.lightningdesignsystem.com/
IBM : https://www.carbondesignsystem.com/
Shopify : https://polaris.shopify.com/
GitHub : https://primer.style/
Morningstar: http://designsystem.morningstar.com/
Auth0 : https://auth0-cosmos.now.sh/
Material Design : https://material.io/
InVision : https://dsmexample.invisionapp.com/dsm/in-vision-dsm/example-library
Atomize : https://atomizecode.com/docs/react/
UK Government : https://design-system.service.gov.uk/
DESIGN SYSTEMS
CREDITS
Template des Slides : https://slidesmania.com/taylor-free-template-powerpoint-google-slides/
Illustrations : https://www.freepik.com/brgfx
Icônes : https://www.flaticon.com/
Polices utilisées : Montserrat and Dancing Script