re-add v10.0

README.md

@@ -0,0 +1,86 @@
+<p align="center">
+  <img src="assets/logo.svg" width="170px">
+  <h1 align="center">Tandem (Preview)</h1>
+</p>
+
+> Tandem is still new, so expect bugs. If you'd like to contribute, feel free to reach out to [email protected].
+
+<!-- [![Backers on Open Collective](https://opencollective.com/tandem/backers/badge.svg)](#backers)
+[![Sponsors on Open Collective](https://opencollective.com/tandem/sponsors/badge.svg)](#sponsors) -->
+
+Tandem is a UI builder for web applications. It currently works with React, other languages & frameworks will be supported in the future. The primary goal for Tandem is to provide a faster, easier, safer, and more scalable alternative to handwritten HTML & CSS code.
+
+![Split view](./assets/screenshots/v10.1.7.png)
+
+### Installation
+
+Tandem works in Windows & MacOS. There are a few ways you can install it:
+
+a. Download the stand alone version: https://github.com/tandemcode/tandem/releases
+
+b. Install the command line tools:
+
+```bash
+npm install tandem-cli --save-dev
+cd path/to/app
+
+# Create a new project
+./node_modules/.bin/tandem init
+
+# Open project
+./node_modules/.bin/tandem open
+```
+
+The command line tools can manage multiple versions of Tandem, which is helpful for multiple projects that use different UI file (`*pc`) versions.
+
+More info can be found in the [installation docs](./docs/installation.md)
+
+### Highlights
+
+- Designed to work with existing code (currently only React).
+- Not a code replacement. Tandem only allows you to create simple HTML & CSS.
+- Unopinionated, so you can adapt Tandem to fit your needs.
+- UI files can be split out into multiple files, and organized however you want.
+- Handwritten HTML & CSS can be mixed with Tandem UIs (this is helpful if you need to integrate complex code).
+- Few abstractions. Tandem gives you transparent tooling that's based on web standards.
+
+### Resources
+
+- [Installation](./docs/installation.md)
+- [Releases](https://github.com/tandemcode/tandem/releases)
+- [Tutorial videos](https://www.youtube.com/playlist?list=PLCNS_PVbhoSXOrjiJQP7ZjZJ4YHULnB2y)
+- [Terminology & Concepts](./docs/concepts.md)
+- [Goals & Non-goals](./docs/goals.md)
+- [Examples](./examples)
+- [Development](./docs/contributing/development.md)
+- Language integrations
+  - [React](./packages/paperclip-react-loader)
+
+<!--
+## Contributors
+
+This project exists thanks to all the people who contribute.
+<a href="https://github.com/tandemcode/tandem/graphs/contributors"><img src="https://opencollective.com/tandem/contributors.svg?width=890&button=false" /></a>
+
+## Backers
+
+Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/tandem#backer)]
+
+<a href="https://opencollective.com/tandem#backers" target="_blank"><img src="https://opencollective.com/tandem/backers.svg?width=890"></a>
+
+## Sponsors
+
+Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/tandem#sponsor)]
+
+<a href="https://opencollective.com/tandem/sponsor/0/website" target="_blank"><img src="https://opencollective.com/tandem/sponsor/0/avatar.svg"></a>
+<a href="https://opencollective.com/tandem/sponsor/1/website" target="_blank"><img src="https://opencollective.com/tandem/sponsor/1/avatar.svg"></a>
+<a href="https://opencollective.com/tandem/sponsor/2/website" target="_blank"><img src="https://opencollective.com/tandem/sponsor/2/avatar.svg"></a>
+<a href="https://opencollective.com/tandem/sponsor/3/website" target="_blank"><img src="https://opencollective.com/tandem/sponsor/3/avatar.svg"></a>
+<a href="https://opencollective.com/tandem/sponsor/4/website" target="_blank"><img src="https://opencollective.com/tandem/sponsor/4/avatar.svg"></a>
+<a href="https://opencollective.com/tandem/sponsor/5/website" target="_blank"><img src="https://opencollective.com/tandem/sponsor/5/avatar.svg"></a>
+<a href="https://opencollective.com/tandem/sponsor/6/website" target="_blank"><img src="https://opencollective.com/tandem/sponsor/6/avatar.svg"></a>
+<a href="https://opencollective.com/tandem/sponsor/7/website" target="_blank"><img src="https://opencollective.com/tandem/sponsor/7/avatar.svg"></a>
+<a href="https://opencollective.com/tandem/sponsor/8/website" target="_blank"><img src="https://opencollective.com/tandem/sponsor/8/avatar.svg"></a>
+<a href="https://opencollective.com/tandem/sponsor/9/website" target="_blank"><img src="https://opencollective.com/tandem/sponsor/9/avatar.svg"></a>
+
+-->

docs/app-config.md

@@ -0,0 +1,34 @@
+The app config (`*.tdproject`) files contain information about your application. Here's the basic contents of that file:
+
+```javascript
+{
+
+  // (optional)
+  "scripts": {
+
+    // (Comming Soon) preview server for components
+    "previewServer": "./path/to/preview-server/bin"
+  },
+
+  // the root directory of your project. Usually where your .tdproject file lives.
+  // This is mainly used to scan for *.pc files
+  "rootDir": ".",
+
+  // directories to exclude
+  "exclude": ["node_modules"],
+
+  // (optional) The path to the main component file. This file is opened when your
+  // tandem project is opened
+  "mainFilePath": "./src/main.pc"
+
+  // (optional) Directory where global properties are stored such as colors. If this file
+  // is omitted, then globals will be stored in mainFilePath if that's present.
+  "globalFilePath" : "./src/global.pc",
+
+  "options": {
+
+    // if false, then typography options will appear for text
+    "allowCascadeFonts": true // default value
+  }
+}
+```

docs/changelog.md

@@ -0,0 +1,27 @@
+## v10.0.23
+
+#### box shadow inputs
+
+inner & outer box shadows can now be set within the UI.
+
+#### gradient input
+
+TODO
+
+#### Inherit styles
+
+Re-added inherit styles pane
+
+## v10.0.11
+
+#### View controller UI
+
+There is now UI for view controllers.
+
+![untitled](https://user-images.githubusercontent.com/757408/42413585-d472e518-81f9-11e8-9a5b-b7e9cf779da4.gif)
+
+#### Ability to open controllers
+
+In addition to the new controller UI, you can also open controller files from Tandem.
+
+![untitled](https://user-images.githubusercontent.com/757408/42413784-d16b898e-81fd-11e8-892e-5dcf3c94feea.gif)

docs/concepts.md

@@ -0,0 +1,82 @@
+Many of the ideas behind Tandem were inspired by existing ideas (web components [shadow dom, global vars, slots, components], sass, less).
+
+#### Component
+
+A component is a re-usable element that can also be connected (controlled) with external code.
+
+![creating a component](../assets/tiny-demos/create-component-demo.gif)
+
+To convert an element into a component, right cick any node and select `Convert to Component`. To create an _instance_ of a component, either select the puzzle icon in the toolbar, or select any component, then copy & paste.
+
+#### Component instance
+
+An instance is linked to its associated component. If the component changes, so does the instance. All instances contain a [shadow](#shadow-nodes) that allows you to override node attribute or style in the instance.
+
+#### Slot
+
+A slot is a replaceable section of a component.
+
+![using slots](../assets/tiny-demos/creating-slots.gif)
+
+To create a slot, right click any node within a component (excluding [shadow nodes](#Shadow)), and select "Wrap in Slot". Slots can be used with instances.
+
+#### Shadow nodes
+
+Shadows are the _original_ nodes used to create instances.
+
+![changing shadow nodes](../assets/tiny-demos/editing-shadows.gif)
+
+Note that **styles** and **attributes** are the only things you can change for shadow nodes.
+
+#### style mixin
+
+A style mixin is a re-usable style that you can apply to any node.
+
+![defining style mixins](../assets/tiny-demos/creating-text-styles.gif)
+
+To create a mixin, right click any node and select either `Move All Styles to Mixin`, or `Move Text Styles to Mixin`.
+
+The primary motivation behind style mixins were to allow for groups of styles (especially for typography) to be defined and re-usable across multiple elements. They're also designed to be unopinionated, so you can mix & match whatever css properties you want.
+
+Style mixins are _also_ teed-up for different kinds of functionality in the future, such as linking styles between your Tandem project and designer files (Sketch, and Figma). Theming may also be a possibility in the future.
+
+#### Global Properties
+
+Global properties allow you to keep values in one place and re-use them throughout your app.
+
+![defining global vars](../assets/tiny-demos/global-vars.gif)
+
+Colors are the only global props currently supported, but more may be added in the future.
+
+The primary motivation behind global properties is primarily to keep your app design DRY (don't repeat yourself). Global variables provide you with a _single_ value that you can apply to any CSS property that's associated with its type (a global color prop for example can only be used with color CSS properties like `background`, `color`, `border-color`, etc.).
+
+#### Inherited styles
+
+Certain style properties are heritable such as font properties.
+
+![inherited css](../assets/tiny-demos/inherited-css.gif)
+
+In general, I try to _avoid_ using cascading CSS since it can be hard to manage, and instead use style mixins.
+
+![inherited css](../assets/tiny-demos/cascading-css-alternative.gif)
+
+If you want to go a step further and _prohibit_ cascading typography completely, you can define `allowCascadeFonts: false` in your application project file `*.tdproject`. For example:
+
+```javascript
+{
+  "rootDir": ".",
+  "exclude": ["node_modules"],
+  "mainFilePath": "./src/main.pc",
+  "options": {
+    "allowCascadeFonts": "false"
+  }
+}
+```
+
+> You can learn more about application config settings [here](./app-config.md)
+
+#### style variants
+
+Style variants enable you to define different states of a component.
+
+![inherited css](../assets/tiny-demos/creating-variants.gif)

docs/development.md

@@ -0,0 +1,36 @@
+Public contributions are more than welcome. 🙂
+
+If you plan on building or changing a feature, please submit a ticket beforehand so that there can be a discussion.
+
+## Getting Started
+
+To install, run:
+
+```
+git clone [email protected]:crcn/tandem.git;
+cd tandem;
+yarn install;
+npm run bootstrap;
+```
+
+Then run:
+
+```
+npm run build:watch;
+```
+
+👆🏻 This will start build processes for _all_ packages. Finally, run:
+
+```
+npm run design:front-end;
+```
+
+👆🏻 To start building Tandem in Tandem.
+
+#### Development commands
+
+```
+npm run design:front-end; # start Tandem for front-end
+npm run build:watch; # build & watch all packages
+npm run build:dist; # build desktop app
+```

docs/goals.md

@@ -0,0 +1,24 @@
+The ideas behind Tandem are continuing to evolve based on real-world usage, so the guiding principles in this doc _may_ change in the future. For now, the ideas here guide feature development.
+
+#### Goals
+
+- To be interoperable with _most_ web-based languages.
+- To be interoperable with existing code.
+- To be a _safer_ alternative to writing code by hand, and to integrate with existing safety measures in the codebase (integrating with typed systems, automated testing, localized styles).
+- Provide _better_ tooling for authoring HTML, CSS, and other visual behavior _where it makes sense_.
+- To be interoperable with existing tools like Sketch, After Effects, and Figma.
+- Flexibility around how code is written around Tandem UIs.
+- Escape hatches to help people migrate away from Tandem if they wany to.
+- Provide tooling that can easily be used in teams.
+- Develop features with scalability & maintainability in mind.
+- Use existing knowledge & practices around building HTML & CSS.
+
+#### Non-goals
+
+- Turing completeness. Tandem's functionality will be limited to tooling where it makes sense: basic HTML, CSS, and _simple_ behavior (slots & components). All other functionality will have to be hand coded.
+- Sketch-like user experience. Tandem will only provide functionality & tooling that is compatible with how the web works.
+- Runtimes or any other non-native functionality. Tandem files will always be compilable down to static HTML & CSS.
+- Cover _all_ front-end user interface development cases. Tandem will target _simple_ use cases. Complex use cases will be deferred to other software and hand written code where it makes sense.
+- To cover the entire development process between `mock-up -> design -> prototype -> development -> deploy`. Tandem may provide tooling to make each step more efficient, but will always focus on the `development` process. 
+- Abstractions around HTML & CSS. Tandem will always try to aim to provide transparent tooling that _augment_ HTML & CSS creation. 
+

docs/installation.md

@@ -0,0 +1,49 @@
+## 1. Installing Tandem in an existing project
+
+If you just want to play around, you can download the stand alone version here: https://github.com/tandemcode/tandem/releases
+
+If you'd like to use Tandem in your project, you should install the CLI tools:
+
+```
+npm install tandem-cli --save-dev
+```
+
+After that you can initialize a new Tandem project file by running:
+
+```
+./node_modules/.bin/tandem init
+```
+
+After you've initialized your project, you can open it up with:
+
+```
+./node_modules/.bin/tandem open
+```
+
+> If Tandem isn't already downloaded, `open` will go ahead and download the release associated with the `tandem-cli` version. Installing the `tandem-cli` package with your project (instead of globally) ensures that you're using the _correct_ version of Tandem with your UI files.
+> More docs for the CLI fool can be found in the [CLI package](./packages/cli)
+
+At this point Tandem should be opened. Go ahead and create your first component file like so:
+
+![Add new file](./assets/add-new-component-file.gif)
+
+That's it! From here you can start building UIs. Note that you can have as many UI files as you want, and they can be organized anywhere in your project. Generally what _I_ like to do is create one UI file per component.
+
+Now onto setting up your build configuration.
+
+## 2. Setting up the compiler
+
+In order to use Tandem UIs, you'll need to setup a compiler for the framework you'd like to target. Keep in mind that the _coding style_ for each framework target may differ depending on community standards.
+
+- React
+  - [Setting up Webpack](../packages/paperclip-react-loader)
+
+## 3. Adding UI controllers
+
+UI controllers allow you to add behavior to your UIs, and they can be written in any language that's supported in Tandem. To add controller, just follow this GIF:
+
+![Adding controllers](assets/adding-controller.gif)
+
+Controller docs:
+
+- [React](../packages/paperclip-react-compiler)