feat: Extension, reusable components for data input, data display and…

… surrounding layout for simplified user interface creation
dnbexperience · Jun 7, 2023 · 24a61d5 · 24a61d5
1 parent 5f5f077
commit 24a61d5
Show file tree

Hide file tree

Showing 361 changed files with 12,475 additions and 3 deletions.
diff --git a/packages/dnb-design-system-portal/package.json b/packages/dnb-design-system-portal/package.json
@@ -42,6 +42,7 @@
     "@emotion/styled": "11.9.3",
     "@mdx-js/mdx": "2.3.0",
     "@mdx-js/react": "2.3.0",
+    "@types/json-schema": "7.0.12",
     "algoliasearch": "4.12.0",
     "classnames": "2.3.1",
     "history": "5.1.0",

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/deposit.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/deposit.mdx
@@ -0,0 +1,15 @@
+---
+title: 'Deposit'
+showTabs: true
+tabs:
+  - title: Info
+    key: /uilib/extensions/deposit/info
+  - title: Demos
+    key: /uilib/extensions/deposit/demos
+---
+
+import DataInputInfo from 'Docs/uilib/extensions/deposit/info'
+import DataInputDemos from 'Docs/uilib/extensions/deposit/demos'
+
+<DataInputInfo />
+<DataInputDemos />
diff --git a/...ages/dnb-design-system-portal/src/docs/uilib/extensions/deposit/DataContext.mdx b/...ages/dnb-design-system-portal/src/docs/uilib/extensions/deposit/DataContext.mdx
@@ -0,0 +1,15 @@
+---
+title: 'DataContext'
+showTabs: true
+tabs:
+  - title: Info
+    key: '/info'
+  - title: Components
+    key: '/components'
+---
+
+import Info from 'Docs/uilib/extensions/deposit/DataContext/info'
+import Components from 'Docs/uilib/extensions/deposit/DataContext/components'
+
+<Info />
+<Components />
diff --git a/...-design-system-portal/src/docs/uilib/extensions/deposit/DataContext/Context.mdx b/...-design-system-portal/src/docs/uilib/extensions/deposit/DataContext/Context.mdx
@@ -0,0 +1,10 @@
+---
+title: 'Context'
+description: 'The context object used in `DataContext.Provider`.'
+showTabs: false
+status: 'new'
+---
+
+# DataContext.Context
+
+The main context for [DataContext.Provider](/uilib/extensions/deposit/DataContext/Provider) which the [DataInput](/uilib/extensions/deposit/DataInput/) and [DataValue](/uilib/extensions/deposit/DataValue/) 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/...dnb-design-system-portal/src/docs/uilib/extensions/deposit/DataContext/ListComponents.tsx b/...dnb-design-system-portal/src/docs/uilib/extensions/deposit/DataContext/ListComponents.tsx
@@ -0,0 +1,33 @@
+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/deposit/DataContext/**/*" } }
+        }
+        sort: { fields: [frontmatter___order, frontmatter___title] }
+      ) {
+        edges {
+          node {
+            fields {
+              slug
+            }
+            frontmatter {
+              title
+              description
+            }
+          }
+        }
+      }
+    }
+  `)
+
+  return <ListSummaryFromEdges edges={edges} />
+}
diff --git a/...design-system-portal/src/docs/uilib/extensions/deposit/DataContext/Provider.mdx b/...design-system-portal/src/docs/uilib/extensions/deposit/DataContext/Provider.mdx
@@ -0,0 +1,25 @@
+---
+title: 'Provider'
+description: '`DataContext.Provider` is the context provider that has to wrap the features if components like DataInput and DataValue is to be used with s common source instead of distributing values and events individually..'
+showTabs: true
+status: 'new'
+tabs:
+  - title: Info
+    key: '/info'
+  - title: Demos
+    key: '/demos'
+  - title: Properties
+    key: '/properties'
+  - title: Events
+    key: '/events'
+---
+
+import Info from 'Docs/uilib/extensions/deposit/DataContext/Provider/info'
+import Demos from 'Docs/uilib/extensions/deposit/DataContext/Provider/demos'
+import Properties from 'Docs/uilib/extensions/deposit/DataContext/Provider/properties'
+import Events from 'Docs/uilib/extensions/deposit/DataContext/Provider/events'
+
+<Info />
+<Demos />
+<Properties />
+<Events />
diff --git a/...-design-system-portal/src/docs/uilib/extensions/deposit/DataContext/Provider/Examples.tsx b/...-design-system-portal/src/docs/uilib/extensions/deposit/DataContext/Provider/Examples.tsx
@@ -0,0 +1,262 @@
+import { JSONSchema7 } from 'json-schema'
+import ComponentBox from '../../../../../../shared/tags/ComponentBox'
+import {
+  DataContext,
+  Layout,
+  DataInput,
+  DataValue,
+} from '@dnb/eufemia/src/extensions/deposit'
+
+export const TestdataSchema: JSONSchema7 = {
+  type: 'object',
+  properties: {
+    requiredString: { type: 'string' },
+    string: { type: 'string', minLength: 3 },
+    number: { type: 'number', minimum: 42 },
+    boolean: { type: 'boolean' },
+    email: { type: 'string' /* , format: 'email'*/ },
+    nested: {
+      type: 'object',
+      properties: {
+        nestedText: { type: 'string' },
+        nestedNumber: { type: 'number', minimum: 50 },
+      },
+    },
+    list: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          itemText: { type: 'string' },
+          itemNumber: { type: 'number', minimum: 50 },
+        },
+      },
+    },
+  },
+  required: ['requiredString'],
+}
+
+export interface Testdata {
+  requiredString: string
+  string?: string
+  number?: number
+  boolean?: boolean
+  email?: string
+  nested?: {
+    nestedText: string
+    nestedNumber: number
+  }
+  list: Array<{
+    itemText: string
+    itemNumber: number
+  }>
+}
+
+export const testdata: Testdata = {
+  requiredString: 'This is a text',
+  string: 'String value',
+  number: 123,
+  boolean: true,
+  email: 'm@il.com',
+  nested: {
+    nestedText: 'Nested text',
+    nestedNumber: 42,
+  },
+  list: [
+    {
+      itemText: 'Item text',
+      itemNumber: 1001,
+    },
+    {
+      itemText: 'Item text 2',
+      itemNumber: 1002,
+    },
+  ],
+}
+
+export const Default = () => {
+  return (
+    <ComponentBox
+      scope={{
+        DataContext,
+        Layout,
+        DataInput,
+        DataValue,
+        testdata,
+        TestdataSchema,
+      }}
+    >
+      <DataContext.Provider
+        data={testdata}
+        onChange={(data) => console.log('onChange', data)}
+        onPathChange={(path, value) =>
+          console.log('onPathChange', path, value)
+        }
+        onSubmit={(data) => console.log('onSubmit', data)}
+        onSubmitRequest={() => console.log('onSubmitRequest')}
+      >
+        <Layout.Section>
+          <Layout.Card>
+            <Layout.Column divider="line" spacing="small">
+              <DataInput.String
+                path="/requiredString"
+                label="Required string"
+                required
+              />
+              <DataInput.String path="/hmm" label="Invalid path" />
+              <DataInput.String path="/string" label="String value" />
+              <DataInput.String
+                path="/string"
+                label="String value (copy)"
+              />
+              <DataInput.Number path="/number" label="Number value" />
+              <DataInput.String
+                path="/number"
+                label="Number with StringInput"
+              />
+              <DataInput.Boolean
+                path="/boolean"
+                label="Boolean - Checkbox"
+                variant="checkbox"
+              />
+              <DataInput.Boolean
+                path="/boolean"
+                label="Boolean - Toggle"
+                variant="toggle-button"
+              />
+              <div>
+                <DataInput.String
+                  path="/nested/nestedText"
+                  label="Nested text"
+                />
+                <DataInput.Number
+                  path="/nested/nestedNumber"
+                  label="Nested number (minimum 50)"
+                  minimum={50}
+                />
+              </div>
+              <div className="hmm">
+                <Layout.Row>
+                  <DataInput.String
+                    path="/list/0/itemText"
+                    label="Item text"
+                  />
+                  <DataInput.Number
+                    path="/list/0/itemNumber"
+                    label="Item number"
+                  />
+                </Layout.Row>
+                <Layout.Row>
+                  <DataInput.String
+                    path="/list/1/itemText"
+                    label="Item text"
+                  />
+                  <DataInput.Number
+                    path="/list/1/itemNumber"
+                    label="Item number"
+                  />
+                </Layout.Row>
+              </div>
+              <Layout.ButtonRow>
+                <DataContext.SubmitButton />
+              </Layout.ButtonRow>
+            </Layout.Column>
+          </Layout.Card>
+        </Layout.Section>
+      </DataContext.Provider>
+    </ComponentBox>
+  )
+}
+
+export const ValidationWithJsonSchema = () => {
+  return (
+    <ComponentBox
+      scope={{
+        DataContext,
+        Layout,
+        DataInput,
+        DataValue,
+        testdata,
+        TestdataSchema,
+      }}
+    >
+      <DataContext.Provider
+        data={testdata}
+        schema={TestdataSchema}
+        onChange={(data) => console.log('onChange', data)}
+        onPathChange={(path, value) =>
+          console.log('onPathChange', path, value)
+        }
+        onSubmit={(data) => console.log('onSubmit', data)}
+        onSubmitRequest={() => console.log('onSubmitRequest')}
+      >
+        <Layout.Section>
+          <Layout.Card>
+            <Layout.Column divider="line" spacing="small">
+              <DataInput.String
+                path="/requiredString"
+                label="Required string"
+              />
+              <DataInput.String path="/hmm" label="Invalid path" />
+              <DataInput.String path="/string" label="String value" />
+              <DataInput.String
+                path="/string"
+                label="String value (copy)"
+              />
+              <DataInput.Number path="/number" label="Number value" />
+              <DataInput.String
+                path="/number"
+                label="Number with StringInput"
+              />
+              <DataInput.Boolean
+                path="/boolean"
+                label="Boolean - Checkbox"
+                variant="checkbox"
+              />
+              <DataInput.Boolean
+                path="/boolean"
+                label="Boolean - Toggle"
+                variant="toggle-button"
+              />
+              <div>
+                <DataInput.String
+                  path="/nested/nestedText"
+                  label="Nested text"
+                />
+                <DataInput.Number
+                  path="/nested/nestedNumber"
+                  label="Nested number"
+                />
+              </div>
+              <div className="hmm">
+                <Layout.Row>
+                  <DataInput.String
+                    path="/list/0/itemText"
+                    label="Item text"
+                  />
+                  <DataInput.Number
+                    path="/list/0/itemNumber"
+                    label="Item number"
+                  />
+                </Layout.Row>
+                <Layout.Row>
+                  <DataInput.String
+                    path="/list/1/itemText"
+                    label="Item text"
+                  />
+                  <DataInput.Number
+                    path="/list/1/itemNumber"
+                    label="Item number"
+                  />
+                </Layout.Row>
+              </div>
+              <Layout.ButtonRow>
+                <DataContext.SubmitButton />
+              </Layout.ButtonRow>
+            </Layout.Column>
+          </Layout.Card>
+        </Layout.Section>
+      </DataContext.Provider>
+    </ComponentBox>
+  )
+}
diff --git a/...-system-portal/src/docs/uilib/extensions/deposit/DataContext/Provider/demos.mdx b/...-system-portal/src/docs/uilib/extensions/deposit/DataContext/Provider/demos.mdx
@@ -0,0 +1,15 @@
+---
+showTabs: true
+---
+
+import * as Examples from './Examples'
+
+## Demos
+
+### Default
+
+<Examples.Default />
+
+### Validation with Json Schema
+
+<Examples.ValidationWithJsonSchema />