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 asscss/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
modeprojectId
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 inscss
andcss
files. -
css: boolean - specifying the field
true
will track design tokens incss
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
abovev16
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