@atlaskit/forge-react-types 0.37.8 → 0.37.10

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/forge-react-types
 
+## 0.37.10
+
+### Patch Changes
+
+- [#123531](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/123531)
+  [`661b1bc0352d1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/661b1bc0352d1) -
+  Exposing UIKit JSDoc enabled chart component types
+- Updated dependencies
+
+## 0.37.9
+
+### Patch Changes
+
+- [#123324](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/123324)
+  [`f5904f3eb2d35`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f5904f3eb2d35) -
+  Export UI Kit Component types for Charts with JSDoc comments
+
 ## 0.37.8
 
 ### Patch Changes

package/dist/types/components/charts/BarChartProps.d.ts

@@ -1,20 +1,109 @@
 import type { ChartColorTokens } from '../../types';
 export type BarChartProps = {
+    /**
+     * The static width of the chart in pixels. If this is not specified, the width is responsive.
+     */
     width?: number;
+    /**
+     * The static height of the chart in pixels. Defaults to `400`.
+     */
     height?: number;
+    /**
+     * Data can be one of two formats:
+     * 1. An [array of arrays](https://developer.atlassian.com/platform/forge/ui-kit/components/bar-chart/#1--array-of-arrays).
+     * 2. An [array of objects](https://developer.atlassian.com/platform/forge/ui-kit/components/bar-chart/#2--array-of-objects).
+     */
     data: unknown[];
+    /**
+     * Boolean to display the chart border. Defaults to `false`.
+     */
     showBorder?: boolean;
+    /**
+     * Accessor to define the x-axis values. This can be a numerical or string index.
+     * For more information on all accessors, see [Data](https://developer.atlassian.com/platform/forge/ui-kit/components/bar-chart/#data).
+     */
     xAccessor: number | string;
+    /**
+     * Accessor to define the y-axis values.
+     */
     yAccessor: number | string;
+    /**
+     * Accessor to define the color grouping.
+     */
     colorAccessor?: number | string;
+    /**
+     * A string value that represents the title of the chart.
+     */
     title?: string;
+    /**
+     * A string value that represents the subtitle of the chart. This appears below the title.
+     */
     subtitle?: string;
+    /**
+     * An array of [chart color tokens](https://atlassian.design/components/tokens/all-tokens#color-chart).
+     * This is utilized to render each bar with the specified colors, based on the color grouping given by colorAccessor.
+     */
     colors?: ChartColorTokens[];
 };
 type StackChartProps = BarChartProps & {
+    /**
+     * Accessor to define the color grouping.
+     */
     colorAccessor: number | string;
 };
-export type HorizontalBarChartProps = BarChartProps;
-export type StackBarChartProps = StackChartProps;
-export type HorizontalStackBarChartProps = StackChartProps;
+export type HorizontalBarChartProps = BarChartProps & {
+    /**
+     * Data can be one of two formats:
+     * 1. An [array of arrays](https://developer.atlassian.com/platform/forge/ui-kit/components/horizontal-bar-chart/#1--array-of-arrays).
+     * 2. An [array of objects](https://developer.atlassian.com/platform/forge/ui-kit/components/horizontal-bar-chart/#2--array-of-objects).
+     */
+    data: unknown[];
+    /**
+     * Accessor to define the x-axis values. This can be a numerical or string index.
+     * For more information on all accessors, see [Data](https://developer.atlassian.com/platform/forge/ui-kit/components/horizontal-bar-chart/#data).
+     */
+    xAccessor: number | string;
+};
+export type StackBarChartProps = StackChartProps & {
+    /**
+     * Data can be one of two formats:
+     * 1. An [array of arrays](https://developer.atlassian.com/platform/forge/ui-kit/components/stack-bar-chart/#1--array-of-arrays).
+     * 2. An [array of objects](https://developer.atlassian.com/platform/forge/ui-kit/components/stack-bar-chart/#2--array-of-objects).
+     */
+    data: unknown[];
+    /**
+     * Accessor to define the x-axis values. This can be a numerical or string index.
+     * For more information on all accessors, see [Data](https://developer.atlassian.com/platform/forge/ui-kit/components/stack-bar-chart/#data).
+     */
+    xAccessor: number | string;
+};
+export type HorizontalStackBarChartProps = StackChartProps & {
+    /**
+     * Data can be one of two formats:
+     * 1. An [array of arrays](https://developer.atlassian.com/platform/forge/ui-kit/components/horizontal-stack-bar-chart/#1--array-of-arrays).
+     * 2. An [array of objects](https://developer.atlassian.com/platform/forge/ui-kit/components/horizontal-stack-bar-chart/#2--array-of-objects).
+     */
+    data: unknown[];
+    /**
+     * Accessor to define the x-axis values. This can be a numerical or string index.
+     * For more information on all accessors, see [Data](https://developer.atlassian.com/platform/forge/ui-kit/components/horizontal-stack-bar-chart/#data).
+     */
+    xAccessor: number | string;
+};
+/**
+ * A visual representation of data using rectangular bars of varying heights to compare different categories or values.
+ */
+export type TBarChart<T> = (props: BarChartProps) => T;
+/**
+ * A visual representation of data using horizontal rectangular bars of varying lengths to compare different categories or values.
+ */
+export type THorizontalBarChart<T> = (props: HorizontalBarChartProps) => T;
+/**
+ * A visual representation of data using rectangular bars of varying heights to demonstrate comparisons between categories of data.
+ */
+export type TStackBarChart<T> = (props: StackBarChartProps) => T;
+/**
+ * A visual representation of data using horizontal rectangular bars of varying lengths to demonstrate comparisons between categories of data.
+ */
+export type THorizontalStackBarChart<T> = (props: HorizontalStackBarChartProps) => T;
 export {};

package/dist/types/components/charts/LineChartProps.d.ts

@@ -1,13 +1,48 @@
 import type { ChartColorTokens } from '../../types';
 export type LineChartProps = {
+    /**
+     * The static width of the chart in pixels. If this is not specified, the width is responsive.
+     */
     width?: number;
+    /**
+     * The static height of the chart in pixels. Defaults to `400`.
+     */
     height?: number;
+    /**
+     * Data can be one of two formats:
+     * 1. An [array of arrays](https://developer.atlassian.com/platform/forge/ui-kit/components/line-chart/#1--array-of-arrays).
+     * 2. An [array of objects](https://developer.atlassian.com/platform/forge/ui-kit/components/line-chart/#2--array-of-objects).
+     */
     data: unknown[];
     showBorder?: boolean;
+    /**
+     * Accessor to define the x-axis values. This can be a numerical or string index.
+     * For more information on all accessors, see [Data](https://developer.atlassian.com/platform/forge/ui-kit/components/line-chart/#data).
+     */
     xAccessor: number | string;
+    /**
+     * Accessor to define the y-axis values.
+     */
     yAccessor: number | string;
+    /**
+     * Accessor to define the color grouping.
+     */
     colorAccessor?: number | string;
+    /**
+     * A string value that represents the title of the chart.
+     */
     title?: string;
+    /**
+     * A string value that represents the subtitle of the chart. This appears below the title.
+     */
     subtitle?: string;
+    /**
+     * An array of [chart color tokens](https://atlassian.design/components/tokens/all-tokens#color-chart).
+     * This is utilized to render each line with the specified colors, based on the color grouping given by colorAccessor.
+     */
     colors?: ChartColorTokens[];
 };
+/**
+ * A visual representation of data showing trends.
+ */
+export type TLineChart<T> = (props: LineChartProps) => T;

package/dist/types/components/charts/PieChartProps.d.ts

@@ -1,15 +1,59 @@
 import type { ChartColorTokens } from '../../types';
 export type PieChartProps = {
+    /**
+     * The static width of the chart in pixels. If this is not specified, the width is responsive.
+     */
     width?: number;
+    /**
+     * The static height of the chart in pixels. Defaults to `400`.
+     */
     height?: number;
+    /**
+     * Data can be one of two formats:
+     * 1. [Array of arrays](https://developer.atlassian.com/platform/forge/ui-kit/components/pie-chart/#1--array-of-arrays).
+     * 2. [Array of objects](https://developer.atlassian.com/platform/forge/ui-kit/components/pie-chart/#2--array-of-objects).
+     */
     data: unknown[];
+    /**
+     * Boolean to display the chart border. Defaults to `false`.
+     */
     showBorder?: boolean;
+    /**
+     * Accessor to define the color grouping. This can be a numerical or string index.
+     * For more information on all accessors, see [Data](https://developer.atlassian.com/platform/forge/ui-kit/components/pie-chart/#data).
+     */
     colorAccessor: number | string;
+    /**
+     * Accessor to define the angle of arcs in a pie.
+     */
     valueAccessor: number | string;
+    /**
+     * Accessor to define the labels.
+     */
     labelAccessor: number | string;
+    /**
+     * A string value that represents the title of the chart.
+     */
     title?: string;
+    /**
+     * A string value that represents the subtitle of the chart. This appears below the title.
+     */
     subtitle?: string;
+    /**
+     * Boolean to render the pie as the donut variation. Defaults to `false`.
+     */
     isDonut?: boolean;
+    /**
+     * Boolean to display labels on top of each slice. Defaults to `false`.
+     */
     showMarkLabels?: boolean;
+    /**
+     * An array of [chart color tokens](https://atlassian.design/components/tokens/all-tokens#color-chart).
+     * This is utilized to render each slice with the specified colors, based on the color grouping given by colorAccessor.
+     */
     colors?: ChartColorTokens[];
 };
+/**
+ * A visual representation of data proportions in a circular format.
+ */
+export type TPieChart<T> = (props: PieChartProps) => T;

package/dist/types/components/charts/SingleValueChartProps.d.ts

@@ -1,8 +1,33 @@
 export type SingleValueChartProps = {
+    /**
+     * Data can be one of two formats:
+     * 1. A **number** - The value that is displayed, abbreviated at the thousand, millions, trillions and billions.
+     * 2. An **array of numbers**: The first number in the array is used as the display value, the second number in the array is used to calculate the increase/decrease percentage relative to the first number.
+     */
     data: number | number[];
+    /**
+     * The static width of the chart in pixels. If this is not specified, the width is responsive.
+     */
     width?: number;
+    /**
+     * The static height of the chart in pixels. Defaults to `120`.
+     */
     height?: number;
+    /**
+     * Boolean to display the chart border. Defaults to `false`.
+     */
     showBorder?: boolean;
+    /**
+     * A string value that represents the title of the chart.
+     */
     title?: string;
+    /**
+     * A string value that represents the subtitle of the chart. This appears below the metric value.
+     */
     subtitle?: string;
 };
+/**
+ * A visualization representation of information with a single value as its metrics.
+ * The metric can be displayed with a increase/decrease indicator to display trends or changes over time.
+ */
+export type TSingleValueChart<T> = (props: SingleValueChartProps) => T;

package/dist/types/components/charts/index.d.ts

@@ -1,4 +1,4 @@
-export type { BarChartProps, StackBarChartProps, HorizontalStackBarChartProps, HorizontalBarChartProps, } from './BarChartProps';
-export type { LineChartProps } from './LineChartProps';
-export type { SingleValueChartProps } from './SingleValueChartProps';
-export type { PieChartProps } from './PieChartProps';
+export type { BarChartProps, StackBarChartProps, HorizontalStackBarChartProps, HorizontalBarChartProps, TBarChart, TStackBarChart, THorizontalStackBarChart, THorizontalBarChart, } from './BarChartProps';
+export type { LineChartProps, TLineChart } from './LineChartProps';
+export type { SingleValueChartProps, TSingleValueChart } from './SingleValueChartProps';
+export type { PieChartProps, TPieChart } from './PieChartProps';

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
 export type { AdfRendererProps, BadgeProps, BleedProps, BoxProps, ButtonGroupProps, ButtonProps, CalendarProps, CheckboxProps, CheckboxGroupProps, CodeBlockProps, CodeProps, DatePickerProps, DynamicTableProps, EmptyStateProps, ErrorMessageProps, FlexProps, FormFooterProps, FormHeaderProps, FormProps, FormSectionProps, GridProps, HeadingProps, HelperMessageProps, IconProps, InlineProps, LabelProps, LinkButtonProps, ListProps, ListItemProps, LoadingButtonProps, LozengeProps, ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps, ModalTitleProps, ModalTransitionProps, ProgressBarProps, ProgressTrackerProps, RadioGroupProps, RadioProps, RangeProps, SectionMessageActionProps, SectionMessageProps, SelectProps, SpinnerProps, StackProps, TabListProps, TabPanelProps, TabProps, TabsProps, TagGroupProps, TagProps, TextProps, TextAreaProps, TextfieldProps, ToggleProps, TooltipProps, TimePickerProps, ValidMessageProps, PopupProps, InlineEditProps, TBadge, TBleed, TBox, TButtonGroup, TButton, TCalendar, TCheckbox, TCheckboxGroup, TCodeBlock, TCode, TDatePicker, TDynamicTable, TEmptyState, TErrorMessage, TFlex, TFormFooter, TFormHeader, TForm, TFormSection, TGrid, THeading, THelperMessage, TIcon, TInline, TInlineEdit, TLabel, TLinkButton, TList, TListItem, TLoadingButton, TLozenge, TModalBody, TModalFooter, TModalHeader, TModal, TModalTitle, TModalTransition, TProgressBar, TProgressTracker, TRadioGroup, TRadio, TRange, TSectionMessageAction, TSectionMessage, TSelect, TSpinner, TStack, TTabList, TTabPanel, TTab, TTabs, TTagGroup, TTag, TTextArea, TTextfield, TTimePicker, TToggle, TTooltip, TValidMessage, TPopup, TAdfRenderer, TText, } from './components/__generated__';
-export type { BarChartProps, StackBarChartProps, HorizontalStackBarChartProps, HorizontalBarChartProps, LineChartProps, SingleValueChartProps, PieChartProps, } from './components/charts';
+export type { BarChartProps, StackBarChartProps, HorizontalStackBarChartProps, HorizontalBarChartProps, LineChartProps, SingleValueChartProps, PieChartProps, TBarChart, TStackBarChart, THorizontalStackBarChart, THorizontalBarChart, TLineChart, TSingleValueChart, TPieChart, } from './components/charts';
 export type { ChartColorTokens } from './types';

package/dist/types-ts4.5/components/charts/BarChartProps.d.ts

@@ -1,20 +1,109 @@
 import type { ChartColorTokens } from '../../types';
 export type BarChartProps = {
+    /**
+     * The static width of the chart in pixels. If this is not specified, the width is responsive.
+     */
     width?: number;
+    /**
+     * The static height of the chart in pixels. Defaults to `400`.
+     */
     height?: number;
+    /**
+     * Data can be one of two formats:
+     * 1. An [array of arrays](https://developer.atlassian.com/platform/forge/ui-kit/components/bar-chart/#1--array-of-arrays).
+     * 2. An [array of objects](https://developer.atlassian.com/platform/forge/ui-kit/components/bar-chart/#2--array-of-objects).
+     */
     data: unknown[];
+    /**
+     * Boolean to display the chart border. Defaults to `false`.
+     */
     showBorder?: boolean;
+    /**
+     * Accessor to define the x-axis values. This can be a numerical or string index.
+     * For more information on all accessors, see [Data](https://developer.atlassian.com/platform/forge/ui-kit/components/bar-chart/#data).
+     */
     xAccessor: number | string;
+    /**
+     * Accessor to define the y-axis values.
+     */
     yAccessor: number | string;
+    /**
+     * Accessor to define the color grouping.
+     */
     colorAccessor?: number | string;
+    /**
+     * A string value that represents the title of the chart.
+     */
     title?: string;
+    /**
+     * A string value that represents the subtitle of the chart. This appears below the title.
+     */
     subtitle?: string;
+    /**
+     * An array of [chart color tokens](https://atlassian.design/components/tokens/all-tokens#color-chart).
+     * This is utilized to render each bar with the specified colors, based on the color grouping given by colorAccessor.
+     */
     colors?: ChartColorTokens[];
 };
 type StackChartProps = BarChartProps & {
+    /**
+     * Accessor to define the color grouping.
+     */
     colorAccessor: number | string;
 };
-export type HorizontalBarChartProps = BarChartProps;
-export type StackBarChartProps = StackChartProps;
-export type HorizontalStackBarChartProps = StackChartProps;
+export type HorizontalBarChartProps = BarChartProps & {
+    /**
+     * Data can be one of two formats:
+     * 1. An [array of arrays](https://developer.atlassian.com/platform/forge/ui-kit/components/horizontal-bar-chart/#1--array-of-arrays).
+     * 2. An [array of objects](https://developer.atlassian.com/platform/forge/ui-kit/components/horizontal-bar-chart/#2--array-of-objects).
+     */
+    data: unknown[];
+    /**
+     * Accessor to define the x-axis values. This can be a numerical or string index.
+     * For more information on all accessors, see [Data](https://developer.atlassian.com/platform/forge/ui-kit/components/horizontal-bar-chart/#data).
+     */
+    xAccessor: number | string;
+};
+export type StackBarChartProps = StackChartProps & {
+    /**
+     * Data can be one of two formats:
+     * 1. An [array of arrays](https://developer.atlassian.com/platform/forge/ui-kit/components/stack-bar-chart/#1--array-of-arrays).
+     * 2. An [array of objects](https://developer.atlassian.com/platform/forge/ui-kit/components/stack-bar-chart/#2--array-of-objects).
+     */
+    data: unknown[];
+    /**
+     * Accessor to define the x-axis values. This can be a numerical or string index.
+     * For more information on all accessors, see [Data](https://developer.atlassian.com/platform/forge/ui-kit/components/stack-bar-chart/#data).
+     */
+    xAccessor: number | string;
+};
+export type HorizontalStackBarChartProps = StackChartProps & {
+    /**
+     * Data can be one of two formats:
+     * 1. An [array of arrays](https://developer.atlassian.com/platform/forge/ui-kit/components/horizontal-stack-bar-chart/#1--array-of-arrays).
+     * 2. An [array of objects](https://developer.atlassian.com/platform/forge/ui-kit/components/horizontal-stack-bar-chart/#2--array-of-objects).
+     */
+    data: unknown[];
+    /**
+     * Accessor to define the x-axis values. This can be a numerical or string index.
+     * For more information on all accessors, see [Data](https://developer.atlassian.com/platform/forge/ui-kit/components/horizontal-stack-bar-chart/#data).
+     */
+    xAccessor: number | string;
+};
+/**
+ * A visual representation of data using rectangular bars of varying heights to compare different categories or values.
+ */
+export type TBarChart<T> = (props: BarChartProps) => T;
+/**
+ * A visual representation of data using horizontal rectangular bars of varying lengths to compare different categories or values.
+ */
+export type THorizontalBarChart<T> = (props: HorizontalBarChartProps) => T;
+/**
+ * A visual representation of data using rectangular bars of varying heights to demonstrate comparisons between categories of data.
+ */
+export type TStackBarChart<T> = (props: StackBarChartProps) => T;
+/**
+ * A visual representation of data using horizontal rectangular bars of varying lengths to demonstrate comparisons between categories of data.
+ */
+export type THorizontalStackBarChart<T> = (props: HorizontalStackBarChartProps) => T;
 export {};

package/dist/types-ts4.5/components/charts/LineChartProps.d.ts

@@ -1,13 +1,48 @@
 import type { ChartColorTokens } from '../../types';
 export type LineChartProps = {
+    /**
+     * The static width of the chart in pixels. If this is not specified, the width is responsive.
+     */
     width?: number;
+    /**
+     * The static height of the chart in pixels. Defaults to `400`.
+     */
     height?: number;
+    /**
+     * Data can be one of two formats:
+     * 1. An [array of arrays](https://developer.atlassian.com/platform/forge/ui-kit/components/line-chart/#1--array-of-arrays).
+     * 2. An [array of objects](https://developer.atlassian.com/platform/forge/ui-kit/components/line-chart/#2--array-of-objects).
+     */
     data: unknown[];
     showBorder?: boolean;
+    /**
+     * Accessor to define the x-axis values. This can be a numerical or string index.
+     * For more information on all accessors, see [Data](https://developer.atlassian.com/platform/forge/ui-kit/components/line-chart/#data).
+     */
     xAccessor: number | string;
+    /**
+     * Accessor to define the y-axis values.
+     */
     yAccessor: number | string;
+    /**
+     * Accessor to define the color grouping.
+     */
     colorAccessor?: number | string;
+    /**
+     * A string value that represents the title of the chart.
+     */
     title?: string;
+    /**
+     * A string value that represents the subtitle of the chart. This appears below the title.
+     */
     subtitle?: string;
+    /**
+     * An array of [chart color tokens](https://atlassian.design/components/tokens/all-tokens#color-chart).
+     * This is utilized to render each line with the specified colors, based on the color grouping given by colorAccessor.
+     */
     colors?: ChartColorTokens[];
 };
+/**
+ * A visual representation of data showing trends.
+ */
+export type TLineChart<T> = (props: LineChartProps) => T;

package/dist/types-ts4.5/components/charts/PieChartProps.d.ts

@@ -1,15 +1,59 @@
 import type { ChartColorTokens } from '../../types';
 export type PieChartProps = {
+    /**
+     * The static width of the chart in pixels. If this is not specified, the width is responsive.
+     */
     width?: number;
+    /**
+     * The static height of the chart in pixels. Defaults to `400`.
+     */
     height?: number;
+    /**
+     * Data can be one of two formats:
+     * 1. [Array of arrays](https://developer.atlassian.com/platform/forge/ui-kit/components/pie-chart/#1--array-of-arrays).
+     * 2. [Array of objects](https://developer.atlassian.com/platform/forge/ui-kit/components/pie-chart/#2--array-of-objects).
+     */
     data: unknown[];
+    /**
+     * Boolean to display the chart border. Defaults to `false`.
+     */
     showBorder?: boolean;
+    /**
+     * Accessor to define the color grouping. This can be a numerical or string index.
+     * For more information on all accessors, see [Data](https://developer.atlassian.com/platform/forge/ui-kit/components/pie-chart/#data).
+     */
     colorAccessor: number | string;
+    /**
+     * Accessor to define the angle of arcs in a pie.
+     */
     valueAccessor: number | string;
+    /**
+     * Accessor to define the labels.
+     */
     labelAccessor: number | string;
+    /**
+     * A string value that represents the title of the chart.
+     */
     title?: string;
+    /**
+     * A string value that represents the subtitle of the chart. This appears below the title.
+     */
     subtitle?: string;
+    /**
+     * Boolean to render the pie as the donut variation. Defaults to `false`.
+     */
     isDonut?: boolean;
+    /**
+     * Boolean to display labels on top of each slice. Defaults to `false`.
+     */
     showMarkLabels?: boolean;
+    /**
+     * An array of [chart color tokens](https://atlassian.design/components/tokens/all-tokens#color-chart).
+     * This is utilized to render each slice with the specified colors, based on the color grouping given by colorAccessor.
+     */
     colors?: ChartColorTokens[];
 };
+/**
+ * A visual representation of data proportions in a circular format.
+ */
+export type TPieChart<T> = (props: PieChartProps) => T;

package/dist/types-ts4.5/components/charts/SingleValueChartProps.d.ts

@@ -1,8 +1,33 @@
 export type SingleValueChartProps = {
+    /**
+     * Data can be one of two formats:
+     * 1. A **number** - The value that is displayed, abbreviated at the thousand, millions, trillions and billions.
+     * 2. An **array of numbers**: The first number in the array is used as the display value, the second number in the array is used to calculate the increase/decrease percentage relative to the first number.
+     */
     data: number | number[];
+    /**
+     * The static width of the chart in pixels. If this is not specified, the width is responsive.
+     */
     width?: number;
+    /**
+     * The static height of the chart in pixels. Defaults to `120`.
+     */
     height?: number;
+    /**
+     * Boolean to display the chart border. Defaults to `false`.
+     */
     showBorder?: boolean;
+    /**
+     * A string value that represents the title of the chart.
+     */
     title?: string;
+    /**
+     * A string value that represents the subtitle of the chart. This appears below the metric value.
+     */
     subtitle?: string;
 };
+/**
+ * A visualization representation of information with a single value as its metrics.
+ * The metric can be displayed with a increase/decrease indicator to display trends or changes over time.
+ */
+export type TSingleValueChart<T> = (props: SingleValueChartProps) => T;

package/dist/types-ts4.5/components/charts/index.d.ts

@@ -1,4 +1,4 @@
-export type { BarChartProps, StackBarChartProps, HorizontalStackBarChartProps, HorizontalBarChartProps, } from './BarChartProps';
-export type { LineChartProps } from './LineChartProps';
-export type { SingleValueChartProps } from './SingleValueChartProps';
-export type { PieChartProps } from './PieChartProps';
+export type { BarChartProps, StackBarChartProps, HorizontalStackBarChartProps, HorizontalBarChartProps, TBarChart, TStackBarChart, THorizontalStackBarChart, THorizontalBarChart, } from './BarChartProps';
+export type { LineChartProps, TLineChart } from './LineChartProps';
+export type { SingleValueChartProps, TSingleValueChart } from './SingleValueChartProps';
+export type { PieChartProps, TPieChart } from './PieChartProps';

package/dist/types-ts4.5/index.d.ts

@@ -1,3 +1,3 @@
 export type { AdfRendererProps, BadgeProps, BleedProps, BoxProps, ButtonGroupProps, ButtonProps, CalendarProps, CheckboxProps, CheckboxGroupProps, CodeBlockProps, CodeProps, DatePickerProps, DynamicTableProps, EmptyStateProps, ErrorMessageProps, FlexProps, FormFooterProps, FormHeaderProps, FormProps, FormSectionProps, GridProps, HeadingProps, HelperMessageProps, IconProps, InlineProps, LabelProps, LinkButtonProps, ListProps, ListItemProps, LoadingButtonProps, LozengeProps, ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps, ModalTitleProps, ModalTransitionProps, ProgressBarProps, ProgressTrackerProps, RadioGroupProps, RadioProps, RangeProps, SectionMessageActionProps, SectionMessageProps, SelectProps, SpinnerProps, StackProps, TabListProps, TabPanelProps, TabProps, TabsProps, TagGroupProps, TagProps, TextProps, TextAreaProps, TextfieldProps, ToggleProps, TooltipProps, TimePickerProps, ValidMessageProps, PopupProps, InlineEditProps, TBadge, TBleed, TBox, TButtonGroup, TButton, TCalendar, TCheckbox, TCheckboxGroup, TCodeBlock, TCode, TDatePicker, TDynamicTable, TEmptyState, TErrorMessage, TFlex, TFormFooter, TFormHeader, TForm, TFormSection, TGrid, THeading, THelperMessage, TIcon, TInline, TInlineEdit, TLabel, TLinkButton, TList, TListItem, TLoadingButton, TLozenge, TModalBody, TModalFooter, TModalHeader, TModal, TModalTitle, TModalTransition, TProgressBar, TProgressTracker, TRadioGroup, TRadio, TRange, TSectionMessageAction, TSectionMessage, TSelect, TSpinner, TStack, TTabList, TTabPanel, TTab, TTabs, TTagGroup, TTag, TTextArea, TTextfield, TTimePicker, TToggle, TTooltip, TValidMessage, TPopup, TAdfRenderer, TText, } from './components/__generated__';
-export type { BarChartProps, StackBarChartProps, HorizontalStackBarChartProps, HorizontalBarChartProps, LineChartProps, SingleValueChartProps, PieChartProps, } from './components/charts';
+export type { BarChartProps, StackBarChartProps, HorizontalStackBarChartProps, HorizontalBarChartProps, LineChartProps, SingleValueChartProps, PieChartProps, TBarChart, TStackBarChart, THorizontalStackBarChart, THorizontalBarChart, TLineChart, TSingleValueChart, TPieChart, } from './components/charts';
 export type { ChartColorTokens } from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/forge-react-types",
-	"version": "0.37.8",
+	"version": "0.37.10",
 	"description": "Component types for Forge UI Kit React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -34,17 +34,17 @@
 		"@atlaskit/empty-state": "^9.0.0",
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/heading": "^5.1.0",
-		"@atlaskit/inline-edit": "^15.0.0",
+		"@atlaskit/inline-edit": "^15.1.0",
 		"@atlaskit/lozenge": "^12.2.0",
 		"@atlaskit/modal-dialog": "^13.0.0",
 		"@atlaskit/popup": "^2.0.0",
 		"@atlaskit/primitives": "^14.1.0",
-		"@atlaskit/progress-bar": "4.0.3",
-		"@atlaskit/progress-tracker": "10.0.2",
+		"@atlaskit/progress-bar": "^4.0.0",
+		"@atlaskit/progress-tracker": "^10.0.0",
 		"@atlaskit/radio": "^8.0.0",
 		"@atlaskit/range": "^9.0.0",
 		"@atlaskit/renderer": "^113.2.0",
-		"@atlaskit/section-message": "^8.0.0",
+		"@atlaskit/section-message": "^8.1.0",
 		"@atlaskit/select": "^20.0.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/tabs": "^18.0.0",
@@ -61,7 +61,7 @@
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
-		"@atlassian/codegen": "^0.1.2",
+		"@atlassian/codegen": "^0.1.0",
 		"@types/node": "~20.16.5",
 		"react": "^18.2.0",
 		"ts-morph": "^17.0.0",

package/src/components/charts/BarChartProps.tsx

@@ -1,22 +1,120 @@
 import type { ChartColorTokens } from '../../types';
 
 export type BarChartProps = {
+	/**
+	 * The static width of the chart in pixels. If this is not specified, the width is responsive.
+	 */
 	width?: number;
+	/**
+	 * The static height of the chart in pixels. Defaults to `400`.
+	 */
 	height?: number;
+	/**
+	 * Data can be one of two formats:
+	 * 1. An [array of arrays](https://developer.atlassian.com/platform/forge/ui-kit/components/bar-chart/#1--array-of-arrays).
+	 * 2. An [array of objects](https://developer.atlassian.com/platform/forge/ui-kit/components/bar-chart/#2--array-of-objects).
+	 */
 	data: unknown[];
+	/**
+	 * Boolean to display the chart border. Defaults to `false`.
+	 */
 	showBorder?: boolean;
+	/**
+	 * Accessor to define the x-axis values. This can be a numerical or string index.
+	 * For more information on all accessors, see [Data](https://developer.atlassian.com/platform/forge/ui-kit/components/bar-chart/#data).
+	 */
 	xAccessor: number | string;
+	/**
+	 * Accessor to define the y-axis values.
+	 */
 	yAccessor: number | string;
+	/**
+	 * Accessor to define the color grouping.
+	 */
 	colorAccessor?: number | string;
+	/**
+	 * A string value that represents the title of the chart.
+	 */
 	title?: string;
+	/**
+	 * A string value that represents the subtitle of the chart. This appears below the title.
+	 */
 	subtitle?: string;
+	/**
+	 * An array of [chart color tokens](https://atlassian.design/components/tokens/all-tokens#color-chart).
+	 * This is utilized to render each bar with the specified colors, based on the color grouping given by colorAccessor.
+	 */
 	colors?: ChartColorTokens[];
 };
 
 type StackChartProps = BarChartProps & {
+	/**
+	 * Accessor to define the color grouping.
+	 */
 	colorAccessor: number | string;
 };
 
-export type HorizontalBarChartProps = BarChartProps;
-export type StackBarChartProps = StackChartProps;
-export type HorizontalStackBarChartProps = StackChartProps;
+export type HorizontalBarChartProps = BarChartProps & {
+	/**
+	 * Data can be one of two formats:
+	 * 1. An [array of arrays](https://developer.atlassian.com/platform/forge/ui-kit/components/horizontal-bar-chart/#1--array-of-arrays).
+	 * 2. An [array of objects](https://developer.atlassian.com/platform/forge/ui-kit/components/horizontal-bar-chart/#2--array-of-objects).
+	 */
+	data: unknown[];
+
+	/**
+	 * Accessor to define the x-axis values. This can be a numerical or string index.
+	 * For more information on all accessors, see [Data](https://developer.atlassian.com/platform/forge/ui-kit/components/horizontal-bar-chart/#data).
+	 */
+	xAccessor: number | string;
+};
+
+export type StackBarChartProps = StackChartProps & {
+	/**
+	 * Data can be one of two formats:
+	 * 1. An [array of arrays](https://developer.atlassian.com/platform/forge/ui-kit/components/stack-bar-chart/#1--array-of-arrays).
+	 * 2. An [array of objects](https://developer.atlassian.com/platform/forge/ui-kit/components/stack-bar-chart/#2--array-of-objects).
+	 */
+	data: unknown[];
+
+	/**
+	 * Accessor to define the x-axis values. This can be a numerical or string index.
+	 * For more information on all accessors, see [Data](https://developer.atlassian.com/platform/forge/ui-kit/components/stack-bar-chart/#data).
+	 */
+	xAccessor: number | string;
+};
+
+export type HorizontalStackBarChartProps = StackChartProps & {
+	/**
+	 * Data can be one of two formats:
+	 * 1. An [array of arrays](https://developer.atlassian.com/platform/forge/ui-kit/components/horizontal-stack-bar-chart/#1--array-of-arrays).
+	 * 2. An [array of objects](https://developer.atlassian.com/platform/forge/ui-kit/components/horizontal-stack-bar-chart/#2--array-of-objects).
+	 */
+	data: unknown[];
+
+	/**
+	 * Accessor to define the x-axis values. This can be a numerical or string index.
+	 * For more information on all accessors, see [Data](https://developer.atlassian.com/platform/forge/ui-kit/components/horizontal-stack-bar-chart/#data).
+	 */
+	xAccessor: number | string;
+};
+
+/**
+ * A visual representation of data using rectangular bars of varying heights to compare different categories or values.
+ */
+export type TBarChart<T> = (props: BarChartProps) => T;
+
+/**
+ * A visual representation of data using horizontal rectangular bars of varying lengths to compare different categories or values.
+ */
+export type THorizontalBarChart<T> = (props: HorizontalBarChartProps) => T;
+
+/**
+ * A visual representation of data using rectangular bars of varying heights to demonstrate comparisons between categories of data.
+ */
+export type TStackBarChart<T> = (props: StackBarChartProps) => T;
+
+/**
+ * A visual representation of data using horizontal rectangular bars of varying lengths to demonstrate comparisons between categories of data.
+ */
+export type THorizontalStackBarChart<T> = (props: HorizontalStackBarChartProps) => T;

package/src/components/charts/LineChartProps.tsx

@@ -1,14 +1,50 @@
 import type { ChartColorTokens } from '../../types';
 
 export type LineChartProps = {
+	/**
+	 * The static width of the chart in pixels. If this is not specified, the width is responsive.
+	 */
 	width?: number;
+	/**
+	 * The static height of the chart in pixels. Defaults to `400`.
+	 */
 	height?: number;
+	/**
+	 * Data can be one of two formats:
+	 * 1. An [array of arrays](https://developer.atlassian.com/platform/forge/ui-kit/components/line-chart/#1--array-of-arrays).
+	 * 2. An [array of objects](https://developer.atlassian.com/platform/forge/ui-kit/components/line-chart/#2--array-of-objects).
+	 */
 	data: unknown[];
 	showBorder?: boolean;
+	/**
+	 * Accessor to define the x-axis values. This can be a numerical or string index.
+	 * For more information on all accessors, see [Data](https://developer.atlassian.com/platform/forge/ui-kit/components/line-chart/#data).
+	 */
 	xAccessor: number | string;
+	/**
+	 * Accessor to define the y-axis values.
+	 */
 	yAccessor: number | string;
+	/**
+	 * Accessor to define the color grouping.
+	 */
 	colorAccessor?: number | string;
+	/**
+	 * A string value that represents the title of the chart.
+	 */
 	title?: string;
+	/**
+	 * A string value that represents the subtitle of the chart. This appears below the title.
+	 */
 	subtitle?: string;
+	/**
+	 * An array of [chart color tokens](https://atlassian.design/components/tokens/all-tokens#color-chart).
+	 * This is utilized to render each line with the specified colors, based on the color grouping given by colorAccessor.
+	 */
 	colors?: ChartColorTokens[];
 };
+
+/**
+ * A visual representation of data showing trends.
+ */
+export type TLineChart<T> = (props: LineChartProps) => T;

package/src/components/charts/PieChartProps.tsx

@@ -1,16 +1,61 @@
 import type { ChartColorTokens } from '../../types';
 
 export type PieChartProps = {
+	/**
+	 * The static width of the chart in pixels. If this is not specified, the width is responsive.
+	 */
 	width?: number;
+	/**
+	 * The static height of the chart in pixels. Defaults to `400`.
+	 */
 	height?: number;
+	/**
+	 * Data can be one of two formats:
+	 * 1. [Array of arrays](https://developer.atlassian.com/platform/forge/ui-kit/components/pie-chart/#1--array-of-arrays).
+	 * 2. [Array of objects](https://developer.atlassian.com/platform/forge/ui-kit/components/pie-chart/#2--array-of-objects).
+	 */
 	data: unknown[];
+	/**
+	 * Boolean to display the chart border. Defaults to `false`.
+	 */
 	showBorder?: boolean;
+	/**
+	 * Accessor to define the color grouping. This can be a numerical or string index.
+	 * For more information on all accessors, see [Data](https://developer.atlassian.com/platform/forge/ui-kit/components/pie-chart/#data).
+	 */
 	colorAccessor: number | string;
+	/**
+	 * Accessor to define the angle of arcs in a pie.
+	 */
 	valueAccessor: number | string;
+	/**
+	 * Accessor to define the labels.
+	 */
 	labelAccessor: number | string;
+	/**
+	 * A string value that represents the title of the chart.
+	 */
 	title?: string;
+	/**
+	 * A string value that represents the subtitle of the chart. This appears below the title.
+	 */
 	subtitle?: string;
+	/**
+	 * Boolean to render the pie as the donut variation. Defaults to `false`.
+	 */
 	isDonut?: boolean;
+	/**
+	 * Boolean to display labels on top of each slice. Defaults to `false`.
+	 */
 	showMarkLabels?: boolean;
+	/**
+	 * An array of [chart color tokens](https://atlassian.design/components/tokens/all-tokens#color-chart).
+	 * This is utilized to render each slice with the specified colors, based on the color grouping given by colorAccessor.
+	 */
 	colors?: ChartColorTokens[];
 };
+
+/**
+ * A visual representation of data proportions in a circular format.
+ */
+export type TPieChart<T> = (props: PieChartProps) => T;

package/src/components/charts/SingleValueChartProps.tsx

@@ -1,8 +1,34 @@
 export type SingleValueChartProps = {
+	/**
+	 * Data can be one of two formats:
+	 * 1. A **number** - The value that is displayed, abbreviated at the thousand, millions, trillions and billions.
+	 * 2. An **array of numbers**: The first number in the array is used as the display value, the second number in the array is used to calculate the increase/decrease percentage relative to the first number.
+	 */
 	data: number | number[];
+	/**
+	 * The static width of the chart in pixels. If this is not specified, the width is responsive.
+	 */
 	width?: number;
+	/**
+	 * The static height of the chart in pixels. Defaults to `120`.
+	 */
 	height?: number;
+	/**
+	 * Boolean to display the chart border. Defaults to `false`.
+	 */
 	showBorder?: boolean;
+	/**
+	 * A string value that represents the title of the chart.
+	 */
 	title?: string;
+	/**
+	 * A string value that represents the subtitle of the chart. This appears below the metric value.
+	 */
 	subtitle?: string;
 };
+
+/**
+ * A visualization representation of information with a single value as its metrics.
+ * The metric can be displayed with a increase/decrease indicator to display trends or changes over time.
+ */
+export type TSingleValueChart<T> = (props: SingleValueChartProps) => T;

package/src/components/charts/index.ts

@@ -3,8 +3,12 @@ export type {
 	StackBarChartProps,
 	HorizontalStackBarChartProps,
 	HorizontalBarChartProps,
+	TBarChart,
+	TStackBarChart,
+	THorizontalStackBarChart,
+	THorizontalBarChart,
 } from './BarChartProps';
 
-export type { LineChartProps } from './LineChartProps';
-export type { SingleValueChartProps } from './SingleValueChartProps';
-export type { PieChartProps } from './PieChartProps';
+export type { LineChartProps, TLineChart } from './LineChartProps';
+export type { SingleValueChartProps, TSingleValueChart } from './SingleValueChartProps';
+export type { PieChartProps, TPieChart } from './PieChartProps';

package/src/index.ts

@@ -133,6 +133,13 @@ export type {
 	LineChartProps,
 	SingleValueChartProps,
 	PieChartProps,
+	TBarChart,
+	TStackBarChart,
+	THorizontalStackBarChart,
+	THorizontalBarChart,
+	TLineChart,
+	TSingleValueChart,
+	TPieChart,
 } from './components/charts';
 
 export type { ChartColorTokens } from './types';