create-sitecore-jss 20.0.0-canary.78

package/dist/templates/nextjs-styleguide/src/components/styleguide/Styleguide-Multilingual.tsx

@@ -0,0 +1,50 @@
+import { Text, Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
+import Link from 'next/link';
+import { useI18n } from 'next-localization';
+import StyleguideSpecimen from './Styleguide-Specimen';
+import { ComponentWithContextProps } from 'lib/component-props';
+import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';
+
+type StyleguideMultilingualProps = ComponentWithContextProps &
+  StyleguideSpecimenFields & {
+    fields: {
+      sample: Field<string>;
+    };
+  };
+
+/**
+ * Demonstrates using the dictionary functionality and defining route data in
+ * multiple languages.
+ */
+const StyleguideMultilingual = (props: StyleguideMultilingualProps): JSX.Element => {
+  const { t, locale } = useI18n();
+
+  return (
+    <StyleguideSpecimen {...props} e2eId="styleguide-multilingual">
+      <Text field={props.fields.sample} encode={false} tag="p" />
+
+      <p>
+        This is a static dictionary entry from <code>/data/dictionary</code>
+        :&nbsp;
+        {t('styleguide-sample')}
+      </p>
+
+      <p>
+        {/* In case if href already includes locale: https://nextjs.org/docs/advanced-features/i18n-routing#transition-between-locales */}
+        <Link href="/en/styleguide" locale={false}>
+          <a>Show in English</a>
+        </Link>
+        <br />
+        <% if (language) { -%>
+        <Link href="/styleguide" locale="<%- language %>">
+          <a>Show in <%- language %></a>
+        </Link>
+        <% } -%>
+      </p>
+
+      <p>The current language is: {locale()}</p>
+    </StyleguideSpecimen>
+  );
+};
+
+export default withDatasourceCheck()<StyleguideMultilingualProps>(StyleguideMultilingual);

package/dist/templates/nextjs-styleguide/src/components/styleguide/Styleguide-RouteFields.tsx

@@ -0,0 +1,37 @@
+import Link from 'next/link';
+import { Text, Field, useSitecoreContext } from '@sitecore-jss/sitecore-jss-nextjs';
+import StyleguideSpecimen from './Styleguide-Specimen';
+import { ComponentProps } from 'lib/component-props';
+import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';
+
+type StyleguideRouteFieldsProps = ComponentProps & StyleguideSpecimenFields;
+
+type StyleguideRouteFields = {
+  pageTitle: Field<string>;
+};
+
+/**
+ * Demonstrates gaining access to route-level fields.
+ * This technique builds on the Styleguide-SitecoreContext technique,
+ * to also get the route level field data and make it editable.
+ */
+const StyleguideRouteFields = (props: StyleguideRouteFieldsProps): JSX.Element => {
+  const value = useSitecoreContext();
+  const fields = value.sitecoreContext.route?.fields as StyleguideRouteFields;
+
+  return (
+    <StyleguideSpecimen {...props} e2eId="styleguide-route-fields">
+      <p>
+        Route level <code>pageTitle</code> field:{' '}
+        {value.sitecoreContext.route && <Text field={fields.pageTitle} />}
+      </p>
+      <p>
+        <Link href="/styleguide/custom-route-type">
+          <a>Sample of using a custom route type</a>
+        </Link>
+      </p>
+    </StyleguideSpecimen>
+  );
+};
+
+export default StyleguideRouteFields;

package/dist/templates/nextjs-styleguide/src/components/styleguide/Styleguide-Section.tsx

@@ -0,0 +1,22 @@
+import { Field, Placeholder, Text, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
+import { ComponentProps } from 'lib/component-props';
+
+type StyleguideSectionProps = ComponentProps & {
+  fields: {
+    heading: Field<string>;
+  };
+};
+
+/**
+ * Represents a category of styleguide specimens within the Styleguide-Layout.
+ * Usage examples are added to the `styleguide-section` placeholder that this
+ * exposes.
+ */
+const StyleguideSection = (props: StyleguideSectionProps): JSX.Element => (
+  <div className="pt-3" id={`i${props.rendering.uid && props.rendering.uid.replace(/[{}]/g, '')}`}>
+    <Text className="border-bottom" field={props.fields.heading} tag="h3" />
+    <Placeholder name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-section" rendering={props.rendering} />
+  </div>
+);
+
+export default withDatasourceCheck()<StyleguideSectionProps>(StyleguideSection);

package/dist/templates/nextjs-styleguide/src/components/styleguide/Styleguide-SitecoreContext.tsx

@@ -0,0 +1,25 @@
+import { useSitecoreContext } from '@sitecore-jss/sitecore-jss-nextjs';
+import StyleguideSpecimen from './Styleguide-Specimen';
+import { ComponentProps } from 'lib/component-props';
+import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';
+
+type StyleguideSitecoreContextProps = ComponentProps & StyleguideSpecimenFields;
+
+/**
+ * Demonstrates gaining access to the route-level Sitecore Context from
+ * within other components.
+ */
+const StyleguideSitecoreContext = (props: StyleguideSitecoreContextProps): JSX.Element => {
+  const { sitecoreContext } = useSitecoreContext();
+
+  return (
+    <StyleguideSpecimen {...props} e2eId="styleguide-sitecore-context">
+      <p>The current Sitecore Context is...</p>
+      <pre style={{ maxHeight: '400px', overflow: 'scroll' }}>
+        {JSON.stringify(sitecoreContext, null, 2)}
+      </pre>
+    </StyleguideSpecimen>
+  );
+};
+
+export default StyleguideSitecoreContext;

package/dist/templates/nextjs-styleguide/src/components/styleguide/Styleguide-Specimen.tsx

@@ -0,0 +1,41 @@
+import { Text, RichText, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
+import { ComponentProps } from 'lib/component-props';
+import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';
+
+type StyleguideSpecimenProps = ComponentProps &
+  StyleguideSpecimenFields & {
+    e2eId: string;
+    children: React.ReactNode;
+  };
+
+/**
+ * Helper component that displays explanatory information and where to find the definitions
+ * of styleguide specimens.
+ */
+const StyleguideSpecimen = ({
+  fields: { heading, description },
+  children,
+  rendering,
+  e2eId,
+}: StyleguideSpecimenProps): JSX.Element => (
+  <div
+    className="pt-3"
+    id={`i${rendering.uid && rendering.uid.replace(/[{}]/g, '')}`}
+    data-e2e-id={e2eId}
+  >
+    <Text tag="h4" field={heading} />
+    <RichText field={description} />
+
+    <p>
+      <small>
+        Implementation: <code>/src/components/**/{rendering.componentName}.tsx</code>
+        <br />
+        Definition:{' '}
+        <code>/sitecore/definitions/components/**/{rendering.componentName}.sitecore.js</code>
+      </small>
+    </p>
+    <div className="border p-2">{children}</div>
+  </div>
+);
+
+export default withDatasourceCheck()<StyleguideSpecimenProps>(StyleguideSpecimen);

package/dist/templates/nextjs-styleguide/src/components/styleguide/Styleguide-Tracking.tsx

@@ -0,0 +1,341 @@
+import React, { RefObject } from 'react';
+import {
+  withSitecoreContext,
+  trackingApi,
+  TrackingRequestOptions,
+} from '@sitecore-jss/sitecore-jss-nextjs';
+import { dataFetcher } from 'lib/data-fetcher';
+import config from 'temp/config';
+import StyleguideSpecimen from './Styleguide-Specimen';
+import { ComponentWithContextProps } from 'lib/component-props';
+import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';
+
+/* eslint-disable no-alert,no-undef */
+
+type StyleguideTrackingProps = ComponentWithContextProps & StyleguideSpecimenFields;
+
+/**
+ * Demonstrates analytics tracking patterns (xDB)
+ */
+class StyleguideTracking extends React.Component<StyleguideTrackingProps> {
+  private event: RefObject<HTMLInputElement>;
+  private goal: RefObject<HTMLInputElement>;
+  private outcomeName: RefObject<HTMLInputElement>;
+  private outcomeValue: RefObject<HTMLInputElement>;
+  private campaign: RefObject<HTMLInputElement>;
+  private pageId: RefObject<HTMLInputElement>;
+  private pageUrl: RefObject<HTMLInputElement>;
+
+  private trackingApiOptions: TrackingRequestOptions;
+
+  constructor(props: StyleguideTrackingProps) {
+    super(props);
+
+    this.event = React.createRef();
+    this.goal = React.createRef();
+    this.outcomeName = React.createRef();
+    this.outcomeValue = React.createRef();
+    this.campaign = React.createRef();
+    this.pageId = React.createRef();
+    this.pageUrl = React.createRef();
+
+    this.trackingApiOptions = {
+      host: config.sitecoreApiHost,
+      querystringParams: {
+        sc_apikey: config.sitecoreApiKey,
+      },
+      fetcher: dataFetcher,
+    };
+  }
+
+  submitEvent() {
+    if (!this.event.current) return;
+
+    trackingApi
+      .trackEvent([{ eventId: this.event.current.value }], this.trackingApiOptions)
+      .then(() => alert('Page event pushed'))
+      .catch((error) => alert(error));
+  }
+
+  submitGoal() {
+    if (!this.goal.current) return;
+
+    trackingApi
+      .trackEvent([{ goalId: this.goal.current.value }], this.trackingApiOptions)
+      .then(() => alert('Goal pushed'))
+      .catch((error) => alert(error));
+  }
+
+  submitOutcome() {
+    if (
+      !this.pageUrl.current ||
+      !this.pageId.current ||
+      !this.outcomeName.current ||
+      !this.outcomeValue.current
+    ) {
+      return;
+    }
+
+    trackingApi
+      .trackEvent(
+        [
+          {
+            url: this.pageUrl.current.value,
+            pageId: this.pageId.current.value,
+            outcomeId: this.outcomeName.current.value,
+            currencyCode: 'USD',
+            monetaryValue: this.outcomeValue.current.value,
+          },
+        ],
+        this.trackingApiOptions
+      )
+      .then(() => alert('Outcome pushed'))
+      .catch((error) => alert(error));
+  }
+
+  triggerCampaign() {
+    if (!this.campaign.current) return;
+
+    trackingApi
+      .trackEvent([{ campaignId: this.campaign.current.value }], this.trackingApiOptions)
+      .then(() => alert('Campaign set'))
+      .catch((error) => alert(error));
+  }
+
+  submitPageView() {
+    if (!this.pageId.current || !this.pageUrl.current) return;
+
+    trackingApi
+      .trackEvent(
+        [
+          {
+            pageId: this.pageId.current.value,
+            url: this.pageUrl.current.value,
+          },
+        ],
+        this.trackingApiOptions
+      )
+      .then(() => alert('Page view pushed'))
+      .catch((error) => alert(error));
+  }
+
+  abandonSession() {
+    const abandonOptions = {
+      action: 'flush',
+      ...this.trackingApiOptions,
+    };
+
+    trackingApi
+      .trackEvent([], abandonOptions)
+      .then(() => alert('Interaction has been terminated and its data pushed to xConnect.'))
+      .catch((error) => alert(error));
+  }
+
+  submitBatching() {
+    trackingApi
+      .trackEvent(
+        [
+          { eventId: 'Download' },
+          { goalId: 'Instant Demo' },
+          { outcomeId: 'Opportunity' },
+          {
+            pageId: '{110D559F-DEA5-42EA-9C1C-8A5DF7E70EF9}',
+            url: '/arbitrary/url/you/own',
+          },
+          // this goal will be added to the new page/route ID set above, not the current route
+          { goalId: 'Register' },
+        ],
+        this.trackingApiOptions
+      )
+      .then(() => alert('Batch of events pushed'))
+      .catch((error) => alert(error));
+  }
+
+  render() {
+    const disconnectedMode = this.props.sitecoreContext.itemId === 'available-in-connected-mode';
+
+    return (
+      <StyleguideSpecimen {...this.props} e2eId="styleguide-tracking">
+        {disconnectedMode && (
+          <p>The tracking API is only available in connected, integrated, or headless modes.</p>
+        )}
+        {!disconnectedMode && (
+          <div>
+            <p className="alert alert-warning">
+              Note: The JSS tracker API is disabled by default. Consult the{' '}
+              <a href="https://jss.sitecore.com/docs/fundamentals/services/tracking">
+                tracking documentation
+              </a>{' '}
+              to enable it.
+            </p>
+            <div className="row">
+              <fieldset className="form-group col-sm">
+                <legend>Event</legend>
+                <p>
+                  Events are defined in <code>/sitecore/system/Settings/Analytics/Page Events</code>
+                </p>
+                <label htmlFor="event">Event GUID or Name</label>
+                <input type="text" id="event" className="form-control" ref={this.event} />
+                <button
+                  type="button"
+                  className="btn btn-primary mt-3"
+                  onClick={this.submitEvent.bind(this)}
+                >
+                  Submit
+                </button>
+              </fieldset>
+
+              <fieldset className="form-group col-sm">
+                <legend>Goal</legend>
+                <p>
+                  Goals are defined in <code>/sitecore/system/Marketing Control Panel/Goals</code>
+                </p>
+                <label htmlFor="goal">Goal GUID or Name</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  id="goal"
+                  ref={this.goal}
+                  placeholder="i.e. Register"
+                />
+                <button
+                  type="button"
+                  className="btn btn-primary mt-3"
+                  onClick={this.submitGoal.bind(this)}
+                >
+                  Submit
+                </button>
+              </fieldset>
+            </div>
+            <div className="row">
+              <fieldset className="form-group col-sm">
+                <legend>Outcome</legend>
+                <p>
+                  Outcomes are defined in{' '}
+                  <code>/sitecore/system/Marketing Control Panel/Outcomes</code>
+                </p>
+                <label htmlFor="outcomeName">Outcome GUID or Name</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  id="outcomeName"
+                  ref={this.outcomeName}
+                  placeholder="i.e. Marketing Lead"
+                />
+                <br />
+                <label htmlFor="outcomeValue">Monetary Value (optional)</label>
+                <input
+                  type="number"
+                  className="form-control"
+                  id="outcomeValue"
+                  ref={this.outcomeValue}
+                  placeholder="i.e. 1337.00"
+                />
+                <button
+                  type="button"
+                  className="btn btn-primary mt-3"
+                  onClick={this.submitOutcome.bind(this)}
+                >
+                  Submit
+                </button>
+              </fieldset>
+
+              <fieldset className="form-group col-sm">
+                <legend>Campaign</legend>
+                <p>
+                  Campaigns are defined in{' '}
+                  <code>/sitecore/system/Marketing Control Panel/Campaigns</code>
+                </p>
+                <label htmlFor="campaign">Campaign GUID or Name</label>
+                <input type="text" className="form-control" id="campaign" ref={this.campaign} />
+                <button
+                  type="button"
+                  className="btn btn-primary mt-3"
+                  onClick={this.triggerCampaign.bind(this)}
+                >
+                  Submit
+                </button>
+              </fieldset>
+            </div>
+            <div className="row">
+              <fieldset className="form-group col-sm">
+                <legend>Page View</legend>
+                <p>
+                  Track arbitrary page views for custom routing or offline use. Note that Layout
+                  Service tracks page views by default unless <code>tracking=false</code> is passed
+                  in its query string.
+                </p>
+                <label htmlFor="pageId">Page Item GUID</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  id="pageId"
+                  ref={this.pageId}
+                  placeholder="i.e. {11111111-1111-1111-1111-111111111111}"
+                />
+                <br />
+                <label htmlFor="pageUrl">Page URL</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  id="pageUrl"
+                  ref={this.pageUrl}
+                  placeholder="i.e. /foo/bar"
+                />
+                <button
+                  type="button"
+                  className="btn btn-primary mt-3"
+                  onClick={this.submitPageView.bind(this)}
+                >
+                  Submit
+                </button>
+              </fieldset>
+
+              <fieldset className="form-group col-sm">
+                <legend>Batching</legend>
+                <p>
+                  The tracking API supports pushing a whole batch of events in a single request.
+                  This can be useful for queuing strategies or offline PWA usage.
+                </p>
+                <button
+                  type="button"
+                  className="btn btn-primary"
+                  onClick={this.submitBatching.bind(this)}
+                >
+                  Submit Batch of Events
+                </button>
+              </fieldset>
+            </div>
+            <div className="row">
+              <fieldset className="form-group col-sm">
+                <legend>Interaction Control</legend>
+                <p>
+                  Tracking data is not pushed into the xConnect service until your session ends on
+                  the Sitecore server. Click this button to instantly end your session and flush the
+                  data - great for debugging and testing.
+                </p>
+                <p className="alert alert-warning">
+                  Note: By default <em>anonymous</em> contacts will not be shown in Experience
+                  Profile. If your interactions are not showing up in Experience Profile, you may
+                  need to{' '}
+                  <a href="https://doc.sitecore.net/developers/xp/xconnect/xconnect-search-indexer/enable-anonymous-contact-indexing.html">
+                    enable anonymous contact indexing.
+                  </a>
+                </p>
+                <button
+                  type="button"
+                  className="btn btn-primary"
+                  onClick={this.abandonSession.bind(this)}
+                >
+                  End Interaction
+                </button>
+              </fieldset>
+            </div>
+          </div>
+        )}
+      </StyleguideSpecimen>
+    );
+  }
+}
+
+export default withSitecoreContext()(StyleguideTracking);

package/dist/templates/nextjs-styleguide/src/lib/component-props/styleguide.ts

@@ -0,0 +1,11 @@
+import { Field } from '@sitecore-jss/sitecore-jss-nextjs';
+
+/**
+ * Shared styleguide specimen fields
+ */
+ export type StyleguideSpecimenFields = {
+  fields: {
+    description: Field<string>;
+    heading: Field<string>;
+  };
+};

package/dist/templates/nextjs-styleguide/src/lib/next-config/plugins/disconnected.js

@@ -0,0 +1,43 @@
+const { constants } = require('@sitecore-jss/sitecore-jss-nextjs');
+
+const disconnectedServerUrl = `http://localhost:${process.env.PROXY_PORT || 3042}/`;
+const isDisconnected = process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED;
+
+const disconnectedPlugin = (nextConfig = {}) => {
+  if (!isDisconnected) {
+    return nextConfig;
+  }
+
+  return Object.assign({}, nextConfig, {
+    async rewrites() {
+      // When disconnected we proxy to the local faux layout service host, see scripts/disconnected-mode-server.js
+      return [
+        {
+          source: '/sitecore/:path*',
+          destination: `${disconnectedServerUrl}/sitecore/:path*`,
+        },
+        // media items
+        {
+          source: '/data/media/:path*',
+          destination: `${disconnectedServerUrl}/data/media/:path*`,
+        },
+      ];
+    },
+
+    webpack: (config, options) => {
+      // Prevent webpack-5 from throwing error for sitecore-import.json when app first starts
+      config.resolve.fallback = {
+        'sitecore/manifest/sitecore-import.json': false
+      };
+
+      // Overload the Webpack config if it was already overloaded
+      if (typeof nextConfig.webpack === 'function') {
+        return nextConfig.webpack(config, options);
+      }
+
+      return config;
+    }
+  });
+};
+
+module.exports = disconnectedPlugin;

package/dist/templates/nextjs-styleguide/src/lib/next-config/plugins/styleguide.js

@@ -0,0 +1,10 @@
+const styleguidePlugin = (nextConfig = {}) => {
+  return Object.assign({}, nextConfig, {
+    i18n: {
+      ...nextConfig.i18n,
+      locales: ['en'<%- language ? `, '${language}'` : ''%>],
+    },
+  });
+};
+
+module.exports = styleguidePlugin;

package/dist/templates/nextjs-styleguide/src/lib/sitemap-fetcher/plugins/disconnectedSitemapService.ts

@@ -0,0 +1,46 @@
+import { DisconnectedSitemapService } from '@sitecore-jss/sitecore-jss-nextjs';
+import { ManifestInstance } from '@sitecore-jss/sitecore-jss-dev-tools';
+import { SitemapFetcherPlugin } from '..';
+
+class DisconnectedSitemapServicePlugin implements SitemapFetcherPlugin {
+  _disconnectedSitemapService: DisconnectedSitemapService;
+
+  constructor() {
+    this._disconnectedSitemapService = new DisconnectedSitemapService(
+      this.getManifest() as unknown as ManifestInstance
+    );
+  }
+
+  /**
+   * Get sitecore-import.json manifest
+   */
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  getManifest() {
+    if (process.env.JSS_MODE !== 'disconnected') return null;
+
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const manifest = require('sitecore/manifest/sitecore-import.json');
+
+      return manifest;
+    } catch (error) {
+      throw Error(
+        "[Disconnected Export] Please make sure you've started the disconnected proxy `npm run start:disconnected-proxy`"
+      );
+    }
+  }
+
+  async exec() {
+    // If we are in Export mode
+    if (process.env.EXPORT_MODE) {
+      // Disconnected Export mode
+      if (process.env.JSS_MODE === 'disconnected') {
+        return this._disconnectedSitemapService.fetchExportSitemap();
+      }
+    }
+
+    return [];
+  }
+}
+
+export const disconnectedSitemapServicePlugin = new DisconnectedSitemapServicePlugin();

package/dist/templates/nextjs-styleguide/src/pages/_app.tsx

@@ -0,0 +1,33 @@
+import type { AppProps } from 'next/app';
+import Router from 'next/router';
+import { I18nProvider } from 'next-localization';
+import NProgress from 'nprogress';
+
+// Using bootstrap and nprogress are completely optional.
+//  bootstrap is used here to provide a clean layout for samples, without needing extra CSS in the sample app
+//  nprogress provides a loading indicator on page/route changes
+// Remove these in package.json as well if removed here.
+import 'bootstrap/dist/css/bootstrap.css';
+import 'nprogress/nprogress.css';
+import 'assets/app.css';
+
+NProgress.configure({ showSpinner: false, trickleSpeed: 100 });
+
+Router.events.on('routeChangeStart', () => NProgress.start());
+Router.events.on('routeChangeComplete', () => NProgress.done());
+Router.events.on('routeChangeError', () => NProgress.done());
+
+function App({ Component, pageProps }: AppProps): JSX.Element {
+  const { dictionary, ...rest } = pageProps;
+
+  return (
+    // Use the next-localization (w/ rosetta) library to provide our translation dictionary to the app.
+    // Note Next.js does not (currently) provide anything for translation, only i18n routing.
+    // If your app is not multilingual, next-localization and references to it can be removed.
+    <I18nProvider lngDict={dictionary} locale={pageProps.locale}>
+      <Component {...rest} />
+    </I18nProvider>
+  );
+}
+
+export default App;