feat(payment-widget): esm

.yarnrc.yml

@@ -13,6 +13,9 @@ packageExtensions:
   '@emotion/utils@*':
     dependencies:
       '@emotion/sheet': '*'
+  '@testing-library/react@*':
+    dependencies:
+      '@testing-library/dom': '*'
 
 pnpEnableEsmLoader: true
 

packages/payment-widget/integration/payment-widget.test.tsx

@@ -1,53 +1,34 @@
-import assert from 'node:assert/strict'
-import { it } from 'node:test'
-import { describe } from 'node:test'
-
-import { Input } from '@atls-ui-parts/input'
-import { Box } from '@atls-ui-parts/layout'
-import { render } from '@testing-library/react'
-import { screen } from '@testing-library/react'
-import React from 'react'
-
-import { LanguagesType } from '../src/index.js'
-import { Widget } from '../src/index.js'
-import { InputWrapper } from '../src/index.js'
-import { ButtonWrapper } from '../src/index.js'
+import 'global-jsdom/register'
+
+import assert                   from 'node:assert/strict'
+import { it }                   from 'node:test'
+import { describe }             from 'node:test'
+
+import { render }               from '@testing-library/react'
+import { fireEvent }            from '@testing-library/react'
+import React                    from 'react'
+
+import { LanguagesType }        from '../src/index.js'
+import { Widget }               from '../src/index.js'
+import { InputWrapper }         from '../src/index.js'
 import { AdditionalFieldsType } from '../src/index.js'
 
 const Form = (
-  <Widget
-    settings={{ storeId: 'tinkoffTest', language: LanguagesType.RUSSIAN }}
-  >
-    <InputWrapper name={AdditionalFieldsType.Name}>
-      {(props) => (
-        <Box flexDirection="column">
-          <Input {...props} placeholder="Name" />
-        </Box>
-      )}
-    </InputWrapper>
-    <InputWrapper name={AdditionalFieldsType.Email}>
-      {(props) => (
-        <Box flexDirection="column">
-          <Input {...props} placeholder="Email" />
-        </Box>
-      )}
-    </InputWrapper>
+  <Widget settings={{ storeId: 'tinkoffTest', language: LanguagesType.RUSSIAN }} amount={1000}>
     <InputWrapper name={AdditionalFieldsType.Phone}>
-      {(props) => (
-        <Box flexDirection="column">
-          <Input {...props} placeholder="Phone" />
-        </Box>
-      )}
+      {(props) => <input {...props} placeholder='Phone' />}
     </InputWrapper>
   </Widget>
 )
 
 describe('Payment Widget', () => {
   it('render', async () => {
-    render(Form)
+    const body = render(Form)
+
+    const button = await body.findByRole('button')
+
+    fireEvent.click(button)
 
-    const button = await screen.findByRole('button')
-    console.debug(button)
-    assert.equal()
+    assert.ok(button.innerHTML)
   })
 })

packages/payment-widget/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@atls/tinkoff-payment-widget",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "license": "BSD-3-Clause",
   "type": "module",
   "main": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
   "files": [
     "dist"
   ],
@@ -27,12 +30,14 @@
     "@emotion/jest": "11.9.4",
     "@emotion/react": "11.9.3",
     "@emotion/styled": "11.9.3",
-    "@testing-library/react": "12.1.2",
+    "@testing-library/react": "16.1.0",
     "@types/node": "22.10.1",
     "@types/react": "18.3.6",
     "@types/react-dom": "18",
     "@types/styled-system": "5.1.16",
     "csstype": "3.1.2",
+    "global-jsdom": "25.0.0",
+    "jsdom": "25.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "styled-system": "5.1.5"
@@ -44,6 +49,14 @@
   },
   "publishConfig": {
     "access": "public",
+    "exports": {
+      "./package.json": "./package.json",
+      ".": {
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
     "main": "dist/index.js",
     "typings": "dist/index.d.ts"
   }

packages/payment-widget/src/interfaces/custom-fields.iterfaces.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 
-import type { Field }     from './fields.interfaces'
+import type { Field }     from './fields.interfaces.js'
 
 export type NameField = Pick<Field, 'name'>
 

packages/payment-widget/src/interfaces/fields.interfaces.ts

@@ -1,9 +1,9 @@
 import type { FormEvent }              from 'react'
 import type { HTMLInputTypeAttribute } from 'react'
 
-import type { AdditionalFieldsType }   from '../enums'
-import type { RequiredFieldsType }     from '../enums'
-import type { DirectionFields }        from './styles.interfaces'
+import type { AdditionalFieldsType }   from '../enums/index.js'
+import type { RequiredFieldsType }     from '../enums/index.js'
+import type { DirectionFields }        from './styles.interfaces.js'
 
 export type FieldsNames = AdditionalFieldsType | RequiredFieldsType
 export type FieldState = Record<FieldsNames, string>

packages/payment-widget/src/interfaces/form.interfaces.ts

@@ -1,10 +1,10 @@
 import type { ReactNode }       from 'react'
 
-import type { NameField }       from './custom-fields.iterfaces'
-import type { Field }           from './fields.interfaces'
-import type { FieldsState }     from './fields.interfaces'
-import type { FieldsValidator } from './fields.interfaces'
-import type { WidgetProps }     from './widget.interfaces'
+import type { NameField }       from './custom-fields.iterfaces.js'
+import type { Field }           from './fields.interfaces.js'
+import type { FieldsState }     from './fields.interfaces.js'
+import type { FieldsValidator } from './fields.interfaces.js'
+import type { WidgetProps }     from './widget.interfaces.js'
 
 export interface FormProps extends WidgetProps {
   useCustomFields: boolean

packages/payment-widget/src/interfaces/receipt.interfaces.ts

@@ -1,7 +1,7 @@
-import type { PaymentMethodType } from '../enums'
-import type { PaymentObjectType } from '../enums'
-import type { TaxType }           from '../enums'
-import type { TaxationType }      from '../enums'
+import type { PaymentMethodType } from '../enums/index.js'
+import type { PaymentObjectType } from '../enums/index.js'
+import type { TaxType }           from '../enums/index.js'
+import type { TaxationType }      from '../enums/index.js'
 
 export interface ReceiptItem {
   Name: string

packages/payment-widget/src/interfaces/settings.interfaces.ts

@@ -1,4 +1,4 @@
-import type { LanguagesType } from '../enums'
+import type { LanguagesType } from '../enums/index.js'
 
 interface AutoPaymentConfig {
   reccurentPayment: boolean

packages/payment-widget/src/interfaces/widget.interfaces.ts

@@ -1,9 +1,9 @@
 import type { ReactNode }       from 'react'
 
-import type { AdditionalField } from './fields.interfaces'
-import type { ReceiptSettings } from './receipt.interfaces'
-import type { Settings }        from './settings.interfaces'
-import type { Styles }          from './styles.interfaces'
+import type { AdditionalField } from './fields.interfaces.js'
+import type { ReceiptSettings } from './receipt.interfaces.js'
+import type { Settings }        from './settings.interfaces.js'
+import type { Styles }          from './styles.interfaces.js'
 
 export interface WidgetProps {
   settings: Settings

packages/payment-widget/src/interfaces/wrappers.interfaces.ts

@@ -1,10 +1,10 @@
 import type { ReactElement }         from 'react'
 
-import type { AdditionalFieldsType } from '../enums'
-import type { ButtonType }           from '../enums'
-import type { RequiredFieldsType }   from '../enums'
-import type { HandleBlurField }      from './fields.interfaces'
-import type { HandleChangeField }    from './fields.interfaces'
+import type { AdditionalFieldsType } from '../enums/index.js'
+import type { ButtonType }           from '../enums/index.js'
+import type { RequiredFieldsType }   from '../enums/index.js'
+import type { HandleBlurField }      from './fields.interfaces.js'
+import type { HandleChangeField }    from './fields.interfaces.js'
 
 interface ChildrenInputProps {
   name: string

packages/payment-widget/src/ui/button/button.component.tsx

@@ -1,16 +1,16 @@
-import type { ButtonProps } from '@atls-ui-parts/button'
-import type { FC }          from 'react'
+import type { ButtonProps }  from '@atls-ui-parts/button'
+import type { FC }           from 'react'
 
-import styled               from '@emotion/styled'
-import { useHover }         from 'react-laag'
-import React                from 'react'
+import { default as styled } from '@emotion/styled'
+import { useHover }          from 'react-laag'
+import React                 from 'react'
 
-import { appearanceStyles } from './button.styles.js'
-import { contentStyles }    from './button.styles.js'
-import { baseStyles }       from './button.styles.js'
-import { shapeStyles }      from './button.styles.js'
+import { appearanceStyles }  from './button.styles.js'
+import { contentStyles }     from './button.styles.js'
+import { baseStyles }        from './button.styles.js'
+import { shapeStyles }       from './button.styles.js'
 
-const ButtonElement = styled('button')<ButtonProps>(
+const ButtonElement = styled.default('button')<ButtonProps>(
   // @ts-expect-error
   baseStyles,
   // eslint-disable-next-line @typescript-eslint/no-unsafe-argument

packages/payment-widget/src/ui/input/input.component.tsx

@@ -20,7 +20,7 @@ import { baseStyles }                        from './input.styles.js'
 import { shapeStyles }                       from './input.styles.js'
 import { transitionStyles }                  from './input.styles.js'
 
-export const InputElement = styled.div<any>(
+export const InputElement = styled.default.div<any>(
   // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
   baseStyles,
   shapeStyles,
@@ -29,7 +29,7 @@ export const InputElement = styled.div<any>(
   layout
 )
 
-const Container = styled.div(({ type }: any) => ({
+const Container = styled.default.div(({ type }: any) => ({
   display: type === 'hidden' ? 'none' : 'flex',
   width: '100%',
   flexDirection: 'column',

packages/payment-widget/src/ui/widget.component.tsx

@@ -47,6 +47,7 @@ export const Widget = ({
   const nameFields = getNameFields(customFields)
 
   return (
+    // @ts-expect-error types mismatch
     <IntlProvider locale={locale} messages={messages[locale]} defaultLocale={LanguagesType.RUSSIAN}>
       <FormProvider
         additionalFields={additionalFields}