Generate cjs build

Author: shettypuneeth

.npmignore

@@ -1 +1,3 @@
-demo/
+demo/
+src/
+playground/

CHANGELOG.md

@@ -0,0 +1,9 @@
+## v0.1.5
+
+-   Generate cjs build using vitejs
+-   Fix styling issues in navigation button
+-   Move React to peer dependency
+
+## v0.1.2
+
+Publish package

package.json

@@ -1,10 +1,12 @@
 {
     "name": "react-card-stack-carousel",
-    "version": "0.1.1",
+    "version": "0.1.5",
     "description": "A tiny configurable carousel component for React",
-    "main": "index.js",
+    "main": "dist/index.js",
     "scripts": {
-        "dev": "vite ./playground"
+        "dev": "vite ./playground",
+        "build": "vite build",
+        "prepublish": "yarn build"
     },
     "repository": {
         "url": "https://github.com/shettypuneeth/react-card-stack-carousel",
@@ -17,16 +19,16 @@
         "card stack"
     ],
     "include": [
-        "src/**/*",
         "styles/**/*",
-        "types/**/*"
+        "types/**/*",
+        "dist/**/*"
     ],
     "types": "types/index.d.ts",
     "author": "Puneeth Shetty",
     "license": "MIT",
-    "dependencies": {
-        "react": "*",
-        "react-dom": "*"
+    "peerDependencies": {
+        "react": ">16",
+        "react-dom": ">16"
     },
     "devDependencies": {
         "@vitejs/plugin-react": "^4.2.1",

playground/styles.css

@@ -1,3 +1,7 @@
+body * {
+    box-sizing: border-box;
+}
+
 body {
     background-color: #0f172a;
     width: 100vw;

styles/styles.css

@@ -22,8 +22,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 15px;
-    height: 15px;
+    width: 30px;
+    height: 30px;
     border-radius: 50%;
     margin: 0 5px;
     padding: 8px;

vite.config.js

@@ -0,0 +1,23 @@
+// generate vite config for react component prod build
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+    plugins: [react()],
+    build: {
+        lib: {
+            entry: "./index.js",
+            name: "react-card-stack-carousel",
+            fileName: "index",
+            formats: ["cjs"],
+        },
+        rollupOptions: {
+            external: ["react"],
+            output: {
+                globals: {
+                    react: "React",
+                },
+            },
+        },
+    },
+});