@getopenpay/openpay-js-react 0.0.1-alpha.09717a2

package/.env.development

@@ -0,0 +1 @@
+VITE_CDE_BASE_URL = "http://localhost:3030"

package/.env.production

@@ -0,0 +1 @@
+VITE_CDE_BASE_URL = "https://cde.getopenpay.com"

package/.env.staging

@@ -0,0 +1 @@
+VITE_CDE_BASE_URL = "https://cde.openpaystaging.com"

package/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

package/.github/workflows/alpha-release.yml

@@ -0,0 +1,39 @@
+name: 'Publish alpha release'
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  publish:
+    name: 🚀 Publishing 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: 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
+
+      - name: Build package
+        run: |
+          npm ci
+          npm run build:alpha
+        #    ^ For now to use localhost for cde
+
+      - name: Publish package
+        run: |
+          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}}

package/.github/workflows/release.yml

@@ -0,0 +1,30 @@
+name: 'Publish stable release'
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  publish:
+    name: 🚀 Publishing 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: Build package
+        run: |
+          npm ci
+          npm run build
+
+      - name: Publish package
+        run: |
+          npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/Makefile

@@ -0,0 +1,37 @@
+.PHONY: install dev start build publish
+
+install:
+	npm install
+	cd example && make install
+	npx playwright install --with-deps chromium
+
+dev:
+	npm run build:dev
+
+start: dev
+
+build:
+	npm run build
+
+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."

package/README.md

@@ -0,0 +1,14 @@
+# openpay-js-react
+
+React components for OpenPay.JS
+
+## Development
+
+1. Install dependencies using `make install`
+2. Run `make dev` to start Vite in watch mode
+3. In another terminal, `cd` into the `example` directory and run `make dev` to start the example app
+4. Open [http://localhost:3032](http://localhost:3032) to see the example app
+
+When you make changes to the library, Vite will automatically recompile it and NextJS will automatically reload the page.
+
+If NextJS doesn't reload, you can try manually refreshing the page, or reinstalling the library using `npm install ../` in the `example` directory.

package/dist/index.d.ts

@@ -0,0 +1,64 @@
+import { FC } from 'react';
+import { PropsWithChildren } from 'react';
+import { z } from 'zod';
+
+export declare const CardCvcElement: FC<ElementProps>;
+
+export declare const CardElement: FC<ElementProps>;
+
+export declare const CardExpiryElement: FC<ElementProps>;
+
+export declare const CardNumberElement: FC<ElementProps>;
+
+declare type ElementProps = {
+    styles?: ElementStyle;
+};
+
+declare type ElementsContextValue = {
+    contextId: string;
+    createToken: () => void;
+    dispatchEvent: (event: MessageEvent, frame: HTMLIFrameElement) => void;
+    formHeight: string;
+};
+
+export declare const ElementsForm: FC<ElementsFormProps>;
+
+declare interface ElementsFormProps extends PropsWithChildren {
+    className?: string;
+    onFocus?: (elementId: string) => void;
+    onBlur?: (elementId: string) => void;
+    onChange?: (elementId: string) => void;
+    onValidationError?: (message: string, elementId?: string) => void;
+}
+
+declare type ElementStyle = z.infer<typeof ElementStyleSchema>;
+
+declare const ElementStyleSchema: z.ZodObject<{
+    backgroundColor: z.ZodOptional<z.ZodString>;
+    color: z.ZodOptional<z.ZodString>;
+    fontFamily: z.ZodOptional<z.ZodString>;
+    fontSize: z.ZodOptional<z.ZodString>;
+    fontWeight: z.ZodOptional<z.ZodString>;
+    margin: z.ZodOptional<z.ZodString>;
+    padding: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    backgroundColor?: string | undefined;
+    color?: string | undefined;
+    fontFamily?: string | undefined;
+    fontSize?: string | undefined;
+    fontWeight?: string | undefined;
+    margin?: string | undefined;
+    padding?: string | undefined;
+}, {
+    backgroundColor?: string | undefined;
+    color?: string | undefined;
+    fontFamily?: string | undefined;
+    fontSize?: string | undefined;
+    fontWeight?: string | undefined;
+    margin?: string | undefined;
+    padding?: string | undefined;
+}>;
+
+export declare const useOpenPayElements: () => ElementsContextValue;
+
+export { }