React-styleguidist: Styleguide md files on a separate folder

[vchoisk]

Is it possible to maintain all md files on a folder, instead of keeping them in the same directory as my jsx component?

I created a styleguide folder to keep all md files in and attempted to only add components that have md files in that folder to the styleguide.

here is my config for components

module.exports = { 
components: function() {
    var getStyleguideList = function(dirsrc) {
      return fs
        .readdirSync(dirsrc)
        .filter(function(filename) {
          return (
            filename.slice(0, 2) === 'HB' &&
            filename.slice(filename.length - 3) !== 'jsx'
          )
        })
        .map(function(filename) {
          return filename.slice(filename.length - 2) === 'md'
            ? '${dirsrc}/${filename}'
            : getStyleguideList('${dirsrc}/${filename}')
        })
    }

    var styleguides = flatten(getStyleguideList("PATH_TO_STTLEGUIDE_MD"))

    var components = styleguides.map(function(styleguidePath) {
      var styleguidePathArr = styleguidePath.split('/') //splits styleguide path

      styleguidePathArr.splice(1, 1, "COMPONENT_FOLDER") //replaces dir name to HBWidgets

      var componentPath = styleguidePathArr
        .join('/')
        .slice(0, -2) //replaces md extension with jsx extension
        .concat('jsx')
      return componentPath
    })

    return components
  }
}

Any pointer or help is appreciated!

[sapegin]

You should be able to return an absolute path in getExampleFilename.

[nobuti]

Maybe (probably) I'm missing something but I can't get it to work. I'd like to generate docs from /docs in my project. I have this config:

module.exports = {
  template: 'styleguide/template.html',
  title: 'Airship',
  skipComponentsWithoutExample: true,
  getExampleFilename(componentPath) {
    return componentPath.replace(/(.+)\/(.+).js$/, '/docs/components/$2.md');
  },
  sections: [
    {
      name: 'Introduction',
      content: './docs/introduction.md'
    },
    {
      name: 'Typography',
      content: './docs/typography.md',
      components: function() {
        return [
          './src/components/Typography/jumbo.js',
        ];
      }
    },
    {
      name: 'Components',
      content: './docs/components.md',
      components: function() {
        return ['./src/components/Grid/grid.js'];
      }
    }
  ]
};

The files /docs/components/(grid|jumbo).md exist, and the project is compiled successfully but those files are not rendered in the styleguide. I tried with a relative path as well with the same result. If I avoid skipComponentsWithoutExample, the documentation for those components is empty. I can't get what I'm missing, I'm using create-react-app by the way.

[giacomocerquone]

@nobuti With a console.log you'd have seen that to do what you wanna do, you just need something like this:

  getExampleFilename(componentPath) {
    return componentPath.replace(/\.js?$|app/g, matched => (matched === 'app') ? 'docs' : '.md');
  },

I wrote that as a oneliner, but it should be clear enough. You need of course to set it based on your paths.
So replace "app" with your main directory