@dotdev/sanity-swatch-widget

Sanity Swatch Widget

This package provides a Sanity dashboard widget which imports swatch documents from an ERP endpoint.

Playground example

An example of this action can found in the DotDev Sanity Playground.

• Login using the [e-mail] Google account
• Navigate to the dashboard
• See and interact with the swatch widget

Installation

yarn add @dotdev/sanity-swatch-widget
# or
npm i @dotdev/sanity-swatch-widget --save

Add the plugin to the plugins array in sanity.json.

"plugins": [
  // ...rest of plugins
  "@dotdev/sanity-swatch-widget"
]

If you have not already, append the following to the parts array in sanity.json.

{
  "implements": "part:@sanity/dashboard/config",
  "path": "dashboardConfig.js"
}

Create the file dashboardConfig.js and inlcude the widget like this.

export default {
  widgets: [
    {
      name: "swatches",
      options: {
        remoteEndpoint:
          "https://australia-southeast1-decjuba-dotapparel21-au.cloudfunctions.net/api-swatches",
      },
    },
  ],
};

Implement the following schema for the swatch document.

export default {
  title: "Swatch",
  name: "swatch",
  type: "document",
  fields: [
    {
      title: "Code",
      name: "code",
      type: "string",
      readOnly: true,
    },
    {
      title: "Name",
      name: "name",
      type: "string",
      readOnly: true,
    },
    {
      title: "Colour",
      name: "colour",
      type: "color",
    },
    {
      title: "Remote image URL",
      name: "remoteImageUrl",
      type: "string",
      readOnly: true,
    },
    {
      title: "Image",
      name: "image",
      type: "image",
    },
  ],
  preview: {
    select: {
      title: "code",
    },
    prepare(selection) {
      const { title } = selection;

      return {
        title: title || "Swatch",
      };
    },
  },
};