Skip to content

Commit

Permalink
feat: Website - Display the Migration tab (#3683)
Browse files Browse the repository at this point in the history 
* site: display Migration tab

* lint rules + script fix

* address Pavel's concerns

* fix for republishing staging

* URL capitalization
  • Loading branch information
@VasilyStrelyaev
VasilyStrelyaev authored Dec 16, 2024
1 parent eabf5bf commit 19a28c4
Show file tree
Hide file tree
Showing 18 changed files with 453 additions and 63 deletions.
24 changes: 20 additions & 4 deletions packages/dx-demo-shell/scripts/demos-generator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
};

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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) {
Expand Down
12 changes: 8 additions & 4 deletions packages/dx-demo-shell/scripts/fs-utils.js
View file
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -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)
Expand All @@ -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,
);
};
80 changes: 57 additions & 23 deletions packages/dx-demo-shell/scripts/registry-generator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};
8 changes: 8 additions & 0 deletions packages/dx-demo-shell/src/demo-viewer/demo-code-provider.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down
87 changes: 87 additions & 0 deletions packages/dx-demo-shell/src/demo-viewer/demo-viewer.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}

Loading

0 comments on commit 19a28c4

Please sign in to comment.