From 9372da3c22fba02a9f995f64d1cc87f44b75c0af Mon Sep 17 00:00:00 2001 From: Fred Visser <1458528+fredvisser@users.noreply.github.com> Date: Fri, 19 May 2023 15:12:28 -0500 Subject: [PATCH 1/6] Replace icon docs with generated icon table --- .../build/generate-icons/source/index.js | 30 ++++++++++++++++++- .../src/icon-base/tests/icons.stories.ts | 3 +- 2 files changed, 30 insertions(+), 3 deletions(-) diff --git a/packages/nimble-components/build/generate-icons/source/index.js b/packages/nimble-components/build/generate-icons/source/index.js index 0459e19b99..657a4b313d 100644 --- a/packages/nimble-components/build/generate-icons/source/index.js +++ b/packages/nimble-components/build/generate-icons/source/index.js @@ -2,10 +2,11 @@ * Build script for generating Nimble components for icons. * * Iterates through icons provided by nimble-tokens, and generates a Nimble component for each in - * src/icons. Also generates an all-icons barrel file. + * src/icons. Also generates an all-icons barrel file and the icons.mdx Storybook file. */ import { pascalCase, spinalCase } from '@microsoft/fast-web-utilities'; import * as icons from '@ni/nimble-tokens/dist/icons/js'; +import { iconMetadata } from '../../../dist/esm/icon-base/icon-metadata'; const fs = require('fs'); const path = require('path'); @@ -18,6 +19,18 @@ const trimSizeFromName = text => { const generatedFilePrefix = `// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY // See generation source in nimble-components/build/generate-icons\n`; +const mdxFilePrefix = `import { Meta, Title, IconItem } from '@storybook/blocks'; +import * as iconStories from '../icon-base/tests/icons.stories'; + + + +`; + +const mdxIconTablePrefix = ` +| Icon | Synonyms | +| ---- | -------- | +`; + const iconsDirectory = path.resolve(__dirname, '../../../src/icons'); if (fs.existsSync(iconsDirectory)) { @@ -31,7 +44,10 @@ console.log('Finished creating icons directory'); console.log('Writing icon component files'); let allIconsFileContents = `${generatedFilePrefix}\n`; +let mdxFileContents = `${mdxFilePrefix}\n`; +let mdxTableFileContents = `${mdxIconTablePrefix}`; let fileCount = 0; + for (const key of Object.keys(icons)) { const svgName = key; // e.g. "arrowExpanderLeft16X16" const iconName = trimSizeFromName(key); // e.g. "arrowExpanderLeft" @@ -41,6 +57,10 @@ for (const key of Object.keys(icons)) { const className = `Icon${pascalCase(iconName)}`; // e.g. "IconArrowExpanderLeft" const tagName = `icon${pascalCase(iconName)}Tag`; // e.g. "iconArrowExpanderLeftTag" + const iconSynonyms = iconMetadata[className]; + const mdxImportStatements = `import { ${tagName} } from './${fileName}';`; + const mdxIconTableRow = `| <IconItem name="${fileName}"><${elementName} /></IconItem> | ${iconSynonyms?.tags.join(', ')} |`; + const componentFileContents = `${generatedFilePrefix} import { ${svgName} } from '@ni/nimble-tokens/dist/icons/js'; import { DesignSystem } from '@microsoft/fast-foundation'; @@ -70,6 +90,8 @@ export const ${tagName} = DesignSystem.tagFor(${className}); fileCount += 1; allIconsFileContents = allIconsFileContents.concat(`export { ${className} } from './${fileName}';\n`); + mdxFileContents = mdxFileContents.concat(`${mdxImportStatements}\n`); + mdxTableFileContents = mdxTableFileContents.concat(`${mdxIconTableRow}\n`); } console.log(`Finshed writing ${fileCount} icon component files`); @@ -77,3 +99,9 @@ const allIconsFilePath = path.resolve(iconsDirectory, 'all-icons.ts'); console.log('Writing all-icons file'); fs.writeFileSync(allIconsFilePath, allIconsFileContents, { encoding: 'utf-8' }); console.log('Finished writing all-icons file'); + +const iconsMDXFilePath = path.resolve(iconsDirectory, 'icons.mdx'); +console.log('Writing icons.mdx file'); +mdxFileContents = mdxFileContents.concat(`${mdxTableFileContents}`); +fs.writeFileSync(iconsMDXFilePath, mdxFileContents, { encoding: 'utf-8' }); +console.log('Finished writing icons.mdx file'); diff --git a/packages/nimble-components/src/icon-base/tests/icons.stories.ts b/packages/nimble-components/src/icon-base/tests/icons.stories.ts index bfe3ac091b..183b3d13ad 100644 --- a/packages/nimble-components/src/icon-base/tests/icons.stories.ts +++ b/packages/nimble-components/src/icon-base/tests/icons.stories.ts @@ -20,8 +20,7 @@ interface IconArgs { } const metadata: Meta<IconArgs> = { - title: 'Icons', - tags: ['autodocs'] + title: 'Icons' }; export default metadata; From 188e283fcf20847c6419486f249cbc280ef1da9e Mon Sep 17 00:00:00 2001 From: Fred Visser <1458528+fredvisser@users.noreply.github.com> Date: Fri, 19 May 2023 15:13:14 -0500 Subject: [PATCH 2/6] Change files --- ...le-components-897a77b2-4280-475f-977b-21a0571b7acf.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@ni-nimble-components-897a77b2-4280-475f-977b-21a0571b7acf.json diff --git a/change/@ni-nimble-components-897a77b2-4280-475f-977b-21a0571b7acf.json b/change/@ni-nimble-components-897a77b2-4280-475f-977b-21a0571b7acf.json new file mode 100644 index 0000000000..72f995988f --- /dev/null +++ b/change/@ni-nimble-components-897a77b2-4280-475f-977b-21a0571b7acf.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Replace icon docs with generated icon table", + "packageName": "@ni/nimble-components", + "email": "1458528+fredvisser@users.noreply.github.com", + "dependentChangeType": "none" +} From 54206542bc81b381a876f84bd4b06dcfc7aac6d3 Mon Sep 17 00:00:00 2001 From: Fred Visser <1458528+fredvisser@users.noreply.github.com> Date: Mon, 22 May 2023 15:12:46 -0500 Subject: [PATCH 3/6] review feedback --- .../build/generate-icons/source/index.js | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/packages/nimble-components/build/generate-icons/source/index.js b/packages/nimble-components/build/generate-icons/source/index.js index 657a4b313d..1fc07aaa62 100644 --- a/packages/nimble-components/build/generate-icons/source/index.js +++ b/packages/nimble-components/build/generate-icons/source/index.js @@ -23,14 +23,14 @@ const mdxFilePrefix = `import { Meta, Title, IconItem } from '@storybook/blocks' import * as iconStories from '../icon-base/tests/icons.stories'; <Meta of={iconStories} /> -<Title of={iconStories} /> -`; +<Title of={iconStories} />`; -const mdxIconTablePrefix = ` -| Icon | Synonyms | +let mdxTable = `| Icon | Synonyms | | ---- | -------- | `; +let mdxImportStatements = ''; + const iconsDirectory = path.resolve(__dirname, '../../../src/icons'); if (fs.existsSync(iconsDirectory)) { @@ -40,12 +40,11 @@ if (fs.existsSync(iconsDirectory)) { } console.log(`Creating icons directory "${iconsDirectory}"`); fs.mkdirSync(iconsDirectory); +fs.mkdirSync(path.resolve(iconsDirectory, 'tests')); console.log('Finished creating icons directory'); console.log('Writing icon component files'); let allIconsFileContents = `${generatedFilePrefix}\n`; -let mdxFileContents = `${mdxFilePrefix}\n`; -let mdxTableFileContents = `${mdxIconTablePrefix}`; let fileCount = 0; for (const key of Object.keys(icons)) { @@ -58,8 +57,6 @@ for (const key of Object.keys(icons)) { const tagName = `icon${pascalCase(iconName)}Tag`; // e.g. "iconArrowExpanderLeftTag" const iconSynonyms = iconMetadata[className]; - const mdxImportStatements = `import { ${tagName} } from './${fileName}';`; - const mdxIconTableRow = `| <IconItem name="${fileName}"><${elementName} /></IconItem> | ${iconSynonyms?.tags.join(', ')} |`; const componentFileContents = `${generatedFilePrefix} import { ${svgName} } from '@ni/nimble-tokens/dist/icons/js'; @@ -89,9 +86,10 @@ export const ${tagName} = DesignSystem.tagFor(${className}); fs.writeFileSync(filePath, componentFileContents, { encoding: 'utf-8' }); fileCount += 1; - allIconsFileContents = allIconsFileContents.concat(`export { ${className} } from './${fileName}';\n`); - mdxFileContents = mdxFileContents.concat(`${mdxImportStatements}\n`); - mdxTableFileContents = mdxTableFileContents.concat(`${mdxIconTableRow}\n`); + allIconsFileContents += `export { ${className} } from './${fileName}';\n`; + + mdxImportStatements += `import { ${tagName} } from './${fileName}';\n`; + mdxTable += `| <IconItem name="${fileName}"><${elementName} /></IconItem> | ${iconSynonyms?.tags.join(', ')} |\n`; } console.log(`Finshed writing ${fileCount} icon component files`); @@ -100,8 +98,12 @@ console.log('Writing all-icons file'); fs.writeFileSync(allIconsFilePath, allIconsFileContents, { encoding: 'utf-8' }); console.log('Finished writing all-icons file'); -const iconsMDXFilePath = path.resolve(iconsDirectory, 'icons.mdx'); +const mdxFileContents = ` +${mdxFilePrefix}\n +${mdxImportStatements} +${mdxTable}`; + +const iconsMDXFilePath = path.resolve(iconsDirectory, 'tests/icons.mdx'); console.log('Writing icons.mdx file'); -mdxFileContents = mdxFileContents.concat(`${mdxTableFileContents}`); fs.writeFileSync(iconsMDXFilePath, mdxFileContents, { encoding: 'utf-8' }); console.log('Finished writing icons.mdx file'); From 31de1c16027775ae5a891d15d412667d2f649549 Mon Sep 17 00:00:00 2001 From: Fred Visser <1458528+fredvisser@users.noreply.github.com> Date: Mon, 22 May 2023 15:22:04 -0500 Subject: [PATCH 4/6] review feedback --- .../nimble-components/build/generate-icons/source/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/nimble-components/build/generate-icons/source/index.js b/packages/nimble-components/build/generate-icons/source/index.js index 1fc07aaa62..908c02fd47 100644 --- a/packages/nimble-components/build/generate-icons/source/index.js +++ b/packages/nimble-components/build/generate-icons/source/index.js @@ -20,7 +20,7 @@ const generatedFilePrefix = `// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY // See generation source in nimble-components/build/generate-icons\n`; const mdxFilePrefix = `import { Meta, Title, IconItem } from '@storybook/blocks'; -import * as iconStories from '../icon-base/tests/icons.stories'; +import * as iconStories from '../../icon-base/tests/icons.stories'; <Meta of={iconStories} /> <Title of={iconStories} />`; @@ -88,7 +88,7 @@ export const ${tagName} = DesignSystem.tagFor(${className}); allIconsFileContents += `export { ${className} } from './${fileName}';\n`; - mdxImportStatements += `import { ${tagName} } from './${fileName}';\n`; + mdxImportStatements += `import { ${tagName} } from '../${fileName}';\n`; mdxTable += `| <IconItem name="${fileName}"><${elementName} /></IconItem> | ${iconSynonyms?.tags.join(', ')} |\n`; } console.log(`Finshed writing ${fileCount} icon component files`); From 46e1731b018533aa2ccbb3478721504b91cef7e1 Mon Sep 17 00:00:00 2001 From: Fred Visser <1458528+fredvisser@users.noreply.github.com> Date: Mon, 22 May 2023 16:15:33 -0500 Subject: [PATCH 5/6] build issue fix attempt --- .../nimble-components/build/generate-icons/source/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/nimble-components/build/generate-icons/source/index.js b/packages/nimble-components/build/generate-icons/source/index.js index 908c02fd47..12291e9b33 100644 --- a/packages/nimble-components/build/generate-icons/source/index.js +++ b/packages/nimble-components/build/generate-icons/source/index.js @@ -6,7 +6,8 @@ */ import { pascalCase, spinalCase } from '@microsoft/fast-web-utilities'; import * as icons from '@ni/nimble-tokens/dist/icons/js'; -import { iconMetadata } from '../../../dist/esm/icon-base/icon-metadata'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { iconMetadata } from '@ni/nimble-components/dist/esm/icon-base/icon-metadata'; const fs = require('fs'); const path = require('path'); From dee963b034ed9423b51371e16f3a8a708f71433f Mon Sep 17 00:00:00 2001 From: Fred Visser <1458528+fredvisser@users.noreply.github.com> Date: Wed, 24 May 2023 15:34:22 -0500 Subject: [PATCH 6/6] explicit import --- packages/site/landing/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/site/landing/index.ts b/packages/site/landing/index.ts index 7a25f371f6..01a6722411 100644 --- a/packages/site/landing/index.ts +++ b/packages/site/landing/index.ts @@ -1,4 +1,5 @@ import '@ni/nimble-components/dist/esm/theme-provider/design-tokens'; +import '@ni/nimble-components/dist/esm/icon-base/icon-metadata'; import { encircle } from './circle';