From 2fd701d89064fa489f92866abe8a807a7398762c Mon Sep 17 00:00:00 2001
From: Yoan Tournade <y@yoantournade.com>
Date: Mon, 6 Mar 2023 19:12:34 +0100
Subject: [PATCH] Add an example CSS (basic) theme (#472)

* Let web target be implied, else it will includes require in react-refresh build

* Add an example theme

* Update theme/basic/README.md

Co-authored-by: AdeleD <adele.delamarche@gmail.com>

* Update theme/basic/README.md

Co-authored-by: AdeleD <adele.delamarche@gmail.com>

---------

Co-authored-by: AdeleD <adele.delamarche@gmail.com>
---
 demo/webpack.config.js         |  2 +-
 theme/basic/README.md          | 30 ++++++++++++++++++++++++++++++
 theme/basic/react-paginate.css | 33 +++++++++++++++++++++++++++++++++
 webpack.config.js              |  5 -----
 4 files changed, 64 insertions(+), 6 deletions(-)
 create mode 100644 theme/basic/README.md
 create mode 100644 theme/basic/react-paginate.css

diff --git a/demo/webpack.config.js b/demo/webpack.config.js
index 41684eb..59063a1 100644
--- a/demo/webpack.config.js
+++ b/demo/webpack.config.js
@@ -12,7 +12,6 @@ const isDevelopment = process.env.NODE_ENV !== 'production';
 console.log(`Webpack demo ${isDevelopment ? 'dev' : 'prod'}`);
 
 module.exports = {
-  target: 'node',
   entry: [
     'webpack-hot-middleware/client',
     path.resolve(dir_demo_js, 'demo.js'),
@@ -35,6 +34,7 @@ module.exports = {
     rules: [
       {
         test: dir_demo_js,
+        // test: /\.js?$/,
         exclude: /node_modules/,
         use: [
           {
diff --git a/theme/basic/README.md b/theme/basic/README.md
new file mode 100644
index 0000000..8deea77
--- /dev/null
+++ b/theme/basic/README.md
@@ -0,0 +1,30 @@
+# Basic CSS theme
+
+## How to use it
+
+Add the `theme/basic/react-paginatte.css` file to your HTML page. For eg., after downloading it and making it available on your server as `/assets/css/react-paginate.css`:
+
+```html
+<link href="/assets/css/react-paginate.css" rel="stylesheet" />
+```
+
+Then load the `ReactPaginate` component by specifying the `className` prop to `react-paginate`. This will add the class to the `<ul>` container:
+
+```javascript
+import ReactPaginate from 'react-paginate';
+
+
+function MyExampleApp() {
+  // Manage offsets, page clicks, etc. ... (See main README.md)
+
+  return (
+    <>
+      <h2>Paginated page</h2>
+      <ReactPaginate
+        className="react-paginate"
+        //  ...
+      />
+    </>
+  );
+}
+```
diff --git a/theme/basic/react-paginate.css b/theme/basic/react-paginate.css
new file mode 100644
index 0000000..7594795
--- /dev/null
+++ b/theme/basic/react-paginate.css
@@ -0,0 +1,33 @@
+ul.react-paginate {
+  margin-bottom: 2rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  list-style-type: none;
+  padding: 0 5rem;
+}
+
+ul.react-paginate li a {
+  border-radius: 7px;
+  padding: 0.1rem 1rem;
+  border: gray 1px solid;
+  cursor: pointer;
+}
+ul.react-paginate li.previous a,
+ul.react-paginate li.next a,
+ul.react-paginate li.break a {
+  border-color: transparent;
+}
+ul.react-paginate li.selected a {
+  background-color: #0366d6;
+  border-color: transparent;
+  color: white;
+  min-width: 32px;
+}
+ul.react-paginate li.disabled a {
+  color: grey;
+}
+ul.react-paginate li.disable,
+ul.react-paginate li.disabled a {
+  cursor: default;
+}
diff --git a/webpack.config.js b/webpack.config.js
index ec441ac..36c7b3a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -23,11 +23,6 @@ const config = {
   },
   module: {
     rules: [
-      // {
-      //   use: 'react-hot-loader/webpack',
-      //   test: dir_js,
-      //   exclude: dir_node_modules,
-      // },
       {
         use: 'babel-loader',
         test: dir_js,