create-sitecore-jss 22.6.0 → 22.7.0-canary.10

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-ContentList.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Field, Text, Item, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Custom.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Field, Text, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Date.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { DateField, Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-File.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { File, FileField, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Image.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { NextImage, ImageField, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-ItemLink.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Field, Text, Item, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Link.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Link, LinkField, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Number.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Text, Field, getFieldValue, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-RichText.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { RichText, Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Text.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Text, Field, getFieldValue, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { JSX, useEffect } from 'react';
 import {
   Text,
   Link,
@@ -8,24 +8,67 @@ import {
   withDatasourceCheck,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss-nextjs/graphql';
-import {
-  resetEditorChromes
-} from '@sitecore-jss/sitecore-jss-nextjs/utils';
+import { resetEditorChromes } from '@sitecore-jss/sitecore-jss-nextjs/utils';
 import NextLink from 'next/link';
-import { ConnectedDemoQueryDocument } from './GraphQL-ConnectedDemo.dynamic.graphql';
-import {
-  <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute as AppRoute,
-  Item,
-  <%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQlConnectedDemo as GrapQLConnectedDemoDatasource,
-} from 'graphql-types';
+import ConnectedDemoQuery from './GraphQL-ConnectedDemo.dynamic.graphql';
 import { ComponentProps } from 'lib/component-props';
 import config from 'temp/config';
 
-type RouteItem = AppRoute & Item;
+type GraphQLConnectedDemoDataSource = {
+  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 GraphQLConnectedDemoData = {
-  datasource: GrapQLConnectedDemoDatasource;
-  contextItem: RouteItem;
+  datasource: GraphQLConnectedDemoDataSource;
+  contextItem: {
+    id: string;
+    children: ItemSearchResults;
+    pageTitle: {
+      value: string;
+    };
+  };
 };
 
 type GraphQLConnectedDemoProps = ComponentProps & GraphQLConnectedDemoData;
@@ -82,7 +125,7 @@ const GraphQLConnectedDemo = (props: GraphQLConnectedDemoProps): JSX.Element =>
           children:
           <ul>
             {props.contextItem.children.results.map((child) => {
-              const routeItem = child as RouteItem;
+              const routeItem = child as Item;
 
               return (
                 <li key={routeItem.id}>
@@ -115,7 +158,7 @@ export const getStaticProps: GetStaticComponentProps = async (rendering, layoutD
 
   const result = await graphQLClient.request<GraphQLConnectedDemoData>(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ConnectedDemoQueryDocument as any,
+    ConnectedDemoQuery,
     {
       datasource: rendering.dataSource,
       contextItem: layoutData?.sitecore?.route?.itemId,
@@ -143,7 +186,7 @@ export const getServerSideProps: GetServerSideComponentProps = async (rendering,
 
   const result = await graphQLClient.request<GraphQLConnectedDemoData>(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ConnectedDemoQueryDocument as any,
+    ConnectedDemoQuery,
     {
       datasource: rendering.dataSource,
       contextItem: layoutData?.sitecore?.route?.itemId,

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

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Text, Link, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import { ComponentProps } from 'lib/component-props';
 import NextLink from 'next/link';
@@ -114,9 +115,7 @@ const GraphQLIntegratedDemo = (props: GraphQlIntegratedDemoProps): JSX.Element =
           <ul>
             {contextItem.children.results.map((child: Item) => (
               <li key={child.id}>
-                <NextLink href={child.url.path}>
-                  {child.pageTitle.value}
-                </NextLink>
+                <NextLink href={child.url.path}>{child.pageTitle.value}</NextLink>
                 &nbsp; (editable title too! <Text field={child.pageTitle.jsonValue} />)
               </li>
             ))}

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

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Placeholder, useSitecoreContext } from '@sitecore-jss/sitecore-jss-nextjs';
 import { ComponentProps } from 'lib/component-props';
 
@@ -28,7 +29,10 @@ const GraphQLLayout = ({ rendering }: ComponentProps): JSX.Element => {
         </>
       )}
       {!disconnectedMode && (
-        <Placeholder name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-graphql-layout" rendering={rendering} />
+        <Placeholder
+          name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-graphql-layout"
+          rendering={rendering}
+        />
       )}
     </div>
   );

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

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import StyleguideSpecimen from './Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';
 import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';

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

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import Link from 'next/link';
 import { useSitecoreContext, Text, RichText, Field } from '@sitecore-jss/sitecore-jss-nextjs';
 
@@ -27,9 +28,7 @@ const StyleguideCustomRouteType = (): JSX.Element => {
 
       <RichText field={fields.content} />
 
-      <Link href="/styleguide">
-        Return to the Styleguide
-      </Link>
+      <Link href="/styleguide">Return to the Styleguide</Link>
     </div>
   );
 };

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

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Field, Item, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import { ComponentProps } from 'lib/component-props';
 import { EditFrame } from '@sitecore-jss/sitecore-jss-nextjs';

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

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Placeholder } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from './Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

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

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import {
   Text,
   RichText,
@@ -7,13 +8,15 @@ import {
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { ComponentProps } from 'lib/component-props';
 
-type StyleguideLayoutTabsTabProps = ComponentProps & {
+export type TabProps = {
   fields: {
     content: Field<string>;
     title: Field<string>;
   };
 };
 
+type StyleguideLayoutTabsTabProps = ComponentProps & TabProps;
+
 /**
  * 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

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

@@ -3,6 +3,7 @@ import { withPlaceholder, withSitecoreContext, Text } from '@sitecore-jss/siteco
 import StyleguideSpecimen from './Styleguide-Specimen';
 import { ComponentWithContextProps } from 'lib/component-props';
 import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';
+import { TabProps } from './Styleguide-Layout-Tabs-Tab';
 
 interface StyleguideLayoutTabsState {
   activeTabIndex: number;
@@ -55,7 +56,7 @@ class StyleguideLayoutTabs extends React.Component<
           */}
           {!isEditing &&
             (tabsPlaceholder || [])
-              .filter((tab: ReactElement) => tab.props && tab.props.fields)
+              .filter((tab: ReactElement) => tab.props && (tab.props as TabProps).fields)
               .map((tab: ReactElement, index: number) => (
                 <li className="nav-item" key={`tab${index}`}>
                   <a
@@ -63,14 +64,14 @@ class StyleguideLayoutTabs extends React.Component<
                     onClick={() => this.setActiveTab(index)}
                     href="#t"
                   >
-                    <Text field={tab.props.fields.title} />
+                    <Text field={(tab.props as TabProps).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;
+            const isValid = tab.props && (tab.props as TabProps).fields;
 
             // allow experience editor markup components to render
             if (!isValid && isEditing) return tab;

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

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import {
   Placeholder,
   getChildPlaceholder,

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

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Text, Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import Link from 'next/link';
 import { useI18n } from 'next-localization';

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

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import Link from 'next/link';
 import { Text, Field, useSitecoreContext } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from './Styleguide-Specimen';

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

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Field, Placeholder, Text, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import { ComponentProps } from 'lib/component-props';
 

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

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { useSitecoreContext } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from './Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

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

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Text, RichText, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import { ComponentProps } from 'lib/component-props';
 import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';

package/dist/templates/{nextjs → nextjs-styleguide}/src/lib/next-config/plugins/graphql.js

@@ -7,19 +7,7 @@ const graphqlPlugin = (nextConfig = {}) => {
       config.module.rules.push({
         test: /\.graphql$/,
         exclude: /node_modules/,
-        use: [options.defaultLoaders.babel, { loader: 'graphql-let/loader' }],
-      });
-    
-      config.module.rules.push({
-        test: /\.graphqls$/,
-        exclude: /node_modules/,
-        use: ['graphql-let/schema/loader'],
-      });
-    
-      config.module.rules.push({
-        test: /\.ya?ml$/,
-        type: 'json',
-        use: 'yaml-loader',
+        loader: 'graphql-tag/loader',
       });
 
       // Overload the Webpack config if it was already overloaded
@@ -28,7 +16,7 @@ const graphqlPlugin = (nextConfig = {}) => {
       }
 
       return config;
-    }
+    },
   });
 };
 

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

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import type { AppProps } from 'next/app';
 import Router from 'next/router';
 import { I18nProvider } from 'next-localization';

package/dist/templates/nextjs-styleguide-tracking/data/dictionary/en.yml

@@ -1,5 +1,5 @@
-styleguide-sample: This is a dictionary entry in English as a demonstration
-Documentation: Documentation
-Styleguide: Styleguide
-GraphQL: GraphQL
-Tracking: Tracking
+styleguide-sample: This is a dictionary entry in English as a demonstration
+Documentation: Documentation
+Styleguide: Styleguide
+GraphQL: GraphQL
+Tracking: Tracking

package/dist/templates/nextjs-styleguide-tracking/data/routes/tracking/en.yml

@@ -1,8 +1,8 @@
-fields:
-  pageTitle: Styleguide Tracking | Sitecore JSS
-placeholders:
-  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
-    - componentName: Styleguide-Tracking
-      fields:
-        heading: Tracking
-        description: <p><small>JSS supports tracking Sitecore analytics events from within apps. Give it a try with this handy interactive demo.</small></p>
+fields:
+  pageTitle: Styleguide Tracking | Sitecore JSS
+placeholders:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
+    - componentName: Styleguide-Tracking
+      fields:
+        heading: Tracking
+        description: <p><small>JSS supports tracking Sitecore analytics events from within apps. Give it a try with this handy interactive demo.</small></p>

package/dist/templates/nextjs-styleguide-tracking/src/Navigation.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import Link from 'next/link';
 import { useI18n } from 'next-localization';
 import config from 'temp/config';

package/dist/templates/nextjs-styleguide-tracking/src/Scripts.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { VisitorIdentification } from '@sitecore-jss/sitecore-jss-nextjs';
 
 const Scripts = (): JSX.Element => {

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

@@ -18,13 +18,13 @@ type StyleguideTrackingProps = ComponentWithContextProps & StyleguideSpecimenFie
  * 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 event: RefObject<HTMLInputElement | null>;
+  private goal: RefObject<HTMLInputElement | null>;
+  private outcomeName: RefObject<HTMLInputElement | null>;
+  private outcomeValue: RefObject<HTMLInputElement | null>;
+  private campaign: RefObject<HTMLInputElement | null>;
+  private pageId: RefObject<HTMLInputElement | null>;
+  private pageUrl: RefObject<HTMLInputElement | null>;
 
   private trackingApiOptions: TrackingRequestOptions;
 

package/dist/templates/nextjs-sxa/scripts/templates/component-src.ts

@@ -4,7 +4,7 @@
  * @returns component src boilerplate as a string
  */
 function generateComponentSrc(componentName: string): string {
-  return `import React from 'react';
+  return `import { JSX } from 'react';
 import { ComponentParams, ComponentRendering } from '@sitecore-jss/sitecore-jss-nextjs';
 
 interface ${componentName}Props {

package/dist/templates/nextjs-sxa/src/Layout.tsx

@@ -1,7 +1,7 @@
 /**
  * This Layout is needed for Starter Kit.
  */
-import React from 'react';
+import { JSX } from 'react';
 import Head from 'next/head';
 import { Placeholder, LayoutServiceData, Field, HTMLLink } from '@sitecore-jss/sitecore-jss-nextjs';
 import config from 'temp/config';

package/dist/templates/nextjs-sxa/src/assets/sass/components/_component-column-splitter.scss

@@ -3,8 +3,8 @@
 .row.column-splitter {
     margin-left: 0;
     margin-right: 0;
-    padding-left: $default-padding / 2;
-    padding-right: $default-padding / 2;
+    padding-left: $default-padding * 0.5;
+    padding-right: $default-padding * 0.5;
     max-width: none;
 
     > div {

package/dist/templates/nextjs-sxa/src/assets/sass/components/promo/_promo-shadow.scss

@@ -13,11 +13,11 @@
         float: left;
     }
     >.component-content {
+        padding: 15px;
+        margin: 0 0 30px 0;
         @include respond-to(all-mobile) {
             margin: 0 10px 30px 10px;
         }
-        padding: 15px;
-        margin: 0 0 30px 0;
         &:before, &:after {
             opacity: 0.7;
             box-shadow: 0 17px 10px rgba(0, 0, 0, 0.7);

package/dist/templates/nextjs-sxa/src/components/ColumnSplitter.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { JSX } from 'react';
 import {
   ComponentParams,
   ComponentRendering,

package/dist/templates/nextjs-sxa/src/components/Container.tsx

@@ -1,9 +1,9 @@
+import { JSX } from 'react';
 import {
   ComponentParams,
   ComponentRendering,
   Placeholder,
 } from '@sitecore-jss/sitecore-jss-nextjs';
-import React from 'react';
 
 interface ComponentProps {
   rendering: ComponentRendering & { params: ComponentParams };

package/dist/templates/nextjs-sxa/src/components/Image.tsx

@@ -1,3 +1,4 @@
+import { CSSProperties, JSX } from 'react';
 import {
   EditMode,
   Field,
@@ -8,7 +9,6 @@ import {
   Text,
   useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
-import React, { CSSProperties } from 'react';
 
 interface Fields {
   Image: ImageField & { metadata?: { [key: string]: unknown } };

package/dist/templates/nextjs-sxa/src/components/LinkList.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { JSX } from 'react';
 import { Link as JssLink, Text, LinkField, TextField } from '@sitecore-jss/sitecore-jss-nextjs';
 
 type ResultsFieldLink = {

package/dist/templates/nextjs-sxa/src/components/Navigation.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState, JSX } from 'react';
 import {
   Link,
   LinkField,

package/dist/templates/nextjs-sxa/src/components/PageContent.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { JSX } from 'react';
 import {
   RichText as JssRichText,
   useSitecoreContext,

package/dist/templates/nextjs-sxa/src/components/PartialDesignDynamicPlaceholder.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { JSX } from 'react';
 import { Placeholder, ComponentRendering } from '@sitecore-jss/sitecore-jss-nextjs';
 
 type DynamicPlaceholderProps = {

package/dist/templates/nextjs-sxa/src/components/Promo.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { JSX } from 'react';
 import {
   NextImage as JssImage,
   Link as JssLink,

package/dist/templates/nextjs-sxa/src/components/RichText.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { JSX } from 'react';
 import { Field, RichText as JssRichText } from '@sitecore-jss/sitecore-jss-nextjs';
 
 interface Fields {

package/dist/templates/nextjs-sxa/src/components/RowSplitter.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { JSX } from 'react';
 import {
   ComponentParams,
   ComponentRendering,

package/dist/templates/nextjs-sxa/src/components/Title.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import {
   Link,
   LinkField,
@@ -5,7 +6,6 @@ import {
   TextField,
   useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
-import React from 'react';
 
 interface Fields {
   data: {

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

@@ -11,6 +11,9 @@ const SassAlias = require('sass-alias');
           '@sass': path.join(__dirname, '../../../assets', 'sass'),
           '@fontawesome': path.join(__dirname, '../../../../node_modules', 'font-awesome'),
         }).getImporter(),
+        // temporary measure until new versions of bootstrap and font-awesome released
+        quietDeps: true,    
+        silenceDeprecations: ["import", "legacy-js-api"],
       },
     });
 };

package/dist/templates/nextjs-sxa/src/pages/404.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import config from 'temp/config';
 import {
   GraphQLErrorPagesService,

package/dist/templates/nextjs-sxa/src/pages/500.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import Head from 'next/head';
 import {
   GraphQLErrorPagesService,

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

@@ -1,3 +1,4 @@
+import { JSX } from 'react'; 
 import type { AppProps } from 'next/app';
 import { I18nProvider } from 'next-localization';
 import { SitecorePageProps } from 'lib/page-props';

package/dist/templates/nextjs-xmcloud/package.json

@@ -1,8 +1,8 @@
 {
   "dependencies": {
     "@sitecore/components": "~2.0.1",
-    "@sitecore-cloudsdk/core": "^0.4.2",
-    "@sitecore-cloudsdk/events": "^0.4.2",
+    "@sitecore-cloudsdk/core": "^0.5.1",
+    "@sitecore-cloudsdk/events": "^0.5.1",
     "@sitecore-feaas/clientside": "^0.5.19"
   }
 }

package/dist/templates/nextjs-xmcloud/scripts/templates/byoc-component-src.ts

@@ -4,7 +4,7 @@
  * @returns component src boilerplate as a string
  */
 function generateComponentSrc(componentName: string): string {
-  return `import React from 'react';
+  return `import { JSX } from 'react';
 import * as FEAAS from '@sitecore-feaas/clientside/react';
 
 interface ${componentName}Props {