Skip to content

Commit 96fc07f

Browse files
nasdannasdan
authored
Merge pull request #13 from Lemoncode/develop
v1.0.0
2 parents 91b5c32 + 6154ffa commit 96fc07f

File tree

146 files changed

+40071
-1
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

146 files changed

+40071
-1
lines changed

‎.changeset/config.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
3+
"changelog": [
4+
"@changesets/changelog-github",
5+
{ "repo": "Lemoncode/react-image-focal-point" }
6+
],
7+
"commit": false,
8+
"access": "restricted",
9+
"baseBranch": "main"
10+
}

‎.changeset/poor-carpets-know.md

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
'@lemoncode/react-image-focal-point': major
3+
---
4+
5+
Let the user set the picture focal point just by visually dragging and dropping on top of the selected image.
6+
7+
Install _React Image Focal Point_ using your favorite package manager like [npm](https://www.npmjs.com/):
8+
9+
```bash
10+
npm install @lemoncode/react-image-focal-point
11+
12+
```
13+
14+
or via [yarn](https://classic.yarnpkg.com/lang/en/):
15+
16+
```bash
17+
yarn add @lemoncode/react-image-focal-point
18+
19+
```
20+
21+
This library has `peerDependencies` listings for `react` and `react-dom`. You will need to install these packages in your project in order to use this library.
22+
23+
Import the library styles and the component:
24+
25+
```jsx
26+
import '@lemoncode/react-image-focal-point/style.css';
27+
import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
28+
29+
const App = () => {
30+
return (
31+
// Your app code
32+
);
33+
};
34+
35+
```
36+
37+
Then use the component:
38+
39+
```jsx
40+
import '@lemoncode/react-image-focal-point/style.css';
41+
import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
42+
43+
const App = () => {
44+
return (
45+
<ImageFocalPoint
46+
src="your-image-src" // Same src as <img> HTML element
47+
onChange={focalPoint => {
48+
// Add here your code to do whatever you want to when the user drags on the focal point
49+
}}
50+
/>
51+
);
52+
};
53+
```
54+
55+
Check out our official [documentation](https://lemoncode.github.io/react-image-focal-point)
56+
57+
You'll find runnable examples in the [docs site](https://lemoncode.github.io/react-image-focal-point/docs/examples/basic) and in the [examples folder](https://github.com/Lemoncode/react-image-focal-point/tree/main/examples).

‎.editorconfig

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
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

‎.github/workflows/ci.yml

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
name: CI
2+
3+
on:
4+
pull_request:
5+
6+
jobs:
7+
unit-tests:
8+
runs-on: ubuntu-latest
9+
steps:
10+
- name: Checkout Repository
11+
uses: actions/checkout@v3
12+
13+
- name: Add NPM registry
14+
uses: actions/setup-node@v3
15+
with:
16+
node-version: 18.x
17+
18+
- name: Install
19+
run: npm ci
20+
21+
- name: Tests
22+
run: npm test
23+
e2e-tests:
24+
runs-on: ubuntu-latest
25+
steps:
26+
- name: Checkout Repository
27+
uses: actions/checkout@v3
28+
29+
- name: Add NPM registry
30+
uses: actions/setup-node@v3
31+
with:
32+
node-version: 18.x
33+
34+
- name: Install
35+
run: npm ci
36+
37+
- name: Install playwright browsers
38+
run: npx playwright install --with-deps
39+
40+
- name: Tests
41+
run: npm run test:e2e

‎.github/workflows/docs.yml

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
name: Publish Docs
2+
3+
on:
4+
workflow_dispatch:
5+
push:
6+
branches:
7+
- main
8+
paths:
9+
- docs/**
10+
- website/**
11+
- .github/workflows/docs.yml
12+
13+
jobs:
14+
publish-docs:
15+
runs-on: ubuntu-latest
16+
environment:
17+
name: Docs
18+
url: https://lemoncode.github.io/react-image-focal-point
19+
steps:
20+
- name: Checkout Repository
21+
uses: actions/checkout@v3
22+
23+
- name: Add NPM registry
24+
uses: actions/setup-node@v3
25+
with:
26+
node-version: 18.x
27+
28+
- name: Use SSH key
29+
run: |
30+
mkdir -p ~/.ssh/
31+
echo "${{secrets.SSH_PRIVATE_KEY}}" > ~/.ssh/id_rsa
32+
sudo chmod 600 ~/.ssh/id_rsa
33+
34+
- name: Config git
35+
run: |
36+
git config --global user.email "docs@lemoncode.net"
37+
git config --global user.name "Docs bot"
38+
39+
- name: Install
40+
run: npm ci
41+
42+
- name: Publish Docs
43+
run: |
44+
cd ./website
45+
npm run build
46+
npm run deploy

‎.github/workflows/packages.yml

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
name: Publish Packages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
paths-ignore:
8+
- docs/**
9+
- website/**""
10+
- .github/workflows/docs.yml
11+
12+
jobs:
13+
publish-package:
14+
runs-on: ubuntu-latest
15+
steps:
16+
- name: Checkout Repository
17+
uses: actions/checkout@v3
18+
19+
- name: Add NPM registry
20+
uses: actions/setup-node@v3
21+
with:
22+
node-version: 18.x
23+
24+
- name: Install
25+
run: npm ci
26+
27+
- name: Publish Release
28+
id: changesets
29+
uses: changesets/action@v1
30+
with:
31+
publish: npm run publish-packages
32+
env:
33+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
34+
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,6 @@ yarn-error.log*
3434
.turbo
3535

3636
stats.html
37+
test-results/
38+
playwright-report/
39+
playwright/.cache/

‎.husky/pre-commit

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/usr/bin/env sh
2+
. "$(dirname -- "$0")/_/husky.sh"
3+
4+
node_modules/.bin/pretty-quick --staged

‎.prettierrc

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"printWidth": 120,
3+
"singleQuote": true,
4+
"useTabs": false,
5+
"tabWidth": 2,
6+
"semi": true,
7+
"bracketSpacing": true,
8+
"trailingComma": "es5",
9+
"arrowParens": "avoid",
10+
"endOfLine": "lf"
11+
}

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2023 Lemoncode
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.

0 commit comments

Comments
 (0)