eslint-plugin-tapestry

ESLint plugin for Tapestry components to encourage best practices and accessibility.

This plugin only tests components provided by Tapestry; it will ignore native HTML elements, Tapestry-React, etc.

Installation

yarn add @planningcenter/eslint-plugin-tapestry --dev

Configuration

Recommended Configuration

Flat Config

import tapestry from "@planningcenter/eslint-plugin-tapestry"

export default [tapestry.configs.recommended]

Legacy Config

"plugins": [
  "tapestry"
],
...
{
  "extends": ["plugin:tapestry/recommended"]
}

ESLint Flat Config (eslint.config.js)

import tapestry from "@planningcenter/eslint-plugin-tapestry"

export default [
  {
    plugins: {
      tapestry,
    },
    rules: {
      "tapestry/valid-href": "error",
    },
  },
]

Legacy Config (.eslintrc.json)

{
  "plugins": ["tapestry"],
  "rules": {
    "tapestry/valid-href": "error"
  }
}

Rules

| Rule | Description | | ------------------------------- | -------------------------------------------------------------------------------------- | | tapestry/valid-href | Ensure BaseLink, Link, and IconLink components have valid href values | | tapestry/design-tokens | Validate that tokens passed to token() and computedToken() are valid design tokens | | tapestry/no-deprecated-tokens | Disallow usage of deprecated design tokens | | tapestry/no-interactive-label | Ensure Tapestry form control label props do not contain interactive elements |

Settings

The token rules (design-tokens and no-deprecated-tokens) track calls to token() and computedToken() imported from @planningcenter/tapestry by default. If your project wraps these functions or re-exports them from a different module, you can configure additional sources and function names via the tapestry settings block.

Flat Config

import tapestry from "@planningcenter/eslint-plugin-tapestry"

export default [
  {
    ...tapestry.configs.recommended,
    settings: {
      tapestry: {
        sources: ["utils/tokens"],
        functions: ["getTapestryToken"],
      },
    },
  },
]

Legacy Config

{
  "plugins": ["tapestry"],
  "extends": ["plugin:tapestry/recommended"],
  "settings": {
    "tapestry": {
      "sources": ["utils/tokens"],
      "functions": ["getTapestryToken"]
    }
  }
}

| Setting | Type | Default | Description | | ----------- | ---------- | ------------------------------ | -------------------------------------------------- | | sources | string[] | ["@planningcenter/tapestry"] | Additional import sources to track for token calls | | functions | string[] | ["token", "computedToken"] | Additional function names to treat as token calls |

The defaults are always included — your configured values are merged in alongside them.

Development

yarn test          # Run tests
yarn test --watch  # Run tests in watch mode

Setup for initial release testing

Tapestry

1. Open a terminal to this repo and run yarn && yalc publish
2. Open a new terminal to Tapestry and create a temp test branch from main
3. Run yalc add @planningcenter/[email protected] --dev
4. In eslint.config.mjs, add or modify

• import tapestry from "@planningcenter/eslint-plugin-tapestry"
• plugins: {tapestry}
• rules: {"tapestry/valid-href": "error"}

6. Restart the ESLint server (cmd + shift + P > ESLint: Restart Eslint Server)
7. Open packages/tapestry/src/components/link/index.stories.tsx and notice that the tapestry-react Link isn't reporting any lint errors (no red squiggle lines)
8. Comment out the Link import and add a line to import { Link } from "@planningcenter/tapestry"
   • You should get red squiggle lines on the Link
   • Test out different variations of href to see the lint errors
9. In your terminal, run yarn lint, notice you'll see tapestry/valid-href errors

Groups

1. Open a terminal to this repo and run yarn && yalc publish
2. Open a new terminal to Groups and create a temp test branch from main
3. Run yalc add @planningcenter/[email protected] --dev
4. In eslint.config.mjs, add or modify

• import tapestry from "@planningcenter/eslint-plugin-tapestry"
• plugins: {tapestry}
• rules: {"tapestry/valid-href": "error"}
• files: ["**/*.ts", "**/*.tsx", "**/*.jsx", "**/*.js"],

6. Restart the ESLint server (cmd + shift + P > ESLint: Restart Eslint Server)
7. Open app/javascript/staff_only/staff_only_nav_links.tsx and notice that the tapestry-react Link isn't reporting any lint errors (no red squiggle lines)
8. Comment out the Link import and add a line to import { Link } from "@planningcenter/tapestry"
   • You should get red squiggle lines on the Link
   • Test out different variations of href to see the lint errors
9. In your terminal, run yarn lint, notice you'll see tapestry/valid-href errors