Add some common issues to README

[IanVS]

Closes #213.

In response to #213, I thought it might be good to mention some of the more common issues that folks experience to the README.

[ryota-murakami]

@IanVS Thank you so much! 😄

[reintroducing]

@IanVS I'm trying to track down why my controls are not showing up but it seems that the Known Issue in your PR has been removed from the README. I'm only seeing controls show up for the args that I'm passing to each story, not all of the possible controls that a story has. Am I missing something in the docs? I don't see anything about controls being limited to only those that the story is using and ignoring all the other possible controls.

[joshwooding]

@reintroducing Are you using prop types?

[reintroducing]

@joshwooding Yes, here is an example button component, for instance:

import {forwardRef} from 'react';
import PropTypes from 'prop-types';
import {cnb} from 'cnbuilder';
import Loader from '../Loader';
import css from './Button.module.scss';

const Button = forwardRef(
    (
        {
            className,
            testAttr,
            children,
            type,
            variant,
            size,
            block,
            icon,
            iconPosition,
            disabled,
            loading,
            onClick,
            ...attrs
        },
        ref
    ) => (
        <button
            ref={ref}
            className={cnb(
                css.root,
                {[css[variant]]: variant},
                {[css[size]]: size},
                {[css.block]: block},
                {[css[`${iconPosition}Icon`]]: Boolean(icon)},
                className
            )}
            data-test={testAttr}
            type={type}
            disabled={disabled}
            onClick={onClick}
            {...attrs}
        >
            {iconPosition === 'left' &&
                (loading ? (
                    <Loader
                        className={css.leftLoader}
                        testAttr="loader"
                        inline
                    />
                ) : (
                    icon
                ))}
            {children}
            {iconPosition === 'right' &&
                (loading ? (
                    <Loader
                        className={css.rightLoader}
                        testAttr="loader"
                        inline
                    />
                ) : (
                    icon
                ))}
        </button>
    )
);

Button.propTypes = {
    /** Additional class(es) to add to the component. */
    className: PropTypes.string,
    /** The name of the test attribute to associate to the component. */
    testAttr: PropTypes.string,
    /** The markup node to insert into the button. */
    children: PropTypes.node.isRequired,
    /** The type of button that is rendered. */
    type: PropTypes.oneOf(['button', 'submit', 'reset']),
    /** The variant of the button. */
    variant: PropTypes.oneOf([
        'primary-link',
        'neutral-link',
        'destructive-link',
        'primary',
        'secondary',
        'tertiary',
        'neutral',
        'tertiary-neutral',
        'primary-destructive',
        'secondary-destructive',
        'tertiary-destructive',
        'neutral-destructive',
    ]),
    /** The size of the button. */
    size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
    /** Whether the button should display as a block level element. */
    block: PropTypes.bool,
    /** A custom icon (typically one of the Icon components) to show in the button. */
    icon: PropTypes.element,
    /** If an icon is provided, whether it should appear on the left or right side of the button children. */
    iconPosition: PropTypes.oneOf(['left', 'right']),
    /** Whether the button is disabled or not. */
    disabled: PropTypes.bool,
    /** Whether to show a loading animation inside of the button. */
    loading: PropTypes.bool,
    /**
     * The handler to execute when the button is clicked.
     *
     * @param {SyntheticEvent} evt - The React `SyntheticEvent`.
     */
    onClick: PropTypes.func,
};

Button.defaultProps = {
    testAttr: 'button',
    type: 'button',
    variant: 'primary-link',
    size: 'lg',
    iconPosition: 'left',
};

export default Button;

The default story looks like this:

export const Default = Template.bind({});

Default.args = {
    children: 'Button Label',
};

This produces the control with children in it, but all other prop types are ignored. I'm migrating from webpack and this was working correctly in the webpack variant of my stories.

[joshwooding]

@reintroducing Unfortunately docgen for PropTypes isn't currently supported. This should be fixed with #190

[reintroducing]

@joshwooding Ah, thank you, so it works for TS but not just regular ole JS from what I gather. I'll watch that PR, appreciate it.