introduce a component graph usage

[Galimede]

There has been a few time when refactoring of our code where we wanted to know if a component had some other components as a child. Or for a component we wanted to know what where the components that made use of it. So we thought having a graph that would represent that would be cool.

To test that we could do a POC that would show a simple terminal/script graph with a rollup plugin.

We should be able to have two outputs:

• one that gives for a component all its children (e.g: cc-env-var-form contains cc-env-var-editor-simple, cc-env-var-editor-expert...)
• one that gives for a component its usage in another component. (e.g: cc-notice is used by cc-addon-backups, cc-article-list...)

Next we could:

• output the whole thing as a graphviz file
• handle recursive children components (parent component has a child component that contains a grand child component...)
  ...

[Galimede]

Command proposal and examples

Command: npm run components:usage [--depth X] --uses/--used-by [mycomponent] [--all]

Params:

• --depth: depth of the component tree, number greater or equals 1 (alias: -d)
• --uses: what are the components that use a component Y (e.g: cc-addon-credentials uses cc-notice, cc-addon-backups uses cc-notice too) (alias -d)
• --used-by: what are the components that are needed for a specific component: (e.g: cc-icon is used by cc-notice) (no alias or -ub)
• --all: switch the depth to Inifnity, needed if you run --uses or --used-by without specifying a component as they have a depth of 1 by default in this case. (alias -a)

Params validation:

• If --depth is provided but also --all => --all will win
• If --depth doesn't have a value or the value isn't a number => depth will be set to 1
• If --uses or --used-by are provided together, the first provided will win.
  => We can do this if we want the CLI to fail the less possible, otherwise we can fail and display an error.

Formats example:

Note: on ... --uses mycomponent, the component will be highlighted
Note: On the examples below the result is truncated

npm run components:usage --uses cc-notice

├─ cc-addon-credentials
│  ├─ cc-input-text
│  │   ├─ cc-icon
│  ├─ cc-block
│  │   ├─ cc-button
│  │   │   ├─ cc-icon
│  │   ├─ cc-expand
│  │   ├─ cc-icon
│  │   ├─ cc-img
│  ├─ cc-notice
│  │   ├─ cc-icon
├─ cc-addon-backups
│  ├─ cc-button
│  │   ├─ cc-icon
│  ├─ cc-input-text
│  │   ├─ cc-icon
│  ├─ cc-block-section
│  ├─ cc-block
│  │   ├─ cc-button
│  │   │   ├─ cc-icon
│  │   ├─ cc-expand
│  │   ├─ cc-icon
│  │   ├─ cc-img
│  ├─ cc-notice
│  │   ├─ cc-icon
│  ├─ cc-icon
├─ cc-addon-linked-apps
│  ├─ cc-img
│  ├─ cc-block
│  │   ├─ cc-button
│  │   │   ├─ cc-icon
│  │   ├─ cc-expand
│  │   ├─ cc-icon
│  │   ├─ cc-img
│  ├─ cc-notice
│  │   ├─ cc-icon
│  ├─ cc-zone
│  │   ├─ cc-img
...

npm run components:usage --depth 1 --uses cc-notice

├─ cc-addon-features
│  ├─ cc-block
│  ├─ cc-notice
│  ├─ cc-icon
├─ cc-addon-backups
│  ├─ cc-button
│  ├─ cc-input-text
│  ├─ cc-block-section
│  ├─ cc-block
│  ├─ cc-notice
│  ├─ cc-icon
├─ cc-addon-linked-apps
│  ├─ cc-img
│  ├─ cc-block
│  ├─ cc-notice
│  ├─ cc-zone
├─ cc-addon-credentials
│  ├─ cc-input-text
│  ├─ cc-block
│  ├─ cc-notice
├─ cc-article-list
│  ├─ cc-article-card
│  ├─ cc-notice
├─ cc-doc-list
│  ├─ cc-doc-card
│  ├─ cc-notice
...

npm run components:usage --used-by cc-env-var-form
├─ cc-env-var-form
│  ├─ cc-button
│  │   ├─ cc-icon
│  ├─ cc-expand
│  ├─ cc-loader
│  ├─ cc-toggle
│  ├─ cc-notice
│  │   ├─ cc-icon
│  ├─ cc-env-var-editor-expert
│  │   ├─ cc-input-text
│  │   │   ├─ cc-icon
│  │   ├─ cc-notice
│  │   │   ├─ cc-icon
│  ├─ cc-env-var-editor-json
│  │   ├─ cc-input-text
│  │   │   ├─ cc-icon
│  │   ├─ cc-notice
│  │   │   ├─ cc-icon
│  ├─ cc-env-var-editor-simple
│  │   ├─ cc-env-var-create
│  │   │   ├─ cc-button
│  │   │   │   ├─ cc-icon
│  │   │   ├─ cc-input-text
│  │   │   │   ├─ cc-icon
│  │   │   ├─ cc-notice
│  │   │   │   ├─ cc-icon
│  │   ├─ cc-env-var-input
│  │   │   ├─ cc-button
│  │   │   │   ├─ cc-icon
│  │   │   ├─ cc-input-text
│  │   │   │   ├─ cc-icon

npm run components:usage --depth 1 --used-by cc-env-var-form

├─ cc-env-var-form
│  ├─ cc-button
│  ├─ cc-expand
│  ├─ cc-loader
│  ├─ cc-toggle
│  ├─ cc-notice
│  ├─ cc-env-var-editor-expert
│  ├─ cc-env-var-editor-json
│  ├─ cc-env-var-editor-simple

npm run components:usage --uses

├─ cc-addon-admin
├─ cc-addon-backups
├─ cc-addon-credentials
├─ cc-addon-elasticsearch-options
├─ cc-addon-features
├─ cc-addon-jenkins-options
├─ cc-addon-linked-apps
├─ cc-addon-mongodb-options
├─ cc-addon-mysql-options
├─ cc-addon-option-form
│  ├─ cc-addon-jenkins-options
│  ├─ cc-addon-mongodb-options
│  ├─ cc-addon-elasticsearch-options
│  ├─ cc-addon-mysql-options
│  ├─ cc-addon-postgresql-options
│  ├─ cc-addon-redis-options
├─ cc-addon-option
│  ├─ cc-addon-option-form

npm run components:usage --uses --all
├─ cc-addon-admin
├─ cc-addon-backups
├─ cc-addon-credentials
├─ cc-addon-elasticsearch-options
├─ cc-addon-features
├─ cc-addon-jenkins-options
├─ cc-addon-linked-apps
├─ cc-addon-mongodb-options
├─ cc-addon-mysql-options
├─ cc-addon-option-form
│  ├─ cc-addon-elasticsearch-options
│  ├─ cc-addon-jenkins-options
│  ├─ cc-addon-mongodb-options
│  ├─ cc-addon-mysql-options
│  ├─ cc-addon-postgresql-options
│  ├─ cc-addon-redis-options
├─ cc-addon-option
│  ├─ cc-addon-option-form
│  │   ├─ cc-addon-elasticsearch-options
│  │   ├─ cc-addon-jenkins-options
│  │   ├─ cc-addon-mongodb-options
│  │   ├─ cc-addon-mysql-options
│  │   ├─ cc-addon-postgresql-options
│  │   ├─ cc-addon-redis-options
├─ cc-addon-postgresql-options
├─ cc-addon-redis-options
├─ cc-article-card
│  ├─ cc-article-list
├─ cc-article-list

npm run components:usage --depth 2 --uses
├─ cc-addon-admin
├─ cc-addon-backups
├─ cc-addon-credentials
├─ cc-addon-elasticsearch-options
├─ cc-addon-features
├─ cc-addon-jenkins-options
├─ cc-addon-linked-apps
├─ cc-addon-mongodb-options
├─ cc-addon-mysql-options
├─ cc-addon-option-form
│  ├─ cc-addon-elasticsearch-options
│  ├─ cc-addon-jenkins-options
│  ├─ cc-addon-mongodb-options
│  ├─ cc-addon-mysql-options
│  ├─ cc-addon-postgresql-options
│  ├─ cc-addon-redis-options
├─ cc-addon-option
│  ├─ cc-addon-option-form
│  │   ├─ cc-addon-elasticsearch-options
│  │   ├─ cc-addon-jenkins-options
│  │   ├─ cc-addon-mongodb-options
│  │   ├─ cc-addon-mysql-options
│  │   ├─ cc-addon-postgresql-options
│  │   ├─ cc-addon-redis-options
├─ cc-addon-postgresql-options
├─ cc-addon-redis-options
├─ cc-article-card
│  ├─ cc-article-list
├─ cc-article-list
├─ cc-badge
│  ├─ cc-email-list
│  ├─ cc-header-orga
│  ├─ cc-orga-member-card
│  │   ├─ cc-orga-member-list
│  ├─ cc-orga-member-list
│  ├─ cc-pricing-estimation
│  ├─ cc-ssh-key-list
│  ├─ cc-tcp-redirection-form
├─ cc-beta

npm run components:usage --used-by

├─ cc-addon-admin
│  ├─ cc-input-text
│  ├─ cc-loader
│  ├─ cc-block-section
│  ├─ cc-block
│  ├─ cc-error
├─ cc-addon-backups
│  ├─ cc-button
│  ├─ cc-input-text
│  ├─ cc-block-section
│  ├─ cc-block
│  ├─ cc-notice
│  ├─ cc-icon
├─ cc-addon-credentials
│  ├─ cc-input-text
│  ├─ cc-block
│  ├─ cc-notice
├─ cc-addon-elasticsearch-options
│  ├─ cc-addon-option-form
├─ cc-addon-features
│  ├─ cc-block
│  ├─ cc-notice
│  ├─ cc-icon
├─ cc-addon-jenkins-options
│  ├─ cc-addon-option-form
├─ cc-addon-linked-apps
│  ├─ cc-img
│  ├─ cc-block
│  ├─ cc-notice
│  ├─ cc-zone

npm run components:usage --used-by --all 

├─ cc-addon-admin
│  ├─ cc-input-text
│  │   ├─ cc-icon
│  ├─ cc-loader
│  ├─ cc-block-section
│  ├─ cc-block
│  │   ├─ cc-button
│  │   │   ├─ cc-icon
│  │   ├─ cc-expand
│  │   ├─ cc-icon
│  │   ├─ cc-img
│  ├─ cc-error
│  │   ├─ cc-button
│  │   │   ├─ cc-icon
│  │   ├─ cc-loader
│  │   ├─ cc-icon
├─ cc-addon-backups
│  ├─ cc-button
│  │   ├─ cc-icon
│  ├─ cc-input-text
│  │   ├─ cc-icon
│  ├─ cc-block-section
│  ├─ cc-block
│  │   ├─ cc-button
│  │   │   ├─ cc-icon
│  │   ├─ cc-expand
│  │   ├─ cc-icon
│  │   ├─ cc-img
│  ├─ cc-notice
│  │   ├─ cc-icon
│  ├─ cc-icon
├─ cc-addon-credentials
│  ├─ cc-input-text
│  │   ├─ cc-icon
│  ├─ cc-block
│  │   ├─ cc-button
│  │   │   ├─ cc-icon
│  │   ├─ cc-expand
│  │   ├─ cc-icon
│  │   ├─ cc-img
│  ├─ cc-notice
│  │   ├─ cc-icon

npm run components:usage --depth 2 --used-by
├─ cc-addon-admin
│  ├─ cc-input-text
│  │   ├─ cc-icon
│  ├─ cc-loader
│  ├─ cc-block-section
│  ├─ cc-block
│  │   ├─ cc-button
│  │   ├─ cc-expand
│  │   ├─ cc-icon
│  │   ├─ cc-img
│  ├─ cc-error
│  │   ├─ cc-button
│  │   ├─ cc-loader
│  │   ├─ cc-icon
├─ cc-addon-backups
│  ├─ cc-button
│  │   ├─ cc-icon
│  ├─ cc-input-text
│  │   ├─ cc-icon
│  ├─ cc-block-section
│  ├─ cc-block
│  │   ├─ cc-button
│  │   ├─ cc-expand
│  │   ├─ cc-icon
│  │   ├─ cc-img
│  ├─ cc-notice
│  │   ├─ cc-icon
│  ├─ cc-icon
├─ cc-addon-credentials
│  ├─ cc-input-text
│  │   ├─ cc-icon
│  ├─ cc-block
│  │   ├─ cc-button
│  │   ├─ cc-expand
│  │   ├─ cc-icon
│  │   ├─ cc-img
│  ├─ cc-notice
│  │   ├─ cc-icon
├─ cc-addon-elasticsearch-options
│  ├─ cc-addon-option-form
│  │   ├─ cc-addon-option
│  │   ├─ cc-button
│  │   ├─ cc-block