React-styleguidist: Documenting pure functions and utilities

[Giulico]

Hello,
I'm using this tool since a couple of day and I really like it! :)

Trying to keep my project as "functional" as possible, I tend to use many pure functions. I wonder if there's a way to document those pure functions with react-stylguidist.

I noticed the waring in my console:
Warning: app/assets/js/shared/utils.js matches a pattern defined in ”components” or “sections” options in your style guide config but doesn’t export a component.

Do I need to use two js documentation engines?

Thank you

[sapegin]

Styleguidist is not a JS documentation engine, now it works for react component. I’d recommend you to use something like Documentation.js and include generated Markdown as a section in Styleguidist.

[kopax]

I personnaly create CLI-tools per project that can generate some markdown, and another CLI tools to inject into sections pages that I have generated. Another CLI tools to replace variables upon doc build.

But yeah, for this one I must say that @Giulico got a point asking to be able to write other than components documentation. Instead of having each a separate tools, we'll have a decent one.

It seems decent feature to be able to generate JSdoc when we can already do more for JS.

+1

[evrenakar]

Styleguidist is not a JS documentation engine, now it works for react component. I’d recommend you to use something like Documentation.js and include generated Markdown as a section in Styleguidist.

What do you plan to do about React hooks?

[kopax]

What do you mean?

[evrenakar]

How do i implement styleguidist when using react hooks?

[yutin1987]

I think we need reopen this issue, when it is hooks function, will get not component issues,
but hooks is a method in react component.

[maclejean]

Documenting pure function and util js is necessary,please

[laytong]

I have a workaround i'm using for now, but would prefer it auto picked up my hooks in the same way it does components

in my config I added

{
    name: 'Custom Hooks',
    components: '<directory-to-hooks>/**/*.js',
},

And then co-located an *.examples.md file with examples that just import and use the hook

import useToggle from './use-toggle.js';
const Component = props => {
    const [isOpen, toggle] = useToggle(false)
    return (
        <React.Fragment>
            <h1>this is {isOpen ? 'OPEN' : 'CLOSED'}</h1>
            <button onClick={toggle}>Toggle me</button>
        </React.Fragment>
    )
}
<Component />