Copy files

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    [
+      "env", {
+        "targets": {
+          "electron": "2.0"
+        }
+      }
+    ],
+    "stage-0",
+    "react"
+  ]
+}

.gitignore

@@ -0,0 +1,3 @@
+dist
+renderer
+coverage

LICENSE.md

@@ -0,0 +1,11 @@
+
+# The MIT License (MIT)
+
+Copyright (c) 2018 Compositor, Inc.
+
+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.
+

README.md

@@ -1,9 +1,61 @@
 
-# Iso beta
+# Iso
 
-Build pages and prototypes with Lab UI components. No configuration or build setup required.
+Build and prototype with pure JSX – no build setup or command line required
 
-![](https://compositor.io/images/iso-hero.jpg)
+<img src='docs/macbook-gray.jpg'>
+
+- [Download Iso][download]
+- [Documentation][docs]
+
+---
+
+- Prototype with React components
+- Create layouts using only JSX
+- No command line required
+- No build setup
+- Configurable component libraries
+- Configurable themes
+- Support for [styled-components][sc]
+
+---
+
+## Contributing
+
+### Development
+
+Install dependencies
+
+```sh
+npm i
+```
+
+Compile source code for the renderer process
+
+```sh
+npm run watch
+```
+
+Start the electron app
+
+```sh
+npm start
+```
+
+---
+
+### Migrating from previous Iso versions (below v0.1.0)
+
+Iso v0.1.0 includes breaking changes for how JSX files and configurations work.
+If you've used a previous version of Iso, see the [Migration Guide](docs/migration.md) for more information.
+
+---
+
+[Made by Compositor](https://compositor.io)
+|
+[MIT License](LICENSE.md)
+
+[sc]: https://github.com/styled-components/styled-components
+[download]: https://iso.c8r.io
+[docs]: docs/
 
-- [Download](https://iso.c8r.io)
-- [Documentation](docs/)

docs/components.md

@@ -0,0 +1,136 @@
+
+# Components
+
+Iso includes a small set of default UI components to get started quickly.
+If you've used styled-system, Rebass, or Grid Styled, these components should look familiar.
+
+To use your own component library with Iso, see the [configuration docs](configuration.md).
+
+[sys]: https://github.com/jxnblk/styled-system
+[rebass]: https://github.com/jxnblk/rebass
+[grid-styled]: https://github.com/jxnblk/grid-styled
+
+- [Common Props](#common-props)
+- [Responsive Props](#responsive-props)
+- [Box](#box)
+- [Flex](#flex)
+- [Text](#text)
+- [Heading](#heading)
+- [Link](#link)
+
+## Common Props
+
+All default Iso components include the following props:
+
+- margin
+  - `m`: margin
+  - `mt`: margin-top
+  - `mr`: margin-right
+  - `mb`: margin-bottom
+  - `ml`: margin-left
+  - `mx`: margin-left and margin-right
+  - `my`: margin-top and margin-bottom
+- padding
+  - `p`: padding
+  - `pt`: padding-top
+  - `pr`: padding-right
+  - `pb`: padding-bottom
+  - `pl`: padding-left
+  - `px`: padding-left and padding-right
+  - `py`: padding-top and padding-bottom
+- `color`: text color
+- `bg`: background-color
+
+## Responsive Props
+
+Many style props accept array values for responsive styles.
+
+```jsx
+<Box m={[ 1, 2, 4 ]} />
+// margin 1 at the smallest breakpoint, then 2 and 4 at the next breakpoints
+```
+
+Read more about responsive props in the [Styled System docs](https://github.com/jxnblk/styled-system#responsive-styles)
+
+## Box
+
+The `Box` component is a general purpose box-model layout component that handles margin, padding, width, and color.
+
+```jsx
+<Box px={3} py={4} color='white' bg='blue'>
+  Hello
+</Box>
+```
+
+**Props**
+
+- `width` sets percentage-based widths with fractional numbers or pixel-based widths with integer numbers
+- `flex` CSS flex shorthand property
+- `alignSelf` CSS align-self
+- `order` CSS order
+
+Read more about the `Box` component in the [Grid Styled][grid-styled] docs.
+
+## Flex
+
+The `Flex` component is an extension of the `Box` component with flexbox style props
+
+```jsx
+<Flex alignItems='center' flexWrap='wrap'>
+  <Box width={1/2}>Half width Box</Box>
+  <Box width={1/2}>Half width Box</Box>
+</Flex>
+```
+
+**Props**
+
+The `Flex` component includes all the `Box` props in addition to the following:
+
+- `alignItems` CSS align-items
+- `justifyContent` CSS justify-content
+- `flexDirection` CSS flex-direction
+- `flexWrap` CSS flex-wrap
+
+Read more about the `Flex` component in the [Grid Styled][grid-styled] docs.
+
+## Text
+
+The `Text` component is a general purpose typographic component that handles font-size, weight, line-height, and more.
+
+```jsx
+<Text fontSize={4} fontWeight='bold'>
+  Hello
+</Text>
+```
+
+**Props**
+
+- `fontSize` CSS font-size
+- `fontWeight` CSS font-weight
+- `textAlign` CSS text-align
+- `lineHeight` CSS line-height
+
+## Heading
+
+The `Heading` component is an extension of the `Text` component meant for headings.
+
+```jsx
+<Heading>
+  Hello
+</Heading>
+```
+
+**Props**
+
+The `Heading` component includes the same props as the `Text` component
+
+## Link
+
+The `Link` component is an interactive component for linking documents, i.e. the HTML `<a>` tag.
+
+```jsx
+<Link href='/hello' color='red'>
+  Hello
+</Link>
+```
+

docs/configuration.md

@@ -0,0 +1,74 @@
+
+# Configuration
+
+To use a custom component library or theme with Iso, create an `iso.config.js` file in your project directory.
+This file should be compatible with with Node.js and browser environments and export `components` and `theme` objects.
+
+In your project folder, ensure all npm dependencies are installed.
+
+```
+// example iso.config.js
+const Rebass = require('rebass')
+
+module.exports = {
+  components: Rebass,
+  theme: Rebass.theme
+}
+```
+
+## Components
+
+The `components` object should be a flat object of React components.
+The key used in the object will be included in scope in Iso.
+
+```js
+// example iso.config.js
+const { Box, Donut } = require('rebass')
+
+module.exports = {
+  components: {
+    Box,
+    Donut
+  }
+}
+```
+
+With the above configuration, you can use the `Box` and `Donut` components from [Rebass][rebass] in your JSX file.
+
+```jsx
+<Box p={3}>
+  <Donut
+    value={1/2}
+    size={256}
+    color='tomato'
+  />
+</Box>
+```
+
+## Theme
+
+If you're using [styled-components][sc], you can include a theme by exporting a `theme` object from `iso.config.js`.
+
+```js
+// example iso.config.js
+const theme = {
+  colors: {
+    text: '#222',
+    blue: '#07c'
+  }
+}
+
+module.exports = {
+  theme
+}
+```
+
+### Troubleshooting Configurations
+
+- Ensure the module is Node.js compatible
+- Ensure all dependencies are installed in your project folder
+- Ensure the file does not use JSX or other Babel or webpack features
+
+[rebass]: https://github.com/jxnblk/rebass
+[sc]: https://github.com/styled-components/styled-components
+