Merge pull request #38 from skellock/glamor

Winner by TKO.... glamor!

Author: skellock

docs/stack.md

@@ -27,11 +27,50 @@ Some automation so I stop checking in crap-looking code.
 
 Can't imagine doing web differently to be honest. I'm sure we will soon, but for mid-2017, this is dominating.
 
-> **vanilla react**
+I like `preact` as well.  I feel like the switching over will be pretty simple and I probably will.
 
-There are lot of great libraries out there for UI. This intentionally uses none of them. Don't hestitate to bring one in and use it if that's how you roll.
 
-I'm keep it straight-up react here because some types of apps I'd will be using webgl, pixi, or are pure svg interfaces.
+## Component Styling ##
+
+> **glamor**
+
+The winner is: 
+
+* ~vanilla css~ 
+* ~sass~ 
+* ~css modules~
+* ~diy~
+* ~radium~
+* ~aphrodite~
+* ~styletron~
+* ~styled-components~
+* ~typestyle~
+* ~emotion~
+* ~glam~
+* ~glamorous~
+* `glamor`!
+
+I've flip-flopped on this quite a bit. We're spoiled by awesome options.
+
+`glamor` nails what I'm looking for:
+
+* ✅  objects are first class
+* ✅  strong on composibility
+* ✅  performant out of the box (without configuration)
+* ✅  works well with global styles and things like keyframes
+* ✅  friendly devs
+* ✅  a DSL that is true to CSS (especially with child selectors)
+* ✅  built-in escape hatches
+* ✅  clear docs with examples, patterns, and advice
+* ✅  stable-ish API
+* ✅  TypeScript-friendly
+* ✅  testability without flushing caches or buffers
+
+My advice? **Don't listen to my advice**. Explore & pick your own. Much, if not most, of your app is UI. 
+
+Start your app only when your gut says, "You'll fuck this up long before your styling lib gives out."
+
+`glamor` gives me that vibe. 💃
 
 
 ## State Management

package-lock.json

@@ -41,6 +41,7 @@
     "electron-log": "2.2.7",
     "electron-store": "1.2.0",
     "electron-updater": "2.8.2",
+    "glamor": "2.20.39",
     "mobx": "3.2.2",
     "mobx-react": "4.2.2",
     "mobx-state-tree": "0.9.5",

package.json

@@ -1,16 +1,19 @@
 import * as React from 'react'
-import { CSSProperties } from 'react'
 import { WelcomeScreen } from '..'
-import './reset.css'
-import './app.css'
+import { styles, cssProps, colors } from '../../platform'
+import { css, compose } from 'glamor'
 
-// this is in place to claim 100% of the viewport and not scroll.
-const rootStyle: CSSProperties = { overflow: 'hidden', height: '100vh', display: 'flex' }
+const ROOT = compose(
+  styles.fullScreen,
+  cssProps({
+    backgroundColor: colors.background,
+  }),
+)
 
 export class App extends React.Component<{}, {}> {
   render() {
     return (
-      <div style={rootStyle}>
+      <div {...css(ROOT)}>
         <WelcomeScreen />
       </div>
     )

src/renderer/features/app/app.css

@@ -1,15 +1,14 @@
 import * as React from 'react'
-import { CSSProperties } from 'react'
-import { Text, CenteredContent, spacing } from '../../../platform'
-import { FunDog } from '../fun-dog/fun-dog'
-import { Logo } from '../logo/logo'
+import { Text, CenteredContent, spacing, cssProps } from '../../../platform'
+import { FunDog } from '../fun-dog'
+import { Logo } from '../logo'
 
-const TEXT_STYLE: CSSProperties = {
+const TEXT_STYLE = cssProps({
   paddingTop: spacing.medium,
   paddingBottom: spacing.medium,
-}
+})
 
-export class DogTab extends React.Component<{}, {}> {
+export class DogTab extends React.PureComponent<{}, {}> {
   render() {
     return (
       <CenteredContent>

src/renderer/features/app/app.tsx

@@ -0,0 +1 @@
+export * from './dog-tab'

src/renderer/features/app/reset.css

@@ -1,8 +1,14 @@
 import * as React from 'react'
 import dogImage from './fun-dog.jpg'
+import { cssProps } from '../../../platform'
+import { css } from 'glamor'
 
-const style = { width: 300, borderStyle: 'solid', borderWidth: 1 }
+const ROOT = cssProps({
+  width: 300,
+  borderStyle: 'solid',
+  borderWidth: 1,
+})
 
 export function FunDog() {
-  return <img draggable={false} src={dogImage} style={style} />
+  return <img draggable={false} src={dogImage} {...css(ROOT)} />
 }

src/renderer/features/example-using-tabs/dog-tab/dog-tab.tsx

@@ -0,0 +1 @@
+export * from './fun-dog'

src/renderer/features/example-using-tabs/dog-tab/index.ts

@@ -1,23 +1,25 @@
 import * as React from 'react'
-import { CSSProperties } from 'react'
-import { Text, spacing, colors, fontSizes } from '../../../platform'
+import { Text, spacing, colors, fontSizes, styles, cssProps } from '../../../platform'
 import { isMac } from '../../../../shared'
 import { remote } from 'electron'
+import { compose } from 'glamor'
 
-const ROOT_STYLE: CSSProperties = {
-  WebkitAppRegion: 'drag',
-  textAlign: 'center',
-  paddingTop: spacing.verySmall,
-  backgroundColor: colors.headerBg,
-  fontSize: fontSizes.small,
-}
+const ROOT = compose(
+  styles.windowDrag,
+  cssProps({
+    textAlign: 'center',
+    paddingTop: spacing.verySmall,
+    backgroundColor: colors.headerBg,
+    fontSize: fontSizes.small,
+  }),
+)
 
 const title = remote.require('../package.json').name
 
 export function Header() {
   if (isMac()) {
     return (
-      <Text style={ROOT_STYLE}>
+      <Text style={ROOT}>
         {title}
       </Text>
     )

src/renderer/features/example-using-tabs/fun-dog/fun-dog.tsx

@@ -0,0 +1 @@
+export * from './header'

src/renderer/features/example-using-tabs/fun-dog/index.ts

@@ -1 +1 @@
-export * from './welcome-screen/welcome-screen'
+export * from './welcome-screen'

src/renderer/features/example-using-tabs/header/header.tsx

@@ -0,0 +1 @@
+export * from './logo'

src/renderer/features/example-using-tabs/header/index.ts

@@ -1,9 +1,14 @@
 import * as React from 'react'
-import { CSSProperties } from 'react'
+import { cssProps, animations } from '../../../platform'
 import icon from './electron-icon.svg'
+import { css } from 'glamor'
 
-const style: CSSProperties = { width: 80, height: 80, animation: 'spin360 infinite 5s linear' }
+const ROOT = cssProps({
+  width: 80,
+  height: 80,
+  animation: `${animations.spin360} infinite 5s linear`,
+})
 
 export function Logo() {
-  return <img draggable={false} src={icon} style={style} />
+  return <img draggable={false} src={icon} {...css(ROOT)} />
 }

src/renderer/features/example-using-tabs/index.ts

@@ -0,0 +1 @@
+export * from './long-tab'