@openshift-migration-advisor/shared-components 0.0.0

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2026 Red Hat, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,76 @@
+# @openshift-migration-advisor/shared-components
+
+Shared React UI components for Migration Advisor applications (agent UI and cloud assessment UI).
+
+Includes:
+
+- PatternFly form field wrappers (`react-hook-form`)
+- Guest OS support-tier helpers and badges
+- Report chart primitives (`MigrationDonutChart`)
+- Operating Systems distribution card
+
+## Installation
+
+```bash
+# Yarn workspace (migration-planner-ui)
+yarn workspace @openshift-migration-advisor/agent-ui add @openshift-migration-advisor/shared-components@workspace:*
+
+# npm (migration-planner-ui-app)
+npm install @openshift-migration-advisor/shared-components
+```
+
+## Peer dependencies
+
+Consumers must provide:
+
+- `react` / `react-dom` (^18.3)
+- `@patternfly/react-core`, `@patternfly/react-charts` (^8), `@patternfly/react-icons`, `@patternfly/react-table`, `@patternfly/react-tokens`
+- `@emotion/css`
+- `react-hook-form` (for form components)
+
+## Usage
+
+```tsx
+import {
+  MigrationDonutChart,
+  OSDistribution,
+  SupportTierBadge,
+  TextInputFormGroup,
+} from "@openshift-migration-advisor/shared-components";
+```
+
+Components are SDK-agnostic: pass already-shaped props (for example `OSDistributionEntry` maps). Map `agent-sdk` / `planner-sdk` models at the app boundary.
+
+## Development
+
+```bash
+yarn workspace @openshift-migration-advisor/shared-components build
+yarn workspace @openshift-migration-advisor/shared-components typecheck
+yarn workspace @openshift-migration-advisor/shared-components test
+yarn workspace @openshift-migration-advisor/shared-components check
+```
+
+## Publishing
+
+The package is published to npm under `@openshift-migration-advisor/shared-components` via GitHub Actions, using the same OIDC Trusted Publishing flow as `@openshift-migration-advisor/ioc`.
+
+**Workflow:** [`.github/workflows/release-shared-components.yaml`](../../.github/workflows/release-shared-components.yaml)
+
+| Trigger | Result |
+|---|---|
+| Push to `main` / `stable` changing `packages/shared-components/**` | Prerelease: `{latestTag}-{12-char-sha}` |
+| Tag `vX.Y.Z` | Release: `X.Y.Z` |
+
+### One-time npm setup (required before first publish)
+
+On [npmjs.com](https://www.npmjs.com/) for the `@openshift-migration-advisor` org, create the package (or claim the name) and configure a **Trusted Publisher**:
+
+- **Repository:** `kubev2v/migration-planner-agent-ui` (or the current GitHub repo name)
+- **Workflow:** `release-shared-components.yaml`
+- **Environment:** leave empty unless you use GitHub Environments
+
+No npm token is stored in the repo; publish uses OIDC (`id-token: write`).
+
+## License
+
+[Apache 2.0](LICENSE)

package/dist/charts/MigrationDonutChart.d.ts

@@ -0,0 +1,53 @@
+import type { FC } from "react";
+export interface MigrationDonutChartDatum {
+    name: string;
+    count: number;
+    legendCategory: string;
+    countDisplay?: string;
+    diskRange?: {
+        min: number;
+        max?: number;
+    };
+    memoryRange?: {
+        min: number;
+        max?: number;
+    };
+    clusterNames?: string[];
+    networkNames?: string[];
+}
+export interface MigrationDonutChartProps {
+    data: MigrationDonutChartDatum[];
+    legend?: Record<string, string>;
+    customColors?: Record<string, string>;
+    height?: number;
+    width?: number;
+    title?: string;
+    subTitle?: string;
+    titleColor?: string;
+    subTitleColor?: string;
+    marginLeft?: string;
+    titleFontSize?: number;
+    subTitleFontSize?: number;
+    donutThickness?: number;
+    padAngle?: number;
+    tooltipLabelFormatter?: (args: {
+        datum: {
+            x: string;
+            y: number;
+            countDisplay?: string | number;
+            legendCategory: string;
+        };
+        percent: number;
+        total: number;
+    }) => string;
+    onItemClick?: (item: MigrationDonutChartDatum) => void;
+    onTitleClick?: () => void;
+    /** When set, used for legend label instead of "name (countDisplay)". */
+    legendLabelFormatter?: (item: {
+        x: string;
+        countDisplay?: string | number;
+    }) => string;
+}
+export declare const MigrationDonutChart: FC<MigrationDonutChartProps>;
+export default MigrationDonutChart;
+//# sourceMappingURL=MigrationDonutChart.d.ts.map

package/dist/charts/MigrationDonutChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MigrationDonutChart.d.ts","sourceRoot":"","sources":["../../src/charts/MigrationDonutChart.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,WAAW,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,wBAAwB,EAAE,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC7B,KAAK,EAAE;YACL,CAAC,EAAE,MAAM,CAAC;YACV,CAAC,EAAE,MAAM,CAAC;YACV,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;YAC/B,cAAc,EAAE,MAAM,CAAC;SACxB,CAAC;QACF,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,wBAAwB,KAAK,IAAI,CAAC;IACvD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,wEAAwE;IACxE,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC5B,CAAC,EAAE,MAAM,CAAC;QACV,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KAChC,KAAK,MAAM,CAAC;CACd;AAkDD,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAkS5D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/charts/MigrationDonutChart.js

@@ -0,0 +1,186 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { css } from "@emotion/css";
+import { ChartDonut, ChartLabel } from "@patternfly/react-charts/victory";
+import { EmptyState, EmptyStateVariant, Flex, FlexItem, } from "@patternfly/react-core";
+import { InboxIcon } from "@patternfly/react-icons";
+import { useCallback, useMemo } from "react";
+const legendColors = ["#0066cc", "#5e40be", "#b6a6e9", "#b98412"];
+const styles = {
+    legendIcon: css `
+    margin-right: 4px;
+  `,
+    cursorPointer: css `
+    cursor: pointer;
+  `,
+    cursorDefault: css `
+    cursor: default;
+  `,
+    chartContainer: css `
+    padding: 1em 0;
+  `,
+    donutWrapper: css `
+    position: relative;
+    display: inline-block;
+  `,
+    legendContainer: css `
+    overflow: hidden;
+    min-height: 40px;
+  `,
+    legendButton: css `
+    gap: var(--pf-t--global--spacer--lg);
+    cursor: pointer;
+    border: none;
+    background: none;
+    padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--ml);
+    margin: 0;
+    transition: opacity var(--pf-t--global--motion--duration--short);
+    white-space: nowrap;
+
+    &:hover {
+      opacity: 0.7;
+    }
+  `,
+    legendLabel: css `
+    gap: var(--pf-t--global--spacer--lg);
+    padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--ml);
+    white-space: nowrap;
+  `,
+    legendInner: css `
+    max-width: 680px;
+    padding: var(--pf-t--global--spacer--ml);
+  `,
+};
+export const MigrationDonutChart = ({ data, legend, customColors, height = 260, width = 420, title, subTitle, titleColor = "#000000", subTitleColor = "#000000", marginLeft = "0%", titleFontSize = 28, subTitleFontSize = 14, donutThickness = 45, padAngle = 1, tooltipLabelFormatter, onItemClick, onTitleClick, legendLabelFormatter, }) => {
+    const dynamicLegend = useMemo(() => {
+        return data.reduce((acc, current) => {
+            const key = `${current.legendCategory}`;
+            if (!acc.seen.has(key)) {
+                acc.seen.add(key);
+                const color = customColors?.[key] ??
+                    legendColors[(acc.seen.size - 1) % legendColors.length];
+                acc.result.push({ [key]: color });
+            }
+            return acc;
+        }, { seen: new Set(), result: [] }).result;
+    }, [data, customColors]);
+    const chartLegend = legend ? legend : Object.assign({}, ...dynamicLegend);
+    const getColor = useCallback((name) => chartLegend[name], [chartLegend]);
+    const chartData = useMemo(() => {
+        return data.map((item) => ({
+            x: item.name,
+            y: item.count,
+            legendCategory: item.legendCategory,
+            countDisplay: item.countDisplay ?? item.count,
+        }));
+    }, [data]);
+    const colorScale = useMemo(() => {
+        return chartData.map((item) => getColor(item.legendCategory));
+    }, [chartData, getColor]);
+    const innerRadius = useMemo(() => {
+        const outerApprox = Math.min(width, height) / 2;
+        const computed = outerApprox - donutThickness;
+        return computed > 0 ? computed : 0;
+    }, [width, height, donutThickness]);
+    const totalY = useMemo(() => {
+        return chartData.reduce((sum, item) => sum + (Number(item.y) || 0), 0);
+    }, [chartData]);
+    const handleClick = useCallback(
+    // biome-ignore lint/suspicious/noExplicitAny: Victory chart types are not well-typed
+    (props) => {
+        if (!onItemClick)
+            return;
+        const datum = props?.datum;
+        if (!datum)
+            return;
+        let clickedItem = data.find((item) => item.name === datum.x);
+        if (!clickedItem && typeof props.index === "number") {
+            clickedItem = data[props.index];
+        }
+        if (!clickedItem) {
+            clickedItem = data.find((item) => item.legendCategory === datum.legendCategory);
+        }
+        if (clickedItem) {
+            onItemClick(clickedItem);
+        }
+    }, [onItemClick, data]);
+    const chartEvents = useMemo(() => {
+        if (!onItemClick)
+            return undefined;
+        return [
+            {
+                target: "data",
+                eventHandlers: {
+                    onClick: () => [
+                        {
+                            target: "data",
+                            // biome-ignore lint/suspicious/noExplicitAny: Victory chart types are not well-typed
+                            mutation: (props) => {
+                                handleClick(props);
+                                return null;
+                            },
+                        },
+                    ],
+                },
+            },
+        ];
+    }, [onItemClick, handleClick]);
+    if (!data || data.length === 0) {
+        return (_jsx(EmptyState, { headingLevel: "h3", titleText: "No data available", icon: InboxIcon, variant: EmptyStateVariant.xs }));
+    }
+    return (_jsxs(Flex, { direction: { default: "column" }, alignItems: { default: "alignItemsCenter" }, className: `${onItemClick ? styles.cursorPointer : styles.cursorDefault} ${styles.chartContainer}`, children: [_jsxs("div", { className: styles.donutWrapper, children: [_jsx(ChartDonut, { ariaDesc: "Migration data donut chart", data: chartData, events: chartEvents, labels: ({ datum, }) => {
+                            const percent = totalY > 0 ? (Number(datum.y) / totalY) * 100 : 0;
+                            return tooltipLabelFormatter
+                                ? tooltipLabelFormatter({
+                                    datum: {
+                                        x: datum.x,
+                                        y: Number(datum.y),
+                                        countDisplay: datum.countDisplay,
+                                        legendCategory: datum.legendCategory,
+                                    },
+                                    percent,
+                                    total: totalY,
+                                })
+                                : `${datum.x}: ${datum.countDisplay ?? datum.y}`;
+                        }, colorScale: colorScale, constrainToVisibleArea: true, innerRadius: innerRadius, padAngle: padAngle, title: title, subTitle: subTitle, height: height, width: width, padding: {
+                            bottom: 5,
+                            left: 20,
+                            right: 20,
+                            top: 0,
+                        }, titleComponent: title ? (_jsx(ChartLabel, { style: [
+                                {
+                                    fill: titleColor,
+                                    fontSize: titleFontSize,
+                                    fontWeight: "bold",
+                                },
+                            ] })) : undefined, subTitleComponent: subTitle ? (_jsx(ChartLabel, { style: [
+                                {
+                                    fill: subTitleColor,
+                                    fontSize: subTitleFontSize,
+                                },
+                            ] })) : undefined }), onTitleClick && title && (_jsx("div", { onClick: onTitleClick, className: css `
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              width: ${innerRadius * 2}px;
+              height: ${innerRadius * 2}px;
+              cursor: pointer;
+              border-radius: 50%;
+              z-index: 10;
+            `, title: "Click to view all VMs", role: "button", tabIndex: 0, onKeyDown: (e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                onTitleClick();
+                            }
+                        } }))] }), _jsx(Flex, { className: `${styles.legendContainer} ${css `margin-left: ${marginLeft};`}`, justifyContent: { default: "justifyContentCenter" }, alignItems: { default: "alignItemsFlexStart" }, children: _jsx(Flex, { className: styles.legendInner, spaceItems: { default: "spaceItemsMd" }, justifyContent: { default: "justifyContentCenter" }, alignItems: { default: "alignItemsCenter" }, flexWrap: { default: "wrap" }, children: data.map((item) => {
+                        const label = legendLabelFormatter
+                            ? legendLabelFormatter({
+                                x: item.name,
+                                countDisplay: item.countDisplay,
+                            })
+                            : item.name;
+                        const content = (_jsxs(_Fragment, { children: [_jsxs("svg", { width: "10", height: "10", "aria-hidden": "true", className: styles.legendIcon, children: [_jsx("title", { children: "Legend color indicator" }), _jsx("rect", { width: "10", height: "10", fill: getColor(item.legendCategory) })] }), _jsx("span", { children: label })] }));
+                        return (_jsx(FlexItem, { children: onItemClick ? (_jsx("button", { type: "button", onClick: () => onItemClick(item), className: styles.legendButton, children: content })) : (_jsx("span", { className: styles.legendLabel, children: content })) }, `${item.legendCategory}-${item.name}`));
+                    }) }) })] }));
+};
+export default MigrationDonutChart;

package/dist/charts/index.d.ts

@@ -0,0 +1,2 @@
+export { MigrationDonutChart, type MigrationDonutChartDatum, type MigrationDonutChartProps, } from "./MigrationDonutChart.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/charts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/charts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,GAC9B,MAAM,0BAA0B,CAAC"}

package/dist/charts/index.js

@@ -0,0 +1 @@
+export { MigrationDonutChart, } from "./MigrationDonutChart.js";

package/dist/forms/CheckboxFormGroup.d.ts

@@ -0,0 +1,5 @@
+import type { FormGroupProps } from "./types.js";
+type CheckboxFormGroupProps = Omit<FormGroupProps, "placeholder">;
+export default function CheckboxFormGroup({ id, label, name, isRequired, isDisabled, helpText, ...props }: CheckboxFormGroupProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=CheckboxFormGroup.d.ts.map

package/dist/forms/CheckboxFormGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxFormGroup.d.ts","sourceRoot":"","sources":["../../src/forms/CheckboxFormGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,KAAK,sBAAsB,GAAG,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC;AAElE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAkB,EAClB,UAAkB,EAClB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,sBAAsB,+BAoCxB"}

package/dist/forms/CheckboxFormGroup.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox, FormGroup } from "@patternfly/react-core";
+import { Controller, useFormContext } from "react-hook-form";
+import FormFieldHelperText from "./FormFieldHelperText.js";
+export default function CheckboxFormGroup({ id, label, name, isRequired = false, isDisabled = false, helpText, ...props }) {
+    const methods = useFormContext();
+    const error = methods.formState.errors[name];
+    const isTouched = methods.formState.touchedFields[name];
+    const isSubmitted = methods.formState.isSubmitted;
+    const showError = error && (isTouched || isSubmitted);
+    return (_jsxs(FormGroup, { isRequired: isRequired, fieldId: id, ...props, children: [_jsx(Controller, { name: name, control: methods.control, render: ({ field }) => {
+                    return (_jsx(Checkbox, { label: label, id: id, isRequired: isRequired, isDisabled: isDisabled, isChecked: field.value, onChange: field.onChange, onBlur: field.onBlur, name: field.name, ref: field.ref }));
+                } }), _jsx(FormFieldHelperText, { helpText: helpText, errorMessage: showError ? error?.message : undefined })] }));
+}

package/dist/forms/FormFieldHelperText.d.ts

@@ -0,0 +1,7 @@
+interface FormFieldHelperTextProps {
+    helpText?: string;
+    errorMessage?: string;
+}
+export default function FormFieldHelperText({ helpText, errorMessage, }: FormFieldHelperTextProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=FormFieldHelperText.d.ts.map

package/dist/forms/FormFieldHelperText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldHelperText.d.ts","sourceRoot":"","sources":["../../src/forms/FormFieldHelperText.tsx"],"names":[],"mappings":"AAOA,UAAU,wBAAwB;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,QAAQ,EACR,YAAY,GACb,EAAE,wBAAwB,sCAgB1B"}

package/dist/forms/FormFieldHelperText.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormHelperText, HelperText, HelperTextItem, } from "@patternfly/react-core";
+import { ExclamationCircleIcon } from "@patternfly/react-icons";
+export default function FormFieldHelperText({ helpText, errorMessage, }) {
+    if (!helpText && !errorMessage)
+        return null;
+    return (_jsx(FormHelperText, { children: _jsx(HelperText, { children: errorMessage ? (_jsx(HelperTextItem, { icon: _jsx(ExclamationCircleIcon, {}), variant: "error", children: errorMessage })) : (helpText && _jsx(HelperTextItem, { children: helpText })) }) }));
+}

package/dist/forms/RadioButtonFormGroup.d.ts

@@ -0,0 +1,12 @@
+import type { FormGroupProps } from "./types.js";
+interface RadioOption {
+    value: string;
+    label: string;
+    id: string;
+}
+interface RadioButtonFormGroupProps extends Omit<FormGroupProps, "placeholder"> {
+    options: RadioOption[];
+}
+export default function RadioButtonFormGroup({ id, label, name, isRequired, options, helpText, ...props }: RadioButtonFormGroupProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=RadioButtonFormGroup.d.ts.map

package/dist/forms/RadioButtonFormGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonFormGroup.d.ts","sourceRoot":"","sources":["../../src/forms/RadioButtonFormGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,yBACR,SAAQ,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC;IAC3C,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,yBAAyB,+BAoC3B"}

package/dist/forms/RadioButtonFormGroup.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormGroup, Radio } from "@patternfly/react-core";
+import { Controller, useFormContext } from "react-hook-form";
+import FormFieldHelperText from "./FormFieldHelperText.js";
+export default function RadioButtonFormGroup({ id, label, name, isRequired = false, options, helpText, ...props }) {
+    const methods = useFormContext();
+    const error = methods.formState.errors[name];
+    const isTouched = methods.formState.touchedFields[name];
+    const isSubmitted = methods.formState.isSubmitted;
+    const showError = error && (isTouched || isSubmitted);
+    return (_jsxs(FormGroup, { label: label, isRequired: isRequired, fieldId: id, ...props, children: [_jsx(Controller, { name: name, control: methods.control, render: ({ field }) => (_jsx("div", { style: { display: "flex", gap: "16px" }, role: "radiogroup", children: options.map((option) => (_jsx(Radio, { id: option.id, name: name, label: option.label, isChecked: field.value === option.value, onChange: () => field.onChange(option.value), onBlur: field.onBlur }, option.value))) })) }), _jsx(FormFieldHelperText, { helpText: helpText, errorMessage: showError ? error?.message : undefined })] }));
+}

package/dist/forms/SelectFormGroup.d.ts

@@ -0,0 +1,8 @@
+import type { FormGroupProps } from "./types.js";
+export default function SelectFormGroup({ id, label, name, isRequired, options, helpText, isDisabled, ...props }: {
+    options: {
+        label: string;
+        value: string;
+    }[];
+} & FormGroupProps): import("react").JSX.Element;
+//# sourceMappingURL=SelectFormGroup.d.ts.map

package/dist/forms/SelectFormGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectFormGroup.d.ts","sourceRoot":"","sources":["../../src/forms/SelectFormGroup.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,GAAG,KAAK,EACT,EAAE;IACD,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;CACL,GAAG,cAAc,+BAgCjB"}

package/dist/forms/SelectFormGroup.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormGroup, FormSelect, FormSelectOption, } from "@patternfly/react-core";
+import { Controller, useFormContext } from "react-hook-form";
+import FormFieldHelperText from "./FormFieldHelperText.js";
+export default function SelectFormGroup({ id, label, name, isRequired = false, options, helpText, isDisabled = false, ...props }) {
+    const methods = useFormContext();
+    const error = methods.formState.errors[name];
+    const isTouched = methods.formState.touchedFields[name];
+    const isSubmitted = methods.formState.isSubmitted;
+    const showError = error && (isTouched || isSubmitted);
+    return (_jsxs(FormGroup, { label: label, isRequired: isRequired, fieldId: id, ...props, children: [_jsx(Controller, { name: name, control: methods.control, render: ({ field }) => (_jsx(FormSelect, { id: id, isDisabled: isDisabled, ...field, children: options.map((option) => (_jsx(FormSelectOption, { value: option.value, label: option.label }, option.value))) })) }), _jsx(FormFieldHelperText, { helpText: helpText, errorMessage: showError ? error?.message : undefined })] }));
+}

package/dist/forms/TextAreaFormGroup.d.ts

@@ -0,0 +1,3 @@
+import type { FormGroupProps } from "./types.js";
+export default function TextAreaFormGroup({ id, label, name, isRequired, isDisabled, placeholder, helpText, ...props }: FormGroupProps): import("react").JSX.Element;
+//# sourceMappingURL=TextAreaFormGroup.d.ts.map

package/dist/forms/TextAreaFormGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextAreaFormGroup.d.ts","sourceRoot":"","sources":["../../src/forms/TextAreaFormGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAkB,EAClB,UAAkB,EAClB,WAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,+BA2BhB"}

package/dist/forms/TextAreaFormGroup.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormGroup, TextArea, ValidatedOptions } from "@patternfly/react-core";
+import { useFormContext } from "react-hook-form";
+import FormFieldHelperText from "./FormFieldHelperText.js";
+export default function TextAreaFormGroup({ id, label, name, isRequired = false, isDisabled = false, placeholder = "", helpText, ...props }) {
+    const methods = useFormContext();
+    const error = methods.formState.errors[name];
+    const isTouched = methods.formState.touchedFields[name];
+    const isSubmitted = methods.formState.isSubmitted;
+    const showError = error && (isTouched || isSubmitted);
+    return (_jsxs(FormGroup, { label: label, isRequired: isRequired, fieldId: id, ...props, children: [_jsx(TextArea, { id: id, placeholder: placeholder, isRequired: isRequired, isDisabled: isDisabled, validated: showError ? ValidatedOptions.error : ValidatedOptions.default, ...methods.register(name) }), _jsx(FormFieldHelperText, { helpText: helpText, errorMessage: showError ? error?.message : undefined })] }));
+}

package/dist/forms/TextInputFormGroup.d.ts

@@ -0,0 +1,11 @@
+import { type TextInputProps } from "@patternfly/react-core";
+import type { FocusEvent } from "react";
+import type { FormGroupProps } from "./types.js";
+interface TextInputFormGroupProps extends FormGroupProps {
+    type?: TextInputProps["type"];
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    isDisabled?: boolean;
+}
+export default function TextInputFormGroup({ id, label, name, isRequired, placeholder, type, onBlur, isDisabled, helpText, ...props }: TextInputFormGroupProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=TextInputFormGroup.d.ts.map

package/dist/forms/TextInputFormGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInputFormGroup.d.ts","sourceRoot":"","sources":["../../src/forms/TextInputFormGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EAEpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAIxC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,UAAU,uBAAwB,SAAQ,cAAc;IACtD,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAkB,EAClB,WAAgB,EAChB,IAAa,EACb,MAAM,EACN,UAAkB,EAClB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,+BAiCzB"}

package/dist/forms/TextInputFormGroup.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormGroup, TextInput, ValidatedOptions, } from "@patternfly/react-core";
+import { useFormContext } from "react-hook-form";
+import FormFieldHelperText from "./FormFieldHelperText.js";
+export default function TextInputFormGroup({ id, label, name, isRequired = false, placeholder = "", type = "text", onBlur, isDisabled = false, helpText, ...props }) {
+    const methods = useFormContext();
+    const error = methods.formState.errors[name];
+    const isTouched = methods.formState.touchedFields[name];
+    const isSubmitted = methods.formState.isSubmitted;
+    const registration = methods.register(name);
+    const showError = error && (isTouched || isSubmitted);
+    return (_jsxs(FormGroup, { label: label, isRequired: isRequired, fieldId: id, ...props, children: [_jsx(TextInput, { id: id, placeholder: placeholder, isRequired: isRequired, validated: showError ? ValidatedOptions.error : ValidatedOptions.default, type: type, isDisabled: isDisabled, ...registration, onBlur: (e) => {
+                    void registration.onBlur(e);
+                    onBlur?.(e);
+                } }), _jsx(FormFieldHelperText, { helpText: helpText, errorMessage: showError ? error?.message : undefined })] }));
+}

package/dist/forms/index.d.ts

@@ -0,0 +1,8 @@
+export { default as CheckboxFormGroup } from "./CheckboxFormGroup.js";
+export { default as FormFieldHelperText } from "./FormFieldHelperText.js";
+export { default as RadioButtonFormGroup } from "./RadioButtonFormGroup.js";
+export { default as SelectFormGroup } from "./SelectFormGroup.js";
+export { default as TextAreaFormGroup } from "./TextAreaFormGroup.js";
+export { default as TextInputFormGroup } from "./TextInputFormGroup.js";
+export type { FormGroupProps } from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/forms/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACxE,YAAY,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC"}

package/dist/forms/index.js

@@ -0,0 +1,6 @@
+export { default as CheckboxFormGroup } from "./CheckboxFormGroup.js";
+export { default as FormFieldHelperText } from "./FormFieldHelperText.js";
+export { default as RadioButtonFormGroup } from "./RadioButtonFormGroup.js";
+export { default as SelectFormGroup } from "./SelectFormGroup.js";
+export { default as TextAreaFormGroup } from "./TextAreaFormGroup.js";
+export { default as TextInputFormGroup } from "./TextInputFormGroup.js";

package/dist/forms/types.d.ts

@@ -0,0 +1,11 @@
+import type { FormGroupProps as PFFormGroupProps } from "@patternfly/react-core";
+export interface FormGroupProps extends Omit<PFFormGroupProps, "fieldId"> {
+    id: string;
+    name: string;
+    label?: string;
+    isRequired?: boolean;
+    placeholder?: string;
+    helpText?: string;
+    isDisabled?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/forms/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/forms/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAEjF,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC;IACvE,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/dist/forms/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./charts/index.js";
+export * from "./forms/index.js";
+export * from "./report/index.js";
+//# 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,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from "./charts/index.js";
+export * from "./forms/index.js";
+export * from "./report/index.js";

package/dist/report/CardEmptyState.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from "react";
+export declare const CARD_EMPTY_STATE_DESCRIPTION = "This data is not available for older inventories or certain imported reports.";
+export interface CardEmptyStateProps {
+    title: string;
+    description?: string;
+}
+export declare const CardEmptyState: FC<CardEmptyStateProps>;
+//# sourceMappingURL=CardEmptyState.d.ts.map

package/dist/report/CardEmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardEmptyState.d.ts","sourceRoot":"","sources":["../../src/report/CardEmptyState.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,eAAO,MAAM,4BAA4B,kFACwC,CAAC;AAUlF,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAOlD,CAAC"}

package/dist/report/CardEmptyState.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css } from "@emotion/css";
+import { DashboardEmptyStateBase } from "./DashboardEmptyStateBase.js";
+export const CARD_EMPTY_STATE_DESCRIPTION = "This data is not available for older inventories or certain imported reports.";
+const cardEmptyStateContainer = css `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1;
+  min-height: 250px;
+`;
+export const CardEmptyState = ({ title, description = CARD_EMPTY_STATE_DESCRIPTION, }) => (_jsx("div", { className: cardEmptyStateContainer, children: _jsx(DashboardEmptyStateBase, { title: title, body: description }) }));
+CardEmptyState.displayName = "CardEmptyState";

package/dist/report/DashboardEmptyStateBase.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentType, FC, SVGProps } from "react";
+export interface DashboardEmptyStateBaseProps {
+    title: string;
+    body: string;
+    icon?: ComponentType<SVGProps<SVGSVGElement>>;
+}
+export declare const DashboardEmptyStateBase: FC<DashboardEmptyStateBaseProps>;
+//# sourceMappingURL=DashboardEmptyStateBase.d.ts.map

package/dist/report/DashboardEmptyStateBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardEmptyStateBase.d.ts","sourceRoot":"","sources":["../../src/report/DashboardEmptyStateBase.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzD,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAapE,CAAC"}

package/dist/report/DashboardEmptyStateBase.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmptyState, EmptyStateBody, EmptyStateVariant, } from "@patternfly/react-core";
+import { SearchIcon } from "@patternfly/react-icons";
+export const DashboardEmptyStateBase = ({ title, body, icon: IconComponent = SearchIcon, }) => (_jsx(EmptyState, { headingLevel: "h4", icon: IconComponent, titleText: title, variant: EmptyStateVariant.sm, children: _jsx(EmptyStateBody, { children: body }) }));
+DashboardEmptyStateBase.displayName = "DashboardEmptyStateBase";

package/dist/report/EmptySearchResults.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from "react";
+export interface EmptySearchResultsProps {
+    title?: string;
+    body?: string;
+}
+export declare const EmptySearchResults: FC<EmptySearchResultsProps>;
+//# sourceMappingURL=EmptySearchResults.d.ts.map