fix: fixing docs examples (#1536)

* fix: fixing docs examples

* fix: lint fix

* fix: fixing time-picker test

Author: Jakub007d

package-lock.json

@@ -71,7 +71,7 @@ describe('TimePicker', () => {
     fireEvent.focusOut(screen.getByPlaceholderText('hh:mm'));
     await userEvent.click(screen.getByText('Submit'));
 
-    expect(screen.getByPlaceholderText('hh:mm')).toHaveValue('24:00');
+    expect(screen.getByPlaceholderText('hh:mm').value).toMatch(/^(00:00|24:00)$/);
     expect(onSubmit.mock.calls[0][0]['time-picker'].getHours()).toEqual(0);
     expect(onSubmit.mock.calls[0][0]['time-picker'].getMinutes()).toEqual(0);
   });

packages/carbon-component-mapper/src/tests/time-picker.test.js

@@ -20,6 +20,7 @@
     },
     "dependencies": {
         "@actions/github": "^5.0.0",
+        "@codesandbox/sandpack-react": "^2.20.0",
         "@data-driven-forms/editor-pro": "0.0.13",
         "@data-driven-forms/mui-component-mapper": "*",
         "@data-driven-forms/react-form-renderer": "*",
@@ -35,7 +36,6 @@
         "@mui/system": "^5.10.4",
         "@mui/x-date-pickers": "^5.0.1",
         "@next/bundle-analyzer": "^15.3.1",
-        "@stackblitz/sdk": "^1.5.3",
         "clsx": "^1.1.1",
         "codesandbox": "2.2.3",
         "evergreen-ui": "^6.9.10",

packages/react-renderer-demo/package.json

@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { useRouter } from 'next/router';
-import CircularProgress from '@mui/material/CircularProgress';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
-import sdk from '@stackblitz/sdk';
+import { Sandpack } from '@codesandbox/sandpack-react';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -23,12 +22,12 @@ import IconButton from '@mui/material/IconButton';
 
 import clsx from 'clsx';
 
-import * as mui from '../stackblitz-templates/mui-templates';
-import * as pf4 from '../stackblitz-templates/pf4-templates';
-import * as blueprint from '../stackblitz-templates/blueprint-templates';
-import * as suir from '../stackblitz-templates/suir-template';
-import * as ant from '../stackblitz-templates/ant-templates';
-import * as carbon from '../stackblitz-templates/carbon-templates';
+import * as mui from '../sandpack-templates/mui-sandpack';
+import * as pf4 from '../sandpack-templates/pf4-sandpack';
+import * as blueprint from '../sandpack-templates/blueprint-sandpack';
+import * as suir from '../sandpack-templates/suir-sandpack';
+import * as ant from '../sandpack-templates/ant-sandpack';
+import * as carbon from '../sandpack-templates/carbon-sandpack';
 
 import avalableMappers from '../helpers/available-mappers';
 import GhIcon from './common/gh-svg-icon';
@@ -104,11 +103,17 @@ const Root = styled('div')(({ theme }) => ({
 
   [`& .${classes.spinnerCheat}`]: {
     flex: 1,
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
     position: 'relative',
     boxShadow: theme.shadows[1],
     '& .longer + #code-target': {
       maxHeight: 'calc(100% - 49px)',
     },
+    '& .sp-layout': {
+      height: '100%',
+    },
   },
 
   [`& .${classes.spinner}`]: {
@@ -196,17 +201,6 @@ const metadata = {
   carbon,
 };
 
-const project = {
-  settings: {
-    compile: {
-      trigger: 'auto',
-      action: 'hmr',
-      clearConsole: false,
-    },
-  },
-  template: 'javascript',
-};
-
 const stringifyWithFunctions = (string) =>
   JSON.stringify(string, null, 2)
     .replace(/<NEWLINE>/g, '\n')
@@ -222,24 +216,18 @@ const ComponentExample = ({ variants, schema, activeMapper, component, schemaVar
     availableVariants?.find(({ value }) => value === activeSchema)?.schema ||
     availableVariants?.find(({ value }) => value === 'basic')?.schema ||
     schema;
-  const basicConfiguration = {
-    ...project,
-    dependencies: metadata[activeMapper].dependencies,
-    files: {
-      'index.html': metadata[activeMapper].html,
-      'index.js': metadata[activeMapper].code,
-      ...(component === 'wizard' && { 'index.js': metadata[activeMapper].wizardCode }),
-      'schema.js': `export default ${stringifyWithFunctions(selectedSchema)};`,
-    },
+
+  const sandpackFiles = {
+    '/index.js': metadata[activeMapper].code,
+    ...(component === 'wizard' && { '/index.js': metadata[activeMapper].wizardCode }),
+    '/schema.js': `export default ${stringifyWithFunctions(selectedSchema)};`,
+    ...(metadata[activeMapper].css && { '/styles.css': metadata[activeMapper].css }),
   };
-  const basicEditorSettings = { height: '100%', hideNavigation: true, forceEmbedLayout: true, openFile: 'schema.js' };
 
   useEffect(() => {
     if (activeSchema && !availableVariants?.find(({ value }) => value === activeSchema)) {
       push(`${pathname}?mapper=${activeMapper}&schema=basic`);
     }
-
-    sdk.embedProject('code-target', basicConfiguration, basicEditorSettings);
   }, [activeMapper, schema, activeSchema]);
 
   const renderMapperTabs = () =>
@@ -351,10 +339,25 @@ const ComponentExample = ({ variants, schema, activeMapper, component, schemaVar
                 />
               ))}
             </Tabs>
-            <div id="code-target" className="pepa"></div>
-            <div className={classes.spinner}>
-              <CircularProgress color="inherit" size={80} />
-            </div>
+            <Sandpack
+              key={`${activeMapper}-${activeSchema || 'default'}-${component}`}
+              template="react"
+              files={sandpackFiles}
+              customSetup={{
+                dependencies: metadata[activeMapper].dependencies,
+              }}
+              options={{
+                showNavigator: false,
+                showTabs: true,
+                showLineNumbers: true,
+                editorHeight: '100%',
+                activeFile: '/schema.js',
+                bundlerTimeout: 60000,
+                wrapContent: true,
+              }}
+              theme="light"
+              style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+            />
           </div>
         </Box>
       </Box>

packages/react-renderer-demo/src/components/component-example.js

@@ -1,13 +1,21 @@
 export const html = `
 <html>
+  <head>
+    <style>
+      body {
+        margin: 0;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      }
+    </style>
+  </head>
   <body>
     <div id="root"></div>
   </body>
 </html>
 `;
 
 export const code = `import React, { Component } from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
 import FormTemplate from '@data-driven-forms/ant-component-mapper/form-template';
 import componentMapper from '@data-driven-forms/ant-component-mapper/component-mapper';
@@ -30,10 +38,11 @@ class App extends Component {
   }
 }
 
-render(<App />, document.getElementById('root'));`;
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);`;
 
 export const wizardCode = `import React, { Component } from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
 import AntFormTemplate from '@data-driven-forms/ant-component-mapper/form-template';
 import componentMapper from '@data-driven-forms/ant-component-mapper/component-mapper';
@@ -58,7 +67,8 @@ class App extends Component {
   }
 }
 
-render(<App />, document.getElementById('root'));`;
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);`;
 
 export const dependencies = {
   react: 'latest',
@@ -70,4 +80,7 @@ export const dependencies = {
   '@ant-design/icons': '^4.7.0',
   'prop-types': 'latest',
   '@babel/runtime': '^7.12.1',
+  'react-final-form': '^6.5.9',
+  'final-form': '^4.20.10',
+  'final-form-arrays': '^3.1.0',
 };

…rc/stackblitz-templates/ant-templates.js …o/src/sandpack-templates/ant-sandpack.jspackages/react-renderer-demo/src/stackblitz-templates/ant-templates.js renamed to packages/react-renderer-demo/src/sandpack-templates/ant-sandpack.js packages/react-renderer-demo/src/stackblitz-templates/ant-templates.js renamed to packages/react-renderer-demo/src/sandpack-templates/ant-sandpack.js

@@ -4,24 +4,45 @@ export const html = `
     <!-- Style dependencies -->
     <link href="https://unpkg.com/normalize.css@^8.0.1" rel="stylesheet" />
     <!-- Blueprint stylesheets -->
-    <link href="https://unpkg.com/@blueprintjs/icons@^4.2.4/lib/css/blueprint-icons.css" rel="stylesheet" />
+    <link href="https://unpkg.com/@blueprintjs/icons@^4.2.1/lib/css/blueprint-icons.css" rel="stylesheet" />
     <link href="https://unpkg.com/@blueprintjs/core@^4.2.1/lib/css/blueprint.css" rel="stylesheet" />
-    <link href="https://unpkg.com/@blueprintjs/datetime@^4.1.4//lib/css/blueprint-datetime.css" rel="stylesheet" />
+    <link href="https://unpkg.com/@blueprintjs/datetime@^4.1.4/lib/css/blueprint-datetime.css" rel="stylesheet" />
+    <style>
+      body {
+        margin: 0;
+      }
+      .bp4-slider {
+        width: 100%;
+      }
+      .bp4-slider-axis {
+        display: none;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>
   </body>
 </html>
 `;
 
-export const code = `import React, { Component } from 'react';
-import { render } from 'react-dom';
+export const code = `import React, { Component, useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
 import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
 import FormTemplate from '@data-driven-forms/blueprint-component-mapper/form-template';
 import componentMapper from '@data-driven-forms/blueprint-component-mapper/component-mapper';
 
+import 'normalize.css';
+import '@blueprintjs/core/lib/css/blueprint.css';
+import '@blueprintjs/icons/lib/css/blueprint-icons.css';
+import '@blueprintjs/datetime/lib/css/blueprint-datetime.css';
+
 import schema from './schema'
 
+// Hide slider axis labels to prevent number ghosting
+const style = document.createElement('style');
+style.textContent = '.bp4-slider-axis { display: none; }';
+document.head.appendChild(style);
+
 class App extends Component {
   render() {
     return (
@@ -37,16 +58,27 @@ class App extends Component {
   }
 }
 
-render(<App />, document.getElementById('root'));`;
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);`;
 
 export const wizardCode = `import React, { Component } from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
 import BlueprintFormTemplate from '@data-driven-forms/blueprint-component-mapper/form-template';
 import componentMapper from '@data-driven-forms/blueprint-component-mapper/component-mapper';
 
+import 'normalize.css';
+import '@blueprintjs/core/lib/css/blueprint.css';
+import '@blueprintjs/icons/lib/css/blueprint-icons.css';
+import '@blueprintjs/datetime/lib/css/blueprint-datetime.css';
+
 import schema from './schema'
 
+// Hide slider axis labels to prevent number ghosting
+const style = document.createElement('style');
+style.textContent = '.bp4-slider-axis { display: none; }';
+document.head.appendChild(style);
+
 const FormTemplate = (props) => <BlueprintFormTemplate {...props} showFormControls={false} />
 
 class App extends Component {
@@ -64,17 +96,25 @@ class App extends Component {
   }
 }
 
-render(<App />, document.getElementById('root'));`;
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);`;
 
 export const dependencies = {
-  react: 'latest',
-  'react-dom': 'latest',
+  react: '^18.0.0',
+  'react-dom': '^18.0.0',
   '@babel/runtime': '^7.12.1',
   '@data-driven-forms/react-form-renderer': 'latest',
   '@data-driven-forms/blueprint-component-mapper': 'latest',
   '@data-driven-forms/common': 'latest',
-  '@blueprintjs/core': 'latest',
-  '@blueprintjs/datetime': 'latest',
-  '@blueprintjs/select': 'latest',
-  'prop-types': 'latest',
+  '@blueprintjs/core': '^4.2.1',
+  '@blueprintjs/datetime': '^4.1.4',
+  '@blueprintjs/select': '^4.1.4',
+  '@blueprintjs/icons': '^4.2.1',
+  'normalize.css': '^8.0.1',
+  'react-final-form': '^6.5.9',
+  'final-form': '^4.20.10',
+  'final-form-arrays': '^3.1.0',
+  'prop-types': '^15.8.1',
+  'react-transition-group': '^4.4.5',
+  classnames: '^2.3.2',
 };