Skip to content

Commit a5c6a28

Browse files
guastallaigorguastallaigor
committed
Merge branch 'update-project'
2 parents ba03b8e + 25d187e commit a5c6a28

File tree

13 files changed

+6431
-3794
lines changed

13 files changed

+6431
-3794
lines changed

‎.eslintrc.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,15 @@ module.exports = {
1313
},
1414
parserOptions: {
1515
parser: 'babel-eslint'
16-
}
16+
},
17+
overrides: [
18+
{
19+
files: [
20+
'**/tests/unit/*.spec.{j,t}s?(x)'
21+
],
22+
env: {
23+
jest: true
24+
}
25+
}
26+
]
1727
}

‎.storybook/main.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = {
2+
stories: ['../stories/**/*.stories.js'],
3+
logLevel: 'debug',
4+
addons: [
5+
'@storybook/addon-controls',
6+
'@storybook/addon-docs',
7+
'@storybook/addon-a11y'
8+
]
9+
}

‎.storybook/manager.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { addons } from '@storybook/addons'
2+
import theme from './theme'
3+
4+
addons.setConfig({ theme })

‎.storybook/theme.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { create } from '@storybook/theming/create'
2+
3+
export default create({
4+
base: 'light',
5+
6+
colorPrimary: '#41b883',
7+
colorSecondary: '#060a0e',
8+
9+
// UI
10+
appBg: '#152232',
11+
appContentBg: '#0b1622',
12+
appBorderColor: '#CBD5E0',
13+
appBorderRadius: 4,
14+
15+
// Typography
16+
fontBase: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Open Sans", sans-serif',
17+
fontCode: 'monospace',
18+
19+
// Text colors
20+
textColor: '#94A3B8',
21+
textInverseColor: 'black',
22+
23+
// Toolbar default and active colors
24+
barTextColor: 'silver',
25+
barSelectedColor: '#FFFFFF',
26+
barBg: '#152232',
27+
28+
// Form colors
29+
inputBg: '#152232',
30+
inputBorder: '#152232',
31+
inputTextColor: '#FFFFFF',
32+
inputBorderRadius: 4,
33+
34+
brandTitle: 'Vue Image Kit',
35+
brandUrl: 'https://github.com/guastallaigor/vue-image-kit',
36+
brandImage: 'https://raw.githubusercontent.com/guastallaigor/vue-image-kit/master/.github/logo.png'
37+
})

‎README.md‎

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
</p>
1111

1212
<p align="center">
13-
<a href="https://circleci.com/gh/guastallaigor/vue-image-kit/tree/master"><img src="https://badgen.net/circleci/github/guastallaigor/vue-image-kit/master" alt="Build"></a>
13+
<a href="https://circleci.com/gh/guastallaigor/vue-image-kit"><img src="img.shields.io/circleci/build/github/guastallaigor/vue-horizontal-timeline/master?label=circleci&logo=circleci" alt="Build"></a>
1414
<a href="https://codecov.io/gh/guastallaigor/vue-image-kit"><img src="https://codecov.io/gh/guastallaigor/vue-image-kit/branch/master/graph/badge.svg" alt="Code Coverage"></a>
1515
<a href="https://www.npmjs.com/package/vue-image-kit"><img src="https://img.shields.io/npm/dt/vue-image-kit.svg" alt="Total Downloads"></a>
1616
<a href="https://github.com/guastallaigor/vue-image-kit/releases"><img src="https://img.shields.io/npm/v/vue-image-kit.svg" alt="Latest Release"></a>
@@ -28,7 +28,7 @@
2828

2929
## Storybook
3030

31-
Go to https://vue-image-kit.netlify.com
31+
Go to https://vue-image-kit.netlify.app
3232

3333
## How does it work
3434

@@ -66,6 +66,7 @@ Or locally in any component
6666

6767
```js
6868
import { VueImageKit } from 'vue-image-kit'
69+
// In v0.2+ you don't need the brackets above
6970

7071
export default {
7172
components: {
@@ -79,6 +80,7 @@ export default {
7980
You can import as a Nuxt.js plugin
8081

8182
`~/plugins/vue-image-kit.js`
83+
8284
```js
8385
import Vue from 'vue'
8486
import VueImageKit from 'vue-image-kit'
@@ -87,6 +89,7 @@ Vue.use(VueImageKit)
8789
```
8890

8991
and then import it in your `nuxt.config.js` file
92+
9093
```js
9194
plugins: [
9295
{ src: '~/plugins/vue-image-kit', mode: 'client' }
@@ -109,40 +112,45 @@ plugins: [
109112

110113
## Props
111114

112-
| Property name | Type | Default | Required | Description |
113-
|-----------------|--------|-----------------|----------|-------------------------------------------------------------------------------------|
114-
| hash | String | null | true | Images hash. Example: Take this image -> https://ik.imagekit.io/6xhf1gnexgdgk/lion_BllLvaqVn.jpg, the hash is '6xhf1gnexgdgk' |
115-
| src | String | null | true | Images source. Example: Take this image -> https://ik.imagekit.io/6xhf1gnexgdgk/lion_BllLvaqVn.jpg, the source is 'lion_BllLvaqVn.jpg' |
116-
| placeholder | String | '' | false | Images placeholder. Here you can pass a link |
117-
| backgroundColor | String | '' | false | Background color of the images placeholder |
118-
| srcset | Array | [320, 480, 800] | false | Array of numbers that will define the images srcset attribute. Each number correspond to one of the images width |
119-
| sizes | Array | [] | false | Array of numbers that will define the images sizes attribute. Each number correspond to one of the images max-width. Empty by default, which gets each of the images srcset prop and subtract by 40px |
120-
| defaultSize | Number | 1080 | true | Images default size. Must be larger than the largest srcset and sizes |
121-
| customTransform | String | '' | false | Use this to append any extra image kit transform that you want |
122-
| width | Number | null | false | Images width. Width number in pixels. It will be set with inline style |
123-
| height | Number | null | false | Images height. Height number in pixels. It will be set with inline style |
124-
| alt | String | '' | false | Images alt attribute |
115+
| Property name | Type | Default | Required | Description |
116+
|-----------------|---------|-----------------|----------|-------------------------------------------------------------------------------------|
117+
| hash | String | null | true | Images hash. Example: Take this image -> https://ik.imagekit.io/6xhf1gnexgdgk/lion_BllLvaqVn.jpg, the hash is '6xhf1gnexgdgk' |
118+
| src | String | null | true | Images source. Example: Take this image -> https://ik.imagekit.io/6xhf1gnexgdgk/lion_BllLvaqVn.jpg, the source is 'lion_BllLvaqVn.jpg' |
119+
| placeholder | String | '' | false | Images placeholder. Here you can pass a link |
120+
| backgroundColor | String | '' | false | Background color of the images placeholder |
121+
| srcset | Array | [320, 480, 800] | false | Array of numbers that will define the images srcset attribute. Each number correspond to one of the images width |
122+
| sizes | Array | [] | false | Array of numbers that will define the images sizes attribute. Each number correspond to one of the images max-width. Empty by default, which gets each of the images srcset prop and subtract by 40px |
123+
| defaultSize | Number | 1080 | true | Images default size. Must be larger than the largest srcset and sizes |
124+
| customTransform | String | '' | false | Use this to append any extra image kit transform that you want |
125+
| width | Number | null | false | Images width. Width number in pixels. It will be set with inline style |
126+
| height | Number | null | false | Images height. Height number in pixels. It will be set with inline style |
127+
| alt | String | '' | false | Images alt attribute |
128+
| lazyLoad | Boolean | true | false | If you don't want to use the built in lazy load, you can set this to false, then the image will not be lazy loaded, and you can setup your own lazy load |
125129

126130
## Development
127131

128132
[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/guastallaigor/vue-image-kit/issues)
129133

134+
> **Note**: Contributions are very welcomed, however is very important to open a new issue using the issue template **before** you start working on anything, so we can discuss it before hand
135+
130136
Fork the project and enter this commands in your terminal
131137

132138
```sh
133139
git clone https://github.com/YOUR_GITHUB_USERNAME/vue-image-kit.git
134140
cd vue-image-kit
135141
yarn
136142
```
137-
138143
### Storybook
144+
139145
For visual testing, this project contains storybook which you can run by doing the next command
146+
140147
```sh
141148
$ yarn storybook
142149
```
143150

144151
### Jest
145-
Before making the PR, if you changed something that needs to be tested, please make the tests inside the `tests/unit` folder.
152+
153+
Before making the PR, if you changed something that needs to be tested, please make the tests inside the `tests/unit` folder
146154

147155
To run the tests, you can use the next command
148156

@@ -151,13 +159,14 @@ $ yarn test:unit
151159
```
152160

153161
### Commitlint
154-
This project follows the [commitlint](https://github.com/conventional-changelog/commitlint) guidelines, with minor changes.
155162

156-
You can commit using `npm run commit` to help you with that.
163+
This project follows the [commitlint](https://github.com/conventional-changelog/commitlint) guidelines, with minor changes
164+
165+
You can commit using `npm run commit` to help you with that
157166

158-
There's a `pre-push` hook that runs all the unit tests before you can push it.
167+
There's a `pre-push` hook that runs all the unit tests before you can push it
159168

160-
If an error occurs, you can use the `npm run commit:retry` command that runs the previous `npm run commit` that you already filled.
169+
If an error occurs, you can use the `npm run commit:retry` command that runs the previous `npm run commit` that you already filled
161170

162171
<a href="https://www.buymeacoffee.com/guastallaigor" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
163172

‎babel.config.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
module.exports = {
2-
presets: [
3-
'@vue/app'
4-
]
2+
presets: ['@vue/cli-plugin-babel/preset']
53
}

‎package.json‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,54 @@
11
{
22
"name": "vue-image-kit",
3-
"version": "0.1.3",
3+
"version": "0.2.0",
44
"private": false,
55
"description": "Vue.js Image Kit Component with Lazy Load built in and Responsive Images",
66
"homepage": "https://github.com/guastallaigor/vue-image-kit#readme",
77
"author": "Igor Guastalla de Lima",
88
"scripts": {
99
"lint": "vue-cli-service lint",
10-
"storybook:build": "vue-cli-service storybook:build -c config/storybook",
11-
"storybook": "vue-cli-service storybook:serve -p 6006 -c config/storybook",
10+
"storybook": "start-storybook -p 6006 -s public",
11+
"build-storybook": "build-storybook",
1212
"test:unit": "vue-cli-service test:unit",
1313
"test:watch": "vue-cli-service test:unit --watch",
1414
"commit": "git-cz",
1515
"commit:retry": "git-cz --retry",
1616
"commitmsg": "commitlint -e"
1717
},
1818
"dependencies": {
19-
"vue": "^2.6.10"
19+
"vue": "^2.6.12"
2020
},
2121
"devDependencies": {
22-
"@commitlint/cli": "^8.2.0",
23-
"@commitlint/config-conventional": "^8.2.0",
24-
"@storybook/addon-actions": "^5.2.6",
25-
"@storybook/addon-backgrounds": "^5.2.6",
26-
"@storybook/addon-knobs": "^5.2.6",
27-
"@storybook/addon-links": "^5.2.6",
28-
"@storybook/addon-notes": "^5.2.6",
29-
"@vue/cli-plugin-babel": "^4.1.1",
30-
"@vue/cli-plugin-eslint": "^4.1.1",
31-
"@vue/cli-plugin-unit-jest": "^4.1.1",
32-
"@vue/cli-service": "^4.1.1",
33-
"@vue/eslint-config-standard": "^4.0.0",
34-
"@vue/test-utils": "^1.0.0-beta.29",
35-
"babel-eslint": "^10.0.3",
36-
"commitizen": "^4.0.3",
37-
"core-js": "3.4.5",
38-
"eslint": "^5.16.0",
22+
"@commitlint/cli": "^11.0.0",
23+
"@commitlint/config-conventional": "^11.0.0",
24+
"@storybook/addon-a11y": "^6.1.6",
25+
"@storybook/addon-actions": "^6.1.6",
26+
"@storybook/addon-backgrounds": "^6.1.6",
27+
"@storybook/addon-controls": "^6.1.6",
28+
"@storybook/addon-docs": "^6.1.6",
29+
"@storybook/addon-links": "^6.1.6",
30+
"@storybook/addons": "^6.1.6",
31+
"@storybook/theming": "^6.1.6",
32+
"@storybook/vue": "^6.1.6",
33+
"@vue/cli-plugin-babel": "^4.5.9",
34+
"@vue/cli-plugin-eslint": "^4.5.9",
35+
"@vue/cli-plugin-unit-jest": "^4.5.9",
36+
"@vue/cli-service": "^4.5.9",
37+
"@vue/eslint-config-standard": "^5.1.2",
38+
"@vue/test-utils": "^1.1.1",
39+
"babel-eslint": "^10.1.0",
40+
"commitizen": "^4.2.2",
41+
"core-js": "3.8.0",
42+
"eslint": "^7.14.0",
43+
"eslint-plugin-import": "^2.22.1",
44+
"eslint-plugin-node": "^11.1.0",
45+
"eslint-plugin-promise": "^4.2.1",
46+
"eslint-plugin-standard": "^5.0.0",
3947
"eslint-plugin-vue": "^5.0.0s",
40-
"husky": "^3.1.0",
41-
"jest-canvas-mock": "^2.2.0",
42-
"vue-cli-plugin-storybook": "^0.6.1",
43-
"vue-template-compiler": "^2.6.10"
48+
"husky": "^4.3.0",
49+
"jest-canvas-mock": "^2.3.0",
50+
"vue-cli-plugin-storybook": "^2.0.0",
51+
"vue-template-compiler": "^2.6.12"
4452
},
4553
"bugs": {
4654
"url": "https://github.com/guastallaigor/vue-image-kit/issues"

0 commit comments

Comments
 (0)