Skip to content

Commit 356afc0

Browse files
chrisvxdchrisvxd
committed
docs: add core example
1 parent b1eb6a5 commit 356afc0

File tree

6 files changed

+6782
-0
lines changed

6 files changed

+6782
-0
lines changed

‎examples/core/.storybook/addons.js‎

Whitespace-only changes.

‎examples/core/.storybook/config.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { configure } from "@storybook/react";
2+
3+
// automatically import all files ending in *.stories.js
4+
const req = require.context("../stories", true, /.stories.js$/);
5+
const loadStories = () => {
6+
req.keys().forEach(filename => req(filename));
7+
};
8+
9+
configure(loadStories, module);

‎examples/core/example.asketch.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"_class":"page","do_objectID":"77e2ffd8-3975-45f6-ac4d-ab2d753a57df","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"Stories","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"symbolMaster","do_objectID":"997c2d12-cfbf-4a0c-bad7-6bf84a28658e","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"📱 basic/with text","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"group","do_objectID":"7f5bcf68-2ec5-4961-8aca-a18d7d01be6a","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"div","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"text","do_objectID":"647e7f1a-eab6-44fb-aeae-2478c15a9f1d","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"Hello, world!","nameIsFixed":false,"resizingConstraint":47,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"clippingMaskMode":0,"hasClippingMask":false,"style":{"color":"rgb(0, 0, 0)","fontSize":16,"fontFamily":"Times New Roman","fontWeight":400,"textDecoration":"none","textAlign":"start","textTransform":"none"},"frame":{"_class":"rect","constrainProportions":false,"height":17,"width":86.203125,"x":0,"y":0},"text":"Hello, world!","automaticallyDrawOnUnderlyingPath":false,"dontSynchroniseWithSymbol":false,"lineSpacingBehaviour":2,"textBehaviour":0}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":18,"width":304,"x":8,"y":8},"hasClickThrough":false,"windingRule":1}],"clippingMaskMode":0,"hasClippingMask":false,"frame":{"_class":"rect","constrainProportions":false,"width":312,"height":26,"x":0,"y":0},"style":{"_class":"style","endDecorationType":0,"miterLimit":10,"startDecorationType":0},"horizontalRulerData":{"_class":"rulerData","base":0,"guides":[]},"verticalRulerData":{"_class":"rulerData","base":0,"guides":[]},"backgroundColor":{"_class":"color","alpha":1,"blue":1,"green":1,"red":1},"hasClickThrough":true,"includeInCloudUpload":true,"hasBackgroundColor":false,"includeBackgroundColorInExport":true,"resizesContent":false,"includeBackgroundColorInInstance":false,"symbolID":"basic/with text:narrow","changeIdentifier":0},{"_class":"symbolMaster","do_objectID":"c1272045-d377-42f8-9e8c-649dd65464f4","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"📱 basic/with pseudo element","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"group","do_objectID":"e02203c9-2f0b-48a6-94c7-85112ee67934","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"div","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"group","do_objectID":"807eede7-9272-4fa3-a3e8-3584359e64b9","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"my-div after-reset","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"text","do_objectID":"a4960086-5f73-486e-a10a-7bb1e0e38038","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"Hello, world!","nameIsFixed":false,"resizingConstraint":47,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"clippingMaskMode":0,"hasClippingMask":false,"style":{"color":"rgb(0, 0, 0)","fontSize":16,"fontFamily":"Times New Roman","fontWeight":400,"textDecoration":"none","textAlign":"start","textTransform":"none"},"frame":{"_class":"rect","constrainProportions":false,"height":17,"width":86.203125,"x":0,"y":0},"text":"Hello, world!","automaticallyDrawOnUnderlyingPath":false,"dontSynchroniseWithSymbol":false,"lineSpacingBehaviour":2,"textBehaviour":0},{"_class":"group","do_objectID":"55e4735b-3340-4da7-ac87-c562665e148b","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"fake-pseudo","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"text","do_objectID":"be332c77-f027-4bb0-8126-5126345ac392","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"🤖","nameIsFixed":false,"resizingConstraint":47,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"clippingMaskMode":0,"hasClippingMask":false,"style":{"color":"rgb(0, 0, 0)","fontSize":16,"fontFamily":"Times New Roman","fontWeight":400,"textDecoration":"none","textAlign":"start","textTransform":"none"},"frame":{"_class":"rect","constrainProportions":false,"height":17,"width":21,"x":0,"y":6},"text":"🤖","automaticallyDrawOnUnderlyingPath":false,"dontSynchroniseWithSymbol":false,"lineSpacingBehaviour":2,"textBehaviour":0}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":26,"width":21,"x":86.1875,"y":0},"hasClickThrough":false,"windingRule":1}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":18,"width":304,"x":0,"y":0},"hasClickThrough":false,"windingRule":1}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":18,"width":304,"x":8,"y":8},"hasClickThrough":false,"windingRule":1}],"clippingMaskMode":0,"hasClippingMask":false,"frame":{"_class":"rect","constrainProportions":false,"width":312,"height":26,"x":0,"y":126},"style":{"_class":"style","endDecorationType":0,"miterLimit":10,"startDecorationType":0},"horizontalRulerData":{"_class":"rulerData","base":0,"guides":[]},"verticalRulerData":{"_class":"rulerData","base":0,"guides":[]},"backgroundColor":{"_class":"color","alpha":1,"blue":1,"green":1,"red":1},"hasClickThrough":true,"includeInCloudUpload":true,"hasBackgroundColor":false,"includeBackgroundColorInExport":true,"resizesContent":false,"includeBackgroundColorInInstance":false,"symbolID":"basic/with pseudo element:narrow","changeIdentifier":0},{"_class":"symbolMaster","do_objectID":"35b323d7-72f8-47a0-a32e-7c9dc6ad89e3","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"🖥 basic/with text","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"group","do_objectID":"e44d5247-db92-455f-8cd2-361331302b8f","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"div","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"text","do_objectID":"3bc313c5-9bd8-4b39-80e3-68f79a78864e","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"Hello, world!","nameIsFixed":false,"resizingConstraint":47,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"clippingMaskMode":0,"hasClippingMask":false,"style":{"color":"rgb(0, 0, 0)","fontSize":16,"fontFamily":"Times New Roman","fontWeight":400,"textDecoration":"none","textAlign":"start","textTransform":"none"},"frame":{"_class":"rect","constrainProportions":false,"height":17,"width":86.203125,"x":0,"y":0},"text":"Hello, world!","automaticallyDrawOnUnderlyingPath":false,"dontSynchroniseWithSymbol":false,"lineSpacingBehaviour":2,"textBehaviour":0}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":18,"width":1904,"x":8,"y":8},"hasClickThrough":false,"windingRule":1}],"clippingMaskMode":0,"hasClippingMask":false,"frame":{"_class":"rect","constrainProportions":false,"width":1912,"height":26,"x":412,"y":0},"style":{"_class":"style","endDecorationType":0,"miterLimit":10,"startDecorationType":0},"horizontalRulerData":{"_class":"rulerData","base":0,"guides":[]},"verticalRulerData":{"_class":"rulerData","base":0,"guides":[]},"backgroundColor":{"_class":"color","alpha":1,"blue":1,"green":1,"red":1},"hasClickThrough":true,"includeInCloudUpload":true,"hasBackgroundColor":false,"includeBackgroundColorInExport":true,"resizesContent":false,"includeBackgroundColorInInstance":false,"symbolID":"basic/with text:standard","changeIdentifier":0},{"_class":"symbolMaster","do_objectID":"880c9725-9175-4047-8fcd-47e8f1f85c72","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"🖥 basic/with pseudo element","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"group","do_objectID":"14f87893-29a3-475e-854e-bdc8785f602a","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"div","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"group","do_objectID":"c9265e13-8dd2-4fbe-b4f2-a9d36250afe1","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"my-div after-reset","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"text","do_objectID":"57cf750b-e8f6-41a7-b63c-eeb2f35f7c0d","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"Hello, world!","nameIsFixed":false,"resizingConstraint":47,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"clippingMaskMode":0,"hasClippingMask":false,"style":{"color":"rgb(0, 0, 0)","fontSize":16,"fontFamily":"Times New Roman","fontWeight":400,"textDecoration":"none","textAlign":"start","textTransform":"none"},"frame":{"_class":"rect","constrainProportions":false,"height":17,"width":86.203125,"x":0,"y":0},"text":"Hello, world!","automaticallyDrawOnUnderlyingPath":false,"dontSynchroniseWithSymbol":false,"lineSpacingBehaviour":2,"textBehaviour":0},{"_class":"group","do_objectID":"06ce649f-43ec-48b6-9171-b1a1442f4a0b","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"fake-pseudo","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"text","do_objectID":"4261c9b2-c484-4140-9087-3257c50db2ff","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"🤖","nameIsFixed":false,"resizingConstraint":47,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"clippingMaskMode":0,"hasClippingMask":false,"style":{"color":"rgb(0, 0, 0)","fontSize":16,"fontFamily":"Times New Roman","fontWeight":400,"textDecoration":"none","textAlign":"start","textTransform":"none"},"frame":{"_class":"rect","constrainProportions":false,"height":17,"width":21,"x":0,"y":6},"text":"🤖","automaticallyDrawOnUnderlyingPath":false,"dontSynchroniseWithSymbol":false,"lineSpacingBehaviour":2,"textBehaviour":0}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":26,"width":21,"x":86.1875,"y":0},"hasClickThrough":false,"windingRule":1}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":18,"width":1904,"x":0,"y":0},"hasClickThrough":false,"windingRule":1}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":18,"width":1904,"x":8,"y":8},"hasClickThrough":false,"windingRule":1}],"clippingMaskMode":0,"hasClippingMask":false,"frame":{"_class":"rect","constrainProportions":false,"width":1912,"height":26,"x":412,"y":126},"style":{"_class":"style","endDecorationType":0,"miterLimit":10,"startDecorationType":0},"horizontalRulerData":{"_class":"rulerData","base":0,"guides":[]},"verticalRulerData":{"_class":"rulerData","base":0,"guides":[]},"backgroundColor":{"_class":"color","alpha":1,"blue":1,"green":1,"red":1},"hasClickThrough":true,"includeInCloudUpload":true,"hasBackgroundColor":false,"includeBackgroundColorInExport":true,"resizesContent":false,"includeBackgroundColorInInstance":false,"symbolID":"basic/with pseudo element:standard","changeIdentifier":0}],"clippingMaskMode":0,"hasClippingMask":false,"frame":{"_class":"rect","constrainProportions":false,"height":5000,"width":1920,"x":0,"y":0},"style":{"_class":"style","endDecorationType":0,"miterLimit":10,"startDecorationType":0},"horizontalRulerData":{"_class":"rulerData","base":0,"guides":[]},"verticalRulerData":{"_class":"rulerData","base":0,"guides":[]},"hasClickThrough":true,"includeInCloudUpload":true}

‎examples/core/package.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "core",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"build": "build-storybook -c .storybook -o dist",
8+
"story2sketch": "yarn build && ../../lib/server/index.js --input dist/iframe.html --output example.asketch.json --fixPseudo",
9+
"storybook": "start-storybook -p 9001 -c .storybook",
10+
"test": "echo \"Error: no test specified\" && exit 1"
11+
},
12+
"author": "",
13+
"license": "MIT",
14+
"devDependencies": {
15+
"@babel/core": "^7.1.6",
16+
"@storybook/react": "^4.0.11",
17+
"babel-loader": "^8.0.4",
18+
"webpack": "^4.26.1"
19+
},
20+
"dependencies": {
21+
"react": "^16.6.3",
22+
"react-dom": "^16.6.3"
23+
}
24+
}

‎examples/core/stories/core.stories.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from "react";
2+
3+
import { storiesOf } from "@storybook/react";
4+
5+
storiesOf("basic", module)
6+
.add("with text", () => <div>Hello, world!</div>)
7+
.add("with pseudo element", () => (
8+
<div>
9+
<style
10+
dangerouslySetInnerHTML={{
11+
__html: [
12+
".my-div:after {",
13+
' content: "🤖";',
14+
" position: absolute",
15+
"}"
16+
].join("\n")
17+
}}
18+
/>
19+
<div className="my-div">Hello, world!</div>
20+
</div>
21+
));

0 commit comments

Comments
 (0)