with styled-components 💅
This is a companion repo for my Medium article.
To install dependencies with Yarn, run:
$ yarn install
or to install with npm, run:
$ npm install
This component library borrows its structure from BEM and is set up to use Blocks, Elements, and Modifiers. Below is a description of each.
Blocks are the highest level of abstraction in the Blocks, Elements, Modifiers concept. They are responsible for providing the context for Elements, handling UI logic, and rendering the Elements within the Block. They are not connected to application state, nor do they handle any business logic.
Elements are the smallest, indivisible parts of UI. They are responsible for actually rendering the
UI. They do not handle application logic or UI logic, but they do handle their own modifiers which
modify the element’s style. Elements generally exist within the context of a Block (as their own
file in the Block’s directory) allowing the reuse of that set of Elements, but they are not
exclusively bound to blocks. An example of a stand-alone Element would be an A, Link, H3, or P.
These common elements live in lib/elements
.
This library utilizes
styled-components-modifiers
to build
modifiers. Modifiers are small functions that allow us to alter the properties of an Element.
They primarily live in the Element's file and are solely responsible for modifying styles.
Some modifiers are common to multiple Elements. An example would be fontWeights
.
These common modifiers live in lib/modifiers
Helpful information on development workflow in this library lives here.
NOTE: The linter will run against everything in the lib
directory. I've added an initial
.eslintrc
file for some basic configuration. Feel free to edit or replace it as needed. The
intent is to help give you a guide for syntax as you build your application. However, if the
linters are too distracting and / or confusing, feel free to ignore them.
This assumes you have eslint and eslint-watch installed. If you don't, run the following:
$ npm i -g eslint eslint-watch
or if you need permissions:
$ sudo npm i -g eslint eslint-watch
To run the linter once:
$ yarn lint:js
To run the watch task:
$ yarn lint:js:watch
I've also added a style linter for Sass / SCSS.
To run the style linter:
$ yarn lint:style
To run both linters:
$ yarn lint
To run the tests once:
$ npm test
To run the watch script (for only relevant test files)
$ npm run test:watch
To run the watch script (for all test files)
$ npm run test:watchAll
To view the coverage report:
$ npm run test:coverage:report
If you'd like to run the linters and tests at once (this is a nice check before pushing to Github or deploys), you can run:
$ npm run review
NOTE: When you run build
, Babel will create a build
directory. This is what your users
will interact with when they use your library. Nothing in lib
gets shipped with your
published module.
Run once:
$ npm run build
Run the watch script:
$ npm run build:watch
I am thankful for any contributions made by the community. By contributing you agree to abide by the Code of Conduct in the Contributing Guidelines.