From 4622c1c8bc8a8f8e8e9d303fad066cffcc6fae5f Mon Sep 17 00:00:00 2001 From: julianiff Date: Wed, 4 Dec 2024 09:34:13 +0100 Subject: [PATCH 01/22] chore: add boilerplate --- examples/asset-viewer-social-media/.gitignore | 24 +++++++++++ .../asset-viewer-social-media/.prettierrc | 5 +++ .../.secret-example.json | 4 ++ examples/asset-viewer-social-media/README.md | 43 +++++++++++++++++++ .../eslint.config.js | 28 ++++++++++++ examples/asset-viewer-social-media/index.html | 17 ++++++++ .../asset-viewer-social-media/manifest.json | 23 ++++++++++ .../asset-viewer-social-media/package.json | 39 +++++++++++++++++ .../postcss.config.cjs | 6 +++ .../asset-viewer-social-media/src/App.tsx | 12 ++++++ .../asset-viewer-social-media/src/index.ts | 11 +++++ .../asset-viewer-social-media/src/settings.ts | 12 ++++++ .../src/vite-env.d.ts | 1 + .../tailwind.config.ts | 9 ++++ .../tsconfig.app.json | 24 +++++++++++ .../asset-viewer-social-media/tsconfig.json | 7 +++ .../tsconfig.node.json | 22 ++++++++++ 17 files changed, 287 insertions(+) create mode 100644 examples/asset-viewer-social-media/.gitignore create mode 100644 examples/asset-viewer-social-media/.prettierrc create mode 100644 examples/asset-viewer-social-media/.secret-example.json create mode 100644 examples/asset-viewer-social-media/README.md create mode 100644 examples/asset-viewer-social-media/eslint.config.js create mode 100644 examples/asset-viewer-social-media/index.html create mode 100644 examples/asset-viewer-social-media/manifest.json create mode 100644 examples/asset-viewer-social-media/package.json create mode 100644 examples/asset-viewer-social-media/postcss.config.cjs create mode 100644 examples/asset-viewer-social-media/src/App.tsx create mode 100644 examples/asset-viewer-social-media/src/index.ts create mode 100644 examples/asset-viewer-social-media/src/settings.ts create mode 100644 examples/asset-viewer-social-media/src/vite-env.d.ts create mode 100644 examples/asset-viewer-social-media/tailwind.config.ts create mode 100644 examples/asset-viewer-social-media/tsconfig.app.json create mode 100644 examples/asset-viewer-social-media/tsconfig.json create mode 100644 examples/asset-viewer-social-media/tsconfig.node.json 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..a59fa49 --- /dev/null +++ b/examples/asset-viewer-social-media/README.md @@ -0,0 +1,43 @@ +# Hello World +This is a simple example of a Hello World app using React and Tailwind. + +## Information + +This sample app is the most basic example to get you started with our platform. Even though it's simple, it comes pre-configured with our platform fonts, design system components, and styles. This ensures that you have a consistent look and feel across the application, adhering to our design standards right from the start. + +- **Platform Fonts:** The app is set up to use our standard fonts, ensuring typography consistency. +- **Design System Components and Styles:** The app includes [Fondue](https://fondue-components.frontify.com/), Frontify design system, making it easy to build complex UIs with a unified design language. + +For more details on how to customize and extend this app, please refer to the [documentation](https://developer.frontify.com/). + +### Requirements: + +- Node 20 +- Access to a Frontify Instance. + +### 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 + +## Manifest Configuration + +The `manifest.json` file is a crucial part of your app setup. It allows your app to control where it surfaces within the platform. Your app can appear in various locations such as the asset creation menu or the asset action menu. + +Additionally, the `manifest.json` file enables you to specify the types of files your app can work with, such as images, audio files, specific formats like jpg, png, and more. + +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..4b2760c --- /dev/null +++ b/examples/asset-viewer-social-media/manifest.json @@ -0,0 +1,23 @@ +{ + "appId": "", + "appType": "platform-app", + "name": "template-platform-app-tailwind", + "metadata": { + "version": 1 + }, + "permissions": { + "scopes": ["basic:read", "basic:write"] + }, + "surfaces": { + "mediaLibrary": { + "assetAction": { + "title": "Asset Action", + "type": ["image"], + "filenameExtension": ["png", "jpeg"] + }, + "assetCreation": { + "title": "Asset Creation" + } + } + } +} diff --git a/examples/asset-viewer-social-media/package.json b/examples/asset-viewer-social-media/package.json new file mode 100644 index 0000000..53dbaed --- /dev/null +++ b/examples/asset-viewer-social-media/package.json @@ -0,0 +1,39 @@ +{ + "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": { + "@frontify/app-bridge-app": "^0.0.16", + "@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.7.8", + "@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" + } +} \ No newline at end of file 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..af0f029 --- /dev/null +++ b/examples/asset-viewer-social-media/src/App.tsx @@ -0,0 +1,12 @@ +import { appContext } from '@frontify/app-bridge-app'; + +export const App = () => { + const context = appContext(); + + return ( +
+ A Frontify Platform App in React with tailwind. +

Entrypoint: {context.surface}

. +
+ ); +}; diff --git a/examples/asset-viewer-social-media/src/index.ts b/examples/asset-viewer-social-media/src/index.ts new file mode 100644 index 0000000..3bd760f --- /dev/null +++ b/examples/asset-viewer-social-media/src/index.ts @@ -0,0 +1,11 @@ +import { defineApp } from '@frontify/platform-app'; + +import { App } from './App'; +import { settings } from './settings'; +import '@frontify/fondue/style'; +import 'tailwindcss/tailwind.css'; + +export default defineApp({ + app: App, + settings, +}); diff --git a/examples/asset-viewer-social-media/src/settings.ts b/examples/asset-viewer-social-media/src/settings.ts new file mode 100644 index 0000000..25a335a --- /dev/null +++ b/examples/asset-viewer-social-media/src/settings.ts @@ -0,0 +1,12 @@ +import { defineSettings } from '@frontify/platform-app'; + +export const settings = defineSettings({ + credentials: [ + { + type: 'input', + id: 'single-line', + label: 'Input field', + defaultValue: 'Input Field Value', + }, + ], +}); diff --git a/examples/asset-viewer-social-media/src/vite-env.d.ts b/examples/asset-viewer-social-media/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/examples/asset-viewer-social-media/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/asset-viewer-social-media/tailwind.config.ts b/examples/asset-viewer-social-media/tailwind.config.ts new file mode 100644 index 0000000..bbfd4d5 --- /dev/null +++ b/examples/asset-viewer-social-media/tailwind.config.ts @@ -0,0 +1,9 @@ +import { type Config } from 'tailwindcss'; + +export default { + content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], + theme: { + extend: {}, + }, + plugins: [], +} satisfies Config; diff --git a/examples/asset-viewer-social-media/tsconfig.app.json b/examples/asset-viewer-social-media/tsconfig.app.json new file mode 100644 index 0000000..dd60786 --- /dev/null +++ b/examples/asset-viewer-social-media/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/asset-viewer-social-media/tsconfig.json b/examples/asset-viewer-social-media/tsconfig.json new file mode 100644 index 0000000..f6df6c7 --- /dev/null +++ b/examples/asset-viewer-social-media/tsconfig.json @@ -0,0 +1,7 @@ +{ + "files": [], + "references": [ + { "path": "./tsconfig.app.json" }, + { "path": "./tsconfig.node.json" } + ] +} diff --git a/examples/asset-viewer-social-media/tsconfig.node.json b/examples/asset-viewer-social-media/tsconfig.node.json new file mode 100644 index 0000000..82ac547 --- /dev/null +++ b/examples/asset-viewer-social-media/tsconfig.node.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "target": "ES2022", + "lib": ["ES2023"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "exclude": ["src"] +} From 163d2db6b0bf026efeed82b5d3e30ddbb7437121 Mon Sep 17 00:00:00 2001 From: julianiff Date: Wed, 4 Dec 2024 09:41:06 +0100 Subject: [PATCH 02/22] chore: add assetViewr --- examples/asset-viewer-social-media/manifest.json | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/examples/asset-viewer-social-media/manifest.json b/examples/asset-viewer-social-media/manifest.json index 4b2760c..28cabe4 100644 --- a/examples/asset-viewer-social-media/manifest.json +++ b/examples/asset-viewer-social-media/manifest.json @@ -9,14 +9,11 @@ "scopes": ["basic:read", "basic:write"] }, "surfaces": { - "mediaLibrary": { - "assetAction": { - "title": "Asset Action", + "guideline": { + "assetViewer": { + "title": "Social Media Hub", "type": ["image"], - "filenameExtension": ["png", "jpeg"] - }, - "assetCreation": { - "title": "Asset Creation" + "filenameExtension": ["jpeg", "jpg"] } } } From c0860998f79f5c91e8de80d896bd8148d674953b Mon Sep 17 00:00:00 2001 From: julianiff Date: Wed, 4 Dec 2024 09:41:15 +0100 Subject: [PATCH 03/22] chore: add manifest --- pnpm-lock.yaml | 281 ++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 268 insertions(+), 13 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index daed952..43237be 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -130,6 +130,70 @@ importers: specifier: ^8.5.0 version: 8.5.0(eslint@9.10.0(jiti@1.21.0))(typescript@5.6.2) + examples/asset-viewer-social-media: + dependencies: + '@frontify/app-bridge-app': + specifier: ^0.0.16 + version: 0.0.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@frontify/fondue': + specifier: ^12.2.11 + version: 12.2.16(@react-spring/web@9.7.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/node@20.12.12)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(tailwindcss@3.4.3)(zustand@4.5.5(@types/react@18.3.3)(immer@10.1.1)(react@18.3.1)) + '@frontify/platform-app': + specifier: ^0.1.11 + version: 0.1.11(@react-spring/web@9.7.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/node@20.12.12)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(tailwindcss@3.4.3)(zustand@4.5.5(@types/react@18.3.3)(immer@10.1.1)(react@18.3.1)) + react: + specifier: ^18.3.1 + version: 18.3.1 + react-dom: + specifier: ^18.3.1 + version: 18.3.1(react@18.3.1) + zustand: + specifier: 4.5.5 + version: 4.5.5(@types/react@18.3.3)(immer@10.1.1)(react@18.3.1) + devDependencies: + '@eslint/js': + specifier: ^9.9.0 + version: 9.10.0 + '@frontify/frontify-cli': + specifier: ^5.7.8 + version: 5.7.8(@types/node@20.12.12)(terser@5.31.0) + '@types/react': + specifier: ^18.3.3 + version: 18.3.3 + '@types/react-dom': + specifier: ^18.3.0 + version: 18.3.0 + autoprefixer: + specifier: ^10.4.19 + version: 10.4.19(postcss@8.4.45) + eslint: + specifier: ^9.9.0 + version: 9.10.0(jiti@1.21.0) + eslint-plugin-react-hooks: + specifier: ^5.1.0-rc.0 + version: 5.1.0-rc-fb9a90fa48-20240614(eslint@9.10.0(jiti@1.21.0)) + eslint-plugin-react-refresh: + specifier: ^0.4.11 + version: 0.4.11(eslint@9.10.0(jiti@1.21.0)) + globals: + specifier: ^15.9.0 + version: 15.9.0 + postcss: + specifier: ^8.4.38 + version: 8.4.45 + prettier: + specifier: ^3.2.5 + version: 3.2.5 + tailwindcss: + specifier: ^3.4.3 + version: 3.4.3 + typescript: + specifier: ^5.6.0 + version: 5.6.2 + typescript-eslint: + specifier: ^8.5.0 + version: 8.5.0(eslint@9.10.0(jiti@1.21.0))(typescript@5.6.2) + examples/bulk-actions-app: dependencies: '@frontify/app-bridge-app': @@ -5582,6 +5646,11 @@ packages: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 + use-sync-external-store@1.2.2: + resolution: {integrity: sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} @@ -5788,6 +5857,21 @@ packages: react: optional: true + zustand@4.5.5: + resolution: {integrity: sha512-+0PALYNJNgK6hldkgDq2vLrw5f6g/jCInz52n9RTpropGgeAf/ioFUCdtsjCqu4gNhW9D01rUQBROoRjdzyn2Q==} + engines: {node: '>=12.7.0'} + peerDependencies: + '@types/react': '>=16.8' + immer: '>=9.0.6' + react: '>=16.8' + peerDependenciesMeta: + '@types/react': + optional: true + immer: + optional: true + react: + optional: true + zwitch@2.0.4: resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} @@ -6939,6 +7023,116 @@ snapshots: - tailwindcss - zustand + '@frontify/fondue@12.2.16(@react-spring/web@9.7.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/node@20.12.12)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(tailwindcss@3.4.3)(zustand@4.5.5(@types/react@18.3.3)(immer@10.1.1)(react@18.3.1))': + dependencies: + '@ctrl/tinycolor': 4.1.0 + '@dnd-kit/core': 6.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@dnd-kit/modifiers': 7.0.0(@dnd-kit/core@6.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + '@dnd-kit/sortable': 8.0.0(@dnd-kit/core@6.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + '@dnd-kit/utilities': 3.2.2(react@18.3.1) + '@floating-ui/dom': 1.6.10 + '@frontify/fondue-charts': 1.8.15(@frontify/fondue-tokens@3.5.7(tailwindcss@3.4.3))(@react-spring/web@9.7.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@frontify/fondue-components': 4.0.1(@frontify/fondue-icons@0.5.0(react@18.3.1))(@frontify/fondue-tokens@3.5.7(tailwindcss@3.4.3))(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.3) + '@frontify/fondue-icons': 0.5.0(react@18.3.1) + '@frontify/fondue-tokens': 3.5.7(tailwindcss@3.4.3) + '@popperjs/core': 2.11.8 + '@radix-ui/react-popover': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-toolbar': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-tooltip': 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@react-aria/accordion': 3.0.0-alpha.29(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@react-aria/aria-modal-polyfill': 3.7.11(react@18.3.1) + '@react-aria/breadcrumbs': 3.5.16(react@18.3.1) + '@react-aria/button': 3.9.8(react@18.3.1) + '@react-aria/checkbox': 3.14.6(react@18.3.1) + '@react-aria/combobox': 3.10.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@react-aria/dialog': 3.5.17(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@react-aria/focus': 3.18.2(react@18.3.1) + '@react-aria/interactions': 3.22.2(react@18.3.1) + '@react-aria/link': 3.7.4(react@18.3.1) + '@react-aria/listbox': 3.13.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@react-aria/menu': 3.15.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@react-aria/overlays': 3.23.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@react-aria/radio': 3.10.7(react@18.3.1) + '@react-aria/select': 3.14.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@react-aria/selection': 3.19.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@react-aria/table': 3.15.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@react-aria/tooltip': 3.7.7(react@18.3.1) + '@react-aria/utils': 3.25.2(react@18.3.1) + '@react-aria/visually-hidden': 3.8.15(react@18.3.1) + '@react-stately/checkbox': 3.6.8(react@18.3.1) + '@react-stately/collections': 3.10.9(react@18.3.1) + '@react-stately/combobox': 3.9.2(react@18.3.1) + '@react-stately/list': 3.10.8(react@18.3.1) + '@react-stately/menu': 3.8.2(react@18.3.1) + '@react-stately/overlays': 3.6.10(react@18.3.1) + '@react-stately/radio': 3.10.7(react@18.3.1) + '@react-stately/select': 3.6.7(react@18.3.1) + '@react-stately/table': 3.12.2(react@18.3.1) + '@react-stately/toggle': 3.7.7(react@18.3.1) + '@react-stately/tooltip': 3.4.12(react@18.3.1) + '@react-stately/tree': 3.8.4(react@18.3.1) + '@react-types/dialog': 3.5.12(react@18.3.1) + '@react-types/shared': 3.24.1(react@18.3.1) + '@tailwindcss/forms': 0.5.9(tailwindcss@3.4.3) + '@udecode/plate-alignment': 31.0.0(@udecode/plate-common@31.3.2(@types/react@18.3.3)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0) + '@udecode/plate-autoformat': 31.0.0(@udecode/plate-common@31.3.2(@types/react@18.3.3)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0) + '@udecode/plate-basic-marks': 31.0.0(@udecode/plate-common@31.3.2(@types/react@18.3.3)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0) + '@udecode/plate-break': 31.0.0(@udecode/plate-common@31.3.2(@types/react@18.3.3)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0) + '@udecode/plate-code-block': 31.3.4(@udecode/plate-common@31.3.2(@types/react@18.3.3)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0) + '@udecode/plate-combobox': 31.0.0(@udecode/plate-common@31.3.2(@types/react@18.3.3)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0) + '@udecode/plate-common': 31.3.2(@types/react@18.3.3)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0) + '@udecode/plate-core': 31.3.2(@types/react@18.3.3)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0) + '@udecode/plate-emoji': 31.4.0(@udecode/plate-common@31.3.2(@types/react@18.3.3)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0) + '@udecode/plate-floating': 31.0.0(@udecode/plate-common@31.3.2(@types/react@18.3.3)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0) + '@udecode/plate-indent': 31.1.0(@udecode/plate-common@31.3.2(@types/react@18.3.3)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0) + '@udecode/plate-link': 31.0.0(@udecode/plate-common@31.3.2(@types/react@18.3.3)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0) + '@udecode/plate-list': 31.1.3(@udecode/plate-common@31.3.2(@types/react@18.3.3)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0) + '@udecode/plate-mention': 31.3.5(@udecode/plate-common@31.3.2(@types/react@18.3.3)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0) + '@udecode/plate-normalizers': 31.0.0(@udecode/plate-common@31.3.2(@types/react@18.3.3)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0) + '@udecode/plate-paragraph': 31.0.0(@udecode/plate-common@31.3.2(@types/react@18.3.3)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0) + '@udecode/plate-utils': 31.3.2(@types/react@18.3.3)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0) + '@udecode/react-utils': 31.0.0(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@udecode/slate': 31.0.0(slate-history@0.100.0(slate@0.102.0))(slate@0.102.0) + '@udecode/slate-react': 31.0.0(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-history@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0) + '@udecode/slate-utils': 31.3.2(slate-history@0.100.0(slate@0.102.0))(slate@0.102.0) + '@udecode/utils': 31.0.0 + '@udecode/zustood': 2.0.0(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(zustand@4.5.5(@types/react@18.3.3)(immer@10.1.1)(react@18.3.1)) + date-fns: 3.6.0 + escape-html: 1.0.3 + framer-motion: 10.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + immer: 10.1.1 + is-hotkey: 0.2.0 + lodash-es: 4.17.21 + react: 18.3.1 + react-colorful: 5.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-datepicker: 6.9.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-dnd: 16.0.1(@types/node@20.12.12)(@types/react@18.3.3)(react@18.3.1) + react-dnd-html5-backend: 16.0.1 + react-dom: 18.3.1(react@18.3.1) + react-fast-compare: 3.2.2 + react-is: 18.3.1 + react-popper: 2.3.0(@popperjs/core@2.11.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-textarea-autosize: 8.5.3(@types/react@18.3.3)(react@18.3.1) + remark-gfm: 3.0.1 + remark-parse: 10.0.2 + slate: 0.102.0 + slate-react: 0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0) + unified: 10.1.2 + unist-util-visit: 5.0.0 + transitivePeerDependencies: + - '@react-spring/web' + - '@types/hoist-non-react-statics' + - '@types/node' + - '@types/react' + - '@types/react-dom' + - react-native + - scheduler + - slate-history + - slate-hyperscript + - supports-color + - tailwindcss + - zustand + '@frontify/frontify-cli@5.7.8(@types/node@20.12.12)(terser@5.31.0)': dependencies: '@fastify/cors': 9.0.1 @@ -6987,6 +7181,25 @@ snapshots: - tailwindcss - zustand + '@frontify/platform-app@0.1.11(@react-spring/web@9.7.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/node@20.12.12)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(tailwindcss@3.4.3)(zustand@4.5.5(@types/react@18.3.3)(immer@10.1.1)(react@18.3.1))': + dependencies: + '@frontify/sidebar-settings': 0.9.22(@react-spring/web@9.7.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/node@20.12.12)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(tailwindcss@3.4.3)(zustand@4.5.5(@types/react@18.3.3)(immer@10.1.1)(react@18.3.1)) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + transitivePeerDependencies: + - '@react-spring/web' + - '@types/hoist-non-react-statics' + - '@types/node' + - '@types/react' + - '@types/react-dom' + - react-native + - scheduler + - slate-history + - slate-hyperscript + - supports-color + - tailwindcss + - zustand + '@frontify/sidebar-settings@0.9.22(@react-spring/web@9.7.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/node@20.12.12)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(tailwindcss@3.4.3)(zustand@4.5.2(@types/react@18.3.3)(immer@10.1.1)(react@18.3.1))': dependencies: '@frontify/fondue': 12.2.16(@react-spring/web@9.7.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/node@20.12.12)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(tailwindcss@3.4.3)(zustand@4.5.2(@types/react@18.3.3)(immer@10.1.1)(react@18.3.1)) @@ -7006,6 +7219,25 @@ snapshots: - tailwindcss - zustand + '@frontify/sidebar-settings@0.9.22(@react-spring/web@9.7.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/node@20.12.12)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(tailwindcss@3.4.3)(zustand@4.5.5(@types/react@18.3.3)(immer@10.1.1)(react@18.3.1))': + dependencies: + '@frontify/fondue': 12.2.16(@react-spring/web@9.7.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/node@20.12.12)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(slate-history@0.100.0(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(tailwindcss@3.4.3)(zustand@4.5.5(@types/react@18.3.3)(immer@10.1.1)(react@18.3.1)) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + transitivePeerDependencies: + - '@react-spring/web' + - '@types/hoist-non-react-statics' + - '@types/node' + - '@types/react' + - '@types/react-dom' + - react-native + - scheduler + - slate-history + - slate-hyperscript + - supports-color + - tailwindcss + - zustand + '@hapi/hoek@9.3.0': optional: true @@ -9145,6 +9377,17 @@ snapshots: - react-native - scheduler + '@udecode/zustood@2.0.0(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505)(zustand@4.5.5(@types/react@18.3.3)(immer@10.1.1)(react@18.3.1))': + dependencies: + immer: 10.1.1 + react-tracked: 1.7.14(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.6)(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)(scheduler@0.24.0-canary-efb381bbf-20230505) + zustand: 4.5.5(@types/react@18.3.3)(immer@10.1.1)(react@18.3.1) + transitivePeerDependencies: + - react + - react-dom + - react-native + - scheduler + '@visx/annotation@3.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@types/react': 18.3.3 @@ -11661,28 +11904,28 @@ snapshots: find-up: 3.0.0 optional: true - postcss-import@15.1.0(postcss@8.4.38): + postcss-import@15.1.0(postcss@8.4.45): dependencies: - postcss: 8.4.38 + postcss: 8.4.45 postcss-value-parser: 4.2.0 read-cache: 1.0.0 resolve: 1.22.8 - postcss-js@4.0.1(postcss@8.4.38): + postcss-js@4.0.1(postcss@8.4.45): dependencies: camelcase-css: 2.0.1 - postcss: 8.4.38 + postcss: 8.4.45 - postcss-load-config@4.0.2(postcss@8.4.38): + postcss-load-config@4.0.2(postcss@8.4.45): dependencies: lilconfig: 3.1.1 yaml: 2.4.2 optionalDependencies: - postcss: 8.4.38 + postcss: 8.4.45 - postcss-nested@6.0.1(postcss@8.4.38): + postcss-nested@6.0.1(postcss@8.4.45): dependencies: - postcss: 8.4.38 + postcss: 8.4.45 postcss-selector-parser: 6.1.0 postcss-selector-parser@6.1.0: @@ -12437,11 +12680,11 @@ snapshots: normalize-path: 3.0.0 object-hash: 3.0.0 picocolors: 1.0.1 - postcss: 8.4.38 - postcss-import: 15.1.0(postcss@8.4.38) - postcss-js: 4.0.1(postcss@8.4.38) - postcss-load-config: 4.0.2(postcss@8.4.38) - postcss-nested: 6.0.1(postcss@8.4.38) + postcss: 8.4.45 + postcss-import: 15.1.0(postcss@8.4.45) + postcss-js: 4.0.1(postcss@8.4.45) + postcss-load-config: 4.0.2(postcss@8.4.45) + postcss-nested: 6.0.1(postcss@8.4.45) postcss-selector-parser: 6.1.0 resolve: 1.22.8 sucrase: 3.35.0 @@ -12685,6 +12928,10 @@ snapshots: dependencies: react: 18.3.1 + use-sync-external-store@1.2.2(react@18.3.1): + dependencies: + react: 18.3.1 + util-deprecate@1.0.2: {} utils-merge@1.0.1: @@ -12887,4 +13134,12 @@ snapshots: immer: 10.1.1 react: 18.3.1 + zustand@4.5.5(@types/react@18.3.3)(immer@10.1.1)(react@18.3.1): + dependencies: + use-sync-external-store: 1.2.2(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.3 + immer: 10.1.1 + react: 18.3.1 + zwitch@2.0.4: {} From 0daeda646ab15b4083f9bc27b4585e914213feec Mon Sep 17 00:00:00 2001 From: julianiff Date: Wed, 4 Dec 2024 21:46:27 +0100 Subject: [PATCH 04/22] feat: add asset viewer social sharing app --- examples/app-settings/package.json | 2 +- examples/app-with-state/package.json | 2 +- .../asset-viewer-social-media/package.json | 5 +- .../asset-viewer-social-media/src/App.tsx | 67 +++- .../src/BlueskyInputMask.tsx | 78 +++++ .../src/BlueskyLogin.tsx | 92 +++++ .../src/BlueskyLogout.tsx | 66 ++++ .../src/ConfirmationScreen.tsx | 29 ++ .../asset-viewer-social-media/src/settings.ts | 8 - .../src/useCase/LogUserIn.ts | 43 +++ .../src/useCase/PostImageOnBluesky.ts | 53 +++ examples/bulk-actions-app/package.json | 2 +- examples/hello-world/package.json | 2 +- .../secure-third-party-request/package.json | 2 +- pnpm-lock.yaml | 317 ++++++------------ 15 files changed, 528 insertions(+), 240 deletions(-) create mode 100644 examples/asset-viewer-social-media/src/BlueskyInputMask.tsx create mode 100644 examples/asset-viewer-social-media/src/BlueskyLogin.tsx create mode 100644 examples/asset-viewer-social-media/src/BlueskyLogout.tsx create mode 100644 examples/asset-viewer-social-media/src/ConfirmationScreen.tsx create mode 100644 examples/asset-viewer-social-media/src/useCase/LogUserIn.ts create mode 100644 examples/asset-viewer-social-media/src/useCase/PostImageOnBluesky.ts 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/package.json b/examples/asset-viewer-social-media/package.json index 53dbaed..f56cd78 100644 --- a/examples/asset-viewer-social-media/package.json +++ b/examples/asset-viewer-social-media/package.json @@ -14,7 +14,8 @@ "zustand": "4.5.5" }, "dependencies": { - "@frontify/app-bridge-app": "^0.0.16", + "@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", @@ -36,4 +37,4 @@ "typescript": "^5.6.0", "typescript-eslint": "^8.5.0" } -} \ No newline at end of file +} diff --git a/examples/asset-viewer-social-media/src/App.tsx b/examples/asset-viewer-social-media/src/App.tsx index af0f029..1f98753 100644 --- a/examples/asset-viewer-social-media/src/App.tsx +++ b/examples/asset-viewer-social-media/src/App.tsx @@ -1,12 +1,69 @@ -import { appContext } from '@frontify/app-bridge-app'; +import { AppBridgePlatformApp } from '@frontify/app-bridge-app'; +import { useEffect, useState } from 'react'; +import { BlueSkyInputMask } from './BlueskyInputMask'; +import { BlueskyLogin } from './BlueskyLogin'; +import { LogoutButton } from './BlueskyLogout'; +import { PostConfirmation } from './ConfirmationScreen'; +import { getLoggedInUser, setUserLoggedIn } from './useCase/LogUserIn'; +import { createPostWithImage } from './useCase/PostImageOnBluesky'; export const App = () => { - const context = appContext(); + const appBridge = new AppBridgePlatformApp(); + const context = appBridge.context().get(); + const [image, setImage] = useState(); + const [showConfirmation, setShowConfirmation] = useState(false); + const [loggedIn, setLoggedIn] = useState(false); + const [initializing, setInitializing] = useState(true); + + if (context.surface === "assetViewer") { + appBridge.api({ "name": "getAssetResourceInformation", payload: { assetId: context.assetId } }).then((response) => setImage(response.previewUrl)) + } + + useEffect(() => { + const setInitialLoggedStatus = async () => { + + const credentials = await getLoggedInUser(); + if (credentials) { + setLoggedIn(true) + appBridge.state("userState").set({ + accessJwt: credentials.accessJwt, + refreshJwt: credentials.refreshJwt, + handle: credentials.handle, + did: credentials.did + }) + } + setInitializing(false) + } + setInitialLoggedStatus(); + }, []) + + const doLogin = async (identifier: string, password: string) => { + const { accessJwt, refreshJwt, handle, did } = await setUserLoggedIn({ identifier, password }); + appBridge.state("userState").set({ accessJwt: accessJwt, refreshJwt, handle, did }) + } return ( -
- A Frontify Platform App in React with tailwind. -

Entrypoint: {context.surface}

. +
+ {!initializing ? + loggedIn ? + showConfirmation ? setShowConfirmation(false)} /> : +
+ { + setShowConfirmation(true); + createPostWithImage(input); + }} /> + { + appBridge.state("userState").set({ identifier: "", password: "" }) + setLoggedIn(false) + }} /> +
+ : + { + doLogin(identifier, password) + setLoggedIn(true); + }} /> + : +
}
); }; diff --git a/examples/asset-viewer-social-media/src/BlueskyInputMask.tsx b/examples/asset-viewer-social-media/src/BlueskyInputMask.tsx new file mode 100644 index 0000000..89c946b --- /dev/null +++ b/examples/asset-viewer-social-media/src/BlueskyInputMask.tsx @@ -0,0 +1,78 @@ +import { useState } from "react"; + + +type BlueSkyInputMaskProps = { + imageSrc: string + onSubmit: (input: string) => void +} + +export const BlueSkyInputMask = ({ 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 ( +
+
+
+ +
+ +
+