fix: remove codesandbox integration to fix vulnerabilities

packages/documentation-framework/components/example/example.js

@@ -16,7 +16,6 @@ import * as reactCoreDeprecatedModule from '@patternfly/react-core/deprecated';
 import * as reactTableModule from '@patternfly/react-table';
 import * as reactTableDeprecatedModule from '@patternfly/react-table/deprecated';
 import { css } from '@patternfly/react-styles';
-import { getParameters } from 'codesandbox/lib/api/define';
 import { ExampleToolbar } from './exampleToolbar';
 import { AutoLinkHeader } from '../autoLinkHeader/autoLinkHeader';
 import {
@@ -98,8 +97,6 @@ export const Example = ({
   hasDarkThemeSwitcher = process.env.hasDarkThemeSwitcher,
   // Show dark theme switcher on full page examples
   hasRTLSwitcher = process.env.hasRTLSwitcher,
-  // Map of relative imports matched to their npm package import path (passed to Codesandbox)
-  relativeImports,
   // md file location in node_modules, used to resolve relative import paths in examples
   relPath = '',
   // absolute url to hosted file
@@ -230,19 +227,6 @@ export const Example = ({
     );
   }
 
-  const codeBoxParams = getParameters(
-    lang === 'html'
-      ? getStaticParams(title, editorCode)
-      : getReactParams(
-          title,
-          editorCode,
-          scope,
-          lang,
-          relativeImports,
-          relPath,
-          sourceLink
-        )
-  );
   const fullscreenLink =
     loc.pathname.replace(/\/$/, '') +
     (loc.pathname.endsWith(source) ? '' : `/${source}`) +
@@ -327,7 +311,6 @@ export const Example = ({
         originalCode={code}
         code={editorCode}
         setCode={debounce(setEditorCode, 300)}
-        codeBoxParams={codeBoxParams}
         exampleTitle={title}
       />
     </div>

packages/documentation-framework/components/example/exampleToolbar.js

@@ -24,8 +24,6 @@ function getLanguage(lang) {
 export const ExampleToolbar = ({
   // Link to fullscreen example page (each example has one)
   fullscreenLink,
-  // Params to pass to codesandbox
-  codeBoxParams,
   // Language of code
   lang,
   // Whether the example is fullscreen only
@@ -44,14 +42,12 @@ export const ExampleToolbar = ({
 
   const copyLabel = 'Copy code to clipboard';
   const languageLabel = `Toggle ${lang.toUpperCase()} code`;
-  const codesandboxLabel = 'Open example in CodeSandbox';
   const fullscreenLabel = 'Open example in new window';
   const convertLabel = 'Convert example from Typescript to JavaScript';
   const undoAllLabel = 'Undo all changes';
 
   const copyAriaLabel = `Copy ${exampleTitle} example code to clipboard`;
   const languageAriaLabel = `Toggle ${lang.toUpperCase()} code in ${exampleTitle} example`;
-  const codesandboxAriaLabel = `Open ${exampleTitle} example in CodeSandbox`;
   const fullscreenAriaLabel = `Open ${exampleTitle} example in new window`;
   const convertAriaLabel = `Convert ${exampleTitle} example from Typescript to JavaScript`;
   const undoAllAriaLabel = `Undo all changes to ${exampleTitle}`;
@@ -110,38 +106,11 @@ export const ExampleToolbar = ({
           <CopyIcon />
         </Button>
       </Tooltip>
-      {codeBoxParams &&
-        <Form
-          aria-label={`${codesandboxAriaLabel} form` }
-          action="https://codesandbox.io/api/v1/sandboxes/define"
-          method="POST"
-          target="_blank"
-          style={{ display: "inline-block" }}
-        >
-          <Tooltip
-            content={codesandboxLabel}
-            maxWidth={editorControlProps.maxWidth}
-          >
-            <Button
-              aria-label={codesandboxAriaLabel}
-              variant="control"
-              type="submit"
-              onClick={() => {
-                trackEvent('code_editor_control_click', 'click_event', 'CODESANDBOX_LINK');
-              }}
-              className={editorControlProps.className}
-            >
-              <CodepenIcon />
-            </Button>
-          </Tooltip>
-          <input type="hidden" name="parameters" value={codeBoxParams} />
-        </Form>
-      }
-      {fullscreenLink && 
+      {fullscreenLink &&
         <CodeEditorControl
           component="a"
           icon={<ExternalLinkAltIcon />}
-          href={fullscreenLink} 
+          href={fullscreenLink}
           target="_blank"
           rel="noopener noreferrer"
           aria-label={fullscreenAriaLabel}

packages/documentation-framework/helpers/index.js

@@ -1,5 +1,4 @@
 export * from './capitalize';
-export * from './codesandbox';
 export * from './copy';
 export * from './getId';
 export * from './slugger';

packages/documentation-framework/package.json

@@ -20,12 +20,11 @@
     "camelcase-css": "2.0.1",
     "chokidar": "3.5.3",
     "clean-webpack-plugin": "4.0.0",
-    "codesandbox": "2.2.0",
     "commander": "4.1.1",
     "copy-webpack-plugin": "11.0.0",
     "css-loader": "6.7.3",
     "detab": "2.0.3",
-    "express": "4.18.1",
+    "express": "4.19.2",
     "file-loader": "6.2.0",
     "file-saver": "1.3.8",
     "fs-extra": "9.0.1",
@@ -69,7 +68,7 @@
     "webpack": "5.76.3",
     "webpack-bundle-analyzer": "4.8.0",
     "webpack-cli": "5.0.1",
-    "webpack-dev-server": "4.13.1",
+    "webpack-dev-server": "5.0.0",
     "webpack-merge": "5.8.0"
   },
   "peerDependencies": {

packages/documentation-framework/scripts/md/mdx-ast-to-mdx-hast.js

@@ -33,7 +33,7 @@ function mdxAstToMdxHast({ watchExternal }) {
         type: 'import',
         value: `import ${srcImport} from '${url}';`
       });
-    
+
       return h(node, 'img', props);
     }
 
@@ -58,7 +58,7 @@ function mdxAstToMdxHast({ watchExternal }) {
             value: JSON.stringify(styleObject)
           };
         }
-    
+
         // class="my-class" -> className="my-class"
         if (attr.name === 'class') {
           attr.name = 'className';
@@ -89,7 +89,7 @@ function mdxAstToMdxHast({ watchExternal }) {
           code: node.value ? detab(node.value + '\n').trim() : '',
           title: node.title
         };
-        
+
         if (node.lang) {
           properties.lang = node.lang;
         }
@@ -166,18 +166,18 @@ function mdxAstToMdxHast({ watchExternal }) {
         if (node.title !== null && node.title !== undefined) {
           properties.title = node.title;
         }
-  
+
         if (href) {
           properties.to = href;
-          
+
           return Object.assign({}, node, {
             type: 'element',
             tagName: 'PatternflyThemeLink',
             properties,
             children: all(h, node)
           });
         }
-  
+
         properties.href = href;
         return h(node, 'a', properties, all(h, node));
       },