[Examples] Merge the long awaited Examples sandbox

examples/.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    ["shopify/web", {
+      "shopify/web": {
+        "modules": false
+      }
+    }]
+  ]
+}

examples/.browserslistrc

@@ -0,0 +1,2 @@
+> 1%
+Last 1 version

examples/.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+scrap
+src/scripts/vendor

examples/.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  extends: [
+    'plugin:shopify/esnext',
+    'plugin:shopify/prettier',
+  ],
+  globals: {},
+  rules: {
+    'line-comment-position': 0,
+    'no-console': 0,
+  },
+  env: {
+    browser: true,
+  },
+};

examples/.gitignore

@@ -0,0 +1,26 @@
+# Ignore OS Specific files
+.DS_Store
+
+# Ignore the SASS cache
+.sass-cache
+
+# Logs
+logs
+*.log
+
+# Ignore dev
+.dev
+
+# Ignore secrets.json
+secrets.json
+
+# Ignore scrap and distribution folders
+scrap
+dist
+
+# Ignore generated reports and manifests
+assets-manifest.json
+bundle-report.html
+
+# Dependency directory
+node_modules

examples/.nvmrc

@@ -0,0 +1 @@
+v8.9.4

examples/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "printWidth": 120,
+  "singleQuote": true
+}

examples/.stylelintrc

@@ -0,0 +1,25 @@
+{
+  "extends": [
+    "stylelint-config-shopify/prettier"
+  ],
+  "rules": {
+    "color-no-hex": null,
+    "comment-empty-line-before": null,
+    "scss/double-slash-comment-empty-line-before": null,
+    "declaration-property-value-blacklist": null,
+    "font-weight-notation": null,
+    "function-url-scheme-whitelist": null,
+    "no-duplicate-selectors": null,
+    "no-unknown-animations": null,
+    "selector-class-pattern": null,
+    "selector-id-pattern": null,
+    "selector-max-class": 4,
+    "selector-max-id": 1,
+    "selector-max-type": 2,
+    "selector-max-combinators": 3,
+    "selector-max-compound-selectors": 4,
+    "selector-max-specificity": "1,5,1",
+    "selector-no-qualifying-type": null,
+    "scss/partial-no-import": null
+  }
+}

examples/README.md

@@ -0,0 +1,101 @@
+![banner-examples](https://user-images.githubusercontent.com/643944/34655498-c9701942-f3d8-11e7-9dd5-6d225e7c5f6f.png)
+
+> The Examples site has been made available to aid developers interested in building web apps with Draggable and/or contributing back to the library.
+
+The Examples sandbox aims to answer common questions concerning Draggable’s implementation, as well as provide solutions to any conceivable drag and drop problem.
+
+For instance, our solution to resolving touch events required duplicating the `source` node in the DOM. Depending on your design, this could cause friction as you attempt to maintain the correct layout while dragging. A bit of clever CSS can help resolve such layout issues. There are several examples in this repo that demonstrate solutions to this exact layout concern.
+
+## Local development
+
+1. Clone the `draggable` repo: `git clone [email protected]:Shopify/draggable.git`.
+2. Run `yarn install && yarn build` in the root `draggable` directory.
+3. Change into the `examples` directory: `cd examples`.
+4. Run `yarn install && yarn build && yarn start`.
+5. You can now access the local site at `localhost:3000`.
+
+## Code style
+
+This project uses Shopify’s [eslint](https://github.com/Shopify/eslint-plugin-shopify) and [stylelint](https://github.com/Shopify/stylelint-config-shopify) configs with a few alterations, defined in their respective `dot rc` file. If contributing back to this project, you must conform to the code style enforced by the config. If you are just playing around and don’t care about code style, just disable your editor’s linter.
+
+## Project structure
+
+This project uses a co-located component structure, meaning everything relating to an individual component should all be found in the same folder. For the most part, you will work only in the `src/components` and `src/content` folders.
+
+The root directory contains many config files that you can safely ignore unless you aim to change how files are compiled. It is strongly recommended to read the `package.json` to familiarize yourself with the available `scripts`.
+
+### `src/views`
+
+This folder contains the top-level page templates. The project uses Nunjucks for a templating language.
+
+There is only one layout template, `views/templates/document.html`, which is extended by all of the `.html` files in the root of `/views`. These root views do the following:
+
+1. Import global components such as `Sidebar` and `PageHeader`
+2. Define the `ViewAttrs` for the view _(Page title, description, etc)_.
+3. Import and render the content component for that view.
+
+### `src/styles`
+
+This is where “global” styles, along with the `examples-app.scss` manifest are located. There shouldn’t be much reason to alter any of these files other than adding new imports to `examples-app.scss`.
+
+This project uses [Threads](https://github.com/beefchimi/threads) to manage style properties. You can see all of the Threads theme values in `styles/themes/examples`.
+
+### `src/scripts`
+
+Just like with `styles/`, this is where our “global” scripts, along with the `examples-app.js` entry script is located. There shouldn’t be much reason to alter any of these files other than adding new imports and initializations to `examples-app.js`.
+
+### `src/content`
+
+This folder contains all the “content components”, which means all the code specific to an individual Example. Content is grouped by the “example type”: `Draggable`, `Droppable`, `Sortable`, `Swappable`, or `Plugins`. There is also a `Home` folder just for the landing page, and a `shared` folder for common functions and mixins that are reused across multiple content components.
+
+Each individual example will have a single `.html` view, `.scss` file, and a `index.js`. The `index.js` is where you will initialize and author any `draggable` logic. The default function exported from each `index.js` file is imported and initialized in the `src/scripts/examples-app.js` entry file.
+
+### `src/components`
+
+Here are all of the shared components, such as the `Block` component, used in many examples as draggable elements.
+
+Sometimes these are just `.scss` files, and the markup is written within a content component. If the styles contain values specific to that component, but need to be shared with other components, they will be split out into a `props.scss` file. Variant classes are split out into a `variants.scss` file.
+
+Some components have a `.html` file, which uses Nunjucks macros to define reusable components. For example, `Block` has several variations that can be toggled through its component API. Once a `Block` is imported into a view, you can render using:
+
+`{{ Block.render('one', {index: 1, draggable: true}) }}`
+
+That will render all of the markup for a `Block` component, using the string `one` as its `Heading`, and appending the classes `Block--item1` and `Block--isDraggable`.
+
+Some components will also have their own JavaScript logic, such as `Plate`, which manages how the `Plate` component gets transformed via a drag event.
+
+### `src/root`
+
+This folder simply contains any files that need to be copied to the root `dist/` folder, such as a `manifest.json` or `.htaccess`. There should be no reason to alter files in this folder.
+
+### `tools`
+
+All of the build scripts are found in this folder. You shouldn’t need to go in here unless you want to change how the code is compiled.
+
+You may find it useful to change how Webpack generates the JavaScript bundles. For example:
+
+**Disable babel’s ES5 transpilation**
+1. Open `webpack.config.js`.
+2. Remove `vendorScripts`, `'examples-vendor': vendorScripts`, and `loader: 'babel-loader'`
+    - (optional) Disable source maps by removing `devtool: 'source-map'`
+3. Open `webpack.plugins.js`.
+4. Remove any `CommonsChunkPlugin` entries.
+    - (optional) Disable minification by removing the Uglify entry.
+5. Open `src/components/Document/Head.html`.
+6. Remove both the `examples-runtime` and `examples-vendor` scripts.
+
+## Running a server / watching files
+
+Running `yarn start` fires up a `browsersync` server to view the site. While running the server, when you add/make changes to any of the files in `src/`, the appropriate files will then be recompiled and output to the `dist/` folder. Once a file has been compiled, the browser will automatically reload the page. For `scss` changes, the new styles are injected into the page without causing a refresh.
+
+The file watcher will also look for changes in the `draggable/lib` folder, which means you can be running the examples server and making changes to the core library at the same time. Scripts will get recompiled and the browser will reload.
+
+## Contributing
+
+If while using Draggable, you encounter something that is not already covered in the Examples, please contribute back by creating a new Example under the correct grouping.
+
+We ask that you follow our code style config and try your best to make the example consistent with the design of the site. Lean on the components already created to compose your example. If required, you can design and build your own components.
+
+There is an [open issue](https://github.com/Shopify/draggable/issues/110) for building a CLI generator for new pages. If you are interested in taking this on, please assign yourself to the issue.
+
+If you are unsure if your example has merit, feel free to [open an issue](https://github.com/Shopify/draggable/issues) and propose your idea. Always ping [@tsov](https://github.com/tsov) and [@beefchimi](https://github.com/beefchimi) for issues and code review!

examples/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "draggable-examples",
+  "version": "1.0.0",
+  "description": "Examples for draggable.js",
+  "author": "Max Hoffmann and Curtis Dulmage",
+  "homepage": "https://shopify.github.io/draggable",
+  "license": "MIT",
+  "main": "tools/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Shopify/draggable.git"
+  },
+  "keywords": [
+    "draggable",
+    "javascript"
+  ],
+  "bugs": {
+    "url": "https://github.com/Shopify/draggable/issues"
+  },
+  "config": {
+    "tools": "--require babel-register --gulpfile tools"
+  },
+  "scripts": {
+    "views": "gulp views $npm_package_config_tools",
+    "scripts": "gulp scripts $npm_package_config_tools",
+    "styles": "gulp styles $npm_package_config_tools",
+    "start": "gulp start $npm_package_config_tools",
+    "build": "yarn run clean && gulp build $npm_package_config_tools",
+    "clean": "rm -rf dist bundle-report.html",
+    "lint:scss": "stylelint './src/**/*.scss'",
+    "prettier:scss": "prettier-stylelint './src/**/*.scss' --write -q",
+    "lint:js": "eslint './src/**/*.js' './tools/**/*.js' --max-warnings 0",
+    "prettier:js": "yarn run lint:js --fix"
+  },
+  "dependencies": {
+    "core-js": "^2.5.3",
+    "threads": "git+ssh://[email protected]/beefchimi/threads.git#v1.0.0-beta8"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.2.5",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-shopify": "^16.2.0",
+    "browser-sync": "^2.23.5",
+    "cssnano": "^3.10.0",
+    "cssnano-preset-advanced": "^4.0.0-rc.2",
+    "eslint": "^4.15.0",
+    "eslint-plugin-prettier": "^2.5.0",
+    "eslint-plugin-shopify": "^18.3.0",
+    "gulp": "gulpjs/gulp.git#4.0",
+    "gulp-cli": "^2.0.0",
+    "gulp-data": "^1.3.1",
+    "gulp-htmlmin": "^4.0.0",
+    "gulp-nunjucks": "^3.1.1",
+    "gulp-postcss": "^7.0.1",
+    "gulp-sass": "^3.1.0",
+    "gulp-sourcemaps": "^2.6.3",
+    "nunjucks": "^3.0.1",
+    "prettier": "^1.10.2",
+    "prettier-stylelint": "^0.4.2",
+    "stylelint": "^8.4.0",
+    "stylelint-config-shopify": "^4.0.0",
+    "webpack": "^3.10.0",
+    "webpack-bundle-analyzer": "^2.9.2"
+  }
+}

examples/postcss.config.js

@@ -0,0 +1,10 @@
+module.exports = () => ({
+  plugins: {
+    autoprefixer: {},
+    cssnano: {
+      preset: 'advanced',
+      autoprefixer: false,
+      'postcss-reduce-idents': false,
+    },
+  },
+});

examples/src/components/Block/Block.html

@@ -0,0 +1,32 @@
+{% macro render(heading, options = {}) %}
+  {% set classes = ['Block'] %}
+
+  {% set classes = (classes.push('Block--typeShell') if options.shell, classes) %}
+
+  {% if options.type and (
+    options.type === 'Shell' or options.type === 'Hollow' or options.type === 'Stripes'
+  ) %}
+    {% set classes = (classes.push('Block--type' + options.type), classes) %}
+  {% endif %}
+
+  {% set classes = (classes.push('Block--item' + options.index) if options.index, classes) %}
+  {% set classes = (classes.push('Block--isDraggable') if options.draggable, classes) %}
+  {% set classes = (classes.push(options.classes | join(' ')) if options.classes, classes) %}
+  {% set classes = classes | join(' ') | trim %}
+
+  {% if options.draggable %}
+    {% set openingTag = '<a href="#" class="' + classes + '" title="Click to drag">' %}
+    {% set closingTag = '</a>' %}
+  {% else %}
+    {% set openingTag = '<span class="' + classes + '">' %}
+    {% set closingTag = '</span>' %}
+  {% endif %}
+
+  {{ openingTag | safe }}
+    <div class="BlockContent">
+      {% if heading.length > 1 %}
+        <h3 class="Heading Heading--size2 text-no-select">{{ heading }}</h3>
+      {% endif %}
+    </div>
+  {{ closingTag | safe }}
+{% endmacro %}

examples/src/components/Block/Block.scss

@@ -0,0 +1,37 @@
+////
+/// Components
+/// Block
+////
+
+@import 'utilities/shared/layout';
+
+.BlockWrapper {
+  .Block {
+    height: 100%;
+  }
+}
+
+.Block {
+  position: relative;
+  display: block;
+}
+
+///
+/// Block Content
+.BlockContent {
+  @include flex-center;
+  min-height: columns();
+  height: 100%;
+  color: white;
+  background-color: get-color(coal, dark);
+  border: get-border(thin) solid get-color(coal, dark);
+
+  @media screen and (min-width: get-breakpoint(tablet)) {
+    border-width: get-border();
+  }
+
+  .Heading {
+    // vertical alignment
+    margin-top: -0.1em;
+  }
+}