Skip to content

Commit 5551d7e

Browse files
authored
fix: update latest export codes (#309)
1 parent d982860 commit 5551d7e

File tree

2 files changed

+51
-38
lines changed

2 files changed

+51
-38
lines changed

app/src/routes/edit/share-options/exports/frameworks/angular/latest/fragment.ts

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -187,8 +187,6 @@ export const createAngularApp = (fragment: any, fragments: any[], globalStyleCla
187187
`import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
188188
import { AppModule } from './app/app.module';
189189
190-
import "@carbon/styles/css/styles.css";
191-
192190
platformBrowserDynamic()
193191
.bootstrapModule(AppModule)
194192
.catch(err => console.log(err));
@@ -220,26 +218,36 @@ export const createAngularApp = (fragment: any, fragments: any[], globalStyleCla
220218
]
221219
}, null, '\t');
222220

223-
const styleScss = getUsedCollectionsAngularStyleImportPaths(customComponentsCollections, fragment.data)
221+
const styleScss = `@use "@carbon/styles/scss/config" with (
222+
// Use flexbox for grid - stick to CSS Grid or Flexbox
223+
// CSS Grid has become the default grid system in v11
224+
$use-flexbox-grid: true
225+
);
226+
227+
@use "@carbon/styles";
228+
229+
body {
230+
@include styles.theme(styles.$white);
231+
}
232+
${getUsedCollectionsAngularStyleImportPaths(customComponentsCollections, fragment.data)
224233
.map(path => `@import '${path}';`)
225-
.join('\n');
234+
.join('\n')}`;
226235

227236
const packageJson = {
228237
dependencies: {
229-
'@angular/animations': '12.2.0',
230-
'@angular/common': '12.2.0',
231-
'@angular/compiler': '12.2.0',
232-
'@angular/core': '12.2.0',
233-
'@angular/forms': '12.2.0',
234-
'@angular/platform-browser': '12.2.0',
235-
'@angular/platform-browser-dynamic': '12.2.0',
236-
'@angular/router': '12.2.0',
237-
'@carbon/styles': '1.36.0',
238-
'rxjs': '6.6.0',
238+
'@angular/animations': '14.2.0',
239+
'@angular/common': '14.2.0',
240+
'@angular/compiler': '14.2.0',
241+
'@angular/core': '14.2.0',
242+
'@angular/forms': '14.2.0',
243+
'@angular/platform-browser': '14.2.0',
244+
'@angular/platform-browser-dynamic': '14.2.0',
245+
'@angular/router': '14.2.0',
246+
'@carbon/styles': '1.45.0',
247+
'rxjs': '7.5.0',
239248
'tslib': '2.3.0',
240-
'sass': '1.45.0',
241249
'zone.js': '0.11.4',
242-
'carbon-components-angular': '5.14.10',
250+
'carbon-components-angular': '5.25.0',
243251
...getUsedCollectionsAngularDependencies(customComponentsCollections, fragment.data)
244252
}
245253
};

app/src/routes/edit/share-options/exports/frameworks/react/latest/fragment.ts

Lines changed: 27 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -94,8 +94,8 @@ export const createReactApp = (fragment: any, fragments: any[], globalStyleClass
9494
`;
9595
const componentJs
9696
= `import React from 'react';
97+
import './component.scss';
9798
${fragmentTemplate.imports};
98-
${hasFragmentStyleClasses(fragment) ? "\nimport './component.scss';\n" : ''}
9999
export const FragmentComponent = ({state, setState}) => {
100100
const handleInputChange = (event) => {
101101
setState({...state, [event.target.name]: event.target.value});
@@ -107,21 +107,23 @@ export const FragmentComponent = ({state, setState}) => {
107107
};
108108
`;
109109

110-
const componentScss = getAllFragmentStyleClasses(fragment, [], globalStyleClasses).map((styleClass: any) => {
111-
if (!styleClass.content || !styleClass.content.trim()) {
112-
return null;
113-
}
110+
const componentScss = `
111+
@use '@carbon/react' with (
112+
$use-flexbox-grid: true
113+
);
114114
115-
return `.${styleClass.id} {
116-
${styleClass.content}
117-
}`;
118-
}).join('\n');
115+
${getAllFragmentStyleClasses(fragment, [], globalStyleClasses).map((styleClass: any) => {
116+
if (!styleClass.content || !styleClass.content.trim()) {
117+
return null;
118+
}
119+
return `.${styleClass.id} {
120+
${styleClass.content}
121+
}`;
122+
}).join('\n')}`;
119123

120124
const indexJs
121125
= `import React, { useState } from 'react';
122-
import ReactDOM from 'react-dom';
123-
124-
import "@carbon/styles/css/styles.css";
126+
import { createRoot } from 'react-dom/client';';
125127
126128
import { FragmentComponent } from './component.js';
127129
@@ -134,18 +136,21 @@ const App = () => {
134136
</div>
135137
);
136138
}
137-
ReactDOM.render(<App />, document.getElementById('root'));
138-
`;
139+
140+
const domNode = document.getElementById('root');
141+
const root = createRoot(domNode);
142+
root.render(
143+
<React.StrictMode>
144+
<App />
145+
</React.StrictMode>
146+
);`;
147+
139148
const packageJson = {
140149
dependencies: {
141-
'carbon-components': '10.58.0',
142-
'@carbon/react': '1.36.0',
143-
'@carbon/styles': '1.36.0',
144-
react: '16.12.0',
145-
'react-dom': '16.12.0',
146-
'react-scripts': '3.0.1',
147-
'sass': '1.45.0',
148-
emotion: '10.0.27'
150+
'@carbon/react': '1.41.0',
151+
react: '18.2.0',
152+
'react-dom': '18.2.0',
153+
'sass': '1.45.0'
149154
}
150155
};
151156

0 commit comments

Comments
 (0)