Add deprecation notice to legacy UI components (#2388)

Now that JSX is merged, we can deprecate the legacy UI components. I've
added a deprecation notice to all the legacy UI functions.

packages/snaps-sdk/src/ui/components/address.ts

@@ -28,6 +28,8 @@ export type Address = Infer<typeof AddressStruct>;
  * with the `value` property.
  * @param args.value - The address to be rendered.
  * @returns The address node as an object.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
  * const node = address({ value: '0x4bbeeb066ed09b7aed07bf39eee0460dfa261520' });
  * const node = address('0x4bbeeb066ed09b7aed07bf39eee0460dfa261520');

packages/snaps-sdk/src/ui/components/button.ts

@@ -53,6 +53,8 @@ export type Button = Infer<typeof ButtonStruct>;
  * @param args.value - The text content of the node.
  * @param args.name - The optional name of the button.
  * @returns The text node as object.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
  * ```typescript
  * const node = button({  variant: 'primary', text: 'Hello, world!', name: 'myButton' });

packages/snaps-sdk/src/ui/components/copyable.ts

@@ -43,6 +43,8 @@ export type Copyable = Infer<typeof CopyableStruct>;
  * values are only displayed to the user after clicking on the component.
  * Defaults to false.
  * @returns A {@link Copyable} component.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
  * const node = copyable('Hello, world!');
  * const node = copyable({ value: 'Hello, world!' });

packages/snaps-sdk/src/ui/components/divider.ts

@@ -20,6 +20,8 @@ export type Divider = Infer<typeof DividerStruct>;
  * Create a {@link Divider} node.
  *
  * @returns The divider node as object.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
  * const node = divider();
  */

packages/snaps-sdk/src/ui/components/form.ts

@@ -40,6 +40,8 @@ export type Form = Infer<typeof FormStruct>;
  * @param args.children - The child nodes of the form. This can be any valid
  * {@link FormComponent}.
  * @returns The form node as object.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
  * const node = form({
  *  name: 'myForm',

packages/snaps-sdk/src/ui/components/heading.ts

@@ -29,6 +29,8 @@ export type Heading = Infer<typeof HeadingStruct>;
  * with the `value` property.
  * @param args.value - The heading text.
  * @returns The heading node as object.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
  * const node = heading({ value: 'Hello, world!' });
  * const node = heading('Hello, world!');

packages/snaps-sdk/src/ui/components/image.ts

@@ -45,6 +45,8 @@ export type Image = Infer<typeof ImageStruct>;
  * @param args.value - The SVG image to be rendered. Must be a valid SVG string.
  * @returns The image node as object. Other image formats are supported by
  * embedding them as data URLs in the SVG.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
  * const node = image({ value: '<svg />' });
  * const node = image('<svg />');

packages/snaps-sdk/src/ui/components/input.ts

@@ -61,6 +61,8 @@ export type Input = Infer<typeof InputStruct>;
  * @param args.label - An optional input label.
  * @param args.error - An optional error text.
  * @returns The input node as an object.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
  * const node = input('myInput');
  * const node = input('myInput', InputType.Text, 'my placeholder', 'myValue', 'myLabel');

packages/snaps-sdk/src/ui/components/panel.ts

@@ -68,6 +68,8 @@ export type Panel = {
  * @param args.children - The child nodes of the panel. This can be any valid
  * {@link Component}.
  * @returns The panel node as object.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
  * const node = panel({
  *  children: [

packages/snaps-sdk/src/ui/components/row.ts

@@ -53,6 +53,8 @@ export type Row = Infer<typeof RowStruct>;
  * @param args.value - Another component, is currently limited to `image`, `text` and `address`.
  * @param args.variant - An optional variant, either `default`, `warning` or `critical`.
  * @returns The row node as an object.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
  * const node = row({ label: 'Address', value: address('0x4bbeeb066ed09b7aed07bf39eee0460dfa261520') });
  * const node = row({ label: 'Address', value: address('0x4bbeeb066ed09b7aed07bf39eee0460dfa261520'), variant: RowVariant.Warning });

packages/snaps-sdk/src/ui/components/spinner.ts

@@ -21,6 +21,8 @@ export type Spinner = Infer<typeof SpinnerStruct>;
  * Create a {@link Spinner} node.
  *
  * @returns The spinner node as object.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
  * const node = spinner();
  */

packages/snaps-sdk/src/ui/components/text.ts

@@ -41,6 +41,8 @@ export type Text = Infer<typeof TextStruct>;
  * @param args.markdown - An optional flag to enable or disable markdown. This
  * is enabled by default.
  * @returns The text node as object.
+ * @deprecated Snaps component functions are deprecated, in favor of the new JSX
+ * components. This function will be removed in a future release.
  * @example
  * const node = text({ value: 'Hello, world!' });
  * const node = text('Hello, world!');