Shop3 Polaris Strapi

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

Installation

npm install --save @shop3/polaris-strapi

Storybook

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

Usage

Strapi Edit

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

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

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

npm install

npm run husky:install

Development

npm run develop