chore: bulk-action-app (#15)

* chore: bulk-action-app

* chore: update pnpm-lock

* List bulk-selected file names with extensions, add find & replace markup

* Reduce indentation

* Rename query

* Rename images to assets

* Rename images to assets

* Disable fields until assets are fetched

* Implement highlighting

* Show result count

* Enable renaming when there are matches

* Query also for asset id

* Add asset update mutation

* Quantify nouns and memoize appBridge

* Update surfaces in manifest

* Add 'Match case' toggle

* Allow more file types

* Restrict content height and make it scrollable

* Adjust allowed types

* Adjust extensions

* Add border

* Chunk by 100 ids

* Update key

* Remove console.log

* chore: rounded box and 2/3 width

* chore: update readme

* chore: update readme

---------

Co-authored-by: Margus Lanto <[email protected]>

Author: julianiff

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.
 

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

examples/bulk-actions-app/.prettierrc

@@ -0,0 +1,5 @@
+{
+    "printWidth": 120,
+    "tabWidth": 4,
+    "singleQuote": true
+}

examples/bulk-actions-app/.secret-example.json

@@ -0,0 +1,4 @@
+{
+    "THIRD_PARTY_API_KEY": 1,
+    "__DONT_COMMIT_THIS_FILE_WITH_TOKENS__": true
+}

examples/bulk-actions-app/README.md

@@ -0,0 +1,42 @@
+# Hello World
+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.
+
+- **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 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 formats like jpg, png, and more.
+
+For detailed information on configuring the `manifest.json` file, please refer to our [documentation](https://developer.frontify.com/).

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 },
+            ],
+        },
+    }
+);

examples/bulk-actions-app/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+    <title>Frontify Sample App</title>
+</head>
+<body>
+    <div id="root"></div>
+    <script type='module'>
+        import module from '/src/index.ts';
+        import {renderReactApp} from '@frontify/app-bridge-app';
+
+        renderReactApp(module);
+    </script>
+</body>
+</html>