How do I extend docgen to parse non-exported styled-components?

Bắt đầu với ví dụ CheckBox.js và kiểm tra cách react-docgen xử lý CheckBox được export so với các styled-components Wrapper, Input và Label không được export. Xác định xem các theme props có thể được biểu diễn trong tài liệu được tạo hay không; kết quả cần là một cách tiếp cận được lập tài liệu và được hỗ trợ, hoặc một giới hạn rõ ràng.

I have the following component CheckBox. Notice I have styled-components that I create in this file and use in this file: Wrapper, Input, and Label. I haven't seen a way to use react-docgen to pickup each props.theme.VAR_NAME and be displayed with the CheckBox documentation.

I have seen examples of creating styled-components in their own files and then doing:

/** @component */
export default Wrapper;

CheckBox.js

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Wrapper = styled.div`
  margin: ${props => props.theme.checkbox_margin};
  position: relative;
  text-align: left;
`;

const Input = styled.input`
  outline: 0;
  visibility: hidden;
  width: ${props => props.theme.checkbox_size};
  margin: 0;
  display: block;
  float: left;
  font-size: inherit;

  &:checked {
     + label:before {
      background: ${props => props.theme.checkbox_checked_color};
      border:none;
    }
    
    + label:after {
      transform: translate(${props => props.theme.checkbox_padding}, calc(calc(${props => props.theme.checkbox_size} / 2) - calc(calc(${props => props.theme.checkbox_size} - 2 * ${props => props.theme.checkbox_padding}) / 2.6))) rotate(-45deg);
      width: calc(${props => props.theme.checkbox_size} - 2 * ${props => props.theme.checkbox_padding});
      height: calc(calc(${props => props.theme.checkbox_size} - 2 * ${props => props.theme.checkbox_padding}) / 2);
      border: ${props => props.theme.checkmark_width} solid ${props => props.theme.checkmark_color};
      border-top-style: none;
      border-right-style: none;
    } 
  }
  
  &:disabled {
    + label:before{
      border-color: ${props => props.theme.checkbox_border_color_disabled};
    }
    
    &:checked {
      + label:before{
        background: ${props => props.theme.checkbox_checked_color_disabled};
      }
    }
  }
`;

const Label = styled.label`
  cursor: pointer;
  display: inline;
  line-height: ${props => props.theme.checkbox_size};
  vertical-align: top;
  clear: both;
  padding-left: 1px;
  
  &:not(:empty) {
    padding-left: ${props => props.theme.checkbox_label_padding};
  }
  
  &:before, &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
  }
  
  &:before {
    // box
    width: ${props => props.theme.checkbox_size};
    height: ${props => props.theme.checkbox_size};
    background: #fff;
    border: ${props => props.theme.checkbox_border_width} solid ${props => props.theme.checkbox_border_color};
    border-radius: ${props => props.theme.checkbox_border_radius};
    cursor: pointer;
    transition: background .3s;
  }

  &:after {
    // checkmark
  }
`;

/**
 * A checkbox with a label on the right side.
 */
const CheckBox = ({id, label, ...props}) => (
  <Wrapper>
    <Input id={id} type={'checkbox'}/>
    <Label htmlFor={id}>{label}</Label>
  </Wrapper>
);

CheckBox.propTypes = {
  /** The HTML id attribute value. This will need to be unique as the label uses it to define what the label is attached to. */
  id: PropTypes.string.isRequired,
  /** The string of text that's displayed as the checkbox label. */
  label: PropTypes.string.isRequired,
};

CheckBox.defaultProps = {
  id: "cb1",
  label: "Label Name",
};

export default CheckBox;