Poc preact

packages/react-core/global.d.ts

@@ -0,0 +1,93 @@
+import * as preact from 'preact';
+
+// also modified
+// node_modules/preact/src/index.d.ts
+/*
+export interface VNode<P = {}> {
+	type: ComponentType<P> | string;
+	props: P & any;
+export function cloneElement(
+	vnode: ComponentChild,
+	props?: any,
+	...children: ComponentChildren[]
+): VNode<any>;
+*/
+
+// node_modules/preact/compat/src/index.d.ts
+/*
+export function createPortal(
+		vnode: preact.ComponentChild,
+		container: Element | DocumentFragment
+	): preact.VNode<any>;
+*/
+
+declare module 'react' {
+//     // https://github.com/preactjs/preact/issues/4114#issuecomment-1690930689
+    interface HTMLProps<T> extends preact.JSX.HTMLAttributes<T> {
+        icon?: string | undefined | preact.SignalLike<string | undefined> | preact.ComponentChild;
+        role?: preact.JSX.AriaRole | undefined | preact.SignalLike<preact.JSX.AriaRole | undefined>;
+    };
+    type AriaRole = preact.JSX.AriaRole;
+    type JSXElementConstructor<P> =
+        | ((props: P) => ReactElement<any, any> | null)
+        | (new (props: P) => Component<any, any>);
+    interface ButtonHTMLAttributes<T = any> extends preact.JSX.HTMLAttributes<T> {};
+    interface ImgHTMLAttributes<T = any> extends preact.JSX.HTMLAttributes<T> {};
+    interface InputHTMLAttributes<T = any> extends preact.JSX.HTMLAttributes<T> {};
+    interface OlHTMLAttributes<T> extends HTMLAttributes<T> {
+        reversed?: boolean | undefined;
+        start?: number | undefined;
+        type?: '1' | 'a' | 'A' | 'i' | 'I' | undefined;
+    };
+    interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
+        value?: string | ReadonlyArray<string> | number | undefined;
+    }
+    type ReactText = string | number;
+    type ComponentType<P = {}> = preact.ComponentType<P>;
+    type ElementType<P = any> =
+        {
+            [K in keyof preact.JSX.IntrinsicElements]: P extends preact.JSX.IntrinsicElements[K] ? K : never
+        }[keyof preact.JSX.IntrinsicElements] |
+        ComponentType<P>;
+    // interface VNode<P = {}> extends preact.VNode<P> {
+    //     props: P & { 
+    //         children: preact.ComponentChildren;
+    //         className: string;
+    //     };
+    // }
+    type LegacyRef<T> = string | Ref<T>;
+    // interface ReactElement<P = any, T = any> extends preact.VNode<P> {};
+    interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
+        type: T;
+        props: P;
+        key: Key | null;
+    }
+    type MouseEvent<T = any, E = any> = any;
+    type KeyboardEvent<T = any, E = any> = any;
+    type DragEvent<T = any, E = any> = any;
+    type FormEvent<T = any> = any;
+    type TouchEvent<T = any> = any;
+    type FocusEvent<T = any> = any;
+    type SyntheticEvent<T = any> = any;
+    type TransitionEvent<T = any> = any;
+    type ClipboardEvent<T = any> = any;
+    type TargetedEvent<
+		Target extends EventTarget = EventTarget,
+		TypedEvent extends Event = Event
+	> = preact.JSX.TargetedEvent & {
+        nativeEvent: any;
+    }
+    type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>;
+    type TargetedTransitionEvent<Target extends EventTarget> =
+		TargetedEvent<Target, TransitionEvent> & {
+            nativeEvent: any;
+        };
+    type TransitionEventHandler<T = Element> = EventHandler<TransitionEvent<T>>;
+    type SetStateAction<S> = S | ((prevState: S) => S);
+    type HTMLAttributeAnchorTarget =
+        | '_self'
+        | '_blank'
+        | '_parent'
+        | '_top'
+        | (string & {});
+}

packages/react-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.1.1-prerelease.2",
+  "version": "1.0.0",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -38,6 +38,8 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "scripts": {
+    "build:tsc": "npx tsc --project tsconfig.json",
+    "build:rollup": "rm -rf dist && npx rollup -c rollup-esm.config.js",
     "build:umd": "rollup -c --environment IS_PRODUCTION",
     "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json",
     "clean": "rimraf dist components layouts helpers next deprecated node_modules",
@@ -54,16 +56,21 @@
   },
   "devDependencies": {
     "@patternfly/patternfly": "5.1.0-prerelease.13",
+    "@rollup/plugin-alias": "^5.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
     "glob": "^7.1.2",
+    "preact": "^10.17.1",
+    "preact-compat": "^3.19.0",
     "rimraf": "^3.0.2",
     "rollup": "^3.21.5",
     "rollup-plugin-scss": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.35.0",
+    "sass": "^1.66.1",
     "typescript": "^4.7.4"
   },
   "peerDependencies": {

packages/react-core/rollup-esm.config.js

@@ -0,0 +1,92 @@
+const alias = require('@rollup/plugin-alias');
+const { nodeResolve } = require('@rollup/plugin-node-resolve');
+const typescript = require('rollup-plugin-typescript2');
+const scss = require('rollup-plugin-scss');
+
+const packageJson = require('./package.json');
+
+module.exports = {
+  //   input: 'dist/esm/index.js',
+  input: 'src/index.ts',
+  output: [
+    {
+      file: packageJson.module,
+      format: 'esm', // ES Modules
+      sourcemap: true
+    }
+  ],
+  external: ['react', 'react-dom'],
+  plugins: [
+    alias({
+      entries: [
+        { find: 'react', replacement: 'preact/compat' },
+        { find: 'react-dom/test-utils', replacement: 'preact/test-utils' },
+        { find: 'react-dom', replacement: 'preact/compat' },
+        { find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' }
+      ]
+    }),
+    nodeResolve(),
+    typescript({
+      useTsconfigDeclarationDir: false
+    }),
+    scss()
+  ]
+};
+
+// const { nodeResolve } = require('@rollup/plugin-node-resolve');
+// const commonjs = require('@rollup/plugin-commonjs');
+// const scss = require('rollup-plugin-scss');
+// const replace = require('@rollup/plugin-replace');
+// const { terser } = require('rollup-plugin-terser');
+
+// const isProduction = process.env.IS_PRODUCTION;
+// let exitCode = 0;
+
+// function circularFailPlugin() {
+//   return {
+//     name: 'circluarFailPlugin',
+//     buildEnd() {
+//       if (exitCode !== 0) {
+//         process.exit(exitCode);
+//       }
+//     }
+//   };
+// }
+
+// module.exports = ({ packageName, name }) => ({
+//   input: 'dist/esm/index.js',
+//   output: {
+//     file: `dist/umd/${packageName}${isProduction ? '.min' : ''}.js`,
+//     format: 'umd',
+//     inlineDynamicImports: true,
+//     name,
+//     globals: {
+//       react: 'React',
+//       'react-dom': 'ReactDOM'
+//     }
+//   },
+//   external: ['react', 'react-dom'],
+//   plugins: [
+//     replace({
+//       'process.env.NODE_ENV': `'${isProduction ? 'production' : 'development'}'`
+//     }),
+//     nodeResolve(),
+//     commonjs(),
+//     scss(),
+//     isProduction && terser(),
+//     circularFailPlugin()
+//   ],
+//   onwarn(warning) {
+//     if (warning.code === 'CIRCULAR_DEPENDENCY') {
+//       const split = warning.message.split(':');
+//       if (warning.message.includes('d3-interpolate')) {
+//         // eslint-disable-next-line no-console
+//         console.error(`\x1b[33m(!) ${split[0]}:\x1b[0m${split[1]}`);
+//       } else {
+//         // eslint-disable-next-line no-console
+//         console.error(`\x1b[31m(!) ${split[0]}:\x1b[0m${split[1]}`);
+//         exitCode = 1;
+//       }
+//     }
+//   }
+// });

packages/react-core/src/components/Avatar/Avatar.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Avatar/avatar';
 import { css } from '@patternfly/react-styles';
 
 export interface AvatarProps
-  extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+  extends Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'size'> {
   /** Additional classes added to the Avatar. */
   className?: string;
   /** Attribute that specifies the URL of the image for the Avatar. */

packages/react-core/src/components/BackToTop/BackToTop.tsx

@@ -11,7 +11,7 @@ interface BackToTopProps extends React.DetailedHTMLProps<React.HTMLProps<HTMLDiv
   /** Title to appear in back to top button. */
   title?: string;
   /** @hide Forwarded ref */
-  innerRef?: React.Ref<any>;
+  innerRef?: React.ForwardedRef<any>;
   /** Selector for the scrollable element to spy on. Not passing a selector defaults to spying on window scroll events. */
   scrollableSelector?: string;
   /** Flag to always show back to top button, defaults to false. */
@@ -89,7 +89,7 @@ const BackToTopBase: React.FunctionComponent<BackToTopProps> = ({
   );
 };
 
-export const BackToTop = React.forwardRef((props: BackToTopProps, ref: React.Ref<any>) => (
+export const BackToTop = React.forwardRef((props: BackToTopProps, ref: React.ForwardedRef<any>) => (
   <BackToTopBase innerRef={ref} {...props} />
 ));
 BackToTop.displayName = 'BackToTop';

packages/react-core/src/components/Brand/Brand.tsx

@@ -3,7 +3,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Brand/brand';
 import { setBreakpointCssVars } from '../../helpers';
 export interface BrandProps
-  extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+  extends React.HTMLProps<HTMLPictureElement | HTMLImageElement> {
   /** Transforms the Brand into a <picture> element from an <img> element. Container for <source> child elements. */
   children?: React.ReactNode;
   /** Additional classes added to the either type of Brand. */
@@ -61,17 +61,17 @@ export const Brand: React.FunctionComponent<BrandProps> = ({
     children !== undefined ? (
       <picture
         className={css(styles.brand, styles.modifiers.picture, className)}
-        style={{ ...style, ...responsiveStyles }}
-        {...props}
+        style={{ ...(style as any), ...responsiveStyles }}
+        {...props as React.HTMLProps<HTMLPictureElement>}
       >
         {children}
         <img src={src} alt={alt} />
       </picture>
     ) : (
       <img
-        {...props}
+        {...props as React.HTMLProps<HTMLImageElement>}
         className={css(styles.brand, className)}
-        style={{ ...style, ...responsiveStyles }}
+        style={{ ...(style as any), ...responsiveStyles }}
         src={src}
         alt={alt}
       />

packages/react-core/src/components/Button/Button.tsx

@@ -37,6 +37,8 @@ export interface BadgeCountObject {
   className?: string;
 }
 
+export type Type = 'button' | 'submit' | 'reset';
+
 export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref' | 'size'>, OUIAProps {
   /** Content rendered inside the button */
   children?: React.ReactNode;
@@ -67,7 +69,7 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   /** Adds styling which affects the size of the button */
   size?: 'default' | 'sm' | 'lg';
   /** Sets button type */
-  type?: 'button' | 'submit' | 'reset';
+  type?: Type;
   /** Adds button variant styles */
   variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control';
   /** Sets position of the link icon */
@@ -81,7 +83,7 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   /** Adds danger styling to secondary or link button variants */
   isDanger?: boolean;
   /** @hide Forwarded ref */
-  innerRef?: React.Ref<any>;
+  innerRef?: React.ForwardedRef<any>;
   /** Adds count number to button */
   countOptions?: BadgeCountObject;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -199,7 +201,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   );
 };
 
-export const Button = React.forwardRef((props: ButtonProps, ref: React.Ref<any>) => (
+export const Button = React.forwardRef((props: ButtonProps, ref: React.ForwardedRef<any>) => (
   <ButtonBase innerRef={ref} {...props} />
 ));
 

packages/react-core/src/components/Checkbox/Checkbox.tsx

@@ -103,8 +103,8 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
     if (onChange !== defaultOnChange) {
       checkedProps.checked = isChecked;
     }
-    if ([false, true].includes(defaultChecked)) {
-      checkedProps.defaultChecked = defaultChecked;
+    if ([false, true].includes(defaultChecked as boolean)) {
+      checkedProps.defaultChecked = defaultChecked as boolean;
     }
 
     checkedProps.checked = checkedProps.checked === null ? false : checkedProps.checked;

packages/react-core/src/components/Chip/Chip.tsx

@@ -110,7 +110,7 @@ class Chip extends React.Component<ChipProps, ChipState> {
         onClick={onClick}
         {...(textMaxWidth && {
           style: this.setChipStyle(),
-          ...style
+          ...(style as any)
         })}
         className={css(styles.chip, styles.modifiers.overflow, className)}
         {...(component === 'button' ? { type: 'button' } : {})}
@@ -192,7 +192,7 @@ class Chip extends React.Component<ChipProps, ChipState> {
     const { isOverflowChip } = this.props;
     return (
       <GenerateId>
-        {(randomId) => (isOverflowChip ? this.renderOverflowChip() : this.renderChip(this.props.id || randomId))}
+        {(randomId) => (isOverflowChip ? this.renderOverflowChip() : this.renderChip((this.props.id || randomId) as string))}
       </GenerateId>
     );
   }

packages/react-core/src/components/Chip/ChipGroup.tsx

@@ -206,7 +206,7 @@ class ChipGroup extends React.Component<ChipGroupProps, ChipGroupState> {
     };
 
     return numChildren === 0 ? null : (
-      <GenerateId>{(randomId) => renderChipGroup(this.props.id || randomId)}</GenerateId>
+      <GenerateId>{(randomId) => renderChipGroup((this.props.id || randomId) as string)}</GenerateId>
     );
   }
 }

packages/react-core/src/components/ClipboardCopy/ClipboardCopyAction.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
 import { css } from '@patternfly/react-styles';
 
-export interface ClipboardCopyActionProps extends React.HTMLProps<HTMLLIElement> {
+export interface ClipboardCopyActionProps extends React.HTMLProps<HTMLSpanElement> {
   /** Content rendered inside the clipboard copy action. */
   children?: React.ReactNode;
   /** Additional classes added to the clipboard copy action. */

packages/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx

@@ -4,7 +4,7 @@ import { Button } from '../Button';
 import { Tooltip, TooltipPosition } from '../Tooltip';
 
 export interface ClipboardCopyButtonProps
-  extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'ref'> {
+  extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref' | 'type' | 'size' | 'tabIndex'> {
   /** Callback for the copy when the button is clicked */
   onClick: (event: React.MouseEvent) => void;
   /** Content of the copy button */

packages/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx

@@ -30,7 +30,7 @@ class ClipboardCopyExpanded extends React.Component<ClipboardCopyExpandedProps>
 
     return (
       <div
-        suppressContentEditableWarning
+        // suppressContentEditableWarning
         className={css(styles.clipboardCopyExpandableContent, className)}
         onInput={(e: any) => onChange(e, e.target.innerText)}
         contentEditable={!isReadOnly}

packages/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx

@@ -4,7 +4,7 @@ import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-ico
 import { Button } from '../Button';
 
 export interface ClipboardCopyToggleProps
-  extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'ref'> {
+  extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref' | 'type' | 'size' | 'tabIndex' | 'aria-label'> {
   onClick: (event: React.MouseEvent) => void;
   id: string;
   textId: string;