diff --git a/packages/playground/src/components/Playground.tsx b/packages/playground/src/components/Playground.tsx
index fe3d43fcb2..8372776c86 100644
--- a/packages/playground/src/components/Playground.tsx
+++ b/packages/playground/src/components/Playground.tsx
@@ -25,7 +25,8 @@ export default function Playground({ themes, validators }: PlaygroundProps) {
const [formData, setFormData] = useState
(samples.Simple.formData);
const [extraErrors, setExtraErrors] = useState();
const [shareURL, setShareURL] = useState(null);
- const [theme, setTheme] = useState('default');
+ // TODO only for dev convenience, reset to `default` before merge
+ const [theme, setTheme] = useState('carbon');
const [subtheme, setSubtheme] = useState(null);
const [stylesheet, setStylesheet] = useState(null);
const [validator, setValidator] = useState('AJV8');
@@ -41,16 +42,18 @@ export default function Playground({ themes, validators }: PlaygroundProps) {
experimental_defaultFormStateBehavior: { arrayMinItems: 'populate', emptyObjectFields: 'populateAllDefaults' },
});
const [FormComponent, setFormComponent] = useState>(withTheme({}));
+ const [formContext, setFormContext] = useState({});
const [otherFormProps, setOtherFormProps] = useState>({});
const playGroundFormRef = useRef(null);
const onThemeSelected = useCallback(
- (theme: string, { stylesheet, theme: themeObj }: ThemesType) => {
+ (theme: string, { stylesheet, theme: themeObj, formContext }: ThemesType) => {
setTheme(theme);
setSubtheme(null);
setFormComponent(withTheme(themeObj));
setStylesheet(stylesheet);
+ setFormContext(formContext);
},
[setTheme, setSubtheme, setFormComponent, setStylesheet]
);
@@ -184,6 +187,7 @@ export default function Playground({ themes, validators }: PlaygroundProps) {
schema={schema}
uiSchema={uiSchema}
formData={formData}
+ formContext={formContext}
fields={{
geo: GeoPosition,
'/schemas/specialString': SpecialInput,
diff --git a/packages/playground/src/components/ThemeSelector.tsx b/packages/playground/src/components/ThemeSelector.tsx
index 0a42b787c1..00aade3312 100644
--- a/packages/playground/src/components/ThemeSelector.tsx
+++ b/packages/playground/src/components/ThemeSelector.tsx
@@ -7,6 +7,7 @@ export interface ThemesType {
theme: any;
stylesheet: string;
subthemes?: SubthemesType;
+ formContext?: any;
}
interface ThemeSelectorProps {
diff --git a/packages/playground/tsconfig.json b/packages/playground/tsconfig.json
index fe14477307..b39036d8ef 100644
--- a/packages/playground/tsconfig.json
+++ b/packages/playground/tsconfig.json
@@ -24,6 +24,7 @@
"references": [
{ "path": "../antd" },
{ "path": "../bootstrap-4" },
+ { "path": "../carbon" },
{ "path": "../chakra-ui" },
{ "path": "../core" },
{ "path": "../fluent-ui" },
diff --git a/packages/playground/vite.config.ts b/packages/playground/vite.config.ts
index cd3e413c15..9944985c48 100644
--- a/packages/playground/vite.config.ts
+++ b/packages/playground/vite.config.ts
@@ -17,6 +17,7 @@ export default defineConfig({
// mapping packages in monorepo to make vite use sources directly avoiding build step
'@rjsf/antd': path.resolve(__dirname, '../antd/src'),
'@rjsf/bootstrap-4': path.resolve(__dirname, '../bootstrap-4/src'),
+ '@rjsf/carbon': path.resolve(__dirname, '../carbon/src'),
'@rjsf/chakra-ui': path.resolve(__dirname, '../chakra-ui/src'),
'@rjsf/core': path.resolve(__dirname, '../core/src'),
'@rjsf/fluent-ui': path.resolve(__dirname, '../fluent-ui/src'),
diff --git a/tsconfig.json b/tsconfig.json
index 66f532ea92..dce85c0ecc 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,6 +7,9 @@
{
"path": "./packages/bootstrap-4"
},
+ {
+ "path": "./packages/carbon"
+ },
{
"path": "./packages/chakra-ui"
},
+
+
+