Add tags to the components list

[gazpachu]

It would be cool if we could add tags to the components list, so we could specify their status or what is missing, like WIP, example, props, docs.

Something like this:

I've tried to hack it targetting the generated class names for the ul and li items in the list, but it gets translated from this:

.rsg--item-69:nth-child(2) {
    background: red;
  }

to this:

  ._3_veETGqo6h-GGUgi_7XhI:nth-child(2) {
    background: red;
  }

Anyway, that's not even a solid way of doing it. So any tip would be welcome :)

[sapegin]

You can replace any Styleguidist UI component:

https://react-styleguidist.js.org/docs/cookbook.html#how-to-change-the-layout-of-a-style-guide

[gazpachu]

Thanks, that should be enough!

[FezVrasta]

@gazpachu how do you decide when to show a given badge?

[gazpachu]

In styleguide.config.js I've added this:

styleguideComponents: {
    Wrapper: path.join(__dirname, 'src/wrapper'),
    StyleGuideRenderer: path.join(__dirname, 'src/styleguide'),
    TableOfContentsRenderer: path.join(__dirname, 'src/toc'),
    ComponentsListRenderer: path.join(__dirname, 'src/list'),
    HeadingRenderer: path.join(__dirname, 'src/heading')
  },

Then, I created src/list.jsx and src/list.styles.jsx:

import React from 'react';
import cx from 'classnames';
import Link from 'react-styleguidist/lib/rsg-components/Link';
import Styled from 'react-styleguidist/lib/rsg-components/Styled';
import styles from './list.styles';

const ComponentsListRenderer = ({ classes, items }) => {
  // eslint-disable-next-line
  items = items.filter(item => item.visibleName);

  if (!items.length) {
    return null;
  }

  return (
    <ul className={classes.list}>
      {items.map(({
        heading,
        visibleName,
        href,
        content,
        external
      }) => (
        <li
          className={cx(classes.item, (!content || !content.props.items.length) && classes.isChild)}
          key={href}
        >
          <Link
            className={cx(heading && classes.heading)}
            href={href}
            target={external ? '_blank' : undefined}
          >
            {visibleName}
            {/* (visibleName === 'Table') && <span className={`${classes.label} ${classes.wip}`}>WIP</span> */}
          </Link>
          {content}
        </li>
      ))}
    </ul>
  );
};

export default Styled(styles)(ComponentsListRenderer);

const styles = ({
  color,
  fontFamily,
  space,
  mq
}) => ({
  list: {
    margin: 0
  },
  item: {
    color: color.base,
    display: 'block',
    margin: 0,
    paddingLeft: space[2],
    fontFamily: fontFamily.base,
    fontSize: '18px',
    lineHeight: '40px',
    listStyle: 'none',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    borderBottom: '1px solid #EEE'
  },
  isChild: {
    [mq.small]: {
      display: 'inline-block',
      margin: [[0, space[1], 0, 0]]
    }
  },
  heading: {
    color: color.base,
    marginTop: space[1],
    fontFamily: fontFamily.base,
    fontWeight: 'bold'
  },
  label: {
    color: 'white',
    borderRadius: '6px',
    padding: '2px 6px',
    marginLeft: '5px',
    fontSize: '13px',
    verticalAlign: 'middle'
  },
  wip: {
    backgroundColor: '#ea985d'
  },
  review: {
    backgroundColor: '#45bb75'
  },
  remove: {
    backgroundColor: '#E60000'
  }
});

export default styles;

In line 34, I'm matching the visibleName with Table to show a span element for the badge beside the Table link in the list.

I hope it helps

[FezVrasta]

Oh I see, thanks