Skip to content

Commit 2df17e0

Browse files
mgschoenmgschoen
committed
Initialize project using Create React App
0 parents  commit 2df17e0

23 files changed

+16685
-0
lines changed

‎.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

‎README.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
This project was bootstrapped with [Create Contentful App](https://github.com/contentful/create-contentful-app).
2+
3+
## Available Scripts
4+
5+
In the project directory, you can run:
6+
7+
#### `npm start`
8+
9+
Creates or updates your app definition in contentful, and runs the app in development mode.
10+
Open your app to view it in the browser.
11+
12+
The page will reload if you make edits.
13+
You will also see any lint errors in the console.
14+
15+
#### `npm run build`
16+
17+
Builds the app for production to the `build` folder.
18+
It correctly bundles React in production mode and optimizes the build for the best performance.
19+
20+
The build is minified and the filenames include the hashes.
21+
Your app is ready to be deployed!
22+
23+
## Libraries to use
24+
25+
To make your app look and feel like Contentful use the following libraries:
26+
27+
- [Forma 36](https://f36.contentful.com/) – Contentful's design system
28+
- [Contentful Field Editors](https://www.contentful.com/developers/docs/extensibility/field-editors/) – Contentful's field editor React components
29+
30+
## Learn More
31+
32+
[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.
33+
34+
Create Contentful App uses [Create React App](https://create-react-app.dev/). You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started) and how to further customize your app.

‎package-lock.json

Lines changed: 16198 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "contentful-ingredients-field-app",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@contentful/field-editor-single-line": "^0.11.3",
7+
"@contentful/field-editor-test-utils": "^0.8.2",
8+
"@contentful/forma-36-fcss": "^0.2.12",
9+
"@contentful/forma-36-react-components": "^3.68.8",
10+
"@contentful/forma-36-tokens": "^0.9.2",
11+
"@testing-library/jest-dom": "^5.11.6",
12+
"@testing-library/react": "^11.2.2",
13+
"@testing-library/user-event": "^12.2.2",
14+
"@types/jest": "^26.0.15",
15+
"@types/node": "^14.14.10",
16+
"@types/react": "^16.14.2",
17+
"@types/react-dom": "^16.9.10",
18+
"contentful-ui-extensions-sdk": "^3.26.1",
19+
"react": "^17.0.1",
20+
"react-dom": "^17.0.1",
21+
"react-scripts": "4.0.1",
22+
"typescript": "^4.1.2"
23+
},
24+
"scripts": {
25+
"start": "BROWSER=none react-scripts start",
26+
"build": "react-scripts build",
27+
"test": "react-scripts test",
28+
"eject": "react-scripts eject"
29+
},
30+
"eslintConfig": {
31+
"extends": "react-app"
32+
},
33+
"browserslist": {
34+
"production": [
35+
">0.2%",
36+
"not dead",
37+
"not op_mini all"
38+
],
39+
"development": [
40+
"last 1 chrome version",
41+
"last 1 firefox version",
42+
"last 1 safari version"
43+
]
44+
}
45+
}

‎public/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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+
<body>
8+
<noscript>You need to enable JavaScript to run this app.</noscript>
9+
<div id="root"></div>
10+
<!--
11+
This HTML file is a template.
12+
If you open it directly in the browser, you will see an empty page.
13+
You can add webfonts, meta tags, or analytics to this file.
14+
The build step will place the bundled scripts into the <body> tag.
15+
To begin the development, run `npm start`.
16+
To create a production bundle, use `npm run build`.
17+
-->
18+
</body>
19+
</html>

‎src/components/ConfigScreen.spec.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
import ConfigScreen from './ConfigScreen';
3+
import { render } from '@testing-library/react';
4+
5+
describe('Config Screen component', () => {
6+
it('Component text exists', async () => {
7+
const mockSdk: any = {
8+
app: {
9+
onConfigure: jest.fn(),
10+
getParameters: jest.fn().mockReturnValueOnce({}),
11+
setReady: jest.fn(),
12+
getCurrentState: jest.fn()
13+
}
14+
};
15+
const { getByText } = render(<ConfigScreen sdk={mockSdk} />);
16+
17+
// simulate the user clicking the install button
18+
await mockSdk.app.onConfigure.mock.calls[0][0]();
19+
20+
expect(
21+
getByText('Welcome to your contentful app. This is your config page.')
22+
).toBeInTheDocument();
23+
});
24+
});

‎src/components/ConfigScreen.tsx

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React, { Component } from 'react';
2+
import { AppExtensionSDK } from 'contentful-ui-extensions-sdk';
3+
import { Heading, Form, Workbench, Paragraph } from '@contentful/forma-36-react-components';
4+
import { css } from 'emotion';
5+
6+
export interface AppInstallationParameters {}
7+
8+
interface ConfigProps {
9+
sdk: AppExtensionSDK;
10+
}
11+
12+
interface ConfigState {
13+
parameters: AppInstallationParameters;
14+
}
15+
16+
export default class Config extends Component<ConfigProps, ConfigState> {
17+
constructor(props: ConfigProps) {
18+
super(props);
19+
this.state = { parameters: {} };
20+
21+
// `onConfigure` allows to configure a callback to be
22+
// invoked when a user attempts to install the app or update
23+
// its configuration.
24+
props.sdk.app.onConfigure(() => this.onConfigure());
25+
}
26+
27+
async componentDidMount() {
28+
// Get current parameters of the app.
29+
// If the app is not installed yet, `parameters` will be `null`.
30+
const parameters: AppInstallationParameters | null = await this.props.sdk.app.getParameters();
31+
32+
this.setState(parameters ? { parameters } : this.state, () => {
33+
// Once preparation has finished, call `setReady` to hide
34+
// the loading screen and present the app to a user.
35+
this.props.sdk.app.setReady();
36+
});
37+
}
38+
39+
onConfigure = async () => {
40+
// This method will be called when a user clicks on "Install"
41+
// or "Save" in the configuration screen.
42+
// for more details see https://www.contentful.com/developers/docs/extensibility/ui-extensions/sdk-reference/#register-an-app-configuration-hook
43+
44+
// Get current the state of EditorInterface and other entities
45+
// related to this app installation
46+
const currentState = await this.props.sdk.app.getCurrentState();
47+
48+
return {
49+
// Parameters to be persisted as the app configuration.
50+
parameters: this.state.parameters,
51+
// In case you don't want to submit any update to app
52+
// locations, you can just pass the currentState as is
53+
targetState: currentState
54+
};
55+
};
56+
57+
render() {
58+
return (
59+
<Workbench className={css({ margin: '80px' })}>
60+
<Form>
61+
<Heading>App Config</Heading>
62+
<Paragraph>Welcome to your contentful app. This is your config page.</Paragraph>
63+
</Form>
64+
</Workbench>
65+
);
66+
}
67+
}

‎src/components/Dialog.spec.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import Dialog from './Dialog';
3+
import { render } from '@testing-library/react';
4+
5+
describe('Dialog component', () => {
6+
it('Component text exists', () => {
7+
const { getByText } = render(<Dialog />);
8+
9+
expect(getByText('Hello Dialog Component')).toBeInTheDocument();
10+
});
11+
});

‎src/components/Dialog.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
import { Paragraph } from '@contentful/forma-36-react-components';
3+
import { DialogExtensionSDK } from 'contentful-ui-extensions-sdk';
4+
5+
interface DialogProps {
6+
sdk: DialogExtensionSDK;
7+
}
8+
9+
const Dialog = (props: DialogProps) => {
10+
return <Paragraph>Hello Dialog Component</Paragraph>;
11+
};
12+
13+
export default Dialog;

‎src/components/EntryEditor.spec.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import EntryEditor from './EntryEditor';
3+
import { render } from '@testing-library/react';
4+
5+
describe('Entry component', () => {
6+
it('Component text exists', () => {
7+
const { getByText } = render(<EntryEditor />);
8+
9+
expect(getByText('Hello Entry Editor Component')).toBeInTheDocument();
10+
});
11+
});

‎src/components/EntryEditor.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
import { Paragraph } from '@contentful/forma-36-react-components';
3+
import { EditorExtensionSDK } from 'contentful-ui-extensions-sdk';
4+
5+
interface EditorProps {
6+
sdk: EditorExtensionSDK;
7+
}
8+
9+
const Entry = (props: EditorProps) => {
10+
return <Paragraph>Hello Entry Editor Component</Paragraph>;
11+
};
12+
13+
export default Entry;

‎src/components/Field.spec.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import Field from './Field';
3+
import { render } from '@testing-library/react';
4+
5+
describe('Field component', () => {
6+
it('Component text exists', () => {
7+
const { getByText } = render(<Field />);
8+
9+
expect(getByText('Hello Entry Field Component')).toBeInTheDocument();
10+
});
11+
});

‎src/components/Field.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import { Paragraph } from '@contentful/forma-36-react-components';
3+
import { FieldExtensionSDK } from 'contentful-ui-extensions-sdk';
4+
5+
interface FieldProps {
6+
sdk: FieldExtensionSDK;
7+
}
8+
9+
const Field = (props: FieldProps) => {
10+
// If you only want to extend Contentful's default editing experience
11+
// reuse Contentful's editor components
12+
// -> https://www.contentful.com/developers/docs/extensibility/field-editors/
13+
return <Paragraph>Hello Entry Field Component</Paragraph>;
14+
};
15+
16+
export default Field;

‎src/components/LocalhostWarning.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import { Paragraph, TextLink, Note } from '@contentful/forma-36-react-components';
3+
4+
const LocalhostWarning = () => {
5+
return (
6+
<div
7+
style={{
8+
display: 'flex',
9+
justifyContent: 'center',
10+
marginTop: '40px'
11+
}}>
12+
<Note title="App running outside of Contentful" style={{ maxWidth: '800px' }}>
13+
<Paragraph>
14+
Contentful Apps need to run inside the Contentful web app to function properly. Install
15+
the app into a space and render your app into one of the{' '}
16+
<TextLink href="https://www.contentful.com/developers/docs/extensibility/ui-extensions/sdk-reference/#locations">
17+
available locations
18+
</TextLink>
19+
.
20+
</Paragraph>
21+
<br />
22+
23+
<Paragraph>
24+
Follow{' '}
25+
<TextLink href="https://www.contentful.com/developers/docs/extensibility/app-framework/tutorial/">
26+
our guide
27+
</TextLink>{' '}
28+
to get started or{' '}
29+
<TextLink href="https://app.contentful.com/deeplink?link=apps">open Contentful</TextLink>{' '}
30+
to manage your app.
31+
</Paragraph>
32+
</Note>
33+
</div>
34+
);
35+
};
36+
37+
export default LocalhostWarning;

‎src/components/Page.spec.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import Page from './Page';
3+
import { render } from '@testing-library/react';
4+
5+
describe('Page component', () => {
6+
it('Component text exists', () => {
7+
const { getByText } = render(<Page />);
8+
9+
expect(getByText('Hello Page Component')).toBeInTheDocument();
10+
});
11+
});

‎src/components/Page.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
import { Paragraph } from '@contentful/forma-36-react-components';
3+
import { PageExtensionSDK } from 'contentful-ui-extensions-sdk';
4+
5+
interface PageProps {
6+
sdk: PageExtensionSDK;
7+
}
8+
9+
const Page = (props: PageProps) => {
10+
return <Paragraph>Hello Page Component</Paragraph>;
11+
};
12+
13+
export default Page;

‎src/components/Sidebar.spec.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import Sidebar from './Sidebar';
3+
import { render } from '@testing-library/react';
4+
5+
describe('Sidebar component', () => {
6+
it('Component text exists', () => {
7+
const { getByText } = render(<Sidebar />);
8+
9+
expect(getByText('Hello Sidebar Component')).toBeInTheDocument();
10+
});
11+
});

‎src/components/Sidebar.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
import { Paragraph } from '@contentful/forma-36-react-components';
3+
import { SidebarExtensionSDK } from 'contentful-ui-extensions-sdk';
4+
5+
interface SidebarProps {
6+
sdk: SidebarExtensionSDK;
7+
}
8+
9+
const Sidebar = (props: SidebarProps) => {
10+
return <Paragraph>Hello Sidebar Component</Paragraph>;
11+
};
12+
13+
export default Sidebar;

‎src/index.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
html,
2+
body,
3+
div {
4+
margin: 0;
5+
padding: 0;
6+
border: 0;
7+
font-size: 100%;
8+
font: inherit;
9+
vertical-align: baseline;
10+
}

0 commit comments

Comments
 (0)