feat: Website - Display the Migration tab

packages/dx-demo-shell/scripts/demos-generator.js

@@ -2,7 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import mustache from 'mustache';
 
-import { overrideFileIfChanged } from './fs-utils.js';
+import { writeStringToFile } from './fs-utils.js';
 
 const DEMOS_FOLDER = './src/demo-sources';
 const THEMES_FOLDER = './src/theme-sources';
@@ -47,7 +47,7 @@ const removeSuffix = (str, suffix) => str.substring(0, str.length - suffix.lengt
 const createFromTemplate = (sourceFilename, outputFilename, data) => {
   const source = fs.readFileSync(sourceFilename, 'utf-8');
   const output = mustache.render(source, data);
-  overrideFileIfChanged(outputFilename, output);
+  writeStringToFile(outputFilename, output);
   cancelFileRemoving(outputFilename);
 };
 
@@ -77,6 +77,16 @@ export const loadDemosToGenerate = (themeNames) => {
             }
             const demoExtension = getDemoExtension(nestedFile);
             const demoName = removeSuffix(nestedFile, `.${demoExtension}`);
+            const isMigrationSample = file.startsWith('$');
+            if (isMigrationSample) {
+              demos.push({
+                sectionName,
+                demoName,
+                demoExtension,
+                isMigrationSample: true,
+              });
+              return;
+            }
             const testFile = fs.existsSync(path.join(DEMOS_FOLDER, sectionName, `${demoName}${TEST_SUFFIX}.jsxt`))
               ? path.join(DEMOS_FOLDER, sectionName, `${demoName}${TEST_SUFFIX}.jsxt`)
               : getTestFileName(demoExtension);
@@ -174,15 +184,21 @@ export const generateDemos = (demos) => {
     generateTest,
     generateSsrTest,
   }) => {
+    const themeData = themeName
+      ? JSON.parse(fs.readFileSync(path.join(THEMES_FOLDER, themeName, THEME_DEMO_DATA_FILE), 'utf-8'))
+      : {};
+
     const demoSourceData = {
       themeName,
       sectionName,
       demoName: `${demoName}${generateDemo ? GENERATED_SUFFIX : ''}`,
-      ...JSON.parse(fs.readFileSync(path.join(THEMES_FOLDER, themeName, THEME_DEMO_DATA_FILE), 'utf-8')),
+      ...themeData,
     };
 
     try {
-      fs.mkdirSync(path.join(DEMOS_FOLDER, sectionName, themeName));
+      if (themeName) {
+        fs.mkdirSync(path.join(DEMOS_FOLDER, sectionName, themeName));
+      }
     } catch (e) {} // eslint-disable-line no-empty
 
     if (generateDemo) {

packages/dx-demo-shell/scripts/fs-utils.js

@@ -1,12 +1,14 @@
 import fs from 'fs';
 
-export const overrideFileIfChanged = (filename, data) => {
+export const writeStringToFile = (filename, data, overwriteData = true) => {
   let existingData;
   if (fs.existsSync(filename)) {
     existingData = fs.readFileSync(filename, 'utf-8');
   }
-  if (existingData !== data) {
+  if (overwriteData && existingData !== data) {
     fs.writeFileSync(filename, data, 'utf-8');
+  } else if (!overwriteData) {
+    fs.writeFileSync(filename, `${existingData}\n${data}`, 'utf-8');
   }
 };
 const indent = level => ' '.repeat(level * 2);
@@ -35,6 +37,7 @@ const stringifyEntity = (entity, level) => {
   if (type === "string" || type === "number") {
     return entity + ',\n';
   }
+
   throw new Error('unsupported entity');
 }
 const stringifyObject = (obj, level) => Object.keys(obj)
@@ -44,9 +47,10 @@ const stringifyObject = (obj, level) => Object.keys(obj)
 
 const stringify = obj => stringifyEntity(obj, 0);
 
-export const writeObjectToFile = (filePath, obj, varName) => {
-  overrideFileIfChanged(
+export const writeObjectToFile = (filePath, obj, varName, overwriteData = true) => {
+  writeStringToFile(
     filePath,
     `export const ${varName} = ${stringify(obj)};\n`,
+    overwriteData,
   );
 };

packages/dx-demo-shell/scripts/registry-generator.js

@@ -26,29 +26,63 @@ export const generateDemoRegistry = (demos, folderPath, getDemoLink) => {
     );
   });
 
-  const sections = Object.keys(structuredDemos).reduce((sectionsAcc, sectionName) => {
-    sectionsAcc[sectionName] = Object.keys(structuredDemos[sectionName]).reduce((demosAcc, demoName) => {
-      demosAcc[demoName] = structuredDemos[sectionName][demoName]
-        .reduce((themesAcc, { themeName, generateDemo, demoExtension }) => {
-          const fileName = `${DEMOS_FOLDER}/${sectionName}/${themeName}/${demoName}${generateDemo ? GENERATED_SUFFIX : ''}.${demoExtension}`;
-          const demoSource = getFileContents(fileName);
-          const helperFiles = parseHelperFiles(demoSource);
-
-          themesAcc[themeName] = {
-            ...getDemoLink(fileName) ? { demo: getDemoLink(fileName) } : {},
-            source: demoSource,
-            productName: `"${productName}"`,
-            helperFiles,
-            ...(demoExtension === 'tsx') ? { requireTs: "true" } : {},
-          };
-          return themesAcc;
-        }, {});
-
-      return demosAcc;
-    }, {});
-
-    return sectionsAcc;
-  }, {});
+  const selectFromDemos = getSelector => Object.keys(structuredDemos).reduce((
+    sectionsAcc,
+    sectionName,
+  ) => ({
+    ...sectionsAcc,
+    [sectionName]: Object.keys(structuredDemos[sectionName]).reduce((demosAcc, demoName) => ({
+      ...demosAcc,
+      [demoName]: structuredDemos[sectionName][demoName].reduce(
+        getSelector(sectionName, demoName),
+        {},
+      ),
+    }), {}),
+  }), {});
+
+  const demoDataSelector = (sectionName, demoName) => (acc, {
+    themeName,
+    generateDemo,
+    demoExtension,
+    isMigrationSample,
+  }) => {
+    if (isMigrationSample) {
+      return acc;
+    }
+
+    const fileName = `${DEMOS_FOLDER}/${sectionName}/${themeName}/${demoName}${generateDemo ? GENERATED_SUFFIX : ''}.${demoExtension}`;
+    const demoSource = getFileContents(fileName);
+    const helperFiles = parseHelperFiles(demoSource);
+
+    acc[themeName] = {
+      ...getDemoLink(fileName) ? { demo: getDemoLink(fileName) } : {},
+      source: demoSource,
+      productName: `"${productName}"`,
+      helperFiles,
+      ...(demoExtension === 'tsx') ? { requireTs: 'true' } : {},
+    };
+    return acc;
+  };
+
+  const migrationSampleSelector = (sectionName, demoName) => (acc, {
+    demoExtension,
+    isMigrationSample,
+  }) => {
+    if (!isMigrationSample) {
+      return acc;
+    }
+
+    const fileName = `${DEMOS_FOLDER}/${sectionName}/$migration/${demoName}.${demoExtension}`;
+    const demoSource = getFileContents(fileName);
+
+    return {
+      source: demoSource,
+    };
+  };
+
+  const sections = selectFromDemos(demoDataSelector);
+  const migrationSamples = selectFromDemos(migrationSampleSelector);
 
   writeObjectToFile(folderPath, sections, 'demos');
+  writeObjectToFile(folderPath, migrationSamples, 'migrationSamples', false);
 };

packages/dx-demo-shell/src/demo-viewer/demo-code-provider.jsx

@@ -70,6 +70,12 @@ export class DemoCodeProvider extends React.PureComponent {
     return demoSources[sectionName][demoName][themeName] || {};
   }
 
+  getMigrationSampleCode() {
+    const { sectionName, demoName } = this.props;
+    const { migrationSamples } = this.context;
+    return migrationSamples[sectionName][demoName]?.source || '';
+  }
+
   getHelperFiles() {
     const { themeName } = this.props;
     const { themeComponents, demoData } = this.context;
@@ -160,11 +166,13 @@ export class DemoCodeProvider extends React.PureComponent {
     const { requireTs } = this.getDemoConfig();
     const onEditableLinkChange = this.onEditableLinkChange.bind(this);
     const { editableLink } = this.state;
+    const migrationSample = this.getMigrationSampleCode();
 
     return children({
       html,
       sandboxHtml,
       code,
+      migrationSample,
       helperFiles,
       externalDeps,
       requireTs,

packages/dx-demo-shell/src/demo-viewer/demo-viewer.css

@@ -1,3 +1,90 @@
 span.nav-link {
   cursor: pointer;
 }
+
+.demo-viewer .alert-note {
+  border-radius: 6px;
+  margin: 20px 0;
+  padding: 12px 20px;
+  color: #183C57;
+}
+
+.demo-viewer .alert-note .part-title {
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 24px;
+}
+
+.demo-viewer .nav {
+  flex-wrap: nowrap;
+}
+
+.demo-viewer .codesandbox-button {
+  display: none;
+}
+
+.demo-viewer .theme-selector {
+  margin-left: 290px;
+  display: none;
+}
+
+.demo-viewer .theme-selector-displayed {
+  margin-top: 0;
+}
+
+.demo-viewer .theme-selector-hidden {
+  margin-top: 0;
+}
+
+@media (min-width: 480px) {
+  .demo-viewer .theme-selector {
+    display: block;
+  }
+
+  .demo-viewer .theme-selector-displayed {
+    margin-top: -42px;
+  }
+}
+
+@media (min-width: 680px) {
+  .demo-viewer .codesandbox-button {
+    display: inline-block;
+  }
+
+  .demo-viewer .theme-selector {
+    margin-left: 500px;
+  }
+}
+
+@media (min-width: 1000px) {
+  .demo-viewer .nav .nav-link {
+    padding: 0.5rem 0.75rem;
+  }
+
+  .demo-viewer .codesandbox-button {
+    margin-left: 15px;
+  }
+
+  .demo-viewer .theme-selector {
+    margin-left: 380px;
+  }
+
+  .demo-viewer .theme-selector:has(.migration-tab) {
+    margin-left: 450px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .demo-viewer .nav .nav-link {
+    padding: 0.5rem 1rem;
+  }
+
+  .demo-viewer .codesandbox-button {
+    margin-left: 20px;
+  }
+
+  .demo-viewer .theme-selector {
+    margin-left: 500px;
+  }
+}
+