create-sitecore-jss 20.0.0-canary.78

package/dist/templates/nextjs-styleguide/scripts/scaffold-component.ts

@@ -0,0 +1,130 @@
+/*
+  Component Scaffolding Script
+  This is a script that enables scaffolding a new JSS component using `jss scaffold <ComponentName>`.
+  The default convention is that component names must start with a capital letter, and can contain
+  letters, number, underscores, or dashes.
+  
+  If the <ComponentName> parameter includes a path, it must be relative to the src/components folder.
+  For example, `jss scaffold search/SearchBox` will create a component called `SearchBox` in
+  `src/components/search/SearchBox.tsx`. Specifying a relative path is optional, and just providing
+  the name is ok.
+
+  Edit this script if you wish to use your own conventions for component storage in your JSS app.
+*/
+
+/* eslint-disable no-throw-literal,no-console */
+
+import fs from 'fs';
+import path from 'path';
+import chalk from 'chalk';
+import generateComponentSrc from './templates/component-src';
+import generateComponentManifest from './templates/component-manifest';
+
+const componentManifestDefinitionsPath = 'sitecore/definitions/components';
+
+const componentRootPath = 'src/components';
+
+// Matches component names that start with a capital letter, and contain only letters, number,
+// underscores, or dashes. Optionally, the component name can be preceded by a relative path
+const nameParamFormat = new RegExp(/^((?:[\w-]+\/)*)([A-Z][\w-]+)$/);
+const componentArg = process.argv[2];
+
+if (!componentArg) {
+  throw 'Component name was not passed. Usage: jss scaffold <ComponentName>';
+}
+
+const regExResult = nameParamFormat.exec(componentArg);
+
+if (regExResult === null) {
+  throw `Component name should start with an uppercase letter and contain only letters, numbers,
+dashes, or underscores. If specifying a path, it must be relative to src/components`;
+}
+
+const componentPath = regExResult[1];
+const componentName = regExResult[2];
+const filename = `${componentName}.tsx`;
+
+const componentOutputPath = scaffoldFile(
+  componentRootPath,
+  generateComponentSrc(componentName),
+  filename
+);
+
+let manifestOutputPath = null;
+if (fs.existsSync(componentManifestDefinitionsPath)) {
+  const filename = `${componentName}.sitecore.ts`;
+
+  manifestOutputPath = scaffoldFile(
+    componentManifestDefinitionsPath,
+    generateComponentManifest(componentName),
+    filename
+  );
+} else {
+  console.log(
+    chalk.red(`Not scaffolding manifest because ${componentManifestDefinitionsPath}
+did not exist. This is normal for Sitecore-first workflow.`)
+  );
+}
+console.log(
+  chalk.green(`
+Scaffolding of ${componentName} complete.
+Next steps:`)
+);
+
+if (manifestOutputPath) {
+  console.log(`* Define the component's data in ${chalk.green(manifestOutputPath)}`);
+} else {
+  console.log(
+    `* Scaffold the component in Sitecore using '${chalk.green(
+      `jss deploy component ${componentName} --allowedPlaceholders placeholder-for-component`
+    )}, or create the rendering item and datasource template yourself.`
+  );
+}
+if (componentOutputPath) {
+  console.log(`* Implement the React component in ${chalk.green(componentOutputPath)}`);
+}
+if (manifestOutputPath) {
+  console.log(
+    `* Add the component to a route layout (/data/routes) and test it with ${chalk.green(
+      'jss start'
+    )}`
+  );
+} else {
+  console.log(
+    `* Deploy your app with the new component to Sitecore (${chalk.green(
+      'jss deploy:watch'
+    )} or ${chalk.green('jss deploy files')})`
+  );
+  console.log(`* Add the component to a route using Sitecore Experience Editor, and test it.`);
+}
+
+/**
+ * Force to use `crlf` line endings, we are using `crlf` across the project.
+ * Replace: `lf` (\n), `cr` (\r)
+ * @param {string} content
+ */
+function editLineEndings(content: string) {
+  return content.replace(/\r|\n/gm, '\r\n');
+}
+
+/**
+ * Creates a file relative to the specified path if the file doesn't exist. Creates directories as needed.
+ * @param {string} rootPath - the root path
+ * @param {string} fileContent - the file content
+ * @param {string} filename - the filename
+ * @returns the new file's filepath
+ */
+function scaffoldFile(rootPath: string, fileContent: string, filename: string): string | null {
+  const outputDir = path.join(rootPath, componentPath);
+  const outputFile = path.join(outputDir, filename);
+
+  if (fs.existsSync(outputFile)) {
+    console.log(chalk.red(`Skipping creating ${outputFile}; already exists.`));
+    return null;
+  }
+
+  fs.mkdirSync(outputDir, { recursive: true });
+  fs.writeFileSync(outputFile, editLineEndings(fileContent), 'utf8');
+  console.log(chalk.green(`File ${outputFile} has been scaffolded.`));
+  return outputFile;
+}

package/dist/templates/nextjs-styleguide/scripts/templates/component-manifest.ts

@@ -0,0 +1,30 @@
+/**
+ * Generates manifest API boilerplate for a component under `sitecore/definitions/components`
+ * @param componentName - the component name
+ * @returns component manifest boilerplate as a string
+ */
+function generateComponentManifest(componentName: string): string {
+  return `// eslint-disable-next-line no-unused-vars
+import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/**
+ * Adds the ${componentName} component to the disconnected manifest.
+ * This function is invoked by convention (*.sitecore.ts) when 'jss manifest' is run.
+ * @param {Manifest} manifest Manifest instance to add components to
+ */
+export default function ${componentName}(manifest: Manifest): void {
+  manifest.addComponent({
+    name: '${componentName}',
+    icon: SitecoreIcon.DocumentTag,
+    fields: [{ name: 'heading', type: CommonFieldTypes.SingleLineText }],
+    /*
+    If the component implementation uses <Placeholder> or withPlaceholder to expose a placeholder,
+    register it here, or components added to that placeholder will not be returned by Sitecore:
+    placeholders: ['exposed-placeholder-name']
+    */
+  });
+}
+`;
+}
+
+export default generateComponentManifest;

package/dist/templates/nextjs-styleguide/sitecore/definitions/component-content.sitecore.ts

@@ -0,0 +1,117 @@
+import {
+  Manifest,
+  ItemDefinition,
+  mergeFs,
+  MergeFsResult,
+} from '@sitecore-jss/sitecore-jss-dev-tools';
+import path from 'path';
+import fs from 'fs';
+
+/**
+ * Adds shared datasource items (content data shared between components on different routes) the disconnected manifest.
+ * Component content items are conventionally defined in /data/component-content, similar to route items.
+ * This function is invoked by convention (*.sitecore.js) when `jss manifest` is run.
+ * @param {Manifest} manifest
+ * @returns {Promise}
+ */
+export default function addComponentContentToManifest(manifest: Manifest): Promise<void> {
+  const rootItemName = 'Components';
+  const startPath = './data/component-content'; // relative to process invocation (i.e. where package.json lives)
+
+  if (!fs.existsSync(startPath)) return Promise.resolve();
+
+  return mergeFs(startPath)
+    .then((result) => {
+      const items = convertToItems(
+        result,
+        path.resolve(startPath),
+        rootItemName,
+        manifest.language
+      );
+      return items;
+    })
+    .then((contentData) => {
+      if (contentData) {
+        manifest.addContent(contentData);
+      }
+    });
+}
+
+/**
+ * Maps filesystem content data into manifest content item data.
+ * @param {MergeFsResult} data Filesystem data (files and folders under current path)
+ * @param {string} basePath The base physical path to calculate relative item paths from
+ * @param {string} rootItemName Name of the root item to place non-content items under in Sitecore. Normally $siteRoot/Content.
+ * @param {string} language Language the manifest is being created in. Conventionally affects the expected filename.
+ * @returns {ItemDefinition}
+ */
+function convertToItems(
+  data: MergeFsResult,
+  basePath: string,
+  rootItemName: string,
+  language: string
+): ItemDefinition {
+  const itemPath = convertPhsyicalPathToItemRelativePath(data.path, basePath);
+  const name = itemPath.substr(itemPath.lastIndexOf('/') + 1);
+
+  let result;
+
+  const contentItemPattern = new RegExp(`^${language}\\.(yaml|yml|json)$`, 'i');
+
+  const contentFileData = data.files.find((f) => contentItemPattern.test(f.filename));
+
+  if (contentFileData && contentFileData.contents) {
+    // the path has a valid content item definition
+    result = contentFileData.contents;
+
+    // Set the path to the item when imported in Sitecore.
+    // NOTE: Importing to any Sitecore path the import user has rights to is allowed; '$site/Content' is a convention only.
+    result.path = itemPath;
+
+    // content item name defaults to parent folder name if not explicit
+    if (!result.name) {
+      result.name = name;
+    }
+  } else if (data.folders.length > 0) {
+    // The path does not have a content item definition (i.e. en.yml),
+    // but it does have child folders (which may contain valid content items)
+    // it will be defined as a Folder item in Sitecore.
+    result = {
+      path: itemPath,
+      name: name || rootItemName,
+      displayName: name || rootItemName,
+      template: 'Folder',
+      children: [],
+    };
+  }
+
+  // recursively process child paths
+  if (data.folders.length > 0) {
+    result.children = data.folders
+      .map((folder) => convertToItems(folder, basePath, rootItemName, language))
+      .filter((item) => item); // remove null results
+  }
+
+  return result;
+}
+
+/**
+ * Converts a physical filesystem path into a relative Sitecore item path.
+ * i.e. if physicalPath = /var/log and basePath = /var, this returns /log.
+ * @param {string} physicalPath
+ * @param {string} basePath
+ */
+function convertPhsyicalPathToItemRelativePath(physicalPath: string, basePath: string) {
+  const targetPathSeparator = '/';
+
+  // normalize path separators to /
+  const normalizedPath = physicalPath.replace(basePath, '').replace(/\\/g, targetPathSeparator);
+
+  if (!normalizedPath) {
+    return targetPathSeparator;
+  }
+
+  return normalizedPath.indexOf(targetPathSeparator) > 0
+    ? `${targetPathSeparator}${normalizedPath}`
+    : normalizedPath;
+}

package/dist/templates/nextjs-styleguide/sitecore/definitions/components/ContentBlock.sitecore.ts

@@ -0,0 +1,19 @@
+import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/**
+ * Adds the ContentBlock component to the disconnected manifest.
+ * This function is invoked by convention (*.sitecore.js) when `jss manifest` is run.
+ * @param {Manifest} manifest Manifest instance to add components to
+ */
+export default function ContentBlock(manifest: Manifest): void {
+  manifest.addComponent({
+    name: 'ContentBlock',
+    templateName: '<%- helper.getAppPrefix(appPrefix, appName) %>ContentBlock',
+    // totally optional, but fun
+    icon: SitecoreIcon.DocumentTag,
+    fields: [
+      { name: 'heading', type: CommonFieldTypes.SingleLineText },
+      { name: 'content', type: CommonFieldTypes.RichText },
+    ],
+  });
+}

package/dist/templates/nextjs-styleguide/sitecore/definitions/components/fields/Styleguide-FieldUsage-Checkbox.sitecore.ts

@@ -0,0 +1,23 @@
+import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/**
+ * Adds the Styleguide-FieldUsage-Checkbox component to the disconnected manifest.
+ * This function is invoked by convention (*.sitecore.js) when 'jss manifest' is run.
+ * @param {Manifest} manifest Manifest instance to add components to
+ */
+export default function StyleguideFieldUsageCheckbox(manifest: Manifest): void {
+  manifest.addComponent({
+    name: 'Styleguide-FieldUsage-Checkbox',
+    templateName: '<%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-FieldUsage-Checkbox',
+    icon: SitecoreIcon.CheckboxSelected,
+    fields: [
+      { name: 'checkbox', type: CommonFieldTypes.Checkbox },
+      { name: 'checkbox2', type: CommonFieldTypes.Checkbox },
+    ],
+    // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
+    // inheritance adds fields defined on the base template(s) implicitly to this component
+    inherits: [
+      '<%- helper.getAppPrefix(appPrefix, appName) %>styleguide-explanatory-component-template',
+    ],
+  });
+}

package/dist/templates/nextjs-styleguide/sitecore/definitions/components/fields/Styleguide-FieldUsage-ContentList.sitecore.ts

@@ -0,0 +1,32 @@
+import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools';
+import packageJson from '../../../../package.json';
+
+/**
+ * Adds the Styleguide-FieldUsage-ContentList component to the disconnected manifest.
+ * This function is invoked by convention (*.sitecore.js) when 'jss manifest' is run.
+ * @param {Manifest} manifest Manifest instance to add components to
+ */
+export default function StyleguideFieldUsageContentList(manifest: Manifest): void {
+  manifest.addComponent({
+    name: 'Styleguide-FieldUsage-ContentList',
+    templateName: '<%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-FieldUsage-ContentList',
+    icon: SitecoreIcon.ListStyle_numbered,
+    fields: [
+      {
+        name: 'sharedContentList',
+        type: CommonFieldTypes.ContentList,
+        // this sets the root path in Sitecore that linked items can be selected from.
+        // the path is based on the path the shared items are defined in, under /data/content.
+        // Using 'source' is recommended to help content editors find the correct items to refer to,
+        // unless they can refer to any item in the whole site.
+        source: `dataSource=/sitecore/content/${packageJson.config.appName}/Content/Styleguide/ContentListField`,
+      },
+      { name: 'localContentList', type: CommonFieldTypes.ContentList },
+    ],
+    // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
+    // inheritance adds fields defined on the base template(s) implicitly to this component
+    inherits: [
+      '<%- helper.getAppPrefix(appPrefix, appName) %>styleguide-explanatory-component-template',
+    ],
+  });
+}

package/dist/templates/nextjs-styleguide/sitecore/definitions/components/fields/Styleguide-FieldUsage-Custom.sitecore.ts

@@ -0,0 +1,23 @@
+import { SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/**
+ * Adds the Styleguide-FieldUsage-Custom component to the disconnected manifest.
+ * This function is invoked by convention (*.sitecore.js) when 'jss manifest' is run.
+ * @param {Manifest} manifest Manifest instance to add components to
+ */
+export default function StyleguideFieldUsageCustom(manifest: Manifest): void {
+  manifest.addComponent({
+    name: 'Styleguide-FieldUsage-Custom',
+    templateName: '<%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-FieldUsage-Custom',
+    icon: SitecoreIcon.Gearwheel,
+    // NOTE: not using 'CommonFieldTypes' here, because it's a custom field.
+    // The 'Integer' field ships with Sitecore; something really custom would need to be
+    // implemented as a Sitecore field type as well.
+    fields: [{ name: 'customIntField', type: 'Integer' }],
+    // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
+    // inheritance adds fields defined on the base template(s) implicitly to this component
+    inherits: [
+      '<%- helper.getAppPrefix(appPrefix, appName) %>styleguide-explanatory-component-template',
+    ],
+  });
+}

package/dist/templates/nextjs-styleguide/sitecore/definitions/components/fields/Styleguide-FieldUsage-Date.sitecore.ts

@@ -0,0 +1,23 @@
+import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/**
+ * Adds the Styleguide-FieldUsage-Date component to the disconnected manifest.
+ * This function is invoked by convention (*.sitecore.js) when 'jss manifest' is run.
+ * @param {Manifest} manifest Manifest instance to add components to
+ */
+export default function StyleguideFieldUsageDate(manifest: Manifest): void {
+  manifest.addComponent({
+    name: 'Styleguide-FieldUsage-Date',
+    templateName: '<%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-FieldUsage-Date',
+    icon: SitecoreIcon.Clock,
+    fields: [
+      { name: 'date', type: CommonFieldTypes.Date },
+      { name: 'dateTime', type: CommonFieldTypes.DateTime },
+    ],
+    // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
+    // inheritance adds fields defined on the base template(s) implicitly to this component
+    inherits: [
+      '<%- helper.getAppPrefix(appPrefix, appName) %>styleguide-explanatory-component-template',
+    ],
+  });
+}

package/dist/templates/nextjs-styleguide/sitecore/definitions/components/fields/Styleguide-FieldUsage-File.sitecore.ts

@@ -0,0 +1,20 @@
+import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/**
+ * Adds the Styleguide-FieldUsage-File component to the disconnected manifest.
+ * This function is invoked by convention (*.sitecore.js) when 'jss manifest' is run.
+ * @param {Manifest} manifest Manifest instance to add components to
+ */
+export default function StyleguideFieldUsageFile(manifest: Manifest): void {
+  manifest.addComponent({
+    name: 'Styleguide-FieldUsage-File',
+    templateName: '<%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-FieldUsage-File',
+    icon: SitecoreIcon.FloppyDisk,
+    fields: [{ name: 'file', type: CommonFieldTypes.File }],
+    // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
+    // inheritance adds fields defined on the base template(s) implicitly to this component
+    inherits: [
+      '<%- helper.getAppPrefix(appPrefix, appName) %>styleguide-explanatory-component-template',
+    ],
+  });
+}

package/dist/templates/nextjs-styleguide/sitecore/definitions/components/fields/Styleguide-FieldUsage-Image.sitecore.ts

@@ -0,0 +1,23 @@
+import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/**
+ * Adds the Styleguide-FieldUsage-Image component to the disconnected manifest.
+ * This function is invoked by convention (*.sitecore.js) when 'jss manifest' is run.
+ * @param {Manifest} manifest Manifest instance to add components to
+ */
+export default function StyleguideFieldUsageImage(manifest: Manifest): void {
+  manifest.addComponent({
+    name: 'Styleguide-FieldUsage-Image',
+    templateName: '<%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-FieldUsage-Image',
+    icon: SitecoreIcon.PhotoPortrait,
+    fields: [
+      { name: 'sample1', type: CommonFieldTypes.Image },
+      { name: 'sample2', type: CommonFieldTypes.Image },
+    ],
+    // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
+    // inheritance adds fields defined on the base template(s) implicitly to this component
+    inherits: [
+      '<%- helper.getAppPrefix(appPrefix, appName) %>styleguide-explanatory-component-template',
+    ],
+  });
+}

package/dist/templates/nextjs-styleguide/sitecore/definitions/components/fields/Styleguide-FieldUsage-ItemLink.sitecore.ts

@@ -0,0 +1,32 @@
+import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools';
+import packageJson from '../../../../package.json';
+
+/**
+ * Adds the Styleguide-FieldUsage-ItemLink component to the disconnected manifest.
+ * This function is invoked by convention (*.sitecore.js) when 'jss manifest' is run.
+ * @param {Manifest} manifest Manifest instance to add components to
+ */
+export default function StyleguideFieldUsageItemLink(manifest: Manifest): void {
+  manifest.addComponent({
+    name: 'Styleguide-FieldUsage-ItemLink',
+    templateName: '<%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-FieldUsage-ItemLink',
+    icon: SitecoreIcon.Link,
+    fields: [
+      {
+        name: 'sharedItemLink',
+        type: CommonFieldTypes.ItemLink,
+        // this sets the root path in Sitecore that linked items can be selected from.
+        // the path is based on the path the shared items are defined in, under /data/content.
+        // Using 'source' is recommended to help content editors find the correct items to refer to,
+        // unless they can refer to any item in the whole site.
+        source: `dataSource=/sitecore/content/${packageJson.config.appName}/Content/Styleguide/ItemLinkField`,
+      },
+      { name: 'localItemLink', type: CommonFieldTypes.ItemLink },
+    ],
+    // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
+    // inheritance adds fields defined on the base template(s) implicitly to this component
+    inherits: [
+      '<%- helper.getAppPrefix(appPrefix, appName) %>styleguide-explanatory-component-template',
+    ],
+  });
+}

package/dist/templates/nextjs-styleguide/sitecore/definitions/components/fields/Styleguide-FieldUsage-Link.sitecore.ts

@@ -0,0 +1,25 @@
+import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/**
+ * Adds the Styleguide-FieldUsage-Link component to the disconnected manifest.
+ * This function is invoked by convention (*.sitecore.js) when 'jss manifest' is run.
+ * @param {Manifest} manifest Manifest instance to add components to
+ */
+export default function StyleguideFieldUsageLink(manifest: Manifest): void {
+  manifest.addComponent({
+    name: 'Styleguide-FieldUsage-Link',
+    templateName: '<%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-FieldUsage-Link',
+    icon: SitecoreIcon.Link,
+    fields: [
+      { name: 'externalLink', type: CommonFieldTypes.GeneralLink },
+      { name: 'internalLink', type: CommonFieldTypes.GeneralLink },
+      { name: 'emailLink', type: CommonFieldTypes.GeneralLink },
+      { name: 'paramsLink', type: CommonFieldTypes.GeneralLink },
+    ],
+    // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
+    // inheritance adds fields defined on the base template(s) implicitly to this component
+    inherits: [
+      '<%- helper.getAppPrefix(appPrefix, appName) %>styleguide-explanatory-component-template',
+    ],
+  });
+}

package/dist/templates/nextjs-styleguide/sitecore/definitions/components/fields/Styleguide-FieldUsage-Number.sitecore.ts

@@ -0,0 +1,20 @@
+import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/**
+ * Adds the Styleguide-FieldUsage-Number component to the disconnected manifest.
+ * This function is invoked by convention (*.sitecore.js) when 'jss manifest' is run.
+ * @param {Manifest} manifest Manifest instance to add components to
+ */
+export default function StyleguideFieldUsageNumber(manifest: Manifest): void {
+  manifest.addComponent({
+    name: 'Styleguide-FieldUsage-Number',
+    templateName: '<%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-FieldUsage-Number',
+    icon: SitecoreIcon.NumbersField,
+    fields: [{ name: 'sample', type: CommonFieldTypes.Number }],
+    // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
+    // inheritance adds fields defined on the base template(s) implicitly to this component
+    inherits: [
+      '<%- helper.getAppPrefix(appPrefix, appName) %>styleguide-explanatory-component-template',
+    ],
+  });
+}

package/dist/templates/nextjs-styleguide/sitecore/definitions/components/fields/Styleguide-FieldUsage-RichText.sitecore.ts

@@ -0,0 +1,28 @@
+import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/**
+ * Adds the Styleguide-FieldUsage-RichText component to the disconnected manifest.
+ * This function is invoked by convention (*.sitecore.js) when 'jss manifest' is run.
+ * @param {Manifest} manifest Manifest instance to add components to
+ */
+export default function StyleguideFieldUsageRichText(manifest: Manifest): void {
+  manifest.addComponent({
+    name: 'Styleguide-FieldUsage-RichText',
+    templateName: '<%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-FieldUsage-RichText',
+    icon: SitecoreIcon.TextField,
+    fields: [
+      { name: 'sample', type: CommonFieldTypes.RichText },
+      {
+        name: 'sample2',
+        displayName: 'Customize Name Shown in Sitecore',
+        required: true,
+        type: CommonFieldTypes.RichText,
+      },
+    ],
+    // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
+    // inheritance adds fields defined on the base template(s) implicitly to this component
+    inherits: [
+      '<%- helper.getAppPrefix(appPrefix, appName) %>styleguide-explanatory-component-template',
+    ],
+  });
+}

package/dist/templates/nextjs-styleguide/sitecore/definitions/components/fields/Styleguide-FieldUsage-Text.sitecore.ts

@@ -0,0 +1,28 @@
+import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/**
+ * Adds the Styleguide-FieldUsage-Text component to the disconnected manifest.
+ * This function is invoked by convention (*.sitecore.js) when 'jss manifest' is run.
+ * @param {Manifest} manifest Manifest instance to add components to
+ */
+export default function StyleguideFieldUsageText(manifest: Manifest): void {
+  manifest.addComponent({
+    name: 'Styleguide-FieldUsage-Text',
+    templateName: '<%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-FieldUsage-Text',
+    icon: SitecoreIcon.Text,
+    fields: [
+      { name: 'sample', type: CommonFieldTypes.SingleLineText },
+      {
+        name: 'sample2',
+        displayName: 'Customize Name Shown in Sitecore',
+        required: true,
+        type: CommonFieldTypes.SingleLineText,
+      },
+    ],
+    // inherit fields from another template (../templates/Styleguide-Explanatory-Component)
+    // inheritance adds fields defined on the base template(s) implicitly to this component
+    inherits: [
+      '<%- helper.getAppPrefix(appPrefix, appName) %>styleguide-explanatory-component-template',
+    ],
+  });
+}

package/dist/templates/nextjs-styleguide/sitecore/definitions/components/graphql/GraphQL-ConnectedDemo.sitecore.ts

@@ -0,0 +1,18 @@
+import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/**
+ * Adds the GraphQL-ConnectedDemo component to the disconnected manifest.
+ * This function is invoked by convention (*.sitecore.js) when 'jss manifest' is run.
+ * @param {Manifest} manifest Manifest instance to add components to
+ */
+export default function GraphQLConnectedDemo(manifest: Manifest): void {
+  manifest.addComponent({
+    name: 'GraphQL-ConnectedDemo',
+    templateName: '<%- helper.getAppPrefix(appPrefix, appName) %>GraphQL-ConnectedDemo',
+    icon: SitecoreIcon.GraphConnection_directed,
+    fields: [
+      { name: 'sample1', type: CommonFieldTypes.SingleLineText },
+      { name: 'sample2', type: CommonFieldTypes.GeneralLink },
+    ],
+  });
+}