Format docs and refactor readme files

canopas · Jan 11, 2024 · f6f8ccd · f6f8ccd
1 parent f29fb47
commit f6f8ccd
Show file tree

Hide file tree

Showing 28 changed files with 55 additions and 328 deletions.
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -27,5 +27,3 @@ jobs:
           cd react
           npm ci
           npm run lint
-
-  
diff --git a/README.md b/README.md
@@ -97,28 +97,28 @@ We are providing some examples with design. so, you can easily take it and use i
 ### Canvas View
 
 vue - [view code](./vue/examples/CanvasView.vue) <br>
-react - [view code](./react/examples/CanvasView.vue)
+react - [view code](./react/examples/CanvasView.tsx)
 
 <img src="./gifs/canvas-view.gif"/>
 
 ### Square View
 
 vue- [view code](./vue/examples/SquareView.vue) <br>
-react - [view code](./react/examples/SquareView.vue)
+react - [view code](./react/examples/SquareView.tsx)
 
 <img src="./gifs/square-view.gif"/>
 
 ### Horizontal Long Square View
 
 vue - [view code](./vue/examples/LongSquareView.vue) <br>
-react - [view code](./react/examples/LongSquareView.vue)
+react - [view code](./react/examples/LongSquareView.tsx)
 
 <img src="./gifs/long-square-view.gif"/>
 
 ### Circular View
 
 vue - [view code](./vue/examples/RoundView.vue) <br>
-react - [view code](./react/examples/RoundView.vue)
+react - [view code](./react/examples/RoundView.tsx)
 
 <img src="./gifs/round-view.gif"/>
 

diff --git a/react/README.md b/react/README.md
@@ -117,7 +117,7 @@ const {
   MultipleFileUpload,
 } = require("@canopassoftware/react-file-upload");
 
-OR
+OR;
 
 // using esModules
 import {
@@ -131,7 +131,7 @@ import {
 - Use `style.css` for UI by importing like,
 
 ```js
-import "@canopassoftware/react-file-upload/style.css"
+import "@canopassoftware/react-file-upload/style.css";
 ```
 
 ### Creating custom UI with file preview
@@ -246,4 +246,4 @@ return (
     </main>
   );
 }
-```
+```
diff --git a/react/examples/CanvasView.tsx b/react/examples/CanvasView.tsx
@@ -2,7 +2,7 @@
 
 import Image, { StaticImageData } from "next/image";
 import React, { useState } from "react";
-import "@canopassoftware/react-file-upload/style.css"
+import "@canopassoftware/react-file-upload/style.css";
 import {
   SingleFileUpload,
   MultipleFileUpload,

diff --git a/react/examples/LongSquareView.tsx b/react/examples/LongSquareView.tsx
@@ -3,7 +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 "@canopassoftware/react-file-upload/style.css";
 import {
   SingleFileUpload,
   MultipleFileUpload,

diff --git a/react/examples/RoundView.tsx b/react/examples/RoundView.tsx
@@ -3,7 +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 "@canopassoftware/react-file-upload/style.css";
 import {
   SingleFileUpload,
   MultipleFileUpload,

diff --git a/react/examples/SquareView.tsx b/react/examples/SquareView.tsx
@@ -3,7 +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 "@canopassoftware/react-file-upload/style.css";
 import {
   SingleFileUpload,
   MultipleFileUpload,

diff --git a/react/examples/demo/package.json b/react/examples/demo/package.json
@@ -25,4 +25,4 @@
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }
-}
+}
diff --git a/react/examples/demo/src/app/layout.tsx b/react/examples/demo/src/app/layout.tsx
@@ -1,22 +1,22 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import './globals.css'
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/react/examples/demo/src/app/page.tsx b/react/examples/demo/src/app/page.tsx
@@ -2,7 +2,7 @@
 
 import Image, { StaticImageData } from "next/image";
 import React, { useState } from "react";
-import "@canopassoftware/react-file-upload/style.css"
+import "@canopassoftware/react-file-upload/style.css";
 import {
   SingleFileUpload,
   MultipleFileUpload,

diff --git a/react/examples/demo/tailwind.config.ts b/react/examples/demo/tailwind.config.ts
@@ -1,20 +1,20 @@
-import type { Config } from 'tailwindcss'
+import type { Config } from "tailwindcss";
 
 const config: Config = {
   content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
       backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
     },
   },
   plugins: [],
-}
-export default config
+};
+export default config;
diff --git a/react/package.json b/react/package.json
@@ -59,4 +59,4 @@
     "./index.umd.js",
     "./style.css"
   ]
-}
+}
diff --git a/react/tailwind.config.ts b/react/tailwind.config.ts
@@ -1,20 +1,20 @@
-import type { Config } from 'tailwindcss'
+import type { Config } from "tailwindcss";
 
 const config: Config = {
   content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
       backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
     },
   },
   plugins: [],
-}
-export default config
+};
+export default config;
diff --git a/react/tsconfig.json b/react/tsconfig.json
@@ -2,11 +2,7 @@
   "compilerOptions": {
     "outDir": "./dist",
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -25,9 +21,7 @@
       }
     ],
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     }
   },
   "include": [
@@ -39,7 +33,5 @@
     "./src",
     ".next/types/**/*.ts"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }
diff --git a/vue/README.md b/vue/README.md
@@ -110,19 +110,19 @@ To manage and preview files with this library, follow these steps:
 
 ```js
 // using CommonJS
-const { SingleFileUpload, MultipleFileUpload } = require('@canopassoftware/vue-file-upload')
+const { SingleFileUpload, MultipleFileUpload } = require('@canopassoftware/vue-file-upload');
 
 OR
 // using esModules
-import { SingleFileUpload, MultipleFileUpload } from '@canopassoftware/vue-file-upload'
+import { SingleFileUpload, MultipleFileUpload } from '@canopassoftware/vue-file-upload';
 ```
 
 ### Use default CSS
 
 - Use `style.css` for UI by importing like,
 
 ```js
-import "@canopassoftware/vue-file-upload/style.css"
+import '@canopassoftware/vue-file-upload/style.css';
 ```
 
 ### Creating custom UI with file preview

diff --git a/vue/examples/CanvasView.vue b/vue/examples/CanvasView.vue
@@ -117,7 +117,7 @@
 </template>
 
 <script lang="ts">
-import "@canopassoftware/vue-file-upload/style.css"
+import '@canopassoftware/vue-file-upload/style.css'
 import { SingleFileUpload, MultipleFileUpload } from '@canopassoftware/vue-file-upload'
 
 export default {

diff --git a/vue/examples/LongSquareView.vue b/vue/examples/LongSquareView.vue
@@ -95,9 +95,9 @@
 </template>
 
 <script lang="ts">
-import "@canopassoftware/vue-file-upload/style.css"
+import '@canopassoftware/vue-file-upload/style.css'
 import { SingleFileUpload, MultipleFileUpload } from '@canopassoftware/vue-file-upload'
-import placeHolderImage from "../../assets/images/placeholder.png"
+import placeHolderImage from '../../assets/images/placeholder.png'
 
 export default {
   components: {

diff --git a/vue/examples/RoundView.vue b/vue/examples/RoundView.vue
@@ -108,9 +108,9 @@
 </template>
 
 <script lang="ts">
-import "@canopassoftware/vue-file-upload/style.css"
+import '@canopassoftware/vue-file-upload/style.css'
 import { SingleFileUpload, MultipleFileUpload } from '@canopassoftware/vue-file-upload'
-import placeHolderImage from "../../assets/images/placeholder.png"
+import placeHolderImage from '../../assets/images/placeholder.png'
 
 export default {
   components: {

diff --git a/vue/examples/SquareView.vue b/vue/examples/SquareView.vue
@@ -108,9 +108,9 @@
 </template>
 
 <script lang="ts">
-import "@canopassoftware/vue-file-upload/style.css"
+import '@canopassoftware/vue-file-upload/style.css'
 import { SingleFileUpload, MultipleFileUpload } from '@canopassoftware/vue-file-upload'
-import placeHolderImage from "../../assets/images/placeholder.png"
+import placeHolderImage from '../../assets/images/placeholder.png'
 
 export default {
   components: {

diff --git a/vue/examples/demo/src/components/HelloWorld.vue b/vue/examples/demo/src/components/HelloWorld.vue