Git Product home page Git Product logo

cli-19's Introduction

Zeplin CLI

Command-line interface for Zeplin

Installation

Install Zeplin CLI using npm.

npm install -g @zeplin/cli

Usage

Connected Components

Connected Components in Zeplin lets you access components in your codebase directly on designs in Zeplin, with links to Storybook, GitHub and any other source of documentation based on your workflow. ๐Ÿงฉ

CLI connect command uses plugins to analyze component source code and publishes a high-level overview to be displayed in Zeplin. You can either publish changes to your components manually, or better yet, you can always keep them in sync by running the CLI as a step in your CI workflow.

Make sure that you created a configuration file (.zeplin/components.json) following Connected Components documentation and run the connect command:

zeplin connect [options]
Options Description Default
-f, --file Path to components configuration file .zeplin/components.json
-d, --dev Activate development mode false
--no-watch Disable watching file changes on development mode false
-p, --plugin npm package name of a Zeplin CLI connect plugin
-h, --help Output usage information
--verbose Enable verbose logs

Plugins

Zeplin CLI commands are extensible using plugins. See PLUGIN.md to build your own plugin.

Connected Components

connect command uses plugins to analyze component source code. Plugins generate component descriptions, code snippets and links for each component.

Available plugins

npm package name Description
@zeplin/cli-connect-react-plugin Generates snippets from React components
@zeplin/cli-connect-angular-plugin Generate snippets from Angular components
@zeplin/cli-connect-swift-plugin Generates snippets from iOS, macOS views in Swift
@zeplin/cli-connect-storybook-plugin Generates Storybook links of components

Usage

Install a connect plugin using npm.

npm install -g @zeplin/cli-connect-react-plugin

Execute connect command using the plugin.

zeplin connect -p @zeplin/cli-connect-react-plugin

You can also provide a list of plugins via the plugins parameter of the components configuration file, where it's possible to pass custom parameters to plugins.

Usage with access token

Zeplin CLI can authenticate using an access token instead of your Zeplin credentials which makes it easier to integrate it into your CI workflow.

  1. Get a CLI access token from your Profile in Zeplin.
  2. Set ZEPLIN_ACCESS_TOKEN environment variable in your CI.

Contributing and Issue Tracking

See CONTRIBUTING.md for details.

cli-19's People

Contributors

yuqu avatar helehelehele avatar skarahoda avatar berkcebi avatar dependabot[bot] avatar fenugeek avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.