@forge/react 11.0.1-next.0 → 11.1.0-next.2

package/out/components/ui-kit-components.js

@@ -1,66 +1,354 @@
 "use strict";
+// This file is partially generated by the `yarn run add-component-jsdoc` command (also the prebuild script in the package.json).
+// The manual step involved is to:
+//   1. import the new component type from the forge-react-types package, e.g. `TBadge`
+//   2. add the export statement for the new component, e.g. `export const Badge = 'Badge' as unknown as TBadge<ForgeElement>;`
+//   3. either run the `yarn run add-component-jsdoc` command or manually add the JSDoc comment for the new component
+//      or the build process will automatically add the JSDoc comment during `bolt build`
+// For more information, please see: https://hello.atlassian.net/wiki/x/SI2n0w?atlOrigin=eyJpIjoiYjJhOTliZmZmYWE1NDE5ZjgzOWU1Y2ViZWI3Yjk3NTMiLCJwIjoiYyJ9
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabList = exports.Tab = exports.StackBarChart = exports.Stack = exports.Spinner = exports.SingleValueChart = exports.SectionMessageAction = exports.SectionMessage = exports.Select = exports.Range = exports.RadioGroup = exports.Radio = exports.ProgressTracker = exports.ProgressBar = exports.PieChart = exports.ModalTransition = exports.ModalTitle = exports.ModalHeader = exports.ModalFooter = exports.ModalBody = exports.Modal = exports.Lozenge = exports.LoadingButton = exports.ListItem = exports.List = exports.LinkButton = exports.LineChart = exports.Label = exports.Inline = exports.Icon = exports.HorizontalStackBarChart = exports.HorizontalBarChart = exports.HelperMessage = exports.Heading = exports.FormSection = exports.FormHeader = exports.FormFooter = exports.Form = exports.ErrorMessage = exports.EmptyState = exports.DatePicker = exports.CodeBlock = exports.Code = exports.Checkbox = exports.Calendar = exports.ButtonGroup = exports.Button = exports.Box = exports.BarChart = exports.Badge = void 0;
-exports.RequiredAsterisk = exports.ValidMessage = exports.Tooltip = exports.Toggle = exports.TimePicker = exports.Textfield = exports.TextArea = exports.TagGroup = exports.Tag = exports.Tabs = exports.TabPanel = void 0;
+exports.RequiredAsterisk = exports.ValidMessage = exports.Text = exports.Tooltip = exports.Toggle = exports.TimePicker = exports.Textfield = exports.TextArea = exports.TagGroup = exports.Tag = exports.Tabs = exports.TabPanel = void 0;
+/**
+ * A badge is a visual indicator for numeric values such as tallies and scores.
+ *
+ * @see [Badge](https://developer.atlassian.com/platform/forge/ui-kit/components/badge/) in UI Kit documentation for more information
+ */
 exports.Badge = 'Badge';
+/** A visual representation of data using rectangular bars of varying heights to compare different categories or values. */
 exports.BarChart = 'BarChart';
+/**
+ * A box is a generic container that provides managed access to design tokens.
+ *
+ * @see [Box](https://developer.atlassian.com/platform/forge/ui-kit/components/box/) in UI Kit documentation for more information
+ */
 exports.Box = 'Box';
+/**
+ * A button triggers an event or action. They let users know what will happen next.
+ *
+ * @see [Button](https://developer.atlassian.com/platform/forge/ui-kit/components/button/) in UI Kit documentation for more information
+ */
 exports.Button = 'Button';
+/**
+ * A button group gives users access to frequently performed, related actions.
+ *
+ * @see [ButtonGroup](https://developer.atlassian.com/platform/forge/ui-kit/components/button-group/) in UI Kit documentation for more information
+ */
 exports.ButtonGroup = 'ButtonGroup';
+/**
+ * An interactive calendar for date selection experiences.
+ *
+ * @see [Calendar](https://developer.atlassian.com/platform/forge/ui-kit/components/calendar/) in UI Kit documentation for more information
+ */
 exports.Calendar = 'Calendar';
+/**
+ * A checkbox is an input control that allows a user to select one or more options from a number of choices.
+ *
+ * @see [Checkbox](https://developer.atlassian.com/platform/forge/ui-kit/components/checkbox/) in UI Kit documentation for more information
+ */
 exports.Checkbox = 'Checkbox';
+/**
+ * Code highlights short strings of code snippets inline with body text.
+ *
+ * @see [Code](https://developer.atlassian.com/platform/forge/ui-kit/components/code/) in UI Kit documentation for more information
+ */
 exports.Code = 'Code';
+/**
+ * Code highlights short strings of code snippets inline with body text.
+ *
+ * @see [CodeBlock](https://developer.atlassian.com/platform/forge/ui-kit/components/code-block/) in UI Kit documentation for more information
+ */
 exports.CodeBlock = 'CodeBlock';
+/**
+ * A date picker allows the user to select a particular date.
+ *
+ * @see [DatePicker](https://developer.atlassian.com/platform/forge/ui-kit/components/date-picker/) in UI Kit documentation for more information
+ */
 exports.DatePicker = 'DatePicker';
+/**
+ * An empty state appears when there is no data to display and describes what the user can do next.
+ *
+ * @see [EmptyState](https://developer.atlassian.com/platform/forge/ui-kit/components/empty-state/) in UI Kit documentation for more information
+ */
 exports.EmptyState = 'EmptyState';
+/**
+ * An error message is used to tell a user that the field input is invalid.
+ * For example, an error message could be "Invalid username, needs to be more than 4 characters".
+ *
+ * @see [ErrorMessage](https://developer.atlassian.com/platform/forge/ui-kit/components/form/#error-message) in UI Kit documentation for more information
+ */
 exports.ErrorMessage = 'ErrorMessage';
+/**
+ * A form allows users to input information.
+ *
+ * @see [Form](https://developer.atlassian.com/platform/forge/ui-kit/components/form/) in UI Kit documentation for more information
+ */
 exports.Form = 'Form';
+/**
+ * Use a form footer to set the content at the end of the form. This is used for a button that submits the form.
+ *
+ * This is positioned after the last field in the form.
+ *
+ * @see [FormFooter](https://developer.atlassian.com/platform/forge/ui-kit/components/form/#form-footer) in UI Kit documentation for more information
+ */
 exports.FormFooter = 'FormFooter';
+/**
+ * Use a form header to describe the contents of the form. This is the title and description of the form.
+ * If your form contains required fields, the form header is also where you should include a legend
+ * for sighted users to know that * indicates a required field.
+ *
+ * @see [FormHeader](https://developer.atlassian.com/platform/forge/ui-kit/components/form/#form-header) in UI Kit documentation for more information
+ */
 exports.FormHeader = 'FormHeader';
+/**
+ * Use a form section to group related information together, so that longer forms are easier to understand.
+ * There can be multiple form sections in one form.
+ *
+ * @see [FormSection](https://developer.atlassian.com/platform/forge/ui-kit/components/form/#form-section) in UI Kit documentation for more information
+ */
 exports.FormSection = 'FormSection';
+/**
+ * A heading is a typography component used to display text in different sizes and formats.
+ *
+ * @see [Heading](https://developer.atlassian.com/platform/forge/ui-kit/components/heading/) in UI Kit documentation for more information
+ */
 exports.Heading = 'Heading';
+/**
+ * A helper message tells the user what kind of input the field takes.
+ * For example, a helper message could be "Password should be more than 4 characters".
+ *
+ * @see [HelperMessage](https://developer.atlassian.com/platform/forge/ui-kit/components/form/#helper-message) in UI Kit documentation for more information
+ */
 exports.HelperMessage = 'HelperMessage';
+/** A visual representation of data using horizontal rectangular bars of varying lengths to compare different categories or values. */
 exports.HorizontalBarChart = 'HorizontalBarChart';
+/** A visual representation of data using horizontal rectangular bars of varying lengths to demonstrate comparisons between categories of data. */
 exports.HorizontalStackBarChart = 'HorizontalStackBarChart';
+/**
+ * An icon is a visual representation of a command, device, directory, or common action.
+ *
+ * @see [Icon](https://developer.atlassian.com/platform/forge/ui-kit/components/icon/) in UI Kit documentation for more information
+ */
 exports.Icon = 'Icon';
+/**
+ * An inline manages the horizontal layout of direct children using flexbox.
+ *
+ * @see [Inline](https://developer.atlassian.com/platform/forge/ui-kit/components/inline/) in UI Kit documentation for more information
+ */
 exports.Inline = 'Inline';
+/**
+ * A label represents a caption for an item in a user interface.
+ *
+ * @see [Label](https://developer.atlassian.com/platform/forge/ui-kit/components/form/#label) in UI Kit documentation for more information
+ */
 exports.Label = 'Label';
+/** A visual representation of data showing trends. */
 exports.LineChart = 'LineChart';
+/**
+ * Renders a link in the style of a button.
+ *
+ * @see [LinkButton](https://developer.atlassian.com/platform/forge/ui-kit/components/button/#linkbutton-props) in UI Kit documentation for more information
+ */
 exports.LinkButton = 'LinkButton';
+/**
+ * An unordered (bulleted) or ordered (numbered) list.
+ *
+ * @see [List](https://developer.atlassian.com/platform/forge/ui-kit/components/list/) in UI Kit documentation for more information
+ */
 exports.List = 'List';
 exports.ListItem = 'ListItem';
+/**
+ * A button that shows an spinner as an overlay on the button when you set an isLoading prop to true.
+ *
+ * @see [LoadingButton](https://developer.atlassian.com/platform/forge/ui-kit/components/button/#loadingbutton-props) in UI Kit documentation for more information
+ */
 exports.LoadingButton = 'LoadingButton';
+/**
+ * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
+ *
+ * @see [Lozenge](https://developer.atlassian.com/platform/forge/ui-kit/components/lozenge/) in UI Kit documentation for more information
+ */
 exports.Lozenge = 'Lozenge';
+/**
+ * A modal dialog displays content that requires user interaction, in a layer above the page.
+ *
+ * @see [Modal](https://developer.atlassian.com/platform/forge/ui-kit/components/modal/) in UI Kit documentation for more information
+ */
 exports.Modal = 'Modal';
+/**
+ * A modal body is used to display the main content of a modal.
+ *
+ * @see [ModalBody](https://developer.atlassian.com/platform/forge/ui-kit/components/modal/#body) in UI Kit documentation for more information
+ */
 exports.ModalBody = 'ModalBody';
+/**
+ * A modal footer often contains a primary action and the ability to cancel and close the dialog,
+ * though can contain any React element.
+ *
+ * @see [ModalFooter](https://developer.atlassian.com/platform/forge/ui-kit/components/modal/#footer) in UI Kit documentation for more information
+ */
 exports.ModalFooter = 'ModalFooter';
+/**
+ * A modal header contains the title of the modal and can contain other React elements such as a close button.
+ *
+ * @see [ModalHeader](https://developer.atlassian.com/platform/forge/ui-kit/components/modal/#header) in UI Kit documentation for more information
+ */
 exports.ModalHeader = 'ModalHeader';
+/**
+ * A modal title is used to display a title within a modal.
+ *
+ * @see [ModalTitle](https://developer.atlassian.com/platform/forge/ui-kit/components/modal/#title) in UI Kit documentation for more information
+ */
 exports.ModalTitle = 'ModalTitle';
+/**
+ * A modal transition wraps a modal to provide a fluid transition upon opening and closing.
+ *
+ * @see [ModalTransition](https://developer.atlassian.com/platform/forge/ui-kit/components/modal/#modal-transition) in UI Kit documentation for more information
+ */
 exports.ModalTransition = 'ModalTransition';
+/** A visual representation of data proportions in a circular format. */
 exports.PieChart = 'PieChart';
+/**
+ * A progress bar communicates the status of a system process.
+ *
+ * @see [ProgressBar](https://developer.atlassian.com/platform/forge/ui-kit/components/progress-bar/) in UI Kit documentation for more information
+ */
 exports.ProgressBar = 'ProgressBar';
+/**
+ * A progress tracker displays the steps and progress through a journey.
+ *
+ * @see [ProgressTracker](https://developer.atlassian.com/platform/forge/ui-kit/components/progress-tracker/) in UI Kit documentation for more information
+ */
 exports.ProgressTracker = 'ProgressTracker';
+/**
+ * A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.
+ *
+ * @see [Radio](https://developer.atlassian.com/platform/forge/ui-kit/components/radio/) in UI Kit documentation for more information
+ */
 exports.Radio = 'Radio';
+/**
+ * A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.
+ *
+ * @see [RadioGroup](https://developer.atlassian.com/platform/forge/ui-kit/components/radio-group/) in UI Kit documentation for more information
+ */
 exports.RadioGroup = 'RadioGroup';
+/**
+ * A range lets users choose an approximate value on a slider.
+ *
+ * @see [Range](https://developer.atlassian.com/platform/forge/ui-kit/components/range/) in UI Kit documentation for more information
+ */
 exports.Range = 'Range';
+/**
+ * Select allows users to make a single selection or multiple selections from a list of options.
+ *
+ * @see [Select](https://developer.atlassian.com/platform/forge/ui-kit/components/select/) in UI Kit documentation for more information
+ */
 exports.Select = 'Select';
+/**
+ * A section message is used to alert users to a particular section of the screen.
+ *
+ * @see [SectionMessage](https://developer.atlassian.com/platform/forge/ui-kit/components/section-message/) in UI Kit documentation for more information
+ */
 exports.SectionMessage = 'SectionMessage';
+/**
+ * A section message is used to alert users to a particular section of the screen.
+ *
+ * @see [SectionMessageAction](https://developer.atlassian.com/platform/forge/ui-kit/components/section-message/#section-message-action) in UI Kit documentation for more information
+ */
 exports.SectionMessageAction = 'SectionMessageAction';
+/**
+ * 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.
+ */
 exports.SingleValueChart = 'SingleValueChart';
+/**
+ * A spinner is an animated spinning icon that lets users know content is being loaded.
+ *
+ * @see [Spinner](https://developer.atlassian.com/platform/forge/ui-kit/components/spinner/) in UI Kit documentation for more information
+ */
 exports.Spinner = 'Spinner';
+/**
+ * A stack manages the vertical layout of direct children using flexbox.
+ *
+ * @see [Stack](https://developer.atlassian.com/platform/forge/ui-kit/components/stack/) in UI Kit documentation for more information
+ */
 exports.Stack = 'Stack';
+/** A visual representation of data using rectangular bars of varying heights to demonstrate comparisons between categories of data. */
 exports.StackBarChart = 'StackBarChart';
+/**
+ * `Tab` represents an individual tab displayed in a TabList.
+ *
+ * @see [Tab](https://developer.atlassian.com/platform/forge/ui-kit/components/tabs/) in UI Kit documentation for more information
+ */
 exports.Tab = 'Tab';
+/**
+ * A `TabList` groups `Tab` components together.
+ *
+ * @see [TabList](https://developer.atlassian.com/platform/forge/ui-kit/components/tab-list/) in UI Kit documentation for more information
+ */
 exports.TabList = 'TabList';
+/**
+ * A `TabPanel` houses the contents of a `Tab`.
+ *
+ * @see [TabPanel](https://developer.atlassian.com/platform/forge/ui-kit/components/tabs/) in UI Kit documentation for more information
+ */
 exports.TabPanel = 'TabPanel';
+/**
+ * Tabs are used to organize content by grouping similar information on the same page.
+ *
+ * @see [Tabs](https://developer.atlassian.com/platform/forge/ui-kit/components/tabs/) in UI Kit documentation for more information
+ */
 exports.Tabs = 'Tabs';
 exports.Tag = 'Tag';
+/**
+ * A tag group controls the layout and alignment for a collection of tags.
+ *
+ * @see [TagGroup](https://developer.atlassian.com/platform/forge/ui-kit/components/tag-group/) in UI Kit documentation for more information
+ */
 exports.TagGroup = 'TagGroup';
+/**
+ * A text area lets users enter long form text which spans over multiple lines.
+ *
+ * @see [TextArea](https://developer.atlassian.com/platform/forge/ui-kit/components/text-area/) in UI Kit documentation for more information
+ */
 exports.TextArea = 'TextArea';
+/**
+ * A text field is an input that allows a user to write or edit text.
+ *
+ * @see [Textfield](https://developer.atlassian.com/platform/forge/ui-kit/components/textfield/) in UI Kit documentation for more information
+ */
 exports.Textfield = 'Textfield';
+/**
+ * A time picker allows the user to select a specific time.
+ *
+ * @see [TimePicker](https://developer.atlassian.com/platform/forge/ui-kit/components/time-picker/) in UI Kit documentation for more information
+ */
 exports.TimePicker = 'TimePicker';
+/**
+ * A toggle is used to view or switch between enabled or disabled states.
+ *
+ * @see [Toggle](https://developer.atlassian.com/platform/forge/ui-kit/components/toggle/) in UI Kit documentation for more information
+ */
 exports.Toggle = 'Toggle';
+/**
+ * A `Tooltip` is a floating, non-actionable label used to explain a user interface element or feature.
+ *
+ * @see [Tooltip](https://developer.atlassian.com/platform/forge/ui-kit/components/tooltip/) in UI Kit documentation for more information
+ */
 exports.Tooltip = 'Tooltip';
+/**
+ * A typography component used to display body text.
+ * It can also include inline components such as
+ * [Badge](https://developer.atlassian.com/platform/forge/ui-kit/components/badge/) and
+ * [Lozenge](https://developer.atlassian.com/platform/forge/ui-kit/components/lozenge/).
+ */
+exports.Text = 'Text';
+/**
+ * A valid message is used to tell a user that the field input is valid.
+ * For example, a helper message could be "Nice one, this username is available".
+ *
+ * @see [ValidMessage](https://developer.atlassian.com/platform/forge/ui-kit/components/form/#validation-message) in UI Kit documentation for more information
+ */
 exports.ValidMessage = 'ValidMessage';
 // Additional components without props
 exports.RequiredAsterisk = 'RequiredAsterisk';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forge/react",
-  "version": "11.0.1-next.0",
+  "version": "11.1.0-next.2",
   "description": "Forge React reconciler",
   "author": "Atlassian",
   "license": "SEE LICENSE IN LICENSE.txt",
@@ -8,9 +8,11 @@
   "types": "out/index.d.ts",
   "scripts": {
     "build": "yarn run clean && yarn run compile",
+    "prebuild": "yarn run add-component-jsdoc",
     "clean": "rm -rf ./out && rm -f tsconfig.tsbuildinfo",
     "compile": "tsc -p tsconfig.json",
-    "pack": "./build/bundle-types.sh"
+    "pack": "./build/bundle-types.sh",
+    "add-component-jsdoc": "ts-node ./build/add-component-jsdoc.ts"
   },
   "exports": {
     ".": "./out/index.js",
@@ -19,7 +21,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^46.0.0",
     "@atlaskit/adf-utils": "^19.12.0",
-    "@atlaskit/forge-react-types": "^0.35.12",
+    "@atlaskit/forge-react-types": "^0.37.13",
     "@forge/bridge": "^4.5.0",
     "@forge/i18n": "0.0.4",
     "@types/react-reconciler": "^0.28.8",
@@ -31,7 +33,9 @@
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@testing-library/react-hooks": "^8.0.1"
+    "@testing-library/react-hooks": "^8.0.1",
+    "ts-morph": "^22.0.0",
+    "ts-node": "^10.9.2"
   },
   "publishConfig": {
     "registry": "https://packages.atlassian.com/api/npm/npm-public/"