### Firebase Setup Guides

Source: https://firebase.google.com/docs/app-check/web/recaptcha-enterprise-provider

Provides links to setup guides for integrating Firebase into various development platforms. Covers Apple platforms, Android, Web, Flutter, C++, Unity, and server environments.

```APIDOC
Firebase Setup:
  - Apple platforms (iOS+): https://firebase.google.com/docs/ios/setup
  - Android: https://firebase.google.com/docs/android/setup
  - Web: https://firebase.google.com/docs/web/setup
  - Flutter: https://firebase.google.com/docs/flutter/setup
  - C++: https://firebase.google.com/docs/cpp/setup
  - Unity: https://firebase.google.com/docs/unity/setup
  - Server environments: https://firebase.google.com/docs/admin/setup
```

--------------------------------

### FireCMS Project Development Commands

Source: https://context7_llms

Commands to navigate into a newly created FireCMS project directory, install dependencies, and start the development server. These steps are essential for running and testing the FireCMS application locally.

```bash
cd my-cms
yarn
yarn dev
```

--------------------------------

### Button with Start Icon Example

Source: https://context7_llms

Illustrates adding an icon before the button's content using the `startIcon` prop, enhancing visual cues for actions.

```tsx
import React from "react";
import { AddIcon, Button } from "@firecms/ui";

export default function StartIconButtonDemo() {
    return (
        <div className={"flex flex-row gap-4 items-center justify-center"}>
            <Button startIcon={<AddIcon/>}>
                Button with Icon
            </Button>
        </div>
    );
}
```

--------------------------------

### FireCMS Custom Storage Configuration Example

Source: https://context7_llms

This example demonstrates how to configure and use a custom storage source within a FireCMS application. It shows the setup of `CustomStorageSourceProps` with API credentials and region, and its integration into the main `FireCMS` component using the `useCustomStorageSource` hook. It also includes placeholders for authentication and data source delegates.

```tsx
const customStorageConfig: CustomStorageSourceProps = {
  apiKey: "your-api-key",
  apiSecret: "your-api-secret",
  region: "your-region",
  defaultBucket: "your-bucket-name"
  // ... other necessary properties
};

const CustomStorageApp: React.FC = () => {
  const name = "My Custom Storage FireCMS App";

  const modeController = useBuildModeController();
  const userConfigPersistence = useBuildLocalConfigurationPersistence();
  const storageSource = useCustomStorageSource(customStorageConfig);

  // const authController = useFirebaseAuthController(); // your auth controller
  // const dataSourceDelegate = {}; // Your data source delegate implementation

  const navigationController = useBuildNavigationController({
    collections: [productsCollection],
    // authController,
    // dataSourceDelegate
  });

  // if (authLoading) {
  //   return <CircularProgressCenter />;
  // }

  return (
    <SnackbarProvider>
      <ModeControllerProvider value={modeController}>
        <FireCMS
          navigationController={navigationController}
          userConfigPersistence={userConfigPersistence}
          storageSource={storageSource}
          // authController={authController}
          // dataSourceDelegate={dataSourceDelegate}
        >
          {({
            context,
            loading
          }) => {
            if (loading || authLoading) {
              return <CircularProgressCenter size="large" />;
            }

            if (!canAccessMainView) {
              return <CenteredView>{notAllowedError}</CenteredView>;
            }

            return (
              <Scaffold>
                <AppBar title={"My app"} />
                <Drawer />
                <NavigationRoutes />
                <SideDialogs />
              </Scaffold>
            );
          }}
        </FireCMS>
      </ModeControllerProvider>
    </SnackbarProvider>
  );
};

export default CustomStorageApp;
```

--------------------------------

### FireCMS User Management Setup

Source: https://context7_llms

Demonstrates the initial setup of user management in a FireCMS application. It shows how to initialize the user management system, authenticate users, and configure navigation controllers, integrating various FireCMS hooks.

```jsx
function App() {

    // .. rest of your configuration, including the `authController` and `firestoreDelegate`

    const userManagementPlugin = useUserManagementPlugin({ userManagement });

    const userManagement = useBuildUserManagement({
        dataSourceDelegate: firestoreDelegate,
        usersPath: "__FIRECMS/config/users",
        rolesPath: "__FIRECMS/config/roles",
        usersLimit: 100,
        canEditRoles: true,
        allowDefaultRolesCreation: true,
        includeCollectionConfigPermissions: true,
    });

    const {
        authLoading,
        canAccessMainView,
        notAllowedError
    } = useValidateAuthenticator({
        disabled: userManagement.loading,
        authController,
        authenticator: userManagement.authenticator,
        dataSourceDelegate: firestoreDelegate,
        storageSource
    });

    const navigationController = useBuildNavigationController({
        collections,
        views,
        adminViews: userManagementAdminViews,
        collectionPermissions: userManagement.collectionPermissions, // Optional, link collection permissions to user management
        authController,
        dataSourceDelegate: firestoreDelegate
    });

  return (
      // ..components and providers
    <FireCMS
        // ...other configurations
        navigationController={navigationController}
        plugins={[userManagementPlugin]}
    />
  );
}

export default App;
```

--------------------------------

### FireCMS UI Icons Example

Source: https://context7_llms

Placeholder for an example demonstrating icon usage in FireCMS, potentially related to migrating from Material-UI.

```tsx
// No code provided in the source text for this snippet.
```

--------------------------------

### FireCMS Main App Component Setup

Source: https://context7_llms

Demonstrates the core structure of a FireCMS application, initializing Firebase, setting up authentication, data sources, and plugins, and handling loading and access states. It uses various custom hooks to manage different aspects of the FireCMS setup.

```jsx
function App() {
    const {
        firebaseApp,
        firebaseConfigLoading,
        configError
    } = useInitialiseFirebase({
        firebaseConfig
    });

    const firestoreDelegate = useFirestoreDelegate({
        firebaseApp
    });

    const authController = useFirebaseAuthController({
        firebaseApp,
        signInOptions: ["google.com", "password"]
    });

    const collectionConfigController = useFirestoreCollectionsConfigController({
        firebaseApp
    });

    const collectionEditorPlugin = useCollectionEditorPlugin({
        collectionConfigController,
        configPermissions: customPermissionsBuilder,
        reservedGroups: ["admin"],
        extraView: {
            View: CustomCollectionView,
            icon: <CollectionIcon/>
        }
    });

    const userManagement = useBuildUserManagement({
        dataSourceDelegate: firestoreDelegate,
        authController: authController
    });

    const userManagementPlugin = useUserManagementPlugin({ userManagement });

    const collectionsBuilder = useCallback(() => {
        // Define your own collections
        const collections = [
            productsCollection,
            // Add other collections here
        ];
        // Merge with collections defined via the Collection Editor UI
        return mergeCollections(collections, collectionConfigController.collections ?? []);
    }, [collectionConfigController.collections]);

    const navigationController = useBuildNavigationController({
        collections: collectionsBuilder(),
        views: customViews,
        adminViews: userManagementAdminViews,
        collectionPermissions: collectionEditorPlugin.collectionPermissions,
        authController,
        dataSourceDelegate: firestoreDelegate
    });

    const {
        authLoading,
        canAccessMainView,
        notAllowedError
    } = useValidateAuthenticator({
        disabled: collectionEditorPlugin.loading,
        authController: authController,
        authenticator: customAuthenticator,
        dataSourceDelegate: firestoreDelegate,
        storageSource
    });

    if (firebaseConfigLoading) {
        return <LoadingIndicator/>;
    }

    if (configError) {
        return <ErrorDisplay error={configError}/>;
    }

    return (
        <FireCMS
            navigationController={navigationController}
            authController={authController}
            dataSourceDelegate={firestoreDelegate}
            plugins={[userManagementPlugin, collectionEditorPlugin]}
        >
            {({ context, loading }) => {
                if (loading || authLoading) {
                    return <LoadingSpinner/>;
                }
                if (!canAccessMainView) {
                    return <AccessDenied message={notAllowedError}/>;
                }
                return <MainAppLayout/>;
            }}
        </FireCMS>
    );
}

export default App;
```

--------------------------------

### Basic File Upload Example

Source: https://context7_llms

A simple FileUpload component example with minimal configuration. It demonstrates how to accept image files and handle the addition of files via the 'onFilesAdded' callback.

```tsx
import React from "react";
import { FileUpload } from "@firecms/ui";

export default function FileUploadBasicDemo() {
    const onFilesAdded = (files: File[]) => {
        console.log(files);
    };

    return (
        <FileUpload
            size={"large"}
            accept={{ "image/*": [] }}
            onFilesAdded={onFilesAdded}
            title="Upload your file"
            uploadDescription="Drag and drop a file here or click"
        />
    );
}
```

--------------------------------

### Install MUI Dependencies

Source: https://context7_llms

Instructions for installing Material UI (MUI) core components and icons, which may be needed if continuing to use MUI components within FireCMS.

```bash
yarn add @mui/material @emotion/react @emotion/styled
```

```bash
yarn add @mui/icons-material
```

--------------------------------

### Basic Collapse Example

Source: https://context7_llms

A simple example of the Collapse component, which is used to show and hide content with React animations. It requires managing an 'isOpen' state.

```tsx
import React, { useState } from "";
import { Button, Collapse, Paper } from "@firecms/ui";

export default function CollapseBasicDemo() {
    const [isOpen, setIsOpen] = useState(true);

    return (
        <div className={"flex flex-col items-center gap-4"}>
            <Button onClick={() => setIsOpen(!isOpen)}>Toggle</Button>
            <Collapse in={isOpen}>
                <Paper className={"p-4"}>
                    Content to show or hide
                </Paper>
            </Collapse>
        </div>
    );
}
```

--------------------------------

### Basic IconButton Example

Source: https://context7_llms

A simple IconButton example demonstrating its basic usage with a 'filled' variant and an 'AddIcon'. It shows how to attach an onClick handler for user interaction.

```tsx
import React from "react";
import { AddIcon, IconButton } from "@firecms/ui";

export default function IconButtonBasicDemo() {
    return (
        <IconButton
            variant="filled"
            onClick={() => console.log("Clicked!")}>
            <AddIcon/>
        </IconButton>
    );
}
```

--------------------------------

### FireCMS MongoDB Integration Example

Source: https://context7_llms

This example demonstrates the complete implementation of a FireCMS component integrating MongoDB Atlas. It covers initialization of Firebase and MongoDB, setting up controllers for authentication and data persistence, configuring storage, and rendering the FireCMS application with navigation and authentication flows.

```jsx
import React from 'react';
import { CircularProgressCenter } from '@firecms/core';
import { CenteredView } from '@firecms/core';
import { SnackbarProvider } from '@firecms/snackbar';
import { ModeControllerProvider } from '@firecms/mode_controller';
import { FireCMS, Scaffold, AppBar, Drawer, NavigationRoutes, SideDialogs } from '@firecms/core';
import { MongoLoginView } from './MongoLoginView'; // Assuming this component exists

// Assuming these hooks and types are imported from FireCMS and MongoDB integration packages
import { useInitialiseFirebase } from '@firecms/firebase_integration';
import { useInitRealmMongodb } from '@firecms/mongodb_integration';
import { useBuildModeController } from '@firecms/mode_controller';
import { useBuildLocalConfigurationPersistence } from '@firecms/user_config_persistence';
import { useMongoDBAuthController, MongoAuthController } from '@firecms/mongodb_auth';
import { useMongoDBDelegate } from '@firecms/mongodb_datasource';
import { useFirebaseStorageSource } from '@firecms/firebase_storage';
import { useValidateAuthenticator } from '@firecms/authenticator';
import { useBuildNavigationController } from '@firecms/navigation';

// Placeholder for external configurations and collections
const firebaseConfig = { /* ... your firebase config ... */ };
const atlasConfig = { /* ... your atlas config ... */ };
const productsCollection = { /* ... your collection definition ... */ };

const MongoDBApp = () => {
  const name = "My FireCMS App";

  // Initialize Firebase
  const { firebaseApp, firebaseConfigLoading, configError } = useInitialiseFirebase({ firebaseConfig });

  // Initialize MongoDB
  const { app } = useInitRealmMongodb(atlasConfig);

  // Setup controllers and delegates
  const modeController = useBuildModeController();
  const userConfigPersistence = useBuildLocalConfigurationPersistence();
  const authController: MongoAuthController = useMongoDBAuthController({ app });
  const mongoDataSourceDelegate = useMongoDBDelegate({
    app,
    cluster: "mongodb-atlas",
    database: "todo"
  });
  const storageSource = useFirebaseStorageSource({ firebaseApp });

  // Authenticator validation
  const { authLoading, canAccessMainView, notAllowedError } = useValidateAuthenticator({
    authController,
    authenticator: () => true, // Replace with your actual authentication logic
    dataSourceDelegate: mongoDataSourceDelegate,
    storageSource
  });

  // Navigation controller
  const navigationController = useBuildNavigationController({
    collections: [productsCollection],
    authController,
    dataSourceDelegate: mongoDataSourceDelegate
  });

  // Loading and error handling for Firebase initialization
  if (firebaseConfigLoading || !firebaseApp) {
    return <CircularProgressCenter />;
  }

  if (configError) {
    return <CenteredView>{configError}</CenteredView>;
  }

  // Render the FireCMS application
  return (
    <SnackbarProvider>
      <ModeControllerProvider value={modeController}>
        <FireCMS
          navigationController={navigationController}
          authController={authController}
          userConfigPersistence={userConfigPersistence}
          dataSourceDelegate={mongoDataSourceDelegate}
          storageSource={storageSource}
        >
          {({ context, loading }) => {
            // Loading state for FireCMS and authentication
            if (loading || authLoading) {
              return <CircularProgressCenter size="large" />;
            }

            // Handle unauthorized access
            if (!canAccessMainView) {
              return (
                <MongoLoginView
                  allowSkipLogin={false}
                  authController={authController}
                  registrationEnabled={true}
                  notAllowedError={notAllowedError}
                />
              );
            }

            // Render the main application layout
            return (
              <Scaffold autoOpenDrawer={false}>
                <AppBar title={name} />
                <Drawer />
                <NavigationRoutes />
                <SideDialogs />
              </Scaffold>
            );
          }}
        </FireCMS>
      </ModeControllerProvider>
    </SnackbarProvider>
  );
};

export default MongoDBApp;

```

--------------------------------

### Menubar Example - React/TypeScript

Source: https://context7_llms

This example demonstrates a comprehensive menubar component built with React and TypeScript, utilizing the @firecms/ui library. It showcases nested menus, keyboard shortcuts, radio group selection, checkbox items, and disabled menu items, providing a template for interactive navigation elements.

```tsx
import React from "";
import {
    FiberManualRecordIcon,
    Menubar,
    MenubarCheckboxItem,
    MenubarContent,
    MenubarItem,
    MenubarItemIndicator,
    MenubarMenu,
    MenubarPortal,
    MenubarRadioGroup,
    MenubarRadioItem,
    MenubarSeparator,
    MenubarShortcut,
    MenubarSub,
    MenubarSubContent,
    MenubarSubTrigger,
    MenubarSubTriggerIndicator,
    MenubarTrigger
} from "@firecms/ui";

const RADIO_ITEMS = ["Andy", "Benoît", "Luis"];
const CHECK_ITEMS = ["Always Show Bookmarks Bar", "Always Show Full URLs"];

export default function MenubarDemo() {
    const [checkedSelection, setCheckedSelection] = React.useState([CHECK_ITEMS[1]]);
    const [radioSelection, setRadioSelection] = React.useState(RADIO_ITEMS[2]);

    return (
        <Menubar className={"rounded-lg mb-8"}>
            <MenubarMenu>
                <MenubarTrigger>
                    File
                </MenubarTrigger>
                <MenubarPortal>
                    <MenubarContent>
                        <MenubarItem>
                            New Tab{" "}
                            <MenubarShortcut>
                                ⌘ T
                            </MenubarShortcut>
                        </MenubarItem>
                        <MenubarItem>
                            New Window{" "}
                            <MenubarShortcut>
                                ⌘ N
                            </MenubarShortcut>
                        </MenubarItem>
                        <MenubarItem disabled
                        >
                            New Incognito Window
                        </MenubarItem>
                        <MenubarSeparator/>
                        <MenubarSub>
                            <MenubarSubTrigger>
                                Share
                                <MenubarSubTriggerIndicator/>
                            </MenubarSubTrigger>
                            <MenubarPortal>
                                <MenubarSubContent>
                                    <MenubarItem>
                                        Email Link
                                    </MenubarItem>
                                    <MenubarItem>
                                        Messages
                                    </MenubarItem>
                                    <MenubarItem>
                                        Notes
                                    </MenubarItem>
                                </MenubarSubContent>
                            </MenubarPortal>
                        </MenubarSub>
                        <MenubarSeparator/>
                        <MenubarItem>
                            Print…{" "}
                            <MenubarShortcut>
                                ⌘ P
                            </MenubarShortcut>
                        </MenubarItem>
                    </MenubarContent>
                </MenubarPortal>
            </MenubarMenu>

            <MenubarMenu>
                <MenubarTrigger>
                    Edit
                </MenubarTrigger>
                <MenubarPortal>
                    <MenubarContent>
                        <MenubarItem>
                            Undo{" "}
                            <MenubarShortcut
                            >
                                ⌘ Z
                            </MenubarShortcut>
                        </MenubarItem>
                        <MenubarItem>
                            Redo{" "}
                            <MenubarShortcut
                            >
                                ⇧ ⌘ Z
                            </MenubarShortcut>
                        </MenubarItem>
                        <MenubarSeparator/>
                        <MenubarSub>
                            <MenubarSubTrigger>
                                Find
                            </MenubarSubTrigger>

                            <MenubarPortal>
                                <MenubarSubContent>
                                    <MenubarItem>
                                        Search the web…
                                    </MenubarItem>
                                    <MenubarSeparator/>
                                    <MenubarItem>
                                        Find…
                                    </MenubarItem>
                                    <MenubarItem>
                                        Find Next
                                    </MenubarItem>
                                    <MenubarItem>
                                        Find Previous
                                    </MenubarItem>
                                </MenubarSubContent>
                            </MenubarPortal>
                        </MenubarSub>

```

--------------------------------

### Example: Archive Product Action with Backend Call

Source: https://context7_llms

An example showing how to implement a custom 'Archive' entity action that calls a backend endpoint (e.g., Google Cloud Function) via `fetch` and uses the FireCMS `snackbarController` for user feedback. The action can be configured to be visible in the menu or form.

```tsx
export const productsCollection = buildCollection<Product>({
    id: "products",
    path: "products",
    // other properties
    entityActions: [
        {
            icon: <ArchiveIcon/>,
            name: "Archive",
            collapsed: false,
            onClick({ 
                        entity,
                        collection,
                        context,
                    }) {
                const snackbarController = context.snackbarController;
                return fetch("[YOUR_ENDPOINT]/archiveProduct", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        productId: entity.id
                    })
                }).then(() => {
                    snackbarController.open({
                        message: "Product archived",
                        type: "success"
                    });
                }).catch((error) => {
                    snackbarController.open({
                        message: "Error archiving product",
                        type: "error"
                    });
                });
            }
        }
    ],
});
```

--------------------------------

### FireCMS UI Sheet from Top Example

Source: https://context7_llms

Demonstrates configuring the Sheet component to slide in from the top of the screen. This example uses the 'side="top"' prop to change the sheet's entry point.

```tsx
import React, { useState } from "";
import { Button, Sheet } from "@firecms/ui";

export default function SheetTopDemo() {
    const [open, setOpen] = useState(false);

    return (
        <div>
            <Button onClick={() => setOpen(true)}>Open Top Sheet</Button>
            <Sheet open={open} onOpenChange={setOpen} side="top">
                <div className={"bg-white dark:bg-gray-800 p-4 w-full"}>
                    Sheet Content
                </div>
            </Sheet>
        </div>
    );
}
```

--------------------------------

### Set up Amplify Storage

Source: https://docs.amplify.aws/react/build-a-backend/storage/

Guides on how to set up Amplify Storage for your React project, enabling cloud-based file storage capabilities.

```bash
amplify add storage
# Follow the prompts to configure storage
```

```javascript
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';

Amplify.configure(awsExports);

// Now you can use Amplify Storage APIs
```

--------------------------------

### Loading Button with Start Icon

Source: https://context7_llms

Shows how to enhance the LoadingButton by including a start icon. The icon is displayed when the button is not in a loading state, providing visual cues to the user. The example uses the AddIcon component.

```tsx
import React from "react";
import { AddIcon, LoadingButton } from "@firecms/ui";

export default function LoadingButtonWithIconDemo() {
    const [loading, setLoading] = React.useState(false);

    const onClick = () => {
        setLoading(true);
        setTimeout(() => {
            setLoading(false);
        }, 2000);
    };

    return (
        <LoadingButton
            startIcon={<AddIcon size={"small"}/>}
            loading={loading}
            onClick={onClick}>
            Click Me
        </LoadingButton>
    );
}
```

--------------------------------

### FireCMS Project Initialization

Source: https://context7_llms

Commands to create a new FireCMS project using the PRO starter template, available via npx or yarn.

```bash
npx create-firecms-app --pro
```

```bash
yarn create firecms-app --pro
```

--------------------------------

### Firebase App Loader Script

Source: https://firebase.google.com/docs/app-check/web/recaptcha-provider

This JavaScript snippet is used to load the Firebase App SDK and initialize it for the web application. It dynamically creates a script tag and appends it to the document's head.

```javascript
(function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/va786e79970aec04a12496606282a334acd24e2232e80173e6a239f5c02ccbb7e/firebase/js/app_loader.js', '[4,"ca",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/va786e79970aec04a12496606282a334acd24e2232e80173e6a239f5c02ccbb7e","https://www.gstatic.com/devrel-devsite/prod/va786e79970aec04a12496606282a334acd24e2232e80173e6a239f5c02ccbb7e/firebase","https://firebase-dot-devsite-v2-prod.appspot.com",null,null,[\"/_pwa/firebase/manifest.json\",\"https://www.gstatic.com/devrel-devsite/prod/va786e79970aec04a12496606282a334acd24e2232e80173e6a239f5c02ccbb7e/images/video-placeholder.svg\",\"https://www.gstatic.com/devrel-devsite/prod/va786e79970aec04a12496606282a334acd24e2232e80173e6a239f5c02ccbb7e/firebase/images/favicon.png\",\"https://www.gstatic.com/devrel-devsite/prod/va786e79970aec04a12496606282a334acd24e2232e80173e6a239f5c02ccbb7e/firebase/images/lockup.svg\",\"https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap\"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyAP-jjEJBzmIyKR4F-3XITp8yM9T1gEEI8","AIzaSyB6xiKGDR5O3Ak2okS4rLkauxGUG7XP0hg","firebase.google.com","AIzaSyAQk0fBONSGUqCNznf6Krs82Ap1-NV6J4o","AIzaSyCCxcqdrZ_7QMeLCRY20bh_SXdAYqy70KY",null,null,null,["Profiles__enable_developer_profiles_callout","MiscFeatureFlags__enable_llms_txt","MiscFeatureFlags__enable_variable_operator_index_yaml","Profiles__require_profile_eligibility_for_signin","DevPro__enable_cloud_innovators_plus","DevPro__enable_firebase_workspaces_card","DevPro__enable_developer_subscriptions","DevPro__enable_google_payments","Cloud__enable_llm_concierge_chat","MiscFeatureFlags__enable_firebase_utm","Profiles__enable_page_saving","Profiles__enable_stripe_subscription_management","MiscFeatureFlags__enable_explicit_template_dependencies","Concierge__enable_pushui","Concierge__enable_concierge","MiscFeatureFlags__enable_variable_operator","Significatio__enable_by_tenant","Analytics__enable_clearcut_logging","CloudShell__cloud_code_overflow_menu","TpcFeatures__enable_unmirrored_page_left_nav","TpcFeatures__proxy_prod_host","Search__enable_suggestions_from_borg","CloudShell__cloud_shell_button","Profiles__enable_recognition_badges","Cloud__enable_cloud_dlp_service","MiscFeatureFlags__enable_view_transitions","Profiles__enable_dashboard_curated_recommendations","MiscFeatureFlags__developers_footer_dark_image","DevPro__enable_enterprise","MiscFeatureFlags__enable_explain_this_code","EngEduTelemetry__enable_engedu_telemetry","Search__enable_ai_search_summaries_for_all","MiscFeatureFlags__enable_project_variables","Profiles__enable_profile_collections","Search__enable_dynamic_content_confidential_banner","MiscFeatureFlags__developers_footer_image","Cloud__enable_cloudx_experiment_ids","DevPro__enable_nvidia_credits_card","MiscFeatureFlags__emergency_css","Cloud__enable_legacy_calculator_redirect","Concierge__enable_actions_menu","Search__enable_page_map","Profiles__enable_completecodelab_endpoint","MiscFeatureFlags__enable_appearance_cookies","Profiles__enable_completequiz_endpoint","Profiles__enable_public_developer_profiles","MiscFeatureFlags__enable_dark_theme","DevPro__enable_devpro_offers","Cloud__enable_cloud_shell_fte_user_flow","DevPro__enable_free_benefits","Profiles__enable_playlist_community_acl","Search__enable_ai_search_summaries","Profiles__enable_join_program_group_endpoint","Cloud__fast_free"])
```

--------------------------------

### Initialize Firestore and Deploy Rules

Source: https://firebase.google.com/docs/firestore/security/get-started

This snippet demonstrates the process of initializing Firestore in a project directory, editing the security rules file, and deploying the rules for all configured databases using the Firebase CLI.

```bash
firebase init firestore

# Edit the generated .rules file to your desired security rules
# ...

firebase deploy --only firestore
```

--------------------------------

### Example: Build Property for Tag Preview

Source: https://context7_llms

Demonstrates configuring an array of strings where each string element is previewed as a tag using buildProperty.

```tsx
const property = buildProperty({
    name: "Tags",
    description: "Example of generic array",
    dataType: "array",
    of: {
        dataType: "string",
        previewAsTag: true
    }
});
```

--------------------------------

### FireCMS Cloud App Configuration

Source: https://context7_llms

Configures a FireCMS application for cloud deployment, defining custom views and collections. It uses `@firecms/core` and `@firecms/cloud` for setup. The example shows how to integrate a custom React component as a view and define a product collection.

```tsx
import { buildCollection, CMSView } from "@firecms/core";
import { ExampleCMSView } from "./ExampleCMSView";
import { FireCMSAppConfig, FireCMSCloudApp } from "@firecms/cloud";

const projectId = "YOUR_PROJECT_ID";

const customViews: CMSView[] = [{
    path: "additional",
    name: "Additional view",
    description: "This is an example of an additional view that is defined by the user",
    // This can be any React component
    view: <ExampleCMSView/>
}];

const productCollection = buildCollection({
    name: "Product",
    id: "products",
    path: "products",
    properties: {
        name: {
            name: "Name",
            validation: { required: true },
            dataType: "string"
        }
    }
});

const appConfig: FireCMSAppConfig = {
    version: "1",
    collections: ({ user }) => [
        productCollection
    ],
    views: customViews
};

export default function App() {

    return <FireCMSCloudApp
        projectId={projectId}
        appConfig={appConfig}
    />;
}
```

--------------------------------

### FireCMS App Initialization and Rendering

Source: https://context7_llms

Sets up the core FireCMS application by initializing various controllers and plugins, handling loading and authentication states, and rendering the main application layout. It includes dependencies like authentication, data sources, and navigation.

```javascript
const { useValidateAuthenticator } = require("@firecms/core");
const { useBuildNavigationController } = require("@firecms/core");
const { useUserManagementPlugin } = require("@firecms/user_management");
const { useImportPlugin } = require("@firecms/import_export");
const { useExportPlugin } = require("@firecms/import_export");
const { useCollectionEditorPlugin } = require("@firecms/collection_editor");
const { CircularProgressCenter } = require("@firecms/ui");
const { FirebaseLoginView } = require("@firecms/firebase_ui");
const { FireCMS } = require("@firecms/core");
const { Scaffold } = require("@firecms/ui");
const { AppBar } = require("@firecms/ui");
const { Drawer } = require("@firecms/ui");
const { NavigationRoutes } = require("@firecms/ui");
const { SideDialogs } = require("@firecms/ui");
const { SnackbarProvider } = require("@firecms/ui");
const { ModeControllerProvider } = require("@firecms/ui");

// ... other imports and setup

function MyApp({ firebaseConfigLoading, firebaseApp, configError, authController, userManagement, firestoreDelegate, storageSource, userConfigPersistence, signInOptions, notAllowedError, modeController }) {
    const { authenticator, loading: userManagementLoading, collectionPermissions } = userManagement;
    const authLoading = userManagement.loading;
    const canAccessMainView = !authLoading && authenticator;

    const { useValidateAuthenticator } = useValidateAuthenticator({
        disabled: userManagement.loading,
        authenticator: userManagement.authenticator,
        authController,
        dataSourceDelegate: firestoreDelegate,
        storageSource
    });

    const collectionsBuilder = useCallback(() => {
        const collections = [
            booksCollection
        ];
        return mergeCollections(collections, collectionConfigController.collections ?? []);
    }, [collectionConfigController.collections]);

    const navigationController = useBuildNavigationController({
        basePath: "/",
        collections: collectionsBuilder,
        collectionPermissions: userManagement.collectionPermissions,
        adminViews: userManagementAdminViews,
        authController,
        dataSourceDelegate: firestoreDelegate
    });

    const userManagementPlugin = useUserManagementPlugin({ userManagement });
    const importPlugin = useImportPlugin();
    const exportPlugin = useExportPlugin();
    const collectionEditorPlugin = useCollectionEditorPlugin({
        collectionConfigController
    });

    if (firebaseConfigLoading || !firebaseApp) {
        return <><CircularProgressCenter/></>;
    }

    if (configError) {
        return <>{configError}</>;
    }

    return (
        <SnackbarProvider>
            <ModeControllerProvider value={modeController}>
                <FireCMS
                    navigationController={navigationController}
                    authController={authController}
                    userConfigPersistence={userConfigPersistence}
                    dataSourceDelegate={firestoreDelegate}
                    storageSource={storageSource}
                    plugins={[importPlugin, exportPlugin, userManagementPlugin, collectionEditorPlugin]}
                >
                    {({ context, loading }) => {
                        if (loading || authLoading) {
                            return <CircularProgressCenter size={"large"}/>;
                        }
                        if (!canAccessMainView) {
                            return <FirebaseLoginView authController={authController}
                                                      firebaseApp={firebaseApp}
                                                      signInOptions={signInOptions}
                                                      notAllowedError={notAllowedError}/>;
                        }

                        return <Scaffold
                            autoOpenDrawer={false}>
                            <AppBar title={"My demo app"}/>
                            <Drawer/>
                            <NavigationRoutes/>
                            <SideDialogs/>
                        </Scaffold>;
                    }}
                </FireCMS>
            </ModeControllerProvider>
        </SnackbarProvider>
    );
}

```

--------------------------------

### App Check Debug Provider for Web Apps

Source: https://firebase.google.com/docs/app-check/web/recaptcha-provider

This snippet outlines the concept of using a debug provider for App Check in web applications. It's intended for development and testing scenarios where standard attestation might not be feasible. Refer to the official documentation for implementation details.

```APIDOC
App Check Debug Provider:
  Purpose: Enables App Check functionality in debug environments (e.g., local development, CI) by bypassing standard attestation checks.
  Usage: Typically involves configuring your web app to use a specific debug provider during development builds.
  Reference: See [Use App Check with the debug provider in web apps](/docs/app-check/web/debug-provider).
  Limitations: Not intended for production environments; relies on pre-shared keys or other debug-specific mechanisms.
```

--------------------------------

### AWS SDK for Java: Manage S3 Bucket CORS Configuration

Source: https://docs.aws.amazon.com/AmazonS3/latest/userguide/enabling-cors-examples.html

This Java code snippet demonstrates managing S3 bucket CORS configurations using the AWS SDK. It includes examples for setting, retrieving, modifying, and deleting CORS rules, handling multiple rules and origins.

```Java
import com.amazonaws.AmazonServiceException; import com.amazonaws.SdkClientException; import com.amazonaws.auth.profile.ProfileCredentialsProvider; import com.amazonaws.regions.Regions; import com.amazonaws.services.s3.AmazonS3; import com.amazonaws.services.s3.AmazonS3ClientBuilder; import com.amazonaws.services.s3.model.BucketCrossOriginConfiguration; import com.amazonaws.services.s3.model.CORSRule; import java.io.IOException; import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class CORS { public static void main(String[] args) throws IOException { Regions clientRegion = Regions.DEFAULT_REGION; String bucketName = "*** Bucket name ***"; // Create two CORS rules. List<CORSRule.AllowedMethods> rule1AM = new ArrayList<CORSRule.AllowedMethods>(); rule1AM.add(CORSRule.AllowedMethods.PUT); rule1AM.add(CORSRule.AllowedMethods.POST); rule1AM.add(CORSRule.AllowedMethods.DELETE); CORSRule rule1 = new CORSRule().withId("CORSRule1").withAllowedMethods(rule1AM) .withAllowedOrigins(Arrays.asList("http://*.example.com")); List<CORSRule.AllowedMethods> rule2AM = new ArrayList<CORSRule.AllowedMethods>(); rule2AM.add(CORSRule.AllowedMethods.GET); CORSRule rule2 = new CORSRule().withId("CORSRule2").withAllowedMethods(rule2AM) .withAllowedOrigins(Arrays.asList("*")).withMaxAgeSeconds(3000) .withExposedHeaders(Arrays.asList("x-amz-server-side-encryption")); List<CORSRule> rules = new ArrayList<CORSRule>(); rules.add(rule1); rules.add(rule2); // Add the rules to a new CORS configuration. BucketCrossOriginConfiguration configuration = new BucketCrossOriginConfiguration(); configuration.setRules(rules); try { AmazonS3 s3Client = AmazonS3ClientBuilder.standard() .withCredentials(new ProfileCredentialsProvider()) .withRegion(clientRegion) .build(); // Add the configuration to the bucket. s3Client.setBucketCrossOriginConfiguration(bucketName, configuration); // Retrieve and display the configuration. configuration = s3Client.getBucketCrossOriginConfiguration(bucketName); printCORSConfiguration(configuration); // Add another new rule. List<CORSRule.AllowedMethods> rule3AM = new ArrayList<CORSRule.AllowedMethods>(); rule3AM.add(CORSRule.AllowedMethods.HEAD); CORSRule rule3 = new CORSRule().withId("CORSRule3").withAllowedMethods(rule3AM) .withAllowedOrigins(Arrays.asList("http://www.example.com")); rules = configuration.getRules(); rules.add(rule3); configuration.setRules(rules); s3Client.setBucketCrossOriginConfiguration(bucketName, configuration); // Verify that the new rule was added by checking the number of rules in the // configuration. configuration = s3Client.getBucketCrossOriginConfiguration(bucketName); printCORSConfiguration(configuration); } catch (AmazonServiceException e) { // The call was transmitted successfully, but Amazon S3 couldn't process // it, so it returned an error response. e.printStackTrace(); } catch (SdkClientException e) { // Amazon S3 couldn't be contacted for a reason other than the server // being down or offline. These exceptions are rare, but could happen if // there is a network issue; the SDK itself is unable to connect to S3. e.printStackTrace(); } } // Helper method to print CORS configuration public static void printCORSConfiguration(BucketCrossOriginConfiguration configuration) { if (configuration == null || configuration.getRules() == null || configuration.getRules().isEmpty()) { System.out.println("No CORS configuration found."); return; } System.out.println("CORS Configuration:"); for (CORSRule rule : configuration.getRules()) { System.out.println("  Rule ID: " + rule.getId()); System.out.println("  Allowed Methods: " + rule.getAllowedMethods()); System.out.println("  Allowed Origins: " + rule.getAllowedOrigins()); System.out.println("  Exposed Headers: " + rule.getExposedHeaders()); System.out.println("  Max Age Seconds: " + rule.getMaxAgeSeconds()); System.out.println("  Allowed Headers: " + rule.getAllowedHeaders()); System.out.println("---"); } }}
```

--------------------------------

### Initialize Firebase App Check with reCAPTCHA v3

Source: https://firebase.google.com/docs/app-check/web/recaptcha-provider

Initializes Firebase App Check for a web application using the reCAPTCHA v3 provider. This involves importing necessary modules, configuring the Firebase app, and activating App Check with your reCAPTCHA site key. It also covers enabling automatic token refresh.

```javascript
import { initializeApp } from "firebase/app";
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";

const app = initializeApp({
  // Your firebase configuration object
});

// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider('abcdefghijklmnopqrstuvwxy-1234567890abcd'),

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  isTokenAutoRefreshEnabled: true
});
```

```javascript
firebase.initializeApp({
  // Your firebase configuration object
});

const appCheck = firebase.appCheck();
// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
appCheck.activate(
  'abcdefghijklmnopqrstuvwxy-1234567890abcd',

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  true);

// Alternatively, enable auto-refresh separately:
// firebase.appCheck().setTokenAutoRefreshEnabled(true);
```

--------------------------------

### Initialize Navigation Controller

Source: https://context7_llms

Demonstrates the initialization of a navigation controller using the `useBuildNavigationController` hook. It requires configurations for collections, views, admin views, collection permissions, an authentication controller, and a data source delegate.

```jsx
const navigationController = useBuildNavigationController({
    collections: customCollections,
    views: customViews,
    adminViews: userManagementAdminViews,
    collectionPermissions: collectionEditorPlugin.collectionPermissions,
    authController,
    dataSourceDelegate: firestoreDelegate
});
```