Modernize cf-ui #93

tajo · 2017-03-14T01:01:21Z

Changes

Gulp is gone. Webpack rules everything now. Migrate to Webpack #23
The style-guide is now an app that's using webpack so you can use npm start and enjoy hot module replacement. You can build /docs through npm run build:styleguide.
The style-guide is server-side rendered (including Fela styles). There was a problem with cf-component-tooltip so it's not visible in the style guide for now.
CommonJS modules replaced by ES6 modules.
New build targets: ES6, UMD and UMD minified. Webpack2 can now use ES6 modules to do tree-shaking. CommonJS build is now done via Webpack as well.
Karma, Mocha, Chai, Browserify... all gone. All tests are using Jest. In rare cases where the DOM is needed, we use JSDom now. Jest for testing #73
- I had some weird problems with cf-util-http and cf-util-http-poll tests. They are skipped now. @jwineman promised to fix them :-). It's related to Upgrade superagent #67.
All READMEs udpated.

I didn't change functionality of any component. Everything's related only to the build process, style guide and testing.

There are probably some small errors in the style guide. Let's fix them later!

…-container external, so the umd builds are not bloated with 3rd party deps

…r (colors)

…pe warnings

…bs on babel level instead of webpack level

…ComponentTheme is used without global BaseTheme

terinjokes · 2017-03-14T02:26:27Z

😰

jwineman · 2017-03-14T15:58:22Z

discussions/no-customizing-classnames.md

@@ -1,58 +0,0 @@
-# No Customizing `className`'s


Why are we deleting this?

I guess because we use Fela, it will generate className automatically

Well, it's still true but we need to expose classNames so Fela can inject styles into the components. Eventually, I'm going to write some new pieces explaining the whole Fela thing.

I think the whole no className thing still applies. Customizing the classes through Fela is not the same as customizing it directly. Its probably worth explaining.

It definitely does, I just don't want to confuse people with "no classNames" article and then exposing classNames everywhere without explaining Fela bits.

I agree the current article is confusing given our current implementation. We don't have to do it in this PR but we should talk about separation of concerns at some point. The idea here is that the component is responsible for functionality and Fela is responsible for style, and modifying className without Fela violates that.

jwineman · 2017-03-14T15:59:12Z

discussions/no-es6-modules.md

@@ -1,53 +0,0 @@
-# No ES6 Modules


I might update this rather than deleting it, explaining why we chose webpack2 etc.

Yea. I'll write something but later.

sejoker · 2017-03-14T15:45:22Z

.babelrc

-  "presets": ["es2015", "react"],
-  "plugins": ["transform-object-rest-spread"]
+  "presets": [
+    ["es2015", { "modules": false }],


obviously, it is out of the scope of this PR, is it agreed not to use ES modules in this repo?

This PR changes everything to ES6 modules. Now, there's webpack2 that can handle them so there is no need for babel transformation which was main reason why not to use them before.

sejoker · 2017-03-14T15:54:36Z

build.sh

@@ -0,0 +1,10 @@
+#!/bin/sh


please move into scripts folder

sejoker · 2017-03-14T16:20:29Z

CONTRIBUTING.md

-$ git tag -a "[[version]]"
-$ npm publish
-$ git push origin master --follow-tags
+npm run publish


if someone wants to publish single/multiple packages is the 'npm run publish' will be used in both cases?

yes, lerna has a nice interface to select what and how to publish

sejoker · 2017-03-14T16:21:30Z

discussions/functional-testing-containers.md

@@ -21,7 +21,7 @@ functions that take state and render UI.
 A unit test for state => ui looks something like this:

 ```js
-it('should render the list of items', function() {
+test('should render the list of items', function() {


could update using () => {} syntax

sejoker · 2017-03-14T16:22:30Z

package.json

-    "babel-generator": "^6.18.0",
-    "babel-loader": "^6.3.2",
+    "babel-jest": "^19.0.0",
+    "babel-loader": "7.0.0-alpha.3",


are you sure it is a good idea using alpha version?

yea, because of this babel/babel-loader#391

sejoker · 2017-03-14T16:27:16Z

packages/cf-builder-pagination/example/basic/component.js

-const React = require('react');
-const { render } = require('react-dom');
-const { PaginationBuilder } = require('../../src/index');
+import React from 'react';


we change from common.js to es6 modules syntax. Is it not enough to bump package version of all components?

Not sure what you mean by this.

Changing the module syntax for our imports doesn't represent a SEMVER incompatible API change, as far as I'm aware.

The actual /lib output should be identical. The main index.js is still commonjs module. But now we add /es target where ES6 modules are preserved and webpack2 or rollup can leverage that. Also /dist target for UMD builds - I'm going to put them on cdnjs.com.

tajo added 30 commits March 5, 2017 23:08

add new builds: umd, es and commonjs powered by webpack

8e798f4

make prettier ignoring es/ and dist/ folders

05d914e

replace commonjs modules by es6 modules

9e40f7d

fix umd builds

f1bde3b

move postcss-color-function into cf-style-container and make cf-style…

e4719ce

…-container external, so the umd builds are not bloated with 3rd party deps

link es6 exports for packages

57f8e57

replace CloudFlare by Cloudflare

c4878b4

fix some export defaults

3ae9a0d

replace commonjs modules by es6 modules in examples

24d682b

export examples so they can be part of the new styleguide

17c5737

add legacy stylesheets to the styleguide

36e456b

match the structure of the old styleguide, make the code example nice…

f39cb71

…r (colors)

add autogenerator for examples, fix multiple export errors and propTy…

ba60b31

…pe warnings

move react to peerDeps, more fixes

fcc6dc6

use button v4 in all other components

facc4f2

fix dropdown, fix non React elements in ButtonGroup

365e256

apply global theme to the whole styleguide, style the Button component

53b4114

return example content ids to fix styling

82b1082

purge gulpfile and deps

0e59869

fix cf-test-stub exports

1b641fc

fix the static build of styleguide (remove tooltip for now), alias li…

a4dcb6d

…bs on babel level instead of webpack level

add POC jest snapshot tests for an old component and new one

91a2747

add global theme into felaTestContext, add an descriptive error when …

36b7d89

…ComponentTheme is used without global BaseTheme

add test for ButtonGroup

9519f17

add tests for cf-builder-card

ce6364d

update and clean main dependencies

51af60f

say goodbye to gulp and karma

390029d

update travis.yml

080e771

run prettier 0.22

8164c7a

update discussions

d5300ca

tajo added 5 commits March 13, 2017 16:19

add tests for cf-util-markdown

851da10

put cf-util-http tests back and skip them

b9eee55

rename testj to test since all old tests are gone, yay

a74edb1

update readmes

eeb31e2

remove devDeps from packages since they are not needed

a06e928

tajo requested review from hturan, wyuenho, toekneestuck, jculvey, terinjokes, koddsson, marksteyn, prestonp, manatarms and jwineman March 14, 2017 01:01

tajo added 3 commits March 13, 2017 18:08

update travis

d497021

typo in travis.yml

89ad8f4

drop node v4 from the travis

f78c23b

jwineman reviewed Mar 14, 2017

View reviewed changes

sejoker suggested changes Mar 14, 2017

View reviewed changes

tajo added 2 commits March 14, 2017 09:57

move build.sh into scripts

2141899

replace function() by fat arrow

52adef7

sejoker approved these changes Mar 14, 2017

View reviewed changes

jwineman approved these changes Mar 14, 2017

View reviewed changes

jculvey approved these changes Mar 14, 2017

View reviewed changes

tajo merged commit b8ad457 into cloudflare:master Mar 14, 2017

This was referenced Mar 14, 2017

Jest for testing #73

Closed

Migrate to Webpack #23

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Modernize cf-ui #93

Modernize cf-ui #93

tajo commented Mar 14, 2017

terinjokes commented Mar 14, 2017

jwineman Mar 14, 2017

sejoker Mar 14, 2017

tajo Mar 14, 2017

jwineman Mar 14, 2017

tajo Mar 14, 2017

jwineman Mar 14, 2017

jwineman Mar 14, 2017

tajo Mar 14, 2017

sejoker Mar 14, 2017

tajo Mar 14, 2017

sejoker Mar 14, 2017

tajo Mar 14, 2017

sejoker Mar 14, 2017

tajo Mar 14, 2017 •

edited

sejoker Mar 14, 2017

tajo Mar 14, 2017

sejoker Mar 14, 2017

tajo Mar 14, 2017

sejoker Mar 14, 2017

tajo Mar 14, 2017

hturan Mar 14, 2017

tajo Mar 14, 2017 •

edited

Modernize cf-ui #93

Modernize cf-ui #93

Conversation

tajo commented Mar 14, 2017

Changes

terinjokes commented Mar 14, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tajo Mar 14, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tajo Mar 14, 2017 • edited

Choose a reason for hiding this comment

tajo Mar 14, 2017 •

edited

tajo Mar 14, 2017 •

edited