Monorepo and Pure.js lib (#42)

* remove unnecessary tests

* turbo repo setup

* eslint config

* remove unnecessary projs

* update repo name

* update package.jsons

* organize

* setup handler

* added events

* submit

* uupdate token

* remove

* remove ui

* update name

* update configs

* update

* add penpal

* update build tool

* update

* update build process

* update

* update for apple pay g apy

* prepare for release

* release

* version

* update workflows'

* vite single file

* added base url in example

* merge and bump ver

* update

* support for placeholder

* cleanup

* cleanup example

* .

* expose version to window

* update change/blur/foucs events

* update

* refactor

* updates

* update pr

* temp disable workflows

* ver

.github/workflows/alpha-release.yml

@@ -1,39 +1,67 @@
-name: 'Publish alpha release'
+name: 'Publish alpha releases'
 
 on:
   push:
     branches:
       - main
 
 jobs:
-  publish:
-    name: Publish to NPM
+  publish-react:
+    name: Publish React to NPM (Alpha)
     runs-on: ubuntu-latest
-
     steps:
       - uses: actions/checkout@v3
-        with:
-          version: 8
       - uses: actions/setup-node@v3
         with:
           node-version: 22
           registry-url: https://registry.npmjs.org/
 
       - name: Set hash and version variable
-        # To generate unique hashes for each alpha release without having to change version in package.json
         run: |
           echo "COMMIT_HASH=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
           echo "VERSION=$(npm view ./ version)" >> $GITHUB_ENV
           echo "RELEASE_VERSION=$(npm view ./ version)-alpha.$(git rev-parse --short HEAD)" >> $GITHUB_ENV
 
-      - name: Build package
+      - name: Build React package
         run: |
           npm ci
-          npm run build:alpha
+          npm run build:react:alpha
 
-      - name: Publish package
+      - name: Publish React package
+        working-directory: ./packages/react
         run: |
-          npm version ${{ env.RELEASE_VERSION }} --no-git-tag-version
+          npm version ${{ env.VERSION }}-alpha.${{ env.COMMIT_HASH }} --no-git-tag-version
           npm publish --tag alpha --access public
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+
+  publish-vanilla:
+    name: Publish Vanilla to NPM (Alpha)
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 22
+          registry-url: https://registry.npmjs.org/
+
+      - name: Set hash and version variable
+        run: |
+          echo "COMMIT_HASH=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
+          echo "VERSION=$(node -p "require('./packages/vanilla/package.json').version")" >> $GITHUB_ENV
+
+      - name: Build Vanilla package
+        run: echo "Skipping for testing purposes"
+        # run: |
+        #   npm ci
+        #   npm run build:vanilla:alpha
+
+      - name: Publish Vanilla package
+        working-directory: ./packages/vanilla
+        run: |
+          echo "Skipping for testing purposes"
+        # run: |
+        #   npm version ${{ env.RELEASE_VERSION }} --no-git-tag-version
+        #   npm publish --tag alpha --access public
+        # env:
+        #   NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.github/workflows/release.yml

@@ -1,29 +1,26 @@
-name: 'Publish stable release'
+name: 'Publish stable releases'
 
 on:
   release:
     types: [created]
 
 jobs:
-  publish:
-    name: Publish to NPM
+  publish-react:
+    name: Publish React to NPM
     runs-on: ubuntu-latest
-
     steps:
       - uses: actions/checkout@v3
-        with:
-          version: 8
       - uses: actions/setup-node@v3
         with:
           node-version: 22
           registry-url: https://registry.npmjs.org/
 
       - name: Install dependencies
-        run: |
-          npm ci
+        run: npm ci
 
-      - name: Publish package (alpha)
+      - name: Build and publish React package (alpha)
         if: 'github.event.release.prerelease'
+        working-directory: ./packages/react
         run: |
           RELEASE_VERSION=${{ github.ref_name }}
           npm run build:alpha
@@ -33,11 +30,48 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
 
-      - name: Publish package (stable)
+      - name: Build and publish React package (stable)
         if: '!github.event.release.prerelease'
+        working-directory: ./packages/react
         run: |
-          RELEASE_VERSION=$(npm view ./ version)
           npm run build
           npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+
+  publish-vanilla:
+    name: Publish Vanilla to NPM
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 22
+          registry-url: https://registry.npmjs.org/
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build and publish Vanilla package (alpha)
+        if: 'github.event.release.prerelease'
+        working-directory: ./packages/vanilla
+        run: |
+          echo "Skipping for testing purposes"
+        # run: |
+        #   npm run build:alpha
+        #   npm version ${{ github.ref_name }} --no-git-tag-version
+        #   npm publish --tag alpha --access public
+        # env:
+        #   NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+
+      - name: Build and publish Vanilla package (stable)
+        if: '!github.event.release.prerelease'
+        working-directory: ./packages/vanilla
+        run: |
+          echo "Skipping for testing purposes"
+        # run: |
+        #   RELEASE_VERSION=$(npm view ./ version)
+        #   npm run build
+        #   npm publish --access public
+        # env:
+        #   NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -29,3 +29,9 @@ test-results
 playwright-report
 
 ngrok.yml
+
+.turbo
+
+
+# Vite generated temporary files
+*.timestamp-*.mjs

.husky/pre-commit

@@ -1,2 +1 @@
-npm run lint:fix
-cd ./example && npm run lint:fix
+npm run lint:fix

Makefile

@@ -2,10 +2,9 @@
 
 install:
 	npm install
-	cd example && make install
 
 dev:
-	npm run build:dev
+	npm run dev
 
 start: dev
 
@@ -16,25 +15,6 @@ publish: build
 	npm whoami || npm adduser
 	npm publish
 
-run-example:
-	ngrok start --all --config ngrok.yml
-
-integration-test: start-ngrok 
-	sleep 2 && \
-    BASE_URL=$$(curl http://localhost:4040/api/tunnels | jq -r ".tunnels[0].public_url") && \
-	export BASE_URL=$$BASE_URL && \
-	npm run test && \
-	make stop-ngrok
-
-
-start-ngrok:
-	nohup ngrok start --all --config ngrok.yml > /dev/null &
-
-stop-ngrok:
-	@echo "Stopping ngrok..."
-	@pkill ngrok || true
-	@echo "Ngrok stopped."
-
 precommit:
 	npm run lint:fix
 	cd ./example && npm run lint:fix

example/package.json → apps/react-example/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "example",
+  "name": "react-example",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -10,15 +10,18 @@
     "lint:fix": "next lint --fix"
   },
   "dependencies": {
-    "@getopenpay/openpay-js-react": "file:..",
+    "@getopenpay/utils": "*",
     "@stripe/stripe-js": "^4.3.0",
     "classnames": "^2.5.1",
     "fraction.js": "^4.3.7",
     "next": "14.2.5",
     "react": "^18",
+    "@getopenpay/react": "*",
     "react-dom": "^18"
   },
   "devDependencies": {
+    "@getopenpay/eslint-config": "*",
+    "@getopenpay/typescript-config": "*",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

example/src/app/page.tsx → apps/react-example/src/app/page.tsx

@@ -1,12 +1,6 @@
 'use client';
 import { FC, useCallback, useEffect, useState } from 'react';
-import {
-  ElementsForm,
-  CardCvcElement,
-  CardElement,
-  CardNumberElement,
-  CardExpiryElement,
-} from '@getopenpay/openpay-js-react';
+import { ElementsForm, CardCvcElement, CardElement, CardNumberElement, CardExpiryElement } from '@getopenpay/react';
 import FormWrapper from '@/components/form-wrapper';
 import InputField from '@/components/input-field';
 import BillingDetails from '@/components/billing-details';

example/src/components/billing-details.tsx → apps/react-example/src/components/billing-details.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { FieldName } from '@getopenpay/openpay-js-react';
+import { FieldName } from '@getopenpay/react';
 import InputField from './input-field';
 
 interface InputProps {

example/tsconfig.json → apps/react-example/tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -18,9 +22,18 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

apps/react-example/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

apps/vanilla-example/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

apps/vanilla-example/Makefile

@@ -0,0 +1,8 @@
+install:
+	npm i
+
+build:
+	npm run build
+
+dev:
+	npm run dev