@planningcenter/tapestry 0.5.0-rc.1 → 0.5.0-rc.3

package/README.md

@@ -0,0 +1,22 @@
+# @planningcenter/tapestry
+
+`@planningcenter/tapestry` is a library developed to provide tools to aid in designing Planning Center apps.
+
+## Installation
+
+```bash
+yarn add @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"]
+  }
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry",
-  "version": "0.5.0-rc.1",
+  "version": "0.5.0-rc.3",
   "type": "module",
   "repository": {
     "type": "git",
@@ -14,16 +14,17 @@
     "build:storybook": "storybook build",
     "build:tokens": "node ./src/tokens/style-dictionary.build.js",
     "storybook": "storybook dev -p 6006",
-    "lint": "eslint .",
     "test": "vitest run",
-    "test:visual": "yarn build:storybook && yarn loki test --reactUri file:./storybook-static"
+    "test:visual": "yarn build:storybook && yarn loki test --reactUri file:./storybook-static",
+    "test:visual:update": "yarn loki update --reactUri file:./storybook-static"
   },
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
   "files": [
-    "dist"
+    "dist",
+    "react-types"
   ],
   "main": "./dist/index.js",
   "exports": {
@@ -72,13 +73,14 @@
     "react-syntax-highlighter": "^15.5.0",
     "rimraf": "^6.0.1",
     "rollup": "^4.22.4",
+    "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-node-externals": "^7.1.3",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-rename-node-modules": "^1.3.1",
     "shadow-dom-testing-library": "^1.11.3",
     "storybook": "^8.2.9",
     "style-dictionary": "^4.2.0",
-    "tapestry-wc": "^0.5.0-rc.1",
+    "tapestry-wc": "^0.5.0-rc.3",
     "typescript": "^5.5.3",
     "vitest": "^3.0.0"
   },
@@ -99,5 +101,5 @@
       }
     }
   },
-  "gitHead": "0af88b5d5a7ef165496e64cc0a25e1aed2d3c8b2"
+  "gitHead": "cbcee9cb3d1b622852c5a695532cf1aaa3c052cc"
 }

package/react-types/index.d.ts

@@ -0,0 +1,69 @@
+import React from 'react'
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+        * The page header displays the title and any additional metadata and navigation.
+        * @example How to use it
+        * ```html
+        * <tds-page-header>
+        * <h1 slot="primary">Title</h1>
+        * <div slot="actions">
+        * <button>Button</button>
+        * </div>
+        * </tds-page-header>
+        * ```
+        * @slot primary - The primary slot is the main content of the page header. It will be displayed prominently. For simple pages, providing a h1 will suffice.
+        * @slot actions - Additional content (typically actions) that complements the primary slot.
+        * @slot navigation - For page header with navigation, this slot is for the nav.
+        * @cssprop --tds-page-header-background-color Background color of the header.
+        * @cssprop --tds-page-header-color Color of any meta text.
+        * @cssprop --tds-page-header-headline Color of the page header h1.
+        * @cssprop --tds-page-header-padding-x Horizontal padding of the header.
+        * @cssprop --tds-page-header-padding-y Vertical padding of the header.
+        */
+      "tds-page-header": {
+        /**
+         * Indicates whether the page header is inactive or not.
+         * When set to true, the page header is visually inactive
+         * @prop {boolean} inactive - Controls the inactive state of the page. Defaults to false.
+         */
+        "inactive"?: boolean
+      } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
+      /**
+        * A container for page header nav.
+        * @slot (default) - Used for instances of tds-page-header-nav-item
+        */
+      "tds-page-header-nav": {
+      } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
+      /**
+        * Individual navigation item for the page header contained within a `tds-page-header-nav` component.
+        * @slot (default) - The content of the tab. Accepts text, or if required a button or anchor element.
+        * @cssprop --tds-page-header-nav-item-background-color-disabled {var(--t-fill-color-neutral-080)} - Background color for the disabled tab.
+        * @cssprop --tds-page-header-nav-item-background-color-hover {var(--t-fill-color-neutral-080)} - Background color for the tab on hover.
+        * @cssprop --tds-page-header-nav-item-background-color-selected {var(--t-fill-color-neutral-100)} - Background color for the active tab.
+        * @cssprop --tds-page-header-nav-item-color {var(--t-text-color-default-secondary)} - Default color for the tab.
+        * @cssprop --tds-page-header-nav-item-color-disabled {var(--t-text-color-default-disabled)} - Color for the disabled tab.
+        * @cssprop --tds-page-header-nav-item-color-hover {var(--t-text-color-interaction-primary)} - Color for the tab on hover.
+        * @cssprop --tds-page-header-nav-item-color-selected {var(--t-text-color-default-primary)} - Color for the active tab.
+        * @cssprop --tds-page-header-nav-item-padding-x {12px} - Horizontal padding for the tab.
+        * @cssprop --tds-page-header-nav-item-padding-y {0} - Vertical padding for the tab.
+        */
+      "tds-page-header-nav-item": {
+        /**
+         * If `true` the tab is disabled.
+         */
+        "disabled"?: boolean
+        /**
+         * Optional URL for the tab if it should be a link.
+         */
+        "href"?: string
+        /**
+         * If `true` the tab is selected.
+         */
+        "selected"?: boolean
+      } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
+    }
+  }
+}