@valiantys/atlassian-app-frontend 1.0.0

package/atlassian-app-standalone-DJOVbfp6.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),g=require("@atlaskit/app-provider"),o=require("react"),e=require("./index.js");require("@atlaskit/heading");require("@atlaskit/primitives");require("@atlaskit/button");require("@atlaskit/button/new");require("@atlaskit/form");require("@atlaskit/section-message");require("@atlaskit/select");require("@atlaskit/spinner");require("react-router-dom");require("@atlaskit/flag");require("@atlaskit/icon/glyph/check-circle");require("@atlaskit/icon/glyph/error");require("@atlaskit/icon/glyph/info");require("@atlaskit/icon/glyph/warning");require("@atlaskit/tokens");const w=o.lazy(()=>Promise.resolve().then(()=>require("./index-CP8emE0q.js")));function k({initialMockViewContext:c,backendUrl:i,remoteUrl:p,doCheckWorkspace:m,appName:a,doCheckResource:h,modalOpenerConfig:v,modalContextConfig:I,children:A}){const[u,S]=o.useState(),[n,j]=o.useState(),{getAuthToken:s}=e.useOAuth(),x=o.useCallback(()=>e.atlassianOAuthJiraFetch(s(),u??""),[s,u]),R=o.useCallback(()=>e.atlassianOAuthConfluenceFetch(s(),u??""),[s,u]),C=o.useCallback(()=>e.atlassianOAuthBitbucketFetch(s()),[s]),P=o.useCallback(async l=>{if(i&&h){const q=l??localStorage.getItem(`${a}-user-resource-id`)??"",d=await new e.AtlassianUserResourceService().checkUserChosenResource(s(),q);return d.hasChosen&&(localStorage.setItem(`${a}-user-resource-id`,d.resource.id),S(d.resource.id)),d}else return{hasChosen:!0}},[i,s,a,h]);o.useEffect(()=>{const l=u??(c==null?void 0:c.cloudId)??"";if(!n||n.cloudId!==l){const q={...n||c,cloudId:l};j(q)}},[c,u,n]);const F=o.useCallback(()=>i?e.getOauthFetchInvokeImpl(i,s(),u??""):void 0,[u,s,i]);let r=A;m&&(r=t.jsx(e.FeatureChosenWorkspaceCheck,{appName:a,children:r})),v&&(r=t.jsx(e.ModalServiceProvider,{modalService:new e.WindowModalService(v.defaultUrl,v.resourceMap),children:r})),n&&(r=t.jsx(e.ViewContextProvider,{viewContext:I?new e.ModalViewContext(n,I.openerOrigin):new e.MockViewContext(n),children:r})),r=t.jsx(e.HostRouterProvider,{hostRouter:new e.WindowHostRouter,children:t.jsx(e.RequestBitbucketProvider,{requestBitbucketImplementation:C(),children:t.jsx(e.RequestConfluenceProvider,{requestConfluenceImplementation:R(),children:t.jsx(e.RequestJiraProvider,{requestJiraImplementation:x(),children:r})})})});const f=F();return f&&(r=t.jsx(e.BackendAdapterProvider,{invokeImplementation:f,children:r})),p&&(r=t.jsx(e.RemoteAdapterProvider,{invokeRemoteImplementation:e.oauthFetchInvokeRemote(p),children:r})),h&&(r=t.jsx(w,{checkResource:P,children:r})),t.jsx(g,{children:t.jsx(e.AppFlagsProviderAtlasKit,{children:r})})}exports.AtlassianAppStandalone=k;exports.default=k;

package/atlassian-app-standalone-DyyH6WPO.mjs

@@ -0,0 +1,111 @@
+import { jsx as t } from "react/jsx-runtime";
+import q from "@atlaskit/app-provider";
+import { lazy as B, useState as I, useCallback as i, useEffect as W } from "react";
+import { useOAuth as J, atlassianOAuthJiraFetch as O, atlassianOAuthConfluenceFetch as x, atlassianOAuthBitbucketFetch as y, AtlassianUserResourceService as E, getOauthFetchInvokeImpl as H, ModalServiceProvider as T, WindowModalService as $, ViewContextProvider as b, ModalViewContext as j, MockViewContext as z, HostRouterProvider as K, WindowHostRouter as M, RequestBitbucketProvider as D, RequestConfluenceProvider as G, RequestJiraProvider as L, BackendAdapterProvider as Q, RemoteAdapterProvider as X, oauthFetchInvokeRemote as Y, AppFlagsProviderAtlasKit as Z, FeatureChosenWorkspaceCheck as _ } from "./index.mjs";
+import "@atlaskit/heading";
+import "@atlaskit/primitives";
+import "@atlaskit/button";
+import "@atlaskit/button/new";
+import "@atlaskit/form";
+import "@atlaskit/section-message";
+import "@atlaskit/select";
+import "@atlaskit/spinner";
+import "react-router-dom";
+import "@atlaskit/flag";
+import "@atlaskit/icon/glyph/check-circle";
+import "@atlaskit/icon/glyph/error";
+import "@atlaskit/icon/glyph/info";
+import "@atlaskit/icon/glyph/warning";
+import "@atlaskit/tokens";
+const U = B(
+  () => import("./index-CBKhl1FP.mjs")
+);
+function Ie({
+  initialMockViewContext: s,
+  backendUrl: c,
+  remoteUrl: p,
+  doCheckWorkspace: A,
+  appName: u,
+  doCheckResource: h,
+  modalOpenerConfig: l,
+  modalContextConfig: v,
+  children: R
+}) {
+  const [o, k] = I(), [n, F] = I(), { getAuthToken: r } = J(), S = i(() => O(r(), o ?? ""), [r, o]), P = i(() => x(r(), o ?? ""), [r, o]), g = i(() => y(r()), [r]), w = i(
+    async (d) => {
+      if (c && h) {
+        const m = d ?? localStorage.getItem(`${u}-user-resource-id`) ?? "", a = await new E().checkUserChosenResource(
+          r(),
+          m
+        );
+        return a.hasChosen && (localStorage.setItem(
+          `${u}-user-resource-id`,
+          a.resource.id
+        ), k(a.resource.id)), a;
+      } else
+        return { hasChosen: !0 };
+    },
+    [c, r, u, h]
+  );
+  W(() => {
+    const d = o ?? (s == null ? void 0 : s.cloudId) ?? "";
+    if (!n || n.cloudId !== d) {
+      const m = {
+        ...n || s,
+        cloudId: d
+      };
+      F(m);
+    }
+  }, [s, o, n]);
+  const C = i(
+    () => c ? H(c, r(), o ?? "") : void 0,
+    [o, r, c]
+  );
+  let e = R;
+  A && (e = /* @__PURE__ */ t(_, { appName: u, children: e })), l && (e = /* @__PURE__ */ t(
+    T,
+    {
+      modalService: new $(
+        l.defaultUrl,
+        l.resourceMap
+      ),
+      children: e
+    }
+  )), n && (e = /* @__PURE__ */ t(
+    b,
+    {
+      viewContext: v ? new j(n, v.openerOrigin) : new z(n),
+      children: e
+    }
+  )), e = /* @__PURE__ */ t(K, { hostRouter: new M(), children: /* @__PURE__ */ t(
+    D,
+    {
+      requestBitbucketImplementation: g(),
+      children: /* @__PURE__ */ t(
+        G,
+        {
+          requestConfluenceImplementation: P(),
+          children: /* @__PURE__ */ t(
+            L,
+            {
+              requestJiraImplementation: S(),
+              children: e
+            }
+          )
+        }
+      )
+    }
+  ) });
+  const f = C();
+  return f && (e = /* @__PURE__ */ t(Q, { invokeImplementation: f, children: e })), p && (e = /* @__PURE__ */ t(
+    X,
+    {
+      invokeRemoteImplementation: Y(p),
+      children: e
+    }
+  )), h && (e = /* @__PURE__ */ t(U, { checkResource: w, children: e })), /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(Z, { children: e }) });
+}
+export {
+  Ie as AtlassianAppStandalone,
+  Ie as default
+};

package/examples/backend/index.ts

@@ -0,0 +1,44 @@
+import {
+  bootstrapExpress,
+  expressDefaults,
+  registerFunctions,
+} from '@valiantys/atlassian-app-backend';
+
+import Resolver from '@forge/resolver';
+import * as dotenv from 'dotenv';
+
+import { getForgeFunctions } from './lib/forge-functions';
+import { getStandaloneFunctions } from './lib/standalone-functions';
+
+dotenv.config();
+
+const IS_STANDALONE = process.env.IS_STANDALONE === 'true';
+
+if (IS_STANDALONE) {
+  const port = parseInt(process.env.PORT || '3000');
+
+  // OAuth settings
+  const clientId = process.env.ATLASSIAN_OAUTH_CLIENT_ID || '';
+  const clientSecret = process.env.ATLASSIAN_OAUTH_CLIENT_SECRET || '';
+
+  // Mock Forge storage settings
+  const filePath = process.env.FORGE_STORAGE_FILE_PATH || '';
+  const indexFieldMapping = JSON.parse(
+    process.env.FORGE_STORAGE_INDEX_FIELD_MAPPING || '{}'
+  );
+
+  bootstrapExpress(
+    getStandaloneFunctions(),
+    'jira',
+    { clientId, clientSecret },
+    { ...expressDefaults, port },
+    { indexFieldMapping, filePath }
+  );
+}
+
+let resolver: Resolver | null = null;
+if (!IS_STANDALONE) {
+  resolver = new Resolver();
+  registerFunctions(resolver, getForgeFunctions());
+}
+export const handler = resolver?.getDefinitions();

package/examples/backend/lib/forge-functions.d.ts

@@ -0,0 +1,3 @@
+import { ResolverFunctionMap } from '../../../../../atlassian-app-backend/src/index.ts';
+
+export declare function getForgeFunctions(): ResolverFunctionMap;

package/examples/backend/lib/forge-functions.ts

@@ -0,0 +1,23 @@
+import { storage, startsWith, WhereConditions } from '@forge/api';
+import {
+  createServerSideForgeProductFetchService,
+  ResolverFunctionMap,
+} from '@valiantys/atlassian-app-backend';
+
+import { handlerFunctions } from './handler-functions';
+
+export function getForgeFunctions(): ResolverFunctionMap {
+  const productFetchService = createServerSideForgeProductFetchService(
+    'user',
+    'jira'
+  );
+  const forgeStorageService = {
+    storage,
+    WhereConditions,
+    startsWith,
+  };
+
+  // Here you could initialize any other deployed-specific services or config
+  // to pass to handlerFunctions as needed.
+  return handlerFunctions(productFetchService, forgeStorageService);
+}

package/examples/backend/lib/handler-functions.d.ts

@@ -0,0 +1,58 @@
+import {
+  AtlassianProductFetchService,
+  ForgeRequest,
+  ForgeStorageService,
+} from '../../../../../atlassian-app-backend/src/index.ts';
+
+export declare function handlerFunctions(
+  productFetchService: AtlassianProductFetchService<'jira'>,
+  forgeStorageService: ForgeStorageService
+): {
+  getText: {
+    function: () => {
+      text: string;
+    };
+  };
+  getIssueTypes: {
+    function: () => Promise<IssueTypeDetails[]>;
+  };
+  /**
+   * Forge storage examples
+   */
+  getMyName: {
+    function: () => Promise<{
+      name: any;
+    }>;
+  };
+  setMyName: {
+    function: ({
+      payload,
+    }: ForgeRequest<{
+      name: string;
+    }>) => Promise<{
+      name: any;
+    }>;
+    updatesForgeStorage: boolean;
+  };
+  /**
+   * This example demonstrates how one can access the user's account ID
+   * in either deployed or standalone mode.
+   * This context is made available on every backend request.
+   */
+  whoAmI: {
+    function: ({ context }: ForgeRequest<void>) => Promise<{
+      myId: string;
+    }>;
+  };
+};
+interface IssueTypeDetails {
+  avatarId: number;
+  description: string;
+  hierarchyLevel: number;
+  iconUrl: string;
+  id: string;
+  name: string;
+  self: string;
+  subtask: boolean;
+}
+export {};

package/examples/backend/lib/handler-functions.ts

@@ -0,0 +1,72 @@
+import {
+  AtlassianProductFetchService,
+  ForgeRequest,
+  ForgeStorageService,
+} from '@valiantys/atlassian-app-backend';
+
+// Add any additional environment specific config/services as parameters
+// to handlerFunctions()
+export function handlerFunctions(
+  productFetchService: AtlassianProductFetchService<'jira'>,
+  forgeStorageService: ForgeStorageService
+) {
+  return {
+    getText: {
+      function: () => {
+        return { text: 'Hello world!' };
+      },
+    },
+
+    /*
+      Making an Atlassian product API request (requestJira)
+     */
+    getIssueTypes: {
+      function: () =>
+        productFetchService.fetch<IssueTypeDetails[]>({
+          url: productFetchService.route`/rest/api/2/issuetype`,
+          method: 'GET',
+        }),
+    },
+
+    /**
+     * Forge storage examples
+     */
+    getMyName: {
+      function: async () => {
+        const name = await forgeStorageService.storage.get('myName');
+        return { name };
+      },
+    },
+    setMyName: {
+      function: async ({ payload }: ForgeRequest<{ name: string }>) => {
+        await forgeStorageService.storage.set('myName', payload.name);
+        const name = await forgeStorageService.storage.get('myName');
+        return { name };
+      },
+      updatesForgeStorage: true, // triggers save of local file when in standalone mode
+    },
+
+    /**
+     * This example demonstrates how one can access the user's account ID
+     * in either deployed or standalone mode.
+     * This context is made available on every backend request.
+     */
+    whoAmI: {
+      function: async ({ context }: ForgeRequest<void>) => {
+        console.log(context.accountId);
+        return { myId: context.accountId };
+      },
+    },
+  };
+}
+
+interface IssueTypeDetails {
+  avatarId: number;
+  description: string;
+  hierarchyLevel: number;
+  iconUrl: string;
+  id: string;
+  name: string;
+  self: string;
+  subtask: boolean;
+}

package/examples/backend/lib/standalone-functions.d.ts

@@ -0,0 +1,3 @@
+import { ResolverFunctionFactory } from '../../../../../atlassian-app-backend/src/index.ts';
+
+export declare function getStandaloneFunctions(): ResolverFunctionFactory<'jira'>;

package/examples/backend/lib/standalone-functions.ts

@@ -0,0 +1,17 @@
+import {
+  AtlassianProductFetchService,
+  ForgeStorageServiceStandalone,
+  ResolverFunctionFactory,
+} from '@valiantys/atlassian-app-backend';
+import { handlerFunctions } from './handler-functions';
+
+export function getStandaloneFunctions(): ResolverFunctionFactory<'jira'> {
+  return (
+    productFetchService: AtlassianProductFetchService<'jira'>,
+    forgeStorageService: ForgeStorageServiceStandalone
+  ) => {
+    // Here you could initialize any other standalone-specific services or config
+    // to pass to handlerFunctions as needed.
+    return handlerFunctions(productFetchService, forgeStorageService);
+  };
+}

package/examples/client-sample-.env

@@ -0,0 +1,5 @@
+VITE_ATLASSIAN_OAUTH_CLIENT_ID=<ATLASSIAN_OAUTH_CLIENT_ID>
+
+# Set to deployed url/port in non local environment
+VITE_STANDALONE_BACKEND_URL='http://localhost'
+VITE_STANDALONE_BACKEND_PORT=3000

package/examples/hello-world/app.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import('react/jsx-runtime').JSX.Element;
+export default App;

package/examples/hello-world/app.tsx

@@ -0,0 +1,77 @@
+import {
+  AtlassianApp,
+  CommonResolverPaths,
+} from '@valiantys/atlassian-app-frontend';
+
+import { Hello } from './example-components/hello';
+import { HelloWithLoadingSpinner } from './example-components/hello-with-loading-spinner';
+import { HostRouterExample } from './example-components/host-router-example';
+import { ListAssets } from './example-components/list-assets';
+import { ViewContextExample } from './example-components/view-context-example';
+import { OpenModalExample } from './example-components/open-modal-example';
+import { IssueTypesExample } from './example-components/issue-types-example';
+import { ExampleBox } from './example-box';
+import { ForgeStorageExample } from './example-components/forge-storage-example';
+import { IssueTypesExampleBackend } from './example-components/issue-types-example-backend';
+import { WhoAmI } from './example-components/who-am-i';
+
+const backendUrl = `${import.meta.env.VITE_STANDALONE_BACKEND_URL}:${import.meta.env.VITE_STANDALONE_BACKEND_PORT}/api/`;
+
+function App() {
+  return (
+    <AtlassianApp
+      appName="hello"
+      doCheckWorkspace={true} // Needed for querying JSM Assets
+      standaloneConfig={{
+        backendUrl,
+        oauthConfig: {
+          appName: 'hello',
+          codeTokenExchangeUrl: `${backendUrl}${CommonResolverPaths.getOauthToken}`,
+          clientId: import.meta.env.VITE_ATLASSIAN_OAUTH_CLIENT_ID,
+          oAuthScopes: [
+            'read:jira-user',
+            'read:me',
+            'read:jira-work', // needed to query for Jira issues
+            'read:servicedesk-request', // needed to query for assets workspace ID
+            'read:cmdb-schema:jira', // needed to query for list of assets schemas
+          ],
+        },
+        modalOpenerConfig: { defaultUrl: 'http://localhost:4201/' },
+      }}
+      embeddedConfig={{}}
+    >
+      <ExampleBox title="Simple Invoke Example">
+        <Hello></Hello>
+      </ExampleBox>
+      <ExampleBox title="useLoadDataEffect Example">
+        <HelloWithLoadingSpinner></HelloWithLoadingSpinner>
+      </ExampleBox>
+      <ExampleBox title="useHostRouter Example">
+        <HostRouterExample></HostRouterExample>
+      </ExampleBox>
+      <ExampleBox title="useWorkspaceId and useRequestJira Example">
+        Asset Schemas: <ListAssets></ListAssets>
+      </ExampleBox>
+      <ExampleBox title="useViewContext Example">
+        <ViewContextExample></ViewContextExample>
+      </ExampleBox>
+      <ExampleBox title="Open Modal Example">
+        <OpenModalExample></OpenModalExample>
+      </ExampleBox>
+      <ExampleBox title="Calling Atlassian Product APIs from the frontend">
+        <IssueTypesExample></IssueTypesExample>
+      </ExampleBox>
+      <ExampleBox title="Calling Atlassian Product APIs from the backend">
+        <IssueTypesExampleBackend></IssueTypesExampleBackend>
+      </ExampleBox>
+      <ExampleBox title="Forge Storage Example">
+        <ForgeStorageExample></ForgeStorageExample>
+      </ExampleBox>
+      <ExampleBox title="Who Am I Example">
+        <WhoAmI></WhoAmI>
+      </ExampleBox>
+    </AtlassianApp>
+  );
+}
+
+export default App;

package/examples/hello-world/example-box.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+
+export declare function ExampleBox({
+  title,
+  children,
+}: PropsWithChildren<{
+  title: string;
+}>): import('react/jsx-runtime').JSX.Element;

package/examples/hello-world/example-box.tsx

@@ -0,0 +1,22 @@
+import Heading from '@atlaskit/heading';
+import { Box, xcss } from '@atlaskit/primitives';
+import { PropsWithChildren } from 'react';
+
+export function ExampleBox({
+  title,
+  children,
+}: PropsWithChildren<{ title: string }>) {
+  return (
+    <Box
+      padding="space.200"
+      xcss={xcss({
+        borderColor: 'color.border',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+      })}
+    >
+      <Heading size="small">{title}</Heading>
+      {children}
+    </Box>
+  );
+}

package/examples/hello-world/example-components/forge-storage-example.d.ts

@@ -0,0 +1 @@
+export declare function ForgeStorageExample(): import('react/jsx-runtime').JSX.Element;

package/examples/hello-world/example-components/forge-storage-example.tsx

@@ -0,0 +1,66 @@
+import { ButtonGroup } from '@atlaskit/button';
+import Button from '@atlaskit/button/new';
+import Form, { Field } from '@atlaskit/form';
+import { Box, Flex } from '@atlaskit/primitives';
+import Textfield from '@atlaskit/textfield';
+import { useBackendAdapter } from '@valiantys/atlassian-app-frontend';
+import { useCallback, useEffect, useState } from 'react';
+
+interface FormValue {
+  name?: string;
+}
+
+export function ForgeStorageExample() {
+  const [myName, setMyName] = useState<string | undefined>();
+  const { invoke } = useBackendAdapter();
+
+  const saveForm = useCallback(
+    async (formVal: FormValue) => {
+      try {
+        const updated = await invoke<FormValue, FormValue>(
+          'setMyName',
+          formVal
+        );
+        console.log({ updated });
+        setMyName(updated.name || 'World');
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    [invoke]
+  );
+
+  useEffect(() => {
+    invoke<{ name?: string }>('getMyName').then((r) =>
+      setMyName(r.name || 'World')
+    );
+  }, [invoke]);
+
+  return myName ? (
+    <Flex>
+      <Form<FormValue> onSubmit={saveForm}>
+        {({ formProps, submitting }) => (
+          <form {...formProps}>
+            <Field
+              aria-required={true}
+              name="name"
+              label="My name"
+              isRequired
+              defaultValue={myName}
+            >
+              {({ fieldProps }) => <Textfield {...fieldProps} />}
+            </Field>
+            <ButtonGroup>
+              <Button type="submit" appearance="primary" isLoading={submitting}>
+                Update
+              </Button>
+            </ButtonGroup>
+          </form>
+        )}
+      </Form>
+      <Box padding="space.500">Hello {myName}!</Box>
+    </Flex>
+  ) : (
+    <div>Hello!</div>
+  );
+}

package/examples/hello-world/example-components/hello-with-loading-spinner.d.ts

@@ -0,0 +1 @@
+export declare function HelloWithLoadingSpinner(): import('react/jsx-runtime').JSX.Element;

package/examples/hello-world/example-components/hello-with-loading-spinner.tsx

@@ -0,0 +1,24 @@
+import { useCallback } from 'react';
+
+import {
+  PageLoadingView,
+  useBackendAdapter,
+  useLoadDataEffect,
+} from '@valiantys/atlassian-app-frontend';
+
+export function HelloWithLoadingSpinner() {
+  const { invoke } = useBackendAdapter();
+
+  const requestFunction = useCallback(() => {
+    return invoke<{ text: string }>('getText');
+  }, [invoke]);
+
+  const { data, loading, error } = useLoadDataEffect<{ text: string }>(
+    requestFunction
+  );
+  return loading || error ? (
+    <PageLoadingView label="" loadingError={error} />
+  ) : (
+    <div>{data?.text}</div>
+  );
+}

package/examples/hello-world/example-components/hello.d.ts

@@ -0,0 +1 @@
+export declare function Hello(): import('react/jsx-runtime').JSX.Element;

package/examples/hello-world/example-components/hello.spec.tsx

@@ -0,0 +1,39 @@
+/***
+ Testing references:
+ https://testing-library.com/docs/react-testing-library/example-intro
+ https://testing-library.com/docs/queries/about#:~:text=queryOptions%2C%20waitForOptions))-,Summary,-Table
+ ***/
+
+import { act, render, screen } from '@testing-library/react';
+
+import {
+  AtlassianAppTest,
+  AtlassianAppTestProps,
+  defaultProps,
+} from '@valiantys/atlassian-app-frontend';
+
+import { Hello } from './hello';
+
+describe('HelloWorld', () => {
+  it('should render successfully', async () => {
+    await act(async () => {
+      // Setup mocks
+      const mockInvoke = jest.fn();
+      mockInvoke.mockReturnValue(Promise.resolve({ text: 'Hello World' }));
+      const appProps: AtlassianAppTestProps = {
+        ...defaultProps(jest.fn),
+        invoke: mockInvoke,
+      };
+
+      // Render the component (which calls invoke on first render)
+      render(
+        <AtlassianAppTest {...appProps}>
+          <Hello></Hello>
+        </AtlassianAppTest>
+      );
+    });
+
+    // Throws error if text is not found within timeout period
+    await screen.findByText('Hello World');
+  });
+});

package/examples/hello-world/example-components/hello.tsx

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+import { useBackendAdapter } from '@valiantys/atlassian-app-frontend';
+
+export function Hello() {
+  const [text, setText] = useState<string>('');
+  const { invoke } = useBackendAdapter();
+
+  useEffect(() => {
+    invoke<{ text: string }>('getText').then((t) => setText(t.text));
+  }, [invoke]);
+
+  return <div>{text}</div>;
+}

package/examples/hello-world/example-components/host-router-example.d.ts

@@ -0,0 +1 @@
+export declare function HostRouterExample(): import('react/jsx-runtime').JSX.Element;

package/examples/hello-world/example-components/host-router-example.tsx

@@ -0,0 +1,13 @@
+import { useHostRouter } from '@valiantys/atlassian-app-frontend';
+import Button from '@atlaskit/button/new';
+export function HostRouterExample() {
+  const hostRouter = useHostRouter();
+
+  return (
+    <div>
+      <Button onClick={() => void hostRouter.open('http://example.com/')}>
+        Navigate
+      </Button>
+    </div>
+  );
+}

package/examples/hello-world/example-components/issue-types-example-backend.d.ts

@@ -0,0 +1,4 @@
+/**
+ * This component invokes a resolver function on the Forge backend, which then invokes a Jira API.
+ */
+export declare function IssueTypesExampleBackend(): import('react/jsx-runtime').JSX.Element;