@knapsack/renderer-react-components 4.79.2 → 4.79.3--canary.6036.f7fab19.0

package/.lintstagedrc.mjs

@@ -6,6 +6,6 @@ import defaultConfig from '../../../../.lintstagedrc.mjs';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
 export default {
-  '*.{ts,tsx,js,jsx,cjs,mjs,mts,cts}': `cd ${__dirname} && ./node_modules/.bin/eslint`,
+  '*.{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.78.14 build /home/runner/work/app-monorepo/app-monorepo/apps/client/libs/renderer-react-components
+> tsc
+

package/.turbo/turbo-lint.log

@@ -0,0 +1,13 @@
+
+> @knapsack/renderer-react-components@4.78.14 lint /home/runner/work/app-monorepo/app-monorepo/apps/client/libs/renderer-react-components
+> eslint ./
+
+
+/home/runner/work/app-monorepo/app-monorepo/apps/client/libs/renderer-react-components/src/test-fixtures/complex-props.tsx
+  18:3  warning  'config' is defined but never used. Allowed unused args must match /^_/u  unused-imports/no-unused-vars
+
+/home/runner/work/app-monorepo/app-monorepo/apps/client/libs/renderer-react-components/src/test-fixtures/generic-component-type.tsx
+  16:23  warning  'index' is defined but never used. Allowed unused args must match /^_/u  unused-imports/no-unused-vars
+
+✖ 2 problems (0 errors, 2 warnings)
+

package/CHANGELOG.md

@@ -1,30 +1,3 @@
-# v4.79.2 (Tue Apr 29 2025)
-
-#### 🏠 Internal
-
-- update logic for editable spec [#6077](https://github.com/knapsack-labs/app-monorepo/pull/6077) ([@mabry1985](https://github.com/mabry1985))
-- Add .mts and .cts file extensions to ESLint configuration in lint-staged [#6079](https://github.com/knapsack-labs/app-monorepo/pull/6079) ([@EvanLovely](https://github.com/EvanLovely))
-
-#### Authors: 2
-
-- Evan Lovely ([@EvanLovely](https://github.com/EvanLovely))
-- Josh Mabry ([@mabry1985](https://github.com/mabry1985))
-
----
-
-# v4.79.0 (Mon Apr 28 2025)
-
-#### 🚀 Enhancement
-
-- setup better testing on App Client [#6072](https://github.com/knapsack-labs/app-monorepo/pull/6072) ([@EvanLovely](https://github.com/EvanLovely))
-- setup new Demo type that is App Client Data agnostic [#6072](https://github.com/knapsack-labs/app-monorepo/pull/6072) ([@EvanLovely](https://github.com/EvanLovely))
-
-#### Authors: 1
-
-- Evan Lovely ([@EvanLovely](https://github.com/EvanLovely))
-
----
-
 # v4.78.13 (Fri Apr 25 2025)
 
 #### 🏠 Internal

package/dist/demo-wrapper.d.ts

@@ -2,6 +2,8 @@ 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;

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

@@ -1 +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;CACZ,CAAC;AAEF,QAAA,MAAM,WAAW,GAAI,cAAc,gBAAgB,4CAElD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"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,GAAI,cAAc,gBAAgB,4CAElD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/demo-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"demo-wrapper.js","sourceRoot":"","sources":["../src/demo-wrapper.tsx"],"names":[],"mappings":";AAOA,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"}
+{"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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@knapsack/renderer-react-components",
   "description": "",
-  "version": "4.79.2",
+  "version": "4.79.3--canary.6036.f7fab19.0",
   "type": "module",
   "exports": {
     "./demo-wrapper": {
@@ -35,10 +35,10 @@
     "lint": "eslint ./"
   },
   "devDependencies": {
-    "@knapsack/eslint-config-starter": "4.79.2",
-    "@knapsack/prettier-config": "4.79.2",
-    "@knapsack/types": "4.79.2",
-    "@knapsack/typescript-config-starter": "4.79.2",
+    "@knapsack/eslint-config-starter": "4.79.3--canary.6036.f7fab19.0",
+    "@knapsack/prettier-config": "4.79.3--canary.6036.f7fab19.0",
+    "@knapsack/types": "4.79.3--canary.6036.f7fab19.0",
+    "@knapsack/typescript-config-starter": "4.79.3--canary.6036.f7fab19.0",
     "@types/node": "^20.17.24",
     "@types/prop-types": "^15.7.14",
     "@types/react": "^18.3.20",
@@ -56,5 +56,5 @@
     "directory": "apps/client/libs/renderer-react-components",
     "type": "git"
   },
-  "gitHead": "a97f048e259c07f4887a675bd339dea5d736721e"
+  "gitHead": "f7fab193b76725d99a7f77f334c13776477f1378"
 }

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/complex-props.tsx

@@ -0,0 +1,25 @@
+// Example with complex TypeScript types
+interface ComplexProps {
+  /** Array of user objects */
+  users: Array<{
+    id: number;
+    name: string;
+    role: 'admin' | 'user';
+  }>;
+  /** Configuration object */
+  config: {
+    theme: 'light' | 'dark';
+    showHeader: boolean;
+  };
+}
+
+export const ComplexComponent = ({
+  users,
+  config,
+}: ComplexProps): JSX.Element => (
+  <div>
+    {users.map((user) => (
+      <div key={user.id}>{user.name}</div>
+    ))}
+  </div>
+);

package/src/test-fixtures/generic-component-type.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+
+// // Example with generic types
+interface ListProps<T> {
+  /** List of items */
+  items: T[];
+  /** Render function for each item */
+  renderItem: (item: T) => ReactNode;
+}
+
+export const GenericComponentType = <T,>({
+  items,
+  renderItem,
+}: ListProps<T>): JSX.Element => (
+  <ul>
+    {items.map((item, index) => (
+      <li key={JSON.stringify(item)}>{renderItem(item)}</li>
+    ))}
+  </ul>
+);

package/src/test-fixtures/index.ts

@@ -0,0 +1,6 @@
+export * from './button.js';
+export * from './card.js';
+export * from './card-prop-types.js';
+export * from './complex-props.js';
+export * from './generic-component-type.js';
+export * from './render-node-props.js';

package/src/test-fixtures/render-node-props.tsx

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+
+// Example with render props using TypeScript
+interface RenderPropsComponentProps {
+  /** Header render function */
+  renderHeader: () => ReactNode;
+  /** Content render function */
+  renderContent: (data: { count: number }) => ReactNode;
+  /** Optional footer */
+  footer?: ReactNode;
+}
+
+export const RenderPropsComponent = ({
+  renderHeader,
+  renderContent,
+  footer,
+}: RenderPropsComponentProps): JSX.Element => (
+  <div>
+    {renderHeader()}
+    {renderContent({ count: 0 })}
+    {footer}
+  </div>
+);