Merge pull request #70 from twilio/docs

documentation update

Author: ktalebian

README.md

@@ -7,19 +7,31 @@
 
 Twilio Flex plugins allow you to augment/change the behavior and appearance of a [Twilio Flex](https://www.twilio.com/flex) Contact Center using React.
 
+## User Guide
+
+* [Creating a new plugin](packages/create-flex-plugin/README.md)
+* [Overriding configuration](packages/craco-config-flex-plugin/README.md)
+
+## Changelog
+
+Major changelogs can be found in the [changelog directory](/tree/master/changelog).
+
 ## Project Structure
 
-This project is a monorepo project that is housing three separate packages for the creation of Twilio Flex plugins.
+This is a monorepo project managed by [lerna](https://github.com/lerna/lerna) for creating Twilio Flex plugins.
+
+- [create-flex-plugin](packages/create-flex-plugin): The CLI tool to start a new Flex plugin project
+- [flex-plugin](packages/flex-plugin): Runtime dependency for Flex plugins
+- [craco-config-flex-plugin](packages/craco-config-flex-plugin): Config override for [craco](https://github.com/sharegate/craco) used to develop and build Flex plugins
 
-- [`create-flex-plugin`](packages/create-flex-plugin) - The CLI tool to start a new Flex plugin project
-- [`flex-plugin`](packages/flex-plugin) - Runtime dependency for Flex plugins
-- [`craco-config-flex-plugin`](packages/craco-config-flex-plugin) - Config override for [`craco`](https://github.com/sharegate/craco) used to develop and build Flex plugins
 
 ## Contributing
 
-Please note that this project is released with a [Contributor Code of Conduct](CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
+This project is released with a [Contributor Code of Conduct](CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
+
+By cloning this project, you will be contributing to the plugin-builder itself. If you want to create a plugin instead, please instead use the guide in [creating a new plugin](packages/create-flex-plugin/README.md).
 
-### 1. Create a fork of the project
+### 1. Create a Fork of the Project
 
 Create a fork of this project for your GitHub user by clicking the `Fork` button at the top of this project
 
@@ -32,14 +44,15 @@ npm install
 npx lerna bootstrap
 ```
 
-### 3. Contributing to a package
+### 3. Contributing to a Package
 
-Please refer to the `README.md` of the respective packages in `packages/` for specific guidelines for those projects.
+Refer to the `README.md` of the respective packages in `packages/` for specific guidelines for those projects.
 
 ### 4. Submitting Changes
 
 When you are happy with your changes, make sure to create a new branch with your changes and open a PR with your changes. For more info check out this [page describing the GitHub workflow](https://guides.github.com/introduction/flow/).
 
+
 ## Contributors
 
 Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

CHANGELOG.md changelog/CHANGELOG.mdCHANGELOG.md renamed to changelog/CHANGELOG.md

@@ -0,0 +1,41 @@
+![npm](https://img.shields.io/npm/v/craco-config-flex-plugin.svg?style=flat-square)
+![npm](https://img.shields.io/npm/dt/craco-config-flex-plugin.svg?style=flat-square)
+[![NpmLicense](https://img.shields.io/npm/l/craco-config-flex-plugin.svg?style=flat-square)](LICENSE.md)
+
+# CRACO Config Flex Plugin
+
+[CRACO](https://github.com/sharegate/craco) configuration override to build a Flex plugin.
+
+## Installation
+
+`craco-config-flex-plugin` dependency is added to your `package.json` when you create a new plugin with [create-flex-plugin](https://github.com/twilio/flex-plugin-builder/tree/master/packages/create-flex-plugin).
+
+## Usage
+
+You can edit the `craco.config.js` to provide your own configuration. Please visit [craco documentation](https://github.com/sharegate/craco/tree/master/packages/craco#configuration-overview) for more information.
+
+## Contributing
+
+Make sure to follow the instructions in the [main repository](https://github.com/twilio/flex-plugin-builder#contributing) to setup the project
+
+```bash
+# Install dependencies and link local packages with each other
+cd packages/craco-config-flex-plugin
+npx lerna bootstrap
+
+# Run tests
+npm test
+
+# To use your local package in a different project
+npm link
+# then in a different project
+npm link craco-config-flex-plugin
+```
+
+## Contributors
+
+Thank you to all the lovely contributors to this project. Please check the main repository to see [all contributors](https://github.com/twilio/flex-plugin-builder#contributors).
+
+## License
+
+MIT

packages/craco-config-flex-plugin/README.md

@@ -2,7 +2,7 @@
 ![npm](https://img.shields.io/npm/dt/create-flex-plugin.svg?style=flat-square)
 [![NpmLicense](https://img.shields.io/npm/l/create-flex-plugin.svg?style=flat-square)](LICENSE.md)
 
-# `create-flex-plugin`
+# Create Flex Plugin
 
 Command-line tool to create, develop and build a new Twilio Flex Plugin.
 
@@ -47,11 +47,51 @@ name    Name of your plugin. Needs to start with plugin-
 Options:
   --accountSid, -a  The Account SID for your Flex Project
   --runtimeUrl, -r  The URL to your Twilio Flex Runtime
+  --template, -t    A GitHub URL that contains your template
   --install         Auto-install dependencies         [boolean] [default: false]
   -h, --help        Show help                                          [boolean]
   -v, --version     Show version number                                [boolean]
 ```
 
+### Creating a Plugin from Custom Template
+
+When creating a new plugin, you may provide a `--template` URL to a GitHub page that contains your custom template. 
+
+#### Template Directory Hierarchy
+
+Your GitHub project should be
+
+```
+/
+    template/
+        src/
+            index.js
+            ...
+        ...
+```
+
+Create Flex Plugin will copy over the content from the `template` directory, and expects a `index.js`. 
+
+We will provide a `public/` folder as well as `package.json` but you may override these as well by providing them in your `template/` folder.
+
+See [flex-plugin-template-sample](https://github.com/ktalebian/flex-plugin-template-sample) as an example.
+
+#### Version Support
+
+The `--template` link can contain a reference, which can be a `tag` or a `branch` name. For example 
+
+```
+create-flex-plugin --template https://github.com/ktalebian/flex-plugin-template-sample/tree/1.0.0
+```
+
+would use the tagged version `1.0.0`, while
+
+```
+create-flex-plugin --template https://github.com/ktalebian/flex-plugin-template-sample/tree/master
+```
+
+would use the `master` branch.
+
 ## Contributing
 
 Make sure to follow the instructions in the [main repository](https://github.com/twilio/flex-plugin-builder#contributing) to setup the project

packages/create-flex-plugin/README.md

@@ -2,7 +2,7 @@
 ![npm](https://img.shields.io/npm/dt/flex-plugin.svg?style=flat-square)
 [![NpmLicense](https://img.shields.io/npm/l/flex-plugin.svg?style=flat-square)](LICENSE.md)
 
-# `flex-plugin`
+# Flex Plugin
 
 Library to help building [Twilio Flex](https://www.twilio.com/flex) Plugins.
 
@@ -29,6 +29,8 @@ class MyPlugin extends FlexPlugin {
 loadPlugin(MyPlugin);
 ```
 
+Visit [Twilio Docs](https://www.twilio.com/docs/flex/tutorials/building-flex-plugins) for a tutorial on creating your first plugin.
+
 ## Contributing
 
 Make sure to follow the instructions in the [main repository](https://github.com/twilio/flex-plugin-builder#contributing) to setup the project