Refactor readme.md and remove added configuration for library

README.md

@@ -1,12 +1,12 @@
 # Web File Management with Preview - Fully Customized
 
-A versatile and user-friendly file management system built for vue and react that allows for single and multiple file uploading with a preview feature. It allows you to select files and preview them, returning an array of selected files. It allows customizing design by overriding the style classes.
+A versatile and user-friendly file management system built for Vue and React that allows single and multiple file uploading with a preview feature, returning an array of selected files. It supports custom designs by overriding the style classes.
 
 <img src="./gifs/full.gif"/>
 
 ---
 
-### This repository contains two component library, one for Vue and one for React. Each has its own set of features and information. Explore the individual folders for more details.
+### The library provides support for Vue and React. Each has its own set of features and information. Explore the individual folders for more details.
 
 ## Vue File Upload
 

react/.github/workflows/publish.yml

@@ -0,0 +1,21 @@
+name: Publish Package to npmjs
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm run build
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

react/.gitignore

@@ -38,4 +38,10 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-src/app/style.scss
+# src/app/style.scss
+
+index.mjs
+index.umd.js
+next.svg
+vercel.svg
+style.css

react/.npmignore

@@ -1,42 +1 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-.yarn/install-state.gz
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env*.local
-
-.vscode/*
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
-
-src/app/style.scss
-examples/
-gifs/
+/*

react/README.md

@@ -9,7 +9,6 @@ React file management system built with React, Next.js and TypeScript that allow
 - [Getting Started](#getting-started)
   - [Prerequisites](#prerequisites)
   - [Installation](#installation)
-  - [Configuration](#configuration)
 - [Properties and Events](#properties-and-events)
 - [Usage](#usage)
 
@@ -41,22 +40,6 @@ Using yarn:
 yarn add @canopassoftware/react-file-upload
 ```
 
-### Configuration
-
-- If you face any `loader` or `typescript` realted issue after started using components from library then add this in your config file.
-
-```js
-transpilePackages: ["@canopassoftware/react-file-upload"],
-  webpack: (config) => {
-    config.resolve.extensionAlias = {
-      ".js": [".ts", ".tsx", ".js", ".jsx"],
-      ".mjs": [".mts", ".mjs"],
-      ".cjs": [".cts", ".cjs"],
-  };
-  return config;
-},
-```
-
 Note: we have already configure this in demo project. so, refer it for more information.
 
 ---
@@ -134,14 +117,23 @@ const {
   MultipleFileUpload,
 } = require("@canopassoftware/react-file-upload");
 
-OR;
+OR
+
 // using esModules
 import {
   SingleFileUpload,
   MultipleFileUpload,
 } from "@canopassoftware/react-file-upload";
 ```
 
+### Use default CSS
+
+- Use `style.css` for UI by importing like,
+
+```js
+import "@canopassoftware/react-file-upload/style.css"
+```
+
 ### Creating custom UI with file preview
 
 - You can customize file uploading UI in inner part of component.

react/examples/CanvasView.tsx

@@ -2,6 +2,7 @@
 
 import Image, { StaticImageData } from "next/image";
 import React, { useState } from "react";
+import "@canopassoftware/react-file-upload/style.css"
 import {
   SingleFileUpload,
   MultipleFileUpload,

react/examples/LongSquareView.tsx

@@ -3,6 +3,7 @@
 import Image, { StaticImageData } from "next/image";
 import React, { useState } from "react";
 import placeHolderImg from "../assets/images/placeholder.png";
+import "@canopassoftware/react-file-upload/style.css"
 import {
   SingleFileUpload,
   MultipleFileUpload,

react/examples/RoundView.tsx

@@ -3,6 +3,7 @@
 import Image, { StaticImageData } from "next/image";
 import React, { useState } from "react";
 import placeHolderImg from "../assets/images/placeholder.png";
+import "@canopassoftware/react-file-upload/style.css"
 import {
   SingleFileUpload,
   MultipleFileUpload,

react/examples/SquareView.tsx

@@ -3,6 +3,7 @@
 import Image, { StaticImageData } from "next/image";
 import React, { useState } from "react";
 import placeHolderImg from "../assets/images/placeholder.png";
+import "@canopassoftware/react-file-upload/style.css"
 import {
   SingleFileUpload,
   MultipleFileUpload,

react/examples/demo/next.config.js

@@ -3,15 +3,6 @@ const nextConfig = {
   images: {
     domains: ["picsum.photos"],
   },
-  transpilePackages: ["@canopassoftware/react-file-upload"],
-  webpack: (config) => {
-    config.resolve.extensionAlias = {
-      ".js": [".ts", ".tsx", ".js", ".jsx"],
-      ".mjs": [".mts", ".mjs"],
-      ".cjs": [".cts", ".cjs"],
-    };
-    return config;
-  },
 };
 
 module.exports = nextConfig;