Syntax lookup widget

[ryyppy]

We recently found this really neat widget for discovering JS operators, and we think this is a really great way to look for dedicated syntax constructs as well.

Some rough implementation details on how this widget could be built:

We'd create a SyntaxWidget component, that will import some arbitrary markdown files as React components, and put them in an array of items.

type mdxComponent = Js.t({..}) => React.element
@module("./syntax-widget/decorator-module.mdx") external decoratorModule: mdxComponent = "default"

type item = {
  keywords: array<string>,
  summary: string,
  component: mdxComponent
}

let items = [
  keywords: ["bs.module", "module"],
  component: decoratorModule
];

let make = () => {
  // use state to fuzzy find through the keywords and get the right `component` item
   let component = findMatches(items);


   <div>
    <input type_="text" />
    <div>
        { component(Js.Obj.empty()) }        
    </div>
   </div>
 }

In our markdown file (probably within the pages/docs/manual/latest folder), we'd use our new component like this:

import { make as SyntaxWidget } from "components/SyntaxWidget"

<SyntaxWidget />

Remarks

With this implementation we are pretty flexible with editing the content in a separate syntax folder which could also act as our syntax spec documentation.

In case we need to be flexible with the styling, we could wrap the SyntaxWidget with a MdxProvider with custom a custom components prop.

[amiralies]

This is really interesting.

[ryyppy]

I'll close this in favor of #162

The implementation of the syntax widget is good. The rest of the work is writing the copy.