♻ Refactor @percy/cli-upload to utilize new @percy/cli-command (#681)

percy · Dec 16, 2021 · 647dcbb · 647dcbb
1 parent 6a9aad8
commit 647dcbb
Show file tree

Hide file tree

Showing 7 changed files with 191 additions and 223 deletions.
diff --git a/packages/cli-upload/README.md b/packages/cli-upload/README.md
@@ -4,30 +4,36 @@ Percy CLI command to uploade a directory of static images to Percy for diffing.
 
 ## Commands
 <!-- commands -->
-* [`percy upload DIRNAME`](#percy-upload-dirname)
+* [`percy upload`](#percy-upload)
 
-## `percy upload DIRNAME`
+### `percy upload`
 
 Upload a directory of images to Percy
 
 ```
-USAGE
- $ percy upload DIRNAME
-
-ARGUMENTS
- DIRNAME directory of images to upload
-
-OPTIONS
- -c, --config=config configuration file path
- -d, --dry-run prints a list of matching images to upload without uploading
- -e, --strip-extensions strips file extensions from snapshot names
- -f, --files=files [default: **/*.{png,jpg,jpeg}] one or more globs matching image file paths to upload
- -i, --ignore=ignore one or more globs matching image file paths to ignore
- -q, --quiet log errors only
- -v, --verbose log everything
- --silent log nothing
-
-EXAMPLE
+Usage:
+ $ percy upload [options] <dirname>
+
+Arguments:
+ dirname Directory of images to upload
+
+Options:
+ -f, --files [pattern] One or more globs matching image file paths to upload (default:
+ "**/*.{png,jpg,jpeg}")
+ -i, --ignore <pattern> One or more globs matching image file paths to ignore
+ -e, --strip-extensions Strips file extensions from snapshot names
+
+Percy options:
+ -c, --config <file> Config file path
+ -d, --dry-run Print snapshot names only
+
+Global options:
+ -v, --verbose Log everything
+ -q, --quiet Log errors only
+ -s, --silent Log nothing
+ -h, --help Display command help
+
+Examples:
  $ percy upload ./images
 ```
 <!-- commandsstop -->

diff --git a/packages/cli-upload/package.json b/packages/cli-upload/package.json
@@ -2,43 +2,38 @@
  "name": "@percy/cli-upload",
  "version": "1.0.0-beta.71",
  "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/percy/cli",
+ "directory": "packages/cli-upload"
+ },
+ "publishConfig": {
+ "access": "public"
+ },
  "main": "dist/index.js",
  "files": [
- "dist",
- "oclif.manifest.json"
+ "dist"
  ],
  "engines": {
  "node": ">=12"
  },
  "scripts": {
  "build": "node ../../scripts/build",
  "lint": "eslint --ignore-path ../../.gitignore .",
- "postbuild": "oclif-dev manifest",
- "readme": "oclif-dev readme",
+ "readme": "percy-cli-readme",
  "test": "node ../../scripts/test",
  "test:coverage": "yarn test --coverage"
  },
- "publishConfig": {
- "access": "public"
- },
- "oclif": {
- "bin": "percy",
- "commands": "./dist/commands",
- "hooks": {
- "init": "./dist/hooks/init"
- }
+ "@percy/cli": {
+ "commands": [
+ "./dist/upload.js"
+ ]
  },
  "dependencies": {
  "@percy/cli-command": "1.0.0-beta.71",
  "@percy/client": "1.0.0-beta.71",
- "@percy/config": "1.0.0-beta.71",
  "@percy/logger": "1.0.0-beta.71",
  "globby": "^11.0.4",
  "image-size": "^1.0.0"
- },
- "repository": {
- "type": "git",
- "url": "https://github.com/percy/cli",
- "directory": "packages/cli-upload"
  }
 }
diff --git a/packages/cli-upload/src/commands/upload.js b/packages/cli-upload/src/commands/upload.js
diff --git a/packages/cli-upload/src/hooks/init.js b/packages/cli-upload/src/hooks/init.js
diff --git a/packages/cli-upload/src/resources.js b/packages/cli-upload/src/resources.js
@@ -25,7 +25,7 @@ function createImageResource(url, content, mimetype) {
 // Returns root resource and image resource objects based on an image's
 // filename, contents, and dimensions. The root resource is a generated DOM
 // designed to display an image at it's native size without margins or padding.
-export function createImageResources(filename, content, width, height) {
+export function createImageResources(filename, content, size) {
  let { dir, name, ext } = path.parse(filename);
  let rootUrl = `/${encodeURIComponent(path.join(dir, name))}`;
  let imageUrl = `/${encodeURIComponent(filename)}`;
@@ -45,7 +45,7 @@ export function createImageResources(filename, content, width, height) {
  </style>
  </head>
  <body>
- <img src="${imageUrl}" width="${width}px" height="${height}px"/>
+ <img src="${imageUrl}" width="${size.width}px" height="${size.height}px"/>
  </body>
  </html>
  `),