From 9c495ecd2f45590657bfc6fb62097f5e860c839b Mon Sep 17 00:00:00 2001 From: cp-dharti-r Date: Wed, 10 Jan 2024 16:10:27 +0530 Subject: [PATCH] Refactor vue file upload, setup ci --- .github/workflows/react-publish.yml | 37 +++++++++++++++++++++++++++ .github/workflows/vue-publish.yml | 37 +++++++++++++++++++++++++++ react/.github/workflows/publish.yml | 21 ---------------- react/package.json | 2 +- vue/.npmignore | 34 ++----------------------- vue/README.md | 8 ++++++ vue/index.html | 2 +- vue/package.json | 9 ++++--- vue/src/{main.ts => index.ts} | 0 vue/vite.config.ts | 39 +++++++++++++++++++---------- 10 files changed, 117 insertions(+), 72 deletions(-) create mode 100644 .github/workflows/react-publish.yml create mode 100644 .github/workflows/vue-publish.yml delete mode 100644 react/.github/workflows/publish.yml rename vue/src/{main.ts => index.ts} (100%) diff --git a/.github/workflows/react-publish.yml b/.github/workflows/react-publish.yml new file mode 100644 index 0000000..c11ab17 --- /dev/null +++ b/.github/workflows/react-publish.yml @@ -0,0 +1,37 @@ +name: Publish React 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: cd react + - run: npm ci + - run: npm run build + + # Check if the version already exists on npm + - name: Check Version Existence + id: check_version + run: | + if npm show @canopassoftware/react-file-upload@1.1.34; then + echo "Version already published. Skipping npm publish." + echo "::set-output name=skip_publish::true" + else + echo "::set-output name=skip_publish::false" + fi + + # Publish only if the version check passed + - name: Publish to npm + if: steps.check_version.outputs.skip_publish != 'true' + run: npm publish --access public + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.github/workflows/vue-publish.yml b/.github/workflows/vue-publish.yml new file mode 100644 index 0000000..8c637ae --- /dev/null +++ b/.github/workflows/vue-publish.yml @@ -0,0 +1,37 @@ +name: Publish Vue 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: cd vue + - run: npm ci + - run: npm run build + + # Check if the version already exists on npm + - name: Check Version Existence + id: check_version + run: | + if npm show @canopassoftware/vue-file-upload@1.0.4; then + echo "Version already published. Skipping npm publish." + echo "::set-output name=skip_publish::true" + else + echo "::set-output name=skip_publish::false" + fi + + # Publish only if the version check passed + - name: Publish to npm + if: steps.check_version.outputs.skip_publish != 'true' + run: npm publish --access public + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/react/.github/workflows/publish.yml b/react/.github/workflows/publish.yml deleted file mode 100644 index bed1e79..0000000 --- a/react/.github/workflows/publish.yml +++ /dev/null @@ -1,21 +0,0 @@ -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 }} diff --git a/react/package.json b/react/package.json index 4895ff2..b42ce81 100644 --- a/react/package.json +++ b/react/package.json @@ -1,6 +1,6 @@ { "name": "@canopassoftware/react-file-upload", - "version": "1.2.0", + "version": "1.1.34", "description": "Show the preview of file and manage files data to upload", "main": "index.umd.js", "repository": { diff --git a/vue/.npmignore b/vue/.npmignore index 01027bf..b343c4a 100644 --- a/vue/.npmignore +++ b/vue/.npmignore @@ -1,32 +1,2 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* -lerna-debug.log* - -node_modules -.DS_Store -/dist/* -!/dist/output.css -!/dist/style.scss -dist-ssr -coverage -*.local - -/cypress/videos/ -/cypress/screenshots/ - -# Editor directories and files -.vscode/* -!.vscode/extensions.json -.idea -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? - -src/assets/style.scss +/* +!/dist \ No newline at end of file diff --git a/vue/README.md b/vue/README.md index 64149d2..042bcf7 100644 --- a/vue/README.md +++ b/vue/README.md @@ -117,6 +117,14 @@ OR 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/dist/style.css" +``` + ### Creating custom UI with file preview - You can customize file uploading UI in `template` block. diff --git a/vue/index.html b/vue/index.html index c714cbe..4e22209 100644 --- a/vue/index.html +++ b/vue/index.html @@ -8,6 +8,6 @@
- + diff --git a/vue/package.json b/vue/package.json index 37754a2..d60d8b6 100644 --- a/vue/package.json +++ b/vue/package.json @@ -1,8 +1,8 @@ { "name": "@canopassoftware/vue-file-upload", - "version": "1.0.4", + "version": "1.0.5", "description": "Show the preview of file and manage files data to upload", - "main": "src/main.ts", + "main": "./dist/index.umd.js", "repository": { "type": "git", "url": "git+https://github.com/canopas/file-upload-web-frontend.git" @@ -22,13 +22,14 @@ "homepage": "https://github.com/canopas/file-upload-web-frontend#readme", "scripts": { "dev": "tailwindcss -i ./src/input.css -o ./dist/output.css && vite", - "build": "vite build && tailwindcss -i ./src/input.css -o ./dist/output.css --minify && cp ./src/assets/style.scss ./dist/style.scss", + "build": "npm run build-css && vite build && npm run build-css", "preview": "vite preview", "build-only": "vite build", "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", "format": "prettier --write src/", - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "build-css": "tailwindcss -i ./src/input.css -o ./dist/output.css --minify && cp ./src/assets/style.scss ./dist/style.scss" }, "dependencies": { "vue": "^3.3.4", diff --git a/vue/src/main.ts b/vue/src/index.ts similarity index 100% rename from vue/src/main.ts rename to vue/src/index.ts diff --git a/vue/vite.config.ts b/vue/vite.config.ts index 5c45e1d..70ee6fa 100644 --- a/vue/vite.config.ts +++ b/vue/vite.config.ts @@ -1,16 +1,29 @@ -import { fileURLToPath, URL } from 'node:url' - -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' +import { defineConfig } from "vite"; +import { resolve } from "path"; +import vue from "@vitejs/plugin-vue"; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [ - vue(), - ], - resolve: { - alias: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } -}) + plugins: [vue()], + build: { + lib: { + // src/indext.ts is where we have exported the component(s) + entry: resolve(__dirname, "src/index.ts"), + name: "@canopassoftware/vue-file-upload", + // the name of the output files when the build is run + fileName: "index", + }, + rollupOptions: { + // make sure to externalize deps that shouldn't be bundled + // into your library + external: ["vue"], + output: { + // Provide global variables to use in the UMD build + // for externalized deps + globals: { + vue: "Vue", + }, + }, + }, + }, +}); \ No newline at end of file