feat(notation-legend): Added notation-legend pattern for docs

config/dependencies.yaml

@@ -148,6 +148,9 @@ mui-theme:
     '@material-ui/core': '^4.0.1'
     'react': '^16.8'
     'react-dom': '^16.8'
+notation-legend:
+  peer:
+    '@freesewing/plugin-buttons': '^{{version}}'
 plugin-bundle:
   _:
     '@freesewing/plugin-cutonfold': '^{{version}}'

config/descriptions.yaml

@@ -23,6 +23,7 @@ i18n: 'Translations for the FreeSewing project'
 jaeger: 'A FreeSewing pattern for a sport coat style jacket'
 models: 'Body measurements data for a range of default sizes'
 mui-theme: 'A Material-UI theme for FreeSewing web UIs'
+notation-legend: 'A FreeSewing pattern to document pattern notation'
 pattern-info: 'Information about available freesewing patterns'
 penelope: 'A FreeSewing pattern for a pencil skirt'
 plugin-banner: 'A FreeSewing plugin to repeat text on a path'

packages/css-theme/src/components/_draft.scss

@@ -101,6 +101,23 @@ svg.freesewing.draft {
     font-weight: bold;
     stroke: none;
   }
+  /* New style for sampled sizes */
+  path.size-3XS,
+  path.size-2XS,
+  path.size-XS,
+  path.size-S,
+  path.size-M {
+    stroke-width: 0.5;
+    stroke-dasharray: 0.25 0.75;
+  }
+  path.made-to-measure,
+  path.size-L,
+  path.size-XL,
+  path.size-2XL,
+  path.size-3XL,
+  path.size-4XL {
+    stroke-width: 0.5;
+  }
 }
 
 svg.freesewing.draft text {
@@ -176,6 +193,41 @@ svg.freesewing.draft text {
     stroke: none;
     fill: $fc-bg-dark;
   }
+
+  /* New style for sampled sizes */
+  path.made-to-measure {
+    stroke: #212529;
+  }
+  path.size-3XS {
+    stroke: $oc-lime-6;
+  }
+  path.size-2XS {
+    stroke: $oc-orange-6;
+  }
+  path.size-XS {
+    stroke: $oc-grape-6;
+  }
+  path.size-S {
+    stroke: $oc-indigo-6;
+  }
+  path.size-M {
+    stroke: $oc-cyan-6;
+  }
+  path.size-L {
+    stroke: $oc-indigo-6;
+  }
+  path.size-XL {
+    stroke: $oc-grape-6;
+  }
+  path.size-2XL {
+    stroke: $oc-orange-6;
+  }
+  path.size-3XL {
+    stroke: $oc-lime-6;
+  }
+  path.size-4XL {
+    stroke: $oc-teal-6;
+  }
 }
 .theme-wrapper.dark svg.freesewing.draft {
   /* Stroke classes */
@@ -247,6 +299,41 @@ svg.freesewing.draft text {
     stroke: none;
     fill: $fc-bg-light;
   }
+
+  /* New style for sampled sizes */
+  path.made-to-measure {
+    stroke: #f8f9fa;
+  }
+  path.size-3XS {
+    stroke: $oc-lime-3;
+  }
+  path.size-2XS {
+    stroke: $oc-orange-3;
+  }
+  path.size-XS {
+    stroke: $oc-grape-3;
+  }
+  path.size-S {
+    stroke: $oc-indigo-3;
+  }
+  path.size-M {
+    stroke: $oc-cyan-3;
+  }
+  path.size-L {
+    stroke: $oc-indigo-3;
+  }
+  path.size-XL {
+    stroke: $oc-grape-3;
+  }
+  path.size-2XL {
+    stroke: $oc-orange-3;
+  }
+  path.size-3XL {
+    stroke: $oc-lime-3;
+  }
+  path.size-4XL {
+    stroke: $oc-teal-3;
+  }
 }
 
 /* SVG defs (snippets) are in the shadow DOM */

packages/notation-legend/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: 'standard'
+}

packages/notation-legend/CHANGELOG.md

@@ -0,0 +1,112 @@
+# Change log for: @freesewing/examples
+
+## Unreleased
+
+**Note:** Version bump only for package examples
+
+## 2.6.0 (2020-05-01)
+
+**Note:** Version bump only for package examples
+
+## 2.5.0 (2020-04-05)
+
+**Note:** Version bump only for package examples
+
+## 2.4.6 (2020-03-23)
+
+**Note:** Version bump only for package examples
+
+## 2.4.5 (2020-03-19)
+
+**Note:** Version bump only for package examples
+
+## 2.4.4 (2020-03-15)
+
+**Note:** Version bump only for package examples
+
+## 2.4.3 (2020-03-12)
+
+**Note:** Version bump only for package examples
+
+## 2.4.2 (2020-03-08)
+
+**Note:** Version bump only for package examples
+
+## 2.4.1 (2020-03-04)
+
+**Note:** Version bump only for package examples
+
+## 2.4.0 (2020-02-29)
+
+**Note:** Version bump only for package examples
+
+## 2.3.0 (2020-02-23)
+
+**Note:** Version bump only for package examples
+
+## 2.2.0 (2020-02-22)
+
+**Note:** Version bump only for package examples
+
+## 2.1.9 (2020-01-18)
+
+**Note:** Version bump only for package examples
+
+## 2.1.8 (2019-12-16)
+
+**Note:** Version bump only for package examples
+
+## 2.1.7 (2019-12-15)
+
+**Note:** Version bump only for package examples
+
+## 2.1.6 (2019-11-24)
+
+**Note:** Version bump only for package examples
+
+## 2.1.5 (2019-11-19)
+
+**Note:** Version bump only for package examples
+
+## 2.1.4 (2019-11-01)
+
+**Note:** Version bump only for package examples
+
+## 2.1.3 (2019-10-18)
+
+**Note:** Version bump only for package examples
+
+## 2.1.2 (2019-10-14)
+
+**Note:** Version bump only for package examples
+
+## 2.1.1 (2019-10-13)
+
+**Note:** Version bump only for package examples
+
+## 2.1.0 (2019-10-06)
+
+**Note:** Version bump only for package examples
+
+## 2.0.4 (2019-09-27)
+
+**Note:** Version bump only for package examples
+
+## 2.0.3 (2019-09-15)
+
+**Note:** Version bump only for package examples
+
+## 2.0.2 (2019-09-06)
+
+**Note:** Version bump only for package examples
+
+## 2.0.1 (2019-09-01)
+
+**Note:** Version bump only for package examples
+
+## 2.0.0 (2019-08-25)
+
+This is the **initial release**, and the start of this change log.
+
+Prior to version 2, FreeSewing was not a JavaScript project.
+As such, that history is out of scope for this change log.

packages/notation-legend/README.md

@@ -0,0 +1,99 @@
+![FreeSewing](https://freesewing.org/banner.jpg)
+
+<p align='center'><a
+  href="https://www.npmjs.com/package/@freesewing/examples"
+  title="@freesewing/examples on NPM"
+  ><img src="https://img.shields.io/npm/v/@freesewing/examples.svg"
+  alt="@freesewing/examples on NPM"/>
+  </a><a
+  href="https://opensource.org/licenses/MIT"
+  title="License: MIT"
+  ><img src="https://img.shields.io/npm/l/@freesewing/examples.svg?label=License"
+  alt="License: MIT"/>
+  </a><a
+  href="https://deepscan.io/dashboard#view=project&tid=2114&pid=2993&bid=23256"
+  title="Code quality on DeepScan"
+  ><img src="https://deepscan.io/api/teams/2114/projects/2993/branches/23256/badge/grade.svg"
+  alt="Code quality on DeepScan"/>
+  </a><a
+  href="https://github.com/freesewing/freesewing/issues?q=is%3Aissue+is%3Aopen+label%3Apkg%3Aexamples"
+  title="Open issues tagged pkg:examples"
+  ><img src="https://img.shields.io/github/issues/freesewing/freesewing/pkg:examples.svg?label=Issues"
+  alt="Open issues tagged pkg:examples"/>
+  </a></p><p align='center'><a
+  href="https://twitter.com/freesewing_org"
+  title="Follow @freesewing_org on Twitter"
+  ><img src="https://img.shields.io/badge/%F3%A0%80%A0-Follow%20us-blue.svg?logo=twitter&logoColor=white&logoWidth=15"
+  alt="Follow @freesewing_org on Twitter"/>
+  </a><a
+  href="https://gitter.im/freesewing/chat"
+  title="Chat with us on Gitter"
+  ><img src="https://img.shields.io/badge/%F3%A0%80%A0-Chat%20with%20us-CA0547.svg?logo=gitter&logoColor=white&logoWidth=15"
+  alt="Chat with us on Gitter"/>
+  </a><a
+  href="https://freesewing.org/patrons/join"
+  title="Become a FreeSewing Patron"
+  ><img src="https://img.shields.io/badge/%F3%A0%80%A0-Support%20us-blueviolet.svg?logo=cash-app&logoColor=white&logoWidth=15"
+  alt="Become a FreeSewing Patron"/>
+  </a><a
+  href="https://instagram.com/freesewing_org"
+  title="Follow @freesewing_org on Twitter"
+  ><img src="https://img.shields.io/badge/%F3%A0%80%A0-Follow%20us-E4405F.svg?logo=instagram&logoColor=white&logoWidth=15"
+  alt="Follow @freesewing_org on Twitter"/>
+  </a></p>
+
+## What am I looking at? 🤔
+
+This repository is our _monorepo_ holding [all our NPM packages](https://www.npmjs.com/search?q=keywords:freesewing).  
+This folder holds **@freesewing/examples**
+
+A FreeSewing pattern holding examples for our documentation
+
+## About FreeSewing 💀
+
+Where the world of makers and developers collide, that's where you'll find FreeSewing.
+
+Our [core library](https://freesewing.dev/reference/api/) is a _batteries-included_ toolbox
+for parametric design of sewing patterns. It's a modular system (check our list
+of [plugins](https://freesewing.dev/reference/plugins/) and getting started is as simple as:
+
+```bash
+npm init freesewing-pattern
+```
+
+The [getting started](https://freesewing.dev/guides/getting-started/) section on [freesewing.dev](https://freesewing.dev/) is a good
+entrypoint to our documentation, but you'll find a lot more there, including
+our [API reference](https://freesewing.dev/reference/api/),
+as well as [our turorial](https://freesewing.dev/tutorials/pattern-design/),
+and [howtos](https://freesewing.dev/howtos/).
+
+If you're a maker, checkout [freesewing.org](https://freesewing/) where you can generate
+our sewing patterns adapted to your measurements.
+
+## Support FreeSewing: Become a patron 🥰
+
+FreeSewing is an open source project run by a community,
+and financially supported by our patrons.
+
+If you feel what we do is worthwhile, you too
+should [become a patron](https://freesewing.org/patrons/join).
+
+## Links 👩‍💻
+
+- 💻 Makers website: [freesewing.org](https://freesewing.org)
+- 💻 Developers website: [freesewing.dev](https://freesewing.dev)
+- 💬 Chat: [gitter.im/freesewing](https://gitter.im/freesewing/chat)
+- 🐦 Twitter: [@freesewing_org](https://twitter.com/freesewing_org)
+- 📷 Instagram: [@freesewing_org](https://instagram.com/freesewing_org)
+
+## License: MIT 🤓
+
+© [Joost De Cock](https://github.com/joostdecock).  
+See [the license file](https://github.com/freesewing/freesewing/blob/develop/LICENSE) for details.
+
+## Where to get help 🤯
+
+Our [chatroom on Gitter](https://gitter.im/freesewing/chat) is the best place to ask questions,
+share your feedback, or just hang out.
+
+If you want to report a problem, please [create an issue](https://github.com/freesewing/freesewing/issues/new).

packages/notation-legend/config/index.js

@@ -0,0 +1,43 @@
+import { version } from '../package.json'
+
+export default {
+  name: 'notation-legend',
+  version,
+  design: 'Joost De Cock',
+  code: 'Joost De Cock',
+  department: 'accessories',
+  type: 'pattern',
+  difficulty: 1,
+  tags: ['documentation'],
+  optionGroups: {
+    fit: ['fixme']
+  },
+  measurements: [],
+  parts: [
+    'fabricLines',
+    'saLines',
+    'otherLines',
+    'sa',
+    'logo',
+    'notches',
+    'buttons',
+    'snaps',
+    'cutonfold',
+    'grainline',
+    'dimension',
+    'title',
+    'scalebox',
+    'lineWidths',
+    'lineStrokes',
+    'sizes'
+  ],
+  options: {
+    focus: '',
+    // Optiongroups are needed for now, because workbench
+    fixme: {
+      pct: 50,
+      min: 0,
+      max: 100
+    }
+  }
+}

packages/notation-legend/example/.babelrc

@@ -0,0 +1,10 @@
+{
+  "plugins": [
+    ["prismjs", {
+        "languages": ["javascript", "css", "markup"],
+        "plugins": ["line-numbers"],
+        "theme": "twilight",
+        "css": true
+    }]
+  ]
+}

packages/notation-legend/example/README.md

@@ -0,0 +1,95 @@
+<p align="center">
+<a title="Go to freesewing.org" href="https://freesewing.org/"><img src="https://freesewing.org/img/logo/black.svg" align="center" width="150px" alt="Freesewing logo"/></a>
+<br>
+<a href="https://freesewing.org/">FreeSewing v2</a>
+</p>
+<p align="center">A JavaScript library for made-to-measure sewing patterns</p>
+<p align='center'><a
+  href="https://twitter.com/freesewing_org"
+  title="Follow @freesewing_org on Twitter"
+  ><img src="https://img.shields.io/badge/%F3%A0%80%A0-Follow%20us-blue.svg?logo=twitter&logoColor=white&logoWidth=15"
+  alt="Follow @freesewing_org on Twitter"/>
+  </a><a
+  href="https://gitter.im/freesewing/freesewing"
+  title="Chat with us on Gitter"
+  ><img src="https://img.shields.io/badge/%F3%A0%80%A0-Chat%20with%20us-CA0547.svg?logo=gitter&logoColor=white&logoWidth=15"
+  alt="Chat with us on Gitter"/>
+  </a><a
+  href="https://freesewing.org/patrons/join"
+  title="Become a FreeSewing Patron"
+  ><img src="https://img.shields.io/badge/%F3%A0%80%A0-Support%20us-blueviolet.svg?logo=cash-app&logoColor=white&logoWidth=15"
+  alt="Become a FreeSewing Patron"/>
+  </a><a
+  href="https://instagram.com/freesewing_org"
+  title="Follow @freesewing_org on Twitter"
+  ><img src="https://img.shields.io/badge/%F3%A0%80%A0-Follow%20us-E4405F.svg?logo=instagram&logoColor=white&logoWidth=15"
+  alt="Follow @freesewing_org on Twitter"/>
+  </a>
+</p>
+
+# examples example
+
+This project was bootstrapped with [Create Freesewing Pattern](https://en.freesewing.dev/create-freesewing-pattern):
+
+```js
+npm init freesewing-pattern
+```
+
+This example folder is part of the local development environment.
+It is **not** part of the pattern's source code.
+
+To run this example, follow these steps:
+
+- In the folder above this one, run: `yarn start` (or `npm start`)
+- Then, in new terminal, run the same command in this folder: `yarn start` (or `npm start`)
+
+This will spin up the development environment, similar to [our online demo](https://examples.freesewing.dev/).
+
+## About FreeSewing 🤔
+
+Where the world of makers and developers collide, that's where you'll find FreeSewing.
+
+Our [core library](https://freesewing.dev/en/freesewing) is a _batteries-included_ toolbox
+for parametric design of sewing patterns. It's a modular system (check our list
+of [plugins](https://freesewing.dev/en/plugins) and getting started is as simple as:
+
+```bash
+npm init freesewing-pattern
+```
+
+The [getting started] section on [freesewing.dev](https://freesewing.dev/) is a good
+entrypoint to our documentation, but you'll find a lot more there, including
+our [API documentation](https://freesewing.dev/en/freesewing/api),
+as well as [examples](https://freesewing.dev/en/freesewing/examples),
+and [best practices](https://freesewing.dev/en/do).
+
+If you're a maker, checkout [freesewing.org](https://freesewing/) where you can generate
+our sewing patterns adapted to your measurements.
+
+## Support FreeSewing: Become a patron 🥰
+
+FreeSewing is an open source project run by a community,
+and financially supported by our patrons.
+
+If you feel what we do is worthwhile, you too
+should [become a patron](https://freesewing.org/patrons/join).
+
+## Links 👩‍💻
+
+- 💻 Makers website: [freesewing.org](https://freesewing.org)
+- 💻 Developers website: [freesewing.dev](https://freesewing.org)
+- 💬 Chat: [gitter.im/freesewing](https://gitter.im/freesewing/freesewing)
+- 🐦 Twitter: [@freesewing_org](https://twitter.com/freesewing_org)
+- 📷 Instagram: [@freesewing_org](https://instagram.com/freesewing_org)
+
+## License: MIT 🤓
+
+© [Joost De Cock](https://github.com/joostdecock).
+See [the license file](https://github.com/freesewing/freesewing/blob/develop/LICENSE) for details.
+
+## Where to get help 🤯
+
+Our [chatroom on Gitter](https://gitter.im) is the best place to ask questions,
+share your feedback, or just hang out.
+
+If you want to report a problem, please [create an issue](https://github.com/freesewing/freesewing/issues/new).

packages/notation-legend/example/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "examples-example",
+  "homepage": "https://freesewing.github.io/examples",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@freesewing/components": "latest",
+    "@freesewing/core": "latest",
+    "@freesewing/css-theme": "latest",
+    "@freesewing/i18n": "latest",
+    "@freesewing/models": "latest",
+    "@freesewing/mui-theme": "latest",
+    "@freesewing/pattern-info": "latest",
+    "@freesewing/plugin-bundle": "latest",
+    "@freesewing/plugin-theme": "latest",
+    "@freesewing/plugin-i18n": "latest",
+    "@freesewing/plugin-svgattr": "latest",
+    "@freesewing/utils": "latest",
+    "@material-ui/core": "^4.4.0",
+    "@material-ui/icons": "^4.2.1",
+    "@material-ui/lab": "^v4.0.0-alpha.25",
+    "pattern": "link:..",
+    "prismjs": "1.17.1",
+    "react": "^16.9",
+    "react-dom": "^16.9",
+    "react-scripts": "^3.1.1",
+    "file-saver": "^2.0.2",
+    "typeface-roboto-condensed": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "devDependencies": {
+    "babel-plugin-prismjs": "1.1.1"
+  }
+}

packages/notation-legend/example/public/App.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import freesewing from '@freesewing/core'
+import { Workbench } from '@freesewing/components'
+import 'typeface-roboto-condensed'
+import '@freesewing/css-theme'
+import './App.css'
+
+import Pattern from 'pattern'
+
+const App = (props) => {
+  let instance = new Pattern()
+  let config = instance.config
+  return <Workbench freesewing={freesewing} Pattern={Pattern} config={config} userLanguage="en" />
+}
+
+export default App

packages/notation-legend/example/public/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>examples</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

packages/notation-legend/example/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "examples",
+  "name": "examples",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

packages/notation-legend/example/src/App.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import freesewing from '@freesewing/core'
+import Workbench from '@freesewing/components/Workbench'
+import 'typeface-roboto-condensed'
+import '@freesewing/css-theme'
+
+import Pattern from 'pattern'
+
+const App = (props) => {
+  let instance = new Pattern()
+  let config = instance.config
+
+  // You can use this to add transations
+  let translations = {
+    JSON: 'JSON',
+    someOtherString: 'Some other string that needs translation'
+  }
+
+  return (
+    <Workbench
+      freesewing={freesewing}
+      Pattern={Pattern}
+      config={config}
+      userLanguage="en"
+      translations={translations}
+    />
+  )
+}
+
+export default App

packages/notation-legend/example/src/index.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+import * as serviceWorker from './serviceWorker'
+
+ReactDOM.render(<App />, document.getElementById('root'))
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: http://bit.ly/CRA-PWA
+serviceWorker.unregister()

packages/notation-legend/example/src/serviceWorker.js

@@ -0,0 +1,123 @@
+// In production, we register a service worker to serve assets from local cache.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on the "N+1" visit to a page, since previously
+// cached resources are updated in the background.
+
+// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
+// This link also includes instructions on opting out of this behavior.
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
+)
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location)
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config)
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://goo.gl/SC7cgQ'
+          )
+        })
+      } else {
+        // Is not local host. Just register service worker
+        registerValidSW(swUrl, config)
+      }
+    })
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then((registration) => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the old content will have been purged and
+              // the fresh content will have been added to the cache.
+              // It's the perfect time to display a "New content is
+              // available; please refresh." message in your web app.
+              console.log('New content is available; please refresh.')
+
+              // Execute callback
+              if (config.onUpdate) {
+                config.onUpdate(registration)
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.')
+
+              // Execute callback
+              if (config.onSuccess) {
+                config.onSuccess(registration)
+              }
+            }
+          }
+        }
+      }
+    })
+    .catch((error) => {
+      console.error('Error during service worker registration:', error)
+    })
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then((response) => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      if (
+        response.status === 404 ||
+        response.headers.get('content-type').indexOf('javascript') === -1
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then((registration) => {
+          registration.unregister().then(() => {
+            window.location.reload()
+          })
+        })
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config)
+      }
+    })
+    .catch(() => {
+      console.log('No internet connection found. App is running in offline mode.')
+    })
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then((registration) => {
+      registration.unregister()
+    })
+  }
+}

packages/notation-legend/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@freesewing/examples",
+  "version": "2.6.0",
+  "description": "A FreeSewing pattern holding examples for our documentation",
+  "author": "Joost De Cock <joost@decock.org> (https://github.com/joostdecock)",
+  "homepage": "https://freesewing.org/",
+  "repository": "github:freesewing/freesewing",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/freesewing/freesewing/issues"
+  },
+  "keywords": [
+    "freesewing",
+    "documentation",
+    "example",
+    "parametric design"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "npm run clean && rollup -c",
+    "test": "BABEL_ENV=production ../../node_modules/.bin/_mocha tests/*.test.js --require @babel/register",
+    "pubtest": "npm publish --registry http://localhost:6662",
+    "pubforce": "npm publish",
+    "symlink": "mkdir -p ./node_modules/@freesewing && cd ./node_modules/@freesewing && ln -s -f ../../../* . && cd -",
+    "start": "rollup -c -w",
+    "netlify": "echo \"Not configured yet\"",
+    "testci": "BABEL_ENV=production ./node_modules/.bin/_mocha tests/*.test.js --require @babel/register"
+  },
+  "peerDependencies": {
+    "@freesewing/core": "^2.6.0",
+    "@freesewing/plugin-bundle": "^2.6.0"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "react": "^16.8",
+    "react-dom": "^16.8",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "babel-eslint": "10.1.0",
+    "eslint": "^5.16.0",
+    "babel-jest": "24.7.1",
+    "jest": "24.7.1",
+    "@freesewing/components": "^2.6.0",
+    "@freesewing/css-theme": "^2.6.0",
+    "@freesewing/i18n": "^2.6.0",
+    "@freesewing/mui-theme": "^2.6.0",
+    "@freesewing/plugin-bust": "^2.6.0",
+    "@freesewing/plugin-buttons": "^2.6.0",
+    "@freesewing/plugin-flip": "^2.6.0",
+    "@freesewing/utils": "^2.6.0",
+    "@svgr/rollup": "^5.4.0",
+    "cross-env": "^5.1.4",
+    "gh-pages": "^1.2.0",
+    "react-scripts": "^3.0.0",
+    "webpack": "4.29.6",
+    "rollup": "^0.64.1",
+    "rollup-plugin-babel": "^4.0.1",
+    "rollup-plugin-babel-minify": "^7.0.0",
+    "rollup-plugin-commonjs": "^9.1.3",
+    "rollup-plugin-json": "^3.1.0",
+    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-peer-deps-external": "^2.2.0",
+    "rollup-plugin-postcss": "^1.6.2",
+    "rollup-plugin-url": "^1.4.0",
+    "@material-ui/core": "4.0.1",
+    "@material-ui/icons": "4.0.1",
+    "@material-ui/lab": "^v4.0.0-alpha.14",
+    "react-intl": "2.8.0",
+    "prop-types": "15.7.2",
+    "mocha": "^6.1.4",
+    "chai": "^4.1.2",
+    "chai-string": "^1.4.0",
+    "@babel/register": "^7.4.4"
+  },
+  "files": [
+    "dist/*",
+    "README.md",
+    "package.json"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "tag": "latest"
+  },
+  "engines": {
+    "node": ">=8.0.0",
+    "npm": ">=5"
+  }
+}

packages/notation-legend/rollup.config.js

@@ -0,0 +1,41 @@
+import babel from 'rollup-plugin-babel'
+import resolve from 'rollup-plugin-node-resolve'
+import commonjs from 'rollup-plugin-commonjs'
+import json from 'rollup-plugin-json'
+import minify from 'rollup-plugin-babel-minify'
+import peerDepsExternal from 'rollup-plugin-peer-deps-external'
+import { name, version, description, author, license, main, module } from './package.json'
+
+const output = [
+  {
+    file: main,
+    format: 'cjs',
+    sourcemap: true
+  }
+]
+if (typeof module !== 'undefined')
+  output.push({
+    file: module,
+    format: 'es',
+    sourcemap: true
+  })
+
+export default {
+  input: 'src/index.js',
+  output,
+  plugins: [
+    peerDepsExternal(),
+    resolve({ modulesOnly: true }),
+    commonjs(),
+    json(),
+    babel({
+      exclude: 'node_modules/**',
+      plugins: ['@babel/plugin-proposal-object-rest-spread']
+    }),
+    minify({
+      comments: false,
+      sourceMap: true,
+      banner: `/**\n * ${name} | v${version}\n * ${description}\n * (c) ${new Date().getFullYear()} ${author}\n * @license ${license}\n */`
+    })
+  ]
+}

packages/notation-legend/src/buttons.js

@@ -0,0 +1,16 @@
+import { box, drawLine } from './shared'
+import { fabricTypes } from './styles'
+
+export default (part) => {
+  const { points, Point, snippets, Snippet } = part.shorthand()
+
+  points.a = new Point(30, 10)
+  points.atxt = new Point(30, 20).attr('data-text', 'button').attr('data-text-class', 'center')
+  snippets.a = new Snippet('button', points.a)
+
+  points.b = new Point(80, 10)
+  points.btxt = new Point(80, 20).attr('data-text', 'buttonhole').attr('data-text-class', 'center')
+  snippets.b = new Snippet('buttonhole', points.b).attr('data-rotate', 90)
+
+  return box(part, 120, 30)
+}

packages/notation-legend/src/cutonfold.js

@@ -0,0 +1,15 @@
+import { box, drawLine } from './shared'
+
+export default (part) => {
+  const { points, Point, macro } = part.shorthand()
+
+  points.a = new Point(10, 20)
+  points.b = new Point(90, 20)
+
+  macro('cutonfold', {
+    from: points.a,
+    to: points.b
+  })
+
+  return box(part, 100, 25)
+}

packages/notation-legend/src/dimension.js

@@ -0,0 +1,15 @@
+import { box, drawLine } from './shared'
+
+export default (part) => {
+  const { points, Point, macro } = part.shorthand()
+
+  points.a = new Point(10, 20)
+  points.b = new Point(90, 20)
+
+  macro('ld', {
+    from: points.a,
+    to: points.b
+  })
+
+  return box(part, 100, 25)
+}

packages/notation-legend/src/fabriclines.js

@@ -0,0 +1,13 @@
+import { box, drawLine } from './shared'
+import { fabricTypes } from './styles'
+
+export default (part) => {
+  let y = 10
+  let w = 110
+  for (const t of fabricTypes) {
+    drawLine(part, y, t)
+    y += 15
+  }
+
+  return box(part, 120, 65)
+}

packages/notation-legend/src/grainline.js

@@ -0,0 +1,15 @@
+import { box, drawLine } from './shared'
+
+export default (part) => {
+  const { points, Point, macro } = part.shorthand()
+
+  points.a = new Point(10, 20)
+  points.b = new Point(90, 20)
+
+  macro('grainline', {
+    from: points.a,
+    to: points.b
+  })
+
+  return box(part, 100, 25)
+}

packages/notation-legend/src/index.js

@@ -0,0 +1,48 @@
+import freesewing from '@freesewing/core'
+import plugins from '@freesewing/plugin-bundle'
+import buttonsPlugin from '@freesewing/plugin-buttons'
+import config from '../config/'
+// Notation examples
+import draftFabricLines from './fabriclines'
+import draftSaLines from './salines'
+import draftOtherLines from './otherlines'
+import draftSa from './sa'
+import draftNotches from './notches'
+import draftButtons from './buttons'
+import draftSnaps from './snaps'
+import draftLogo from './logo'
+import draftCutonfold from './cutonfold'
+import draftGrainline from './grainline'
+import draftDimension from './dimension'
+import draftTitle from './title'
+import draftScalebox from './scalebox'
+import draftLineWidths from './linewidths'
+import draftLineStrokes from './linestrokes'
+import draftSizes from './sizes'
+
+// Create design
+const Pattern = new freesewing.Design(config, [plugins, buttonsPlugin])
+
+// Attach draft methods to prototype
+let methods = {
+  draftFabricLines,
+  draftSaLines,
+  draftOtherLines,
+  draftSa,
+  draftLogo,
+  draftButtons,
+  draftSnaps,
+  draftNotches,
+  draftCutonfold,
+  draftGrainline,
+  draftDimension,
+  draftTitle,
+  draftScalebox,
+  draftLineWidths,
+  draftLineStrokes,
+  draftSizes
+}
+
+for (let m of Object.keys(methods)) Pattern.prototype[m] = methods[m]
+
+export default Pattern

packages/notation-legend/src/linestrokes.js

@@ -0,0 +1,13 @@
+import { box, drawLine } from './shared'
+import { lineStrokes } from './styles'
+
+export default (part) => {
+  let y = 10
+  let w = 110
+  for (const t of lineStrokes) {
+    drawLine(part, y, t)
+    y += 15
+  }
+
+  return box(part, 120, 50)
+}

packages/notation-legend/src/linewidths.js

@@ -0,0 +1,13 @@
+import { box, drawLine } from './shared'
+import { lineWidths } from './styles'
+
+export default (part) => {
+  let y = 10
+  let w = 110
+  for (const t of lineWidths) {
+    drawLine(part, y, t)
+    y += 15
+  }
+
+  return box(part, 120, 95)
+}

packages/notation-legend/src/logo.js

@@ -0,0 +1,11 @@
+import { box, drawLine } from './shared'
+
+export default (part) => {
+  const { points, Point, snippets, Snippet } = part.shorthand()
+
+  points.a = new Point(50, 40)
+  points.atxt = new Point(30, 20).attr('data-text', 'logo').attr('data-text-class', 'center')
+  snippets.a = new Snippet('logo', points.a)
+
+  return box(part, 100, 60)
+}

packages/notation-legend/src/notches.js

@@ -0,0 +1,16 @@
+import { box, drawLine } from './shared'
+import { fabricTypes } from './styles'
+
+export default (part) => {
+  const { points, Point, snippets, Snippet } = part.shorthand()
+
+  points.a = new Point(30, 10)
+  points.atxt = new Point(30, 20).attr('data-text', 'notch').attr('data-text-class', 'center')
+  snippets.a = new Snippet('notch', points.a)
+
+  points.b = new Point(80, 10)
+  points.btxt = new Point(80, 20).attr('data-text', 'bnotch').attr('data-text-class', 'center')
+  snippets.b = new Snippet('bnotch', points.b)
+
+  return box(part, 120, 30)
+}

packages/notation-legend/src/otherlines.js

@@ -0,0 +1,26 @@
+import { box } from './shared'
+import { lineTypes } from './styles'
+
+export default (part) => {
+  let { points, Point, paths, Path, snippets, Snippet } = part.shorthand()
+
+  const drawLine = (y, t) => {
+    points[`${t}From`] = new Point(10, y)
+    points[`${t}To`] = new Point(w, y)
+    paths[t] = new Path()
+      .move(points[`${t}From`])
+      .line(points[`${t}To`])
+      .attr('class', t)
+      .attr('data-text', t)
+      .attr('data-text-class', 'center')
+  }
+
+  let y = 10
+  let w = 110
+  for (const t of lineTypes) {
+    drawLine(y, t)
+    y += 15
+  }
+
+  return box(part, 120, 65)
+}

packages/notation-legend/src/sa.js

@@ -0,0 +1,22 @@
+import { box, drawLine } from './shared'
+import { fabricTypes } from './styles'
+
+export default (part) => {
+  const { points, Point, paths, Path } = part.shorthand()
+
+  points.a = new Point(10, 40)
+  points.aCp = new Point(40, 40)
+  points.b = new Point(69.5, 10)
+  points.c = new Point(110, 50)
+
+  paths.a = new Path()
+    .move(points.a)
+    .curve_(points.aCp, points.b)
+    .line(points.c)
+    .attr('class', 'fabric')
+    .attr('data-text', 'seam')
+
+  paths.sa = paths.a.offset(-10).attr('class', 'fabric sa').attr('data-text', 'seamAllowance')
+
+  return box(part, 120, 60)
+}

packages/notation-legend/src/salines.js

@@ -0,0 +1,13 @@
+import { box, drawLine } from './shared'
+import { fabricTypes } from './styles'
+
+export default (part) => {
+  let y = 10
+  let w = 110
+  for (const t of fabricTypes) {
+    drawLine(part, y, t + ' sa')
+    y += 15
+  }
+
+  return box(part, 120, 65)
+}

packages/notation-legend/src/scalebox.js

@@ -0,0 +1,10 @@
+import { box, drawLine } from './shared'
+
+export default (part) => {
+  const { points, Point, macro } = part.shorthand()
+
+  points.a = new Point(55, 25)
+  macro('scalebox', { at: points.a })
+
+  return box(part, 110, 55)
+}

packages/notation-legend/src/shared.js

@@ -0,0 +1,27 @@
+/**
+ * This draws a (diagonal in a) box
+ * with with w and height h with a non-visible line.
+ * This is to force our examples parts to a certain size
+ */
+export function box(part, w = 100, h = 50) {
+  part.paths.box = new part.Path()
+    .move(new part.Point(0, 0))
+    .line(new part.Point(w, h))
+    .attr('class', 'hidden')
+
+  return part
+}
+
+export function drawLine(part, y, t) {
+  let { points, Point, paths, Path } = part.shorthand()
+  points[`${t}From`] = new Point(10, y)
+  points[`${t}To`] = new Point(110, y)
+  paths[t] = new Path()
+    .move(points[`${t}From`])
+    .line(points[`${t}To`])
+    .attr('class', t)
+    .attr('data-text', t)
+    .attr('data-text-class', 'center')
+
+  return part
+}

packages/notation-legend/src/sizes.js

@@ -0,0 +1,106 @@
+import { box, drawLine } from './shared'
+
+export default (part) => {
+  const { points, Point, paths, Path } = part.shorthand()
+
+  points.xxxs1 = new Point(0, 10)
+  points.xxxs2 = new Point(10, 10)
+  paths.xxxs = new Path()
+    .move(points.xxxs1)
+    .line(points.xxxs2)
+    .attr('class', 'size-3XS')
+    .attr('data-text', '3XS')
+    .attr('data-text-class', 'center text-xs')
+
+  points.xxs1 = new Point(12, 10)
+  points.xxs2 = new Point(22, 10)
+  paths.xxs = new Path()
+    .move(points.xxs1)
+    .line(points.xxs2)
+    .attr('class', 'size-2XS')
+    .attr('data-text', '2XS')
+    .attr('data-text-class', 'center text-xs')
+
+  points.xs1 = new Point(24, 10)
+  points.xs2 = new Point(34, 10)
+  paths.xs = new Path()
+    .move(points.xs1)
+    .line(points.xs2)
+    .attr('class', 'size-XS')
+    .attr('data-text', 'XS')
+    .attr('data-text-class', 'center text-xs')
+
+  points.s1 = new Point(36, 10)
+  points.s2 = new Point(46, 10)
+  paths.s = new Path()
+    .move(points.s1)
+    .line(points.s2)
+    .attr('class', 'size-S')
+    .attr('data-text', 'S')
+    .attr('data-text-class', 'center text-xs')
+
+  points.m1 = new Point(48, 10)
+  points.m2 = new Point(58, 10)
+  paths.m = new Path()
+    .move(points.m1)
+    .line(points.m2)
+    .attr('class', 'size-M')
+    .attr('data-text', 'M')
+    .attr('data-text-class', 'center text-xs')
+
+  points.l1 = new Point(60, 10)
+  points.l2 = new Point(70, 10)
+  paths.l = new Path()
+    .move(points.l1)
+    .line(points.l2)
+    .attr('class', 'size-L')
+    .attr('data-text', 'L')
+    .attr('data-text-class', 'center text-xs')
+
+  points.xl1 = new Point(72, 10)
+  points.xl2 = new Point(82, 10)
+  paths.xl = new Path()
+    .move(points.xl1)
+    .line(points.xl2)
+    .attr('class', 'size-XL')
+    .attr('data-text', 'XL')
+    .attr('data-text-class', 'center text-xs')
+
+  points.xxl1 = new Point(84, 10)
+  points.xxl2 = new Point(96, 10)
+  paths.xxl = new Path()
+    .move(points.xxl1)
+    .line(points.xxl2)
+    .attr('class', 'size-2XL')
+    .attr('data-text', '2XL')
+    .attr('data-text-class', 'center text-xs')
+
+  points.xxxl1 = new Point(98, 10)
+  points.xxxl2 = new Point(108, 10)
+  paths.xxxl = new Path()
+    .move(points.xxxl1)
+    .line(points.xxxl2)
+    .attr('class', 'size-3XL')
+    .attr('data-text', '3XL')
+    .attr('data-text-class', 'center text-xs')
+
+  points.xxxxl1 = new Point(110, 10)
+  points.xxxxl2 = new Point(120, 10)
+  paths.xxxxl = new Path()
+    .move(points.xxxxl1)
+    .line(points.xxxxl2)
+    .attr('class', 'size-4XL')
+    .attr('data-text', '4XL')
+    .attr('data-text-class', 'center text-xs')
+
+  points.m2m1 = new Point(0, 17)
+  points.m2m2 = new Point(120, 17)
+  paths.m2m = new Path()
+    .move(points.m2m1)
+    .line(points.m2m2)
+    .attr('class', 'made-to-measure')
+    .attr('data-text', 'madeToMeasure')
+    .attr('data-text-class', 'center text-xs')
+
+  return box(part, 120, 20)
+}

packages/notation-legend/src/snaps.js

@@ -0,0 +1,16 @@
+import { box, drawLine } from './shared'
+import { fabricTypes } from './styles'
+
+export default (part) => {
+  const { points, Point, snippets, Snippet } = part.shorthand()
+
+  points.a = new Point(30, 10)
+  points.atxt = new Point(30, 20).attr('data-text', 'snap-stud').attr('data-text-class', 'center')
+  snippets.a = new Snippet('snap-stud', points.a)
+
+  points.b = new Point(80, 10)
+  points.btxt = new Point(80, 20).attr('data-text', 'snap-socket').attr('data-text-class', 'center')
+  snippets.b = new Snippet('snap-socket', points.b).attr('data-rotate', 90)
+
+  return box(part, 120, 30)
+}

packages/notation-legend/src/styles.js

@@ -0,0 +1,14 @@
+export const fabricTypes = ['fabric', 'lining', 'canvas', 'interfacing', 'various']
+
+export const lineTypes = ['note', 'mark', 'contrast', 'help']
+
+export const lineWidths = [
+  'stroke-xs',
+  'stroke-sm',
+  'default',
+  'stroke-lg',
+  'stroke-xl',
+  'stroke-xxl'
+]
+
+export const lineStrokes = ['dotted', 'dashed', 'lashed']

packages/notation-legend/src/title.js

@@ -0,0 +1,15 @@
+import { box, drawLine } from './shared'
+
+export default (part) => {
+  const { points, Point, macro } = part.shorthand()
+
+  points.a = new Point(30, 30)
+
+  macro('title', {
+    at: points.a,
+    nr: 1,
+    title: 'Part name'
+  })
+
+  return box(part, 100, 65)
+}

packages/notation-legend/test.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Brian</title>
+  </head>
+  <body>
+    <div id="svg"></div>
+    <script type="text/javascript" src="freesewing.js"></script>
+    <script>
+      console.log(freesewing)
+    </script>
+  </body>
+</html>

packages/notation-legend/tests/shared.test.js

@@ -0,0 +1,21 @@
+// This file is auto-generated.
+// Changes you make will be overwritten.
+const expect = require('chai').expect
+const models = require('@freesewing/models')
+const patterns = require('@freesewing/pattern-info')
+
+const Examples = require('../dist')
+
+// Shared tests
+const testPatternConfig = require('../../../tests/patterns/config')
+const testPatternDrafting = require('../../../tests/patterns/drafting')
+const testPatternSampling = require('../../../tests/patterns/sampling')
+
+// Test config
+testPatternConfig('examples', new Examples(), expect, models, patterns)
+
+// Test drafting
+testPatternDrafting('examples', Examples, expect, models, patterns)
+
+// Test sampling
+testPatternSampling('examples', Examples, expect, models, patterns)