Skip to content

Commit 0e33c77

Browse files
authored
Merge pull request #122 from contentstack/develop
Develop-->Main
2 parents 41c5f25 + f17427d commit 0e33c77

File tree

18 files changed

+6715
-6354
lines changed

18 files changed

+6715
-6354
lines changed

.github/readme/blueprint.md

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
Contentstack App SDK Readme
2+
The Contentstack App SDK allows you to customize your applications. This document will help you integrate the App SDK with your application.
3+
4+
Getting started
5+
6+
Include the compiled version of the extension client library by adding the following line to your application.
7+
8+
<script
9+
src="https://unpkg.com/@contentstack/app-sdk@{{pkg.version}}/dist/index.js"
10+
integrity="{{subresourceIntegrity.js}}"
11+
crossorigin="anonymous"
12+
></script>
13+
14+
To include the App SDK in your project, you need to run the following command:
15+
16+
npm install @contentstack/app-sdk
17+
Alternatively, you can use the following command within the script tag to install the App SDK:
18+
19+
<script src="https://unpkg.com/@contentstack/[email protected]/dist/index.js"></script>
20+
21+
Initializing the App SDK
22+
To Initialize the App SDK you need to run the following command:
23+
24+
ContentstackAppSdk.init().then(function (appSdk) {
25+
// add code here
26+
});
27+
For more information, please refer to our App SDK API Reference document.
28+
29+
Download the Boilerplate
30+
You can extend or customize the functionality of Contentstack CMS with Marketplace apps. To simplify and speed up the building process, boilerplates describe repetitive elements in a project. This boilerplate will help you build custom applications for your organization or stack.
31+
32+
Download the boilerplate.
33+
34+
UI Locations and Examples
35+
UI Locations allow you to extend Contentstack's functionality. Through these UI locations, you can customize Contentstack's default behavior and UI. Integration of third-party applications is possible using different UI locations.
36+
37+
The Contentstack App SDK currently supports the following UI Locations:
38+
39+
Custom Field Location
40+
Dashboard Location
41+
Asset Sidebar Location
42+
App Config Location
43+
RTE Location
44+
Sidebar Location
45+
Field Modifier Location
46+
Full Page Location
47+
Custom Field Location
48+
Custom Field Location allows you to create custom fields that can be used in your content types. You can integrate with various business applications, such as Bynder, Cloudinary, Shopify, by adding them as a custom field to your stack's content type.
49+
50+
Dashboard Location
51+
With the Dashboard Location, you can create widgets for your stack dashboard. Integration with Google Analytics provides meaningful insights about your website.
52+
53+
Asset Sidebar Location
54+
Using the Asset Sidebar Location, you can create customized sidebar widgets to extend the functionality of your assets.
55+
56+
Manage, transform, and optimize your stack's assets efficiently using the Image Preset Builder.
57+
58+
App Config Location
59+
App Config UI Location allows you to manage all the app settings centrally. Once configured, all other locations (where the app is installed) can access these settings.
60+
61+
RTE Location
62+
The RTE Location allows you to create custom plugins to expand the functionality of your JSON Rich Text Editor. Using the Audience and Variables plugin, you can tailor your content as per your requirements.
63+
64+
Sidebar Location
65+
The Sidebar Location provides powerful tools for analyzing and recommending ideas for your entry. Use the Smartling sidebar location to help translate your content.
66+
67+
Field Modifier Location
68+
The Field Modifier Location is a type of UI location which extends the capabilities of entry fields. With the Field Modifier UI location, you can allow the different apps to appear on defined field data types such as Text, Number, JSON, Boolean, File, Reference fields etc.
69+
70+
Full Page Location
71+
The Full Page location is a type of UI location that lets you view full page apps such as Release Preview within your stack.
72+
73+
Using Contentstack styles
74+
Install the Venus UI library package to style your app according to the Contentstack UI:
75+
76+
npm i @contentstack/venus-components --save
77+
For more information on styling your application, refer to our style guide.
78+
79+
More information
80+
App SDK API Reference
81+
Marketplace Platform Guides
82+
Marketplace Apps
83+
Contentstack App Development
84+
App SDK v2.0.0 Migration Guide
85+
This guide provides instructions for migrating your application to App SDK version 2.0.0. It covers changes in metadata responses, field modifier and full page location updates, and the transition from the \_extension property to \_uiLocation. If you are upgrading your app to the latest version, make sure to follow these steps for a smooth transition.
86+
87+
Read the Migration Guide
88+
89+
License
90+
Licensed under MIT.

README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,16 @@ The Contentstack App SDK allows you to customize your applications. This documen
44

55
## Getting started
66

7+
Include the compiled version of the extension client library by adding the following line to your application.
8+
9+
```html
10+
<script
11+
src="https://unpkg.com/@contentstack/[email protected]/dist/index.js"
12+
integrity="sha512-wlEBUkZA+vdcHXRTK69fZvK44c5Y8KeU/kw9OOShWNDjddtrIB8a1lfbLjH5nKWQqkWZ2L9VYEqr96P7qx3ZZg=="
13+
crossorigin="anonymous"
14+
></script>
15+
```
16+
717
To include the App SDK in your project, you need to run the following command:
818

919
```sh

__test__/assetSidebarWidget.test.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import EventEmitter from "wolfy87-eventemitter";
2-
32
import AssetSidebarWidget from "../src/AssetSidebarWidget";
43
import { IAssetSidebarInitData, LocationType } from "../src/types";
54
import Asset from "../src/stack/api/asset";
@@ -38,17 +37,19 @@ describe("AssetSidebarWidget", () => {
3837
};
3938

4039
emitter = {
41-
on: (_event, cbf) => {
40+
on: (_event: string, cbf: (data: { state: string }) => void) => {
4241
setTimeout(() => {
4342
cbf({ state: "full_width" });
4443
}, 50);
4544
},
46-
} as EventEmitter;
45+
emitEvent: (_s: string, _cb: () => void) => {}
46+
} as unknown as EventEmitter;
4747

4848
jest.spyOn(emitter, "on");
4949

5050
connection = { sendToParent };
5151
jest.spyOn(connection, "sendToParent");
52+
5253
assetSidebarWidget = new AssetSidebarWidget(
5354
mockInitData as IAssetSidebarInitData,
5455
connection as any,

__test__/entry.test.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Entry from "../src/entry";
2-
import { GenericObjectType } from "../src/types/common.types";
32
import testData from "./data/testData.json";
43
import { jest } from "@jest/globals";
54

@@ -134,7 +133,7 @@ describe("Entry", () => {
134133
});
135134
it("should use custom Field instance if internal flag is set", () => {
136135
const fieldInstance: any = jest.fn();
137-
entry = new Entry(testData as any, connection as any, emitter, {
136+
entry = new Entry(testData as any, connection as any, emitter ,{
138137
_internalFlags: {
139138
FieldInstance: fieldInstance,
140139
},

__test__/fieldModifierLocation/entry.test.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,6 @@ describe("FieldModifierLocationEntry", () => {
7676
beforeEach(() => {
7777
sendToParent = () => {};
7878
connection = { sendToParent };
79-
8079
emitter = {
8180
on: (_event: any, cbf: (...props: any[]) => void) => {
8281
setTimeout(() => {

__test__/stack.test.ts

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -188,18 +188,23 @@ describe("Stack", () => {
188188
});
189189

190190
it("getContentTypes", (done) => {
191-
let params: { [key: string]: any } = { sample: "parameter" };
191+
let params: { [key: string]: any } = { sample: "parameter", branch: "sampleBranch" };
192192
let query = { sample: "query" };
193+
let expectedParams = { sample: "parameter", query };
194+
193195
stack.getContentTypes(query, params).then((data) => {
194-
params.query = query;
195196
expect(data).toEqual({});
196197
expect(connection.sendToParent).toHaveBeenCalledWith(
197198
"stackQuery",
198-
{ params, action: "getContentTypes" }
199+
{
200+
params: expectedParams,
201+
action: "getContentTypes",
202+
headers: { branch: "sampleBranch" }
203+
}
199204
);
200205
done();
201206
});
202-
});
207+
});
203208

204209
it("getContentTypes error case", async () => {
205210
let newStack = new Stack(

blueprint.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"input": "./.github/readme/blueprint.md",
3+
"headingPrefix": {
4+
"1": "",
5+
"2": ""
6+
},
7+
"line": "none",
8+
"subresourceIntegrity": {
9+
"js": "sha512-wlEBUkZA+vdcHXRTK69fZvK44c5Y8KeU/kw9OOShWNDjddtrIB8a1lfbLjH5nKWQqkWZ2L9VYEqr96P7qx3ZZg=="
10+
}
11+
}

0 commit comments

Comments
 (0)