v0.2

packages/dnb-eufemia/src/extensions/forms/Connectors/Bring/index.ts

@@ -0,0 +1 @@
+export * as postalCode from './postalCode'

packages/dnb-eufemia/src/extensions/forms/Connectors/Bring/postalCode.ts

@@ -0,0 +1,121 @@
+import setData from '../../Form/data-context/setData'
+
+export function onChange(apiConfig, connectionConfig) {
+  return async function onChange(value) {
+    const data = await verifyPostalCodeByAPI(value)
+
+    if (connectionConfig?.targetPath) {
+      const dataContext = setData(apiConfig.handlerId)
+      dataContext.update(
+        connectionConfig.targetPath,
+        data.postal_codes[0].city
+      )
+    }
+  }
+}
+
+export function onBlurValidator(apiConfig) {
+  return async function onBlurValidator(value) {
+    console.log('apiConfig', apiConfig)
+
+    const data = await verifyPostalCodeByAPI(value)
+    if (data.postal_codes[0].postal_code !== value) {
+      return new Error('💁‍♂️ Feil i postnummeret')
+    }
+  }
+}
+
+// Mock API response
+async function verifyPostalCodeByAPI(postalCode: string) {
+  // console.log('verifyPostalCodeByAPI', postalCode)
+  console.log('get url', postalCode)
+  await new Promise((resolve) => setTimeout(resolve, 600))
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+
+  const mockData = {
+    city: 'Vollen',
+    county: 'Akershus',
+    latitude: '59.78899739297151',
+    longitude: '10.482494731266165',
+    municipality: 'Asker',
+    municipalityId: '3203',
+    po_box: false,
+    postal_code: '1391',
+  }
+  return { postal_codes: [mockData] }
+
+  // Visit: https://cors-anywhere.herokuapp.com/corsdemo to enable this service
+  const url = `https://cors-anywhere.herokuapp.com/https://api.bring.com/address/api/no/postal-codes/${postalCode}`
+  const response = await fetch(url, {
+    method: 'GET',
+    headers: {
+      Accept: 'application/json',
+      'X-Mybring-API-Uid': '',
+      'X-Mybring-API-Key': '',
+    },
+  })
+
+  return await response.json()
+}
+
+// /**
+//  * This is a part of Eufemia:
+//  */
+// const Connectors = {
+//   BringConnector: {
+//     postalCodeAndCity: (apiConnectionConfig = null) => {
+//       return {
+//         postalCode: {
+//           // onChange: async (value) => {
+//           //   await new Promise((resolve) => setTimeout(resolve, 1000))
+//           // },
+//           onBlurValidator: async (value) => {
+//             const data = await verifyPostalCodeByAPI(value)
+//             if (data.postal_codes[0].postal_code !== value) {
+//               return new Error('💁‍♂️ Feil i postnummeret')
+//             }
+//           },
+//         },
+//         city: {
+//           // onChange: async (value) => {
+//           //   await new Promise((resolve) => setTimeout(resolve, 1000))
+//           // },
+//         },
+//       }
+//     },
+//   },
+// }
+
+// // This is a config for a Bring Plugin
+// const apiConnectionConfig = {
+//   // Optional
+//   connections: {
+//     // Optional
+//     postalCode: {
+//       // Optional
+//       url: ({ postalCode }) =>
+//         `https://api.bring.com/address/api/no/postal-codes/${postalCode}`,
+//       // Optional
+//       // headers: {
+//       //   'X-Mybring-API-Uid': '',
+//       // },
+//     },
+//   },
+//   // Optional
+//   sharedBetweenAllConnections: {
+//     headers: {
+//       'X-Mybring-API-Uid': '',
+//     },
+//   },
+//   // Optional
+//   // fetch: async ({ url }) => {
+//   //   return await fetch(url, {
+//   //     method: 'GET',
+//   //     headers: {
+//   //       Accept: 'application/json',
+//   //       'X-Mybring-API-Uid': '',
+//   //       'X-Mybring-API-Key': '',
+//   //     },
+//   //   })
+//   // },
+// }

packages/dnb-eufemia/src/extensions/forms/Connectors/index.ts

@@ -0,0 +1,15 @@
+export * as Bring from './Bring'
+
+export function createContext<T = unknown>(config: T = null) {
+  const handlerId = {}
+  return {
+    handlerId,
+    withConfig<U>(
+      fn: (config: T, connectionConfig: U) => U,
+      connectionConfig?: U
+    ) {
+      config['handlerId'] = handlerId
+      return fn(config, connectionConfig)
+    },
+  }
+}

packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx

@@ -3,10 +3,9 @@ import classnames from 'classnames'
 import { Props as FieldBlockProps } from '../../FieldBlock'
 import StringField, { Props as StringFieldProps } from '../String'
 import CompositionField from '../Composition'
-import { ConnectorProps, Path } from '../../types'
+import { Path } from '../../types'
 import useTranslation from '../../hooks/useTranslation'
 import useDataValue from '../../hooks/useDataValue'
-import useConnector from '../../hooks/useConnector'
 import { COUNTRY as defaultCountry } from '../../../../shared/defaults'
 import { HelpProps } from '../../../../components/help-button/HelpButtonInline'
 
@@ -23,7 +22,6 @@ export type Props = Pick<
      */
     country?: Path | string
     help?: HelpProps
-    connector?: Record<'postalCode' | 'city', ConnectorProps<string>>
   }
 
 function PostalCodeAndCity(props: Props) {
@@ -36,16 +34,9 @@ function PostalCodeAndCity(props: Props) {
     help,
     width = 'large',
     country = defaultCountry,
-    connector,
     ...fieldBlockProps
   } = props
 
-  const postalCodeConnector = useConnector<string>(
-    connector?.postalCode,
-    props
-  )
-  const cityConnector = useConnector<string>(connector?.city, props)
-
   const {
     pattern: cityPattern,
     className: cityClassName,
@@ -107,8 +98,6 @@ function PostalCodeAndCity(props: Props) {
         mask={postalCodeMask}
         pattern={postalCodePattern}
         placeholder={postalCodePlaceHolder}
-        onChange={postalCodeConnector?.onChange}
-        onBlurValidator={postalCodeConnector?.onBlurValidator}
         errorMessages={useMemo(
           () => ({
             'Field.errorRequired': translations.PostalCode.errorRequired,
@@ -135,8 +124,6 @@ function PostalCodeAndCity(props: Props) {
           cityClassName
         )}
         label={cityLabel ?? translations.City.label}
-        onChange={cityConnector?.onChange}
-        onBlurValidator={cityConnector?.onBlurValidator}
         errorMessages={useMemo(
           () => ({
             'Field.errorRequired': translations.City.errorRequired,

packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/stories/PostalCodeAndCity.stories.tsx

@@ -1,5 +1,4 @@
-import { Field, Form, Value } from '../../..'
-import { Flex } from '../../../../../components'
+import { Connectors, Field, Form, Value } from '../../..'
 
 export default {
   title: 'Eufemia/Extensions/Forms/PostalCodeAndCity',
@@ -52,146 +51,50 @@ export function PostalCodeAndCityCountryCodeSelection() {
   )
 }
 
-/**
- * The idea is to add a new property called  "connector" to every field that can be used with the Bring API.
- * A connector allows a field to both support events like before, but also events from the connector.
- * A connector is essentially a plugin that can be used to add support for APIs like Bring.
- * Eufemia Forms delivers a default connector that devs can use with their own APIs and tokens etc.
- *
- * This is a draft on how we can deliver a flexible Bring API connection.
- * It should be possible to customize / replace:
- *
- * - fetch routine
- * - maybe it always should be defined?
- * - how properties are mapped get and set
- * - API url and headers
- * - add a plugin system, so we can add support for other APIs than Bring
- *
- */
+const { withConfig, handlerId } = Connectors.createContext({
+  foo: 'bar',
+})
 
-/**
- * This is a part of Eufemia:
- */
-const External = {
-  BringConnector: {
-    postalCodeAndCity: (apiConnectionConfig = null) => {
-      return {
-        postalCode: {
-          // onChange: async (value) => {
-          //   await new Promise((resolve) => setTimeout(resolve, 1000))
-          // },
-          onBlurValidator: async (value) => {
-            const data = await verifyPostalCodeByAPI(value)
-            if (data.postal_codes[0].postal_code !== value) {
-              return new Error('💁‍♂️ Feil i postnummeret')
-            }
-          },
-        },
-        city: {
-          // onChange: async (value) => {
-          //   await new Promise((resolve) => setTimeout(resolve, 1000))
-          // },
-        },
-      }
-    },
-  },
-}
+const onBlurValidator = withConfig(
+  Connectors.Bring.postalCode.onBlurValidator
+)
+const onChange = withConfig(Connectors.Bring.postalCode.onChange, {
+  targetPath: '/city',
+})
 
 export function PostalCodeAPI_Draft() {
   return (
-    <Form.Handler defaultData={{ postalCode: '123', city: 'Oslo' }}>
-      {/* <Field.PostalCodeAndCity
-        // import { External } from '@dnb/eufemia/extensions/forms'
-        // connector={External.BringConnector.postalCodeAndCity()}
-        postalCode={{
-          path: '/postalCode',
-          // onChange: async (value) => {
-          //   await new Promise((resolve) => setTimeout(resolve, 1000))
-          //   console.log('onChange', value)
-          // },
-          onBlurValidator: async (value) => {
-            console.log('value', value)
-            await new Promise((resolve) => setTimeout(resolve, 2000))
-            return new Error('💁‍♂️ Feil i postnummeret')
-          },
-          validateInitially: true,
-        }}
-        city={{ path: '/city' }}
-      /> */}
-
-      <Field.PostalCodeAndCity
-        postalCode={{
-          placeholder: '????',
-          onChange: (value) => console.log('postalCode onChange', value),
-        }}
-        city={{
-          placeholder: 'Your city',
-          onChange: (value) => console.log('city onChange', value),
-        }}
-      />
+    <Form.Handler
+      id={handlerId}
+      defaultData={{ postalCode: '1234', city: 'Oslo' }}
+      onSubmit={async (data) => {
+        await new Promise((resolve) => setTimeout(resolve, 3000))
+        console.log('onSubmit', data)
+      }}
+    >
+      <Form.Card>
+        <Field.PostalCodeAndCity
+          postalCode={{
+            path: '/postalCode',
+            // onChange: async (value) => {
+            //   await new Promise((resolve) => setTimeout(resolve, 1000))
+            //   console.log('onChange', value)
+            // },
+            onChange,
+            onBlurValidator,
+            // validateInitially: true,
+          }}
+          city={{
+            path: '/city',
+            onChange: async (value) => {
+              await new Promise((resolve) => setTimeout(resolve, 2000))
+              console.log('onChange', value)
+              return { success: 'saved' }
+            },
+          }}
+        />
+      </Form.Card>
+      <Form.SubmitButton />
     </Form.Handler>
   )
 }
-
-async function verifyPostalCodeByAPI(postalCode: string) {
-  await new Promise((resolve) => setTimeout(resolve, 600))
-
-  const mockData = {
-    city: 'Vollen',
-    county: 'Akershus',
-    latitude: '59.78899739297151',
-    longitude: '10.482494731266165',
-    municipality: 'Asker',
-    municipalityId: '3203',
-    po_box: false,
-    postal_code: '1391',
-  }
-  return { postal_codes: [mockData] }
-
-  // Visit: https://cors-anywhere.herokuapp.com/corsdemo to enable this service
-  const url = `https://cors-anywhere.herokuapp.com/https://api.bring.com/address/api/no/postal-codes/${postalCode}`
-  const response = await fetch(url, {
-    method: 'GET',
-    headers: {
-      Accept: 'application/json',
-      'X-Mybring-API-Uid': '',
-      'X-Mybring-API-Key': '',
-    },
-  })
-
-  return await response.json()
-}
-
-// // This is a config for a Bring Plugin
-// const apiConnectionConfig = {
-//   // Optional
-//   connections: {
-//     // Optional
-//     postalCode: {
-//       // Optional
-//       url: ({ postalCode }) =>
-//         `https://api.bring.com/address/api/no/postal-codes/${postalCode}`,
-//       // Optional
-//       // headers: {
-//       //   'X-Mybring-API-Uid': '',
-//       // },
-//     },
-//   },
-//   // Optional
-//   sharedBetweenAllConnections: {
-//     headers: {
-//       'X-Mybring-API-Uid': '',
-//     },
-//   },
-//   // Optional
-//   // fetch: async ({ url }) => {
-//   //   return await fetch(url, {
-//   //     method: 'GET',
-//   //     headers: {
-//   //       Accept: 'application/json',
-//   //       'X-Mybring-API-Uid': '',
-//   //       'X-Mybring-API-Key': '',
-//   //     },
-//   //   })
-//   // },
-// }