feat(components): More examples in the Examples component

config/changelog.yaml

@@ -1,6 +1,8 @@
 Unreleased:
   date:
   Added:
+    components:
+      - Added some more examples to the Examples component
     css-theme:
       - Proper formatting for markdown syntax highlighting
   Changed:

packages/examples/config/index.js

@@ -1,100 +1,105 @@
-import { version } from "../package.json";
+import { version } from '../package.json'
 
 export default {
-  name: "examples",
+  name: 'examples',
   version,
-  design: "Joost De Cock",
+  design: 'Joost De Cock',
-  code: "Joost De Cock",
+  code: 'Joost De Cock',
-  department: "womenswear",
+  department: 'womenswear',
-  type: "pattern",
+  type: 'pattern',
   difficulty: 1,
-  tags: [
+  tags: ['example'],
-    "example",
-  ],
   optionGroups: {
-    fit: ["fixme"]
+    fit: ['fixme']
   },
   measurements: [],
   dependencies: {
-    point_attr: "path_attr"
+    point_attr: 'path_attr'
   },
   parts: [
-    "point_attr",
+    'point_attr',
-    "path_move",
+    'path_move',
-    "path_line",
+    'path_line',
-    "path_curve",
+    'path_curve',
-    "path__curve",
+    'path__curve',
-    "path_curve_",
+    'path_curve_',
-    "path_close",
+    'path_close',
-    "path_ops",
+    'path_ops',
-    "path_attr",
+    'path_attr',
-    "path_clone",
+    'path_clone',
-    "path_divide",
+    'path_divide',
-    "path_edge",
+    'path_edge',
-    "path_end",
+    'path_end',
-    "path_intersects",
+    'path_intersects',
-    "path_intersectsx",
+    'path_intersectsx',
-    "path_intersectsy",
+    'path_intersectsy',
-    "path_join",
+    'path_join',
-    "path_length",
+    'path_length',
-    "path_offset",
+    'path_offset',
-    "path_reverse",
+    'path_reverse',
-    "path_shiftalong",
+    'path_shiftalong',
-    "path_shiftfractionalong",
+    'path_shiftfractionalong',
-    "path_split",
+    'path_split',
-    "path_start",
+    'path_start',
-    "path_translate",
+    'path_translate',
-    "path_trim",
+    'path_trim',
-    "plugin_buttons",
+    'plugin_buttons',
-    "plugin_cutonfold",
+    'plugin_cutonfold',
-    "plugin_dimension",
+    'plugin_dimension',
-    "plugin_grainline",
+    'plugin_grainline',
-    "plugin_logo",
+    'plugin_logo',
-    "plugin_round",
+    'plugin_round',
-    "plugin_scalebox",
+    'plugin_scalebox',
-    "plugin_sprinkle",
+    'plugin_sprinkle',
-    "plugin_title",
+    'plugin_title',
-    "point_angle",
+    'point_angle',
-    "point_attr",
+    'point_attr',
-    "point_clone",
+    'point_clone',
-    "point_copy",
+    'point_copy',
-    "point_dist",
+    'point_dist',
-    "point_dx",
+    'point_dx',
-    "point_dy",
+    'point_dy',
-    "point_flipx",
+    'point_flipx',
-    "point_flipy",
+    'point_flipy',
-    "point_shift",
+    'point_shift',
-    "point_shiftfractiontowards",
+    'point_shiftfractiontowards',
-    "point_shifttowards",
+    'point_shifttowards',
-    "point_shiftoutwards",
+    'point_shiftoutwards',
-    "point_sitson",
+    'point_sitson',
-    "point_sitsroughlyon",
+    'point_sitsroughlyon',
-    "point_rotate",
+    'point_rotate',
-    "point_translate",
+    'point_translate',
-    "settings_sa",
+    'settings_sa',
-    "snippet",
+    'snippet',
-    "snippet_attr",
+    'snippet_attr',
-    "snippet_clone",
+    'snippet_clone',
-    "utils_linesintersect",
+    'snippets_bnotch',
-    "utils_beamsintersect",
+    'snippets_notch',
-    "utils_beamintersectsx",
+    'snippets_button',
-    "utils_beamintersectsy",
+    'snippets_buttonhole',
-    "utils_lineintersectscurve",
+    'snippets_snapsocket',
-    "utils_curvesintersect",
+    'snippets_snapstud',
-    "utils_pointonbeam",
+    'snippets_logo',
-    "utils_pointonline",
+    'utils_linesintersect',
-    "utils_pointoncurve",
+    'utils_beamsintersect',
-    "utils_circlesintersect",
+    'utils_beamintersectsx',
-    "utils_beamintersectscircle",
+    'utils_beamintersectsy',
-    "utils_lineintersectscircle",
+    'utils_lineintersectscurve',
-    "utils_curveintersectsy",
+    'utils_curvesintersect',
-    "utils_curveintersectsx",
+    'utils_pointonbeam',
-    "utils_splitcurve",
+    'utils_pointonline',
-    "docs_overview",
+    'utils_pointoncurve',
-    "docs_coords"
+    'utils_circlesintersect',
+    'utils_beamintersectscircle',
+    'utils_lineintersectscircle',
+    'utils_curveintersectsy',
+    'utils_curveintersectsx',
+    'utils_splitcurve',
+    'docs_overview',
+    'docs_coords'
   ],
   options: {
-    focus: "",
+    focus: '',
     // Optiongroups are needed for now, because workbench
     fixme: {
       pct: 50,
@@ -102,4 +107,4 @@ export default {
       max: 100
     }
   }
-};
+}

packages/examples/src/index.js

@@ -76,6 +76,13 @@ import draftSettings_sa from './settings_sa'
 import draftSnippet from './snippet'
 import draftSnippet_attr from './snippet_attr'
 import draftSnippet_clone from './snippet_clone'
+import draftSnippets_bnotch from './snippets_bnotch'
+import draftSnippets_notch from './snippets_notch'
+import draftSnippets_button from './snippets_button'
+import draftSnippets_buttonhole from './snippets_buttonhole'
+import draftSnippets_snapsocket from './snippets_snapsocket'
+import draftSnippets_snapstud from './snippets_snapstud'
+import draftSnippets_logo from './snippets_logo'
 // Docs illustrations
 import draftDocs_overview from './docs_overview'
 import draftDocs_coords from './docs_coords'
@@ -140,6 +147,13 @@ let methods = {
   draftSnippet,
   draftSnippet_attr,
   draftSnippet_clone,
+  draftSnippets_bnotch,
+  draftSnippets_notch,
+  draftSnippets_button,
+  draftSnippets_buttonhole,
+  draftSnippets_snapsocket,
+  draftSnippets_snapstud,
+  draftSnippets_logo,
   draftUtils_linesintersect,
   draftUtils_beamsintersect,
   draftUtils_beamintersectsx,

packages/examples/src/plugin_buttons.js

@@ -1,12 +1,12 @@
 import { box } from './shared'
 
-export default part => {
+export default (part) => {
   let { Point, snippets, Snippet } = part.shorthand()
 
   snippets.button = new Snippet('button', new Point(20, 10))
   snippets.buttonhole = new Snippet('buttonhole', new Point(40, 10))
-  snippets.snapMale = new Snippet('snap-male', new Point(60, 10))
+  snippets.snapMale = new Snippet('snap-stud', new Point(60, 10))
-  snippets.snapFemale = new Snippet('snap-female', new Point(80, 10))
+  snippets.snapFemale = new Snippet('snap-socket', new Point(80, 10))
 
   return box(part, 100, 20)
 }

packages/examples/src/plugin_cutonfold.js

@@ -1,10 +1,10 @@
-export default part => {
+export default (part) => {
   let { Point, points, Path, paths, macro } = part.shorthand()
 
   points.topLeft = new Point(0, 0)
   points.topRight = new Point(150, 0)
-  points.bottomRight = new Point(150, 50)
+  points.bottomRight = new Point(150, 30)
-  points.bottomLeft = new Point(0, 50)
+  points.bottomLeft = new Point(0, 30)
 
   paths.box = new Path()
     .move(points.topLeft)
@@ -14,8 +14,8 @@ export default part => {
     .close()
 
   macro('cutonfold', {
-    from: points.topRight,
+    from: points.bottomLeft,
-    to: points.topLeft,
+    to: points.bottomRight,
     grainline: true
   })
 

packages/examples/src/plugin_grainline.js

@@ -1,4 +1,6 @@
-export default part => {
+import { box } from './shared'
+
+export default (part) => {
   let { Point, points, macro } = part.shorthand()
 
   points.grainlineFrom = new Point(10, 10)
@@ -9,5 +11,5 @@ export default part => {
     to: points.grainlineTo
   })
 
-  return part
+  return box(part, 110, 15)
 }

packages/examples/src/snippets_bnotch.js

@@ -0,0 +1,10 @@
+import { box } from './shared'
+
+export default (part) => {
+  let { Point, points, Snippet, snippets } = part.shorthand()
+
+  points.anchor = new Point(50, 5)
+  snippets.demo = new Snippet('bnotch', points.anchor)
+
+  return box(part, 100, 10)
+}

packages/examples/src/snippets_button.js

@@ -0,0 +1,10 @@
+import { box } from './shared'
+
+export default (part) => {
+  let { Point, points, Snippet, snippets } = part.shorthand()
+
+  points.anchor = new Point(50, 5)
+  snippets.demo = new Snippet('button', points.anchor)
+
+  return box(part, 100, 10)
+}

packages/examples/src/snippets_buttonhole.js

@@ -0,0 +1,10 @@
+import { box } from './shared'
+
+export default (part) => {
+  let { Point, points, Snippet, snippets } = part.shorthand()
+
+  points.anchor = new Point(50, 5)
+  snippets.demo = new Snippet('buttonhole', points.anchor)
+
+  return box(part, 100, 10)
+}

packages/examples/src/snippets_logo.js

@@ -0,0 +1,10 @@
+import { box } from './shared'
+
+export default (part) => {
+  let { Point, points, Snippet, snippets } = part.shorthand()
+
+  points.anchor = new Point(50, 35)
+  snippets.demo = new Snippet('logo', points.anchor)
+
+  return box(part, 100, 50)
+}

packages/examples/src/snippets_notch.js

@@ -0,0 +1,10 @@
+import { box } from './shared'
+
+export default (part) => {
+  let { Point, points, Snippet, snippets } = part.shorthand()
+
+  points.anchor = new Point(50, 5)
+  snippets.demo = new Snippet('notch', points.anchor)
+
+  return box(part, 100, 10)
+}

packages/examples/src/snippets_snapsocket.js

@@ -0,0 +1,10 @@
+import { box } from './shared'
+
+export default (part) => {
+  let { Point, points, Snippet, snippets } = part.shorthand()
+
+  points.anchor = new Point(50, 5)
+  snippets.demo = new Snippet('snap-socket', points.anchor)
+
+  return box(part, 100, 10)
+}

packages/examples/src/snippets_snapstud.js

@@ -0,0 +1,10 @@
+import { box } from './shared'
+
+export default (part) => {
+  let { Point, points, Snippet, snippets } = part.shorthand()
+
+  points.anchor = new Point(50, 5)
+  snippets.demo = new Snippet('snap-stud', points.anchor)
+
+  return box(part, 100, 10)
+}