# @shop3/polaris-strapi

> Collection of Polaris components ready to use with Strapi in Shopify applications.

Latest version **0.1.3** (published 2022-11-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @shop3/polaris-strapi
pnpm add @shop3/polaris-strapi
yarn add @shop3/polaris-strapi
bun add @shop3/polaris-strapi
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2022-11-09 |
| First published | 2022-11-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 67.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Shop3 |
| Maintainers | j4m3sb0mb |

## Links

- npm: https://www.npmjs.com/package/@shop3/polaris-strapi
- Repository: https://github.com/shop3/polaris-strapi
- Homepage: http://shop3.github.io/polaris-strapi
- Issues: https://github.com/shop3/polaris-strapi/issues
- npm.io page: https://npm.io/package/@shop3/polaris-strapi

## Recent versions

- 0.1.3 (latest) — 2022-11-09
- 0.1.2 — 2022-11-09
- 0.1.1 — 2022-11-09
- 0.1.0 — 2022-11-08

## README

# Shop3 Polaris Strapi

Collection of Polaris components ready to use with Strapi in Shopify applications.

## Installation

```bash
npm install --save @shop3/polaris-strapi
```

## Storybook

Components are documented in Storybook at https://shop3.github.io/polaris-strapi/

# Usage

## Strapi Edit

```jsx
import { Card } from '@shopify/polaris';
import { StrapiEdit } from '@shop3/polaris-strapi';

const App = () => {
  return (
    <Card sectioned>
      <StrapiEdit
        formId="strapi-edit-form"
        resourceUrl='/api/greetings'
        method="POST"
        authToken={/* api auth token */}
      >
        {/* text input */}
        <StrapiTextInput label="From" field="from" maxLength={64} />
        {/* text input */}
        <StrapiTextInput label="Message" field="message" maxLength={128} count />
        {/* number input */}
        <StrapiNumberInput label="Quantity" field="quantity" />
        {/* media input */}
        <StrapiMediaInput label="Image" field="image" mediaType="image" />
        {/* enum input */}
        <StrapiEnumInput
          label="Color"
          field="color"
          options={[
            { label: 'Red', value: 'RED' },
            { label: 'Green', value: 'GREEN' },
            { label: 'Blue', value: 'BLUE' },
          ]}
        />
      </StrapiEdit>
    </Card>
  );
};
```

## Strapi List

```jsx
import { TextContainer } from '@shopify/polaris';
import { StrapiList, StrapiListFilter, StrapiListItem, StrapiListText } from '@shop3/polaris-strapi';

const App = () => {
  return (
    <StrapiList
      resourceUrl='/api/greetings'
      authToken={/* api auth token */}
      sorting={{
        default: { field: 'id', order: 'asc' },
        options: [
          { label: 'From ASC', field: 'from', order: 'asc' },
          { label: 'From DESC', field: 'from', order: 'desc' },
        ],
      }}
      initialPagination={{
        pageSize: 5,
      }}
      filter={
        <StrapiListFilter
          search
          options={[
            {
              label: 'From',
              field: 'from',
              type: 'string',
            },
          ]}
        />
      }
    >
      <StrapiListItem resourceUrl="/api/greetings" nameField="from" mediaField="image">
        <TextContainer>
          <StrapiListText textField="title" variation="strong" />
          <StrapiListText textField="message" />
        </TextContainer>
      </StrapiListItem>
    </StrapiList>
  );
};
```

## Strapi Show

```jsx
import { Card, Layout } from '@shopify/polaris';
import { StrapiShowPage, StrapiShowText } from '@shop3/polaris-strapi';

const App = () => {
  return (
    <StrapiShowPage
      resourceUrl='/api/greetings/1'
      authToken={/* api auth token */}
      titleField="from"
      mediaField="image"
    >
      <Layout>
        <Layout.Section oneThird>
          <StrapiShowImage resourceUrl="/api/greetings/1" field="image" size="large" authToken={/* api auth token */} />
        </Layout.Section>
        <Layout.Section>
          <Card sectioned>
            <StrapiShowText resourceUrl="/api/greetings/1" field="message" authToken={/* api auth token */} />
          </Card>
        </Layout.Section>
      </Layout>
    </StrapiShowPage>
  );
};
```

# Development

## Installation

```bash
npm install

npm run husky:install
```

## Development

```bash
npm run develop
```

---
_Source: https://npm.io/package/@shop3/polaris-strapi · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._