can't get basic styled components with @component annotation jsdoc working

[longility]

I'm not sure what I'm doing wrong. It is not picking up my component that is a styled component using annotation.

https://github.com/longility/react-styleguidist/tree/styled-component-example

Warning: src/components/StyledButton.js matches a pattern defined in “components” or “sections” options in your style guide config but doesn’t export a component.

It usually happens when using third-party libraries, see possible solutions here:
https://react-styleguidist.js.org/docs/thirdparties.html

[sapegin]

I don't see any warnings in your example with the latest React Styleguidist.

[longility]

Thanks for responding. I decided to do the following and still got the same warning.

1. rebase to latest master on react-styleguidist.
2. git clean -xdf
3. cd examples/cra/
4. npm install
5. npm run styleguide

Besides making sure I have a clean environment and latest react-styleguidist, did you do anything different? Maybe you can guide me on debugging. I'm not sure where to go from here.

[sapegin]

This is not the latest version:

react-styleguidist/examples/cra/package.json

Line 20 in a086302

"react-styleguidist": "^6.0.28",

[longility]

Thank you for your help! I didn't think about upgrading rsg npm package in the example. I'm now able to get it working.

[glensomerville]

I'm running into this same issue with Styled Components and TypeScript. Any suggestions on what might be going wrong here?

Error:
Warning: src/components/Buttons/MediumButton/MediumButton.tsx matches a pattern defined in “components” or “sections” options in your style guide config but doesn’t export a component.

https://github.com/glensomerville/react-styled-components-styleguide-ts

[longility]

Do you have an example repo that reproduces this issue, or can give more information that would help us understand what might be going on?

…

On Apr 10, 2018, at 7:12 AM, glensomerville ***@***.***> wrote: I'm running into this same issue with Styled Components and TypeScript. Any suggestions on what might be going wrong here? Error: Warning: src/components/Buttons/MediumButton/MediumButton.tsx matches a pattern defined in “components” or “sections” options in your style guide config but doesn’t export a component. https://github.com/glensomerville/react-styled-components-styleguide-ts — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub, or mute the thread.

[glensomerville]

Yes, the example repo can be found here: https://github.com/glensomerville/react-styled-components-styleguide-ts

Thanks for looking into this.

[glensomerville]

Oh, and by the way, if I change a direct styled-component export to a SFC, then it is picked up correctly.

e.g. instead of exporting a styled element directly, as in https://github.com/glensomerville/react-styled-components-styleguide-ts/blob/master/src/components/Buttons/MediumButton/MediumButton.tsx, it will work if I change it to:

import * as React from 'react';
import { styled } from 'themes';

const StyledMediumButton = styled.button`
  width: 320px;
  height: 40px;
  border-radius: 4px;
  border: solid 1px ${props => props.theme.colors.powderBlue};
  text-align: center;
  font-family: ${props => props.theme.fonts.primary};
  font-size: 13px;
  font-weight: 900;
  color: ${props => props.theme.colors.darkishBlue};
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: ${props => props.theme.colors.whiteTwo};
  &:hover {
    color: ${props => props.theme.colors.cerulean};
    border-color: ${props => props.theme.colors.cerulean};
  }
`;

const MediumButton: React.SFC<{}> = ({ children }) => {
  return (
    <StyledMediumButton>
      {children}
    </StyledMediumButton>
  );
};

export default MediumButton;

[kellyisworking]

Hi @glensomerville were you able to find a fix? I think I'm having the same issue.

[spencersmb]

Hey I found an interesting solve for this issue. Using the example from styleguidist's site here:
https://react-styleguidist.js.org/docs/thirdparties.html#styled-components

Instead I wrote it like this:
import styled from 'styled-components'

/** @component */
export const SalmonButton = styled.button`
  background-color: salmon;
  border: 1px solid indianred;
  color: snow;
  padding: inherit;
`

and then the Readme.md file looks like this:
(don't forget to add ```js)

SalmonButton example:

<SalmonButton pizza="🍕" >
button
</SalmonButton>

[poteirard]

I tried @spencersmb solution but if you have typescript types in the styled-components (e.j.: export const SalmonButton = styled.button<{ something: true }>` those are not shown in the props/methods section :(