Frontify · julianiff · Dec 5, 2024 · Dec 4, 2024 · Dec 4, 2024 · Dec 4, 2024
diff --git a/examples/app-settings/package.json b/examples/app-settings/package.json
@@ -11,7 +11,7 @@
         "typecheck": "tsc --noEmit"
     },
     "dependencies": {
-        "@frontify/app-bridge-app": "^0.0.16",
+        "@frontify/app-bridge-app": "^0.1.3",
         "@frontify/fondue": "^12.2.11",
         "@frontify/platform-app": "^0.1.11",
         "react": "^18.3.1",

diff --git a/examples/app-with-state/package.json b/examples/app-with-state/package.json
@@ -11,7 +11,7 @@
         "typecheck": "tsc --noEmit"
     },
     "dependencies": {
-        "@frontify/app-bridge-app": "^0.0.16",
+        "@frontify/app-bridge-app": "^0.1.3",
         "@frontify/fondue": "^12.2.11",
         "@frontify/platform-app": "^0.1.11",
         "react": "^18.3.1",

diff --git a/examples/asset-viewer-social-media/.gitignore b/examples/asset-viewer-social-media/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.localdist
+.idea
+.vscode
+
+# Editor directories and files
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.secret.json
diff --git a/examples/asset-viewer-social-media/.prettierrc b/examples/asset-viewer-social-media/.prettierrc
@@ -0,0 +1,5 @@
+{
+    "printWidth": 120,
+    "tabWidth": 4,
+    "singleQuote": true
+}
diff --git a/examples/asset-viewer-social-media/.secret-example.json b/examples/asset-viewer-social-media/.secret-example.json
@@ -0,0 +1,4 @@
+{
+    "THIRD_PARTY_API_KEY": 1,
+    "__DONT_COMMIT_THIS_FILE_WITH_TOKENS__": true
+}
diff --git a/examples/asset-viewer-social-media/README.md b/examples/asset-viewer-social-media/README.md
@@ -0,0 +1,32 @@
+# Asset Viewer Social Sharing Example
+This is a simple example that shows how to use the Brand-sdk with other integrations to create an App that shares images in the Guidelines.
+
+
+### Requirements:
+
+-   Node 20
+-   Access to a Frontify Instance.
+-   Bluesky Account with App Password
+
+### Setup
+1. Install the dependencies
+    ```
+    npm install
+    ```
+   Or
+    ```
+    pnpm install
+    ```
+2. Serve the app
+    ```
+    npm run serve
+    ```
+   Or
+    ```
+    pnpm serve
+    ```
+3. Go to your Frontify Instance and access an image in the Guideline
+4. Use Bluesky login to access
+
+## Manifest Configuration
+For detailed information on configuring the `manifest.json` file, please refer to our [documentation](https://developer.frontify.com/).
diff --git a/examples/asset-viewer-social-media/eslint.config.js b/examples/asset-viewer-social-media/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/asset-viewer-social-media/index.html b/examples/asset-viewer-social-media/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+    <title>Frontify Sample App</title>
+</head>
+<body>
+    <div id="root"></div>
+    <script type='module'>
+        import module from '/src/index.ts';
+        import {renderReactApp} from '@frontify/app-bridge-app';
+
+        renderReactApp(module);
+    </script>
+</body>
+</html>
diff --git a/examples/asset-viewer-social-media/manifest.json b/examples/asset-viewer-social-media/manifest.json
@@ -0,0 +1,20 @@
+{
+    "appId": "<Your app ID>",
+    "appType": "platform-app",
+    "name": "template-platform-app-tailwind",
+    "metadata": {
+        "version": 1
+    },
+    "permissions": {
+        "scopes": ["basic:read", "basic:write"]
+    },
+    "surfaces": {
+        "guideline": {
+            "assetViewer": {
+                "title": "Social Media Hub",
+                "type": ["image"],
+                "filenameExtension": ["jpeg", "jpg", "png", "svg"]
+            }
+        }
+    }
+}
diff --git a/examples/asset-viewer-social-media/package.json b/examples/asset-viewer-social-media/package.json
@@ -0,0 +1,40 @@
+{
+	"name": "asset-viewer-social-media",
+	"type": "module",
+	"version": "1.0.0",
+	"scripts": {
+		"serve": "frontify-cli serve",
+		"login": "frontify-cli login",
+		"deploy": "frontify-cli deploy",
+		"lint": "eslint .",
+		"lint:fix": "eslint . --fix",
+		"typecheck": "tsc --noEmit"
+	},
+	"peerDependencies": {
+		"zustand": "4.5.5"
+	},
+	"dependencies": {
+		"@atproto/api": "^0.13.18",
+		"@frontify/app-bridge-app": "^0.1.3",
+		"@frontify/fondue": "^12.2.11",
+		"@frontify/platform-app": "^0.1.11",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1"
+	},
+	"devDependencies": {
+		"@eslint/js": "^9.9.0",
+		"@frontify/frontify-cli": "^5.8.3",
+		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.0",
+		"autoprefixer": "^10.4.19",
+		"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.6.0",
+		"typescript-eslint": "^8.5.0"
+	}
+}
diff --git a/examples/asset-viewer-social-media/postcss.config.cjs b/examples/asset-viewer-social-media/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};
diff --git a/examples/asset-viewer-social-media/src/App.tsx b/examples/asset-viewer-social-media/src/App.tsx
@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+import { Router } from './Router.tsx';
+import { getUserCredentials } from './useCase/Authentication.ts';
+
+export const App = () => {
+    const [loggedIn, setLoggedIn] = useState(false);
+    const [init, setInit] = useState(true);
+
+    useEffect(() => {
+        const initializeAppWithCredentials = async () => {
+            const credentials = await getUserCredentials();
+            if (credentials) {
+                setLoggedIn(true);
+            }
+            setInit(false);
+        };
+
+        initializeAppWithCredentials();
+    }, []);
+
+    return (
+        <div className="flex h-[100vh] bg-zinc-500 justify-center items-center">
+            <div className="flex flex-col rounded-xl bg-[#161e27]">
+                <Router init={init} loggedIn={loggedIn} setLoggedIn={setLoggedIn} />
+            </div>
+        </div>
+    );
+};
diff --git a/examples/asset-viewer-social-media/src/BlueskyComponents/InputMask.tsx b/examples/asset-viewer-social-media/src/BlueskyComponents/InputMask.tsx
@@ -0,0 +1,82 @@
+import { useState } from 'react';
+
+type BlueSkyInputMaskProps = {
+    imageSrc: string;
+    onSubmit: (input: string) => void;
+};
+
+export const InputMask = ({ imageSrc, onSubmit }: BlueSkyInputMaskProps) => {
+    const [post, setPost] = useState('');
+    const [charCount, setCharCount] = useState(300);
+
+    const handlePostChange = (input: string) => {
+        setPost(input);
+        setCharCount(300 - input.length);
+    };
+
+    const onSubmitInput = () => {
+        onSubmit(post);
+    };
+    return (
+        <div className="w-full max-w-2xl bg-[#161e27] text-white rounded-xl p-6 shadow-lg">
+            <div className="flex items-start space-x-3">
+                <div className="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
+                    <img
+                        className="rounded-full"
+                        alt=""
+                        draggable="false"
+                        src="https://cdn.bsky.app/img/avatar_thumbnail/plain/did:plc:mf3v5yiwchlvkrhqrfofdjxn/bafkreif6bim4ci67uw3hymet2x5odo27zh67bee423adimxdi6kuldu4dy@jpeg"
+                    />
+                </div>
+
+                <div className="flex-1">
+                    <textarea
+                        value={post}
+                        onChange={(e) => handlePostChange(e.target.value)}
+                        placeholder="What's up?"
+                        className="w-full bg-transparent border-none outline-none resize-none text-white placeholder-gray-500 text-lg"
+                        rows={3}
+                    />
+                    <div className="relative mt-2 rounded-2xl overflow-hidden">
+                        <img src={imageSrc} className="w-1/3 rounded-2xl" />
+                    </div>
+                    <div className="border-t border-gray-700 mt-3 pt-3">
+                        <div className="flex items-center justify-between">
+                            <div className="flex items-center space-x-1"></div>
+
+                            <div className="flex items-center space-x-3">
+                                {charCount > 0 && <span className="text-sm text-gray-400">{charCount}</span>}
+                                <button
+                                    className={`px-4 py-1.5 rounded-full font-bold ${
+                                        post.length === 0
+                                            ? 'bg-blue-500/50 text-gray-300 cursor-not-allowed'
+                                            : 'bg-blue-500 text-white hover:bg-blue-600'
+                                    }`}
+                                    disabled={post.length === 0}
+                                    onClick={onSubmitInput}
+                                >
+                                    Post
+                                </button>
+                            </div>
+                        </div>
+
+                        <div className="mt-3 flex items-center text-blue-500 text-sm">
+                            <svg
+                                className="w-4 h-4 mr-1"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth="2"
+                            >
+                                <circle cx="12" cy="12" r="10" />
+                                <path d="M2 12h20" />
+                                <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+                            </svg>
+                            <span>Anybody can interact</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};