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

Zeplin CLI plugin for Angular components
https://github.com/zeplin/cli-connect-angular-plugin

angular zeplin zeplin-cli

Last synced: 11 days ago
JSON representation

Zeplin CLI plugin for Angular components

• Host: GitHub
• URL: https://github.com/zeplin/cli-connect-angular-plugin
• Owner: zeplin
• License: mit
• Created: 2019-12-18T09:00:56.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T06:50:12.000Z (almost 2 years ago)
• Last Synced: 2024-10-20T12:09:32.683Z (14 days ago)
• Topics: angular, zeplin, zeplin-cli
• Language: TypeScript
• Homepage:
• Size: 1.38 MB
• Stars: 3
• Watchers: 23
• Forks: 5
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Zeplin CLI Angular Plugin

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

## Installation

Install plugin using npm.

```sh

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

```

## Usage

Run CLI `connect` command using the plugin.

```sh

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

```

Zeplin CLI Angular Plugin uses a fork of [Compodoc](https://github.com/compodoc/compodoc) to analyze and collect information from Angular components.

### Configuration

If necessary, Zeplin CLI Angular Plugin can generate more detailed snippets and descriptions. Update your [components configuration file](./docs/cli.componentconfigfile.plugins.md) to add the properties you need.

| Property             | Description                                                                  |

|----------------------|------------------------------------------------------------------------------|

| `useFullSnippet`     | Generates a distinct snippet for all combinations of the component selectors |

| `useFullDescription` | Generates descriptions with implemented interface names                      |

Here's a sample configuration file (`.zeplin/components.json`):

```json

{

    ...

    "plugins" : [{

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

        "config": {

            "useFullSnippet": true,

            "useFullDescription": true,

        }

    }],

    ...

}

```

☝️ _Note that after adding the plugin to the configuration file, you don't need to pass it as the `-p` argument to the `connect` command—running `zeplin connect` should be enough._

## 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. 🧩

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