Skip to content

Latest commit

 

History

History
127 lines (100 loc) · 5.1 KB

CONFIGURATION_FILE.md

File metadata and controls

127 lines (100 loc) · 5.1 KB

Configuration file

Properties

Property Type Description
projects string[] Identifiers of projects to add components from
styleguides string[] Identifiers of styleguides to add components from
components Component[] Component files in codebase, with connections to Zeplin counterparts
plugins Plugin[] (Optional) Plugins to use with Zeplin CLI
links Link[] (Optional) Base URLs for custom component links, e.g. wiki
github RepositoryConfig (Optional) Configuration for GitHub component links
gitlab RepositoryConfig (Optional) Configuration for GitLab component links
bitbucket BitbucketConfig (Optional) Configuration for Bitbucket component links

Models

Component

A component file in the codebase, with connections to Zeplin counterparts.

Property Type Description
path string File path of the component
name string (Optional) Custom name of the component to be displayed in Zeplin
zeplinIds string[] IDs of the components in Zeplin to connect to
zeplinNames string[] (Deprecated) Names of the components in Zeplin to connect to
storybook StorybookConfig (Optional) Configuration for Storybook plugin, only for manually matching components with stories—to learn more, check out Storybook plugin documentation
styleguidist StyleguidistConfig (Optional) Configuration for Styleguidist link

☝️ Components can have additional custom properties based on the plugins you use.

Plugin

A plugin to use with Zeplin CLI.

Property Type Description
name string npm package name of the plugin, e.g. @zeplin/cli-connect-react-plugin
config string (Optional) Configuration for the plugin—see plugin's documentation to learn more

Link

A base URL for a custom component link, e.g. wiki.

Property Type Description
name string (Optional) Name of the link to be displayed in Zeplin
type string Custom type for a link you define, e.g. wiki
url string Base URL of the link, e.g. https://wiki.example.com/design-system

Once you define a link, you can set the URL paths for each component like so:

{
    …
    "components": [
        …,
        {
            "name": …,
            "path": …,
            "zeplinNames": [
                …
            ],
            "wiki": {
                "urlPath": "components/button"
            },
            "public": {
                "urlPath": "components/button"
            }
        },
        …
    ],
    "links": [
        {
            "name": "Internal Wiki",
            "type": "wiki",
            "url": "https://wiki.example.com/design-system"
        },
        {
            "name": "Public Design System Documentation",
            "type": "public",
            "url": "https://design.example.com/"
        }
    ]
}

RepositoryConfig

Configuration for repository links, e.g. GitHub, GitLab.

Property Type Description
repository string Name of the repository to link to, e.g. example/react-components
branch string (Optional) Branch of the repository to link to—defaults to master
url string (Optional) Base URL, e.g. if using GitHub Enterprise
path string (Optional) Path of the project, if you're using a monorepo

BitbucketConfig

Configuration for repository links Bitbucket.

Property Type Description
repository string Name of the repository to link to, e.g. react-components
branch string (Optional) Branch of the repository to link to—defaults to master (or to repository default branch on Bitbucket Server)
url string (Optional) (Bitbucket Server) Base URL, e.g. https://bitbucket.company.com if you are using Bitbucket Server
project string (Optional) (Bitbucket Server) Project name if the repository is part of a project
user string (Optional) (Bitbucket Server) User name if the repository is under a user

StorybookConfig

Configuration for Storybook plugin, only for manually matching components with stories—to learn more, check out Storybook plugin documentation.

Property Type Description
kind string Name defined in component's .stories.js file
stories string[] Names of stories defined in component's .stories.js file

StyleguidistConfig

Configuration for Styleguidist component links.

Property Type Description
name string Name of the component used in the Styleguidist URL, after #