@mrfylke/contact-form 0.1.25 → 0.1.27

package/README.md

@@ -64,37 +64,65 @@ export default function ContactPage() {
 
 ## API configuration
 
-The package is decoupled from your backend. You supply an `onSubmit` callback; the package defines the payload shape.
+The package is decoupled from your backend. By default, it POSTs to
+`endpoints.submit` (`/api/contact/submit`) with `{ ...state, $slug: slug }`
+in the body — no `onSubmit` needed:
 
 ```ts
-import type { FormSchemaName } from '@mrfylke/contact-form';
+api: {
+  endpoints: {
+    submit: '/api/contact/submit', // Optional, this is the default
+  },
+}
+```
+
+Pair that with `createSubmitRouteHandler` for the route itself — it reads
+`$slug` from the body and forwards the rest to your connector at that path:
+
+```ts
+// app/api/contact/submit/route.ts
+import { createSubmitRouteHandler } from '@mrfylke/contact-form/server';
+
+export const POST = createSubmitRouteHandler({
+  request: (path, init) => fetch(`${process.env.CONNECTOR_URL}${path}`, init),
+});
+```
+
+### Overriding the submit callback
+
+For full control over routing, provide your own `onSubmit` callback instead —
+it receives the form slug and form state:
+
+```ts
+import type { FormSlug } from '@mrfylke/contact-form';
 
 const onSubmit = async (
-  schemaName: FormSchemaName,
+  slug: FormSlug,
   state: Record<string, unknown>,
 ): Promise<Response> => {
   return fetch('/api/contact/submit', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ ...state, formType: schemaName }),
+    body: JSON.stringify({ ...state, formType: slug }),
   });
 };
 ```
 
-`schemaName` is one of: `'ticketControl'` · `'refund'` · `'meansOfTransport'` · `'ticketing'` · `'journeyInfo'`
+See `FormSlug` for the full set of possible values.
 
 ### Routing submissions to different endpoints
 
 ```ts
-const onSubmit = async (schemaName: FormSchemaName, state) => {
-  const endpointMap: Record<FormSchemaName, string> = {
-    ticketControl:     '/api/contact/ticket-control',
-    refund:            '/api/contact/refund',
-    meansOfTransport:  '/api/contact/means-of-transport',
-    ticketing:         '/api/contact/ticketing',
-    journeyInfo:       '/api/contact/journey-info',
+const onSubmit = async (slug: FormSlug, state) => {
+  const endpointMap: Record<FormSlug, string> = {
+    'ticket-control':    '/api/contact/ticket-control',
+    refund:              '/api/contact/refund',
+    'means-of-transport': '/api/contact/means-of-transport',
+    ticketing:           '/api/contact/ticketing',
+    'journey-info':      '/api/contact/journey-info',
+    'lost-property':     '/api/contact/lost-property',
   };
-  return fetch(endpointMap[schemaName], {
+  return fetch(endpointMap[slug], {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(state),

package/lib/ContactFormRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContactFormRoot.d.ts","sourceRoot":"","sources":["../src/ContactFormRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EACL,KAAK,iBAAiB,EAGvB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAEL,KAAK,+BAA+B,EACpC,QAAQ,EACT,MAAM,gBAAgB,CAAC;AAQxB,MAAM,MAAM,oBAAoB,GAAG;IACjC,mEAAmE;IACnE,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,+BAA+B,CAAC;IACvD,sDAAsD;IACtD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,QAAQ,EACR,KAAK,EACL,oBAAoB,EACpB,QAAQ,GACT,EAAE,oBAAoB,qBAqBtB"}
+{"version":3,"file":"ContactFormRoot.d.ts","sourceRoot":"","sources":["../src/ContactFormRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EACL,KAAK,iBAAiB,EAGvB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAEL,KAAK,+BAA+B,EACpC,QAAQ,EACT,MAAM,gBAAgB,CAAC;AAQxB,MAAM,MAAM,oBAAoB,GAAG;IACjC,mEAAmE;IACnE,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,+BAA+B,CAAC;IACvD,sDAAsD;IACtD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,QAAQ,EACR,KAAK,EACL,oBAAoB,EACpB,QAAQ,GACT,EAAE,oBAAoB,qBAsBtB"}

package/lib/ContactFormRoot.js

@@ -16,10 +16,11 @@ function ThemeSync({ children }) {
  * consumers can pass their routes/layout as children.
  */
 function ContactFormRoot({ config, language, theme, translationsOverride, children, }) {
-    // Merge config translations (required) with optional root-level override (override takes precedence)
+    // Merge config translations (optional) with optional root-level override (override takes precedence)
+    const configTranslations = config.translations ?? {};
     const mergedTranslations = translationsOverride
-        ? deepMerge(config.translations, translationsOverride)
-        : config.translations;
+        ? deepMerge(configTranslations, translationsOverride)
+        : configTranslations;
     const mergedConfig = (0, config_1.mergeConfigThemeOverrides)(config);
     return ((0, jsx_runtime_1.jsx)(config_1.ContactFormConfigContext.Provider, { value: mergedConfig, children: (0, jsx_runtime_1.jsx)(theme_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(ThemeSync, { children: (0, jsx_runtime_1.jsx)(translations_1.AppLanguageProvider, { overrides: mergedTranslations, language: language, children: children }) }) }) }));
 }

package/lib/components/icon/generated-icons.d.ts

@@ -1,17 +1,5 @@
 export declare const icons: {
     mono: {
-        "bonus/Star": {
-            relative: string;
-            absolute: string;
-            assetType: string;
-            id: string;
-        };
-        "bonus/StarFill": {
-            relative: string;
-            absolute: string;
-            assetType: string;
-            id: string;
-        };
         "actions/Add": {
             relative: string;
             absolute: string;
@@ -168,6 +156,18 @@ export declare const icons: {
             assetType: string;
             id: string;
         };
+        "bonus/Star": {
+            relative: string;
+            absolute: string;
+            assetType: string;
+            id: string;
+        };
+        "bonus/StarFill": {
+            relative: string;
+            absolute: string;
+            assetType: string;
+            id: string;
+        };
         "devices/Laptop": {
             relative: string;
             absolute: string;
@@ -1140,19 +1140,19 @@ export declare const icons: {
             assetType: string;
             id: string;
         };
-        "ticketing/Travelcard": {
+        "logo/logo": {
             relative: string;
             absolute: string;
             assetType: string;
             id: string;
         };
-        "ticketing/TravelcardOutlined": {
+        "ticketing/Travelcard": {
             relative: string;
             absolute: string;
             assetType: string;
             id: string;
         };
-        "logo/logo": {
+        "ticketing/TravelcardOutlined": {
             relative: string;
             absolute: string;
             assetType: string;
@@ -1618,7 +1618,7 @@ export declare const icons: {
             darkable: boolean;
             id: string;
         };
-        "input/CheckboxChecked": {
+        "map/Map": {
             relative: string;
             absolute: string;
             assetType: string;
@@ -1626,7 +1626,7 @@ export declare const icons: {
             darkable: boolean;
             id: string;
         };
-        "input/CheckboxUnchecked": {
+        "map/MapPin": {
             relative: string;
             absolute: string;
             assetType: string;
@@ -1634,7 +1634,7 @@ export declare const icons: {
             darkable: boolean;
             id: string;
         };
-        "input/RadiobuttonChecked": {
+        "map/Pin": {
             relative: string;
             absolute: string;
             assetType: string;
@@ -1642,7 +1642,7 @@ export declare const icons: {
             darkable: boolean;
             id: string;
         };
-        "input/RadiobuttonUnchecked": {
+        "map/PinInvalid": {
             relative: string;
             absolute: string;
             assetType: string;
@@ -1650,7 +1650,7 @@ export declare const icons: {
             darkable: boolean;
             id: string;
         };
-        "map/Map": {
+        "map/PinValid": {
             relative: string;
             absolute: string;
             assetType: string;
@@ -1658,7 +1658,7 @@ export declare const icons: {
             darkable: boolean;
             id: string;
         };
-        "map/MapPin": {
+        "input/CheckboxChecked": {
             relative: string;
             absolute: string;
             assetType: string;
@@ -1666,7 +1666,7 @@ export declare const icons: {
             darkable: boolean;
             id: string;
         };
-        "map/Pin": {
+        "input/CheckboxUnchecked": {
             relative: string;
             absolute: string;
             assetType: string;
@@ -1674,7 +1674,7 @@ export declare const icons: {
             darkable: boolean;
             id: string;
         };
-        "map/PinInvalid": {
+        "input/RadiobuttonChecked": {
             relative: string;
             absolute: string;
             assetType: string;
@@ -1682,7 +1682,7 @@ export declare const icons: {
             darkable: boolean;
             id: string;
         };
-        "map/PinValid": {
+        "input/RadiobuttonUnchecked": {
             relative: string;
             absolute: string;
             assetType: string;
@@ -1916,7 +1916,7 @@ export declare const icons: {
             darkable: boolean;
             id: string;
         };
-        "token/mobile/Phone": {
+        "token/travelcard/Travelcard": {
             relative: string;
             absolute: string;
             assetType: string;
@@ -1924,7 +1924,7 @@ export declare const icons: {
             darkable: boolean;
             id: string;
         };
-        "token/travelcard/Travelcard": {
+        "token/mobile/Phone": {
             relative: string;
             absolute: string;
             assetType: string;