React-styleguidist: Subcomponents. How to document?

[hmontes]

Hi

I have Subcomponents in my project (Like Semantic-ui React, Bootstrap react and many frameworks). Like these.

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

const common = `
  color: #888;
  font-family: "Titillium Web",sans-serif;
  font-size: 0.8125em;
  border-radius: 4px;
`
var Input = styled.input`
  ${common}
  display: block;

    &[type="text"], &[type="email"],
    &[type="password"] {
        border-color: ${props => !props.invalid ? 'inherit' : '#ea2e68'};
    }

    &[type="text"], &[type="email"],
    &[type="password"], &[type="number"] {
        width: 100%;
        height: 40px;
        padding: 0 15px;
        border: 1px solid #ebebeb;
        line-height: 40px;
        border-radius: 4px;
    }

    &[type="number"] {
        padding-right: 0;
  }
  border-radius: ${props => !props.rounded ? 0 : '200px'};
`

const Textarea = styled.textarea`
  ${common}

`

/** Conjunto de componentes para escribir formularios de mejor manera */
const Form = (props) => (
  <form>{props.children}</form>
)

Input.propTypes = {
  /** En caso de ser positivo, rodea con un borde rojo el resultado incorrecto */
  invalid: PropTypes.bool,
  /** Hace Inputs redondeados */
  rounded: PropTypes.bool
}

Form.Input = Input

export default Form

But i can't see the propTypes or the main documentation from Input. I only see the documentation from Forms. How can i deal with this?

Thank you

P.D: Separate is not an option because i'm implementing Form.label, Form.input, Form.select (Like any css framework).

[sapegin]

Looks like we don’t have a good (any?) solution for that now. For now Styleguidist supports only one component per file.

Any ideas how it could be implemented? And how it could look? Should we show “subcomponents” as normal components or differently somewhere inside the main component docs?

[hmontes]

Any new ideas? I'm doing an CSS Framework and i'm very interested in this option.

[brianokeefe]

I would love to see some kind of proper support for subcomponents as well. We're actually having a little bit of the opposite problem -- we've been putting small "helper" subcomponents in separate files so that we can document their props and usage, but in the context of a styleguide containing all components, they tend to add a lot of noise.

Maybe it would be cool if subcomponents somehow collapsed into the "main" component (i.e., only the "main" component would be visible by default, but it would include a toggle-able section that contained the subcomponents, or something like that). Not sure what that would look like from an implementation standpoint, but I dunno, just throwing ideas around here :)

[EdwardSalter]

We are currently developing a UI framework that does the same thing, each component sits in its own file. These get picked up by styleguidist and so long as the displayName is set properly on the component, i.e:
PageContainerContent.displayName = 'PageContainer.Content'; then the components will sit nicely next to each other in the generated menu.

I guess another option would be to make use of the sections feature that styleguidist has.

[n1313]

@brianokeefe I don't think RSG does this. But you can do it manually with a little bit of configuration magic:

In styleguidist.config.js:

```js
const ignoredComponents = [
'ComponentA',
'SubcomponentA',
'SubcomponentB'
];

module.exports = {
//...
sections: [
{
name: 'All Components',
components: ./src/components/**/!(${ignoredComponents.join('|')}).jsx,
sections: [
{
name: 'ComponentA',
components: () => ([
'./src/components/ComponentA/ComponentA.jsx',
'./src/components/ComponentA/SubcomponentA.jsx',
'./src/components/ComponentA/SubcomponentB.jsx'
])
}
]
}
]
//...
};

[brianokeefe]

Here's what we ended up doing:

We actually probably have a bit of an uncommon setup, as we use styleguidist in two separate ways. We use it as a workbench for development for each of our individual components (each in their own package) and then we have a "global" styleguidist that pulls in all of our components and builds static documentation for them. Because we have two different styleguidist configs, we have the desired name for the README set differently in each config -- for the "global" styleguide we look for a file named STYLEGUIDE.md, and in the workbench, either STYLEGUIDE.md or README.md will work. Sub-components use README.md so they won't appear in the "global" styleguide but will still appear in the workbench for development.

Again, this only works as a consequence of us having multiple styleguidist configs, but it seems to be working well so far.

[sapegin]

I'm going to close this for now — I don't see an easy way to implement that, though this could be a useful feature. Feel free to open a more actionable issue or send a pull request ;-)