# Polaris autocomponents (React) 

Polaris autocomponents are a set of components that are styled using Shopify's Polaris design system and are designed to be used in Shopify apps. These components have the base autocomponent props and the Polaris design system overrides.

For more information on the autocomponents, see the [@gadgetinc/react/auto](https://docs.gadget.dev/reference/react/auto) references.

## Installing 

If you _did not_ select the Shopify app type when creating your app, you will need to install Shopify Polaris and set up the Polaris provider and stylesheet in your app.

Install the following dependencies:

```bash
// in install the Polaris library and the latest version of @gadgetinc/react
yarn add @shopify/polaris @shopify/polaris-icons
```

Now import the Polaris provider and required `style.css` file. Add the following imports to the top of your `web/components/App.jsx` file:

```tsx
import { AppProvider } from "@shopify/polaris";
import "@shopify/polaris/build/esm/styles.css";
```

Then replace your `Layout` component in the same file with the following code to make use of the Polaris provider:

```tsx
const Layout = () => {
  const navigate = useNavigate();

  return (
    <AppProvider>
      <Provider api={api} navigate={navigate} auth={window.gadgetConfig.authentication}>
        <Header />
        <div className="app">
          <div className="app-content">
            <div className="main">
              <Outlet />
            </div>
          </div>
        </div>
      </Provider>
    </AppProvider>
  );
};
```

## Usage 

Import Shopify Polaris autocomponents from `@gadgetinc/react/auto/polaris`:

```tsx
import { AutoForm, AutoTable, AutoInput, AutoSubmit } from "@gadgetinc/react/auto/polaris";
```

For example, to use the `AutoForm` component:

```tsx
import { AutoForm, AutoInput, AutoSubmit } from "@gadgetinc/react/auto/polaris";
import { api } from "../api";

export default function () {
  return (
    <AutoForm action={api.widget.create}>
      <AutoInput field="name" />
      <AutoSubmit />
    </AutoForm>
  );
}
```

Input components map 1:1 to the corresponding Polaris input and can accept any parameters that the [Polaris input](https://polaris.shopify.com/components/selection-and-input/text-field?example=text-field-with-value-selected-on-focus) could:

```tsx
() => (
  <AutoForm action={api.widget.create}>
    <AutoStringInput field="name" selectTextOnFocus clearButton />
    <AutoSubmit />
  </AutoForm>
);
```

### Custom action Polaris modal 

To render a custom popup when a user selects an action, create a custom action and use it to show a modal:

```tsx
import { AutoTable } from "@gadgetinc/react/auto/polaris";
import { api } from "../api";
import { Modal, TitleBar, useAppBridge } from "@shopify/app-bridge-react";

export default function () {
  const shopify = useAppBridge();

  return (
    <>
      <AutoTable
        model={api.product}
        actions={[
          {
            label: "Export",
            action: async (records) => {
              // show the modal when the action is clicked
              shopify.modal.show("my-modal");
            },
          },
        ]}
      />
      {/** use the Shopify AppBridge modal component */}
      <Modal id="my-modal">
        <p>Message</p>
        <TitleBar title="My modal">
          <button onClick={() => shopify.modal.hide("my-modal")}>Close</button>
        </TitleBar>
      </Modal>
    </>
  );
}
```

If you want to use AutoComponents within a modal, you should make sure to add the `AppProvider` component from Shopify's Polaris library as a wrapper for the component. Without the app provider, popovers and dropdowns won't render properly.

```tsx
import { AutoTable } from "@gadgetinc/react/auto/polaris";
import { api } from "../api";
import { Modal, TitleBar, useAppBridge } from "@shopify/app-bridge-react";
import { AppProvider, Button } from "@shopify/polaris";

export default function () {
  const shopify = useAppBridge();

  return (
    <>
      <Modal id="my-modal">
        <AppProvider>
          <TitleBar title="My modal">
            <button onClick={() => shopify.modal.hide("my-modal")}>Close</button>
          </TitleBar>
          <AutoTable model={api.product} />
        </AppProvider>
      </Modal>
      <Button onClick={() => shopify.modal.show("my-modal")}>Show modal</Button>
    </>
  );
}
```

For more information on passing input to modals, see Shopify's documentation on [AppBridge modals](https://shopify.dev/docs/api/app-bridge-library/react-components/modal-component#example-using-a-src-url-to-load-content).