Export client-side and server-side component maps instead of only the individual components

packages/react-sample-library/package.json

@@ -6,7 +6,6 @@
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
-  "private": true,
   "typesVersions": {
     "*": {
       "*": [
@@ -70,6 +69,7 @@
   },
   "dependencies": {
     "@pantheon-systems/pcc-sdk-core": "latest",
+    "@pantheon-systems/pcc-react-sdk": "latest",
     "@pantheon-systems/pds-toolkit-react": "1.0.0-dev.55",
     "markdown-it": "^13.0.2",
     "query-string": "^8.1.0"

packages/react-sample-library/src/components/Avatar.tsx

@@ -10,12 +10,12 @@ type Props = {
   fallbackIcon?: "user" | "users";
 };
 
-export default function Avatar({
+export const reactComponent = ({
   image,
   size,
   className,
   fallbackIcon,
-}: Props) {
+}: Props) => {
   return (
     <BaseAvatar
       imageSrc={image}
@@ -24,9 +24,9 @@ export default function Avatar({
       fallbackIcon={fallbackIcon}
     />
   );
-}
+};
 
-Avatar.smartComponentDefinition = {
+export const smartComponentDefinition = {
   title: "Avatar",
   iconUrl: null,
   fields: {

packages/react-sample-library/src/components/Badge.tsx

@@ -6,11 +6,11 @@ import { type SmartComponentMap } from "@pantheon-systems/pcc-sdk-core";
 
 // TODO: Infer the type of the props from the smart component definition
 // https://getpantheon.atlassian.net/browse/PCC-827
-export default function Badge({
+export const reactComponent = ({
   successType,
   label,
   hasStatusType,
-}: BadgeProps) {
+}: BadgeProps) => {
   return (
     <BaseBadge
       successType={successType}
@@ -20,7 +20,7 @@ export default function Badge({
   );
 }
 
-Badge.smartComponentDefinition = {
+export const smartComponentDefinition = {
   title: "Badge",
   iconUrl: null,
   fields: {

packages/react-sample-library/src/components/BannerNotification.tsx

@@ -6,14 +6,14 @@ import { type SmartComponentMap } from "@pantheon-systems/pcc-sdk-core";
 
 // TODO: Infer the type of the props from the smart component definition
 // https://getpantheon.atlassian.net/browse/PCC-827
-export default function BannerNotification({
+export const reactComponent = ({
   type,
   message,
-}: BannerNotificationProps) {
+}: BannerNotificationProps) => {
   return <BaseBannerNotification type={type} message={message} />;
 }
 
-BannerNotification.smartComponentDefinition = {
+export const smartComponentDefinition = {
   title: "Banner Notification",
   iconUrl: null,
   fields: {

packages/react-sample-library/src/components/Blockquote.tsx

@@ -6,13 +6,13 @@ import { type SmartComponentMap } from "@pantheon-systems/pcc-sdk-core";
 
 // TODO: Infer the type of the props from the smart component definition
 // https://getpantheon.atlassian.net/browse/PCC-827
-export default function Blockquote({
+export const reactComponent = ({
   type,
   quote,
   person,
   source,
   className,
-}: BlockquoteProps) {
+}: BlockquoteProps) => {
   return (
     <BaseBlockquote
       type={type}
@@ -24,7 +24,7 @@ export default function Blockquote({
   );
 }
 
-Blockquote.smartComponentDefinition = {
+export const smartComponentDefinition = {
   title: "Blockquote",
   iconUrl: null,
   fields: {

packages/react-sample-library/src/components/CTALink.tsx

@@ -10,17 +10,17 @@ interface Props {
   linkText: string;
 }
 
-export default function CTALink({ size, className, href, linkText }: Props) {
+export const reactComponent = ({ size, className, href, linkText }: Props) => {
   return (
     <BaseCTALink
       size={size}
       className={className}
       linkContent={<a href={href}>{linkText}</a>}
     />
   );
-}
+};
 
-CTALink.smartComponentDefinition = {
+export const smartComponentDefinition = {
   title: "CTA Link",
   iconUrl: null,
   fields: {

packages/react-sample-library/src/components/InlineBannerNotification.tsx

@@ -6,15 +6,15 @@ import { type SmartComponentMap } from "@pantheon-systems/pcc-sdk-core";
 
 // TODO: Infer the type of the props from the smart component definition
 // https://getpantheon.atlassian.net/browse/PCC-827
-export default function InlineBannerNotification({
+export const reactComponent = ({
   title,
   text,
   type,
-}: InlineBannerNotificationProps) {
+}: InlineBannerNotificationProps) => {
   return <BaseInlineBannerNotification title={title} text={text} type={type} />;
 }
 
-InlineBannerNotification.smartComponentDefinition = {
+export const smartComponentDefinition = {
   title: "Inline Banner Notification",
   iconUrl: null,
   fields: {

packages/react-sample-library/src/components/SectionBannerNotification.tsx

@@ -6,14 +6,14 @@ import { type SmartComponentMap } from "@pantheon-systems/pcc-sdk-core";
 
 // TODO: Infer the type of the props from the smart component definition
 // https://getpantheon.atlassian.net/browse/PCC-827
-export default function SectionBannerNotification({
+export const reactComponent = ({
   message,
   type,
   isDismissible,
   id,
   title,
   className,
-}: SectionBannerNotificationProps) {
+}: SectionBannerNotificationProps) => {
   return (
     <BaseSectionBannerNotification
       message={message}
@@ -26,7 +26,7 @@ export default function SectionBannerNotification({
   );
 }
 
-SectionBannerNotification.smartComponentDefinition = {
+export const smartComponentDefinition = {
   title: "Section Banner Notification",
   iconUrl: null,
   fields: {

packages/react-sample-library/src/components/Tooltip.tsx

@@ -6,13 +6,13 @@ import { type SmartComponentMap } from "@pantheon-systems/pcc-sdk-core";
 
 // TODO: Infer the type of the props from the smart component definition
 // https://getpantheon.atlassian.net/browse/PCC-827
-export default function Tooltip({
+export const reactComponent = ({
   content,
   triggerIcon,
   triggerAccessibleText,
   triggerText,
   className,
-}: TooltipProps) {
+}: TooltipProps) => {
   return (
     <BaseTooltip
       content={content}
@@ -22,9 +22,9 @@ export default function Tooltip({
       className={className}
     />
   );
-}
+};
 
-Tooltip.smartComponentDefinition = {
+export const smartComponentDefinition = {
   title: "Tooltip",
   iconUrl: null,
   fields: {

packages/react-sample-library/src/components/index.ts

@@ -1,8 +1,69 @@
-export { default as Avatar } from "./Avatar";
-export { default as Badge } from "./Badge";
-export { default as BannerNotification } from "./BannerNotification";
-export { default as Blockquote } from "./Blockquote";
-export { default as CTALink } from "./CTALink";
-export { default as InlineBannerNotification } from "./InlineBannerNotification";
-export { default as SectionBannerNotification } from "./SectionBannerNotification";
-export { default as Tooltip } from "./Tooltip";
+import {
+  ServersideSmartComponentMap,
+  SmartComponentMap,
+} from "@pantheon-systems/pcc-react-sdk/components";
+import * as Avatar from "./Avatar";
+import * as Badge from "./Badge";
+import * as BannerNotification from "./BannerNotification";
+import * as Blockquote from "./Blockquote";
+import * as CTALink from "./CTALink";
+import * as InlineBannerNotification from "./InlineBannerNotification";
+import * as SectionBannerNotification from "./SectionBannerNotification";
+import * as Tooltip from "./Tooltip";
+
+// Adding a PANTHEON_ prefix to help developers using
+// this library avoid naming conflicts.
+export const ClientSmartComponentMap: SmartComponentMap = {
+  PANTHEON_AVATAR: {
+    ...Avatar.smartComponentDefinition,
+    reactComponent: Avatar.reactComponent,
+  },
+  PANTHEON_BADGE: {
+    ...Badge.smartComponentDefinition,
+    reactComponent: Badge.reactComponent,
+  },
+  PANTHEON_BANNER_NOTIFICATION: {
+    ...BannerNotification.smartComponentDefinition,
+    reactComponent: BannerNotification.reactComponent,
+  },
+  PANTHEON_BLOCKQUOTE: {
+    ...Blockquote.smartComponentDefinition,
+    reactComponent: Blockquote.reactComponent,
+  },
+  PANTHEON_CTA_LINK: {
+    ...CTALink.smartComponentDefinition,
+    reactComponent: CTALink.reactComponent,
+  },
+  PANTHEON_INLINE_BANNER_NOTIFICATION: {
+    ...InlineBannerNotification.smartComponentDefinition,
+    reactComponent: InlineBannerNotification.reactComponent,
+  },
+  PANTHEON_SECTION_BANNER_NOTIFICATION: {
+    ...SectionBannerNotification.smartComponentDefinition,
+    reactComponent: SectionBannerNotification.reactComponent,
+  },
+  PANTHEON_TOOLTIP: {
+    ...Tooltip.smartComponentDefinition,
+    reactComponent: Tooltip.reactComponent,
+  },
+};
+
+// Clone the client-side map and remove reactComponent from each entry.
+export const ServerSmartComponentMap: ServersideSmartComponentMap =
+  Object.assign({}, ClientSmartComponentMap);
+
+Object.entries(ServerSmartComponentMap).forEach(([k, v]) => {
+  ServerSmartComponentMap[k] = Object.assign({}, v);
+  delete ServerSmartComponentMap[k].reactComponent;
+});
+
+export {
+  Avatar,
+  Badge,
+  BannerNotification,
+  Blockquote,
+  CTALink,
+  InlineBannerNotification,
+  SectionBannerNotification,
+  Tooltip,
+};

packages/react-sdk/src/components/ArticleRenderer/index.tsx

@@ -13,6 +13,10 @@ import MarkdownRenderer from "./Markdown";
 import PantheonTreeRenderer from "./PantheonTreeRenderer";
 import PantheonTreeV2Renderer from "./PantheonTreeV2Renderer";
 
+export type ServersideSmartComponentMap = {
+  [K in keyof CoreSmartComponentMap]: CoreSmartComponentMap[K];
+};
+
 export type SmartComponentMap = {
   [K in keyof CoreSmartComponentMap]: CoreSmartComponentMap[K] & {
     reactComponent: Parameters<typeof React.createElement>[0];

packages/react-sdk/src/components/index.ts

@@ -1,4 +1,5 @@
 export {
   default as ArticleRenderer,
+  ServersideSmartComponentMap,
   SmartComponentMap,
 } from "./ArticleRenderer";