connected-components-docs icon indicating copy to clipboard operation
connected-components-docs copied to clipboard

Support for multiple `path` values

Open majoravery opened this issue 5 years ago • 2 comments

Hi! Thanks for implementing this useful feature! I have a support request:

My team is currently working on revamping our UI and making it consistent across mobile and web platforms, so we are using the same components and styleguide for multiple projects. Currently, each of the components only allow one path to be specified, which means only one repository can be connected. Would it be possible to support multiple paths to different repositories?

Ideally we want to be able to have multiple links here:

image

majoravery avatar Sep 04 '20 14:09 majoravery

I managed to resolve issue by using links, yet I had to merge json files in a different way with the script.

#!/bin/python3
import os
import json

TEMPLATE_FILE = 'template.json'

COMPONENT_FILES = [
    'android/components.json',
    'ios/components.json'
]


def read_components_file(path: str) -> dict:
    with open(path, 'r') as f:
        return json.load(f)


def process_components_file(output_dict: dict, components: dict):
    if components['links']:
        output_dict['links'] += components['links']
    if components['components']:
        output_dict['components'] += components['components']


def breakdown_by_components(d: dict):
    components_by_id: dict = {}
    components = d['components']
    for component in components:
        for id in component['zeplinIds']:
            unique_component_dict = components_by_id.get(id) or dict()
            if 'zeplinIds' not in unique_component_dict:
                unique_component_dict['zeplinIds'] = [id]
            if 'path' not in unique_component_dict:
                unique_component_dict['path'] = component['path']
            if 'android' in component:
                unique_component_dict['android'] = component['android']
            if 'ios' in component:
                unique_component_dict['ios'] = component['ios']

            components_by_id[id] = unique_component_dict
    d['components'] = [v for v in components_by_id.values()]


def main():
    merged_json = {}
    with open(TEMPLATE_FILE, 'r') as f:
        merged_json = json.load(f)
    for component in COMPONENT_FILES:
        if os.path.exists(component):
            process_components_file(merged_json, read_components_file(component))

    breakdown_by_components(merged_json)
    with open('components.json', 'w') as f:
        json.dump(merged_json, f, indent=2)


if __name__ == '__main__':
    main()

This script takes standard components file of the each repo, merges them and changes representation to something like that

  "components": [
    {
      "zeplinIds": [
        "606dae42c600396d4c523f9c"
      ],
      "path": "ui/src/main/kotlin/com/anna/money/ui/input/TextInputField.kt",
      "android": {
        "urlPath": "ui/src/main/kotlin/com/anna/money/ui/input/TextInputField.kt"
      },
      "ios": {
        "urlPath": "DevelopmentPods/AnnaUIComponents/AnnaUIComponents/Classes/Components/Form/FormInputView.swift"
      }
    },
    {
      "zeplinIds": [
        "606dae4c39f4106c76987829"
      ],
      "path": "ui/src/main/kotlin/com/anna/money/ui/input/TextInputField.kt",
      "android": {
        "urlPath": "ui/src/main/kotlin/com/anna/money/ui/input/TextInputField.kt"
      },
      "ios": {
        "urlPath": "DevelopmentPods/AnnaUIComponents/AnnaUIComponents/Classes/Components/Form/FormInputView.swift"
      }
    },

effectively creating a different entry per component id.

But if would be much nicer to get this support out of the box

PoisonousJohn avatar May 21 '21 14:05 PoisonousJohn

@PoisonousJohn Thanks for sharing this workaround! We'll brainstorm on this and https://github.com/zeplin/cli/issues/81 to find a built-in solution.

dirtybit avatar May 21 '21 22:05 dirtybit