A Component Pattern Library for GG-Web
npm install @smashgg/gg-componentsgit clone git@github.com:smashgg/gg-components.git.cd gg-components.npm run setup.localhost:8080.npm run storybook.localhost:6006.npm run tdd.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
describe('GettingStarted', () => {
test('is a span element', () => {
const wrapper = shallow( ); expect(wrapper.type()).toEqual('span');
});
});
`
2. 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.3. 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.
4. 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
1. Run: npm run prepublish (Webpack builds all required vendor dlls and our code with npm run dll && npm run build).
2. Read up on npm publish here and npm version here.
3. 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 publishstyleName 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:
`
`
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 (
className="fa fa-apple"
styleName="apple"
/>
);
}export default Apple;
`
`
/ CSS /
.apple {
color: #f00;
}
`
Result:
`
`Best Practices
1. Write your tests first!
2. Use EMs / % for your measurements! No Pixels!
3. Use :root variables as often as you can!
4. D.R.Y! (Don't repeat yourself!)
5. Prefer Functions over Stateless Components over React.createClass!
6. Love ES6!PostCSS Gotchas (for those used to SASS)
$3
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);
}
``