diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/Layout.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/Layout.tsx deleted file mode 100644 index eed2890e89..0000000000 --- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/Layout.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import Head from 'next/head'; - -import { - Placeholder, - VisitorIdentification, - getPublicUrl, - LayoutServiceData, -} from '@sitecore-jss/sitecore-jss-nextjs'; -import Navigation from 'src/Navigation'; - -// Prefix public assets with a public URL to enable compatibility with Sitecore Experience Editor. -// If you're not supporting the Experience Editor, you can remove this. -const publicUrl = getPublicUrl(); - -interface LayoutProps { - layoutData: LayoutServiceData; -} - -const Layout = ({ layoutData }: LayoutProps): JSX.Element => { - const { route } = layoutData.sitecore; - - return ( - <> - - {route?.fields?.pageTitle?.value || 'Page'} - - - - - {/* - VisitorIdentification is necessary for Sitecore Analytics to determine if the visitor is a robot. - If Sitecore XP (with xConnect/xDB) is used, this is required or else analytics will not be collected for the JSS app. - For XM (CMS-only) apps, this should be removed. - - VI detection only runs once for a given analytics ID, so this is not a recurring operation once cookies are established. - */} - - - - {/* root placeholder for the app, which we add components to using route data */} -
-
- {route && } -
-
- - ); -}; - -export default Layout; \ No newline at end of file diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/Navigation.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/Navigation.tsx deleted file mode 100644 index 5d27ca0ff9..0000000000 --- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/Navigation.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import Link from 'next/link'; -import { useI18n } from 'next-localization'; -import { getPublicUrl } from '@sitecore-jss/sitecore-jss-nextjs'; - -// Prefix public assets with a public URL to enable compatibility with Sitecore Experience Editor. -// If you're not supporting the Experience Editor, you can remove this. -const publicUrl = getPublicUrl(); - -const Navigation = (): JSX.Element => { - const { t } = useI18n(); - - return ( -
-
- - - Sitecore - - -
- -
- ); -}; - -export default Navigation; \ No newline at end of file diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Container.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Container.tsx index 152ff6a534..d9095f12c2 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Container.tsx +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Container.tsx @@ -6,28 +6,29 @@ import { useSitecoreContext, } from '@sitecore-jss/sitecore-jss-nextjs'; -interface Fields { -} +const BACKGROUND_REG_EXP = new RegExp( + /[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/gi +); interface ComponentProps { rendering: ComponentRendering & { params: ComponentParams }; params: ComponentParams; - fields: Fields; } const Container = (props: ComponentProps): JSX.Element => { - var styles = `${props.params.GridParameters} ${props.params.Styles}`.replace(/\|/g, ' '); - var phKey = `container-${props.params.DynamicPlaceholderId}`; - var backgroundStyle: { [key: string]: string; } ; - var backgroundImage = props.params.BackgroundImage as string; + const { sitecoreContext } = useSitecoreContext(); + const styles = `${props.params.GridParameters} ${props.params.Styles}`; + const phKey = `container-${props.params.DynamicPlaceholderId}`; + const backgroundImage = props.params.BackgroundImage as string; + let backgroundStyle: { [key: string]: string }; + if (backgroundImage) { - var prefix = `${useSitecoreContext().sitecoreContext.pageState !== 'normal' ? '/sitecore/shell' : ''}/-/media/` - backgroundStyle = { backgroundImage: `url('${prefix}${backgroundImage?.match(/[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/gi)?.pop()?.replace(/\-/g,'')}')` }; - } - if (props.rendering.placeholders && props.rendering.placeholders["container-{*}"]) { - props.rendering.placeholders[phKey] = props.rendering.placeholders["container-{*}"]; - delete props.rendering.placeholders["container-{*}"]; + const prefix = `${sitecoreContext.pageState !== 'normal' ? '/sitecore/shell' : ''}/-/media/`; + backgroundStyle = { + backgroundImage: `url('${prefix}${backgroundImage?.match(BACKGROUND_REG_EXP)?.pop()}')`, + }; } + return (
@@ -36,7 +37,7 @@ const Container = (props: ComponentProps): JSX.Element => {
- ) + ); }; export default Container; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx index cedd20e2be..058998afc6 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx @@ -5,7 +5,7 @@ import { ImageField, Field, LinkField, - Text + Text, } from '@sitecore-jss/sitecore-jss-nextjs'; interface Fields { @@ -19,46 +19,46 @@ type ImageProps = { fields: Fields; }; +const ImageDefault = (props: ImageProps): JSX.Element => ( +
+
+ Image +
+
+); + export const Default = (props: ImageProps): JSX.Element => { if (props.fields) { return ( -
+
); - } else { - return ( -
-
- Image -
-
- ) - } + } + + return ; }; export const Link = (props: ImageProps): JSX.Element => { if (props.fields) { - return ( -
+ return ( +
- +
); - } else { - return ( -
-
- Image -
-
- ) } -}; \ No newline at end of file + + return ; +}; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/LinkList.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/LinkList.tsx index 81c6fe3852..43456445ef 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/LinkList.tsx +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/LinkList.tsx @@ -1,22 +1,20 @@ import React from 'react'; -import { - Link as JssLink, - Text, - LinkField, -} from '@sitecore-jss/sitecore-jss-nextjs'; +import { Link as JssLink, Text, LinkField } from '@sitecore-jss/sitecore-jss-nextjs'; import { TextField } from '@sitecore-jss/sitecore-jss-react'; +type ResultsFieldLink = { + field: { + link: LinkField; + }; +}; + interface Fields { - data: Object & { - datasource: Object & { - children: Object & { - results: Array & { - field: Object & { - link: LinkField; - }; - }; + data: { + datasource: { + children: { + results: ResultsFieldLink[]; }; - field: Object & { + field: { title: TextField; }; }; @@ -28,9 +26,16 @@ type LinkListProps = { fields: Fields; }; -const LinkListItem = (props: any) => { +type LinkListItemProps = { + key: string; + index: number; + total: number; + field: ResultsFieldLink; +}; + +const LinkListItem = (props: LinkListItemProps) => { let className = `item${props.index}`; - (props.index + 1) % 2 == 0 ? (className += ' odd') : (className += ' even'); + className += (props.index + 1) % 2 == 0 ? ' odd' : ' even'; if (props.index == 0) { className += ' first'; } @@ -47,37 +52,35 @@ const LinkListItem = (props: any) => { }; export const Default = (props: LinkListProps): JSX.Element => { - let datasource = props.fields?.data?.datasource; + const datasource = props.fields?.data?.datasource; + if (datasource) { - let list = []; - for (let i = 0; i < datasource.children.results.length; i++) { - let element = datasource.children.results[i].field.link; - if (element) { - list.push( - - ); - } - } + const list = datasource.children.results + .filter((element: ResultsFieldLink) => element?.field?.link) + .map((element: ResultsFieldLink, key: number) => ( + + )); + return ( -
+
    {list}
); - } else { - return ( -
-
-

Link List

-
-
- ); } + + return ( +
+
+

Link List

+
+
+ ); }; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Navigation.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Navigation.tsx index 30220e324a..29014311d1 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Navigation.tsx +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Navigation.tsx @@ -1,108 +1,91 @@ import React from 'react'; -import { - Link, - LinkField, - Text -} from '@sitecore-jss/sitecore-jss-nextjs'; +import { Link, LinkField, Text, TextField } from '@sitecore-jss/sitecore-jss-nextjs'; interface Fields { Id: string; DisplayName: string; - Title: Text; - NavigationTitle: Text; + Title: TextField; + NavigationTitle: TextField; Href: string; Children: Array; Styles: string[]; } type NavigationProps = { - params: { [key: string]: string }; + params?: { [key: string]: string }; fields: Fields; }; -let getNavigationText = function (props: any): string { +const getNavigationText = function (props: NavigationProps): JSX.Element | string { let text; + if (props.fields.NavigationTitle) { - text = + text = ; } else if (props.fields.Title) { - text = + text = ; } else { text = props.fields.DisplayName; } + return text; }; -let getLinkField = function (props: any): LinkField { - let link: LinkField = { - value: { - href: props.fields.Href, - title: props.fields.DisplayName, - }, - } - return link; -} +const getLinkField = (props: NavigationProps): LinkField => ({ + value: { + href: props.fields.Href, + title: props.fields.DisplayName, + }, +}); const Navigation = (props: NavigationProps): JSX.Element => { - - if (Object.values(props.fields).length === 0) { + if (!Object.values(props.fields).length) { return (
-
- [Navigation] -
+
[Navigation]
); - } - - const list = []; - for (let i = 0; i < Object.values(props.fields).length; i++) { - const element = props.fields[i]; - if (element) { - list.push(); - } } + const list = Object.values(props.fields) + .filter((element) => element) + .map((element: Fields, key: number) => ( + + )); + return (
); }; -const NavigationList = (props: any) => { - if (props.fields.Children && props.fields.Children.length > 0) { - - let children: JSX.Element[] = []; - - props.fields.Children.map((element:Fields, index:Number) => { - children.push(); - }); +const NavigationList = (props: NavigationProps) => { + if (props.fields.Children && props.fields.Children.length) { + const children: JSX.Element[] = props.fields.Children.map((element: Fields, index: number) => ( + + )); return ( -
  • -
    - {getNavigationText(props)} -
    -
      - {children} -
    -
    • - ) - } else { - return ( -
  • -
    +
  • +
    {getNavigationText(props)} -
    +
    • +
      {children}
    - ) + ); } -} + + return ( +
  • +
    + {getNavigationText(props)} +
    +
    • + ); +}; export default Navigation; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/PageContent.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/PageContent.tsx index a9dfc396f9..95d066c142 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/PageContent.tsx +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/PageContent.tsx @@ -1,19 +1,9 @@ import React from 'react'; -import { - Field, - RichText as JssRichText, - useSitecoreContext, - LayoutServiceContext, - RouteData -} from '@sitecore-jss/sitecore-jss-nextjs'; - -export type SitecoreContextValue = LayoutServiceContext & { - itemId?: string; - route: RouteData; -}; +import { RichText as JssRichText, useSitecoreContext } from '@sitecore-jss/sitecore-jss-nextjs'; +import { RichTextField } from '@sitecore-jss/sitecore-jss-react'; interface Fields { - Content: Field; + Content: RichTextField; } type PageContentProps = { @@ -21,44 +11,41 @@ type PageContentProps = { fields: Fields; }; -const ComponentContent = (props: any) => { +type ComponentContentProps = { + styles: string; + children: JSX.Element; +}; + +const ComponentContent = (props: ComponentContentProps) => { return ( -
    +
    -
    - {props.children} -
    +
    {props.children}
    -
    - ) -} +
    + ); +}; -export const Default = (props: PageContentProps): JSX.Element => { - const { sitecoreContext } = useSitecoreContext(); +export const Default = (props: PageContentProps): JSX.Element => { + const { sitecoreContext } = useSitecoreContext(); - if (!(props.fields && props.fields.Content) && !sitecoreContext.route.fields.Content) { + if (!(props.fields && props.fields.Content) && !sitecoreContext?.route?.fields?.Content) { return ( -
    +
    -
    - [Content] -
    +
    [Content]
    -
    - ) - } - - if (props.fields && props.fields.Content) { - return ( - - - +
    ); - } else { - return ( - - - - ); } + + const field = + props.fields && props.fields.Content + ? props.fields.Content + : sitecoreContext?.route?.fields?.Content; + return ( + + + + ); }; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/PartialDesignDynamicPlaceholder.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/PartialDesignDynamicPlaceholder.tsx index fa8704aa72..008563bdef 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/PartialDesignDynamicPlaceholder.tsx +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/PartialDesignDynamicPlaceholder.tsx @@ -1,12 +1,13 @@ import React from 'react'; -import { - Placeholder -} from '@sitecore-jss/sitecore-jss-nextjs'; +import { Placeholder } from '@sitecore-jss/sitecore-jss-nextjs'; +import { ComponentRendering, RouteData } from '@sitecore-jss/sitecore-jss/layout'; -const PartialDesignDynamicPlaceholder = (props: any): JSX.Element => { - return ( - - ); +type DynamicPlaceholderProps = { + rendering: ComponentRendering | RouteData; }; +const PartialDesignDynamicPlaceholder = (props: DynamicPlaceholderProps): JSX.Element => ( + +); + export default PartialDesignDynamicPlaceholder; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Promo.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Promo.tsx index 7531da9bd3..89306eca52 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Promo.tsx +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Promo.tsx @@ -21,8 +21,8 @@ type PromoProps = { }; const PromoDefaultComponent = (props: PromoProps): JSX.Element => ( -
    -
    +
    +
    Promo
    @@ -31,7 +31,7 @@ const PromoDefaultComponent = (props: PromoProps): JSX.Element => ( export const Default = (props: PromoProps): JSX.Element => { if (props.fields) { return ( -
    +
    @@ -49,15 +49,15 @@ export const Default = (props: PromoProps): JSX.Element => {
    ); - } else { - return } + + return ; }; export const WithText = (props: PromoProps): JSX.Element => { if (props.fields) { return ( -
    +
    @@ -69,13 +69,13 @@ export const WithText = (props: PromoProps): JSX.Element => {
    - -
    + +
    ); - } else { - return } + + return ; }; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/RichText.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/RichText.tsx index 3db750803b..6eb0aa7477 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/RichText.tsx +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/RichText.tsx @@ -5,19 +5,21 @@ interface Fields { Text: Field; } -type RichTextProps = { +export type RichTextProps = { params: { [key: string]: string }; fields: Fields; }; export const RichText = (props: RichTextProps): JSX.Element => { - const text = props.fields ? : Rich text; + const text = props.fields ? ( + + ) : ( + Rich text + ); return (
    -
    - {text} -
    +
    {text}
    ); }; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Title.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Title.tsx index 2ef2f53c56..df49678117 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Title.tsx +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Title.tsx @@ -1,38 +1,31 @@ import React from 'react'; -import { - Link, - Text, - useSitecoreContext, - LinkField, -} from '@sitecore-jss/sitecore-jss-nextjs'; -import { - TextField, -} from '@sitecore-jss/sitecore-jss-react'; +import { Link, Text, useSitecoreContext, LinkField } from '@sitecore-jss/sitecore-jss-nextjs'; +import { TextField } from '@sitecore-jss/sitecore-jss-react'; interface Fields { - data: Object & { - datasource: Object & { - url: Object & { + data: { + datasource: { + url: { path: string; siteName: string; }; - field: Object & { - jsonValue: Object & { + field: { + jsonValue: { value: string; editable: string; - } + }; }; }; - contextItem: Object & { - url: Object & { + contextItem: { + url: { path: string; siteName: string; }; - field: Object & { - jsonValue: Object & { + field: { + jsonValue: { value: string; editable: string; - } + }; }; }; }; @@ -43,7 +36,12 @@ type TitleProps = { fields: Fields; }; -const ComponentContent = (props: any) => { +type ComponentContentProps = { + styles: string; + children: JSX.Element; +}; + +const ComponentContent = (props: ComponentContentProps) => { return (
    @@ -69,10 +67,11 @@ export const Title = (props: TitleProps): JSX.Element => { if (useSitecoreContext().sitecoreContext.pageState !== 'normal') { link.value.href += `?sc_site=${datasource?.url?.siteName}`; if (!text.value) { - text.value = "Title field"; - link.value.href = "#"; + text.value = 'Title field'; + link.value.href = '#'; } } + return ( diff --git a/packages/sitecore-jss-nextjs/src/index.ts b/packages/sitecore-jss-nextjs/src/index.ts index d178cfcb1f..2daa3b0b28 100644 --- a/packages/sitecore-jss-nextjs/src/index.ts +++ b/packages/sitecore-jss-nextjs/src/index.ts @@ -104,6 +104,7 @@ export { LinkField, LinkFieldValue, Text, + TextField, DateField, File, FileField,