# @planningcenter/tapestry

`@planningcenter/tapestry` is a library developed to provide tools to aid in designing Planning Center apps.

## Installation

```bash
yarn add @planningcenter/tapestry
```

## Registering Web Components

- To register the web components for usage, add this file to your JS files:

`import "@planningcenter/tapestry"`

## Adding types for using Web Components in React

If you are using Web Components in React and want to have TypeScript populate the types,
add `"@planningcenter/tapestry/react-types"` to `compilerOptions.types` in your tsconfig:

```json
{
  "compilerOptions": {
    "types": ["@planningcenter/tapestry/react-types"]
  }
}
```

## Running locally

1. If this is your first time with this repo, make sure you build from the root directory first:
   ```shell
   yarn wc build
   ```
2. In this repo, launch storybook
   ```shell
   yarn tap storybook
   ```