nhsuk-tools-chart-components-react 1.0.0

package/dist/esm/stories/Charts/Child Bmi/Chart.stories.d.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ChildBmiChart } from '@components/child-bmi/cbmi-chart';
+declare const meta: Meta<typeof ChildBmiChart>;
+export default meta;
+type Story = StoryObj<typeof ChildBmiChart>;
+/**
+ *
+ * This component can be found in the `nhsuk-tools-chart-components` repository <a href="https://github.com/NHSDigital/nhsuk-tools-chart-components/tree/main/src/components/child-bmi" target="_blank" rel="noopener noreferrer">here</a>.
+ *
+ * It visualizes a Child's Body Mass Index (BMI) on a chart.
+ *
+ * ## Usage
+ *
+ * ```jsx
+ *   <ChildBmiChart
+ *     classificationBounds={classificationBounds}
+ *     centile={{ value: 1, label: 'Below 2' }}
+ *     markerText="The centile:"
+ *   />
+ * ```
+ *
+ * ## Properties
+ *
+ * ### classificationBounds
+ * Defines the boundaries for different BMI classifications.
+ *
+ * This property provides a structured way to define the ranges for different BMI classifications, including both the numerical values and the corresponding labels for display.
+ *
+ * ```
+ * {
+ *  lower: 0,
+ *  upper: {
+ *    [BaseClassifications.Underweight]: {
+ *      value: 2,
+ *      label: '2',
+ *    },
+ *    [BaseClassifications.Healthy]: {
+ *      value: 91,
+ *      label: '91',
+ *    },
+ *    [BaseClassifications.Overweight]: {
+ *      value: 100,
+ *      label: '100',
+ *    },
+ *  },
+ * };
+ * ```
+ * ### centile
+ *  Represents the child BMI centile score.
+ *
+ *  It consists of the numerical value and a textual description of the percentile score
+ */
+export declare const Chart: Story;

package/dist/esm/stories/Charts/Child Bmi/Figure.stories.d.ts

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ChildBmiChartFigure } from '@components/child-bmi/cbmi-figure-chart';
+declare const meta: Meta<typeof ChildBmiChartFigure>;
+export default meta;
+type Story = StoryObj<typeof ChildBmiChartFigure>;
+/**
+ *
+ * This component can be found in the `nhsuk-tools-chart-components` repository <a href="https://github.com/NHSDigital/nhsuk-tools-chart-components/tree/main/src/components/child-bmi" target="_blank" rel="noopener noreferrer">here</a>.
+ *
+ * Display a visual representation of a Child's BMI, including a chart, markers, and labels.
+ *
+ * ## Usage
+ *
+ * ```jsx
+ *  <ChildBmiChartFigure
+ *     ariaLabel="Your child's body mass index result is shown on a chart here. A full description can be found in the text below it"
+ *     classificationBounds={classificationBounds}
+ *     centile={{ value: 1, label: 'Below 2' }}
+ *     centileMarkerText="The centile:"
+ *     legendKeys={{
+ *       underweight: 'Underweight range',
+ *       healthy: 'Healthy weight range',
+ *       overweight: 'Overweight range',
+ *     }}
+ *   />
+ * ```
+ *
+ * ## Properties
+ *
+ * ### classificationBounds
+ * Defines the boundaries for different BMI classifications.
+ *
+ * This property provides a structured way to define the ranges for different BMI classifications, including both the numerical values and the corresponding labels for display.
+ *
+ * ```
+ * {
+ *  lower: 0,
+ *  upper: {
+ *    [BaseClassifications.Underweight]: {
+ *      value: 2,
+ *      label: '2',
+ *    },
+ *    [BaseClassifications.Healthy]: {
+ *      value: 91,
+ *      label: '91',
+ *    },
+ *    [BaseClassifications.Overweight]: {
+ *      value: 100,
+ *      label: '100',
+ *    },
+ *  },
+ * };
+ * ```
+ * ### ariaLabel
+ * This property provides a textual description  of the figure for screen readers.
+ *
+ * ### centileMarkerText
+ * This label is used to identify the marker that represents the child's BMI percentile on the chart.
+ *
+ * ### centile
+ *  Represents the child BMI centile score.
+ *
+ *  It consists of the numerical value and a textual description of the percentile score
+ *
+ * ### legendKeys
+ * Defines the labels for different BMI categories.
+ *
+ * This property maps BMI categories to their corresponding labels, which will be displayed in the chart's legend.
+ *
+ */
+export declare const Figure: Story;

package/dist/esm/stories/Legend/ChartLegend.stories.d.ts

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ChartLegend } from '@components/chart-legend';
+/**
+ * This component can be found in the `nhsuk-tools-chart-components` repository <a href="https://github.com/NHSDigital/nhsuk-tools-chart-components/tree/main/src/components/" target="_blank" rel="noopener noreferrer">here</a>.
+ *
+ * Chart legend with styles for each legend key
+ * ## Usage
+ *
+ * ```jsx
+ * <ChartLegend
+ *     borderWrapper
+ *     legendKeys={[
+ *       {
+ *         text: 'First item',
+ *         className: `nhsuk-cbmi-legend-key-classification-underweight`,
+ *       },
+ *       {
+ *         text: 'Second item',
+ *         className: `nhsuk-cbmi-legend-key-classification-healthy`,
+ *       },
+ *       {
+ *         text: 'Third item',
+ *         className: `nhsuk-cbmi-legend-key-classification-overweight`,
+ *       }
+ *     ]}
+ *   />
+ * ```
+ * ## Properties
+ *
+ * ### borderWrapper
+ *
+ * Controls whether a border wrapper is applied around the legend items.
+ *
+ * ### legendKeys
+ * Defines the items that will be displayed in the legend.
+ *
+ * Each object in the array represents a legend item and has the following properties:
+ *
+ * - `text`: The text label that will be displayed for the legend item.
+ *
+ * - `className`: A CSS class that can be used to style the legend item. In this example, the classes are used to indicate different BMI classifications (underweight, healthy, overweight).
+ *
+ * - `element`: (Optional) A React component that can be rendered instead of the default text label.
+ *
+ */
+declare const meta: Meta<typeof ChartLegend>;
+export default meta;
+type Story = StoryObj<typeof ChartLegend>;
+export declare const WithBorder: Story;
+export declare const Borderless: Story;
+export declare const KeyWithElement: Story;

package/dist/index.d.ts

@@ -0,0 +1,290 @@
+import { JSX as JSX$1 } from 'react';
+
+type UpperBoundInequalityMethod = (a: number, b: number) => boolean;
+type UpperBoundValue = {
+    value?: number;
+    label?: string;
+    inequalityMethod?: UpperBoundInequalityMethod;
+};
+type UpperBounds<TClassificationLevel extends string> = {
+    [key in TClassificationLevel]: UpperBoundValue;
+};
+type Bounds<TClassificationLevel extends string> = {
+    lower: number;
+    upper: UpperBounds<TClassificationLevel>;
+};
+
+declare const BaseClassifications: {
+    readonly Underweight: "underweight";
+    readonly Healthy: "healthy";
+    readonly Overweight: "overweight";
+};
+declare const BmiClassificationLabel: {
+    readonly Obese: "obese";
+    readonly Underweight: "underweight";
+    readonly Healthy: "healthy";
+    readonly Overweight: "overweight";
+};
+declare const BmiClassification: {
+    readonly Obese1: "obese1";
+    readonly Obese2: "obese2";
+    readonly Obese3: "obese3";
+    readonly Underweight: "underweight";
+    readonly Healthy: "healthy";
+    readonly Overweight: "overweight";
+};
+type BaseClassificationLevel = (typeof BaseClassifications)[keyof typeof BaseClassifications];
+type BaseClassificationBounds = Bounds<BaseClassificationLevel>;
+type BmiClassificationBounds = Bounds<BmiClassificationLevel>;
+type BmiClassificationLevel = (typeof BmiClassification)[keyof typeof BmiClassification];
+type BmiClassificationLevelLabel = (typeof BmiClassificationLabel)[keyof typeof BmiClassificationLabel];
+type CentileValue = {
+    value: number;
+    label: string;
+};
+type ChildBmiLegendKeys = {
+    [key in BaseClassificationLevel]: string;
+};
+type BmiLegendKeys = {
+    [key in BmiClassificationLevelLabel]?: string;
+};
+
+/**
+ * The properties for @ChildBmiChart component
+ *
+ * @param {BaseClassificationBounds} classificationBounds -  The child body mass index classification ranges
+ * @param {CentileValue} centile - The centile value and label
+ * @param {string} markerText - Marker text for the centile value
+ */
+type ChildBmiChartProps = {
+    classificationBounds: BaseClassificationBounds;
+    centile: CentileValue;
+    markerText: string;
+};
+/**
+ * A component to display the child body mass index chart
+ *
+ * @typedef {object} ChildBmiChartProps
+ * @property {BaseClassificationBounds} classificationBounds -  The child body mass index classification ranges
+ * @property {CentileValue} centile - The centile value and label
+ * @property {string} markerText - Marker text for the centile value
+ *
+ * @param {ChildBmiChartProps} props
+ * @returns {JSX.Element}
+ */
+declare function ChildBmiChart({ classificationBounds, centile, markerText, }: Readonly<ChildBmiChartProps>): JSX$1.Element;
+
+/**
+ * The properties for @ChildBmiChartFigure component
+ *
+ * @param {BaseClassificationBounds} classificationBounds -  The child body mass index classification ranges
+ * @param {CentileValue} centile - The centile value and label
+ * @param {string} ariaLabel - The aria label for the chart figure
+ * @param {string} centileMarkerText - The marker text for the centile value
+ * @param {ChildBmiLegendKeys} legendKeys - The chart legend items
+ */
+type ChildBmiChartFigureProps = {
+    classificationBounds: BaseClassificationBounds;
+    centile: CentileValue;
+    ariaLabel: string;
+    centileMarkerText: string;
+    legendKeys: ChildBmiLegendKeys;
+};
+/**
+ * A component to display the child body mass index chart figure
+ *
+ * @typedef {object} ChildBmiChartFigureProps
+ * @property {BaseClassificationBounds} classificationBounds -  The child body mass index classification ranges
+ * @property {CentileValue} centile - The centile value and label
+ * @property {string} centileMarkerText - The marker text for the centile value
+ * @property {string} ariaLabel - The aria label for the chart figure
+ * @property {ChildBmiLegendKeys} legendKeys - The chart legend items
+ *
+ * @param {ChildBmiChartFigureProps} props
+ * @returns {JSX.Element}
+ */
+declare function ChildBmiChartFigure({ classificationBounds, centile, centileMarkerText, ariaLabel, legendKeys, }: Readonly<ChildBmiChartFigureProps>): JSX$1.Element;
+
+/**
+ * The properties for @BmiChart component
+ *
+ * @param {classificationBounds} classificationBounds -  The body mass index classification ranges
+ * @param {number} bmi - The body mass index value
+ */
+type BmiChartProps = {
+    classificationBounds: BmiClassificationBounds;
+    bmi: number;
+};
+/**
+ * A component to display the body mass index chart
+ *
+ * @typedef {object} BmiChartProps
+ * @property {classificationBounds} classificationBounds -  The body mass index classification ranges
+ * @property {number} bmi - The body mass index value
+ *
+ * @param {BmiChartProps} props
+ * @returns {JSX.Element}
+ */
+declare function BmiChart({ classificationBounds, bmi, }: Readonly<BmiChartProps>): JSX$1.Element;
+
+/**
+ * The properties for @BmiChartFigure component
+ *
+ * @param {classificationBounds} classificationBounds -  The body mass index classification ranges
+ * @param {number} bmi - The body mass index value
+ * @param {string} ariaLabel - The aria label for the chart figure
+ * @param {BmiLegendKeys} legendKeys - The chart legend items
+ * @param {string} legendMarkerText The chart legend marker text
+ */
+type BmiChartFigureProps = {
+    classificationBounds: BmiClassificationBounds;
+    bmi: number;
+    ariaLabel: string;
+    legendKeys: BmiLegendKeys;
+    legendMarkerText: string;
+};
+/**
+ * A component to display the body mass index chart figure
+ *
+ * @typedef {object} BmiChartFigureProps
+ * @property {classificationBounds} classificationBounds -  The body mass index classification ranges
+ * @property {number} bmi - The body mass index value
+ * @property {string} ariaLabel - The aria label for the chart figure
+ * @property {BmiLegendKeys} legendKeys - The chart legend items
+ * @property {string} legendMarkerText The chart legend marker text
+ *
+ * @param {BmiChartFigureProps} props
+ * @returns {JSX.Element}
+ */
+declare function BmiChartFigure({ classificationBounds, bmi, ariaLabel, legendKeys, legendMarkerText, }: Readonly<BmiChartFigureProps>): JSX$1.Element;
+
+declare const BpClassificationLevel: {
+    readonly Low: "0";
+    readonly Healthy: "1";
+    readonly SlightlyRaised: "2";
+    readonly High: "3";
+    readonly VeryHigh: "4";
+};
+type BpClassificationLevelType = (typeof BpClassificationLevel)[keyof typeof BpClassificationLevel];
+type BpLegendKeys = {
+    [key in keyof typeof BpClassificationLevel as Lowercase<string>]: string;
+};
+type BpReadingValue = {
+    systolic: number;
+    diastolic: number;
+};
+type BpCellConfiguration = {
+    id: string;
+    firstInRow?: boolean;
+    firstInColumn?: boolean;
+};
+type BpRowConfiguration = {
+    id: string;
+    cells: BpCellConfiguration[];
+};
+type BpGraphLayout = {
+    systolicLabel: string;
+    diastolicLabel: string;
+    rows: BpRowConfiguration[];
+};
+
+type BpBounds = {
+    [key in keyof BpReadingValue]: Bounds<BpClassificationLevelType>;
+};
+
+/**
+ * The properties for @BpChart component
+ *
+ * @param {BpBounds} bounds - The blood pressure classification ranges
+ * @param {BpGraphLayout} graphLayout - The graph layout contains rows configuration and systolic/diastolic chart labels
+ * @param {BpReadingValue} readings - The systolic and diastolic blood pressure readings
+ */
+type BpChartProps = {
+    bounds: BpBounds;
+    graphLayout: BpGraphLayout;
+    reading: BpReadingValue;
+};
+/**
+ * A component to display the blood pressure chart
+ *
+ * @typedef {object} BpChartProps
+ * @property {BpBounds} bounds - The blood pressure classification ranges
+ * @property {BpGraphLayout} graphLayout - The graph layout contains rows configuration and systolic/diastolic chart labels
+ * @property {BpReadingValue} readings - The systolic and diastolic blood pressure readings
+ *
+ * @param {BpChartProps} props
+ * @returns {JSX.Element}
+ */
+declare function BpChart({ bounds, graphLayout, reading, }: Readonly<BpChartProps>): JSX.Element;
+
+/**
+ * The properties for @BpChartFigure component
+ *
+ * @param {BpBounds} bounds - The blood pressure classification ranges
+ * @param {BpGraphLayout} graphLayout - The graph layout with row configuration and systolic/diastolic chart labels
+ * @param {BpReadingValue} readings - The systolic and diastolic blood pressure readings
+ * @param {string }ariaLabel - The aria label for the chart figure
+ * @param {BpLegendKeys} legendKeys - The legend keys for the chart figure
+ * @param {string } legendMarkerText - The legend marker text
+ */
+type BpChartFigureProps = {
+    bounds: BpBounds;
+    graphLayout: BpGraphLayout;
+    reading: BpReadingValue;
+    ariaLabel: string;
+    legendKeys: BpLegendKeys;
+    legendMarkerText: string;
+};
+/**
+ * A component to display the blood pressure chart figure
+ *
+ * @typedef {object} BpChartFigureProps
+ * @property {BpBounds} bounds - The blood pressure classification ranges
+ * @property {BpGraphLayout} graphLayout - The graph layout with row configuration and systolic/diastolic chart labels
+ * @property {BpReadingValue} readings - The systolic and diastolic blood pressure readings
+ * @property {string }ariaLabel - The aria label for the chart figure
+ * @property {BpLegendKeys} legendKeys - The legend keys for the chart figure
+ * @property {string } legendMarkerText - The legend marker text
+ *
+ * @param {BpChartFigureProps} props
+ * @returns {JSX.Element}
+ */
+declare function BpChartFigure({ bounds, graphLayout, reading, ariaLabel, legendKeys, legendMarkerText, }: Readonly<BpChartFigureProps>): JSX$1.Element;
+
+/**
+ * The ChartLegendKey type
+ *
+ * @param {string} className -  Optional: The classname of the legend key
+ * @param {string} wrapperClassName - Optional: The wrapper classname for the card component
+ * @param {string} text - The text of the legend key
+ * @param {BmiLegendKeys} JSX.Element - Optional: A JSX.Element of the legend key
+ */
+type ChartLegendKey = {
+    className?: string;
+    wrapperClassName?: string;
+    text: string;
+    element?: JSX$1.Element;
+};
+/**
+ * The properties for @ChartLegend component
+ *
+ * @param {ChartLegendKey[]} legendKeys -  The list of legend keys
+ * @param {boolean} borderWrapper -  Optional: A boolean value to enable or disable a border around the legend items with a set max width of 250px
+ */
+type ChartLegendProps = {
+    legendKeys: ChartLegendKey[];
+    borderWrapper?: boolean;
+};
+/**
+ * A component to display a legend associated with a chart, consisting of a card which wraps a set of legend keys.
+ *
+ * @typedef {object} ChartLegendProps
+ * @property {ChartLegendKey[]} legendKeys -  The list of legend keys
+ * @property {boolean} borderWrapper - Optional: A boolean value to enable or disable a border around the legend items with a set max width of 250px
+ *
+ * @param {ChartLegendProps} props
+ * @returns {JSX.Element}
+ */
+declare function ChartLegend({ legendKeys, borderWrapper, }: Readonly<ChartLegendProps>): JSX$1.Element;
+
+export { BmiChart, BmiChartFigure, type BmiChartFigureProps, type BmiChartProps, BpChart, BpChartFigure, type BpChartFigureProps, type BpChartProps, ChartLegend, type ChartLegendKey, type ChartLegendProps, ChildBmiChart, ChildBmiChartFigure, type ChildBmiChartFigureProps, type ChildBmiChartProps };

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "nhsuk-tools-chart-components-react",
+  "version": "1.0.0",
+  "description": "",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "rimraf dist && rollup -c rollup.config.mjs",
+    "build-storybook": "storybook build",
+    "storybook": "storybook dev -p 6006",
+    "watch": "npm run build -- --watch",
+    "lint": "eslint ./src",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:ci": "jest --ci",
+    "prepare": "is-ci || husky install && npm run build"
+  },
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NHSDigital/nhsuk-tools-chart-components.git"
+  },
+  "author": {
+       "name": "NHS England"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@storybook/addon-actions": "^8.0.5",
+    "@storybook/addon-essentials": "^8.0.5",
+    "@storybook/addon-interactions": "^8.3.2",
+    "@storybook/addon-links": "^8.0.5",
+    "@storybook/addon-onboarding": "^8.3.2",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/blocks": "^8.0.5",
+    "@storybook/manager-api": "^8.0.5",
+    "@storybook/preview-api": "^8.0.5",
+    "@storybook/react-vite": "^8.0.5",
+    "@storybook/test": "^8.3.2",
+    "@storybook/theming": "^8.0.5",
+    "@testing-library/dom": "^8.20.1",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/big.js": "^6.2.2",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/rollup-plugin-peer-deps-external": "^2.2.5",
+    "eslint": "^8.27.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-sonarjs": "^0.16.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "husky": "^8.0.0",
+    "is-ci": "^3.0.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.3.1",
+    "jest-junit": "^14.0.1",
+    "jest-sonar-reporter": "^2.0.0",
+    "@storybook/react": "^8.0.5",
+    "lint-staged": "^13.1.0",
+    "prettier": "^2.7.1",
+    "rimraf": "^3.0.2",
+    "rollup": "^4.13.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "rollup-plugin-scss": "^4.0.0",
+    "rollup-plugin-tsconfig-paths": "^1.5.2",
+    "sass": "^1.77.4",
+    "storybook": "^8.0.5",
+    "ts-jest": "^29.0.3",
+    "ts-node": "^10.9.2",
+    "tsconfig-paths": "^4.2.0",
+    "typescript": "^4.9.5",
+    "vite": "^4.5.3",
+    "vite-tsconfig-paths": "^4.3.2"
+  },
+  "peerDependencies": {
+    "big.js": "^6.2.2",
+    "nhsuk-frontend": ">=8.0.0 <9.0.0",
+    "nhsuk-react-components": ">=4.0.0 <5.0.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  }
+}