Skip to content

Commit 2d2fa42

Browse files
leomelzerleomelzer
authored
chore: Add semantic-release (#22)
* chore: Add semantic-release * chore: Add prettier
1 parent 2916e52 commit 2d2fa42

File tree

6 files changed

+72
-24
lines changed

6 files changed

+72
-24
lines changed

‎.github/workflows/release.yml‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
name: Release
2+
on:
3+
push:
4+
branches:
5+
- main
6+
- next
7+
jobs:
8+
release:
9+
name: Build & Release
10+
runs-on: ubuntu-18.04
11+
steps:
12+
- name: Checkout
13+
uses: actions/checkout@v1
14+
- name: Setup Node.js
15+
uses: actions/setup-node@v1
16+
with:
17+
node-version: 12
18+
- name: Install dependencies
19+
run: yarn
20+
- name: Build
21+
run: yarn build
22+
- name: Release
23+
env:
24+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
25+
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
26+
run: npx semantic-release

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
node_modules
22
/*.js
3+
/*.js.map
34
storybook-static

‎.prettierrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"semi": false,
3+
"singleQuote": true
4+
}

‎README.md‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<img width="300" src="https://storage.googleapis.com/graphcms-public/GraphCMS%20Image.svg?sanitize=true">
33
</p>
44

5-
# graphcms-image
5+
# @graphcms/react-image
66

77
Inspired by and based on [gatsby-image](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image)
88

@@ -17,11 +17,11 @@ Inspired by and based on [gatsby-image](https://github.com/gatsbyjs/gatsby/tree/
1717

1818

1919

20-
This is what a component using `graphcms-image` looks like.
20+
This is what a component using `@graphcms/react-image` looks like.
2121

2222
```jsx
2323
import React, { Fragment } from "react";
24-
import GraphImg from "graphcms-image";
24+
import GraphImg from "@graphcms/react-image";
2525

2626
export default ({ data: { loading, images } }) => {
2727
if (!loading) {
@@ -49,21 +49,21 @@ export const query = graphql`
4949

5050
## Props
5151

52-
| Name | Type | Description |
53-
| ----------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |
54-
| `image` | `object` | An object of shape `{ handle, width, height }`. Handle is an identifier required to display the image and both `width` and `height` are required to display a correct placeholder and aspect ratio for the image. You can get all 3 by just putting all 3 in your image-getting query. |
55-
| `maxWidth` | `number` | Maximum width you'd like your image to take up. (ex. If your image container is resizing dynamically up to a width of 1200, put it as a `maxWidth`) |
56-
| `fadeIn` | `bool` | Do you want your image to fade in on load? Defaults to `true` |
57-
| `fit` | `"clip"\|"crop"\|"scale"\|"max"` | When resizing the image, how would you like it to fit the new dimensions? Defaults to `crop`. You can read more about resizing [here](https://www.filestack.com/docs/image-transformations/resize) |
58-
| `withWebp` | `bool` | If webp is supported by the browser, the images will be served with `.webp` extension. (Recommended) |
59-
| `transforms` | `array` | Array of `string`s, each representing a separate Filestack transform, eg. `['sharpen=amount:5', 'quality=value:75']` |
60-
| `title` | `string` | Passed to the `img` element |
61-
| `alt` | `string` | Passed to the `img` element |
62-
| `className` | `string\|object` | Passed to the wrapper div. Object is needed to support Glamor's css prop |
63-
| `outerWrapperClassName` | `string\|object` | Passed to the outer wrapper div. Object is needed to support Glamor's css prop |
64-
| `style` | `object` | Spread into the default styles in the wrapper div |
65-
| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |
66-
| `blurryPlaceholder` | `bool` | Would you like to display a blurry placeholder for your loading image? Defaults to `true`. |
67-
| `backgroundColor` | `string\|bool` | Set a colored background placeholder. If true, uses "lightgray" for the color. You can also pass in any valid color string. |
68-
| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |
69-
| `baseURI` | `string` | Set the base src from where the images are requested. Base URI Defaults to `https://media.graphcms.com` |
52+
| Name | Type | Description |
53+
| ----------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
54+
| `image` | `object` | An object of shape `{ handle, width, height }`. Handle is an identifier required to display the image and both `width` and `height` are required to display a correct placeholder and aspect ratio for the image. You can get all 3 by just putting all 3 in your image-getting query. |
55+
| `maxWidth` | `number` | Maximum width you'd like your image to take up. (ex. If your image container is resizing dynamically up to a width of 1200, put it as a `maxWidth`) |
56+
| `fadeIn` | `bool` | Do you want your image to fade in on load? Defaults to `true` |
57+
| `fit` | `"clip"\|"crop"\|"scale"\|"max"` | When resizing the image, how would you like it to fit the new dimensions? Defaults to `crop`. You can read more about resizing [here](https://www.filestack.com/docs/image-transformations/resize) |
58+
| `withWebp` | `bool` | If webp is supported by the browser, the images will be served with `.webp` extension. (Recommended) |
59+
| `transforms` | `array` | Array of `string`s, each representing a separate Filestack transform, eg. `['sharpen=amount:5', 'quality=value:75']` |
60+
| `title` | `string` | Passed to the `img` element |
61+
| `alt` | `string` | Passed to the `img` element |
62+
| `className` | `string\|object` | Passed to the wrapper div. Object is needed to support Glamor's css prop |
63+
| `outerWrapperClassName` | `string\|object` | Passed to the outer wrapper div. Object is needed to support Glamor's css prop |
64+
| `style` | `object` | Spread into the default styles in the wrapper div |
65+
| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |
66+
| `blurryPlaceholder` | `bool` | Would you like to display a blurry placeholder for your loading image? Defaults to `true`. |
67+
| `backgroundColor` | `string\|bool` | Set a colored background placeholder. If true, uses "lightgray" for the color. You can also pass in any valid color string. |
68+
| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |
69+
| `baseURI` | `string` | Set the base src from where the images are requested. Base URI Defaults to `https://media.graphcms.com` |

‎package.json‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,26 @@
11
{
2-
"name": "graphcms-image",
3-
"version": "1.1.0-beta4",
2+
"name": "@graphcms/react-image",
3+
"version": "0.0.0-semantically-released",
44
"main": "index.js",
55
"license": "MIT",
66
"author": "Hugo Meissner <[email protected]>",
77
"scripts": {
8-
"build": "babel src --out-dir .",
8+
"build": "babel src --out-dir ./ --source-maps",
99
"storybook": "start-storybook -p 6006",
1010
"build-storybook": "build-storybook",
1111
"prepare": "npm run build"
1212
},
13+
"release": {
14+
"branches": [
15+
"main"
16+
],
17+
"plugins": [
18+
"@semantic-release/commit-analyzer",
19+
"@semantic-release/release-notes-generator",
20+
"@semantic-release/npm",
21+
"@semantic-release/github"
22+
]
23+
},
1324
"devDependencies": {
1425
"@storybook/addon-actions": "^3.3.6",
1526
"@storybook/addon-links": "^3.3.6",
@@ -19,6 +30,7 @@
1930
"babel-preset-airbnb": "^2.4.0",
2031
"eslint": "^4.14.0",
2132
"eslint-config-blazity": "^1.0.4",
33+
"prettier": "^2.2.1",
2234
"react": "^16.2.0",
2335
"react-dom": "^16.2.0"
2436
},

‎yarn.lock‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4942,6 +4942,11 @@ prettier@^1.9.2:
49424942
version "1.9.2"
49434943
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.9.2.tgz#96bc2132f7a32338e6078aeb29727178c6335827"
49444944

4945+
prettier@^2.2.1:
4946+
version "2.2.1"
4947+
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
4948+
integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
4949+
49454950
pretty-error@^2.0.2:
49464951
version "2.1.1"
49474952
resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"

0 commit comments

Comments
 (0)