@nodeblocks/frontend-hero-block 0.0.2

package/dist/Hero.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import "./hero.css";
+import { DefaultBlocks, DefaultSettings } from "./blocks";
+export interface HeroProps {
+    /** */
+    buttonText: string;
+    /**
+     * Configures the main byline text to display for this component.
+     * Supports components to handle inline images and text colors
+     */
+    byline: string | React.ReactNode;
+    /** href for linking Hero */
+    onClickButton: () => void;
+    /** URL of the image to show in this hero image component */
+    imageUrl: string;
+    /** Screen size to show for this block */
+    className: string;
+    /** Show/hide secondary text */
+    secondaryText?: string | React.ReactNode;
+    /** Show/hide tertiary text */
+    tertiaryText?: string | React.ReactNode;
+    children?: (defaultBlocks: DefaultBlocks, settings?: DefaultSettings) => {
+        blocks: {
+            [x: string]: any;
+        };
+        settings?: DefaultSettings;
+    };
+}
+export declare const Hero: React.FC<HeroProps>;
+//# sourceMappingURL=Hero.d.ts.map

package/dist/Hero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../src/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,YAAY,CAAC;AAEpB,OAAO,EAAE,aAAa,EAAiB,eAAe,EAAa,MAAM,UAAU,CAAC;AACpF,MAAM,WAAW,SAAS;IACxB,MAAM;IACN,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,MAAM,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,4BAA4B;IAC5B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,4DAA4D;IAC5D,QAAQ,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,SAAS,EAAE,MAAM,CAAC;IAClB,+BAA+B;IAC/B,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACzC,8BAA8B;IAC9B,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,QAAQ,CAAC,EAAE,eAAe,KAAK;QACvE,MAAM,EAAE;YAAE,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;SAAE,CAAC;QAC7B,QAAQ,CAAC,EAAE,eAAe,CAAC;KAC9B,CAAC;CACD;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA4BpC,CAAC"}

package/dist/blocks.d.ts

@@ -0,0 +1,55 @@
+export type DefaultBlocks = {
+    HeroImg: React.FC<{
+        imageUrl: string;
+    }>;
+    HeroByline: React.FC<{
+        byline: string | React.ReactNode;
+    }>;
+    SecondaryText: React.FC<{
+        secondaryText: string | React.ReactNode;
+    }>;
+    ActionButton: React.FC<{
+        onClickButton: () => void;
+        buttonText: string;
+    }>;
+    TertiaryText: React.FC<{
+        text: string | React.ReactNode;
+    }>;
+};
+export type DefaultSettings = {};
+export declare function HeroImg({ imageUrl }: {
+    imageUrl: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function HeroByline({ byline }: {
+    byline: string | React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SecondaryText({ secondaryText }: {
+    secondaryText: string | React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ActionButton({ onClickButton, buttonText }: {
+    onClickButton: () => void;
+    buttonText: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TertiaryText({ text }: {
+    text: string | React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function setBlocks(defaultBlocks: DefaultBlocks, children?: (defaultBlocks: DefaultBlocks, settings?: DefaultSettings) => {
+    blocks: {
+        [x: string]: any;
+    };
+    settings?: DefaultSettings;
+}, settings?: DefaultSettings): {
+    blocks: {
+        [k: string]: any;
+    };
+    settings: {};
+};
+export declare const defaultSettings: {};
+export declare const defaultBlocks: {
+    HeroImg: typeof HeroImg;
+    HeroByline: typeof HeroByline;
+    SecondaryText: typeof SecondaryText;
+    ActionButton: typeof ActionButton;
+    TertiaryText: typeof TertiaryText;
+};
+//# sourceMappingURL=blocks.d.ts.map

package/dist/blocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../src/blocks.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IACxB,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACxC,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,MAAM,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;IAC3D,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,aAAa,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;IACrE,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,aAAa,EAAE,MAAM,IAAI,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC1E,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CAC9D,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,EAC7B,CAAA;AAED,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,2CAEvD;AAED,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;CAAE,2CAE1E;AAED,wBAAgB,aAAa,CAAC,EAAE,aAAa,EAAE,EAAE;IAAE,aAAa,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;CAAE,2CAE3F;AAED,wBAAgB,YAAY,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,EAAE;IAAE,aAAa,EAAE,MAAM,IAAI,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,2CAU5G;AACD,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;CAAE,2CAExE;AAEH,wBAAgB,SAAS,CACrB,aAAa,EAAE,aAAa,EAC5B,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,QAAQ,CAAC,EAAE,eAAe,KAAK;IACrE,MAAM,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,eAAe,CAAC;CAC9B,EACD,QAAQ,CAAC,EAAE,eAAe;;;;;EAiB7B;AAGD,eAAO,MAAM,eAAe,IAC3B,CAAA;AAED,eAAO,MAAM,aAAa;;;;;;CAMzB,CAAA"}

package/dist/className.d.ts

@@ -0,0 +1,9 @@
+type ClassName = string | ClassName[] | undefined | null;
+/**
+ * Utility function to join class names together, ignoring undefined or nil values.
+ * @param classes - The class names to join.
+ * @returns The joined class names.
+ */
+export declare function classNames(...classes: ClassName[]): string;
+export {};
+//# sourceMappingURL=className.d.ts.map

package/dist/className.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"className.d.ts","sourceRoot":"","sources":["../src/className.tsx"],"names":[],"mappings":"AAAA,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,GAAG,OAAO,EAAE,SAAS,EAAE,GAAG,MAAM,CAE1D"}

package/dist/index.cjs.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".nbb-hero-block {\n  --color-object-accent-primary: #006EAD;\n  --color-object-accent-primary-emphasis: #006EAD;\n    display: flex;\n    flex-direction: column-reverse;\n    text-align: center;\n    justify-content: start;\n}\n\n.nbb-hero-block .nbb-button {\n  --color-object-accent-primary: #006EAD;\n  --color-object-accent-primary-emphasis: #006EAD;\n}\n\n@media (min-width: 680px) {\n  .nbb-hero-block {\n    display: flex;\n    flex-direction: row-reverse;\n    position: relative;\n    align-items: center;\n  }\n  .nbb-hero-img {\n    width: 50%;\n  }\n  .nbb-hero-block .text-content {\n    left: 146px;\n    width: 600px;\n    text-align: left;\n    margin-left: 32px;\n  }\n}";
+styleInject(css_248z);
+
+/**
+ * Utility function to join class names together, ignoring undefined or nil values.
+ * @param classes - The class names to join.
+ * @returns The joined class names.
+ */
+function classNames(...classes) {
+    return classes.flat().filter(Boolean).join(' ');
+}
+
+function HeroImg({ imageUrl }) {
+    return jsxRuntime.jsx("img", { className: "nbb-hero-img", src: imageUrl, alt: "hero image" });
+}
+function HeroByline({ byline }) {
+    return jsxRuntime.jsx("h6", { children: byline });
+}
+function SecondaryText({ secondaryText }) {
+    return jsxRuntime.jsx("h3", { children: secondaryText });
+}
+function ActionButton({ onClickButton, buttonText }) {
+    return (jsxRuntime.jsx("button", { type: "button", onClick: onClickButton, className: "nbb-button primary", children: buttonText }));
+}
+function TertiaryText({ text }) {
+    return jsxRuntime.jsx("span", { className: "nbb-typography nbb-typography-color-brand nbb-typography-size-s nbb-typography-weight-bold", children: text });
+}
+function setBlocks(defaultBlocks, children, settings) {
+    const { blocks: customBlocks = {}, settings: customSettings = {} } = children ? children(defaultBlocks, settings) : { blocks: {}, settings: {} };
+    return {
+        blocks: Object.fromEntries(Object.entries(defaultBlocks).map(([key, defaultComponent]) => [
+            key,
+            customBlocks[key] || defaultComponent,
+        ])),
+        settings: {
+            ...settings,
+            ...customSettings,
+        }
+    };
+}
+const defaultBlocks = {
+    HeroImg: HeroImg,
+    HeroByline: HeroByline,
+    SecondaryText: SecondaryText,
+    ActionButton: ActionButton,
+    TertiaryText: TertiaryText,
+};
+
+const Hero = ({ onClickButton, buttonText, imageUrl, className, secondaryText, tertiaryText, byline, children, }) => {
+    const { blocks } = setBlocks(defaultBlocks, children, {});
+    const { HeroImg, HeroByline, SecondaryText, ActionButton, TertiaryText } = blocks;
+    return (jsxRuntime.jsxs("div", { className: classNames('nbb-hero-block', className), children: [jsxRuntime.jsx(HeroImg, { imageUrl: imageUrl }), jsxRuntime.jsxs("div", { className: "text-content", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(HeroByline, { byline: byline }), jsxRuntime.jsx(SecondaryText, { secondaryText: secondaryText })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(ActionButton, { onClickButton: onClickButton, buttonText: buttonText }), jsxRuntime.jsx(TertiaryText, { text: tertiaryText })] })] })] }));
+};
+
+exports.Hero = Hero;
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/className.tsx","../src/blocks.tsx","../src/Hero.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","type ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n    return classes.flat().filter(Boolean).join(' ');\n}\n","export type DefaultBlocks = {\n    HeroImg: React.FC<{ imageUrl: string }>;\n    HeroByline: React.FC<{ byline: string | React.ReactNode }>;\n    SecondaryText: React.FC<{ secondaryText: string | React.ReactNode }>;\n    ActionButton: React.FC<{ onClickButton: () => void; buttonText: string }>;\n    TertiaryText: React.FC<{ text: string | React.ReactNode }>;\n}\n\nexport type DefaultSettings = {\n}\n\nexport function HeroImg({ imageUrl }: { imageUrl: string }) {\n    return <img className=\"nbb-hero-img\" src={imageUrl} alt=\"hero image\" />;\n  }\n  \n  export function HeroByline({ byline }: { byline: string | React.ReactNode }) {\n    return <h6>{byline}</h6>;\n  }\n  \n  export function SecondaryText({ secondaryText }: { secondaryText: string | React.ReactNode }) {\n    return <h3>{secondaryText}</h3>\n  }\n  \n  export function ActionButton({ onClickButton, buttonText }: { onClickButton: () => void; buttonText: string }) {\n    return (\n      <button\n        type=\"button\"\n        onClick={onClickButton}\n        className=\"nbb-button primary\"\n      >\n        {buttonText}\n      </button>\n    );\n  }\n  export function TertiaryText({ text }: { text: string | React.ReactNode }) {\n    return <span className=\"nbb-typography nbb-typography-color-brand nbb-typography-size-s nbb-typography-weight-bold\">{text}</span>;\n  }\n\nexport function setBlocks(\n    defaultBlocks: DefaultBlocks,\n    children?: (defaultBlocks: DefaultBlocks, settings?: DefaultSettings) => {\n        blocks: { [x: string]: any };\n        settings?: DefaultSettings;\n    },\n    settings?: DefaultSettings,\n) {\n    const { blocks: customBlocks = {}, settings: customSettings = {} } =\n        children ? children(defaultBlocks, settings) : { blocks: {}, settings: {} };\n\n    return {\n        blocks: Object.fromEntries(\n            Object.entries(defaultBlocks).map(([key, defaultComponent]) => [\n                key,\n                customBlocks[key] || defaultComponent,\n            ])\n        ),\n        settings: {\n            ...settings,\n            ...customSettings,\n        }\n    };\n}\n\n\nexport const defaultSettings = {\n}\n\nexport const defaultBlocks = {\n    HeroImg: HeroImg,\n    HeroByline: HeroByline,\n    SecondaryText: SecondaryText,\n    ActionButton: ActionButton,\n    TertiaryText: TertiaryText,\n}\n","import React from \"react\";\nimport \"./hero.css\";\nimport { classNames } from \"./className\";\nimport { DefaultBlocks, defaultBlocks, DefaultSettings, setBlocks } from \"./blocks\";\nexport interface HeroProps {\n  /** */\n  buttonText: string;\n  /**\n   * Configures the main byline text to display for this component.\n   * Supports components to handle inline images and text colors\n   */\n  byline: string | React.ReactNode;\n  /** href for linking Hero */\n  onClickButton: () => void;\n  /** URL of the image to show in this hero image component */\n  imageUrl: string;\n  /** Screen size to show for this block */\n  className: string;\n  /** Show/hide secondary text */\n  secondaryText?: string | React.ReactNode;\n  /** Show/hide tertiary text */\n  tertiaryText?: string | React.ReactNode;\n  children?: (defaultBlocks: DefaultBlocks, settings?: DefaultSettings) => {\n    blocks: { [x: string]: any };\n    settings?: DefaultSettings;\n},\n}\n\nexport const Hero: React.FC<HeroProps> = ({\n  onClickButton,\n  buttonText,\n  imageUrl,\n  className,\n  secondaryText,\n  tertiaryText,\n  byline,\n  children,\n}) => {\n  const { blocks } = setBlocks(defaultBlocks, children, {});\n  const { HeroImg, HeroByline, SecondaryText, ActionButton, TertiaryText} = blocks;\n  return (\n    \n    <div className={classNames('nbb-hero-block', className)}>\n      <HeroImg imageUrl={imageUrl} />\n      <div className=\"text-content\">\n        <div>\n          <HeroByline byline={byline} />\n          <SecondaryText secondaryText={secondaryText} />\n        </div>\n        <div>\n          <ActionButton onClickButton={onClickButton} buttonText={buttonText} />\n          <TertiaryText text={tertiaryText}  />\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Hero } from './Hero';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/index.esm.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".nbb-hero-block {\n  --color-object-accent-primary: #006EAD;\n  --color-object-accent-primary-emphasis: #006EAD;\n    display: flex;\n    flex-direction: column-reverse;\n    text-align: center;\n    justify-content: start;\n}\n\n.nbb-hero-block .nbb-button {\n  --color-object-accent-primary: #006EAD;\n  --color-object-accent-primary-emphasis: #006EAD;\n}\n\n@media (min-width: 680px) {\n  .nbb-hero-block {\n    display: flex;\n    flex-direction: row-reverse;\n    position: relative;\n    align-items: center;\n  }\n  .nbb-hero-img {\n    width: 50%;\n  }\n  .nbb-hero-block .text-content {\n    left: 146px;\n    width: 600px;\n    text-align: left;\n    margin-left: 32px;\n  }\n}";
+styleInject(css_248z);
+
+/**
+ * Utility function to join class names together, ignoring undefined or nil values.
+ * @param classes - The class names to join.
+ * @returns The joined class names.
+ */
+function classNames(...classes) {
+    return classes.flat().filter(Boolean).join(' ');
+}
+
+function HeroImg({ imageUrl }) {
+    return jsx("img", { className: "nbb-hero-img", src: imageUrl, alt: "hero image" });
+}
+function HeroByline({ byline }) {
+    return jsx("h6", { children: byline });
+}
+function SecondaryText({ secondaryText }) {
+    return jsx("h3", { children: secondaryText });
+}
+function ActionButton({ onClickButton, buttonText }) {
+    return (jsx("button", { type: "button", onClick: onClickButton, className: "nbb-button primary", children: buttonText }));
+}
+function TertiaryText({ text }) {
+    return jsx("span", { className: "nbb-typography nbb-typography-color-brand nbb-typography-size-s nbb-typography-weight-bold", children: text });
+}
+function setBlocks(defaultBlocks, children, settings) {
+    const { blocks: customBlocks = {}, settings: customSettings = {} } = children ? children(defaultBlocks, settings) : { blocks: {}, settings: {} };
+    return {
+        blocks: Object.fromEntries(Object.entries(defaultBlocks).map(([key, defaultComponent]) => [
+            key,
+            customBlocks[key] || defaultComponent,
+        ])),
+        settings: {
+            ...settings,
+            ...customSettings,
+        }
+    };
+}
+const defaultBlocks = {
+    HeroImg: HeroImg,
+    HeroByline: HeroByline,
+    SecondaryText: SecondaryText,
+    ActionButton: ActionButton,
+    TertiaryText: TertiaryText,
+};
+
+const Hero = ({ onClickButton, buttonText, imageUrl, className, secondaryText, tertiaryText, byline, children, }) => {
+    const { blocks } = setBlocks(defaultBlocks, children, {});
+    const { HeroImg, HeroByline, SecondaryText, ActionButton, TertiaryText } = blocks;
+    return (jsxs("div", { className: classNames('nbb-hero-block', className), children: [jsx(HeroImg, { imageUrl: imageUrl }), jsxs("div", { className: "text-content", children: [jsxs("div", { children: [jsx(HeroByline, { byline: byline }), jsx(SecondaryText, { secondaryText: secondaryText })] }), jsxs("div", { children: [jsx(ActionButton, { onClickButton: onClickButton, buttonText: buttonText }), jsx(TertiaryText, { text: tertiaryText })] })] })] }));
+};
+
+export { Hero };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/className.tsx","../src/blocks.tsx","../src/Hero.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","type ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n    return classes.flat().filter(Boolean).join(' ');\n}\n","export type DefaultBlocks = {\n    HeroImg: React.FC<{ imageUrl: string }>;\n    HeroByline: React.FC<{ byline: string | React.ReactNode }>;\n    SecondaryText: React.FC<{ secondaryText: string | React.ReactNode }>;\n    ActionButton: React.FC<{ onClickButton: () => void; buttonText: string }>;\n    TertiaryText: React.FC<{ text: string | React.ReactNode }>;\n}\n\nexport type DefaultSettings = {\n}\n\nexport function HeroImg({ imageUrl }: { imageUrl: string }) {\n    return <img className=\"nbb-hero-img\" src={imageUrl} alt=\"hero image\" />;\n  }\n  \n  export function HeroByline({ byline }: { byline: string | React.ReactNode }) {\n    return <h6>{byline}</h6>;\n  }\n  \n  export function SecondaryText({ secondaryText }: { secondaryText: string | React.ReactNode }) {\n    return <h3>{secondaryText}</h3>\n  }\n  \n  export function ActionButton({ onClickButton, buttonText }: { onClickButton: () => void; buttonText: string }) {\n    return (\n      <button\n        type=\"button\"\n        onClick={onClickButton}\n        className=\"nbb-button primary\"\n      >\n        {buttonText}\n      </button>\n    );\n  }\n  export function TertiaryText({ text }: { text: string | React.ReactNode }) {\n    return <span className=\"nbb-typography nbb-typography-color-brand nbb-typography-size-s nbb-typography-weight-bold\">{text}</span>;\n  }\n\nexport function setBlocks(\n    defaultBlocks: DefaultBlocks,\n    children?: (defaultBlocks: DefaultBlocks, settings?: DefaultSettings) => {\n        blocks: { [x: string]: any };\n        settings?: DefaultSettings;\n    },\n    settings?: DefaultSettings,\n) {\n    const { blocks: customBlocks = {}, settings: customSettings = {} } =\n        children ? children(defaultBlocks, settings) : { blocks: {}, settings: {} };\n\n    return {\n        blocks: Object.fromEntries(\n            Object.entries(defaultBlocks).map(([key, defaultComponent]) => [\n                key,\n                customBlocks[key] || defaultComponent,\n            ])\n        ),\n        settings: {\n            ...settings,\n            ...customSettings,\n        }\n    };\n}\n\n\nexport const defaultSettings = {\n}\n\nexport const defaultBlocks = {\n    HeroImg: HeroImg,\n    HeroByline: HeroByline,\n    SecondaryText: SecondaryText,\n    ActionButton: ActionButton,\n    TertiaryText: TertiaryText,\n}\n","import React from \"react\";\nimport \"./hero.css\";\nimport { classNames } from \"./className\";\nimport { DefaultBlocks, defaultBlocks, DefaultSettings, setBlocks } from \"./blocks\";\nexport interface HeroProps {\n  /** */\n  buttonText: string;\n  /**\n   * Configures the main byline text to display for this component.\n   * Supports components to handle inline images and text colors\n   */\n  byline: string | React.ReactNode;\n  /** href for linking Hero */\n  onClickButton: () => void;\n  /** URL of the image to show in this hero image component */\n  imageUrl: string;\n  /** Screen size to show for this block */\n  className: string;\n  /** Show/hide secondary text */\n  secondaryText?: string | React.ReactNode;\n  /** Show/hide tertiary text */\n  tertiaryText?: string | React.ReactNode;\n  children?: (defaultBlocks: DefaultBlocks, settings?: DefaultSettings) => {\n    blocks: { [x: string]: any };\n    settings?: DefaultSettings;\n},\n}\n\nexport const Hero: React.FC<HeroProps> = ({\n  onClickButton,\n  buttonText,\n  imageUrl,\n  className,\n  secondaryText,\n  tertiaryText,\n  byline,\n  children,\n}) => {\n  const { blocks } = setBlocks(defaultBlocks, children, {});\n  const { HeroImg, HeroByline, SecondaryText, ActionButton, TertiaryText} = blocks;\n  return (\n    \n    <div className={classNames('nbb-hero-block', className)}>\n      <HeroImg imageUrl={imageUrl} />\n      <div className=\"text-content\">\n        <div>\n          <HeroByline byline={byline} />\n          <SecondaryText secondaryText={secondaryText} />\n        </div>\n        <div>\n          <ActionButton onClickButton={onClickButton} buttonText={buttonText} />\n          <TertiaryText text={tertiaryText}  />\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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","x_google_ignoreList":[0]}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@nodeblocks/frontend-hero-block",
+  "version": "0.0.2",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "browser": "dist/index.iife.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "dist/index.css"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "watch": "rollup -c --watch"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "rollup": "^4.28.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-serve": "^1.1.1",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2"
+  }
+}

package/readme.md

@@ -0,0 +1,57 @@
+## 🚀 Nodeblocks Frontend Starter Kit
+
+Welcome to the Nodeblocks Frontend Starter Kit! 🎉 This kit is designed to make building frontend libraries in React super easy, helping you streamline your development workflow with minimal fuss. Let's dive in! 🤿
+
+### ✨ Features
+- **🚀 Bundling with Rollup:** Get a clean, minimalistic approach to bundling your JavaScript files for smoother frontend development.
+- **💙 TypeScript Support:** We've included a pre-configured `tsconfig.json` to ensure your TypeScript setup is strict, efficient, and ready to go.
+- **⚙️ Peer Dependencies:** Keep bundle sizes lean with React and React DOM set as peer dependencies.
+- **🎨 CSS Support:** Easily import and process CSS files, giving you more control over your styles.
+
+### 🛠️ How to Use
+1. **Clone this repository** 🌀:
+   ```bash
+   git clone <repository-url>
+   cd <repository-directory>
+   ```
+
+2. **Install dependencies** 📦:
+   ```bash
+   npm install
+   ```
+
+3. **Start development** 🛠️:
+   ```bash
+   npm run watch
+   ```
+
+4. **Build for production** 🏗️:
+   ```bash
+   npm run build
+   ```
+
+### 🧪 How to Test
+
+The `test` folder contains examples that demonstrate how to use the libraries you create with this starter kit. These examples show compatibility with various bundlers, such as:
+
+- **Create React App** (Webpack)
+- **Vite** ⚡
+- **Rollup** (itself) (Coming soon) 🔄
+- **Parcel** (Coming soon) 📦
+
+This ensures Nodeblocks libraries integrate seamlessly with different workflows. 🛠️✨
+
+**Before running each project make sure you run `npm link`:**
+
+1. In the root of this project:
+   ```bash
+   npm link
+   ```
+2. In the test project you want to run:
+   ```bash
+   npm i
+   npm link @basaldev/frontend-starter-kit
+   ```
+(Note that in real life your library would not be called frontend-starter-kit.)
+
+3. Then you can follow your usual workflow either with **Create React App** (`npm start`) or with Vite (`npm run dev`). This will give you a development environment where whenever you change your library it will be available in your test project.