-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Extension, reusable components for data input, data display and…
… surrounding layout for simplified user interface creation
- Loading branch information
Showing
359 changed files
with
12,275 additions
and
3 deletions.
There are no files selected for viewing
15 changes: 15 additions & 0 deletions
15
packages/dnb-design-system-portal/src/docs/uilib/extensions/deposit.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 /> |
15 changes: 15 additions & 0 deletions
15
...ages/dnb-design-system-portal/src/docs/uilib/extensions/deposit/DataContext.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 /> |
10 changes: 10 additions & 0 deletions
10
...-design-system-portal/src/docs/uilib/extensions/deposit/DataContext/Context.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. |
33 changes: 33 additions & 0 deletions
33
...dnb-design-system-portal/src/docs/uilib/extensions/deposit/DataContext/ListComponents.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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} /> | ||
| } |
25 changes: 25 additions & 0 deletions
25
...design-system-portal/src/docs/uilib/extensions/deposit/DataContext/Provider.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 /> |
196 changes: 196 additions & 0 deletions
196
...-design-system-portal/src/docs/uilib/extensions/deposit/DataContext/Provider/Examples.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,196 @@ | ||
| import ComponentBox from '../../../../../../shared/tags/ComponentBox' | ||
| import { | ||
| DataContext, | ||
| Layout, | ||
| DataInput, | ||
| DataValue, | ||
| } from '@dnb/eufemia/src/extensions/deposit' | ||
| import { testdata, TestdataSchema } from '../../testdata' | ||
|
|
||
| export const Default = () => { | ||
| 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" | ||
| 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> | ||
| ) | ||
| } |
15 changes: 15 additions & 0 deletions
15
...-system-portal/src/docs/uilib/extensions/deposit/DataContext/Provider/demos.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| --- | ||
| showTabs: true | ||
| --- | ||
|
|
||
| import * as Examples from './Examples' | ||
|
|
||
| ## Demos | ||
|
|
||
| ### Default | ||
|
|
||
| <Examples.Default /> | ||
|
|
||
| ### Validation with Json Schema | ||
|
|
||
| <Examples.ValidationWithJsonSchema /> |
12 changes: 12 additions & 0 deletions
12
...system-portal/src/docs/uilib/extensions/deposit/DataContext/Provider/events.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| --- | ||
| showTabs: true | ||
| --- | ||
|
|
||
| ## Events | ||
|
|
||
| | Event | Description | | ||
| | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `onChange` | _(optional)_ Will be called when a value of any input component inside was changed by the user, with the data set (including the changed value) as argument. | | ||
| | `onPathChange` | _(optional)_ Will be called when a value of any input component inside was changed by the user, with the `path` (JSON Pointer) and new `value` as arguments. | | ||
| | `onSubmit` | _(optional)_ Will be called when the user submit the form (i.e by clicking a [SubmitButton](/uilib/extensions/deposit/DataContext/SubmitButton) component inside), with the data set as argument. | | ||
| | `onSubmitRequest` | _(optional)_ Will be called when the user tries to submit, but errors stop the data from being submitted. | |
7 changes: 7 additions & 0 deletions
7
...n-system-portal/src/docs/uilib/extensions/deposit/DataContext/Provider/info.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| showTabs: true | ||
| --- | ||
|
|
||
| ## 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.. |
12 changes: 12 additions & 0 deletions
12
...em-portal/src/docs/uilib/extensions/deposit/DataContext/Provider/properties.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| --- | ||
| showTabs: true | ||
| --- | ||
|
|
||
| ## Properties | ||
|
|
||
| | Property | Type | Description | | ||
| | ------------------- | ------------ | ------------------------------------------------------------------------------------- | | ||
| | `data` | `object` | _(required)_ Source data. | | ||
| | `schema` | `object` | _(optional)_ JSON Schema for validation of the data set. | | ||
| | `scrollTopOnSubmit` | `boolean` | _(optional)_ True for the UI to scroll to the top of the page when data is submitted. | | ||
| | `children` | `React.Node` | _(required)_ Contents. | |
21 changes: 21 additions & 0 deletions
21
...gn-system-portal/src/docs/uilib/extensions/deposit/DataContext/SubmitButton.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| --- | ||
| title: 'SubmitButton' | ||
| description: '`DataContext.SubmitButton` connects to the `DataContext.Context` to submit the active state of the DataContext, triggering `onSubmit`.' | ||
| showTabs: true | ||
| status: 'new' | ||
| tabs: | ||
| - title: Info | ||
| key: '/info' | ||
| - title: Demos | ||
| key: '/demos' | ||
| - title: Properties | ||
| key: '/properties' | ||
| --- | ||
|
|
||
| import Info from 'Docs/uilib/extensions/deposit/DataContext/SubmitButton/info' | ||
| import Demos from 'Docs/uilib/extensions/deposit/DataContext/SubmitButton/demos' | ||
| import Properties from 'Docs/uilib/extensions/deposit/DataContext/SubmitButton/properties' | ||
|
|
||
| <Info /> | ||
| <Demos /> | ||
| <Properties /> |
18 changes: 18 additions & 0 deletions
18
...ign-system-portal/src/docs/uilib/extensions/deposit/DataContext/SubmitButton/Examples.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import ComponentBox from '../../../../../../shared/tags/ComponentBox' | ||
| import { DataContext } from '@dnb/eufemia/src/extensions/deposit' | ||
| import { defaultContextState } from '@dnb/eufemia/src/extensions/deposit/DataContext/Context' | ||
|
|
||
| export const Default = () => { | ||
| return ( | ||
| <ComponentBox scope={{ DataContext, defaultContextState }}> | ||
| <DataContext.Context.Provider | ||
| value={{ | ||
| ...defaultContextState, | ||
| handleSubmit: () => console.log('handleSubmit'), | ||
| }} | ||
| > | ||
| <DataContext.SubmitButton /> | ||
| </DataContext.Context.Provider> | ||
| </ComponentBox> | ||
| ) | ||
| } |
Oops, something went wrong.