@getopenpay/openpay-js-react 0.0.1 → 0.0.2-beta.1

package/lib/hooks/use-openpay-elements.ts

@@ -1,12 +0,0 @@
-import { useContext } from 'react';
-import { ElementsContextValue, ElementsContext } from './context';
-
-export const useOpenPayElements = (): ElementsContextValue => {
-  const context = useContext(ElementsContext);
-  if (!context) {
-    throw new Error('useOpenPayElements must be used within an OpenPayElementsProvider');
-  }
-  return context;
-};
-
-export default useOpenPayElements;

package/lib/index.ts

@@ -1,16 +0,0 @@
-import useOpenPayElements from './hooks/use-openpay-elements';
-import ElementsForm from './components/form';
-import CardCvcElement from './components/card-cvc';
-import CardElement from './components/card';
-import CardExpiryElement from './components/card-expiry';
-import CardNumberElement from './components/card-number';
-
-
-export {
-  useOpenPayElements,
-  ElementsForm,
-  CardCvcElement,
-  CardElement,
-  CardExpiryElement,
-  CardNumberElement,
-};

package/lib/utils/constants.ts

@@ -1 +0,0 @@
-export const FRAME_BASE_URL = import.meta.env.VITE_CDE_BASE_URL ?? 'http://localhost:3030';

package/lib/utils/element.ts

@@ -1,5 +0,0 @@
-import { type ElementStyle } from './style';
-
-export type ElementProps = {
-  styles?: ElementStyle;
-}

package/lib/utils/event.ts

@@ -1,66 +0,0 @@
-import { z } from 'zod';
-import { v4 as uuidv4 } from 'uuid';
-import { FRAME_BASE_URL } from './constants';
-
-/**
- * Start of common event stuff
- * Don't forget to update in app-cde:frontend/utils/elements/event.ts also!
- */
-
-const EVENT_PREFIX = 'op-elements';
-
-export enum ElementEventType {
-  LOADED = `${EVENT_PREFIX}-loaded`,
-  VALIDATION_ERROR = `${EVENT_PREFIX}-validation-error`,
-  BLUR = `${EVENT_PREFIX}-blur`,
-  FOCUS = `${EVENT_PREFIX}-focus`,
-  CHANGE = `${EVENT_PREFIX}-change`,
-  RESIZE = `${EVENT_PREFIX}-resize`,
-}
-
-export const ElementEventSchema = z.object({
-  type: z.nativeEnum(ElementEventType),
-  payload: z.object({}).catchall(z.string()),
-  nonce: z.string(),
-  formId: z.string(),
-  elementId: z.string(),
-});
-export type ElementEvent = z.infer<typeof ElementEventSchema>;
-
-export const parseEventPayload = (eventData: object): ElementEvent => {
-  try {
-    return ElementEventSchema.parse(eventData);
-  } catch (error) {
-    console.error('Error parsing event payload:', eventData, error);
-    throw error;
-  }
-};
-
-/**
- * End of common event stuff
- */
-
-export const emitEvent = (
-  frame: HTMLIFrameElement,
-  formId: string,
-  elementId: string,
-  type: ElementEventType,
-  payload: Record<string, string>
-) => {
-  const target = frame.contentWindow;
-  if (!target) {
-    console.error('[form] Cannot emit event, no contentWindow found:', frame);
-    return;
-  }
-
-  const event: ElementEvent = {
-    type,
-    formId,
-    elementId,
-    payload,
-    nonce: uuidv4(),
-  };
-
-  console.log(`[form] Emitting event ${type} from parent form ${formId} to child element ${elementId}:`, event);
-  target.postMessage(JSON.stringify(event), FRAME_BASE_URL);
-};

package/lib/utils/style.ts

@@ -1,17 +0,0 @@
-import { z } from 'zod';
-
-const ElementStyleSchema = z.object({
-  backgroundColor: z.string().optional(),
-  color: z.string().optional(),
-  fontFamily: z.string().optional(),
-  fontSize: z.string().optional(),
-  fontWeight: z.string().optional(),
-  margin: z.string().optional(),
-  padding: z.string().optional(),
-});
-export type ElementStyle = z.infer<typeof ElementStyleSchema>;
-
-export const convertStylesToQueryString = (styles: ElementStyle): string => {
-  const serializedStyles = encodeURIComponent(JSON.stringify(styles));
-  return `styles=${serializedStyles}`;
-};

package/lib/vite-env.d.ts

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

package/ngrok.example.yml

@@ -1,6 +0,0 @@
-version: "2"
-authtoken: <YOUR_AUTH_TOKEN> 
-tunnels:
-  openpay-client:
-    addr: 3032 
-    proto: http

package/playwright.config.ts

@@ -1,37 +0,0 @@
-import { defineConfig, devices } from '@playwright/test';
-
-const BASE_URL = process.env.BASE_URL || 'http://localhost:3032';
-
-console.log('BASE_URL:', BASE_URL);
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-export default defineConfig({
-  testDir: './tests',
-  fullyParallel: true,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : 4,
-  reporter: 'html',
-  use: {
-    baseURL: BASE_URL,
-    extraHTTPHeaders: {
-      // Skip browser warning of ngrok
-      'ngrok-skip-browser-warning': 'true',
-    },
-    trace: 'on-first-retry',
-    headless: !process.env.HEADFULL,
-  },
-
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-  ],
-  webServer: {
-    command: 'cd example && make dev',
-    port: 3032,
-    reuseExistingServer: !process.env.CI,
-  },
-});

package/tests/card-cvc.test.ts

@@ -1,68 +0,0 @@
-import { test, expect } from '@playwright/test';
-import { CARD_CVC_INPUT_SELECTOR, ERROR_MESSAGE_SELECTOR, INVALID_CVC_MESSAGE, invalidCVCNumbers, validCVCNumbers } from './constants';
-
-const IFRAME_SELECTOR = 'iframe[name=card-cvc-element]';
-const INPUT_SELECTOR = CARD_CVC_INPUT_SELECTOR;
-const PAGE_PATH = '/elements/card-cvc';
-
-test.describe('Card CVC element', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(PAGE_PATH);
-  });
-
-  test('should render card cvc element', async ({ page }) => {
-    const element = page.locator(IFRAME_SELECTOR);
-    await expect(element).toBeVisible();
-  });
-
-  test('should be able to focus on card cvc input', async ({ page }) => {
-    const iframe = page.frameLocator(IFRAME_SELECTOR);
-    const element = iframe.locator(INPUT_SELECTOR).first();
-    await element.focus();
-    await expect(element).toBeFocused();
-  });
-
-  test('should be able to fill card cvc input', async ({ page }) => {
-    const iframe = page.frameLocator(IFRAME_SELECTOR);
-    const element = iframe.locator(INPUT_SELECTOR).first();
-    await element.fill('123');
-    await expect(element).toHaveValue('123');
-  });
-
-  test('should be able to input only valid number', async ({ page }) => {
-    const iframe = page.frameLocator(IFRAME_SELECTOR);
-    const clientFrameErrorMessage = page.locator(ERROR_MESSAGE_SELECTOR).first();
-
-    const cardCVC = iframe.locator(INPUT_SELECTOR).first();
-    await cardCVC.fill('asdf');
-
-    await expect(cardCVC).toHaveAttribute('aria-invalid', 'true');
-    await expect(clientFrameErrorMessage).toHaveText(INVALID_CVC_MESSAGE);
-  });
-
-  invalidCVCNumbers.forEach(async (cvc) => {
-    test(`should raise validation error when card cvc is invalid: [input:${cvc}]`, async ({ page }) => {
-      const iframe = page.frameLocator(IFRAME_SELECTOR);
-      const clientFrameErrorMessage = page.locator(ERROR_MESSAGE_SELECTOR).first();
-
-      const element = iframe.locator(INPUT_SELECTOR).first();
-      await element.fill(cvc);
-      await expect(element).toHaveAttribute('aria-invalid', 'true');
-      await expect(clientFrameErrorMessage).toHaveText(INVALID_CVC_MESSAGE);
-    });
-  });
-
-  validCVCNumbers.forEach(async (cvc) => {
-    test(`should not raise validation error when card cvc is valid: [input:${cvc}]`, async ({ page }) => {
-      const iframe = page.frameLocator(IFRAME_SELECTOR);
-      const clientFrameErrorMessage = page.locator(ERROR_MESSAGE_SELECTOR).first();
-
-      const element = iframe.locator(INPUT_SELECTOR).first();
-      await element.fill(cvc);
-      // CVC should be truncated to max 4 characters
-      await expect(element).toHaveValue(cvc.replace(/\D/g, '').slice(0, 4));
-      await expect(element).not.toHaveAttribute('aria-invalid');
-      await expect(clientFrameErrorMessage).toHaveText('');
-    });
-  });
-});

package/tests/card-element.test.ts

@@ -1,113 +0,0 @@
-import { test, expect } from '@playwright/test';
-import {
-  CARD_CVC_INPUT_SELECTOR,
-  CARD_EXPIRY_INPUT_SELECTOR,
-  CARD_NUMBER_INPUT_SELECTOR,
-  cardElementTestCases,
-  ERROR_MESSAGE_SELECTOR,
-  INVALID_CVC_MESSAGE,
-  INVALID_EXPIRY_MESSAGE,
-  INVALID_NUMBER_MESSAGE,
-} from './constants';
-
-const IFRAME_SELECTOR = 'iframe[name=card-element]';
-const PAGE_PATH = '/elements/card';
-
-test.describe('Card element', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(PAGE_PATH);
-  });
-
-  test('should render card element', async ({ page }) => {
-    const cardElement = page.locator(IFRAME_SELECTOR);
-    await expect(cardElement).toBeVisible();
-  });
-
-  test('should contain all card elements', async ({ page }) => {
-    const iframe = page.frameLocator(IFRAME_SELECTOR);
-    const cardNumber = iframe.locator(CARD_NUMBER_INPUT_SELECTOR).first();
-    const cardExpiry = iframe.locator(CARD_EXPIRY_INPUT_SELECTOR).first();
-    const cardCvc = iframe.locator(CARD_CVC_INPUT_SELECTOR).first();
-    await expect(cardNumber).toBeVisible();
-    await expect(cardExpiry).toBeVisible();
-    await expect(cardCvc).toBeVisible();
-  });
-
-  test('should be able to focus on all elements', async ({ page }) => {
-    const iframe = page.frameLocator(IFRAME_SELECTOR);
-    const cardNumber = iframe.locator(CARD_NUMBER_INPUT_SELECTOR).first();
-    const cardExpiry = iframe.locator(CARD_EXPIRY_INPUT_SELECTOR).first();
-    const cardCvc = iframe.locator(CARD_CVC_INPUT_SELECTOR).first();
-
-    await cardNumber.focus();
-    await expect(cardNumber).toBeFocused();
-
-    await cardExpiry.focus();
-    await expect(cardExpiry).toBeFocused();
-
-    await cardCvc.focus();
-    await expect(cardCvc).toBeFocused();
-  });
-
-  test('should be able to change focus with keyboard tab key', async ({ page }) => {
-    const iframe = page.frameLocator(IFRAME_SELECTOR);
-    const cardNumber = iframe.locator(CARD_NUMBER_INPUT_SELECTOR).first();
-    const cardExpiry = iframe.locator(CARD_EXPIRY_INPUT_SELECTOR).first();
-    const cardCvc = iframe.locator(CARD_CVC_INPUT_SELECTOR).first();
-
-    await cardNumber.focus();
-    await expect(cardNumber).toBeFocused();
-
-    await page.keyboard.press('Tab');
-    await expect(cardExpiry).toBeFocused();
-
-    await page.keyboard.press('Tab');
-    await expect(cardCvc).toBeFocused();
-  });
-
-  cardElementTestCases.forEach((testCase, idx) => {
-    test(`should validate card number, expiry and cvc fields [test-case:${idx + 1}] `, async ({ page }) => {
-      const iframe = page.frameLocator(IFRAME_SELECTOR);
-      const clientFrameErrorMessage = page.locator(ERROR_MESSAGE_SELECTOR);
-
-      const cardNumber = iframe.locator(CARD_NUMBER_INPUT_SELECTOR).first();
-      const cardExpiry = iframe.locator(CARD_EXPIRY_INPUT_SELECTOR).first();
-      const cardCvc = iframe.locator(CARD_CVC_INPUT_SELECTOR).first();
-
-      await cardNumber.fill(testCase.cardNumber);
-      await cardExpiry.fill(testCase.cardExpiry);
-      await cardCvc.fill(testCase.cardCvc);
-
-      if (testCase.expected.cardNumber) {
-        await expect(cardNumber).not.toHaveAttribute('aria-invalid');
-      } else {
-        await expect(cardNumber).toHaveAttribute('aria-invalid', 'true');
-      }
-
-      if (testCase.expected.cardExpiry) {
-        await expect(cardExpiry).not.toHaveAttribute('aria-invalid');
-      } else {
-        await expect(cardExpiry).toHaveAttribute('aria-invalid', 'true');
-      }
-
-      if (testCase.expected.cardCvc) {
-        await expect(cardCvc).not.toHaveAttribute('aria-invalid');
-      } else {
-        await expect(cardCvc).toHaveAttribute('aria-invalid', 'true');
-      }
-
-      if (!testCase.expected.cardCvc) {
-        await expect(clientFrameErrorMessage).toContainText(INVALID_CVC_MESSAGE);
-      }
-      if (!testCase.expected.cardExpiry) {
-        await expect(clientFrameErrorMessage).toContainText(INVALID_EXPIRY_MESSAGE);
-      }
-      if (!testCase.expected.cardNumber) {
-        await expect(clientFrameErrorMessage).toContainText(INVALID_NUMBER_MESSAGE);
-      }
-      if (testCase.expected.cardNumber && testCase.expected.cardExpiry && testCase.expected.cardCvc) {
-        await expect(clientFrameErrorMessage).toHaveText('');
-      }
-    });
-  });
-});

package/tests/card-expiry.test.ts

@@ -1,61 +0,0 @@
-import { test, expect } from '@playwright/test';
-import {
-  CARD_EXPIRY_INPUT_SELECTOR,
-  ERROR_MESSAGE_SELECTOR,
-  INVALID_EXPIRY_MESSAGE,
-  invalidExpiryDates,
-  validExpiryDates,
-} from './constants';
-
-const IFRAME_SELECTOR = 'iframe[name=card-expiry-element]';
-const INPUT_SELECTOR = CARD_EXPIRY_INPUT_SELECTOR;
-const PAGE_PATH = '/elements/card-expiry';
-
-test.describe('Card expiry element', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(PAGE_PATH);
-  });
-
-  test('should render card expiry element', async ({ page }) => {
-    const element = page.locator(IFRAME_SELECTOR);
-    await expect(element).toBeVisible();
-  });
-
-  test('should be able to focus on card expiry', async ({ page }) => {
-    const iframe = page.frameLocator(IFRAME_SELECTOR);
-    const element = iframe.locator(INPUT_SELECTOR).first();
-    await element.focus();
-    await expect(element).toBeFocused();
-  });
-
-  test('should be able to fill card expiry', async ({ page }) => {
-    const iframe = page.frameLocator(IFRAME_SELECTOR);
-    const element = iframe.locator(INPUT_SELECTOR).first();
-    await element.fill('042027');
-    await expect(element).toHaveValue('04/2027');
-  });
-
-  invalidExpiryDates.forEach(async (expiryDate) => {
-    test(`should raise validation error when card expiry is invalid: [input:${expiryDate}]`, async ({ page }) => {
-      const iframe = page.frameLocator(IFRAME_SELECTOR);
-      const clientFrameErrorMessage = page.locator(ERROR_MESSAGE_SELECTOR).first();
-
-      const cardExpiry = iframe.locator(INPUT_SELECTOR).first();
-      await cardExpiry.fill(expiryDate);
-      await expect(cardExpiry).toHaveAttribute('aria-invalid', 'true');
-      await expect(clientFrameErrorMessage).toHaveText(INVALID_EXPIRY_MESSAGE);
-    });
-  });
-
-  validExpiryDates.forEach(async (expiryDate) => {
-    test(`should not raise validation error when card expiry is valid: [input:${expiryDate}]`, async ({ page }) => {
-      const iframe = page.frameLocator(IFRAME_SELECTOR);
-      const clientFrameErrorMessage = page.locator(ERROR_MESSAGE_SELECTOR).first();
-
-      const cardExpiry = iframe.locator(INPUT_SELECTOR).first();
-      await cardExpiry.fill(expiryDate);
-      await expect(cardExpiry).not.toHaveAttribute('aria-invalid');
-      await expect(clientFrameErrorMessage).toHaveText('');
-    });
-  });
-});

package/tests/card-number.test.ts

@@ -1,61 +0,0 @@
-import { test, expect } from '@playwright/test';
-import {
-  CARD_NUMBER_INPUT_SELECTOR,
-  ERROR_MESSAGE_SELECTOR,
-  INVALID_NUMBER_MESSAGE,
-  invalidCardNumbers,
-  validCardNumbers,
-} from './constants';
-
-const IFRAME_SELECTOR = 'iframe[name=card-number-element]';
-const INPUT_SELECTOR = CARD_NUMBER_INPUT_SELECTOR;
-const PAGE_PATH = '/elements/card-number';
-
-test.describe('Card number element', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(PAGE_PATH);
-  });
-
-  test('should render card number element', async ({ page }) => {
-    const element = page.locator(IFRAME_SELECTOR);
-    await expect(element).toBeVisible();
-  });
-
-  test('should be able to focus on card number', async ({ page }) => {
-    const iframe = page.frameLocator(IFRAME_SELECTOR);
-    const element = iframe.locator(INPUT_SELECTOR).first();
-    await element.focus();
-    await expect(element).toBeFocused();
-  });
-
-  test('should be able to fill card number', async ({ page }) => {
-    const iframe = page.frameLocator(IFRAME_SELECTOR);
-    const element = iframe.locator(INPUT_SELECTOR).first();
-    await element.fill('4242424242424242');
-    await expect(element).toHaveValue('4242 4242 4242 4242');
-  });
-
-  invalidCardNumbers.forEach(async (cardNumber) => {
-    test(`should raise validation error when card expiry is invalid: [input:${cardNumber}]`, async ({ page }) => {
-      const iframe = page.frameLocator(IFRAME_SELECTOR);
-      const clientFrameErrorMessage = page.locator(ERROR_MESSAGE_SELECTOR).first();
-
-      const element = iframe.locator(INPUT_SELECTOR).first();
-      await element.fill(cardNumber);
-      await expect(element).toHaveAttribute('aria-invalid', 'true');
-      await expect(clientFrameErrorMessage).toHaveText(INVALID_NUMBER_MESSAGE);
-    });
-  });
-
-  validCardNumbers.forEach(async (cardNumber) => {
-    test(`should not raise validation error when card number is valid: [input:${cardNumber}]`, async ({ page }) => {
-      const iframe = page.frameLocator(IFRAME_SELECTOR);
-      const clientFrameErrorMessage = page.locator(ERROR_MESSAGE_SELECTOR).first();
-
-      const element = iframe.locator(INPUT_SELECTOR).first();
-      await element.fill(cardNumber);
-      await expect(element).not.toHaveAttribute('aria-invalid');
-      await expect(clientFrameErrorMessage).toHaveText('');
-    });
-  });
-});

package/tests/constants.ts

@@ -1,97 +0,0 @@
-export const INVALID_CVC_MESSAGE = 'Invalid CVV/CVC';
-export const INVALID_EXPIRY_MESSAGE = 'Invalid card expiry';
-export const INVALID_NUMBER_MESSAGE = 'Invalid card number';
-
-export const ERROR_MESSAGE_SELECTOR = '[data-testid=error-message]';
-
-export const CARD_NUMBER_INPUT_SELECTOR = 'input[name=cardNumber]';
-export const CARD_EXPIRY_INPUT_SELECTOR = 'input[name=cardExpiry]';
-export const CARD_CVC_INPUT_SELECTOR = 'input[name=cardCvc]';
-
-export const cardElementTestCases = [
-  {
-    cardNumber: '4242424242424241',
-    cardExpiry: '12/2020',
-    cardCvc: '123',
-    expected: {
-      cardNumber: false,
-      cardExpiry: false,
-      cardCvc: true,
-    },
-  },
-  {
-    cardNumber: '4242424242424242',
-    cardExpiry: '12/2021',
-    cardCvc: '123',
-    expected: {
-      cardNumber: true,
-      cardExpiry: false,
-      cardCvc: true,
-    },
-  },
-  {
-    cardNumber: '4242424242424242',
-    cardExpiry: '12/2022',
-    cardCvc: '1234',
-    expected: {
-      cardNumber: true,
-      cardExpiry: false,
-      cardCvc: true,
-    },
-  },
-  {
-    cardNumber: '5555 5555 5555 6666',
-    cardExpiry: '12/2022',
-    cardCvc: '12',
-    expected: {
-      cardNumber: false,
-      cardExpiry: false,
-      cardCvc: false,
-    },
-  },
-  {
-    cardNumber: '371449a635398431',
-    cardExpiry: '12/2022',
-    cardCvc: '123',
-    expected: {
-      cardNumber: false,
-      cardExpiry: false,
-      cardCvc: true,
-    },
-  },
-  {
-    cardNumber: '5523 3657 4787 2301',
-    cardExpiry: '042027',
-    cardCvc: '987',
-    expected: {
-      cardNumber: true,
-      cardExpiry: true,
-      cardCvc: true,
-    },
-  },
-  {
-    cardNumber: '4587517354648608',
-    cardExpiry: '09/2026',
-    cardCvc: '087',
-    expected: {
-      cardNumber: true,
-      cardExpiry: true,
-      cardCvc: true,
-    },
-  },
-];
-
-export const invalidCardNumbers = ['4242424242424241', '5555 5555 5555 6666', '371449a635398431', '37144-963539-8431'];
-export const validCardNumbers = [
-  '4443 2338 3330 3641',
-  '4242424242424242',
-  '5523 3657 4787 2301',
-  '3671 5815 4264 223xxx',
-  '4587517354648608',
-];
-
-export const invalidExpiryDates = ['12/2020', '12/2021', '12/2022', '122023', '13/2025', '12/202', '1220', '12/2', '12/', '12', '1'];
-export const validExpiryDates = ['12/2024', '12/2025', '122026', '082027'];
-
-export const validCVCNumbers = ['123', '1234', '111', '12345', '123456', '123aaa', '1234aaa'];
-export const invalidCVCNumbers = ['32ee', 'aaaa', 'e12', '1e1', '1', '12', '24ee4'];

package/tsconfig.build.json

@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.build.tsbuildinfo",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "declaration": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["lib"]
-}

package/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.build.json"
-    },
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
-}

package/tsconfig.node.json

@@ -1,13 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "noEmit": true
-  },
-  "include": ["vite.config.ts"]
-}

package/vite.config.ts

@@ -1,36 +0,0 @@
-import { defineConfig } from 'vite'
-import { resolve } from 'path'
-import react from '@vitejs/plugin-react'
-import dts from 'vite-plugin-dts'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  esbuild: {
-    drop: process.env.NODE_ENV === 'development' ? [] : ['console', 'debugger'],
-  },
-  build: {
-    copyPublicDir: false,
-    lib: {
-      entry: resolve(__dirname, 'lib/index.ts'),
-      formats: ['es'],
-    },
-    rollupOptions: {
-      external: ['react', 'react-dom', 'react/jsx-runtime'],
-      output: {
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
-        },
-        assetFileNames: 'assets/[name][extname]',
-        entryFileNames: '[name].js',
-      },
-    },
-  },
-  plugins: [
-    react(),
-    dts({
-      rollupTypes: true,
-      tsconfigPath: resolve(__dirname, 'tsconfig.build.json'),
-    }),
-  ],
-});