feat(Forms): Extension (beta) for simplified implementation of web fo…

…rms through tailored functionality for layout and data handling (#2420) ## Summary This is an extension to the base components of Eufemia for data input, display and layout surrounding data input/display. ## Details For more information about the architecture and idea behind how these components are structured, I would recommend reading the documentation for the extension that is added to the portal in the PR. Both in the base extension page (`/uilib/extensions/deposit/`), the provided demos there, as well as the base pages of each group of components (like `/uilib/extensions/deposit/DataInput/`) and each component page. For more detailed questions or discussions, please contact me on Slack. <img width="2015" alt="Screenshot 2023-06-01 at 14 24 28" src="https://github.com/dnbexperience/eufemia/assets/2526740/b7ce2b07-db7e-4479-9088-93f77a4c0dba"> ## Test plan  --------- Co-authored-by: Henrik Haugberg <[email protected]> Co-authored-by: Tobias Høegh <[email protected]> Co-authored-by: -l <[email protected]>
dnbexperience · Aug 17, 2023 · 74700c0 · 74700c0 · vercel · Aug 17, 2023
1 parent d8cfb1c
commit 74700c0
Show file tree

Hide file tree

Showing 437 changed files with 15,589 additions and 21 deletions.
diff --git a/packages/dnb-design-system-portal/package.json b/packages/dnb-design-system-portal/package.json
@@ -55,6 +55,7 @@
     "@babel/node": "7.22.5",
     "@emotion/cache": "11.11.0",
     "@playwright/test": "1.35.1",
+    "@types/json-schema": "7.0.12",
     "@types/react": "18.2.13",
     "@types/react-dom": "18.2.6",
     "@typescript-eslint/parser": "5.60.0",

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms.mdx
@@ -0,0 +1,20 @@
+---
+title: 'Forms'
+description: 'Reusable components for data input, data display and surrounding layout for simplified user interface creation in React, built on top of base Eufemia components.'
+showTabs: true
+status: 'beta'
+order: 2
+tabs:
+  - title: Info
+    key: /uilib/extensions/forms/info
+  - title: Demos
+    key: /uilib/extensions/forms/demos
+  - title: Case demo 1
+    key: /uilib/extensions/forms/casedemo1
+---
+
+import Info from 'Docs/uilib/extensions/forms/info'
+import Demos from 'Docs/uilib/extensions/forms/demos'
+
+<Info />
+<Demos />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/DataContext.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/DataContext.mdx
@@ -0,0 +1,16 @@
+---
+title: 'DataContext'
+order: 0
+showTabs: true
+tabs:
+  - title: Info
+    key: '/info'
+  - title: Components
+    key: '/components'
+---
+
+import Info from 'Docs/uilib/extensions/forms/DataContext/info'
+import Components from 'Docs/uilib/extensions/forms/DataContext/components'
+
+<Info />
+<Components />
diff --git a/...ges/dnb-design-system-portal/src/docs/uilib/extensions/forms/DataContext/At.mdx b/...ges/dnb-design-system-portal/src/docs/uilib/extensions/forms/DataContext/At.mdx
@@ -0,0 +1,20 @@
+---
+title: 'At'
+description: '`DataContext.At` makes it possible to dig into a data set to set a pointer as the root for sub components, as well as iterate array-data'
+showTabs: true
+tabs:
+  - title: Info
+    key: '/info'
+  - title: Demos
+    key: '/demos'
+  - title: Properties
+    key: '/properties'
+---
+
+import Info from 'Docs/uilib/extensions/forms/DataContext/At/info'
+import Demos from 'Docs/uilib/extensions/forms/DataContext/At/demos'
+import Properties from 'Docs/uilib/extensions/forms/DataContext/At/properties'
+
+<Info />
+<Demos />
+<Properties />
diff --git a/...ages/dnb-design-system-portal/src/docs/uilib/extensions/forms/DataContext/At/Examples.tsx b/...ages/dnb-design-system-portal/src/docs/uilib/extensions/forms/DataContext/At/Examples.tsx
@@ -0,0 +1,56 @@
+import ComponentBox from '../../../../../../shared/tags/ComponentBox'
+import {
+  DataContext,
+  Field,
+  Value,
+} from '@dnb/eufemia/src/extensions/forms'
+
+export const Path = () => {
+  return (
+    <ComponentBox scope={{ DataContext, Field }}>
+      <DataContext.Provider
+        data={{
+          foo: {
+            one: 1,
+            two: 2,
+          },
+          bar: 'Bar',
+        }}
+      >
+        <DataContext.At path="/foo">
+          <Field.Number path="/one" label="One" />
+          <Field.Number path="/two" label="Two" />
+        </DataContext.At>
+      </DataContext.Provider>
+    </ComponentBox>
+  )
+}
+
+export const IteratePath = () => {
+  return (
+    <ComponentBox scope={{ DataContext, Field, Value }}>
+      <DataContext.Provider
+        data={{
+          list: [
+            {
+              title: 'Object 1',
+            },
+            {
+              title: 'Object 2',
+            },
+          ],
+          bar: 'Bar',
+        }}
+        onChange={(data) => console.log('onChange', data)}
+        onPathChange={(path, value) =>
+          console.log('onPathChange', path, value)
+        }
+      >
+        <DataContext.At path="/list" iterate>
+          <Value.String path="/title" label="Title" />
+          <Field.String path="/title" label="Title" />
+        </DataContext.At>
+      </DataContext.Provider>
+    </ComponentBox>
+  )
+}
diff --git a/...b-design-system-portal/src/docs/uilib/extensions/forms/DataContext/At/demos.mdx b/...b-design-system-portal/src/docs/uilib/extensions/forms/DataContext/At/demos.mdx
@@ -0,0 +1,15 @@
+---
+showTabs: true
+---
+
+import * as Examples from './Examples'
+
+## Demos
+
+### At path
+
+<Examples.Path />
+
+### Iterate path
+
+<Examples.IteratePath />
diff --git a/...nb-design-system-portal/src/docs/uilib/extensions/forms/DataContext/At/info.mdx b/...nb-design-system-portal/src/docs/uilib/extensions/forms/DataContext/At/info.mdx
@@ -0,0 +1,7 @@
+---
+showTabs: true
+---
+
+## Description
+
+`DataContext.At` makes it possible to dig into a data set to set a pointer as the root for sub components, as well as iterate array-data.
diff --git a/...ign-system-portal/src/docs/uilib/extensions/forms/DataContext/At/properties.mdx b/...ign-system-portal/src/docs/uilib/extensions/forms/DataContext/At/properties.mdx
@@ -0,0 +1,11 @@
+---
+showTabs: true
+---
+
+## Properties
+
+| Property   | Type         | Description                                                                                                                                                   |
+| ---------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` | `React.Node` | _(optional)_ Features with given path as root for the DataContext.                                                                                            |
+| `path`     | `string`     | _(optional)_ JSON Pointer path to where in the outer DataContext source to point at.                                                                          |
+| `iterate`  | `boolean`    | _(optional)_ True to iterate elements at given path based on the source data, including the index in the outer path, instead of just rendering children once. |
diff --git a/...nb-design-system-portal/src/docs/uilib/extensions/forms/DataContext/Context.mdx b/...nb-design-system-portal/src/docs/uilib/extensions/forms/DataContext/Context.mdx
@@ -0,0 +1,11 @@
+---
+title: 'Context'
+description: 'The context object used in `DataContext.Provider`.'
+showTabs: false
+---
+
+# DataContext.Context
+
+## Description
+
+The main context for [DataContext.Provider](/uilib/extensions/forms/DataContext/Provider) which the [Field](/uilib/extensions/forms/Field/) and [Value](/uilib/extensions/forms/Value/) components connect to (optional) for sources and callbacks when it is present. It can be used for creating custom components in similar ways.
diff --git a/...s/dnb-design-system-portal/src/docs/uilib/extensions/forms/DataContext/ListComponents.tsx b/...s/dnb-design-system-portal/src/docs/uilib/extensions/forms/DataContext/ListComponents.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import { useStaticQuery, graphql } from 'gatsby'
+import ListSummaryFromEdges from '../../../../../shared/parts/ListSummaryFromEdges'
+
+export default function ListComponents() {
+  const {
+    allMdx: { edges },
+  } = useStaticQuery(graphql`
+    {
+      allMdx(
+        filter: {
+          frontmatter: {
+            title: { ne: null, nin: "Fragments" }
+            draft: { ne: true }
+          }
+          internal: {
+            contentFilePath: {
+              glob: "**/uilib/extensions/forms/DataContext/**/*"
+            }
+          }
+        }
+        sort: [
+          { frontmatter: { order: ASC } }
+          { frontmatter: { title: ASC } }
+        ]
+      ) {
+        edges {
+          node {
+            fields {
+              slug
+            }
+            frontmatter {
+              title
+              description
+            }
+          }
+        }
+      }
+    }
+  `)
+
+  return <ListSummaryFromEdges edges={edges} />
+}
diff --git a/...b-design-system-portal/src/docs/uilib/extensions/forms/DataContext/Provider.mdx b/...b-design-system-portal/src/docs/uilib/extensions/forms/DataContext/Provider.mdx
@@ -0,0 +1,24 @@
+---
+title: 'Provider'
+description: '`DataContext.Provider` is the context provider that has to wrap the features if components of Field and Value is to be used with a common source instead of distributing values and events individually.'
+showTabs: true
+tabs:
+  - title: Info
+    key: '/info'
+  - title: Demos
+    key: '/demos'
+  - title: Properties
+    key: '/properties'
+  - title: Events
+    key: '/events'
+---
+
+import Info from 'Docs/uilib/extensions/forms/DataContext/Provider/info'
+import Demos from 'Docs/uilib/extensions/forms/DataContext/Provider/demos'
+import Properties from 'Docs/uilib/extensions/forms/DataContext/Provider/properties'
+import Events from 'Docs/uilib/extensions/forms/DataContext/Provider/events'
+
+<Info />
+<Demos />
+<Properties />
+<Events />