Skip to content

Commit

Permalink
minor: view important classes
Browse files Browse the repository at this point in the history
  • Loading branch information
@liquidg3
liquidg3 committed Jun 29, 2024
1 parent 41f4c83 commit 989b9c2
Show file tree
Hide file tree
Showing 4 changed files with 255 additions and 22 deletions.
12 changes: 11 additions & 1 deletion src/pages/_data/navigation/mainNav.json5
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,17 @@
},
{
"title": "Views",
"url": "/concepts/views/"
"url": "/concepts/views/",
"children": [
{
"title": "Important Classes",
"url": "/concepts/views/#important-classes"
},
{
"title": "View Controller Plugins",
"url": "/concepts/views/#view-controller-plugins"
}
]
},
{
"title": "Events",
Expand Down
2 changes: 1 addition & 1 deletion src/pages/concepts/dates-times.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -413,7 +413,7 @@ export interface DateUtil {
```

### DateUtilDecorator
A decorator that makes the `dateUtil` timezone aware. This is done automatically for you in your Skill Views, but you'll need to do it manually in your backend.
A decorator that makes the `dateUtil` timezone aware. This is done automatically for you in your Skill Views.

### durationUtil
A utility that helps you render durations in various ways.
Expand Down
62 changes: 48 additions & 14 deletions src/pages/concepts/permissions.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,17 @@

Permissions are handled by 2 main classes: `Authenticator` and `Authorizer`. The `Authenticator` is responsible for checking if someone is logged in, and the `Authorizer` is responsible for checking if a logged in person has the right permissions to do something.



## Important Classes

### Authenticator
See if someone is logged in, who it is, and persist a session token to keep a person logged in.
```ts

<details>
<summary>
<strong>Authenticator</strong> - See if someone is logged in, who it is, and persist a session token to keep a person logged in.
</summary>

````ts
export interface Authenticator {
//Get the logged in person, if someone is logged in
getPerson(): Person | null
Expand Down Expand Up @@ -38,9 +44,14 @@ interface Payloads {
'did-login': DidLoginPayload
'did-logout': DidLogoutPayload
}
```
### Authorizer
Check if a person has the right permissions to do something. Works if someone is not logged in.
````

</details>

<details>
<summary>
<strong>Authorizer</strong> - Check if a person has the right permissions to do something. Works if someone is not logged in.
</summary>

```ts
export interface Authorizer {
Expand Down Expand Up @@ -103,6 +114,9 @@ type SavePermissionsTarget = Omit<
>

```

</details>

## Checking in the backend

Coming soon...
Expand All @@ -111,8 +125,11 @@ Coming soon...

### Redirecting if someone is not logged in

#### Test 1: Check for redirect on load
We're going to write this test with the person not logged in and redirect, but it'll take another test to get the `Authenticator` into the production code.
<details>

<summary><strong>Test 1:</strong> Check for redirect on load</summary>

We're going to write this test with the person not logged in and redirect, but it'll take another test to get the `Authenticator` into the production code.

```ts
import { fake, AbstractSpruceFixtureTest } from '@sprucelabs/spruce-test-fixtures'
Expand Down Expand Up @@ -140,8 +157,12 @@ export default class RootSkillViewTest extends AbstractSpruceFixtureTest {
}
```

#### Production 1: Redirect no matter what
We actually don't need to check if the person is logged in yet! Go TDD!
</details>

<details>
<summary><strong>Production 1:</strong> Redirect no matter what</summary>

We actually don't need to check if the person is logged in yet! Go TDD!

```ts
import { AbstractSkillViewController, SkillViewControllerLoadOptions } from '@sprucelabs/heartwood-view-controllers'
Expand All @@ -160,7 +181,10 @@ export default class RootSkillViewController extends AbstractSkillViewController

```

#### Test 2: Should not redirect if logged in
</details>

<details>
<summary><strong>Test 2:</strong> Should not redirect if logged in</summary>
Now we'll test that it does NOT redirect if someone is logged in, which will force us to do the `authenticator.isLoggedIn()` check. Something to note: If a redirect is triggered without an assert, it will throw an error and fail the test. So, you don't actually need to assert anything in this test.

```ts
Expand All @@ -178,7 +202,11 @@ protected static async shouldNotRedirectIfLoggedIn() {

```

#### Production 2: Check if person is logged in
</details>


<details>
<summary><strong>Production 2:</strong> Check if person is logged in</summary>
Now, inside our `RootSkillViewController`, we'll check if the person is logged in before redirecting. If you run logic after this check, you'll need to write tests to ensure that logic is not run after the redirect (not covered in this example).

```ts
Expand All @@ -199,7 +227,10 @@ export default class RootSkillViewController extends AbstractSkillViewController

```

#### Test 3: Refactor tests
</details>

<details>
<summary><strong>Test 3:</strong> Refactor tests</summary>

Here is how you could refactor your tests to make them more readable and maintainable.

Expand Down Expand Up @@ -244,5 +275,8 @@ export default class RootSkillViewTest extends AbstractSpruceFixtureTest {
}
```

</details>

## In event contracts

## In event contracts
Coming soon...
201 changes: 195 additions & 6 deletions src/pages/concepts/views.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,183 @@

Diagrams and details here coming soon...

## Important Classes

<details>
<summary><strong>AbstractCalendarEventViewController</strong> - The class that calendar events extend to customize how they render in the calendar.</summary>

Coming soon...
</details>

<details>
<summary><strong>AbstractSkillViewController</strong> - The class your Skill Views can extend to have access to helpful properties.</summary>

Coming soon...
</details>

<details>
<summary><strong>AbstractViewController</strong> - The class your views can extend to have access to helpful properties.</summary>

Coming soon...
</details>

<details>
<summary><strong>ActiveRecordCardViewController</strong> - A card that holds an `ActiveRecordList` to make loading, searching, and paging through database records a breeze.</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-lists--active-record-list)
</details>

<details>
<summary><strong>ActiveRecordListViewController</strong> - A list that makes loading, searching, and paging through database record a breeze.</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-lists--active-record-list)
</details>

<details>
<summary><strong>AutocompleteInputViewController</strong> - Turns a text input into an autocomplete input.</summary>

Coming soon...
</details>

<details>
<summary><strong>BigFormViewController</strong> - A form that renders one field at a time with customizable transitions between questions.</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-big-form--big-form).
</details>

<details>
<summary><strong>ButtonBarViewController</strong> - A strip of buttons that supports selection and deselection.</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-buttons--button-bar).
</details>

<details>
<summary><strong>ButtonGroupViewController</strong> - An array of buttons that supports selected and deselected states.</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-buttons--single-select-group).
</details>

<details>
<summary><strong>CalendarViewController</strong> - A calendar that supports day and month views (more soon)!</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-calendar--day-calendar).
</details>

<details>
<summary><strong>CalendarEventViewController</strong> - The view controller that renders for each event by detail!</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-calendar--day-calendar).
</details>

<details>
<summary><strong>CardViewController</strong> - The building block of every Skill View!</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-cards--cards).
</details>

<details>
<summary><strong>CountdownTimerViewController</strong> - A flipboard style countdown timer!</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components--countdown).
</details>

<details>
<summary><strong>FeedViewController</strong> - A chat component for handling coversations!</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-the-feed--the-feed).
</details>

<details>
<summary><strong>FormBuilderViewController</strong> - A component for building custom forms!</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-form-builder--form-builder).
</details>

<details>
<summary><strong>FormViewController</strong> - A form comprised of inputs (or a list with inputs)!</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-form--all-field-types).
</details>

<details>
<summary><strong>ListCellViewController</strong> - The cells that build a row.</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-lists--with-controller).
</details>

<details>
<summary><strong>ListRowViewController</strong> - Rows that build a list.</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-lists--with-controller).
</details>

<details>
<summary><strong>ListViewController</strong> - A List based on rows and cells.</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-lists--with-controller).
</details>

<details>
<summary><strong>MapViewController</strong> - A customizable map with pin and navigation support.</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-lists--with-controller).
</details>

<details>
<summary><strong>NavigationViewController</strong> - Customize the navigation. Currently render inside the ControlBar.</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-nav--control-bar).
</details>

<details>
<summary><strong>PolarAreaViewController</strong> - A polar area chart.</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-reporting--polar-area).
</details>

<details>
<summary><strong>ProgressNavigatorViewController</strong> - Renders at the top of the screen to track progress through any process.</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components--progress-navigation).
</details>

<details>
<summary><strong>ProgressViewController</strong> - A progress indicator with an optional message.</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-reporting--progress-as-grid-in-big-left).
</details>

<details>
<summary><strong>RatingsViewController</strong> - A ratings component to gauge sentiment or against a scale.</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-form--customizable-ratings).
</details>


<details>
<summary><strong>SwipeViewController</strong> - A version of a card where sections are rendered as a swipe view.</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-swipe--swipe).
</details>

<details>
<summary><strong>StatsViewController</strong> - Render numbers with labels with some nice animations.</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-swipe--swipe).
</details>

<details>
<summary><strong>TalkingSprucebotViewController</strong> - Sprucebot animation with typing text. Great for storytelling!</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-talking-sprucebot--talking-sprucebot).
</details>

<details>
<summary><strong>ToolBeltViewController</strong> - Holds an extra set of cards that hide when not in use!</summary>

[Storybook](https://storybook.spruce.bot/?path=/story/components-tool-belt-tool-belt--tool-belt).
</details>

## View Controller Plugins

You can globally enhance View Controller functionality by using View Controller Plugins. Here are some plugins that are already available:
Expand All @@ -11,7 +188,7 @@ You can globally enhance View Controller functionality by using View Controller

### Implementing a View Controller Plugin

#### Test: Is the plugin installed?
#### Test 1: Is the plugin installed?

```ts
import {
Expand All @@ -32,7 +209,7 @@ protected static async autoLogoutPluginInstalled() {

Note: If you are planning on using your own plugin (one that is not built yet), type it instead of `AutoLogoutPlugin` as if it exists and then begin with the productions steps below.

#### Production: Install the plugin
#### Production 1: Install the plugin

1. Install the module that holds the plugin: `yarn add {packageName}`
2. Create the plugin: `spruce create.view.plugin`
Expand All @@ -44,15 +221,13 @@ Your plugin starts like this:
import { ViewControllerPlugin } from '@sprucelabs/heartwood-view-controllers'

export default class MyViewPlugin implements ViewControllerPlugin {
public async doSomething() {
...
}
...
}
```

Now that plugin is created, you can import it into your test.

If you using a prebuilt plugin, you would implement it like this:
Note: If you using a prebuilt plugin, you would implement it like this:

```ts
export { AutoLogoutPlugin as default } from '@sprucelabs/spruce-heartwood-utils'
Expand All @@ -64,9 +239,23 @@ You can drop in your test double using the `views` fixture on your `AbstractSpru

```ts
protected static async beforeEach() {
await super.beforeEach()

this.spy = new SpyPlugin()
this.views.addPlugin('autoLogout', this.spy)
}
```

Now, in any View Controller you create, `this.plugins.autoLogout` will be the `SpyPlugin` instance.

```ts
class RootSkillView extends AbstractSkillViewController {
public constructor(options: SkillViewControllerOptions) {
super(options)
}

public async load() {
this.plugins.autoLogout.doSomething()
}
}
```

0 comments on commit 989b9c2

Please sign in to comment.