https://github.com/zeplin/cli-connect-react-plugin

Zeplin CLI plugin for React components
https://github.com/zeplin/cli-connect-react-plugin

react zeplin zeplin-cli

Last synced: about 2 months ago
JSON representation

Zeplin CLI plugin for React components

• Host: GitHub
• URL: https://github.com/zeplin/cli-connect-react-plugin
• Owner: zeplin
• License: mit
• Created: 2019-10-17T16:47:32.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-12-13T07:15:40.000Z (9 months ago)
• Last Synced: 2024-07-19T09:15:46.596Z (about 2 months ago)
• Topics: react, zeplin, zeplin-cli
• Language: TypeScript
• Homepage:
• Size: 1.05 MB
• Stars: 13
• Watchers: 26
• Forks: 6
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Zeplin CLI React Plugin

[Zeplin CLI](https://github.com/zeplin/cli) plugin to generate descriptions and code snippets for React components.

Zeplin CLI React Plugin uses [react-docgen](https://github.com/reactjs/react-docgen) and [react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript) to analyze and collect information from React components. For more details about the supported formats, see `react-docgen` [guidelines](https://github.com/reactjs/react-docgen#guidelines-for-default-resolvers-and-handlers) and `react-docgen-typescript` [examples](https://github.com/styleguidist/react-docgen-typescript#example).

## Installation

Install the plugin using npm.

```sh

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

```

## Usage

Run CLI `connect` command using the plugin.

```sh

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

```

### Using react-docgen-typescript for Typescript components

You can choose to use either `react-docgen` or `react-docgen-typescript` for TypeScript in your plugin configurations.

```jsonc

{

    ...

    "plugins" : [{

        "name": "@zeplin/cli-connect-react-plugin",

        "config": {

            "tsDocgen": "react-docgen-typescript", // Default: "react-docgen"

            "tsConfigPath": "/path/to/tsconfig.json" // Default: "./tsconfig.json"

        }

    }],

    ...

}

```

### Using react-docgen resolvers

You can set which built-in `react-docgen` resolver to use.

```jsonc

{

    ...

    "plugins" : [{

        "name": "@zeplin/cli-connect-react-plugin",

        "config": {

            // Default: "findAllExportedComponentDefinitions"

            "reactDocgenResolver": "findExportedComponentDefinition",

        }

    }],

    ...

}

```

## About Connected Components

[Connected Components](https://blog.zeplin.io/introducing-connected-components-components-in-design-and-code-in-harmony-aa894ed5bd95) 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. 🧩

Check [Zeplin Connected Components Documentation](https://zpl.io/connected-components-docs) for getting started.

[Zeplin CLI](https://github.com/zeplin/cli) uses plugins like this one to analyze component source code and publishes a high-level overview to be displayed in Zeplin.