Skip to content

Commit 8dd5922

Browse files
joaquincasalJuliRossiFBanfiryunsong-contentful
authored
Rich Text Versioning app [INTEG-2763] (#10073)
* Rich text setup project - [INTEG-3001] (#10041) * feat: initialize rich text versioning app with basic structure and components * move tests to test folder * add config settings for vite and vitest * Taking advantage of those jest matchers * prettier * Config screen rich text versioning - [INTEG-3008] (#10046) * wip wip * updated * updating from dist to build (#10050) * Rich-Text-Versioning: UI adjustments and diff component [INTEG-2976] (#10054) * creating UI and call to fetch the rich text diff * adding tests and some refactors * adding more tests * adding css style to Dialog location * removing html-diff-ts that was not used * correction of PRs * Config screen - Add field content type multi selector [INTEG-3009] (#10053) * wip * wip * Fix emotion issue * simplifying and upping the state to config screen * update label * adjusting margins * adjusting labels * refactoring * fix test * update deps * fixing because conflict with 7.0 version * refsctoring test * removing unwanted test * renaming * simplifying mapping * changes per comments * fixes after merge * Rich-Text-Versioning: Error handling and cma call refactor [INTEG-3013] (#10059) * creating UI and call to fetch the rich text diff * adding tests and some refactors * adding more tests * adding css style to Dialog location * removing html-diff-ts that was not used * first version of error handling * using sdk to get the published version + refactor in tests * adjusting the width and height of the dialog if there is an error * formating with prettier after rebase * updating package-lock.json * update in mockSdk to fix tests after rebase * adding css style in Dialog.styles.ts * correction of pr comments * removing some prettier format * Rich-Text-Versioning: Removing access token [INTEG-3027] (#10060) * removing access token from the config screen * removing api key tests + ContentfulApiKeyInput component * Rich-Text-Versioning: fixing bugs in error handling [INTEG-3028] (#10061) * correction in the Field catch to fix test * refactor in onButtonClick to fix the dialog error width * refactor to remove unnecessary errorInfo state + refactor in Dialog styles * correcting tests * leaving the correct query key back again * fix current content not being displayed when published content is empty (#10062) * References rich text [INTEG-2977] (#10063) * wip * wip * comments * joas approach! * rename * Update loading condition in HtmlDiffViewer to include diffHtml check * this doesn't need to be optional * wip * Making single call * wip * Rough error handling * Add entry title and status utilities; refactor HtmlDiffViewer and Dialog components * fix * Handling errors * removing unused * removing unused deps * Update dependencies to include @contentful/rich-text-types version 16.1.0 in package.json and package-lock.json * Fixing type issues * adding tests * entry not found * removing afterEach * adding margin bottom in createOptions embedded entry * Refactor createOptions and Dialog components to use locale parameter for entry status and title retrieval; remove unused dependencies from package.json and package-lock.json. --------- Co-authored-by: francobanfi <franco.banfi@external.contentful.com> * Fix localization edge cases [] (#10068) * fix issue * Localization dIff fix * Rich text versioning: Asset support [INTEG-3019] (#10069) * Rich text versioning: Add asset support * Fix node type * Update tests logic for changed field * Rich text: demo fixes [] (#10072) * Adjust button and deleted references styles * Remove badge * Visual adjustments * fix: add more security around xss attack when setting inner html * fix: build issues * Close modal on click outside or esc * Update definition id --------- Co-authored-by: JuliRossi <juliana.rossi@external.contentful.com> Co-authored-by: Franco Banfi <62450599+FBanfi@users.noreply.github.com> Co-authored-by: francobanfi <franco.banfi@external.contentful.com> Co-authored-by: ryunsong-contentful <ryun.song@contentful.com>
1 parent 431d964 commit 8dd5922

32 files changed

+10400
-0
lines changed

‎apps/rich-text-versioning/.gitignore

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# dependencies
2+
/node_modules
3+
4+
# testing
5+
/coverage
6+
7+
# production
8+
/dist
9+
10+
# dotenv environment variables file
11+
.env
12+
.env.*
13+
!.env*.example
14+
15+
# misc
16+
.DS_Store
17+
.cursor
18+
npm-debug.log*
19+
yarn-debug.log*
20+
yarn-error.log*

‎apps/rich-text-versioning/.npmrc

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
engine-strict = true
2+
@contentful:registry=https://registry.npmjs.org

‎apps/rich-text-versioning/README.md

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
This project was bootstrapped with [Create Contentful App](https://github.com/contentful/create-contentful-app).
2+
3+
## How to use
4+
5+
Execute create-contentful-app with npm, npx or yarn to bootstrap the example:
6+
7+
```bash
8+
# npx
9+
npx create-contentful-app --example vite-react
10+
11+
# npm
12+
npm init contentful-app --example vite-react
13+
14+
# Yarn
15+
yarn create contentful-app --example vite-react
16+
```
17+
18+
## Available Scripts
19+
20+
In the project directory, you can run:
21+
22+
#### `npm start`
23+
24+
Creates or updates your app definition in Contentful, and runs the app in development mode.
25+
Open your app to view it in the browser.
26+
27+
The page will reload if you make edits.
28+
You will also see any lint errors in the console.
29+
30+
#### `npm run build`
31+
32+
Builds the app for production to the `dist` folder.
33+
It correctly bundles React in production mode and optimizes the build for the best performance.
34+
35+
The build is minified and the filenames include the hashes.
36+
Your app is ready to be deployed!
37+
38+
#### `npm run upload`
39+
40+
Uploads the `dist` folder to Contentful and creates a bundle that is automatically activated.
41+
The command guides you through the deployment process and asks for all required arguments.
42+
Read [here](https://www.contentful.com/developers/docs/extensibility/app-framework/create-contentful-app/#deploy-with-contentful) for more information about the deployment process.
43+
44+
#### `npm run upload-ci`
45+
46+
Similar to `npm run upload` it will upload your app to contentful and activate it. The only difference is
47+
that with this command all required arguments are read from the environment variables, for example when you add
48+
the upload command to your CI pipeline.
49+
50+
For this command to work, the following environment variables must be set:
51+
52+
- `CONTENTFUL_ORG_ID` - The ID of your organization
53+
- `CONTENTFUL_APP_DEF_ID` - The ID of the app to which to add the bundle
54+
- `CONTENTFUL_ACCESS_TOKEN` - A personal [access token](https://www.contentful.com/developers/docs/references/content-management-api/#/reference/personal-access-tokens)
55+
56+
## Libraries to use
57+
58+
To make your app look and feel like Contentful use the following libraries:
59+
60+
- [Forma 36](https://f36.contentful.com/) – Contentful's design system
61+
- [Contentful Field Editors](https://www.contentful.com/developers/docs/extensibility/field-editors/) – Contentful's field editor React components
62+
63+
## Using the `contentful-management` SDK
64+
65+
In the default create contentful app output, a contentful management client is
66+
passed into each location. This can be used to interact with Contentful's
67+
management API. For example
68+
69+
```js
70+
// Use the client
71+
cma.locale.getMany({}).then((locales) => console.log(locales));
72+
```
73+
74+
Visit the [`contentful-management` documentation](https://www.contentful.com/developers/docs/extensibility/app-framework/sdk/#using-the-contentful-management-library)
75+
to find out more.
76+
77+
## Learn More
78+
79+
[Read more](https://www.contentful.com/developers/docs/extensibility/app-framework/create-contentful-app/) and check out the video on how to use the CLI.

‎apps/rich-text-versioning/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
</head>
7+
8+
<body>
9+
<noscript>You need to enable JavaScript to run this app.</noscript>
10+
<div id="root"></div>
11+
<script type="module" src="/src/index.tsx"></script>
12+
<!--
13+
This HTML file is a template.
14+
If you open it directly in the browser, you will see an empty page.
15+
You can add webfonts, meta tags, or analytics to this file.
16+
The build step will place the bundled scripts into the <body> tag.
17+
To begin the development, run `npm start`.
18+
To create a production bundle, use `npm run build`.
19+
-->
20+
</body>
21+
</html>

0 commit comments

Comments
 (0)