nodoku-core 0.1.7 → 0.2.1

package/esm/bin/mustache/visual-schema.json.hbs

@@ -9,7 +9,7 @@
                     "type": "object",
                     "properties": {
                         "theme": {
-                            "$ref": "../node_modules/nodoku-core/schemas/skin-common-schema.json#/definitions/ThemeStyle",
+                            "$ref": "../node_modules/nodoku-core/schemas/skin-common-schema.json#/definitions/RowThemeStyle",
                             "additionalProperties": false
                         },
                         "maxCols": {

package/esm/content/nd-content.js

@@ -51,7 +51,7 @@ export class NdContentBlock {
     h6;
     footer;
     paragraphs = [];
-    bgImageUrl;
+    // bgImageUrl?: NdTranslatableText;
     images = [];
     htmlElements = [];
     constructor(id, ns, lng) {

package/esm/core/dummy-comp.jsx

@@ -1,5 +1,4 @@
 import { NdCode, NdTranslatableText } from "../content/nd-content";
-// import {CodeComp} from "./code-comp";
 export async function DummyComp(props) {
     // console.log("content dummy comp", props.theme)
     const { content, i18nextProvider, lng, rowIndex, componentIndex } = props;
@@ -7,13 +6,14 @@ export async function DummyComp(props) {
     return <div>{await render(rowIndex, componentIndex, content[0], t)}</div>;
 }
 async function render(rowIndex, componentIndex, block, t) {
-    var style = {};
-    if (block.bgImageUrl) {
-        style = { backgroundImage: `url(${t(block.bgImageUrl)})` };
-    }
+    // var style = {};
+    // if (block.bgImageUrl) {
+    //     style = {backgroundImage: `url(${t(block.bgImageUrl)})`}
+    // }
     return (<div className={"w-full w-full flex flex-col items-left justify-left  border border-4 border-red-200 relative pb-10"}>
-            <div className={"top-0 bottom-0 left-0 right-0 absolute bg-cover bg-no-repeat"} style={{ ...style, zIndex: -11 }}>
-            </div>
+            {/*<div className={"top-0 bottom-0 left-0 right-0 absolute bg-cover bg-no-repeat"}*/}
+            {/*     style={{...style, zIndex: -11}}>*/}
+            {/*</div>*/}
             <div className={"top-0 bottom-0 left-0 right-0 absolute bg-white "} style={{ zIndex: -5, opacity: 0.7 }}>
             </div>
             <div className={"p-5 w-full bg-red-400 text-center"}>dummy component<h3><b>{`ns-${block.namespace}-row-${rowIndex}-i-${componentIndex}`}</b></h3></div>

package/esm/core/rendering-page-props.js

@@ -21,15 +21,15 @@ export class RenderingPageProps {
     skin = undefined;
     renderingPriority = RenderingPriority.content_first;
     componentResolver = undefined;
-    imageUrlProvider = undefined;
+    imageProvider = undefined;
     i18nextProvider = undefined;
-    constructor(lng, content, componentResolver, skin = undefined, renderingPriority = RenderingPriority.content_first, imageUrlProvider = undefined, i18nextProvider = undefined) {
+    constructor(lng, content, componentResolver, skin = undefined, renderingPriority = RenderingPriority.content_first, imageProvider = undefined, i18nextProvider = undefined) {
         this.lng = lng;
         this.renderingPriority = renderingPriority;
         this.content = content;
         this.componentResolver = componentResolver;
         this.skin = skin;
-        this.imageUrlProvider = imageUrlProvider;
+        this.imageProvider = imageProvider;
         this.i18nextProvider = i18nextProvider;
     }
 }

package/esm/core/rendering-page.jsx

@@ -5,15 +5,17 @@ import { DummyComp } from "./dummy-comp";
 import yaml from "js-yaml";
 import fs from "node:fs";
 import { mergeTheme } from "../theme-utils/theme-merger";
+import { defaultRowThemeImpl } from "../theme-utils/row-style";
 async function defaultComponentResolver() {
     const compoDef = new NdComponentDefinition("unlimited", undefined, {});
     return { compo: DummyComp, compoDef: compoDef };
 }
-async function defaultImageUrlProvider(imageUrl) {
-    return imageUrl;
+async function defaultImageProvider(imageProps) {
+    const { imageStyle, url, alt } = imageProps;
+    return <img className={`${imageStyle?.base} ${imageStyle?.decoration}`} src={url} alt={alt}/>;
 }
 async function RenderingPage(props) {
-    const { lng, renderingPriority, content, componentResolver, skin, imageUrlProvider, i18nextProvider } = props;
+    const { lng, renderingPriority, content, componentResolver, skin, imageProvider, i18nextProvider } = props;
     const actualComponentResolver = componentResolver ? componentResolver : defaultComponentResolver;
     let l;
     if (skin) {
@@ -23,10 +25,10 @@ async function RenderingPage(props) {
         }
         // console.log(" >>> this is my content <<< ", content)
         // console.log(" >>> this is my skin <<< ", JSON.stringify(blockSkin))
-        l = await Promise.all(blockSkin.rows.map(async (row, iRow) => await createRow(row, iRow, content, lng, imageUrlProvider, i18nextProvider, actualComponentResolver)));
+        l = await Promise.all(blockSkin.rows.map(async (row, iRow) => await createRow(row, iRow, content, lng, imageProvider, i18nextProvider, actualComponentResolver)));
     }
     else {
-        l = [await createRow(undefined, 0, content, lng, imageUrlProvider, i18nextProvider, actualComponentResolver)];
+        l = [await createRow(undefined, 0, content, lng, imageProvider, i18nextProvider, actualComponentResolver)];
     }
     return <div className={`${skin?.renderingPage?.base} ${skin?.renderingPage?.decoration}`}>{l}</div>;
 }
@@ -35,7 +37,7 @@ function generateSkinByContentBlocks(blocks, skin) {
     let currentRow = undefined;
     const res = new NdPageSkin();
     let rowIndex = 0;
-    blocks.map((b, i) => {
+    blocks.map((b) => {
         if (!rendered.has(b.id)) {
             const bRows = skin.rows.filter(r => r.components.filter(c => c.selector.match(b)).length > 0);
             if (bRows.length > 0) {
@@ -62,66 +64,85 @@ function generateSkinByContentBlocks(blocks, skin) {
     // console.log("generated skin", JSON.stringify(res))
     return res;
 }
-async function createRow(row, iRow, blocks, lng, imageUrlProvider, i18nProvider, componentResolver) {
+async function createRow(row, iRow, blocks, lng, imageProvider, i18nProvider, componentResolver) {
     let l;
     if (row) {
-        l = await Promise.all(row.components.map(async (visualSection, iComp) => await createRowComponents(iRow, iComp, visualSection, blocks, lng, imageUrlProvider, i18nProvider, componentResolver)));
+        l = await Promise.all(row.components.map(async (visualSection, iComp) => await createRowComponents(iRow, iComp, visualSection, blocks, lng, imageProvider, i18nProvider, componentResolver)));
     }
     else {
-        l = await Promise.all(blocks.map(async (block, iComp) => await createRowComponents(iRow, iComp, undefined, [block], lng, imageUrlProvider, i18nProvider, componentResolver)));
+        l = await Promise.all(blocks.map(async (block, iComp) => await createRowComponents(iRow, iComp, undefined, [block], lng, imageProvider, i18nProvider, componentResolver)));
     }
     const rowComponents = l.flatMap((p) => p);
     if (rowComponents.length == 0) {
         return <></>;
     }
     const numComponents = rowComponents.length;
-    const rowEffectiveTheme = mergeTheme(row?.theme, NdRow.defaultRowTheme);
+    const rowEffectiveTheme = mergeTheme(row?.theme, defaultRowThemeImpl);
     const maxCols = row?.maxCols ? row.maxCols : 3;
     const numCols = numComponents <= maxCols ? numComponents : maxCols;
     let gridCols = "grid-cols-1";
+    let flexBasis = "basis-full";
     switch (numCols) {
         case 1:
             gridCols = "lg:grid-cols-1";
+            flexBasis = "lg:basis-full";
             break;
         case 2:
             gridCols = "lg:grid-cols-2";
+            flexBasis = "lg:basis-1/2";
             break;
         case 3:
             gridCols = "lg:grid-cols-3";
+            flexBasis = "lg:basis-1/3";
             break;
         case 4:
             gridCols = "lg:grid-cols-4";
+            flexBasis = "lg:basis-1/4";
             break;
         case 5:
             gridCols = "lg:grid-cols-5";
+            flexBasis = "lg:basis-1/5";
             break;
         case 6:
             gridCols = "lg:grid-cols-6";
+            flexBasis = "lg:basis-1/6";
             break;
         case 7:
             gridCols = "lg:grid-cols-7";
+            flexBasis = "lg:basis-1/7";
             break;
         case 8:
             gridCols = "lg:grid-cols-8";
+            flexBasis = "lg:basis-1/8";
             break;
         case 9:
             gridCols = "lg:grid-cols-9";
+            flexBasis = "lg:basis-1/9";
             break;
         case 10:
             gridCols = "lg:grid-cols-10";
+            flexBasis = "lg:basis-1/10";
             break;
         case 11:
             gridCols = "lg:grid-cols-11";
+            flexBasis = "lg:basis-1/11";
             break;
         case 12:
             gridCols = "lg:grid-cols-12";
+            flexBasis = "lg:basis-1/12";
             break;
     }
-    return (<div key={`row-${iRow}`} className={`grid ${gridCols} ${rowEffectiveTheme?.base} ${rowEffectiveTheme?.decoration} class-row-${iRow}`}>
-            {rowComponents}
+    let rowDisplay = `grid ${gridCols}`;
+    if (rowEffectiveTheme.rowDisplay == "flex") {
+        rowDisplay = "flex flex-row justify-center flex-wrap flex-1";
+    }
+    return (<div key={`row-${iRow}`} className={`${rowDisplay} ${rowEffectiveTheme?.base} ${rowEffectiveTheme?.decoration} class-row-${iRow}`}>
+            {rowComponents.map((c) => <div className={`nd-component-holder ${flexBasis} ${rowEffectiveTheme.componentHolder?.base} ${rowEffectiveTheme.componentHolder?.decoration}`}>
+                        {c}
+                    </div>)}
         </div>);
 }
-async function createRowComponents(rowIndex, blockIndex, skinComponent, pageContent, lng, imageUrlProvide, i18nProvider, componentResolver) {
+async function createRowComponents(rowIndex, blockIndex, skinComponent, pageContent, lng, imageProvider, i18nProvider, componentResolver) {
     // console.log("before component", skinComponent)
     const filteredBlocks = skinComponent ? skinComponent.selector.filterBlocks(pageContent) : pageContent;
     if (filteredBlocks.length == 0) {
@@ -147,14 +168,14 @@ async function createRowComponents(rowIndex, blockIndex, skinComponent, pageCont
             const blocks = filteredBlocks.slice(start, end);
             const compIndex = blockIndex * filteredBlocks.length + i;
             // console.log("calculated compo index ", compIndex, "filteredBlocks.length", filteredBlocks.length, "blockIndex", blockIndex)
-            res.push(await renderSingleComponent(rowIndex, compIndex, compo, blocks, skinComponent?.defaultThemeName || "light", compoDef.defaultTheme, skinComponent?.themeHierarchy, lng, imageUrlProvide, i18nProvider));
+            res.push(await renderSingleComponent(rowIndex, compIndex, compo, blocks, skinComponent?.defaultThemeName || "light", compoDef.defaultTheme, skinComponent?.themeHierarchy, lng, imageProvider, i18nProvider));
         }
         start = end;
         ++i;
     } while (end < filteredBlocks.length);
     return res;
 }
-async function renderSingleComponent(rowIndex, componentIndex, component, blocks, defaultThemeName, defaultTheme, themeHierarchy, lng, imageUrlProvider, i18nextProvider) {
+async function renderSingleComponent(rowIndex, componentIndex, component, blocks, defaultThemeName, defaultTheme, themeHierarchy, lng, imageProvider, i18nextProvider) {
     let actualI18nextProvider;
     if (lng == blocks[0].lng || !i18nextProvider) {
         actualI18nextProvider = async (lng) => {
@@ -167,7 +188,7 @@ async function renderSingleComponent(rowIndex, componentIndex, component, blocks
     else {
         actualI18nextProvider = i18nextProvider;
     }
-    const actualImageUrlProvider = imageUrlProvider ? imageUrlProvider : defaultImageUrlProvider;
+    const actualImageProvider = imageProvider ? imageProvider : defaultImageProvider;
     // if (themeHierarchy) {
     //     console.log("themeHierarchy", themeHierarchy)
     // }
@@ -182,12 +203,12 @@ async function renderSingleComponent(rowIndex, componentIndex, component, blocks
         themes: effectiveThemes,
         options: effectiveOptions,
         lng: lng,
-        imageUrlProvider: actualImageUrlProvider,
+        imageProvider: actualImageProvider,
         i18nextProvider: actualI18nextProvider
     };
     // console.log("start rendering page with props", props);
     const res = await component(props);
     // console.log("end rendering page with props", props);
-    return <div className={"nd-component-holder"} style={{ minWidth: 0 }}>{res}</div>;
+    return res;
 }
 export { RenderingPage };

package/esm/index.js

@@ -3,11 +3,16 @@ import { NdSkinComponent, NdRow, NdPageSkin, NdSkinComponentProps, NdContentSele
 import { RenderingPageProps, RenderingPriority } from "./core/rendering-page-props";
 import { RenderingPage } from "./core/rendering-page";
 import { mergeTheme } from "./theme-utils/theme-merger";
-import { ThemeStyle } from "./theme-utils/theme-style";
-import { ExtendedThemeStyle } from "./theme-utils/extended-theme-style";
+import { defaultRowThemeImpl } from "./theme-utils/row-style";
 export { NdContentImage, NdTranslatableText, NdList, NdCode, NdContentBlock, NdSkinComponent, NdRow, NdPageSkin, NdSkinComponentProps, NdContentSelector, NdComponentDefinition, NdThemeHierarchy };
 export { RenderingPageProps, RenderingPriority, RenderingPage };
-export { mergeTheme, ThemeStyle, ExtendedThemeStyle };
+export { mergeTheme };
 export { DummyComp } from "./core/dummy-comp";
 export { contentMarkdownProvider, parseMarkdownAsContent } from "./providers/content/content-markdown-provider";
 export { skinYamlProvider, parseYamlContentAsSkin } from "./providers/skin/skin-yaml-provider";
+export const ts = function (t, key) {
+    const themeStyle = t[key];
+    const k = key;
+    return k + " " + themeStyle?.base + " " + themeStyle?.decoration;
+};
+export const defaultRowTheme = defaultRowThemeImpl;

package/esm/providers/content/content-markdown-provider.js

@@ -250,9 +250,10 @@ class BlockHolder {
         if (this.blockContent.footer && this.blockContent.footer.trim().length > 0) {
             newBlock.footer = new NdTranslatableText(this.ns, `${blockId}.footer`, this.blockContent.footer);
         }
-        if (this.blockContent.bgImage && this.blockContent.bgImage.getAttribute("src")) {
-            newBlock.bgImageUrl = new NdTranslatableText(this.ns, `${blockId}.bgImageUrl`, this.blockContent.bgImage.getAttribute("src"), true);
-        }
+        // if (this.blockContent.bgImage && this.blockContent.bgImage.getAttribute("src")) {
+        //     newBlock.bgImageUrl = new NdTranslatableText(this.ns,  `${blockId}.bgImageUrl`,
+        //         this.blockContent.bgImage.getAttribute("src") as string, true);
+        // }
         // console.log("added block", newBlock)
         return newBlock;
     }
@@ -348,12 +349,11 @@ export function parseMarkdownAsContent(fileContents, contentLng, ns) {
                 childNode.childNodes.filter(cn => cn.rawTagName == "img")
                     .forEach((cn) => {
                     const l = cn;
-                    if (l.getAttribute("alt") === "bg-image") {
-                        currentBlock.blockContent.bgImage = l;
-                    }
-                    else {
-                        currentBlock.addImage(cn);
-                    }
+                    // if (l.getAttribute("alt") === "bg-image") {
+                    //     currentBlock.blockContent.bgImage = l;
+                    // } else {
+                    currentBlock.addImage(cn);
+                    // }
                 });
             }
             else {

package/esm/skin/nd-skin.js

@@ -72,10 +72,6 @@ export class NdRow {
     constructor(rowIndex) {
         this.rowIndex = rowIndex;
     }
-    static defaultRowTheme = {
-        base: "md:grid-cols-1",
-        decoration: "gap-4"
-    };
 }
 export class NdPageSkin {
     renderingPage;
@@ -121,9 +117,9 @@ export class NdSkinComponentProps {
     themes;
     options;
     lng;
-    imageUrlProvider;
+    imageProvider;
     i18nextProvider;
-    constructor(rowIndex, componentIndex, content, defaultThemeName, theme, themes, options, lng, imageUrlProvider, i18nextProvider) {
+    constructor(rowIndex, componentIndex, content, defaultThemeName, theme, themes, options, lng, imageProvider, i18nextProvider) {
         this.rowIndex = rowIndex;
         this.componentIndex = componentIndex;
         this.content = content;
@@ -132,7 +128,7 @@ export class NdSkinComponentProps {
         this.themes = themes.slice();
         this.options = options;
         this.lng = lng;
-        this.imageUrlProvider = imageUrlProvider;
+        this.imageProvider = imageProvider;
         this.i18nextProvider = i18nextProvider;
     }
 }

package/esm/theme-utils/extended-theme-style.js

@@ -1,4 +1 @@
-import { ThemeStyle } from "./theme-style";
-export class ExtendedThemeStyle extends ThemeStyle {
-    css;
-}
+export {};

package/esm/theme-utils/image-style.js

@@ -0,0 +1 @@
+export {};

package/esm/theme-utils/row-style.js

@@ -0,0 +1,9 @@
+export const defaultRowThemeImpl = {
+    base: "md:grid-cols-1",
+    decoration: "gap-4",
+    rowDisplay: "grid",
+    componentHolder: {
+        base: "min-w-0 overflow-hidden",
+        decoration: ""
+    },
+};

package/esm/theme-utils/theme-style.js

@@ -1,8 +1 @@
-export class ThemeStyle {
-    base;
-    decoration;
-    constructor(base, decoration) {
-        this.base = base;
-        this.decoration = decoration;
-    }
-}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodoku-core",
-  "version": "0.1.7",
+  "version": "0.2.1",
   "description": "basic foundation for nodoku static site generator",
   "exports": {
     ".": {

package/schemas/skin-common-schema.json

@@ -48,6 +48,47 @@
       ]
     },
 
+    "ImageStyle": {
+      "allOf": [
+        {
+          "$ref": "#/definitions/ThemeStyle"
+        },
+        {
+          "type": "object",
+          "properties": {
+            "imageWidth": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        }
+      ],
+      "additionalProperties": false
+    },
+
+
+    "RowThemeStyle": {
+      "allOf": [
+        {
+          "$ref": "#/definitions/ThemeStyle"
+        },
+        {
+          "type": "object",
+          "properties": {
+            "rowDisplay": {
+              "type": "string",
+              "enum": ["flex", "grid"]
+            },
+            "componentHolder": {
+              "$ref": "#/definitions/ThemeStyle"
+            }
+          },
+          "additionalProperties": false
+        }
+      ],
+      "additionalProperties": false
+    },
+
 
 
     "Selector": {

package/types/content/nd-content.d.ts

@@ -40,7 +40,6 @@ export declare class NdContentBlock {
     h6?: NdTranslatableText;
     footer?: NdTranslatableText;
     paragraphs: (NdTranslatableText | NdList | NdCode)[];
-    bgImageUrl?: NdTranslatableText;
     images: NdContentImage[];
     htmlElements: {
         htmlElem: HTMLElement;

package/types/core/providers.d.ts

@@ -1,6 +1,13 @@
 import { JSX } from "react";
 import { NdComponentDefinition, NdSkinComponentProps } from "../skin/nd-skin";
 import { NdTranslatableText } from "../content/nd-content";
+import { ImageStyle } from "../theme-utils/image-style";
+export type NdImageProps = {
+    url: string;
+    alt?: string;
+    title?: string;
+    imageStyle?: ImageStyle;
+};
 export type AsyncFunctionComponent = (props: NdSkinComponentProps) => Promise<JSX.Element>;
 export type ComponentResolver = (componentName: string) => Promise<{
     compo: AsyncFunctionComponent;
@@ -9,4 +16,4 @@ export type ComponentResolver = (componentName: string) => Promise<{
 export type I18nextProvider = (lng: string) => Promise<{
     t: (text: NdTranslatableText) => string;
 }>;
-export type ImageUrlProvider = (imageUrl: string) => Promise<string>;
+export type ImageProvider = (imageProps: NdImageProps) => Promise<JSX.Element>;

package/types/core/rendering-page-props.d.ts

@@ -1,4 +1,4 @@
-import { ComponentResolver, I18nextProvider, ImageUrlProvider } from "./providers";
+import { ComponentResolver, I18nextProvider, ImageProvider } from "./providers";
 import { NdContentBlock } from "../content/nd-content";
 import { NdPageSkin } from "../skin/nd-skin";
 export declare enum RenderingPriority {
@@ -11,7 +11,7 @@ export declare class RenderingPageProps {
     skin: NdPageSkin | undefined;
     renderingPriority: RenderingPriority;
     componentResolver: ComponentResolver | undefined;
-    imageUrlProvider: ImageUrlProvider | undefined;
+    imageProvider: ImageProvider | undefined;
     i18nextProvider: I18nextProvider | undefined;
-    constructor(lng: string, content: NdContentBlock[], componentResolver: ComponentResolver | undefined, skin?: NdPageSkin | undefined, renderingPriority?: RenderingPriority, imageUrlProvider?: ImageUrlProvider | undefined, i18nextProvider?: I18nextProvider | undefined);
+    constructor(lng: string, content: NdContentBlock[], componentResolver: ComponentResolver | undefined, skin?: NdPageSkin | undefined, renderingPriority?: RenderingPriority, imageProvider?: ImageProvider | undefined, i18nextProvider?: I18nextProvider | undefined);
 }

package/types/index.d.ts

@@ -2,14 +2,18 @@ import { NdContentImage, NdTranslatableText, NdList, NdCode, NdContentBlock } fr
 import { NdSkinComponent, NdRow, NdPageSkin, NdSkinComponentProps, NdContentSelector, NdComponentDefinition, NdThemeHierarchy, NdDefaultThemeName } from "./skin/nd-skin";
 import { RenderingPageProps, RenderingPriority } from "./core/rendering-page-props";
 import { RenderingPage } from "./core/rendering-page";
-import { I18nextProvider, AsyncFunctionComponent, ImageUrlProvider } from "./core/providers";
+import { I18nextProvider, AsyncFunctionComponent, ImageProvider, NdImageProps } from "./core/providers";
 import { mergeTheme } from "./theme-utils/theme-merger";
 import { ThemeStyle } from "./theme-utils/theme-style";
 import { ExtendedThemeStyle } from "./theme-utils/extended-theme-style";
-export { NdContentImage, NdTranslatableText, NdList, NdCode, NdContentBlock, NdSkinComponent, NdRow, NdPageSkin, NdSkinComponentProps, NdContentSelector, NdComponentDefinition, NdThemeHierarchy, type NdDefaultThemeName };
+import { ImageStyle } from "./theme-utils/image-style";
+import { RowStyle } from "./theme-utils/row-style";
+export { NdContentImage, NdTranslatableText, NdList, NdCode, NdContentBlock, NdSkinComponent, NdRow, NdPageSkin, NdSkinComponentProps, NdContentSelector, NdComponentDefinition, NdThemeHierarchy, type NdDefaultThemeName, type NdImageProps };
 export { RenderingPageProps, RenderingPriority, RenderingPage };
-export { mergeTheme, ThemeStyle, ExtendedThemeStyle };
-export type { I18nextProvider, AsyncFunctionComponent, ImageUrlProvider };
+export { mergeTheme, type ThemeStyle, type ExtendedThemeStyle, type ImageStyle };
+export type { I18nextProvider, AsyncFunctionComponent, ImageProvider };
 export { DummyComp } from "./core/dummy-comp";
 export { contentMarkdownProvider, parseMarkdownAsContent } from "./providers/content/content-markdown-provider";
 export { skinYamlProvider, parseYamlContentAsSkin } from "./providers/skin/skin-yaml-provider";
+export declare const ts: <T>(t: T, key: keyof T) => string;
+export declare const defaultRowTheme: RowStyle;

package/types/skin/nd-skin.d.ts

@@ -1,6 +1,7 @@
-import { I18nextProvider, ImageUrlProvider } from "../core/providers";
+import { I18nextProvider, ImageProvider } from "../core/providers";
 import { NdContentBlock } from "../content/nd-content";
 import { ThemeStyle } from "../theme-utils/theme-style";
+import { RowStyle } from "../theme-utils/row-style";
 export type NdDefaultThemeName = "light" | "dark";
 export declare class NdThemeHierarchy {
     defaultThemeName: NdDefaultThemeName;
@@ -31,10 +32,9 @@ export declare class NdSkinComponent {
 export declare class NdRow {
     rowIndex: number;
     maxCols?: number;
-    theme: ThemeStyle | undefined;
+    theme?: RowStyle;
     components: NdSkinComponent[];
     constructor(rowIndex: number);
-    static defaultRowTheme: ThemeStyle;
 }
 export declare class NdPageSkin {
     renderingPage: ThemeStyle | undefined;
@@ -69,7 +69,7 @@ export declare class NdSkinComponentProps<TComponentTheme = any, TComponentOptio
     themes: TComponentTheme[];
     options: TComponentOptions | undefined;
     lng: string;
-    imageUrlProvider: ImageUrlProvider;
+    imageProvider: ImageProvider;
     i18nextProvider: I18nextProvider;
-    constructor(rowIndex: number, componentIndex: number, content: NdContentBlock[], defaultThemeName: NdDefaultThemeName, theme: TComponentTheme, themes: TComponentTheme[], options: TComponentOptions, lng: string, imageUrlProvider: ImageUrlProvider, i18nextProvider: I18nextProvider);
+    constructor(rowIndex: number, componentIndex: number, content: NdContentBlock[], defaultThemeName: NdDefaultThemeName, theme: TComponentTheme, themes: TComponentTheme[], options: TComponentOptions, lng: string, imageProvider: ImageProvider, i18nextProvider: I18nextProvider);
 }

package/types/theme-utils/extended-theme-style.d.ts

@@ -1,8 +1,8 @@
 import { CSSProperties } from "react";
 import { ThemeStyle } from "./theme-style";
-export declare class ExtendedThemeStyle extends ThemeStyle {
+export type ExtendedThemeStyle = ThemeStyle & {
     css?: {
         light: CSSProperties;
         dark: CSSProperties;
     };
-}
+};

package/types/theme-utils/image-style.d.ts

@@ -0,0 +1,4 @@
+import { ThemeStyle } from "./theme-style";
+export type ImageStyle = ThemeStyle & {
+    imageWidth?: string;
+};

package/types/theme-utils/row-style.d.ts

@@ -0,0 +1,6 @@
+import { ThemeStyle } from "./theme-style";
+export type RowStyle = ThemeStyle & {
+    rowDisplay?: "flex" | "grid";
+    componentHolder?: ThemeStyle;
+};
+export declare const defaultRowThemeImpl: RowStyle;

package/types/theme-utils/theme-style.d.ts

@@ -1,5 +1,4 @@
-export declare class ThemeStyle {
+export type ThemeStyle = {
     base: string;
     decoration: string;
-    constructor(base: string, decoration: string);
-}
+};