description

Stylebit CLI tool designed to analyze design system adoption in a 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

npm install -g @stylebit/cli

or

yarn global add @stylebit/cli

or

npx @stylebit/cli

NOTE: make sure you install the cli GLOBALLY

NOTE: Also, If your are not willing to run the the cli only in dry-run mode, you should login first with the stylebit login command before running the analytics.

usage

usage: stylebit [options] [command]

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 (coming soon)
  run [options]   Run design system analytics
  help [command]  display help for command

usage: stylebit run [options]

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 console.

usage: example

$ stylebit run --config ./stylebit.config.json --dry-run

NOTE: --config option is required

config file options

• 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 - 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.

Some sample configs

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

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

limitation

• nodejs above v16 is required, run on lower versions on your own risk
• This is alpha version and it is NOT RECOMMENDED to use it in production
• There is a chance you will encounter bugs, please report it to us at http://discord.gg/q6Z9Dq5Upx