├── .appcast.xml ├── .gitignore ├── README.md ├── package.json ├── preview.png ├── protoship.sketchplugin.zip └── protoship.sketchplugin └── Contents ├── Resources ├── 23cf64a16c9b124fe09317f0d45a6ae5.svg ├── _webpack_resources │ ├── 6de09ee253a1313026ab88c67ef4abaa.css │ └── d6c494f74597ac4aebaf70b69633683a.html ├── d832b41952d5d030791adcbba7a64c57.svg ├── e0281da90b93c25f4d3c6b3c167987eb.png ├── overlaps.png ├── resources_ActionButton_bs.js ├── resources_Button_bs.js ├── resources_Codegen_UI_bs.js ├── resources_ErrorView_bs.js ├── resources_LinkButton_bs.js ├── resources_ProgressView_bs.js ├── resources_Teleport_UI_bs.js ├── resources_Weblink_bs.js ├── resources_assets_bs.js ├── resources_codegen_Codegen_LintErrors_bs.js ├── resources_codegen_Codegen_UploadingImages_bs.js ├── resources_ru_bs.js ├── spinner.gif └── ungrouped.png └── Sketch ├── codegenEntrypoint_bs.js └── manifest.json /.appcast.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/protoship/codegen-sketch-client/c03f460349f9d8339e5c38d2576aaddfdd97edec/.gitignore -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Codegen is under development! 2 | 3 | Thanks for your interest. Protoship Codegen is under active development and is not ready for public use. If you want to keep track of our progress, [sign-up for our newsletter here](http://eepurl.com/bDJvw1). 4 | 5 | Visit [protoship.io](https://protoship.io) to know more or write to us at [hello@protoship.io](mailto:hello@protoship.io). 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ProtoshipCodegenSketchClient", 3 | "description": "Build complex webapps from Sketch designs by generating elegant HTML & CSS that programmers can easily understand, adapt, and deploy", 4 | "author": "Protoship ", 5 | "version": "4.12.0", 6 | "engines": { 7 | "sketch": ">=58" 8 | }, 9 | "skpm": { 10 | "name": "Protoship Codegen Sketch Client", 11 | "manifest": "src/manifest.json", 12 | "main": "protoship.sketchplugin", 13 | "assets": [ 14 | "assets/**/*" 15 | ] 16 | }, 17 | "resources": [ 18 | "resources/**/*.js" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/protoship/codegen-sketch-client/c03f460349f9d8339e5c38d2576aaddfdd97edec/preview.png -------------------------------------------------------------------------------- /protoship.sketchplugin.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/protoship/codegen-sketch-client/c03f460349f9d8339e5c38d2576aaddfdd97edec/protoship.sketchplugin.zip -------------------------------------------------------------------------------- /protoship.sketchplugin/Contents/Resources/23cf64a16c9b124fe09317f0d45a6ae5.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /protoship.sketchplugin/Contents/Resources/_webpack_resources/6de09ee253a1313026ab88c67ef4abaa.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/tailwindcss/docs/issues/168#issuecomment-482820520 */ 2 | 3 | /** 4 | * This injects Tailwind's base styles, which is a combination of 5 | * Normalize.css and some additional base styles. 6 | * 7 | * https://github.com/tailwindcss/tailwindcss/blob/master/src/plugins/css/preflight.css 8 | */ 9 | 10 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 11 | 12 | /* Document 13 | ========================================================================== */ 14 | 15 | /** 16 | * 1. Correct the line height in all browsers. 17 | * 2. Prevent adjustments of font size after orientation changes in iOS. 18 | */ 19 | 20 | html { 21 | line-height: 1.15; /* 1 */ 22 | -webkit-text-size-adjust: 100%; /* 2 */ 23 | } 24 | 25 | /* Sections 26 | ========================================================================== */ 27 | 28 | /** 29 | * Remove the margin in all browsers. 30 | */ 31 | 32 | body { 33 | margin: 0; 34 | } 35 | 36 | /** 37 | * Render the `main` element consistently in IE. 38 | */ 39 | 40 | main { 41 | display: block; 42 | } 43 | 44 | /** 45 | * Correct the font size and margin on `h1` elements within `section` and 46 | * `article` contexts in Chrome, Firefox, and Safari. 47 | */ 48 | 49 | h1 { 50 | font-size: 2em; 51 | margin: 0.67em 0; 52 | } 53 | 54 | /* Grouping content 55 | ========================================================================== */ 56 | 57 | /** 58 | * 1. Add the correct box sizing in Firefox. 59 | * 2. Show the overflow in Edge and IE. 60 | */ 61 | 62 | hr { 63 | box-sizing: content-box; /* 1 */ 64 | height: 0; /* 1 */ 65 | overflow: visible; /* 2 */ 66 | } 67 | 68 | /** 69 | * 1. Correct the inheritance and scaling of font size in all browsers. 70 | * 2. Correct the odd `em` font sizing in all browsers. 71 | */ 72 | 73 | pre { 74 | font-family: monospace, monospace; /* 1 */ 75 | font-size: 1em; /* 2 */ 76 | } 77 | 78 | /* Text-level semantics 79 | ========================================================================== */ 80 | 81 | /** 82 | * Remove the gray background on active links in IE 10. 83 | */ 84 | 85 | a { 86 | background-color: transparent; 87 | } 88 | 89 | /** 90 | * 1. Remove the bottom border in Chrome 57- 91 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 92 | */ 93 | 94 | abbr[title] { 95 | border-bottom: none; /* 1 */ 96 | text-decoration: underline; /* 2 */ 97 | -webkit-text-decoration: underline dotted; 98 | text-decoration: underline dotted; /* 2 */ 99 | } 100 | 101 | /** 102 | * Add the correct font weight in Chrome, Edge, and Safari. 103 | */ 104 | 105 | b, 106 | strong { 107 | font-weight: bolder; 108 | } 109 | 110 | /** 111 | * 1. Correct the inheritance and scaling of font size in all browsers. 112 | * 2. Correct the odd `em` font sizing in all browsers. 113 | */ 114 | 115 | code, 116 | kbd, 117 | samp { 118 | font-family: monospace, monospace; /* 1 */ 119 | font-size: 1em; /* 2 */ 120 | } 121 | 122 | /** 123 | * Add the correct font size in all browsers. 124 | */ 125 | 126 | small { 127 | font-size: 80%; 128 | } 129 | 130 | /** 131 | * Prevent `sub` and `sup` elements from affecting the line height in 132 | * all browsers. 133 | */ 134 | 135 | sub, 136 | sup { 137 | font-size: 75%; 138 | line-height: 0; 139 | position: relative; 140 | vertical-align: baseline; 141 | } 142 | 143 | sub { 144 | bottom: -0.25em; 145 | } 146 | 147 | sup { 148 | top: -0.5em; 149 | } 150 | 151 | /* Embedded content 152 | ========================================================================== */ 153 | 154 | /** 155 | * Remove the border on images inside links in IE 10. 156 | */ 157 | 158 | img { 159 | border-style: none; 160 | } 161 | 162 | /* Forms 163 | ========================================================================== */ 164 | 165 | /** 166 | * 1. Change the font styles in all browsers. 167 | * 2. Remove the margin in Firefox and Safari. 168 | */ 169 | 170 | button, 171 | input, 172 | optgroup, 173 | select, 174 | textarea { 175 | font-family: inherit; /* 1 */ 176 | font-size: 100%; /* 1 */ 177 | line-height: 1.15; /* 1 */ 178 | margin: 0; /* 2 */ 179 | } 180 | 181 | /** 182 | * Show the overflow in IE. 183 | * 1. Show the overflow in Edge. 184 | */ 185 | 186 | button, 187 | input { /* 1 */ 188 | overflow: visible; 189 | } 190 | 191 | /** 192 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 193 | * 1. Remove the inheritance of text transform in Firefox. 194 | */ 195 | 196 | button, 197 | select { /* 1 */ 198 | text-transform: none; 199 | } 200 | 201 | /** 202 | * Correct the inability to style clickable types in iOS and Safari. 203 | */ 204 | 205 | button, 206 | [type="button"], 207 | [type="reset"], 208 | [type="submit"] { 209 | -webkit-appearance: button; 210 | } 211 | 212 | /** 213 | * Remove the inner border and padding in Firefox. 214 | */ 215 | 216 | button::-moz-focus-inner, 217 | [type="button"]::-moz-focus-inner, 218 | [type="reset"]::-moz-focus-inner, 219 | [type="submit"]::-moz-focus-inner { 220 | border-style: none; 221 | padding: 0; 222 | } 223 | 224 | /** 225 | * Restore the focus styles unset by the previous rule. 226 | */ 227 | 228 | button:-moz-focusring, 229 | [type="button"]:-moz-focusring, 230 | [type="reset"]:-moz-focusring, 231 | [type="submit"]:-moz-focusring { 232 | outline: 1px dotted ButtonText; 233 | } 234 | 235 | /** 236 | * Correct the padding in Firefox. 237 | */ 238 | 239 | fieldset { 240 | padding: 0.35em 0.75em 0.625em; 241 | } 242 | 243 | /** 244 | * 1. Correct the text wrapping in Edge and IE. 245 | * 2. Correct the color inheritance from `fieldset` elements in IE. 246 | * 3. Remove the padding so developers are not caught out when they zero out 247 | * `fieldset` elements in all browsers. 248 | */ 249 | 250 | legend { 251 | box-sizing: border-box; /* 1 */ 252 | color: inherit; /* 2 */ 253 | display: table; /* 1 */ 254 | max-width: 100%; /* 1 */ 255 | padding: 0; /* 3 */ 256 | white-space: normal; /* 1 */ 257 | } 258 | 259 | /** 260 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 261 | */ 262 | 263 | progress { 264 | vertical-align: baseline; 265 | } 266 | 267 | /** 268 | * Remove the default vertical scrollbar in IE 10+. 269 | */ 270 | 271 | textarea { 272 | overflow: auto; 273 | } 274 | 275 | /** 276 | * 1. Add the correct box sizing in IE 10. 277 | * 2. Remove the padding in IE 10. 278 | */ 279 | 280 | [type="checkbox"], 281 | [type="radio"] { 282 | box-sizing: border-box; /* 1 */ 283 | padding: 0; /* 2 */ 284 | } 285 | 286 | /** 287 | * Correct the cursor style of increment and decrement buttons in Chrome. 288 | */ 289 | 290 | [type="number"]::-webkit-inner-spin-button, 291 | [type="number"]::-webkit-outer-spin-button { 292 | height: auto; 293 | } 294 | 295 | /** 296 | * 1. Correct the odd appearance in Chrome and Safari. 297 | * 2. Correct the outline style in Safari. 298 | */ 299 | 300 | [type="search"] { 301 | -webkit-appearance: textfield; /* 1 */ 302 | outline-offset: -2px; /* 2 */ 303 | } 304 | 305 | /** 306 | * Remove the inner padding in Chrome and Safari on macOS. 307 | */ 308 | 309 | [type="search"]::-webkit-search-decoration { 310 | -webkit-appearance: none; 311 | } 312 | 313 | /** 314 | * 1. Correct the inability to style clickable types in iOS and Safari. 315 | * 2. Change font properties to `inherit` in Safari. 316 | */ 317 | 318 | ::-webkit-file-upload-button { 319 | -webkit-appearance: button; /* 1 */ 320 | font: inherit; /* 2 */ 321 | } 322 | 323 | /* Interactive 324 | ========================================================================== */ 325 | 326 | /* 327 | * Add the correct display in Edge, IE 10+, and Firefox. 328 | */ 329 | 330 | details { 331 | display: block; 332 | } 333 | 334 | /* 335 | * Add the correct display in all browsers. 336 | */ 337 | 338 | summary { 339 | display: list-item; 340 | } 341 | 342 | /* Misc 343 | ========================================================================== */ 344 | 345 | /** 346 | * Add the correct display in IE 10+. 347 | */ 348 | 349 | template { 350 | display: none; 351 | } 352 | 353 | /** 354 | * Add the correct display in IE 10. 355 | */ 356 | 357 | [hidden] { 358 | display: none; 359 | } 360 | 361 | /** 362 | * Manually forked from SUIT CSS Base: https://github.com/suitcss/base 363 | * A thin layer on top of normalize.css that provides a starting point more 364 | * suitable for web applications. 365 | */ 366 | 367 | /** 368 | * 1. Prevent padding and border from affecting element width 369 | * https://goo.gl/pYtbK7 370 | * 2. Change the default font family in all browsers (opinionated) 371 | */ 372 | 373 | html { 374 | box-sizing: border-box; /* 1 */ 375 | font-family: sans-serif; /* 2 */ 376 | } 377 | 378 | *, 379 | *::before, 380 | *::after { 381 | box-sizing: inherit; 382 | } 383 | 384 | /** 385 | * Removes the default spacing and border for appropriate elements. 386 | */ 387 | 388 | blockquote, 389 | dl, 390 | dd, 391 | h1, 392 | h2, 393 | h3, 394 | h4, 395 | h5, 396 | h6, 397 | hr, 398 | figure, 399 | p, 400 | pre { 401 | margin: 0; 402 | } 403 | 404 | button { 405 | background: transparent; 406 | padding: 0; 407 | } 408 | 409 | /** 410 | * Work around a Firefox/IE bug where the transparent `button` background 411 | * results in a loss of the default `button` focus styles. 412 | */ 413 | 414 | button:focus { 415 | outline: 1px dotted; 416 | outline: 5px auto -webkit-focus-ring-color; 417 | } 418 | 419 | fieldset { 420 | margin: 0; 421 | padding: 0; 422 | } 423 | 424 | ol, 425 | ul { 426 | list-style: none; 427 | margin: 0; 428 | padding: 0; 429 | } 430 | 431 | /** 432 | * Tailwind custom reset styles 433 | */ 434 | 435 | /** 436 | * 1. Use the system font stack as a sane default. 437 | * 2. Use Tailwind's default "normal" line-height so the user isn't forced 438 | * to override it to ensure consistency even when using the default theme. 439 | */ 440 | 441 | html { 442 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */ 443 | line-height: 1.5; /* 2 */ 444 | } 445 | 446 | /** 447 | * Allow adding a border to an element by just adding a border-width. 448 | * 449 | * By default, the way the browser specifies that an element should have no 450 | * border is by setting it's border-style to `none` in the user-agent 451 | * stylesheet. 452 | * 453 | * In order to easily add borders to elements by just setting the `border-width` 454 | * property, we change the default border-style for all elements to `solid`, and 455 | * use border-width to hide them instead. This way our `border` utilities only 456 | * need to set the `border-width` property instead of the entire `border` 457 | * shorthand, making our border utilities much more straightforward to compose. 458 | * 459 | * https://github.com/tailwindcss/tailwindcss/pull/116 460 | */ 461 | 462 | *, 463 | *::before, 464 | *::after { 465 | border-width: 0; 466 | border-style: solid; 467 | border-color: #e2e8f0; 468 | } 469 | 470 | /* 471 | * Ensure horizontal rules are visible by default 472 | */ 473 | 474 | hr { 475 | border-top-width: 1px; 476 | } 477 | 478 | /** 479 | * Undo the `border-style: none` reset that Normalize applies to images so that 480 | * our `border-{width}` utilities have the expected effect. 481 | * 482 | * The Normalize reset is unnecessary for us since we default the border-width 483 | * to 0 on all elements. 484 | * 485 | * https://github.com/tailwindcss/tailwindcss/issues/362 486 | */ 487 | 488 | img { 489 | border-style: solid; 490 | } 491 | 492 | textarea { 493 | resize: vertical; 494 | } 495 | 496 | input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 497 | color: #a0aec0; 498 | } 499 | 500 | input::-moz-placeholder, textarea::-moz-placeholder { 501 | color: #a0aec0; 502 | } 503 | 504 | input:-ms-input-placeholder, textarea:-ms-input-placeholder { 505 | color: #a0aec0; 506 | } 507 | 508 | input::-ms-input-placeholder, textarea::-ms-input-placeholder { 509 | color: #a0aec0; 510 | } 511 | 512 | input::placeholder, 513 | textarea::placeholder { 514 | color: #a0aec0; 515 | } 516 | 517 | button, 518 | [role="button"] { 519 | cursor: pointer; 520 | } 521 | 522 | table { 523 | border-collapse: collapse; 524 | } 525 | 526 | h1, 527 | h2, 528 | h3, 529 | h4, 530 | h5, 531 | h6 { 532 | font-size: inherit; 533 | font-weight: inherit; 534 | } 535 | 536 | /** 537 | * Reset links to optimize for opt-in styling instead of 538 | * opt-out. 539 | */ 540 | 541 | a { 542 | color: inherit; 543 | text-decoration: inherit; 544 | } 545 | 546 | /** 547 | * Reset form element properties that are easy to forget to 548 | * style explicitly so you don't inadvertently introduce 549 | * styles that deviate from your design system. These styles 550 | * supplement a partial reset that is already applied by 551 | * normalize.css. 552 | */ 553 | 554 | button, 555 | input, 556 | optgroup, 557 | select, 558 | textarea { 559 | padding: 0; 560 | line-height: inherit; 561 | color: inherit; 562 | } 563 | 564 | /** 565 | * Use the configured 'mono' font family for elements that 566 | * are expected to be rendered with a monospace font, falling 567 | * back to the system monospace stack if there is no configured 568 | * 'mono' font family. 569 | */ 570 | 571 | pre, 572 | code, 573 | kbd, 574 | samp { 575 | font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 576 | } 577 | 578 | /** 579 | * Make replaced elements `display: block` by default as that's 580 | * the behavior you want almost all of the time. Inspired by 581 | * CSS Remedy, with `svg` added as well. 582 | * 583 | * https://github.com/mozdevs/cssremedy/issues/14 584 | */ 585 | 586 | img, 587 | svg, 588 | video, 589 | canvas, 590 | audio, 591 | iframe, 592 | embed, 593 | object { 594 | display: block; 595 | vertical-align: middle; 596 | } 597 | 598 | /** 599 | * Constrain images and videos to the parent width and preserve 600 | * their instrinsic aspect ratio. 601 | * 602 | * https://github.com/mozdevs/cssremedy/issues/14 603 | */ 604 | 605 | img, 606 | video { 607 | max-width: 100%; 608 | height: auto; 609 | } 610 | 611 | code { 612 | font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; 613 | } 614 | 615 | .ps-bg-blue-500 { 616 | background-color: #4299e1; 617 | } 618 | 619 | .ps-bg-blue-700 { 620 | background-color: #2b6cb0; 621 | } 622 | 623 | .ps-bg-fullwhite { 624 | background-color: #ffffff; 625 | } 626 | 627 | .ps-bg-chrome-gray { 628 | background-color: #e5e5e5; 629 | } 630 | 631 | .hover\:ps-bg-blue-700:hover { 632 | background-color: #2b6cb0; 633 | } 634 | 635 | .hover\:ps-bg-blue-800:hover { 636 | background-color: #2c5282; 637 | } 638 | 639 | .hover\:ps-bg-blue-900:hover { 640 | background-color: #2a4365; 641 | } 642 | 643 | .ps-border-transparent { 644 | border-color: transparent; 645 | } 646 | 647 | .hover\:ps-border-blue-900:hover { 648 | border-color: #2a4365; 649 | } 650 | 651 | .ps-rounded { 652 | border-radius: 0.25rem; 653 | } 654 | 655 | .ps-border { 656 | border-width: 1px; 657 | } 658 | 659 | .ps-cursor-default { 660 | cursor: default; 661 | } 662 | 663 | .ps-cursor-pointer { 664 | cursor: pointer; 665 | } 666 | 667 | .ps-block { 668 | display: block; 669 | } 670 | 671 | .ps-flex { 672 | display: -webkit-box; 673 | display: flex; 674 | } 675 | 676 | .ps-items-center { 677 | -webkit-box-align: center; 678 | align-items: center; 679 | } 680 | 681 | .ps-justify-between { 682 | -webkit-box-pack: justify; 683 | justify-content: space-between; 684 | } 685 | 686 | .ps-font-sans { 687 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 688 | } 689 | 690 | .ps-font-light { 691 | font-weight: 300; 692 | } 693 | 694 | .ps-font-normal { 695 | font-weight: 400; 696 | } 697 | 698 | .ps-font-medium { 699 | font-weight: 500; 700 | } 701 | 702 | .ps-font-semibold { 703 | font-weight: 600; 704 | } 705 | 706 | .ps-h-4 { 707 | height: 1rem; 708 | } 709 | 710 | .ps-leading-normal { 711 | line-height: 1.5; 712 | } 713 | 714 | .ps-my-2 { 715 | margin-top: 0.5rem; 716 | margin-bottom: 0.5rem; 717 | } 718 | 719 | .ps-mx-2 { 720 | margin-left: 0.5rem; 721 | margin-right: 0.5rem; 722 | } 723 | 724 | .ps-mb-0 { 725 | margin-bottom: 0; 726 | } 727 | 728 | .ps-mb-1 { 729 | margin-bottom: 0.25rem; 730 | } 731 | 732 | .ps-ml-1 { 733 | margin-left: 0.25rem; 734 | } 735 | 736 | .ps-mr-2 { 737 | margin-right: 0.5rem; 738 | } 739 | 740 | .ps-mb-2 { 741 | margin-bottom: 0.5rem; 742 | } 743 | 744 | .ps-mb-4 { 745 | margin-bottom: 1rem; 746 | } 747 | 748 | .ps-mb-6 { 749 | margin-bottom: 1.5rem; 750 | } 751 | 752 | .ps-mt-8 { 753 | margin-top: 2rem; 754 | } 755 | 756 | .ps-mr-8 { 757 | margin-right: 2rem; 758 | } 759 | 760 | .ps-mb-8 { 761 | margin-bottom: 2rem; 762 | } 763 | 764 | .ps-p-2 { 765 | padding: 0.5rem; 766 | } 767 | 768 | .ps-p-6 { 769 | padding: 1.5rem; 770 | } 771 | 772 | .ps-py-1 { 773 | padding-top: 0.25rem; 774 | padding-bottom: 0.25rem; 775 | } 776 | 777 | .ps-py-2 { 778 | padding-top: 0.5rem; 779 | padding-bottom: 0.5rem; 780 | } 781 | 782 | .ps-px-2 { 783 | padding-left: 0.5rem; 784 | padding-right: 0.5rem; 785 | } 786 | 787 | .ps-px-3 { 788 | padding-left: 0.75rem; 789 | padding-right: 0.75rem; 790 | } 791 | 792 | .ps-px-4 { 793 | padding-left: 1rem; 794 | padding-right: 1rem; 795 | } 796 | 797 | .ps-px-16 { 798 | padding-left: 4rem; 799 | padding-right: 4rem; 800 | } 801 | 802 | .ps-pb-1 { 803 | padding-bottom: 0.25rem; 804 | } 805 | 806 | .ps-pl-2 { 807 | padding-left: 0.5rem; 808 | } 809 | 810 | .ps-pr-3 { 811 | padding-right: 0.75rem; 812 | } 813 | 814 | .ps-pb-6 { 815 | padding-bottom: 1.5rem; 816 | } 817 | 818 | .ps-pb-8 { 819 | padding-bottom: 2rem; 820 | } 821 | 822 | .ps-pt-16 { 823 | padding-top: 4rem; 824 | } 825 | 826 | .ps-fixed { 827 | position: fixed; 828 | } 829 | 830 | .ps-text-center { 831 | text-align: center; 832 | } 833 | 834 | .ps-text-black { 835 | color: #000; 836 | } 837 | 838 | .ps-text-white { 839 | color: #f2f2f2; 840 | } 841 | 842 | .ps-text-gray-600 { 843 | color: #718096; 844 | } 845 | 846 | .ps-text-gray-800 { 847 | color: #2d3748; 848 | } 849 | 850 | .ps-text-red-900 { 851 | color: #742a2a; 852 | } 853 | 854 | .ps-text-yellow-800 { 855 | color: #975a16; 856 | } 857 | 858 | .ps-text-blue-800 { 859 | color: #2c5282; 860 | } 861 | 862 | .hover\:ps-text-white:hover { 863 | color: #f2f2f2; 864 | } 865 | 866 | .hover\:ps-text-blue-900:hover { 867 | color: #2a4365; 868 | } 869 | 870 | .ps-text-13 { 871 | font-size: 13px; 872 | } 873 | 874 | .ps-text-sm { 875 | font-size: 0.875rem; 876 | } 877 | 878 | .ps-text-lg { 879 | font-size: 1.125rem; 880 | } 881 | 882 | .hover\:ps-underline:hover { 883 | text-decoration: underline; 884 | } 885 | 886 | .ps-align-middle { 887 | vertical-align: middle; 888 | } 889 | 890 | .ps-break-words { 891 | overflow-wrap: break-word; 892 | } 893 | 894 | .ps-truncate { 895 | overflow: hidden; 896 | text-overflow: ellipsis; 897 | white-space: nowrap; 898 | } 899 | 900 | .ps-w-4 { 901 | width: 1rem; 902 | } 903 | 904 | .ps-w-8 { 905 | width: 2rem; 906 | } 907 | 908 | .ps-w-160 { 909 | width: 40rem; 910 | } 911 | 912 | .ps-w-full { 913 | width: 100%; 914 | } 915 | 916 | /* =========== COMPONENT CLASSES ============ */ 917 | 918 | /* --- LAYER SELECTION */ 919 | 920 | /* The layer highlight goes from bright to dark depending 921 | on whether currently selected or not. That takes the contrast between 922 | the tag (which is dim) out of whack. So adjust that depending on 923 | layer highlight status */ 924 | 925 | /* Show ellipsis for long layer names */ 926 | 927 | /* -- END LAYER SELECTION */ 928 | 929 | /* SaaS pages - login/dashboard etc. */ 930 | 931 | @-webkit-keyframes opacityAnimate { 932 | from { 933 | opacity: 0; 934 | background-color: turquoise; 935 | } 936 | 937 | to { 938 | opacity: 1; 939 | background-color: transparent; 940 | } 941 | } 942 | 943 | @keyframes opacityAnimate { 944 | from { 945 | opacity: 0; 946 | background-color: turquoise; 947 | } 948 | 949 | to { 950 | opacity: 1; 951 | background-color: transparent; 952 | } 953 | } 954 | 955 | /* --- END SaaS */ 956 | 957 | /* Monaco CSS Editor */ 958 | 959 | /* This is when the editor is in view state, 960 | and we account for the height of the status row */ 961 | 962 | /* Style HTML select controls 963 | https://stackoverflow.com/questions/1895476/how-do-i-style-a-select-dropdown-with-only-css 964 | */ 965 | 966 | /* =================== OUR OWN UTILITIESS ====================== */ 967 | 968 | /* 969 | Similar to Tailwind's ps-select-none, but cross-browser: 970 | https://developer.mozilla.org/en-US/docs/Web/CSS/user-select 971 | */ 972 | 973 | .PS-select-none { 974 | -moz-user-select: none; 975 | -webkit-user-select: none; 976 | -ms-user-select: none; 977 | user-select: none; 978 | } 979 | 980 | /* For CSS Grids: 981 | https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout#Justifying_Items_on_the_Inline_Axis 982 | */ 983 | 984 | /* CUSTOMIZE MONACO EDITOR */ 985 | 986 | /* The autocomplete widget starts at negative margin when it begins 987 | because it doesn't have enough space and so gets hidden mostly. 988 | so we make it smaller */ 989 | 990 | /* For Sketch Plugin */ 991 | 992 | button.PS-sketch-plugin-button:focus { 993 | outline: 0 !important; 994 | } 995 | -------------------------------------------------------------------------------- /protoship.sketchplugin/Contents/Resources/_webpack_resources/d6c494f74597ac4aebaf70b69633683a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Protoship Codegen Sketch Client 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /protoship.sketchplugin/Contents/Resources/d832b41952d5d030791adcbba7a64c57.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /protoship.sketchplugin/Contents/Resources/e0281da90b93c25f4d3c6b3c167987eb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/protoship/codegen-sketch-client/c03f460349f9d8339e5c38d2576aaddfdd97edec/protoship.sketchplugin/Contents/Resources/e0281da90b93c25f4d3c6b3c167987eb.png -------------------------------------------------------------------------------- /protoship.sketchplugin/Contents/Resources/overlaps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/protoship/codegen-sketch-client/c03f460349f9d8339e5c38d2576aaddfdd97edec/protoship.sketchplugin/Contents/Resources/overlaps.png -------------------------------------------------------------------------------- /protoship.sketchplugin/Contents/Resources/resources_ActionButton_bs.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=3)}([function(e,t,r){"use strict";e.exports=r(1)},function(e,t,r){"use strict";var n=r(2),o="function"==typeof Symbol&&Symbol.for,u=o?Symbol.for("react.element"):60103,c=o?Symbol.for("react.portal"):60106,i=o?Symbol.for("react.fragment"):60107,f=o?Symbol.for("react.strict_mode"):60108,l=o?Symbol.for("react.profiler"):60114,a=o?Symbol.for("react.provider"):60109,s=o?Symbol.for("react.context"):60110,p=o?Symbol.for("react.concurrent_mode"):60111,y=o?Symbol.for("react.forward_ref"):60112,d=o?Symbol.for("react.suspense"):60113,v=o?Symbol.for("react.memo"):60115,m=o?Symbol.for("react.lazy"):60116,b="function"==typeof Symbol&&Symbol.iterator;function h(e){for(var t=arguments.length-1,r="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=0;nM.length&&M.push(e)}function q(e,t,r){return null==e?0:function e(t,r,n,o){var i=typeof t;"undefined"!==i&&"boolean"!==i||(t=null);var f=!1;if(null===t)f=!0;else switch(i){case"string":case"number":f=!0;break;case"object":switch(t.$$typeof){case u:case c:f=!0}}if(f)return n(o,t,""===r?"."+N(t,0):r),1;if(f=0,r=""===r?".":r+":",Array.isArray(t))for(var l=0;lM.length&&M.push(e)}function q(e,t,r){return null==e?0:function e(t,r,n,o){var i=typeof t;"undefined"!==i&&"boolean"!==i||(t=null);var l=!1;if(null===t)l=!0;else switch(i){case"string":case"number":l=!0;break;case"object":switch(t.$$typeof){case u:case c:l=!0}}if(l)return n(o,t,""===r?"."+N(t,0):r),1;if(l=0,r=""===r?".":r+":",Array.isArray(t))for(var f=0;fM.length&&M.push(e)}function q(e,t,r){return null==e?0:function e(t,r,n,o){var i=typeof t;"undefined"!==i&&"boolean"!==i||(t=null);var l=!1;if(null===t)l=!0;else switch(i){case"string":case"number":l=!0;break;case"object":switch(t.$$typeof){case u:case c:l=!0}}if(l)return n(o,t,""===r?"."+N(t,0):r),1;if(l=0,r=""===r?".":r+":",Array.isArray(t))for(var f=0;fM.length&&M.push(e)}function I(e,t,r){return null==e?0:function e(t,r,n,o){var l=typeof t;"undefined"!==l&&"boolean"!==l||(t=null);var i=!1;if(null===t)i=!0;else switch(l){case"string":case"number":i=!0;break;case"object":switch(t.$$typeof){case u:case c:i=!0}}if(i)return n(o,t,""===r?"."+q(t,0):r),1;if(i=0,r=""===r?".":r+":",Array.isArray(t))for(var f=0;fM.length&&M.push(e)}function q(e,t,r){return null==e?0:function e(t,r,n,o){var i=typeof t;"undefined"!==i&&"boolean"!==i||(t=null);var f=!1;if(null===t)f=!0;else switch(i){case"string":case"number":f=!0;break;case"object":switch(t.$$typeof){case u:case c:f=!0}}if(f)return n(o,t,""===r?"."+N(t,0):r),1;if(f=0,r=""===r?".":r+":",Array.isArray(t))for(var l=0;l=n.length)throw[r.e,"index out of bounds"];return n[e]=t,0}function c(n,e){if(e<0||e>=n.length)throw[r.e,"index out of bounds"];return n[e]}function f(n,e){for(var t=new Array(n),r=0,o=n-1|0;r<=o;++r)t[r]=e;return t}function a(n){for(var e=new Array(n),t=0,r=n-1|0;t<=r;++t)e[t]=0;return e}function l(n,e,t,r,o){if(r<=e){for(var u=0,i=o-1|0;u<=i;++u)t[u+r|0]=n[u+e|0];return 0}for(var c=o-1|0;c>=0;--c)t[c+r|0]=n[c+e|0];return 0}},function(n,e,t){"use strict";(function(n){function r(){if("undefined"!=typeof globalThis)return globalThis;if("undefined"!=typeof self)return self;if("undefined"!=typeof window)return window;if(void 0!==n)return n;if(void 0!==this)return this;throw new Error("Unable to locate global `this`")}function o(n){var e=r();if(void 0===e[n])throw new Error(n+" not polyfilled by BuckleScript yet\n");return e[n]}t.d(e,"a",(function(){return o}))}).call(this,t(10))},function(n,e,t){"use strict";(function(n){t.d(e,"f",(function(){return l})),t.d(e,"g",(function(){return o})),t.d(e,"e",(function(){return u})),t.d(e,"a",(function(){return i})),t.d(e,"c",(function(){return c})),t.d(e,"d",(function(){return f})),t.d(e,"b",(function(){return a}));var r=t(1),o=["",function(e,t){var r=t.length-1|0;return void 0!==n&&n.stdout&&n.stdout.write?n.stdout.write(t):"\n"===t[r]?(console.log(t.slice(0,r)),0):(console.log(t),0)}],u=["",function(n,e){var t=e.length-1|0;return"\n"===e[t]?(console.log(e.slice(0,t)),0):(console.log(e),0)}];function i(n){return""!==n[0]?(r.b(n[1],n,n[0]),n[0]="",0):0}function c(e,t,r,u){var c=0===r&&u===t.length?t:t.slice(r,u);if(void 0!==n&&n.stdout&&n.stdout.write&&e===o)return n.stdout.write(c);var f=c.lastIndexOf("\n");return f<0?(e[0]=e[0]+c,0):(e[0]=e[0]+c.slice(0,f+1|0),i(e),e[0]=e[0]+c.slice(f+1|0),0)}function f(n,e){return c(n,String.fromCharCode(e),0,1)}function a(n){return[o,[u,0]]}var l=void 0}).call(this,t(6))},function(n,e,t){"use strict";n.exports=t(8)},function(n,e){var t,r,o=n.exports={};function u(){throw new Error("setTimeout has not been defined")}function i(){throw new Error("clearTimeout has not been defined")}function c(n){if(t===setTimeout)return setTimeout(n,0);if((t===u||!t)&&setTimeout)return t=setTimeout,setTimeout(n,0);try{return t(n,0)}catch(e){try{return t.call(null,n,0)}catch(e){return t.call(this,n,0)}}}!function(){try{t="function"==typeof setTimeout?setTimeout:u}catch(n){t=u}try{r="function"==typeof clearTimeout?clearTimeout:i}catch(n){r=i}}();var f,a=[],l=!1,s=-1;function d(){l&&f&&(l=!1,f.length?a=f.concat(a):s=-1,a.length&&p())}function p(){if(!l){var n=c(d);l=!0;for(var e=a.length;e;){for(f=a,a=[];++s1)for(var t=1;tR.length&&R.push(n)}function I(n,e,t){return null==n?0:function n(e,t,r,o){var c=typeof e;"undefined"!==c&&"boolean"!==c||(e=null);var f=!1;if(null===e)f=!0;else switch(c){case"string":case"number":f=!0;break;case"object":switch(e.$$typeof){case u:case i:f=!0}}if(f)return r(o,e,""===t?"."+L(e,0):t),1;if(f=0,t=""===t?".":t+":",Array.isArray(e))for(var a=0;aM.length&&M.push(e)}function q(e,t,n){return null==e?0:function e(t,n,r,o){var i=typeof t;"undefined"!==i&&"boolean"!==i||(t=null);var f=!1;if(null===t)f=!0;else switch(i){case"string":case"number":f=!0;break;case"object":switch(t.$$typeof){case u:case c:f=!0}}if(f)return r(o,t,""===n?"."+N(t,0):n),1;if(f=0,n=""===n?".":n+":",Array.isArray(t))for(var l=0;l