@knapsack/renderer-react-components 4.71.13--canary.5224.9b1b429.0

package/.eslintignore

@@ -0,0 +1 @@
+dist

package/.eslintrc.cjs

@@ -0,0 +1,9 @@
+module.exports = {
+  extends: [
+    '@knapsack/eslint-config-starter/react',
+    '@knapsack/eslint-config-starter',
+  ],
+  parserOptions: { tsconfigRootDir: __dirname },
+  ignorePatterns: [],
+  rules: {},
+};

package/.lintstagedrc.mjs

@@ -0,0 +1,11 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+import defaultConfig from '../../../../.lintstagedrc.mjs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default {
+  '*.{ts,tsx,js,jsx,cjs,mjs}': `cd ${__dirname} && ./node_modules/.bin/eslint`,
+  ...defaultConfig,
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,4 @@
+
+> @knapsack/renderer-react-components@4.71.12 build /home/runner/work/app-monorepo/app-monorepo/apps/client/libs/renderer-react-components
+> tsc
+

package/.turbo/turbo-lint.log

@@ -0,0 +1,4 @@
+
+> @knapsack/renderer-react-components@4.71.12 lint /home/runner/work/app-monorepo/app-monorepo/apps/client/libs/renderer-react-components
+> eslint ./
+

package/dist/demo-wrapper.d.ts

@@ -0,0 +1,10 @@
+import type { Demo } from '@knapsack/types';
+export type DemoWrapperProps = {
+    children: React.ReactNode;
+    demo: Demo;
+    patternId: string;
+    templateId: string;
+};
+declare const DemoWrapper: ({ children }: DemoWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export default DemoWrapper;
+//# sourceMappingURL=demo-wrapper.d.ts.map

package/dist/demo-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"demo-wrapper.d.ts","sourceRoot":"","sources":["../src/demo-wrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,WAAW,iBAAkB,gBAAgB,4CAElD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/demo-wrapper.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const DemoWrapper = ({ children }) => (_jsx("div", { className: "demo-wrapper", children: children }));
+export default DemoWrapper;
+//# sourceMappingURL=demo-wrapper.js.map

package/dist/demo-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"demo-wrapper.js","sourceRoot":"","sources":["../src/demo-wrapper.tsx"],"names":[],"mappings":";AASA,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAoB,EAAE,EAAE,CAAC,CACtD,cAAK,SAAS,EAAC,cAAc,YAAE,QAAQ,GAAO,CAC/C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/error-catcher.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+type State = {
+    hasError: boolean;
+    componentStack?: string;
+    error?: Error;
+};
+export default class ErrorCatcher extends React.Component<{
+    children: React.ReactNode;
+}, State> {
+    constructor(props: {
+        children: React.ReactNode;
+    });
+    static getDerivedStateFromError(_error: Error): {
+        hasError: boolean;
+    };
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element;
+}
+export {};
+//# sourceMappingURL=error-catcher.d.ts.map

package/dist/error-catcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-catcher.d.ts","sourceRoot":"","sources":["../src/error-catcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,KAAK,CAAC,SAAS,CACvD;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,EAC7B,KAAK,CACN;gBACa,KAAK,EAAE;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;IAQhD,MAAM,CAAC,wBAAwB,CAAC,MAAM,EAAE,KAAK;;;IAOpC,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI;IAQjE,MAAM;CA2ChB"}

package/dist/error-catcher.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+export default class ErrorCatcher extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            hasError: false,
+            componentStack: '',
+        };
+    }
+    static getDerivedStateFromError(_error) {
+        // Update state so the next render will show the fallback UI.
+        return {
+            hasError: true,
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        const { componentStack } = errorInfo;
+        this.setState({
+            error,
+            componentStack: componentStack !== null && componentStack !== void 0 ? componentStack : '',
+        });
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        if (this.state.hasError) {
+            return (_jsxs("div", { style: {
+                    padding: '5px',
+                }, children: [_jsx("h5", { children: "Error caught in React Components" }), ((_a = this.state.error) === null || _a === void 0 ? void 0 : _a.name) && (_jsxs("h5", { children: ["Error Name: ", _jsx("code", { children: (_b = this.state.error) === null || _b === void 0 ? void 0 : _b.name })] })), ((_c = this.state.error) === null || _c === void 0 ? void 0 : _c.message) && (_jsxs("h5", { children: ["Message:", (_d = this.state.error) === null || _d === void 0 ? void 0 : _d.message] })), this.state.componentStack && (_jsxs(_Fragment, { children: [_jsx("h6", { children: "Component Stack:" }), _jsx("pre", { children: _jsx("code", { children: this.state.componentStack }) }), _jsx("br", {})] })), ((_e = this.state.error) === null || _e === void 0 ? void 0 : _e.stack) && (_jsxs(_Fragment, { children: [_jsx("h6", { children: "Error Stack:" }), _jsx("pre", { children: _jsx("code", { children: (_f = this.state.error) === null || _f === void 0 ? void 0 : _f.stack }) })] }))] }));
+        }
+        return this.props.children;
+    }
+}
+//# sourceMappingURL=error-catcher.js.map

package/dist/error-catcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-catcher.js","sourceRoot":"","sources":["../src/error-catcher.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,KAAK,CAAC,SAG/C;IACC,YAAY,KAAoC;QAC9C,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACX,QAAQ,EAAE,KAAK;YACf,cAAc,EAAE,EAAE;SACnB,CAAC;IACJ,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,MAAa;QAC3C,6DAA6D;QAC7D,OAAO;YACL,QAAQ,EAAE,IAAI;SACf,CAAC;IACJ,CAAC;IAEQ,iBAAiB,CAAC,KAAY,EAAE,SAA0B;QACjE,MAAM,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC;QACrC,IAAI,CAAC,QAAQ,CAAC;YACZ,KAAK;YACL,cAAc,EAAE,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE;SACrC,CAAC,CAAC;IACL,CAAC;IAEQ,MAAM;;QACb,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACxB,OAAO,CACL,eACE,KAAK,EAAE;oBACL,OAAO,EAAE,KAAK;iBACf,aAED,4DAAyC,EACxC,CAAA,MAAA,IAAI,CAAC,KAAK,CAAC,KAAK,0CAAE,IAAI,KAAI,CACzB,yCACc,yBAAO,MAAA,IAAI,CAAC,KAAK,CAAC,KAAK,0CAAE,IAAI,GAAQ,IAC9C,CACN,EACA,CAAA,MAAA,IAAI,CAAC,KAAK,CAAC,KAAK,0CAAE,OAAO,KAAI,CAC5B,qCAEG,MAAA,IAAI,CAAC,KAAK,CAAC,KAAK,0CAAE,OAAO,IACvB,CACN,EACA,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,CAC5B,8BACE,4CAAyB,EACzB,wBACE,yBAAO,IAAI,CAAC,KAAK,CAAC,cAAc,GAAQ,GACpC,EACN,cAAM,IACL,CACJ,EACA,CAAA,MAAA,IAAI,CAAC,KAAK,CAAC,KAAK,0CAAE,KAAK,KAAI,CAC1B,8BACE,wCAAqB,EACrB,wBACE,yBAAO,MAAA,IAAI,CAAC,KAAK,CAAC,KAAK,0CAAE,KAAK,GAAQ,GAClC,IACL,CACJ,IACG,CACP,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7B,CAAC;CACF"}

package/dist/prototype-template.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+declare const PrototypeWrapper: ({ children }: {
+    children: ReactNode;
+}) => ReactNode;
+export default PrototypeWrapper;
+//# sourceMappingURL=prototype-template.d.ts.map

package/dist/prototype-template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prototype-template.d.ts","sourceRoot":"","sources":["../src/prototype-template.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,QAAA,MAAM,gBAAgB,iBAAkB;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,cAAa,CAAC;AAE7E,eAAe,gBAAgB,CAAC"}

package/dist/prototype-template.js

@@ -0,0 +1,3 @@
+const PrototypeWrapper = ({ children }) => children;
+export default PrototypeWrapper;
+//# sourceMappingURL=prototype-template.js.map

package/dist/prototype-template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prototype-template.js","sourceRoot":"","sources":["../src/prototype-template.tsx"],"names":[],"mappings":"AAEA,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE,CAAC,QAAQ,CAAC;AAE7E,eAAe,gBAAgB,CAAC"}

package/dist/react-renderer-client-app.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentType } from 'react';
+import type { Except } from '@knapsack/types';
+import type { DemoWrapperProps } from './demo-wrapper.js';
+export declare const ReactRendererClientApp: ({ DemoApp, DemoWrapper, disableReactStrictMode, demoWrapperProps, }: {
+    DemoApp: ComponentType<Record<string, unknown>>;
+    DemoWrapper: ComponentType<Record<string, unknown>>;
+    demoWrapperProps: Except<DemoWrapperProps, "children">;
+    disableReactStrictMode?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=react-renderer-client-app.d.ts.map

package/dist/react-renderer-client-app.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-renderer-client-app.d.ts","sourceRoot":"","sources":["../src/react-renderer-client-app.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,eAAO,MAAM,sBAAsB,wEAKhC;IACD,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAChD,WAAW,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACpD,gBAAgB,EAAE,MAAM,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;IACvD,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,4CAUA,CAAC"}

package/dist/react-renderer-client-app.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StrictMode } from 'react';
+import ErrorCatcher from './error-catcher.js';
+export const ReactRendererClientApp = ({ DemoApp, DemoWrapper, disableReactStrictMode, demoWrapperProps, }) => {
+    const app = (_jsx(ErrorCatcher, { children: _jsx(DemoWrapper, { ...demoWrapperProps, children: _jsx(DemoApp, {}) }) }));
+    return disableReactStrictMode ? app : _jsx(StrictMode, { children: app });
+};
+//# sourceMappingURL=react-renderer-client-app.js.map

package/dist/react-renderer-client-app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-renderer-client-app.js","sourceRoot":"","sources":["../src/react-renderer-client-app.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,OAAO,CAAC;AAEvD,OAAO,YAAY,MAAM,oBAAoB,CAAC;AAG9C,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EACrC,OAAO,EACP,WAAW,EACX,sBAAsB,EACtB,gBAAgB,GAMjB,EAAE,EAAE;IACH,MAAM,GAAG,GAAG,CACV,KAAC,YAAY,cACX,KAAC,WAAW,OAAK,gBAAgB,YAC/B,KAAC,OAAO,KAAG,GACC,GACD,CAChB,CAAC;IAEF,OAAO,sBAAsB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAC,UAAU,cAAE,GAAG,GAAc,CAAC;AACvE,CAAC,CAAC"}

package/dist/test-fixtures/button.d.ts

@@ -0,0 +1,6 @@
+export declare const Button: (props: {
+    text: string;
+    size?: "small" | "medium" | "large";
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=button.d.ts.map

package/dist/test-fixtures/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/test-fixtures/button.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,UAAW;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,4CAEA,CAAC"}

package/dist/test-fixtures/button.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Button = (props) => {
+    return _jsx("button", { type: "button", children: props.text });
+};
+//# sourceMappingURL=button.js.map

package/dist/test-fixtures/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/test-fixtures/button.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAItB,EAAE,EAAE;IACH,OAAO,iBAAQ,IAAI,EAAC,QAAQ,YAAE,KAAK,CAAC,IAAI,GAAU,CAAC;AACrD,CAAC,CAAC"}

package/dist/test-fixtures/card-prop-types.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare class CardPropTypes extends React.Component {
+    constructor(props: any);
+    handleButtonClick(): void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+//# sourceMappingURL=card-prop-types.d.ts.map

package/dist/test-fixtures/card-prop-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-prop-types.d.ts","sourceRoot":"","sources":["../../src/test-fixtures/card-prop-types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,qBAAa,aAAc,SAAQ,KAAK,CAAC,SAAS;gBACpC,KAAK,EAAE,GAAG;IAQtB,iBAAiB;IAUR,MAAM;CAmChB"}

package/dist/test-fixtures/card-prop-types.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import PropTypes from 'prop-types';
+export class CardPropTypes extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            count: 0,
+        };
+        this.handleButtonClick = this.handleButtonClick.bind(this);
+    }
+    handleButtonClick() {
+        this.setState((prevState) => {
+            // @ts-expect-error purposely not typed
+            const newCount = prevState.count + 1;
+            // @ts-expect-error purposely not typed
+            this.props.handleClick(newCount);
+            return { count: newCount };
+        });
+    }
+    render() {
+        return (_jsxs("aside", { 
+            // @ts-expect-error purposely not typed
+            className: `card card--align-${this.props.align}${
+            // @ts-expect-error purposely not typed
+            this.props.isDark ? ' card--dark' : ''}`, children: [this.props.headerSlot, _jsx("div", { className: "card__img", 
+                    // @ts-expect-error purposely not typed
+                    style: { backgroundImage: `url("${this.props.img}")` } }), _jsxs("div", { className: "card__contents", children: [_jsx("h3", { className: "card__title", children: this.props.title }), _jsxs("p", { children: ["Count:", this.state.count] }), _jsx("button", { onClick: this.handleButtonClick, type: "button", children: "Add" }), _jsx("p", { className: "card__body", children: this.props.body })] }), _jsx("footer", { className: "card__footer", children: this.props.children })] }));
+    }
+}
+// @ts-expect-error purposely not typed
+CardPropTypes.defaultProps = {
+    align: 'left',
+    children: null,
+    handleClick: () => { },
+    isDark: false,
+};
+// @ts-expect-error purposely not typed
+CardPropTypes.propTypes = {
+    /**
+     * The card title
+     */
+    title: PropTypes.string.isRequired,
+    align: PropTypes.oneOf(['left', 'right']),
+    children: PropTypes.node,
+    headerSlot: PropTypes.node.isRequired,
+    handleClick: PropTypes.func,
+    isDark: PropTypes.bool,
+};
+//# sourceMappingURL=card-prop-types.js.map

package/dist/test-fixtures/card-prop-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-prop-types.js","sourceRoot":"","sources":["../../src/test-fixtures/card-prop-types.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,SAAS;IAChD,YAAY,KAAU;QACpB,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACX,KAAK,EAAE,CAAC;SACT,CAAC;QACF,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7D,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE;YAC1B,uCAAuC;YACvC,MAAM,QAAQ,GAAG,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC;YACrC,uCAAuC;YACvC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;YACjC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;QAC7B,CAAC,CAAC,CAAC;IACL,CAAC;IAEQ,MAAM;QACb,OAAO,CACL;YACE,uCAAuC;YACvC,SAAS,EAAE,oBAAoB,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG;YAChD,uCAAuC;YACvC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EACtC,EAAE,aAGD,IAAI,CAAC,KAAK,CAAC,UAAU,EACtB,cACE,SAAS,EAAC,WAAW;oBACrB,uCAAuC;oBACvC,KAAK,EAAE,EAAE,eAAe,EAAE,QAAQ,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,EAAE,GACtD,EACF,eAAK,SAAS,EAAC,gBAAgB,aAE7B,aAAI,SAAS,EAAC,aAAa,YAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAM,EACnD,kCAGG,IAAI,CAAC,KAAK,CAAC,KAAK,IACf,EACJ,iBAAQ,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,EAAC,QAAQ,oBAE7C,EAET,YAAG,SAAS,EAAC,YAAY,YAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAK,IAC3C,EAEN,iBAAQ,SAAS,EAAC,cAAc,YAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAU,IACzD,CACT,CAAC;IACJ,CAAC;CACF;AAED,uCAAuC;AACvC,aAAa,CAAC,YAAY,GAAG;IAC3B,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,IAAI;IACd,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;IACrB,MAAM,EAAE,KAAK;CACd,CAAC;AAEF,uCAAuC;AACvC,aAAa,CAAC,SAAS,GAAG;IACxB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IAClC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACzC,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,UAAU,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IACrC,WAAW,EAAE,SAAS,CAAC,IAAI;IAC3B,MAAM,EAAE,SAAS,CAAC,IAAI;CACvB,CAAC"}

package/dist/test-fixtures/card.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+type Props = {
+    textAlign?: 'left' | 'center' | 'right';
+    imgSrc?: string;
+    isDark?: boolean;
+    cardTitle?: string;
+    cardSubTitle?: string;
+    cardBody: string;
+    handleIt?: (x: string) => boolean;
+    header?: React.ReactNode;
+    /**
+     * Goes in footer
+     */
+    children?: React.ReactNode;
+    items: {
+        id: string;
+        title: string;
+        description?: string;
+    }[];
+};
+export declare const Card: React.FC<Props>;
+export default Card;
+//# sourceMappingURL=card.d.ts.map

package/dist/test-fixtures/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/test-fixtures/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,KAAK,KAAK,GAAG;IACX,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAExC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;IAClC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,EAAE,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwBhC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/test-fixtures/card.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Card = ({ textAlign = 'left', children, cardBody, 
+// cardHeader,
+cardSubTitle, cardTitle, imgSrc, isDark = true, }) => {
+    const classes = `card text-${textAlign} ${isDark ? 'bg-dark' : ''}`;
+    return (_jsxs("div", { className: classes, children: [imgSrc && _jsx("img", { src: imgSrc, className: "card-img-top", alt: "hi" }), _jsxs("div", { className: "card-body", children: [_jsx("h5", { className: "card-title", children: cardTitle }), cardSubTitle && (_jsx("h6", { className: "card-subtitle mb-2 text-muted", children: cardSubTitle })), _jsx("p", { className: "card-text", children: cardBody }), children] })] }));
+};
+export default Card;
+//# sourceMappingURL=card.js.map

package/dist/test-fixtures/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/test-fixtures/card.tsx"],"names":[],"mappings":";AA2BA,MAAM,CAAC,MAAM,IAAI,GAAoB,CAAC,EACpC,SAAS,GAAG,MAAM,EAClB,QAAQ,EACR,QAAQ;AACR,cAAc;AACd,YAAY,EACZ,SAAS,EACT,MAAM,EACN,MAAM,GAAG,IAAI,GACP,EAAE,EAAE;IACV,MAAM,OAAO,GAAG,aAAa,SAAS,IAAI,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IACpE,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACpB,MAAM,IAAI,cAAK,GAAG,EAAE,MAAM,EAAE,SAAS,EAAC,cAAc,EAAC,GAAG,EAAC,IAAI,GAAG,EACjE,eAAK,SAAS,EAAC,WAAW,aACxB,aAAI,SAAS,EAAC,YAAY,YAAE,SAAS,GAAM,EAC1C,YAAY,IAAI,CACf,aAAI,SAAS,EAAC,+BAA+B,YAAE,YAAY,GAAM,CAClE,EACD,YAAG,SAAS,EAAC,WAAW,YAAE,QAAQ,GAAK,EACtC,QAAQ,IACL,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/test-fixtures/index.d.ts

@@ -0,0 +1,4 @@
+export * from './button.js';
+export * from './card.js';
+export * from './card-prop-types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/test-fixtures/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/test-fixtures/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,sBAAsB,CAAC"}

package/dist/test-fixtures/index.js

@@ -0,0 +1,4 @@
+export * from './button.js';
+export * from './card.js';
+export * from './card-prop-types.js';
+//# sourceMappingURL=index.js.map

package/dist/test-fixtures/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/test-fixtures/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,sBAAsB,CAAC"}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@knapsack/renderer-react-components",
+  "description": "",
+  "version": "4.71.13--canary.5224.9b1b429.0",
+  "type": "module",
+  "exports": {
+    "./demo-wrapper": {
+      "types": "./dist/demo-wrapper.d.ts",
+      "default": "./dist/demo-wrapper.js"
+    },
+    "./error-catcher": {
+      "types": "./dist/error-catcher.d.ts",
+      "default": "./dist/error-catcher.js"
+    },
+    "./package": "./package.json",
+    "./package.json": "./package.json",
+    "./prototype-template": {
+      "types": "./dist/prototype-template.d.ts",
+      "default": "./dist/prototype-template.js"
+    },
+    "./react-renderer-client-app": {
+      "types": "./dist/react-renderer-client-app.d.ts",
+      "default": "./dist/react-renderer-client-app.js"
+    },
+    "./test-fixtures": {
+      "types": "./dist/test-fixtures/index.d.ts",
+      "default": "./dist/test-fixtures/index.js"
+    }
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf ./dist",
+    "lint": "eslint ./"
+  },
+  "devDependencies": {
+    "@knapsack/eslint-config-starter": "4.71.13--canary.5224.9b1b429.0",
+    "@knapsack/prettier-config": "4.71.13--canary.5224.9b1b429.0",
+    "@knapsack/types": "4.71.13--canary.5224.9b1b429.0",
+    "@knapsack/typescript-config-starter": "4.71.13--canary.5224.9b1b429.0",
+    "@types/node": "^20.17.8",
+    "@types/prop-types": "^15.7.13",
+    "@types/react": "^18.3.12",
+    "eslint": "^8.57.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.3.1",
+    "typescript": "^5.6.3"
+  },
+  "license": "GPL-2.0-or-later",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "url": "https://github.com/knapsack-labs/app-monorepo",
+    "directory": "apps/client/libs/renderer-react-components",
+    "type": "git"
+  },
+  "gitHead": "9b1b429dcf7e68d4d957d5b0d9dc32bfdfc0ae02"
+}

package/readme.md

@@ -0,0 +1 @@
+This package exists because `@knapsack/renderer-react` is a CommonJS package and currently `.mtsx` files do not work with CommonJS packages.

package/src/demo-wrapper.tsx

@@ -0,0 +1,14 @@
+import type { Demo } from '@knapsack/types';
+
+export type DemoWrapperProps = {
+  children: React.ReactNode;
+  demo: Demo;
+  patternId: string;
+  templateId: string;
+};
+
+const DemoWrapper = ({ children }: DemoWrapperProps) => (
+  <div className="demo-wrapper">{children}</div>
+);
+
+export default DemoWrapper;

package/src/error-catcher.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+
+type State = {
+  hasError: boolean;
+  componentStack?: string;
+  error?: Error;
+};
+
+export default class ErrorCatcher extends React.Component<
+  { children: React.ReactNode },
+  State
+> {
+  constructor(props: { children: React.ReactNode }) {
+    super(props);
+    this.state = {
+      hasError: false,
+      componentStack: '',
+    };
+  }
+
+  static getDerivedStateFromError(_error: Error) {
+    // Update state so the next render will show the fallback UI.
+    return {
+      hasError: true,
+    };
+  }
+
+  override componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    const { componentStack } = errorInfo;
+    this.setState({
+      error,
+      componentStack: componentStack ?? '',
+    });
+  }
+
+  override render() {
+    if (this.state.hasError) {
+      return (
+        <div
+          style={{
+            padding: '5px',
+          }}
+        >
+          <h5>Error caught in React Components</h5>
+          {this.state.error?.name && (
+            <h5>
+              Error Name: <code>{this.state.error?.name}</code>
+            </h5>
+          )}
+          {this.state.error?.message && (
+            <h5>
+              Message:
+              {this.state.error?.message}
+            </h5>
+          )}
+          {this.state.componentStack && (
+            <>
+              <h6>Component Stack:</h6>
+              <pre>
+                <code>{this.state.componentStack}</code>
+              </pre>
+              <br />
+            </>
+          )}
+          {this.state.error?.stack && (
+            <>
+              <h6>Error Stack:</h6>
+              <pre>
+                <code>{this.state.error?.stack}</code>
+              </pre>
+            </>
+          )}
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/prototype-template.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+
+const PrototypeWrapper = ({ children }: { children: ReactNode }) => children;
+
+export default PrototypeWrapper;

package/src/react-renderer-client-app.tsx

@@ -0,0 +1,26 @@
+import { StrictMode, type ComponentType } from 'react';
+import type { Except } from '@knapsack/types';
+import ErrorCatcher from './error-catcher.js';
+import type { DemoWrapperProps } from './demo-wrapper.js';
+
+export const ReactRendererClientApp = ({
+  DemoApp,
+  DemoWrapper,
+  disableReactStrictMode,
+  demoWrapperProps,
+}: {
+  DemoApp: ComponentType<Record<string, unknown>>;
+  DemoWrapper: ComponentType<Record<string, unknown>>;
+  demoWrapperProps: Except<DemoWrapperProps, 'children'>;
+  disableReactStrictMode?: boolean;
+}) => {
+  const app = (
+    <ErrorCatcher>
+      <DemoWrapper {...demoWrapperProps}>
+        <DemoApp />
+      </DemoWrapper>
+    </ErrorCatcher>
+  );
+
+  return disableReactStrictMode ? app : <StrictMode>{app}</StrictMode>;
+};

package/src/test-fixtures/button.tsx

@@ -0,0 +1,7 @@
+export const Button = (props: {
+  text: string;
+  size?: 'small' | 'medium' | 'large';
+  children: React.ReactNode;
+}) => {
+  return <button type="button">{props.text}</button>;
+};

package/src/test-fixtures/card-prop-types.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export class CardPropTypes extends React.Component {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      count: 0,
+    };
+    this.handleButtonClick = this.handleButtonClick.bind(this);
+  }
+
+  handleButtonClick() {
+    this.setState((prevState) => {
+      // @ts-expect-error purposely not typed
+      const newCount = prevState.count + 1;
+      // @ts-expect-error purposely not typed
+      this.props.handleClick(newCount);
+      return { count: newCount };
+    });
+  }
+
+  override render() {
+    return (
+      <aside
+        // @ts-expect-error purposely not typed
+        className={`card card--align-${this.props.align}${
+          // @ts-expect-error purposely not typed
+          this.props.isDark ? ' card--dark' : ''
+        }`}
+      >
+        {/* @ts-expect-error purposely not typed */}
+        {this.props.headerSlot}
+        <div
+          className="card__img"
+          // @ts-expect-error purposely not typed
+          style={{ backgroundImage: `url("${this.props.img}")` }}
+        />
+        <div className="card__contents">
+          {/* @ts-expect-error purposely not typed */}
+          <h3 className="card__title">{this.props.title}</h3>
+          <p>
+            Count:
+            {/* @ts-expect-error purposely not typed */}
+            {this.state.count}
+          </p>
+          <button onClick={this.handleButtonClick} type="button">
+            Add
+          </button>
+          {/* @ts-expect-error purposely not typed */}
+          <p className="card__body">{this.props.body}</p>
+        </div>
+        {/* @ts-expect-error purposely not typed */}
+        <footer className="card__footer">{this.props.children}</footer>
+      </aside>
+    );
+  }
+}
+
+// @ts-expect-error purposely not typed
+CardPropTypes.defaultProps = {
+  align: 'left',
+  children: null,
+  handleClick: () => {},
+  isDark: false,
+};
+
+// @ts-expect-error purposely not typed
+CardPropTypes.propTypes = {
+  /**
+   * The card title
+   */
+  title: PropTypes.string.isRequired,
+  align: PropTypes.oneOf(['left', 'right']),
+  children: PropTypes.node,
+  headerSlot: PropTypes.node.isRequired,
+  handleClick: PropTypes.func,
+  isDark: PropTypes.bool,
+};

package/src/test-fixtures/card.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+// export const CardButton = ({ disabled = false, text }) => (
+//   <button>{text}</button>
+// );
+
+type Props = {
+  textAlign?: 'left' | 'center' | 'right';
+  // cardHeader?: string;
+  imgSrc?: string;
+  isDark?: boolean;
+  cardTitle?: string;
+  cardSubTitle?: string;
+  cardBody: string;
+  handleIt?: (x: string) => boolean;
+  header?: React.ReactNode;
+  /**
+   * Goes in footer
+   */
+  children?: React.ReactNode;
+  items: {
+    id: string;
+    title: string;
+    description?: string;
+  }[];
+};
+
+export const Card: React.FC<Props> = ({
+  textAlign = 'left',
+  children,
+  cardBody,
+  // cardHeader,
+  cardSubTitle,
+  cardTitle,
+  imgSrc,
+  isDark = true,
+}: Props) => {
+  const classes = `card text-${textAlign} ${isDark ? 'bg-dark' : ''}`;
+  return (
+    <div className={classes}>
+      {imgSrc && <img src={imgSrc} className="card-img-top" alt="hi" />}
+      <div className="card-body">
+        <h5 className="card-title">{cardTitle}</h5>
+        {cardSubTitle && (
+          <h6 className="card-subtitle mb-2 text-muted">{cardSubTitle}</h6>
+        )}
+        <p className="card-text">{cardBody}</p>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Card;

package/src/test-fixtures/index.ts

@@ -0,0 +1,3 @@
+export * from './button.js';
+export * from './card.js';
+export * from './card-prop-types.js';

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@knapsack/typescript-config-starter/tsconfig.build.json",
+  "compilerOptions": {
+    "strict": false,
+    "strictNullChecks": false,
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "noImplicitAny": true,
+    "outDir": "./dist"
+  },
+  "include": ["./src"]
+}