add webpack entry point example

nasdan · nasdan · commit 319b41ee75e3 · 2023-02-17T09:31:32.000+01:00
diff --git a/examples/basic-with-apply/public/favicon.ico b/examples/basic-with-apply/public/favicon.ico
diff --git a/examples/basic/public/favicon.ico b/examples/basic/public/favicon.ico
diff --git a/examples/controlled/public/favicon.ico b/examples/controlled/public/favicon.ico
diff --git a/examples/styled/public/favicon.ico b/examples/styled/public/favicon.ico
diff --git a/examples/webpack-entry-point/.babelrc b/examples/webpack-entry-point/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
+}
diff --git a/examples/webpack-entry-point/README.md b/examples/webpack-entry-point/README.md
@@ -0,0 +1,53 @@
+# Webpack entry point
+
+This example is the same as the [basic example](https://github.com/Lemoncode/react-image-focal-point/tree/main/examples/basic), but using the webpack entry point to import the styles from the libray.
+
+## How to apply this feature in your code
+
+Import the library component in your _app_:
+
+```jsx
+import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
+
+const App = () => {
+  return (
+    <ImageFocalPoint
+      src="your-image-src"
+      onChange={newFocalPoint => {
+        // Whatever you want to do when the user clicks on the image
+      }}
+    />
+  );
+};
+```
+
+Import the library styles in your webpack entry point:
+
+```diff
+
+module.exports = {
+  // ...
+  entry: {
+    index: './index.tsx',
++   vendorStyles: ['@lemoncode/react-image-focal-point/style.css'],
+  },
+  // ...
+}
+
+```
+
+<a target="_blank" href="https://stackblitz.com/github/Lemoncode/react-image-focal-point/tree/main/examples/webpack-entry-point">
+  <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/webpack-entry-point">
+  <img
+    src="https://codesandbox.io/static/img/play-codesandbox.svg"
+    alt="Edit on StackBlitz"
+    title="Edit on StackBlitz"
+    height="36"
+    />
+  </a>
diff --git a/examples/webpack-entry-point/env.d.ts b/examples/webpack-entry-point/env.d.ts
@@ -0,0 +1 @@
+declare module '*.css';
diff --git a/examples/webpack-entry-point/index.html b/examples/webpack-entry-point/index.html
@@ -0,0 +1,12 @@
+<!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>Webpack entry point</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/examples/webpack-entry-point/package.json b/examples/webpack-entry-point/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "webpack-entry-point-example",
+  "scripts": {
+    "start": "webpack serve --open --mode development"
+  },
+  "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": {
+    "@babel/cli": "^7.20.7",
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.7.3",
+    "html-webpack-plugin": "^5.5.0",
+    "style-loader": "^3.3.1",
+    "typescript": "^4.9.5",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1"
+  },
+  "dependencies": {
+    "@lemoncode/react-image-focal-point": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}
diff --git a/examples/webpack-entry-point/public/favicon.ico b/examples/webpack-entry-point/public/favicon.ico
diff --git a/examples/webpack-entry-point/public/landscape.jpg b/examples/webpack-entry-point/public/landscape.jpg
diff --git a/examples/webpack-entry-point/src/app.tsx b/examples/webpack-entry-point/src/app.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { ImageFocalPoint, FocalPoint } from '@lemoncode/react-image-focal-point';
+import { Playground } from './playground';
+
+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} />
+    </Playground>
+  );
+};
diff --git a/examples/webpack-entry-point/src/index.tsx b/examples/webpack-entry-point/src/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './app';
+
+const root = createRoot(document.getElementById('root')!);
+
+root.render(<App />);
diff --git a/examples/webpack-entry-point/src/playground.module.css b/examples/webpack-entry-point/src/playground.module.css
@@ -0,0 +1,82 @@
+body {
+  font-family: Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+}
+
+h1,
+h2,
+p {
+  margin: 0;
+}
+
+.root {
+  display: grid;
+  grid-template-areas:
+    'title title'
+    'description description'
+    'focal-point-subtitle result-subtitle'
+    'focal-point result';
+  row-gap: 1rem;
+  column-gap: 10rem;
+  grid-template-columns: auto 1fr;
+}
+
+.title {
+  grid-area: title;
+  font-size: 2rem;
+  font-weight: bold;
+  text-align: center;
+}
+
+.description {
+  grid-area: description;
+  text-align: center;
+}
+
+.focal-point-subtitle {
+  grid-area: focal-point-subtitle;
+  font-size: 1.5rem;
+  font-weight: bold;
+  text-align: center;
+}
+
+.focal-point {
+  grid-area: focal-point;
+}
+
+.result-subtitle {
+  grid-area: result-subtitle;
+  font-size: 1.5rem;
+  font-weight: bold;
+  text-align: center;
+}
+
+.result {
+  grid-area: result;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: 1rem;
+  width: 100%;
+  height: 100%;
+}
+
+.portrait-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  max-width: 300px;
+}
+
+.landscape-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  max-height: 300px;
+}
+
+.square-image {
+  grid-area: square;
+  object-fit: cover;
+  width: 300px;
+  height: 300px;
+}
diff --git a/examples/webpack-entry-point/src/playground.tsx b/examples/webpack-entry-point/src/playground.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { FocalPoint } from '@lemoncode/react-image-focal-point';
+import classes from './playground.module.css';
+
+interface Props {
+  src: string;
+  focalPoint?: FocalPoint;
+  children: React.ReactNode;
+}
+
+export const Playground: React.FC<Props> = props => {
+  const { src, focalPoint, children } = props;
+
+  return (
+    <div className={classes.root}>
+      <h1 className={classes.title}>Webpack entry point</h1>
+      <p className={classes.description}>
+        This example is the same as the basic example, but using the webpack entry point to import the styles from the libray.
+      </p>
+      <h2 className={classes.focalPointSubtitle}>Image focal point</h2>
+      <div className={classes.focalPoint}>{children}</div>
+
+      <h2 className={classes.resultSubtitle}>Example results</h2>
+      <div className={classes.result}>
+        <img
+          src={src}
+          className={classes.portraitImage}
+          style={{ objectPosition: `${focalPoint?.x}% ${focalPoint?.y}%` }}
+        />
+        <img
+          src={src}
+          className={classes.landscapeImage}
+          style={{ objectPosition: `${focalPoint?.x}% ${focalPoint?.y}%` }}
+        />
+        <img
+          src={src}
+          className={classes.squareImage}
+          style={{ objectPosition: `${focalPoint?.x}% ${focalPoint?.y}%` }}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/examples/webpack-entry-point/tsconfig.json b/examples/webpack-entry-point/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "inlineSources": false,
+    "isolatedModules": true,
+    "moduleResolution": "node",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "noImplicitAny": false,
+    "jsx": "react-jsx",
+    "lib": ["ESNext", "DOM"],
+    "module": "ESNext",
+    "target": "ESNext",
+    "baseUrl": "./src"
+  },
+  "include": ["src", "./env.d.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/webpack-entry-point/webpack.config.js b/examples/webpack-entry-point/webpack.config.js
@@ -0,0 +1,52 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const path = require('path');
+
+module.exports = {
+  context: path.resolve(__dirname, 'src'),
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+  },
+  entry: {
+    index: './index.tsx',
+    vendorStyles: ['@lemoncode/react-image-focal-point/style.css'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+      },
+      {
+        test: /\.css$/,
+        include: /\.module\.css$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+              modules: {
+                exportLocalsConvention: 'camelCase',
+                localIdentName: '[path][name]__[local]--[hash:base64:5]',
+                localIdentContext: path.resolve(__dirname, 'src'),
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+        exclude: /\.module\.css$/,
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: '../index.html',
+    }),
+    new CopyWebpackPlugin({ patterns: [{ from: path.resolve(__dirname, 'public'), to: 'assets' }] }),
+  ],
+};
diff --git a/packages/react-image-focal-point/src/image-focal-point.component.tsx b/packages/react-image-focal-point/src/image-focal-point.component.tsx
@@ -24,8 +24,8 @@ export interface ImageFocalPointProps {
   focalPoint?: FocalPoint;
   alt?: string;
   labels?: LabelProps;
-  classes?: ClassesProps;
   className?: string;
+  classes?: ClassesProps;
 }
 
 export const ImageFocalPoint: React.FC<ImageFocalPointProps> = props => {

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]`
	`3`	`+}`