add styled example

Author: nasdan

examples/basic-with-apply/src/app.tsx

@@ -7,6 +7,7 @@ const IMAGE_URL = 'landscape.jpg';
 
 export const App = () => {
   const [focalPoint, setFocalPoint] = React.useState<FocalPoint>();
+  
   return (
     <Playground src={IMAGE_URL} focalPoint={focalPoint}>
       <ImageFocalPoint src={IMAGE_URL} onChange={setFocalPoint} />

examples/basic-with-apply/src/playground.module.css

@@ -59,7 +59,6 @@ h2 {
   gap: 1rem;
   width: 100%;
   height: 100%;
-  max-width: 40vw;
 }
 
 .portrait-image {

examples/basic/src/app.tsx

@@ -7,6 +7,7 @@ const IMAGE_URL = 'landscape.jpg';
 
 export const App = () => {
   const [focalPoint, setFocalPoint] = React.useState<FocalPoint>();
+
   return (
     <Playground src={IMAGE_URL} focalPoint={focalPoint}>
       <ImageFocalPoint src={IMAGE_URL} onChange={setFocalPoint} />

examples/basic/src/playground.module.css

@@ -36,7 +36,6 @@ h2 {
   gap: 1rem;
   width: 100%;
   height: 100%;
-  max-width: 40vw;
 }
 
 .portrait-image {

examples/controlled/src/app.tsx

@@ -7,6 +7,7 @@ const IMAGE_URL = 'landscape.jpg';
 
 export const App = () => {
   const [focalPoint, setFocalPoint] = React.useState<FocalPoint>({ x: 5, y: 10 });
+
   return (
     <Playground src={IMAGE_URL} focalPoint={focalPoint}>
       <ImageFocalPoint src={IMAGE_URL} focalPoint={focalPoint} onChange={setFocalPoint} />

examples/controlled/src/playground.module.css

@@ -36,7 +36,6 @@ h2 {
   gap: 1rem;
   width: 100%;
   height: 100%;
-  max-width: 40vw;
 }
 
 .portrait-image {

examples/styled/README.md

@@ -0,0 +1,122 @@
+# Styled
+
+This example shows how to provide styles to the image focal point component.
+
+## How to use
+
+Import the library styles and the component. Use it with minimal properties:
+
+```jsx
+import '@lemoncode/react-image-focal-point/style.css';
+import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
+
+const App = () => {
+  return (
+    <ImageFocalPoint
+       src="your-image-src"
+       onClick={(newFocalPoint) => {
+         // Whatever you want to do when the user clicks on the image
+       }}
+     />
+  );
+}
+
+```
+
+Create a css file and provide some styles to the root component:
+
+_app.css_
+
+```css
+.image-focal-point {
+  width: 500px;
+  height: 500px;
+}
+
+```
+
+Use it:
+
+```diff
+import '@lemoncode/react-image-focal-point/style.css';
+import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
++ import './app.css';
+
+const App = () => {
+  return (
+    <ImageFocalPoint
++      className="image-focal-point"
+       src="your-image-src"
+       onClick={(newFocalPoint) => {
+         // Whatever you want to do when the user clicks on the image
+       }}
+     />
+  );
+}
+
+```
+
+You can also provide styles to the image and the focal point:
+
+_app.css_
+
+```diff
+.image-focal-point {
+  width: 500px;
+  height: 500px;
+}
+
++ .image {
++   border-radius: 10px;
++ }
+
++ .focal-point {
++   background-color: rgba(255, 0, 0, 0.4);
++ }
+
+```
+
+Use it:
+
+```diff
+import '@lemoncode/react-image-focal-point/style.css';
+import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
+import './app.css';
+
+const App = () => {
+  return (
+    <ImageFocalPoint
+-      className="image-focal-point"
++      classes={{
++        root: 'image-focal-point',
++        image: 'image',
++        focalPoint: 'focal-point',
++      }}
+       src="your-image-src"
+       onClick={(newFocalPoint) => {
+         // Whatever you want to do when the user clicks on the image
+       }}
+     />
+  );
+}
+
+```
+
+> Note: You can also provide the root styles directly to the classes object instead of using the className prop.
+
+<a target="_blank" href="https://stackblitz.com/github/Lemoncode/react-image-focal-point/tree/main/examples/styled">
+  <img
+    src="https://developer.stackblitz.com/img/open_in_stackblitz.svg"
+    alt="Edit on StackBlitz"
+    title="Edit on StackBlitz"
+    height="36"
+  />
+</a> <a target="_blank" href="https://codesandbox.io/s/github/Lemoncode/react-image-focal-point/tree/main/examples/styled">
+  <img
+    src="https://codesandbox.io/static/img/play-codesandbox.svg"
+    alt="Edit on StackBlitz"
+    title="Edit on StackBlitz"
+    height="36"
+    />
+  </a>
+

examples/styled/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Styled</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

examples/styled/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "styled-example",
+  "scripts": {
+    "start": "vite --open"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Lemoncode/react-image-focal-point.git"
+  },
+  "author": "Lemoncode",
+  "homepage": "https://github.com/Lemoncode/react-image-focal-point/tree/main/#readme",
+  "devDependencies": {
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^3.1.0",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.1"
+  },
+  "dependencies": {
+    "@lemoncode/react-image-focal-point": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}