@knapsack/renderer-react-components 4.78.14 → 4.78.15--canary.6061.4646541.0

package/dist/demo-wrapper.d.ts

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

package/dist/demo-wrapper.js.map

@@ -1 +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"}
+{"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@knapsack/renderer-react-components",
   "description": "",
-  "version": "4.78.14",
+  "version": "4.78.15--canary.6061.4646541.0",
   "type": "module",
   "exports": {
     "./demo-wrapper": {
@@ -35,10 +35,10 @@
     "lint": "eslint ./"
   },
   "devDependencies": {
-    "@knapsack/eslint-config-starter": "4.78.14",
-    "@knapsack/prettier-config": "4.78.14",
-    "@knapsack/types": "4.78.14",
-    "@knapsack/typescript-config-starter": "4.78.14",
+    "@knapsack/eslint-config-starter": "4.78.15--canary.6061.4646541.0",
+    "@knapsack/prettier-config": "4.78.15--canary.6061.4646541.0",
+    "@knapsack/types": "4.78.15--canary.6061.4646541.0",
+    "@knapsack/typescript-config-starter": "4.78.15--canary.6061.4646541.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": "29b3f10ffd66b697c7f8cb1205462d08ca118c2d"
+  "gitHead": "464654133c4eec5d333a9622950b7d7badb79153"
 }

package/.turbo/turbo-build.log

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

package/.turbo/turbo-lint.log

@@ -1,13 +0,0 @@
-
-> @knapsack/renderer-react-components@4.78.13 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/src/demo-wrapper.tsx

@@ -1,14 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

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

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

@@ -1,26 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,25 +0,0 @@
-// 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

@@ -1,20 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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>
-);