docs(Form.Isolation): add real world examples (#3808)

Co-authored-by: Tobias Høegh <tobias@tujo.no>

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Isolation/Examples.tsx

@@ -1,6 +1,7 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Flex } from '@dnb/eufemia/src'
-import { Field, Form } from '@dnb/eufemia/src/extensions/forms'
+import { Card, Flex, HeightAnimation, Section } from '@dnb/eufemia/src'
+import { Field, Form, Iterate } from '@dnb/eufemia/src/extensions/forms'
+import React from 'react'
 
 export const UsingCommitButton = () => {
   return (
@@ -39,3 +40,172 @@ export const UsingCommitButton = () => {
     </ComponentBox>
   )
 }
+
+export const CommitHandleRef = () => {
+  return (
+    <ComponentBox>
+      {() => {
+        const MyForm = () => {
+          const commitHandleRef = React.useRef(null)
+
+          return (
+            <>
+              <Form.Handler
+                bottom="large"
+                data={{
+                  contactPersons: [{ title: 'Hanne', value: 'hanne' }],
+                }}
+              >
+                <Card stack>
+                  <Form.SubHeading>Ny hovedkontaktperson</Form.SubHeading>
+                  <Field.Selection
+                    variant="radio"
+                    dataPath="/contactPersons"
+                  />
+                  <Form.Isolation
+                    commitHandleRef={commitHandleRef}
+                    transformOnCommit={(isolatedData, handlerData) => {
+                      const value =
+                        isolatedData.newPerson.title.toLowerCase()
+                      const transformedData = {
+                        ...handlerData,
+                        contactPersons: [
+                          ...handlerData.contactPersons,
+                          {
+                            ...isolatedData.newPerson,
+                            value,
+                          },
+                        ],
+                      }
+
+                      return transformedData
+                    }}
+                  >
+                    <Flex.Stack>
+                      <Form.Section path="/newPerson">
+                        <Field.Name.First required path="/title" />
+                      </Form.Section>
+                    </Flex.Stack>
+                  </Form.Isolation>
+                  <Log />
+                </Card>
+              </Form.Handler>
+
+              <button
+                onClick={() => {
+                  commitHandleRef.current()
+                }}
+              >
+                Commit from outside of handler
+              </button>
+            </>
+          )
+        }
+
+        const Log = () => {
+          const { data } = Form.useData()
+          return (
+            <Section
+              element="output"
+              innerSpace
+              backgroundColor="sand-yellow"
+              top
+            >
+              {JSON.stringify(data || {}, null, 4)}
+            </Section>
+          )
+        }
+
+        return <MyForm />
+      }}
+    </ComponentBox>
+  )
+}
+
+export const TransformCommitData = () => {
+  return (
+    <ComponentBox scope={{ Iterate }}>
+      {() => {
+        const MyForm = () => {
+          return (
+            <Form.Handler
+              onChange={console.log}
+              defaultData={{
+                contactPersons: [
+                  { title: 'Hanne', value: 'hanne' },
+                  { title: 'Annen person', value: 'other' },
+                ],
+                mySelection: 'hanne',
+              }}
+            >
+              <Card stack>
+                <Form.SubHeading>
+                  Legg til ny hovedkontaktperson
+                </Form.SubHeading>
+
+                <HeightAnimation>
+                  <Field.Selection
+                    variant="radio"
+                    path="/mySelection"
+                    dataPath="/contactPersons"
+                  />
+                </HeightAnimation>
+
+                <Form.Visibility
+                  visibleWhen={{
+                    path: '/mySelection',
+                    hasValue: 'other',
+                  }}
+                  animate
+                >
+                  <Flex.Stack>
+                    <Form.SubHeading>
+                      Ny hovedkontaktperson
+                    </Form.SubHeading>
+
+                    <Form.Isolation
+                      transformOnCommit={(isolatedData, handlerData) => {
+                        const lastPersonIndex =
+                          handlerData.contactPersons.length - 1
+
+                        return {
+                          ...handlerData,
+                          contactPersons: [
+                            ...handlerData.contactPersons.slice(
+                              0,
+                              lastPersonIndex,
+                            ),
+                            {
+                              ...isolatedData.newPerson,
+                              value:
+                                isolatedData.newPerson.title.toLowerCase(),
+                            },
+                            handlerData.contactPersons[lastPersonIndex],
+                          ],
+                        }
+                      }}
+                      id="my-isolated-area"
+                      onCommit={() => {
+                        Form.clearData('my-isolated-area')
+                      }}
+                    >
+                      <Flex.Stack>
+                        <Form.Section path="/newPerson">
+                          <Field.Name.First required path="/title" />
+                        </Form.Section>
+
+                        <Form.Isolation.CommitButton />
+                      </Flex.Stack>
+                    </Form.Isolation>
+                  </Flex.Stack>
+                </Form.Visibility>
+              </Card>
+            </Form.Handler>
+          )
+        }
+
+        return <MyForm />
+      }}
+    </ComponentBox>
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Isolation/demos.mdx

@@ -7,6 +7,14 @@ import * as Examples from './Examples'
 
 ## Demos
 
+### Transform data on commit
+
+<Examples.TransformCommitData />
+
 ### Using the CommitButton
 
 <Examples.UsingCommitButton />
+
+### Using commitHandleRef
+
+<Examples.CommitHandleRef />