From 7f02572636f8510260669ee8ef84456e9b648ceb Mon Sep 17 00:00:00 2001 From: julianiff Date: Wed, 16 Oct 2024 20:44:32 +0200 Subject: [PATCH 01/27] chore: bulk-action-app --- examples/bulk-actions-app/.gitignore | 25 +++++++++++ examples/bulk-actions-app/.prettierrc | 5 +++ .../bulk-actions-app/.secret-example.json | 4 ++ examples/bulk-actions-app/README.md | 43 +++++++++++++++++++ examples/bulk-actions-app/eslint.config.js | 28 ++++++++++++ examples/bulk-actions-app/index.html | 17 ++++++++ examples/bulk-actions-app/manifest.json | 23 ++++++++++ examples/bulk-actions-app/package.json | 36 ++++++++++++++++ examples/bulk-actions-app/postcss.config.cjs | 6 +++ examples/bulk-actions-app/src/App.tsx | 32 ++++++++++++++ .../bulk-actions-app/src/helpers/graphql.ts | 10 +++++ examples/bulk-actions-app/src/index.ts | 11 +++++ examples/bulk-actions-app/src/settings.ts | 12 ++++++ examples/bulk-actions-app/src/vite-env.d.ts | 1 + examples/bulk-actions-app/tailwind.config.ts | 9 ++++ examples/bulk-actions-app/tsconfig.app.json | 24 +++++++++++ examples/bulk-actions-app/tsconfig.json | 7 +++ examples/bulk-actions-app/tsconfig.node.json | 22 ++++++++++ 18 files changed, 315 insertions(+) create mode 100644 examples/bulk-actions-app/.gitignore create mode 100644 examples/bulk-actions-app/.prettierrc create mode 100644 examples/bulk-actions-app/.secret-example.json create mode 100644 examples/bulk-actions-app/README.md create mode 100644 examples/bulk-actions-app/eslint.config.js create mode 100644 examples/bulk-actions-app/index.html create mode 100644 examples/bulk-actions-app/manifest.json create mode 100644 examples/bulk-actions-app/package.json create mode 100644 examples/bulk-actions-app/postcss.config.cjs create mode 100644 examples/bulk-actions-app/src/App.tsx create mode 100644 examples/bulk-actions-app/src/helpers/graphql.ts create mode 100644 examples/bulk-actions-app/src/index.ts create mode 100644 examples/bulk-actions-app/src/settings.ts create mode 100644 examples/bulk-actions-app/src/vite-env.d.ts create mode 100644 examples/bulk-actions-app/tailwind.config.ts create mode 100644 examples/bulk-actions-app/tsconfig.app.json create mode 100644 examples/bulk-actions-app/tsconfig.json create mode 100644 examples/bulk-actions-app/tsconfig.node.json diff --git a/examples/bulk-actions-app/.gitignore b/examples/bulk-actions-app/.gitignore new file mode 100644 index 0000000..ea6ad68 --- /dev/null +++ b/examples/bulk-actions-app/.gitignore @@ -0,0 +1,25 @@ + +# 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/bulk-actions-app/.prettierrc b/examples/bulk-actions-app/.prettierrc new file mode 100644 index 0000000..ca0c14e --- /dev/null +++ b/examples/bulk-actions-app/.prettierrc @@ -0,0 +1,5 @@ +{ + "printWidth": 120, + "tabWidth": 4, + "singleQuote": true +} diff --git a/examples/bulk-actions-app/.secret-example.json b/examples/bulk-actions-app/.secret-example.json new file mode 100644 index 0000000..d5e413d --- /dev/null +++ b/examples/bulk-actions-app/.secret-example.json @@ -0,0 +1,4 @@ +{ + "THIRD_PARTY_API_KEY": 1, + "__DONT_COMMIT_THIS_FILE_WITH_TOKENS__": true +} diff --git a/examples/bulk-actions-app/README.md b/examples/bulk-actions-app/README.md new file mode 100644 index 0000000..a59fa49 --- /dev/null +++ b/examples/bulk-actions-app/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/bulk-actions-app/eslint.config.js b/examples/bulk-actions-app/eslint.config.js new file mode 100644 index 0000000..9d1c0c6 --- /dev/null +++ b/examples/bulk-actions-app/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/bulk-actions-app/index.html b/examples/bulk-actions-app/index.html new file mode 100644 index 0000000..8c69fd7 --- /dev/null +++ b/examples/bulk-actions-app/index.html @@ -0,0 +1,17 @@ + + + + + + Frontify Sample App + + +
+ + + diff --git a/examples/bulk-actions-app/manifest.json b/examples/bulk-actions-app/manifest.json new file mode 100644 index 0000000..4b2760c --- /dev/null +++ b/examples/bulk-actions-app/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/bulk-actions-app/package.json b/examples/bulk-actions-app/package.json new file mode 100644 index 0000000..1333659 --- /dev/null +++ b/examples/bulk-actions-app/package.json @@ -0,0 +1,36 @@ +{ + "name": "bulk-actions-app", + "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" + }, + "dependencies": { + "@frontify/app-bridge-app": "^0.1.2", + "@frontify/fondue": "^12.2.16", + "@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" + } +} diff --git a/examples/bulk-actions-app/postcss.config.cjs b/examples/bulk-actions-app/postcss.config.cjs new file mode 100644 index 0000000..67cdf1a --- /dev/null +++ b/examples/bulk-actions-app/postcss.config.cjs @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/examples/bulk-actions-app/src/App.tsx b/examples/bulk-actions-app/src/App.tsx new file mode 100644 index 0000000..e2affba --- /dev/null +++ b/examples/bulk-actions-app/src/App.tsx @@ -0,0 +1,32 @@ +import { AppBridgePlatformApp } from '@frontify/app-bridge-app'; +import { useEffect, useState } from 'react'; +import { getAssetIds } from './helpers/graphql'; + +export const App = () => { + const appBridge = new AppBridgePlatformApp(); + const context = appBridge.context().get(); + const [images, setImages] = useState<{ previewUrl: string; title: string }[]>([]); + + useEffect(() => { + const fetchImages = async () => { + if (context.surface === 'assetBulkActions') { + const endpointImages = (await appBridge.api({ + name: 'executeGraphQl', + payload: { query: getAssetIds(context.selection.assets.ids) }, + })) as { assets: { previewUrl: string; title: string }[] }; + console.log(endpointImages); + setImages(endpointImages.assets); + } + }; + + fetchImages(); + }, []); + + return ( +
+
+ {images.length > 0 && images.map((image) => )} +
+
+ ); +}; diff --git a/examples/bulk-actions-app/src/helpers/graphql.ts b/examples/bulk-actions-app/src/helpers/graphql.ts new file mode 100644 index 0000000..40e7c44 --- /dev/null +++ b/examples/bulk-actions-app/src/helpers/graphql.ts @@ -0,0 +1,10 @@ +export const getAssetIds = (assetIds: string[]) => `query assetIds { +assets( +ids: [${assetIds.map((id) => `"${id}"`)}] +) { +title +... on Image { +previewUrl +} +} +}`; diff --git a/examples/bulk-actions-app/src/index.ts b/examples/bulk-actions-app/src/index.ts new file mode 100644 index 0000000..3bd760f --- /dev/null +++ b/examples/bulk-actions-app/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/bulk-actions-app/src/settings.ts b/examples/bulk-actions-app/src/settings.ts new file mode 100644 index 0000000..25a335a --- /dev/null +++ b/examples/bulk-actions-app/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/bulk-actions-app/src/vite-env.d.ts b/examples/bulk-actions-app/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/examples/bulk-actions-app/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/bulk-actions-app/tailwind.config.ts b/examples/bulk-actions-app/tailwind.config.ts new file mode 100644 index 0000000..bbfd4d5 --- /dev/null +++ b/examples/bulk-actions-app/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/bulk-actions-app/tsconfig.app.json b/examples/bulk-actions-app/tsconfig.app.json new file mode 100644 index 0000000..dd60786 --- /dev/null +++ b/examples/bulk-actions-app/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/bulk-actions-app/tsconfig.json b/examples/bulk-actions-app/tsconfig.json new file mode 100644 index 0000000..f6df6c7 --- /dev/null +++ b/examples/bulk-actions-app/tsconfig.json @@ -0,0 +1,7 @@ +{ + "files": [], + "references": [ + { "path": "./tsconfig.app.json" }, + { "path": "./tsconfig.node.json" } + ] +} diff --git a/examples/bulk-actions-app/tsconfig.node.json b/examples/bulk-actions-app/tsconfig.node.json new file mode 100644 index 0000000..82ac547 --- /dev/null +++ b/examples/bulk-actions-app/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 a0a71e65f436b23a867b26106e4ee675300bb70c Mon Sep 17 00:00:00 2001 From: julianiff Date: Mon, 21 Oct 2024 11:57:48 +0200 Subject: [PATCH 02/27] chore: update pnpm-lock --- pnpm-lock.yaml | 346 ++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 345 insertions(+), 1 deletion(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6e34b6a..daed952 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -130,6 +130,67 @@ importers: 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': + specifier: ^0.1.2 + version: 0.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@frontify/fondue': + specifier: ^12.2.16 + 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.2(@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.2(@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) + 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/hello-world: dependencies: '@frontify/app-bridge-app': @@ -981,6 +1042,12 @@ packages: react: ^18 react-dom: ^18 + '@frontify/app-bridge-app@0.1.2': + resolution: {integrity: sha512-8HRsQVV1U14yL8Ud6W1xypCfQQlRyjKJwkdKTx4oCIeXq+V30fX7KWlaTBFdJNUBBYLVG0yL8ueI5+lO5lgHIQ==} + peerDependencies: + react: ^18 + react-dom: ^18 + '@frontify/fondue-charts@1.8.14': resolution: {integrity: sha512-ymQdbpwk3BqmdPCtq4WI5TFDA3bQY6rya1o5y6lVTcsuZjQOWOqE3ZgjEWJUsBi8ymTXl6KPtAfSXHZQ1q/Hkw==} engines: {node: '>=18'} @@ -989,6 +1056,14 @@ packages: react: ^18 react-dom: ^18 + '@frontify/fondue-charts@1.8.15': + resolution: {integrity: sha512-dRFn/NYd9BKsECb/eKuOSQdOD2+UTwgtTNIPs5DDSQgljsDr2wPLoYmM0REq4h0SueG0fBmvE0aqJi/rVO0sGQ==} + engines: {node: '>=18'} + peerDependencies: + '@frontify/fondue-tokens': ^3.5.7 + react: ^18 + react-dom: ^18 + '@frontify/fondue-components@3.3.3': resolution: {integrity: sha512-Hyf/60ximskLmufvvyBp8FKsZm1Ii2nYohx7y//yuRPDBqdf8QFUJoFoFruCib3aBcMI0NduWChe2CWnlCmtRQ==} engines: {node: '>=18'} @@ -998,12 +1073,27 @@ packages: react: ^18 react-dom: ^18 + '@frontify/fondue-components@4.0.1': + resolution: {integrity: sha512-sIOeL1purJP2drS8O5o6jwE+my9qWQv+33ITRs0NKMRFXm4QbdUGELuAlhPZp64rn5Indo5oloNXYPukMybSmw==} + engines: {node: '>=18'} + peerDependencies: + '@frontify/fondue-icons': ^0.5.0 + '@frontify/fondue-tokens': ^3.5.7 + react: ^18 + react-dom: ^18 + '@frontify/fondue-icons@0.4.2': resolution: {integrity: sha512-i3dFH6N/qCBBvbJUopU/9rUDATii1vCt5yIUea3i7zpdHFupINQuG83aHA4dSFm18ofekqIqEiEPXy1fUND7Hw==} engines: {node: '>=18'} peerDependencies: react: ^18 + '@frontify/fondue-icons@0.5.0': + resolution: {integrity: sha512-Si16yGpFqbo57gD47FqNnvuzy+Y92UroPEMtd78cR73MwHI5tAK9i+8UoiKG2R1U35BCQCDkimRaX6Fv8IuclA==} + engines: {node: '>=18'} + peerDependencies: + react: ^18 + '@frontify/fondue-tokens@3.5.7': resolution: {integrity: sha512-nvZZWIxK6pf0ZVsSN1CaNIJuJLmXoGnMDwwqjpX3vCeXt7SqBrlnmtDr3ZJc3NJwB4lR8g2pCET1sCKRQE7j5w==} peerDependencies: @@ -1016,6 +1106,13 @@ packages: react: ^18 react-dom: ^18 + '@frontify/fondue@12.2.16': + resolution: {integrity: sha512-JZKnLGmknxTyJuxeY2liuPWDUS057YhczEbWhrV0CDDpquqYTIkrlqk9XzNtnHZiOUSJokt8brLnGJuUGE2QVg==} + engines: {node: '>=18'} + peerDependencies: + react: ^18 + react-dom: ^18 + '@frontify/frontify-cli@5.7.8': resolution: {integrity: sha512-rqnzcuXkVA9dO3GmZHRycwAj2bm4GGwVLX+uXvCqHAY85N87vc/YuW8eQZ7f9/waVw50+q5pKtrbMXI37qHUyg==} engines: {node: '>=18'} @@ -1197,6 +1294,15 @@ packages: '@types/react': optional: true + '@radix-ui/react-context@1.1.1': + resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@radix-ui/react-dialog@1.1.1': resolution: {integrity: sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==} peerDependencies: @@ -1354,6 +1460,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-presence@1.1.1': + resolution: {integrity: sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-primitive@2.0.0': resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==} peerDependencies: @@ -1467,6 +1586,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-tabs@1.1.1': + resolution: {integrity: sha512-3GBUDmP2DvzmtYLMsHmpA1GtR46ZDZ+OreXM/N+kkQJOPIgytFWWTfDQmBQKBvaFS0Vno0FktdbVzN28KGrMdw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-toggle-group@1.1.0': resolution: {integrity: sha512-PpTJV68dZU2oqqgq75Uzto5o/XfOVgkrJ9rulVmfTKxWp3HfUjHE6CP/WLRR4AzPX9HWxw7vFow2me85Yu+Naw==} peerDependencies: @@ -6469,6 +6601,11 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + '@frontify/app-bridge-app@0.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + '@frontify/fondue-charts@1.8.14(@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)': dependencies: '@frontify/fondue-tokens': 3.5.7(tailwindcss@3.4.3) @@ -6490,6 +6627,27 @@ snapshots: transitivePeerDependencies: - '@react-spring/web' + '@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)': + dependencies: + '@frontify/fondue-tokens': 3.5.7(tailwindcss@3.4.3) + '@visx/axis': 3.10.1(react@18.3.1) + '@visx/glyph': 3.3.0(react@18.3.1) + '@visx/grid': 3.5.0(react@18.3.1) + '@visx/group': 3.3.0(react@18.3.1) + '@visx/hierarchy': 3.3.0(react@18.3.1) + '@visx/responsive': 3.10.2(react@18.3.1) + '@visx/scale': 3.5.0 + '@visx/shape': 3.5.0(react@18.3.1) + '@visx/text': 3.3.0(react@18.3.1) + '@visx/tooltip': 3.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@visx/xychart': 3.11.0(@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) + lodash-es: 4.17.21 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + use-font-face-observer: 1.2.2(react@18.3.1) + transitivePeerDependencies: + - '@react-spring/web' + '@frontify/fondue-components@3.3.3(@frontify/fondue-icons@0.4.2(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)': dependencies: '@frontify/fondue-icons': 0.4.2(react@18.3.1) @@ -6519,10 +6677,44 @@ snapshots: - '@types/react-dom' - tailwindcss + '@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)': + dependencies: + '@frontify/fondue-icons': 0.5.0(react@18.3.1) + '@frontify/fondue-tokens': 3.5.7(tailwindcss@3.4.3) + '@radix-ui/react-checkbox': 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-dialog': 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-dropdown-menu': 2.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-label': 2.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-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-progress': 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-scroll-area': 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-select': 2.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-separator': 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-slider': 1.2.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-slot': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-switch': 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-tabs': 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-toggle-group': 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) + downshift: 9.0.8(react@18.3.1) + react: 18.3.1 + react-colorful: 5.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-dom: 18.3.1(react@18.3.1) + tailwind-merge: 2.5.2 + tailwind-variants: 0.2.1(tailwindcss@3.4.3) + transitivePeerDependencies: + - '@types/react' + - '@types/react-dom' + - tailwindcss + '@frontify/fondue-icons@0.4.2(react@18.3.1)': dependencies: react: 18.3.1 + '@frontify/fondue-icons@0.5.0(react@18.3.1)': + dependencies: + react: 18.3.1 + '@frontify/fondue-tokens@3.5.7(tailwindcss@3.4.3)': dependencies: tailwindcss: 3.4.3 @@ -6637,6 +6829,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.2(@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.2(@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 @@ -6687,7 +6989,7 @@ snapshots: '@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.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.2(@types/react@18.3.3)(immer@10.1.1)(react@18.3.1)) + '@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)) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) transitivePeerDependencies: @@ -6887,6 +7189,12 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 + '@radix-ui/react-context@1.1.1(@types/react@18.3.3)(react@18.3.1)': + dependencies: + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.3 + '@radix-ui/react-dialog@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)': dependencies: '@radix-ui/primitive': 1.1.0 @@ -7063,6 +7371,16 @@ snapshots: '@types/react': 18.3.3 '@types/react-dom': 18.3.0 + '@radix-ui/react-presence@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)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.3)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.3 + '@types/react-dom': 18.3.0 + '@radix-ui/react-primitive@2.0.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)': dependencies: '@radix-ui/react-slot': 1.1.0(@types/react@18.3.3)(react@18.3.1) @@ -7195,6 +7513,22 @@ snapshots: '@types/react': 18.3.3 '@types/react-dom': 18.3.0 + '@radix-ui/react-tabs@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)': + dependencies: + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-context': 1.1.1(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-direction': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-id': 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-presence': 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-primitive': 2.0.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-roving-focus': 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-use-controllable-state': 1.1.0(@types/react@18.3.3)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.3 + '@types/react-dom': 18.3.0 + '@radix-ui/react-toggle-group@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)': dependencies: '@radix-ui/primitive': 1.1.0 @@ -9179,6 +9513,16 @@ snapshots: postcss: 8.4.38 postcss-value-parser: 4.2.0 + autoprefixer@10.4.19(postcss@8.4.45): + dependencies: + browserslist: 4.23.0 + caniuse-lite: 1.0.30001624 + fraction.js: 4.3.7 + normalize-range: 0.1.2 + picocolors: 1.0.1 + postcss: 8.4.45 + postcss-value-parser: 4.2.0 + avvio@8.3.2: dependencies: '@fastify/error': 3.4.1 From b3b8e349ba9c4bddc9935e2930da44232eebf835 Mon Sep 17 00:00:00 2001 From: Margus Lanto Date: Wed, 23 Oct 2024 11:16:03 +0200 Subject: [PATCH 03/27] List bulk-selected file names with extensions, add find & replace markup --- examples/bulk-actions-app/src/App.tsx | 49 ++++++++++++++++--- .../bulk-actions-app/src/helpers/graphql.ts | 21 ++++---- 2 files changed, 54 insertions(+), 16 deletions(-) diff --git a/examples/bulk-actions-app/src/App.tsx b/examples/bulk-actions-app/src/App.tsx index e2affba..bd2921f 100644 --- a/examples/bulk-actions-app/src/App.tsx +++ b/examples/bulk-actions-app/src/App.tsx @@ -1,19 +1,21 @@ import { AppBridgePlatformApp } from '@frontify/app-bridge-app'; import { useEffect, useState } from 'react'; import { getAssetIds } from './helpers/graphql'; +import { Button } from '@frontify/fondue/components'; +import { Heading, TextInput } from '@frontify/fondue'; export const App = () => { const appBridge = new AppBridgePlatformApp(); const context = appBridge.context().get(); - const [images, setImages] = useState<{ previewUrl: string; title: string }[]>([]); + const [images, setImages] = useState<{ previewUrl: string; title: string; extension: string }[]>([]); useEffect(() => { const fetchImages = async () => { if (context.surface === 'assetBulkActions') { - const endpointImages = (await appBridge.api({ + const endpointImages = await appBridge.api({ name: 'executeGraphQl', payload: { query: getAssetIds(context.selection.assets.ids) }, - })) as { assets: { previewUrl: string; title: string }[] }; + }); console.log(endpointImages); setImages(endpointImages.assets); } @@ -23,9 +25,44 @@ export const App = () => { }, []); return ( -
-
- {images.length > 0 && images.map((image) => )} +
+ + Bulk Rename Files + +
+
+ {}} + onEnterPressed={() => {}} + onBlur={() => {}} + /> +
No matches
+
+
+ {}} + onEnterPressed={() => {}} + onBlur={() => {}} + /> + +
+
+
+ {images.length > 0 && + images.map((image) => ( +

+ {image.title} + .{image.extension} +

+ ))}
); diff --git a/examples/bulk-actions-app/src/helpers/graphql.ts b/examples/bulk-actions-app/src/helpers/graphql.ts index 40e7c44..d4c8749 100644 --- a/examples/bulk-actions-app/src/helpers/graphql.ts +++ b/examples/bulk-actions-app/src/helpers/graphql.ts @@ -1,10 +1,11 @@ -export const getAssetIds = (assetIds: string[]) => `query assetIds { -assets( -ids: [${assetIds.map((id) => `"${id}"`)}] -) { -title -... on Image { -previewUrl -} -} -}`; +export const getAssetIds = (assetIds: string[]) => ` + query assetIds { + assets(ids: [${assetIds.map((id) => `"${id}"`)}]) { + title + ... on Image { + previewUrl + extension + } + } + } +`; From 832104438f3211c010064b880f75fc42dfe0401e Mon Sep 17 00:00:00 2001 From: Margus Lanto Date: Wed, 23 Oct 2024 11:20:04 +0200 Subject: [PATCH 04/27] Reduce indentation --- examples/bulk-actions-app/src/App.tsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/examples/bulk-actions-app/src/App.tsx b/examples/bulk-actions-app/src/App.tsx index bd2921f..85bce53 100644 --- a/examples/bulk-actions-app/src/App.tsx +++ b/examples/bulk-actions-app/src/App.tsx @@ -7,18 +7,22 @@ import { Heading, TextInput } from '@frontify/fondue'; export const App = () => { const appBridge = new AppBridgePlatformApp(); const context = appBridge.context().get(); + const query = getAssetIds(context.selection.assets.ids); + const [images, setImages] = useState<{ previewUrl: string; title: string; extension: string }[]>([]); useEffect(() => { const fetchImages = async () => { - if (context.surface === 'assetBulkActions') { - const endpointImages = await appBridge.api({ - name: 'executeGraphQl', - payload: { query: getAssetIds(context.selection.assets.ids) }, - }); - console.log(endpointImages); - setImages(endpointImages.assets); + if (context.surface !== 'assetBulkActions') { + return; } + + const endpointImages = await appBridge.api({ + name: 'executeGraphQl', + payload: { query }, + }); + console.log(endpointImages); + setImages(endpointImages.assets); }; fetchImages(); From 3144d85ead53669b71dbd2e6e8d233cbb5c0cb08 Mon Sep 17 00:00:00 2001 From: Margus Lanto Date: Wed, 23 Oct 2024 11:30:19 +0200 Subject: [PATCH 05/27] Rename query --- examples/bulk-actions-app/src/App.tsx | 7 ++++--- examples/bulk-actions-app/src/helpers/graphql.ts | 4 ++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/examples/bulk-actions-app/src/App.tsx b/examples/bulk-actions-app/src/App.tsx index 85bce53..7065282 100644 --- a/examples/bulk-actions-app/src/App.tsx +++ b/examples/bulk-actions-app/src/App.tsx @@ -1,13 +1,12 @@ import { AppBridgePlatformApp } from '@frontify/app-bridge-app'; import { useEffect, useState } from 'react'; -import { getAssetIds } from './helpers/graphql'; +import { getAssetsByIds } from './helpers/graphql'; import { Button } from '@frontify/fondue/components'; import { Heading, TextInput } from '@frontify/fondue'; export const App = () => { const appBridge = new AppBridgePlatformApp(); const context = appBridge.context().get(); - const query = getAssetIds(context.selection.assets.ids); const [images, setImages] = useState<{ previewUrl: string; title: string; extension: string }[]>([]); @@ -19,7 +18,7 @@ export const App = () => { const endpointImages = await appBridge.api({ name: 'executeGraphQl', - payload: { query }, + payload: { query: getAssetsByIds(context.selection.assets.ids) }, }); console.log(endpointImages); setImages(endpointImages.assets); @@ -38,6 +37,7 @@ export const App = () => { {}} onEnterPressed={() => {}} @@ -49,6 +49,7 @@ export const App = () => { {}} onEnterPressed={() => {}} diff --git a/examples/bulk-actions-app/src/helpers/graphql.ts b/examples/bulk-actions-app/src/helpers/graphql.ts index d4c8749..d6b9a0c 100644 --- a/examples/bulk-actions-app/src/helpers/graphql.ts +++ b/examples/bulk-actions-app/src/helpers/graphql.ts @@ -1,5 +1,5 @@ -export const getAssetIds = (assetIds: string[]) => ` - query assetIds { +export const getAssetsByIds = (assetIds: string[]) => ` + query Assets { assets(ids: [${assetIds.map((id) => `"${id}"`)}]) { title ... on Image { From 138cb35a8e857bbadc80cdb2f51144e74174d680 Mon Sep 17 00:00:00 2001 From: Margus Lanto Date: Wed, 23 Oct 2024 11:35:05 +0200 Subject: [PATCH 06/27] Rename images to assets --- examples/bulk-actions-app/src/App.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/examples/bulk-actions-app/src/App.tsx b/examples/bulk-actions-app/src/App.tsx index 7065282..cb9559d 100644 --- a/examples/bulk-actions-app/src/App.tsx +++ b/examples/bulk-actions-app/src/App.tsx @@ -8,23 +8,23 @@ export const App = () => { const appBridge = new AppBridgePlatformApp(); const context = appBridge.context().get(); - const [images, setImages] = useState<{ previewUrl: string; title: string; extension: string }[]>([]); + const [assets, setAssets] = useState<{ previewUrl: string; title: string; extension: string }[]>([]); useEffect(() => { - const fetchImages = async () => { + const fetchAssets = async () => { if (context.surface !== 'assetBulkActions') { return; } - const endpointImages = await appBridge.api({ + const response = await appBridge.api({ name: 'executeGraphQl', payload: { query: getAssetsByIds(context.selection.assets.ids) }, }); - console.log(endpointImages); - setImages(endpointImages.assets); + + setAssets(response.assets); }; - fetchImages(); + fetchAssets(); }, []); return ( @@ -61,11 +61,11 @@ export const App = () => {
- {images.length > 0 && - images.map((image) => ( + {assets.length > 0 && + assets.map((asset) => (

- {image.title} - .{image.extension} + {asset.title} + .{asset.extension}

))}
From 96d8e932ac3a355cc5a1dc09b4531787f47d9a9c Mon Sep 17 00:00:00 2001 From: Margus Lanto Date: Wed, 23 Oct 2024 11:35:50 +0200 Subject: [PATCH 07/27] Rename images to assets --- examples/bulk-actions-app/src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/bulk-actions-app/src/App.tsx b/examples/bulk-actions-app/src/App.tsx index cb9559d..131d9c1 100644 --- a/examples/bulk-actions-app/src/App.tsx +++ b/examples/bulk-actions-app/src/App.tsx @@ -30,7 +30,7 @@ export const App = () => { return (
- Bulk Rename Files + Bulk Rename Assets
From e48927bc49eb4e87709af01f53cd611ba962ca05 Mon Sep 17 00:00:00 2001 From: Margus Lanto Date: Wed, 23 Oct 2024 11:47:02 +0200 Subject: [PATCH 08/27] Disable fields until assets are fetched --- examples/bulk-actions-app/src/App.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/examples/bulk-actions-app/src/App.tsx b/examples/bulk-actions-app/src/App.tsx index 131d9c1..71bbac9 100644 --- a/examples/bulk-actions-app/src/App.tsx +++ b/examples/bulk-actions-app/src/App.tsx @@ -2,7 +2,7 @@ import { AppBridgePlatformApp } from '@frontify/app-bridge-app'; import { useEffect, useState } from 'react'; import { getAssetsByIds } from './helpers/graphql'; import { Button } from '@frontify/fondue/components'; -import { Heading, TextInput } from '@frontify/fondue'; +import { Heading, Text, TextInput } from '@frontify/fondue'; export const App = () => { const appBridge = new AppBridgePlatformApp(); @@ -10,6 +10,8 @@ export const App = () => { const [assets, setAssets] = useState<{ previewUrl: string; title: string; extension: string }[]>([]); + const assetsAreFetched = assets.length > 0; + useEffect(() => { const fetchAssets = async () => { if (context.surface !== 'assetBulkActions') { @@ -37,7 +39,7 @@ export const App = () => { {}} onEnterPressed={() => {}} @@ -49,7 +51,7 @@ export const App = () => { {}} onEnterPressed={() => {}} @@ -61,13 +63,18 @@ export const App = () => {
- {assets.length > 0 && + {assetsAreFetched ? ( assets.map((asset) => (

{asset.title} .{asset.extension}

- ))} + )) + ) : ( + + Gathering filenames of selected assets ... + + )}
); From 2e50dd095b3534a284211a9caaacff9975670bba Mon Sep 17 00:00:00 2001 From: Margus Lanto Date: Wed, 23 Oct 2024 12:01:55 +0200 Subject: [PATCH 09/27] Implement highlighting --- examples/bulk-actions-app/src/App.tsx | 29 ++++++++++++++++++++++----- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/examples/bulk-actions-app/src/App.tsx b/examples/bulk-actions-app/src/App.tsx index 71bbac9..55cfb82 100644 --- a/examples/bulk-actions-app/src/App.tsx +++ b/examples/bulk-actions-app/src/App.tsx @@ -4,11 +4,30 @@ import { getAssetsByIds } from './helpers/graphql'; import { Button } from '@frontify/fondue/components'; import { Heading, Text, TextInput } from '@frontify/fondue'; +const highlightMatches = (filename: string, query: string) => { + if (!query) { + return filename; + } + + const parts = filename.split(new RegExp(`(${query})`, 'gi')); + + return parts.map((part, index) => + part.toLowerCase() === query.toLowerCase() ? ( + + {part} + + ) : ( + part + ), + ); +}; + export const App = () => { const appBridge = new AppBridgePlatformApp(); const context = appBridge.context().get(); const [assets, setAssets] = useState<{ previewUrl: string; title: string; extension: string }[]>([]); + const [findText, setFindText] = useState(''); const assetsAreFetched = assets.length > 0; @@ -40,8 +59,8 @@ export const App = () => { id="find" placeholder="Find" disabled={!assetsAreFetched} - value={''} - onChange={() => {}} + value={findText} + onChange={setFindText} onEnterPressed={() => {}} onBlur={() => {}} /> @@ -64,9 +83,9 @@ export const App = () => {
{assetsAreFetched ? ( - assets.map((asset) => ( -

- {asset.title} + assets.map((asset, index) => ( +

+ {highlightMatches(asset.title, findText)} .{asset.extension}

)) From 575e2fecc13f028eafe30924beec9265936f2e19 Mon Sep 17 00:00:00 2001 From: Margus Lanto Date: Wed, 23 Oct 2024 15:50:07 +0200 Subject: [PATCH 10/27] Show result count --- examples/bulk-actions-app/src/App.tsx | 44 +++++++++++++++++++++------ 1 file changed, 35 insertions(+), 9 deletions(-) diff --git a/examples/bulk-actions-app/src/App.tsx b/examples/bulk-actions-app/src/App.tsx index 55cfb82..c1adcea 100644 --- a/examples/bulk-actions-app/src/App.tsx +++ b/examples/bulk-actions-app/src/App.tsx @@ -6,12 +6,14 @@ import { Heading, Text, TextInput } from '@frontify/fondue'; const highlightMatches = (filename: string, query: string) => { if (!query) { - return filename; + return { highlightedText: filename, matchCount: 0 }; } const parts = filename.split(new RegExp(`(${query})`, 'gi')); - return parts.map((part, index) => + const matchCount = parts.filter((part) => part.toLowerCase() === query.toLowerCase()).length; + + const highlightedText = parts.map((part, index) => part.toLowerCase() === query.toLowerCase() ? ( {part} @@ -20,6 +22,16 @@ const highlightMatches = (filename: string, query: string) => { part ), ); + + return { highlightedText, matchCount }; +}; + +const getResultCount = (count: number) => { + if (count === 0) { + return 'No results'; + } + + return `${count} result${count === 1 ? '' : 's'}`; }; export const App = () => { @@ -28,6 +40,7 @@ export const App = () => { const [assets, setAssets] = useState<{ previewUrl: string; title: string; extension: string }[]>([]); const [findText, setFindText] = useState(''); + const [matchCount, setMatchCount] = useState(0); const assetsAreFetched = assets.length > 0; @@ -48,6 +61,15 @@ export const App = () => { fetchAssets(); }, []); + useEffect(() => { + let totalMatchCount = 0; + assets.forEach((asset) => { + const { matchCount } = highlightMatches(asset.title, findText); + totalMatchCount += matchCount; + }); + setMatchCount(totalMatchCount); + }, [findText, assets]); + return (
@@ -64,7 +86,7 @@ export const App = () => { onEnterPressed={() => {}} onBlur={() => {}} /> -
No matches
+
{getResultCount(matchCount)}
{
{assetsAreFetched ? ( - assets.map((asset, index) => ( -

- {highlightMatches(asset.title, findText)} - .{asset.extension} -

- )) + assets.map((asset, index) => { + const { highlightedText } = highlightMatches(asset.title, findText); + + return ( +

+ {highlightedText} + .{asset.extension} +

+ ); + }) ) : ( Gathering filenames of selected assets ... From 8f0b1ff2712855f5b02a555622b540cb6cd8fa50 Mon Sep 17 00:00:00 2001 From: Margus Lanto Date: Wed, 23 Oct 2024 16:17:01 +0200 Subject: [PATCH 11/27] Enable renaming when there are matches --- examples/bulk-actions-app/src/App.tsx | 31 ++++++++++++++++----------- 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/examples/bulk-actions-app/src/App.tsx b/examples/bulk-actions-app/src/App.tsx index c1adcea..1ad70f4 100644 --- a/examples/bulk-actions-app/src/App.tsx +++ b/examples/bulk-actions-app/src/App.tsx @@ -2,7 +2,7 @@ import { AppBridgePlatformApp } from '@frontify/app-bridge-app'; import { useEffect, useState } from 'react'; import { getAssetsByIds } from './helpers/graphql'; import { Button } from '@frontify/fondue/components'; -import { Heading, Text, TextInput } from '@frontify/fondue'; +import { Heading, Stack, Text, TextInput } from '@frontify/fondue'; const highlightMatches = (filename: string, query: string) => { if (!query) { @@ -15,7 +15,7 @@ const highlightMatches = (filename: string, query: string) => { const highlightedText = parts.map((part, index) => part.toLowerCase() === query.toLowerCase() ? ( - + {part} ) : ( @@ -28,10 +28,10 @@ const highlightMatches = (filename: string, query: string) => { const getResultCount = (count: number) => { if (count === 0) { - return 'No results'; + return 'No matches'; } - return `${count} result${count === 1 ? '' : 's'}`; + return `${count} match${count === 1 ? '' : 'es'}`; }; export const App = () => { @@ -40,6 +40,7 @@ export const App = () => { const [assets, setAssets] = useState<{ previewUrl: string; title: string; extension: string }[]>([]); const [findText, setFindText] = useState(''); + const [replaceText, setReplaceText] = useState(''); const [matchCount, setMatchCount] = useState(0); const assetsAreFetched = assets.length > 0; @@ -70,6 +71,10 @@ export const App = () => { setMatchCount(totalMatchCount); }, [findText, assets]); + const renameAssets = () => { + console.log('about to rename...'); + }; + return (
@@ -86,19 +91,19 @@ export const App = () => { onEnterPressed={() => {}} onBlur={() => {}} /> -
{getResultCount(matchCount)}
+ {getResultCount(matchCount)}
{}} + value={replaceText} + onChange={setReplaceText} onEnterPressed={() => {}} onBlur={() => {}} /> -
@@ -109,10 +114,12 @@ export const App = () => { const { highlightedText } = highlightMatches(asset.title, findText); return ( -

- {highlightedText} - .{asset.extension} -

+ + + {highlightedText} + .{asset.extension} + + ); }) ) : ( From 3617ad5b1d026749bcc59ed0674c32c28863127d Mon Sep 17 00:00:00 2001 From: Margus Lanto Date: Wed, 23 Oct 2024 16:35:38 +0200 Subject: [PATCH 12/27] Query also for asset id --- examples/bulk-actions-app/src/App.tsx | 18 ++++++++++-------- .../bulk-actions-app/src/helpers/graphql.ts | 1 + 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/examples/bulk-actions-app/src/App.tsx b/examples/bulk-actions-app/src/App.tsx index 1ad70f4..7d9b345 100644 --- a/examples/bulk-actions-app/src/App.tsx +++ b/examples/bulk-actions-app/src/App.tsx @@ -38,13 +38,17 @@ export const App = () => { const appBridge = new AppBridgePlatformApp(); const context = appBridge.context().get(); - const [assets, setAssets] = useState<{ previewUrl: string; title: string; extension: string }[]>([]); + const [assets, setAssets] = useState<{ id: string; previewUrl: string; title: string; extension: string }[]>([]); const [findText, setFindText] = useState(''); const [replaceText, setReplaceText] = useState(''); const [matchCount, setMatchCount] = useState(0); const assetsAreFetched = assets.length > 0; + const renameAssets = () => { + console.log('about to rename...'); + }; + useEffect(() => { const fetchAssets = async () => { if (context.surface !== 'assetBulkActions') { @@ -56,6 +60,8 @@ export const App = () => { payload: { query: getAssetsByIds(context.selection.assets.ids) }, }); + console.log('response:', response); + setAssets(response.assets); }; @@ -71,10 +77,6 @@ export const App = () => { setMatchCount(totalMatchCount); }, [findText, assets]); - const renameAssets = () => { - console.log('about to rename...'); - }; - return (
@@ -110,11 +112,11 @@ export const App = () => {
{assetsAreFetched ? ( - assets.map((asset, index) => { + assets.map((asset) => { const { highlightedText } = highlightMatches(asset.title, findText); return ( - + {highlightedText} .{asset.extension} @@ -124,7 +126,7 @@ export const App = () => { }) ) : ( - Gathering filenames of selected assets ... + Gathering names of selected assets ... )}
diff --git a/examples/bulk-actions-app/src/helpers/graphql.ts b/examples/bulk-actions-app/src/helpers/graphql.ts index d6b9a0c..7f51da5 100644 --- a/examples/bulk-actions-app/src/helpers/graphql.ts +++ b/examples/bulk-actions-app/src/helpers/graphql.ts @@ -1,6 +1,7 @@ export const getAssetsByIds = (assetIds: string[]) => ` query Assets { assets(ids: [${assetIds.map((id) => `"${id}"`)}]) { + id title ... on Image { previewUrl From 63a015473474730a33615c1ba9f5d55be48aca74 Mon Sep 17 00:00:00 2001 From: Margus Lanto Date: Thu, 24 Oct 2024 15:25:39 +0200 Subject: [PATCH 13/27] Add asset update mutation --- examples/bulk-actions-app/src/App.tsx | 83 +++++++++++++++---- .../bulk-actions-app/src/helpers/graphql.ts | 17 +++- 2 files changed, 85 insertions(+), 15 deletions(-) diff --git a/examples/bulk-actions-app/src/App.tsx b/examples/bulk-actions-app/src/App.tsx index 7d9b345..1fe64e3 100644 --- a/examples/bulk-actions-app/src/App.tsx +++ b/examples/bulk-actions-app/src/App.tsx @@ -1,6 +1,6 @@ import { AppBridgePlatformApp } from '@frontify/app-bridge-app'; import { useEffect, useState } from 'react'; -import { getAssetsByIds } from './helpers/graphql'; +import { getAssetsByIds, updateAssetTitle } from './helpers/graphql'; import { Button } from '@frontify/fondue/components'; import { Heading, Stack, Text, TextInput } from '@frontify/fondue'; @@ -26,27 +26,72 @@ const highlightMatches = (filename: string, query: string) => { return { highlightedText, matchCount }; }; -const getResultCount = (count: number) => { - if (count === 0) { +const getResultCount = (matchCount: number, assetCount: number) => { + if (matchCount === 0) { return 'No matches'; } - return `${count} match${count === 1 ? '' : 'es'}`; + return `${matchCount} match${matchCount === 1 ? '' : 'es'} in ${assetCount} asset${assetCount === 1 ? '' : 's'}`; }; +type Asset = { id: string; previewUrl: string; title: string; extension: string }; + export const App = () => { const appBridge = new AppBridgePlatformApp(); const context = appBridge.context().get(); - const [assets, setAssets] = useState<{ id: string; previewUrl: string; title: string; extension: string }[]>([]); + const [assets, setAssets] = useState([]); const [findText, setFindText] = useState(''); const [replaceText, setReplaceText] = useState(''); const [matchCount, setMatchCount] = useState(0); + const [matchingAssets, setMatchingAssets] = useState([]); + const [renamingInProgress, setRenamingInProgress] = useState(false); + const [progressMessage, setProgressMessage] = useState(''); const assetsAreFetched = assets.length > 0; + const matchingAssetCount = matchingAssets.length; + + const handleFindTextChange = (value: string) => { + setProgressMessage(''); + setFindText(value); + }; + + const handleReplaceTextChange = (value: string) => { + setProgressMessage(''); + setReplaceText(value); + }; + + const renameAssets = async () => { + const count = matchingAssetCount; + let index = 1; + + setRenamingInProgress(true); + + for (const asset of matchingAssets) { + setProgressMessage(`Renaming ${index} of ${count} asset${count === 1 ? '' : 's'}...`); + + const newTitle = asset.title.replace(new RegExp(findText, 'gi'), replaceText); + + try { + const response = await appBridge.api({ + name: 'executeGraphQl', + payload: { + query: updateAssetTitle(asset.id, newTitle), + }, + }); - const renameAssets = () => { - console.log('about to rename...'); + asset.title = response.updateAsset.asset.title; + index++; + } catch (error) { + console.error('Error renaming asset:', asset.id, error); + } + + setAssets(assets); + } + + setRenamingInProgress(false); + setMatchCount(0); + setProgressMessage(`Finished renaming ${count} asset${count === 1 ? '' : 's'}`); }; useEffect(() => { @@ -60,8 +105,6 @@ export const App = () => { payload: { query: getAssetsByIds(context.selection.assets.ids) }, }); - console.log('response:', response); - setAssets(response.assets); }; @@ -70,11 +113,20 @@ export const App = () => { useEffect(() => { let totalMatchCount = 0; + const matchedAssets: Asset[] = []; + assets.forEach((asset) => { const { matchCount } = highlightMatches(asset.title, findText); + + if (matchCount > 0) { + matchedAssets.push(asset); + } + totalMatchCount += matchCount; }); + setMatchCount(totalMatchCount); + setMatchingAssets(matchedAssets); }, [findText, assets]); return ( @@ -89,26 +141,29 @@ export const App = () => { placeholder="Find" disabled={!assetsAreFetched} value={findText} - onChange={setFindText} + onChange={handleFindTextChange} onEnterPressed={() => {}} onBlur={() => {}} /> - {getResultCount(matchCount)} + {getResultCount(matchCount, matchingAssetCount)}
-
+
{}} onBlur={() => {}} /> -
+
+ {progressMessage} +
{assetsAreFetched ? ( diff --git a/examples/bulk-actions-app/src/helpers/graphql.ts b/examples/bulk-actions-app/src/helpers/graphql.ts index 7f51da5..38ef614 100644 --- a/examples/bulk-actions-app/src/helpers/graphql.ts +++ b/examples/bulk-actions-app/src/helpers/graphql.ts @@ -1,5 +1,5 @@ export const getAssetsByIds = (assetIds: string[]) => ` - query Assets { + query GetAssetsByIds { assets(ids: [${assetIds.map((id) => `"${id}"`)}]) { id title @@ -10,3 +10,18 @@ export const getAssetsByIds = (assetIds: string[]) => ` } } `; + +export const updateAssetTitle = (assetId: string, newTitle: string) => ` + mutation UpdateAssetTitle { + updateAsset(input: {id: "${assetId}", data: {title: "${newTitle}"}}) { + asset { + id + title + ... on Image { + previewUrl + extension + } + } + } + } +`; From f2e76ed6d5ae60d906bfa91dc6d0021090eb68d8 Mon Sep 17 00:00:00 2001 From: Margus Lanto Date: Thu, 24 Oct 2024 15:50:47 +0200 Subject: [PATCH 14/27] Quantify nouns and memoize appBridge --- examples/bulk-actions-app/src/App.tsx | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/examples/bulk-actions-app/src/App.tsx b/examples/bulk-actions-app/src/App.tsx index 1fe64e3..26e7cb8 100644 --- a/examples/bulk-actions-app/src/App.tsx +++ b/examples/bulk-actions-app/src/App.tsx @@ -1,5 +1,5 @@ import { AppBridgePlatformApp } from '@frontify/app-bridge-app'; -import { useEffect, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { getAssetsByIds, updateAssetTitle } from './helpers/graphql'; import { Button } from '@frontify/fondue/components'; import { Heading, Stack, Text, TextInput } from '@frontify/fondue'; @@ -10,9 +10,7 @@ const highlightMatches = (filename: string, query: string) => { } const parts = filename.split(new RegExp(`(${query})`, 'gi')); - const matchCount = parts.filter((part) => part.toLowerCase() === query.toLowerCase()).length; - const highlightedText = parts.map((part, index) => part.toLowerCase() === query.toLowerCase() ? ( @@ -26,18 +24,27 @@ const highlightMatches = (filename: string, query: string) => { return { highlightedText, matchCount }; }; +const quantify = (noun: 'asset' | 'match', count: number) => { + const plurals = { + asset: 'assets', + match: 'matches', + }; + + return `${count} ${count === 1 ? noun : plurals[noun]}`; +}; + const getResultCount = (matchCount: number, assetCount: number) => { if (matchCount === 0) { return 'No matches'; } - return `${matchCount} match${matchCount === 1 ? '' : 'es'} in ${assetCount} asset${assetCount === 1 ? '' : 's'}`; + return `${quantify('match', matchCount)} in ${quantify('asset', assetCount)}`; }; type Asset = { id: string; previewUrl: string; title: string; extension: string }; export const App = () => { - const appBridge = new AppBridgePlatformApp(); + const appBridge = useMemo(() => new AppBridgePlatformApp(), []); const context = appBridge.context().get(); const [assets, setAssets] = useState([]); @@ -62,13 +69,12 @@ export const App = () => { }; const renameAssets = async () => { - const count = matchingAssetCount; let index = 1; setRenamingInProgress(true); for (const asset of matchingAssets) { - setProgressMessage(`Renaming ${index} of ${count} asset${count === 1 ? '' : 's'}...`); + setProgressMessage(`Renaming ${index} of ${quantify('asset', matchingAssetCount)} ...`); const newTitle = asset.title.replace(new RegExp(findText, 'gi'), replaceText); @@ -83,7 +89,7 @@ export const App = () => { asset.title = response.updateAsset.asset.title; index++; } catch (error) { - console.error('Error renaming asset:', asset.id, error); + console.error(`Error renaming asset ${asset.id} from ${asset.title} to ${newTitle}`, error); } setAssets(assets); @@ -91,7 +97,7 @@ export const App = () => { setRenamingInProgress(false); setMatchCount(0); - setProgressMessage(`Finished renaming ${count} asset${count === 1 ? '' : 's'}`); + setProgressMessage(`Finished renaming ${quantify('asset', matchingAssetCount)}`); }; useEffect(() => { @@ -109,7 +115,7 @@ export const App = () => { }; fetchAssets(); - }, []); + }, [context.selection.assets.ids, appBridge, context.surface]); useEffect(() => { let totalMatchCount = 0; From cffc8f57148e627fd3ba224e4f5a46a721b8e246 Mon Sep 17 00:00:00 2001 From: Margus Lanto Date: Thu, 24 Oct 2024 17:26:25 +0200 Subject: [PATCH 15/27] Update surfaces in manifest --- examples/bulk-actions-app/manifest.json | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/examples/bulk-actions-app/manifest.json b/examples/bulk-actions-app/manifest.json index 4b2760c..841bad6 100644 --- a/examples/bulk-actions-app/manifest.json +++ b/examples/bulk-actions-app/manifest.json @@ -10,13 +10,9 @@ }, "surfaces": { "mediaLibrary": { - "assetAction": { - "title": "Asset Action", - "type": ["image"], - "filenameExtension": ["png", "jpeg"] - }, - "assetCreation": { - "title": "Asset Creation" + "assetBulkActions": { + "title": "Bulk Rename Assets", + "filenameExtensions": ["png", "jpg"] } } } From 0b2f64ed25e3d9b8e2cd1cece14ab886238885cd Mon Sep 17 00:00:00 2001 From: Margus Lanto Date: Tue, 29 Oct 2024 08:59:57 +0100 Subject: [PATCH 16/27] Add 'Match case' toggle --- examples/bulk-actions-app/src/App.tsx | 89 +++++++++++++++++---------- 1 file changed, 56 insertions(+), 33 deletions(-) diff --git a/examples/bulk-actions-app/src/App.tsx b/examples/bulk-actions-app/src/App.tsx index 26e7cb8..5c078a6 100644 --- a/examples/bulk-actions-app/src/App.tsx +++ b/examples/bulk-actions-app/src/App.tsx @@ -3,23 +3,28 @@ import { useEffect, useMemo, useState } from 'react'; import { getAssetsByIds, updateAssetTitle } from './helpers/graphql'; import { Button } from '@frontify/fondue/components'; import { Heading, Stack, Text, TextInput } from '@frontify/fondue'; +import { IconTypographyMultiple } from '@frontify/fondue/icons'; -const highlightMatches = (filename: string, query: string) => { +const highlightMatches = (filename: string, query: string, matchCase: boolean) => { if (!query) { return { highlightedText: filename, matchCount: 0 }; } - const parts = filename.split(new RegExp(`(${query})`, 'gi')); - const matchCount = parts.filter((part) => part.toLowerCase() === query.toLowerCase()).length; - const highlightedText = parts.map((part, index) => - part.toLowerCase() === query.toLowerCase() ? ( - - {part} - - ) : ( - part - ), - ); + const parts = filename.split(new RegExp(`(${query})`, matchCase ? 'i' : 'gi')); + const matchCount = parts.filter((part) => { + return matchCase ? part === query : part.toLowerCase() === query.toLowerCase(); + }).length; + const highlightedText = parts.map((part, index) => { + if (matchCase ? part === query : part.toLowerCase() === query.toLowerCase()) { + return ( + + {part} + + ); + } + + return part; + }); return { highlightedText, matchCount }; }; @@ -54,6 +59,7 @@ export const App = () => { const [matchingAssets, setMatchingAssets] = useState([]); const [renamingInProgress, setRenamingInProgress] = useState(false); const [progressMessage, setProgressMessage] = useState(''); + const [matchCase, setMatchCase] = useState(false); const assetsAreFetched = assets.length > 0; const matchingAssetCount = matchingAssets.length; @@ -122,7 +128,7 @@ export const App = () => { const matchedAssets: Asset[] = []; assets.forEach((asset) => { - const { matchCount } = highlightMatches(asset.title, findText); + const { matchCount } = highlightMatches(asset.title, findText, matchCase); if (matchCount > 0) { matchedAssets.push(asset); @@ -133,7 +139,7 @@ export const App = () => { setMatchCount(totalMatchCount); setMatchingAssets(matchedAssets); - }, [findText, assets]); + }, [findText, assets, matchCase]); return (
@@ -142,27 +148,44 @@ export const App = () => {
- {}} - onBlur={() => {}} - /> +
+ {}} + onBlur={() => {}} + extraActions={[ + { + icon: ( + + ), + onClick: () => setMatchCase(!matchCase), + title: 'Extra action A', + tooltip: { + content: `Match Case: ${matchCase ? 'on' : 'off'}`, + withArrow: true, + }, + }, + ]} + /> +
{getResultCount(matchCount, matchingAssetCount)}
- {}} - onBlur={() => {}} - /> +
+ {}} + onBlur={() => {}} + /> +
@@ -174,7 +197,7 @@ export const App = () => {
{assetsAreFetched ? ( assets.map((asset) => { - const { highlightedText } = highlightMatches(asset.title, findText); + const { highlightedText } = highlightMatches(asset.title, findText, matchCase); return ( From 73461b22c12c899ee6b1d2f598e1018c9aaa1f0f Mon Sep 17 00:00:00 2001 From: Margus Lanto Date: Tue, 29 Oct 2024 09:18:43 +0100 Subject: [PATCH 17/27] Allow more file types --- examples/bulk-actions-app/manifest.json | 641 +++++++++++++++++++++++- 1 file changed, 640 insertions(+), 1 deletion(-) diff --git a/examples/bulk-actions-app/manifest.json b/examples/bulk-actions-app/manifest.json index 841bad6..4de49bc 100644 --- a/examples/bulk-actions-app/manifest.json +++ b/examples/bulk-actions-app/manifest.json @@ -12,7 +12,646 @@ "mediaLibrary": { "assetBulkActions": { "title": "Bulk Rename Assets", - "filenameExtensions": ["png", "jpg"] + "filenameExtensions": [ + "aac", + "ac3", + "ai", + "aif", + "aifc", + "aiff", + "artboard", + "asc", + "atom", + "au", + "avi", + "bcpio", + "bin", + "bmp", + "cdf", + "cgm", + "class", + "cpio", + "cpt", + "csh", + "css", + "dcr", + "dif", + "dir", + "djv", + "djvu", + "dll", + "dms", + "dng", + "doc", + "docx", + "dotx", + "docm", + "dotm", + "dtd", + "dv", + "dvi", + "dxr", + "eps", + "etx", + "ez", + "flac", + "flv", + "gif", + "gram", + "grxml", + "gtar", + "hdf", + "heif", + "hqx", + "htm", + "html", + "ice", + "ico", + "ics", + "idml", + "ief", + "ifb", + "iges", + "igs", + "indd", + "indt", + "jnlp", + "jp2", + "jpe", + "jpeg", + "jpg", + "js", + "kar", + "latex", + "lha", + "lzh", + "m3u", + "m4a", + "m4b", + "m4p", + "m4r", + "m4u", + "m4v", + "mac", + "man", + "mathml", + "me", + "mesh", + "mid", + "midi", + "mif", + "mkv", + "mov", + "movie", + "mp2", + "mp3", + "mp4", + "mpe", + "mpeg", + "mpg", + "mpga", + "ms", + "msh", + "mts", + "mxu", + "nc", + "oda", + "ogg", + "pbm", + "pct", + "pdb", + "pdf", + "pgm", + "pgn", + "pic", + "pict", + "png", + "pnm", + "pnt", + "pntg", + "ppm", + "ppt", + "pptx", + "potx", + "ppsx", + "ppam", + "pptm", + "potm", + "ppsm", + "ps", + "psd", + "qt", + "qti", + "qtif", + "ra", + "ram", + "ras", + "rdf", + "rgb", + "rm", + "roff", + "rtf", + "rtx", + "sgm", + "sgml", + "shar", + "silo", + "sit", + "skd", + "sketch", + "skm", + "skp", + "skt", + "smi", + "smil", + "snd", + "so", + "spl", + "src", + "sv4cpio", + "sv4crc", + "svg", + "swf", + "t", + "tar", + "tcl", + "tex", + "texi", + "texinfo", + "tif", + "tiff", + "tr", + "tsv", + "txt", + "ustar", + "vcd", + "vrml", + "vxml", + "wav", + "wbmp", + "wbmxl", + "webm", + "webp", + "wml", + "wmlc", + "wmls", + "wmlsc", + "wmv", + "wrl", + "xbm", + "xht", + "xhtml", + "xls", + "xml", + "xpm", + "xsl", + "xlsx", + "xltx", + "xlsm", + "xltm", + "xlam", + "xlsb", + "xslt", + "xul", + "xwd", + "xyz", + "zip", + "tpl" + ] + } + }, + "iconLibrary": { + "assetBulkActions": { + "title": "Bulk Rename Assets", + "filenameExtensions": ["svg"] + } + }, + "logoLibrary": { + "assetBulkActions": { + "title": "Bulk Rename Assets", + "filenameExtensions": ["svg", "jpg", "jpeg", "ai", "eps", "png", "tif", "tiff"] + } + }, + "documentLibrary": { + "assetBulkActions": { + "title": "Bulk Rename Assets", + "filenameExtensions": [ + "aac", + "ac3", + "ai", + "aif", + "aifc", + "aiff", + "artboard", + "asc", + "atom", + "au", + "avi", + "bcpio", + "bin", + "bmp", + "cdf", + "cgm", + "class", + "cpio", + "cpt", + "csh", + "css", + "dcr", + "dif", + "dir", + "djv", + "djvu", + "dll", + "dms", + "dng", + "doc", + "docx", + "dotx", + "docm", + "dotm", + "dtd", + "dv", + "dvi", + "dxr", + "eps", + "etx", + "ez", + "flac", + "flv", + "gif", + "gram", + "grxml", + "gtar", + "hdf", + "heif", + "hqx", + "htm", + "html", + "ice", + "ico", + "ics", + "idml", + "ief", + "ifb", + "iges", + "igs", + "indd", + "indt", + "jnlp", + "jp2", + "jpe", + "jpeg", + "jpg", + "js", + "kar", + "latex", + "lha", + "lzh", + "m3u", + "m4a", + "m4b", + "m4p", + "m4r", + "m4u", + "m4v", + "mac", + "man", + "mathml", + "me", + "mesh", + "mid", + "midi", + "mif", + "mkv", + "mov", + "movie", + "mp2", + "mp3", + "mp4", + "mpe", + "mpeg", + "mpg", + "mpga", + "ms", + "msh", + "mts", + "mxu", + "nc", + "oda", + "ogg", + "pbm", + "pct", + "pdb", + "pdf", + "pgm", + "pgn", + "pic", + "pict", + "png", + "pnm", + "pnt", + "pntg", + "ppm", + "ppt", + "pptx", + "potx", + "ppsx", + "ppam", + "pptm", + "potm", + "ppsm", + "ps", + "psd", + "qt", + "qti", + "qtif", + "ra", + "ram", + "ras", + "rdf", + "rgb", + "rm", + "roff", + "rtf", + "rtx", + "sgm", + "sgml", + "shar", + "silo", + "sit", + "skd", + "sketch", + "skm", + "skp", + "skt", + "smi", + "smil", + "snd", + "so", + "spl", + "src", + "sv4cpio", + "sv4crc", + "svg", + "swf", + "t", + "tar", + "tcl", + "tex", + "texi", + "texinfo", + "tif", + "tiff", + "tr", + "tsv", + "txt", + "ustar", + "vcd", + "vrml", + "vxml", + "wav", + "wbmp", + "wbmxl", + "webm", + "webp", + "wml", + "wmlc", + "wmls", + "wmlsc", + "wmv", + "wrl", + "xbm", + "xht", + "xhtml", + "xls", + "xml", + "xpm", + "xsl", + "xlsx", + "xltx", + "xlsm", + "xltm", + "xlam", + "xlsb", + "xslt", + "xul", + "xwd", + "xyz", + "zip", + "tpl" + ] + } + }, + "workspace": { + "assetBulkActions": { + "title": "Bulk Rename Assets", + "filenameExtensions": [ + "aac", + "ac3", + "ai", + "aif", + "aifc", + "aiff", + "artboard", + "asc", + "atom", + "au", + "avi", + "bcpio", + "bin", + "bmp", + "cdf", + "cgm", + "class", + "cpio", + "cpt", + "csh", + "css", + "dcr", + "dif", + "dir", + "djv", + "djvu", + "dll", + "dms", + "dng", + "doc", + "docx", + "dotx", + "docm", + "dotm", + "dtd", + "dv", + "dvi", + "dxr", + "eps", + "etx", + "ez", + "flac", + "flv", + "gif", + "gram", + "grxml", + "gtar", + "hdf", + "heif", + "hqx", + "htm", + "html", + "ice", + "ico", + "ics", + "idml", + "ief", + "ifb", + "iges", + "igs", + "indd", + "indt", + "jnlp", + "jp2", + "jpe", + "jpeg", + "jpg", + "js", + "kar", + "latex", + "lha", + "lzh", + "m3u", + "m4a", + "m4b", + "m4p", + "m4r", + "m4u", + "m4v", + "mac", + "man", + "mathml", + "me", + "mesh", + "mid", + "midi", + "mif", + "mkv", + "mov", + "movie", + "mp2", + "mp3", + "mp4", + "mpe", + "mpeg", + "mpg", + "mpga", + "ms", + "msh", + "mts", + "mxu", + "nc", + "oda", + "ogg", + "pbm", + "pct", + "pdb", + "pdf", + "pgm", + "pgn", + "pic", + "pict", + "png", + "pnm", + "pnt", + "pntg", + "ppm", + "ppt", + "pptx", + "potx", + "ppsx", + "ppam", + "pptm", + "potm", + "ppsm", + "ps", + "psd", + "qt", + "qti", + "qtif", + "ra", + "ram", + "ras", + "rdf", + "rgb", + "rm", + "roff", + "rtf", + "rtx", + "sgm", + "sgml", + "shar", + "silo", + "sit", + "skd", + "sketch", + "skm", + "skp", + "skt", + "smi", + "smil", + "snd", + "so", + "spl", + "src", + "sv4cpio", + "sv4crc", + "svg", + "swf", + "t", + "tar", + "tcl", + "tex", + "texi", + "texinfo", + "tif", + "tiff", + "tr", + "tsv", + "txt", + "ustar", + "vcd", + "vrml", + "vxml", + "wav", + "wbmp", + "wbmxl", + "webm", + "webp", + "wml", + "wmlc", + "wmls", + "wmlsc", + "wmv", + "wrl", + "xbm", + "xht", + "xhtml", + "xls", + "xml", + "xpm", + "xsl", + "xlsx", + "xltx", + "xlsm", + "xltm", + "xlam", + "xlsb", + "xslt", + "xul", + "xwd", + "xyz", + "zip", + "tpl" + ] } } } From 2543563747a3970fef0127f54f8d990fc305e58c Mon Sep 17 00:00:00 2001 From: Margus Lanto Date: Thu, 31 Oct 2024 11:36:19 +0100 Subject: [PATCH 18/27] Restrict content height and make it scrollable --- examples/bulk-actions-app/src/App.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/bulk-actions-app/src/App.tsx b/examples/bulk-actions-app/src/App.tsx index 5c078a6..f348d72 100644 --- a/examples/bulk-actions-app/src/App.tsx +++ b/examples/bulk-actions-app/src/App.tsx @@ -1,7 +1,7 @@ import { AppBridgePlatformApp } from '@frontify/app-bridge-app'; import { useEffect, useMemo, useState } from 'react'; import { getAssetsByIds, updateAssetTitle } from './helpers/graphql'; -import { Button } from '@frontify/fondue/components'; +import { Button, ScrollArea } from '@frontify/fondue/components'; import { Heading, Stack, Text, TextInput } from '@frontify/fondue'; import { IconTypographyMultiple } from '@frontify/fondue/icons'; @@ -14,10 +14,10 @@ const highlightMatches = (filename: string, query: string, matchCase: boolean) = const matchCount = parts.filter((part) => { return matchCase ? part === query : part.toLowerCase() === query.toLowerCase(); }).length; - const highlightedText = parts.map((part, index) => { + const highlightedText = parts.map((part) => { if (matchCase ? part === query : part.toLowerCase() === query.toLowerCase()) { return ( - + {part} ); @@ -194,7 +194,7 @@ export const App = () => { {progressMessage}
-
+ {assetsAreFetched ? ( assets.map((asset) => { const { highlightedText } = highlightMatches(asset.title, findText, matchCase); @@ -213,7 +213,7 @@ export const App = () => { Gathering names of selected assets ... )} -
+
); }; From 2d5288b6fb02f06e09c5a4b088f84694f0f0ce20 Mon Sep 17 00:00:00 2001 From: Margus Lanto Date: Thu, 31 Oct 2024 11:44:33 +0100 Subject: [PATCH 19/27] Adjust allowed types --- examples/bulk-actions-app/manifest.json | 438 +----------------------- 1 file changed, 8 insertions(+), 430 deletions(-) diff --git a/examples/bulk-actions-app/manifest.json b/examples/bulk-actions-app/manifest.json index 4de49bc..4be2cb6 100644 --- a/examples/bulk-actions-app/manifest.json +++ b/examples/bulk-actions-app/manifest.json @@ -19,87 +19,29 @@ "aif", "aifc", "aiff", - "artboard", - "asc", - "atom", "au", "avi", - "bcpio", - "bin", "bmp", - "cdf", "cgm", - "class", - "cpio", - "cpt", - "csh", - "css", - "dcr", - "dif", - "dir", - "djv", - "djvu", - "dll", - "dms", "dng", - "doc", - "docx", - "dotx", - "docm", - "dotm", - "dtd", - "dv", - "dvi", - "dxr", "eps", - "etx", - "ez", "flac", "flv", "gif", - "gram", - "grxml", - "gtar", - "hdf", "heif", - "hqx", - "htm", - "html", - "ice", "ico", - "ics", - "idml", "ief", - "ifb", - "iges", - "igs", - "indd", - "indt", - "jnlp", "jp2", "jpe", "jpeg", "jpg", - "js", "kar", - "latex", - "lha", - "lzh", - "m3u", "m4a", "m4b", "m4p", "m4r", - "m4u", - "m4v", - "mac", - "man", - "mathml", - "me", - "mesh", "mid", "midi", - "mif", "mkv", "mov", "movie", @@ -110,19 +52,12 @@ "mpeg", "mpg", "mpga", - "ms", - "msh", "mts", "mxu", - "nc", - "oda", "ogg", "pbm", "pct", - "pdb", - "pdf", "pgm", - "pgn", "pic", "pict", "png", @@ -130,93 +65,25 @@ "pnt", "pntg", "ppm", - "ppt", - "pptx", - "potx", - "ppsx", - "ppam", - "pptm", - "potm", - "ppsm", - "ps", "psd", "qt", - "qti", "qtif", "ra", "ram", "ras", - "rdf", "rgb", - "rm", - "roff", - "rtf", - "rtx", - "sgm", - "sgml", - "shar", - "silo", - "sit", - "skd", - "sketch", - "skm", - "skp", - "skt", - "smi", - "smil", "snd", - "so", - "spl", - "src", - "sv4cpio", - "sv4crc", "svg", - "swf", - "t", - "tar", - "tcl", - "tex", - "texi", - "texinfo", "tif", "tiff", - "tr", - "tsv", - "txt", - "ustar", - "vcd", - "vrml", - "vxml", "wav", "wbmp", - "wbmxl", "webm", "webp", - "wml", - "wmlc", - "wmls", - "wmlsc", "wmv", - "wrl", "xbm", - "xht", - "xhtml", - "xls", - "xml", "xpm", - "xsl", - "xlsx", - "xltx", - "xlsm", - "xltm", - "xlam", - "xlsb", - "xslt", - "xul", - "xwd", - "xyz", - "zip", - "tpl" + "xwd" ] } }, @@ -236,210 +103,54 @@ "assetBulkActions": { "title": "Bulk Rename Assets", "filenameExtensions": [ - "aac", - "ac3", - "ai", - "aif", - "aifc", - "aiff", - "artboard", "asc", "atom", - "au", - "avi", - "bcpio", - "bin", - "bmp", - "cdf", - "cgm", - "class", - "cpio", - "cpt", - "csh", "css", - "dcr", - "dif", - "dir", - "djv", - "djvu", - "dll", - "dms", - "dng", "doc", - "docx", - "dotx", "docm", + "docx", "dotm", + "dotx", "dtd", - "dv", - "dvi", - "dxr", - "eps", "etx", - "ez", - "flac", - "flv", - "gif", - "gram", - "grxml", - "gtar", - "hdf", - "heif", - "hqx", "htm", "html", - "ice", - "ico", - "ics", "idml", - "ief", - "ifb", - "iges", - "igs", - "indd", - "indt", - "jnlp", - "jp2", - "jpe", - "jpeg", - "jpg", "js", - "kar", "latex", - "lha", - "lzh", - "m3u", - "m4a", - "m4b", - "m4p", - "m4r", - "m4u", - "m4v", - "mac", "man", "mathml", "me", - "mesh", - "mid", - "midi", - "mif", - "mkv", - "mov", - "movie", - "mp2", - "mp3", - "mp4", - "mpe", - "mpeg", - "mpg", - "mpga", "ms", - "msh", - "mts", - "mxu", - "nc", - "oda", - "ogg", - "pbm", - "pct", - "pdb", + "odt", "pdf", - "pgm", - "pgn", - "pic", - "pict", - "png", - "pnm", - "pnt", - "pntg", - "ppm", "ppt", - "pptx", - "potx", - "ppsx", - "ppam", "pptm", - "potm", - "ppsm", + "pptx", "ps", - "psd", - "qt", - "qti", - "qtif", - "ra", - "ram", - "ras", "rdf", - "rgb", - "rm", - "roff", "rtf", "rtx", "sgm", "sgml", - "shar", "silo", - "sit", "skd", "sketch", "skm", "skp", "skt", - "smi", - "smil", - "snd", - "so", - "spl", - "src", - "sv4cpio", - "sv4crc", - "svg", - "swf", - "t", - "tar", - "tcl", "tex", "texi", "texinfo", - "tif", - "tiff", - "tr", "tsv", "txt", - "ustar", - "vcd", - "vrml", - "vxml", - "wav", - "wbmp", - "wbmxl", - "webm", - "webp", - "wml", - "wmlc", - "wmls", - "wmlsc", - "wmv", - "wrl", - "xbm", "xht", "xhtml", - "xls", "xml", - "xpm", "xsl", - "xlsx", - "xltx", - "xlsm", - "xltm", - "xlam", - "xlsb", "xslt", - "xul", - "xwd", - "xyz", - "zip", - "tpl" + "yaml", + "yml" ] } }, @@ -453,87 +164,29 @@ "aif", "aifc", "aiff", - "artboard", - "asc", - "atom", "au", "avi", - "bcpio", - "bin", "bmp", - "cdf", "cgm", - "class", - "cpio", - "cpt", - "csh", - "css", - "dcr", - "dif", - "dir", - "djv", - "djvu", - "dll", - "dms", "dng", - "doc", - "docx", - "dotx", - "docm", - "dotm", - "dtd", - "dv", - "dvi", - "dxr", "eps", - "etx", - "ez", "flac", "flv", "gif", - "gram", - "grxml", - "gtar", - "hdf", "heif", - "hqx", - "htm", - "html", - "ice", "ico", - "ics", - "idml", "ief", - "ifb", - "iges", - "igs", - "indd", - "indt", - "jnlp", "jp2", "jpe", "jpeg", "jpg", - "js", "kar", - "latex", - "lha", - "lzh", - "m3u", "m4a", "m4b", "m4p", "m4r", - "m4u", - "m4v", - "mac", - "man", - "mathml", - "me", - "mesh", "mid", "midi", - "mif", "mkv", "mov", "movie", @@ -544,19 +197,12 @@ "mpeg", "mpg", "mpga", - "ms", - "msh", "mts", "mxu", - "nc", - "oda", "ogg", "pbm", "pct", - "pdb", - "pdf", "pgm", - "pgn", "pic", "pict", "png", @@ -564,93 +210,25 @@ "pnt", "pntg", "ppm", - "ppt", - "pptx", - "potx", - "ppsx", - "ppam", - "pptm", - "potm", - "ppsm", - "ps", "psd", "qt", - "qti", "qtif", "ra", "ram", "ras", - "rdf", "rgb", - "rm", - "roff", - "rtf", - "rtx", - "sgm", - "sgml", - "shar", - "silo", - "sit", - "skd", - "sketch", - "skm", - "skp", - "skt", - "smi", - "smil", "snd", - "so", - "spl", - "src", - "sv4cpio", - "sv4crc", "svg", - "swf", - "t", - "tar", - "tcl", - "tex", - "texi", - "texinfo", "tif", "tiff", - "tr", - "tsv", - "txt", - "ustar", - "vcd", - "vrml", - "vxml", "wav", "wbmp", - "wbmxl", "webm", "webp", - "wml", - "wmlc", - "wmls", - "wmlsc", "wmv", - "wrl", "xbm", - "xht", - "xhtml", - "xls", - "xml", "xpm", - "xsl", - "xlsx", - "xltx", - "xlsm", - "xltm", - "xlam", - "xlsb", - "xslt", - "xul", - "xwd", - "xyz", - "zip", - "tpl" + "xwd" ] } } From 116794a3048a20df04db61c963bd481bc318f333 Mon Sep 17 00:00:00 2001 From: Margus Lanto Date: Thu, 31 Oct 2024 13:13:49 +0100 Subject: [PATCH 20/27] Adjust extensions --- examples/bulk-actions-app/manifest.json | 438 +++++++++++++++++++++++- 1 file changed, 430 insertions(+), 8 deletions(-) diff --git a/examples/bulk-actions-app/manifest.json b/examples/bulk-actions-app/manifest.json index 4be2cb6..4de49bc 100644 --- a/examples/bulk-actions-app/manifest.json +++ b/examples/bulk-actions-app/manifest.json @@ -19,29 +19,87 @@ "aif", "aifc", "aiff", + "artboard", + "asc", + "atom", "au", "avi", + "bcpio", + "bin", "bmp", + "cdf", "cgm", + "class", + "cpio", + "cpt", + "csh", + "css", + "dcr", + "dif", + "dir", + "djv", + "djvu", + "dll", + "dms", "dng", + "doc", + "docx", + "dotx", + "docm", + "dotm", + "dtd", + "dv", + "dvi", + "dxr", "eps", + "etx", + "ez", "flac", "flv", "gif", + "gram", + "grxml", + "gtar", + "hdf", "heif", + "hqx", + "htm", + "html", + "ice", "ico", + "ics", + "idml", "ief", + "ifb", + "iges", + "igs", + "indd", + "indt", + "jnlp", "jp2", "jpe", "jpeg", "jpg", + "js", "kar", + "latex", + "lha", + "lzh", + "m3u", "m4a", "m4b", "m4p", "m4r", + "m4u", + "m4v", + "mac", + "man", + "mathml", + "me", + "mesh", "mid", "midi", + "mif", "mkv", "mov", "movie", @@ -52,12 +110,19 @@ "mpeg", "mpg", "mpga", + "ms", + "msh", "mts", "mxu", + "nc", + "oda", "ogg", "pbm", "pct", + "pdb", + "pdf", "pgm", + "pgn", "pic", "pict", "png", @@ -65,25 +130,93 @@ "pnt", "pntg", "ppm", + "ppt", + "pptx", + "potx", + "ppsx", + "ppam", + "pptm", + "potm", + "ppsm", + "ps", "psd", "qt", + "qti", "qtif", "ra", "ram", "ras", + "rdf", "rgb", + "rm", + "roff", + "rtf", + "rtx", + "sgm", + "sgml", + "shar", + "silo", + "sit", + "skd", + "sketch", + "skm", + "skp", + "skt", + "smi", + "smil", "snd", + "so", + "spl", + "src", + "sv4cpio", + "sv4crc", "svg", + "swf", + "t", + "tar", + "tcl", + "tex", + "texi", + "texinfo", "tif", "tiff", + "tr", + "tsv", + "txt", + "ustar", + "vcd", + "vrml", + "vxml", "wav", "wbmp", + "wbmxl", "webm", "webp", + "wml", + "wmlc", + "wmls", + "wmlsc", "wmv", + "wrl", "xbm", + "xht", + "xhtml", + "xls", + "xml", "xpm", - "xwd" + "xsl", + "xlsx", + "xltx", + "xlsm", + "xltm", + "xlam", + "xlsb", + "xslt", + "xul", + "xwd", + "xyz", + "zip", + "tpl" ] } }, @@ -103,54 +236,210 @@ "assetBulkActions": { "title": "Bulk Rename Assets", "filenameExtensions": [ + "aac", + "ac3", + "ai", + "aif", + "aifc", + "aiff", + "artboard", "asc", "atom", + "au", + "avi", + "bcpio", + "bin", + "bmp", + "cdf", + "cgm", + "class", + "cpio", + "cpt", + "csh", "css", + "dcr", + "dif", + "dir", + "djv", + "djvu", + "dll", + "dms", + "dng", "doc", - "docm", "docx", - "dotm", "dotx", + "docm", + "dotm", "dtd", + "dv", + "dvi", + "dxr", + "eps", "etx", + "ez", + "flac", + "flv", + "gif", + "gram", + "grxml", + "gtar", + "hdf", + "heif", + "hqx", "htm", "html", + "ice", + "ico", + "ics", "idml", + "ief", + "ifb", + "iges", + "igs", + "indd", + "indt", + "jnlp", + "jp2", + "jpe", + "jpeg", + "jpg", "js", + "kar", "latex", + "lha", + "lzh", + "m3u", + "m4a", + "m4b", + "m4p", + "m4r", + "m4u", + "m4v", + "mac", "man", "mathml", "me", + "mesh", + "mid", + "midi", + "mif", + "mkv", + "mov", + "movie", + "mp2", + "mp3", + "mp4", + "mpe", + "mpeg", + "mpg", + "mpga", "ms", - "odt", + "msh", + "mts", + "mxu", + "nc", + "oda", + "ogg", + "pbm", + "pct", + "pdb", "pdf", + "pgm", + "pgn", + "pic", + "pict", + "png", + "pnm", + "pnt", + "pntg", + "ppm", "ppt", - "pptm", "pptx", + "potx", + "ppsx", + "ppam", + "pptm", + "potm", + "ppsm", "ps", + "psd", + "qt", + "qti", + "qtif", + "ra", + "ram", + "ras", "rdf", + "rgb", + "rm", + "roff", "rtf", "rtx", "sgm", "sgml", + "shar", "silo", + "sit", "skd", "sketch", "skm", "skp", "skt", + "smi", + "smil", + "snd", + "so", + "spl", + "src", + "sv4cpio", + "sv4crc", + "svg", + "swf", + "t", + "tar", + "tcl", "tex", "texi", "texinfo", + "tif", + "tiff", + "tr", "tsv", "txt", + "ustar", + "vcd", + "vrml", + "vxml", + "wav", + "wbmp", + "wbmxl", + "webm", + "webp", + "wml", + "wmlc", + "wmls", + "wmlsc", + "wmv", + "wrl", + "xbm", "xht", "xhtml", + "xls", "xml", + "xpm", "xsl", + "xlsx", + "xltx", + "xlsm", + "xltm", + "xlam", + "xlsb", "xslt", - "yaml", - "yml" + "xul", + "xwd", + "xyz", + "zip", + "tpl" ] } }, @@ -164,29 +453,87 @@ "aif", "aifc", "aiff", + "artboard", + "asc", + "atom", "au", "avi", + "bcpio", + "bin", "bmp", + "cdf", "cgm", + "class", + "cpio", + "cpt", + "csh", + "css", + "dcr", + "dif", + "dir", + "djv", + "djvu", + "dll", + "dms", "dng", + "doc", + "docx", + "dotx", + "docm", + "dotm", + "dtd", + "dv", + "dvi", + "dxr", "eps", + "etx", + "ez", "flac", "flv", "gif", + "gram", + "grxml", + "gtar", + "hdf", "heif", + "hqx", + "htm", + "html", + "ice", "ico", + "ics", + "idml", "ief", + "ifb", + "iges", + "igs", + "indd", + "indt", + "jnlp", "jp2", "jpe", "jpeg", "jpg", + "js", "kar", + "latex", + "lha", + "lzh", + "m3u", "m4a", "m4b", "m4p", "m4r", + "m4u", + "m4v", + "mac", + "man", + "mathml", + "me", + "mesh", "mid", "midi", + "mif", "mkv", "mov", "movie", @@ -197,12 +544,19 @@ "mpeg", "mpg", "mpga", + "ms", + "msh", "mts", "mxu", + "nc", + "oda", "ogg", "pbm", "pct", + "pdb", + "pdf", "pgm", + "pgn", "pic", "pict", "png", @@ -210,25 +564,93 @@ "pnt", "pntg", "ppm", + "ppt", + "pptx", + "potx", + "ppsx", + "ppam", + "pptm", + "potm", + "ppsm", + "ps", "psd", "qt", + "qti", "qtif", "ra", "ram", "ras", + "rdf", "rgb", + "rm", + "roff", + "rtf", + "rtx", + "sgm", + "sgml", + "shar", + "silo", + "sit", + "skd", + "sketch", + "skm", + "skp", + "skt", + "smi", + "smil", "snd", + "so", + "spl", + "src", + "sv4cpio", + "sv4crc", "svg", + "swf", + "t", + "tar", + "tcl", + "tex", + "texi", + "texinfo", "tif", "tiff", + "tr", + "tsv", + "txt", + "ustar", + "vcd", + "vrml", + "vxml", "wav", "wbmp", + "wbmxl", "webm", "webp", + "wml", + "wmlc", + "wmls", + "wmlsc", "wmv", + "wrl", "xbm", + "xht", + "xhtml", + "xls", + "xml", "xpm", - "xwd" + "xsl", + "xlsx", + "xltx", + "xlsm", + "xltm", + "xlam", + "xlsb", + "xslt", + "xul", + "xwd", + "xyz", + "zip", + "tpl" ] } } From 0b3b24dde4f0b73811d840c38aa0b1cc3343da9e Mon Sep 17 00:00:00 2001 From: Margus Lanto Date: Mon, 4 Nov 2024 10:33:54 +0100 Subject: [PATCH 21/27] Add border --- examples/bulk-actions-app/src/App.tsx | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/examples/bulk-actions-app/src/App.tsx b/examples/bulk-actions-app/src/App.tsx index f348d72..4d1cf19 100644 --- a/examples/bulk-actions-app/src/App.tsx +++ b/examples/bulk-actions-app/src/App.tsx @@ -196,18 +196,20 @@ export const App = () => {
{assetsAreFetched ? ( - assets.map((asset) => { - const { highlightedText } = highlightMatches(asset.title, findText, matchCase); - - return ( - - - {highlightedText} - .{asset.extension} - - - ); - }) +
+ {assets.map((asset) => { + const { highlightedText } = highlightMatches(asset.title, findText, matchCase); + + return ( + + + {highlightedText} + .{asset.extension} + + + ); + })} +
) : ( Gathering names of selected assets ... From 5661bcf77aef3036afae37f6ed050cb6193f6353 Mon Sep 17 00:00:00 2001 From: Margus Lanto Date: Mon, 4 Nov 2024 10:46:04 +0100 Subject: [PATCH 22/27] Chunk by 100 ids --- examples/bulk-actions-app/src/App.tsx | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/examples/bulk-actions-app/src/App.tsx b/examples/bulk-actions-app/src/App.tsx index 4d1cf19..d389e17 100644 --- a/examples/bulk-actions-app/src/App.tsx +++ b/examples/bulk-actions-app/src/App.tsx @@ -46,6 +46,14 @@ const getResultCount = (matchCount: number, assetCount: number) => { return `${quantify('match', matchCount)} in ${quantify('asset', assetCount)}`; }; +const chunkArray = (array: string[], size: number) => { + const result = []; + for (let i = 0; i < array.length; i += size) { + result.push(array.slice(i, i + size)); + } + return result; +}; + type Asset = { id: string; previewUrl: string; title: string; extension: string }; export const App = () => { @@ -112,12 +120,20 @@ export const App = () => { return; } - const response = await appBridge.api({ - name: 'executeGraphQl', - payload: { query: getAssetsByIds(context.selection.assets.ids) }, - }); + const assetIds = context.selection.assets.ids; + const chunks = chunkArray(assetIds, 100); + const allAssets = []; + + for (const chunk of chunks) { + const response = await appBridge.api({ + name: 'executeGraphQl', + payload: { query: getAssetsByIds(chunk) }, + }); + + allAssets.push(...response.assets); + } - setAssets(response.assets); + setAssets(allAssets); }; fetchAssets(); From 7ee192dd988d1ce1fe60bdb2f403e1b482b4de2f Mon Sep 17 00:00:00 2001 From: Margus Lanto Date: Mon, 4 Nov 2024 11:42:30 +0100 Subject: [PATCH 23/27] Update key --- examples/bulk-actions-app/src/App.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/examples/bulk-actions-app/src/App.tsx b/examples/bulk-actions-app/src/App.tsx index d389e17..f69d9c0 100644 --- a/examples/bulk-actions-app/src/App.tsx +++ b/examples/bulk-actions-app/src/App.tsx @@ -11,13 +11,14 @@ const highlightMatches = (filename: string, query: string, matchCase: boolean) = } const parts = filename.split(new RegExp(`(${query})`, matchCase ? 'i' : 'gi')); + console.log('parts', parts); const matchCount = parts.filter((part) => { return matchCase ? part === query : part.toLowerCase() === query.toLowerCase(); }).length; - const highlightedText = parts.map((part) => { + const highlightedText = parts.map((part, index) => { if (matchCase ? part === query : part.toLowerCase() === query.toLowerCase()) { return ( - + {part} ); From 4481234f88899f6bbafaa3f211ab38f8de28b64c Mon Sep 17 00:00:00 2001 From: Margus Lanto Date: Mon, 4 Nov 2024 11:45:18 +0100 Subject: [PATCH 24/27] Remove console.log --- examples/bulk-actions-app/src/App.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/examples/bulk-actions-app/src/App.tsx b/examples/bulk-actions-app/src/App.tsx index f69d9c0..908d238 100644 --- a/examples/bulk-actions-app/src/App.tsx +++ b/examples/bulk-actions-app/src/App.tsx @@ -11,7 +11,6 @@ const highlightMatches = (filename: string, query: string, matchCase: boolean) = } const parts = filename.split(new RegExp(`(${query})`, matchCase ? 'i' : 'gi')); - console.log('parts', parts); const matchCount = parts.filter((part) => { return matchCase ? part === query : part.toLowerCase() === query.toLowerCase(); }).length; From 487b8cb896767b82d5d2bf1f705713a8930ddcfe Mon Sep 17 00:00:00 2001 From: julianiff Date: Fri, 15 Nov 2024 14:56:16 +0100 Subject: [PATCH 25/27] chore: rounded box and 2/3 width --- examples/bulk-actions-app/src/App.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/examples/bulk-actions-app/src/App.tsx b/examples/bulk-actions-app/src/App.tsx index 908d238..624efba 100644 --- a/examples/bulk-actions-app/src/App.tsx +++ b/examples/bulk-actions-app/src/App.tsx @@ -1,9 +1,9 @@ import { AppBridgePlatformApp } from '@frontify/app-bridge-app'; -import { useEffect, useMemo, useState } from 'react'; -import { getAssetsByIds, updateAssetTitle } from './helpers/graphql'; -import { Button, ScrollArea } from '@frontify/fondue/components'; import { Heading, Stack, Text, TextInput } from '@frontify/fondue'; +import { Button, ScrollArea } from '@frontify/fondue/components'; import { IconTypographyMultiple } from '@frontify/fondue/icons'; +import { useEffect, useMemo, useState } from 'react'; +import { getAssetsByIds, updateAssetTitle } from './helpers/graphql'; const highlightMatches = (filename: string, query: string, matchCase: boolean) => { if (!query) { @@ -171,8 +171,8 @@ export const App = () => { disabled={!assetsAreFetched} value={findText} onChange={handleFindTextChange} - onEnterPressed={() => {}} - onBlur={() => {}} + onEnterPressed={() => { }} + onBlur={() => { }} extraActions={[ { icon: ( @@ -198,8 +198,8 @@ export const App = () => { disabled={!assetsAreFetched} value={replaceText} onChange={handleReplaceTextChange} - onEnterPressed={() => {}} - onBlur={() => {}} + onEnterPressed={() => { }} + onBlur={() => { }} />
- + {assetsAreFetched ? ( -
+
{assets.map((asset) => { const { highlightedText } = highlightMatches(asset.title, findText, matchCase); return ( - + {highlightedText} .{asset.extension} From 93b21f9dc973df4d235cde1d19054b8e58ed84e3 Mon Sep 17 00:00:00 2001 From: julianiff Date: Fri, 15 Nov 2024 15:29:48 +0100 Subject: [PATCH 26/27] chore: update readme --- README.md | 1 + examples/bulk-actions-app/README.md | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index e79b61e..e4547c4 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,7 @@ Welcome to the Brand SDK Apps Code Samples repository! Here, you'll find a serie - [**Secure Third-Party Request**](https://github.com/Frontify/sdk-apps-code-examples/tree/main/examples/secure-third-party-request){:target="_blank"}: A sample app that demonstrates how to securely request third-party services using our SDK. - [**App with user state example**](https://github.com/Frontify/sdk-apps-code-examples/tree/main/examples/app-with-state){:target="_blank"}: A sample app that demonstrates how to use the userState. - [**App Settings Example**](https://github.com/Frontify/sdk-apps-code-examples/tree/main/examples/app-settings){:target="_blank"}: A simple example of a Hello World app using `settings.ts` to customize app behavior. +- [**Bulk Action Surface**](https://github.com/Frontify/sdk-apps-code-examples/tree/main/examples/bulk-actions-app){:target="_blank"}: An App that shows how the Bulk Actions Surface can be used. Each example is accompanied by detailed documentation and comments within the code to help you understand how to utilize our SDK effectively. Whether you're just getting started or looking to implement specific features, these samples will guide you through the process. diff --git a/examples/bulk-actions-app/README.md b/examples/bulk-actions-app/README.md index a59fa49..00dc723 100644 --- a/examples/bulk-actions-app/README.md +++ b/examples/bulk-actions-app/README.md @@ -3,7 +3,7 @@ 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. +This app is the 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. @@ -36,8 +36,8 @@ For more details on how to customize and extend this app, please refer to the [d ## 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. +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 location, this app for example is only visible for the asset Bulk Actions. -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. +Additionally, the `manifest.json` file enables you to specify the types of files your app can work with formats like jpg, png, and more. For detailed information on configuring the `manifest.json` file, please refer to our [documentation](https://developer.frontify.com/). From 0433ec978ea3c88b88b9c62938a18f51550187cf Mon Sep 17 00:00:00 2001 From: julianiff Date: Fri, 15 Nov 2024 15:50:34 +0100 Subject: [PATCH 27/27] chore: update readme --- examples/bulk-actions-app/README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/examples/bulk-actions-app/README.md b/examples/bulk-actions-app/README.md index 00dc723..348477f 100644 --- a/examples/bulk-actions-app/README.md +++ b/examples/bulk-actions-app/README.md @@ -1,6 +1,5 @@ # Hello World -This is a simple example of a Hello World app using React and Tailwind. - +This is a basic example of an App using the Bulk actions Surface. ## Information This app is the 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.