Skip to content

Commit 2f2ef02

Browse files
elbakerinoelbakerino
committed
migrate to 0.5.x
1 parent 2155db8 commit 2f2ef02

File tree

15 files changed

+1686
-965
lines changed

15 files changed

+1686
-965
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ CodeMirror v6 integration for React, with MUI widgets for [UI-Schema](https://gi
88

99
[![Github actions Build](https://github.com/ui-schema/react-codemirror/actions/workflows/blank.yml/badge.svg)](https://github.com/ui-schema/react-codemirror/actions)
1010
[![react compatibility](https://img.shields.io/badge/React-%3E%3D17-success?style=flat-square&logo=react)](https://reactjs.org/)
11-
[![MIT license](https://img.shields.io/npm/l/@ui-schema/ui-schema?style=flat-square)](https://github.com/ui-schema/ui-schema/blob/master/LICENSE)
11+
[![MIT license](https://img.shields.io/npm/l/@ui-schema/ui-schema?style=flat-square)](https://github.com/ui-schema/react-codemirror/blob/main/LICENSE)
1212
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
1313
![Typed](https://flat.badgen.net/badge/icon/Typed?icon=typescript&label&labelColor=blue&color=555555)
1414

‎package-lock.json

Lines changed: 1569 additions & 890 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/demo/package.json

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,14 @@
2727
"@codemirror/lang-sql": "^6.0.0",
2828
"@codemirror/search": "^6.0.0",
2929
"@codemirror/language": "^6.1.0",
30-
"@ui-schema/dictionary": "~0.0.13",
31-
"@ui-schema/ds-material": "~0.4.3",
30+
"@ui-schema/dictionary": "~0.1.0-alpha.0",
31+
"@ui-schema/ds-material": "~0.5.0-alpha.0",
3232
"@ui-schema/kit-codemirror": "^1.0.0-alpha.0",
33-
"@ui-schema/material-code": "~0.4.7",
34-
"@ui-schema/ui-schema": "~0.4.7",
33+
"@ui-schema/material-code": "~0.5.0-alpha.0",
34+
"@ui-schema/react": "~0.5.0-alpha.0",
35+
"@ui-schema/ui-schema": "~0.5.0-alpha.0",
36+
"@ui-schema/json-schema": "~0.5.0-alpha.0",
37+
"@ui-schema/json-pointer": "~0.5.0-alpha.0",
3538
"immutable": "^5.0.0",
3639
"react": "^19.0",
3740
"react-dom": "^19.0",

‎packages/demo/src/App.tsx

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,19 @@ import CssBaseline from '@mui/material/CssBaseline'
44
import { customTheme } from './theme'
55
import { Layout } from './components/Layout'
66
import { BrowserRouter } from 'react-router-dom'
7-
import { UIMetaProvider } from '@ui-schema/ui-schema/UIMeta'
7+
import { UIMetaProvider } from '@ui-schema/react/UIMeta'
88
import CircularProgress from '@mui/material/CircularProgress'
99
import { browserT } from './t'
10-
import { customWidgets } from './components/UISchema'
10+
import { customBinding } from './components/UISchema'
11+
import { Validator } from '@ui-schema/json-schema/Validator'
12+
import { standardValidators } from '@ui-schema/json-schema/StandardValidators'
13+
import { requiredValidatorLegacy } from '@ui-schema/json-schema/Validators/RequiredValidatorLegacy'
14+
15+
const validator = Validator([
16+
...standardValidators,
17+
requiredValidatorLegacy, // opinionated validator, HTML-like, empty-string = invalid
18+
])
19+
const validate = validator.validate
1120

1221
const customThemes = customTheme('#05aeca')
1322

@@ -25,7 +34,11 @@ export const App: React.ComponentType<{}> = () => {
2534

2635
<BrowserRouter>
2736
<React.Suspense fallback={<CircularProgress/>}>
28-
<UIMetaProvider t={browserT} widgets={customWidgets}>
37+
<UIMetaProvider
38+
t={browserT}
39+
binding={customBinding}
40+
validate={validate}
41+
>
2942
<Layout setTheme={setThemeId}/>
3043
</UIMetaProvider>
3144
</React.Suspense>

‎packages/demo/src/components/SchemaDebug.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { useUIStore } from '@ui-schema/ui-schema/UIStore'
1+
import { useUIStore } from '@ui-schema/react/UIStore'
22
import React from 'react'
3-
import { StoreSchemaType } from '@ui-schema/ui-schema'
3+
import { SomeSchema } from '@ui-schema/ui-schema'
44
import { CustomCodeMirror } from './CustomCodeMirror'
55
import { json } from '@codemirror/lang-json'
66
import Typography from '@mui/material/Typography'
77
import Box from '@mui/material/Box'
88

9-
export const SchemaDebug: React.FC<{ schema: StoreSchemaType }> = ({schema}) => {
9+
export const SchemaDebug: React.FC<{ schema: SomeSchema }> = ({schema}) => {
1010
const {store} = useUIStore()
1111
const extensions = React.useMemo(() => [
1212
json(),

‎packages/demo/src/components/UISchema.tsx

Lines changed: 39 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
1+
import { MuiBinding } from '@ui-schema/ds-material'
2+
import { requiredPlugin, validatorPlugin } from '@ui-schema/json-schema'
3+
import { DefaultHandler, ValidityReporter, WidgetProps } from '@ui-schema/react'
4+
import { schemaPluginsAdapterBuilder } from '@ui-schema/react/SchemaPluginsAdapter'
5+
import { StoreKeyType } from '@ui-schema/ui-schema/ValueStore'
6+
import { Map } from 'immutable'
17
import React from 'react'
2-
import {
3-
WidgetsBindingFactory,
4-
WidgetProps, WithScalarValue, memo, WithValue, StoreKeyType,
5-
} from '@ui-schema/ui-schema'
6-
import { MuiWidgetsBindingCustom, MuiWidgetsBindingTypes, widgets } from '@ui-schema/ds-material/widgetsBinding'
8+
import { baseComponents, typeWidgets } from '@ui-schema/ds-material/BindingDefault'
9+
import { bindingExtended } from '@ui-schema/ds-material/BindingExtended'
10+
import { SchemaGridHandler } from '@ui-schema/ds-material/Grid'
711
import Button from '@mui/material/Button'
812
import { json } from '@codemirror/lang-json'
913
import { javascript } from '@codemirror/lang-javascript'
1014
import { html } from '@codemirror/lang-html'
1115
import { css } from '@codemirror/lang-css'
12-
import { extractValue } from '@ui-schema/ui-schema/UIStore'
1316
import { WidgetCode } from '@ui-schema/material-code'
1417
import { WidgetCodeSelectable } from '@ui-schema/material-code/WidgetCodeSelectable'
1518
import { CustomCodeMirror } from './CustomCodeMirror'
1619

17-
export const CustomWidgetCode: React.ComponentType<WidgetProps & WithScalarValue> = (props) => {
20+
export const CustomWidgetCode: React.ComponentType<WidgetProps> = (props) => {
1821
const format = props.schema.get('format')
1922
// map the to-be-supported CodeMirror language, or add other extensions
2023
const extensions = React.useMemo(() => [
@@ -33,7 +36,7 @@ export const CustomWidgetCode: React.ComponentType<WidgetProps & WithScalarValue
3336
/>
3437
}
3538

36-
const CustomWidgetCodeSelectableBase: React.ComponentType<WidgetProps & WithValue> = (
39+
const CustomWidgetCodeSelectable: React.ComponentType<WidgetProps> = (
3740
{value, ...props},
3841
) => {
3942
const {schema, onChange, storeKeys} = props
@@ -43,8 +46,9 @@ const CustomWidgetCodeSelectableBase: React.ComponentType<WidgetProps & WithValu
4346
// - for objects: {lang, code}
4447
const formatKey: StoreKeyType = valueType === 'array' ? 0 : 'lang'
4548
const valueKey: StoreKeyType = valueType === 'array' ? 1 : 'code'
46-
const format = value?.get(formatKey) as string | undefined || schema.get('formatDefault') as string | undefined
47-
const codeValue = value?.get(valueKey) as string | undefined
49+
const valueMap = Map.isMap(value) ? value : undefined
50+
const format = valueMap?.get(formatKey) as string | undefined || schema.get('formatDefault') as string | undefined
51+
const codeValue = valueMap?.get(valueKey) as string | undefined
4852

4953
// map the to-be-supported CodeMirror language, or add other extensions
5054
const extensions = React.useMemo(() => [
@@ -88,16 +92,34 @@ const CustomWidgetCodeSelectableBase: React.ComponentType<WidgetProps & WithValu
8892
}
8993
/>
9094
}
91-
const CustomWidgetCodeSelectable = extractValue(memo(CustomWidgetCodeSelectableBase))
9295

93-
export type CustomWidgetsBinding = WidgetsBindingFactory<{}, MuiWidgetsBindingTypes<{}>, MuiWidgetsBindingCustom<{}>>
96+
export const customBinding: MuiBinding = {
97+
...baseComponents,
98+
99+
// Widget mapping by schema type or custom ID.
100+
widgets: {
101+
...typeWidgets,
102+
...bindingExtended,
94103

95-
export const customWidgets: CustomWidgetsBinding = {
96-
...widgets,
97-
types: widgets.types,
98-
custom: {
99-
...widgets.custom,
100104
Code: CustomWidgetCode,
101105
CodeSelectable: CustomWidgetCodeSelectable,
102106
},
107+
108+
// Plugins that wrap each rendered widget.
109+
widgetPlugins: [
110+
DefaultHandler, // handles `default` keyword
111+
112+
// Runs SchemaPlugins, connects to SchemaResource (if enabled)
113+
schemaPluginsAdapterBuilder([
114+
// runs `validate` and related schema postprocessing
115+
validatorPlugin,
116+
117+
// injects the `required` prop
118+
requiredPlugin,
119+
]),
120+
121+
SchemaGridHandler, // MUI v5/6 Grid item
122+
123+
ValidityReporter, // keeps `valid`/`errors` in sync with `store`
124+
],
103125
}

‎packages/demo/src/pages/PageDemoLangSelectable.tsx

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@ import Box from '@mui/material/Box'
44
import Typography from '@mui/material/Typography'
55
import { Nav } from '../components/Nav'
66
import Link from '@mui/material/Link'
7-
import { createOrderedMap, createStore, injectPluginStack, JsonSchema, onChangeHandler, storeUpdater, UIStoreProvider } from '@ui-schema/ui-schema'
7+
import { UIStoreProvider, createStore } from '@ui-schema/react/UIStore'
8+
import { storeUpdater } from '@ui-schema/react/storeUpdater'
9+
import { onChangeHandler } from '@ui-schema/react'
10+
import { WidgetEngine } from '@ui-schema/react/WidgetEngine'
11+
import { createOrderedMap } from '@ui-schema/ui-schema/createMap'
812
import { GridContainer } from '@ui-schema/ds-material/GridContainer'
913
import { OrderedMap } from 'immutable'
1014
import { SchemaDebug } from '../components/SchemaDebug'
@@ -61,9 +65,8 @@ const schema = createOrderedMap({
6165
readOnly: true,
6266
},
6367
},
64-
} as JsonSchema)
68+
})
6569

66-
const GridStack = injectPluginStack(GridContainer)
6770
const DemoComponent = () => {
6871
const showValidity = true
6972
const [store, setStore] = React.useState(() => createStore(OrderedMap({
@@ -81,11 +84,12 @@ const DemoComponent = () => {
8184
onChange={onChange}
8285
showValidity={showValidity}
8386
>
84-
<GridStack
85-
schema={schema}
86-
showValidity={showValidity}
87-
isRoot
88-
/>
87+
<GridContainer>
88+
<WidgetEngine
89+
schema={schema}
90+
isRoot
91+
/>
92+
</GridContainer>
8993
<Box mt={2}>
9094
<Typography variant={'subtitle1'} gutterBottom>Store & Schema Debug</Typography>
9195
<SchemaDebug schema={schema}/>

‎packages/demo/src/pages/PageDemoWidget.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import Container from '@mui/material/Container'
33
import Box from '@mui/material/Box'
44
import Typography from '@mui/material/Typography'
55
import { Nav } from '../components/Nav'
6-
import {
7-
createOrderedMap, createStore, injectPluginStack, JsonSchema,
8-
onChangeHandler, storeUpdater,
9-
UIStoreProvider,
10-
} from '@ui-schema/ui-schema'
6+
import { UIStoreProvider, createStore } from '@ui-schema/react/UIStore'
7+
import { storeUpdater } from '@ui-schema/react/storeUpdater'
8+
import { onChangeHandler } from '@ui-schema/react'
9+
import { WidgetEngine } from '@ui-schema/react/WidgetEngine'
10+
import { createOrderedMap } from '@ui-schema/ui-schema/createMap'
1111
import { OrderedMap } from 'immutable'
1212
import { GridContainer } from '@ui-schema/ds-material/GridContainer'
1313
import Link from '@mui/material/Link'
@@ -84,9 +84,8 @@ const schema = createOrderedMap({
8484
readOnly: true,
8585
},
8686
},
87-
} as JsonSchema)
87+
})
8888

89-
const GridStack = injectPluginStack(GridContainer)
9089
const DemoComponent = () => {
9190
const showValidity = true
9291
const [store, setStore] = React.useState(() => createStore(OrderedMap({
@@ -104,11 +103,12 @@ const DemoComponent = () => {
104103
onChange={onChange}
105104
showValidity={showValidity}
106105
>
107-
<GridStack
108-
schema={schema}
109-
showValidity={showValidity}
110-
isRoot
111-
/>
106+
<GridContainer>
107+
<WidgetEngine
108+
schema={schema}
109+
isRoot
110+
/>
111+
</GridContainer>
112112
<Box mt={2}>
113113
<Typography variant={'subtitle1'} gutterBottom>Store & Schema Debug</Typography>
114114
<SchemaDebug schema={schema}/>

‎packages/kit-codemirror/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ Thin-wrapper for CodeMirror v6 to use as React Component, with hooks and stuff t
88

99
## License
1010

11-
This project is free software distributed under the [**MIT License**](https://github.com/ui-schema/ui-schema/blob/master/LICENSE).
11+
This project is free software distributed under the [**MIT License**](https://github.com/ui-schema/react-codemirror/blob/main/LICENSE).
1212

1313
© 2025 bemit UG (haftungsbeschränkt)
1414

‎packages/kit-codemirror/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
"name": "@ui-schema/kit-codemirror",
33
"version": "1.0.0-alpha.1",
44
"description": "CodeMirror v6 as React Component, with hooks and stuff - but only the necessities.",
5-
"homepage": "https://ui-schema.bemit.codes/docs/kit-codemirror/kit-codemirror",
65
"author": {
76
"name": "bemit",
87
"url": "https://bemit.codes"

0 commit comments

Comments
 (0)