Misc changes (#12)

* add omit helper method * replace lodash/omit with our version * build as umd and remove lodash dep * set axios in output globals * set tsconfig typeroots and module resolution * disable eslint react-hooks/exhaustive-deps rule * remove parser from prettier config * set yarn resolutions and add rollup copy plugin * implement VoucherifyValidate widget * add base test setup for sdk * remove typeroots from tsconfig.build * run github lint action with yarn lifecycle scripts * use actions/setup-node@v2 * set react-widget as public * add changesets
voucherifyio · Jan 8, 2021 · 1036e5d · 1036e5d
1 parent 3e5fd6d
commit 1036e5d
Show file tree

Hide file tree

Showing 32 changed files with 1,724 additions and 700 deletions.
diff --git a/.changeset/green-trees-sin.md b/.changeset/green-trees-sin.md
@@ -0,0 +1,5 @@
+---
+'@voucherify/react-widget': patch
+---
+
+Implement VoucherifyValidate
diff --git a/.changeset/red-beds-shop.md b/.changeset/red-beds-shop.md
@@ -0,0 +1,5 @@
+---
+'@voucherify/sdk': patch
+---
+
+Generate UMD bundle
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -20,6 +20,7 @@ module.exports = {
 		},
 	},
 	rules: {
+		'react-hooks/exhaustive-deps': 'off',
 		'@typescript-eslint/consistent-type-assertions': 'off',
 		'@typescript-eslint/no-redeclare': 'off',
 		'@typescript-eslint/explicit-member-accessibility': [

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -10,15 +10,15 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
-          version: 14.x
+          node-version: 14.x
 
       - name: Cache Yarn Dependencies
         uses: c-hive/gha-yarn-cache@v1
 
       - name: Install Dependencies
-        run: yarn install --frozen-lockfile --ignore-scripts
+        run: yarn install --frozen-lockfile
 
       - name: Lint TypeScript and eslint
         run: yarn lint
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -18,7 +18,7 @@ jobs:
           fetch-depth: 100
 
       - name: Setup Node.js 14.x And npm Org
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: 14.x
           registry-url: "https://registry.npmjs.org"

diff --git a/.prettierrc.js b/.prettierrc.js
@@ -7,5 +7,4 @@ module.exports = {
 	useTabs: true,
 	endOfLine: 'lf',
 	arrowParens: 'avoid',
-	parser: 'typescript',
 }
diff --git a/package.json b/package.json
@@ -50,9 +50,17 @@
 		"eslint-plugin-react-hooks": "4.2.0",
 		"lerna": "3.22.1",
 		"prettier": "2.2.1",
+		"rollup-plugin-copy": "^3.3.0",
 		"source-map-support": "0.5.19",
 		"tsdx": "0.14.1",
 		"typedoc": "0.20.12",
 		"typescript": "4.1.3"
+	},
+	"resolutions": {
+		"**/@typescript-eslint/eslint-plugin": "4.11.1",
+		"**/@typescript-eslint/parser": "4.11.1",
+		"**/jest": "26.6.3",
+		"**/ts-jest": "26.4.4",
+		"**/typescript": "4.1.3"
 	}
 }
diff --git a/packages/react-widget/examples/with-react.html b/packages/react-widget/examples/with-react.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<link rel="stylesheet" type="text/css" href="./voucherify.css" />
+	</head>
+
+	<body>
+		<div id="voucher-validate"></div>
+
+		<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
+		<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
+		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+		<script type="text/javascript" src="./voucherifysdk.umd.production.min.js"></script>
+		<script type="text/javascript" src="../dist/voucherifywidget.umd.development.js"></script>
+		<script type="text/javascript">
+			const React = window.React
+			const reactDom = window.ReactDOM
+
+			reactDom.render(
+				React.createElement(VoucherifyWidget.VoucherifyValidate, {
+					clientApplicationId: '011240bf-d5fc-4ef1-9e82-11eb68c43bf5',
+					clientSecretKey: '9e2230c5-71fb-460a-91c6-fbee64707a20',
+					textPlaceholder: 'e.g. Testing7fjWdr',
+					amount: true,
+					onValidated: function(response) {
+						console.log('Do something with response:', response)
+					},
+					onError: function (error) {
+						console.error('Do something with error', error)
+					}
+				}),
+				document.querySelector('#voucher-validate'),
+			)
+		</script>
+	</body>
+</html>
diff --git a/packages/react-widget/package.json b/packages/react-widget/package.json
@@ -1,7 +1,6 @@
 {
 	"name": "@voucherify/react-widget",
 	"version": "0.0.4",
-	"private": true,
 	"description": "> TODO: description",
 	"author": "Voucherify",
 	"license": "MIT",
@@ -18,21 +17,21 @@
 		"Voucherify"
 	],
 	"sideEffects": false,
-	"main": "dist/index.js",
-	"module": "dist/react-widget.esm.js",
+	"main": "dist/voucherifywidget.umd.production.min.js",
+	"module": "dist/voucherifywidget.esm.js",
 	"typings": "dist/index.d.ts",
 	"files": [
 		"README.md",
 		"dist"
 	],
 	"scripts": {
-		"start": "tsdx watch --tsconfig tsconfig.build.json --verbose --noClean --target browser",
-		"build": "tsdx build --tsconfig tsconfig.build.json --target browser",
+		"start": "tsdx watch --tsconfig tsconfig.build.json --verbose --noClean --target browser --name VoucherifyWidget --format esm,umd",
+		"build": "tsdx build --tsconfig tsconfig.build.json --target browser --name VoucherifyWidget --format esm,umd",
 		"test": "tsdx test",
 		"lint": "yarn lint:ts && yarn lint:eslint",
 		"lint:ts": "tsc --noEmit -p ./tsconfig.build.json",
-		"lint:eslint": "eslint './**/*.{ts,tsx,js,d.ts}'",
-		"lint:eslint:fix": "eslint './**/*.{ts,tsx,js,d.ts}' --fix",
+		"lint:eslint": "eslint './src/**/*.{ts,tsx,js,d.ts}'",
+		"lint:eslint:fix": "eslint './src/**/*.{ts,tsx,js,d.ts}' --fix",
 		"prepublish": "yarn build"
 	},
 	"peerDependencies": {
@@ -43,6 +42,8 @@
 		"@voucherify/sdk": "0.0.4"
 	},
 	"devDependencies": {
-		"@types/react": "^17.0.0"
+		"@types/react": "^17.0.0",
+		"@types/react-dom": "17.0.0",
+		"clsx": "1.1.1"
 	}
 }
diff --git a/packages/react-widget/src/VoucherifyLogo.tsx b/packages/react-widget/src/VoucherifyLogo.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+interface VoucherifyLogoProps {
+	src?: string
+	alt?: string
+}
+
+export function VoucherifyLogo({ src, alt }: VoucherifyLogoProps) {
+	return (
+		<figure className="voucherifyLogo">
+			{src ? (
+				<img className="voucherifyLogo" src={src} alt={alt} />
+			) : (
+				<svg className="voucherifyLogo" viewBox="0 0 46 45">
+					<path
+						fill="currentColor"
+						fill-rule="nonzero"
+						d="M18.494 3.174c2.112 2.131 3.145 4.69 3.145 7.72 0 3.032-1.033 5.59-3.145 7.722-2.112 2.131-4.647 3.173-7.651 3.173-3.004 0-5.539-1.042-7.651-3.173C1.032 16.532 0 13.926 0 10.942s1.033-5.637 3.145-7.768C5.257 1.042 7.839 0 10.843 0c2.957 0 5.539 1.042 7.65 3.174zm-7.651 1.231c-1.784 0-3.286.616-4.553 1.895-1.268 1.279-1.878 2.795-1.878 4.595 0 1.8.61 3.316 1.878 4.594 1.267 1.28 2.77 1.895 4.553 1.895 1.784 0 3.286-.616 4.553-1.895 1.267-1.278 1.877-2.794 1.877-4.594 0-1.8-.61-3.316-1.877-4.595-1.267-1.232-2.77-1.895-4.553-1.895zM34.782 44.574c-3.051-.19-5.54-1.232-7.51-3.221-2.066-2.085-3.145-5.21-3.145-8.195v-.569c0-.852.234-1.468.657-1.942.422-.426.938-.663 1.549-.663.61 0 1.126.237 1.549.663.422.427.657 1.042.657 1.895v.947c.094 1.611.704 3.553 1.877 4.69 1.268 1.279 2.77 1.895 4.553 1.895h.094c1.784 0 3.286-.616 4.553-1.895 1.174-1.137 1.784-3.079 1.878-4.69v-.947c0-.805.235-1.42.657-1.895.422-.426.939-.663 1.549-.663s1.127.237 1.549.663c.422.427.657 1.09.657 1.942v.569c-.047 2.984-1.08 6.063-3.145 8.195-1.971 1.99-4.459 3.079-7.51 3.22h-.47zM6.102 42.916c-.563 0-1.126-.237-1.596-.663-.892-.9-.892-2.321 0-3.174L40.367 2.937c.892-.9 2.3-.9 3.145 0 .892.9.892 2.32 0 3.174L7.698 42.253a2.307 2.307 0 01-1.596.663z"
+					/>
+				</svg>
+			)}
+		</figure>
+	)
+}