Feature/520166 (#957)

* #520166 Initial move of existing code * #520166: added lost components for fix this sample * #520166: reverted missed file Layout.tsx * #520166 added Navigation component in the Layout * #520166 removed .next from .gitignore * #520166 refactoring for moving SXA nextjs * #520166 moved robots.ts from components to pages folder * #520166: refactoring and fixed comments * #520166 fixed unit test * #520166 added test and comments for code * #520166 fixed comments * #520166 fixed comments (repair after wrong rebase) Co-authored-by: Dawid Rutkowski <[email protected]> Co-authored-by: Ruslan Matkovskyi <[email protected]>
Sitecore · Mar 31, 2022 · 540a2f5 · 540a2f5
1 parent 675fd1a
commit 540a2f5
Show file tree

Hide file tree

Showing 17 changed files with 747 additions and 18 deletions.
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sxa-styles.css b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sxa-styles.css
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
@@ -0,0 +1,43 @@
+import React from 'react';
+import {
+  ComponentParams,
+  ComponentRendering,
+  Placeholder,
+  useSitecoreContext,
+} from '@sitecore-jss/sitecore-jss-nextjs';
+
+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;
+}
+
+const Container = (props: ComponentProps): JSX.Element => {
+  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) {
+    const prefix = `${sitecoreContext.pageState !== 'normal' ? '/sitecore/shell' : ''}/-/media/`;
+    backgroundStyle = {
+      backgroundImage: `url('${prefix}${backgroundImage?.match(BACKGROUND_REG_EXP)?.pop()}')`,
+    };
+  }
+
+  return (
+    <div className={`component container ${styles}`}>
+      <div className="component-content" style={backgroundStyle}>
+        <div className="row">
+          <Placeholder name={phKey} rendering={props.rendering} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Container;
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/HelloWorld.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/HelloWorld.tsx
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
@@ -0,0 +1,64 @@
+import React from 'react';
+import {
+  Image as JssImage,
+  Link as JssLink,
+  ImageField,
+  Field,
+  LinkField,
+  Text,
+} from '@sitecore-jss/sitecore-jss-nextjs';
+
+interface Fields {
+  Image: ImageField;
+  ImageCaption: Field<string>;
+  Link: LinkField;
+}
+
+type ImageProps = {
+  params: { [key: string]: string };
+  fields: Fields;
+};
+
+const ImageDefault = (props: ImageProps): JSX.Element => (
+  <div className={`component image ${props.params.styles}`}>
+    <div className="component-content">
+      <span className="is-empty-hint">Image</span>
+    </div>
+  </div>
+);
+
+export const Default = (props: ImageProps): JSX.Element => {
+  if (props.fields) {
+    return (
+      <div className={`component image ${props.params.styles}`}>
+        <div className="component-content">
+          <JssImage field={props.fields.Image} />
+          <Text className="image-caption field-imagecaption" field={props.fields.ImageCaption} />
+        </div>
+      </div>
+    );
+  }
+
+  return <ImageDefault {...props} />;
+};
+
+export const Link = (props: ImageProps): JSX.Element => {
+  if (props.fields) {
+    return (
+      <div className={`component image ${props.params.styles}`}>
+        <div className="component-content">
+          <JssLink field={props.fields.Link}>
+            <JssImage field={props.fields.Image} />
+            <Text
+              tag="span"
+              className="image-caption field-imagecaption"
+              field={props.fields.ImageCaption}
+            />
+          </JssLink>
+        </div>
+      </div>
+    );
+  }
+
+  return <ImageDefault {...props} />;
+};
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
@@ -0,0 +1,85 @@
+import React from 'react';
+import { Link as JssLink, Text, LinkField, TextField } from '@sitecore-jss/sitecore-jss-nextjs';
+
+type ResultsFieldLink = {
+  field: {
+    link: LinkField;
+  };
+};
+
+interface Fields {
+  data: {
+    datasource: {
+      children: {
+        results: ResultsFieldLink[];
+      };
+      field: {
+        title: TextField;
+      };
+    };
+  };
+}
+
+type LinkListProps = {
+  params: { [key: string]: string };
+  fields: Fields;
+};
+
+type LinkListItemProps = {
+  key: string;
+  index: number;
+  total: number;
+  field: ResultsFieldLink;
+};
+
+const LinkListItem = (props: LinkListItemProps) => {
+  let className = `item${props.index}`;
+  className += (props.index + 1) % 2 == 0 ? ' odd' : ' even';
+  if (props.index == 0) {
+    className += ' first';
+  }
+  if (props.index + 1 == props.total) {
+    className += ' last';
+  }
+  return (
+    <li className={className}>
+      <div className="field-link">
+        <JssLink field={props.field} />
+      </div>
+    </li>
+  );
+};
+
+export const Default = (props: LinkListProps): JSX.Element => {
+  const datasource = props.fields?.data?.datasource;
+
+  if (datasource) {
+    const list = datasource.children.results
+      .filter((element: ResultsFieldLink) => element?.field?.link)
+      .map((element: ResultsFieldLink, key: number) => (
+        <LinkListItem
+          index={key}
+          key={`${key}${element.field.link}`}
+          total={datasource.children.results.length}
+          field={element}
+        />
+      ));
+
+    return (
+      <div className={`component link-list ${props.params.styles}`}>
+        <div className="component-content">
+          <Text tag="h3" field={datasource?.field?.title} />
+          <ul>{list}</ul>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`component link-list ${props.params.styles}`}>
+      <div className="component-content">
+        <h3>Link List</h3>
+      </div>
+    </div>
+  );
+};
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
@@ -0,0 +1,91 @@
+import React from 'react';
+import { Link, LinkField, Text, TextField } from '@sitecore-jss/sitecore-jss-nextjs';
+
+interface Fields {
+  Id: string;
+  DisplayName: string;
+  Title: TextField;
+  NavigationTitle: TextField;
+  Href: string;
+  Children: Array<Fields>;
+  Styles: string[];
+}
+
+type NavigationProps = {
+  params?: { [key: string]: string };
+  fields: Fields;
+};
+
+const getNavigationText = function (props: NavigationProps): JSX.Element | string {
+  let text;
+
+  if (props.fields.NavigationTitle) {
+    text = <Text field={props.fields.NavigationTitle} />;
+  } else if (props.fields.Title) {
+    text = <Text field={props.fields.Title} />;
+  } else {
+    text = props.fields.DisplayName;
+  }
+
+  return text;
+};
+
+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) {
+    return (
+      <div className={`component navigation`}>
+        <div className="component-content">[Navigation]</div>
+      </div>
+    );
+  }
+
+  const list = Object.values(props.fields)
+    .filter((element) => element)
+    .map((element: Fields, key: number) => (
+      <NavigationList key={`${key}${element.Id}`} fields={element} />
+    ));
+
+  return (
+    <div className={`component navigation`}>
+      <div className="component-content">
+        <nav>
+          <ul className="clearfix">{list}</ul>
+        </nav>
+      </div>
+    </div>
+  );
+};
+
+const NavigationList = (props: NavigationProps) => {
+  if (props.fields.Children && props.fields.Children.length) {
+    const children: JSX.Element[] = props.fields.Children.map((element: Fields, index: number) => (
+      <NavigationList key={`${index}${element.Id}`} fields={element} />
+    ));
+
+    return (
+      <li className={props.fields.Styles.join(' ')} key={props.fields.Id}>
+        <div className="navigation-title">
+          <Link field={getLinkField(props)}>{getNavigationText(props)}</Link>
+        </div>
+        <ul className="clearfix">{children}</ul>
+      </li>
+    );
+  }
+
+  return (
+    <li className={props.fields.Styles.join(' ')} key={props.fields.Id}>
+      <div className="navigation-title">
+        <Link field={getLinkField(props)}>{getNavigationText(props)}</Link>
+      </div>
+    </li>
+  );
+};
+
+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
@@ -0,0 +1,51 @@
+import React from 'react';
+import { RichText as JssRichText, useSitecoreContext } from '@sitecore-jss/sitecore-jss-nextjs';
+import { RichTextField } from '@sitecore-jss/sitecore-jss-react';
+
+interface Fields {
+  Content: RichTextField;
+}
+
+type PageContentProps = {
+  params: { [key: string]: string };
+  fields: Fields;
+};
+
+type ComponentContentProps = {
+  styles: string;
+  children: JSX.Element;
+};
+
+const ComponentContent = (props: ComponentContentProps) => {
+  return (
+    <div className={`component content ${props.styles}`}>
+      <div className="component-content">
+        <div className="field-content">{props.children}</div>
+      </div>
+    </div>
+  );
+};
+
+export const Default = (props: PageContentProps): JSX.Element => {
+  const { sitecoreContext } = useSitecoreContext();
+
+  if (!(props.fields && props.fields.Content) && !sitecoreContext?.route?.fields?.Content) {
+    return (
+      <div className={`component content ${props.params.styles}`}>
+        <div className="component-content">
+          <div className="field-content">[Content]</div>
+        </div>
+      </div>
+    );
+  }
+
+  const field =
+    props.fields && props.fields.Content
+      ? props.fields.Content
+      : sitecoreContext?.route?.fields?.Content;
+  return (
+    <ComponentContent styles={props.params.styles}>
+      <JssRichText field={field} />
+    </ComponentContent>
+  );
+};
diff --git a/...-sitecore-jss/src/templates/nextjs-sxa/src/components/PartialDesignDynamicPlaceholder.tsx b/...-sitecore-jss/src/templates/nextjs-sxa/src/components/PartialDesignDynamicPlaceholder.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Placeholder } from '@sitecore-jss/sitecore-jss-nextjs';
+import { ComponentRendering, RouteData } from '@sitecore-jss/sitecore-jss/layout';
+
+type DynamicPlaceholderProps = {
+  rendering: ComponentRendering | RouteData;
+};
+
+const PartialDesignDynamicPlaceholder = (props: DynamicPlaceholderProps): JSX.Element => (
+  <Placeholder name={props.rendering.params.sig} rendering={props.rendering} />
+);
+
+export default PartialDesignDynamicPlaceholder;