fix: update latest export codes (#309)

IBM · May 29, 2024 · 5551d7e · 5551d7e
1 parent d982860
commit 5551d7e
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 38 deletions.
diff --git a/app/src/routes/edit/share-options/exports/frameworks/angular/latest/fragment.ts b/app/src/routes/edit/share-options/exports/frameworks/angular/latest/fragment.ts
@@ -187,8 +187,6 @@ export const createAngularApp = (fragment: any, fragments: any[], globalStyleCla
 		`import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 		import { AppModule } from './app/app.module';
 
-		import "@carbon/styles/css/styles.css";
-
 		platformBrowserDynamic()
 			.bootstrapModule(AppModule)
 			.catch(err => console.log(err));
@@ -220,26 +218,36 @@ export const createAngularApp = (fragment: any, fragments: any[], globalStyleCla
 		]
 	}, null, '\t');
 
-	const styleScss = getUsedCollectionsAngularStyleImportPaths(customComponentsCollections, fragment.data)
+	const styleScss = `@use "@carbon/styles/scss/config" with (
+			// Use flexbox for grid - stick to CSS Grid or Flexbox
+			// CSS Grid has become the default grid system in v11
+			$use-flexbox-grid: true
+		);
+
+		@use "@carbon/styles";
+
+		body {
+			@include styles.theme(styles.$white);
+		}
+	${getUsedCollectionsAngularStyleImportPaths(customComponentsCollections, fragment.data)
 		.map(path => `@import '${path}';`)
-		.join('\n');
+		.join('\n')}`;
 
 	const packageJson = {
 		dependencies: {
-			'@angular/animations': '12.2.0',
-			'@angular/common': '12.2.0',
-			'@angular/compiler': '12.2.0',
-			'@angular/core': '12.2.0',
-			'@angular/forms': '12.2.0',
-			'@angular/platform-browser': '12.2.0',
-			'@angular/platform-browser-dynamic': '12.2.0',
-			'@angular/router': '12.2.0',
-			'@carbon/styles': '1.36.0',
-			'rxjs': '6.6.0',
+			'@angular/animations': '14.2.0',
+			'@angular/common': '14.2.0',
+			'@angular/compiler': '14.2.0',
+			'@angular/core': '14.2.0',
+			'@angular/forms': '14.2.0',
+			'@angular/platform-browser': '14.2.0',
+			'@angular/platform-browser-dynamic': '14.2.0',
+			'@angular/router': '14.2.0',
+			'@carbon/styles': '1.45.0',
+			'rxjs': '7.5.0',
 			'tslib': '2.3.0',
-			'sass': '1.45.0',
 			'zone.js': '0.11.4',
-			'carbon-components-angular': '5.14.10',
+			'carbon-components-angular': '5.25.0',
 			...getUsedCollectionsAngularDependencies(customComponentsCollections, fragment.data)
 		}
 	};

diff --git a/app/src/routes/edit/share-options/exports/frameworks/react/latest/fragment.ts b/app/src/routes/edit/share-options/exports/frameworks/react/latest/fragment.ts
@@ -94,8 +94,8 @@ export const createReactApp = (fragment: any, fragments: any[], globalStyleClass
 `;
 	const componentJs
 		= `import React from 'react';
+import './component.scss';
 ${fragmentTemplate.imports};
-${hasFragmentStyleClasses(fragment) ? "\nimport './component.scss';\n" : ''}
 export const FragmentComponent = ({state, setState}) => {
 	const handleInputChange = (event) => {
 		setState({...state, [event.target.name]: event.target.value});
@@ -107,21 +107,23 @@ export const FragmentComponent = ({state, setState}) => {
 };
 `;
 
-	const componentScss = getAllFragmentStyleClasses(fragment, [], globalStyleClasses).map((styleClass: any) => {
-		if (!styleClass.content || !styleClass.content.trim()) {
-			return null;
-		}
+	const componentScss = `
+@use '@carbon/react' with (
+	$use-flexbox-grid: true
+);
 
-		return `.${styleClass.id} {
-			${styleClass.content}
-		}`;
-	}).join('\n');
+${getAllFragmentStyleClasses(fragment, [], globalStyleClasses).map((styleClass: any) => {
+	if (!styleClass.content || !styleClass.content.trim()) {
+		return null;
+	}
+	return `.${styleClass.id} {
+		${styleClass.content}
+	}`;
+}).join('\n')}`;
 
 	const indexJs
 		= `import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
-
-import "@carbon/styles/css/styles.css";
+import { createRoot } from 'react-dom/client';';
 
 import { FragmentComponent } from './component.js';
 
@@ -134,18 +136,21 @@ const App = () => {
 		</div>
 	);
 }
-ReactDOM.render(<App />, document.getElementById('root'));
-`;
+
+const domNode = document.getElementById('root');
+const root = createRoot(domNode);
+root.render(
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>
+);`;
+
 	const packageJson = {
 		dependencies: {
-			'carbon-components': '10.58.0',
-			'@carbon/react': '1.36.0',
-			'@carbon/styles': '1.36.0',
-			react: '16.12.0',
-			'react-dom': '16.12.0',
-			'react-scripts': '3.0.1',
-			'sass': '1.45.0',
-			emotion: '10.0.27'
+			'@carbon/react': '1.41.0',
+			react: '18.2.0',
+			'react-dom': '18.2.0',
+			'sass': '1.45.0'
 		}
 	};