cards-jsx

JSX for Google Cards

The purpose of this library is to use JSX to render google cards for Google Chat Apps or Google Workspace Add-ons. Although at this time, I'm only focusing on Google Chat Apps elements.

So, instead of doing this:

{
  "cardsV2": [
    {
      "card": {
        "header": {
          "title": "Hello world"
        },
        "sections": [
          {
            "header": "Another header",
            "widgets": [
              {
                "selectionInput": {
                  "name": "test",
                  "label": "test",
                  "type": "DROPDOWN",
                  "onChangeAction": {
                    "function": "test",
                    "parameters": [
                      {
                        "key": "test",
                        "value": "otherTest"
                      }
                    ]
                  },
                  "items": [
                    {
                      "text": "Test"
                    }
                  ]
                }
              },
              {
                "textParagraph": {
                  "text": "This is text that will show up in the widget"
                }
              }
            ]
          }
        ]
      }
    }
  ]
}

You can do this:

function render(){
  return (
    <cards version="2">
      <card>
        <card-header title="Hello world" />
        <sections>
          <section
            collapsible={false}
            uncollapsibleWidgetsCount={0}
            header="Another header"
          >
            <widgets>
              <widget>
                <selection-input
                  name="test"
                  label="test"
                  type="DROPDOWN"
                >
                  <action func="test">
                    <parameters>
                      <parameter key="test" value="otherTest"/>
                    </parameters>
                  </action>
                  <options>
                    <option>
                      Test
                    </option>
                  </options>
                </selection-input>
              </widget>
            </widgets>
          </section>
        </sections>
      </card>
    </cards>
  );
}

This does allow for your typical components that you might see on other frameworks that use JSX (like React)

function Card({ title, subtitle, children }){
  return (
    <cards version="2">
      <card>
        <card-header title={title}>
        <sections>
          <section header={subtitle}>
            <widgets>
              {children}
            </widgets>
          </section>
        </sections>
      </card>
    </cards>
  );
}

function render(){
  return (
    <Card title="myTitle" subtitle="Section title here">
       <widget>
         <selection-input
           name="test"
           label="test"
           type="DROPDOWN"
         >
           <action func="test">
             <parameters>
               <parameter key="test" value="otherTest"/>
             </parameters>
           </action>
           <options>
             <option>
               Test
             </option>
           </options>
         </selection-input>
       </widget>
    </Card>
  );
}

How to use?

Since this is not supported by JS, you'll need to use a compiler that supports JSX. Most will allow you to configure which JSX library you'd like to use. You'll need to check documentation on whatever compiler/transpiler you wish to use.

This library exports a default function which is used on each JSX call. Most compilers will auto import the JSX library but if that's not possible you can import this function and it should be picked up:

import jsx from "cards-jsx";

You'll still need to configure your compiler/transpiler to use jsx instead of React (which is most likely the default in most cases).

As to which "elements" map to what on the JSON. If the value you are looking at the documentation is a primitive value (number, boolean, string) you can add it as a prop of that "element". If it's however an object or it has its own type interface then there's probably an "element" on its dash-case form. E.g. "SelectionInput" can be found as "selectin-input".

There are some special cases in which the norm is not followed and I'll be sure to document those things as soon as I get some time on it.

This is still a WIP

It's still very early on and not all components have been added to the library. This can work with Google Workspace Add-Ons since they use the same API however I've been actively avoiding adding components that are exclusive to Google Workspace Add-Ons since I'm just starting to use this for Google Chat Apps.