alanbsmith / component-library-starter Goto Github PK

We used BEM a lot and thinking about setting up a component library for react which follows BEM guidelines. No I am confused about your structure. You separate blocks, elements and modifiers in different folders. When the library grows this will become a mess or am I wrong? I thought that each component holds it's own elements and modifiers, because an element and modifiers, in BEM, only belong to one block. And when you do this you can just reuse the one component of that library.

Maybe I am wrong :) Please give me hint

---- after looking into the project
I see in the code that the Button for example uses global modifiers and then you can implement a custom. That's fine, I got it. So global modifiers and custom for a block. But why storing elements in a separate folder ? An Element only belongs to one block, so it should be moved there. If you want to have a global "Icon", p or Text -> than this is actually a block.

EXPECTED BEHAVIOR

When defining a custom modifier in a child component, I would not expect to see proptype warnings from it's parent component saying those modifiers are invalid.

ACTUAL BEHAVIOR

These warnings come from parent components that use styleModifierPropTypes, that don't seem to allow for the modifiers of the children.

STEPS TO REPRODUCE

1. Clone in a fresh component-library-starter project.
2. Inside elements/Icon/index.js add modifier validation by importing styleModifierPropTypes and adding:

Icon.propTypes = {
  modifiers: styleModifierPropTypes(modifierConfig),
}

3. Observe in console the following:

Warning: Failed prop type: Invalid modifier left used in prop modifiers[0] and supplied to Styled(UnstyledIcon). Validation failed.
in Styled(UnstyledIcon) (created by PreviewComponent)
in PreviewComponent
in ThemeProvider (created by ThemeWrapper)

This is because Button.Icon defines a customModifier 'left'.

Is there a recommended way to validate modifiers for components that are built off of other components?

Thanks!

Hello.

I was using this as a part of a project I'm working on, and specifically looking around configureFonts.js
It doesn't seem like you have this file set up correctly. FontFaceObserver is made to take a string for the family, not an array of strings. This as far as I can tell causes all loads to fail when written in this manner.

Shouldn't it be an array of FontFaceObservers that get passed to a mapping function? One observer per font.

EXPECTED BEHAVIOR

Building the library works fine, but trying to run the styleguide fails

ACTUAL BEHAVIOR

Module parse failed: Unexpected token (13:2)
You may need an appropriate loader to handle this file type.
|
| const modifierConfig = {
|   ...fontColors,
|   ...fontSizes,
|   ...fontStyles,

STEPS TO REPRODUCE

Clone repo
Run yarn or npm install
Run yarn styleguide

SUGGESTED SOLUTION

It seems to be a problem with the spread operator being used here, digging around it may be a problem with react-styleguidist and how they are using webpack/babel, but I'm not certain.