migrate to 0.5.x

elbakerino · elbakerino · commit 2f2ef02856a4 · 2025-07-17T01:16:02.000+02:00
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ CodeMirror v6 integration for React, with MUI widgets for [UI-Schema](https://gi
 
 [![Github actions Build](https://github.com/ui-schema/react-codemirror/actions/workflows/blank.yml/badge.svg)](https://github.com/ui-schema/react-codemirror/actions)
 [![react compatibility](https://img.shields.io/badge/React-%3E%3D17-success?style=flat-square&logo=react)](https://reactjs.org/)
-[![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)
+[![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)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://makeapullrequest.com)
 ![Typed](https://flat.badgen.net/badge/icon/Typed?icon=typescript&label&labelColor=blue&color=555555)
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -27,11 +27,14 @@
         "@codemirror/lang-sql": "^6.0.0",
         "@codemirror/search": "^6.0.0",
         "@codemirror/language": "^6.1.0",
-        "@ui-schema/dictionary": "~0.0.13",
-        "@ui-schema/ds-material": "~0.4.3",
+        "@ui-schema/dictionary": "~0.1.0-alpha.0",
+        "@ui-schema/ds-material": "~0.5.0-alpha.0",
         "@ui-schema/kit-codemirror": "^1.0.0-alpha.0",
-        "@ui-schema/material-code": "~0.4.7",
-        "@ui-schema/ui-schema": "~0.4.7",
+        "@ui-schema/material-code": "~0.5.0-alpha.0",
+        "@ui-schema/react": "~0.5.0-alpha.0",
+        "@ui-schema/ui-schema": "~0.5.0-alpha.0",
+        "@ui-schema/json-schema": "~0.5.0-alpha.0",
+        "@ui-schema/json-pointer": "~0.5.0-alpha.0",
         "immutable": "^5.0.0",
         "react": "^19.0",
         "react-dom": "^19.0",
diff --git a/packages/demo/src/App.tsx b/packages/demo/src/App.tsx
@@ -4,10 +4,19 @@ import CssBaseline from '@mui/material/CssBaseline'
 import { customTheme } from './theme'
 import { Layout } from './components/Layout'
 import { BrowserRouter } from 'react-router-dom'
-import { UIMetaProvider } from '@ui-schema/ui-schema/UIMeta'
+import { UIMetaProvider } from '@ui-schema/react/UIMeta'
 import CircularProgress from '@mui/material/CircularProgress'
 import { browserT } from './t'
-import { customWidgets } from './components/UISchema'
+import { customBinding } from './components/UISchema'
+import { Validator } from '@ui-schema/json-schema/Validator'
+import { standardValidators } from '@ui-schema/json-schema/StandardValidators'
+import { requiredValidatorLegacy } from '@ui-schema/json-schema/Validators/RequiredValidatorLegacy'
+
+const validator = Validator([
+    ...standardValidators,
+    requiredValidatorLegacy, // opinionated validator, HTML-like, empty-string = invalid
+])
+const validate = validator.validate
 
 const customThemes = customTheme('#05aeca')
 
@@ -25,7 +34,11 @@ export const App: React.ComponentType<{}> = () => {
 
             <BrowserRouter>
                 <React.Suspense fallback={<CircularProgress/>}>
-                    <UIMetaProvider t={browserT} widgets={customWidgets}>
+                    <UIMetaProvider
+                        t={browserT}
+                        binding={customBinding}
+                        validate={validate}
+                    >
                         <Layout setTheme={setThemeId}/>
                     </UIMetaProvider>
                 </React.Suspense>
diff --git a/packages/demo/src/components/SchemaDebug.tsx b/packages/demo/src/components/SchemaDebug.tsx
@@ -1,12 +1,12 @@
-import { useUIStore } from '@ui-schema/ui-schema/UIStore'
+import { useUIStore } from '@ui-schema/react/UIStore'
 import React from 'react'
-import { StoreSchemaType } from '@ui-schema/ui-schema'
+import { SomeSchema } from '@ui-schema/ui-schema'
 import { CustomCodeMirror } from './CustomCodeMirror'
 import { json } from '@codemirror/lang-json'
 import Typography from '@mui/material/Typography'
 import Box from '@mui/material/Box'
 
-export const SchemaDebug: React.FC<{ schema: StoreSchemaType }> = ({schema}) => {
+export const SchemaDebug: React.FC<{ schema: SomeSchema }> = ({schema}) => {
     const {store} = useUIStore()
     const extensions = React.useMemo(() => [
         json(),
diff --git a/packages/demo/src/components/UISchema.tsx b/packages/demo/src/components/UISchema.tsx
@@ -1,20 +1,23 @@
+import { MuiBinding } from '@ui-schema/ds-material'
+import { requiredPlugin, validatorPlugin } from '@ui-schema/json-schema'
+import { DefaultHandler, ValidityReporter, WidgetProps } from '@ui-schema/react'
+import { schemaPluginsAdapterBuilder } from '@ui-schema/react/SchemaPluginsAdapter'
+import { StoreKeyType } from '@ui-schema/ui-schema/ValueStore'
+import { Map } from 'immutable'
 import React from 'react'
-import {
-    WidgetsBindingFactory,
-    WidgetProps, WithScalarValue, memo, WithValue, StoreKeyType,
-} from '@ui-schema/ui-schema'
-import { MuiWidgetsBindingCustom, MuiWidgetsBindingTypes, widgets } from '@ui-schema/ds-material/widgetsBinding'
+import { baseComponents, typeWidgets } from '@ui-schema/ds-material/BindingDefault'
+import { bindingExtended } from '@ui-schema/ds-material/BindingExtended'
+import { SchemaGridHandler } from '@ui-schema/ds-material/Grid'
 import Button from '@mui/material/Button'
 import { json } from '@codemirror/lang-json'
 import { javascript } from '@codemirror/lang-javascript'
 import { html } from '@codemirror/lang-html'
 import { css } from '@codemirror/lang-css'
-import { extractValue } from '@ui-schema/ui-schema/UIStore'
 import { WidgetCode } from '@ui-schema/material-code'
 import { WidgetCodeSelectable } from '@ui-schema/material-code/WidgetCodeSelectable'
 import { CustomCodeMirror } from './CustomCodeMirror'
 
-export const CustomWidgetCode: React.ComponentType<WidgetProps & WithScalarValue> = (props) => {
+export const CustomWidgetCode: React.ComponentType<WidgetProps> = (props) => {
     const format = props.schema.get('format')
     // map the to-be-supported CodeMirror language, or add other extensions
     const extensions = React.useMemo(() => [
@@ -33,7 +36,7 @@ export const CustomWidgetCode: React.ComponentType<WidgetProps & WithScalarValue
     />
 }
 
-const CustomWidgetCodeSelectableBase: React.ComponentType<WidgetProps & WithValue> = (
+const CustomWidgetCodeSelectable: React.ComponentType<WidgetProps> = (
     {value, ...props},
 ) => {
     const {schema, onChange, storeKeys} = props
@@ -43,8 +46,9 @@ const CustomWidgetCodeSelectableBase: React.ComponentType<WidgetProps & WithValu
     // - for objects: {lang, code}
     const formatKey: StoreKeyType = valueType === 'array' ? 0 : 'lang'
     const valueKey: StoreKeyType = valueType === 'array' ? 1 : 'code'
-    const format = value?.get(formatKey) as string | undefined || schema.get('formatDefault') as string | undefined
-    const codeValue = value?.get(valueKey) as string | undefined
+    const valueMap = Map.isMap(value) ? value : undefined
+    const format = valueMap?.get(formatKey) as string | undefined || schema.get('formatDefault') as string | undefined
+    const codeValue = valueMap?.get(valueKey) as string | undefined
 
     // map the to-be-supported CodeMirror language, or add other extensions
     const extensions = React.useMemo(() => [
@@ -88,16 +92,34 @@ const CustomWidgetCodeSelectableBase: React.ComponentType<WidgetProps & WithValu
         }
     />
 }
-const CustomWidgetCodeSelectable = extractValue(memo(CustomWidgetCodeSelectableBase))
 
-export type CustomWidgetsBinding = WidgetsBindingFactory<{}, MuiWidgetsBindingTypes<{}>, MuiWidgetsBindingCustom<{}>>
+export const customBinding: MuiBinding = {
+    ...baseComponents,
+
+    // Widget mapping by schema type or custom ID.
+    widgets: {
+        ...typeWidgets,
+        ...bindingExtended,
 
-export const customWidgets: CustomWidgetsBinding = {
-    ...widgets,
-    types: widgets.types,
-    custom: {
-        ...widgets.custom,
         Code: CustomWidgetCode,
         CodeSelectable: CustomWidgetCodeSelectable,
     },
+
+    // Plugins that wrap each rendered widget.
+    widgetPlugins: [
+        DefaultHandler, // handles `default` keyword
+
+        // Runs SchemaPlugins, connects to SchemaResource (if enabled)
+        schemaPluginsAdapterBuilder([
+            // runs `validate` and related schema postprocessing
+            validatorPlugin,
+
+            // injects the `required` prop
+            requiredPlugin,
+        ]),
+
+        SchemaGridHandler, // MUI v5/6 Grid item
+
+        ValidityReporter, // keeps `valid`/`errors` in sync with `store`
+    ],
 }
diff --git a/packages/demo/src/pages/PageDemoLangSelectable.tsx b/packages/demo/src/pages/PageDemoLangSelectable.tsx
@@ -4,7 +4,11 @@ import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 import { Nav } from '../components/Nav'
 import Link from '@mui/material/Link'
-import { createOrderedMap, createStore, injectPluginStack, JsonSchema, onChangeHandler, storeUpdater, UIStoreProvider } from '@ui-schema/ui-schema'
+import { UIStoreProvider, createStore } from '@ui-schema/react/UIStore'
+import { storeUpdater } from '@ui-schema/react/storeUpdater'
+import { onChangeHandler } from '@ui-schema/react'
+import { WidgetEngine } from '@ui-schema/react/WidgetEngine'
+import { createOrderedMap } from '@ui-schema/ui-schema/createMap'
 import { GridContainer } from '@ui-schema/ds-material/GridContainer'
 import { OrderedMap } from 'immutable'
 import { SchemaDebug } from '../components/SchemaDebug'
@@ -61,9 +65,8 @@ const schema = createOrderedMap({
             readOnly: true,
         },
     },
-} as JsonSchema)
+})
 
-const GridStack = injectPluginStack(GridContainer)
 const DemoComponent = () => {
     const showValidity = true
     const [store, setStore] = React.useState(() => createStore(OrderedMap({
@@ -81,11 +84,12 @@ const DemoComponent = () => {
             onChange={onChange}
             showValidity={showValidity}
         >
-            <GridStack
-                schema={schema}
-                showValidity={showValidity}
-                isRoot
-            />
+            <GridContainer>
+                <WidgetEngine
+                    schema={schema}
+                    isRoot
+                />
+            </GridContainer>
             <Box mt={2}>
                 <Typography variant={'subtitle1'} gutterBottom>Store & Schema Debug</Typography>
                 <SchemaDebug schema={schema}/>
diff --git a/packages/demo/src/pages/PageDemoWidget.tsx b/packages/demo/src/pages/PageDemoWidget.tsx
@@ -3,11 +3,11 @@ import Container from '@mui/material/Container'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 import { Nav } from '../components/Nav'
-import {
-    createOrderedMap, createStore, injectPluginStack, JsonSchema,
-    onChangeHandler, storeUpdater,
-    UIStoreProvider,
-} from '@ui-schema/ui-schema'
+import { UIStoreProvider, createStore } from '@ui-schema/react/UIStore'
+import { storeUpdater } from '@ui-schema/react/storeUpdater'
+import { onChangeHandler } from '@ui-schema/react'
+import { WidgetEngine } from '@ui-schema/react/WidgetEngine'
+import { createOrderedMap } from '@ui-schema/ui-schema/createMap'
 import { OrderedMap } from 'immutable'
 import { GridContainer } from '@ui-schema/ds-material/GridContainer'
 import Link from '@mui/material/Link'
@@ -84,9 +84,8 @@ const schema = createOrderedMap({
             readOnly: true,
         },
     },
-} as JsonSchema)
+})
 
-const GridStack = injectPluginStack(GridContainer)
 const DemoComponent = () => {
     const showValidity = true
     const [store, setStore] = React.useState(() => createStore(OrderedMap({
@@ -104,11 +103,12 @@ const DemoComponent = () => {
             onChange={onChange}
             showValidity={showValidity}
         >
-            <GridStack
-                schema={schema}
-                showValidity={showValidity}
-                isRoot
-            />
+            <GridContainer>
+                <WidgetEngine
+                    schema={schema}
+                    isRoot
+                />
+            </GridContainer>
             <Box mt={2}>
                 <Typography variant={'subtitle1'} gutterBottom>Store & Schema Debug</Typography>
                 <SchemaDebug schema={schema}/>
diff --git a/packages/kit-codemirror/README.md b/packages/kit-codemirror/README.md
@@ -8,7 +8,7 @@ Thin-wrapper for CodeMirror v6 to use as React Component, with hooks and stuff t
 
 ## License
 
-This project is free software distributed under the [**MIT License**](https://github.com/ui-schema/ui-schema/blob/master/LICENSE).
+This project is free software distributed under the [**MIT License**](https://github.com/ui-schema/react-codemirror/blob/main/LICENSE).
 
 © 2025 bemit UG (haftungsbeschränkt)
 
diff --git a/packages/kit-codemirror/package.json b/packages/kit-codemirror/package.json
@@ -2,7 +2,6 @@
     "name": "@ui-schema/kit-codemirror",
     "version": "1.0.0-alpha.1",
     "description": "CodeMirror v6 as React Component, with hooks and stuff - but only the necessities.",
-    "homepage": "https://ui-schema.bemit.codes/docs/kit-codemirror/kit-codemirror",
     "author": {
         "name": "bemit",
         "url": "https://bemit.codes"
diff --git a/packages/material-code/README.md b/packages/material-code/README.md
@@ -21,7 +21,7 @@ Supports:
 
 This project is free software distributed under the **MIT License**.
 
-See: [LICENSE](https://github.com/ui-schema/ui-schema/blob/master/LICENSE).
+See: [LICENSE](https://github.com/ui-schema/react-codemirror/blob/main/LICENSE).
 
 © 2025 bemit UG (haftungsbeschränkt)
 
diff --git a/packages/material-code/package.json b/packages/material-code/package.json
@@ -1,8 +1,7 @@
 {
     "name": "@ui-schema/material-code",
-    "version": "0.5.0-alpha.1",
+    "version": "0.5.0-alpha.2",
     "description": "Code editor widgets using CodeMirror, with Material-UI styling for UI-Schema",
-    "homepage": "https://ui-schema.bemit.codes/docs/material-code/material-code",
     "author": {
         "name": "bemit",
         "url": "https://bemit.codes"
@@ -65,8 +64,9 @@
         "@codemirror/view": "^6.0.0",
         "@codemirror/language": "^6.1.0",
         "@ui-schema/kit-codemirror": "^1.0.0-alpha.0",
-        "@ui-schema/ds-material": "~0.4.3",
-        "@ui-schema/ui-schema": "~0.4.7",
+        "@ui-schema/ds-material": "~0.5.0-alpha.0",
+        "@ui-schema/ui-schema": "~0.5.0-alpha.0",
+        "@ui-schema/react": "~0.5.0-alpha.0",
         "@lezer/highlight": "^1.2.1",
         "immutable": "^5.0.0",
         "react": "^19.0",
@@ -79,8 +79,10 @@
         "@codemirror/view": "^6.0.0",
         "@codemirror/language": "^6.1.0",
         "@ui-schema/kit-codemirror": "^1.0.0-alpha.0",
-        "@ui-schema/ds-material": "~0.4.0-alpha",
-        "@ui-schema/ui-schema": "~0.4.0-alpha",
+        "@ui-schema/ds-material": "~0.5.0-alpha.0",
+        "@ui-schema/json-schema": "~0.5.0-alpha.0",
+        "@ui-schema/ui-schema": "~0.5.0-alpha.0",
+        "@ui-schema/react": "~0.5.0-alpha.0",
         "@lezer/highlight": "^1.0.0",
         "immutable": "^4.0.0 || ^5.0.0",
         "react": "^17.0 || ^18.0 || ^19.0"
diff --git a/packages/material-code/src/CodeBar/CodeBar.tsx b/packages/material-code/src/CodeBar/CodeBar.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
-import { StoreSchemaType } from '@ui-schema/ui-schema/CommonTypings'
+import { SomeSchema } from '@ui-schema/ui-schema/CommonTypings'
 import Box from '@mui/material/Box'
 
 export interface CodeBarProps {
-    schema: StoreSchemaType
+    schema: SomeSchema
     barBegin?: React.ReactElement
     barContent?: React.ReactElement
     barEnd?: React.ReactElement
diff --git a/packages/material-code/src/WidgetCode/WidgetCode.tsx b/packages/material-code/src/WidgetCode/WidgetCode.tsx
@@ -1,9 +1,8 @@
 import { isRemoteChange } from '@ui-schema/kit-codemirror/isRemoteChange'
 import React from 'react'
-import { WithScalarValue } from '@ui-schema/ui-schema/UIStore'
-import { WidgetProps } from '@ui-schema/ui-schema/Widget'
-import { TransTitle } from '@ui-schema/ui-schema/Translate/TransTitle'
-import { Trans } from '@ui-schema/ui-schema/Translate/Trans'
+import { WidgetProps } from '@ui-schema/react/Widget'
+import { TranslateTitle } from '@ui-schema/react/TranslateTitle'
+import { Translate } from '@ui-schema/react/Translate'
 import { CodeMirrorComponentProps } from '@ui-schema/kit-codemirror/CodeMirror'
 import { CodeMirrorOnChange } from '@ui-schema/kit-codemirror/useCodeMirror'
 import { Extension } from '@codemirror/state'
@@ -29,7 +28,7 @@ export interface WidgetCodeProps {
     readOnly?: boolean
 }
 
-export const WidgetCode: React.ComponentType<WidgetProps & WithScalarValue & WidgetCodeProps> = (
+export const WidgetCode: React.ComponentType<WidgetProps & WidgetCodeProps> = (
     {
         storeKeys, schema, value, onChange,
         valid, required, errors, showValidity,
@@ -73,12 +72,12 @@ export const WidgetCode: React.ComponentType<WidgetProps & WithScalarValue & Wid
             <Box mb={0.5}>
                 <FormLabel error={(!valid && showValidity)}>
                     {hideTitle ? null : <>
-                        <TransTitle storeKeys={storeKeys} schema={schema}/>
+                        <TranslateTitle storeKeys={storeKeys} schema={schema}/>
                         {required ? ' *' : null}
                     </>}
                     {formatValue ? <>
                         {hideTitle ? null : ' ('}
-                        <Trans text={'formats.' + formatValue} fallback={formatValue}/>
+                        <Translate text={'formats.' + formatValue} fallback={formatValue}/>
                         {hideTitle ? null : ')'}
                     </> : null}
                 </FormLabel>
diff --git a/packages/material-code/src/WidgetCodeSelectable/WidgetCodeSelectable.tsx b/packages/material-code/src/WidgetCodeSelectable/WidgetCodeSelectable.tsx
