Merge branch 'main' into feature/merge-v2

Author: leighajarett

docs/ff-concepts/design-system/design-system.md

@@ -196,6 +196,47 @@ If you prefer watching a video tutorial, here is the guide for you:
 </div>
 <p></p>
 
+## Use Library as Design System
+
+You can also import a design system from the [Library](../../resources/projects/libraries.md) added to your project. A library can serve as a central repository for your design assets, components, and styles—effectively becoming a Design Library for your application(s).
+
+:::tip[possible use cases]
+
+- **Enterprise Applications:** Large organizations can develop a centralized design system as a library to ensure all internal applications maintain a cohesive look and feel, enhancing brand identity and user experience.
+- **Startup MVPs:** Startups can expedite the development of Minimum Viable Products (MVPs) by leveraging a pre-built design library like [**shadcn**](https://marketplace.flutterflow.io/item/cNlm0zWW1Nfq11cFXBmp), allowing them to focus on functionality and user validation.
+- **Cross-Platform Consistency:** Teams aiming to deploy apps across multiple platforms (iOS, Android, Web) can use a popular design system library to ensure uniformity in design, reducing the effort required for platform-specific adjustments.
+
+:::
+
+To add a design system from a library, first, ensure that you [add a library dependency to your project](../../resources/projects/libraries.md#importing-a-library). Then, navigate to **Theme Settings > Design System** and click on **No Design System Selected**. From the dropdown menu, **Select a library** you want to use.
+
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/G3PekDcZNsWYrKoz3xnE?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+
 ---
 
 ## Loading Indicator

docs/resources/control-flow/user-interactivity/forms/forms.md

@@ -1,16 +1,16 @@
 ---
 slug: /resources/forms
-title: Overview
+title: Forms Overview
 tags: [Forms]
 keywords: [FlutterFlow, forms, input fields, user interface, mobile app development, data collection, user interaction]
 description: Learn how to work with Forms in FlutterFlow app.
 sidebar_position: 0
 ---
 
 
-# Overview 
+# Forms Overview 
 Forms are a fundamental part of many applications, serving as the primary method for users to input and submit data. Whether you're building a simple contact form or a complex multi-step survey, FlutterFlow provides a comprehensive set of tools to create, validate, and manage forms effectively.
 
 :::tip
 In this section, you'll learn how to add form widgets such as [**TextField**](form-widgets/text-field.md), [**Dropdown**](form-widgets/dropdown.md), [**RadioButton**](form-widgets/radiobutton.md), [**Checkbox Widgets**](form-widgets/checkbox.md) and add [**Validations**](form-validation.md) and [**set**](form-actions/set-form-field.md)/[**reset**](form-actions/reset-form-field.md) actions on these widgets.
-:::
+:::

docs/resources/projects/libraries.md

@@ -85,7 +85,6 @@ To publish a FlutterFlow project as a library, start by creating a FlutterFlow p
 When a project is converted into a library, the following features are disabled to ensure compatibility and functionality limitations:
 
 - App settings 
-  - Firebase
   - Supabase
   - Development environments
   - Authentication
@@ -98,8 +97,6 @@ When a project is converted into a library, the following features are disabled
   - Google Analytics 
   - OneSignal 
   - Mux 
-- Cloud functions
-- Firestore Collections
 
 ## Importing a Library
 
@@ -318,6 +315,24 @@ To set library values, navigate to **Settings and Integrations > Project Setup >
 For different [**development environments**](../../testing-deployment-publishing/development-environments/development-environments.md) (e.g., development vs. production), you can bind Library Values to [**environment values**](../../testing-deployment-publishing/development-environments/development-environments.md#use-environment-values). For instance, you could have two different Library Values for an API key, such as `DEV_OPENAI_API_KEY` and `PROD_OPENAI_API_KEY`, and bind them to the development and production environments to track API usage separately.
 :::
 
+## Libraries with Firebase
+You can create collections and enable various Firebase features in library projects without connecting a separate Firebase project.
+
+In library projects, you won’t see an option to link to a Firebase project. Instead, the project that imports the library handles the actual Firebase connection.
+
+Any indexes or security rules defined in the library are recognized by the importing project and deployed accordingly.
+
+:::warning[Limitations]
+Libraries work with Firebase but have **some limitations**. The **Firebase Auth** and **Firebase Storage** are not directly supported in library projects at this time. If you need these features in your library’s functionality, you can include an action that accomplishes this task as a [**callback**](../../resources/ui/components/callbacks.md). 
+:::
+
+If your team has multiple projects that share a common Firebase feature, turning it into a library is a great idea. This ensures the same logic is used and connects to the same Firestore project across all apps.
+
+Here are some examples of library projects you can build with Firebase:
+
+- **Basic Analytics or Tracking**: A library that logs events to Firestore; useful for aggregating usage data at an application level.
+- **Configuration or Settings**: A library that serves app-wide configurations (like feature flags, UI themes, or layout choices) is handled in Firebase Remote Config.
+
 ## FAQs
 
 <details>
@@ -328,16 +343,16 @@ Team code and API libraries will be migrated to library Projects. These projects
 </details>
 
 <details>
-<summary>Will libraries work with Marketplace?</summary>
+<summary>Do libraries work with Marketplace?</summary>
 <p>
-We plan to allow users to import a marketplace project as a library, making it easier to integrate marketplace resources into your projects.
+Yes, you can add and import a Marketplace project as a library.
 </p>
 </details>
 
 <details>
-<summary>How do libraries work with themes?</summary>
+<summary>How do libraries work with themes (design systems)?</summary>
 <p>
-The parent project's design system takes precedence over the imported library's design system. For example, if a library uses the standard FlutterFlow color scheme, the values defined in the parent project will override those in the library. However, if the library project has a custom color that the parent project does not have, it will be used as-is in the parent project.
+By default, the design system of the parent project takes precedence over the imported library's design system. If you want to use a library's design system, you must [**select or set the library in the Design System**](../../ff-concepts/design-system/design-system.md#use-library-as-design-system) page.
 </p>
 </details>
 

docs/resources/projects/settings/general-settings.md

@@ -16,7 +16,7 @@ This section allows you to customize a wide range of settings that are crucial f
 
 ### Change Project, Package, and Display Name
 
-If you didn't decide on the app or package name when creating a new project, you might have entered a random name. From here, you can change the name anytime.
+Modify the app or package name of your project from this settings. You can also define different package names based on the development environment selected. 
 
 You can set a different name for the *App Store* and *Play Store* using the **Display Name**.
 
@@ -28,8 +28,9 @@ After changing the package name, errors may appear on the toolbar due to invalid
 
 You can specify your app's **Entry Page** and **Logged In** **Page** from this section.
 
-- **Entry Page**: This is the home page for your app. If authentication is enabled, users who are not logged in will see this page, which is typically set to a login/signup or onboarding page.
-- **Logged In Page** (*available only if auth is enabled*): This page is displayed on the app start if a user is already logged in. Users are automatically navigated to the page you specify here on a successful sign-in attempt.
+- **Entry Page**: This serves as the home page for your app. When authentication is disabled, all users are directed to this page by default. If authentication is enabled, this page becomes the login, signup, or onboarding page for users who are not authenticated.
+- **Logged In Page** (*available only if auth is enabled*): This page is displayed when the app starts for authenticated users. If a user successfully signs in, they are automatically redirected to the page specified here. If the user is already authenticated, this page bypasses the Entry Page.
+
 
 To set the page, simply choose the page that you want to use from the dropdown menu.
 
@@ -74,35 +75,8 @@ If you want the improved folder organization for your project, **Enable Updated
 
 ### Routing & Deep Linking
 
-From here, you can configure the global settings for navigation and deep link in your app [here](../../../ff-concepts/navigation-routing/deep-dynamic-linking.md).
-
+Configure the global settings for navigation and deep link in your app. To learn, how to set up deeplinks, check out the **[Deep & Dynamic Linking](../../../ff-concepts/navigation-routing/deep-dynamic-linking.md)** guide.
 
-If you prefer watching a video tutorial, here is the guide for you:
-<div style={{
-    position: 'relative',
-    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
-    height: 0,
-    width: '100%'}}>
-    <iframe 
-        src="https://www.youtube.com/embed/H_3yQsa8wT8"
-        title=""
-        style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            colorScheme: 'light'
-        }}
-        frameborder="0"
-        loading="lazy"
-        webkitAllowFullScreen
-        mozAllowFullScreen
-        allowFullScreen
-        allow="clipboard-write">
-    </iframe>
-</div>
-<p></p>
 
 ## App Assets
 
@@ -185,4 +159,4 @@ See the following resources for more information on Android adaptive icons.
 - [Implementing Adaptive Icons](https://medium.com/google-developers/implementing-adaptive-icons-1e4d1795470e)
 
 ## Nav Bar & App Bar
-See how to configure the [Nav Bar](../../ui/pages/page-elements.md#enable-nav-bar-in-settings) and the [App Bar](../../ui/pages/page-elements.md#appbar).
+See how to configure the [Nav Bar](../../ui/pages/page-elements.md#enable-nav-bar-in-settings) and the [App Bar](../../ui/pages/page-elements.md#appbar).

docs/resources/ui/widgets/composing-widgets/list-grid.md

@@ -47,7 +47,7 @@ Axis sets the orientation of the ListView. You can select either "Vertical" or
 
 ![listview-reverse.png](../built-in-widgets/imgs/listview-reverse.png)
 
-#### Make List Reorderable
+### Reorderable List
 Whether to allow reordering of items in the list. On Web or Desktop this will 
 add drag handles, but on mobile
   the reorder is triggerred by long pressing an item.
@@ -64,7 +64,7 @@ action trigger to make any necessary changes yourself.
 
 Here's a quick tutorial to set up your Reorderable ListView:
 
-##### Using App State variable
+#### Using App State variable
 
 1. First, create an app state variable with a few items of type String and display them on the 
 ListView widget.
@@ -116,7 +116,7 @@ return list;
 com/embed/bb961c71d11a4e7d8869170727d1423d?sid=a356162d-76df-45bb-930c-bebf8358ce6c" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
 
 
-##### Reordering Items in a Firebase Query
+#### Reordering Items in a Firebase Query
 
 If you want to reorder the list items retrieved via Firebase query collection, the steps are almost similar except for the following changes.
 
@@ -540,4 +540,4 @@ Follow the steps below to add this action to any widget.
         allow="clipboard-write">
     </iframe>
 </div>
-<p></p>
+<p></p>