@smashgg/gg-components

A Component Pattern Library for GG-Web

Usage no npm install needed!

<script type="module">
  import smashggGgComponents from 'https://cdn.skypack.dev/@smashgg/gg-components';
</script>

README

Description

gg-components is a Component / Pattern Library. Visualized by http://storybook.smash.gg/

Getting Started

  1. Clone the Repo: git clone git@github.com:smashgg/gg-components.git.
  2. Open the Directory: cd gg-components.
  3. Run the Setup: npm run setup.
  4. Open localhost:8080.
  5. Get Component-ing!

Devloping in storybook

  1. Run: npm run storybook.
  2. Open localhost:6006.
  3. Get Component-ing!

Running / Writing Tests

  1. Run: npm run tdd.
  2. Write moar tests!

Making a new Component

  1. 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');
    });
});
  1. 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

  1. 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.

  2. 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 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

  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)

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