Tutorial - App building with AI

1
import { useEffect, useState } from 'react';
2
import { Stack, Heading, Text } from '@contentful/f36-components';
3
import { SidebarAppSDK } from '@contentful/app-sdk';
4
import { useSDK } from '@contentful/react-apps-toolkit';
5
6
const WORDS_PER_MINUTE = 200;
7
8
const Sidebar = () => {
9
  const sdk = useSDK<SidebarAppSDK>();
10
  const [bodyContent, setBodyContent] = useState<string>('');
11
12
  useEffect(() => {
13
    // Get initial value from the body field
14
    const bodyField = sdk.entry.fields.body;
15
    const initialValue = bodyField.getValue() || '';
16
    setBodyContent(initialValue);
17
18
    // Set up listener for field changes
19
    const unsubscribe = bodyField.onValueChanged((value: string) => {
20
      setBodyContent(value || '');
21
    });
22
23
    // Cleanup listener on unmount
24
    return () => {
25
      unsubscribe();
26
    };
27
  }, [sdk.entry.fields.body]);
28
29
  const calculateMetrics = (content: string) => {
30
    const wordCount = content
31
      .trim()
32
      .split(/\s+/)
33
      .filter((word) => word.length > 0).length;
34
    const readingTime = Math.ceil(wordCount / WORDS_PER_MINUTE);
35
36
    return {
37
      wordCount,
38
      readingTime: `${readingTime} min read`,
39
    };
40
  };
41
42
  const metrics = calculateMetrics(bodyContent);
43
44
  return (
45
    <Stack spacing="spacingM" padding="spacingM">
46
      <Heading>Blog Post Metrics</Heading>
47
      <Stack spacing="spacingXs">
48
        <Text fontWeight="fontWeightDemiBold">Word Count</Text>
49
        <Text>{metrics.wordCount} words</Text>
50
      </Stack>
51
      <Stack spacing="spacingXs">
52
        <Text fontWeight="fontWeightDemiBold">Reading Time</Text>
53
        <Text>{metrics.readingTime}</Text>
54
      </Stack>
55
    </Stack>
56
  );
57
};
58
59
export default Sidebar;

1
import { useEffect, useState } from 'react';
2
import { Stack, Heading, Text } from '@contentful/f36-components';
3
import { SidebarAppSDK } from '@contentful/app-sdk';
4
import { useSDK } from '@contentful/react-apps-toolkit';
5
6
const WORDS_PER_MINUTE = 200;
7
8
const Sidebar = () => {
9
  const sdk = useSDK<SidebarAppSDK>();
10
  const [bodyContent, setBodyContent] = useState<string>(
11
    sdk.entry.fields.body.getValue() || ''
12
  );
13
14
  useEffect(() => {
15
    // Set up listener for field changes
16
    const unsubscribe = sdk.entry.fields.body.onValueChanged(
17
      (value: string) => {
18
        setBodyContent(value || '');
19
      }
20
    );
21
22
    // Cleanup listener on unmount
23
    return () => {
24
      unsubscribe();
25
    };
26
  }, [sdk.entry.fields.body]);
27
28
  const calculateMetrics = (content: string) => {
29
    const wordCount = content
30
      .trim()
31
      .split(/\s+/)
32
      .filter((word) => word.length > 0).length;
33
    const readingTime = Math.ceil(wordCount / WORDS_PER_MINUTE);
34
35
    return {
36
      wordCount,
37
      readingTime: `${readingTime} min read`,
38
    };
39
  };
40
41
  const metrics = calculateMetrics(bodyContent);
42
43
  return (
44
    <Stack spacing="spacingM" padding="spacingM">
45
      <Heading>Blog Post Metrics</Heading>
46
      <Stack spacing="spacingXs">
47
        <Text fontWeight="fontWeightDemiBold">Word Count</Text>
48
        <Text>{metrics.wordCount} words</Text>
49
      </Stack>
50
      <Stack spacing="spacingXs">
51
        <Text fontWeight="fontWeightDemiBold">Reading Time</Text>
52
        <Text>{metrics.readingTime}</Text>
53
      </Stack>
54
    </Stack>
55
  );
56
};
57
58
export default Sidebar;

1
import { useCallback, useState, useEffect } from 'react';
2
import { ConfigAppSDK } from '@contentful/app-sdk';
3
import {
4
  Heading,
5
  Form,
6
  Paragraph,
7
  Flex,
8
  FormControl,
9
  TextInput,
10
} from '@contentful/f36-components';
11
import { css } from 'emotion';
12
import { /* useCMA, */ useSDK } from '@contentful/react-apps-toolkit';
13
14
export interface AppInstallationParameters {
15
  wordsPerMinute?: number;
16
}
17
18
const ConfigScreen = () => {
19
  const [parameters, setParameters] = useState<AppInstallationParameters>({
20
    wordsPerMinute: 200,
21
  });
22
  const sdk = useSDK<ConfigAppSDK>();
23
  /*
24
     To use the cma, inject it as follows.
25
     If it is not needed, you can remove the next line.
26
  */
27
  // const cma = useCMA();
28
29
  const onConfigure = useCallback(async () => {
30
    // This method will be called when a user clicks on "Install"
31
    // or "Save" in the configuration screen.
32
    // for more details see https://www.contentful.com/extensibility/ui-extensions/sdk-reference/#register-an-app-configuration-hook
33
34
    // Get current the state of EditorInterface and other entities
35
    // related to this app installation
36
    const currentState = await sdk.app.getCurrentState();
37
38
    return {
39
      // Parameters to be persisted as the app configuration.
40
      parameters,
41
      // In case you don't want to submit any update to app
42
      // locations, you can just pass the currentState as is
43
      targetState: currentState,
44
    };
45
  }, [parameters, sdk]);
46
47
  useEffect(() => {
48
    // `onConfigure` allows to configure a callback to be
49
    // invoked when a user attempts to install the app or update
50
    // its configuration.
51
    sdk.app.onConfigure(() => onConfigure());
52
  }, [sdk, onConfigure]);
53
54
  useEffect(() => {
55
    (async () => {
56
      // Get current parameters of the app.
57
      // If the app is not installed yet, `parameters` will be `null`.
58
      const currentParameters: AppInstallationParameters | null =
59
        await sdk.app.getParameters();
60
61
      if (currentParameters) {
62
        setParameters(currentParameters);
63
      }
64
65
      // Once preparation has finished, call `setReady` to hide
66
      // the loading screen and present the app to a user.
67
      sdk.app.setReady();
68
    })();
69
  }, [sdk]);
70
71
  return (
72
    <Flex
73
      flexDirection="column"
74
      className={css({ margin: '80px', maxWidth: '800px' })}
75
    >
76
      <Form>
77
        <Heading>Blog Post Metrics Configuration</Heading>
78
        <Paragraph>
79
          This app displays real-time blog post metrics in the sidebar,
80
          including word count and estimated reading time. Configure the reading
81
          speed below to match your target audience.
82
        </Paragraph>
83
        <FormControl>
84
          <FormControl.Label isRequired>Words per minute</FormControl.Label>
85
          <TextInput
86
            type="number"
87
            value={String(parameters.wordsPerMinute || 200)}
88
            onChange={(e) =>
89
              setParameters({
90
                ...parameters,
91
                wordsPerMinute: parseInt(e.target.value) || 200,
92
              })
93
            }
94
          />
95
          <FormControl.HelpText>
96
            Average reading speed used to calculate estimated reading time.
97
            Default is 200 words per minute (general audience). Use 250-300 for
98
            faster readers or simpler content.
99
          </FormControl.HelpText>
100
        </FormControl>
101
      </Form>
102
    </Flex>
103
  );
104
};
105
106
export default ConfigScreen;

1
import { useEffect, useState } from 'react';
2
import { Note, List } from '@contentful/f36-components';
3
import { SidebarAppSDK } from '@contentful/app-sdk';
4
import { useSDK } from '@contentful/react-apps-toolkit';
5
import { AppInstallationParameters } from './ConfigScreen';
6
7
const Sidebar = () => {
8
  const sdk = useSDK<SidebarAppSDK>();
9
  const [bodyContent, setBodyContent] = useState<string>(
10
    sdk.entry.fields.body.getValue() || ''
11
  );
12
13
  const parameters = sdk.parameters.installation as AppInstallationParameters;
14
  const wordsPerMinute = parameters.wordsPerMinute || 200;
15
16
  useEffect(() => {
17
    // Set up listener for field changes
18
    const unsubscribe = sdk.entry.fields.body.onValueChanged(
19
      (value: string) => {
20
        setBodyContent(value || '');
21
      }
22
    );
23
24
    // Cleanup listener on unmount
25
    return () => {
26
      unsubscribe();
27
    };
28
  }, [sdk.entry.fields.body]);
29
30
  const calculateMetrics = (content: string) => {
31
    const wordCount = content
32
      .trim()
33
      .split(/\s+/)
34
      .filter((word) => word.length > 0).length;
35
    const readingTime = Math.ceil(wordCount / wordsPerMinute);
36
37
    return {
38
      wordCount,
39
      readingTime: `${readingTime} min read`,
40
    };
41
  };
42
43
  const metrics = calculateMetrics(bodyContent);
44
45
  return (
46
    <Info title="Blog Post Metrics">
47
      <List>
48
        <List.Item>Word Count: {metrics.wordCount} words</List.Item>
49
        <List.Item>Reading Time: {metrics.readingTime}</List.Item>
50
      </List>
51
    </Info>
52
  );
53
};
54
55
export default Sidebar;

1
import { useCallback, useState, useEffect } from 'react';
2
import { ConfigAppSDK } from '@contentful/app-sdk';
3
import {
4
  Heading,
5
  Form,
6
  Paragraph,
7
  Flex,
8
  FormControl,
9
  TextInput,
10
} from '@contentful/f36-components';
11
import { css } from 'emotion';
12
import { /* useCMA, */ useSDK } from '@contentful/react-apps-toolkit';
13
14
export interface AppInstallationParameters {
15
  wordsPerMinute?: number;
16
}
17
18
const ConfigScreen = () => {
19
  const [parameters, setParameters] = useState<AppInstallationParameters>({
20
    wordsPerMinute: 200,
21
  });
22
  const sdk = useSDK<ConfigAppSDK>();
23
  /*
24
     To use the cma, inject it as follows.
25
     If it is not needed, you can remove the next line.
26
  */
27
  // const cma = useCMA();
28
29
  const onConfigure = useCallback(async () => {
30
    // This method will be called when a user clicks on "Install"
31
    // or "Save" in the configuration screen.
32
    // for more details see https://www.contentful.com/extensibility/ui-extensions/sdk-reference/#register-an-app-configuration-hook
33
34
    // Validate that wordsPerMinute is a valid number
35
    const wordsPerMinute = parameters.wordsPerMinute;
36
    if (!wordsPerMinute || wordsPerMinute <= 0) {
37
      sdk.notifier.error('Words per minute must be a valid positive number');
38
      return false;
39
    }
40
41
    // Get current the state of EditorInterface and other entities
42
    // related to this app installation
43
    const currentState = await sdk.app.getCurrentState();
44
45
    return {
46
      // Parameters to be persisted as the app configuration.
47
      parameters,
48
      // In case you don't want to submit any update to app
49
      // locations, you can just pass the currentState as is
50
      targetState: currentState,
51
    };
52
  }, [parameters, sdk]);
53
54
  useEffect(() => {
55
    // `onConfigure` allows to configure a callback to be
56
    // invoked when a user attempts to install the app or update
57
    // its configuration.
58
    sdk.app.onConfigure(() => onConfigure());
59
  }, [sdk, onConfigure]);
60
61
  useEffect(() => {
62
    (async () => {
63
      // Get current parameters of the app.
64
      // If the app is not installed yet, `parameters` will be `null`.
65
      const currentParameters: AppInstallationParameters | null =
66
        await sdk.app.getParameters();
67
68
      if (currentParameters) {
69
        setParameters(currentParameters);
70
      }
71
72
      // Once preparation has finished, call `setReady` to hide
73
      // the loading screen and present the app to a user.
74
      sdk.app.setReady();
75
    })();
76
  }, [sdk]);
77
78
  return (
79
    <Flex
80
      flexDirection="column"
81
      className={css({ margin: '80px auto', maxWidth: '800px' })}
82
    >
83
      <Form>
84
        <Heading>Blog Post Metrics Configuration</Heading>
85
        <Paragraph>
86
          This app displays real-time blog post metrics in the sidebar,
87
          including word count and estimated reading time. Configure the reading
88
          speed below to match your target audience.
89
        </Paragraph>
90
        <FormControl>
91
          <FormControl.Label isRequired>Words per minute</FormControl.Label>
92
          <TextInput
93
            type="number"
94
            value={
95
              parameters.wordsPerMinute !== undefined
96
                ? String(parameters.wordsPerMinute)
97
                : ''
98
            }
99
            onChange={(e) => {
100
              const value = e.target.value;
101
              setParameters({
102
                ...parameters,
103
                wordsPerMinute: value === '' ? undefined : parseInt(value),
104
              });
105
            }}
106
          />
107
          <FormControl.HelpText>
108
            Average reading speed used to calculate estimated reading time.
109
            Default is 200 words per minute (general audience). Use 250-300 for
110
            faster readers or simpler content.
111
          </FormControl.HelpText>
112
        </FormControl>
113
      </Form>
114
    </Flex>
115
  );
116
};
117
118
export default ConfigScreen;