@planningcenter/topbar 8.0.0-alpha.1 → 8.0.0
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/CHANGELOG-pre-4.9.0.md +134 -0
- package/CHANGELOG.md +2 -2
- package/README.md +13 -0
- package/dist/topbar.js +1 -1
- package/dist/topbar.js.map +1 -1
- package/dist/topbar.modern.js +1 -1
- package/dist/topbar.modern.js.map +1 -1
- package/dist/topbar.module.js +1 -1
- package/dist/topbar.module.js.map +1 -1
- package/dist/topbar.umd.js +1 -1
- package/dist/topbar.umd.js.map +1 -1
- package/dist/types/modules/components/hoverable_list_item.d.ts +2 -1
- package/dist/types/modules/components/hoverable_list_item.d.ts.map +1 -1
- package/dist/types/modules/components/notification_item.d.ts +1 -1
- package/dist/types/modules/components/notification_item.d.ts.map +1 -1
- package/dist/types/modules/components/notifications_menu.d.ts.map +1 -1
- package/dist/types/modules/hooks/use_notifications.d.ts +2 -2
- package/dist/types/modules/hooks/use_notifications.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
# LOST ENTRIES
|
|
2
|
+
|
|
3
|
+
# 3.0.0 Release
|
|
4
|
+
|
|
5
|
+
### Squircle Icons
|
|
6
|
+
|
|
7
|
+

|
|
8
|
+
|
|
9
|
+
You've seen them in Slack.
|
|
10
|
+
Now you can experience them in your own apps.
|
|
11
|
+
|
|
12
|
+
SQUIRCLES!
|
|
13
|
+
|
|
14
|
+
### Support for Church Center and API
|
|
15
|
+
|
|
16
|
+
Some of our products can't be found in Topbar's app-switcher.
|
|
17
|
+
v3 adds support for those non-navigable apps.
|
|
18
|
+
Now, these apps can use Topbar **and** keep out of the app-switcher.
|
|
19
|
+
|
|
20
|
+
### Support for React 16
|
|
21
|
+
|
|
22
|
+
@glosie gets the badge for first app to React 16.
|
|
23
|
+
He also gets a badge for updating Topbar's dependencies, allowing you to upgrade to React 16 too!
|
|
24
|
+
|
|
25
|
+
🤗
|
|
26
|
+
|
|
27
|
+
### Various UX fixes
|
|
28
|
+
|
|
29
|
+
v3 resolves a [long-stading useability bug](https://trello.com/c/PQtq5w1u/2568-%F0%9F%90%9E-previously-logged-in-users-linked-accounts-are-visible-for-a-split-second#) where users could (for a split second) see the `connected_people` from the previous session.
|
|
30
|
+
|
|
31
|
+
Thanks @mcfadden and @ClaytonRector for surfacing that.
|
|
32
|
+
|
|
33
|
+
## Upgrade from v2
|
|
34
|
+
|
|
35
|
+
This should be a mostly painless upgrade.
|
|
36
|
+
Here are the APIs that changed and how to update.
|
|
37
|
+
|
|
38
|
+
### `PlatformAnnouncements`
|
|
39
|
+
|
|
40
|
+
Platform Announcements were a quickly concieved feature.
|
|
41
|
+
The v2 API has a very "build-your-own" feel.
|
|
42
|
+
After implementing them across apps, we have a better understanding of what they are and how they should be used.
|
|
43
|
+
|
|
44
|
+
Now I expose a single component for platform announcements.
|
|
45
|
+
|
|
46
|
+
```jsx
|
|
47
|
+
import { PlatformAnnouncements } from "@planningcenter/topbar";
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Implemented it in your `{App}Topbar` like so:
|
|
51
|
+
|
|
52
|
+
```jsx
|
|
53
|
+
<PlatformAnnouncement
|
|
54
|
+
data={this.props.platformAnnouncements}
|
|
55
|
+
colors={shared.colors}
|
|
56
|
+
env={shared.env}
|
|
57
|
+
/>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
#### Naming problems
|
|
61
|
+
|
|
62
|
+
> Didn't these used to `PlatformNotifications`?
|
|
63
|
+
|
|
64
|
+
Yes 😬
|
|
65
|
+
|
|
66
|
+
There are a lot of `notification` features in the pipeline.
|
|
67
|
+
To distinguish these in Topbar-land, we've written up a [dictionary of terms](https://planningcenter.design/interfaces-and-interactions/announcements-and-notifications-and-alerts-oh-my).
|
|
68
|
+
|
|
69
|
+
I know that this introduces some cognitive dissonence—now that Topbar uses `PlatformAnnouncements` but `platform_notifications` is used for all the #platform tooling.
|
|
70
|
+
|
|
71
|
+
I'm sorry.
|
|
72
|
+
|
|
73
|
+
I knew there was eventually naming problem
|
|
74
|
+
but I didn't have a comprehensive solution before the feature needed to ship.
|
|
75
|
+
You only know what you know when you know it.
|
|
76
|
+
|
|
77
|
+
If you find this dissonence problematic, you can assign on import.
|
|
78
|
+
|
|
79
|
+
```js
|
|
80
|
+
import { PlatformAnnouncements as PlatformNotifications } from "@planningcenter/topbar";
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
The props for this componenent are intentionnaly generic (`data`, `renderItem`) to be clear, when referenced by either name.
|
|
84
|
+
|
|
85
|
+
### `AppsProvider` and `ConnectedPeopleProvider`
|
|
86
|
+
|
|
87
|
+
These two data-fetching, provider components have new callback signatures.
|
|
88
|
+
|
|
89
|
+
In adding a `clearCache` method to both, I made the decision to pass objects down instead of functions.
|
|
90
|
+
This allows me to add functionality without changing function arity.
|
|
91
|
+
|
|
92
|
+
Your use of these components should now look like this:
|
|
93
|
+
|
|
94
|
+
```jsx
|
|
95
|
+
<ConnectedPeopleProvider
|
|
96
|
+
render={(connectedPeople, connectedPeopleActions) => (
|
|
97
|
+
<AppsProvider
|
|
98
|
+
render={(apps, appsActions) => (
|
|
99
|
+
/*
|
|
100
|
+
* connectedPeople
|
|
101
|
+
* connectedPeopleActions.fetch()
|
|
102
|
+
* connectedPeopleActions.remove()
|
|
103
|
+
*
|
|
104
|
+
* apps
|
|
105
|
+
* appsActions.fetch()
|
|
106
|
+
* appsActions.remove()
|
|
107
|
+
*/
|
|
108
|
+
)}
|
|
109
|
+
/>
|
|
110
|
+
)}
|
|
111
|
+
/>
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### `SmallTopbar` and `NotSmallTopbar`
|
|
115
|
+
|
|
116
|
+
To support the removal of cached `localStorage` data, both Topbars take an additional required props: `requestClearAppsCache` and `requestClearConnectedPeopleCache`.
|
|
117
|
+
|
|
118
|
+
In practice these callbacks should be provided from `ConnectedPeopleProvider` and `AppsProvider` like so:
|
|
119
|
+
|
|
120
|
+
```jsx
|
|
121
|
+
<ConnectedPeopleProvider
|
|
122
|
+
render={(connectedPeople, connectedPeopleActions) => (
|
|
123
|
+
<AppsProvider
|
|
124
|
+
render={(apps, appsActions) => (
|
|
125
|
+
<SmallTopbar
|
|
126
|
+
requestClearConnectedPeopleCache={connectedPeopleActions.remove}
|
|
127
|
+
requestClearAppsCache={appsActions.remove}
|
|
128
|
+
{...allTheOtherProps}
|
|
129
|
+
/>
|
|
130
|
+
)}
|
|
131
|
+
/>
|
|
132
|
+
)}
|
|
133
|
+
/>
|
|
134
|
+
```
|
package/CHANGELOG.md
CHANGED
|
@@ -5,7 +5,7 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
-
## [
|
|
8
|
+
## [8.0.0] - 2021-03-24
|
|
9
9
|
|
|
10
10
|
### Added
|
|
11
11
|
|
|
@@ -113,7 +113,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
113
113
|
|
|
114
114
|
Versions entries to this changelog weren't tracked very well and were presented in a less organized style (more like a README or upgrade guide). If you are interested in that, you can read about the changes in [README-pre-4.9.0].
|
|
115
115
|
|
|
116
|
-
[
|
|
116
|
+
[8.0.0]: https://github.com/ministrycentered/topbar/compare/@planningcenter/topbar@7.2.1..8.0.0
|
|
117
117
|
[7.2.1]: https://github.com/ministrycentered/topbar/compare/v7.2.0..v7.2.1
|
|
118
118
|
[7.2.0]: https://github.com/ministrycentered/topbar/compare/v7.1.3..v7.2.0
|
|
119
119
|
[7.1.3]: https://github.com/ministrycentered/topbar/compare/v7.1.2..v7.1.3
|
package/README.md
CHANGED
|
@@ -85,6 +85,19 @@ The `dev` script starts a server at [http://localhost:9000](http://localhost:900
|
|
|
85
85
|
|
|
86
86
|
The [`dev/dev.tsx`](./dev/dev.tsx) is the main dev environment component.
|
|
87
87
|
|
|
88
|
+
### Local App Development
|
|
89
|
+
|
|
90
|
+
If you are working on a new feature or run into a specific bug in your application and need to inspect the problem locally before publishing, you can use [`yalc`](https://github.com/whitecolor/yalc#yalc) to install and run the Topbar package locally.
|
|
91
|
+
|
|
92
|
+
To get started:
|
|
93
|
+
|
|
94
|
+
1. In `/topbar`: `yalc publish`
|
|
95
|
+
2. In your product: `yalc add @planningcenter/topbar`
|
|
96
|
+
|
|
97
|
+
When you make `topbar` changes, run `yalc publish --push` to update your product.
|
|
98
|
+
|
|
99
|
+
When you're done, in your product directory run `yalc remove @planningcenter/topbar`.
|
|
100
|
+
|
|
88
101
|
## Migrate
|
|
89
102
|
|
|
90
103
|
These migration docs will guide you thru the process of updating to recent major releases.
|