Is it currently recommended to use the @grafana/ui components to develop a plugin?

Grafana Plugin Development
1

I need to create a typeahead search for a custom plugin but hit a couple of snags. First I found a Typeahead component but it seems it cannot be used as it is not exported. I then thought I would create my own using an <Input/> as a base. However, in the storybook there is an example that uses an icon for a prefix, but when I try I get the following error:

TS2769: No overload matches this call.
    Overload 1 of 2, '(props: Readonly<Props>): Input', gave the following error.
      Type 'Element' is not assignable to type 'string'.
    Overload 2 of 2, '(props: Props, context?: any): Input', gave the following error.
      Type 'Element' is not assignable to type 'string'.

This was just the first element I tried - my question is if they are really ready to use yet, or would I better be off using a different component library?

2

Yes it ready (beta in a few weeks)

You have to show your code so we i can ser why your getting your error

3

Thanks Torkel.

Here is my code:

import React from 'react';

import { Input, Icon } from '@grafana/ui';

const Search = () => {

return <Input prefix={<Icon name="search" />} />;

};

export default Search;

This is the code in storybook:

Screenshot 2020-04-20 at 09.59.20
Screenshot 2020-04-20 at 09.59.20618×581 21.8 KB

This is the error:

TS2769: No overload matches this call.
    Overload 1 of 2, '(props: Readonly<Props>): Input', gave the following error.
      Type 'Element' is not assignable to type 'string'.
    Overload 2 of 2, '(props: Props, context?: any): Input', gave the following error.
      Type 'Element' is not assignable to type 'string'.
4

Just an FYI, the alpha storybook docs are publicly available here: https://developers.grafana.com/ui/canary/

5

Thanks @daniellee

The only reason I can think of that your storybooks allow an element to be used for a prefix, but throw an error for me, is there is a difference in the version of @grafana/ui being used.

Please can you confirm which version of @grafana/ui needs to be installed.

6

This is tricky to answer. You are on the bleeding edge right now. The canary version is “recommended” for this week but we are working on it right now so you might get affected by some breaking changes. We are releasing a beta on the 28th and then the version next would be recommended to get some more stability. After the official release of Grafana 7.0 on the 18th of May then the version latest is recommended - then it is no longer in alpha/beta.

7

OK, thanks very much for the info - I’ll hold off for the moment then.