@remkoj/optimizely-cms-react 1.0.3

package/dist/types.d.ts

@@ -0,0 +1,100 @@
+import type { PropsWithChildren, ComponentType as ReactComponentType } from "react";
+import type { DocumentNode } from "graphql";
+import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import type { IOptiGraphClient } from "@remkoj/optimizely-graph-client";
+export type ContentType = string[];
+export type ContentLink = {
+    id: number;
+    workId?: number | null;
+    guidValue?: string | null;
+} | {
+    id?: number | null;
+    workId?: number | null;
+    guidValue: string;
+};
+export type InlineContentLink = {
+    id: 0;
+    workId?: 0 | null;
+    guidValue?: null | "";
+} | {
+    id?: 0 | null;
+    workId?: 0 | null;
+    guidValue: "";
+};
+export type ContentLinkWithLocale = ContentLink & {
+    locale?: string;
+};
+export type CmsComponentProps<T> = PropsWithChildren<{
+    /**
+     * The identifier of the content item
+     */
+    contentLink: ContentLinkWithLocale;
+    /**
+     * The data already pre-fetched for the this component
+     */
+    data: T;
+    /**
+     * Use the Server/Client context instead if you need this information
+     *
+     * @deprecated
+     */
+    inEditMode?: boolean;
+    /**
+     * Use the Server/Client context instead if you need this information
+     *
+     * @deprecated
+     */
+    client?: IOptiGraphClient;
+}>;
+export type ContentQueryProps = ContentLinkWithLocale;
+/**
+ * Extract the data type from a GraphQL Query
+ */
+export type ResponseDataType<T extends DocumentNode> = T extends TypedDocumentNode<infer DataType> ? DataType : {
+    [key: string]: any;
+};
+export type GetDataQuery<T> = () => TypedDocumentNode<T, ContentQueryProps> | DocumentNode;
+export type GetDataFragment<T> = () => [string, TypedDocumentNode<T, never> | DocumentNode];
+export type WithGqlFragment<BaseComponent, DataType> = BaseComponent & {
+    getDataFragment: GetDataFragment<DataType>;
+    validateFragment?: (data: any) => data is DataType;
+};
+export type WithGqlQuery<B, T> = B & {
+    getDataQuery: GetDataQuery<T>;
+};
+export type BaseCmsComponent<T = {}> = T extends never | TypedDocumentNode | DocumentNode ? DynamicCmsComponent<T> : ReactComponentType<CmsComponentProps<T>>;
+export type DynamicCmsComponent<T extends TypedDocumentNode | DocumentNode = DocumentNode> = ReactComponentType<CmsComponentProps<ResponseDataType<T>>>;
+export type GraphQLFragmentBase = {
+    ' $fragmentName'?: string;
+};
+export type GraphQLQueryBase = {
+    __typename?: 'Query';
+};
+export type CmsComponentWithFragment<T = DocumentNode> = BaseCmsComponent<T> & WithGqlFragment<{}, T>;
+export type CmsComponentWithQuery<T = DocumentNode> = BaseCmsComponent<T> & WithGqlQuery<{}, T>;
+export type CmsComponentWithOptionalQuery<T = DocumentNode> = BaseCmsComponent<T> & Partial<WithGqlQuery<{}, T>>;
+/**
+ * A generic Optimizely CMS Component that will change the static surface based upon the
+ * provided data type for the component. It will detect automatically whether the component
+ * requires a query or fragment to load the data and allows typechecking of the required
+ * getDataFragement / getDataQuery methods are valid.
+ *
+ * When a type is provided that cannot be resolved to either the output of a Query or a Fragment,
+ * it will assume an optional getDataQuery method.
+ */
+export type CmsComponent<T = DocumentNode> = T extends TypedDocumentNode<infer R, any> ? CmsComponentWithQuery<R> : T extends DocumentNode ? CmsComponentWithQuery<{
+    [key: string]: any;
+}> : T extends GraphQLFragmentBase ? CmsComponentWithFragment<T> : T extends GraphQLQueryBase ? CmsComponentWithQuery<T> : CmsComponentWithOptionalQuery<T>;
+import type { createElement } from 'react';
+export type ComponentType = Parameters<typeof createElement>[0];
+export type ComponentTypeHandle = string | string[];
+export type ComponentTypeDictionary = {
+    type: ComponentTypeHandle;
+    component: ComponentType;
+}[];
+export interface ComponentFactory {
+    has(type: ComponentTypeHandle): boolean;
+    register(type: ComponentTypeHandle, componentType: ComponentType): void;
+    registerAll(components: ComponentTypeDictionary): void;
+    resolve(type: ComponentTypeHandle): ComponentType | undefined;
+}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/dist/utilities.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentType } from 'react';
+import type * as Types from './types';
+import type { DocumentNode } from 'graphql';
+export declare function isContentLink(toTest: any): toTest is Types.ContentLink;
+export declare function isContentLinkWithLocale(toTest: any): toTest is Types.ContentLinkWithLocale;
+export declare function isNonEmptyString(toTest: any): toTest is string;
+export declare function isNotNullOrUndefined<T>(toTest?: T | null): toTest is T;
+export declare function isContentType(toTest: any): toTest is Types.ContentType;
+export declare function normalizeContentType(toNormalize: (string | null)[] | null | undefined): Types.ContentType | undefined;
+export declare function normalizeContentLink(toNormalize?: {
+    id?: null | number;
+    workId?: null | number;
+    guidValue?: null | string;
+} | null): Types.ContentLink | undefined;
+export declare function normalizeContentLinkWithLocale(toNormalize?: {
+    id?: null | number;
+    workId?: null | number;
+    guidValue?: null | string;
+    locale?: string | null;
+} | null): Types.ContentLinkWithLocale | undefined;
+export declare function isCmsComponentWithDataQuery<T = DocumentNode>(toTest?: Types.BaseCmsComponent<T>): toTest is Types.CmsComponentWithQuery<T>;
+export declare function isCmsComponentWithFragment<T = DocumentNode>(toTest?: Types.BaseCmsComponent<T>): toTest is Types.CmsComponentWithFragment<T>;
+export declare function validatesFragment<T extends ComponentType<any>>(toTest?: T): toTest is T & Pick<Required<Types.WithGqlFragment<T, any>>, "validateFragment">;
+export declare function contentLocaleToGraphLocale<T>(contentLocale?: T): T extends string ? string : undefined;
+export declare function contentLinkToRequestVariables(contentLink: Types.ContentLinkWithLocale): Types.ContentQueryProps;
+export declare function isInlineContentLink(contentLink: Types.ContentLink): contentLink is Types.InlineContentLink;
+export declare function contentLinkToString(contentLink: Types.ContentLink): string;
+export declare function toUniqueValues<R extends any>(value: R, index: number, array: Array<R>): value is R;
+export declare function trim<T extends string | null | undefined>(valueToTrim: T): T;

package/dist/utilities.js

@@ -0,0 +1,98 @@
+export function isContentLink(toTest) {
+    // It must be an object
+    if (typeof (toTest) != 'object' || toTest == null)
+        return false;
+    // The object must have an Id (numeric, >= 0) or GuidValue (string, minimum 1 character)
+    return (typeof (toTest.id) == 'number' && toTest.id >= 0) ||
+        (typeof (toTest.guidValue) == 'string' && toTest.guidValue.length > 0);
+}
+export function isContentLinkWithLocale(toTest) {
+    if (!isContentLink(toTest))
+        return false;
+    const locale = toTest.locale;
+    return locale == undefined || (typeof (locale) == 'string' && locale.length >= 2 && locale.length <= 5);
+}
+export function isNonEmptyString(toTest) {
+    return typeof (toTest) == 'string' && toTest.length > 0;
+}
+export function isNotNullOrUndefined(toTest) {
+    return !(toTest == null || toTest == undefined);
+}
+export function isContentType(toTest) {
+    if (!Array.isArray(toTest))
+        return false;
+    return toTest.every(isNonEmptyString);
+}
+export function normalizeContentType(toNormalize) {
+    if (!Array.isArray(toNormalize))
+        return undefined;
+    const filtered = toNormalize.filter(isNonEmptyString);
+    return filtered.length > 0 ? filtered : undefined;
+}
+export function normalizeContentLink(toNormalize) {
+    if (typeof (toNormalize) != 'object' || toNormalize == null)
+        return undefined;
+    if (toNormalize.id == null)
+        toNormalize.id = 0; // Change the 'null' identifier and turn it into a 'zero'
+    if (toNormalize.guidValue == null || toNormalize.guidValue == "")
+        delete toNormalize.guidValue; // Remove an empty or null guid value
+    if ((toNormalize.id ?? -1) >= 0 || (toNormalize.guidValue ?? "").length > 0)
+        return toNormalize;
+    return undefined;
+}
+export function normalizeContentLinkWithLocale(toNormalize) {
+    const normalized = normalizeContentLink(toNormalize);
+    if (normalized.locale != undefined && !(typeof (normalized.locale) == 'string' && normalized.locale.length >= 1 && normalized.locale.length <= 5))
+        delete normalized.locale;
+    return normalized;
+}
+export function isCmsComponentWithDataQuery(toTest) {
+    const toTestType = typeof (toTest);
+    if ((toTestType == 'function' || toTestType == 'object') && toTest != null) {
+        return toTest.getDataQuery && typeof (toTest.getDataQuery) == 'function' ? true : false;
+    }
+    return false;
+}
+export function isCmsComponentWithFragment(toTest) {
+    const toTestType = typeof (toTest);
+    if ((toTestType == 'function' || toTestType == 'object') && toTest != null)
+        return toTest.getDataFragment && typeof (toTest.getDataFragment) == 'function' ? true : false;
+    return false;
+}
+export function validatesFragment(toTest) {
+    const toTestType = typeof (toTest);
+    if ((toTestType == 'function' || toTestType == 'object') && toTest != null)
+        return toTest.validateFragment && typeof (toTest.validateFragment) == 'function' ? true : false;
+    return false;
+}
+export function contentLocaleToGraphLocale(contentLocale) {
+    if (typeof (contentLocale) == 'string' && contentLocale.length >= 2 && contentLocale.length <= 5)
+        return contentLocale?.replaceAll('-', '_');
+    return undefined;
+}
+export function contentLinkToRequestVariables(contentLink) {
+    const variables = {
+        id: contentLink.id ?? 0,
+        workId: contentLink.workId,
+        guidValue: contentLink.guidValue ?? null,
+        locale: contentLocaleToGraphLocale(contentLink.locale)
+    };
+    if (variables.workId == undefined || variables.workId <= 0)
+        variables.workId = null;
+    return variables;
+}
+export function isInlineContentLink(contentLink) {
+    return !contentLink.id && !contentLink.guidValue;
+}
+export function contentLinkToString(contentLink) {
+    return `${contentLink.id ?? 0}_${contentLink.workId ?? 0}#${contentLink.guidValue ?? ''}\$${contentLink.locale ?? ''}`;
+}
+export function toUniqueValues(value, index, array) {
+    return array.indexOf(value) == index;
+}
+export function trim(valueToTrim) {
+    if (typeof (valueToTrim) == 'string')
+        return valueToTrim.trim();
+    return valueToTrim;
+}
+//# sourceMappingURL=utilities.js.map

package/dist/utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilities.js","sourceRoot":"","sources":["../src/utilities.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@remkoj/optimizely-cms-react",
+  "license": "Apache-2.0",
+  "version": "1.0.3",
+  "packageManager": "yarn@4.1.1",
+  "repository": "https://github.com/remkoj/optimizely-dxp-clients.git",
+  "author": "Remko Jantzen <693172+remkoj@users.noreply.github.com>",
+  "homepage": "https://github.com/remkoj/optimizely-dxp-clients",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "./dist"
+  ],
+  "exports": {
+    ".": "./dist/index.js",
+    "./browser": "./dist/browser/index.js",
+    "./rsc": "./dist/server/index.js",
+    "./rsc/cms-content": "./dist/server/components/cms-content.js",
+    "./rsc/cms-content-area": "./dist/server/components/cms-content-area.js"
+  },
+  "typesVersions": {
+    "*": {
+      "browser": [
+        "dist/browser/index.d.ts"
+      ],
+      "rsc": [
+        "dist/server/index.d.ts"
+      ],
+      "rsc/cms-content": [
+        "dist/server/components/cms-content.d.ts"
+      ],
+      "rsc/cms-content-area": [
+        "dist/server/components/cms-content-area.d.ts"
+      ]
+    }
+  },
+  "devDependencies": {
+    "@remkoj/optimizely-graph-client": "1.0.3",
+    "@types/crypto-js": "^4.2.2",
+    "@types/node": "^20.12.4",
+    "@types/react": "^18.2.74",
+    "@types/react-dom": "18.2.24",
+    "graphql": "^16.8.1",
+    "graphql-request": "^6.1.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "scheduler": "^0.23.0",
+    "typescript": "^5.4.3"
+  },
+  "dependencies": {
+    "@graphql-typed-document-node/core": "^3.2.0",
+    "crypto-js": "^4.2.0"
+  },
+  "peerDependencies": {
+    "@remkoj/optimizely-graph-client": "1.0.3",
+    "graphql": "*",
+    "graphql-request": "*",
+    "react": "*",
+    "react-dom": "*"
+  },
+  "scripts": {
+    "clean": "tsc --build --clean",
+    "prepare": "tsc --build",
+    "watch": "tsc --watch",
+    "recompile": "tsc --build --clean && tsc --build --force"
+  }
+}