lukemelia

My team and I have been working on a new internal component library to share across a few Ember apps. The library is an Ember addon in a private github repo. So far, so good. The off-the-beaten-path part of our requirements is that the components need to be themeable. Specifically, we support a color and a "light" or "dark" aesthetic.

We want a great developer experience for creating and updating these components, so we used ember-freestyle as a devDependency of the library to create a living style guide. We added some UI to allow theme switching and even a checkbox to switch themes every second (thanks ember-concurrency!).

The thing that gave us the biggest challenge was figuring out how to author and apply the styles that were necessarily dynamic. Specifically, the css rules that used the dynamic color.

We decided to organize our styles like so:

app/styles/components/

lukemelia

machine:
  node:
    version: 5

checkout:
  post:
    - git submodule sync
    - git submodule update --init

dependencies:

lukemelia

export function uuid() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r, v;
    r = Math.random() * 16 | 0;
    v = c === 'x' ? r : r & 3 | 8;
    return v.toString(16);
  });
}

lukemelia

import Ember from 'ember';
const { computed } = Ember;

export default Ember.Component.extend({
  backgroundColor: computed('model.backgroundColor', {
    get() {
      return this.get('model.backgroundColor');
    },
    set(key, val) {
      if (val && !/^#/.test(val) && val !== 'transparent') {

lukemelia

import Ember from 'ember';
const { computed } = Ember;
const { readOnly } = computed;

export default Ember.Component.extend({
  cost: readOnly('delayedCalculation.cost'),
  tax: readOnly('delayedCalculation.tax'),  
  total: computed('cost', 'tax', function() {
    return this.get('cost') + this.get('tax');
  }),

lukemelia

var LE = require('letsencrypt');
var pem = require('pem');
var RSVP = require('rsvp');
var fs = require('fs');
var path = require('path');
var mkdirp = require('mkdirp');

var domains, herokuAppName, duplicate;
if (process.env.YAPP_ENV === 'qa') {
  domains = ['heroku.yappqa.us', 'my.yappqa.us', 'api.yappqa.us', 'support.yappqa.us' ];

lukemelia

  //...
  app.import('vendor/ember-data-shims.js');
  //...

lukemelia

import { Promise } from 'liquid-fire';
import { animationFor } from '../utils/transition-helpers';

// `concurrent` is not, by itself, an animation. It exists to run two or more
// transitions concurrently.

export default function concurrent(...transitions) {
  return Promise.all(transitions.map((transition) => {
    return runAnimation(this, transition);
  }));

lukemelia

module.exports = function(deployTarget) {
  var ENV = {};
  if (deployTarget === 'production') {
    ENV.plugins = [
      'build', // perform the browser build
      's3:browser-s3', // upload the browser build to S3
      'gzip', // gzip the browser build assets
      'manifest', // avoid redundant uploads
      'fastboot', // perform the fastboot build, and merge in browser build details, zip and fingerprint the results
      's3:fastboot-s3', // upload the fastboot build to S3

lukemelia

// Shared under MIT License by Collectrium

import _ from 'lodash/lodash';
export default {
  setup(config = {}) {
    /*
     This method replaces window.io with a mock Socket.IO client
     interface which translates socket API requests to XHR requests
     that will be intercepted by Mirage. When the XHR request returns
     we process the result and send it back through the fake Socket.IO