Skip to content

Commit b52c862

Browse files
elbakerinoelbakerino
committed
Merge branch 'develop'
2 parents 80caa57 + a2d4494 commit b52c862

File tree

10 files changed

+381
-308
lines changed

10 files changed

+381
-308
lines changed

‎LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2025 bemit UG (haftungsbeschränkt)
3+
Copyright (c) 2025 Michael Becker <[email protected]> (https://bemit.codes)
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"sloc": "node ./sloc.js",
2929
"release": "lerna publish from-package --contents build --no-git-reset"
3030
},
31-
"author": "Michael Becker, https://i-am-digital.eu",
31+
"author": "Michael Becker <[email protected]> (https://bemit.codes)",
3232
"license": "MIT",
3333
"devDependencies": {
3434
"@jest/types": "^29.6.3",

‎packages/demo/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"version": "0.1.0",
55
"description": "",
66
"homepage": "",
7-
"author": "Michael Becker <[email protected]>",
7+
"author": "Michael Becker <[email protected]> (https://bemit.codes)",
88
"license": "MIT",
99
"dependencies": {
1010
"@mui/material": "^5.1",
@@ -13,12 +13,12 @@
1313
"@emotion/react": "^11.9.0",
1414
"@emotion/styled": "^11.8.1",
1515
"@mui/lab": "^5.0.0-alpha.45",
16-
"@ui-schema/dictionary": "~0.1.0-alpha.1",
17-
"@ui-schema/ds-material": "~0.5.0-alpha.1",
18-
"@ui-schema/react": "~0.5.0-alpha.1",
19-
"@ui-schema/ui-schema": "~0.5.0-alpha.1",
20-
"@ui-schema/json-schema": "~0.5.0-alpha.1",
21-
"@ui-schema/json-pointer": "~0.5.0-alpha.1",
16+
"@ui-schema/dictionary": "~0.1.0-alpha.2",
17+
"@ui-schema/ds-material": "~0.5.0-alpha.2",
18+
"@ui-schema/react": "~0.5.0-alpha.2",
19+
"@ui-schema/ui-schema": "~0.5.0-alpha.2",
20+
"@ui-schema/json-schema": "~0.5.0-alpha.2",
21+
"@ui-schema/json-pointer": "~0.5.0-alpha.2",
2222
"@ui-schema/material-color": "~0.5.0-alpha.0",
2323
"@ui-schema/material-colorful": "~0.5.0-alpha.0",
2424
"immutable": "^5.0.0",

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
import { baseComponents, bindingExtended, MuiBinding, SchemaGridHandler, typeWidgets } from '@ui-schema/ds-material'
1+
import { MuiBinding, SchemaGridHandler } from '@ui-schema/ds-material'
2+
import { bindingComponents } from '@ui-schema/ds-material/Binding/Components'
3+
import { widgetsDefault } from '@ui-schema/ds-material/Binding/WidgetsDefault'
4+
import { widgetsExtended } from '@ui-schema/ds-material/Binding/WidgetsExtended'
25
import { requiredPlugin, validatorPlugin } from '@ui-schema/json-schema'
36
import { DefaultHandler, ValidityReporter } from '@ui-schema/react'
47
import { schemaPluginsAdapterBuilder } from '@ui-schema/react/SchemaPluginsAdapter'
@@ -38,12 +41,12 @@ const ColorfulRgbaBase: React.FC<WidgetProps> =
3841
// const ColorfulRgba = extractValue(memo(ColorfulRgbaBase))
3942

4043
export const customWidgets: MuiBinding = {
41-
...baseComponents,
44+
...bindingComponents,
4245

4346
// Widget mapping by schema type or custom ID.
4447
widgets: {
45-
...typeWidgets,
46-
...bindingExtended,
48+
...widgetsDefault,
49+
...widgetsExtended,
4750

4851
Color,
4952
ColorDialog,

‎packages/material-color/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
# UI-Schema: DS-Material Color
22

3-
Color pickers based on [react-color](https://github.com/casesandberg/react-color), to work with [@ui-schema/react](https://github.com/ui-schema/ui-schema), using [@material-ui](https://github.com/mui-org/material-ui/).
3+
Color pickers based on [react-color](https://github.com/casesandberg/react-color), to work with [@ui-schema/react](https://github.com/ui-schema/ui-schema), using [@mui](https://github.com/mui-org/material-ui/).
44

55
React logic is inspired by [material-ui-color-picker](https://github.com/LoicMahieu/material-ui-color-picker), the transformers where copied from there: MIT License, [Copyright (c) 2017 Loic Mahieu](https://github.com/LoicMahieu/material-ui-color-picker/blob/master/LICENSE)
66

77
- [Documentation](https://github.com/ui-schema/react-color/blob/main/docs/react-colorful)
8-
- [Demo](https://github.com/ui-schema/react-coor/blob/main/packages/demo/src/pages/PageDemoWidgetColor.tsx)
8+
- [Example Code](https://github.com/ui-schema/react-coor/blob/main/packages/demo/src/pages/PageDemoWidgetColor.tsx)
99

1010
## License
1111

‎packages/material-color/package.json‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,8 @@
11
{
22
"name": "@ui-schema/material-color",
3-
"version": "0.5.0-alpha.0",
3+
"version": "0.5.0-alpha.1",
44
"description": "React color pickers as MUI widgets for UI-Schema - using react-color.",
5-
"author": {
6-
"name": "bemit",
7-
"url": "https://bemit.codes"
8-
},
9-
"contributors": [
10-
{
11-
"name": "Michael Becker",
12-
"url": "https://i-am-digital.eu"
13-
}
14-
],
5+
"author": "Michael Becker <[email protected]> (https://bemit.codes)",
156
"license": "MIT",
167
"keywords": [
178
"ui-schema",
@@ -27,6 +18,7 @@
2718
"color picker",
2819
"picker"
2920
],
21+
"homepage": "https://github.com/ui-schema/react-color/tree/main/packages/material-color",
3022
"repository": {
3123
"type": "git",
3224
"url": "https://github.com/ui-schema/react-color.git",

‎packages/material-colorful/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
# UI-Schema: DS-Material Colorful
22

3-
Color picker based on [react-colorful](https://github.com/omgovich/react-colorful), to work with [@ui-schema/react](https://github.com/ui-schema/ui-schema), using [@material-ui](https://github.com/mui-org/material-ui/).
3+
Color picker based on [react-colorful](https://github.com/omgovich/react-colorful), to work with [@ui-schema/react](https://github.com/ui-schema/ui-schema), using [@mui](https://github.com/mui-org/material-ui/).
44

55
- [Documentation](https://github.com/ui-schema/react-color/blob/main/docs/react-colorful)
6-
- [Demo](https://github.com/ui-schema/react-color/blob/main/packages/demo/src/pages/PageDemoWidgetColorful.tsx)
6+
- [Example Code](https://github.com/ui-schema/react-color/blob/main/packages/demo/src/pages/PageDemoWidgetColorful.tsx)
77

88
## License
99

‎packages/material-colorful/package.json‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,8 @@
11
{
22
"name": "@ui-schema/material-colorful",
3-
"version": "0.5.0-alpha.0",
3+
"version": "0.5.0-alpha.1",
44
"description": "React color pickers as MUI widgets for UI-Schema - using react-colorful.",
5-
"author": {
6-
"name": "bemit",
7-
"url": "https://bemit.codes"
8-
},
9-
"contributors": [
10-
{
11-
"name": "Michael Becker",
12-
"url": "https://i-am-digital.eu"
13-
}
14-
],
5+
"author": "Michael Becker <[email protected]> (https://bemit.codes)",
156
"license": "MIT",
167
"keywords": [
178
"ui-schema",
@@ -27,6 +18,7 @@
2718
"color picker",
2819
"picker"
2920
],
21+
"homepage": "https://github.com/ui-schema/react-color/tree/main/packages/material-colorful",
3022
"repository": {
3123
"type": "git",
3224
"url": "https://github.com/ui-schema/react-color.git",

‎packages/material-colorful/src/WidgetColorful/WidgetColorful.tsx‎

Lines changed: 69 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,32 @@ export const WidgetColorful = <T extends AnyColor, P extends WidgetProps = Widge
3939
scopes: ['value'],
4040
type: 'set',
4141
data: {
42-
value: typeof color === 'string' ? color : fromJSOrdered(color),
42+
value:
43+
typeof color === 'string' ? color :
44+
fromJSOrdered(Object.fromEntries(Object.entries(color).map(([k, v]) => {
45+
if(Number.isNaN(v)) {
46+
switch(k) {
47+
case 'a':
48+
v = 1
49+
break
50+
case 'l':
51+
v = 100
52+
break
53+
case 'h':
54+
case 's':
55+
case 'v':
56+
v = 0
57+
break
58+
case 'r':
59+
case 'g':
60+
case 'b':
61+
v = 0
62+
break
63+
}
64+
}
65+
66+
return [k, v]
67+
}))),
4368
},
4469
schema,
4570
required,
@@ -58,6 +83,9 @@ export const WidgetColorful = <T extends AnyColor, P extends WidgetProps = Widge
5883
}), [palette, pickerWidth, pickerHeight, valid])
5984

6085
const showValueText = schema?.getIn(['view', 'showValueText']) as boolean
86+
87+
const colorString = getColorString(value)
88+
6189
return <>
6290
{hideTitle ? null :
6391
<FormLabel error={(!valid && showValidity)}>
@@ -77,8 +105,26 @@ export const WidgetColorful = <T extends AnyColor, P extends WidgetProps = Widge
77105
style={pickerStyles}
78106
/>
79107
</Box>
80-
{showValueText ?
81-
<Box ml={1}>
108+
109+
{showValueText && value ?
110+
<Box ml={0.5} sx={{display: 'flex', alignItems: 'center', gap: 0.75}}>
111+
<Box
112+
sx={{
113+
display: 'inline-flex',
114+
alignItems: 'center',
115+
justifyContent: 'center',
116+
border: '1px solid ' + palette.divider,
117+
fontSize: '14px',
118+
lineHeight: 0,
119+
height: '18px',
120+
width: '18px',
121+
borderRadius: 1,
122+
backgroundColor: colorString,
123+
color: colorString ? palette.getContrastText(colorString) : undefined,
124+
}}
125+
>
126+
<span>{'a'}</span>
127+
</Box>
82128
<FormHelperText>
83129
{typeof value === 'string' ? value :
84130
(value as OrderedMap<string, number>)?.map((val, k) =>
@@ -90,3 +136,23 @@ export const WidgetColorful = <T extends AnyColor, P extends WidgetProps = Widge
90136
<ValidityHelperText errors={errors} showValidity={showValidity} schema={schema}/>
91137
</>
92138
}
139+
140+
/**
141+
* Turns the value into a `rgb`/`hsl` css string.
142+
*/
143+
function getColorString(value: unknown) {
144+
if(typeof value === 'string') {
145+
return value
146+
}
147+
148+
if(Map.isMap(value)) {
149+
if(value.has('r') && value.has('g') && value.has('b')) {
150+
return `rgb(${value.get('r')}, ${value.get('g')}, ${value.get('b')}, ${value.get('a', 1)})`
151+
}
152+
if(value.has('h') && value.has('s') && value.has('l')) {
153+
return `hsl(${value.get('h')}, ${value.get('s')}%, ${value.get('l')}%, ${value.get('a', 1)})`
154+
}
155+
}
156+
157+
return undefined
158+
}

0 commit comments

Comments
 (0)