chore: update apps (#12)

* chore: update apps * chore: update apps * chore: fix lint * chore: fix lint * chore: linting * chore: ignore patt * chore: update to latest cli version * chore: update to new structure * chore. use typescipt version that is supported by tyscript es
Frontify · Sep 11, 2024 · 9fa6b00 · 9fa6b00
1 parent 46dbd40
commit 9fa6b00
Show file tree

Hide file tree

Showing 31 changed files with 2,515 additions and 4,901 deletions.
diff --git a/examples/app-settings/.eslintrc.cjs b/examples/app-settings/.eslintrc.cjs
diff --git a/examples/app-settings/eslint.config.js b/examples/app-settings/eslint.config.js
@@ -0,0 +1,28 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+    { ignores: ["dist"] },
+    {
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        files: ["**/*.{ts,tsx}"],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser,
+        },
+        plugins: {
+            "react-hooks": reactHooks,
+            "react-refresh": reactRefresh,
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            "react-refresh/only-export-components": [
+                "warn",
+                { allowConstantExport: true },
+            ],
+        },
+    }
+);
diff --git a/examples/app-settings/manifest.json b/examples/app-settings/manifest.json
@@ -5,6 +5,9 @@
     "metadata": {
         "version": 1
     },
+    "permissions": {
+        "scopes": ["basic:read", "basic:write"]
+    },
     "surfaces": {
         "mediaLibrary": {
             "assetAction": {

diff --git a/examples/app-settings/package.json b/examples/app-settings/package.json
@@ -11,23 +11,26 @@
         "typecheck": "tsc --noEmit"
     },
     "dependencies": {
-        "@frontify/app-bridge-app": "^0.0.5",
-        "@frontify/fondue": "^12.1.2",
-        "@frontify/platform-app": "^0.1.4",
+        "@frontify/app-bridge-app": "^0.0.14",
+        "@frontify/fondue": "^12.2.10",
+        "@frontify/platform-app": "^0.1.10",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },
     "devDependencies": {
-        "@frontify/eslint-config-react": "^0.17.6",
-        "@frontify/frontify-cli": "^5.7.0",
-        "@types/node": "^20.12.12",
+        "@eslint/js": "^9.9.0",
+        "@frontify/frontify-cli": "^5.7.7",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "autoprefixer": "^10.4.19",
-        "eslint": "^8.57.0",
+        "eslint": "^9.9.0",
+        "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+        "eslint-plugin-react-refresh": "^0.4.11",
+        "globals": "^15.9.0",
         "postcss": "^8.4.38",
         "prettier": "^3.2.5",
         "tailwindcss": "^3.4.3",
-        "typescript": "^5.4.5"
+        "typescript": "^5.6.0",
+        "typescript-eslint": "^8.5.0"
     }
 }
diff --git a/examples/app-settings/src/App.tsx b/examples/app-settings/src/App.tsx
@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import './App.css';
-import { AppBridgePlatformApp, appSettings } from '@frontify/app-bridge-app';
+import { appContext, appSettings } from '@frontify/app-bridge-app';
 import { Flex, FOCUS_VISIBLE_STYLE, Heading, IconArrowOutExternal20, merge } from '@frontify/fondue';
 import { Button } from '@frontify/fondue/components';
 
@@ -13,7 +13,7 @@ export const App = () => {
      * There are more hooks and utilities available that you can use.
      * For more information, please refer to our documentation.
      */
-    const appBridge = new AppBridgePlatformApp();
+    const context = appContext();
 
     /**
      * We recommend building your apps using our Design System, Fondue.
@@ -37,7 +37,7 @@ export const App = () => {
                 <p className="tw-text-text">
                     Congratulations! You have successfully connected your app to our platform.
                 </p>
-                <p className="tw-text-text-weak tw-text-body-small">Surface: {appBridge.context().get().surface}</p>
+                <p className="tw-text-text-weak tw-text-body-small">Surface: {context.surface}</p>
             </Flex>
 
             <a

diff --git a/examples/app-settings/tsconfig.app.json b/examples/app-settings/tsconfig.app.json
@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "module": "ESNext",
+        "skipLibCheck": true,
+
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "isolatedModules": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+        "jsx": "react-jsx",
+
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "include": ["src"]
+}
diff --git a/examples/app-settings/tsconfig.json b/examples/app-settings/tsconfig.json
@@ -1,21 +1,7 @@
 {
-    "compilerOptions": {
-        "target": "ES2021",
-        "useDefineForClassFields": true,
-        "lib": ["ES2021", "DOM", "DOM.Iterable"],
-        "module": "ESNext",
-        "skipLibCheck": true,
-        "moduleResolution": "bundler",
-        "allowImportingTsExtensions": true,
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "noEmit": true,
-        "jsx": "react-jsx",
-        "strict": true,
-        "noUnusedLocals": true,
-        "noUnusedParameters": true,
-        "noFallthroughCasesInSwitch": true
-    },
-    "include": ["src"],
-    "references": [{ "path": "./tsconfig.node.json" }]
+    "files": [],
+    "references": [
+        { "path": "./tsconfig.app.json" },
+        { "path": "./tsconfig.node.json" }
+    ]
 }
diff --git a/examples/app-settings/tsconfig.node.json b/examples/app-settings/tsconfig.node.json
@@ -1,12 +1,22 @@
 {
     "compilerOptions": {
-        "composite": true,
+        "jsx": "react",
+        "target": "ES2022",
+        "lib": ["ES2023"],
         "module": "ESNext",
-        "moduleResolution": "Node",
-        "allowSyntheticDefaultImports": true,
-        "resolveJsonModule": true,
-        "baseUrl": ".",
-        "lib": ["ESNext"]
+        "skipLibCheck": true,
+
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "isolatedModules": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true
     },
-    "include": [".eslintrc.cjs", "postcss.config.cjs", "tailwind.config.ts"]
 }
diff --git a/examples/app-with-state/.eslintrc.cjs b/examples/app-with-state/.eslintrc.cjs
diff --git a/examples/app-with-state/eslint.config.js b/examples/app-with-state/eslint.config.js
@@ -0,0 +1,28 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+    { ignores: ["dist"] },
+    {
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        files: ["**/*.{ts,tsx}"],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser,
+        },
+        plugins: {
+            "react-hooks": reactHooks,
+            "react-refresh": reactRefresh,
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            "react-refresh/only-export-components": [
+                "warn",
+                { allowConstantExport: true },
+            ],
+        },
+    }
+);
diff --git a/examples/app-with-state/manifest.json b/examples/app-with-state/manifest.json
@@ -5,6 +5,9 @@
     "metadata": {
         "version": 1
     },
+    "permissions": {
+        "scopes": ["basic:read", "basic:write"]
+    },
     "surfaces": {
         "mediaLibrary": {
             "assetAction": {

diff --git a/examples/app-with-state/package.json b/examples/app-with-state/package.json
@@ -11,23 +11,26 @@
         "typecheck": "tsc --noEmit"
     },
     "dependencies": {
-        "@frontify/app-bridge-app": "^0.0.5",
-        "@frontify/fondue": "^12.1.2",
-        "@frontify/platform-app": "^0.1.4",
+        "@frontify/app-bridge-app": "^0.0.14",
+        "@frontify/fondue": "^12.2.10",
+        "@frontify/platform-app": "^0.1.10",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },
     "devDependencies": {
-        "@frontify/eslint-config-react": "^0.17.6",
-        "@frontify/frontify-cli": "^5.7.0",
-        "@types/node": "^20.12.12",
+        "@eslint/js": "^9.9.0",
+        "@frontify/frontify-cli": "^5.7.7",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "autoprefixer": "^10.4.19",
-        "eslint": "^8.57.0",
+        "eslint": "^9.9.0",
+        "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+        "eslint-plugin-react-refresh": "^0.4.11",
+        "globals": "^15.9.0",
         "postcss": "^8.4.38",
         "prettier": "^3.2.5",
         "tailwindcss": "^3.4.3",
-        "typescript": "^5.4.5"
+        "typescript": "^5.6.0",
+        "typescript-eslint": "^8.5.0"
     }
 }
diff --git a/examples/app-with-state/src/App.tsx b/examples/app-with-state/src/App.tsx
@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import './App.css';
-import { AppBridgePlatformApp, appContext } from '@frontify/app-bridge-app';
+import { AppBridgePlatformApp, appContext, appUserState } from '@frontify/app-bridge-app';
 import { Flex, FOCUS_VISIBLE_STYLE, Heading, IconArrowOutExternal20, merge } from '@frontify/fondue';
 import { Button, TextInput } from '@frontify/fondue/components';
 import { useState } from 'react';
@@ -13,26 +13,25 @@ export const App = () => {
     const [userState, setUserState] = useState<Record<string, string>>();
     const [subscribedState, setSubscribedState] = useState<Record<string, string>>();
 
+    const [userStateApp, setUserStateApp] = appUserState<{ 'test-app': string }>();
+
     const setState = () => {
         // Access the state of an individual user
-        // This state persist for deployed Apps
-        appBridge.state('userState').set({ 'test-app': input });
+        setUserStateApp({ 'test-app': input });
     };
 
     const getState = () => {
         // Access  the current userState
-        // This state persist if the app is deployed
-        const appBridgeState = appBridge.state('userState').get() as Record<string, string>;
-        setUserState(appBridgeState);
+        setUserState(userStateApp);
     };
 
     const subscribeState = () => {
         // Subscribe to a userState Change
         // The callback is trigger when a new userState is set
-        appBridge.state('userState').subscribe((nextState, previousState) => {
-            console.log('access to previous State', previousState);
-            const subState = nextState as { settings: Record<string, string>; userState: Record<string, string> };
-            setSubscribedState(subState.userState);
+        appBridge.state('userState').subscribe((nextState: Record<string, string>, previousState: Record<string, string>) => {
+            console.log('previous State', previousState)
+            console.log('next State', nextState)
+            setSubscribedState(nextState);
         });
     };
 
@@ -52,7 +51,7 @@ export const App = () => {
                 <p className="tw-text-text-weak tw-text-body-small">Surface: {context.surface}</p>
             </Flex>
 
-            <Flex>
+            <Flex alignContent={'start'} justify={'start'}>
                 <p className="tw-text-text">Lets use our State:</p>
                 <TextInput id={'id'} onChange={(e) => onInput(e.target.value)} value={input} />
                 <Button onPress={() => setState()}>Set State</Button>

diff --git a/examples/app-with-state/tsconfig.app.json b/examples/app-with-state/tsconfig.app.json
@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "module": "ESNext",
+        "skipLibCheck": true,
+
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "isolatedModules": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+        "jsx": "react-jsx",
+
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "include": ["src"]
+}
diff --git a/examples/app-with-state/tsconfig.json b/examples/app-with-state/tsconfig.json
@@ -1,21 +1,7 @@
 {
-    "compilerOptions": {
-        "target": "ES2021",
-        "useDefineForClassFields": true,
-        "lib": ["ES2021", "DOM", "DOM.Iterable"],
-        "module": "ESNext",
-        "skipLibCheck": true,
-        "moduleResolution": "bundler",
-        "allowImportingTsExtensions": true,
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "noEmit": true,
-        "jsx": "react-jsx",
-        "strict": true,
-        "noUnusedLocals": true,
-        "noUnusedParameters": true,
-        "noFallthroughCasesInSwitch": true
-    },
-    "include": ["src"],
-    "references": [{ "path": "./tsconfig.node.json" }]
+    "files": [],
+    "references": [
+        { "path": "./tsconfig.app.json" },
+        { "path": "./tsconfig.node.json" }
+    ]
 }