├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .github
└── zero-logo.png
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── config
├── paths.js
├── webpack.common.js
├── webpack.dev.js
└── webpack.prod.js
├── package-lock.json
├── package.json
└── src
├── _example-lib.js
├── index.js
└── manifest.json
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | indent_style = space
5 | indent_size = 2
6 | end_of_line = lf
7 | charset = utf-8
8 | trim_trailing_whitespace = true
9 | insert_final_newline = true
10 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | dist/*
2 | config/*
3 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | module.exports = {
3 | 'env': {
4 | 'browser': true,
5 | 'es6': true,
6 | 'node': true,
7 | },
8 | 'extends': [
9 | 'airbnb-base',
10 | 'prettier',
11 | ],
12 | 'plugins': [
13 | 'prettier',
14 | ],
15 | 'rules': {
16 | 'prettier/prettier': ['error', {
17 | 'singleQuote': true,
18 | 'trailingComma': 'es5'
19 | }],
20 | },
21 | 'parser': 'babel-eslint',
22 | 'settings': {
23 | 'import/resolver': {
24 | 'webpack': {
25 | 'config': path.join(__dirname, 'config/webpack.config.dev.js')
26 | }
27 | }
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/.github/zero-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pabaibara/zero/db186c0af6c6daeba24acce3d42acea1c938367c/.github/zero-logo.png
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # build
7 | /dist
8 |
9 | # misc
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 |
14 | .DS_Store
15 | Thumbs.db
16 |
17 | .vscode/*
18 | .cache
19 | .project
20 | .settings
21 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "singleQuote": true,
3 | "trailingComma": "es5"
4 | }
5 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Pavel Baybara
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
4 |
5 |
6 | 
7 |
8 |
9 | Start your Zeplin extension from Zero with Webpack.
10 |
11 | If you want more power features without build process configuration – use official solution [zem](https://github.com/zeplin/zem)
12 |
13 | ## Zero includes
14 |
15 | * Base project file structure
16 | * Webpack (dev watching & production minification)
17 | * Babel
18 | * Prettier
19 | * Eslint (AirBnB & Prettier)
20 | * EditorConfig
21 | * Husky & Lint-staged (pre-commit hooks)
22 |
23 | ## How to Start
24 |
25 | First, you need last stable Node.js `^8.9.4`. Follow this [guide](https://github.com/creationix/nvm/blob/master/README.md#installation) if you don't have any.
26 |
27 | Next, install project dependencies:
28 |
29 | ```bash
30 | npm install
31 | ```
32 |
33 | To start developing run:
34 |
35 | ```bash
36 | npm start
37 | ```
38 |
39 | Result build will be at `dist` dir. To add your extension into local macOS Zeplin client follow the instruction from official [tutorial](https://github.com/zeplin/zeplin-extension-documentation/blob/master/tutorial.md#adding-a-local-extension). Path to your local extension be like:
40 |
41 | ```
42 | file://[absolute_path_to_zero_project_folder]/dist/manifest.json
43 | ```
44 |
45 | Don't forget to replace `[absolute_path_to_zero_project_folder]` with your folder absolute path.
46 |
47 | And finally, to get production ready build of your extension, just replace Zero credantials in `src/manifest.json` to yours and run following:
48 |
49 | ```bash
50 | npm run build
51 | ```
52 |
53 | ## Project structure
54 |
55 | ```
56 | zero
57 | ├── README.md
58 | ├── node_modules
59 | ├── package.json
60 | ├── package-lock.json
61 | ├── .eslintrc.js
62 | ├── .eslintignore
63 | ├── .prettierrc
64 | ├── .editorconfig
65 | ├── .gitignore
66 | ├── config
67 | │ └── paths.js
68 | │ └── webpack.common.js
69 | │ └── webpack.dev.js
70 | │ └── webpack.prod.js
71 | ├── dist <-- result extension build will be there
72 | │ └── index.js
73 | │ └── manifest.json
74 | └── src
75 | └── _example-lib.js
76 | └── index.js
77 | └── manifest.json
78 | ```
79 |
80 | ## Extensions builded with Zero
81 |
82 | * [Zepcode](https://github.com/artemnovichkov/zepcode) - Zeplin extension that generates Swift snippets from colors, fonts and layers
83 |
84 | ## Authors
85 |
86 | Baybara Pavel, baybara.pavel@gmail.com
87 |
88 | Artem Novichkov, novichkoff93@gmail.com [](https://www.codementor.io/artemnovichkov?utm_source=github&utm_medium=button&utm_term=artemnovichkov&utm_campaign=github)
89 |
90 | ## License
91 |
92 | Zero is available under the MIT license. See the LICENSE file for more info.
93 |
--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const path = require('path');
4 | const fs = require('fs');
5 |
6 | const rootDirectory = fs.realpathSync(process.cwd());
7 | const resolveLib = relativePath => path.resolve(rootDirectory, relativePath);
8 |
9 | module.exports = {
10 | root: rootDirectory,
11 | src: resolveLib('src'),
12 | nodeModules: resolveLib('node_modules'),
13 | indexJs: resolveLib('src/index.js'),
14 | manifestJson: resolveLib('src/manifest.json'),
15 | dist: resolveLib('dist'),
16 | };
17 |
--------------------------------------------------------------------------------
/config/webpack.common.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const CleanWebpackPlugin = require('clean-webpack-plugin');
3 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
4 | const CopyWebpackPlugin = require('copy-webpack-plugin');
5 |
6 | const paths = require('./paths');
7 |
8 | module.exports = {
9 | entry: {
10 | index: paths.indexJs,
11 | },
12 | output: {
13 | filename: '[name].js',
14 | path: paths.dist,
15 | library: 'extension',
16 | libraryTarget: 'var',
17 | },
18 | module: {
19 | strictExportPresence: true,
20 | rules: [
21 | {
22 | test: /\.(js)$/,
23 | include: paths.src,
24 | loader: require.resolve('babel-loader'),
25 | options: {
26 | cacheDirectory: true,
27 | },
28 | },
29 | {
30 | test: /\.(js)$/,
31 | exclude: paths.nodeModules,
32 | enforce: 'pre',
33 | use: [
34 | {
35 | options: {
36 | formatter: require('react-dev-utils/eslintFormatter'),
37 | eslintPath: require.resolve('eslint'),
38 | },
39 | loader: require.resolve('eslint-loader'),
40 | },
41 | ],
42 | include: paths.src,
43 | },
44 | ],
45 | },
46 | plugins: [
47 | new CleanWebpackPlugin([paths.dist], {
48 | root: paths.root,
49 | verbose: true,
50 | dry: false
51 | }),
52 | new CopyWebpackPlugin([
53 | {
54 | context: paths.root,
55 | from: paths.manifestJson,
56 | to: paths.dist,
57 | },
58 | ]),
59 | new CaseSensitivePathsPlugin(),
60 | ],
61 | };
62 |
--------------------------------------------------------------------------------
/config/webpack.dev.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const merge = require('webpack-merge');
4 | const common = require('./webpack.common.js');
5 |
6 | const paths = require('./paths');
7 |
8 | module.exports = merge(common, {
9 | devtool: 'inline-source-map',
10 | output: {
11 | pathinfo: true,
12 | },
13 | watch: true,
14 | watchOptions: {
15 | ignored: paths.nodeModules,
16 | },
17 | performance: {
18 | hints: false,
19 | },
20 | });
21 |
--------------------------------------------------------------------------------
/config/webpack.prod.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const webpack = require('webpack');
4 | const merge = require('webpack-merge');
5 | const common = require('./webpack.common.js');
6 |
7 | const paths = require('./paths');
8 |
9 | module.exports = merge(common, {
10 | bail: true,
11 | devtool: false,
12 | module: {
13 | rules: [
14 | {
15 | test: /\.(js)$/,
16 | include: paths.src,
17 | loader: require.resolve('babel-loader'),
18 | options: {
19 | compact: true,
20 | },
21 | },
22 | ]
23 | },
24 | plugins: [
25 | new webpack.optimize.UglifyJsPlugin({
26 | compress: {
27 | warnings: false,
28 | // Disabled because of an issue with Uglify breaking seemingly valid code:
29 | // https://github.com/facebookincubator/create-react-app/issues/2376
30 | // Pending further investigation:
31 | // https://github.com/mishoo/UglifyJS2/issues/2011
32 | comparisons: false,
33 | },
34 | mangle: {
35 | safari10: true,
36 | },
37 | output: {
38 | comments: false,
39 | // Turned on because emoji and regex is not minified properly using default
40 | // https://github.com/facebookincubator/create-react-app/issues/2488
41 | ascii_only: true,
42 | },
43 | sourceMap: false,
44 | }),
45 | ],
46 | });
47 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "zero",
3 | "version": "0.1.0",
4 | "description": "Boilerplate for Zeplin extension projects based on Webpack",
5 | "main": "index.js",
6 | "lint-staged": {
7 | "src/**/*.{js,json}": [
8 | "prettier --config .prettierrc --write",
9 | "git add"
10 | ]
11 | },
12 | "scripts": {
13 | "precommit": "lint-staged",
14 | "start": "webpack --config ./config/webpack.dev.js --progress --color",
15 | "build": "webpack --config ./config/webpack.prod.js",
16 | "test:lint": "eslint --ext=js .",
17 | "test:unit": "echo \"Error: no test specified\" && exit 1",
18 | "test": "run-s test:**"
19 | },
20 | "devDependencies": {
21 | "babel-core": "6.26.0",
22 | "babel-eslint": "7.2.3",
23 | "babel-loader": "7.1.2",
24 | "babel-preset-env": "^1.6.1",
25 | "case-sensitive-paths-webpack-plugin": "2.1.1",
26 | "clean-webpack-plugin": "^0.1.18",
27 | "copy-webpack-plugin": "^4.4.2",
28 | "eslint": "^4.16.0",
29 | "eslint-config-airbnb-base": "^12.1.0",
30 | "eslint-config-prettier": "^2.9.0",
31 | "eslint-friendly-formatter": "3.0.0",
32 | "eslint-import-resolver-webpack": "^0.8.4",
33 | "eslint-loader": "1.9.0",
34 | "eslint-plugin-import": "^2.8.0",
35 | "eslint-plugin-prettier": "^2.5.0",
36 | "husky": "^0.14.3",
37 | "lint-staged": "^6.0.1",
38 | "npm-run-all": "^4.1.2",
39 | "prettier": "^1.10.2",
40 | "react-dev-utils": "^5.0.0",
41 | "webpack": "3.8.1",
42 | "webpack-merge": "4.1.2"
43 | },
44 | "repository": {
45 | "type": "git",
46 | "url": "git+ssh://git@github.com/baybara-pavel/zero.git"
47 | },
48 | "author": "Pavel Baybara",
49 | "license": "MIT",
50 | "bugs": {
51 | "url": "https://github.com/baybara-pavel/zero/issues"
52 | },
53 | "homepage": "https://github.com/baybara-pavel/zero#readme",
54 | "babel": {
55 | "presets": [
56 | "env"
57 | ]
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/src/_example-lib.js:
--------------------------------------------------------------------------------
1 | const exampleString = 'Zero extension works!';
2 | export default exampleString;
3 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import exampleString from './_example-lib';
2 |
3 | export function layer() {
4 | return {
5 | code: exampleString,
6 | mode: 'swift',
7 | };
8 | }
9 |
10 | export function comment() {}
11 |
12 | export function styleguideColors() {}
13 |
14 | export function styleguideTextStyles() {}
15 |
16 | export function exportStyleguideColors() {}
17 |
18 | export function exportStyleguideTextStyles() {}
19 |
--------------------------------------------------------------------------------
/src/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Zero",
3 | "description": "Boilerplate for Zeplin extension projects based on Webpack",
4 | "version": "0.1.0",
5 | "moduleURL": "./index.js",
6 | "author": {
7 | "name": "Baybara Pavel",
8 | "email": "baybara.pavel@gmail.com",
9 | "url": "http://github.com/baybara-pavel"
10 | },
11 | "repository": "http://github.com/baybara-pavel/zero",
12 | "options": []
13 | }
14 |
--------------------------------------------------------------------------------