create-sitecore-jss 20.0.0-canary.78

package/dist/templates/nextjs-styleguide/src/components/graphql/GraphQL-ConnectedDemo.dynamic.tsx

@@ -0,0 +1,148 @@
+import React, { useEffect } from 'react';
+import {
+  Text,
+  Link,
+  GetServerSideComponentProps,
+  GetStaticComponentProps,
+  useComponentProps,
+  constants,
+  GraphQLRequestClient,
+  withDatasourceCheck,
+  resetEditorChromes,
+} from '@sitecore-jss/sitecore-jss-nextjs';
+import NextLink from 'next/link';
+import {
+  ConnectedDemoQueryDocument,
+  <%- appPrefix ? `${helper.getPascalCaseName(appName)}` : "" %>AppRoute as AppRoute,
+  Item,
+  <%- appPrefix ? `${helper.getPascalCaseName(appName)}` : "" %>GraphQlConnectedDemo as GrapQLConnectedDemoDatasource,
+} from './GraphQL-ConnectedDemo.dynamic.graphql';
+import { ComponentProps } from 'lib/component-props';
+import config from 'temp/config';
+
+type RouteItem = AppRoute & Item;
+
+type GraphQLConnectedDemoData = {
+  datasource: GrapQLConnectedDemoDatasource;
+  contextItem: RouteItem;
+};
+
+const GraphQLConnectedDemo = (props: ComponentProps): JSX.Element => {
+  const data = useComponentProps<GraphQLConnectedDemoData>(props.rendering.uid);
+
+  useEffect(() => {
+    resetEditorChromes();
+  }, []);
+
+  return (
+    <div data-e2e-id="graphql-connected">
+      <h2>GraphQL Connected Demo</h2>
+
+      <p>
+        Connected GraphQL executes GraphQL queries directly against the Sitecore GraphQL endpoint.
+        This example runs the query server-side using component-level <code>getStaticProps</code>/
+        <code>getServerSideProps</code>, a feature of the Sitecore JSS Next.js SDK. These are
+        aggregated during the the Next.js page-level <code>getStaticProps</code>/
+        <code>getServerSideProps</code> execution.
+      </p>
+
+      {data && data.datasource && (
+        <div>
+          <h4>Datasource Item (via Connected GraphQL)</h4>
+          id: {data.datasource.id}
+          <br />
+          name: {data.datasource.name}
+          <br />
+          sample1: {data.datasource.sample1?.value}
+          <br />
+          sample1 (editable): <Text field={data.datasource.sample1?.jsonValue} />
+          <br />
+          sample2:
+          <br />
+          <ul>
+            <li>text: {data.datasource.sample2?.text}</li>
+            <li>url: {data.datasource.sample2?.url}</li>
+            <li>target: {data.datasource.sample2?.target}</li>
+            <li>
+              editable: <Link field={data.datasource.sample2?.jsonValue} />
+            </li>
+            <li>field type: {data.datasource.sample2?.definition?.type}</li>
+            <li>field is shared?: {data.datasource.sample2?.definition?.shared.toString()}</li>
+          </ul>
+        </div>
+      )}
+      {data && data.contextItem && (
+        <div>
+          <h4>Route Item (via Connected GraphQL)</h4>
+          id: {data.contextItem.id}
+          <br />
+          page title: {data.contextItem.pageTitle?.value}
+          <br />
+          children:
+          <ul>
+            {data.contextItem.children.results.map((child) => {
+              const routeItem = child as RouteItem;
+
+              return (
+                <li key={routeItem.id}>
+                  <NextLink href={routeItem.url.path}>{routeItem.pageTitle?.value}</NextLink>
+                  (editable title too! <Text field={routeItem.pageTitle?.jsonValue} />)
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Will be called during SSG
+ * @param {ComponentRendering} rendering
+ * @param {LayoutServiceData} layoutData
+ * @param {GetStaticPropsContext} context
+ */
+export const getStaticProps: GetStaticComponentProps = async (rendering, layoutData) => {
+  if (process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED) {
+    return null;
+  }
+
+  const graphQLClient = new GraphQLRequestClient(config.graphQLEndpoint, {
+    apiKey: config.sitecoreApiKey,
+  });
+
+  const result = await graphQLClient.request<GraphQLConnectedDemoData>(ConnectedDemoQueryDocument, {
+    datasource: rendering.dataSource,
+    contextItem: layoutData?.sitecore?.route?.itemId,
+    language: layoutData?.sitecore?.context?.language,
+  });
+
+  return result;
+};
+
+/**
+ * Will be called during SSR
+ * @param {ComponentRendering} rendering
+ * @param {LayoutServiceData} layoutData
+ * @param {GetServerSidePropsContext} context
+ */
+export const getServerSideProps: GetServerSideComponentProps = async (rendering, layoutData) => {
+  if (process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED) {
+    return null;
+  }
+
+  const graphQLClient = new GraphQLRequestClient(config.graphQLEndpoint, {
+    apiKey: config.sitecoreApiKey,
+  });
+
+  const result = await graphQLClient.request<GraphQLConnectedDemoData>(ConnectedDemoQueryDocument, {
+    datasource: rendering.dataSource,
+    contextItem: layoutData?.sitecore?.route?.itemId,
+    language: layoutData?.sitecore?.context?.language,
+  });
+
+  return result;
+};
+
+export default withDatasourceCheck()<ComponentProps>(GraphQLConnectedDemo);

package/dist/templates/nextjs-styleguide/src/components/graphql/GraphQL-IntegratedDemo.tsx

@@ -0,0 +1,130 @@
+import { Text, Link, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
+import { ComponentProps } from 'lib/component-props';
+import NextLink from 'next/link';
+
+type DataSource = {
+  sample1: {
+    jsonValue: {
+      value: string;
+    };
+    value: string;
+  };
+  sample2: {
+    definition: {
+      type: string;
+      shared: boolean;
+    };
+    jsonValue: {
+      value: {
+        href: string;
+        linktype: string;
+        target: string;
+        text: string;
+        url: string;
+      };
+    };
+    target: string;
+    text: string;
+    url: string;
+  };
+  name: string;
+  id: string;
+};
+
+type Item = {
+  id: string;
+  url: {
+    path: string;
+  };
+  pageTitle: {
+    value: string;
+    jsonValue: {
+      value: string;
+    };
+  };
+};
+
+type ItemSearchResults = {
+  results: Item[];
+};
+
+type GraphQlIntegratedDemoProps = ComponentProps & {
+  fields: {
+    data: {
+      datasource: DataSource;
+      contextItem: {
+        id: string;
+        children: ItemSearchResults;
+        pageTitle: {
+          value: string;
+        };
+      };
+    };
+  };
+};
+
+const GraphQLIntegratedDemo = (props: GraphQlIntegratedDemoProps): JSX.Element => {
+  // Query results in integrated GraphQL replace the normal `fields` data
+  // i.e. with { data, }
+  const { datasource, contextItem } = props.fields.data;
+
+  return (
+    <div data-e2e-id="graphql-integrated">
+      <h2>GraphQL Integrated Demo</h2>
+
+      <p>
+        Integrated GraphQL executes GraphQL queries within the Layout Service endpoint, and merges
+        the query results into the Layout Service result JSON. The query results can be seen by
+        inspecting the Layout Service response.
+      </p>
+
+      {datasource && (
+        <div>
+          <h4>Datasource Item (via Integrated GraphQL)</h4>
+          id: {datasource.id}
+          <br />
+          name: {datasource.name}
+          <br />
+          sample1: {datasource.sample1.value}
+          <br />
+          sample1 (editable): <Text field={datasource.sample1.jsonValue} />
+          <br />
+          sample2:
+          <br />
+          <ul>
+            <li>text: {datasource.sample2.text}</li>
+            <li>url: {datasource.sample2.url}</li>
+            <li>target: {datasource.sample2.target}</li>
+            <li>
+              editable: <Link field={datasource.sample2.jsonValue} />
+            </li>
+            <li>field type: {datasource.sample2.definition.type}</li>
+            <li>field is shared?: {datasource.sample2.definition.shared.toString()}</li>
+          </ul>
+        </div>
+      )}
+      {contextItem && (
+        <div>
+          <h4>Route Item (via Integrated GraphQL)</h4>
+          id: {contextItem.id}
+          <br />
+          page title: {contextItem.pageTitle.value}
+          <br />
+          children:
+          <ul>
+            {contextItem.children.results.map((child: Item) => (
+              <li key={child.id}>
+                <NextLink href={child.url.path}>
+                  <a>{child.pageTitle.value}</a>
+                </NextLink>
+                &nbsp; (editable title too! <Text field={child.pageTitle.jsonValue} />)
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default withDatasourceCheck()<GraphQlIntegratedDemoProps>(GraphQLIntegratedDemo);

package/dist/templates/nextjs-styleguide/src/components/graphql/GraphQL-Layout.tsx

@@ -0,0 +1,37 @@
+import { Placeholder, useSitecoreContext } from '@sitecore-jss/sitecore-jss-nextjs';
+import { ComponentProps } from 'lib/component-props';
+
+const GraphQLLayout = ({ rendering }: ComponentProps): JSX.Element => {
+  const { sitecoreContext } = useSitecoreContext();
+
+  const disconnectedMode =
+    sitecoreContext.route && sitecoreContext.route.layoutId === 'available-in-connected-mode';
+
+  return (
+    <div data-e2e-id="graphql-layout">
+      {disconnectedMode && (
+        <>
+          <p>
+            This app is running in disconnected mode. GraphQL requires connected mode, headless
+            connected mode, or integrated mode to work.
+          </p>
+          <p>
+            Libraries such as <code>graphql-tools</code> can provide GraphQL API mocking
+            capabilities, which could enable disconnected GraphQL. This is not supported out of the
+            box, however.
+          </p>
+          <p>
+            To view the GraphQL samples, restart the app using <code>jss start:connected</code>
+            &nbsp; or deploy the app to Sitecore to run in integrated mode per the JSS
+            documentation.
+          </p>
+        </>
+      )}
+      {!disconnectedMode && (
+        <Placeholder name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-graphql-layout" rendering={rendering} />
+      )}
+    </div>
+  );
+};
+
+export default GraphQLLayout;

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

@@ -0,0 +1,47 @@
+import StyleguideSpecimen from './Styleguide-Specimen';
+import { ComponentProps } from 'lib/component-props';
+import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';
+
+type StyleguideComponentParamsProps = ComponentProps &
+  StyleguideSpecimenFields & {
+    params: {
+      cssClass: string;
+      columns: string;
+      useCallToAction: 'false' | 'true';
+    };
+  };
+
+const StyleguideComponentParams = (props: StyleguideComponentParamsProps): JSX.Element => {
+  // props.params (i.e. props.params.cssClass without destructuring) contains the component's params
+  const { cssClass, columns, useCallToAction } = props.params;
+
+  const columnsArray = columns && [...Array(parseInt(columns))];
+
+  return (
+    <StyleguideSpecimen {...props} e2eId="styleguide-componentparams">
+      <p className={cssClass}>
+        The CSS class of this paragraph (<code>{cssClass}</code>) is set using a param
+      </p>
+      <div>
+        {/* Note that all params come in as string values, like this boolean-like param here: */}
+        useCallToAction param: <code>{useCallToAction}</code>
+        <br />
+        param type: <code>{typeof useCallToAction}</code>
+        {useCallToAction === 'true' && (
+          <div className="alert alert-info">the call to action is shown</div>
+        )}
+      </div>
+      <p>columns param: {columns}</p>
+      <div className="row">
+        {columnsArray &&
+          columnsArray.map((_, index) => (
+            <div key={`col-${index}`} className="col-sm">
+              Column {index}
+            </div>
+          ))}
+      </div>
+    </StyleguideSpecimen>
+  );
+};
+
+export default StyleguideComponentParams;

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

@@ -0,0 +1,37 @@
+import Link from 'next/link';
+import { useSitecoreContext, Text, RichText, Field } from '@sitecore-jss/sitecore-jss-nextjs';
+
+type StyleguideCustomRouteTypeFields = {
+  headline: Field<string>;
+  author: Field<string>;
+  content: Field<string>;
+};
+
+const StyleguideCustomRouteType = (): JSX.Element => {
+  // useSitecoreContext() is the magical glue that gives you route-level context access
+  // see the context examples in the styleguide for more details.
+  // this fancy destructure syntax is essentially equivalent to
+  // const fields = props.sitecoreContext.route.fields
+  const value = useSitecoreContext();
+  const fields = value.sitecoreContext.route?.fields as StyleguideCustomRouteTypeFields;
+
+  return (
+    <div data-e2e-id="styleguide-customroutetype">
+      <Text tag="h3" field={fields.headline} />
+
+      <p>
+        <em>
+          By <Text field={fields.author} />
+        </em>
+      </p>
+
+      <RichText field={fields.content} />
+
+      <Link href="/styleguide">
+        <a>Return to the Styleguide</a>
+      </Link>
+    </div>
+  );
+};
+
+export default StyleguideCustomRouteType;

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

@@ -0,0 +1,45 @@
+import { Placeholder } 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 StyleguideLayoutReuseProps = ComponentProps & StyleguideSpecimenFields;
+
+/**
+ * Demonstrates how to reuse content within JSS. See /data/routes/styleguide/en.yml
+ * for the reused content definition sample. This component also demonstrates how to use
+ * the Placeholder component's render props API to wrap all components in the placeholder
+ * in a column tag (thus creating a horizontally laid out placeholder)
+ */
+const StyleguideLayoutReuse = (props: StyleguideLayoutReuseProps): JSX.Element => (
+  <StyleguideSpecimen {...props} e2eId="styleguide-layout-reuse">
+    <div className="row">
+      {/*
+        This placeholder is using _render props_ to enable customizing the markup for each component within.
+        In this case, it's placing each component in its own column of a flexbox layout - giving an n-up columnar layout.
+        The component itself does not need to know it's living in a columnar layout.
+
+        There are three render props available:
+        renderEach - called once for each content component
+          Sitecore Experience Editor markup is automatically rendered in between content components when present
+        renderEmpty - called when the placeholder contains no content components. Can be used to wrap the Sitecore EE empty placeholder
+          markup in something that's visually correct, like here where we need to wrap it in a column div to make it selectable.
+        render - called once and passed _all_ components in the placeholder. Allows custom iteration. EE code markup must be accounted for.
+
+        Generally speaking stick to renderEach and renderEmpty unless doing something really custom.
+       */}
+      <Placeholder
+        rendering={props.rendering}
+        name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-reuse-example"
+        renderEach={(component, index) => (
+          <div className="col-sm" key={index}>
+            {component}
+          </div>
+        )}
+        renderEmpty={(components) => <div className="col-sm">{components}</div>}
+      />
+    </div>
+  </StyleguideSpecimen>
+);
+
+export default StyleguideLayoutReuse;

package/dist/templates/nextjs-styleguide/src/components/styleguide/Styleguide-Layout-Tabs-Tab.tsx

@@ -0,0 +1,41 @@
+import {
+  Text,
+  RichText,
+  Field,
+  useSitecoreContext,
+  withDatasourceCheck,
+} from '@sitecore-jss/sitecore-jss-nextjs';
+import { ComponentProps } from 'lib/component-props';
+
+type StyleguideLayoutTabsTabProps = ComponentProps & {
+  fields: {
+    content: Field<string>;
+    title: Field<string>;
+  };
+};
+
+/**
+ * This is a single tab within the tabs sample component. These are added to the tabs placeholder.
+ * This component demonstrates conditionally altering rendering when in the Sitecore Experience Editor to improve
+ * author experience.
+ */
+const StyleguideLayoutTabsTab = (props: StyleguideLayoutTabsTabProps): JSX.Element => {
+  const { sitecoreContext } = useSitecoreContext();
+
+  return (
+    <div data-e2e-class="styleguide-layout-tabs-tab">
+      {/*
+          When we're editing the tabs we stack each tab vertically,
+          which means there's no regular tab titles rendered.
+          So we conditionally render the tab title here, when editing. */}
+      {sitecoreContext && sitecoreContext.pageEditing && (
+        <Text tag="h5" field={props.fields.title} />
+      )}
+
+      {/* React.Fragment tells React to not use any wrapping tag for the component */}
+      <RichText field={props.fields.content} />
+    </div>
+  );
+};
+
+export default withDatasourceCheck()<StyleguideLayoutTabsTabProps>(StyleguideLayoutTabsTab);

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

@@ -0,0 +1,111 @@
+import React, { ReactElement } from 'react';
+import { withPlaceholder, withSitecoreContext, Text } from '@sitecore-jss/sitecore-jss-nextjs';
+import StyleguideSpecimen from './Styleguide-Specimen';
+import { ComponentWithContextProps } from 'lib/component-props';
+import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';
+
+interface StyleguideLayoutTabsState {
+  activeTabIndex: number;
+}
+
+type StyleguideLayoutTabsProps = ComponentWithContextProps &
+  StyleguideSpecimenFields & {
+    name: string;
+    tabsPlaceholder: ReactElement[];
+  };
+
+/**
+ * Demonstrates advanced component techniques in JSS.
+ * This example implements a simple-looking tabs component.
+ * Each tab is itself a child component added to a placeholder defined on the tabs component.
+ * The tab component introspects its child components to render the tab headings (i.e. the tab children render partial content in two places).
+ * When this component is edited in Sitecore Experience Editor, the tabbing behavior is turned off and each tab stacks on top of each other
+ * for easy inline editing.
+ */
+class StyleguideLayoutTabs extends React.Component<
+  StyleguideLayoutTabsProps,
+  StyleguideLayoutTabsState
+> {
+  constructor(props: StyleguideLayoutTabsProps) {
+    super(props);
+
+    this.state = {
+      activeTabIndex: 0,
+    };
+
+    this.setActiveTab = this.setActiveTab.bind(this);
+  }
+
+  setActiveTab(index: number) {
+    this.setState({ activeTabIndex: index });
+  }
+
+  render() {
+    const { tabsPlaceholder, sitecoreContext } = this.props;
+
+    let validTabIndex = 0;
+    const isEditing = sitecoreContext && sitecoreContext.pageEditing;
+
+    return (
+      <StyleguideSpecimen {...this.props} e2eId="styleguide-layout-tabs">
+        <ul className="nav nav-tabs">
+          {/*
+            When the page is editing, we hide the tab headings, because they are not updated when xEditor adds or removes a tab rendering.
+            Instead, we show the tab header inline with the tab contents (see Styleguide-Layout-Tabs-Tab).
+          */}
+          {!isEditing &&
+            (tabsPlaceholder || [])
+              .filter((tab: ReactElement) => tab.props && tab.props.fields)
+              .map((tab: ReactElement, index: number) => (
+                <li className="nav-item" key={`tab${index}`}>
+                  <a
+                    className={`nav-link ${index === this.state.activeTabIndex ? 'active' : null}`}
+                    onClick={() => this.setActiveTab(index)}
+                    href="#t"
+                  >
+                    <Text field={tab.props.fields.title} />
+                  </a>
+                </li>
+              ))}
+        </ul>
+        <div className="p-3 border-left border-right border-bottom">
+          {(tabsPlaceholder || []).map((tab: ReactElement) => {
+            const isValid = tab.props && tab.props.fields;
+
+            // allow experience editor markup components to render
+            if (!isValid && isEditing) return tab;
+
+            validTabIndex += 1;
+
+            // we render the tab either if it's active - or we're editing,
+            // in which case we stack all tabs for visual editing
+            if (this.state.activeTabIndex === validTabIndex - 1 || isEditing) {
+              return tab;
+            }
+
+            return null;
+          })}
+        </div>
+      </StyleguideSpecimen>
+    );
+  }
+}
+
+// This is a _higher order component_ that will wrap our component and inject placeholder
+// data into it as a prop (in this case, props.tabsPlaceholder).
+// this another option compared to using the <Placeholder> component;
+// in this case, chosen because we primarily need access to the _data_
+// of the placeholder.
+const tabsComponentWithPlaceholderInjected = withPlaceholder({
+  placeholder: '<%- helper.getAppPrefix(appPrefix, appName) %>jss-tabs',
+  prop: 'tabsPlaceholder',
+})(StyleguideLayoutTabs);
+
+// We need to know if experience editor is active, to disable the dynamic tab behavior for editing.
+// Using the same technique as injecting the placeholder, we wrap the component again to inject the
+// `sitecoreContext` prop.
+const tabsWithPlaceholderAndSitecoreContext = withSitecoreContext()<StyleguideLayoutTabsProps>(
+  tabsComponentWithPlaceholderInjected
+);
+
+export default tabsWithPlaceholderAndSitecoreContext;

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

@@ -0,0 +1,68 @@
+import {
+  Placeholder,
+  getChildPlaceholder,
+  getFieldValue,
+  ComponentRendering,
+  HtmlElementRendering,
+} from '@sitecore-jss/sitecore-jss-nextjs';
+import { ComponentProps } from 'lib/component-props';
+
+/**
+ * The main layout (columns) of the styleguide.
+ * Navigation is automatically generated based on the components added to the layout,
+ * and does not need to be manually maintained.
+ */
+const StyleguideLayout = (props: ComponentProps): JSX.Element => {
+  const getRendering = (section: ComponentRendering | HtmlElementRendering) =>
+    section as ComponentRendering;
+
+  const convertUID = (uid?: string) => {
+    if (!uid) return '';
+    return uid.replace(/[{}]/g, '');
+  };
+
+  // this code reads the components in the child placeholders of this component,
+  // and projects them into the left navigation column for the styleguide
+  const sections = getChildPlaceholder(props.rendering, '<%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-layout')
+    .filter((section) => getFieldValue(getRendering(section), 'heading'))
+    .map((section) => ({
+      heading: getFieldValue<string>(getRendering(section), 'heading'),
+      id: `i${convertUID(getRendering(section).uid)}`,
+      children: getChildPlaceholder(getRendering(section), '<%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-section')
+        .filter((component) => getFieldValue(getRendering(component), 'heading'))
+        .map((component) => ({
+          heading: getFieldValue<string>(getRendering(component), 'heading'),
+          id: `i${convertUID(getRendering(component).uid)}`,
+        })),
+    }))
+    .map((section) => (
+      <nav key={section.heading} className="nav flex-column pt-2">
+        <a href={`#${section.id}`} className="nav-item font-weight-bold">
+          {section.heading}
+        </a>
+        {section.children && (
+          <nav className="nav flex-column">
+            {section.children.map(
+              (child) =>
+                child.heading && (
+                  <a key={child.id} href={`#${child.id}`}>
+                    {child.heading}
+                  </a>
+                )
+            )}
+          </nav>
+        )}
+      </nav>
+    ));
+
+  return (
+    <div className="row">
+      <div className="col-sm-8 col-lg-10">
+        <Placeholder name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-layout" rendering={props.rendering} />
+      </div>
+      <div className="col-sm-4 col-lg-2 order-sm-first pt-2">{sections}</div>
+    </div>
+  );
+};
+
+export default StyleguideLayout;