closeio · 3imed-jaberi · Dec 1, 2022
diff --git a/.babelrc b/.babelrc
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/.eslintrc b/.eslintrc
@@ -1,11 +1,3 @@
 {
-  "parser": "babel-eslint",
-  "extends": ["prettier", "prettier/react"],
-  "env": {
-    "es6": true
-  },
-  "plugins": ["prettier", "react", "react-hooks"],
-  "parserOptions": {
-    "sourceType": "module"
-  }
+  "extends": ["react-app", "react-app/jest"]
 }
diff --git a/.prettierrc b/.prettierrc
@@ -1,4 +1,6 @@
 {
+  "printWidth": 100,
+  "semi": true,
   "singleQuote": true,
   "trailingComma": "all"
 }
diff --git a/example/.gitignore b/example/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/example/README.md b/example/README.md
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>react-custom-scroller</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/example/package.json b/example/package.json
@@ -4,20 +4,21 @@
   "version": "0.0.0",
   "license": "MIT",
   "private": true,
-  "dependencies": {
-    "react-custom-scroller": "./..",
-    "react-scripts": "^3.2.0"
-  },
+  "type": "module",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
     "prepare": "yarn build"
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not op_mini all"
-  ]
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "@vitejs/plugin-react": "^2.2.0",
+    "vite": "^3.2.3"
+  }
 }
diff --git a/example/public/index.html b/example/public/index.html
diff --git a/example/public/manifest.json b/example/public/manifest.json
diff --git a/example/public/vite.svg b/example/public/vite.svg
diff --git a/example/src/App.js → example/src/App.jsx b/example/src/App.js → example/src/App.jsx
diff --git a/example/src/Example.js b/example/src/Example.js
diff --git a/example/src/Example.jsx b/example/src/Example.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+// react-custom-scroller latest version
+import { CustomScroller } from '../../dist';
+
+import styles from './Example.module.css';
+
+export default function Example() {
+  return (
+    <CustomScroller className={styles.scroller} innerClassName={styles.content}>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+        accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+        veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+      </p>
+      <p>
+        Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
+        consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
+        est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
+        numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut
+        enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi
+        ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
+        voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
+        voluptas nulla pariatur?
+      </p>
+      <p>
+        But I must explain to you how all this mistaken idea of denouncing pleasure and praising
+        pain was born and I will give you a complete account of the system, and expound the actual
+        teachings of the great explorer of the truth, the master-builder of human happiness. No one
+        rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who
+        do not know how to pursue pleasure rationally encounter consequences that are extremely
+        painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself,
+        because it is pain, but because occasionally circumstances occur in which toil and pain can
+        procure him some great pleasure. To take a trivial example, which of us ever undertakes
+        laborious physical exercise, except to obtain some advantage from it? But who has any right
+        to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences,
+        or one who avoids a pain that produces no resultant pleasure?
+      </p>
+    </CustomScroller>
+  );
+}
diff --git a/example/src/index.js b/example/src/index.js
diff --git a/example/src/index.css → example/src/main.css b/example/src/index.css → example/src/main.css
diff --git a/example/src/main.jsx b/example/src/main.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+// react-custom-scroller latest version
+import '../../dist/index.css';
+
+import App from './App';
+import './main.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/example/vite.config.js b/example/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});