diff --git a/examples/app-settings/package.json b/examples/app-settings/package.json index 70b556d..fcd3cdf 100644 --- 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 index 3988b5c..6a805a6 100644 --- 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 new file mode 100644 index 0000000..e7ac394 --- /dev/null +++ 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 new file mode 100644 index 0000000..ca0c14e --- /dev/null +++ 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 new file mode 100644 index 0000000..d5e413d --- /dev/null +++ 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 new file mode 100644 index 0000000..397b32e --- /dev/null +++ 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 new file mode 100644 index 0000000..9d1c0c6 --- /dev/null +++ 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 new file mode 100644 index 0000000..8c69fd7 --- /dev/null +++ b/examples/asset-viewer-social-media/index.html @@ -0,0 +1,17 @@ + + + + + + Frontify Sample App + + +
+ + + diff --git a/examples/asset-viewer-social-media/manifest.json b/examples/asset-viewer-social-media/manifest.json new file mode 100644 index 0000000..d11db65 --- /dev/null +++ b/examples/asset-viewer-social-media/manifest.json @@ -0,0 +1,20 @@ +{ + "appId": "", + "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 new file mode 100644 index 0000000..491f499 --- /dev/null +++ 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 new file mode 100644 index 0000000..67cdf1a --- /dev/null +++ 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 new file mode 100644 index 0000000..38953f1 --- /dev/null +++ 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 ( +
+
+ +
+
+ ); +}; diff --git a/examples/asset-viewer-social-media/src/BlueskyComponents/InputMask.tsx b/examples/asset-viewer-social-media/src/BlueskyComponents/InputMask.tsx new file mode 100644 index 0000000..fe84b29 --- /dev/null +++ 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 ( +
+
+
+ +
+ +
+