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 | Category | Description | | -------------------------------------- | ------------- | ----------------------------------------------------------------------------------- | | valid-href | Accessibility | Ensures that BaseLink, Link, and IconLink components have valid href values |

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