refactor file names and move into components dir

.eslintrc.json

@@ -31,7 +31,8 @@
     },
     "import/resolver": {
       "alias": {
-        "map": [["src", "./src"]]
+        "map": [["src", "./src"]],
+        "extensions": [".ts", ".js", ".jsx", ".json"]
       }
     }
   },

README.md

@@ -176,7 +176,7 @@ class MyGallery extends React.Component {
   - As a prop passed into `ImageGallery` to completely override `_renderThumbInner`, see source for reference
 
 - `renderLeftNav`: Function, custom left nav component
-  - See [`<LeftNav />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/controls/LeftNav.js)
+  - See [`<LeftNav />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/components/controls/LeftNav.js)
   - Use this to render a custom left nav control
   - Args:
     - `onClick` callback that will slide to the previous item
@@ -187,7 +187,7 @@ class MyGallery extends React.Component {
   );
   ```
 - `renderRightNav`: Function, custom right nav component
-  - See [`<RightNav />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/controls/RightNav.js)
+  - See [`<RightNav />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/components/controls/RightNav.js)
   - Use this to render a custom right nav control
   - Args:
     - `onClick` callback that will slide to the next item
@@ -198,7 +198,7 @@ class MyGallery extends React.Component {
   );
   ```
 - `renderPlayPauseButton`: Function, play pause button component
-  - See [`<PlayPause />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/controls/PlayPause.js)
+  - See [`<PlayPause />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/components/controls/PlayPause.js)
   - Use this to render a custom play pause button
   - Args:
     - `onClick` callback that will toggle play/pause
@@ -209,7 +209,7 @@ class MyGallery extends React.Component {
   );
   ```
 - `renderFullscreenButton`: Function, custom fullscreen button component
-  - See [`<Fullscreen />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/controls/Fullscreen.js)
+  - See [`<Fullscreen />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/components/controls/Fullscreen.js)
   - Use this to render a custom fullscreen button
   - Args:
     - `onClick` callback that will toggle fullscreen

example/app.js → example/App.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 
-import ImageGallery from "src/ImageGallery";
+import ImageGallery from "src/components/ImageGallery";
 
 const PREFIX_URL =
   "https://raw.githubusercontent.com/xiaolin/react-image-gallery/master/static/";

src/ImageGallery.js → src/components/ImageGallery.jsx

@@ -6,12 +6,12 @@ import isEqual from "react-fast-compare";
 import ResizeObserver from "resize-observer-polyfill";
 import { LEFT, RIGHT, UP, DOWN } from "react-swipeable";
 import { arrayOf, bool, func, number, oneOf, shape, string } from "prop-types";
-import Item from "src/Item";
-import Fullscreen from "src/controls/Fullscreen";
-import LeftNav from "src/controls/LeftNav";
-import RightNav from "src/controls/RightNav";
-import PlayPause from "src/controls/PlayPause";
-import SwipeWrapper from "src/SwipeWrapper";
+import Item from "src/components/Item";
+import Fullscreen from "src/components/controls/Fullscreen";
+import LeftNav from "src/components/controls/LeftNav";
+import RightNav from "src/components/controls/RightNav";
+import PlayPause from "src/components/controls/PlayPause";
+import SwipeWrapper from "src/components/SwipeWrapper";
 
 const screenChangeEvents = [
   "fullscreenchange",

src/__tests__/ImageGallery.test.js → src/components/ImageGallery.test.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
 
-import ImageGallery from "../ImageGallery";
+import ImageGallery from "./ImageGallery";
 
 describe("<ImageGallery />", () => {
   const defaultProps = {

src/controls/Fullscreen.js → src/components/controls/Fullscreen.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { bool, func } from "prop-types";
-import SVG from "src/SVG";
+import SVG from "src/components/SVG";
 
 const Fullscreen = React.memo(({ isFullscreen, onClick }) => {
   return (

src/controls/LeftNav.js → src/components/controls/LeftNav.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { bool, func } from "prop-types";
-import SVG from "src/SVG";
+import SVG from "src/components/SVG";
 
 const LeftNav = React.memo(({ disabled, onClick }) => {
   return (

src/controls/PlayPause.js → src/components/controls/PlayPause.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { bool, func } from "prop-types";
-import SVG from "src/SVG";
+import SVG from "src/components/SVG";
 
 const PlayPause = React.memo(({ isPlaying, onClick }) => {
   return (

src/controls/RightNav.js → src/components/controls/RightNav.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { bool, func } from "prop-types";
-import SVG from "src/SVG";
+import SVG from "src/components/SVG";
 
 const RightNav = React.memo(({ disabled, onClick }) => {
   return (

webpack.build.js

@@ -1,57 +1,56 @@
-
-const path = require('path');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const RemovePlugin = require('remove-files-webpack-plugin');
+const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const RemovePlugin = require("remove-files-webpack-plugin");
 
 const config = {
-  mode: 'production',
+  mode: "production",
 };
 
 const jsOutput = Object.assign({}, config, {
-  entry: [ './src/ImageGallery.js', ],
+  entry: ["./src/components/ImageGallery.jsx"],
   output: {
-    path: path.resolve(__dirname, 'build'),
-    filename: 'image-gallery.js',
-    library: 'ImageGallery',
-    globalObject: 'this',
-    libraryTarget: 'umd',
+    path: path.resolve(__dirname, "build"),
+    filename: "image-gallery.js",
+    library: "ImageGallery",
+    globalObject: "this",
+    libraryTarget: "umd",
   },
   resolve: {
     alias: {
-      src: path.resolve(__dirname, 'src/'),
+      src: path.resolve(__dirname, "src/"),
     },
-    extensions: ['.js']
+    extensions: [".js", ".jsx"],
   },
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.(js|jsx)$/,
         exclude: /node_modules/,
-        loader: 'babel-loader',
-      }
-    ]
+        loader: "babel-loader",
+      },
+    ],
   },
   externals: {
     // Don't bundle react or react-dom
     react: {
-      commonjs: 'react',
-      commonjs2: 'react',
-      amd: 'react',
-      root: 'React',
+      commonjs: "react",
+      commonjs2: "react",
+      amd: "react",
+      root: "React",
     },
-    'react-dom': {
-      commonjs: 'react-dom',
-      commonjs2: 'react-dom',
-      amd: 'react-dom',
-      root: 'ReactDOM',
+    "react-dom": {
+      commonjs: "react-dom",
+      commonjs2: "react-dom",
+      amd: "react-dom",
+      root: "ReactDOM",
     },
   },
 });
 
 const cssOutput = Object.assign({}, config, {
-  entry: './styles/scss/image-gallery.scss',
+  entry: "./styles/scss/image-gallery.scss",
   output: {
-    path: path.resolve(__dirname, 'styles/css'),
+    path: path.resolve(__dirname, "styles/css"),
   },
   module: {
     rules: [
@@ -60,16 +59,16 @@ const cssOutput = Object.assign({}, config, {
         use: [
           MiniCssExtractPlugin.loader,
           // Translates CSS into CommonJS
-          'css-loader',
+          "css-loader",
           // Compiles Sass to CSS
-          'sass-loader',
+          "sass-loader",
         ],
-      }
-    ]
+      },
+    ],
   },
   plugins: [
     new MiniCssExtractPlugin({
-      filename: 'image-gallery.css',
+      filename: "image-gallery.css",
     }),
     new RemovePlugin({
       /**
@@ -78,36 +77,36 @@ const cssOutput = Object.assign({}, config, {
       after: {
         test: [
           {
-            folder: 'styles/css',
+            folder: "styles/css",
             method: (absoluteItemPath) => {
-              return new RegExp(/\.js$/, 'm').test(absoluteItemPath);
+              return new RegExp(/\.js$/, "m").test(absoluteItemPath);
             },
-          }
-        ]
-      }
+          },
+        ],
+      },
     }),
   ],
 });
 
 const jsDemoOutput = Object.assign({}, config, {
-  entry: [ './example/app.js', ],
+  entry: ["./example/App.jsx"],
   output: {
-    path: path.resolve(__dirname, 'demo'),
-    filename: 'demo.mini.js',
+    path: path.resolve(__dirname, "demo"),
+    filename: "demo.mini.js",
   },
   resolve: {
     alias: {
-      src: path.resolve(__dirname, 'src/'),
+      src: path.resolve(__dirname, "src/"),
     },
-    extensions: ['.js']
+    extensions: [".js", ".jsx"],
   },
   module: {
     rules: [
       {
-        test: /\.js$/,
-        loader: 'babel-loader',
-      }
-    ]
+        test: /\.(js|jsx)$/,
+        loader: "babel-loader",
+      },
+    ],
   },
   plugins: [
     new RemovePlugin({
@@ -117,21 +116,21 @@ const jsDemoOutput = Object.assign({}, config, {
       after: {
         test: [
           {
-            folder: 'demo',
+            folder: "demo",
             method: (absoluteItemPath) => {
               return new RegExp(/\.txt$/).test(absoluteItemPath);
             },
-          }
-        ]
-      }
+          },
+        ],
+      },
     }),
   ],
 });
 
 const cssDemoOutput = Object.assign({}, config, {
-  entry: ['./styles/scss/image-gallery.scss', './example/app.css'],
+  entry: ["./styles/scss/image-gallery.scss", "./example/App.css"],
   output: {
-    path: path.resolve(__dirname, 'demo'),
+    path: path.resolve(__dirname, "demo"),
   },
   module: {
     rules: [
@@ -140,16 +139,16 @@ const cssDemoOutput = Object.assign({}, config, {
         use: [
           MiniCssExtractPlugin.loader,
           // Translates CSS into CommonJS
-          'css-loader',
+          "css-loader",
           // Compiles Sass to CSS
-          'sass-loader',
+          "sass-loader",
         ],
-      }
-    ]
+      },
+    ],
   },
   plugins: [
     new MiniCssExtractPlugin({
-      filename: 'demo.mini.css',
+      filename: "demo.mini.css",
     }),
     new RemovePlugin({
       /**
@@ -158,13 +157,13 @@ const cssDemoOutput = Object.assign({}, config, {
       after: {
         test: [
           {
-            folder: 'demo',
+            folder: "demo",
             method: (absoluteItemPath) => {
               return new RegExp(/\.js$/).test(absoluteItemPath);
             },
-          }
-        ]
-      }
+          },
+        ],
+      },
     }),
   ],
 });

webpack.config.js

@@ -3,8 +3,8 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = {
   entry: [
-    "./example/app.js",
-    "./example/app.css",
+    "./example/App.jsx",
+    "./example/App.css",
     "./styles/scss/image-gallery.scss",
   ],
   output: {
@@ -13,7 +13,7 @@ module.exports = {
     publicPath: "/dist/",
   },
   resolve: {
-    extensions: [".js"],
+    extensions: [".js", ".jsx"],
     alias: {
       src: path.resolve(__dirname, "src/"),
     },