Quickstart

Stylebit CLI tool is designed to analyze design system adoption in codebase. It will crawl the codebase and will try to find all the places where the design system is used and calculate adoption rate.

Supports React/Typescript for components as well as scss/css for design tokens.
Support React Native.
Supports WebComponents (alpha).

installation

Get access token

stylebit login

Run locally

NOTE: --config option is required

Manual

A CLI tool to analyze design system adoption in a codebase

Options:
  -V, --version   output the version number
  -v, --verbose   Enable verbose mode
  -h, --help      display help for command

Commands:
  login           Login to Stylebit
  run [options]   Run design system analytics
  help [command]  display help for command

Run design system analytics

Options:
-c, --config <filePath>   Path to the configuration file stylebit.config.json. If not provided, the tool will look for it in the current directory
--dry-run                 Run the analysis without sending the results to Stylebit
--o, --output <filePath>  Path to the output file. Only available for --dry-run mode, if not provided, the tool will write the results to the
                          stylebit.report.json file in the current directory
-h, --help                display help for command

crawlFrom: string - path to the directory to start crawling from (required). The directory there the UI components are located, FE code is located, etc.
componentRoot: string - path to the directory where the you UI library components are located (use either this or packageName)
packageName: string - name of the package where the you UI library components are located (use either this or componentRoot)
outputFile: string - path to the output file. Only available for —dry-run mode, if not provided, the tool will log to the console
projectId: string - You can get projectId by creating a project in http://app.stylebit.io. For --dry-run mode projectId in NOT required.
tag: string - You can optionally tag your scan or series of scans.
ignore Array[string] - You can optionally specify glob pattern to ignore paths for files from being scanned. If the field is not specified the it results to the following default:

[
    "node_modules",
    "dist",
    "build",
    "tests",
    "test",
    "**/.*",
    "**/*.{test,spec}.{jsx,tsx,js,ts}",
    "**/*.stories.{jsx,tsx,js,ts}",
    "**/*.d.ts"
]

scss: boolean - specifying the field true will track design tokens in scss and css files.
css: boolean - specifying the field true will track design tokens in css files.

sample 1
{
  "crawlFrom": "./packages/stylebit/src",
  "componentRoot": "./packages/stylebit/src/components",
  "outputFile": "./stylebit.report.json",
  "projectId": "abcdefgh-0123-4567-89ij-klmnopqrstuv",
  "scss": true
}

sample 2
{
  "crawlFrom": "./packages/stylebit/src",
  "packageName": "@components",
  "projectId": "abcdefgh-0123-4567-89ij-klmnopqrstuv",
  "tag": "ci/cd",
  "ignore": ["node_modules", "**/.*", "**/*.test.ts", "**/*.d.ts"]
}

Troubleshooting

It’s recommended to install stylebit cli globally. Make sure you have it installed globally before moving forward.

If you select technology but nothing happens make sure you provide correct config.json path. To see exact message run in --verbose mode
If you see an error
ENOENT: no such file or directory, open ‘$Home/.stylebit/credentials’
make sure you are logged in. stylebit login will navigate you to the browser. Log in there and you will get your credentials for the cli. If you were logged in, probably your token has expired. Try to login again.

How to ignore files

Check out how to use glob pattern

Limitations

Checkout out technical requirements

Get Started

Technical

installation

Get access token

Run locally

Manual

Troubleshooting

How to ignore files

Limitations

Get Started

Technical

​installation

​Get access token

​Run locally

​Manual

​Troubleshooting

How to ignore files

Limitations

installation

Get access token

Run locally

Manual

Troubleshooting