SEARCH PAGE HEADER
TEMPLATE FIELD
BUTTON
TABS
TAG
MODAL
NAVIGATION
INVOICE LIST
PROJECT LIST
USER SKILL TAG
TEMPLATE FORM
USER WELCOME MODAL
LIST
INPUT
SEARCH BAR
PROFILE PAGE
CARD
MENU
AUTOCOMPLETE
GRID
CONTENT
USER FORM
NOTIFICATION
MENU ITEM
AVATAR
TAB
LINK
SUPPLIER TABS
RATING CARD TEXT
Slide 4
Slide 4 text
It’s impossible to fully
understand your component
ecosystem with existing tooling.
Slide 5
Slide 5 text
The solution? Maybe?
Slide 6
Slide 6 text
Living Styleguide
● cosmos
● react-styleguidist
● atellier
● react-storybook
Slide 7
Slide 7 text
{
component {
name
description
props {
name
type
Default
isRequired
}
}
}
Slide 8
Slide 8 text
So, what else?
Slide 9
Slide 9 text
{
component {
props {
usages {
value
locations {
component { name }
}
}
}
dependants {
name
}
usages { }
}
}
Slide 10
Slide 10 text
An Engine
Slide 11
Slide 11 text
An Engine
SEARCH PAGE HEADER
TEMPLATE FIELD
BUTTON
TABS
TAG
MODAL
NAVIGATION
INVOICE LIST
PROJECT LIST
USER SKILL TAG
TEMPLATE FORM
USER WELCOME MODAL
LIST
INPUT
SEARCH BAR
PROFILE PAGE
CARD
MENU
AUTOCOMPLETE
GRID
CONTENT
USER FORM
NOTIFICATION
MENU ITEM
AVATAR
TAB
LINK
SUPPLIER TABS
RATING CARD TEXT
Slide 12
Slide 12 text
An Engine
Manifest {
MENU ITEM {
Usages []
Dependencies []
Props {}
Fixtures []
...
}
BUTTON {}
...
}
SEARCH PAGE HEADER
TEMPLATE FIELD
BUTTON
TABS
TAG
MODAL
NAVIGATION
INVOICE LIST
PROJECT LIST
USER SKILL TAG
TEMPLATE FORM
USER WELCOME MODAL
LIST
INPUT
SEARCH BAR
PROFILE PAGE
CARD
MENU
AUTOCOMPLETE
GRID
CONTENT
USER FORM
NOTIFICATION
MENU ITEM
AVATAR
TAB
LINK
SUPPLIER TABS
RATING CARD TEXT
Slide 13
Slide 13 text
An Engine
Manifest {
MENU ITEM {
Usages []
Dependencies []
Props {}
Fixtures []
...
}
BUTTON {}
...
}
SEARCH PAGE HEADER
TEMPLATE FIELD
BUTTON
TABS
TAG
MODAL
NAVIGATION
INVOICE LIST
PROJECT LIST
USER SKILL TAG
TEMPLATE FORM
USER WELCOME MODAL
LIST
INPUT
SEARCH BAR
PROFILE PAGE
CARD
MENU
AUTOCOMPLETE
GRID
CONTENT
USER FORM
NOTIFICATION
MENU ITEM
AVATAR
TAB
LINK
SUPPLIER TABS
RATING CARD TEXT
Developer
Tools
IDE’s/ Living
Styleguide/ Analytics
Slide 14
Slide 14 text
An Engine
Manifest {
MENU ITEM {
Usages []
Dependencies []
Props {}
Fixtures []
...
}
BUTTON {}
...
}
Plugin
Pipeline
SEARCH PAGE HEADER
TEMPLATE FIELD
BUTTON
TABS
TAG
MODAL
NAVIGATION
INVOICE LIST
PROJECT LIST
USER SKILL TAG
TEMPLATE FORM
USER WELCOME MODAL
LIST
INPUT
SEARCH BAR
PROFILE PAGE
CARD
MENU
AUTOCOMPLETE
GRID
CONTENT
USER FORM
NOTIFICATION
MENU ITEM
AVATAR
TAB
LINK
SUPPLIER TABS
RATING CARD TEXT
Developer
Tools
IDE’s/ Living
Styleguide/ Analytics
Slide 15
Slide 15 text
View, Button, Link are your 3 most referenced components. View all here.
James updated ComponentX which has 5 dependants. View them here.
ComponentY has prop myPropY which is never used. Is it redundant?
Slide 16
Slide 16 text
Recon-JS
Intelligence for React Applications
github.com/recon-js/recon