Description
gg-components is a Component / Pattern Library. Visualized by http://storybook.smash.gg/
Getting Started
- Clone the Repo:
git clone git@github.com:smashgg/gg-components.git
. - Open the Directory:
cd gg-components
. - Run the Setup:
npm run setup
. - Open
localhost:8080
. - Get Component-ing!
Devloping in storybook
- Run:
npm run storybook
. - Open
localhost:6006
. - Get Component-ing!
Running / Writing Tests
- Run:
npm run tdd
. - Write moar tests!
Making a new Component
- Create a
ComponentName.spec.js
file in the same directory as the component you are testing (e.g. MyFoo/MyFoo.jsx, MyFoo/MyFoo.spec.js). Your first test could assert that
the component returns the element you expect it to when render is called, for example:
describe('GettingStarted', () => {
test('is a span element', () => {
const wrapper = shallow(<GettingStarted />);
expect(wrapper.type()).toEqual('span');
});
});
- Create a
ComponentName
directory in the src/components
directory. This directory should have
at least 2 files: index.jsx
and ComponentName.jsx
. index.jsx
just imports and exports
./ComponentName.jsx
.
Example Component
-
Continue adding Tests into your test spec. It's best practice to write failing tests that resolve
themselves while you continue writing your new component.
-
Once your component is nearing a completed state, it's time to export the component to Storybook.
To prepare your component to be exported, you currently need to add the component to src/index.js
.
It's probably time for you to read the docs of https://github.com/smashgg/gg-storybook!
Building the Distribution for Storybook / Elsewhere
- Run:
npm run prepublish
(Webpack builds all required vendor dlls and our code with npm run dll && npm run build
). - Read up on
npm publish
here and npm version
here. - When ready to publish a new version run:
npm run publish:patch
it will auto bump to a new version and publish the package and create a new commit with the same information. Don't forget to push the version commit so we track the new publish
styleName Vs. className
React CSS Modules automates loading of CSS Modules using the styleName property. The easiest way to think about the difference between StyleName and ClassName is the below example:
<div className='global-css' styleName='local-module'></div>
The convention for React CSS Modules is that styleName is for Interoperable CSS (CSS Modules) and className is for CSS.
Example:
/* JSX */
import React from 'react';
import './index.css';
function Apple() {
return (
<div
className="fa fa-apple"
styleName="apple"
/>
);
}
export default Apple;
/* CSS */
.apple {
color: #f00;
}
Result:
<div className="fa fa-apple src-components-Apple-___index__apple___2KF4L"></div>
Best Practices
- Write your tests first!
- Use EMs / % for your measurements! No Pixels!
- Use :root variables as often as you can!
- D.R.Y! (Don't repeat yourself!)
- Prefer Functions over Stateless Components over React.createClass!
- Love ES6!
PostCSS Gotchas (for those used to SASS)
Math on :root variables is kinda tricky.
This does not work:
$margins : var(--spacing--sm);
.foo {
margin: -$margins 0 $margins -$margins;
}
Works:
$margins : var(--spacing--sm);
.foo {
margin: calc($margins * -1) 0 $margins calc($margins * -1);
}
Further Reading
webpack
post-css
css-modules
babel
babel-plugin-react-css-modules