8 | //
9 |
10 | @import 'variables';
11 | @import 'mixins/media-suffixes';
12 |
13 | .is {
14 | &-hidden {
15 | display: none !important;
16 | }
17 |
18 | &-disabled {
19 | @include media-suffixes {
20 | opacity: .5;
21 | }
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/app/styles/base/_utilities.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Helpers with typical values that you need,
3 | // in the app, by default we usually use
4 | // Bootstrap utilities but, you can define more here.
5 | //
6 | // How to use:
7 | //
8 | //
9 |
10 | @import 'variables';
11 | @import './mixins/map-utilities';
12 |
13 | .u {
14 | &-align {
15 | &-center {
16 | text-align: center;
17 | }
18 |
19 | &-left {
20 | text-align: left;
21 | }
22 |
23 | &-right {
24 | text-align: right;
25 | }
26 | }
27 |
28 | @include map-utilities(color, get-color, secondary, dark);
29 | }
30 |
--------------------------------------------------------------------------------
/app/styles/base/_variables-definitions.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Basic variables for the application,
3 | // to import variables you have to import
4 | // the file `variables.scss`.
5 | //
6 | // Consider to use 'shirt' sizes for naming if you can,
7 | // typical shirt sizes are xs, s, m, l ,xl
8 | // but you can add more xxxs, xxs, s, sm, m, ml, xxxxxl.
9 | //
10 |
11 | // Colors
12 | $color-primary: (
13 | brightest: null,
14 | brighter: null,
15 | bright: #48DDDD,
16 | normal: #06B2B1,
17 | dark: #0E2E2E,
18 | darker: null,
19 | darkest: #06131F
20 | );
21 |
22 | $color-secondary: (
23 | normal: #FFDD2E,
24 | dark: #D1B425,
25 | );
26 |
27 | $color-basic: (
28 | brightest: #FFFFFF,
29 | brighter: #E7E7E7,
30 | bright: #DADADA,
31 | normal: null,
32 | dark: #9C9C9C,
33 | darker: #585858,
34 | darkest: #131313
35 | );
36 |
37 | // Add all colors to this map
38 | $color: (
39 | primary: $color-primary,
40 | secondary: $color-secondary,
41 | basic: $color-basic,
42 | );
43 |
44 | // Times
45 | $time: (
46 | slow: .5s,
47 | normal: .35s,
48 | fast: .15s
49 | );
50 |
51 | // Fonts
52 | $font-weight: (
53 | light: 200,
54 | semilight: 300,
55 | normal: 500,
56 | semibold: 600,
57 | bold: 700,
58 | black: 800
59 | );
60 |
61 | $font-size: (
62 | xs: .5rem, // 8px
63 | s: .85rem, // 13.6px
64 | m: 1rem, // [16px]
65 | l: 1.25rem, // 20px
66 | xl: 1.5rem // 24px
67 | );
68 |
69 | // Medias (Only as example, use the values you really need)
70 | $media: (
71 | xxs: 360px,
72 | xs: 640px,
73 | s: 768px,
74 | m: 1024px,
75 | l: 1280px,
76 | xl: 1440px
77 | );
78 |
79 | // Z-index
80 | $z: (
81 | xs: 1,
82 | s: 10,
83 | m: 20,
84 | l: 30,
85 | xl: 50,
86 | xxl: 100
87 | );
88 |
--------------------------------------------------------------------------------
/app/styles/base/_variables.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Wrappers for project variables, to create a new variable
3 | // please use `variables-definitions.scss` file.
4 | //
5 | // If you want to use a variable, import `variables.scss` file,
6 | // and add the corresponding map-get wrapper here.
7 | //
8 |
9 | /* stylelint-disable */
10 | @import './variables-definitions';
11 | @import './mixins/generic-get';
12 |
13 | // Special map for colors
14 | @function get-color($namespace, $variance: normal) {
15 | $color-map: get($color, $namespace);
16 |
17 | @return get($color-map, $variance);
18 | }
19 |
20 | // Generic maps
21 | @function get-time($key: normal) { @return get($time, $key); }
22 | @function get-font-weight($key: m) { @return get($font-weight, $key); }
23 | @function get-font-size($key: m) { @return get($font-size, $key); }
24 | @function get-media($key: m) { @return get($media, $key); }
25 | @function get-z($key: m) { @return get($z, $key); }
26 |
--------------------------------------------------------------------------------
/app/styles/base/mixins/_fonts.scss:
--------------------------------------------------------------------------------
1 | /* stylelint-disable */
2 | // @Author https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6
3 |
4 | // =============================================================================
5 | // String Replace
6 | // =============================================================================
7 |
8 | @function str-replace($string, $search, $replace: '') {
9 | $index: str-index($string, $search);
10 |
11 | @if $index {
12 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
13 | }
14 |
15 | @return $string;
16 | }
17 |
18 | // =============================================================================
19 | // Font Face
20 | // =============================================================================
21 |
22 | @mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff ttf svg) {
23 | $src: null;
24 |
25 | $extmods: ( eot: '?', svg: '#' + str-replace($name, ' ', '_') );
26 |
27 | $formats: ( otf: 'opentype', ttf: 'truetype' );
28 |
29 | @each $ext in $exts {
30 | $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
31 | $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
32 | $src: append($src, url(quote($path + '.' + $extmod)) format(quote($format)), comma);
33 | }
34 |
35 | @font-face {
36 | font-family: quote($name);
37 | font-style: $style;
38 | font-weight: $weight;
39 | src: $src;
40 | }
41 | }
42 |
43 | @mixin font-include($font, $type, $weight: null, $style: null) {
44 | @include font-face($font, '~assets/fonts/' + $font + '/' + $font + '-' + $type, $weight, $style);
45 | }
46 |
--------------------------------------------------------------------------------
/app/styles/base/mixins/_generic-get.scss:
--------------------------------------------------------------------------------
1 | @function get($map, $key) {
2 | @if map-has-key($map, $key) {
3 | @return map-get($map, $key);
4 | }
5 |
6 | @error 'Invalid key: `#{$key}` for map `#{$map}`';
7 | }
8 |
--------------------------------------------------------------------------------
/app/styles/base/mixins/_icomoon.scss:
--------------------------------------------------------------------------------
1 | /* stylelint-disable */
2 | @mixin icomoon {
3 | @font-face {
4 | font-family: 'Icomoon';
5 | src: url('/fonts/Icomoon/icomoon.eot?pjsjp3');
6 | src: url('/fonts/Icomoon/icomoon.eot?pjsjp3#iefix') format('embedded-opentype'), url('/fonts/Icomoon/icomoon.ttf?pjsjp3') format('truetype'), url('/fonts/Icomoon/icomoon.woff?pjsjp3') format('woff'), url('/fonts/Icomoon/icomoon.svg?pjsjp3#Icomoon') format('svg');
7 | font-weight: normal;
8 | font-style: normal;
9 | }
10 |
11 | [class^='icon-'], [class*=' icon-'] {
12 | /* use !important to prevent issues with browser extensions that change fonts */
13 | font-family: 'Icomoon' !important;
14 | speak: none;
15 | font-style: normal;
16 | font-weight: normal;
17 | font-variant: normal;
18 | text-transform: none;
19 | line-height: 1;
20 | /* Better Font Rendering =========== */
21 | -webkit-font-smoothing: antialiased;
22 | -moz-osx-font-smoothing: grayscale;
23 | }
24 |
25 | }
26 |
27 | @function unicode($str){
28 | @return unquote('\'') + unquote(str-insert($str, '\\', 1)) + unquote('\'');
29 | }
30 |
31 | @mixin icomoon-generate($icons) {
32 | @include icomoon();
33 |
34 | @each $key, $value in $icons {
35 | .icon-#{$key}:before {
36 | content: unicode($value);
37 | }
38 | }
39 | }
--------------------------------------------------------------------------------
/app/styles/base/mixins/_map-utilities.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Mixin to generate utility classes for any map variable
3 | //
4 | // Example:
5 | // .u {
6 | // @include map-utilities(color, get-color, secondary, dark);
7 | // @include map-utilities(color, get-color, secondary);
8 | // @include map-utilities(border-color, get-color, primary, bright);
9 | // }
10 | //
11 | // Generates the following css
12 | // .u-color-secondary-dark {
13 | // color: #D1B425; }
14 |
15 | // .u-color-secondary {
16 | // color: #FFDD2E; }
17 |
18 | // .u-border-color-primary-bright {
19 | // border-color: #48DDDD; }
20 | //
21 | // And can be used like
22 | //
23 | //
24 |
25 | @import '../variables';
26 |
27 | // map-utilities(get-color, secondary, dark);
28 | @mixin map-utilities($prop, $map, $key, $key2: null) {
29 | $result: call($map, $key);
30 | $extra: '';
31 |
32 | @if ($key2) {
33 | $result: call($map, $key, $key2);
34 | $extra: '-#{$key2}';
35 | }
36 |
37 | &-#{$prop}-#{$key}#{$extra} {
38 | #{$prop}: $result;
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/app/styles/base/mixins/_media-suffixes.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Mixin to generate media suffixes for any class.
3 | //
4 | // Example:
5 | // .a {
6 | // @include media-suffixes {
7 | // opacity: 1;
8 | // }
9 | // }
10 | //
11 | // Generates the following css
12 | // .a {
13 | // opacity: 0; }
14 | // @media screen and (max-width: 640px) {
15 | // .a\@xs {
16 | // opacity: 0; } }
17 | // @media screen and (max-width: 768px) {
18 | // .a\@s {
19 | // opacity: 0; } }
20 | // ...
21 | //
22 | // And can be used like
23 | //
24 | // That means that the opacity of the div will
25 | // be 0 for screens bigger than 's' media query.
26 | //
27 |
28 | @import '../variables';
29 |
30 | $medias: xxs, xs, s, m, l, xl;
31 |
32 | @mixin media-suffixes {
33 | @content;
34 |
35 | @each $media in $medias {
36 | &\@#{$media} {
37 | @media screen and (max-width: get-media($media)) {
38 | @content;
39 | }
40 | }
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/app/styles/components/_conversor.scss:
--------------------------------------------------------------------------------
1 | @import '../base/variables';
2 |
3 | .conversor {
4 | display: flex;
5 | max-width: 60rem;
6 | width: 100%;
7 |
8 | &-content {
9 | margin-top: -20vh;
10 | position: relative;
11 | width: 100%;
12 | }
13 |
14 | &-title {
15 | margin: 0 auto 1rem auto;
16 | text-align: center;
17 | }
18 |
19 | &-subtitle {
20 | font-size: get-font-size(l);
21 | font-weight: get-font-weight(light);
22 | margin: 0 auto 10vh auto;
23 | text-align: center;
24 | }
25 |
26 | &-result {
27 | text-align: center;
28 | }
29 |
30 | &-loading {
31 | align-items: center;
32 | background: rgba(get-color(basic, brightest), .5);
33 | display: flex;
34 | height: 100%;
35 | justify-content: center;
36 | left: 0;
37 | position: absolute;
38 | top: 0;
39 | width: 100%;
40 | }
41 |
42 | &-spinner {
43 | $size: 4rem;
44 |
45 | height: $size;
46 | width: $size;
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/app/styles/vendor/_bootstrap.scss:
--------------------------------------------------------------------------------
1 | @import '../base/variables';
2 |
3 | $grid-breakpoints: (
4 | xs: 0,
5 | sm: get-media(xs) + 1,
6 | md: get-media(s) + 1,
7 | lg: get-media(m) + 1,
8 | xl: get-media(l) + 1
9 | );
10 |
11 | $container-max-widths: (
12 | sm: get-media(xs),
13 | md: get-media(s),
14 | lg: get-media(m),
15 | xl: get-media(l)
16 | );
17 |
18 | $primary: get-color(primary);
19 | $secondary: get-color(secondary);
20 |
21 | $link-color: auto;
22 | $link-hover-color: auto;
23 | $link-hover-decoration: none;
24 |
25 | @import '../../../node_modules/bootstrap/scss/functions';
26 | @import '../../../node_modules/bootstrap/scss/variables';
27 | @import '../../../node_modules/bootstrap/scss/mixins';
28 | @import '../../../node_modules/bootstrap/scss/root';
29 | // @import '../../../node_modules/bootstrap/scss/reboot';
30 | @import '../../../node_modules/bootstrap/scss/images';
31 | // @import '../../../node_modules/bootstrap/scss/type';
32 | // @import '../../../node_modules/bootstrap/scss/code';
33 | @import '../../../node_modules/bootstrap/scss/grid';
34 | // @import '../../../node_modules/bootstrap/scss/tables';
35 | // @import '../../../node_modules/bootstrap/scss/forms';
36 | @import '../../../node_modules/bootstrap/scss/buttons';
37 | // @import '../../../node_modules/bootstrap/scss/transitions';
38 | @import '../../../node_modules/bootstrap/scss/dropdown';
39 | // @import '../../../node_modules/bootstrap/scss/button-group';
40 | // @import '../../../node_modules/bootstrap/scss/input-group';
41 | // @import '../../../node_modules/bootstrap/scss/custom-forms';
42 | @import '../../../node_modules/bootstrap/scss/nav';
43 | @import '../../../node_modules/bootstrap/scss/navbar';
44 | // @import '../../../node_modules/bootstrap/scss/card';
45 | // @import '../../../node_modules/bootstrap/scss/breadcrumb';
46 | // @import '../../../node_modules/bootstrap/scss/pagination';
47 | // @import '../../../node_modules/bootstrap/scss/badge';
48 | // @import '../../../node_modules/bootstrap/scss/jumbotron';
49 | // @import '../../../node_modules/bootstrap/scss/alert';
50 | // @import '../../../node_modules/bootstrap/scss/progress';
51 | // @import '../../../node_modules/bootstrap/scss/media';
52 | // @import '../../../node_modules/bootstrap/scss/list-group';
53 | // @import '../../../node_modules/bootstrap/scss/close';
54 | // @import '../../../node_modules/bootstrap/scss/modal';
55 | // @import '../../../node_modules/bootstrap/scss/tooltip';
56 | // @import '../../../node_modules/bootstrap/scss/popover';
57 | // @import '../../../node_modules/bootstrap/scss/carousel';
58 | @import '../../../node_modules/bootstrap/scss/utilities';
59 | // @import '../../../node_modules/bootstrap/scss/print';
60 | @import '../../../node_modules/bootstrap/scss/spinners';
61 |
--------------------------------------------------------------------------------
/app/styles/vendor/_filepond.scss:
--------------------------------------------------------------------------------
1 | /* stylelint-disable */
2 | @import '../../node_modules/filepond/dist/filepond.css';
3 |
--------------------------------------------------------------------------------
/app/styles/vendor/_normalize.scss:
--------------------------------------------------------------------------------
1 | /* stylelint-disable */
2 | @import '../../node_modules/normalize-scss/sass/normalize/variables';
3 | @import '../../node_modules/normalize-scss/sass/normalize/vertical-rhythm';
4 | @import '../../node_modules/normalize-scss/sass/normalize/normalize-mixin';
5 | @include normalize;
6 |
7 | *,
8 | *::before,
9 | *::after {
10 | box-sizing: border-box;
11 | }
12 |
13 | a,
14 | a:active,
15 | a:hover,
16 | a:visited {
17 | text-decoration: none;
18 | }
19 |
--------------------------------------------------------------------------------
/cypress.json:
--------------------------------------------------------------------------------
1 | {
2 | "baseUrl": "http://localhost:4000",
3 | "pluginsFile": "tests/e2e/plugins/index.js"
4 | }
--------------------------------------------------------------------------------
/dist/CNAME:
--------------------------------------------------------------------------------
1 | screentocodesandbox.js.org
2 |
--------------------------------------------------------------------------------
/dist/fonts/05d1a99a91a5552d048ca2f15505fdb7.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CKGrafico/ScreenshotToCodeSandbox/dc8f45971d89373fe1770ff855836816bf59508f/dist/fonts/05d1a99a91a5552d048ca2f15505fdb7.woff
--------------------------------------------------------------------------------
/dist/fonts/1bf71be111189e76987a4bb9b3115cb7.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CKGrafico/ScreenshotToCodeSandbox/dc8f45971d89373fe1770ff855836816bf59508f/dist/fonts/1bf71be111189e76987a4bb9b3115cb7.ttf
--------------------------------------------------------------------------------
/dist/fonts/50145685042b4df07a1fd19957275b81.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CKGrafico/ScreenshotToCodeSandbox/dc8f45971d89373fe1770ff855836816bf59508f/dist/fonts/50145685042b4df07a1fd19957275b81.ttf
--------------------------------------------------------------------------------
/dist/fonts/55bfb3e43457ec893f128c2d73f76457.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CKGrafico/ScreenshotToCodeSandbox/dc8f45971d89373fe1770ff855836816bf59508f/dist/fonts/55bfb3e43457ec893f128c2d73f76457.eot
--------------------------------------------------------------------------------
/dist/fonts/629a55a7e793da068dc580d184cc0e31.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CKGrafico/ScreenshotToCodeSandbox/dc8f45971d89373fe1770ff855836816bf59508f/dist/fonts/629a55a7e793da068dc580d184cc0e31.ttf
--------------------------------------------------------------------------------
/dist/fonts/87051a9d79eb9fc8c317b5777320f78d.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CKGrafico/ScreenshotToCodeSandbox/dc8f45971d89373fe1770ff855836816bf59508f/dist/fonts/87051a9d79eb9fc8c317b5777320f78d.woff
--------------------------------------------------------------------------------
/dist/fonts/885e3d6f49fb6783494654e69793e802.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CKGrafico/ScreenshotToCodeSandbox/dc8f45971d89373fe1770ff855836816bf59508f/dist/fonts/885e3d6f49fb6783494654e69793e802.eot
--------------------------------------------------------------------------------
/dist/fonts/90327f5ac43d0fbc708f3653ffc0a043.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CKGrafico/ScreenshotToCodeSandbox/dc8f45971d89373fe1770ff855836816bf59508f/dist/fonts/90327f5ac43d0fbc708f3653ffc0a043.woff
--------------------------------------------------------------------------------
/dist/fonts/e1d396939867c493f06f2bbc071993d9.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CKGrafico/ScreenshotToCodeSandbox/dc8f45971d89373fe1770ff855836816bf59508f/dist/fonts/e1d396939867c493f06f2bbc071993d9.eot
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Screenshot to CodeSandbox conversor
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | Screenshot to CodeSandbox conversor
14 |
15 |
16 | Convert your code screenshots to Code Sandbox projects in a second.
17 |
18 |
19 |
20 | Project generated!! click to open in a new window and get a Code Sandbox link.
21 |
22 |
23 |
24 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | moduleFileExtensions: [
3 | 'js',
4 | 'json'
5 | ],
6 | transformIgnorePatterns: [
7 | '/node_modules/'
8 | ],
9 | moduleNameMapper: {
10 | '^@/(.*)$': '
/src/$1'
11 | },
12 | testMatch: [
13 | '**/**/*.test.(js)|**/tests/unit/*.(js)'
14 | ],
15 | testURL: 'http://localhost/'
16 | };
17 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "basic-spa",
3 | "description": "Stable version of a basic SPA example with SCSS and ES6.",
4 | "license": "MIT",
5 | "version": "2.4.1",
6 | "scripts": {
7 | "prod": "webpack --env.NODE_ENV=production",
8 | "dev": "webpack --env.NODE_ENV=development",
9 | "start": "webpack-dev-server --env.NODE_ENV=development --hot --open",
10 | "test": "npm run test:unit && npm run test:e2e",
11 | "test:unit": "jest",
12 | "test:e2e:cypress": "cypress run",
13 | "test:e2e": "start-server-and-test start http-get://localhost:4000 test:e2e:cypress",
14 | "lint": "npm run lint:scripts && npm run lint:styles",
15 | "lint:scripts": "eslint \"./app/**/*.js\"",
16 | "lint:styles": "stylelint \"./app/**/*.scss\"",
17 | "publish": "git subtree push --prefix dist origin gh-pages"
18 | },
19 | "husky": {
20 | "hooks": {}
21 | },
22 | "dependencies": {
23 | "@babel/polyfill": "^7.4.3",
24 | "bootstrap": "^4.3.1",
25 | "codesandbox": "^2.1.6",
26 | "cypress": "^3.2.0",
27 | "filepond": "^4.4.7",
28 | "js-beautify": "^1.10.0",
29 | "js-event-bus": "^1.0.0",
30 | "normalize-scss": "7.0.1",
31 | "tesseract.js": "^4.0.2"
32 | },
33 | "devDependencies": {
34 | "@babel/core": "^7.3.4",
35 | "@babel/plugin-syntax-dynamic-import": "^7.2.0",
36 | "@babel/preset-env": "^7.3.4",
37 | "@babel/register": "^7.0.0",
38 | "@cypress/webpack-preprocessor": "^4.0.3",
39 | "autoprefixer": "^9.5.0",
40 | "babel-jest": "^24.7.1",
41 | "babel-loader": "^8.0.5",
42 | "css-loader": "^2.1.1",
43 | "eslint": "^5.16.0",
44 | "eslint-plugin-cypress": "^2.2.1",
45 | "file-loader": "^3.0.1",
46 | "html-webpack-plugin": "^3.2.0",
47 | "husky": "^1.3.1",
48 | "jest": "^24.7.1",
49 | "mini-css-extract-plugin": "^0.5.0",
50 | "node-sass": "^4.11.0",
51 | "postcss-loader": "^3.0.0",
52 | "require.all": "^2.0.4",
53 | "sass-loader": "^7.1.0",
54 | "start-server-and-test": "^1.7.13",
55 | "style-loader": "^0.23.1",
56 | "stylelint": "^9.10.1",
57 | "stylelint-config-standard": "^18.2.0",
58 | "stylelint-processor-html": "^1.0.0",
59 | "stylelint-scss": "^3.5.4",
60 | "uglifyjs-webpack-plugin": "^2.1.2",
61 | "webpack": "^4.29.6",
62 | "webpack-cli": "^3.2.3",
63 | "webpack-dev-server": "^3.2.1"
64 | },
65 | "repository": "https://github.com/CKGrafico/Frontend-Boilerplates#frontend-boilerplates",
66 | "author": "https://github.com/CKGrafico/Frontend-Boilerplates#-contributors"
67 | }
68 |
--------------------------------------------------------------------------------
/tasks/plugins/extract-styles.js:
--------------------------------------------------------------------------------
1 | const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
2 |
3 | module.exports = (env) => {
4 | const defaultConfig = new MiniCSSExtractPlugin();
5 |
6 | const plugin = {
7 | production: defaultConfig
8 | };
9 |
10 | return plugin[env];
11 | };
12 |
--------------------------------------------------------------------------------
/tasks/plugins/globals.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack');
2 |
3 | module.exports = (env) => {
4 | const defaultConfig = new webpack.DefinePlugin({
5 | 'global': {}
6 | });
7 |
8 | const plugin = {
9 | production: defaultConfig,
10 | development: defaultConfig
11 | };
12 |
13 | return plugin[env];
14 | };
15 |
--------------------------------------------------------------------------------
/tasks/plugins/html.js:
--------------------------------------------------------------------------------
1 | const HtmlWebpackPlugin = require('html-webpack-plugin');
2 |
3 | module.exports = (env) => {
4 | const defaultConfig = new HtmlWebpackPlugin({
5 | hash: true,
6 | filename: 'index.html',
7 | template: './app/index.html'
8 | });
9 |
10 | const plugin = {
11 | production: defaultConfig,
12 | development: defaultConfig
13 | };
14 |
15 | return plugin[env];
16 | };
17 |
--------------------------------------------------------------------------------
/tasks/plugins/uglify.js:
--------------------------------------------------------------------------------
1 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
2 |
3 | module.exports = (env) => {
4 | const defaultConfig = new UglifyJSPlugin({
5 | uglifyOptions: {
6 | keep_classnames: true,
7 | keep_fnames: true,
8 | }
9 | });
10 |
11 | const plugin = {
12 | production: defaultConfig
13 | };
14 |
15 | return plugin[env];
16 | };
17 |
--------------------------------------------------------------------------------
/tasks/rules/files.js:
--------------------------------------------------------------------------------
1 | module.exports = (env) => {
2 | return [
3 | {
4 | test: /\.(png|jpg|gif)$/,
5 | use: [
6 | {
7 | loader: 'file-loader',
8 | options: {
9 | outputPath: 'images',
10 | },
11 | },
12 | ],
13 | },
14 | {
15 | test: /\.(woff(2)?|ttf|eot|svg)$/,
16 | use: [
17 | {
18 | loader: 'file-loader',
19 | options: {
20 | outputPath: 'fonts',
21 | },
22 | },
23 | ],
24 | }
25 | ]
26 | };
27 |
--------------------------------------------------------------------------------
/tasks/rules/scripts.js:
--------------------------------------------------------------------------------
1 | module.exports = (env) => {
2 | return {
3 | test: /\.js$/,
4 | exclude: /node_modules/,
5 | use: [
6 | {
7 | loader: 'babel-loader'
8 | }
9 | ]
10 | }
11 | };
12 |
--------------------------------------------------------------------------------
/tasks/rules/styles.js:
--------------------------------------------------------------------------------
1 | const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
2 |
3 | module.exports = (env) => {
4 | const styleLoaders = {
5 | production: MiniCSSExtractPlugin.loader,
6 | development: 'style-loader'
7 | };
8 |
9 | return {
10 | test: /\.scss$/,
11 | exclude: /node_modules/,
12 | use: [{
13 | loader: styleLoaders[env] // Creates style nodes from JS strings
14 | },
15 | {
16 | loader: 'css-loader' // Translates CSS into CommonJS
17 | },
18 | {
19 | loader: 'postcss-loader', // More CSS Plugins
20 | options: {
21 | plugins: () => [require('autoprefixer')({
22 | 'browsers': ['last 2 versions']
23 | })],
24 | }
25 | },
26 | {
27 | loader: 'sass-loader', // Compiles Sass to CSS, using Node Sass by default
28 | options: {
29 | //includePaths: ['absolute/path/a']
30 | }
31 | }]
32 | }
33 | };
34 |
--------------------------------------------------------------------------------
/tests/e2e/plugins/index.js:
--------------------------------------------------------------------------------
1 | const wp = require('@cypress/webpack-preprocessor')
2 |
3 | module.exports = (on, config) => {
4 | const options = {
5 | webpackOptions: require('../../../webpack.config'),
6 | }
7 | on('file:preprocessor', wp(options))
8 |
9 | return Object.assign({}, config, {
10 | fixturesFolder: 'tests/e2e/fixtures',
11 | integrationFolder: 'tests/e2e/specs',
12 | screenshotsFolder: 'tests/e2e/screenshots',
13 | videosFolder: 'tests/e2e/videos'
14 | })
15 | }
--------------------------------------------------------------------------------
/tests/e2e/specs/app.spec.js:
--------------------------------------------------------------------------------
1 | describe('My First Test', function() {
2 | it('Visits the Kitchen Sink', function() {
3 | cy.visit('/')
4 | })
5 | })
--------------------------------------------------------------------------------
/tests/e2e/videos/app.spec.js.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CKGrafico/ScreenshotToCodeSandbox/dc8f45971d89373fe1770ff855836816bf59508f/tests/e2e/videos/app.spec.js.mp4
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const rules = require('require.all')('./tasks/rules');
3 | const plugins = require('require.all')('./tasks/plugins');
4 |
5 | module.exports = env => {
6 | let environment = env.NODE_ENV;
7 | env.NODE_ENV = JSON.stringify(environment);
8 |
9 | rules((name, rule) => rule(environment));
10 | plugins((name, rule) => rule(environment));
11 |
12 | return ({
13 | mode: environment,
14 | entry: {
15 | app: [
16 | path.resolve(__dirname, 'app/scripts/app.js'),
17 | path.resolve(__dirname, 'app/styles/app.scss')
18 | ]
19 | },
20 | output: {
21 | filename: '[name].js'
22 | },
23 | module: {
24 | rules: [
25 | ...rules.files,
26 | rules.scripts,
27 | rules.styles
28 | ]
29 | },
30 | plugins: [
31 | plugins.html,
32 | plugins.globals,
33 | plugins.extractStyles
34 | ],
35 | devServer: {
36 | open: true,
37 | port: 4000,
38 | https: false,
39 | hot: true,
40 | historyApiFallback: true,
41 | watchOptions: {
42 | poll: true
43 | }
44 | // proxy: { '/api': 'http://localhost:3000' }
45 | },
46 | optimization: {
47 | minimizer: [plugins.uglify],
48 | splitChunks: {
49 | cacheGroups: {
50 | vendor: {
51 | chunks: 'all',
52 | test: path.resolve(__dirname, 'node_modules'),
53 | name: 'vendor',
54 | enforce: true
55 | }
56 | }
57 | }
58 | },
59 | resolve: {
60 | alias: {
61 | 'styles': path.resolve(__dirname, 'app/styles'),
62 | 'assets': path.resolve(__dirname, 'app/assets'),
63 | '~': path.resolve(__dirname, 'app/scripts')
64 | }
65 | },
66 | devtool: (() => environment === 'production' ? false : 'inline-source-map')()
67 | });
68 | };
69 |
--------------------------------------------------------------------------------