Adds Content component

packages/buttons/src/Button.js

@@ -10,25 +10,23 @@ export const defaultTheme = {
   }
 }
 
-export default React.memo(
-  React.forwardRef(
-    function Button ({outline = false, ...props}, ref) {
-      return (
-        <ThemeConsumer path='button' defaultTheme={defaultTheme}>
-          {({theme}) => {
-            props = {...theme.defaultProps, ...props}
+export default React.forwardRef(
+  function Button ({outline = false, ...props}, ref) {
+    return (
+      <ThemeConsumer path='button' defaultTheme={defaultTheme}>
+        {({theme}) => {
+          props = {...theme.defaultProps, ...props}
 
-            if (outline === true) {
-              props.bc = props.bg || theme.bg
-              props.bg = 'transparent'
-              delete props.sh
-              Object.assign(props, theme.outline)
-            }
+          if (outline === true) {
+            props.bc = props.bg || theme.bg
+            props.bg = 'transparent'
+            delete props.sh
+            Object.assign(props, theme.outline)
+          }
 
-            return <Button ref={ref} {...props}/>
-          }}
-        </ThemeConsumer>
-      )
-    }
-  )
+          return <Button ref={ref} {...props}/>
+        }}
+      </ThemeConsumer>
+    )
+  }
 )

packages/buttons/src/TypeButton.js

@@ -28,6 +28,7 @@ export default React.forwardRef(
           typeColor = typeColor || theme.type.color
 
           const typeProps = Object.assign(
+            {},
             theme.type,
             {
               face: typeFace || theme.type.face,

packages/content/.babelrc

@@ -0,0 +1,16 @@
+{
+  "presets": [
+    ["@inst-app/react", {"removePropTypes": false}]
+  ],
+
+  "env": {
+    "cjs": {
+      "presets": ["@inst-app/esx"]
+    },
+    "es": {
+      "presets": [
+        ["@inst-app/esx", {"env": {"modules": false}}]
+      ]
+    }
+  }
+}

packages/content/.gitignore

@@ -0,0 +1,6 @@
+.git
+node_modules
+.DS_Store
+*.log
+dist
+.idea

packages/content/.npmignore

@@ -0,0 +1,4 @@
+node_modules
+.babelrc
+*.log
+.idea

packages/content/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 Jared Lunde
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/content/README.md

@@ -0,0 +1,49 @@
+# @stellar-apps/content
+A component for establishing site-wide content widths
+
+## Installation
+`yarn add @stellar-apps/content`
+
+## Usage
+```js
+import Content from '@stellar-apps/content'
+
+
+function HomePage(props) {
+  return (
+    <Box>
+      <Content>
+        Some content constrained to the content width
+      </Content>
+
+      <Content slim>
+        Some content constrained to the slim content width
+      </Content>
+    </Box>
+  )
+}
+```
+
+### `Content`
+### Props
+In addition to the props below, this component accepts any prop that `curls/Box` accepts.
+- `slim {bool}`
+    - **default** `width * 0.61803398875 // golden ratio`
+    - Uses the `slimWidth` defined in the theme
+
+### defaultCSS
+```js
+const defaultCSS = css`
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+`
+```
+
+### defaultTheme
+```js
+const defaultTheme = {
+  width: 1360,
+  slimWidth: null // width * 0.61803398875
+}
+```

packages/content/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@stellar-apps/content",
+  "version": "1.0.0",
+  "main": "dist/cjs/index.js",
+  "author": "Jared Lunde <[email protected]> (https://BeStellar.co)",
+  "license": "MIT",
+  "sideEffects": false,
+  "module": "dist/es/index.js",
+  "repository": "https://github.com/jaredLunde/stellar-apps/tree/master/packages/content",
+  "scripts": {
+    "build": "yarn run build:es && yarn run build:cjs",
+    "build:es": "rimraf dist/es && cross-env NODE_ENV=production BABEL_ENV=es babel src --out-dir dist/es && npm run prettier:es",
+    "build:cjs": "rimraf dist/cjs && cross-env NODE_ENV=production BABEL_ENV=cjs babel src --out-dir dist/cjs && npm run prettier:cjs",
+    "watch:es": "rimraf dist/es && cross-env NODE_ENV=production BABEL_ENV=dist/es babel src -w --out-dir dist/es",
+    "prettier": "prettier --single-quote --no-semi --no-bracket-spacing --trailing-comma es5 --write",
+    "prettier:es": "yarn prettier \"dist/es/**/*.js\"",
+    "prettier:cjs": "yarn prettier \"dist/cjs/**/*.js\""
+  },
+  "devDependencies": {
+    "@inst-app/babel-preset-esx": "^1.0.15",
+    "@inst-app/babel-preset-react": "^1.0.4",
+    "prettier": "^1.15.3"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.2.0"
+  },
+  "peerDependencies": {
+    "curls": "^1.1.5",
+    "emotion": "^10.0.6",
+    "prop-types": "^15.6.0",
+    "react": "^16.7.0"
+  }
+}

packages/content/src/Content.js

@@ -0,0 +1,54 @@
+import React from 'react'
+import {css} from 'emotion'
+import PropTypes from 'prop-types'
+import {createComponent, renderNode, FlexBox} from 'curls'
+
+
+const nodeType = 'div'
+const defaultCSS = css`
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+`
+
+const defaultTheme = {
+  width: 1360,
+  slimWidth: null
+}
+
+const SFC = createComponent({
+  name: 'Content',
+  propTypes: {
+    slim: PropTypes.bool
+  },
+  CSS: {
+    __base: (val, theme) => css`max-width: ${theme.width}px;`,
+    slim: (val, theme) => val === true && (
+      css`max-width: ${theme.slimWidth || theme.width * 0.61803398875}px;`
+    )
+  },
+  defaultTheme,
+  themePath: 'content'
+})
+
+
+export default React.forwardRef(
+  function Content (props, innerRef) {
+    return SFC({
+      __base: true,
+      innerRef,
+      ...props,
+      children: function (boxProps) {
+        boxProps.children = function (nodeProps) {
+          nodeProps.children = props.children
+          nodeProps.nodeType = nodeProps.nodeType || nodeType
+          delete nodeProps.__base
+
+          return renderNode(nodeProps, defaultCSS)
+        }
+
+        return FlexBox(boxProps)
+      }
+    })
+  }
+)

packages/content/src/index.js

@@ -0,0 +1 @@
+export default from './Content'