@enonic/nextjs-adapter 3.0.0-B3 → 3.0.0-B5

package/src/types/component.ts

@@ -0,0 +1,147 @@
+import type {XP_COMPONENT_TYPE} from '../common/constants';
+import type {Context} from './next';
+
+// Differs from ComponentDefinition to avoid storing catchAll on all components
+// catchAll is calculated in getType instead
+export interface ComponentDefinitionParams {
+    query?: SelectedQueryMaybeVariablesFunc
+    configQuery?: string
+    processor?: DataProcessor
+    view?: React.FunctionComponent<any>
+}
+
+/**
+ *  Object that configures the handling of a particular content type. All attributes are optional (see examples below), and missing values will fall back to default behavior:
+ *          - 'query' (used in fetchContent.ts) Guillotine query for fetching content data, may also have a function that supplies guillotine variables. So, 'query' can EITHER be only a query string, OR also add a get-guillotine-variables function. In the latter case, 'query' can be an object with 'query' and 'variables' attributes, or an array where the query string is first and the get-variables function is second. Either way, the get-variables function takes two arguments: path (content path, mandatory) and context (next.js-supplied Context from getServerSideProps etc. Optional, and requires that fetchContent is called with the context, of course).
+ *          - 'props' (used in fetchContent.ts) is a function for processing props after fetching them
+ *          - 'view' (used in BasePage.tsx) is a React component: top-level content-type-specific rendering with the props first fetched from guillotine (and then optionally preprocessed with the function in 'props').
+ */
+export interface ComponentDefinition {
+    catchAll?: boolean; // will be set automatically depending on the binding
+    query?: SelectedQueryMaybeVariablesFunc,
+    configQuery?: string,
+    processor?: DataProcessor,
+    view?: React.FunctionComponent<any>
+}
+
+export interface ComponentDescriptor {
+    type?: ComponentDefinition;
+    component?: PageComponent;
+    queryAndVariables?: QueryAndVariables;
+}
+
+export type ComponentDictionary = Record<string,ComponentDefinitionParams>;
+
+// NB! Always return null or empty object from processor for next is unable to serialize undefined
+export type DataProcessor = (data: any, context?: Context, config?: any) => Promise<Record<string, any>>;
+
+export interface FragmentData {
+    id: string;
+    fragment: {
+        components: PageComponent[];
+    }
+}
+
+export interface ImageData {
+    ref: string;
+    image: {
+        id: string,
+    } | null,
+}
+
+export interface LayoutData {
+    descriptor: string;
+    config?: any;
+
+    [customKeysFromQuery: string]: any;
+}
+
+export interface LinkData {
+    ref: string,
+    media: {
+        content: {
+            id: string,
+        }
+    } | null,
+}
+
+export type MacroConfig = Record<string, any>;
+
+export interface MacroData {
+    ref: string
+    name: string
+    descriptor: string
+    config: Record<string, MacroConfig>
+}
+
+export interface PageComponent {
+    [key: string]: any; // keeps ts happy when accessing component data field by XP_COMPONENT_TYPE type
+    type: XP_COMPONENT_TYPE;
+    path: string;
+    page?: PageData;
+    part?: PartData;
+    layout?: LayoutData;
+    fragment?: FragmentData;
+    text?: TextData;
+    image?: any;
+    regions?: RegionTree;
+    data?: any;
+    error?: any;
+}
+
+export interface PageData {
+    descriptor: string;
+    config?: any;
+    template?: string | null;
+    regions?: RegionTree;
+}
+
+export interface PageRegion {
+    name: string;
+    components: PageComponent[];
+}
+
+export interface PartData {
+    descriptor: string;
+    config: any; // TODO NestedRecord?;
+
+    [customKeysFromQuery: string]: any;
+}
+
+export interface QueryAndVariables {
+    query: string
+    variables?: Record<string, any>
+}
+
+export type QueryGetter = (path: string, context?: Context, config?: any) => string;
+
+export type SelectedQueryMaybeVariablesFunc =
+    | string
+    | QueryGetter
+    | {
+        query: string | QueryGetter
+        variables: VariablesGetter
+    }
+    | [string | QueryGetter, VariablesGetter];
+
+export type RegionTree = Record<string, PageRegion>;
+
+export interface RichTextData {
+    processedHtml: string
+    links: LinkData[]
+    macros: MacroData[]
+    images: ImageData[]
+}
+
+export interface TextData {
+    value: RichTextData;
+}
+
+// TODO: also access as arguments: dataAsJson, pageAsJson, configAsJson from the first (meta) call here?
+//   Another option could be to let the component or page controller pass those values to NextJS by a header
+export type VariablesGetter = (path: string, context?: Context, config?: any) => VariablesGetterResult;
+
+export interface VariablesGetterResult {
+    [variables: string]: any
+    path: string
+}

package/src/types/componentProps.ts

@@ -0,0 +1,142 @@
+import {DOMNode} from 'html-react-parser';
+import type {
+    RENDER_MODE,
+    XP_REQUEST_TYPE,
+} from '../common/constants';
+import type {
+    FragmentData,
+    LayoutData,
+    MacroConfig,
+    MacroData,
+    PageComponent,
+    PageData,
+    PartData,
+    RichTextData,
+    RegionTree,
+} from './component';
+
+
+export interface BaseComponentProps {
+    component: PageComponent;
+    meta: MetaData;
+    common?: any;                  // Content is passed down for optional consumption in componentviews.
+    // TODO: Use a react contextprovider instead of "manually" passing everything down
+}
+
+export interface BaseLayoutProps {
+    component?: LayoutData;
+    path: string;
+    regions?: RegionTree;
+    common?: any;
+    meta: MetaData;
+}
+
+export interface BaseMacroProps {
+    data: MacroData;
+    meta: MetaData;
+    renderInEditMode?: boolean;
+}
+
+export interface BasePageProps {
+    component?: PageData;
+    path?: string;
+    common?: any;
+    data?: any;
+    error?: string;
+    meta: MetaData;
+}
+
+export interface BasePartProps {
+    component?: PartData;
+    path: string;
+    common?: any;
+    data?: any;
+    error?: string;
+    meta: MetaData;
+}
+
+export interface FragmentProps {
+    page?: PageData;
+    component?: FragmentData;
+    common?: any;
+    meta: MetaData;
+}
+
+export interface LayoutProps {
+    layout: LayoutData;
+    path: string;
+    common: any;
+    meta: MetaData;
+}
+
+export interface MacroProps {
+    name: string;
+    config: MacroConfig;
+    meta: MetaData;
+}
+
+export interface MetaData {
+    type: string,
+    path: string,
+    requestType: XP_REQUEST_TYPE,
+    renderMode: RENDER_MODE,
+    requestedComponent?: PageComponent,
+    canRender: boolean,
+    catchAll: boolean,
+    apiUrl: string,
+    baseUrl: string,
+    locale: string,
+    defaultLocale: string,
+}
+
+export interface PageProps {
+    page: PageData;
+    path: string;
+    data?: any;
+    common?: any; // Content is passed down to componentviews. TODO: Use a react contextprovider instead?
+    meta: MetaData;
+}
+
+export interface PartProps {
+    part: PartData
+    path: string
+    data?: any
+    // Content is passed down to componentviews. TODO: Use a react contextprovider instead?
+    common?: any
+    meta: MetaData
+}
+
+export interface RegionProps {
+    name: string
+    components?: PageComponent[]
+    className?: string
+    // Content is passed down for optional consumption in componentviews. TODO: Use a react contextprovider instead?
+    common?: any
+    meta: MetaData
+}
+
+export interface RegionsProps {
+    page: PageData | null;
+    name?: string;
+    // Content is passed down for optional consumption in componentviews. TODO: Use a react contextprovider instead?
+    common?: any;
+    meta: MetaData;
+}
+
+export type Replacer = (
+    domNode: DOMNode,
+    data: RichTextData,
+    meta: MetaData,
+    renderMacroInEditMode: boolean
+) => ReplacerResult;
+
+export type ReplacerResult = JSX.Element | object | void | undefined | null | false;
+
+export interface RichTextViewProps {
+    data: RichTextData
+    meta: MetaData
+    className?: string
+    tag?: string
+    renderMacroInEditMode?: boolean
+    customReplacer?: Replacer
+}

package/src/types/guillotine.ts

@@ -0,0 +1,426 @@
+import type {PublishInfo} from '@enonic-types/core';
+import type {PageComponent, PageData} from './component';
+import type {MetaData} from './componentProps';
+import type {Context} from './next';
+import type {RecursivePartial} from './util';
+
+
+export interface GuillotineError {
+    errorType: string
+    locations: {
+        line: number
+        column: number
+    }[]
+    message: string
+    validationErrorType?: string
+}
+
+// A specific observed error
+// export interface GuillotineValidationError extends GuillotineError {
+//     errorType: 'ValidationError'
+//     validationErrorType: string // 'FieldUndefined'
+// }
+
+// export interface GuillotineErrorResponseJson {
+//     errors: GuillotineError[]
+// }
+
+// export interface GuillotineOkResponseJson<Data = Record<string,unknown>> {
+//     data: Data
+// }
+
+// export type GuillotineResponseJson<Data> = GuillotineOkResponseJson<Data> | GuillotineErrorResponseJson;
+
+export interface GuillotineResponseJson<Guillotine = RecursivePartial<HeadlessCms>> {
+    // NOTE: guillotine is the actual field on the top Query, but can be used multiple times via aliases
+    data?: Record<string, Guillotine>
+    errors?: GuillotineError[]
+}
+
+export interface GuillotineResponse<Data = Record<string,unknown>> {
+    json: () => Promise<GuillotineResponseJson<Data>>
+    text: () => Promise<string>
+    ok: boolean
+    status: number
+}
+
+/**
+ * Sends one query to the guillotine API and asks for content type, then uses the type to select a second query and variables, which is sent to the API and fetches content data.
+ * @param contentPath string or string array: pre-split or slash-delimited _path to a content available on the API
+ * @returns FetchContentResult object: {data?: T, error?: {code, message}}
+ */
+export type ContentFetcher = (context: Context) => Promise<FetchContentResult>;
+
+export interface ContentResult<Content = Record<string, unknown>> extends Result {
+    contents?: Content[]
+}
+
+export interface FetchContentResult extends Result {
+    data: Record<string, any> | null
+    common: Record<string, any> | null
+    meta: MetaData
+    page: PageComponent | null
+}
+
+// Seems like NodeJS.fetch lowercases all headers, so we need to lowercase the
+// header names here.
+export interface GuillotineRequestHeaders {
+    Cookie?: string
+    locale: string
+    locales: string
+    'default-locale': string
+}
+
+export type GuillotineResult = Result & Record<string, any>;
+
+export interface MetaResult extends Result {
+    meta?: {
+        _path: string
+        type: string
+        pageAsJson?: PageData
+        components?: PageComponent[]
+    }
+}
+
+export interface Result {
+    error?: {
+        code: string
+        message: string
+    } | null
+}
+
+// Types from Query Playground Docs:
+
+interface AccessControlEntry {
+    principal: PrincipalKey
+    allow: [Permission]
+    deny: [Permission]
+}
+
+interface Attachment {
+    name: string
+    label: string
+    size: number
+    mimeType: string
+    attachmentUrl: string
+}
+
+type DateTime = string;
+
+export interface Component {
+    type: ComponentType
+    path: string
+    page?: PageComponentData | null
+    layout?: LayoutComponentData | null
+    image?: ImageComponentData | null
+    part?: PartComponentData | null
+    text?: TextComponentData | null
+    fragment?: FragmentComponentData | null
+}
+
+type ComponentType = 'page' | 'layout' | 'image' | 'part' | 'text' | 'fragment';
+
+interface Content {
+    _id: string // !
+    _name: string // !
+    _path: string // !
+    _references?: Content[]
+    _score?: number
+    creator?: PrincipalKey
+    modifier?: PrincipalKey
+    createdTime?: DateTime
+    modifiedTime?: DateTime
+    owner?: PrincipalKey
+    type?: string
+    contentType?: ContentType
+    displayName?: string
+    hasChildren?: boolean
+    language?: string
+    valid?: boolean
+    dataAsJson?: JSON
+    x?: ExtraData
+    xAsJson?: JSON
+    pageAsJson?: JSON
+    pageTemplate?: Content
+    components?: Component[]
+    attachments?: Attachment[]
+    publish?: PublishInfo
+    pageUrl?: string
+    site?: portal_Site
+    parent?: Content
+    children?: Content[]
+    childrenConnection?: ContentConnection
+    permissions?: Permissions
+}
+
+interface ContentConnection {
+    totalCount: Int
+    edges: ContentEdge[]
+    pageInfo: PageInfo
+}
+
+interface ContentEdge {
+    node: Content
+    cursor: string
+}
+
+interface ContentType {
+    name: string
+    displayName: string
+    description: string
+    superType: string
+    abstract: boolean
+    final: boolean
+    allowChildContent: boolean
+    contentDisplayNameScript: string
+    icon: Icon
+    form: FormItem[]
+    formAsJson: JSON
+    getInstances: Content[]
+    getInstanceConnection: ContentConnection
+}
+
+type ExtraData<App = Record<string,unknown>> = App & {
+    media: XData_media_ApplicationConfig
+    base: XData_base_ApplicationConfig
+};
+
+type Float = number;
+
+interface FormItem {
+    formItemType: FormItemType
+    name: string
+    label: string
+}
+
+type FormItemType = 'ItemSet' | 'Layout' | 'Input' | 'OptionSet';
+
+interface FragmentComponentData {
+    id: string
+    fragment: Content
+}
+
+interface GeoPoint {
+    value: string
+    latitude: Float
+    longitude: Float
+}
+
+export interface HeadlessCms {
+    get?: Content
+    getChildren?: Content[]
+    getChildrenConnection?: ContentConnection
+    getPermissions?: Permissions
+    getSite?: portal_Site
+    getType?: ContentType
+    getTypes?: ContentType[]
+    query?: Content[]
+    queryConnection?: QueryContentConnection
+    queryDsl?: Content[]
+    queryDslConnection?: QueryDSLContentConnection
+}
+
+interface Icon {
+    mimeType: string
+    modifiedTime: string
+}
+
+interface Image {
+    image: Content
+    ref: string
+    style: ImageStyle
+}
+
+interface ImageComponentData {
+    id: string
+    caption?: string
+    image: media_Image
+}
+
+interface ImageStyle {
+    name: string
+    aspectRatio: string
+    filter: string
+}
+
+type Int = number;
+
+type JSON = Record<string, unknown>;
+
+interface LayoutComponentData {
+    descriptor: string
+    configAsJson: JSON | null
+}
+
+interface Link {
+    ref: string
+    uri: string
+    media: Media
+    content: Content
+}
+
+type LocalDateTime = string;
+
+interface Macro_system_disable_DataConfig {
+    body: string
+}
+
+interface Macro_system_embed_DataConfig {
+    body: string
+}
+
+interface Macro {
+    ref: string
+    name: string
+    descriptor: string
+    config: MacroConfig
+}
+
+interface MacroConfig {
+    disable: Macro_system_disable_DataConfig
+    embed: Macro_system_embed_DataConfig
+}
+
+interface Media {
+    content: Content
+    intent: MediaIntentType
+}
+
+type MediaIntentType = 'download' | 'inline';
+
+interface media_Image extends Content {
+    mediaUrl: string
+    imageUrl: string
+    data: media_Image_Data
+}
+
+interface media_Image_Data {
+    media: MediaUploader
+    caption: string
+    altText: string
+    artist: string[]
+    copyright: string
+    tags: string[]
+}
+
+interface MediaFocalPoint {
+    x: number
+    y: number
+}
+
+interface MediaUploader {
+    attachment: string
+    focalPoint: MediaFocalPoint
+}
+
+interface PageComponentData {
+    descriptor?: string
+    customized?: boolean
+    configAsJson?: JSON
+    template?: Content | null
+}
+
+interface PageInfo {
+    startCursor: string // !
+    endCursor: string // !
+    hasNext: boolean // !
+}
+
+interface PartComponentData<Config = Record<string, unknown>> {
+    descriptor: string
+    config: Config
+    configAsJson: JSON
+}
+
+type Permission = 'READ' | 'CREATE' | 'MODIFY' | 'DELETE' | 'PUBLISH' | 'READ_PERMISSIONS' | 'WRITE_PERMISSIONS';
+
+interface Permissions {
+    inheritsPermissions: boolean
+    permissions: AccessControlEntry[]
+}
+
+interface portal_Site extends Content {
+    data: portal_Site_Data
+}
+
+interface portal_Site_Data {
+    description: string
+}
+
+type PrincipalType = 'user' | 'group' | 'role';
+
+interface PrincipalKey {
+    value: string
+    type: PrincipalType
+    idProvider: string
+    principalId: string
+}
+
+interface QueryContentConnection extends ContentConnection {
+    aggregationsAsJson: JSON
+}
+
+interface QueryDSLContentConnection extends QueryContentConnection {
+    highlightAsJson: JSON
+}
+
+interface RichText {
+    raw: string
+    processedHtml: string
+    macrosAsJson: JSON
+    macros: Macro[]
+    images: Image[]
+    links: Link[]
+}
+
+interface TextComponentData {
+    value: RichText
+}
+
+interface XData_base_ApplicationConfig {
+    gpsInfo: XData_base_gpsInfo_DataConfig
+}
+
+interface XData_base_gpsInfo_DataConfig {
+    geoPoint: GeoPoint
+    altitude: String
+    direction: String
+}
+
+interface XData_media_ApplicationConfig {
+    imageInfo: XData_media_imageInfo_DataConfig
+    cameraInfo: XData_media_cameraInfo_DataConfig
+}
+
+interface XData_media_imageInfo_DataConfig {
+    pixelSize: number
+    imageHeight: number
+    imageWidth: number
+    contentType: string
+    description: string
+    byteSize: number
+    colorSpace: string[]
+    fileSource: string
+}
+
+interface XData_media_cameraInfo_DataConfig {
+    date: LocalDateTime
+    make: string
+    model: string
+    lens: string
+    iso: string
+    focalLength: string
+    focalLength35: string
+    exposureBias: string
+    aperture: string[]
+    shutterTime: string
+    flash: string
+    autoFlashCompensation: string
+    whiteBalance: string
+    exposureProgram: string
+    shootingMode: string
+    meteringMode: string
+    exposureMode: string
+    focusDistance: string
+    orientation: string
+}

package/src/types/i18n.ts

@@ -0,0 +1,8 @@
+export type Dict = Record<string, string>;
+
+export interface LocaleContextType {
+    dictionary: Dict
+    locale: string
+    localize: (key: string, ...args: any[]) => string
+    setLocale: (locale: string) => Promise<Dict>
+}