@planningcenter/tapestry 0.5.0-rc.0 → 0.5.0-rc.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -0
- package/package.json +8 -6
- package/react-types/index.d.ts +85 -0
package/README.md
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# @planningcenter/tapestry
|
|
2
|
+
|
|
3
|
+
`@planningcenter/tapestry` is a library developed to provide tools to aid in designing Planning Center apps.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
yarn add @planningcenter/tapestry
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Adding types for using Web Components in React
|
|
12
|
+
|
|
13
|
+
If you are using Web Components in React and want to have TypeScript populate the types,
|
|
14
|
+
add `"@planningcenter/tapestry/react-types"` to `compilerOptions.types` in your tsconfig:
|
|
15
|
+
|
|
16
|
+
```json
|
|
17
|
+
{
|
|
18
|
+
"compilerOptions": {
|
|
19
|
+
"types": ["@planningcenter/tapestry/react-types"]
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@planningcenter/tapestry",
|
|
3
|
-
"version": "0.5.0-rc.
|
|
3
|
+
"version": "0.5.0-rc.10",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -14,16 +14,17 @@
|
|
|
14
14
|
"build:storybook": "storybook build",
|
|
15
15
|
"build:tokens": "node ./src/tokens/style-dictionary.build.js",
|
|
16
16
|
"storybook": "storybook dev -p 6006",
|
|
17
|
-
"lint": "eslint .",
|
|
18
17
|
"test": "vitest run",
|
|
19
|
-
"test:visual": "yarn build:storybook && yarn loki test --reactUri file:./storybook-static"
|
|
18
|
+
"test:visual": "yarn build:storybook && yarn loki test --reactUri file:./storybook-static",
|
|
19
|
+
"test:visual:update": "yarn loki update --reactUri file:./storybook-static"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"react": "^17 || ^18 || ^19",
|
|
23
23
|
"react-dom": "^17 || ^18 || ^19"
|
|
24
24
|
},
|
|
25
25
|
"files": [
|
|
26
|
-
"dist"
|
|
26
|
+
"dist",
|
|
27
|
+
"react-types"
|
|
27
28
|
],
|
|
28
29
|
"main": "./dist/index.js",
|
|
29
30
|
"exports": {
|
|
@@ -72,13 +73,14 @@
|
|
|
72
73
|
"react-syntax-highlighter": "^15.5.0",
|
|
73
74
|
"rimraf": "^6.0.1",
|
|
74
75
|
"rollup": "^4.22.4",
|
|
76
|
+
"rollup-plugin-copy": "^3.5.0",
|
|
75
77
|
"rollup-plugin-node-externals": "^7.1.3",
|
|
76
78
|
"rollup-plugin-postcss": "^4.0.2",
|
|
77
79
|
"rollup-plugin-rename-node-modules": "^1.3.1",
|
|
78
80
|
"shadow-dom-testing-library": "^1.11.3",
|
|
79
81
|
"storybook": "^8.2.9",
|
|
80
82
|
"style-dictionary": "^4.2.0",
|
|
81
|
-
"tapestry-wc": "^0.5.0-rc.
|
|
83
|
+
"tapestry-wc": "^0.5.0-rc.10",
|
|
82
84
|
"typescript": "^5.5.3",
|
|
83
85
|
"vitest": "^3.0.0"
|
|
84
86
|
},
|
|
@@ -99,5 +101,5 @@
|
|
|
99
101
|
}
|
|
100
102
|
}
|
|
101
103
|
},
|
|
102
|
-
"gitHead": "
|
|
104
|
+
"gitHead": "5d55514f2cbcef54c1a8c3633e481c1251ce16fc"
|
|
103
105
|
}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
declare global {
|
|
4
|
+
namespace JSX {
|
|
5
|
+
interface IntrinsicElements {
|
|
6
|
+
/**
|
|
7
|
+
* The page header displays the title and any additional metadata and navigation.
|
|
8
|
+
* @example How to use it
|
|
9
|
+
* ```html
|
|
10
|
+
* <tds-page-header>
|
|
11
|
+
* <h1 slot="primary">Title</h1>
|
|
12
|
+
* <div slot="actions">
|
|
13
|
+
* <button>Button</button>
|
|
14
|
+
* </div>
|
|
15
|
+
* </tds-page-header>
|
|
16
|
+
* ```
|
|
17
|
+
* @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.
|
|
18
|
+
* @slot actions - Additional content (typically actions) that complements the primary slot.
|
|
19
|
+
* @slot navigation - For page header with navigation, this slot is for the nav.
|
|
20
|
+
* @cssprop --tds-page-header-background-color - Background color of the header.
|
|
21
|
+
* @cssprop --tds-page-header-background-color-inactive - Background color of inactive headers.
|
|
22
|
+
* @cssprop --tds-page-header-color - Color of any meta text.
|
|
23
|
+
* @cssprop --tds-page-header-headline-color - Color of the page header h1.
|
|
24
|
+
* @cssprop --tds-page-header-padding-x - Horizontal padding of the header.
|
|
25
|
+
* @cssprop --tds-page-header-padding-y - Vertical padding of the header.
|
|
26
|
+
*/
|
|
27
|
+
"tds-page-header": {
|
|
28
|
+
/**
|
|
29
|
+
* Indicates whether the page header is inactive or not.
|
|
30
|
+
* When set to true, the page header is visually inactive
|
|
31
|
+
* @prop {boolean} inactive - Controls the inactive state of the page. Defaults to false.
|
|
32
|
+
*/
|
|
33
|
+
"inactive"?: boolean
|
|
34
|
+
/**
|
|
35
|
+
* Indicates whether the page header is a profile page header or not.
|
|
36
|
+
* When set to true, the page header will visually center the title and actions at mobile breakpoints.
|
|
37
|
+
*/
|
|
38
|
+
"profile"?: boolean
|
|
39
|
+
} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
|
|
40
|
+
/**
|
|
41
|
+
* A container for page header nav.
|
|
42
|
+
* @slot (default) - Used for instances of tds-page-header-nav-item
|
|
43
|
+
*/
|
|
44
|
+
"tds-page-header-nav": {
|
|
45
|
+
} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
|
|
46
|
+
/**
|
|
47
|
+
* Individual navigation item for the page header contained within a `tds-page-header-nav` component.
|
|
48
|
+
* @slot (default) - The content of the tab. Accepts text, or if required a button or anchor element.
|
|
49
|
+
* @cssprop --tds-page-header-nav-item-background-color - {var(--t-fill-color-transparency-light-060)} - Background color for the tab.
|
|
50
|
+
* @cssprop --tds-page-header-nav-item-background-color-active - {var(--t-fill-color-neutral-060)} - Background color for the tab on active.
|
|
51
|
+
* @cssprop --tds-page-header-nav-item-background-color-disabled - {var(--t-fill-color-neutral-080)} - Background color for the tab on disabled.
|
|
52
|
+
* @cssprop --tds-page-header-nav-item-background-color-hover - {var(--t-fill-color-neutral-080)} - Background color for the tab on hover.
|
|
53
|
+
* @cssprop --tds-page-header-nav-item-background-color-selected - {var(--t-fill-color-neutral-100)} - Background color for the tab on selected.
|
|
54
|
+
* @cssprop --tds-page-header-nav-item-border-bottom-color - {var(--t-border-color-default-base)} - Border bottom color for the tab.
|
|
55
|
+
* @cssprop --tds-page-header-nav-item-border-bottom-color-selected - {var(--tds-page-header-nav-item-background-color-selected)} - Border bottom color for the tab on selected.
|
|
56
|
+
* @cssprop --tds-page-header-nav-item-border-color - {var(--tds-page-header-nav-item-background-color)} - Border color for the tab.
|
|
57
|
+
* @cssprop --tds-page-header-nav-item-border-color-active - {var(--tds-page-header-nav-item-background-color-hover)} - Border color for the tab on active.
|
|
58
|
+
* @cssprop --tds-page-header-nav-item-border-color-disabled - {var(--tds-page-header-nav-item-background-color-disabled)} - Border color for the tab on disabled.
|
|
59
|
+
* @cssprop --tds-page-header-nav-item-border-color-hover - {var(--tds-page-header-nav-item-background-color-hover)} - Border color for the tab on hover.
|
|
60
|
+
* @cssprop --tds-page-header-nav-item-border-color-selected - {var(--t-border-color-default-base)} - Border color for the tab on selected.
|
|
61
|
+
* @cssprop --tds-page-header-nav-item-border-width - {0} - Border width for the tab.
|
|
62
|
+
* @cssprop --tds-page-header-nav-item-color - {var(--t-text-color-default-primary)} - Text color for the tab.
|
|
63
|
+
* @cssprop --tds-page-header-nav-item-color-disabled - {var(--t-text-color-default-disabled)} - Text color for the tab on disabled.
|
|
64
|
+
* @cssprop --tds-page-header-nav-item-color-hover - {var(--tds-page-header-nav-item-color)} - Text color for the tab on hover.
|
|
65
|
+
* @cssprop --tds-page-header-nav-item-color-selected - {var(--t-text-color-default-primary)} - Text color for the tab on selected.
|
|
66
|
+
* @cssprop --tds-page-header-nav-item-padding-x - {var(--t-spacing-1)} - Horizontal padding for the tab.
|
|
67
|
+
* @cssprop --tds-page-header-nav-item-padding-y - {var(--t-spacing-1)} - Vertical padding for the tab.
|
|
68
|
+
*/
|
|
69
|
+
"tds-page-header-nav-item": {
|
|
70
|
+
/**
|
|
71
|
+
* If `true` the tab is disabled.
|
|
72
|
+
*/
|
|
73
|
+
"disabled"?: boolean
|
|
74
|
+
/**
|
|
75
|
+
* Optional URL for the tab if it should be a link.
|
|
76
|
+
*/
|
|
77
|
+
"href"?: string
|
|
78
|
+
/**
|
|
79
|
+
* If `true` the tab is selected.
|
|
80
|
+
*/
|
|
81
|
+
"selected"?: boolean
|
|
82
|
+
} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|