Better examples (#164)

* changed folder structure

* removed table in Readme of Basic example (not clear and probably also some cells were wrong)

* small update for the Basic example to make it more clear how aliases are referenced

* renamed the “npm” example to “npm module”

* updated “npm” example to use the same config and properties as the “basic” example

* removed license (no sense here) and updated package.json

* updated the s3 example making it more similar to other examples and adding some more assets to be uploaded and linked/embedded in tokens

* updated logo in main Readme in example folder

* updated the Readme for the S3 example

* tried to re-organise the “react” folder in two separate folders

the web app doesn’t compile

* removed spaces from “example” sub-folder

* renamed “example” folder to “examples”

* removed numbers from “examples” sub-folder names

* removed space in sub-folder names

* added advanced example on how to use a watcher to auto-rebuild

see: #171

* small update to Readme for “auto-rebuild-watcher”

* added advanced example on how to have a multi-platform multi-brand suite

* added advanced example on how to use custom templates

* fixed “watch” npm script declaration

* moved packages under “devDependencies” for “custom templates” package

* added a comment in an example of the lodash templating syntax

* remove invisible characters from Readme

* added “clean” npm script call where missing in examples package.json

* added .gitignore file where was missing in examples folder

* updated the config file for the “npm module” example

* added a comment to explain better how the “formatter” function works

* updated the “init” command to expose only the possible/meaningful options + updated documentation for the “examples” page

* added comment about collecting more examples

* updated the Readme for the “examples” folder

* updated “version.js” script as per Danny suggestion

* added advanced example on how to use custom transforms

* updated basic example to use “format” instead of “template” to avoid the alert in console

* added advanced example about referencing/aliasing

* updated example to show reference to an “object-like” value

* removed the advanced examples for react and react native

* added a “create react app” example (with Sass)

* better config for S3 example

* simplified the example for “S3”

* re-introduced android + ios in S3 example

* added a “assets-base64-embed” example

* finalised the “assets-base64-embed” example

* updated Readme for “npm” example + fixed the “prepublishOnly” script option (previous one was deprecated)

* removed the “create-react-app-sass” example (I’ll add it later in a separate ticket)

* updated the documentation

bin/style-dictionary

@@ -38,7 +38,7 @@ program
   .command('init <type>')
   .description('Generates a starter style dictionary')
   .action(function(type){
-    var types = ['s3', 'npm', 'complete', 'basic'];
+    var types = ['basic', 'complete'];
     if (types.indexOf(type) < 0) {
       console.error('Please supply 1 type of project from: ' + types.join(', '));
       process.exit(1);

docs/examples.md

@@ -1,39 +1,43 @@
 # Examples
 
-To get you started, there are some example packages included that you can use. You can take a look at the code on Github or you
-can use the CLI included to generate a new package using these examples. Here is how you can do that:
+To get you started, there are some example packages included that you can use. You can [take a look at the code on Github](https://github.com/amzn/style-dictionary/tree/master/example/) or you can use the CLI included to generate a new package using some of these examples. Here is how you can do that:
+
 ```bash
-$ mkdir MyStyleD
-$ cd MyStyleD
+$ mkdir MyFolder
+$ cd MyFolder
 $ style-dictionary init [example]
 ```
-Where `[example]` is one of: `basic`, `complete`, `npm`, `s3`
+
+Where `[example]` is one of: `basic`, `complete`.
 
 ## Basic
 [View on Github](https://github.com/amzn/style-dictionary/tree/master/example/basic)
 
-This example code is bare-bones to show you what this framework can do. Use this if you want to play around with what the Style Dictionary
-can do.
+This example code is bare-bones to show you what this framework can do. Use this if you want to play around with what the Style Dictionary can do.
 
 
 ## Complete
 [View on Github](https://github.com/amzn/style-dictionary/tree/master/example/complete)
 
-This is a more complete package and should have everything you need to get started. This package can be consumed as a Cocoapod on iOS,
-as a node module for web, and as a local library for Android.
+This is a more complete package and should have everything you need to get started. This package can be consumed as a Cocoapod on iOS, as a node module for web, and as a local library for Android.
 
-## npm
-[View on Github](https://github.com/amzn/style-dictionary/tree/master/example/npm)
+## Advanced
+[View the folder](https://github.com/amzn/style-dictionary/tree/master/example/advanced)
 
-This example shows how to set up a style dictionary as an npm module, either to publish to a local npm service or to publish externally.
+If you want to look at more advanced examples of possible applications and customisations of Style Dictionary, the `examples/advanced` folder on GitHub contains these extra folders:
 
-When you publish this npm module, the prepublish hook will run, calling the style dictionary build system to create the necessary files. You can also just run `npm run build` to generate the files to see what it is creating.
+* [**assets-base64-embed**](https://github.com/amzn/style-dictionary/tree/master/example/advanced/assets-base64-embed) shows how it's possible to embed and distribute assets – like images, icons and fonts – directly as design tokens.
+* [**auto-rebuild-watcher**](https://github.com/amzn/style-dictionary/tree/master/example/advanced/auto-rebuild-watcher) shows how to setup a "watcher" that auto-rebuilds the tokens every time there is a change in the properties.
+* [**custom-templates**](https://github.com/amzn/style-dictionary/tree/master/example/advanced/custom-templates/custom-templates) shows how to use "custom" templates to generate design tokens files with custom formats, useful when you need to distribute your design tokens and integrate them with custom pipelines or scripts.
+* [**custom-transforms**](https://github.com/amzn/style-dictionary/tree/master/example/advanced/custom-templates/custom-transforms) shows how to use custom tranforms (and transformGroups) to apply custom "tranformations" to the properties when converted to design tokens.
+* [**multi-brand-multi-platform**](https://github.com/amzn/style-dictionary/tree/master/example/advanced/multi-brand-multi-platform) shows how to set up Style Dictionary to support a multi-brand (for brand theming) and multi-platform (web, iOS, Android) solution, with property values depending on brand and plaforms.
+* [**npm-module**](https://github.com/amzn/style-dictionary/tree/master/example/advanced/npm-module) shows how to set up a style dictionary as an npm module, either to publish to a local npm service or to publish externally.
+* [**s3**](https://github.com/amzn/style-dictionary/tree/master/example/advanced/s3) shows how to set up a style dictionary to build files for different platforms (web, iOS, Android) and upload those build artifacts, together with a group of assets, to an S3 bucket.
+* [**referencing_aliasing**](https://github.com/amzn/style-dictionary/tree/master/example/advanced/referencing_aliasing) shows how to use referencing (or "aliasing") to reference a value -or an attribute– of a property and assign it to the value –or attribute– of another property.
 
-## s3
-[View on Github](https://github.com/amzn/style-dictionary/tree/master/example/s3)
 
-One way to use the style dictionary framework is to build files for each platform and upload those build artifacts to an s3 bucket. The platforms can pull these files down during their build process.
+---
 
-----
+#### Do you think an example is missing?<br/>Do you want to see another example added to the project?<br/>Do you have a working example that we can add to the list?
 
-> More coming soon...
+Fantastic! Let us know by [filing an issue](https://github.com/amzn/style-dictionary/issues) or sending us an email: style-dictionary@amazon.com.