# <%= helpers.capitalizeFirstLetter(component.label) %> Manifest

<%= component.description %>

---

This package contains the Component Manifest for the **<%= component.label %>** Component.

## Code Native Integration (CNI) Usage

### Register your component manifest in the Code Native Integration (CNI) component registry `src/componentRegistry.ts`.

```typescript
import { componentManifests } from "@prismatic-io/spectral";
import <%= component.key %> from "<%= packageName %>";

export const componentRegistry = componentManifests({
  <%= component.key %>,
});
```

<% if (component.trigger) { -%>
### Using Triggers in flows

**Example:**

```typescript
import { flow } from "@prismatic-io/spectral";

export default flow({
  name: "Flow Name",
  ...
  onTrigger: {
    key: "<%= component.trigger.key %>",
    component: "<%= component.key %>",
    isPublic: <%= component.isPublic %>,
    values: {
      ...
    }
  },
});
```
<% } -%>

<% if (component.action) { -%>
### Using Actions in flows

The component registry is accessible on the `context` argument in the `onExecution` and `onTrigger` methods as `context.components`.

**Example:**

```typescript
import { flow } from "@prismatic-io/spectral";

export default flow({
  name: "Flow Name",
  ...
  onExecution: async (context, params) => {
    const { components, logger, components } = context;

    const response = await components.<%= component.key %>.<%= component.action.key %>({
      ...
    });

    return Promise.resolve({ data: response });
  },
});
```
<% } -%>

<% if (component.dataSource) { -%>
### Using Data Sources in config pages

**Example:**

```typescript
import { configPage, dataSourceConfigVar } from "@prismatic-io/spectral";

export const configPages = {
  "Data Sources": configPage({
    elements: {
      "Custom Data Source": dataSourceConfigVar({
        dataType: "<%= component.dataSource.type  %>",
        stableKey: "custom-data-source",
        dataSource: {
          key: "<%= component.dataSource.key %>",
          component: "<%= component.key %>",
          isPublic: <%= component.isPublic %>,
          values: {
            ...
          },
        }
      })
    },
  }),
};
```
<% } -%>

<% if (component.connection) { -%>
### Using Connections in config pages

**Example:**

```typescript
import { configPage, connectionConfigVar } from "@prismatic-io/spectral";

export const configPages = {
  Connections: configPage({
    elements: {
      "Custom Connection": connectionConfigVar({
        dataType: "connection",
        stableKey: "custom-connection"
        connection: {
          key: "<%= component.connection.key %>",
          component: "<%= component.key %>",
          isPublic: <%= component.isPublic %>,
          values: {
            ...
          },
        },
    }),
  }),
};
```
<% } -%>

## Development

There are two modes for this package:

1. **Component Manifest development package:** Use this to test the Component in the Code Native Integration (CNI) locally. Publishing the CNI with this package will fail because the Component doesn't exist in the Prismatic Platform yet. A development package is typically built with `npm run generate:manifest:dev` and identified by a `null` `signature` in the Component Manifest `index.ts` file.

2. **Component Manifest production package:** Use this with the Code Native Integration (CNI) either locally or in production by publishing the CNI to the Prismatic Platform. A production package is generated by publishing the Component with `prism components:publish` command, and then generating the Component Manifest with the `generate:manifest` command. A production package is identified by a non-null `signature` in the Component Manifest `index.ts` file.

### Installation with a Code Native Integration

**Before publishing the CNI, the local Component package must be published to the Prismatic Platform. This generates a stable signature key for the Component Manifest, indicating it's available for use.**

### Install via remote registry

**For public components:**

```bash
npm install <%= packageName %>
```

**For private components:**

- If you're installing from a private registry, install the `<%= packageName %>` however you normally install your packages from your own registry.

**Alternatively, install from a local package or tarball.**

### Link to local package

**Things to keep in mind when using `npm link`:**

- The node versions between the Component Manifest directory and the CNI directory must be the same.

**Steps:**

1. From the new `<%= packageName %>` directory, create a symlink to the global module directory:

```bash
npm link;
```

2. From the Code Native Integration directory, link the local package:

```bash
npm link <%= packageName %>;
```

### Install from local tarball package

1. From the new `<%= packageName %>` directory, create a tarball package:

```bash
npm pack;
```

2. From the Code Native Integration directory, install the tarball package:

```bash
npm install [path to tarball];
```